diff --git a/.bookignore b/.bookignore new file mode 100644 index 00000000000..7e458990f2f --- /dev/null +++ b/.bookignore @@ -0,0 +1,6 @@ +.bookignore +.github +.gitignore +crowdin.yaml +package-lock.json +package.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000000..ee061951a8b --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,24 @@ +# default: +* @DjangoGirls/committers + +# language PR review teams for the respective translations: +/bg/ @DjangoGirls/bg-pr +/cs/ @DjangoGirls/cs-pr +/de/ @DjangoGirls/de-pr +/el/ @DjangoGirls/el-pr +/en/ @DjangoGirls/en-pr +/es/ @DjangoGirls/es-pr +/fa/ @DjangoGirls/fa-pr +/fr/ @DjangoGirls/fr-pr +/hu/ @DjangoGirls/hu-pr +/hy/ @DjangoGirls/hy-pr +/it/ @DjangoGirls/it-pr +/ja/ @DjangoGirls/ja-pr +/ko/ @DjangoGirls/ko-pr +/pl/ @DjangoGirls/pl-pr +/pt/ @DjangoGirls/pt-pr +/ru/ @DjangoGirls/ru-pr +/sk/ @DjangoGirls/sk-pr +/tr/ @DjangoGirls/tr-pr +/uk/ @DjangoGirls/uk-pr +/zh/ @DjangoGirls/zh-pr diff --git a/.github/issue_template.md b/.github/issue_template.md new file mode 100644 index 00000000000..52373ac3126 --- /dev/null +++ b/.github/issue_template.md @@ -0,0 +1,11 @@ +### Issue description + +Describe what's the problem here. + +### Language + +Is this related to a specific language of the tutorial? + +### Operating system + +What operating system does this issue relate to? diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 00000000000..741ca75c3e7 --- /dev/null +++ b/.github/pull_request_template.md @@ -0,0 +1,5 @@ +Changes in this pull request: + +- +- +- diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 00000000000..0f9e33b9a56 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,54 @@ +--- +name: Build and Deploy + +on: + push: + branches: + - master + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + build: + runs-on: ubuntu-24.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + persist-credentials: false + - uses: awalsh128/cache-apt-pkgs-action@v1 + with: + packages: calibre + - name: Install and Build + run: | + sudo apt install rename + npm install + npx honkit build + npx honkit epub + rename 's/^book/django-girls-tutorial/' book_*.epub + mv *.epub _book/ + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: _book + + deploy: + needs: build + permissions: + pages: write + id-token: write + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-24.04 + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 00000000000..f0bd5c4a811 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,17 @@ +name: Build +on: + - pull_request + +jobs: + build: + runs-on: ubuntu-24.04 + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + persist-credentials: false + + - name: Install and Build + run: | + npm install + npx honkit build diff --git a/.gitignore b/.gitignore index 53de980d74a..3045a3d9538 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,8 @@ MANIFEST .DS_Store _book node_modules +package-lock.json +.idea +.swp +.langs +.vscode/ diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 00000000000..e69de29bb2d diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000000..c28f4c7a21b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,587 @@ +# Change Log + +## [v1.1.0+20150402](https://github.com/djangogirls/tutorial/tree/v1.1.0+20150402) (2015-04-02) + +[Full Changelog](https://github.com/djangogirls/tutorial/compare/v1.0.0+20150329...v1.1.0+20150402) + +**Implemented enhancements:** + +- Warning before git section in the deploy chapter [\#297](https://github.com/DjangoGirls/tutorial/issues/297) + +**Closed issues:** + +- Add .pyc files to .gitignore [\#302](https://github.com/DjangoGirls/tutorial/issues/302) + +**Merged pull requests:** + +- typo fix [\#309](https://github.com/DjangoGirls/tutorial/pull/309) ([lancelote](https://github.com/lancelote)) + +- typos fix [\#308](https://github.com/DjangoGirls/tutorial/pull/308) ([lancelote](https://github.com/lancelote)) + +- Fix links in polish and ukrainian version [\#307](https://github.com/DjangoGirls/tutorial/pull/307) ([mrfuxi](https://github.com/mrfuxi)) + +- Advise readers not to use non-ascii characters [\#305](https://github.com/DjangoGirls/tutorial/pull/305) ([xavierdutreilh](https://github.com/xavierdutreilh)) + +- working directory warning and git status intro [\#304](https://github.com/DjangoGirls/tutorial/pull/304) ([lancelote](https://github.com/lancelote)) + +- Fixed \#302 -- Added .pyc files to gitignore [\#303](https://github.com/DjangoGirls/tutorial/pull/303) ([MarkusH](https://github.com/MarkusH)) + +- Bumped Django version to 1.8 [\#301](https://github.com/DjangoGirls/tutorial/pull/301) ([MarkusH](https://github.com/MarkusH)) + +## [v1.0.0+20150329](https://github.com/djangogirls/tutorial/tree/v1.0.0+20150329) (2015-03-28) + +**Implemented enhancements:** + +- Consistently link to 127.0.0.1 [\#217](https://github.com/DjangoGirls/tutorial/issues/217) + +- Querysets are too early in the tutorial [\#176](https://github.com/DjangoGirls/tutorial/issues/176) + +- Treats should not only be unhealthy food [\#134](https://github.com/DjangoGirls/tutorial/issues/134) + +- Add "real" README [\#34](https://github.com/DjangoGirls/tutorial/issues/34) + +- Proofreading [\#26](https://github.com/DjangoGirls/tutorial/issues/26) + +- Deploy chapter - heroku create [\#12](https://github.com/DjangoGirls/tutorial/issues/12) + +- Show what's the goal of the tutorial in introduction [\#9](https://github.com/DjangoGirls/tutorial/issues/9) + +- Illustrations in explaining how Django works [\#2](https://github.com/DjangoGirls/tutorial/issues/2) + +**Fixed bugs:** + +- end of chapter 7 implies code editor isn't installed yet [\#263](https://github.com/DjangoGirls/tutorial/issues/263) + +- Links between chapters broken due to i18n [\#235](https://github.com/DjangoGirls/tutorial/issues/235) + +- Add import of timezone to ORM lesson for date filters [\#225](https://github.com/DjangoGirls/tutorial/issues/225) + +- add .py as a note/optional extension to scripts [\#181](https://github.com/DjangoGirls/tutorial/issues/181) + +- Remove bootstrap javascript from code example [\#170](https://github.com/DjangoGirls/tutorial/issues/170) + +- Screenshot doesn't match narrative documentation [\#141](https://github.com/DjangoGirls/tutorial/issues/141) + +- Improvements in HTML/Template chapters [\#113](https://github.com/DjangoGirls/tutorial/issues/113) + +- The chapter "Python installation" refers to console without explain it first [\#35](https://github.com/DjangoGirls/tutorial/issues/35) + +**Closed issues:** + +- At the point where we are asked to get all posts, we would probably have existing posts [\#282](https://github.com/DjangoGirls/tutorial/issues/282) + +- i would like to add korean [\#275](https://github.com/DjangoGirls/tutorial/issues/275) + +- Wrong chapter for deployment [\#262](https://github.com/DjangoGirls/tutorial/issues/262) + +- Dutch translation [\#258](https://github.com/DjangoGirls/tutorial/issues/258) + +- Language German [\#251](https://github.com/DjangoGirls/tutorial/issues/251) + +- Use \_\_lte=now\(\) instead of \_\_isnull=False when filtering published Posts [\#249](https://github.com/DjangoGirls/tutorial/issues/249) + +- Chapter 5: inequality operator is not described [\#245](https://github.com/DjangoGirls/tutorial/issues/245) + +- translation of Django Girls Tutorial into Russian [\#238](https://github.com/DjangoGirls/tutorial/issues/238) + +- Adding Farsi translation [\#236](https://github.com/DjangoGirls/tutorial/issues/236) + +- Please add German to crowdin.com [\#234](https://github.com/DjangoGirls/tutorial/issues/234) + +- Tutorial in french [\#228](https://github.com/DjangoGirls/tutorial/issues/228) + +- There is no translations of Chinese [\#226](https://github.com/DjangoGirls/tutorial/issues/226) + +- git commit -m "My Django Girls app" will not work [\#224](https://github.com/DjangoGirls/tutorial/issues/224) + +- Chapter 12: replace 'mysite' by 'djangogirls' [\#223](https://github.com/DjangoGirls/tutorial/issues/223) + +- Chapter 11: syncdb requires after creating superuser [\#222](https://github.com/DjangoGirls/tutorial/issues/222) + +- Translation into Ukrainian [\#216](https://github.com/DjangoGirls/tutorial/issues/216) + +- "Django ORM": `User` vs. `user` is confusing [\#215](https://github.com/DjangoGirls/tutorial/issues/215) + +- Translate the tutorial to spanish [\#213](https://github.com/DjangoGirls/tutorial/issues/213) + +- Switch to files earlier in the "Intro to Python" chapter [\#212](https://github.com/DjangoGirls/tutorial/issues/212) + +- Switch to file-based code execution in chapter 4 \(intro to python\) [\#207](https://github.com/DjangoGirls/tutorial/issues/207) + +- Go back to using gunicorn [\#206](https://github.com/DjangoGirls/tutorial/issues/206) + +- After deploying to heroku, it shouldn't show 404 [\#192](https://github.com/DjangoGirls/tutorial/issues/192) + +- Split the Python Introduction chapter to use files instead of command line [\#190](https://github.com/DjangoGirls/tutorial/issues/190) + +- Tutorial skips over the need to stop runserver [\#187](https://github.com/DjangoGirls/tutorial/issues/187) + +- missing jQuery [\#184](https://github.com/DjangoGirls/tutorial/issues/184) + +- wrong directory in Django Girls Tutorial: Extensions [\#183](https://github.com/DjangoGirls/tutorial/issues/183) + +- file encoding [\#180](https://github.com/DjangoGirls/tutorial/issues/180) + +- change font for code samples [\#179](https://github.com/DjangoGirls/tutorial/issues/179) + +- bug: search is not working [\#177](https://github.com/DjangoGirls/tutorial/issues/177) + +- Highlight double underscores [\#166](https://github.com/DjangoGirls/tutorial/issues/166) + +- Explain \o/ symbols [\#162](https://github.com/DjangoGirls/tutorial/issues/162) + +- Bringing git push heroku master back [\#160](https://github.com/DjangoGirls/tutorial/issues/160) + +- Location of warning in the intro to command line. [\#151](https://github.com/DjangoGirls/tutorial/issues/151) + +- Session missing. [\#149](https://github.com/DjangoGirls/tutorial/issues/149) + +- How to build the docs? [\#145](https://github.com/DjangoGirls/tutorial/issues/145) + +- heroku-push bug on windows [\#143](https://github.com/DjangoGirls/tutorial/issues/143) + +- Proposal to move Deploy section to the end of tutorial [\#139](https://github.com/DjangoGirls/tutorial/issues/139) + +- Tutorial Chapter 10 "Bug" [\#133](https://github.com/DjangoGirls/tutorial/issues/133) + +- Create a PT-BR translation team on Crowdin. [\#131](https://github.com/DjangoGirls/tutorial/issues/131) + +- Please have a teacher make a deep review of the course [\#127](https://github.com/DjangoGirls/tutorial/issues/127) + +- Problems with heroku-push [\#126](https://github.com/DjangoGirls/tutorial/issues/126) + +- Update to Django 1.7 [\#122](https://github.com/DjangoGirls/tutorial/issues/122) + +- Questions and issues link broken [\#112](https://github.com/DjangoGirls/tutorial/issues/112) + +- Set published date when creating new post. [\#111](https://github.com/DjangoGirls/tutorial/issues/111) + +- Command Line chapter more interactive [\#110](https://github.com/DjangoGirls/tutorial/issues/110) + +- Move homeworks and contributing out of tutorial to another book [\#108](https://github.com/DjangoGirls/tutorial/issues/108) + +- Visit your application - what's process type and dyno running? [\#103](https://github.com/DjangoGirls/tutorial/issues/103) + +- Improvements to deploy chapter [\#98](https://github.com/DjangoGirls/tutorial/issues/98) + +- Links to documentation [\#97](https://github.com/DjangoGirls/tutorial/issues/97) + +- Querysets [\#96](https://github.com/DjangoGirls/tutorial/issues/96) + +- Better explanation of Models [\#95](https://github.com/DjangoGirls/tutorial/issues/95) + +- Heroku static files [\#83](https://github.com/DjangoGirls/tutorial/issues/83) + +- Newly added part on dictionaries \(Intro to Python chapter\) [\#82](https://github.com/DjangoGirls/tutorial/issues/82) + +- Inconsistent terminology [\#80](https://github.com/DjangoGirls/tutorial/issues/80) + +- RFC: Re-order the tutorial [\#79](https://github.com/DjangoGirls/tutorial/issues/79) + +- Authentication and Authorization not accessible from the menu [\#71](https://github.com/DjangoGirls/tutorial/issues/71) + +- Creating blog entries while not logged in results in an ugly error [\#68](https://github.com/DjangoGirls/tutorial/issues/68) + +- Broken link on introduction page [\#61](https://github.com/DjangoGirls/tutorial/issues/61) + +- Coordinate with OpenHatch to avoid work duplication [\#60](https://github.com/DjangoGirls/tutorial/issues/60) + +- Env setup instructions not sufficient for Ubuntu 14.04 [\#58](https://github.com/DjangoGirls/tutorial/issues/58) + +- Contributing chapter needs proof-reading [\#50](https://github.com/DjangoGirls/tutorial/issues/50) + +- Advanced Tutorial on Authentication [\#47](https://github.com/DjangoGirls/tutorial/issues/47) + +- Rearrange folder structure [\#46](https://github.com/DjangoGirls/tutorial/issues/46) + +- Deploying to Heroku without git [\#41](https://github.com/DjangoGirls/tutorial/issues/41) + +- Static files on Heroku [\#40](https://github.com/DjangoGirls/tutorial/issues/40) + +- Fix installation process for pip on Ubuntu 12.04 [\#39](https://github.com/DjangoGirls/tutorial/issues/39) + +- Resolve PostgreSQL issues [\#38](https://github.com/DjangoGirls/tutorial/issues/38) + +- Add LICENSE and appropriate credit [\#36](https://github.com/DjangoGirls/tutorial/issues/36) + +- The "Installation" book should not include "What is Django?" chapter [\#23](https://github.com/DjangoGirls/tutorial/issues/23) + +- Create a reading for girls to do before workshop [\#10](https://github.com/DjangoGirls/tutorial/issues/10) + +- Discussion about first draft of tutorial [\#8](https://github.com/DjangoGirls/tutorial/issues/8) + +- Chapter about installing Postgres [\#7](https://github.com/DjangoGirls/tutorial/issues/7) + +- Decide on one, either localhost or 127.0.0.1 [\#6](https://github.com/DjangoGirls/tutorial/issues/6) + +- Consistent screenshots [\#5](https://github.com/DjangoGirls/tutorial/issues/5) + +- Check everything for style [\#4](https://github.com/DjangoGirls/tutorial/issues/4) + +- Missing parts: pip installation [\#1](https://github.com/DjangoGirls/tutorial/issues/1) + +**Merged pull requests:** + +- Changed code for post\_detail.html [\#298](https://github.com/DjangoGirls/tutorial/pull/298) ([jinsollee92](https://github.com/jinsollee92)) + +- Poprawione literówki i składnia / Typos and grammar fixes [\#295](https://github.com/DjangoGirls/tutorial/pull/295) ([eppyk](https://github.com/eppyk)) + +- Fix few typos [\#294](https://github.com/DjangoGirls/tutorial/pull/294) ([lancelote](https://github.com/lancelote)) + +- Minor updates to "Starting a django project" [\#293](https://github.com/DjangoGirls/tutorial/pull/293) ([sodevious](https://github.com/sodevious)) + +- python -\> python3 in django installation tutorial [\#290](https://github.com/DjangoGirls/tutorial/pull/290) ([rz](https://github.com/rz)) + +- Grammar fix [\#289](https://github.com/DjangoGirls/tutorial/pull/289) ([lancelote](https://github.com/lancelote)) + +- Wrong usage of word "set" [\#287](https://github.com/DjangoGirls/tutorial/pull/287) ([haxoza](https://github.com/haxoza)) + +- Update README.md [\#286](https://github.com/DjangoGirls/tutorial/pull/286) ([eppyk](https://github.com/eppyk)) + +- activate virtualenv in Start Dj Project [\#285](https://github.com/DjangoGirls/tutorial/pull/285) ([eppyk](https://github.com/eppyk)) + +- Activate virtualenv after command prompt restart [\#284](https://github.com/DjangoGirls/tutorial/pull/284) ([doriczapari](https://github.com/doriczapari)) + +- Reword tutorial to support stuff in database [\#283](https://github.com/DjangoGirls/tutorial/pull/283) ([phalt](https://github.com/phalt)) + +- Bump django version to 1.7.7 [\#280](https://github.com/DjangoGirls/tutorial/pull/280) ([phalt](https://github.com/phalt)) + +- Fix typo: Boostrap -\> Bootstrap [\#278](https://github.com/DjangoGirls/tutorial/pull/278) ([victorneo](https://github.com/victorneo)) + +- Added a description of the inequality operator. [\#274](https://github.com/DjangoGirls/tutorial/pull/274) ([annekoopman](https://github.com/annekoopman)) + +- Added Spanish translation from crowdin [\#273](https://github.com/DjangoGirls/tutorial/pull/273) ([bmispelon](https://github.com/bmispelon)) + +- Change some potentially confusing naming [\#269](https://github.com/DjangoGirls/tutorial/pull/269) ([AlexHill](https://github.com/AlexHill)) + +- Revert "Update python version to 3.4.3 in Chapter 11 - Deploy!" [\#267](https://github.com/DjangoGirls/tutorial/pull/267) ([asendecka](https://github.com/asendecka)) + +- Update python version to 3.4.3 in Chapter 11 - Deploy! [\#266](https://github.com/DjangoGirls/tutorial/pull/266) ([ProProgrammer](https://github.com/ProProgrammer)) + +- Update Python to the latests version \(from 3.4.2 to 3.4.3\) [\#265](https://github.com/DjangoGirls/tutorial/pull/265) ([ana-balica](https://github.com/ana-balica)) + +- Bumped Django version to 1.7.5 [\#264](https://github.com/DjangoGirls/tutorial/pull/264) ([MarkusH](https://github.com/MarkusH)) + +- Introduce \_\_lte=now\(\) instead of isnull=False [\#259](https://github.com/DjangoGirls/tutorial/pull/259) ([aniav](https://github.com/aniav)) + +- Fixed Intro to Command Line link [\#256](https://github.com/DjangoGirls/tutorial/pull/256) ([rgbm21](https://github.com/rgbm21)) + +- Deploy - Merge changes in mysite/settings.py [\#254](https://github.com/DjangoGirls/tutorial/pull/254) ([martinsvoboda](https://github.com/martinsvoboda)) + +- Change "Postman" to gender-neutral "Mail Carrier". [\#253](https://github.com/DjangoGirls/tutorial/pull/253) ([Geekfish](https://github.com/Geekfish)) + +- Removed/replaced references to sweet treats [\#252](https://github.com/DjangoGirls/tutorial/pull/252) ([kerstin](https://github.com/kerstin)) + +- Better instructions to run `django-admin startproject` [\#247](https://github.com/DjangoGirls/tutorial/pull/247) ([encukou](https://github.com/encukou)) + +- Python intro: range is a function, not a method [\#246](https://github.com/DjangoGirls/tutorial/pull/246) ([encukou](https://github.com/encukou)) + +- Fix typo in intro to command line [\#243](https://github.com/DjangoGirls/tutorial/pull/243) ([encukou](https://github.com/encukou)) + +- Some things I found while reading PL version of the tutorial. [\#242](https://github.com/DjangoGirls/tutorial/pull/242) ([owad](https://github.com/owad)) + +- Don't include empty date div if there is no date [\#241](https://github.com/DjangoGirls/tutorial/pull/241) ([HonzaKral](https://github.com/HonzaKral)) + +- Bump psycopg version [\#240](https://github.com/DjangoGirls/tutorial/pull/240) ([HonzaKral](https://github.com/HonzaKral)) + +- startproject commands are the same for win/posix [\#239](https://github.com/DjangoGirls/tutorial/pull/239) ([HonzaKral](https://github.com/HonzaKral)) + +- DG tutorial POL - proof-read [\#237](https://github.com/DjangoGirls/tutorial/pull/237) ([agagata](https://github.com/agagata)) + +- Adding missing links [\#233](https://github.com/DjangoGirls/tutorial/pull/233) ([rgbm21](https://github.com/rgbm21)) + +- Small fixes in Polish version. [\#232](https://github.com/DjangoGirls/tutorial/pull/232) ([aniav](https://github.com/aniav)) + +- Update CONTRIBUTING.md [\#231](https://github.com/DjangoGirls/tutorial/pull/231) ([ossanna16](https://github.com/ossanna16)) + +- Formatting/typo fixes [\#230](https://github.com/DjangoGirls/tutorial/pull/230) ([papisz](https://github.com/papisz)) + +- Minor formatting corrections [\#229](https://github.com/DjangoGirls/tutorial/pull/229) ([papisz](https://github.com/papisz)) + +- Format dictionaries [\#227](https://github.com/DjangoGirls/tutorial/pull/227) ([mostaszewski](https://github.com/mostaszewski)) + +- made 127.0.0.1 references links [\#219](https://github.com/DjangoGirls/tutorial/pull/219) ([alvynmcq](https://github.com/alvynmcq)) + +- replaced 'User' variable with 'me' [\#218](https://github.com/DjangoGirls/tutorial/pull/218) ([alvynmcq](https://github.com/alvynmcq)) + +- Change python intro to use files [\#210](https://github.com/DjangoGirls/tutorial/pull/210) ([phalt](https://github.com/phalt)) + +- small typo fix [\#209](https://github.com/DjangoGirls/tutorial/pull/209) ([JaimeLynSchatz](https://github.com/JaimeLynSchatz)) + +- Pip freeze [\#205](https://github.com/DjangoGirls/tutorial/pull/205) ([pozorvlak](https://github.com/pozorvlak)) + +- Warn about psycopg compilation output [\#203](https://github.com/DjangoGirls/tutorial/pull/203) ([pozorvlak](https://github.com/pozorvlak)) + +- Minor grammar fix; make it clear `manage.py shell` should be run in a virtualenv. [\#200](https://github.com/DjangoGirls/tutorial/pull/200) ([pozorvlak](https://github.com/pozorvlak)) + +- add translation section on readme.md [\#199](https://github.com/DjangoGirls/tutorial/pull/199) ([luzfcb](https://github.com/luzfcb)) + +- Change google link in HTML chapter to dgangogirls.org [\#198](https://github.com/DjangoGirls/tutorial/pull/198) ([rebkwok](https://github.com/rebkwok)) + +- revisions to Deploy chapter [\#197](https://github.com/DjangoGirls/tutorial/pull/197) ([rebkwok](https://github.com/rebkwok)) + +- Removed confusing comment. [\#194](https://github.com/DjangoGirls/tutorial/pull/194) ([loic](https://github.com/loic)) + +- Made git bootstrapping a little more predictable. [\#193](https://github.com/DjangoGirls/tutorial/pull/193) ([loic](https://github.com/loic)) + +- Restore git push [\#186](https://github.com/DjangoGirls/tutorial/pull/186) ([bmispelon](https://github.com/bmispelon)) + +- Fixed typo in ORM chapter. [\#182](https://github.com/DjangoGirls/tutorial/pull/182) ([timgraham](https://github.com/timgraham)) + +- Updated to Django 1.7.1 [\#178](https://github.com/DjangoGirls/tutorial/pull/178) ([timgraham](https://github.com/timgraham)) + +- root page returns "not found", so point to admin/ [\#175](https://github.com/DjangoGirls/tutorial/pull/175) ([kermit666](https://github.com/kermit666)) + +- Made the startproject warning a little more prominent. [\#174](https://github.com/DjangoGirls/tutorial/pull/174) ([loic](https://github.com/loic)) + +- Fixed missing call to createsuperuser. [\#173](https://github.com/DjangoGirls/tutorial/pull/173) ([loic](https://github.com/loic)) + +- Minor fixes [\#172](https://github.com/DjangoGirls/tutorial/pull/172) ([MarkusH](https://github.com/MarkusH)) + +- Fixed \#166 -- Highlight the significance of the double underscore syntax [\#169](https://github.com/DjangoGirls/tutorial/pull/169) ([bmispelon](https://github.com/bmispelon)) + +- Updated to use django-admin \(.py suffix not required in Django 1.7\) [\#168](https://github.com/DjangoGirls/tutorial/pull/168) ([timgraham](https://github.com/timgraham)) + +- Updated urls.py for Django 1.7. [\#167](https://github.com/DjangoGirls/tutorial/pull/167) ([timgraham](https://github.com/timgraham)) + +- Fixed \#162 -- Removed \o/ [\#164](https://github.com/DjangoGirls/tutorial/pull/164) ([bmispelon](https://github.com/bmispelon)) + +- Use original heroku-push repo instead of fork [\#161](https://github.com/DjangoGirls/tutorial/pull/161) ([andriykohut](https://github.com/andriykohut)) + +- Updated code\_editor/README.md [\#159](https://github.com/DjangoGirls/tutorial/pull/159) ([syndbg](https://github.com/syndbg)) + +- Deployment needs a persistent database [\#158](https://github.com/DjangoGirls/tutorial/pull/158) ([goranche](https://github.com/goranche)) + +- Update README.md [\#157](https://github.com/DjangoGirls/tutorial/pull/157) ([victorwestmann](https://github.com/victorwestmann)) + +- note the difficulty of deployment chapter, fixes \#139 [\#156](https://github.com/DjangoGirls/tutorial/pull/156) ([domenkozar](https://github.com/domenkozar)) + +- Use lazy evaluated ForeignKey references to prevent future problems [\#155](https://github.com/DjangoGirls/tutorial/pull/155) ([MarkusH](https://github.com/MarkusH)) + +- Fix a small grammar mistake [\#154](https://github.com/DjangoGirls/tutorial/pull/154) ([zanderle](https://github.com/zanderle)) + +- Add a Gitter chat badge to README.md [\#152](https://github.com/DjangoGirls/tutorial/pull/152) ([gitter-badger](https://github.com/gitter-badger)) + +- minor spelling correction [\#150](https://github.com/DjangoGirls/tutorial/pull/150) ([annaqui](https://github.com/annaqui)) + +- Change syncdb to migrate when preparing db on heroku. [\#148](https://github.com/DjangoGirls/tutorial/pull/148) ([MattBlack85](https://github.com/MattBlack85)) + +- Fixes for heroku-push on Windows [\#144](https://github.com/DjangoGirls/tutorial/pull/144) ([andriykohut](https://github.com/andriykohut)) + +- bump gitbook-plugin-richquotes to fix syling on modern browsers [\#142](https://github.com/DjangoGirls/tutorial/pull/142) ([domenkozar](https://github.com/domenkozar)) + +- Consistency [\#140](https://github.com/DjangoGirls/tutorial/pull/140) ([domenkozar](https://github.com/domenkozar)) + +- consistency [\#138](https://github.com/DjangoGirls/tutorial/pull/138) ([domenkozar](https://github.com/domenkozar)) + +- Small typo [\#137](https://github.com/DjangoGirls/tutorial/pull/137) ([domenkozar](https://github.com/domenkozar)) + +- typo fix in orm chapter [\#136](https://github.com/DjangoGirls/tutorial/pull/136) ([hellotaotao](https://github.com/hellotaotao)) + +- Fixed a typo in the ORM chapter [\#135](https://github.com/DjangoGirls/tutorial/pull/135) ([alex](https://github.com/alex)) + +- Update README.md to demonstrate user creation [\#132](https://github.com/DjangoGirls/tutorial/pull/132) ([Mbosco](https://github.com/Mbosco)) + +- Specify Python interpreter on Ubuntu 14.04 [\#130](https://github.com/DjangoGirls/tutorial/pull/130) ([siemieniec](https://github.com/siemieniec)) + +- Update to Django 1.7 [\#129](https://github.com/DjangoGirls/tutorial/pull/129) ([MattBlack85](https://github.com/MattBlack85)) + +- Add apostrophe in string example [\#128](https://github.com/DjangoGirls/tutorial/pull/128) ([MattBlack85](https://github.com/MattBlack85)) + +- some \(mostly\) minor edits and proofreading changes [\#125](https://github.com/DjangoGirls/tutorial/pull/125) ([rebkwok](https://github.com/rebkwok)) + +- Have all entries in SUMMARY capitalized similarly [\#124](https://github.com/DjangoGirls/tutorial/pull/124) ([miohtama](https://github.com/miohtama)) + +- Reduced double body tag to one [\#121](https://github.com/DjangoGirls/tutorial/pull/121) ([ozanyildiz](https://github.com/ozanyildiz)) + +- Fixed minor QuerySet typos [\#120](https://github.com/DjangoGirls/tutorial/pull/120) ([Railslide](https://github.com/Railslide)) + +- A few fixes for the ORM chapter [\#118](https://github.com/DjangoGirls/tutorial/pull/118) ([bmispelon](https://github.com/bmispelon)) + +- Changed template folder structure so that mysite is not needed in INSTALLED\_APPS [\#117](https://github.com/DjangoGirls/tutorial/pull/117) ([bmispelon](https://github.com/bmispelon)) + +- base.html placed inside the mysite directory [\#116](https://github.com/DjangoGirls/tutorial/pull/116) ([elya5](https://github.com/elya5)) + +- Added more errors in the "Introduction to Python" chapter. [\#109](https://github.com/DjangoGirls/tutorial/pull/109) ([bmispelon](https://github.com/bmispelon)) + +- Fixed \#82 -- Improved the chapter on dictionaries. [\#107](https://github.com/DjangoGirls/tutorial/pull/107) ([bmispelon](https://github.com/bmispelon)) + +- Update README.md [\#106](https://github.com/DjangoGirls/tutorial/pull/106) ([maynkj](https://github.com/maynkj)) + +- Fixed \#103 -- Explained what process types and dynos are on Heroku. [\#105](https://github.com/DjangoGirls/tutorial/pull/105) ([bmispelon](https://github.com/bmispelon)) + +- Small corrections [\#104](https://github.com/DjangoGirls/tutorial/pull/104) ([hannahu](https://github.com/hannahu)) + +- Editorial tweaks + how to print a given element of a dictionary [\#102](https://github.com/DjangoGirls/tutorial/pull/102) ([MarysiaLowas](https://github.com/MarysiaLowas)) + +- distinguish operators and functions [\#100](https://github.com/DjangoGirls/tutorial/pull/100) ([hjwp](https://github.com/hjwp)) + +- python intro - ctrl+d doesnt work on windows. [\#99](https://github.com/DjangoGirls/tutorial/pull/99) ([hjwp](https://github.com/hjwp)) + +- minor changes to python intro and virtualenv instructions [\#94](https://github.com/DjangoGirls/tutorial/pull/94) ([JesseIrwin](https://github.com/JesseIrwin)) + +- got rid of mention of domain discount [\#93](https://github.com/DjangoGirls/tutorial/pull/93) ([JesseIrwin](https://github.com/JesseIrwin)) + +- Added to post\_new to allow 24. Homework: add security to work [\#92](https://github.com/DjangoGirls/tutorial/pull/92) ([JesseIrwin](https://github.com/JesseIrwin)) + +- Update README.md [\#90](https://github.com/DjangoGirls/tutorial/pull/90) ([r1chardj0n3s](https://github.com/r1chardj0n3s)) + +- Update README.md [\#89](https://github.com/DjangoGirls/tutorial/pull/89) ([chernolya](https://github.com/chernolya)) + +- Update README.md [\#88](https://github.com/DjangoGirls/tutorial/pull/88) ([yalitan](https://github.com/yalitan)) + +- Updating timezone instructions [\#87](https://github.com/DjangoGirls/tutorial/pull/87) ([OctoKatie](https://github.com/OctoKatie)) + +- Corrected typo on heading in What is Django [\#86](https://github.com/DjangoGirls/tutorial/pull/86) ([Charcol](https://github.com/Charcol)) + +- Fix syntax highlighting for dictionary section [\#85](https://github.com/DjangoGirls/tutorial/pull/85) ([hzy](https://github.com/hzy)) + +- clarifications/rewordings, added explanation of what CLI is [\#84](https://github.com/DjangoGirls/tutorial/pull/84) ([kerstin](https://github.com/kerstin)) + +- folder/directory consitency [\#81](https://github.com/DjangoGirls/tutorial/pull/81) ([BluesFiend](https://github.com/BluesFiend)) + +- Adding in note re logged in user missing during post creation [\#78](https://github.com/DjangoGirls/tutorial/pull/78) ([BluesFiend](https://github.com/BluesFiend)) + +- Added dictionaries in the introduction to Python [\#77](https://github.com/DjangoGirls/tutorial/pull/77) ([deeptiGuptaUIUC](https://github.com/deeptiGuptaUIUC)) + +- Editorial changes to Intro to Command Line [\#76](https://github.com/DjangoGirls/tutorial/pull/76) ([MarysiaLowas](https://github.com/MarysiaLowas)) + +- small tweak to cli intro as windows can also use mkdir to remove confusi... [\#75](https://github.com/DjangoGirls/tutorial/pull/75) ([BluesFiend](https://github.com/BluesFiend)) + +- use safe and linebreaks filters for the text [\#74](https://github.com/DjangoGirls/tutorial/pull/74) ([kampfschlaefer](https://github.com/kampfschlaefer)) + +- Proofreading of new Auth page [\#73](https://github.com/DjangoGirls/tutorial/pull/73) ([BluesFiend](https://github.com/BluesFiend)) + +- adding authentication to SUMMARY.md [\#72](https://github.com/DjangoGirls/tutorial/pull/72) ([BluesFiend](https://github.com/BluesFiend)) + +- Typo found by Aigerim doing the tutorial. [\#70](https://github.com/DjangoGirls/tutorial/pull/70) ([kampfschlaefer](https://github.com/kampfschlaefer)) + +- Proofreading more pages [\#69](https://github.com/DjangoGirls/tutorial/pull/69) ([BluesFiend](https://github.com/BluesFiend)) + +- wording, grammar, clarified some things etc. [\#67](https://github.com/DjangoGirls/tutorial/pull/67) ([kerstin](https://github.com/kerstin)) + +- Add venv instructions for Ubuntu 14.04 [\#66](https://github.com/DjangoGirls/tutorial/pull/66) ([eddie-dunn](https://github.com/eddie-dunn)) + +- Proofreading [\#65](https://github.com/DjangoGirls/tutorial/pull/65) ([BluesFiend](https://github.com/BluesFiend)) + +- Clearing up some unclear bits and editorial changes [\#64](https://github.com/DjangoGirls/tutorial/pull/64) ([MarysiaLowas](https://github.com/MarysiaLowas)) + +- wording, clarified instructions, grammar,... [\#63](https://github.com/DjangoGirls/tutorial/pull/63) ([kerstin](https://github.com/kerstin)) + +- Fixing Intro contributing link [\#62](https://github.com/DjangoGirls/tutorial/pull/62) ([BluesFiend](https://github.com/BluesFiend)) + +- Rename venv to myvenv for a little clarity [\#59](https://github.com/DjangoGirls/tutorial/pull/59) ([BluesFiend](https://github.com/BluesFiend)) + +- Use SQLite as default database [\#57](https://github.com/DjangoGirls/tutorial/pull/57) ([BluesFiend](https://github.com/BluesFiend)) + +- Fixed Spelling [\#56](https://github.com/DjangoGirls/tutorial/pull/56) ([deeptiGuptaUIUC](https://github.com/deeptiGuptaUIUC)) + +- Intro to command line by Becky Smith and Ruth Shemla [\#55](https://github.com/DjangoGirls/tutorial/pull/55) ([ruthshemla](https://github.com/ruthshemla)) + +- CSS chapter - added explanations about CSS and fixed some language mistakes [\#54](https://github.com/DjangoGirls/tutorial/pull/54) ([shmool](https://github.com/shmool)) + +- A chapter on authentication and authorization [\#53](https://github.com/DjangoGirls/tutorial/pull/53) ([kampfschlaefer](https://github.com/kampfschlaefer)) + +- Fixed starts at beginning to be a link [\#52](https://github.com/DjangoGirls/tutorial/pull/52) ([miohtama](https://github.com/miohtama)) + +- wording, grammar, clarified a few things [\#51](https://github.com/DjangoGirls/tutorial/pull/51) ([kerstin](https://github.com/kerstin)) + +- Folder structure rearrange [\#49](https://github.com/DjangoGirls/tutorial/pull/49) ([BluesFiend](https://github.com/BluesFiend)) + +- wording, sentence structure [\#48](https://github.com/DjangoGirls/tutorial/pull/48) ([kerstin](https://github.com/kerstin)) + +- Contributing chapter added [\#45](https://github.com/DjangoGirls/tutorial/pull/45) ([miohtama](https://github.com/miohtama)) + +- Just two small typos [\#44](https://github.com/DjangoGirls/tutorial/pull/44) ([kampfschlaefer](https://github.com/kampfschlaefer)) + +- Updated installation instructions for OSX [\#42](https://github.com/DjangoGirls/tutorial/pull/42) ([miohtama](https://github.com/miohtama)) + +- added a missing dot in 'from .local\_settings import \*' [\#37](https://github.com/DjangoGirls/tutorial/pull/37) ([maciejgryka](https://github.com/maciejgryka)) + +- Fixed typo. [\#33](https://github.com/DjangoGirls/tutorial/pull/33) ([bmispelon](https://github.com/bmispelon)) + +- Fixes and improvements [\#32](https://github.com/DjangoGirls/tutorial/pull/32) ([keimlink](https://github.com/keimlink)) + +- Some more native speaker proofreading [\#31](https://github.com/DjangoGirls/tutorial/pull/31) ([mcmillan](https://github.com/mcmillan)) + +- Explain how to add Postgres to PATH on OS X [\#30](https://github.com/DjangoGirls/tutorial/pull/30) ([foonicorn](https://github.com/foonicorn)) + +- Proofreading changes [\#29](https://github.com/DjangoGirls/tutorial/pull/29) ([rebkwok](https://github.com/rebkwok)) + +- Changed the psycopg2 install method for Windows. [\#28](https://github.com/DjangoGirls/tutorial/pull/28) ([bmispelon](https://github.com/bmispelon)) + +- Suggested changes for HTML chapter [\#27](https://github.com/DjangoGirls/tutorial/pull/27) ([evildmp](https://github.com/evildmp)) + +- Small improvements in the first chapters [\#25](https://github.com/DjangoGirls/tutorial/pull/25) ([foonicorn](https://github.com/foonicorn)) + +- Added more Windows-specific PostgreSQL installations steps [\#24](https://github.com/DjangoGirls/tutorial/pull/24) ([maciejgryka](https://github.com/maciejgryka)) + +- Native speaker attacks. [\#22](https://github.com/DjangoGirls/tutorial/pull/22) ([mjtamlyn](https://github.com/mjtamlyn)) + +- Small fixes [\#21](https://github.com/DjangoGirls/tutorial/pull/21) ([suda](https://github.com/suda)) + +- Used consistent absolute file paths. [\#20](https://github.com/DjangoGirls/tutorial/pull/20) ([bmispelon](https://github.com/bmispelon)) + +- Fixed \#6 -- Use 127.0.0.1 instead of localhost. [\#19](https://github.com/DjangoGirls/tutorial/pull/19) ([bmispelon](https://github.com/bmispelon)) + +- Make Heroku use Python 3. [\#18](https://github.com/DjangoGirls/tutorial/pull/18) ([bmispelon](https://github.com/bmispelon)) + +- More typo fixes. [\#17](https://github.com/DjangoGirls/tutorial/pull/17) ([bmispelon](https://github.com/bmispelon)) + +- Fixed the output of `syncdb`. [\#16](https://github.com/DjangoGirls/tutorial/pull/16) ([bmispelon](https://github.com/bmispelon)) + +- Fixed typo in code example. [\#15](https://github.com/DjangoGirls/tutorial/pull/15) ([bmispelon](https://github.com/bmispelon)) + +- Fixes from notes [\#14](https://github.com/DjangoGirls/tutorial/pull/14) ([bmispelon](https://github.com/bmispelon)) + +- Minor grammar and typo fixes. [\#13](https://github.com/DjangoGirls/tutorial/pull/13) ([bmispelon](https://github.com/bmispelon)) + +- Added description about ssh keys [\#11](https://github.com/DjangoGirls/tutorial/pull/11) ([lukaszb](https://github.com/lukaszb)) + +- Fixing Python Version Link [\#292](https://github.com/DjangoGirls/tutorial/pull/292) ([StephenDonaldson](https://github.com/StephenDonaldson)) + +- Add pyc files to .gitignore [\#291](https://github.com/DjangoGirls/tutorial/pull/291) ([powerfool](https://github.com/powerfool)) + +- Fix broken link for getting started [\#288](https://github.com/DjangoGirls/tutorial/pull/288) ([AnSavvides](https://github.com/AnSavvides)) + +- Korean [\#281](https://github.com/DjangoGirls/tutorial/pull/281) ([sjyun](https://github.com/sjyun)) + +- Link not working [\#270](https://github.com/DjangoGirls/tutorial/pull/270) ([mauricioabreu](https://github.com/mauricioabreu)) + +- Revert back to python version to 3.4.2 in Chapter 11 - Deploy! as 3.4.3 not supported by Heroku as of now [\#268](https://github.com/DjangoGirls/tutorial/pull/268) ([ProProgrammer](https://github.com/ProProgrammer)) + +- fix broken link in the project-wide README [\#261](https://github.com/DjangoGirls/tutorial/pull/261) ([ana-balica](https://github.com/ana-balica)) + +- Fixed Intro to Command Line link [\#257](https://github.com/DjangoGirls/tutorial/pull/257) ([rgbm21](https://github.com/rgbm21)) + +- Fixed Intro to Command Line link [\#255](https://github.com/DjangoGirls/tutorial/pull/255) ([rgbm21](https://github.com/rgbm21)) + +- Only the admin page is visible after the first `git push`. [\#204](https://github.com/DjangoGirls/tutorial/pull/204) ([pozorvlak](https://github.com/pozorvlak)) + +- Explain requirements for a Heroku application name. [\#202](https://github.com/DjangoGirls/tutorial/pull/202) ([pozorvlak](https://github.com/pozorvlak)) + +- Make it clear that runserver takes over the prompt [\#201](https://github.com/DjangoGirls/tutorial/pull/201) ([pozorvlak](https://github.com/pozorvlak)) + +- Added desired screen after first push to heroku [\#185](https://github.com/DjangoGirls/tutorial/pull/185) ([parodia](https://github.com/parodia)) + +- Fixed misleading inline code \(differed from block code\) [\#163](https://github.com/DjangoGirls/tutorial/pull/163) ([MarkusH](https://github.com/MarkusH)) + +- added `\_\_unicode\(\)\_\_` support. [\#147](https://github.com/DjangoGirls/tutorial/pull/147) ([abdelouahabb](https://github.com/abdelouahabb)) + +- Heroku no longer creates default postgres database [\#146](https://github.com/DjangoGirls/tutorial/pull/146) ([andriykohut](https://github.com/andriykohut)) + +- Numbered the chapter folders so that they're listed in order. [\#119](https://github.com/DjangoGirls/tutorial/pull/119) ([bmispelon](https://github.com/bmispelon)) + +- Added settings.py modification after creating a template [\#115](https://github.com/DjangoGirls/tutorial/pull/115) ([doriczapari](https://github.com/doriczapari)) + +- Made Command Line chapter more interactive. Refs \#110 [\#114](https://github.com/DjangoGirls/tutorial/pull/114) ([olasitarska](https://github.com/olasitarska)) + +- Add a brief description of the print statement [\#101](https://github.com/DjangoGirls/tutorial/pull/101) ([hjwp](https://github.com/hjwp)) + +- .gitignore file should also contain \*.pyc [\#91](https://github.com/DjangoGirls/tutorial/pull/91) ([rebeccad](https://github.com/rebeccad)) + +- `source` command on available on all Linuxes [\#43](https://github.com/DjangoGirls/tutorial/pull/43) ([miohtama](https://github.com/miohtama)) + + + +\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)* diff --git a/CNAME b/CNAME new file mode 100644 index 00000000000..e204ba9c9a7 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +tutorial.djangogirls.org \ No newline at end of file diff --git a/LANGS.md b/LANGS.md new file mode 100644 index 00000000000..751d6faf913 --- /dev/null +++ b/LANGS.md @@ -0,0 +1,20 @@ +* [🇺🇸 English](en/) +* [🇧🇬 Български (beta)](bg/) +* [🇨🇿 Čeština (beta)](cs/) +* [🇩🇪 Deutsch](de/) +* [🇬🇷 Ελληνικά (beta)](el/) +* [🇪🇸 Español (beta)](es/) +* [🇮🇷 فارسی (beta)](fa/) +* [🇫🇷 Français (beta)](fr/) +* [🇭🇺 Magyar (beta)](hu/) +* [🇦🇲 հայերեն (beta)](hy/) +* [🇮🇹 Italiano (beta)](it/) +* [🇯🇵 日本語](ja/) +* [🇰🇵/🇰🇷 한국어 (beta)](ko/) +* [🇵🇱 Polski](pl/) +* [🇧🇷 Português-brasileiro](pt/) +* [🇷🇺 Русский (beta)](ru/) +* [🇸🇰 Slovenčina (beta)](sk/) +* [🇹🇷 Türkçe (beta)](tr/) +* [🇺🇦 Українська](uk/) +* [🇨🇳 简体中文](zh/) diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000000..fcdd44ca093 --- /dev/null +++ b/LICENSE @@ -0,0 +1,2 @@ +This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. +To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ \ No newline at end of file diff --git a/Makefile b/Makefile new file mode 100644 index 00000000000..6a480076486 --- /dev/null +++ b/Makefile @@ -0,0 +1,111 @@ +LANG := en +LANG_FILE := $(shell test -f .langs && echo .langs || echo LANGS.md) +LANG_DATA := $(shell grep "$(LANG)/" $(LANG_FILE)) +LANG_NAME := $(shell echo "$(LANG_DATA)" | sed 's/.*\[\(.*\)\].*/\1/') + +define ebook_support + @if which ebook-convert 1> /dev/null; then\ + npx honkit $(1) ./ ./djangogirls.$(1);\ + else\ + echo "Error: ebook-convert is not found";\ + echo " * Follow the guide at https://honkit.netlify.app/ebook";\ + echo " - For Debian/Ubuntu, Try: sudo apt install calibre";\ + echo " - For MacOS, Try: brew install --cask calibre";\ + echo " - For Windows and any other OS, Download from https://github.com/kovidgoyal/calibre/releases";\ + false;\ + fi +endef + +help: + @echo + @echo "Usage: make command [LANG=]" + @echo + @echo " LANG: Language shortcodes are found in LANGS.md. Default is 'en'(English)." + @echo " ( Refer $(LANG_FILE) for shortcodes of Languages available. )" + @echo + @echo "Commands:" + @echo " help - Display make command list." + @echo " dev - Setup the project and start the development server with debugging enabled." + @echo " check - Check for the root directory for various dependencies." + @echo " setup - Setup the temporary language and install node dependencies for the development." + @echo " build - Build the honkit project." + @echo " build-dev - Build the honkit project with debug log." + @echo " serve - Start honkit server locally for development." + @echo " pdf - Generate the PDF version of DjangoGirls tutorial." + @echo " epub - Generate the EPUB version of DjangoGirls tutorial." + @echo " mobi - Generate the MOBI version of DjangoGirls tutorial." + @echo " mode - Shows the development mode status." + @echo " exit - Exit development mode." + @echo + @echo "Example:" + @echo + @echo "$$ make dev LANG=es" + @echo + @echo "The above command will start the development server using the language Español." + @echo "'LANG' argument is only required the first time until the exit command is executed." + @echo + +.git/hooks/pre-commit: + @echo "#!/bin/sh\n\ +\n\ +if test -f \"./.langs\"; then\n\ + echo \"Error: You can't commit without exiting development mode.\\\n\\\n\\\\\ +\nTry the following command to exit development mode:\\\n\\\n\\\\\ +\n$$ make exit\\\n\" 1>&2;\n\ + exit 1\n\ +fi\n" > ./.git/hooks/pre-commit + @chmod u+x ./.git/hooks/pre-commit + +node_modules: + @npm install + +check: package.json book.json LANGS.md + @if ! which node 1> /dev/null; then\ + echo "Error: Node.js not found";\ + echo " * Please install/reinstall NodeJS on your system.";\ + echo " * NVM is recommended for installation (https://github.com/nvm-sh/nvm).";\ + false;\ + fi + +setup: node_modules check .git/hooks/pre-commit + @if ! test -f ".langs"; then\ + cp LANGS.md .langs && \ + echo "$(LANG_DATA)" > LANGS.md && \ + echo "You are set to $(LANG_NAME) for development";\ + fi + +build: setup + @npx honkit build + +build-dev: setup + @npx honkit build --log=debug + +serve: setup + @npx honkit serve + +dev: setup + @npx honkit serve --log=debug + +mode: + @if test -f ".langs"; then\ + echo "You are in development mode using the language $(LANG_NAME)";\ + else\ + echo "You are not in development mode";\ + fi + +exit: + @if test -f ".langs"; then\ + mv -f .langs LANGS.md && echo "Language file is restored";\ + rm -rf node_modules _book .git/hooks/pre-commit && echo "The project exited development mode.";\ + fi + +pdf: + $(call ebook_support,pdf) + +epub: + $(call ebook_support,epub) + +mobi: + $(call ebook_support,mobi) + +.PHONY: help check setup build build-dev serve dev pdf epub mobi mode exit diff --git a/README.md b/README.md index 377a24e621f..75f6f9c1f29 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,175 @@ +[![Open in Codeanywhere](https://img.shields.io/badge/Open%20in-Codeanywhere-7f3f97)](https://app.codeanywhere.com/#https://github.com/DjangoGirls/tutorial) + # Django Girls Tutorial -> **Info** This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 -International License. To view a copy of this license, visit -http://creativecommons.org/licenses/by-sa/4.0/ +~ 🖥 Source Code 🖥 ~ + +**NOT** intended for reading here. To read go to: [📖 tutorial.djangogirls.org 📖](https://tutorial.djangogirls.org) + +# Contribution QUICKSTART + +1. Fork this repo [[fork](#fork-the-repository)] + +> 2. **[Small changes](#simple-changes)**: you can now edit your fork on the github website, do this! Make a change, then [create a pull request](#making-a-pull-request)! + +2. **[Big changes](#new-content-and-complex-changes)**: clone your fork locally. +3. [CLI](#cli-for-development) run `make dev` in repo. + +``` +$ make dev +... +Serving book on http://localhost:4000 +``` + +Note: we have many changes under way we maybe working on your request already! Refer to existing [Pull requests](https://github.com/DjangoGirls/tutorial/pulls). + +# How to contribute + +The Django Girls Tutorial is licensed under a [*Creative Commons Attribution-ShareAlike 4.0*](https://creativecommons.org/licenses/by-sa/4.0/) license. Everyone is free to add, edit and correct the tutorial. + +# Editing basics + +The source code of the tutorial is [hosted on GitHub](https://github.com/DjangoGirls/tutorial). The GitHub [Fork & Pull workflow](https://help.github.com/articles/using-pull-requests) is used to accept and review changes. + +The tutorial uses the [HonKit](https://github.com/honkit/honkit) project for publishing its documentation. [See more information about how HonKit works](https://honkit.netlify.app/). + +The tutorial is written in [Markdown mark up language](https://help.github.com/articles/markdown-basics). + +You can find any discussions about the contents of the tutorial on the [GitHub issue tracker](https://github.com/DjangoGirls/tutorial/issues). + +[Crowdin](https://crowdin.com/project/django-girls-tutorial) platform is used to manage translations. If you want to join an existing translation team or launch a new translation, send an email to the [translation managers](mailto:translations@djangogirls.org) or contact [support team](mailto:hello@djangogirls.org). If you want to propose some small changes or fix typos in existing translations, please create a Pull Request. + +# Getting started and prerequisites + +For contributing to the tutorial the following is needed to get started: + +* a [GitHub account](https://github.com) +* in the case of complex edits familiarity with [Git command line basics](https://help.github.com/articles/set-up-git) or familiarity with an app ([Windows](https://windows.github.com/), [Mac](https://mac.github.com/)) to push your edits made on your computer to GitHub. + +## Fork the repository {#fork-the-repository} + +First fork the [DjangoGirls/tutorial](https://github.com/DjangoGirls/tutorial) repository to your personal GitHub account: + +![Fork button](contributing/images/fork.png) + +## CLI for Development + +This command line tool use `make` to create development environment. It is optional to use this tool. While building the document, it builds the document for every language. The build process can be limited to any one language using this tool and reduce build time considerably. Afterwards, the translation to other languages are done from crowdin localization process. + +Usage instructions are available though `make help` command. + +Try the command `make dev` to start development process. + +# Editing chapter content + +## Simple changes + +For simple changes like typo corrections you can use the GitHub online editor: + +* Open your local fork page on GitHub, +* go to *README.md* file in any chapter, +* press the *Edit* icon (pen) + +and you can edit the chapter directly on github.com. + +![Edit button](contributing/images/edit.png) + +Markdown syntax is used to edit the individual pages of the tutorial. + +![GitHub editor](contributing/images/github_editor.png) + +Save your changes and create a pull request as explained below. + +## New content and complex changes {#new-content-and-complex-changes} + +For adding new chapters, writing longer snippets of text or adding images, you need to get a copy of the tutorial to your local computer. + +Either use the GitHub app for your operating system (mentioned above) or `git` command line to get the repository locally. You get the repository address from the front page of your own GitHub repository fork: + + git clone git@github.com:yourgithubusername/tutorial.git + +Move to the folder containing the project, to run the following commands. + + cd tutorial + +Then, create a branch for your new changes to sit in. It helps to call the branch something related to the changes you are going to make. + + git checkout -b contributing + +Install the project's requirements using [`npm`](https://docs.npmjs.com/cli/v8/configuring-npm/install). + + npm install + +To preview and serve local files, with auto-reload capabilities, run HonKit using: + + npx honkit serve + +The local server will be available at http://localhost:4000. +If auto-reload is slow, you can temporarily remove unwanted languages from `LANGS.md`, to speed up the process. + +Then commit the changes using `git` and push the changes to your remote GitHub repository. + +Example: + + $ git status + On branch contributing + Untracked files: + (use "git add ..." to include in what will be committed) + + contributing_and_editing_this_book/images/gitbook.png + + $ git add contributing_and_editing_this_book/images/gitbook.png + + $ git commit -m "Added gitbook editor screenshot" + [contributing fe36152] Added gitbook screenshot + 1 file changed, 0 insertions(+), 0 deletions(-) + create mode 100644 contributing_and_editing_this_book/images/gitbook.png + + $ git push + Counting objects: 11, done. + Delta compression using up to 8 threads. + Compressing objects: 100% (5/5), done. + Writing objects: 100% (5/5), 266.37 KiB | 0 bytes/s, done. + Total 5 (delta 1), reused 0 (delta 0) + To git@github.com:miohtama/tutorial.git + b37ca59..fe36152 contributing -> contributing + +# Restructuring the tutorial {#restructuring-the-tutorial} +Restructuring the tutorial is a major change that takes time so we have created a separate branch for these changes. + +To make contributions that address issues +[1777](https://github.com/DjangoGirls/tutorial/issues/1777) and [1792](https://github.com/DjangoGirls/tutorial/issues/1792), +[fork](#fork-the-repository) the repository your repository. + +Next you need to follow instructions for [cloning and setting up locally given in the section above](#new-content-and-complex-changes). +Please make use of ["semantic linefeeds"](https://rhodesmill.org/brandon/2012/one-sentence-per-line/) a.k.a. +["semantic line breaks"](https://sembr.org/) for all paragraphs. +Though most of the Django Girls tutorial wasn't originally written that way, placing source line breaks at semantically meaningful spots in the text (and especially between sentences) facilitates both, commenting on individual statements or thoughts in the text as part of the review process, as well as future editing and diff-ing. -## Introduction +As we restructure the tutorial, this would be a great change to introduce to the tutorial so please make sure the chapter you work on follow this pattern. -Have you ever felt that the world is more and more about technology and you are somehow left behind? Have you ever wondered how to create a website but have never had enough motivation to start? Have you ever thought that the software world is too complicated for you to even try doing something on your own? +All pull requests for changes aimed at restructuring the tutorial which address the issues +[1777](https://github.com/DjangoGirls/tutorial/issues/1777) and [1792](https://github.com/DjangoGirls/tutorial/issues/1792) +should be made to the `restructure-tutorial`. -Well, we have good news for you! Programming is not as hard as it seems and we want to show you how fun it can be. +All other steps for creating a pull request are the same as those outlined in the section on [making a pull request below](#making-a-pull-request), just make sure you make the pull request against the `restructure-tutorial` branch. -The tutorial will not magically turn you into a programmer. If you want to be good at it, you need months or even years of learning and practice. But we want to show you that programming or creating websites is not as complicated as it seems. We will try to explain different bits and pieces as well as we can, so you will not feel intimidated by technology. +# Making a pull request {#making-a-pull-request} +After you have finished your changes you need to [create a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) on GitHub. DjangoGirls will get notified about the pull request, review your changes, suggest any corrections if needed and then *pull* your changes to the master version. -We hope that we'll be able to make you love technology as much as we do! +In your own repository on GitHub press do *Compare & pull request* -## What will you learn during the tutorial? +![Compare & pull request](contributing/images/pull_request.png) -Once you've finished the tutorial, you will have a simple, working web application: your own blog. We will show you how to put it online, so others will see your work! +Fill in the information *why* this change is being made. The reviewer can see the details of the actual change, so you don't need repeat the content of the change. -It will (more or less) look like this: +Then press *Create pull request*. -![Figure 0.1](images/application.png) +GitHub emails will notify you for the follow up process. -OK, [let's start at the beginning...](how_internet_works/README.md) +# Further information and help -## About and contributing +GitHub has an excellent [documentation](https://help.github.com/). Check it out if you need help! -This tutorial is maintained by [DjangoGirls](http://djangogirls.org/). If you find any mistakes or want to update the tutorial please [follow the contributing guidelines](contributing_and_editing_this_book/README.md). +For further questions please [contact DjangoGirls](https://djangogirls.org/). diff --git a/SUMMARY.md b/SUMMARY.md deleted file mode 100644 index 6e3b71ed9ce..00000000000 --- a/SUMMARY.md +++ /dev/null @@ -1,29 +0,0 @@ -# Summary - -* [How the Internet works?](how_internet_works/README.md) -* [Intro to Command Line](intro_to_command_line/README.md) -* [Python installation](python_installation/README.md) -* [Introduction to Python](python_introduction/README.md) -* [What is Django?](django/README.md) -* [Database](database/README.md) -* [Django installation](django_installation/README.md) -* [Code editor](code_editor/README.md) -* [Starting Django project](django_start_project/README.md) -* [Django models](django_models/README.md) -* [Django admin](django_admin/README.md) -* [Django urls](django_urls/README.md) -* [Django views - time to create!](django_views/README.md) -* [Introduction to HTML](html/README.md) -* [Django ORM (Querysets)](django_orm/README.md) -* [Django templates](django_templates/README.md) -* [CSS - make it pretty](css/README.md) -* [Template extending](template_extending/README.md) -* [Extend your application](extend_your_application/README.md) -* [Deploy!](deploy/README.md) -* [Django Forms](django_forms/README.md) -* [Domain](domain/README.md) -* [Homework: add more to your website!](homework/README.md) -* [Homework: add security to your website!](authentication_authorization/README.md) -* [Contributing and editing](contributing_and_editing_this_book/README.md) -* [Optional: PostgreSQL installation!](optional_postgresql_installation/README.md) - diff --git a/authentication_authorization/README.md b/authentication_authorization/README.md deleted file mode 100644 index f00e5c099d5..00000000000 --- a/authentication_authorization/README.md +++ /dev/null @@ -1,164 +0,0 @@ -# Homework: Adding security to your website - -You might have noticed that you didn't have to use your password, apart from back when we used the admin interface. You might also have noticed that this means that anyone can add or edit posts in your blog. I don't know about you, but I don't want just anyone to post on my blog. So lets do something about it. - -## Authorizing add/edit of posts - -First lets make things secure. We will protect our `post_new`, `post_edit` and `post_publish` views so that only logged-in users can access them. Django ships with some nice helpers for that using, the kind of advanced topic, _decorators_. Don't worry about the technicalities now, you can read up on these later. The decorator to use is shipped in Django in the module `django.contrib.auth.decorators` and is called `login_required`. - -So edit your `blog/views.py` and add these lines at the top along with the rest of the imports: - -``` -from django.contrib.auth.decorators import login_required -``` - -Then add a line before each of the `post_new`, `post_edit` and `post_publish` views (decorating them) like the following: - -``` -@login_required -def post_new(request): - [...] -``` - -Thats it! Now try to access `http://localhost:8000/post/new/`, notice the difference? - -> If you just got the empty form, you are probably still logged in from the chapter on the admin-interface. Go to `http://localhost:8000/admin/logout/` to log out, then goto `http://localhost:8000/post/new` again. - -You should get one of the beloved errors. This one is quite interesting actually: The decorator we added before will redirect you to the login page. But that isn't available yet, so it raises a "Page not found (404)". - -Don't forget to add the decorator from above to `post_edit` and `post_publish` too. - -Horray, we reached part of the goal! Other people can't just create posts on our blog anymore. Unfortunately we can't create posts anymore too. So lets fix that next. - -## Login users - -Now we could try to do lots of magic stuff to implement users and passwords and authentication but doing this kind of stuff correctly is rather complicated. As Django is "batteries included", someone has done the hard work for us, so we will make further use of the authentication stuff provided. - -In your `mysite/urls.py` add a url `url(r'^accounts/login/$', 'django.contrib.auth.views.login')`. So the file should now look similar to this: - -``` -from django.conf.urls import patterns, include, url - -from django.contrib import admin -admin.autodiscover() - -urlpatterns = patterns('', - url(r'^admin/', include(admin.site.urls)), - url(r'^accounts/login/$', 'django.contrib.auth.views.login'), - url(r'', include('blog.urls')), -) -``` - -Then we need a template for the login page, so create a directory `mysite/templates/registration` and a file inside named `login.html`: - -``` -{% extends "mysite/base.html" %} - -{% block content %} - -{% if form.errors %} -

Your username and password didn't match. Please try again.

-{% endif %} - -
-{% csrf_token %} - - - - - - - - - -
{{ form.username.label_tag }}{{ form.username }}
{{ form.password.label_tag }}{{ form.password }}
- - - -
- -{% endblock %} -``` - -You will see that this also makes use of our base-template for the overall look and feel of your blog. - -The nice thing here is that this _just works[TM]_. We don't have to deal with handling of the forms submission nor with passwords and securing them. Only one thing is left here, we should add a setting to `mysite/settings.py`: - -``` -LOGIN_REDIRECT_URL = '/' -``` - -Now when the login is accessed directly, it will redirect successful login to the top level index. - -## Improving the layout - -So now we made sure that only authorized users (ie. us) can add, edit or publish posts. But still everyone gets to view the buttons to add or edit posts, lets hide these for users that aren't logged in. For this we need to edit the templates, so lets start with the base template from `mysite/templates/mysite/base.html`: - -``` - -
- {% if user.is_authenticated %} - - - {% else %} - - {% endif %} -

Django Girls

-
-
-
-
- {% block content %} - {% endblock %} -
-
-
- -``` - -You might recognize the pattern here. There is an if-condition inside the template that checks for authenticated users to show the edit buttons. Otherwise it shows a login button. - -*Homework*: Edit the template `blog/templates/blog/post_detail.html` to only show the edit buttons for authenticated users. - -## More on authenticated users - -Lets add some nice sugar to our templates while we are at it. First we will add some stuff to show that we are logged in. Edit `mysite/templates/mysite/base.html` like this: - -``` -
- {% if user.is_authenticated %} - - -

Hello {{ user.username }}(Log out)

- {% else %} - - {% endif %} -

Django Girls

-
-``` - -This adds a nice "Hello <username>" to remind us who we are and that we are authenticated. Also this adds a link to log out of the blog. But as you might notice this isn't working yet. Oh nooz, we broke the internetz! Lets fix it! - -We decided to rely on django to handle login, lets see if Django can also handle logout for us. Check https://docs.djangoproject.com/en/1.6/topics/auth/default/ and see if you find something. - -Done reading? You should by now think about adding a url (in `mysite/urls.py`) pointing to the `django.contrib.auth.views.logout` view. Like this: - -``` -from django.conf.urls import patterns, include, url - -from django.contrib import admin -admin.autodiscover() - -urlpatterns = patterns('', - url(r'^admin/', include(admin.site.urls)), - url(r'^accounts/login/$', 'django.contrib.auth.views.login'), - url(r'^accounts/logout/$', 'django.contrib.auth.views.logout', {'next_page': '/'}), - url(r'', include('blog.urls')), -) -``` - -Thats it! If you followed all of the above until this point (and did the homework), you now have a blog where you - - - need a username and password to log in, - - need to be logged in to add/edit/publish(/delete) posts - - and can log out again diff --git a/bg/GLOSSARY.md b/bg/GLOSSARY.md new file mode 100644 index 00000000000..92a2c38234c --- /dev/null +++ b/bg/GLOSSARY.md @@ -0,0 +1,3 @@ +# редактор на код + +Редакторът на код е приложение, което ти позволява да съхраняваш своя код за да можеш да продължиш с него по-късно. Може да научиш откъде да свалиш от [главата Редактор на код](./code_editor/README.md) \ No newline at end of file diff --git a/bg/README.md b/bg/README.md new file mode 100644 index 00000000000..43886769177 --- /dev/null +++ b/bg/README.md @@ -0,0 +1,51 @@ +# Django Girls ръководство + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Тази работа е лицензирана под Creative Commons Attribution-ShareAlike 4.0 International License. За да видите копие на този лиценз, посетете https://creativecommons.org/licenses/by-sa/4.0/ + +## Добре дошли + +Добре дошли в ръководството на Django Girls! Щастливи сме да те видим тук :) Ще те отведем на приключение зад кулисите на уеб-технологиите, като хвърлим бегъл поглед на всичко, което е необходимо за да накараме мрежата да проработи, така както я знаем. + +Както с всички непознати неща, това може да бъде малко трудно. Но не се притеснявай, вече имаш кураж да бъдеш тука, всичко ще бъде наред :) + +## Въведение + +Някога имал ли си чувтвото, че светът е свързан все повече и повече с технологиите и ти не си още част от него? Чудил ли си се как да създадеш уеб-сайт, но никога си нямал достатъчно мотивация да започнеш? Струвало ли ти се, че светът на софтуера е прекалено сложен за да започнеш да правиш нещо сам? + +Имаме добра новина за теб! Програмиране не е толкова трудно, колкото изглежда, и ние искаме да ти покажем колко лесно може да бъде това. + +Това ръководство няма магически да те превърне в програмист. Ако искаш да си добър ще ти трябват месеци или даже години учене и упражняване. Но ние искаме да покажем, че програмиране или създаване на уеб-сайтове не е толкова сложно, колкото изглежда. Ще се постараем да обясним в детайли, колкото се може по-добре, за да не се чувстваш уплашен от технологията. + +Надяваме се да те накараме да заобичаш технология толкова, колкото и ние я обичаме! + +## Какво ще научиш от това ръководство? + +След като приключиш с ръководството, ще имаш малко работещо уеб-приложение: твой собствен блог. Ще ти покажем как да го пуснеш в мрежата, така че другите да ти видят работата! + +Това ще изглежда (горе-долу) ето така: + +![Фигура 0.1](images/application.png) + +> Ако работиш с ръкводството сам, и нямаш инструктор който да ти помага в случай на някой проблем, имаме чат система за теб: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Помолихме нашите инструктори и миналите участници да са там от време на време и да помагат на другите с ръководството! Не се страхувай да задаваш въпроси тука! + +Добре, [хайде да започнем от начало...](./how_the_internet_works/README.md) + +## Следвайки ръководството вкъщи + +Изумително е да си част от занятията на Django Girls, но също разбираме, че не винаги е възможно да присъстваш на някое от тях. Затова ние те насърчаваме да пробваш да следиш ръководството вкъщи. За читатели у дома, понастоящем приготвяме видеа, които ще улеснят следването на ръководството само по себе си. Проектът е все още в процес на обработка, но все повече и повече неща скоро ще бъдат покрити на [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) YouTube канал. + +Във всяка вече покрита глава има линк, препращащ към съответното видео. + +## Относно и допринасяне + +Това ръководство е поддържано от [Django Girls](https://djangogirls.org/). Ако си намерил някакви грешки или искаш да актуализираш ръководството, моля, [следвай насоките за допринасяне](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Би ли искал да ни помогнеш да преведем ръководството на друг език? + +Понастоящем, преводите се съхраняват на платформа crowdin.com на този адрес: + +https://crowdin.com/project/django-girls-tutorial + +Ако твоят език не е изброен на [crowdin](https://crowdin.com/), моля [оставете заявка](https://github.com/DjangoGirls/tutorial/issues/new), информирайки ни за езика, за да можем да го добавим. \ No newline at end of file diff --git a/bg/SUMMARY.md b/bg/SUMMARY.md new file mode 100644 index 00000000000..c6859e9e51b --- /dev/null +++ b/bg/SUMMARY.md @@ -0,0 +1,35 @@ +# Обобщение + +* [Въведение](README.md) +* [Инсталиране](installation/README.md) + * [Команден ред](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Редактор на код](installation/README.md#code-editor) + * [Виртуална среда](installation/README.md#virtualenv) + * [Django](installation/README.md#django) + * [Git](installation/README.md#git) + * [GitHub](installation/README.md#github) + * [PythonAnywhere](installation/README.md#pythonanywhere) +* [Инсталиране (chromebook)](chromebook_setup/README.md) +* [Как работи интернет](how_the_internet_works/README.md) +* [Въведение в команден ред](intro_to_command_line/README.md) +* [Инсталиране на Python](python_installation/README.md) +* [Редактор на код](code_editor/README.md) +* [Въведение в Python](python_introduction/README.md) +* [Какво е Django?](django/README.md) +* [Инсталиране на Django](django_installation/README.md) +* [Вашият първи проект с Django!](django_start_project/README.md) +* [Django модели](django_models/README.md) +* [Администриране на Django](django_admin/README.md) +* [Внедряване!](deploy/README.md) +* [Django URL адреси](django_urls/README.md) +* [Django изгледи - време за създаване!](django_views/README.md) +* [Въведение в HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Динамични данни в шаблони](dynamic_data_in_templates/README.md) +* [Django шаблони](django_templates/README.md) +* [CSS - направи го красиво](css/README.md) +* [Разширяване на шаблони](template_extending/README.md) +* [Разшири своето приложение](extend_your_application/README.md) +* [Django Форми](django_forms/README.md) +* [Какво следва?](whats_next/README.md) \ No newline at end of file diff --git a/bg/chromebook_setup/README.md b/bg/chromebook_setup/README.md new file mode 100644 index 00000000000..d21dc1f556d --- /dev/null +++ b/bg/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Настройка на Chromebook + +> **Бележка** Ако вече сте минали през стъпките за инсталиране, няма нужда да правите това отново - можете да прескочите направо към [Въведение в Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/bg/chromebook_setup/instructions.md b/bg/chromebook_setup/instructions.md new file mode 100644 index 00000000000..5befa2aaec6 --- /dev/null +++ b/bg/chromebook_setup/instructions.md @@ -0,0 +1,73 @@ +Можеш да [пропуснеш този раздел](http://tutorial.djangogirls.org/en/installation/#install-python), ако не използваш Chromebook. Ако използвате, опитът ви в инсталацията ще бъде малко по-различен. Можете да игнорирате останалата част от инструкциите за инсталиране. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9) + +Cloud IDE е инструмент, който ти дава редактор на код и достъп до компютър, работещ с Интернет, където можеш да инсталираш, пишеш и пускаш софтуер. За продължителността на ръководството, cloud IDE ще ти служи като твоя *локална машина*. Все пак ще пишеш команди в терминал, също като твоите съученици на macOS, Ubuntu или Windows, но той ще бъде свързан с компютър, работещ някъде другаде, който cloud IDE прави за теб. Ето инструкциите за cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9). Можете да изберете един от cloud IDE интерфейси и да следвате инструкциите за cloud IDE. + +#### PaizaCloud Cloud IDE + +1. Отиди на [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Направи акаунт +3. Натисни *New Server* и избери Django приложение +4. Натисни бутон на Терминал (от лявата страна на прозореца) + +Сега трябва да виждаш интерфейс със странична лента, бутони са отляво. Натисни бутона "Terminal" за да ви отвори прозорец със следния надпис: + +{% filename %}Terminal{% endfilename %} + + $ + + +Терминалът на PaizaCloud Cloud IDE е готов за твоите инструции. Можеш да увеличиш прозореца за да го направиш малко по-голям. + +#### AWS Cloud9 + +Понастоящем, Cloud 9 изисква от теб да се регистрираш с AWS и да въведеш информация за кредитната си карта. + +1. Инсталирай Cloud 9 от [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Отиди на [c9.io](https://c9.io) и натисни *Get started with AWS Cloud9* +3. Регистрирай се за AWS акаунт (изисква информация за кредитна карта, но можеш да го използваш безплатно) +4. В AWS Dashboard, напиши *Cloud9* в лентата за търсене и натисни +5. В Cloud 9 таблото, натисни *Create environment* +6. Наречи го *django-girls* +7. Конфигурирайки настройките, избери *Create a new instance for environment (EC2)* за "Environment Type" и *t2.micro* "Instance type" (трябва да пише "Free-tier eligible."). Настройката за икономия на разходи по подразбиране е добре, също може да запазиш и другите както са по подразбиране. +8. Натисни *Next step* +9. Натисни *Create environment* + +Сега трябва да видите интерфейс със странична лента, голям основен прозорец с малко текст и малък прозорец в долната част, който изглежда като нещо подобно: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +Тази долна зона е вашият терминал. Можете да използвате терминала за изпращане на инструкции до отдалечения компютър Cloud 9. Можете да промените размера на прозореца, за да го направите малко по-голям. + +### Виртуална среда + +Виртуална среда (наричана още virtualenv) е като частна кутия, в която можем да запълним полезен компютърен код за проект, над който работим. Ние ги използваме, за да държим различните части от код, които искаме за отделните ни проекти, разделени, така че нещата да не се смесват между проектите. + +Пусни: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(имайте предвид, че на последния ред използваме тилд, последван от знак за равенство: `~=`). + +### GitHub + +Направи [GitHub](https://github.com) акаунт. + +### PythonAnywhere + +Урокът за Django Girls включва раздел за това, което се нарича Прехвърляне, което е процесът на приемане на кода, който захранва новото ви уеб приложение и го премества на обществено достъпен компютър (наречен сървър), за да могат другите хора да виждат работата ви. + +Тази част е малко странна, когато правим урока в Chromebook, тъй като вече използваме компютър, който е в Интернет (за разлика от, да речем, лаптоп). Въпреки това, все още е полезно, тъй като можем да мислим за работното пространство на Cloud 9 като място за нашата „текуща“ работа и Python Anywhere като място за показване на нашите неща, когато те станат по-завършени. + +По този начин се регистрирайте за нов акаунт в Python Anywhere на адрес [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/bg/code_editor/README.md b/bg/code_editor/README.md new file mode 100644 index 00000000000..8d3daf476a1 --- /dev/null +++ b/bg/code_editor/README.md @@ -0,0 +1,11 @@ +# Редактор на код + +> За читателите у дома: тази глава е разгледана във видеото [Инсталиране на Python & Редактор на код](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +На път сте да напишете първия си ред код, така че е време да изтеглите редактор на код! + +> **Забележка** Ако използвате Chromebook, пропуснете тази глава и се уверете, че следвате инструкциите [Настройка на Chromebook](../chromebook_setup/README.md). Облачният IDE, който сте избрали (PaizaCloud Cloud IDE или AWS Cloud9) включва редактор на код и когато отворите файл във вашия IDE от менюто File, автоматично ще използвате редактора. +> +> ** Забележка ** Може да сте направили това по-рано в главата за инсталиране - ако е така, можете да прескочите веднага до следващата глава! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/bg/code_editor/instructions.md b/bg/code_editor/instructions.md new file mode 100644 index 00000000000..1d57820cc32 --- /dev/null +++ b/bg/code_editor/instructions.md @@ -0,0 +1,37 @@ +Има много различни редактори и това до голяма степен се свежда до личните предпочитания. Повечето програмисти на Python използват сложни, но изключително мощни IDE (интегрирани среди за разработка), като PyCharm. Като начинаещ обаче това вероятно е по-малко подходящо; нашите препоръки са еднакво мощни, но много по-прости. + +Нашите предложения са по-долу, но не се колебайте да попитате ментора си какви са техните предпочитания - по-лесно ще получите помощ от тях. + +## Visual Studio Code + +Visual Studio Code е редактор за програмен код, разработен от Microsoft за Windows, Linux и macOS. Той включва поддръжка за отстраняване на грешки, вграден Git контрол, подчертаване на синтаксис, интелигентно попълване на код, фрагменти и рефакторинг на код. + +[Изтеглете го тук](https://code.visualstudio.com/) + +## Gedit + +Gedit е безплатен редактор с отворен код, достъпен за всички операционни системи. + +[Изтеглете го тук](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text е много популярен редактор с безплатен период за ползване и е достъпен за всички операционни системи. + +[Изтеглете го тук](https://www.sublimetext.com/) + +## Atom + +Atom е друг популярен редактор. Той е безплатен, с отворен код и се предлага за Windows, macOS и Linux. Atom е разработен от [GitHub](https://github.com/). + +[Изтеглете го тук](https://atom.io/) + +## Защо инсталираме редактор на код? + +Може би се чудите защо инсталираме този специален софтуер за редактиране на код, вместо да използваме нещо като Word или Notepad. + +Първата причина е, че кодът трябва да бъде **обикновен текст**, а проблемът с програми като Word и Textedit е, че те всъщност не произвеждат обикновен текст, те създават богат текст (с шрифтове и форматиране), използвайки персонализирани формати като [RTF (формат на обогатен текст)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +Втората причина е, че редакторите на код са специализирани за редактиране на код, така че те могат да предоставят полезни функции като подчертаване на код с цвят според значението му или автоматично затваряне на кавички. + +Ще видим всичко това в действие по-късно. Скоро ще помислите за надеждния си стар редактор на код като за един от любимите си инструменти. :) diff --git a/bg/css/README.md b/bg/css/README.md new file mode 100644 index 00000000000..f73e52a41be --- /dev/null +++ b/bg/css/README.md @@ -0,0 +1,305 @@ +# CSS - направи го красиво! + +Блогът ни все още изглежда доста грозен, нали? Време е да го направите хубав! За това ще използваме CSS. + +## Какво е CSS? + +Cascading Style Sheets (CSS) е език, използван за описание на външния вид и форматирането на уебсайт, написан на език за маркиране (като HTML). Отнасяйте се към него като грим за вашата уеб страница. ;) + +Но не искаме отново да започнем от нулата, нали? Още веднъж ще използваме нещо, което програмистите пуснаха в интернет безплатно. Преосмислянето на колелото не е забавно. + +## Нека използваме Bootstrap! + +Bootstrap е една от най-популярните фреймуорки за HTML и CSS за разработване на красиви уебсайтове: https://getbootstrap.com/ + +Той е написан от програмисти, които са работили за Twitter. Сега тя е разработена от доброволци от цял свят! + +## Инсталирайте Bootstrap + +За да инсталирате Bootstrap, отворете вашия файл `.html` в редактора на кода и го добавете в секцията ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +Това не добавя никакви файлове към вашия проект. Той просто сочи файлове, които съществуват в Интернет. Затова продължете напред, отворете уебсайта си и актуализирайте страницата. Ето го! + +![Фигура 14.1](images/bootstrap1.png) + +Вече изглежда по-хубав! + +## Статични файлове в Django + +Накрая ще разгледаме по-подробно тези неща, които наричахме **статични файлове**. Статичните файлове са всички ваши CSS и изображения. Съдържанието им не зависи от контекста на заявката и ще бъде едно и също за всеки потребител. + +### Къде да сложа статични файлове за Django + +Django вече знае къде да намери статичните файлове за вграденото приложение "admin". Сега трябва да добавим статични файлове за нашето собствено приложение, `blog`. + +Правим това, като създаваме папка, наречена `static` в блог приложението: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Django автоматично ще открива всички папки, наречени 'static', в която и да е от папките на вашите приложения. Тогава той ще може да използва тяхното съдържание като статични файлове. + +## Вашият първи CSS файл! + +Нека сега създадем CSS файл, за да добавим свой собствен стил към вашата уеб страница. Създайте нова директория, наречена `css` във вашата `static` директория. След това създайте нов файл, наречен `blog.css` вътре в тази директория `css`. Готови? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Време е да напишете малко CSS! Отворете файла `blog/static/css/blog.css` във вашия редактор на код. + +Тук няма да навлизаме твърде дълбоко в персонализирането и научаването на CSS. Има препоръка за безплатен CSS курс в края на тази страница, ако искате да научите повече. + +Но нека направим поне малко. Може би бихме могли да променим цвета на заглавията си? За да разберат цветовете, компютрите използват специални кодове. Тези кодове започват с `#`, последвани от 6 букви (A–F) и цифри (0–9). Например кодът за синьо е `#0000FF`. Можете да намерите цветовите кодове за много от цветовете тук: http://www.colorpicker.com/. Можете също така да използвате [предварително определени цветове](http://www.w3schools.com/colors/colors_names.asp), като ` red ` и ` green `. + +Във вашия `blog/static/css/blog.css` файл трябва да добавите следния код: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` е CSS селектор. Това означава, че прилагаме стиловете си към всеки `a` елемент вътре в елемент `h1`; селекторът `h2 a` прави същото за елементи `h2`. Така че, когато имаме нещо като `

връзка

`, ще се прилага стилът `h1 a`. В този случай ние му казваме да промени цвета си на `#C25100`, което е тъмно оранжево. Или можете да поставите свой собствен цвят тук, но се уверете, че той има добър контраст на бял фон! + +Във CSS файл определяме стилове за елементи в HTML файла. Първият начин да идентифицираме елементите е с името на елемента. Може да ги запомните като тагове от секцията HTML. Неща като `a`, `h1` и `body` са примери за имена на елементи. Ние също така идентифицираме елементи по атрибут `class` или атрибут `id`. Class и id са имена, които сами давате на елемента. Класовете определят групи от елементи, а идентификаторите сочат конкретни елементи. Например, можете да идентифицирате следния маркер, като използвате името на тага `a`, класа `external_link` или id `link_to_wiki_page`: + +```html + +``` + +Можете да прочетете повече за [CSS селектори в w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Трябва също така да кажем на нашия HTML шаблон, че добавихме някои CSS. Отворете файла `blog/templates/blog/post_list.html` в редактора на кода и добавете този ред в самото начало: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Тук просто зареждаме статични файлове. :) Между таговете `` и ``, след връзките към CSS файловете на Bootstrap, добавете този ред: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Браузърът чете файловете в реда, в който са зададени, така че трябва да се уверим, че това е на правилното място. В противен случай кодът в нашия файл може да бъде редактиран от кода във файловете на Bootstrap. Току-що казахме на нашия шаблон къде се намира нашият CSS файл. + +Вашият файл сега трябва да изглежда така: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + +
+

Django Girls Blog

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

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +ОК, запазете файла и актуализирайте сайта! + +![Фигура 14.2](images/color2.png) + +Добра работа! Може би също бихме искали да дадем на нашия уебсайт малко въздух и да увеличим полето от лявата страна? Нека опитаме това! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Добавете това към вашия CSS, запишете файла и вижте как работи! + +![Фигура 14.3](images/margin2.png) + +Може би можем да персонализираме шрифта в заглавието ни? Поставете това във вашия `` в `blog/templates/blog/post_list.html` файл: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Както и преди, проверете поръчката и поставете преди връзката към `blog/static/css/blog.css`. Този ред ще импортира шрифт, наречен *Lobster* от Google Fonts (https://www.google.com/fonts). + +Намерете блока за деклариране `h1 a` (кодът между скобите `{` и `}`) в CSS файла `blog/static/css/blog.css`. Сега добавете ред `font-family: 'Lobster';` между скобите и актуализирайте страницата: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Фигура 14.3](images/font.png) + +Страхотно! + +Както бе споменато по-горе, CSS има концепция за класове. Те ви позволяват да назовете част от HTML кода и да приложите стилове само към тази част, без да засягате други части. Това може да бъде супер полезно! Може би имате два divs (участъка), които правят нещо различно (като заглавието и публикацията ви). Един клас може да ви помогне да ги направите да изглеждат различно. + +Продължете и дайте име на някои части от HTML кода. Добавете клас, наречен `page-header`, към вашия `div`, който съдържа заглавието ви, като този: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +И сега добавете клас `post` към вашия `div` съдържащ публикация в блог. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Сега ще добавим декларационни блокове към различни селектори. Селектори, започващи с `. `, се отнасят за класове. Има много страхотни уроци и обяснения за CSS в мрежата, които могат да ви помогнат да разберете следния код. Засега го копирайте и поставете във вашия `blog/static/css/blog.css` файл: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #C25100; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, .post h2 a:visited { + color: #000000; +} +``` + +След това заобиколете HTML кода, който показва публикациите с декларации за класове. Заменете това: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +в `blog/templates/blog/post_list.html` с това: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Запазете тези файлове и актуализирайте уебсайта си. + +![Фигура 14.4](images/final.png) + +Ура! Изглежда страхотно, нали? Вижте кода, който току-що поставихме, за да намерите местата, където добавихме класове в HTML и ги използвахме в CSS. Къде бихте направили промяната, ако искате датата да е тюркоазена? + +Не се страхувайте да се поинтересувате с този CSS малко и се опитайте да промените някои неща. Играта с CSS може да ви помогне да разберете какво правят различните неща. Ако счупите нещо, не се притеснявайте - винаги можете да го отмените! + +Наистина препоръчваме да вземете безплатните онлайн курсове "Basic HTML & HTML5" и "Basic CSS" на [freeCodeCamp](https://learn.freecodecamp.org/). Те могат да ви помогнат да научите всичко за правенето на уебсайтовете ви по-красиви с HTML и CSS. + +Готови ли сте за следващата глава?! :) \ No newline at end of file diff --git a/bg/css/images/bootstrap1.png b/bg/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/bg/css/images/bootstrap1.png differ diff --git a/bg/css/images/color2.png b/bg/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/bg/css/images/color2.png differ diff --git a/bg/css/images/final.png b/bg/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/bg/css/images/final.png differ diff --git a/bg/css/images/font.png b/bg/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/bg/css/images/font.png differ diff --git a/bg/css/images/margin2.png b/bg/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/bg/css/images/margin2.png differ diff --git a/bg/deploy/README.md b/bg/deploy/README.md new file mode 100644 index 00000000000..fc814929882 --- /dev/null +++ b/bg/deploy/README.md @@ -0,0 +1,222 @@ +# Внедряване! + +> **Забележка** Следващата глава понякога може да бъде малко трудна за преминаване. Продължете и я завършете; внедряването е важна част от процеса на разработване на уебсайтове. Тази глава е поставена в средата на урока, така че вашият ментор да ви помогне с малко по-сложния процес на вдигане на уебсайта ви онлайн. Това означава, че все още можете да завършите урока самостоятелно, ако ви липсва време. + +Досега вашият уебсайт беше достъпен само на вашия компютър. Сега ще научите как да го прехвърлите в онлайн пространството! Разгръщането е процесът на публикуване на приложението ви в Интернет, така че хората най-накрая да могат да отидат и да видят приложението ви. :) + +Както научихте, уебсайт трябва да бъде разположен на сървър. В интернет има много доставчици на сървъри, ще използваме [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere е безплатен за малки приложения, които нямат твърде много посетители, така че определено засега ще ви бъде достатъчно. + +Другата външна услуга, която ще използваме е [GitHub](https://www.github.com), която е услуга за хостинг на код. Има и други, но почти всички програмисти имат GitHub акаунт в наши дни, а сега и вие! + +Тези три места ще бъдат важни за вас. Вашият локален компютър ще бъде мястото, където правите разработка и тестване. Когато сте доволни от промените, ще поставите копие на програмата си в GitHub. Вашият уебсайт ще бъде на PythonAnywhere и ще го актуализирате, като получите ново копие на вашия код от GitHub. + +# Git + +> **Забележка** Ако вече сте направили стъпките за инсталиране, няма нужда да правите това отново - можете да преминете към следващия раздел и да започнете да създавате вашето Git хранилище. + +{% include "/deploy/install_git.md" %} + +## Стартираме нашето Git хранилище + +Git проследява промените в определен набор от файлове в т.нар. склад (или за кратко "репо"). Нека започнем еднo за нашия проект. Отворете конзолата и стартирайте тези команди в директорията `djangogirls`: + +> **Забележка** Проверете текущата си работна директория с команда `pwd` (macOS / Linux) или `cd` (Windows), преди да инициализирате хранилището. Трябва да сте в папката `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 + + +Инициализирането на git хранилището е нещо, което трябва да направим само веднъж за всеки проект (и няма да се налага да въвеждате отново потребителското име и имейла). + +Git ще проследи промените във всички файлове и папки в тази директория, но има някои файлове, които искаме да игнорира. Правим това чрез създаване на файл, наречен `.gitignore` в основната директория. Отворете редактора си и създайте нов файл със следното съдържание: + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + /.vscode + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +И го запишете като `.gitignore` в папката "djangogirls". + +> **Забележка** Точката в началото на името на файла е важна! Ако имате проблеми с създаването му (Macs не харесва да създавате файлове, които започват с точка чрез Finder, например), след това използвайте функцията "Save As" в редактора си; това е бронеустойчиво. И не забравяйте да добавите `.txt`, `.py` или друго разширение към името на файла - той ще бъде разпознат от Git само ако името е просто `.gitignore`. +> +> **Забележка** Един от файловете, които сте посочили във вашия `.gitignore` файл е `db.sqlite3`. Този файл е вашата локална база данни, където се съхраняват всички ваши потребители и публикации. Ще следваме стандартната практика за уеб програмиране, което означава, че ще използваме отделни бази данни за вашия локален тестващ сайт и вашия уеб сайт на живо в PythonAnywhere. Базата данни на PythonAnywhere може да бъде SQLite, като вашата разработваща машина, но обикновено ще използвате такава, наречена MySQL, която може да се справи с много повече посетители на сайта, отколкото SQLite. Така или иначе, като игнорирате вашата SQLite база данни за копието на GitHub, това означава, че всички публикувани досега публикации и superuser ще бъдат достъпни само локално и ще трябва да създавате нови в производството. Трябва да мислите за вашата локална база данни като за добра площадка, където можете да тествате различни неща и да не се страхувате, че ще изтриете истинските си публикации от блога. + +Добра идея е да използвате команда `git status` преди `git add` или винаги, когато се окажете несигурни какво се е променило. Това ще ви помогне да предотвратите появата на изненади, като например добавяне или поемане на грешни файлове. Командата `git status` връща информация за всички непроследени/модифицирани/поетапни файлове, състоянието на клона и много други. Изходът трябва да бъде подобен на следното: + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +И накрая спестяваме промените си. Отидете на конзолата си и изпълнете следните команди: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Избутване на кода ви към GitHub + +Отидете на [GitHub.com](https://www.github.com) и се регистрирайте за нов безплатен потребителски акаунт. (Ако вече сте го направили в подготвителната работилница, това е чудесно!) Не забравяйте да запомните паролата си (добавете я към вашия мениджър на пароли, ако използвате такъв). + +След това създайте ново хранилище, като му дадете името "my-first-blog". Оставете квадратчето за „инициализация с README“ отместено, оставете опцията .gitignore празна (направихме това ръчно) и оставете лиценза като None. + +![](images/new_github_repo.png) + +> **Забележка** Името `my-first-blog` е важно - бихте могли да изберете нещо друго, но това ще се случва много пъти в инструкциите по-долу и ще трябва да го замествате всеки път. Вероятно е по-лесно да се придържаме към името `my-first-blog`. + +На следващия екран ще се покаже URL за клониране на вашия склад, което ще използвате в някои от следващите команди: + +![](images/github_get_repo_url_screenshot.png) + +Сега трябва да свържем Git хранилището на вашия компютър към това в GitHub. + +Въведете следното в конзолата си (заменете `` с потребителското име, което сте въвели, когато сте създали акаунта си в GitHub, но без скобите - URL адресът трябва да съответства на клонирания URL адрес, който току-що видяхте): + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Когато избутате кода към GitHub, ще бъдете попитани за вашето потребителско име и парола за GitHub (било то в прозореца на командния ред или в изскачащ прозорец), а след въвеждане на идентификационни данни трябва да видите нещо подобно: + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Кодът ви вече е на GitHub. Отидете и го вижте! Ще откриете, че е в добра компания - [Django](https://github.com/django/django), [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial) и много други страхотни софтуерни проекти с отворен код също са домакини на кода си в GitHub. :) + +# Настройване на нашия блог на PythonAnywhere + +## Регистрирайте се за акаунт в PythonAnywhere + +> **Забележка** Може би вече сте създали акаунт в PythonAnywhere по-рано по време на стъпките за инсталиране - ако е така, няма нужда да го правите отново. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Конфигуриране на нашия сайт на PythonAnywhere + +Върнете се към главното меню [PythonAnywhere Dashboard](https://www.pythonanywhere.com/), като кликнете върху логото и изберете опцията за стартиране на конзола "Bash" - това е версията на командния ред PythonAnywhere, точно като тази на вашия компютър. + +![Секцията 'Нова конзола' в уеб интерфейса на PythonAnywhere, с бутон за 'bash'](images/pythonanywhere_bash_console.png) + +> **Забележка** PythonAnywhere е базиран на Linux, така че ако сте на Windows, конзолата ще изглежда малко по-различна от тази на вашия компютър. + +Внедряването на уеб приложение в PythonAnywhere включва сваляне на кода от GitHub и конфигуриране на PythonAnywhere да го разпознае и да започне да го обслужва като уеб приложение. Има ръчни начини за това, но PythonAnywhere предоставя помощен инструмент, който ще свърши всичко за вас. Нека го инсталираме първо: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +Това трябва да отпечата някои неща като `Collecting pythonanywhere` и в крайна сметка да завърши с ред, който казва `Successfully installed (...) pythonanywhere- (...)`. + +Сега стартираме помощника за автоматично конфигуриране на приложението ви от GitHub. Въведете следното в конзолата на PythonAnywhere (не забравяйте да използвате потребителското си име на GitHub вместо ``, така че URL адресът да съответства на клонираният URL от GitHub): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.6 https://github.com//my-first-blog.git + + +Докато гледате това да работи, ще можете да видите какво прави: + +- Изтегляне на вашия код от GitHub +- Създаване на virtualenv на PythonAnywhere, точно като този на вашия собствен компютър +- Актуализиране на вашия файл с настройки с някои настройки за внедряване +- Настройка на база данни на PythonAnywhere с помощта на командата `manage.py migrate` +- Настройка на статичните ви файлове (за тях ще научим по-късно) +- И конфигуриране на PythonAnywhere да обслужва вашето уеб приложение чрез неговия API + +На PythonAnywhere всички тези стъпки са автоматизирани, но те са същите стъпки, които би трябвало да преминете с всеки друг доставчик на сървъри. + +Основното, което трябва да забележите в момента, е, че вашата база данни в PythonAnywhere всъщност е напълно отделена от вашата база данни на вашия собствен компютър, така че може да има различни публикации и администраторски акаунти. В резултат на това, точно както направихме на вашия собствен компютър, трябва да инициализираме администраторския акаунт с `createsuperuser`. PythonAnywhere автоматично активира вашия virtualenv за вас, така че всичко, което трябва да направите, е да стартирате: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Въведете данните за вашия администратор потребител. Най-добре е да използвате същите, които използвате на собствения си компютър, за да избегнете объркване, освен ако не искате да направите паролата на PythonAnywhere по-сигурна. + +Сега, ако желаете, можете също да разгледате кода си на PythonAnywhere, като използвате `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 + + +Можете също да отидете на страницата „Файлове“ и да се придвижвате наоколо, използвайки вградения файлов браузър на PythonAnywhere. (От страницата на конзолата можете да стигнете до други страници на PythonAnywhere от бутона на менюто в горния десен ъгъл. След като сте на една от страниците, има връзки към другите в горната част.) + +## Вече сте на живо! + +Сега вашият сайт трябва да бъде на живо в публичния Интернет! Кликнете върху страницата „Уеб“ на PythonAnywhere, за да получите линк към нея. Можете да споделите това с всеки, който искате :) + +> **Забележка** Това е урок за начинаещи и при разгръщането на този сайт взехме няколко преки пътища, които не са идеални от гледна точка на сигурността. Ако и когато решите да надградите този проект или да започнете нов проект, трябва да прегледате [контролния списък за разгръщане на Django](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) за някои съвети относно осигуряването на вашия сайт. + +## Съвети за отстраняване на грешки + +Ако видите грешка при изпълнение на скрипта `pa_autoconfigure_django.py`, ето няколко често срещани причини: + +- Забравяйки да създадете своя маркер за API на PythonAnywhere API. +- Грешка в URL адреса ви в GitHub +- Ако видите грешка, която казва *"Could not find your settings.py"*, вероятно защото не успяхте да добавите всичките си файлове в Git и/или не ги избутахте до GitHub успешно. Погледнете още един път раздела Git по-горе +- Ако преди това сте се регистрирали за акаунт в PythonAnywhere и имате грешка с collectstatic, вероятно имате по-стара версия на SQLite (например 3.8.2) за вашия акаунт. В такъв случай се регистрирайте за нов акаунт и опитайте командите в секцията PythonAnywhere по-горе. + +Ако видите грешка, когато се опитвате да посетите вашия сайт, първото място за търсене на информация за отстраняване на грешки е във вашия **error log**. Ще намерите линк към това на страницата на PythonAnywhere ["Web"](https://www.pythonanywhere.com/web_app_setup/). Вижте дали има съобщения за грешки там; най-новите са най-отдолу. + +Също така има някои [общи съвети за отстраняване на грешки на помощния сайт на PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +И не забравяйте, че вашият ментор е тук, за да ви помогне! + +# Вижте вашия сайт! + +Страницата по подразбиране за вашия сайт трябва да гласи „It worked!“, точно както прави на вашия локален компютър. Опитайте да добавите `/admin/` в края на URL адреса и ще бъдете отведени до администраторския сайт. Влезте с потребителското име и паролата и ще видите, че можете да добавяте нови публикации на сървъра - не забравяйте, че публикациите от вашата локална база данни за тестове не бяха изпратени във вашия блог на живо. + +След като създадете няколко публикации, можете да се върнете към вашата локална настройка (не PythonAnywhere). От тук трябва да работите върху вашата локална настройка, за да направите промени. Това е често срещан работен процес в уеб разработката - правете промени локално, бутате тези промени в GitHub и изтегляте промените надолу към вашия уеб сървър на живо. Това ви позволява да работите и да експериментирате, без да нарушавате уеб сайта си на живо. Доста готино, а? + +Заслужавате *огромни* похвали! Сървърните внедрения са едни от най-трудните части на уеб разработката и често отнемат на хората няколко дни, преди да ги накарат да работят. Но вие имате своя сайт на живо, в реалния Интернет! \ No newline at end of file diff --git a/bg/deploy/images/github_get_repo_url_screenshot.png b/bg/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/bg/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/bg/deploy/images/new_github_repo.png b/bg/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/bg/deploy/images/new_github_repo.png differ diff --git a/bg/deploy/images/pythonanywhere_account.png b/bg/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/bg/deploy/images/pythonanywhere_account.png differ diff --git a/bg/deploy/images/pythonanywhere_bash_console.png b/bg/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/bg/deploy/images/pythonanywhere_bash_console.png differ diff --git a/bg/deploy/images/pythonanywhere_beginner_account_button.png b/bg/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/bg/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/bg/deploy/images/pythonanywhere_create_api_token.png b/bg/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/bg/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/bg/deploy/install_git.md b/bg/deploy/install_git.md new file mode 100644 index 00000000000..4ea1d93e174 --- /dev/null +++ b/bg/deploy/install_git.md @@ -0,0 +1,52 @@ +Git е "система за контрол на версиите", използвана от много програмисти. Този софтуер може да проследява промените във файловете с течение на времето, така че да можете да заредите конкретни версии по-късно. Нещо като функцията „проследяване на промените“ в програми за текстообработка (например, Microsoft Word или LibreOffice Writer), но много по-мощна. + +## Инсталиране на Git + + + +Можете да свалите Git от [git-scm.com](https://git-scm.com/). Можете да натиснете „ next“ на всички стъпки, с изключение на две: в стъпката, където се изисква да изберете вашия редактор, трябва да изберете Nano, и в стъпката, озаглавена „Настройка на вашата PATH среда“, изберете „Използване на Git и незадължителни инструменти на Unix от командния ред на Windows " (най-долната опция). Освен това, настройките по подразбиране са добре. Разгледайте Windows стил, Unix стил за окончанията на редовете е добре. + +Не забравяйте да рестартирате командния ред или PowerShell, след като инсталацията приключи успешно. + + + +Свалете Git от [git-scm.com](https://git-scm.com/) и следвайте инструкцията. + +> **Забележка** Ако използвате OS X 10.6, 10.7 или 10.8, ще трябва да инсталирате версията на git от тук: [Инсталатор на Git за 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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/bg/deploy/signup_pythonanywhere.md b/bg/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..007eba2cfe2 --- /dev/null +++ b/bg/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere е услуга за ползване на Python код на сървъри „в облака“. Ще използваме нея за хостинг на нашия сайт, на живо и в интернет. + +Ще направим блог, който изграждаме на PythonAnywhere. Регистрирайте се за акаунт за начинаещи в PythonAnywhere (безплатното ниво е добре, нямате нужда от кредитна карта). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Страницата за регистрация в PythonAnywhere показва бутон за създаване на безплатен акаунт за начинаещи](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Забележка** Когато избирате вашето потребителско име тук, имайте предвид, че URL адресът на вашия блог ще приеме формата `yourusername.pythonanywhere.com`, така че изберете свой собствен прякор или име на блога. Също така, запомнете вашата парола (добавете я към вашия мениджър на пароли, ако използвате такъв). + +## Създаване на PythonAnywhere API токен + +Това е нещо, което трябва да направите само веднъж. Когато се регистрирате за PythonAnywhere, ще бъдете отведени до таблото си за управление. Намерете линка в горния десен ъгъл до страницата си „ Account“: + +![Връзка към акаунта в горния десен ъгъл на страницата](../deploy/images/pythonanywhere_account.png) + +след това изберете раздела, наречен "API token", и натиснете бутона с надпис "Create new API token". + +![Раздел на API токен на страницата „Акаунт“](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/bg/django/README.md b/bg/django/README.md new file mode 100644 index 00000000000..b6f4ebe0064 --- /dev/null +++ b/bg/django/README.md @@ -0,0 +1,27 @@ +# Какво е Django? + +Django (/ ˈdʒæŋɡoʊ / *jang-goh*) е безплатна и отворена уеб рамка, написана на Python. Уеб рамката е набор от компоненти, които ви помагат да развивате уеб сайтове по-бързо и по-лесно. + +Когато създавате уебсайт, винаги се нуждаете от подобен набор от компоненти: начин за справяне с удостоверяването на потребителя (регистрация, влизане, излизане), панел за управление на вашия уебсайт, формуляри, начин за качване на файлове и т. н. + +За ваше щастие, други хора отдавна забелязаха, че уеб разработчиците са изправени пред подобни проблеми при изграждането на нов сайт, така че те се обединиха и създадоха рамки (Django е една от тях), които ви дават готови компоненти за използване. + +Рамките съществуват за да ви спестяват нуждата да преоткривате колелото и да помогнат за облекчаване на част от разходи, когато създавате нов сайт. + +## Защо имате нужда от рамка? + +За да разберем за какво всъщност е Django, трябва да разгледаме по-отблизо сървърите. Първото нещо е, че сървърът трябва да знае, че искате той да ви обслужва уеб страница. + +Представете си пощенска кутия (порт), която се следи за входящи писма (заявки). Това се прави от уеб сървър. Уеб сървърът чете писмото и след това изпраща отговор с уеб страница. Но когато искате да изпратите нещо, трябва да имате някакво съдържание. А Django е нещо, което ви помага да създавате съдържанието. + +## Какво се случва, когато някой поиска уебсайт от вашия сървър? + +Когато заявката стигне до уеб сървър, тя се предава на Django, който се опитва да разбере какво всъщност се иска. Първо взема адреса на уеб страница и се опитва да разбере какво да прави. Тази част се прави от **urlresolver** на Django (обърнете внимание, че адресът на уебсайт се нарича URL - Uniform Resource Locator - така че името *urlresolver* има смисъл). Не е много умно - взема списък от модели и се опитва да съответства на URL адреса. Django проверява шаблоните отгоре надолу и ако нещо съвпада, Django предава заявката на свързаната функция (която се нарича *view*). + +Представете си пощенски превозвач с писмо. Тя върви по улицата и проверява всеки домашен номер спрямо този на писмото. Ако съвпада, тя поставя писмото там. Ето как работи urlresolver! + +Във функцията *view* се правят всички интересни неща: можем да разгледаме база данни, за да потърсим някаква информация. Може би потребителят иска да промени нещо в данните? Като писмо, в което се казва: „Моля, променете описанието на моята работа“. *view* може да провери дали ви е позволено да го направите, след това актуализира описанието на работата за вас и изпраща обратно съобщение: „Готово!“ Тогава *view* генерира отговор и Django може да го изпрати до уеб браузъра на потребителя. + +Описанието по-горе е малко опростено, но все още не е необходимо да знаете всички технически неща. Наличието на обща идея е достатъчно. + +Така че вместо да се гмурнем твърде много в детайли, ще започнем да създаваме нещо с Django и ще научим всички важни части по пътя! \ No newline at end of file diff --git a/bg/django_admin/README.md b/bg/django_admin/README.md new file mode 100644 index 00000000000..205ab964b48 --- /dev/null +++ b/bg/django_admin/README.md @@ -0,0 +1,57 @@ +# Администратор на Django + +За добавяне, редактиране и изтриване на публикациите, които току-що моделирахме, ще използваме администратора на Django. + +Нека отворим файла `blog/admin.py` в редактора на кода и заменим съдържанието му с това: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Както можете да видите, ние импортираме (включваме) модела Post, дефиниран в предишната глава. За да направим модела ни видим на страницата на администратора, трябва да регистрираме модела с `admin.site.register(Post)`. + +Добре, време да разгледаме нашия модел Post. Не забравяйте да стартирате `python manage.py runserver` в конзолата, за да стартирате уеб сървъра. Отидете до вашия браузър и напишете адреса http://127.0.0.1:8000/admin/. Ще видите страница за вход като тази: + +![Страница за вход](images/login_page2.png) + +За да влезете, трябва да създадете *superuser* - потребителски акаунт, който има контрол върху всичко в сайта. Върнете се в командния ред, напишете `python manage.py createsuperuser` и натиснете enter. + +> Не забравяйте, че за да пишете нови команди, докато уеб сървърът работи, отворете нов прозорец на терминала и активирайте своя virtualenv. Прегледахме как да пишете нови команди във **Вашия първи проект на Django!**, в секцията **Стартиране на уеб сървъра**. + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Когато бъдете подканени, въведете потребителското си име (малки букви, без интервали), имейл адрес и парола. **Не се притеснявайте, че не можете да видите паролата, която въвеждате - така трябва да бъде.** Въведете я и натиснете `enter`, за да продължите. Резултатът трябва да изглежда така (където потребителското име и имейл трябва да са ваши собствени): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Върнете се в браузъра си. Влезте с избраните от вас име и парола на superuser; трябва да видите таблото за управление на Django. + +![Django администратор](images/django_admin3.png) + +Отидете на постове и експериментирайте малко с тях. Добавете пет или шест публикации в блога. Не се притеснявайте за съдържанието - вижда се само на вашия локален компютър - можете да копирате и поставите някакъв текст от този урок, за да спестите време. :) + +Уверете се, че поне две или три публикации (но не всички) имат зададена дата на публикуване. По-късно ще бъде полезно. + +![Django администратор](images/edit_post3.png) + +Ако искате да знаете повече за администратора на Django, трябва да проверите документацията на Django: https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +Това вероятно е подходящ момент да вземете кафе (или чай) или нещо за хапване, за да се "заредите". Създадохте първия си модел Django - заслужавате малка почивка! \ No newline at end of file diff --git a/bg/django_admin/images/django_admin3.png b/bg/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/bg/django_admin/images/django_admin3.png differ diff --git a/bg/django_admin/images/edit_post3.png b/bg/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/bg/django_admin/images/edit_post3.png differ diff --git a/bg/django_admin/images/login_page2.png b/bg/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/bg/django_admin/images/login_page2.png differ diff --git a/bg/django_forms/README.md b/bg/django_forms/README.md new file mode 100644 index 00000000000..eca45d6389a --- /dev/null +++ b/bg/django_forms/README.md @@ -0,0 +1,452 @@ +# Django форми + +Последното нещо, което искаме да направим в нашия уеб сайт е да създадем начин за добавяне и редактиране на публикации в блога. Django администратора е супер, но е по-трудно да се персонализира и направи приятно на външен вид. С формите ще имаме абсолютно надмощие над нашия изглед - можем да правим почти всичко което може да си представим! + +Хубавото на Django формите е, че може да дефинираме форма от самото начало или да създадем ModelForm, в която ще съхраняваме резултатът от формата на модела. + +Точно това искаме да направим: ще създадем форма за нашия `Post` модел. + +Като всяка важна част от Django, формите също имат собствен файл: `forms.py`. + +Трябва да създадем файл с това наименование в директорията на `blog`. + + blog + └── forms.py + + +И така, нека да отворим IDE и напишем следният код: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Първо трябва да въведем Django формите (`from django import forms`) и нашия `Post` модел (`from .models import Post`). + +`PostForm`, както забелязахте е името на нашата форма. Трябва да кажем на Django, че тази форма е `ModelForm` (така че Django да направи малко магия за нас) - `forms.ModelForm` отговаря за това. + +След това с `class Meta`, казваме на Django кой модел трябва да се използва за да се създаде тази форма (`model = Post`). + +Най-накрая трябва да кажем с какви полета ще разполагаме в нашата форма. При този сценарий искаме само title и text да бъдат показани – author ще бъде този, който в момента е влязъл с профила си (ти!) и created_date трябва автоматично да се създаде, когато започнем нова публикация (като в кода), нали? + +И това е! Всичко от което имаме нужда в момента е да използваме формата във изгледа и да я покажем в шаблона. + +И така още веднъж, ще създадем връзка до страницата чрез URL, view и template. + +## Връзка до страницата чрез формата + +Време е да отворим `blog/templates/blog/base.html` в редактора. В `div` наречен `page-header` ще добавим връзка: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Забележете, че искаме да извикаме нашия нов изглед `post_new`. Класът `"glyphicon glyphicon-plus"` е предоставен от темата на bootstrap, която използваме и ще покаже знака плюс. + +След добаване на този ред, вашия HTML файл трябва да изглежда ето така: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + + +``` + +След запазване и обновяване на страницата http://127.0.0.1:8000 трябва да виждате познатата грешка `NoReverseMatch`. Така ли е? Добре! + +## URL + +Отваряме файла `blog/urls.py` в редактора и добавяме ред: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +И последния код трябва да изглежда така: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +След като обновим сайта виждаме `AttributeError`, тъй като нямаме изглед за изпълнението на `post_new`. Нека го добавим сега. + +## post_new изглед + +Време е да отворим файлът `blog/views.py` в редактора и да добавим следните няколко реда от код при останалите във формата + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +И след това нашия изглед: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +За да създадем нова форма `Post`, трябва да извикаме `PostForm()` и да я препратим към шаблона (template). Ще се върнем отново на този изглед (view), но сега нека бързо да създадем шаблон (template) за формата. + +## Шаблон (Template) + +Трябва да създадем файл `post_edit.html` в директория `blog/templates/blog` и да го отворим в редактора ни за код. За да направим така, че формата да работи са ни нужни няколко неща: + +* Трябва да покажем формата. Можем да направим това чрез (например) {% raw %}`{{ form.as_p }}`{% endraw %}. +* Горният ред трябва да бъде обвит с HTML form tag: `
...
`. +* Трябва ни бутон `Save`. Това правим с HTML button: ``. +* И най-накрая, точно след отварящия `
` tag трябва да добавим {% raw %}`{% csrf_token %}`{% endraw %}. Това е много важно, тъй като прави нашата форма надеждна! Ако забравите за това, Django ще се оплаче когато се опитате да запазите формата. + +![CSFR Забранена страница](images/csrf2.png) + +Добре, нека видим сега как трябва да изглежда HTML кода в `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 }} + +
+{% endblock %} +``` + +Време е да обновим страницата! Иха! Формата се показа! + +![Нова форма](images/new_form2.png) + +Но, чакай малко! Когато напишеш нещо в полетата `title` и `text` и се опиташ да го запазиш, какво ще стане? + +Нищо! Пак сме на същата страница и нашият текст изчезна... и няма нова публикация. Какво се обърка? + +Отговорът е: нищо. Трябва още малко да поработим върху нашия изглед (*view*). + +## Запазване на формата + +Отворете пак `blog/views.py` в редактора. В момента всичко, което имаме в изгледа на `post_new` е следното: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Когато изпратим форматата се връщаме пак на същият изглед, но този път имаме повече данни в запитването (`request`) или по-точно в `request.POST` (наименованието няма нищо общо с блога "post", а с факта, че "публикуваме" информация). Помните ли как в нашия HTML файл при дефинирането на `
` имахме променлива `method="POST"`? Всички тези полета са сега в `request.POST`. Не трябва да преименувате `POST` (друга валидна стойност за `method` е `GET`, но нямаме време да обясним каква е разликата). + +И така в нашия изглед (*view*) имаме две отделни ситуации да разрешим: първо, когато достъпваме страницата за първи път и искаме празна форма, и второ, когато се върнем назад към изгледа (*view*) с всичките данни които сме въвели във формата. Тоест трябва да добавим условие (ще използваме `if` за тази цел): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Време е да попълним празното място `[...]`. Ако `method`-а е `POST` тогава искаме да изградим `PostForm` с данни от формата, нали? Ще направим това както следва: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Следващото нещо е да проверим дали формата е вярна (всики полета които се изискват да са определени и да няма неправилно въведени стойности). Правим това чрез `form.is_valid()`. + +Проверяваме дали формата е валидна и ако да в запазваме! + +{% 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() +``` + +Основно имаме две неща: запазваме формата с `form.save` и добавяме автор (тъй като няма поле `author` във формата `PostForm` а това поле се изисква). `commit=False` означава, че не искаме все още да запазим моделът `Post` - искаме да добавим първо автора. През повечето време ще използвате `form.save()` без `commit=False`, но в този случай трябва да се снабдим с него. `post.save()` ще запази промените (добавяне на автора) и новата публикация в блога е създадена! + +Накрая, би било добре ако можем веднага да отидем на страницата `post_detail` за нашата новосъздадена блог публикация, нали? За да направим това трябва ни трябва още едно въвеждане: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect + +``` + +Добавете го в самото начало на вашия файл. И сега можем да кажем "отиди на страница `post_detail` за новосъздадената публикация": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) + +``` + +`post_detail` е името на изгледа, на който искаме да отидем. Помните ли, че този изглед (*view*) изискваше стойност `pk`? За да го предадем на изгледа използваме `pk=post.pk`, където `post` е новосъздадена публикация! + +И така, говорихме много, но може би искаме да видим как изглежда всичко, нали? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Нека видим дали работи. Отидете на страница http://127.0.0.1:8000/post/new, добвавете `title` и `text`, запазете..и voilà! Новата публикация е добавена и сме пренасочени към страница `post_detail`! + +Може би забелязахте, че избираме датата на публикуване преди да запазим публикацията. По-късно ще се запознаем с *publish button* in **Django Girls Tutorial: Extensions**. + +Това е страхотно! + +> Тъй като наскоро ползвахме административния интерфейс на Django, системата в момента си мисли, че сме влезнали в акаунта си. Има няколко ситуации, които могат да доведат до излизане от акаунта (затваряне на търсачката, рестартиране на базата данни, и др.). Ако при създаване на нова публикация получавате грешки свързани с потребител, който не е влязал в акаунта си, отидете на администраторската страница http://127.0.0.1:8000/admin и влезте пак в акаунта си. Това ще реши проблема временно. Има дълготрайно решение на проблема, което ви очаква в раздела **Домашна работа: добавяне на сигурност към уеб страницата ви!** намиращ се след главното ръководство. + +![Грешка при влизане](images/post_create_error.png) + +## Проверка на формите (Form validation) + +Сега ще ви покажем колко са готини формите на Django. Една публикация трябва да има полета за `title` и `text`. В нашия `Post` модел не казахме дали тези полета се изискват (както при `published_date`), така че Django очаква те да са нагласени по подразбиране. + +Опитайте се да запазите формата без `title` и `text`. Познайте какво ще стане! + +![Проверка на форма](images/form_validation2.png) + +Django се грижи за проверката дали всички полета във формата ни са правилни. Не е ли готино? + +## Редактиране на формата + +Сега знаем как да добавим нова публикация. Но какво ако искаме да променим вече съществуваща? Това много прилича на това, което тъкмо направихме. Нека набързо да създадем няколко важни неща. (Ако не разбирате нещо, попитайте инструктора си или вижте в предходните глави, тъй като вече минахме врез всичко това.) + +Отворете `blog/templates/blog/post_detail.html` в редактора и добавете реда + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +така че шаблона (template) да изглежда така: + +{% 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 %} +``` + +Отворете `blog/urls.py` в редактора и добавете този ред: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Ще използваме пак шаблона `blog/templates/blog/post_edit.html`, така че последното липсващо нещо е изгледа (*view*). + +Нека отворим `blog/views.py` в редактора и да добваим това накрая на файла: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Това изглежда почти еднакво с нашия изглед `post_new`, нали? Но не изцяло. Първо зададохме допълнителен `pk` параметър от `urls`. После взехме `Post` модела, който искаме да променим с `get_object_or_404(Post, pk=pk)` и накрая, когато създаваме форма, подаваме тази публикация като инстанция (`instance`), когето запазваме формата... + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +... и когато отваряме формата с публикацията, която искаме да променим: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Добре! Нека проверим дали работи! Да отидем на страница `post_detail`. Трябва да има бутон за редактиране в горния десен ъгъл: + +![Бутон за редактиране](images/edit_button2.png) + +Когато го натиснете, ще видите формата с нашата публикация: + +![Форма на редактиране](images/edit_form2.png) + +Можете да промените заглавието или текста и да запазите промените! + +Поздравления! Вашата апликация изглежда все по- и по-завършена! + +Ако искате повече информация относно Django формите, трябва да прочетете документацията: https://docs.djangoproject.com/en/2.2/topics/forms/ + +## Сигурност + +Да можете да създадете нови публикация чрез един клие е страхотно! Но сега всеки, който посети вашата страница ще може да създаде нова публикация и това е нещо, което може би не искате. Нека направим така, че бутонът да се показва за вас, но не и за останалите. + +Отворете `blog/templates/blog/base.html` в редактора и намерете `page-header` `div` и реда посочващ anchor tag, който по-рано сложихте там. Трябва да изглежда така: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Ще добавим още един `{% if %}` към това, което ще накара връзката да се показва само за потребители, които са влезнали в административния панел. В момента това си само ти! Променете `` да изглежда така: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Този `{% if %}` ще накара връзката да се изпраща до търсачката, само ако потребителят, който изисква страницата е влязъл в акаунта си. Това не предпазва напълно от създаване на нови публикации, но е добре като за начало. Ще покрием повече относно сигурността в продължението на уроците. + +Помните ли иконата за редактиране, която тъкмо добавихме в страницата ни с детайли? Ще добавим същата промяна и там, така че други хора да не могат да променят съществуващи публикации. + +Отворете `blog/templates/blog/post_detail.html` в редактрора и намерете този ред: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Променете го на това: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Тъй като най-вероятно сте в акаунта си, ако опресните страницата, няма да видите разликата. Заредете страницата в друга търсачка или в инкогнито прозорец (наречен още "InPrivate" в Windows Edge) и ще видите, че връзката не се показва и иконата също не се появява на екрана! + +## Още едно нещо: време за deploy + +Нека видим дали всичко работи на PythonAnywhere. Време е за още един deploy! + +* Първо съхранете новия си код и го пратете към GitHub: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* След това в [PythonAnywhere Bash конзолата](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Не забравяйте да замените `` с вашият PythonAnywhere субдомейн без скобите.) + +* Накрая отидете на ["Web" страница](https://www.pythonanywhere.com/web_app_setup/), използвайте бутона от менюто в горният десен ъгъл на конзолата) и натиснете **Reload**. Опреснете блога си https://subdomain.pythonanywhere.com за да видите промените. + +Това е! Поздравления :) \ No newline at end of file diff --git a/bg/django_forms/images/csrf2.png b/bg/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/bg/django_forms/images/csrf2.png differ diff --git a/bg/django_forms/images/drafts.png b/bg/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/bg/django_forms/images/drafts.png differ diff --git a/bg/django_forms/images/edit_button2.png b/bg/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/bg/django_forms/images/edit_button2.png differ diff --git a/bg/django_forms/images/edit_form2.png b/bg/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/bg/django_forms/images/edit_form2.png differ diff --git a/bg/django_forms/images/form_validation2.png b/bg/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/bg/django_forms/images/form_validation2.png differ diff --git a/bg/django_forms/images/new_form2.png b/bg/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/bg/django_forms/images/new_form2.png differ diff --git a/bg/django_forms/images/post_create_error.png b/bg/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/bg/django_forms/images/post_create_error.png differ diff --git a/bg/django_installation/README.md b/bg/django_installation/README.md new file mode 100644 index 00000000000..8101319c259 --- /dev/null +++ b/bg/django_installation/README.md @@ -0,0 +1,7 @@ +# Инсталиране на Django + +> **Забележка** Ако използвате Chromebook, пропуснете тази глава и се уверете, че следвате инструкциите [Настройка на Chromebook](../chromebook_setup/README.md). +> +> **Забележка** Ако вече сте минали през стъпките за инсталиране, тогава вече сте направили това - можете да преминете направо към следващата глава! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/bg/django_installation/instructions.md b/bg/django_installation/instructions.md new file mode 100644 index 00000000000..e2497a8518e --- /dev/null +++ b/bg/django_installation/instructions.md @@ -0,0 +1,231 @@ +> Част от този раздел е базиран на уроци от Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Част от този раздел е базиран на [ django-marcador    урок ](http://django-marcador.keimlink.de/) лицензиран съгласно Creative Commons    Attribution-ShareAlike 4.0 международен лиценз. Урокът за джанго-маркадор е защитен с авторско право от Markus Zapke-Gründemann et al. + +## Виртуална среда + +Преди да инсталираме Django, ще ви накараме да инсталирате изключително полезен инструмент, който да ви помогне да поддържате средата си на кодиране подредена на вашия компютър. Възможно е да пропуснете тази стъпка, но силно се препоръчва. Като започнете с възможно най-добрата настройка, ще ви спести много проблеми в бъдеще! + +Така че, нека създадем **виртуална среда** (наричана още *virtualenv*). Virtualenv ще изолира вашата настройка на Python/Django на база проект. Това означава, че всички промени, които правите в един уебсайт, няма да засегнат други, които също разработвате. Яко, нали? + +Всичко, което трябва да направите, е да намерите директория, в която искате да създадете `virtualenv`; вашата начална директория, например. В Windows може да изглежда като `C:\Users\Name` (където `Name` е името на вашия логин). + +> **ЗАБЕЛЕЖКА:** В Windows се уверете, че тази директория не съдържа акцентирани или специални знаци; ако вашето потребителско име съдържа символи с ударение, използвайте друга директория, например, `C:\djangogirls`. + +За този урок ще използваме нова директория `djangogirls` от вашата домашна директория: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Ще направим virtualenv, наречен `myvenv`. Общата команда ще бъде във формата: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +За да създадете нов `virtualenv `, трябва да отворите командния ред и да стартирате `python -m venv myvenv`. Ще изглежда така: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Където `myvenv` е името на вашата `virtualenv`. Можете да използвате всяко друго име, но се придържайте към малки букви и не използвайте интервали, ударения или специални знаци. Също така е добре името да бъде кратко - ще го препращате много! + + + + + +Можем да създадем `virtualenv` и в Linux и macOS, като пуснем `python3 -m venv myvenv`. Ще изглежда така: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` е името на вашата `virtualenv`. Можете да използвате всяко друго име, но се придържайте към малки букви и не използвайте интервали. Също така е добре името да бъде кратко, понеже ще го използвате често! + +> **ЗАБЕЛЕЖКА:** В някои версии на Debian/Ubuntu може да получите следната грешка: +> +> {% 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. +> +> +> В този случай следвайте инструкциите по-горе и инсталирайте пакета `python3-venv`: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **ЗАБЕЛЕЖКА:** При някои версии на Debian/Ubuntu инициирането на виртуалната среда като тази в момента дава следната грешка: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> За да заобиколите това, използвайте вместо това командата `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **ЗАБЕЛЕЖКА:** Ако получите грешка като +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> вместо това стартирайте: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## Работа с virtualenv + +Командата по-горе ще създаде директория с име `myvenv` (или каквото име сте си избрали), която съдържа нашата виртуална среда (по същество куп директории и файлове). + + + +Стартирайте виртуалната си среда като напишете: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **Забележка:** При Windows 10 можете да получите грешка в прозореца на PowerShell `execution of scripts is disabled on this system`. В този случай трябва да отворите нов прозорец на PowerShell като изберете "Run as Administrator." След това напишете следната команда преди да стартирате виртуалната си среда: +> +> {% filename %}command-line{% endfilename %} +> +> C:\WINDOWS\system32> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned +> Промяна при политиката на изпълнението +> Политиката на изпълнението ви предпазва от скриптове на които нямате доверие. При промяна на политиката на изпълнение може да бъдете изложени на опасен риск описан в темата about_Execution_Policies help в http://go.microsoft.com/fwlink/?LinkID=135170. Искате ли да промените политиката на изпълнението? [Y] ДА [A] Да на всичко [N] Не [L] Не на всичко [S] Прекрати [?] Помощ (по подразбиране е "N"): A +> + + + +> **Забележка:** За потребителите на популярният редактор VS Code, който идва с интегриран терминал базиран на windows PowerShell, и ако искате да се придържате към интегрирания терминал, трябва да напишете следната команда за да активирате виртуалната си среда: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> Предимството е, че не трябва да сменяте прозорците между IDE и command-line. + + + + + +Стартирайте виртуалната си среда като напишете: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Помнете, че трябва да заместите `myvenv` с името на вашата избрана `virtualenv`. + +> **Забележка:** понякога `source` може да не е на лице. В тези случаи трябва да направите следното: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> +> + + + +Ще разберете, че виртуалната ви среда е стартирана като видите подсказването в конзолата ви, което започва с `(myvenv)`. + +Когато работите от виртуална среда, `python` автоматично ще се насочи към правилната версия, така че може да използвате команда `python` вместо `python3`. + +Добре, сега имаме всичкo необходимо на едно място. Най-накрая може да инсталираме Django! + +## Инсталиране на Django {#django} + +Сега след като имате стартирана `virtualenv` може да инсталирате Django. + +Преди да направим това обаче ще проверим дали имаме инсталирана последната версия на `pip`, софтуерът, който използваме да инсталираме Django: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + + +### Инсталиране на пакети с изисквания + +Файла съдържа лист от зависимости, които да се инсталират с командата `pip install`: + +Първо създайте файл с име `requirements.txt` в папка `djangogirls`, като използвате IDE инсталиран по-рано. Това става като отворите нов файл в редактора и след това го запазите като `requirements.txt` в папка `djangogirls/`. Вашата директория трябва да изглежда така: + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +Във вашият `djangogirls/requirements.txt` файл трябва да добавите следното: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Сега напишете команда `pip install -r requirements.txt` за да инсталирате 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Ако се появи грешка когато извикате команда pip на Windows платформа, проверете дали името на пътя на проекта ви съдържа празно място, знак за ударение или други специални знаци. (например , `C:\Users\User Name\djangogirls`). Ако съдържа, моля помислете за друго място без разстояние, знак за ударение или други специални знаци (предложение: `C:\djangogirls`). Създайте нова виртуална среда в новата директория, след това изтрийте старата и опитайте отново командата. (Преместването на папката с виртуална среда няма да работи, тъй като виртуалната среда използва абсолютни пътеки.) + + + + + +> Вашият command line може да забие след като се опитате да инсталирате Django. Ако това се случи напишете следната команда вместо горната: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Ако получите грешка при извикване на pip при Ubuntu 12.04 напишете следната команда `python -m pip install -U --force-reinstall pip` за да оправите инсталацията на pip във виртуалната среда. + + + +Това е! Сега вече (най-накрая) сте готови да създадете Django апликация! \ No newline at end of file diff --git a/bg/django_models/README.md b/bg/django_models/README.md new file mode 100644 index 00000000000..05c4135d206 --- /dev/null +++ b/bg/django_models/README.md @@ -0,0 +1,201 @@ +# Модели на Django + +Това, което искаме да създадем сега, е нещо, което ще съхранява всички публикации в нашия блог. Но за да можем да направим това, трябва да поговорим малко за неща, наречени `обекти`. + +## Обекти + +Има концепция в програмирането, наречена `обектно-ориентирано програмиране`. Идеята е, че вместо да пишем всичко като скучна последователност от инструкции за програмиране, можем да моделираме нещата и да определим как те си взаимодействат помежду си. + +И така, какво е обект? Това е съвкупност от свойства и действия. Звучи странно, но ще ви дадем пример. + +Ако искаме да моделираме котка, ще създадем обект `Cat`, който има някои свойства като `color`, `age`, `mood` (като добър, лош или сънен;)) и `owner` (на който може да бъде назначен обект `Person` - или може би в случай на бездомна котка, този свойство може да бъде празно). + +Тогава `Cat` има някои действия: `purr`, `scratch` или `feed` (в този случай ще дадем на котката `CatFood`, който може да бъде отделен обект със свойства, като `taste`). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +Така че в общи линии идеята е да се опишат реални неща в код със свойства (наречени `свойства на обекта`) и действия (наречени `методи`). + +Как ще моделираме публикации в блогове тогава? Искаме да изградим блог, нали? + +Трябва да отговорим на въпроса: Какво е публикация в блога? Какви свойства трябва да има? + +Е, със сигурност нашата публикация в блога се нуждае от текст с нейното съдържание и заглавие, нали? Също така би било хубаво да знаем кой го е написал - така че се нуждаем от автор. И накрая, искаме да знаем кога публикацията е създадена и публикувана. + + Post + -------- + title + text + author + created_date + published_date + + +Какви неща могат да се направят с публикация в блог? Би било хубаво да има някакъв `метод`, който публикува публикацията, нали? + +Така че ще се нуждаем от метод `publish`. + +Тъй като вече знаем какво искаме да постигнем, нека започнем да го моделираме в Django! + +## Django model + +Знаейки какво е обект, можем да създадем модел на Django за нашата публикация в блога. + +Моделът в Django е специален вид обект - той се записва в `database`. База данни е съвкупност от данни. Това е място, на което ще съхранявате информация за потребители, публикации в блога си и т.н. Ще използваме база данни SQLite, за да съхраняваме нашите данни. Това е адаптерът за база данни Django по подразбиране - това ще ни бъде достатъчно в момента. + +Можете да мислите за модел в базата данни като електронна таблица с колони (полета) и редове (данни). + +### Създаване на приложение + +За да поддържаме всичко подредено, ние ще създадем отделно приложение вътре в нашия проект. Много е хубаво да се организира всичко от самото начало. За да създадем приложение, трябва да стартираме следната команда в конзолата (от директорията `djangogirls`, където е файлът ` manage.py`): + +{% filename %}macOS и Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Ще забележите, че се създава нова директория `blog` и сега съдържа редица файлове. Директориите и файловете в нашия проект трябва да изглеждат така: + + djangogirls + ├── blog + │ ├── admin.py + │ ├── apps.py + │ ├── __init__.py + │ ├── migrations + │ │ └── __init__.py + │ ├── models.py + │ ├── tests.py + │ └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │ ├── __init__.py + │ ├── settings.py + │ ├── urls.py + │ └── wsgi.py + ├── myvenv + │ └── ... + └── requirements.txt + + + +След създаването на приложение също трябва да кажем на Django, че трябва да го използва. Правим това във файла `mysite/settings.py` -- отваряме го във вашия редактор на кодове. Трябва да намерим `INSTALLED_APPS` и да добавим ред, съдържащ `'blog.apps.BlogConfig'`. Така че крайният продукт трябва да изглежда така: + +{% 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.apps.BlogConfig', +] +``` + +### Създаване на модел на блог публикация + +Във файла `blog/models.py` дефинираме всички обекти, наречени `Models` - това е място, на което ще дефинираме нашата публикация в блога. + +Нека да отворим `blog/models.py` в редактора на кода, да премахнем всичко от него и да напишем код така: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Проверете двукратно дали използвате два знака за подчертаване (`_`) от всяка страна на `str`. Тази конвенция се използва често в Python и понякога ги наричаме и „dunder“ (съкратено от „двойно-подчертаване“, "double-underscore"). + +Изглежда страшно, нали? Но не се притеснявайте - ще ви обясним какво означават тези редове! + +Всички редове, започващи с `from` или `import`, са редове, които добавят части от други файлове. Така че вместо да копираме и поставяме едни и същи неща във всеки файл, можем да включим някои части с `from ... import ...`. + +`class Post (models.Model):` - този ред дефинира нашия модел (това е `object`). + +- `class` е специална ключова дума, която показва, че дефинираме обект. +- `Post` е името на нашия модел. Можем да му дадем различно име (но трябва да избягваме специални символи и бяло пространство). Винаги започвайте име на клас с главна буква. +- `models.Model` означава, че публикацията е модел на Django, така че Django знае, че трябва да бъде записана в базата данни. + +Сега дефинираме свойствата, за които говорихме: `title`, `text`, `created_date`, `published_date` и `author`. За целта трябва да определим типа на всяко поле (текст ли е? Число? Дата? Отношение към друг обект, като User?) + +- `models.CharField` -- по този начин определяте текст с ограничен брой знаци. +- `models.TextField` -- това е за дълъг текст без ограничение. Звучи идеално за съдържание в блог, нали? +- `models.DateTimeField` -- това е дата и час. +- `models.ForeignKey` -- това е връзка към друг модел. + +Тук няма да обясняваме всяка част от кода, тъй като това ще отнеме твърде много време. Трябва да разгледате документацията на Django, ако искате да знаете повече за моделните полета и как да дефинирате неща, различни от описаните по-горе (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field -types). + +Какво ще кажете за `def publish(self):`? Това е точно методът `publish`, за който говорихме преди. `def` означава, че това е функция/метод и `publish` е името на метода. Можете да промените името на метода, ако искате. Правилото за именуване е, че използваме малки букви и подчертавки вместо интервали (прасни места). Например метод, който изчислява средна цена, може да се нарече `calculate_average_price`. + +Методите често `връщат` нещо. Има пример за това в метода `__str__`. В този сценарий, когато извикаме `__str __ ()`, ще получим текст (**string**) със заглавие на публикацията. + +Също така забележете, че и двете `def publish(self):` и `def __str__(self):` са отредени в нашия клас. Тъй като Python е чувствителен към бялото пространство, трябва да отстъпим методите си вътре в класа. В противен случай методите няма да принадлежат към класа и можете да получите някакво неочаквано поведение. + +Ако нещо все още не е ясно за моделите, не се колебайте да попитате своя ментор! Знаем, че е сложно, особено когато научиш едновременно какво са обекти и функции. Но да се надяваме, че сега изглежда малко по-малко вълшебно за вас! + +### Създайте таблици за модели във вашата база данни + +Последната стъпка тук е да добавим нашия нов модел към базата данни. Първо трябва да накараме Django да разбере, че имаме някои промени в нашия модел. (Току-що го създадохме!) Отидете до прозореца на вашата конзола и напишете `python manage.py makemigrations blog`. Ще изглежда така: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Забележка:** Не забравяйте да запазите файловете, които редактирате. В противен случай компютърът ви ще изпълни предишната версия, която може да ви даде неочаквани съобщения за грешка. + +Django подготви миграционен файл за нас, който сега трябва да приложим към нашата база данни. Въведете `python manage.py migrate blog` и изходът трябва да бъде както следва: + +{% 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 + + +Ура! Моделът ни на публикация вече е в нашата база данни! Би било хубаво да го видите, нали? Преминете към следващата глава, за да видите как изглежда вашата публикация! \ No newline at end of file diff --git a/bg/django_orm/README.md b/bg/django_orm/README.md new file mode 100644 index 00000000000..ccb19494aa3 --- /dev/null +++ b/bg/django_orm/README.md @@ -0,0 +1,221 @@ +# Django ORM и QuerySets + +В тази глава ще научите как Django се свързва с базата данни и съхранява данни в нея. Нека се потопим! + +## Какво е QuerySet? + +QuerySet е по същество списък на обекти на даден Модел. QuerySets ви позволяват да четете данните от базата данни, да ги филтрирате и да ги подредите.. + +Най-лесно е да се учи чрез пример. Нека опитаме това, нали? + +## Django shell + +Отворете вашата локална конзола (не на PythonAnywhere) и въведете тази команда: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Ефектът трябва да бъде такъв: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Вече сте в интерактивната конзола на Django. Това е точно като Python конзолата, но с допълнителна магия на Django. :) Тук можете да използвате всички Python команди. + +### Всички обекти + +Нека се опитаме първо да покажем всички наши публикации. Можете да направите това със следната команда: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Ами сега! Появи се грешка. Това ни казва, че няма Post. Правилно е - забравихме да го внесем първо! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Импортираме модела `Post` от `blog.models`. Нека опитаме отново да покажем всички публикации: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Това е списък на публикациите, които създадохме по-рано! Създадохме тези публикации чрез администраторския интерфейс на Django. Но сега искаме да създаваме нови публикации с помощта на Python, така че как да направим това? + +### Създаване на обект + +Ето как създавате нов обект Post в базата данни: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Но тук имаме една липсваща съставка: `me`. Трябва да предадем инстанция на модел `User` като автор. Как да направим това? + +Нека първо да импортираме модел User: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Какви потребители имаме в нашата база данни? Опитайте това: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Това е суперпотребителят, който създадохме по-рано! Нека сега вземем потребителя (коригирайте този ред, за да използвате вашето потребителско име): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Както можете да видите, сега `get` a `User` с `username`, което се равнява на „ola“. Яко! + +Сега най-накрая можем да създадем нашия пост: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Ура! Искате ли да проверите дали работи? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Ето, още една публикация в списъка! + +### Добавете още публикации + +Вече можете да се позабавлявате малко и да добавяте още публикации, за да видите как работи. Добавете още две или три и след това преминете към следващата част. + +### Филтрирайте обекти + +Голяма част от QuerySets е възможността да ги филтрирате. Да речем, че искаме да намерим всички публикации, на които потребителят ola е автор. Ще използваме `filter` вместо `all` в `Post.objects.all()`. В скобите посочваме на кое условие(я) трябва да отговаря блог публикацията, за да се озове в нашия набор от заявки. В нашия случай условието е `author/0> да бъде равен на me`. Начинът да го напишем в Django е `author=me`. Сега нашата част от кода изглежда така: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +Или може би искаме да видим всички публикации, които съдържат думата 'title' в полето `title`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Забележка** Има два знака за подчертаване (`_`) между `title` и `contains`. ORM на Django използва това правило за разделяне на имена на полета ("title") и операции или филтри ("contains"). Ако използвате само една долна черта, ще получите грешка като "FieldError: Не може да разреши ключовата дума title_contains". + +Можете също така да получите списък с всички публикувани публикации. Правим това, като филтрираме всички публикации, които имат `published_date` са зададени в миналото: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +За съжаление, публикацията, която добавихме от конзолата Python, все още не е публикувана. Но можем да променим това! Първо получете екземпляр от публикация, която искаме да публикуваме: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +И след това го публикувате с нашия метод `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Сега опитайте отново да получите списък с публикувани публикации (натиснете клавиша със стрелка нагоре три пъти и натиснете `enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Подреждане на обекти + +QuerySets също ви позволяват да поръчате списъка с обекти. Нека се опитаме да ги поръчаме от полето `created_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Можем също да обърнем подреждането, като добавим `-` в началото: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Сложни заявки чрез свързване на методи + +Както видяхте, някои методи на `Post.objects` връщат QuerySet. Същите методи от своя страна могат също да бъдат извикани на QuerySet и след това ще върнат нов QuerySet. По този начин можете да комбинирате ефекта им, като ги **свържете** заедно: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Това е наистина мощно и ви позволява да пишете доста сложни заявки. + +Готино! Вече сте готови за следващата част! За да затворите конзолата, въведете това: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/bg/django_start_project/README.md b/bg/django_start_project/README.md new file mode 100644 index 00000000000..70c8788fcb6 --- /dev/null +++ b/bg/django_start_project/README.md @@ -0,0 +1,207 @@ +# Вашият първи проект с Django! + +> Част от тази глава е базирана на уроци от Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Части от тази глава се основават на [django-marcador tutorial](http://django-marcador.keimlink.de/), лицензиран съгласно лиценза Creative Commons Attribution-ShareAlike 4.0 International. Урокът за django-marcador е защитен с авторско право от Markus Zapke-Gründemann и сие. + +Ще създадем малък блог! + +Първата стъпка е да започнете нов проект на Django. По принцип това означава, че ще изпълним някои скриптове, предоставени от Django, които ще създадат скелета на проект на Django за нас. Това е само куп директории и файлове, които ще използваме по-късно. + +Имената на някои файлове и директории са много важни за Django. Не трябва да преименувате файловете, които предстои да създадем. Преместването им на друго място също не е добра идея. Django трябва да поддържа определена структура, за да може да намери важни неща. + +> Не забравяйте да стартирате всичко във virtualenv (виртуалната среда). Ако не видите префикс `(myvenv)` в конзолата си, трябва да активирате своята virtualenv. Обяснихме как да направим това в главата **Инсталация на Django** в частта **Работа с virtualenv**. Въвеждането `myvenv\Scripts\activate`` в Windows или <0>source myvenv/bin/activate` в macOS или Linux ще направи това вместо вас. + + + +Във вашата macOS или Linux конзола трябва да изпълните следната команда. ** Не забравяйте да добавите точка `.` в края!** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Точката `.` е от решаващо значение, тъй като казва на скрипта да инсталира Django във вашата текуща директория (за която точката `.` е препратка). +> +> **Забележка** Когато пишете командата по-горе, не забравяйте, че въвеждате само частта, която започва от `django-admin`. Частта `(myvenv) ~/djangogirls$`, показана тук, е само пример за подкана, която ще покани вашия вход във вашия команден ред. + + + + + +В Windows трябва да изпълните следната команда. **(Не забравяйте да добавите точка `.` в края)**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Точката `.` е от решаващо значение, тъй като казва на скрипта да инсталира Django във вашата текуща директория (за която точката `.` е препратка). +> +> **Забележка** Когато пишете командата по-горе, не забравяйте, че въвеждате само частта, която започва от `django-admin.exe`. Частта `(myvenv) C:\Users\Name\djangogirls>`, показана тук, е само пример за подкана, която ще покани вашия вход във вашия команден ред. + + + +`django-admin.py` е скрипт, който ще създаде директории и файлове за вас. Сега трябва да имате структура на директория, която изглежда така: + + djangogirls + ├── manage.py + ├── mysite + │ ├── __init__.py + │ ├── settings.py + │ ├── urls.py + │ └── wsgi.py + ├── myvenv + │ └── ... + └── requirements.txt + + +> **Забележка**: в структурата на вашата директория ще видите и вашата `myvenv` директория, която създадохме преди. + +`manage.py` е скрипт, който помага при управлението на сайта. С него ще можем (освен всичко друго) да стартираме уеб сървър на нашия компютър, без да инсталираме нищо друго. + +Файлът `settings.py` съдържа конфигурацията на вашия уебсайт. + +Спомняте ли си, когато говорихме за пощенски превозвач, проверяващ къде да достави писмо? `urls.py` файлът съдържа списък от модели, използвани от `urlresolver`. + +За сега игнорираме останалите файлове, тъй като няма да ги променяме. Единственото нещо, което трябва да запомните, е да не ги изтриете случайно! + +## Промяна на настройките + +Нека направим някои промени в `mysite/settings.py`. Отворете файла с помощта на редактора на кода, който сте инсталирали по-рано. + +**Забележка**: Имайте предвид, че `settings.py` е обикновен файл, като всеки друг. Можете да го отворите от редактора на кода, като използвате "file -> open" от менюто. Това трябва да ви изведе обичайния прозорец, в който можете да се придвижите до вашия файл `settings.py` и да го изберете. Освен това можете да отворите файла, като отворите папката djangogirls на вашия работен плот и щракнете с десния бутон върху него. След това изберете редактора на кода от списъка. Изборът на редактора е важен, тъй като може да имате инсталирани други програми, които могат да отворят файла, но няма да ви позволят да го редактирате. + +Би било хубаво да имаме точното време на нашия уебсайт. Отидете в [списъка на часовите зони на Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) и копирайте съответната часова зона (ЧЗ) (напр. `Европа/Берлин`). + +В `settings.py` намерете реда, който съдържа `TIME_ZONE` и го модифицирайте, за да изберете своя собствена часова зона. Например: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Езиков код се състои от езика, напр. `en` за английски или `de` за немски, и кодът на държавата, напр. `de` за Германия или `ch` за Швейцария. Ако английският не е вашият роден език, можете да добавите това, за да промените бутоните по подразбиране и известията от Django, за да бъдат на вашия език. Така че ще имате бутон „Отказ“, преведен на езика, който сте дефинирали тук. [Django идва с много подготвени преводи](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code). + +Ако искате друг език, променете езиковия код, като промените следния ред: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Ще трябва също да добавим път за статични файлове. (Ще разберем всичко за статичните файлове и CSS по-късно в урока.) Слезте до *края* на файла и точно под надписа `STATIC_URL` добавете нов, наречен `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Когато `DEBUG` е `True` и `ALLOWED_HOSTS` е празен, хостът е валидиран срещу `['localhost', '127.0.0.1', '[::1]']`. Това няма да съвпада с името на хоста ни в PythonAnywhere, след като разширим нашето приложение, така че ще променим следната настройка: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Забележка**: Ако използвате Chromebook, добавете този ред в долната част на вашия settings.py файл:    `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Също така добавете `.amazonaws.com` към `ALLOWED_HOSTS`, ако използвате cloud9 + +## Създаване на база данни + +Има много различни софтуерни бази данни, които могат да съхраняват данни за вашия сайт. Ще използваме тази по подразбиране `sqlite3`. + +Това вече е настроено в тази част на вашия `mysite/settings.py` файл: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +За да създадем база данни за нашия блог, нека пуснем следното в конзолата: `python manage.py migrate` (трябва да бъдем в директорията `djangogirls`, която съдържа ` manage.py` файл). Ако това върви добре, трябва да видите нещо подобно: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... ОК + + +И ние сме готови! Време е да стартирате уеб сървъра и да видите дали уебсайтът ни работи! + +## Стартиране на уеб сървъра + +Трябва да сте в директорията, която съдържа файла `manage.py` (директорията `djangogirls`). В конзолата можем да стартираме уеб сървъра, като пуснем `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Ако сте на Chromebook, използвайте вместо това тази команда: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Ако сте в Windows и това не успее с `UnicodeDecodeError`, използвайте вместо това тази команда: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Сега трябва да проверите дали уебсайтът ви работи. Отворете браузъра си (Firefox, Chrome, Safari, Internet Explorer или каквото използвате) и въведете този адрес: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Ако използвате Chromebook и Cloud9, вместо това щракнете върху URL адреса в изскачащия прозорец, който би трябвало да се появи в горния десен ъгъл на командния прозорец, където работи уеб сървърът. URL адресът ще изглежда като: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +Честито! Току-що създадохте първия си уебсайт и го стартирате с помощта на уеб сървър! Това не е ли страхотно? + +![Инсталирането работи!](images/install_worked.png) + +Обърнете внимание, че командният прозорец може да стартира само едно по едно и командният прозорец, който отворихте по-рано, работи на уеб сървъра. Докато уеб сървърът работи и чака допълнителни входящи заявки, терминалът ще приема нов текст, но няма да изпълнява нови команди. + +> Прегледахме как работят уеб сървърите в главата **Как работи Интернет**. + +За да въведете допълнителни команди, докато уеб сървърът работи, отворете нов прозорец на терминала и активирайте своята virtualenv - за да прегледате инструкциите как да отворите втори прозорец на терминала, вижте [Въведение в командния ред](../intro_to_command_line/README.md). За да спрете уеб сървъра, върнете се обратно към прозореца, в който работи, и натиснете CTRL + C - Control и C клавиши заедно (във Windows може да се наложи да натиснете Ctrl + Break). + +Готови ли сте за следващата стъпка? Време е да създадете малко съдържание! \ No newline at end of file diff --git a/bg/django_start_project/images/install_worked.png b/bg/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/bg/django_start_project/images/install_worked.png differ diff --git a/bg/django_templates/README.md b/bg/django_templates/README.md new file mode 100644 index 00000000000..1313ac56932 --- /dev/null +++ b/bg/django_templates/README.md @@ -0,0 +1,108 @@ +# Django шаблони + +Време е да покажем на екран малко данни! Django има вградени **template tags** за тази цел. + +## Какви са тези шаблонни етикети? + +Виждате, в HTML не може наистина да пишете Python код, защото търсачките не го разбират. Те знаят само HTML. Знаем, че HTML е статичен, докато Python е по-динамичен. + +**Django template tags** ни позволяват да прехвърлим Python нещата към HTML, така че да изграждаме динамични сайтове по-бързо. Супер! + +## Показване на шаблон за лист от публикации + +В предишната глава дадохме на нашия шаблон лист от публикации с променливата `posts`. Сега ще го покажем на екран с HTML. + +За да отпечатаме променливата в шаблоните на Django, използваме къдрави скоби с името на променливата вътре ето така: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Пробвайте това във вашия шаблон `blog/templates/blog/post_list.html`. Отворете го в редактора си и заместете всичко от вторият `
` до третият `
` с `{{ posts }}`. Запазете файла и опреснете страницата за да видите резултатите: + +![Фигура 13.1](images/step1.png) + +Както може да видите, всичко което имаме е това: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Това означава, че Django го разбира като лист от обекти. Помните ли от **Въведение в Python** как показваме листове? Да, с for цикли! При Django шаблоните ги правим така: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Пробвайте това във вашия шаблон. + +![Фигура 13.2](images/step2.png) + +Работи! Но ние искаме публикациите ни да се показват като статичните публикации, които създадохме по-рано в главата **Въведение в HTML**. Можете да смесвате HTML с шаблони. Нашето `body` ще изглежда така: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Всичко, което сложите между `{% for %}` и `{% endfor %}` ще се повтаря за всеки обект в листа. Опреснете страницата си: {% endraw %} + +![Фигура 13.3](images/step3.png) + +Забелязахте ли, че този път използвахме малко по-различно означение (`{{ post.title }}` или `{{ post.text }}`)? Достъпваме данните във всяко едно поле дефинирано в нашия `Post` модел. Също така `|linebreaksbr` изпраща текста на публикациите през филтър и превръща в абзаци. + +## Още едно нещо + +Ще е хубаво да видим дали уеб страницата ви работи в Internet, нали? Нека го прехвърлим отново на PythonAnywhere. Ето преглед на стъпките: + +* Първо, изпратете кода си към GitHub + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* След това влезте пак в [PythonAnywhere](https://www.pythonanywhere.com/consoles/) акаунта си и отидете на **Bash console** (или стартирайте нова) и напишете командите: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(Не забравяйте да заместите `` с вашия актуален PythonAnywhere субдомейн, без скобите.) + +* Накрая отидете на ["Web" страница](https://www.pythonanywhere.com/web_app_setup/) и натиснете **Reload** на вашата апликация. (За да достигнете други PythonAnywhere страници от конзолата, използвайте бутона от менюто в горния десен ъгъл.) Вашете обновление трябва да съществува на https://subdomain.pythonanywhere.com -- проверете в търсачката си! Ако публикациите на вашата PythonAnywhere страница не съвпадат с тези, които се появяват на локалния ви сървър, това е нормално. Базата от данни на локалния ви компютър не са синхронизирани с останалите ви файлове на PythonAnywhere. + +Поздравления! Сега добавете нова публикация в администрацията на Django (помнете да добавите published_date!) Бъдете сигурни, че сте администрацията на Django на своята страница в pythonanywhere, https://subdomain.pythonanywhere.com/admin. След това презаредете страницата за да видите дали публикациите са налице. + +Работи безупречно? Горди сме с теб! Сега отстъпи от компютъра си за малко – заслужи си почивка. :) + +![Фигура 13.4](images/donut.png) \ No newline at end of file diff --git a/bg/django_templates/images/donut.png b/bg/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/bg/django_templates/images/donut.png differ diff --git a/bg/django_templates/images/step1.png b/bg/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/bg/django_templates/images/step1.png differ diff --git a/bg/django_templates/images/step2.png b/bg/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/bg/django_templates/images/step2.png differ diff --git a/bg/django_templates/images/step3.png b/bg/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/bg/django_templates/images/step3.png differ diff --git a/bg/django_urls/README.md b/bg/django_urls/README.md new file mode 100644 index 00000000000..be16809c102 --- /dev/null +++ b/bg/django_urls/README.md @@ -0,0 +1,103 @@ +# Django URLs + +Готови сме да създадем нашата първа уеб страница: начална страница на твоя блог! Но първо нека научим малко повече за Django URLs. + +## Какво е URL? + +URL е уеб адрес. Може да видиш URL всеки път когато посещаваш уебсайт – видимо е в полето за адрес на твоята търсачка. (Да! `127.0.0.1:8000` е URL! И `https://djangogirls.org` също е URL.) + +![URL](images/url.png) + +Всяка страница в Internet има нужда от собствен URL. По този начин твоето приложение знае какво трябва да покаже на потребителя, който отваря този URL. В Django използваме нещо наречено `URLconf` (URL конфигурация). URLconf е пакет от примери, които Django се опитва да съпостави със запитания URL за да намери правилния изглед. + +## Как работят URL в Django? + +Нека отворим файла `mysite/urls.py` в редактора си и видим как изглежда: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Както може да видите, Django вече е сложил нещо за нас тук. + +Редовете между трите кавички (`'''` or `"""`) се наричат docstrings – може да ги изписвате в началото на файла, класове или методи за да обясните какво прави кода - като коментар. Те няма да се изпълнят от Python. + +Администртивния URL, който посетихте в предната глава е вече тук: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Този ред означава, че за всеки URL, който започва с `admin/`, Django ще намери съответстващ изглед *view*. В този случай въвеждаме много администраторски URL, така че да не е претъпкано в този малък файл – по-четимо и по-чисто. + +## Твоя първи Django URL! + +Време е да създадете вашия първи URL! Искаме 'http://127.0.0.1:8000/' да бъде началната страница на нашия блог и да показва лист от публикации. + +Също така искаме да задържим файла `mysite/urls.py` чист, така че да въведем URL от нашата `blog` апликация към главният файл `mysite/urls.py`. + +Давайте напред, като добавите ред с който ще въведете `blog.urls`. Също ще искате да направите промени в `from django.urls…` реда, защото използваме функция `include`, така че вие трябва да добавите `import` към този ред. + +Вашият файл `mysite/urls.py` трябва да изглежда ето така: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django сега ще пренасочва всичко, което идва към 'http://127.0.0.1:8000/' до `blog.urls` и търси за следващи инструкции тук. + +## blog.urls + +Създайте нов файл с име `urls.py` в директория на `blog` и го отворете с редактора си. И така! Добавете следните два реда: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Тук въвеждаме функцията на Django `path` и всички наши изгледи ( `views`) от `blog` апликацията. (Все още нямаме никакви, но ще стигнем до там след минута!) + +След това можем да добавим наши първи URL образец: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Както виждате, сега приписваме изгледа наречен `post_list` към началния (root) URL. Този URL образец ще съвпадне с празен низ и преобразувателя в Django URL ще игнорира домейн името (т.е.,http://127.0.0.1:8000/), което започва с пълния път на URL. Този образец казва на Django, че `views.post_list` е правилното място да отиде, ако някой влезе в сайта ви на адрес 'http://127.0.0.1:8000/'. + +Последната част, `name='post_list' + +

Ако сега се опитате да посетите http://127.0.0.1:8000/, ще видите съобщение от рода на 'web page not available' . Това е така, защото сървърът (помните командата runserver`?) вече не е активен. Погледнете в конзолата на сървъра си и разберете защо. + +![Error (Грешка)](images/error1.png) + +Конзолата ви показва грешка, но не се тревожете – това всъщност е много полезно: Казва ви, **че няма атрибут с име 'post_list'**. Това е името на изгледа, който Django се опитва да намери и използва, но ние не сме го създали все още. На този етап, вашият `/admin/` също няма да работи. Не се тревожете – ще стигнем и до там. Ако виждате съобщение с друга греша, опитайте се да презаредите уеб сървъра. За да направите това, в конзолния прозорец, където сте пуснали сървъра, натиснете Ctrl+C за да го спрете (Ctrl + C заедно). На Windows може би трябва да натиснете Ctrl+Break. След това трябва да презаредите уеб сървъра като напишете командата `python manage.py runserver`. + +> Ако искате да научите повече за Django URLconfs, вижте в официалната документация: https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/bg/django_urls/images/error1.png b/bg/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/bg/django_urls/images/error1.png differ diff --git a/bg/django_urls/images/url.png b/bg/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/bg/django_urls/images/url.png differ diff --git a/bg/django_views/README.md b/bg/django_views/README.md new file mode 100644 index 00000000000..02efa058ccc --- /dev/null +++ b/bg/django_views/README.md @@ -0,0 +1,44 @@ +# Django views - време за създаване! + +Време е да премахнем пречката, която създадохме в последната глава! :) + +*view* е мястото, където поставяме "логиката" на приложението ни. Ще изиска информация от моделът, който създадохме по-рано и ще го подаде на шаблона. Ще създадем шаблон в следващата глава. Изгледите са просто Python фукнции, които са малко по-сложни от тези, които написахме в главата **Въведение в Python**. + +Изгледите са във файла `views.py`. Ние ще добавим първи си изглед към файла `blog/views.py`. + +## blog/views.py + +И така, нека отворим файла в редактора си видим какво има в него: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Няма почти нищо все още. + +Помнете, че редовете, които започват с `#` са коментари – което означава, че тези редове няма да се четат от Python. + +Нека създадем *view* както коментара предлага да направим. Добавете следният минимален изглед под него: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Както забелязвате, създаваме фукнция (`def`) наречена `post_list`, която взима за стойност `request` ще върне друга функция `render`, взимайки стойността, шаблона и контекста. + +Запазете файла и отидете на http://127.0.0.1:8000/ за да видите какво имаме там. + +Друга грешка! Прочетете какво се случва сега: + +![Error (Грешка)](images/error.png) + +Това показва, че сървърът отново работи, но все още не изглежда както трябва, нали? Не се тревожете. Това е само страница с грешка, няма от какво да се страхувате! Също като съобщение с грешка в конзолата, тези са всъщност от голяма полза. Можете да прочетете, че *TemplateDoesNotExist*. Нека отстраним тази грешка и създадем шаблон в следващата глава! + +> Научете повече за Django изгледите като прочетете официалната документация: https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/bg/django_views/images/error.png b/bg/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/bg/django_views/images/error.png differ diff --git a/bg/dynamic_data_in_templates/README.md b/bg/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..7268cc70b0b --- /dev/null +++ b/bg/dynamic_data_in_templates/README.md @@ -0,0 +1,81 @@ +# Динамични данни в шаблоните + +Имаме различни парчета на места: `Post` моделът е дефиниран в `models.py`, имаме `post_list` във `views.py` и добавен шаблон. Но как всъщност ще направим, така че нашите публикации да се показват на HMTL шаблон? Защото това е, което искаме да направим – да вземем някакво съдържание (запазените модели в базата от данни) и да се показват хубаво на нашия шаблон, нали? + +Това е точно, което *views* трябва да правят: свързват моделите с шаблоните. В нашия изглед за `post_list` ще трябва да вземем моделите, които искаме да показваме и да ги предадем на шаблоните. В изгледа ние определяме какво (модел) ще се изобразява в шаблона. + +Добре, как ще го постигнем? + +Трябва да отворим `blog/views.py` в редактора си. До момента `post_list` изгледа е такъв: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Помните ли когато говорихме за вмъкване на код написан в различни файлове? Сега е моментът, в който трябва да вмъкнем модела, който създадохме в `models.py`. Ще добавим реда `from .models import Post` така: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Точката преди `models` означава настояща директория или настояща апликация. Двата файла `views.py` и `models.py` са в една и съща директория. Това означава, че можем да използваме `.` и името на файла (без разширението `.py`). Тогава въвеждаме името на модела (`Post`). + +Но след това какво? За да вземем всъщност публикация от `Post` модела ни трябва нещо наречено `QuerySet`. + +## QuerySet + +Вече трябва да сте запознати как работят QuerySets. Говорихме за тях в главата [Django ORM (QuerySets)](../django_orm/README.md). + +Сега искаме публикуваните ни блог постове сортирани по дата на публикуване, нали? Вече направихме това в главата QuerySets! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +И така, нека да отворим файла `blog/views.py` в редактора и добавим този код към функцията `def post_list(request)` -- но нека не забравяме първо да добавим `from django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Последната липсваща част е подаването на QuerySet постове към контекста на шаблона. Не се притеснявайте -- ще обясним как става в по-следваща глава. + +Моля забележете, че създадохме променлива за нашия QuerySet: `posts`. Ползвайте това като име на нашия QuerySet. От сега нататък можем да се отнасяме към него с това име. + +В `render` функцията имаме един параметър `request` (всичко се получава от потребителят чрез Internet) и друг даващ файла на шаблона (`'blog/post_list.html'`). Последният параметър, `{}`, е място в което може да добавим някакви неща, така че шаблона да ги използва. Трябва да им дадем имена (ще се придържаме към `'posts'` засега). :) Трябва да изглежда ето така: `{'posts': posts}`. Забележете, че частта преди `:` е низ; трябва да го заградите с кавички: `''`. + +И така накрая нашия файл `blog/views.py` трябва да изглежда така: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Това е! Време е да се върнем към нашия шаблон и да покажем на екрана QuerySet! + +Искате да прочетете малко повече за QuerySets в Django? Трябва да погледнете тук: https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/bg/extend_your_application/README.md b/bg/extend_your_application/README.md new file mode 100644 index 00000000000..923f2555b66 --- /dev/null +++ b/bg/extend_your_application/README.md @@ -0,0 +1,215 @@ +{% set warning_icon = '' %} + +# Продължете апликацията си + +Вече завършихме всички различни стъпки необходими за създаването на нашия уеб сайт: знаем как да напишем модел, URL, изглед и шаблон. Знаем също и как да направим сайта ни хубав. + +Време е за практика! + +Първото нешо, което ни е необходимо за блога е очевидно страница, която да показва една публикация, нали така? + +Вече разполагаме с `Post` модел, така че няма нужда да правим промени в `models.py`. + +## Създайте връзка към шаблона със съдържанието на поста. + +Ще започнем като добавим връзка във файла `blog/templates/blog/post_list.html`. Отворете го в редактора си, като до момента трябва да изглежда по този начин: {% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +

+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %} Искаме да имаме връзка от заглавието на поста в листа с публикациите до страницата със съдържанието на поста. Нека променим `

{{ post.title }}

`, така че да се свързва със съдържанието на страницата:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %} Време е да обясним мистериозния код `{% url 'post_detail' pk=post.pk %}`. Може би забелязахте, че означението `{% %}` означава, че използваме Django шаблонни етикети. Този път ще изполваме такъв, който създава URL за нас! {% endraw %} + +`post_detail` частта означава, че Django трябва да очаква URL в `blog/urls.py` с име name=post_detail + +А какво за `pk=post.pk`? `pk` идва накратко от primary key, което е уникален идентификатор за всеки един запис в базата данни. Всеки Django модел има поле, което служи за негов първоначален код (primary key), и каквото и друго име да има, то може също да се съотнесе като "pk". Тъй като не уточнихме първоначалната стойност в нашия `Post` модел, Django създава един за нас (по подразбиране, полето "id" , съдържащо номер, който се увеличава при всеки запис, т.е. 1, 2, 3) и го добавя към полето на всеки от нашите постове. Можем да достигнем primary key като напишем `post.pk`, по същия начин достъпваме други полета (`title`, `author`, и т.н.) в нашия `Post` обект! + +Сега като отидем на http://127.0.0.1:8000/ ще видим грешка ( както се очаквкаше, тъй като все още нямаме URL или *view* за `post_detail`). Ще изглежда така: + +![NoReverseMatch грешка](images/no_reverse_match2.png) + +## Създаване на URL към съдържанието на поста + +Нека създадем URL в `urls.py` за нашия `post_detail` *view*! + +Искаме първия ни пост да бъде показван на този **URL**: http://127.0.0.1:8000/post/1/ + +Сега да направим URL във файла `blog/urls.py`, който да насочва Django към *view* наречен `post_detail`, който ще показва целия блог пост. Отворете файла `blog/urls.py` в редактора си и добавете следния ред `path('post//', views.post_detail, name='post_detail'),`, така че файлът да изглежда по този начин: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Тази част `post//` уточнява URL образеца -- ще ви го обясним: + +- `post/` означава, че URL трябва да започва с думата **post** последвана от **/**. Дотук добре. +- `` -- тази част е по-сложна. Означава, че Django очаква стойност цяло число и ще го преведе към изгледа (view) като променлива наречена `pk`. +- `/` – след това ни е необходима **/** преди да завършим URL. + +Това означава, че когато напишем в търсачката си `http://127.0.0.1:8000/post/5/`, Django ще разбере, че търсите за *view* наречен `post_detail` и изпраща информацията, че този `pk` съответства на `5` спрямо този *view* (изглед). + +И така, добавихме нов URL образец към `blog/urls.py`! Нека презаредим страницата: http://127.0.0.1:8000/ Бум! Сървърът отново спря да работи. Погледнете в конзолата -- както се очакваше, има нова грешка! + +![AttributeError](images/attribute_error2.png) + +Помните ли каква е следващата стъпка? Добавяне на нов изглед (view)! + +## Добавяне на изглед за съдържанието на поста + +Този път на нашето *view* даваме допълнителен параметър, `pk`. Нашето *view* трябва да го прихване, нали? Така, ще дефинираме нашата функция като `def post_detail(request, pk):`. Забележете, че този параметър трябва да има точно същото име като на `urls` (`pk`), който уточнихме по-рано. Също така забележете, че пропускането на тази променлива е неправилно и в резултат ще доведе до грешка! + +Сега, искаме да вземем само и единствено една публикация. За да направим това, можем да използваме querysets ето така: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Но този код има проблем. Ако нямаме `Post` с даден `primary key` (`pk`) ще имаме много грозна грешка! + +![DoesNotExist грешка](images/does_not_exist2.png) + +Ние не искаме това! За щастие Django идва с нещо, с което да се справи вместо нас: `get_object_or_404`. В случай, че няма `Post` със зададен `pk`, ще се покаже на екрана много по-добре, `Page Not Found 404` страница. + +![Page not found](images/404_2.png) + +Хубавото е, че всъщност и вие можете да си създадете такава страница `Page not found` и да я направите колкото си искате хубава. Но не е чак толкова важно в момента, затова ще го пропуснем. + +ОК, време е да добавим *view* към нашия файл `views.py`! + +В 0>blog/urls.py създадохме URL правило наречено `post_detail`, което се отнася до изглед с име `views.post_detail`. Това означава, че Django ще очаква изглед функция наречена `post_detail` вътре в `blog/views.py`. + +Трябва да отворим `blog/views.py` в редактора и да добавим следния код близо до другите редове `from` : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 + +``` + +И накрая на файла ще добавим нашия изглед (*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}) +``` + +Да. Време е да презаредим страницата: http://127.0.0.1:8000/ + +![Post list view (Изглед с лист от постове)](images/post_list2.png) + +Работи! Но сега какво става, когато кликнете върху връзката със заглавието на поста? + +![TemplateDoesNotExist грешка](images/template_does_not_exist2.png) + +Оо, не! Друга грешка! Но вече знаем как да се справим с това, нали? Трябва да добавим нов шаблон! + +## Създайте шаблон за съдържанието на поста + +Ще създадем файл в `blog/templates/blog` наречен `post_detail.html`, и ще го отворим в редактора. + +Впишете следния код: + +{% 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 %} +``` + +Още веднъж удължаваме `base.html`. В блока `content` искаме да покажем датата на публикуване на поста (ако същестрвува), заглавието и текста. Но трябва да обсъдим други важни работи, нали? + +{% raw %}`{% if ... %} ... {% endif %}` е шаблонен етикет, който използваме, когато искаме да проверим нещо. (Помните ли `if ... else ...` от главата ** Въведение в Python**?) В този случай искаме да проверим дали `published_date` (датата на публикване) на поста не е празна.{% endraw %} + +ОК, можем да отворим страницата ни наново и ще видим, че `TemplateDoesNotExist` сега го няма. + +![Post detail page (Страница със съдържанието на поста)](images/post_detail2.png) + +Ихаа! Работи! + +# Време за прехвърляне на файловете! + +Би било добре да видите дали сайта ви работи на PythonAnywhere нали? Нека опитаме да прехвърлим всичко отново. + +{% 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 + + +Тогава, в [PythonAnywhere Bash конзолата](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Не забравяйте да замените `` с вашият актуален PythonAnywhere субдомейн, без скобите.) + +## Обновяване на статичните файлове на сървърът: + +Сървъри като PythonAnywhere обичат да се отнасят към "статичните файлове" (като CSS файлове) различно от Python файловете, защото те могат да оптимизират зареждането им по-бързо. В резултат, когато правим промени на нашите CSS файлове трябва да напишем допълнителни команди на сървъра за да му кажем да ги обнови. Командата се казва `collectstatic`. + +Започнете като активирате виртуалната си среда, ако не е активна от преди това (PythonAnywhere използва команда наречена `workon` да направи това, същото е както когато използваме команда `source myenv/bin/activate` на своя компютър. + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +Командата `manage.py collectstatic` е нещо като `manage.py migrate`. Правим промени на кода си, след това казваме на Django да приложи тези промени или към събраните статизни файлове на сървъра или към базата данни. + +Във всеки случай сега сме готови да отидем на ["Web" страницата](https://www.pythonanywhere.com/web_app_setup/) (от бутона на менюто в горния десен ъгъл) и натиснем **Reload**, след това погледнете страницата https://subdomain.pythonanywhere.com за да видите резултата. + +Та това е! Поздравления :) \ No newline at end of file diff --git a/bg/extend_your_application/images/404_2.png b/bg/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/bg/extend_your_application/images/404_2.png differ diff --git a/bg/extend_your_application/images/attribute_error2.png b/bg/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/bg/extend_your_application/images/attribute_error2.png differ diff --git a/bg/extend_your_application/images/does_not_exist2.png b/bg/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/bg/extend_your_application/images/does_not_exist2.png differ diff --git a/bg/extend_your_application/images/no_reverse_match2.png b/bg/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/bg/extend_your_application/images/no_reverse_match2.png differ diff --git a/bg/extend_your_application/images/post_detail2.png b/bg/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/bg/extend_your_application/images/post_detail2.png differ diff --git a/bg/extend_your_application/images/post_list2.png b/bg/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/bg/extend_your_application/images/post_list2.png differ diff --git a/bg/extend_your_application/images/template_does_not_exist2.png b/bg/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/bg/extend_your_application/images/template_does_not_exist2.png differ diff --git a/bg/how_the_internet_works/README.md b/bg/how_the_internet_works/README.md new file mode 100644 index 00000000000..a1f0d1818bf --- /dev/null +++ b/bg/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Как работи интернет + +> За читателите у дома: тази глава е разгледана във видеото [Как работи интернет](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Тази глава е вдъхновена от беседата "Как работи Интернет" от Джесика Маккелар (http://web.mit.edu/jesstess/www/). + +Обзалагаме се, че използвате интернет всеки ден. Но всъщност знаете ли какво се случва, когато въведете адрес като https://djangogirls.org в браузъра си и натиснете `enter`? + +Първото нещо, което трябва да разберете е, че уебсайтът се състои от куп файлове, записани на твърд диск - точно като вашите филми, музика или снимки. Има обаче една част, която е уникална за уебсайтовете: те включват компютърен код, наречен HTML. + +Ако не сте запознати с програмирането, в началото може да е трудно да разберете HTML, но вашите уеб браузъри (като Chrome, Safari, Firefox и др.) го харесват. Уеб браузърите са създадени да разбират този код, да следват неговите инструкции и да представят тези файлове, от които е направен уебсайтът ви, точно по начина, по който искате. + +Както при всеки файл, ние трябва да съхраняваме HTML файлове някъде на твърд диск. За интернет използваме специални, мощни компютри, наречени *сървъри*. Те нямат екран, мишка или клавиатура, защото основната им цел е да съхраняват данни и да ги предоставят. Ето защо те се наричат *сървъри* - защото те *предоставят* вашите данни. + +Добре, но искате да знаете как изглежда интернет, нали? + +Нарисувахме ви снимка! Изглежда така: + +![Фигура 1.1](images/internet_1.png) + +Прилича на каша, нали? Всъщност това е мрежа от свързани машини (гореспоменатите *сървъри*). Стотици хиляди машини! Много, много километри кабели по света! Можете да посетите уебсайта на Submarine Cable Map (http://submarinecablemap.com), за да видите колко сложна е мрежата. Ето екранна снимка от уебсайта: + +![Фигура 1.2](images/internet_3.png) + +Очарователно е, нали? Но не е възможно да има жица между всяка машина, свързана към Интернет. И така, за да достигнем машина (например тази, на която е записан https://djangogirls.org), трябва да предадем заявка през много, много различни машини. + +Изглежда така: + +![Фигура 1.3](images/internet_2.png) + +Представете си, че когато въвеждате https://djangogirls.org, изпращате писмо, което гласи: "Скъпи момичета на Django, искам да видя уебсайта djangogirls.org. Изпратете ми го, моля!" + +Вашето писмо отива до най-близката до вас поща. След това преминава към друга, която е малко по-близо до вашия адресат, след това към друга и друга, докато не бъде доставено до местоназначението си. Единственото уникално нещо е, че ако изпратите много писма (*пакети данни*) на едно и също място, те могат да преминат през напълно различни пощенски станции (*рутери*). Това зависи от начина, по който се разпределят във всеки офис. + +![Фигура 1.4](images/internet_4.png) + +Така става - изпращате съобщения и очаквате някакъв отговор. Вместо хартия и химикалка използвате байтове с данни, но идеята е същата! + +Вместо адреси с име на улица, град, пощенски код и име на държавата, използваме IP адреси. Вашият компютър първо пита DNS (система за имена на домейни) да преведе djangogirls.org в IP адрес. Тя работи малко като старомодни телефонни книжки, където можете да потърсите името на човека, с когото искате да се свържете, и да намерите техния телефонен номер и адрес. + +Когато изпращате писмо, то трябва да има определени функции, за да бъде доставено правилно: адрес, печат и т.н. Използвате и език, който приемникът разбира, нали? Същото се отнася и за *пакетите данни*, които изпращате, за да видите уебсайт. Ние използваме протокол, наречен HTTP (Hypertext Transfer Protocol). + +Така че, когато имате уебсайт, трябва да имате *сървър* (машина), където живее. Когато *сървърът* получи входяща *заявка* (с писмо), той изпраща обратно вашия уебсайт (с друго писмо). + +Тъй като това е урок за Django, може да попитате какво прави Django. Когато изпращате отговор, не винаги искате да изпращате едно и също нещо на всички. Много по-добре е, ако вашите писма са персонализирани, особено за човека, който току-що ви е писал, нали? Django ви помага при създаването на тези персонализирани, интересни писма. :) + +Достатъчно беседа - време за създаване! \ No newline at end of file diff --git a/bg/how_the_internet_works/images/internet_1.png b/bg/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/bg/how_the_internet_works/images/internet_1.png differ diff --git a/bg/how_the_internet_works/images/internet_2.png b/bg/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/bg/how_the_internet_works/images/internet_2.png differ diff --git a/bg/how_the_internet_works/images/internet_3.png b/bg/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/bg/how_the_internet_works/images/internet_3.png differ diff --git a/bg/how_the_internet_works/images/internet_4.png b/bg/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/bg/how_the_internet_works/images/internet_4.png differ diff --git a/bg/html/README.md b/bg/html/README.md new file mode 100644 index 00000000000..3f3a61de3dc --- /dev/null +++ b/bg/html/README.md @@ -0,0 +1,217 @@ +# Въвeдение в HTML + +Може би се питате какво е шаблон (template)? + +Шаблонът е файл който, можем да използваме неколкократно за да представим различна информация в последователен формат -- например, можете да използвате шаблон, който да ви помага да напишете писмо, защото макар че всяко писмо да може да съдържа различно съобщение и да бъде адресирано до различен човек, те ще споделят същия формат. + +Django формат шаблона е описан в език наречен HTML (Това е HTML, който споменахме в главата **Как работи Internet**). + +## Какво е HTML? + +HTML е код, който се интерпретира от търсачките -- като Chrome, Firefox, Safari -- за да покаже на екран страницата на потребителя. + +HTML идва от "HyperText Markup Language". **HyperText** означава, че е тип от текст който подпомага хипервръзки между страници. **Markup** означава, че сме взели документа и сме го означили с код за да кажем нещо (в този случай, търсачка) как да подразбира страницата. HTML кода е изграден от **tags** (етикети), всеки от които стартира с `<` и завършва с `>`. Тези етикети представляват маркирани елементи (**elements**). + +## Първият ви шаблон! + +Създаване на шаблон означава създаване на шаблонен файл. Всичко е файл, нали? Може би вече забелязахте това. + +Шаблоните се запазват в директория `blog/templates/blog`. Така че, първо създайте директория наречена `templates` в директорията на блога ви. След това създайте друга директория наречена `blog` вътре при вашите шаблони: + + blog + └───templates + └───blog + + +(Може би се чудите защо са ни нужни две директории наречени `blog` -- както ще откриете по-късно, това е много лесно установена практика, която прави живота ни по-лесен, когато нещата започват да стават по-сложни.) + +И сега създайте файл `post_list.html` (оставете го празен засега) в директорията `blog/templates/blog`. + +Вижте как изглежда сайта ви: http://127.0.0.1:8000/ + +> Ако все още имате грешка `TemplateDoesNotExist`, опитайте се да заредите сървъра си отново. Отидете в конзолата си, спрете сървъра като натиснете едновременно Ctrl+C и го стартирате отново като напишете команда `python manage.py runserver` . + +![Фигура 11.1](images/step1.png) + +Вече нямаме грешка! Поздравления :) Въпреки това, сайта ви всъщност не публикува нищо освен празна страница, защото шаблонът ви също е празен. Можем да оправим това. + +Отворете новият файл в редактора и добавете следното: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Hi there!

+

It works!

+ + +``` + +Така, как изглежда уебсайта ви в момента? Отидете на: http://127.0.0.1:8000/ за да разберете + +![Фигура 11.2](images/step3.png) + +Работи! Добра работа :) + +* Най-простия етикет `` е винаги в началото на една страница и `` е винаги в края и. Както може да видите, цялото съдържание на страницата е между отварящият `` и затварящият етикет `` +* `

` е етикет за абзацни елементи; `

` затваря всеки един абзац + +## Глава и тяло на страницата (head и body) + +Всяка HTML страница е разделена на два елемена: **head** и **body**. + +* **head** е елемент, който съдържа информация относно документа, който е показан на екрана. + +* **body** е елемент, който съдържа всичко, което е показано като част от уеб страницата. + +Използваме `` за да кажем на търсачката за конфигурацията на страницата и `` какво точно е на страницата. + +Например, може да сложите заглавие на елемента вътре в `` ето така: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Запазете файла и презаредете страницата. + +![Фигура 11.3](images/step4.png) + +Забелязахте ли как търсачката ви разбра, че заглавието на блога е "Ola's blog"? Тълкува `Ola's blog` и показва текст с името на заглавието в лентата на търсачката (също така ще се използва за отметка (bookmarks) и т.н.). + +Вероятно забелязахте и, че отварящия етикет съвпада със затварящия с `/`, като тези елементи са вложени (например не можете да затворите определен етикет, докато не затворите всички, които са преди него). + +Също като да слагаме неща в кутии. Имате една голяма кутия, ``; в нея е `` и това съдържа други по-малки кутии: `

`. + +Трябва да следвате тези правила със затварящите етикети и вложените елементи - ако ли не, търсачката ви може и да не ги представи както трябва и страницата ви ще изглежда неправилно. + +## Персонализиране на шаблон + +Може малко да се позабавлявате и да опитате да направите свой шаблон! Ето няколко полезни етикета за целта: + +* `

Заглавие

` за най-важното ви заглавие +* `

Подзаглавие

` за заглавие от следващо ниво +* `

Под-подзаглавие

` …и т.н. до `
` +* `

Абзац

` +* `текст` набляга на текста +* `текст` удебелява текста +* `
` отива на нов ред (не може да сложите нищо в br, както и няма затварящ етикет ) +* `връзка` създава връзка +* `
  • първи елемент
  • втори елемент
` прави лист, точно като този! +* `
` дефинира секция от страницата + +Ето пример на пълен шаблон, копирайте и пренесете в `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Създадохме три `div` секции тук. + +* Първият `div` елемент съдържа името на блога -- неговото заглавие и връзката +* Другите два `div` елемента съдържат нашите блог постове с датата на публикуване, `h2` със заглавието, на което може да се кликне и два `p`-елемента (абзаца) от текст, единия за датата, а другия за нашия пост. + +Дава ни този ефект: + +![Фигура 11.4](images/step6.png) + +Ихаа! Но дотук, нашият шаблон показва точно **същата информация** -- там където говорихме по-рано за шаблоните, които ни позволяват да показваме **различна** информация в **същия формат**. + +Това, което искаме е да показва истински публикации добавени в администратора на Django -- и там е където отиваме след това. + +## Още нещо: прехвърляне на файловете (deploy)! + +Би било добре да видим всичко това на живо в Internet, нали? Нека направим още едно прехвърляне на файлове към PythonAnywhere: + +### Запазете, and избутайте кода си към GitHub + +Първо, нека видим кои файлове се промениха след последното прехвърляне (напишете следните команди на локалния компютър, не на PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Бъдете сигурни, че сте в директорията на `djangogirls` и нека кажем на git да включи всички промени в тази директория: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + + +> **Забележка** `--all` означава, че `git` ще разпознае и файлове, които сте изтрили (по подразбиране, разпознава нови/модифицирани файлове). Също помните (от 3-та глава), че `.` означава настоящата директория. + +Преди да качим всички файлове, нека проверим какво ще качи `git` (всички файлове, които `git` ще качи ще се появят в зелено): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Почти сме там, сега е време да кажем да запази тези промени в хронологията си. Ще дадем съобщение за запазване ("commit message"), където описваме накратко какво сме променили. Може да напишете каквото си поискате на този етап, но е важно да се знае, че би трябвало да е нещо описващо от това, което сте направили, така че да се знае в бъдеще. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Changed the HTML for the site." + + +> **Забележка:** Бъдете сигурни, че сте сложили съобщението в двойни кавички. + +След като сме направили това, качваме (push) нашите промени на GitHub: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Издърпайте новия код на PythonAnywhere и презаредете страницата + +* Отворете [PythonAnywhere страницата](https://www.pythonanywhere.com/consoles/) и отидете на **Bash конзолата** (или стартирайте нова). След това напишете команда: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Трябва да заместите `` с актуалния си PythonAnywhere субдомейн без скобите. Вашият субдомейн е потребителско ви име в PythonAnywhere, но в някои случай може да е различно (като например ако потребителското ви име съдържа главни букви). Така че, ако тази команда не работи, използвайте команда `ls` (показване на лист от файлове) за да намерите вашия субдомейн/име на папката, и след това да отидете в нея `cd`. + +Сега гледайте как се сваля кода ви. Ако искате да проверите дали е пристигнал, отидете на **"Files" страница** и вижте кода си на PythonAnywhere (може да достигнете други страници на PythonAnywhere от бутона на менюто в страницата на конзолата). + +* Накрая, отидете на ["Web" страницата](https://www.pythonanywhere.com/web_app_setup/) и натиснете **Reload** на вашата апликация. + +Обновлението трябва да е на живо! Отидете и презаредете страницата си в търсачката. Промените трябва да са видими. :) \ No newline at end of file diff --git a/bg/html/images/step1.png b/bg/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/bg/html/images/step1.png differ diff --git a/bg/html/images/step3.png b/bg/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/bg/html/images/step3.png differ diff --git a/bg/html/images/step4.png b/bg/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/bg/html/images/step4.png differ diff --git a/bg/html/images/step6.png b/bg/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/bg/html/images/step6.png differ diff --git a/bg/images/application.png b/bg/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/bg/images/application.png differ diff --git a/bg/installation/README.md b/bg/installation/README.md new file mode 100644 index 00000000000..1976d4722a6 --- /dev/null +++ b/bg/installation/README.md @@ -0,0 +1,68 @@ +# Ако правите ръководството у дома + +Ако правите урока у дома, а не на някое от събитията на [Django Girls](https://djangogirls.org/events/), можете напълно да пропуснете тази глава сега и да отидете направо към главата [Как работи Интернет](../how_the_internet_works/README.md). + +Това е така, защото покриваме инсталирането на неща, каквито са необходими в урока - това е само допълнителна страница, която събира всички инструкции за инсталиране на едно място (което е полезно за някои формати на работилницата). Можете да изберете да инсталирате всичко, което е на тази страница в момента, ако желаете. Но ако искате да започнете да научавате неща, преди да инсталирате куп неща на вашия компютър, пропуснете тази глава и ние ще ви обясним по-късно инсталационните части, тъй като те са необходими. + +Късмет! + +# Ако посещавате уъркшоп + +Ако присъствате на някое от събитията на [Django Girls](https://djangogirls.org/events/): + +* Вашата работилница може да има "парти за инсталиране" преди основната работилница. Ако сте на парти за инсталиране, тази страница е за вас! Следвайте инструкциите тук, за да получите всичко необходимо за работния процес, с помощта на менторите, ако е необходимо. След това в основната работилница ще можете да пропуснете инструкциите за инсталиране, които ще срещнете в главния урок, когато стигнете до тях. +* Организаторите на вашата работилница може би са ви помолили да опитате у дома, за да инсталирате всичко на вашия компютър, преди да започне уъркшопът. Ако сте били помолени да направите това, тази страница е за вас! Следвайте инструкциите тук, както можете най-добре. След това в основната работилница, когато стигнете до стъпка за инсталиране в основния урок, ако не сте успели да инсталирате тази част, можете да получите помощ от вашия ментор. +* Ако вашият уъркшоп няма парти за инсталиране (или не можете да присъствате) и ако организаторите не са ви помолили да опитате да инсталирате всичко преди да сте пристигнали, пропуснете тази страница и отидете направо към главата [Как работи Интернет](../how_the_internet_works/README.md). Ще инсталирате всичко необходимо, докато работите през урока. + +# Инсталиране + +В този урок ще изграждате блог. За да направите това, докато преминавате през урока, ще бъдете инструктирани как да инсталирате различен софтуер на вашия компютър и да настроите някои онлайн акаунти, тъй като са необходими. Тази страница събира на едно място всички инструкции за инсталиране и регистрация (което е полезно за някои формати на работилницата). + + +{% include "/chromebook_setup/instructions.md" %} + + +# Кратко въведение в командния прозорец {#command-line} + +Много от стъпките по-долу се позовават на "конзолата", "терминала", "командния прозорец" или "командния ред" - всичко това означава едно и също нещо: прозорец на вашия компютър, в който можете да въведете команди. Когато стигнете до главния урок, ще научите повече за командния ред. Засега основното, което трябва да знаете, е как да отворите команден прозорец и как изглежда: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Инсталиране на Python {#python} + +{% include "/python_installation/instructions.md" %} + +# Инсталиране на редактор на код {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Настройте virtualenv и инсталирайте Django {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Инсталиране на Git {#git} + +{% include "/deploy/install_git.md" %} + +# Създаване на акаунт в GitHub {#github} + +Отидете на [GitHub.com](https://www.github.com) и се регистрирайте за нов безплатен потребителски акаунт. Не забравяйте да запомните паролата си (добавете я към вашия мениджър на пароли, ако използвате такъв). + +# Създаване на акаунт в PythonAnywhere {#pythonanywhere} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Започнете да четете + +Поздравления, вече сте подготвени и готови да продължите! Ако все още имате известно време преди уъркшопа, би било полезно да започнете да четете няколко от началните глави: + +* [Как работи интернет](../how_the_internet_works/README.md) + +* [Въведение в командния ред](../intro_to_command_line/README.md) + +* [Въведение в Python](../python_introduction/README.md) + +* [Какво е Django?](../django/README.md) + +# Насладете се на уъркшопа! + +Когато започнете семинара, ще можете да преминете направо към [първия си проект на Django!](../django_start_project/README.md), защото вече сте обхванали материала в по-ранните глави. diff --git a/bg/intro_to_command_line/README.md b/bg/intro_to_command_line/README.md new file mode 100644 index 00000000000..d3883fa0b32 --- /dev/null +++ b/bg/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Въведение в интерфейса на командния ред + +> За читателите у дома: тази глава е разгледана във видеото [Вашият нов приятел: Командният ред](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +Вълнуващо е, нали ?! Ще напишете първия си ред код само за няколко минути! :) + +**Нека ви запознаем с първия ви нов приятел: командният ред!** + +Следващите стъпки ще ви покажат как да използвате черния прозорец, който използват всички хакери. В началото може да изглежда малко страшно, но всъщност тази подкана просто чака команди от вас. + +> **Забележка** Моля, имайте предвид, че в тази книга използваме взаимозаменяемите термини „директория“ и „папка“, но те са едно и също нещо. + +## Какво е командният ред? + +Прозорецът, който обикновено се нарича **команден ред** or **интерфеса на командния ред**, е текстово приложение за преглед, обработка и манипулиране на файлове на вашия компютър. Прилича много на Windows Explorer или Finder на Mac, но без графичния интерфейс. Други имена на командния ред са: *cmd*, *CLI*, * prompt *, * console * или * terminal *. + +## Отворете интерфейса на командния ред + +За да започнем някои експерименти, първо трябва да отворим интерфейса на командния ред. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Prompt + +Сега трябва да видите бял или черен прозорец, който чака вашите команди. + + + +Ако сте на Mac или Linux, вероятно виждате `$`, ето така: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +На Windows, вероятно виждате `>`, ето така: + +{% filename %}command-line{% endfilename %} + + > + + +Погледнете раздела за Linux малко по-горе - ще видите нещо повече от това, когато стигнете до PythonAnywhere по-късно в урока. + + + +Всяка команда ще бъде предварително обозначена с `$` или `>` и един интервал, но не бива да го въвеждате. Вашият компютър ще го направи вместо вас. :) + +> Само малка забележка: във вашия случай може да има нещо като `C:\Users\ola>` или `Olas-MacBook-Air:~ ola$` преди знака на подкана и това е 100% ОК. + +Частта до и включително `$` или `>` се нарича *командния ред* или *подкана* за кратко. То ви подканва да въведете нещо там. + +В ръковдството, когато искаме да въведете команда, ще включим `$` или `>`, а понякога и повече вляво. Игнорирайте лявата част и въведете само командата, която започва след подкана. + +## Вашата първа команда (УРА!) + +Нека започнем с въвеждането на тази команда: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +И след това натиснете `enter`. Това е нашият резултат: + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Както можете да видите, компютърът току-що отпечата вашето потребителско име. Яко, а? :) + +> Опитайте да въведете всяка команда; не копирайте-поставете. Ще запомните повече по този начин! + +## Основи + +Всяка операционна система има малко по-различен набор от команди за командния ред, така че не забравяйте да следвате инструкциите за вашата операционна система. Нека опитаме това, става ли? + +### Текуща директория + +Би било хубаво да знаем къде сме сега, нали? Да видим. Въведете тази команда и натиснете `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Забележка: 'pwd' означава 'print working directory' (принтиране работна директория). + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Забележка: 'cd' означава 'change directory' (промяна на директория). С PowerShell можете да използвате pwd точно както в Linux или macOS. + + + +Вероятно ще видите нещо подобно на вашата машина. След като отворите командния ред, обикновено стартирате в домашната директория на вашия потребител. + +* * * + +### Научете повече за команда + +Много команди, които можете да въведете в командния ред, имат вградена помощ, която можете да показвате и четете! Например, за да научите повече за текущата команда на директория: + + + +macOS и Linux имат команда `man`, която ви предоставя помощ за команди. Опитайте `man pwd` и вижте какво пише, или поставете `man` преди други команди, за да видите помощта им. Изходът на `man` обикновено се изписва на страницата. Използвайте интервала, за да преминете към следващата страница, и `q`, за да прекратите прегледа на помощта. + + + + + +Добавянето на `/?` суфикс към повечето команди ще отпечата помощната страница. Може да се наложи да превъртите прозореца на вашата команда нагоре, за да видите всичко. Опитайте `cd /?`. + + + +### Списък на файлове и директории + +И така, какво има в него? Ще е готино да разберем. Да видим: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > 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 + ... + + +> Забележка: В PowerShell можете също да използвате 'ls' като в Linux и macOS. + +* * * + +### Промяна на текущата директория + +Сега, нека да отидем на вашата директория Desktop: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Отбележи, че името на директорията "Desktop" може да се преведе на езика на вашия Linux акаунт. В такъв случай ще трябва да замените ` Desktop ` с преведеното име; например, `Работен плот` за български език. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Проверете дали наистина е променена: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Ето го! + +> PRO съвет: ако напишете `cd D` и след това натиснете `tab` на клавиатурата си, командният ред автоматично ще попълни останалото име, за да можете да навигирате по-бързо. Ако има повече от една папка, започваща с „D“, натиснете два пъти клавиша `tab`, за да получите списък с опции. + +* * * + +### Създаване на директория + +Какво ще кажете за създаването на тестова директория на вашия работен плот? Можете да го направите по този начин: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Тази малка команда ще създаде папка с името `practice` на вашия работен плот. Можете да проверите дали е там, като погледнете на работния си плот или като изпълните команда `ls` или `dir`! Опитайте. :) + +> PRO съвет: Ако не искате да въвеждате едни и същи команди отново и отново, опитайте да натиснете `стрелката нагоре` и `стрелка надолу` на клавиатурата си, за да преминете през последните използвани команди. + +* * * + +### Упражнение! + +Малко предизвикателство за вас: в новосъздадената си директория `practice` създайте директория, наречена `test`. (Използвайте командите `cd` и `mkdir`.) + +#### Решение: + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + + + + +Поздравления! :) + +* * * + +### Почистване + +Не искаме да оставим бъркотия, така че нека премахнем всичко, което направихме до този момент. + +Първо, трябва да се върнем към Desktop: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Използването на `..` с командата `cd` ще промени текущата ви директория на родителската директория (тоест директорията, която съдържа текущата ви директория). + +Проверете къде се намирате: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Сега е време за изтриване на директорията `practice`: + +> **Внимание**: Изтриването на файлове с помощта на `del`, `rmdir` или `rm` е безвъзвратно, което означава, че *изтритите файлове ще изчезнат завинаги*! Затова бъдете много внимателни с тази команда. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Готово! За да сме сигурни, че е действително изтрита, нека проверим: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Изход + +Това е засега! Можете спокойно да затворите командния ред. Да го направим по хакерския начин, съгласни? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Готино, а? :) + +## Обобщение + +Ето обобщение на някои полезни команди: + +| Команда (Windows) | Команда (Mac OS / Linux) | Описание | Пример | +| ----------------- | ------------------------ | -------------------------------- | --------------------------------------------------- | +| exit | exit | затваряне на прозореца | **exit** | +| cd | cd | промяна на директория | **cd test** | +| cd | pwd | показване на текущата директория | **cd** (Windows) или **pwd** (Mac OS / Linux) | +| dir | ls | списък директории / файлове | **dir** | +| copy | cp | копие на файл | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | преместване на файл | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | създаване на нова директория | **mkdir testdirectory** | +| rmdir (или del) | rm | изтриване на файл | **del c:\test\test.txt** | +| rmdir /S | rm -r | изтриване на директория | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | получете помощ за команда | **cd /?** (Windows) или **man cd** (Mac OS / Linux) | + +Това са само малка част от командите, които можете да изпълнявате във вашия команден ред, но днес няма да използвате нищо повече от това. + +Ако ви е любопитно, [ss64.com](http://ss64.com) съдържа пълна справка с команди за всички операционни системи. + +## Готови? + +Нека се потопим в Python! \ No newline at end of file diff --git a/bg/intro_to_command_line/open_instructions.md b/bg/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..88c032d04dc --- /dev/null +++ b/bg/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +В зависимост от вашата версия на Windows и клавиатурата ви, едно от следните трябва да отвори команден прозорец (може да се наложи да експериментирате малко, но не е нужно да изпробвате всички тези предложения): + +- Отидете в менюто или екрана "Старт" и въведете "Команден ред" в полето за търсене. +- Отидете в менюто "Старт" → Windows System → Команден ред. +- Отидете в менюто Старт → Всички програми → Аксесоари → Команден ред. +- Отидете на стартовия екран, задръжте мишката в долния ляв ъгъл на екрана и щракнете върху стрелката надолу, която се появява (на сензорен екран, вместо това натиснете нагоре от долната част на екрана). Страницата с приложения трябва да се отвори. Кликнете върху командния ред в секцията Windows. +- Задръжте специалния клавиш Windows на клавиатурата си и натиснете клавиша "X". Изберете „Команден ред“ от изскачащото меню. +- Задръжте клавиша на Windows и натиснете клавиша "R", за да получите прозорец "Изпълнение". Въведете "cmd" в полето и щракнете върху бутона OK. + +![Напишете "cmd" в прозореца "Изпълнение"](../python_installation/images/windows-plus-r.png) + +По-късно в този урок ще трябва да имате отворени два командни прозореца едновременно. Въпреки това, при някои версии на Windows, ако вече имате един отворен команден прозорец и се опитате да отворите втори, използвайки същия метод, той вместо това ще ви насочи към командния прозорец, който вече имате отворен. Опитайте го сега на вашия компютър и вижте какво ще се случи! Ако получите само един команден прозорец, опитайте някой от другите методи в списъка по-горе. Поне един от тях трябва да доведе до отваряне на нов команден прозорец. + + + + + +Отидете на Launchpad → Other → Terminal. + + + + + +Вероятно е под Applications → Accessories → Terminal или Applications → System → Terminal, но това може да зависи от вашата система. Ако не е там, можете да опитате да го потърсите в Google. :) + + diff --git a/bg/python_installation/README.md b/bg/python_installation/README.md new file mode 100644 index 00000000000..23ef41cb47f --- /dev/null +++ b/bg/python_installation/README.md @@ -0,0 +1,15 @@ +# Да започнем с Python + +Най-накрая сме тук! + +Но първо нека ви разкажем какво е Python. Python е много популярен език за програмиране, който може да се използва за създаване на уебсайтове, игри, научен софтуер, графика и много, много други. + +Python възниква в края на 80-те години и основната му цел е да бъде четен от хора (не само от машини!). Ето защо той изглежда по-прост от другите езици за програмиране, но не се притеснявайте - Python също е наистина мощен! + +# Инсталиране на Python + +> **Забележка** Ако използвате Chromebook, пропуснете тази глава и се уверете, че следвате инструкциите [Настройка на Chromebook](../chromebook_setup/README.md). +> +> **Забележка** Ако вече сте минали през стъпките за инсталиране, не е нужно да правите това отново - можете да преминете направо към следващата глава! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/bg/python_installation/images/add_python_to_windows_path.png b/bg/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/bg/python_installation/images/add_python_to_windows_path.png differ diff --git a/bg/python_installation/images/python-installation-options.png b/bg/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/bg/python_installation/images/python-installation-options.png differ diff --git a/bg/python_installation/images/windows-plus-r.png b/bg/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/bg/python_installation/images/windows-plus-r.png differ diff --git a/bg/python_installation/instructions.md b/bg/python_installation/instructions.md new file mode 100644 index 00000000000..f01564c391f --- /dev/null +++ b/bg/python_installation/instructions.md @@ -0,0 +1,121 @@ +> За читателите у дома: тази глава е разгледана във видеото [Инсталиране на Python & Редактор на код](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Този раздел е базиран на урок от Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django е написан на Python. Имаме нужда от Python, за да направим нещо в Django. Нека започнем с инсталирането му! Искаме да инсталирате най-новата версия на Python 3, така че ако имате някоя по-ранна версия, ще трябва да я актуализирате. Ако вече имате версия 3.4 или по-нова, трябва да се оправите. + +Моля, инсталирайте нормален Python по следния начин, дори когато на вашия компютър е инсталиран Anaconda. + + + +Първо проверете дали вашият компютър използва 32-битова версия или 64-битова версия на Windows, в реда "Тип система" на страницата Информация за системата. За да стигнете до тази страница, опитайте един от следните методи: + +* Натиснете едновременно клавиша Windows и клавиша за Пауза/Прекъсване +* Отворете контролния панел от менюто на Windows, след което отворете Система & Сигурност, след това Система +* Натиснете бутона на Windows, след това отворете Настройки> Система> Информация + +Можете да изтеглите Python за Windows от уебсайта https://www.python.org/downloads/windows/. Кликнете върху връзката "Последно издание на Python 3 - Python x.x.x“. Ако вашият компютър работи с **64-битова** версия на Windows, изтеглете **изпълнителния инсталатор Windows x86-64**. В противен случай изтеглете **изпълнителния инсталатор Windows x86**. След като изтеглите инсталатора, трябва да го стартирате (щракнете двукратно върху него) и следвайте инструкциите там. + +Едно нещо, за което трябва да внимавате: По време на инсталацията ще забележите прозорец с надпис „Настройка“. Уверете се, че поставяте отметка в квадратчето „Добавяне на Python 3.6 към PATH“ или „Добавяне на Python към променливите на вашата среда“ и кликнете върху „Инсталиране сега“, както е показано тук (може да изглежда малко по-различно, ако инсталирате друга версия): + +![Не забравяйте да добавите Python към Path](../python_installation/images/python-installation-options.png) + +Когато инсталацията приключи, може да видите диалогов прозорец с връзка, която можете да следвате, за да научите повече за Python или за версията, която сте инсталирали. Затворете или отменете този диалог - в този урок ще научите повече! + +Забележка: Ако използвате по-стара версия на Windows (7, Vista или някоя по-стара версия) и инсталатора на Python 3.6.x не успее с грешка, можете да опитате или: + +1. да инсталирате всички актуализации на Windows и да опитате отново да инсталирате Python; или +2. да инсталирате [по-стара версия на Python](https://www.python.org/downloads/windows/), например, [3.4.6](https://www.python.org/downloads/release/python-346/). + +Ако инсталирате по-стара версия на Python, екранът за инсталиране може да изглежда малко по-различно от показаното по-горе. Уверете се, че сте стигнали до най-долу, за да видите „Добавяне на python.exe към Path“, след това щракнете върху бутона вляво и изберете „Ще бъде инсталиран на локален твърд диск“: + +![Добавете Python към Path, по-стари версии](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Забележка** Преди да инсталирате Python в macOS, трябва да се уверите, че настройките ви за Mac позволяват инсталиране на пакети, които не са от App Store. Отидете на System Preferences (това е в папката Applications), щракнете върху "Security & Privacy", и след това върху раздела "General". Ако "Allow apps downloaded from:" е зададен на "Mac App Store,", променете го на "Mac App Store and identified developers". + +Трябва да отидете на уебсайта https://www.python.org/downloads/release/python-361/ и да изтеглите инсталатора на Python: + +* Изтеглете *macOS 64-битов/32-битов инсталатор* файл, +* Щракнете два пъти * python-3.6.1-macosx10.6.pkg *, за да стартирате инсталатора. + + + + + +Много е вероятно вече да имате инсталиран Python извън кутията. За да проверите дали сте го инсталирали (и коя версия е), отворете конзола и въведете следната команда: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Ако имате инсталирана друга версия на Python, поне 3.4.0 (например 3.6.0), тогава не е нужно да актуализирате. Ако нямате инсталиран Python или искате друга версия, първо проверете каква дистрибуция на Linux използвате със следната команда: + +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +След това, в зависимост от резултата, следвайте едно от следните ръководства за инсталиране под този раздел. + + + + + +Въведете тази команда в конзолата си: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Използвайте тази команда в конзолата си: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Ако сте на по-стари версии на Fedora, може да получите грешка, че командата `dnf` не е намерена. В такъв случай трябва да използвате вместо `yum`. + + + + + +Използвайте тази команда в конзолата си: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Проверете дали инсталацията е била успешна, като отворите командния ред и изпълните командата `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Показаната версия може да се различава от 3.6.1 - тя трябва да съответства на инсталираната от вас версия. + +**ЗАБЕЛЕЖКА:** Ако сте в Windows и получите съобщение за грешка, че `python3` не е намерен, опитайте да използвате `python` (без `3`) и проверете дали все още може да е версия на Python, която е 3.4.0 или по-нова. Ако и това не работи, можете да отворите нов команден ред и да опитате отново; това се случва, ако използвате командния ред, оставен отворен преди инсталирането на Python. + +* * * + +Ако имате някакви съмнения или ако нещо се обърка и нямате идея какво да правите по-нататък, моля, попитайте вашия ментор! Понякога нещата не вървят гладко и е по-добре да поискате помощ от някого с повече опит. \ No newline at end of file diff --git a/bg/python_introduction/README.md b/bg/python_introduction/README.md new file mode 100644 index 00000000000..02952d2f6db --- /dev/null +++ b/bg/python_introduction/README.md @@ -0,0 +1,1070 @@ +{% set warning_icon = '' %} + +# Въведение в Python + +> Част от тази глава е базирана на уроци от Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Да напишем малко код! + +## Python запитване + +> За читателите у дома: тази част е разгледана във видеото [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +За да започнем да играем с Python, трябва да отворим *команден ред* на вашия компютър. Вече трябва да знаете как да го направите - научихте го в главата [Въведение в командния ред](../intro_to_command_line/README.md). + +След като сте готови, следвайте инструкциите по-долу. + +Искаме да отворим конзола на Python, затова въведете `python` в Windows или `python3` в Mac OS/Linux и натиснете `enter`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Вашата първа Python команда! + +След като изпълните командата Python, подканата се промени в `>>>`. За нас това означава, че засега можем да използваме само команди на езика Python. Не е нужно да пишете `>>>` - Python ще направи това вместо вас. + +Ако искате да излезете от конзолата на Python във всеки момент, напишете `exit()` или използвайте прекия път `Ctrl + Z` за Windows и `Ctrl + D` за Mac/Linux. Тогава вече няма да виждате `>>>`. + +Засега не искаме да излизаме от конзолата Python. Искаме да научим повече за него. Нека започнем с въвеждане на някаква математика, като `2 + 3` и натискане на `enter`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Хубаво! Вижте как отговорът изскочи? Python знае математика! Можете да опитате и други команди като: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +За да извършим експоненциално изчисление, да кажем 2 на степен 3, пишем в конзолата: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Забавлявайте се с това за малко и след това се върнете тук. :) + +Както можете да видите, Python е чудесен калкулатор. Ако се чудите какво още можете да направите... + +## Низове + +Какво ще кажете за вашето име? Въведете първото си име в кавички така: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Сега създадохте първия си низ! Това е поредица от знаци, които могат да бъдат обработени от компютър. Низът винаги трябва да започва и завършва с един и същ символ. Това могат да бъдат единични (`'`) или двойни (`"`) кавички (няма разлика!) Кавичките казват на Python, че това, което е вътре в тях, е низ. + +Низовете могат да бъдат нанизани заедно. Опитайте това: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +Можете също да умножите низове с число: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Ако трябва да поставите апостроф във вашия низ, имате два начина да го направите. + +Използвайки двойни кавички: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +или да избягате от апострофа с обратна черта (``): + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Хубаво, а? За да видите името си с главни букви, напишете: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Току що използвахте метода `upper` върху вашия низ! Методът (като `upper()`) е поредица от инструкции, които Python изпълнява върху даден обект (`"Ola"`) след като е повикан. + +Ако искате да знаете, от колко на брой букви е вашето име, има функция и за това! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Чудите ли се понякога защо, когато извиквате функции с `.` на края на низа (като `"Ola".upper()`), като понякога извиквате първо функцията и поставяте низа в скоби? Е, в някой случаи функциите принадлежат на обекти, като `upper()`, които могат да се използва само върху низове. В този случай, наричам функцията метод. В други случаи, функциите които не принадлежат към определени типове и могат да бъдат използвани при различни обекти, също като `len()`. Затова даваме `"Ola"` като параметър на функцията `len`. + +### Обобщение + +Добре, достатъчно за низове. Досега научихте за: + +- **запитване** -- писане на команди (код) в Python среда в резултат дава отговори на Python език. +- **числа и низове** -- в Python числата се използват за математически операции а низовете за текстови обекти. +- **оператори** – като `+` и `*`, събират стойности за да получат нова +- **функции** – като `upper()` и `len()`, извършващи се върху обектите. + +Това са основите на всеки програмен език, който учите. Готови ли сте за нещо по-сложно? Залагаме, че сте! + +## Грешки + +Нека опитаме нещо ново. Можем ли да вземем дължината на числото по същият начин, по който взехме дължината на нашето име? Напишете `len(304023)` и натиснете `enter`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Показа се първата ни грешка! {{ warning_icon }} е начина, по който ще ви показваме, че кода който се опитвате да пуснете няма да работи както се очаква. Грешките (дори и тези, които правим нарочно) са важна част от процеса на учене! + +Казва, че обектът от тип "int" (integers, или още цели числа) нямат дължина. Какво можем да направим сега? Може би да напишем числото ни като низ? Низовете имат дължина, нали така? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Работи! Използвахме функцията `str` във функцията `len`. `str()` преобразува всичко в низове. + +- Функцията `str` преобразува нещата като **низове** +- Функцията `int` преобразува нещата като **цели числа** + +> Важно: можем да преобразуваме числа в текст, но не можем да направим обратното -- както и да е какво би било `int('hello')`? + +## Променливи + +Важно понятие в програмирането са променливите. Променливата е нищо повече от име, което може да се използва по-късно в програмата. Програмистите ползват тези променливи да запазват данни. Това прави кода им по-четлив, така че не се налага да запомнят какви са тези неща. + +Нека кажем, че искаме да създаде променлива с име `name`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Пишем name равно на Ola. + +Ако забелязахте, програмата ви не върна нищо както преди това. Как да разберем, че променливата съществува? Напишете `name` и натиснете бутона `enter`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +Ихууу! Първата ти променлива! :) Винаги може да я промениш към какво се отнася: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Може да я използвате и във функции: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Страхотно, нали? Сега, променливите могат да са какво ли не -- също така и числа! Пробвайте това: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Но какво ако използваме грешното име Можете ли да отгатнете какво ще се случи? Нека опитаме! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Грешка! Както виждате, Python има различни видове грешки, като тази се казва **NameError**. Python винаги ще ви дава тази грешка, ако се опитвате да използвате променлива, която все още не е дефинирана. Ако попаднете на тази грешка по-късно, вижте дали не сте сбъркали при писането на някое от имената. + +Поиграйте се малко с това и вижте какво може да правите! + +## Фунцкията print + +Пробвайте това: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Когато напишете `name`, Python интерпретатора отговаря със низово *изображение* на променливата 'name', където буквите 'M-a-r-i-a' са обградени от единични кавички. Когато кажем `print(name)`, Python ще "отпечата" съдържанието на променливата на екрана, без кавичките, което е по-прилежно. + +Както ще видим по-късно `print()` също е полезен, когато искаме да отпечатаме неща от функциите, или когато искаме да отпечатаме неща на няколко реда. + +## Листове + +Освен низовете и целите числа, Python има всякакви видове типове от обекти. Сега ще въведем една от тях наречена **list**. Листоверте са точно това, което си мислите, че са: обекти, които са листове от други обекти. :) + +Давайте нататък и създайте лист: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Да, това е празен лист. Не е много полезен нали? Нека създадем лист с лотарийни номера. Не искаме да се повтаряме постоянно, така че ще използваме променлива: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +И така, имаме лист! Какво можем да правим с него? Нека видим колко лотарийни числа има в листа? Имате ли си на идея коя функция може да се използва за това? Това вече го знаете! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Да! `len()` може да ви даде броя на обектите в листа. Много удобно, нали? Може би и ще го сортираме: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +Това не връща нищо, само променя реда, в който числата са показани в листа. Нека го отпечатаме отново и видим какво се случва: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Както се вижда, числата в листа са вече подредени от по-малката към по-голямата стойност. Поздравления! + +Може би искаме да направим обратното? + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Ако искате да добавите нещо към вашия лист, може да го направите като напишете следната команда: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Ако искате да покажете само първото число, може да направите това като използвате **индекси**. Индекса е номерът, който казва къде в листа се появява елемента. Програмистите предпочитат да започват броенето от 0, така че първият обект в листа е с индекс 0, следващия е с 1 и т.н. Опитайте това: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Както може да видите, можете да достъпите различни обекти от листа си като използвате името на листа и индекс със квадратни скоби. + +За да премахнете нещо от листа си ще трябва да използвате **индексите**, които научихме по-горе и метода `pop()`. Нека пробваме пример и затвърдим това, което научихме до момента: ще отстраним първото число от листа ни. + +{% 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] +``` + +Работи безупречно! + +За повече веселба, пробвайте други индекси: 6, 7, 1000, -1, -6 or -1000. Пробвайте се да предположите какъв би могъл да е резултата от командата. Имат ли смисъл резултатите? + +Можете да намерите лист с всички възможни методи в тази глава от документацията на Python: https://docs.python.org/3/tutorial/datastructures.html + +## Речници + +> За читателите у дома: тази част е показана във видеото [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Речника е подобен на листа, но можете да достъпвате стойностите му като погледнете за ключа вместо числения индекс. Синтаксисът за дефиниране на празен речник е: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Това показва, че в момента създадохте празен речник. Ура! + +Сега, опитайте се да напишете следната команда (опитайте се да заместите със своя информация): + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +С тази команда, току що създадохте променлива с име `participant` с три елемент-стойност (keys-value) двойки. + +- Елементът `name` се отнася за стойността `'Ola'` (`низ` обект), +- `country` се отнася за `'Poland'` (друг `низ`), +- and `favorite_numbers` се отнася за `[7, 42, 92]` (`лист` с три числа в него). + +Може да проверите съдържанието на всеки от елементите с този синтаксис: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +Виждате ли, подобно е на лист. Но не е необходимо да помните индекса -- само името. + +Какво се случва, когато попитаме Python за стойността на елемент, който не съществува? Можете ли да познаете? Нека опитаме и видим: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Вижте, друга грешка! Тази е **KeyError**. Python е много услужлив и ти казва, че елемент `'age'` не съществува в този речник. + +Кога да използвате речник и кога лист? Това е добър въпрос. Помислете за отговор преди да видите следващия ред. + +- Ако имате нужда просто от подредена последователност от елементи? Ползвайте лист. +- Ако трабва да асоциирате стойности с елементи, които искате да може да ги видите на по-късен етап (чрез елемент - by key)? Използвайте речник. + +Речниците са като листове, но *непостоянни*, което означава, че могат да бъдат променени след като бъдат създадени. Може да добавяте нови двойки елемент-стойност към речника след като е създаден ето така: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Като при листовете, използването на метода `len()` върху речника връща броя на двойката елемент-стойност в речника. Продължете и напишете тази команда: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Надявам се да има смисъл това което правим досега. :) Готови ли сте за още веселба с речниците? Прочетете някои невероятни неща. + +Можете да използвате метода `pop()` да изтриете елемент от речника. Да кажем, че искаме да премахнем въведението, което се отанся за елемента `'favorite_numbers'`, напишете следната команда: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Както се вижда, двойката елемент-стойност отнасяща се за 'favorite_numbers' беше премахната. + +Както и това, можете да промените стойността, която отговаря на вече създаден елемент в речника. Напишете това: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Както виждате, стойността на елемента `'country'` беше променен от `'Poland'` на `'Germany'`. :) Вълнуващо? Ураа! Току що научихте още едно невероятно нещо. + +### Обобщение + +Страхотно! Вече знаете много за програмирането. В тази последна част научихте за: + +- **грешки** -- знаете как да четете и разбирате грешките които се показват, ако Python не разбира командата която сте задали +- **променливи** – имена на обектите, които ви позволяват да пишете код по-лесно и да правят кода ви по-четлив +- **листове** –листовете са обекти запазени в определен ред +- **речници** – обекти запазени като двойки от елемент-стойност (key-value pairs) + +Вълнувате ли се за следващата част? :) + +## Сравняване на неща + +> За читателите у вома: тази част е показана във видеото [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Голяма част от програмирането включва сравняване на неща. Какво е най-лесното нещо което може да се сравни? Числата! Нека видим как работи: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Дадохме на Python да сравни няколко числа. Както може да видите, Python не само че може да сравни числата, но може също така да сравнява и резултатите от метода. Супер, нали? + +Чудите ли се защо използвахме два знака за равно `==` един до друг за да сравним дали числата са равни? Използваме едно равно `=` за да причислим стойност на променливите. Винаги, ама **винаги** трябва да иползваме две от тях – `==` – ако искаме да проверим дали две неща са равни едно на друго. Можем също така да кажем, че не искаме двете неща да са равни едно на друго. Затова, използваме символа `!=`, както е показано в примера по-горе. + +Дайте на Python още две задачки: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +Виждали сме `>` и `<`, но какво означават `>=` и `<=`? Четем ги по този начин: + +- x `>` y означава: x е по-голямо от y +- x `>` y означава: x е по-малко от y +- x `<=` y означава: x е по-малко или равно на y +- x `>=` y означава: x е по-голямо или равно на y + +Страхотно! Искате ли да направите още нещо? Пробвайте това: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Може да дадете на Python колкото си искате числа да сравнява и ще ви даде отговор! Много умно, нали? + +- **and** – ако използвате оператора `and`, двете сравнения трябва да са True за да бъде цялата команда True +- **or** – ако използвате оператора `or`, само едното сравнение трябва да е True за да бъде цялата команда True + +Чували ли сте за израза "сравнение на ябълки и портокали"? Нека пробваме подобно нещо в Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Тук виждате, както при израза, Python не е способен да сравни число (`int`) и низ (`str`). Вместо това ни показва грешка **TypeError** и ни казва, че двата типа не могат да бъдат сравнени. + +## Булеви променливи + +По между другото, току що научихте за нов тип обект в Python. Нарича се **Булев (Boolean)**. + +Има само два вида булеви променливи: + +- True +- False + +Но за Python да разбере това, винаги трябва да пишете 'True' (като първата буква е главна, а следващите малки). **true, TRUE, and tRUE няма да работят – само True е правилно.** (Същото се отнася и до 'False'.) + +Булевите стойности могат също да са променливи! Вижте тук: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Може също да го направите по този начин: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Практикувайте и се повеселете с булевите стойности като се опитате да напишете следните команди: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Поздраления! Булевите стойности са едни от най-готините неща в програмирането, и ти току що се научи как да ги използваш! + +# Запази! + +> За читателите у дома: тази част е показана във видеото [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk) + +До тук писахме всичкия си python код в интерпретатора, който ни ограничава да използваме само едни ред да впишем кода. Обикновено програмите са запазени във файлове и после изпълнени от **интерпретатора** или **компилатора** ни. Досега пускахме нашите програми по една на ред в Python интерпретатора. Ще са ни необходими малко повече редове от код за следващите няколко задачи, затова бързо ще направим това: + +- Излезем от Python интерпретатора +- Отворим редактор за текс по избор +- Запазим малко код в нов python файл +- Пуснете го! + +За да излезнем от Python интерпретатора, който използвахме, пише следната функция `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Това ще ви върне в началното състояние на конзолата (терминала). + +По-рано избрахме нашия редактор от секцията за [code editor](../code_editor/README.md). Сега трябва да го отворим и да напишем малко код в нов файл (ако използвате Chromebook, създайте нов файл в cloud IDE и отворете файла, който ще е в редактора): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Очевидно, вече сте по-обиграни Python разработчици, така че напишете код, който научихте днес. + +Сега трябва да запазим файла и да му дадем описателно име. Нека наречем файла **python_intro.py** и го запазим на началния си екран. Можем да именуваме файла си както пожелаем, но е важно да сме сигурни, че завършва на **.py**. Разширението **.py** казва на операционната система, че това е **Python executable file** и Python може да го обработи. + +> **Забележка:** Трябва да забелязахте, че едни от най-готините неща в редактора са: цветовете! В конзолата на Python всичко беше един цват; сега трябва да виждате, че `print` функцията е с различен цвят от цвета на низа. Това се нарича "syntax highlighting", и е много полезна добавка когато пишем код. Цвета на нещата ще ви подсказва, например ако имате незатворени низове или сте объркали ключова дума (като при писането на функцията `def`, както ще видим по-долу). Това е една от причините да изполваме редактор за писане на код. :) :) + +С вече запазения файл е време да го пуснем! Да използваме това, което научихме от секцията с командите. Ползвайте терминала (конзолата) за да смените директорията до началния си екран (desktop). + + + +На Mac, командата ще излгежда по този начин: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +На Linux, ще изглежда така: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Помнете, че думата "Desktop" може да е преведена на вашия език.) + + + + + +На Windows Command Prompt ще изглежда така: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +И на Windows Powershell ще изглежда така: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Ако се затруднявате, поискайте помощ. Затова са менторите! + +Сега ползвайте Python за да изпълни кода във файла ето така: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Забележка: на Windows 'python3' не е разпознат като команда. Вместо това, използвайте 'python' за да стартирате файла: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Браво! Току що пуснахте първата си програма на Python, която беше запазена на файл. Чувствате ли се страхотно? + +Сега може да се прехвърлим на по-важно средство в програмирането: + +## If … elif … else + +Много неща в кода трябва да се изпълнят само ако са преминали определени условия. Затова Python има нещо, наречено **if условна конструкция**. + +Заместете кода във файла си **python_intro.py** с това: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Ако запазим и стартираме файла ще видим грешка като тази: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python очаква от нас да дадем следващи инсктрукции какво да се изпълни в условието `3 > 2` за да бъде вярно (или `True` за същата цел). Нека накараме Python да отпечата “It works!”. Променете кода си във файла с това: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +Забелязахте ли как изписахме следващия ред от код с 4 празни места навътре? Трябва да направим това за да може Python да знае, кой код да изпълни в случай, че е вярно условието. Може да използвате едно празно място, но почти всеки Python програмист използва 4, тъй като изглежда по-прилежно. Използването на бутона Tab също се равнява на 4 места, ако сте направили редактора си да прави така. Когато направите избор не го променяйте! Ако вече сте използвали 4 места за в бъдеще ползвайте 4 места - в противен случай може да попаднете на затруднения. + +Запазете и го стартирайте отново: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +Забележка: Помнете, че на Windows, 'python3' не се разпознава като команда. От сега нататък, заместете 'python3' с 'python' за да изпълните файла. + +### Какво ако условието не е вярно (True)? + +В предходните примери, кода се изпълняваше само ако условието е вярно (True). Но Python има също `elif` и `else` условия: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Когато това се изпълни ще се отпечата: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +Ако 2 беше по-голямо число от 5, тогава втората команда щеше да се изпълни. Нека видим как работи `elif` : + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +и се изпълнява: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +Видяхте ли какво се случи там? `elif` ви даде възможност да добавите още едно условие в случай, че предното се провали. + +Може да добавяте колкото си искате `elif` условия след първоначалното `if` условие. Например: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python преминава и тества през всеки ред и отпечатва: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## Коментари + +Коментрите са редове, започващи с `#`. Може да пишете каквото искате след `#` и Python ще го игнорира. Коментарите са направени да правят кода по-лесен за четене и разбиране от другите хора. + +Нека видим как изглежда: + +{% 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!") +``` + +Не е необходимо да пишете коментар за всеки ред от код, но те са много подходящи да обяснят какво прави самия код, или да дадат обобщение, когато се прави нещо сложно. + +### Обобщение + +В последните няколко упражнения научихте как да: + +- **сравнявате** – в Python може да сравнявате като използвате `>`, `>=`, `==`, `<=`, `<` и `and`, `or` оператори +- използвате **булеви променливи** – типа на обекта може да приема само две стойности: `True` или `False` +- **запазвате файлове** – запазване на кода във файлове, така че да могат да се изпълняват по-големи програми. +- използвате **if … elif … else** – условна конструкция, която ви позволява да изпълнявате код когато определени условия се изпълнят. +- пишете **коментари** - редовете в Python, които не се изпълняват и дават пояснения за кода ви + +Време е за последната част от тази глава! + +## Вашите собствени функции! + +> За читателите у дома: тази част е показана във видеото [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Помните ли функциите като `len()`, които изпълнихте в Python? Така, добри новини - сега ще научите как да напишете свои фукции! + +Функцията е последователност от инструкции, така че Python да може да я изпълнин. Всяка функция в Python започяа с ключовата дума `def`, с което се дава име на функцията и може да има няколко параметъра. Нека пробваме. Заместете кода във файла **python_intro.py** със следното: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Добре, първата ви функция е готова! + +Може би се чудите защо написахме името на функцията в края на файла. Когато пишем `def hi():` и следващите редове започват по-навътре, това оказва какво трябва да направи функцията `hi()`. Python ще прочете и запомни тези инструкции, но няма да изпълни все още функцията. За да кажем на Python да изпълни функцията, трябва да извикаме вункцията с `hi()`. Python чете файла и изпълнява от горе до долу, затова трябва да дефинираме функцията преди да сме я повикали. + +Нека го стартираме и видим какво се случва: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +Забележка: ако не работи не се паникьосвайте! Резултатът ще ви помогне да разберете защо: + +- Ако получите грешка `NameError`, това най-вероятно означава, че сте направили грешка при писането, такаче трябва да проверите дали имената са същите при създаването на функцията `def hi():` и когато я извиквате `hi()`. +- Ако получите грешка `IndentationError`, вижте дали двата реда с функцията `print` са отместени на едно и също растояние: python иска кода във функцията да бъде безупречно подреден. +- Ако на изхода няма нищо, проверете дали последното `hi()` *не е* отместено - ако е , тази част също ще се превърне в част от функцията и никога няма да се изпълни + +Нека съставим първата си функция с параметри. Ще променим предния пример - функцията, която казва 'hi' на човека, който пуска програмата - с име: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Както се вижда, дадохме на функцията си стойност, която нарекохме `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!') + +hi() +``` + +Запомнете: `print` функцията е поместена 4 места навътре спрямо `if` условието. Това е така, защото функцията се изпълнява, ако е изпълнено условието. Нека видим как работи: + +{% 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' + + +Опаа, грешка. За щастие, Python ни показва много полезно съобщение за грешката. Казва ни, че фукнцията `hi()` (която ние дефинирахме) има аргумент, който се изисква (с име `name`) и че сме забравили да го приложим, когато извикваме фунцкията. Нека оправим това в края на файла: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +И да стартираме отначало: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +А ако сменим името? + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +И стартираме отново: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +Сега, какво мислите, че ще стане ако напишете ново име? (Не Ola или Sonja.) Опитайте и вижте дали сте прави. Трябва да отпечата това: + +{% filename %}command-line{% endfilename %} + + Hi anonymous! + + +Това е страхотно, нали? При това не трбва да се повтаряте всеки път, когато смените името на човека, който функцията трябва да поздрави. Затова са ни необходими функциите - никога да не повтаряш кода си! + +Нека опитаме нещо по-хитро - имаме повече от две имена и писането на условия за всяко едно от тях ще отнеме много време, нали така? Заместете съдържание на файла си със следното: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +Нека извикаме кода: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +Поздравления! Току що научихте как да пишете функции! :) + +## Цикли + +> За читателите у дома: тази част е показана във видеото [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) + +Това вече е последната част. Мина бързо, нали? :) + +Програмистите не обичат да е повтарят. Програмирането се отнася до автоматизация, така че не искаме да поздравяваме всеки човек по име като изписваме за всеки по отделно, нали? Ето къде циклите идват в употреба. + +Все още си спомняте листовете? Нека направим лист с момичета: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Искаме да поздравим всяка една от тях по име. Имаме функцията `hi` да направи това, така че нека я използваме в цикъл: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +Конструкцията `for` се държи подобно на конструкцията `if`; кода под него трябва да е отместен с четири места навътре. + +Ето целия код, който трябва да е във файла: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +И когато го стартираме: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +Както виждате всичко, което сложите вътре във `for` конструкцията с отместването ще бъде повторено за всеки елемент от листа `girls`. + +Може също да използвате `for` цикъл за числа като използвате фунцкията `range` : + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Което ще отпечата: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` е функция, която създава лист от номера едно след друго (тези номера са дадени от вас като стойности). + +Забележете, че втория параметър, който сте дали не се включва в листа с показаните числа от Python (което означава, че `range(1, 6)` брои от 1 до 5, без да включва числото 6). Това е така, защото "range" е полу-отворена функция, което означава, че включва първата стойност, но не и последната. + +## Обобщение + +Това е! **Ти си върха!** Това беше сложна глава, така че трябва да сте горди със себе си. Ние определено сме горди с това, което постигнахте досега! + +За официалното и пълно ръководство на Python посетете visit https://docs.python.org/3/tutorial/. Това ще ви даде много по-подробни и цялостни знания за езика. Със здраве! :) + +Може би искате да направите нещо друго за кратко - разтягане, разходка, да ви отпочинат очите - преди да отидем към следващата глава. :) + +![Кексче](images/cupcake.png) \ No newline at end of file diff --git a/bg/python_introduction/images/cupcake.png b/bg/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/bg/python_introduction/images/cupcake.png differ diff --git a/bg/styles/website.css b/bg/styles/website.css new file mode 100644 index 00000000000..917a9d65a50 --- /dev/null +++ b/bg/styles/website.css @@ -0,0 +1,64 @@ + +/* add text to top menu items */ + +.book-header .fa::after { + text-transform: none; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; +} +.book-header .fa-align-justify::after { + content: ' Show Outline'; + text-transform: none; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; +} +.book.with-summary .book-header .fa-align-justify::after { + content: ' Hide Outline'; +} +.book-header .fa-globe::after { + content: ' Language'; +} +.book-header .fa-font::after { + content: ' Font Settings'; +} +@media (max-width:600px) { + .book-header .fa-font::after { + content: ' Font'; + } + .book-header .js-toolbar-action.pull-right { /* social sharing links */ + display: none; + } +} + +/* add text to the Next & Prev arrows */ + +.navigation-prev::after { + content: 'Previous'; + font-size: 20pt; + vertical-align: text-bottom; + line-height: 44px; +} +.navigation-next::after { + content: 'Next'; + font-size: 20pt; + vertical-align: text-bottom; + line-height: 44px; +} + +@media (max-width:1240px) { + /* on small viewports, the arrows are shown on the side, so move text around to look better */ + .navigation-next::after { + content: none; + } + .navigation-next::before { + content: 'Next'; + font-size: 20pt; + vertical-align: text-bottom; + line-height: 44px; + } +} + +/* fine tune text size to not overlap main body text on very specific viewport sizes */ +@media (min-width:1241px) and (max-width:1274px) { + .navigation-prev::after { + font-size: 16pt; + } +} diff --git a/bg/template_extending/README.md b/bg/template_extending/README.md new file mode 100644 index 00000000000..d9278924a4d --- /dev/null +++ b/bg/template_extending/README.md @@ -0,0 +1,147 @@ +# Разширяване на шаблона + +Друго хубаво нещо, което Django има за вас, е **разширяване на шаблона**. Какво означава това? Това означава, че можете да използвате същите части на вашия HTML за различни страници на вашия уебсайт. + +Шаблоните помагат, когато искате да използвате една и съща информация или оформление на повече от едно място. Не е нужно да се повтаряте във всеки файл. И ако искате да промените нещо, не е необходимо да го правите във всеки шаблон, само в един! + +## Създайте основен шаблон + +Базовият шаблон е най-основният шаблон, който разширявате на всяка страница от вашия уебсайт. + +Нека създадем `base.html` файл в `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +След това го отворете в редактора на кода и копирайте всичко от `post_list.html` във `base.html` файл, като този: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +След това в `base.html` заменете съдържанието в секцията `` (всичко между `` и ``) с това: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Може да забележите, че това замени всичко от `{% for post in posts %}` до `{% endfor %}` с: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Но защо? Току-що създадохте `block`! Използвахте шаблонния маркер `{% block %}`, за да направите област, в която да бъде вмъкнат HTML код. Този HTML код ще идва от друг шаблон, който разширява този шаблон (`base.html`). Ще ви покажем как да направите това след малко. + +Сега запишете `base.html` и отворете вашия `blog/templates/blog/post_list.html` отново в редактора на кода. {% raw %} Ще премахнете всичко по-горе `{% for post in posts %}` и под `{% endfor %}`. Когато приключите, файлът ще изглежда така:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Искаме да използваме това като част от нашия шаблон за всички съдържателни блокове. Време е да добавите блокови тагове към този файл! + +{% raw %}Искате вашият маркер за блока да съвпада с маркера във вашия `base.html` файл. Освен това искате той да включва всички кодове, които принадлежат във вашите блокове на съдържание. За целта поставете всичко между `{% block content %}` и `{% endblock %}`. Ето така:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Остана само едно нещо. Трябва да свържем тези два шаблона заедно. За това става въпрос в разширяващите се шаблони! Ще направим това, като добавим маркер за разширения в началото на файла. Ето така: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Това е! Запазете файла и проверете дали уебсайтът ви все още работи правилно. :) + +> Ако получите грешката `TemplateDoesNotExist`, това означава, че няма `blog/base.html` файл и имате `runserver` работещ в конзолата. Опитайте се да го спрете (като натиснете Ctrl + C - клавишите Control и C заедно) и го рестартирайте, като изпълните команда `python manage.py runserver`. \ No newline at end of file diff --git a/bg/whats_next/README.md b/bg/whats_next/README.md new file mode 100644 index 00000000000..ed55fd3b3b4 --- /dev/null +++ b/bg/whats_next/README.md @@ -0,0 +1,42 @@ +# Какво следва? + +Поздравете се! **Ти си напълно страхотен**. Гордеем се! <3 + +### Какво да правим сега? + +Направете почивка и се отпуснете! Току-що направихте нещо наистина огромно. + +След това, не забравяйте да следвате Django Girls във [ Facebook ](http://facebook.com/djangogirls) или [ Twitter ](https://twitter.com/djangogirls). + +### Можете ли да препоръчате допълнителни ресурси? + +Да! Има *много* онлайн ресурси за научаване на всякакви умения за програмиране - може да бъде доста трудно да разберете как да продължите по-натам, но не се безспокойте. Каквито и да бяха интересите ви преди да дойдете на Django Girls и каквито и интереси сте развили по време на ръководството, ето някои безплатни ресурси (или ресурси с големи безплатни компоненти), които можете да използвате, за да стигнете до това, което искате. + +#### Django + +- Другата ни книга, [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Официалното ръководство на Django](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [Първи стъпки с видео уроци на Django](http://www.gettingstartedwithdjango.com/) + +#### HTML, CSS и JavaScript + +- [Курс за уеб разработка на Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Курс по Python на Codecademy](https://www.codecademy.com/learn/learn-python) +- [Курс по Python на Google](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) – първоначалните упражнения са безплатни +- [New Coder tutorials](http://newcoder.io/tutorials/) - това са различни практически примери за това как можете да използвате Python +- [ edX ](https://www.edx.org/course?search_query=python) - можете да участвате в повечето курсове безплатно, но ако искате сертификат или по-голяма квалификация, това ще струва пари +- [Python специализация на Coursera](https://www.coursera.org/specializations/python) - можете да участвате в няколко видео лекции безплатно и можете да спечелите сертификат на Coursera, като вземете тези курсове +- [Python for Everybody](https://www.py4e.com/) - безплатна и отворена версия на специализирания Python Coursera за всеки + +#### Работа с данни + +- [Курсът по научни данни на Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) - можете да участвате в повечето курсове безплатно, но ако искате сертификат или по-голяма квалификация, това ще струва пари +- [Dataquest](https://www.dataquest.io/) - първите 30 "мисии" са безплатни + +Нямаме търпение да видим какво ще изградите след това! \ No newline at end of file diff --git a/book.json b/book.json index 1c0c5c1e3b3..4e51f01aa0f 100644 --- a/book.json +++ b/book.json @@ -1,31 +1,103 @@ { + "gitbook": ">=3.2.0", + "variables": { + "py_version": "3.14", + "py_release": "3.14.3", + "py_min_version": "3.10", + "py_min_release": "3.10.13", + "pa_py_version": "3.10", + "django_version": "5.2.12", + "docs_version": "5.2" + }, "links": { - "home": false, - "about": "http://djangogirls.org", - "issues": false, - "contribute": "http://tutorial.djangogirls.org/contributing_and_editing_this_book/README.html", - - "custom": { - "Django documentation": "http://docs.djangoproject.com" - }, - - "sharing": { - "google": false, - "facebook": "https://www.facebook.com/djangogirls", - "twitter": "http://twitter.com/djangogirls" - } }, - + "pdf": { + "fontSize": 16 + }, "plugins": [ - "anchors", "ga", "richquotes" + "heading-anchors@1.0.3", + "ga@1.0.1", + "richquotes@0.0.9", + "github@2.0.0", + "language-picker", + "sidebar-ads", + "codeblock-label", + "sectionx-ex", + "collapsible-menu" ], - "pluginsConfig": { "ga": { "token": "UA-51680040-3" }, - "richquotes" : { - "todos" : true + "richquotes": { + "default": false + }, + "github": { + "url": "https://github.com/DjangoGirls/tutorial" + }, + "language-picker": { + "grid-columns": 3 + }, + "sidebar-ads": { + "ads": [ + { + "imageUrl": "https://djangogirls.org/static/img/global/donate/lagos.jpg", + "url": "https://surveys.jetbrains.com/s3/w-django-girls-survey-2024", + "description": "💖 Celebrate 10 years with us. Fill our survey! ✨", + "btnText": "Fill in now!" + }, + { + "imageUrl": "https://static.djangoproject.com/img/logos/django-logo-negative.png", + "url": "https://www.djangoproject.com/", + "description": "💖 The DSF supports the development of Django! ✨", + "btnText": "Learn more!" + }, + { + "imageUrl": "https://djangogirls.org/static/img/global/supporters/DO_Logo_Vertical_Blue.png", + "url": "https://www.digitalocean.com/", + "description": "💖 DigitalOcean simplifies cloud computing! ✨", + "btnText": "Learn more!" + }, + { + "imageUrl": "https://djangogirls.org/uploads/uploads/posthog.png", + "url": "https://posthog.com/", + "description": "💖 PostHog offers a suite of product analysis tools! ✨", + "btnText": "Learn more!" + }, + { + "imageUrl": "https://djangogirls.org/uploads/uploads/lincolnloop.png", + "url": "https://lincolnloop.com/", + "description": "💖 Lincoln Loop provides scalable content platforms! ✨", + "btnText": "Learn more!" + }, + { + "imageUrl": "https://djangogirls.org/uploads/uploads/torchbox.png", + "url": "https://torchbox.com/", + "description": "💖 Torchbox, the creators of Wagtail! ✨", + "btnText": "Learn more!" + }, + { + "imageUrl": "https://www.pythonanywhere.com/static/anywhere/images/PA-logo.svg", + "url": "https://www.pythonanywhere.com/", + "description": "💖 Host, run, and code Python in the cloud! ✨", + "btnText": "Learn more! " + }, + { + "imageUrl": "https://djangogirls.org/static/img/global/donate/lagos.jpg", + "url": "https://www.patreon.com/djangogirls", + "description": "💖 Support our work and donate to our project! ✨", + "btnText": "Donate now!" + }, + { + "imageUrl": "https://djangogirls.org/static/img/global/donate/tshirt.jpg", + "url": "https://djangogirls.org/en/contact/", + "description": "💖 Want to support our work? ✨", + "btnText": "Contact Us!" + } + ] + }, + "sectionx": { + "tag": "b" } } } diff --git a/code_editor/README.md b/code_editor/README.md deleted file mode 100644 index 6bad46cfc9e..00000000000 --- a/code_editor/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# Code editor - -You're about to write your first line of code, so it's time to download a code editor! - -There are a lot of different editors and it largely boils down to personal preference. Most Python programmers use complex but extremely powerful IDEs (Integrated Development Environments), such as PyCharm. As a beginner, however - that's probably less suitable; our recommendations are equally powerful, but a lot more simple. - -Our suggestions are below, but feel free to ask your coach what their preference is - it'll be easier to get help from them. - -## Gedit - -Gedit is an open-source, free editor, available for all operating systems. - -[Download it here](https://wiki.gnome.org/Apps/Gedit#Download) - -## Sublime Text 2 - -Sublime Text is a very popular editor with a free evaluation period. It's easy to install and use, and available for all operating systems. - -[Download it here](http://www.sublimetext.com/2) - -## Atom - -Atom is an extremely new code editor created by [GitHub](http://github.com/). It's free, open-source, easy to install and easy to use, but is only available as a prebuilt program on Windows and OS X at the moment. It'll be available prebuilt for Linux in the future. - -[Download it here](https://atom.io/) diff --git a/contributing/images/edit.png b/contributing/images/edit.png new file mode 100644 index 00000000000..bd0bb646924 Binary files /dev/null and b/contributing/images/edit.png differ diff --git a/contributing/images/fork.png b/contributing/images/fork.png new file mode 100644 index 00000000000..13e52e00097 Binary files /dev/null and b/contributing/images/fork.png differ diff --git a/contributing/images/gitbook.png b/contributing/images/gitbook.png new file mode 100644 index 00000000000..460c2623f58 Binary files /dev/null and b/contributing/images/gitbook.png differ diff --git a/contributing/images/github_editor.png b/contributing/images/github_editor.png new file mode 100644 index 00000000000..653f747d491 Binary files /dev/null and b/contributing/images/github_editor.png differ diff --git a/contributing/images/pull_request.png b/contributing/images/pull_request.png new file mode 100644 index 00000000000..0effe646f72 Binary files /dev/null and b/contributing/images/pull_request.png differ diff --git a/contributing_and_editing_this_book/README.md b/contributing_and_editing_this_book/README.md deleted file mode 100644 index c6c33e9cef0..00000000000 --- a/contributing_and_editing_this_book/README.md +++ /dev/null @@ -1,108 +0,0 @@ -# How to contribute - -The Django Girls Tutorial is licensed under a *Creative Commons Attribution-ShareAlike 4.0* license. Everyone is free to add, edit and correct the tutorial. - -# Editing basics - -The source code of the tutorial is [hosted on Github](). The Github [Fork & Pull workflow](https://help.github.com/articles/using-pull-requests) is used to accept and review changes. - -The tutorial uses the [GitBook](https://www.gitbook.io/) service for publishing its documentation. [See more information about how Gitbook works](http://help.gitbook.io/). - -The tutorial is written in [Markdown mark up language](https://help.github.com/articles/markdown-basics). - -You can find any discussions about the contents of the tutorial on the [Github issue tracker](https://github.com/DjangoGirls/tutorial/issues). - -# Getting started and prerequisites - -For contributing to the tutorial the following is needed to get started: - -* a [Github account](https://github.com) -* in the case of complex edits familiarity with [Git command line basics](https://help.github.com/articles/set-up-git) or familiarity with an app ([Windows](https://windows.github.com/), [Mac](https://mac.github.com/)) to push your edits made on your computer to Github. - -## Fork the repository - -First fork the [DjangoGirls/tutorial](https://github.com/DjangoGirls/tutorial) repository to your personal Github account: - -![Fork button](images/fork.png) - -# Editing chapter content - -## Simple changes - -For simple changes like typo corrections you can use the Github online editor: - -* Open your local fork page on Github, -* go to *README.md* file in any chapter, -* press the *Edit* icon (pen) - -and you can edit the chapter directly on github.com. - -![Edit button](images/edit.png) - -Markdown syntax is used to edit the individual pages of the tutorial. - -![Github editor](images/github_editor.png) - -Save your changes and create a pull request as explained below. - -## New content and complex changes - -For adding new chapters, writing longer snippets of text or adding images, you need to get a copy of the tutorial to your local computer. - -Either use the Github app for your operating system (mentioned above) or `git` command line to get the repository locally. You get the repository address from the front page of your own Github repository fork: - - git clone git@github.com:yourgithubusername/tutorial.git - -Download the [Gitbook Editor](http://help.gitbook.io/editor/README.html) app to your computer. - -Then you can open the tutorial in Gitbook Editor (*File* > *Open book*). - -![Gitbook](images/gitbook.png) - -Make any changes in the tutorial using the editor and then save changes (*Book* > *Save all*). - -Then commit the changes using `git` and push the changes to your remote Github repository. - -Example: - - $ git status - On branch contributing - Untracked files: - (use "git add ..." to include in what will be committed) - - contributing_and_editing_this_book/images/gitbook.png - - $ git add contributing_and_editing_this_book/images/gitbook.png - - $ git commit -m "Added gitbook editor screenshot" - [contributing fe36152] Added gitbook screenshot - 1 file changed, 0 insertions(+), 0 deletions(-) - create mode 100644 contributing_and_editing_this_book/images/gitbook.png - - $ git push - Counting objects: 11, done. - Delta compression using up to 8 threads. - Compressing objects: 100% (5/5), done. - Writing objects: 100% (5/5), 266.37 KiB | 0 bytes/s, done. - Total 5 (delta 1), reused 0 (delta 0) - To git@github.com:miohtama/tutorial.git - b37ca59..fe36152 contributing -> contributing - -# Making a pull request - -After you have finished your changes you need to create [a pull request](https://help.github.com/articles/using-pull-requests) on Github. DjangoGirls will get notified about the pull request, review your changes, suggest any corrections if needed and then *pull* your changes to the master version. - -In your own repository on Github press do *Compare & pull request* - -![Gitbook](images/pull_request.png) - -Fill in the information *why* this change is being made. The reviewer can see the details of the actual change, so you don't need repeat the content of the change. - -Then press *Create pull request*. - -Github emails will notify you for the follow up process. - -# Further information and help - -For any questions please [contact DjangoGirls](http://djangogirls.org/). - diff --git a/contributing_and_editing_this_book/images/edit.png b/contributing_and_editing_this_book/images/edit.png deleted file mode 100644 index bd11fe1dc29..00000000000 Binary files a/contributing_and_editing_this_book/images/edit.png and /dev/null differ diff --git a/contributing_and_editing_this_book/images/fork.png b/contributing_and_editing_this_book/images/fork.png deleted file mode 100644 index 8d0cfb439c0..00000000000 Binary files a/contributing_and_editing_this_book/images/fork.png and /dev/null differ diff --git a/contributing_and_editing_this_book/images/gitbook.png b/contributing_and_editing_this_book/images/gitbook.png deleted file mode 100644 index 666b4780081..00000000000 Binary files a/contributing_and_editing_this_book/images/gitbook.png and /dev/null differ diff --git a/contributing_and_editing_this_book/images/github_editor.png b/contributing_and_editing_this_book/images/github_editor.png deleted file mode 100644 index 44af3a6de7b..00000000000 Binary files a/contributing_and_editing_this_book/images/github_editor.png and /dev/null differ diff --git a/contributing_and_editing_this_book/images/pull_request.png b/contributing_and_editing_this_book/images/pull_request.png deleted file mode 100644 index 7af36fe61be..00000000000 Binary files a/contributing_and_editing_this_book/images/pull_request.png and /dev/null differ diff --git a/cover.jpg b/cover.jpg index f2f431a3a47..9c72d8c9382 100644 Binary files a/cover.jpg and b/cover.jpg differ diff --git a/cover_small.jpg b/cover_small.jpg index 8ee6f9f3fb9..6778964195d 100644 Binary files a/cover_small.jpg and b/cover_small.jpg differ diff --git a/crowdin.yaml b/crowdin.yaml new file mode 100644 index 00000000000..da45c696f2b --- /dev/null +++ b/crowdin.yaml @@ -0,0 +1,3 @@ +files: + - source: /en/**/*.md + translation: '/%locale%/**/%original_file_name%' diff --git a/cs/GLOSSARY.md b/cs/GLOSSARY.md new file mode 100755 index 00000000000..3107893bace --- /dev/null +++ b/cs/GLOSSARY.md @@ -0,0 +1,3 @@ +# editor zdrojového kódu + +Editor kódu je aplikace, která umožňuje uložit váš kód, takže bude možné vrátit se k němu později. Kde ho můžeš získat se dozvíš v [Kapitole editor kódu](./code_editor/README.md). \ No newline at end of file diff --git a/cs/README.md b/cs/README.md new file mode 100755 index 00000000000..5ad33b27ddd --- /dev/null +++ b/cs/README.md @@ -0,0 +1,53 @@ +# 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) + +> 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 + +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? + +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. + +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. + +Doufáme, že se nám podaří přiblížit ti tuto technologii tak, abys ji měla stejně ráda jako my! + +## Co se naučíš během kurzu? + +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! + +Tvá aplikace bude (více či méně) vypadat takto: + +![Figure 0.1][2] + + [2]: images/application.png + +> 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! + +OK, [začněme od začátku...][3] + + [3]: ./how_the_internet_works/README.md + +## O kurzu a přispěvatelích + +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]. + + [4]: https://djangogirls.org/ + [5]: https://github.com/DjangoGirls/tutorial/blob/master/README.md + +## Český překlad + +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. + +## Chtěla bys nám pomoci přeložit návod do jiných jazyků? + +V současné době jsou překlady provozovány na platformě crowdin.com na adrese: + +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 diff --git a/cs/SUMMARY.md b/cs/SUMMARY.md new file mode 100755 index 00000000000..44793ad9d19 --- /dev/null +++ b/cs/SUMMARY.md @@ -0,0 +1,26 @@ +# 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) diff --git a/cs/code_editor/README.md b/cs/code_editor/README.md new file mode 100755 index 00000000000..f91d7968087 --- /dev/null +++ b/cs/code_editor/README.md @@ -0,0 +1,7 @@ +# Editor zdrojového kódu + +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ší! + +{% 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 new file mode 100755 index 00000000000..a43563481a1 --- /dev/null +++ b/cs/code_editor/instructions.md @@ -0,0 +1,31 @@ +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šší. + +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. + +## Gedit + +Gedit je open-source editor. Je k dispozici zdarma pro všechny operační systémy. + +[Stáhnout si jej můžeš zde](https://wiki.gnome.org/Apps/Gedit#Download) + +## 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. + +[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, macOS a Linux. + +[Stáhnout si jej můžeš zde](https://atom.io/) + +## Proč jsme instalovali 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. + +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). + +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. + +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ů :) diff --git a/cs/css/README.md b/cs/css/README.md new file mode 100755 index 00000000000..acc0961ec20 --- /dev/null +++ b/cs/css/README.md @@ -0,0 +1,297 @@ +# CSS - aby byla tvoje aplikace krásná! + +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 ;). + +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. + +## 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/ + +Napsali ho programátoři, kteří pracovali pro Twitter, a nyní ho vyvíjí dobrovolníci z celého světa. + +## Instalace Bootstrapu + +Chceš-li nainstalovat Bootstrap, je třeba přidat do `< head >` v souboru `.html` (`blog/templates/blog/post_list.html`): + +```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] + + [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é. + +### 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`. + +Uděláš to tak, že vytvoříš složku s názvem `static` uvnitř aplikace blog: + +``` +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. + +## 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. + +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. + + [2]: https://www.codecademy.com/tracks/web + +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`. + + [3]: http://www.w3schools.com/cssref/css_colornames.asp + +V souboru `blog/static/css/blog.css` přidej následující kód: + +```css +h1 a { + color: #FCA205; +} +``` + +`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! + +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`: + +```html + +``` + +Přečti si o [CSS selektorech ve w3schools][4]. + + [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 samý začátek: + +```html +{% load staticfiles %} +``` + +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: + +```html + +``` + +Právě jsi řekla naší šabloně, kde je umístěn náš soubor CSS. + +Soubor by měl nyní vypadat takto: + +```html +{% load staticfiles %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +OK, ulož soubor a aktualizuj stránky! + +![Obrázek 14.2][5] + + [5]: images/color2.png + +Dobrá práce! Co kdybychom také chtěli provzdušnit náš web a zvětšit okraj na levé straně? Pojďme to zkusit! + +```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] + + [6]: images/margin2.png + +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`: + +```html + +``` + +Tento řádek bude importovat písmo s názvem *Lobster* z Google písem (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: + +```css +h1 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![Obrázek 14.3][7] + + [7]: 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ě. + +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: + +```html +
+

Django Girls Blog

+
+``` + +A nyní přidej třídu `post` do svého `div` obsahující blog post. + +```html +
+

published: {{ post.published_date }}

+

{{ 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`: + +```css +.page-header { + background-color: #ff9400; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + + .date { + float: right; + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + + .post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +Pak obklopující HTML kód, který zobrazuje příspěvek s deklaracemi tříd, nahraď tímto: + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Tyto soubory ulož a aktualizuj své webové stránky. + +![Obrázek 14.4][8] + + [8]: 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. + +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! + +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čí. + +Připravena na další kapitolu?! :) diff --git a/cs/css/images/bootstrap1.png b/cs/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/cs/css/images/bootstrap1.png differ diff --git a/cs/css/images/color2.png b/cs/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/cs/css/images/color2.png differ diff --git a/cs/css/images/final.png b/cs/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/cs/css/images/final.png differ diff --git a/cs/css/images/font.png b/cs/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/cs/css/images/font.png differ diff --git a/cs/css/images/margin2.png b/cs/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/cs/css/images/margin2.png differ diff --git a/cs/deploy/README.md b/cs/deploy/README.md new file mode 100755 index 00000000000..6c4d08eaadf --- /dev/null +++ b/cs/deploy/README.md @@ -0,0 +1,317 @@ +# 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ď. + +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 :). + +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. + + [1]: https://www.pythonanywhere.com/ + +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. + +# 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ář. + +{% 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` (macOS/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! + +Běž zpět na dashboard PythonAnywhere kliknutím na logo a poté klikni na kartu **Web**. Nakonec klikni na **Add a new web app**. + +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. + +> **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 ;-) + +### Nastavení virtualenv + +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. + +![][7] + + [7]: images/pythonanywhere_web_tab_virtualenv.png + +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. + +> **Poznámka:** Nahraď své vlastní uživatelské jméno podle potřeby. Pokud uděláš chybu, PythonAnywhere Ti zobrazí malé varování. + +### Konfigurace souboru WSGI + +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. + +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. + +Odstraň veškerý obsah a nahraď jej upraveným následujícím kódem: + +```python +import os +import sys + +path = '/home//my-first-blog' # use your own username here +if path not in sys.path: + sys.path.append(path) + +os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' + +from django.core.wsgi import get_wsgi_application +from whitenoise.django import DjangoWhiteNoise +application = DjangoWhiteNoise(get_wsgi_application()) +``` + +> **Poznámka:** Nezapomeň nahradit své vlastní uživatelské jméno za `` + +Ú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". + +Klikni na **Save** a přejdi zpět na kartu **Web**. + +Zvládly jsme to! Klikni na velké zelené tlačítko **Reload**, čímž zobrazíš svou aplikaci. Odkaz na to najdeš v horní části stránky. + +## Ladící tipy + +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ří: + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +* Č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. + +* Chyba k cestě virtualenv na kartě Web – bude obvykle označená malou červenou zprávou na stejném místě. + +* Chyba v konfiguračním souboru WSGI – máš cestu do složky my-first-blog v pořádku? + +* 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]. + + [9]: https://www.pythonanywhere.com/wiki/DebuggingImportError + +A pamatuj si, že tvůj kouč je tady, aby ti pomohl! + +# Jsme online! + +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. + +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ď! diff --git a/cs/deploy/images/github_get_repo_url_screenshot.png b/cs/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/cs/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/cs/deploy/images/new_github_repo.png b/cs/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/cs/deploy/images/new_github_repo.png differ diff --git a/cs/deploy/images/pythonanywhere_web_tab_virtualenv.png b/cs/deploy/images/pythonanywhere_web_tab_virtualenv.png new file mode 100644 index 00000000000..6069f6da831 Binary files /dev/null and b/cs/deploy/images/pythonanywhere_web_tab_virtualenv.png differ diff --git a/cs/deploy/install_git.md b/cs/deploy/install_git.md new file mode 100755 index 00000000000..0e9d9d7c282 --- /dev/null +++ b/cs/deploy/install_git.md @@ -0,0 +1,19 @@ +### Windows + +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ý. + +### MacOS + +Stáhni Git z [git-scm.com](https://git-scm.com/) a postupuj podle pokynů. + +### Linux + +Pokud ho již nemáš nainstalovaný, git měl by být k dispozici pomocí Správce balíčků, zkus: + +``` +sudo apt install git +# or +sudo yum install git +# or +sudo zypper install git +``` diff --git a/cs/deploy/signup_pythonanywhere.md b/cs/deploy/signup_pythonanywhere.md new file mode 100755 index 00000000000..fe6e67a8fe7 --- /dev/null +++ b/cs/deploy/signup_pythonanywhere.md @@ -0,0 +1,5 @@ +Dále je čas přihlásit se zdarma k účtu "Beginner" na PythonAnywhere. + + * [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +> **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. diff --git a/cs/django/README.md b/cs/django/README.md new file mode 100755 index 00000000000..3663ae96264 --- /dev/null +++ b/cs/django/README.md @@ -0,0 +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. + +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. + +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. + +## 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. + +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. + +## 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*. + +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. + +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čí. + +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! diff --git a/cs/django_admin/README.md b/cs/django_admin/README.md new file mode 100755 index 00000000000..7ddfc186a3e --- /dev/null +++ b/cs/django_admin/README.md @@ -0,0 +1,49 @@ +# Django admin + +Chceš-li přidávat, upravovat a mazat příspěvky, které jsme právě vymodelovaly, použijeme Django admin. + +Otevřeme soubor `blog/admin.py` a nahradíme jeho obsah následujícím kódem: + +```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)`. + +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: + +![Login page][1] + + [1]: images/login_page2.png + +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í): + +``` +(myvenv) ~/djangogirls$ python manage.py createsuperuser +Username: admin +Email address: admin@admin.com +Password: +Password (again): +Superuser created successfully. +``` + +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. + +![Django admin][2] + + [2]: images/django_admin3.png + +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 :). + +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é. + +![Django admin][3] + + [3]: 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/ + +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! diff --git a/cs/django_admin/images/django_admin3.png b/cs/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/cs/django_admin/images/django_admin3.png differ diff --git a/cs/django_admin/images/edit_post3.png b/cs/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/cs/django_admin/images/edit_post3.png differ diff --git a/cs/django_admin/images/login_page2.png b/cs/django_admin/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/cs/django_admin/images/login_page2.png differ diff --git a/cs/django_forms/README.md b/cs/django_forms/README.md new file mode 100755 index 00000000000..8ea26f584c1 --- /dev/null +++ b/cs/django_forms/README.md @@ -0,0 +1,395 @@ +# 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! + +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`. + +V našem adresáři potřebujeme vytvořit soubor s názvem `blog`. + +``` +blog + └── forms.py +``` + +OK, otevři ho a zadej následující kód: + +```python + from django import forms + + from .models import Post + + class PostForm(forms.ModelForm): + 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`). + +`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`. + +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`). + +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). + +A je to! Vše, co teď 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. + +## 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`: + +```html + +``` + +Všimni si, že chceme zavolat náš nový view `post_new`. + +Po přidání řádku by měl tvůj html soubor vypadat takto: + +```html +{% load staticfiles %} + + + Django Girls blog + + + + + + +
+ +

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. + +## URL + +Otevři `blog/urls.py` a přidej řádek: + +```python +url(r'^post/new/$', views.post_new, name='post_new'), +``` + +Výsledný kód bude vypadat takto: + +```python + from django.conf.urls import url + 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'), +] +``` + +Po aktualizaci webu vidíme `AttributeError`, protože nemáme implementovaný `post_new` view. Přidáme ho právě teď. + +## post_new view + +Musíme otevřít soubor `blog/views.py` a přidat následující řádky: + +```python +from .forms import PostForm +``` + +a náš *view*: + +```python +def post_new(request): + 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. + +## Š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í: + +* 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: + +![CSFR zakázaná stránka][1] + + [1]: images/csrf2.png + +Pojďme se nyní podívat, jak by mělo vypadat HTML v `post_edit.html`: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + + +{% endblock %} +``` + +Čas aktualizovat naší stránku! Hurá! Zobrazil se formulář! + +![Nový formulář][2] + + [2]: 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? + +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? + +Odpověď je: nic. Musíme ještě trochu zapracovat na našem *view*. + +## Ukládání formuláře + +Otevři znovu `blog/views.py`. Vše, co máme aktuálně v `post_new`, je toto: + +```python +def post_new(request): + 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). + +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`). + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Teď je čas k vyplnění mezer `[...]`. Je-li `method` `POST`, chceme vytvořit `PostForm` s údaji z formuláře, že? Udělejme to: + +```python +form = PostForm(request.POST) +``` + +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()`. + +Zkontrolujeme, je-li formulář platný, a pokud ano, můžeme ho uložit! + +```python +if form.is_valid(): + 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! + +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: + +```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. + +```python +return redirect('post_detail', pk=post.pk) +``` + +`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! + +Už jsme si toho řekly hodně, ale pravděpodobně chceš vidět, jak nyní celý *view* vypadá nyní, nemám pravdu? + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + 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í**. + +## Ověření formuláře + +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á. + +Pokus se uložit formulář bez `nadpisu` a `textu`. Hádej, co se stane! + +![Ověření formuláře][3] + + [3]: images/form_validation2.png + +Django se stará o ověřování, že všechna pole v našem formuláři jsou správně. Není to skvělé? + +> 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. + +![Chyba přihlášení][4] + + [4]: images/post_create_error.png + +## 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). + +Otevři `blog/templates/blog/post_detail.html` a přidej následující řádek: + +```html + +``` + +tak, aby šablona vypadala takto: + +```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: + +```python + url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'), +``` + +Znovu použijeme šablonu `blog/templates/blog/post_edit.html`, takže jediné, co chybí, je *view*. + +Otevři `blog/views.py` a přidej na samý konec souboru: + +```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ář: + +```python +form = PostForm(request.POST, instance=post) +``` + +a když jsme otevřely formulář s tímto příspěvkem pro úpravu: + +```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 + +Po klepnutí na něj se zobrazí formulář s naším příspěvkem: + +![Upravit formulář][6] + + [6]: images/edit_form2.png + +Neboj se změnit název nebo text a ulož změny! + +Blahopřejeme! Tvoje aplikace je skoro kompletní! + +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/ + +## 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. + +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: + +```html + +``` + +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: + +```html +{% if user.is_authenticated %} + +{% 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. + +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! + +## Ještě jedna věc: čas nasadit aplikaci! + +Uvidíme, jestli to funguje na PythonAnywhere. Čas na další nasazení! + +* Za prvé commitni nový kód a pošli ho na GitHub + +``` +$ 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]: + + [7]: https://www.pythonanywhere.com/consoles/ + +``` +$ 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**. + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +A mělo by to být! Gratulujeme :) diff --git a/cs/django_forms/images/csrf2.png b/cs/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/cs/django_forms/images/csrf2.png differ diff --git a/cs/django_forms/images/drafts.png b/cs/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/cs/django_forms/images/drafts.png differ diff --git a/cs/django_forms/images/edit_button2.png b/cs/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/cs/django_forms/images/edit_button2.png differ diff --git a/cs/django_forms/images/edit_form2.png b/cs/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/cs/django_forms/images/edit_form2.png differ diff --git a/cs/django_forms/images/form_validation2.png b/cs/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/cs/django_forms/images/form_validation2.png differ diff --git a/cs/django_forms/images/new_form2.png b/cs/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/cs/django_forms/images/new_form2.png differ diff --git a/cs/django_forms/images/post_create_error.png b/cs/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/cs/django_forms/images/post_create_error.png differ diff --git a/cs/django_installation/README.md b/cs/django_installation/README.md new file mode 100755 index 00000000000..1c0841641c6 --- /dev/null +++ b/cs/django_installation/README.md @@ -0,0 +1,5 @@ +# Instalace Django + +> **Poznámka:** Pokud ses již propracovala přes kroky instalace - můžeš jít rovnou na další kapitolu! + +{% include "/django_installation/instructions.md" %} diff --git a/cs/django_installation/instructions.md b/cs/django_installation/instructions.md new file mode 100755 index 00000000000..d912a5ed786 --- /dev/null +++ b/cs/django_installation/instructions.md @@ -0,0 +1,122 @@ +> Čá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. + +## 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? + +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). + +Pro tento kurz budeme používat nový adresář `djangogirls` vytvořený v domovském adresáři: + +``` +mkdir djangogirls +cd djangogirls +``` + +Vytvoříme virtualenv, s názvem `myvenv`. Obecný příkaz bude vypadat takto: + +``` +python3 -m venv myvenv +``` + +### Windows + +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 > C:\Python34\python -m venv myvenv +``` + +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 macOS + +Vytvoření `virtualenv` na Linux a macOS je stejně jednoduché - spusť`python3 -m venv myvenv`. Celý příkaz bude vypadat takto: + +``` +~/djangogirls$ python3 -m venv myvenv +``` + +`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! + +> **POZNÁMKA:** Vytvoření virtuálního prostředí na Ubuntu 14.04, v současné době vyhazuje následující chybu: +> +> 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 +> + +## 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ů). + +#### Windows + +Spusť virtuální prostředí: + +``` +C:\Users\Name\djangogirls> myvenv\Scripts\activate +``` + +#### Linux a macOS + +Spusť virtuální prostředí: + +``` +~/djangogirls$ source myvenv/bin/activate +``` + +Nezapomeň nahradit `myvenv` tvým zvoleným jménem `virtualenv`! + +> **Poznámka:** někdy příkaz `source` nemusí být k dispozici. V těchto případech, zkus raději: +> +> ~/djangogirls$ . myvenv/bin/activate +> + +Že je `virtualenv` spuštěné, poznáš pokud vidíš výzvu konzole vypadající takto: + +``` +(myvenv) C:\Users\Name\djangogirls> +``` + +nebo: + +``` +(myvenv) ~/djangogirls$ +``` + +Upozornění předpona `(myvenv)` se zobrazí! + +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`. + +OK máme všechny důležité závislosti na místě a konečně můžeme nainstalovat Django! + +## Instalace Django + +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: `==`). + +``` +(myvenv) ~$ pip install django==1.8 +Downloading/unpacking django==1.8 +Installing collected packages: django +Successfully installed django +Cleaning up... +``` + +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 + +> 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! diff --git a/cs/django_models/README.md b/cs/django_models/README.md new file mode 100755 index 00000000000..a4c75b25aed --- /dev/null +++ b/cs/django_models/README.md @@ -0,0 +1,184 @@ +# 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`. + +## 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. + +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á). + +`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ť`). + +``` +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? + +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. + +``` +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. + +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! + +## 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. + +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. + +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): + +``` +(myvenv) ~/djangogirls$ python manage.py startapp blog +``` + +Zjistíš, že nový adresář `blog` nyní obsahuje řadu souborů. Adresáře a soubory v našem projektu by měly vypadat následovně: + +``` +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: + +```python +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. + +Otevři `blog/models.py`, odstraň vše, co v něm je, a vlož následující kód: + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + 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"). + +Vypadá to děsivě, že? Ale žádný strach, vysvětlíme ti, co tyto řádky znamenají! + +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):` - Tento řádek definuje náš model (Jedná se o `objekt`). + +* `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. + +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` - 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. + +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). + +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`. + +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. + +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é! + +### 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: + +``` +(myvenv) ~/djangogirls$ python manage.py makemigrations blog +Migrations for 'blog': + 0001_initial.py: + - Create model Post +``` + +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 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! diff --git a/cs/django_orm/README.md b/cs/django_orm/README.md new file mode 100755 index 00000000000..5f8e383fea2 --- /dev/null +++ b/cs/django_orm/README.md @@ -0,0 +1,180 @@ +# 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! + +## 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. + +Je snazší naučit se to na příkladu. Pojďme to zkusit. + +## Django shell + +Otevři svou lokální konzoli (ne na Python Anywhere) a napiš tento příkaz: + +``` +(myvenv) ~/djangogirls$ python manage.py shell +``` + +Mělo by to mít takovýto efekt: + +``` +(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. + +### 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: + +``` +>>> 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! + +``` +>>> from blog.models import Post +``` + +Tohle je jednoduché: importujeme model `Post` z `blog.models`. Pojďme znovu zkusit zobrazit všechny příspěvky: + +``` +>>> 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? + +### Vytvoř objekt + +Takhle vytvoříš nový Post objekt v databázi: + +``` +>>> 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? + +Nejdříve pojďme importovat User model: + +``` +>>> from django.contrib.auth.models import User +``` + +Jaké uživatele máme v naší databázi? Zkus tohle: + +``` +>>> User.objects.all() +]> +``` + +Tohle je superuser, kterého jsme vytvořily dříve! Pojďme si teď vzít instanci tohoto uživatele: + +```python +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. + +Teď můžeme konečně vytvořit příspěvek: + +``` +>>> Post.objects.create(author=me, title='titulek', text='Test') +``` + +Hurá! Chceš se podívat, jestli to fungovalo? + +``` +>>> 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. + +### 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: + +``` +>>> Post.objects.filter(author=ja) +[, , , ] +``` + +Nebo možná chceme vidět všechny příspěvky, jež mají slovo 'titulek' v poli `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". + +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: + +``` +>>> 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: + +``` +>>> post = Post.objects.get(title="Sample title") +``` + +A ten publikujeme pomocí naší metody `publish`! + +``` +>>> post.publish() +``` + +Teď se znovu pokus získat seznam publikovaných příspěvků (3krát zmáčkni šipku nahoru a zmáčkni `enter`): + +``` +>>> 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`): + +``` +>>> Post.objects.order_by('created_date') +[, , , ] +``` + +Můžeme je také seřadit obráceně přidáním `-` na začátek: + +``` +>>> Post.objects.order_by('-created_date') +[, , , ] +``` + +### Řetězení QuerySetů + +QuerySety můžeš také kombinovat dohromady pomocí **řetězení**: + +``` +>>> 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. + +Cool! Teď jsi připravená na další část! Pro zavření shell konzole zadej toto: + +``` +>>> exit() +$ +``` diff --git a/cs/django_start_project/README.md b/cs/django_start_project/README.md new file mode 100755 index 00000000000..98bcc2ee0c0 --- /dev/null +++ b/cs/django_start_project/README.md @@ -0,0 +1,143 @@ +# 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. + + [1]: http://django-marcador.keimlink.de/ + +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 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 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. 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**: + +``` +(myvenv) ~/djangogirls$ django-admin startproject mysite . +``` + +V systému Windows; **nezapomeň přidat tečku `.` na konci**: + +``` +(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) +> +> **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. + +`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 +``` + +`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. + +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`. + +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! + +## 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`) + + [2]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones + +V settings.py najdi řádek, který obsahuje `TIME_ZONE`, a uprav jej tak, aby obsahoval tvoje vlastní časové pásmo: + +```python +TIME_ZONE = 'Europe/Prague' +``` + +Uprav "Europe/Prague" podle potřeby. + +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`: + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +## Nastavení databáze + +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`: + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.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: + +``` +(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`: + +``` +(myvenv) ~/djangogirls$ python manage.py runserver +``` + +Pokud pracuješ v systému Windows a nezdaří se to s chybovou zprávou `UnicodeDecodeError`, použij tento příkaz: + +``` +(myvenv) ~/djangogirls$ python manage.py runserver 0:8000 +``` + +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: + +``` +http://127.0.0.1:8000/ +``` + +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. + +Blahopřejeme! Právě jsi vytvořila svůj první web a spustila jej pomocí webového serveru! Není to super? + +![Fungovalo to!][3] + + [3]: images/it_worked2.png + +Připravena pro další krok? Je tu čas k vytvoření nějakého obsahu! diff --git a/cs/django_start_project/images/it_worked2.png b/cs/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/cs/django_start_project/images/it_worked2.png differ diff --git a/cs/django_templates/README.md b/cs/django_templates/README.md new file mode 100755 index 00000000000..97c487fcdd7 --- /dev/null +++ b/cs/django_templates/README.md @@ -0,0 +1,108 @@ +# Django šablony + +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ší. + +**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. + +## 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 Django šabloně se proměnná vypíše pomocí dvojitých složených závorek s názvem proměnné uvnitř. Takhle: + +```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] + + [1]: images/step1.png + +Jak vidíš, dostali jsme toto: + +``` +, ]> +``` + +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: + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Zkus udělat tohle ve své šabloně. + +![Figure 13.2][2] + + [2]: images/step2.png + +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: + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ 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] + + [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. + +## 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... + +* Nejdřív hoď svůj kód na GitHub + +``` +$ git status +[...] +$ git add --all . +$ git status +[...] +$ git commit -m "Modified templates to display posts from database." +[...] +$ git push +``` + +* Pak se přihlaš do [PythonAnywhere][4] a jdi do **Bash konzole** (nebo vytvoř novou) a zadej: + + [4]: https://www.pythonanywhere.com/consoles/ + +``` +$ cd my-first-blog +$ git pull +[...] +``` + +* Nakonec jdi na záložku [Web][5] a klikni na **Reload**. Tvá stránka by měla být aktuální! + + [5]: https://www.pythonanywhere.com/web_app_setup/ + +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í. + +Funguje to dokonale? Jsme hrdí! Odpočiň si na chvíli od počítače, zasloužíš si přestávku :) + +![Figure 13.4][6] + + [6]: images/donut.png diff --git a/cs/django_templates/images/donut.png b/cs/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/cs/django_templates/images/donut.png differ diff --git a/cs/django_templates/images/step1.png b/cs/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/cs/django_templates/images/step1.png differ diff --git a/cs/django_templates/images/step2.png b/cs/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/cs/django_templates/images/step2.png differ diff --git a/cs/django_templates/images/step3.png b/cs/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/cs/django_templates/images/step3.png differ diff --git a/cs/django_urls/README.md b/cs/django_urls/README.md new file mode 100755 index 00000000000..456b3d95a5b --- /dev/null +++ b/cs/django_urls/README.md @@ -0,0 +1,126 @@ +# Django URL + +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. + +## 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): + +![Url][1] + + [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. + +## 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á: + +```python +from django.conf.urls import include, url +from django.contrib import admin + +urlpatterns = [ + # Examples: + # url(r'^$', 'mysite.views.home', name='home'), + # url(r'^blog/', include('blog.urls')), + + url(r'^admin/', include(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šší. + +## Regex + +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í. + +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ě: + +``` +^ 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: + +* **^ 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 + +## Tvoje první Django URL! + +Č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ů. + +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`. + +Odstraň zakomentované řádky (řádky začínající `#`) a přidej řádek, který bude importovat `blog.urls` do hlavní URL('').`''`). + +Tvůj `Mysite/urls.py` soubor by měl nyní vypadat takto: + +```python +from django.conf.urls import include, url +from django.contrib import admin + +urlpatterns = [ + url(r'^admin/', include(admin.site.urls)), + url(r'', 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. + +## blog.urls + +Vytvoř nový prázdný soubor `blog/urls.py`. Přidej tyto dvě první řádky: + +```python +from django.conf.urls import url +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). + +Poté můžeme přidat náš první URL vzor: + +```python +urlpatterns = [ + url(r'^$', 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é. + +Všechno v pořádku? Otevři http://127.0.0.1:8000 / v prohlížeči a uvidíš výsledek. + +![Error][2] + + [2]: images/error1.png + +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é: + +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. + +> 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/ diff --git a/cs/django_urls/images/error1.png b/cs/django_urls/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/cs/django_urls/images/error1.png differ diff --git a/cs/django_urls/images/url.png b/cs/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/cs/django_urls/images/url.png differ diff --git a/cs/django_views/README.md b/cs/django_views/README.md new file mode 100755 index 00000000000..18d8e531d5a --- /dev/null +++ b/cs/django_views/README.md @@ -0,0 +1,38 @@ +# Django views – je čas začít tvořit! + +Nejdříve se musíme zbavit chyb, které jsme vytvořily 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 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: + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Zatím zde není příliš informací. Nejjednodušší *view* může vypadat následovně. + +```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`. + +Ulož soubor, přejdi na http://127.0.0.1:8000/ a podívej se, co se nám nyní zobrazí. + +Další chyba! Přečti si, co je špatně nyní: + +![Error][1] + + [1]: images/error.png + +Je to jednoduché: *TemplateDoesNotExist*. Musíme opravit tuto chybu a v následující kapitole vytvořit šablonu! + +> Další informace ohledně Django views získáš v oficiální dokumentaci na: https://docs.djangoproject.com/en/1.8/topics/http/views/ diff --git a/cs/django_views/images/error.png b/cs/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/cs/django_views/images/error.png differ diff --git a/cs/domain/README.md b/cs/domain/README.md new file mode 100755 index 00000000000..45882b8235f --- /dev/null +++ b/cs/domain/README.md @@ -0,0 +1,71 @@ +# 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 new file mode 100755 index 00000000000..a75c2805c2e --- /dev/null +++ b/cs/dynamic_data_in_templates/README.md @@ -0,0 +1,75 @@ +# 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ě? + +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ě. + +OK, tak jak toho dosáhneme? + +Potřebujeme otevřít `blog/views.py`. Prozatím `post_list` *view* vypadá takhle: + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +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`: + +```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`). + +Ale co dál? Abychom mohly vzít skutečné příspěvky z `Post`, potřebujeme něco, čemu říkáme `QuerySet`. + +## QuerySet + +Už bys měla mít povědomí o tom, jak QuerySety fungují. To jsme probraly v kapitole [Django ORM (QuerySets)][1]. + + [1]: ../django_orm/README.md + +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! + +```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)`: + +```python +from django.shortcuts import render +from django.utils import timezone +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. + +Kód také používá funkci `timezone.now()`, takže potřebujeme přidat import pro `timezone`. + +Poslední chybějící část je předat `posts` QuerySet do šablony (jak ho zobrazit si ukážeme v další kapitole). + +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 `''`. + +A nakonec by náš `blog/views.py` soubor měl vypadat takhle: + +```python +from django.shortcuts import render +from django.utils import timezone +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/ diff --git a/cs/extend_your_application/README.md b/cs/extend_your_application/README.md new file mode 100755 index 00000000000..55c33681cff --- /dev/null +++ b/cs/extend_your_application/README.md @@ -0,0 +1,197 @@ +# 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é. + +Čas na procvičení! + +První věc, kterou potřebujeme v našem blogu, je pochopitelně stránka, která zobrazí jeden příspěvek, že ano? + +Již máme `Post` model, takže nebudeme muset přidávat nic k `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: + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + + +{% 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 %} + +```html +

{{ 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 %} + +`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*. + +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: + +![NoReverseMatch error][1] + + [1]: 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*! + +Chceme, aby se detail našeho prvního příspěvku zobrazil na této **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: + +```python + from django.conf.urls import url + from . import views + +urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), + url(r'^post/(?P[0-9]+)/$', 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! + +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*. + +`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]+)`. + +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! + +![AttributeError][2] + + [2]: images/attribute_error2.png + +Pamatuješ si, jaký je další krok? Jistě: Přidat 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! + +A teď chceme dostat jeden a pouze jeden příspěvek z blogu. K tomu můžeme použít querysets jako je tento: + +```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! + +![DoesNotExist error][3] + + [3]: images/does_not_exist2.png + +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][4] + + [4]: images/404_2.png + +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. + +Ok, čas k přidání *view* do našeho souboru `views.py`! + +Měla bys otevřít `blog/views.py` a přidat následující kód: + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Poblíž jiné řádky `from`. A na konec souboru přidáme náš *view*: + +```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 list view][5] + + [5]: images/post_list2.png + +Fungovalo to! Ale co se stane, když klepneš na odkaz v názvu příspěvku? + +![TemplateDoesNotExist error][6] + + [6]: images/template_does_not_exist2.png + +Ach ne! Další chyba! Ale my už víme, jak s tím naložit správně. Musíme přidat šablonu. + +## Vytvoření šablony pro detail příspěvku + +Vytvoříme soubor `blog/templates/blog` s názvem `post_detail.html`. + +Celý příkaz bude vypadat takto: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} +

{{ 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. + +{% 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 %} + +OK, teď můžeme aktualizovat naše stránky a uvidíš, jestli `Page Not Found` je pryč. + +![Post detail page][7] + + [7]: images/post_detail2.png + +Hurá! Funguje to! + +## Ještě jedna věc: čas nasadit aplikaci! + +Bylo by dobré zjistit, jestli naše webové stránky budou stále fungovat na PythonAnywhere. Zkusme je znovu nasadit. + +``` +$ 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 +``` + +* Pak v [Bash konzoli PythonAnywhere][8]: + + [8]: https://www.pythonanywhere.com/consoles/ + +``` +$ cd my-first-blog +$ source myvenv/bin/activate +(myvenv)$ git pull +[...] +(myvenv)$ python manage.py collectstatic +[...] +``` + +* Nakonec jdi na [kartu Web][9] a klikni na **Reload**. + + [9]: https://www.pythonanywhere.com/web_app_setup/ + +A mělo by to být! Gratulujeme :) diff --git a/cs/extend_your_application/images/404_2.png b/cs/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/cs/extend_your_application/images/404_2.png differ diff --git a/cs/extend_your_application/images/attribute_error2.png b/cs/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..33a3b36b1d3 Binary files /dev/null and b/cs/extend_your_application/images/attribute_error2.png differ diff --git a/cs/extend_your_application/images/does_not_exist2.png b/cs/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/cs/extend_your_application/images/does_not_exist2.png differ diff --git a/cs/extend_your_application/images/no_reverse_match2.png b/cs/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/cs/extend_your_application/images/no_reverse_match2.png differ diff --git a/cs/extend_your_application/images/post_detail2.png b/cs/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/cs/extend_your_application/images/post_detail2.png differ diff --git a/cs/extend_your_application/images/post_list2.png b/cs/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/cs/extend_your_application/images/post_list2.png differ diff --git a/cs/extend_your_application/images/template_does_not_exist2.png b/cs/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/cs/extend_your_application/images/template_does_not_exist2.png differ diff --git a/cs/how_the_internet_works/README.md b/cs/how_the_internet_works/README.md new file mode 100755 index 00000000000..3543d4bd56a --- /dev/null +++ b/cs/how_the_internet_works/README.md @@ -0,0 +1,53 @@ +# 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/). + +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`? + +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. + +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š. + +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. + +OK, ale chceš vědět jak internet vypadá, že ano? + +Nakreslili jsme pro tebe obrázek! Vypadá takhle: + +![Figure 1.1][1] + + [1]: images/internet_1.png + +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][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. + +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!" + +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. + +![Figure 1.4][4] + + [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ý! + +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. + +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). + +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ů :). + +Dost řečí, je čas tvořit! diff --git a/cs/how_the_internet_works/images/internet_1.png b/cs/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/cs/how_the_internet_works/images/internet_1.png differ diff --git a/cs/how_the_internet_works/images/internet_2.png b/cs/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/cs/how_the_internet_works/images/internet_2.png differ diff --git a/cs/how_the_internet_works/images/internet_3.png b/cs/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/cs/how_the_internet_works/images/internet_3.png differ diff --git a/cs/how_the_internet_works/images/internet_4.png b/cs/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/cs/how_the_internet_works/images/internet_4.png differ diff --git a/cs/html/README.md b/cs/html/README.md new file mode 100755 index 00000000000..929acd7ff9b --- /dev/null +++ b/cs/html/README.md @@ -0,0 +1,216 @@ +# Úvod do HTML + +Co je to šablona? + +Š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. + +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**). + +## 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 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). + +## Tvá první šablona! + +Vytvoření šablony znamená vytvoření souboru šablony. Všechno je soubor, ž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 +``` + +(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ší.) + +A teď vytvoř soubor `post_list.html` uvnitř adresáře `blog/templates/blog`. Prozatím ho nech prázdný. + +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`. + +![Figure 11.1][1] + + [1]: images/step1.png + +Žá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. + +Do souboru šablony (template) přidej následující: + +```html + +

Ahoj!

+

Funguje to!

+ +``` + +Tak jak tvá stránka vypadá teď? Klikni a zjisti to: http://127.0.0.1:8000/ + +![Figure 11.2][2] + + [2]: images/step3.png + +Fungovalo to! Pěkná práce :) + +* 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 & body + +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. + +* **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 řekli, co na té stránce skutečně je. + +Například dovnitř `` můžeš dát element title (titulek), třeba takhle: + +```html + + + Ola's blog + + +

Ahoj!

+

Funguje to!

+ + +``` + +Ulož soubor a načti znovu svou stránku. + +![Figure 11.3][3] + + [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ř). + +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ě. + +## 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: + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

Můj první 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, 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.

+
+ + +``` + +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. + +To nám dá následující výsledek: + +![Figure 11.4][4] + + [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**. + +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. + +## 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): + +### Commitni a hoď svůj kód na 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): + +``` +$ git status +``` + +Ujisti se, že jsi v `djangogirls` adresáři a řekni `gitu`, ať zahrne všechny nové změny v adresáři: + +``` +$ git add --all . +``` + +> **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ář. + +Než nahrajeme všechny soubory, zkontrolujme, co bude `git` nahrávat (všechny soubory, které bude `git` nahrávat, se zobrazí zeleně): + +``` +$ git status +``` + +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. + +``` +$ git commit -m "Změněn HTML kód stránek." +``` + +> **Poznámka** Ujisti se, že používáš dvojité uvozovky kolem zprávy. + +Jakmile jsme s tímto hotovy, nahrajeme (push) naše změny na GitHub: + +``` +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: + + [5]: https://www.pythonanywhere.com/consoles/ + +``` +$ cd ~/my-first-blog +$ source myvenv/bin/activate +(myvenv)$ git pull +[...] +(myvenv)$ python manage.py collectstatic +[...] +``` + +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. + +* A konečně, skoč na záložku [Web][6] a klikni na **Reload** (Znovu načíst). + + [6]: https://www.pythonanywhere.com/web_app_setup/ + +Tvůj update by měl běžet živě! Obnov svou stránku v prohlížeči. Měla bys vidět změny :) diff --git a/cs/html/images/step1.png b/cs/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/cs/html/images/step1.png differ diff --git a/cs/html/images/step3.png b/cs/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/cs/html/images/step3.png differ diff --git a/cs/html/images/step4.png b/cs/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/cs/html/images/step4.png differ diff --git a/cs/html/images/step6.png b/cs/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/cs/html/images/step6.png differ diff --git a/cs/images/application.png b/cs/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/cs/images/application.png differ diff --git a/cs/installation/README.md b/cs/installation/README.md new file mode 100755 index 00000000000..cdd38b9c502 --- /dev/null +++ b/cs/installation/README.md @@ -0,0 +1,49 @@ +# 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). + +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. + +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. + +Hodně štěstí! + +# Instalace + +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. + +# Instalace Pythonu + +{% include "/python_installation/instructions.md" %} + +# Nastavení virtualenv a instalace Django + +{% include "/django_installation/instructions.md" %} + +# Instalace editoru kódu + +{% include "/code_editor/instructions.md" %} + +# Instalace Git + +{% include "/deploy/install_git.md" %} + +# Vytvoření účtu na GitHub + +Přejděte na [GitHub.com](https://www.github.com) a vytvořte si zdarma uživatelský účet. + +# Vytvoření účtu PythonAnywhere + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Začni číst + +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: + + * [Jak funguje internet](../how_the_internet_works/README.md) + + * [Úvod do příkazového řádku](../intro_to_command_line/README.md) + + * [Úvod do Pythonu](../python_introduction/README.md) + + * [Co je Django?](../django/README.md) diff --git a/cs/intro_to_command_line/README.md b/cs/intro_to_command_line/README.md new file mode 100755 index 00000000000..e736738bc1b --- /dev/null +++ b/cs/intro_to_command_line/README.md @@ -0,0 +1,305 @@ +# Ú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 :) + +**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. + +## 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*. + +## Otevři rozhraní příkazové řádky + +Chceš-li začít experimentovat, je třeba nejprve otevřít naše rozhraní příkazové řádky. + +### Windows + +Jdi na menu Start → Všechny programy → Příslušenství → Příkazová řádka. + +### macOS + +Aplikace → Nástroje → Terminál. + +### Linux + +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 :) + +## Příkazová řádka + +Nyní bys měla vidět bílé nebo černé okno, které čeká na tvé příkazy. + +Pokud jsi na Mac nebo na Linuxu, pravděpodobně uvidíš výzvu začínající tímto znakem `$`, právě takhle: + +``` +$ +``` + +V systému Windows je to tento znak `>`: + +``` +> +``` + +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 :) + +> 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. + +## Tvůj první příkaz (hurá!) + +Pojďme začít s něčím jednoduchým. Zadej tento příkaz: + +``` +$ whoami +``` + +nebo + +``` +> whoami +``` + +A zmáčkni `enter`. Tohle je výsledek: + +``` +$ whoami +olasitarska +``` + +Jak vidíš, počítač právě vypsal tvé uživatelské jméno. Pěkný, co?:) + +> Zkus každý příkaz zadat, nekopíruj ho prostým vyjmout/vložit. Zapamatuješ si tak více! + +## 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? + +### 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`: + +``` +$ pwd +/Users/olasitarska +``` + +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. + +> Poznámka: 'pwd' je zkratka pro "print working directory / zobrazení cesty pro pracovní adresář". + +* * * + +### Seznam souborů a adresářů + +Tak co je v něm? Bylo by fajn zjistit, co je v našem adresáři. Podívejme se: + +``` +$ 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 +... +``` + +* * * + +### Změna aktuálního adresáře + +Teď pojďme do adresáře plochy: + +``` +$ cd Desktop +``` + +Windows: + +``` +> cd Desktop +``` + +Zkontroluj, zda-li se adresář skutečně změnil: + +``` +$ pwd +/Users/olasitarska/Desktop +``` + +Windows: + +``` +> cd +C:\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í. + +* * * + +### Jak vytvořit složku + +Co si vytvořit pokusnou složku na ploše? Můžeš to udělat tímto způsobem: + +``` +$ mkdir pokus +``` + +Windows: + +``` +> 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. + +* * * + +### Cvičení! + +Malá výzva: v nově vytvořeném adresáři `pokus` vytvoř adresář s názvem `test`. Použij příkazy `cd` a `mkdir`. + +#### Řešení: + +``` +$ cd pokus +$ mkdir test +$ ls +test +``` + +Windows: + +``` +> cd pokus +> mkdir test +> dir +05/08/2014 07:28 PM test +``` + +Gratulujeme! :) + +* * * + +### Jak odstranit složku + +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. + +Za prvé se potřebujeme dostat zpátky na plochu: + +``` +$ cd .. +``` + +Windows: + +``` +> 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 +``` + +Windows: + +``` +> cd +C:\Users\olasitarska\Desktop +``` + +Teď je čas vymazat adresář `pokus`: + +> **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á. + +``` +$ rm -r pokus +``` + +Windows: + +``` +> rmdir /S pokus +Are you sure ? Y +``` + +Hotovo! Vše je skutečně odstraněno. Pojďme to zkontrolovat: + +``` +$ ls +``` + +Windows: + +``` +> dir +``` + +### 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? :) + +``` +$ exit +``` + +Windows: + +``` +> exit +``` + +Suprový, co? :) + +## Shrnutí + +Zde je přehled některých užitečných příkazů: + +| 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** | + +Toto je jen velmi malá část příkazů, které lze spustit v příkazovém řádku, ale pro dnešek to bude stačit. + +Pokud jsi zvědavá, na [ss64.com][1] je úplný přehled příkazů pro všechny operační systémy. + + [1]: http://ss64.com + +## Připravena? + +Pojďme se ponořit do Pythonu! diff --git a/cs/python_installation/README.md b/cs/python_installation/README.md new file mode 100755 index 00000000000..42f150debad --- /dev/null +++ b/cs/python_installation/README.md @@ -0,0 +1,13 @@ +# Začněme s Pythonem + +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. + +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ý! + +# 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! + +{% include "/python_installation/instructions.md" %} diff --git a/cs/python_installation/images/add_python_to_windows_path.png b/cs/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/cs/python_installation/images/add_python_to_windows_path.png differ diff --git a/cs/python_installation/instructions.md b/cs/python_installation/instructions.md new file mode 100755 index 00000000000..316d6845eab --- /dev/null +++ b/cs/python_installation/instructions.md @@ -0,0 +1,64 @@ +> Tato podkapitola čerpá z 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. + +### Windows + +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": + +![Nezapomeň přidat Python do cesty](../python_installation/images/add_python_to_windows_path.png) + +### Linux + +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: + +``` +$ python3 --version +Python 3.4.2 +``` + +Pokud Python nemáš nainstalovaný nebo pokud chceš nainstalovat jinou verzi, můžeš postupovat takto: + +#### Debian nebo Ubuntu + +Použij tento příkaz v konzoli: + +``` +sudo apt install python3.4 +``` + +#### Fedora + +Použij tento příkaz v konzoli: + +``` +$ sudo dnf nainstalovat python3.4 +``` + +#### openSUSE + +Použij tento příkaz v konzoli: + +``` +$ sudo zypper install python3 +``` + +### macOS + +Musíš jít na web https://www.python.org/downloads/release/python-342/ a stáhnout si instalátor Python: + + * Stáhni *macOS 64-bit/32-bit installer* soubor, + * Poklepej na *python-3.4.3-macosx10.6.pkg*, chceš-li spustit instalační program. + +Ověř, zda instalace proběhla úspěšně, otevři aplikaci *Terminal* a spusť příkaz `python3`: + +``` +$ python3 – version +Python 3.4.2 +``` + +* * * + +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. diff --git a/cs/python_introduction/README.md b/cs/python_introduction/README.md new file mode 100755 index 00000000000..6a197344f9d --- /dev/null +++ b/cs/python_introduction/README.md @@ -0,0 +1,847 @@ +# Úvod do Pythonu + +> Část této kapitoly je založena na kurzu Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Pojďme napsat nějaký kód! + +## Interaktivní režim Pythonu + +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]. + + [1]: ../intro_to_command_line/README.md + +Jakmile budeš připravena, postupuj podle níže uvedených pokynů. + +Chceme otevřít Python konzoli, takže napiš `python` na Windows nebo `python3` na Mac a OS/Linuxu a zmáčkni `enter`. + +``` +$ python3 +Python 3.4.3 (...) +Type "help", "copyright", "credits" or "license" for more information. +>>> +``` + +## Tvůj první příkaz v Pythonu! + +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. + +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íš `>>>`. + +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`. + +``` +>>> 2 + 3 +5 +``` + +Hezké! Vidíš, jak se zobrazila odpověď? Python umí matematiku! Můžeš zkusit jiné příkazy typu: `4 * 5` ; `5-1` ; `40 / 2` + +Chvíli si s tím hraj a pak se sem vrať zpátky :). + +Jak vidíš, Python je skvělá kalkulačka. Pokud tě zajímá, co jiného můžeš dělat... + +## Řetězce + +A co tvé jméno? Zadej své jméno do uvozovek, jak vidíš níže: + +``` +>>> "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. + +Řetězce mohou být spojovány. Zkus toto: + +``` +>>> "Ahoj " + "Ola" +'Ahoj Ola' +``` + +Také můžeš násobit řetězce s číslem: + +``` +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Pokud budeš chtít dát apostrof dovnitř svého řetězce, máš dvě možnosti, jak to udělat. + +Pomocí dvojité uvozovky: + +``` +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +nebo použít escape sekvenci - před apostrof napsat zpětné lomítko (\`): + +``` +>>> '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: + +``` +>>> "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áš. + +Pokud chceš znát počet písmen ve svém jméně, tak pro to má Python také funkci! + +``` +>>> 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`. + +### Shrnutí + +OK, dost bylo řetězců. Co ses zatím naučila: + +* **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ů. + +To jsou základy každého programovacího jazyka. Připravena na něco dalšího? Vsadíme se, že ano! + +## Chyby + +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`: + +``` +>>> len(304023) +Traceback (most recent call last): +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? + +``` +>>> len(str(304023)) +6 +``` + +Funguje to! Použili jsme funkci `str` uvnitř funkce `len`. `str()` vše převádí na řetězec. + +* 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')`? + +## Proměnné + +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. + +Řekněme, že chceme vytvořit novou proměnnou s názvem `name`: + +``` +>>> name = "Ola" +``` + +Vidíš? Je to snadné! Jednoduše napíšeš: name se rovná 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`: + +``` +>>> name +'Ola' +``` + +Hurá! První proměnná :)! Kdykoli můžeš změnit to, na co daná proměnná ukazuje: + +``` +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Můžeš ji také použít ve funkcích: + +``` +>>> len(name) +5 +``` + +Super, ne? Samozřejmě proměnná může obsahovat cokoliv, například také čísla! Zkus tohle: + +``` +>>> 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! + +``` +>>> city = "Tokyo" +>>> ctiy +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ě. + +Chvilku si s tím, ať vidíš, co se s tím dá dělat! + +## Funkce print + +Zkus toto: + +``` +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +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. + +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. + +## Seznamy + +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ů :) + +Nestyď se a vytvoř seznam: + +``` +>>> [] +[] +``` + +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é: + +``` +>>> 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íš! + +``` +>>> 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: + +``` +>>> 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: + +``` +>>> 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! + +Můžeme také zkusit obrátit pořadí? Udělejme to! + +``` +>>> 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: + +``` +>>> 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: + +``` +>>> 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. + +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. + +``` +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +>>> print(lottery[0]) +59 +>>> lottery.pop(0) +>>> print(lottery) +[42, 30, 19, 12, 3, 199] +``` + +Funguje to všechno skvěle! + +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é? + +Seznam všech dostupných metod pro seznam nalezneš v této kapitole Python dokumentace: https://docs.python.org/3/tutorial/datastructures.html + +## Slovníky + +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: + +``` +>>> {} +{} +``` + +Vidíš, že jsi právě vytvořila prázdný slovník. Hurá! + +A teď zkus napsat následující příkaz (zkus nahradit vlastními informacemi): + +``` +>>> 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: + +* 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í: + +``` +>>> print(participant['name']) +Ola +``` + +Je to podobné seznamu. Ale není nutné si pamatovat index - jen jméno. + +Co se stane, když se zeptáme Pythonu na hodnotu klíče, který neexistuje? Zkus hádat! Pojďme to vyzkoušet a uvidíš! + +``` +>>> participant['age'] +Traceback (most recent call last): +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. + +* 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. + +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í: + +``` +>>> participant['favorite_language'] = 'Python' +``` + +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: + +``` +>>> len(participant) +4 +``` + +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. + +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: + +``` +>>> participant.pop('favorite_numbers') +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Jak vidíš, z výstupu byla odstraněna odpovídající dvojice klíč hodnota 'favorite_numbers'. + +Kromě toho můžeš také změnit hodnotu přidruženou k již vytvořenému klíči ve slovníku. Napiš: + +``` +>>> 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. + +### Shrnutí + +Skvělé! Nyní víš o programování hodně. V této poslední části jsi se naučila o: + +* **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 + +Jsi připravena na další část? + +## Porovnávání věcí + +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: + +``` +>>> 5 > 2 +True +>>> 3 < 1 +False >>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +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? + +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. + +Dejme Pythonu dva další úkoly: + +``` +>>> 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: + +* 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: + +``` +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Pythonu můžeš dát porovnat tolik čísel kolik chceš a na vše ti dá odpověď! Je docela chytrý, že? + +* **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ý + +Už jsi někdy slyšela výraz "srovnávat jablka a hrušky"? Zkusme v Pythonu ekvivalent: + +``` +>>> 1 > 'django' +Traceback (most recent call last): +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ě. + +## Logic hodnoty/Booleany + +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. + +Existují pouze dva logické objekty: - True - False + +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.) + +Pravdivostní hodnoty mohou být také v proměnné! Viz zde: + +``` +>>> a = True +>>> a +True +``` + +Rovněž to můžete provést takto: + +``` +>>> a = 2 > 5 +>>> a +False +``` + +Zkoušej a bav se s logickými hodnotami. Zkus spustit následující příkazy: + +* `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! + +# 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: + +* 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! + +Chceš-li opustit interaktivní režim Pythonu, který jsme dosud používaly, jednoduše zadejte ~ ~ ~ exit() ~ ~ ~ funkci: + +``` +>>> exit() +$ +``` + +Tak se dostaneš zpět do příkazové řádky. + +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: + + [2]: ../code_editor/README.md + +```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 :) + +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. + +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. + +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. + +Na Macu bude příkaz vypadat přibližně takto: + +``` +$ cd ~/Desktop +``` + +Na Linuxu to bude vypadat takto (slovo "Desktop" (Plocha) může být přeloženo do tvého jazyka): + +``` +$ cd ~/Desktop +``` + +A na Windows to bude vypadat takto: + +``` +> cd %HomePath%\Desktop +``` + +Pokud nevíš jak dál, stačí požádat o pomoc kouče. + +Nyní pomocí Pythonu spustíš kód v souboru takto: + +``` +$ 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ě? + +Nyní můžeme přejít k základním nástrojům pro programování: + +## If...elif...else + +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**. + +Nahraďte kód v souboru **python_intro.py** tímto: + +```python +if 3 > 2: +``` + +Pokud jsi soubor uložila a spustila, pravděpodobně uvidíš následující chybu: + +``` +$ 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 +if 3 > 2: + 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. + +Ulož a spusť: + +``` +$ python3 python_intro.py +It works! +``` + +### 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`: + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Pokud je výraz pravdivý, po spuštění se vytiskne: + +``` +$ python3 python_intro.py +5 is not greater than 2 +``` + +Kdyby 2 bylo větší než 5, spustil by se první příkaz. Jak snadné! Podívejme se, jak funguje `elif`: + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +a spusť: + +``` +$ 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ří. + +Můžeš po počátečním `if` přidat tolik `elif` příkazů, kolik se ti zlíbí. Například: + +```python +volume = 57 +if volume < 20: + print("Je to dost potichu.") +elif 20 <= volume < 40: + print("Jako hudba v pozadí dobré.") +elif 40 <= volume < 60: + print("Skvělé, slyším všechny detaily.") +elif 60 <= volume < 80: + print("Dobré na party.") +elif 80 <= volume < 100: + print("Trochu moc nahlas!") +else: + print("Krvácí mi uši!") +``` + +Python prochází a testuje každou položku v posloupnosti a vypíše: + +``` +$ python3 python_intro.py + Skvělé, slyším všechny detaily. +``` + +### Shrnutí + +V posledních třech cvičeních ses dozvěděla o: + +* **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. + +Čas na poslední část této kapitoly! + +## Vlastní funkce! + +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! + +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: + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Naše první funkce je připravena! + +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íš). + +Tak to teď zkus a uvidíš, co se stane: + +``` +$ python3 python_intro.py +Hi there! +How are you? +``` + +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í: + +```python +def hi(name): +``` + +Jak vidíš, nyní jsme přidaly naší funkci parametr, `name`: + +```python +def hi(name): + 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í: + +``` +$ 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' +``` + +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: + +```python +hi("Ola") +``` + +A znovu jej spusť: + +``` +$ python3 python_intro.py +Hi Ola! +``` + +A co když změníme jméno? + +```python +hi("Sonja") +``` + +Spustíme: + +``` +$ python3 python_intro.py +Hi Sonja! +``` + +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: + +``` +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! + +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? + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +Pojďme zavolat náš nový kód: + +``` +$ python3 python_intro.py +Hi Rachel! +``` + +Blahopřejeme! Právě ses naučila, jak psát funkce :) + +## Smyčky/Loops + +Nyní pojďme na poslední část. To bylo rychlé, co? :) + +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. + +Ještě si vzpomínáš na seznamy? Udělejme seznam dívek: + +```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: + +```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. + +Zde je celý kód, který umístíme do souboru: + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +A když ho spustíme: + +``` +$ python3 python_intro.py +Hi Rachel! +Next girl +Hi Monica! +Next girl +Hi Phoebe! +Next girl +Hi Ola! +Next girl +Hi You! +Next girl +``` + +Jak vidíš, vše, co jsi vložila dovnitř příkazu `for` s odsazením, se zopakuje pro každý prvek seznamu `girls`. + +Ve funkci `for` můžeš také použít čísla pomocí funkce `range`: + +```python +for i in range(1, 6): + print(i) +``` + +Což ti vypíše: + +``` +1 +2 +3 +4 +5 +``` + +`range` je funkce, která vytvoří seznam s posloupností čísel (tato čísla zadáváš jako parametry funkce). + +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í. + +## Shrnutí + +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! + +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. :) + +![Hrnek][3] + + [3]: images/cupcake.png diff --git a/cs/python_introduction/images/cupcake.png b/cs/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/cs/python_introduction/images/cupcake.png differ diff --git a/cs/template_extending/README.md b/cs/template_extending/README.md new file mode 100755 index 00000000000..184c85aa05b --- /dev/null +++ b/cs/template_extending/README.md @@ -0,0 +1,123 @@ +# 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. + +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é! + +## Vytvoření základní šablony + +Základní šablona je šablona, kterou použijeme 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 +``` + +Pak jej otevři a zkopíruj vše z `post_list.html` do `base.html` souboru, jako je to níže: + +```html +{% load staticfiles %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Pak v `base.html` nahraď celé `` (vše mezi `` a ``) tímto: + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +Nahradili jsme v podstatě všechno, co bylo mezi `{% for post in posts %}{% endfor %}`, za: + +```html +{% block content %} +{% endblock %} +``` + +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. + +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: + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +A teď přidej na začátek souboru tento řádek: + +```html +{% extends 'blog/base.html' %} +``` + +{% 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 %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +To je ono! Zkontroluj, zda tvoje stránky stále správně fungují :) + +> 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`. diff --git a/cs/whats_next/README.md b/cs/whats_next/README.md new file mode 100755 index 00000000000..5c52f3bfb88 --- /dev/null +++ b/cs/whats_next/README.md @@ -0,0 +1,40 @@ +# Co dál? + +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. + +Poté nezapomeň: + +* Sleduj Django Girls na [Facebooku][1] nebo [Twitteru][2] a zůstaň v obraze + + [1]: http://facebook.com/djangogirls + [2]: https://twitter.com/djangogirls + +### Můžete mi doporučit nějaké další zdroje? + +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 diff --git a/css/README.md b/css/README.md deleted file mode 100644 index ba16aa17f9d..00000000000 --- a/css/README.md +++ /dev/null @@ -1,250 +0,0 @@ -# CSS - make it pretty! - -Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS for that. - -## What is CSS? - -Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a website written in markup language (like HTML). Treat it as make-up for our webpage ;). - -But we don't want to start from scratch again, right? We will, once more, use something that has already been done by programmers and released on the Internet for free. You know, reinventing the wheel is no fun. - -## Let's use Bootstrap! - -Bootstrap is one of the most popular HTML and CSS frameworks for developing beautiful websites: http://getbootstrap.com/ - -It was written by programmers who worked for Twitter and is now developed by volunteers from all over the world. - -## Install Boostrap - -To install Bootstrap, you need to add this to your `` in your `.html` file (`blog/templates/blog/post_list.html`): - - - - - -This doesn't add any files to your project. It just points to files that exist on the internet. -Just go ahead, open your website and refresh the page. Here it is! - -![Figure 14.1](images/bootstrap1.png) - -Looking nicer already! - -## Static files in Django - -Another thing you will learn about today is called __static files__. Static files are all your CSS and images -- files that are not dynamic, so their content doesn't depend on request context and will be the same for every user. - -CSS is a static file, so in order to customize CSS, we need to first configure static files in Django. You'll only need to do it once. Let's start: - -### Configure static files in Django - -First, we need to create a directory to store our static files in. Go ahead and create a directory called `static` inside your `djangogirls` directory. - - static - manage.py - -Open up the `mysite/settings.py` file, scroll to the bottom of it and add the following lines: - - STATICFILES_DIRS = ( - os.path.join(BASE_DIR, "static"), - ) - -This way Django will know where to find your static files. - -## Your first CSS file! - -Let's create a CSS file now, to add your own style to your web-page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready? - - static - └───css - blog.css - -Time to write some CSS! Open up the `static/css/blog.css` file in your code editor. - -We won't be going too deep into customizing and learning about CSS here, because it's pretty easy and you can learn it on your own after this workshop. We really recommend doing this [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) to learn everything you need to know about making your websites more pretty with CSS. - -But let's do at least a little. Maybe we could change the color of our header? To understand colors, computers use special codes. They start with `#` and are followed by 6 letters (A-F) and numbers (0-9). You can find color codes for example here: http://www.colorpicker.com/. You may also use [predefined colors](http://www.w3schools.com/cssref/css_colornames.asp), such as `red` and `green`. - -In your `static/css/blog.css` file you should add following code: - - h1 a { - color: #FCA205; - } - -`h1 a` is a CSS Selector. Any `a` element inside of an `h1` element (i.e. when we have in code something like: `

link

`) is the tag we're applying our styles to, and we're telling it to change its color to `#FCA205`, which is orange. Of course, you can put your own color here! - -In a CSS file we determine styles for elements in the HTML file. The elements are identified by the element name (i.e. `a`, `h1`, `body`), the element class or the element id. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point to specific elements. For example, the following tag may be identified by CSS using the tag name `a`, the class `external_link`, or the id `link_to_wiki_page`: - - - -Read about [CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp). - -Then, we need to also tell our HTML template that we added some CSS. Open the `blog/templates/blog/post_list.html` file and add this line at the very beginning of it: - - {% load staticfiles %} - -We're just loading static files here :). Then, between the `` and ``, after the links to the Bootstrap CSS files (the browser reads the files in the order they're given, so code in our file may override code in Bootstrap files), add this line: - - - -We just told our template where our CSS file is located. Ok, save the file and refresh the site! - -Your file should now look like this: - - {% load staticfiles %} - - - Django Girls blog - - - - - - - - - {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text }}

-
- {% endfor %} - - - -![Figure 14.2](images/color2.png) - -Nice work! Maybe we would also like to give our website a little air and increase the margin on the left side? Let's try this! - - body { - padding-left: 15px; - } - -Add this to your CSS, save the file and see how it works! - -![Figure 14.3](images/margin2.png) - -Maybe we can customize the font in our header? Paste this into your `` in `blog/templates/blog/post_list.html` file: - - - -This line will import a font called *Lobster* from Google Fonts (https://www.google.com/fonts). - -Now add the line `font-family: 'Lobster';` in the CSS file `static/css/blog.css` inside the `h1 a` declaration block (the code between the braces `{` and `}`) and refresh the page: - - h1 a { - color: #FCA205; - font-family: 'Lobster'; - } - -![Figure 14.3](images/font.png) - -Great! - - -As mentioned above, CSS has a concept of classes, which basically allows you to name a part of the HTML code and apply styles only to this part, not affecting others. It's super helpful if you have two divs, but they're doing something very different (like your header and your post), so you don't want them to look the same. - -Go ahead and name some parts of the HTML code. Add a class called `page-header` to your `div` that contains your header, like this: - -
-

Django Girls Blog

-
- -And now add a class `post` to your `div` containing blogposts. - -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text }}

-
- -We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web to help you understand the following code. For now, just copy and paste it into your `mysite/static/css/blog.css` file: - - .page-header { - background-color: #ff9400; - margin-top: 0; - 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; - } - - .content { - margin-left: 40px; - } - - h1, h2, h3, h4 { - font-family: 'Lobster', cursive; - } - - .date { - float: right; - color: #828282; - } - - .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 { - margin-bottom: 70px; - } - - .post h1 a, .post h1 a:visited { - color: #000000; - } - -Then surround the HTML code which desplayes the posts with declarations of classes. Replace this: - - {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text }}

-
- {% endfor %} - -in the `blog/templates/blog/post_list.html` with this: - -
-
-
- {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text }}

-
- {% endfor %} -
-
-
- -Save those files and refresh your website. - -![Figure 14.4](images/final.png) - -Wohoo! Looks awesome, right? The code we just pasted is not really so hard to understand and you should be able to understand most of it just by reading it. - -Don't be afraid to tinker with this CSS a little bit and try to change some things. If you break something, don't worry, you can always undo it! - -Anyway, we really recommend taking this free online [Codeacademy HTML & CSS course](http://www.codecademy.com/tracks/web) as some post-workshop homework to learn everything you need to know about making your websites prettier with CSS. - -Ready for the next chapter?! :) - diff --git a/css/images/bootstrap1.png b/css/images/bootstrap1.png deleted file mode 100644 index f7e1f57536c..00000000000 Binary files a/css/images/bootstrap1.png and /dev/null differ diff --git a/css/images/color2.png b/css/images/color2.png deleted file mode 100644 index c191d399356..00000000000 Binary files a/css/images/color2.png and /dev/null differ diff --git a/css/images/final.png b/css/images/final.png deleted file mode 100644 index f90070b1aa5..00000000000 Binary files a/css/images/final.png and /dev/null differ diff --git a/css/images/font.png b/css/images/font.png deleted file mode 100644 index 8561bb1cb03..00000000000 Binary files a/css/images/font.png and /dev/null differ diff --git a/css/images/margin2.png b/css/images/margin2.png deleted file mode 100644 index 5ecba91ae54..00000000000 Binary files a/css/images/margin2.png and /dev/null differ diff --git a/database/README.md b/database/README.md deleted file mode 100644 index 6ec28381f63..00000000000 --- a/database/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# Database - -Most web applications have their own database. A database is a collection of data. This is a place in which you will store information about users, your blog posts, etc. - -We will be using a SQLite database to store our data. This is the default Django database adapter - but it's not good for production use. *Production* means out on the big, scary internet - running real websites accessed by more than a handful of users. If you want your application to be available to the world, not just running on your computer, you'll need PostgreSQL. diff --git a/de/GLOSSARY.md b/de/GLOSSARY.md new file mode 100644 index 00000000000..26a8c07100e --- /dev/null +++ b/de/GLOSSARY.md @@ -0,0 +1,3 @@ +# Code-Editor + +Ein Code-Editor ist eine Anwendung, die es dir erlaubt, deinen Code zu speichern, um später daran weiterzuarbeiten. Du kannst in dem [Code-Editor Kapitel](./code_editor/README.md) erfahren, woher du einen bekommst. \ No newline at end of file diff --git a/de/README.md b/de/README.md new file mode 100644 index 00000000000..db87ba0c460 --- /dev/null +++ b/de/README.md @@ -0,0 +1,51 @@ +# Django Girls Tutorial + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Dieses Werk ist unter der Creative Commons Attribution-ShareAlike 4.0 International License lizensiert. Eine Kopie dieser Lizenz finden Sie auf http://creativecommons.org/licenses/by-sa/4.0/ + +## Willkommen + +Willkommen beim Django Girls Tutorial! Wir freuen uns, dass du hier bist. :) In diesem Tutorial schauen wir gemeinsam unter die Haube der Technologien im Internet, geben dir einen Einblick in die Bits und Bytes, die zusammen das Internet bilden, wie wir es heute kennen. + +Wie alles Unbekannte wird das ein Abenteuer sein – aber keine Sorge: Da du bereits den Mut aufgebracht hast, hier zu sein, wirst du das schon meistern. :) + +## Einleitung + +Hattest du auch schon einmal das Gefühl, dass Technik in der Welt immer wichtiger wird und du da nicht ganz mithalten kannst? Wolltest du schon immer einmal eine Website bauen, aber hattest dann nicht genug Motivation, damit anzufangen? Hast du dir irgendwann schon einmal gedacht, dass die Computerwelt zu kompliziert für dich ist, so dass du noch nicht einmal den Versuch unternommen hast, dort selbst etwas zu tun? + +Dann haben wir hier gute Neuigkeiten für dich! Programmieren ist nicht so schwer, wie du denkst, und wir zeigen dir hier, wie viel Spaß es machen kann. + +Dieses Tutorial wird dich nicht auf zauberhafte Weise in eine Programmiererin verwandeln. Wenn du gut darin sein willst, brauchst du Monate oder sogar Jahre des Lernens und Übens. Aber wir wollen dir zeigen, dass Programmieren oder Webseitenerstellen nicht so kompliziert ist, wie es scheint. Wir versuchen, dir auf einfache Art verschiedene, kleine Teile zu zeigen, so dass du davon nicht eingeschüchtert wirst. + +Wir hoffen, dass du danach diese Technik und Technologien so sehr mögen wirst wie wir! + +## Was lernst du in diesem Tutorial? + +Wenn du mit dem Tutorial fertig bist, hast du eine einfache, aber funktionierende Webanwendung: deinen eigenen Blog. Wir zeigen dir, wie man ihn online stellt, andere können dein Werk also sehen! + +Es wird (in etwa) so aussehen: + +![Abbildung 0.1](images/application.png) + +> Wenn du allein mit diesem Tutorial arbeitest und keinen Coach in der Nähe hast, kannst du in diesem Chat nachfragen, wenn du ein Problem hast: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Wir haben unsere Coaches und frühere Teilnehmer unserer Workshops gebeten, hin und wieder dort vorbei zu schauen und anderen mit dem Tutorial zu helfen! Hab keine Angst, dort deine Fragen zu stellen! + +Okay, [lass uns ganz am Anfang starten...](./how_the_internet_works/README.md) + +## Das Tutorial daheim durcharbeiten + +An einem Django-Girls-Workshop teilzunehmen ist toll, aber uns ist klar, dass das nicht immer allen möglich ist. Darum wollen wir dich ermutigen, das Tutorial auch zu Hause zu erarbeiten. Für Leser zu Hause erstellen wir gerade Video-Tutorials, die es erleichtern sollen, diesem Tutorial zu folgen. Diese Arbeit ist noch nicht abgeschlossen, aber mehr und mehr Themen werden als Video erfasst und können im [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed)-YouTube-Kanal angesehen werden. + +In jedem Kapitel, das bereits mit Video unterstützt wird, gibt es einen Link auf das jeweilige Video dazu. + +## Über uns und wie du mithelfen kannst + +Dieses Tutorial wird von [DjangoGirls](https://djangogirls.org/) betreut. Solltest du Fehler finden oder das Tutorial aktualisieren wollen, dann folge den [Richtlinien zum Mitarbeiten](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Möchtest du uns helfen, das Tutorial in andere Sprachen zu übersetzen? + +Zur Zeit haben wir die Übersetzungen auf der crowdin.com Plattform: + +https://crowdin.com/project/django-girls-tutorial + +Sollte deine Sprache nicht aufgeführt sein, dann öffne ein neues [Issue](https://github.com/DjangoGirls/tutorial/issues/new), mit der betreffenden Sprache, dann können wir sie hinzufügen. \ No newline at end of file diff --git a/de/SUMMARY.md b/de/SUMMARY.md new file mode 100644 index 00000000000..28b069b3a29 --- /dev/null +++ b/de/SUMMARY.md @@ -0,0 +1,35 @@ +# Zusammenfassung + +* [Einleitung](README.md) +* [Installation](installation/README.md) + * [Kommandozeile](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Code-Editor](installation/README.md#code-editor) + * [Virtuelle Umgebung](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) +* [Wie das Internet funktioniert](how_the_internet_works/README.md) +* [Einführung in die Kommandozeile](intro_to_command_line/README.md) +* [Python-Installation](python_installation/README.md) +* [Der Code-Editor](code_editor/README.md) +* [Einführung in Python](python_introduction/README.md) +* [Django - Was ist das?](django/README.md) +* [Django-Installation](django_installation/README.md) +* [Dein erstes Django-Projekt!](django_start_project/README.md) +* [Django-Models](django_models/README.md) +* [Django-Administration](django_admin/README.md) +* [Veröffentlichen!](deploy/README.md) +* [Django-URLs](django_urls/README.md) +* [Django-Views - leg los!](django_views/README.md) +* [Einführung in HTML](html/README.md) +* [Django-ORM und QuerySets](django_orm/README.md) +* [Dynamische Daten in Templates](dynamic_data_in_templates/README.md) +* [Django-Templates](django_templates/README.md) +* [CSS - mach es hübsch!](css/README.md) +* [Erweiterung der Templates](template_extending/README.md) +* [Erweitere deine Anwendung](extend_your_application/README.md) +* [Django-Formulare](django_forms/README.md) +* [Wie geht es weiter?](whats_next/README.md) \ No newline at end of file diff --git a/de/chromebook_setup/README.md b/de/chromebook_setup/README.md new file mode 100644 index 00000000000..4e1c50d4085 --- /dev/null +++ b/de/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook-Installation + +> **Hinweis** Wenn du die [Installation bereits gemacht](../installation/README.md) hast, kannst du direkt zur [Einführung in Python](../python_introduction/README.md) gehen. + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/de/chromebook_setup/instructions.md b/de/chromebook_setup/instructions.md new file mode 100644 index 00000000000..990e3144929 --- /dev/null +++ b/de/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +Du kannst [diesen Abschnitt einfach](http://tutorial.djangogirls.org/en/installation/#install-python) überspringen, falls du kein Chromebook benutzt. Wenn du eins benutzt, wird deine Installation ein wenig anders sein. Du kannst den Rest der Installationsanweisungen ignorieren. + +### Cloud-IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Eine Cloud-IDE ist ein Werkzeug, dass dir einen Code-Editor und Zugang zu einem Rechner im Internet bereitstellt, auf dem du die Software installieren, anpassen und ausführen kannst. Für die Dauer des Tutorials wird Cloud IDE zu deinem *lokalen Rechner*. Auch du wirst Befehle in einer Kommandozeilen-Oberfläche ausführen können, genau wie die anderen Teilnehmerinnen, die mit macOS, Ubuntu oder Windows arbeiten. Dein Terminal wird jedoch mit einem Rechner verbunden sein, den Cloud IDE dir bereitstellt. Hier sind die Anleitungen für die Cloud-IDEs (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com). Wähle eine der Cloud-IDEs aus und folge den Anweisungen der gewählten Cloud IDE. + +#### PaizaCloud Cloud IDE + +1. Gehe zu [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Lege dir dort ein Benutzerkonto an +3. Klicke auf *New Server* und wähle die Django-App +4. Klicke auf die Schaltfläche "Terminal" (links im Browserfenster) + +Jetzt solltest du links eine Schnittstelle mit einer Seitenleiste und Schaltflächen sehen. Klicke auf den "Terminal"-Button und öffne das Terminal-Fenster mit einer Eingabeaufforderung wie folgt: + +{% filename %}browser{% endfilename %} + + $ + + +Das Terminal auf der PaizaCloud Cloud IDE steht für deine Anweisungen bereit. Du kannst die Größe des Fensters frei einstellen. + +#### AWS Cloud9 + +Zur Zeit verlangt Cloud 9, dass du dich mit AWS anmeldest und Kreditkarten-Informationen angibst. + +1. Installiere Cloud 9 aus dem [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Gehe zu [c9.io](https://c9.io) und klicke auf *Get started with AWS Cloud9* +3. Erstelle ein AWS-Benutzerkonto (benötigt Angabe der Kreditkarte, kann aber kostenlos verwendet werden) +4. Gib im AWS-Dashboard *Cloud9* in die Suchzeile ein und klicke es an +5. Klicke im Cloud-9-Dashboard *Create environment* an +6. Gib ihm den Namen *django-girls* +7. Wähle beim Konfigurieren der Einstellungen *Create a new instance for environment (EC2)* als "Environment Type" und den "Instance type" *t2.micro* ("Free-tier eligible." sollte angezeigt werden). Die Voreinstellung bzgl. "cost-saving" ist in Ordnung und auch die anderen Voreinstellungen kannst du belassen. +8. Klicke auf *Next step* +9. Klicke auf *Create environment* + +Jetzt solltest du eine Benutzeroberfläche mit Seitenleiste, ein grosses Fenster mit Text und am unteren Rand ein Feld sehen, das wie folgt aussieht: + +{% filename %}bash{% endfilename %} + + deinbenutzername:~/workspace $ + + +Dieser untere Bereich ist dein Terminal. Dort kannst du Kommandos für den Computer eingeben, den dir Cloud 9 zur Verfügung stellt. Du kannst dieses Fenster vergrößern oder verkleinern. + +#### Glitch.com Cloud-IDE + +1. Gehe auf [Glitch.com](https://glitch.com/) +2. Melde dich für einen Account an (https://glitch.com/signup) oder nutze deinen GitHub-Account, falls du einen hast. (Siehe GitHub-Anweisungen unten.) +3. Klicke auf *Neues Projekt* und wähle *hello-webpage* +4. Klicke auf die Dropdown-Liste Tools (unten links im Fenster) und dann auf den Knopf Terminal, um einen Kommandozeilen-Tab mit einem Prompt wie dem folgenden zu öffnen: + +{% filename %}Terminal{% endfilename %} + + app@name-deines-glitch-projects:~ + + +Wenn du Glitch.com als Cloud-IDE verwendest, musst du keine virtuelle Umgebung erstellen. Erstelle stattdessen die folgenden Dateien manuell: + +{% 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 +``` + +Gehe nach dem Erstellen der Dateien zum Terminal und führe die folgenden Befehle aus, um dein erstes Django-Projekt zu erstellen: + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +Um detaillierte Fehlermeldungen zu sehen, kannst du Django Debug-Logs für deine Glitch-Anwendung aktivieren. Füge einfach folgendes am Ende der Datei `mysite/settings.py` hinzu. + +{% 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, + }, + }, +} +``` + +Dadurch wird eine Datei namens `debug.log` erzeugt, die aufgetretene Django-Operationen und Fehlermeldungen detailliert aufgeführen wird, was die Fehlersuche und -behebung sehr erleichtern kann, wenn deine Website nicht funktioniert. + +Der erste Neustart des Glitch-Projekts sollte fehlschlagen. (Wenn du auf die oberste Dropdown-Schaltfläche `Show` klickst und dann auf `In a New Window`, erhältst du die Fehlermeldung `DisallowedHost`.) Mach dir jetzt keine Sorgen darüber. Das Tutorial wird dies beheben, sobald du die Django-Einstellungen deines Projekts in der Datei `mysite/settings.py` aktualisierst + +### Virtuelle Umgebung + +Eine virtuelle Umgebung (auch virtualenv genannt) ist wie ein privater Behälter, in den wir nützlichen Code für ein Projekt packen können, an dem wir arbeiten. Wir benutzen sie, um Code für verschiedene Projekte getrennt aufzubewahren, damit dieser nicht vermischt wird. + +Führe Folgendes aus: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(Beachte, dass wir im letzten Befehl eine Tilde gefolgt von einem Gleichheitssymbol benutzen: `~=`). + +### GitHub + +Erstelle einen [GitHub](https://github.com)-Account. + +### PythonAnywhere + +Das Django Girls-Tutorial enthält ein Kapitel zum Thema Deployment. Beim Deployment nimmst du den Code, der deiner Web-Anwendung zu Grunde liegt, und packst ihn auf einen öffentlich zugänglichen Computer (Server), damit auch andere Leute deine Arbeit sehen können. + +Es mag seltsam scheinen, das auf einem Chromebook zu tun. Denn wir sind mit Cloud 9 ja bereits auf einem anderen Computer im Internet (anstatt z.B. auf einem lokalen Laptop). Es ist aber trotzdem sinnvoll, denn wir können uns unseren Cloud-9-Arbeitsplatz als Ort für "Dinge in Arbeit" vorstellen und PythonAnywhere als Ort, wo wir unser "fertiges" Projekt der Öffentlichkeit zeigen. + +Melde dich deshalb auf [www.pythonanywhere.com](https://www.pythonanywhere.com) für ein PythonAnywhere-Benutzerkonto an. \ No newline at end of file diff --git a/de/code_editor/README.md b/de/code_editor/README.md new file mode 100644 index 00000000000..9ff0e2c9c79 --- /dev/null +++ b/de/code_editor/README.md @@ -0,0 +1,11 @@ +# Der Code-Editor + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) behandelt. + +Gleich geht's los! Du wirst deine erste Zeile Programmcode schreiben! Daher ist es jetzt an der Zeit, einen entsprechenden Editor herunterzuladen! + +> **Hinweis** Wenn du ein Chromebook benutzt, dann überspringe dieses Kapitel und folge den [Chromebook Installations](../chromebook_setup/README.md)-Anweisungen. Deine Cloud-IDE (PaizaCloud Cloud IDE oder AWS Cloud9) enthält einen Code-Editor und wenn du eine Datei in deiner Entwicklungsumgebung öffnest, wirst du automatisch den Editor benutzen. +> +> **Hinweis:** Es kann sein, dass du diesen Schritt bereits im [Kapitel "Installation"](../installation/README.md) erledigt hast. In diesem Fall kannst du direkt zum nächsten Kapitel übergehen! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/de/code_editor/instructions.md b/de/code_editor/instructions.md new file mode 100644 index 00000000000..82af5539f5b --- /dev/null +++ b/de/code_editor/instructions.md @@ -0,0 +1,37 @@ +Es gibt viele verschiedene Editoren. Welcher für dich am besten ist, ist weitestgehend Geschmackssache. Die meisten Python-Programmiererinnen verwenden komplexe, aber extrem leistungsfähige IDEs (Integrated Development Environments), z. B. PyCharm. Für Anfängerinnen sind diese jedoch weniger gut geeignet. Unsere Empfehlungen sind ebenso leistungsfähig, aber viel einfacher zu bedienen. + +Unsere Vorschläge siehst du unten. Aber fühl dich ganz frei, deine Trainerin zu fragen, was ihre Vorlieben sind - wenn sie sich mit dem Editor auskennt, wird es leichter sein, Hilfe zu erhalten. + +## Visual Studio Code + +Visual Studio Code ist ein von Microsoft entwickelter Quellcode-Editor für Windows, Linux und Mac. Es enthält Unterstützung für Debugging, eingebaute Git-Steuerung, Syntax-Highlighting, intelligente Code-Vervollständigung, Snippets und Code-Refactoring. + +[Du kannst ihn hier herunterladen](https://code.visualstudio.com/) + +## Gedit + +Gedit ist ein kostenloser Open-Source-Editor. Es gibt ihn für alle Betriebssysteme. + +[Du kannst ihn hier herunterladen](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text ist ein sehr beliebter Editor, nutzbar für einen kostenlosen Testzeitraum. Er ist einfach zu installieren und zu verwenden, und er ist für alle Betriebssysteme verfügbar. + +[Du kannst ihn hier herunterladen](https://www.sublimetext.com/) + +## Atom + +Atom ist ein weiterer beliebter Editor. Er ist gratis, Open-Source und für Windows, macOS und Linux verfügbar. Atom wird von [GitHub](https://github.com/) entwickelt. + +[Du kannst ihn hier herunterladen](https://atom.io/) + +## Warum installieren wir einen Code-Editor? + +Vielleicht wunderst du dich, warum wir so spezielle Code-Editor-Software installieren, statt einfach etwas wie Word oder Notepad zu benutzen. + +Erstens muss Code "plain text" (unformatierter Text) sein. Das Problem mit Programmen wie Word und Textedit ist, dass sie nicht "plain text" sondern "rich text" (mit Schriftarten und Formatierungen) produzieren und besondere Formate wie RTF (Rich Text Format) verwenden. + +Ein weiterer Grund ist, dass Code-Editoren (bisweilen auch Programmier- oder Text-Editoren genannt) auf das Bearbeiten von Programm-Code spezialisiert sind und Funktionen aufweisen, die normale Textverarbeitungen nicht haben. Beispielsweise sogenanntes "Syntax-Highlighting", also farbliches Hervorheben bestimmter Code-Stellen, oder auch das automatische Schließen von Klammern und vieles mehr. + +Einiges davon werden wir später in Aktion sehen. Glaub uns: es wird nicht lange dauern, bis du deinen Code-Editor nicht mehr missen möchtest. :) diff --git a/de/css/README.md b/de/css/README.md new file mode 100644 index 00000000000..f439d56e9e9 --- /dev/null +++ b/de/css/README.md @@ -0,0 +1,330 @@ +# CSS - mach es hübsch! + +Unser Blog sieht immer noch ziemlich unfertig aus, oder? Zeit, das zu ändern! Dafür nutzen wir CSS. + +## Was ist CSS? + +Cascading Style Sheets (CSS) ist eine Sprache, die das Aussehen und die Formatierung einer Website beschreibt. Es handelt sich wie bei HTML um eine Auszeichnungssprache (Markup Language). Sie ist sowas wie das "Make-up" unserer Website. ;) + +Aber wir wollen nicht nochmal bei Null anfangen, oder? Einmal mehr werden wir etwas verwenden, dass ProgrammiererInnen entwickelt haben und gratis im Internet zur Verfügung stellen. Wir wollen ja nicht das Rad neu erfinden. + +## Lass uns Bootstrap verwenden! + +Bootstrap ist eines der bekanntesten HTML- und CSS-Frameworks für die Entwicklung von schönen Webseiten: https://getbootstrap.com/ + +Es wurde ursprünglich von ProgrammiererInnen bei Twitter geschrieben. Heute wird es von Freiwilligen aus der ganzen Welt weiterentwickelt! + +## Bootstrap installieren + +Öffne deine `.html`-Datei in deinem Code-Editor und füge Folgendes zum ``-Abschnitt hinzu, um Bootstrap zu installieren: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Dadurch werden deinem Projekt keine Dateien hinzugefügt. Der Code verweist nur auf Dateien, die im Internet vorhanden sind. Öffne und aktualisiere also deine Webseite. Da ist sie! + +![Abbildung 14.1](images/bootstrap1.png) + +Sie sieht jetzt schon viel schöner aus! + +## Statische Dateien in Django + +Endlich werden wir einen genaueren Blick auf die Dinge werfen, die wir bisher **statische Dateien** genannt haben. Statische Dateien sind alle deine CSS- und Bilddateien. Ihr Inhalt hängt nicht vom Requestkontext ab, sondern gilt für alle Benutzer gleichermaßen. + +### Wohin kommen die statischen Dateien für Django + +Django weiss schon, wo die statischen Dateien für die integrierte "admin"-App zu finden sind. Wir müssen noch die statischen Dateien für unsere `blog`-App hinzufügen. + +Dies tun wir, indem wir einen Ordner namens `static` in der Blog-App erstellen: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Django findet automatisch alle Ordner mit dem Namen "static" in all unseren App-Ordnern. So ist es in der Lage, ihre Inhalte als statische Dateien zu nutzen. + +## Deine erste CSS-Datei! + +Erstellen wir nun eine CSS-Datei, um deiner Website deinen eigenen Stil zu verleihen. Erstelle ein neues Verzeichnis namens `css` in deinem `static`-Verzeichnis. Dann erstelle eine neue Datei namens `blog.css` in diesem `css`-Verzeichnis. Fertig? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Zeit, ein wenig CSS zu schreiben! Öffne die `blog/static/css/blog.css` Datei in Deinem Code-Editor. + +Wir gehen nicht zu sehr auf die Details von CSS ein. Für diejenigen, die mehr über CSS lernen möchten, haben wir am Ende des Kapitels einen Link auf eine Empfehlung für einen kostenlosen CSS-Kurs angefügt. + +Aber lass uns wenigstens etwas Kleines probieren. Beispielsweise könnten wir die Farbe unserer Kopfzeile ändern. Computer benutzen spezielle Codes, um Farben zu verstehen. Diese Codes starten immer mit `#`, danach folgen sechs Buchstaben (A-F) und Zahlen (0-9). Blau zum Beispiel ist `#0000FF`. Beispiele für solche Farbcodes findest du hier: http://www.colorpicker.com/. Du kannst auch [vordefinierte Farben](http://www.w3schools.com/colors/colors_names.asp) wie `red` und `green` benutzen. + +In deiner `blog/static/css/blog.css` Datei änderst du den folgenden Code: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` ist ein CSS-Selektor. Das bedeutet, dass wir für ein `a`-Element innerhalb eines `h1`-Elements einen Style hinzufügen; der `h2 a`-Selektor macht das selbe für `h2`-Elemente. Wenn wir also etwas haben wie: `

link

` wird der `h1 a` Style angewandt. In diesem Fall sagen wir, dass die Farbe in `#C25100` geändert werden soll. Das ist ein dunkles Orange. Du kannst hier auch deine eigene Farbe verwenden, aber stelle sicher, dass sie einen guten Kontrast zum weißen Hintergrund hat! + +In einer CSS-Datei werden Stile für Elemente der HTML-Datei festgelegt. Ein Weg, HTML-Elemente zu identifizieren, ist der Name des Elements. Du erinnerst dich vielleicht an diese Namen, die wir als 'Tags' im HTML Kapitel bezeichnet haben. Zum Beispiel sind `a`, `h1` und `body` solche Elementnamen. Wir identifizieren Elemente auch über die Attribute `class` oder `id`. Klassen (`class`) und IDs (`id`) sind Namen, die du den Elementen selbst gibst. Klassen definieren dabei Gruppen von Elementen und IDs verweisen auf bestimmte Elemente. Du könntest zum Beispiel das folgende Element anhand des Elementnamens `a`, anhand der Klasse `external_link` oder anhand der ID `link_to_wiki_page` identifizieren: + +```html + +``` + +[Auf w3schools](http://www.w3schools.com/cssref/css_selectors.asp) erfährst du mehr über CSS-Selektoren. + +Wir müssen der HTML-Vorlage noch sagen, dass wir CSS eingefügt haben. Öffne die Datei `blog/templates/blog/post_list.html` im Code-Editor und füge diese Zeile ganz oben ein: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Wir laden hier die statischen Dateien. :) Füge zwischen den Tags `` und ``, direkt nach den Links zu den Bootstrap-Dateien, noch diese Zeile ein: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Der Browser liest die Dateien in der Reihenfolge, in der sie aufgeschrieben wurden. Darum müssen wir sicherstellen, dass die Zeile am richtigen Ort steht. Sonst könnte der Code der Bootstrap-Dateien den Code aus unserer Datei überschreiben. Wir haben also unserem Template gerade gesagt, wo sich die CSS-Datei befindet. + +Deine Datei sollte jetzt so aussehen: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +OK, speichere die Datei und lade die Seite neu! + +![Abbildung 14.2](images/color2.png) + +Gut gemacht! Vielleicht wollen wir unserer Webseite etwas mehr Luft geben, indem wir den Abstand auf der linken Seite vergrößern? Probieren wir es aus! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Füge dies zu deinem CSS hinzu, speichere die Datei und schau dir an, was passiert. + +![Abbildung 14.3](images/margin2.png) + +Vielleicht können wir auch die Schrift in unserem HTML-Kopf anpassen? Füge dies zu `` in `blog/templates/blog/post_list.html` hinzu: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Wie eben bereits gemacht, prüfe die Reihenfolge und platziere die Anweisung vor dem Link `blog/static/css/blog.css`. Sie importiert eine Schriftart (engl. "Font") namens *Lobster* von Google Fonts (https://www.google.com/fonts). + +Suche den Anweisungsblock: `h1 a` (der Code zwischen den geschweiften Klammern `{` und `}`) in der CSS Datei `blog/static/css/blog.css`. Nun füge die Zeile `font-family: 'Lobster';` zwischen den geschweiften Klammern hinzu und aktualisiere die Seite: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Abbildung 14.3](images/font.png) + +Super! + +Wie oben erwähnt, basiert CSS auf dem Konzept von Klassen. Diese erlauben dir, einen Teil des HTML-Codes mit einem Namen zu versehen und die Darstellung dieses Teils separat von anderen Teilen mit einem Stil zu steuern. Das kann sehr hilfreich sein! Eventuell hast Du zwei 'div's die etwas vollkommen Verschiedenes auszeichnen (wie einen Seitentitel oder Post Beitrag). Die Klasse hilft dir, sie unterschiedlich aussehen zu lassen. + +Geben wir also einigen Teilen deines HTML-Codes solche Namen. Ersetze den `header`, der deine Kopfzeile enthält, mit folgendem: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+

Django Girls Blog

+
+
+``` + +Jetzt fügen wir dem `article` für den Blog-Inhalt (Post) noch eine Klasse `post` hinzu. + +{% filename %}blog/templates/blog/post_list{% endfilename %} + +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Wir erweitern jetzt unser CSS mit entsprechenden Selektoren. Selektoren, die mit `.` anfangen, beziehen sich auf Klassen im HTML. Es gibt im Internet viele gute Tutorials und Informationen über CSS, die dir helfen können, den folgenden Code besser zu verstehen. Kopiere zunächst folgenden Text in deine `blog/static/css/blog.css`-Datei: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-default, +.btn-default:visited { + color: #C25100; + background: none; + border-color: #C25100; +} + +.btn-default:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Der HTML-Code, der für die Anzeige der Blogposts verantwortlich ist, soll durch Klassen erweitert werden. Ersetze den folgenden Code: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +in `blog/templates/blog/post_list.html` durch diesen: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Speichere die geänderten Dateien und aktualisiere die Webseite. + +![Abbildung 14.4](images/final.png) + +Juhuu! Sieht super aus, oder? Schau dir den Code an, den wir gerade eingefügt haben. Da siehst du, wo wir überall Klassen zu den HTML-Objekten hinzugefügt haben, um sie in CSS zu referenzieren. Wo würdest du eine Änderung machen, um das Datum in Türkis anzuzeigen? + +Hab keine Angst, etwas mit dieser CSS-Datei herumzuspielen, und versuche, ein paar Dinge zu ändern. Mit CSS herumzuspielen, kann dir helfen zu verstehen, was die verschiedenen Dinge genau machen. Mach dir keine Sorgen, wenn etwas kaputt geht, du kannst deine Änderungen immer rückgängig machen! + +Wir empfehlen die kostenlosen online-Kurse "Basic HTML & HTML5" und "Basic CSS" auf [freeCodeCamp](https://learn.freecodecamp.org/). Sie werden dir helfen, deine Webseiten mit HTML und CSS schöner zu gestalten. + +Bereit für das nächste Kapitel? :) \ No newline at end of file diff --git a/de/css/images/bootstrap1.png b/de/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/de/css/images/bootstrap1.png differ diff --git a/de/css/images/color2.png b/de/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/de/css/images/color2.png differ diff --git a/de/css/images/final.png b/de/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/de/css/images/final.png differ diff --git a/de/css/images/font.png b/de/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/de/css/images/font.png differ diff --git a/de/css/images/margin2.png b/de/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/de/css/images/margin2.png differ diff --git a/de/deploy/README.md b/de/deploy/README.md new file mode 100644 index 00000000000..9657fab70d0 --- /dev/null +++ b/de/deploy/README.md @@ -0,0 +1,246 @@ +# Veröffentlichen! + +> **Hinweis:** Durch das folgende Kapitel muss man sich manchmal durchbeißen. Bleib dran und gib nicht auf; die Website zu veröffentlichen, ist ein sehr wichtiger Schritt. Dieses Kapitel ist in der Mitte des Tutorials platziert, damit dir dein Mentor mit dem etwas anspruchsvolleren Vorgang der Veröffentlichung deiner Website helfen kann. Den Rest des Tutorials kannst du dann auch alleine beenden, sollte die Zeit nicht ausreichen. + +Bis jetzt war deine Webseite nur auf deinem Computer verfügbar. Jetzt wirst du lernen wie du sie 'deployst'! Deployen bedeutet, dass du deine Anwendung im Internet veröffentlichst, so dass endlich jeder darauf zugreifen kann. :) + +Wie du schon gelernt hast, muss eine Webseite auf einem Server liegen. Es gibt eine Vielzahl von Hosting (Server)-Anbietern im Internet, wir werden [PythonAnywhere](https://www.pythonanywhere.com/) verwenden. PythonAnywhere ist kostenlos für kleine Anwendungen, die nicht von vielen Besuchern aufgerufen werden. Also erstmal genau das Richtige für dich. + +Als weiteren externen Dienst werden wir [GitHub](https://www.github.com) nutzen, einen "Code Hosting"-Dienst. Es gibt noch andere solcher Dienste, aber die meisten Programmierer haben heute ein Konto bei GitHub, und du auch gleich! + +Diese drei Orte werden für dich wichtig sein. Die Entwicklung und das Testen wirst du auf deinem lokalen Rechner durchführen. Wenn du mit deinen Änderungen zufrieden bist, wirst du eine Kopie deines Programms auf GitHub veröffentlichen. Deine Website wird auf PythonAnywhere gehostet werden. Ändern kannst du sie, indem du eine neue Version deines Codes von GitHub herunter lädst. + +# Git + +> **Hinweis:** Falls du die [Installationsschritte](../installation/README.md) bereits durchgeführt hast, kannst du mit dem nächsten Abschnitt fortfahren und anfangen, dein Git-Repository zu erstellen. + +{% include "/deploy/install_git.md" %} + +## Unser Git-Repository + +Git verwaltet die Veränderungen an einer Sammlung von Dateien in einem sogenannten Repository (oder kurz "Repo"). Legen wir eines für unser Projekt an. Öffne deine Konsole und gibt folgende Kommandos im `djangogirls`-Verzeichnis ein: + +> **Hinweis:** Überprüfe dein aktuelles Arbeitsverzeichnis mit dem Befehl `pwd` (OSX/Linux) oder `cd` (Windows) bevor du das Repository initialisierst. Du musst dich im `djangogirls`-Verzeichnis befinden, bevor du fortfährst. + +{% filename %}command-line{% endfilename %} + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Dein Name" + $ git config --global user.email du@example.com + + +Die Initialisierung des Git-Repositorys müssen wir für jedes Projekt nur einmal machen (danach musst Du Benutzernamen und Mail-Adresse nie wieder eingeben). + +Git wird die Änderungen an all den Dateien und Ordnern in diesem Verzeichnis aufzeichnen. Wir wollen aber, dass einige Dateien ignoriert werden. Dazu legen wir eine Datei `.gitignore` im Hauptordner (`djangogirls`) des Repos an. Öffne deinen Editor und erstelle eine neue Datei mit dem folgenden Inhalt: + +{% filename %}.gitignore{% endfilename %} + + # Python + *.pyc + *~ + __pycache__ + + # Env + .env + myvenv/ + venv/ + + # Datenbank + db.sqlite3 + + # Static Ordner im Projektverzeichnis + /static/ + + # macOS + ._* + .DS_Store + .fseventsd + .Spotlight-V100 + + # Windows + Thumbs.db* + ehthumbs*.db + [Dd]esktop.ini + $RECYCLE.BIN/ + + # Visual Studio + .vscode/ + .history/ + *.code-workspace + + +Speichere die Datei mit dem Namen `.gitignore` im "djangogirls"-Root-Verzeichnis. + +> **Hinweis:** Der Punkt vor dem Dateinamen ist wichtig! Wenn du Schwierigkeiten beim Erstellen hast (z.B. lassen Macs im Finder keine Dateien mit Punkt am Anfang erzeugen, Punkt-Dateien sind auf Linux und macOS "versteckte Dateien"), dann verwende die "Speichern unter"-Funktion im Editor, das sollte immer funktionieren. Wichtig ist, dass du den Dateinamen nicht mit `.txt`, `.py` oder einer anderen Dateinamen-Erweiterung ergänzt -- die Datei wird von Git nur erkannt, wenn ihr Name exakt nur `.gitignore` ist. Linux und MacOS behandeln Dateien mit Namen, die mit `.` beginnen (wie `.gitignore`), als versteckt und der normale `ls`-Befehl zeigt diese Dateien nicht an. Verwende stattdessen `ls -a` um die Datei `.gitignore` anzuzeigen. +> +> **Hinweis:** Eine der Dateien, die du in deiner `.gitignore`-Datei defniniert hast, ist `db.sqlite3`. Diese Datei ist deine lokale Datenbank, in welcher alle deine Benutzer und Posts gespeichert werden. Wir werden die gängige Web-Entwicklungs-Praxis befolgen, was heißt, dass wir separate Datenbanken für unsere lokale Test-Website und unsere öffentliche Website auf PythonAnywhere verwenden werden. Die Datenbank für letztere könnte SQLite sein, wie auf deiner Entwicklungsmaschine, aber normalerweise wirst du eine sogenannte MySQL-Datenbank nutzen, welche mit viel mehr Besuchern umgehen kann als SQLite. So oder so, dadurch, dass du deine SQLite-Datenbank für die GitHub-Kopie nicht verwendest, werden alle deine bisherigen Posts der Superuser nur lokal zur Verfügung stehen und du musst in der produktiven Umgebung neue hinzufügen. Betrachte deine lokale Datenbank als tollen Spielplatz, auf welchem du verschiedene Dinge ausprobieren kannst, ohne Angst zu haben, dass du deine wirklichen Post auf deinem Blog löschst. + +Es ist hilfreich den Befehl `git status` vor `git add` auszuführen oder immer dann, wenn du dir unsicher bist, was geändert wurde. Das schützt vor manchen Überraschungen, wie z. B. das falsche Hinzufügen oder Übertragen von Dateien. Das `git status`-Kommando gibt Informationen über unbeobachtete/veränderte/hinzugefügte Dateien, den Status der Verzweigung und einiges mehr wieder. Deine Ausgabe sollte dem hier ähneln: + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +Nun speichern wir unsere Änderungen durch folgende Eingabe in der Konsole: + +{% filename %}command-line{% endfilename %} + + $ git add . + $ git commit -m "Meine Django-Girls-App, erster Commit" + [...] + 13 files changed, 200 insertions(+) + create mode 100644 .gitignore + [...] + create mode 100644 mysite/wsgi.py + + +## Den Code auf GitHub veröffentlichen + +Gehe auf [GitHub.com](https://www.github.com) eröffne ein neues, kostenloses Nutzerkonto. (Falls Du es bereits während der Workshop-Vorbereitung eingerichtet hast, ist das großartig!) Stelle sicher, dass Du Dein Passwort nicht vergisst (füge es zu zu Deinem Passwort-Manager hinzu, falls Du einen solchen verwendest). + +Erstelle dann ein neues Repository und gib ihm den Namen "my-first-blog". Lass das Kontrollkästchen "initialise with a README" deaktiviert und die Einstellung der Option .gitignore leer (das haben wir schon von Hand gemacht) und lass die Lizenz auf "None". + +![](images/new_github_repo.png) + +> **Achtung:** Der Name `my-first-blog` ist wichtig -- du kannst auch einen anderen wählen, aber er wird im Folgenden noch sehr oft vorkommen und du wirst immer daran denken müssen, ihn in den Anweisungen entsprechend anzupassen. Es ist wahrscheinlich einfacher, bei `my-first-blog` zu bleiben. + +In der nächsten Ansicht wirst du die clone-URL deines Repositorys sehen, die du in manchen der folgenden Kommandozeilenbefehlen verwenden wirst: + +![](images/github_get_repo_url_screenshot.png) + +Nun müssen wir das Git-Repository auf deinem Computer mit dem auf GitHub verbinden. + +Gib das Folgende auf der Kommandozeile ein (ersetzte `` mit dem Benutzernamen, den du beim Erstellen deines GitHub-Accounts gewählt hast, aber ohne die spitzen Klammern -- die URL sollte der clone-URL entsprechen, die du vorhin gerade gesehen hast): + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Wenn du zu GitHub pushst, wirst du nach deinem Benutzernamen und Passwort gefragt (entweder direkt im Kommandozeilen-Fenster oder in einem Pop-Up-Fenster), und nach der Eingabe deiner Zugangsdaten solltest du etwas Ähnliches wie das hier sehen: + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Dein Code ist jetzt auf GitHub. Schau gleich mal nach! Dort ist dein Code in guter Gesellschaft - [Django](https://github.com/django/django), das [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial) und viele andere großartige Open Source Software-Projekte haben ihren Code auf GitHub. :) + +# Deinen Blog auf PythonAnywhere einrichten + +## Registriere dich für ein PythonAnywhere Konto + +> **Hinweis:** Es ist möglich, dass du bereits ein PythonAnywhere Konto angelegt hast. Wenn ja, dann brauchst du das nicht noch einmal zu tun. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Unsere Site auf PythonAnywhere konfigurieren + +Gehe zurück zum [Haupt-Dashboard PythonAnywhere](https://www.pythonanywhere.com/), indem du auf das Logo klickst. Dann wähle die Option zum Start einer "Bash"-Konsole – die PythonAnywhere Version einer Kommandozeile wie du sie auf deinen Computer hast. + +![Der 'New Console"-Abschnitt auf der PythonAnywhere-Weboberfläche, mit einem Knopf für 'bash'](images/pythonanywhere_bash_console.png) + +> **Hinweis:** PythonAnywhere basiert auf Linux. Wenn du Windows benutzt, dann sieht die Konsole etwas anders aus als die Konsole auf deinem Computer. + +Um eine Web App auf PythonAnywhere publizieren zu können, muss dein Code von GitHub heruntergeladen und PythonAnyhwere dazu gebracht werden, diesen zu erkennen und als Web Applikation anzubieten. Du kannst das auch manuell machen. Aber PythonAnywhere stellt ein Hilfstool zur Verfügung, das das alles für dich erledigt. Lass es uns installieren: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip install --user pythonanywhere + + +Nach diesem Befehl solltest du in etwa Folgendes sehen: `Collecting pythonanywhere`, und irgendwann den Schluss `Successfully installed (...) pythonanywhere- (...)`. + +Nun können wir mit dem Hilfstool unsere App von GitHub automatisch konfigurieren. Gib das Folgende in der Konsole auf PythonAnywhere ein (vergiss nicht, deinen GitHub-Benutzernamen an Stelle von `` zu benutzen, so dass die URL der clone-URL von GitHub entspricht): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.10 https://github.com//my-first-blog.git + + +Während du die Ausführung verfolgst, wirst du sehen, was passiert: + +- Den Code von GitHub herunterladen +- Eine virtuelle Umgebung auf PythonAnywhere einrichten, genau wie die auf deinem eigenen Computer +- Deine Einstellungen mit ein paar Veröffentlichungseinstellungen aktualisieren +- Eine Datenbank auf PythonAnywhere einrichten mit dem Befehl `manage.py migrate` +- Deine statischen Dateien einrichten (darüber lernen wir später etwas) +- PythonAnywhere so einrichten, dass es deine Web-App über seine Schnittstelle (API) präsentieren kann + +Diese Schritte wurden auf PythonAnywhere automatisiert, aber es sind die selben Schritte, die du bei jedem anderen Server-Provider machen müsstest. + +Das Wichtigste im Moment ist, dass du weißt, dass Deine Datenbank auf PythonAnywhere vollständig unabhängig von deiner Datenbank auf deinem eigenen PC ist, so dass sie unterschiedliche Posts und Administratorenkonten haben kann. Aus diesem Grund müssen wir das Administratorenkonto mittels `createsuperuser` initialisieren - wie wir das auf deinem eigenen Computer getan haben. PythonAnywhere hat deine virtualenv automatisch für dich aktiviert. Du musst nur noch Folgendes ausführen: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Trage die Informationen für deinen Administrator ein. Am Besten verwendest du die selben Daten wie auf deinem eigenen Computer, um Verwechslungen zu vermeiden - es sei denn, du willst das Passwort auf PythonAnywhere sicherer machen. + +Nun kannst auch einen Blick auf deinen Code auf PythonAnywhere werfen mittels `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 + + +Du kannst auch auf die "Files"-Seite gehen und mit PythonAnywheres eingebautem Datei-Manager navigieren. (Von der "Console"-Seite gelangst du über das Menü in der rechten oberen Ecke zu anderen PythonAnywhere-Seiten. Sobald du auf einer dieser Seiten bist, findest du die Links zu den anderen Seiten oben über dem Seiteninhalt.) + +## Du bist jetzt live! + +Nun ist deine Site also live im öffentlichen Internet! Klick dich zur PythonAnywhere "Web"-Seite durch und hole dir den Link. Teile ihn, mit wem du willst. :) + +> **Hinweis:** Da es sich hier um ein Anfänger-Tutorial handelt, haben wir ein paar Abkürzungen genommen, um die Site zu veröffentlichen, welche sicherheitstechnisch nicht ideal sind. Falls du dich entscheidest, dieses Projekt weiterzubauen oder ein neues Projekt anzufangen, dann solltest du die [Django deployment checklist](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) durchgehen, um einige Tipps zur Absicherung deiner Seite zu erhalten. + +## Debugging Tipps + +Solltest du beim Ausführen des `pa_autoconfigure_django.py` Skripts eine Fehlermeldung erhalten, findest du folgend ein paar bekannte Gründe hierfür: + +- Du hast vergessen deinen PythonAnywhere API-Token zu erstellen. +- Du hast in deiner GitHub-URL einen Fehler gemacht. +- Falls du die Fehlermeldung *"Could not find your settings.py"* erhältst, liegt das wahrscheinlich daran, dass du nicht alle Files zum Git hinzugefügt und/oder diese nicht erfolgreich auf GitHub veröffentlicht hast. Schau dir nochmals den Git-Abschnitt weiter oben an. +- Falls du ein bestehendes PythonAnywhere-Benutzerkonto verwendest und eine Fehlermeldung bzgl. collectstatic erhalten hast, hast du dort vermutlich eine alte SQLite-Version (z.B. 3.8.2). Wenn das der Fall ist, erstelle ein neues Benutzerkonto und versuche dort, die Kommandos aus dem obenstehenden PythonAnywhere-Abschnitt erneut auszuführen. + +Falls du eine Fehlermeldung erhältst, wenn du versuchst, deine Site aufzurufen, solltest du als Erstes die Debugging-Informationen im **error log** anschauen. Den Link dazu findest du über [die PythonAnywhere-Seite "Web"](https://www.pythonanywhere.com/web_app_setup/). Schau nach, ob darin Fehlermeldungen enthalten sind; die neuesten findest du ganz unten. + +Du findest einige [Allgemeine Debugging Tipps im PythonAnywhere Wiki](http://help.pythonanywhere.com/pages/DebuggingImportError). + +Und denke daran, dein Coach ist da, um zu helfen! + +# Schau dir deine Website an! + +Auf der Defaultseite deiner Site sollte "It worked!" stehen - genau so wie auf deinem lokalen Computer. Füge nun `/admin/` ans Ende deiner URL an und du kommst auf die Admin-Site. Logge dich mit Benutzername und Passwort ein, und du wirst sehen, dass du auf dem Server neue Posts hinzufügen kannst -- die Posts aus deiner lokalen Test-Datenbank wurden ja nicht auf deinen öffentlichen Blog geschickt. + +Wenn du ein paar Posts erstellt hast, kannst du zurück auf dein lokales Setup (nicht PythonAnywhere) wechseln. Ab jetzt solltest du für Änderungen auf deinem lokalen Setup arbeiten. So wird in der Web-Entwicklung gearbeitet - Änderungen lokal machen und diese dann auf GitHub veröffentlichen und dann deine Änderungen auf den produktiven Webserver ziehen. So kannst du Sachen ausprobieren, ohne deine produktive Website kaputt zu machen. Ziemlich cool, oder? + +Klopf dir *kräftig* auf die Schulter! Server-Deployment ist eines der kompliziertesten Dinge der Web-Entwicklung und es dauert oftmals mehrere Tage, bis alles läuft. Aber du hast deine Site jetzt live, im echten Internet! \ No newline at end of file diff --git a/de/deploy/images/github_get_repo_url_screenshot.png b/de/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/de/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/de/deploy/images/new_github_repo.png b/de/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/de/deploy/images/new_github_repo.png differ diff --git a/de/deploy/images/pythonanywhere_account.png b/de/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/de/deploy/images/pythonanywhere_account.png differ diff --git a/de/deploy/images/pythonanywhere_bash_console.png b/de/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/de/deploy/images/pythonanywhere_bash_console.png differ diff --git a/de/deploy/images/pythonanywhere_beginner_account_button.png b/de/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/de/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/de/deploy/images/pythonanywhere_create_api_token.png b/de/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/de/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/de/deploy/install_git.md b/de/deploy/install_git.md new file mode 100644 index 00000000000..31aa6536ebb --- /dev/null +++ b/de/deploy/install_git.md @@ -0,0 +1,52 @@ +Git ist ein "Versionsverwaltungssystem" für Dateien und Code, das von vielen Programmierern benutzt wird. Diese Software kann Änderungen an Dateien über die Zeit verfolgen, so dass du bestimmte Versionen im Nachhinein wieder aufrufen kannst. Sie hat Ähnlichkeit mit der Funktion "Änderungen nachverfolgen" in Textverarbeitungsprogrammen (z. B. Microsoft Word oder LibreOffice Writer), ist jedoch weitaus leistungsfähiger. + +## Git installieren + + + +Du kannst Git von [git-scm.com](https://git-scm.com/) herunterladen. Du kannst bei allen Schritten außer zweien "next" klicken: Wähle im Schritt, in dem du einen Editor aussuchen sollst, "Nano"; und bei der Anweisung "Adjusting your PATH environment", wähle die Einstellung "Run Git and associated Unix tools from the Windows command-line" (die letzte Option). Die anderen Voreinstellungen sind ok. "Checkout"-Stil "Windows" und "Commit" mit "Unix line endings" (Zeilenende im Unix-Format) sind die richtigen Einstellungen. + +Vergiss nicht, die Eingabeaufforderung oder PowerShell nach erfolgreicher Installation neu zu starten. + + + +Lade Git von [git-scm.com](https://git-scm.com/) herunter und folge dann den Anweisungen. + +> **Hinweis:** Falls du OS X 10.6, 10.7, oder 10.8 verwendest, muss du die Git-Version unter folgendem Link installieren: [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/de/deploy/signup_pythonanywhere.md b/de/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..b94d9d975a9 --- /dev/null +++ b/de/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere ist ein Dienst, mittels dem Python auf Servern "in der Cloud" ausgeführt werden kann. Wir werden ihn verwenden, um unsere Seite zu hosten, live und im Internet. + +Wir werden den Blog, den wir bauen, auf PythonAnywhere hosten. Registriere dich auf PythonAnywhere für ein "Beginner"-Konto (die kostenfreie Stufe ist ausreichend, du brauchst keine Kreditkarte). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Die PythonAnywhere-Anmelde-Seite mit einem Knopf, um ein kostenloses 'Beginner'-Benutzerkonto anzulegen](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Hinweis** Beachte bei der Wahl deines PythonAnywhere-Benutzernamens, dass die URL deines Blogs die Form `deinbenutzername.pythonanywhere.com` haben wird. Wähle also einen Namen, unter dem du veröffentlichen willst, oder einen Namen, der den Inhalt deines Blogs beschreibt. Und vergiss dein Passwort nicht (füge es deinem Passwortmanager hinzu, wenn du einen benutzt). + +## Erstellen eines PythonAnywhere API-Tokens + +Das Folgende musst du nur einmal machen. Wenn du dich auf PythonAnywhere angemeldet hast, kommst du aufs "Dashboard". Oben rechts findest du den Link zu deiner "Account"-Seite: + +!["Account"-Link oben rechts auf der Seite](../deploy/images/pythonanywhere_account.png) + +Klicke dort auf den Reiter namens "API token" und dann auf den Knopf, der mit "Create new API token" beschriftet ist. + +![Der API-Token-Reiter auf der "Account"-Seite](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/de/django/README.md b/de/django/README.md new file mode 100644 index 00000000000..5238cee1750 --- /dev/null +++ b/de/django/README.md @@ -0,0 +1,27 @@ +# Django - Was ist das? + +Django (*/ˈdʒæŋɡoʊ/*) ist ein freies, quelloffenes Web-Anwendungs-Framework, geschrieben in Python. Ein Web-(Anwendungs-)Framework ist eine Art Baukastensystem, das dir mit vielen vorgefertigten Teilen die Entwicklung von Web-Anwendungen stark erleichtert. + +Wenn du eine Website entwickelst, brauchst du immer wieder sehr ähnliche Elemente: Einen Weg, Benutzer zu verwalten (Registrierung, Anmeldung, Abmeldung etc.), einen Administrationsbereich, Formulare, Upload von Dateien usw. + +Glücklicherweise wurde schon vor einiger Zeit erkannt, dass Web-Entwickler immer wieder die gleichen Probleme zu lösen haben. Gemeinsam entstanden so verschiedene Frameworks (Django ist so eines), welche die Web-Entwicklung durch vorgefertigte Elemente erleichtern. + +Frameworks sind dazu da, damit du das Rad nicht neu erfinden musst. Du kannst dich auf die konkret zu erfüllenden Anforderungen der Webseite kümmern. Die grundlegende Basis der Webseite stellt dir das Framework zur Verfügung. + +## Warum brauchst du ein Framework? + +Um besser zu verstehen, welche Vorteile dir Django bietet, werfen wir einen Blick auf Server im Allgemeinen. Als Erstes muss der Server wissen, dass er eine Webseite ausliefern soll. + +Der Server hat mehrere "Ports". Ein Port ist vergleichbar mit einem Briefkasten, der auf eingehende Briefe ("Anfragen", "requests") überwacht wird. Das macht der Webserver. Der Webserver liest die eingeworfenen Briefe (requests) und beantwortet sie mit der Webseite (response). Um etwas ausliefern zu können, brauchen wir Inhalte. Und Django hilft dir dabei, diese Inhalte zu erstellen. + +## Was passiert, wenn jemand eine Webseite beim Server anfordert? + +Wenn die Anfrage beim Web-Server ankommt, reicht er diese an Django weiter. Und Django versucht herauszufinden, welche Seite genau angefordert wurde. Django wertet zuerst die Adresse der Webseite aus und versucht herauszufinden, was getan werden soll. Dafür ist der **urlresolver** von Django verantwortlich (Hinweis: URL - Uniform Resource Locator ist ein anderer Name für die Web-Adresse, daher der Name *urlresolver*). Sehr schlau ist er aber nicht. Er hat eine Musterliste und vergleicht diese mit der URL. Der Vergleich der Muster erfolgt von oben nach unten. Wenn ein Muster auf die URL zutrifft, wird der damit verknüpften Funktion (der sogenannten *view*) der Request/die Anfrage übergeben. + +Stell dir eine Postbotin mit einem Brief vor. Sie geht die Straße entlang und prüft jede Hausnummer mit der Adresse auf dem Brief. Wenn beide passen, dann steckt sie den Brief in den Briefkasten. So funktioniert der urlresolver! + +In der *view* Funktion passieren all die interessanten Dinge: wir können in eine Datenbank gucken und dort nach Informationen suchen. Vielleicht wollte die Benutzerin irgendetwas in den Daten ändern? So, als ob der Brief sagen würde: "Bitte ändere meine Stellenbeschreibung!" Die Funktion *view* kann nun prüfen, ob du dazu berechtigt bist, im positiven Fall die Änderungen durchführen und im Anschluss eine Bestätigungs-Nachricht zurücksenden. Die *view* generiert dann eine Antwort und Django kann diese an den Webbrowser der Benutzerin senden. + +Die Beschreibung oben ist ein wenig vereinfacht, aber du musst noch nicht all die technischen Details wissen. Eine generelle Vorstellung zu haben, reicht erstmal. + +Anstatt zu sehr ins Detail zu gehen, fangen wir lieber an, mit Django etwas zu erschaffen, und du wirst dabei alles Wichtige lernen! \ No newline at end of file diff --git a/de/django_admin/README.md b/de/django_admin/README.md new file mode 100644 index 00000000000..6a57b9d2a66 --- /dev/null +++ b/de/django_admin/README.md @@ -0,0 +1,57 @@ +# Django-Administration + +Wir benutzen den Django-Admin, um die soeben modellierten Posts hinzuzufügen, zu ändern oder zu löschen. + +Öffne die Datei `blog/admin.py` im Code-Editor und ersetze den Inhalt wie folgt: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Wie du siehst, importieren wir hier das Model "Post", das wir im vorherigen Kapitel erstellt haben. Damit unser Model auf der Admin-Seite sichtbar wird, müssen wir es mit `admin.site.register(Post)` registrieren. + +Okay, wir sehen uns nun unser Post-Model an. Denk daran, `python manage.py runserver` in die Konsole einzugeben, um den Webserver zu starten. Öffne deinen Browser und gib die Adresse http://127.0.0.1:8000/admin/ ein. Du siehst eine Anmeldeseite: + +![Login Seite](images/login_page2.png) + +Um dich einloggen zu können, musst du zunächst einen *superuser* erstellen - einen User, der alles auf der Website steuern darf. Geh zurück zur Kommandozeile, tippe `python manage.py createsuperuser` und drücke Enter. + +> Denke daran, damit du neue Kommandos eingeben kannst während der Webserver läuft, musst du ein neues Terminal öffnen und deine virtualenv aktivieren. Wie man neue Kommandos eingeben kann, haben wir im Kapitel **Dein erstes Django-Projekt!** unter **Den Webserver starten** behandelt. + +{% filename %}macOS oder Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Wenn du dazu aufgefordert wirst, gib einen Benutzernamen (Kleinbuchstaben, keine Leerzeichen), eine Mailadresse und ein Passwort ein. **Mach dir keine Gedanken, wenn du das Passwort bei der Eingabe nicht sehen kannst - so soll es sein.** Tippe weiter und drücke `Enter`, um weiterzumachen. Du solltest nun Folgendes sehen (wobei Benutzername und Email deine eigenen sein sollten): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Geh nochmal in deinen Browser und log dich mit den Daten des Superusers ein, den du gerade erstellt hast. Du solltest nun das Django-Admin-Dashboard sehen. + +!["Django Admin"-Weboberfläche](images/django_admin3.png) + +Gehe auf Posts und experimentiere ein bisschen damit. Füge fünf oder sechs Blogeinträge hinzu. Mach dir keine Sorgen wegen des Inhalts -- der ist nur auf deinem lokalen Computer sichtbar. Um Zeit zu sparen kannst du etwas Text aus diesem Tutorial kopieren und einfügen. :-) + +Achte darauf, dass bei wenigstens zwei oder drei Posts (aber nicht bei allen) das Veröffentlichungsdatum (publish date) eingetragen ist. Das werden wir später noch brauchen. + +!["Django Admin"-Weboberfläche](images/edit_post3.png) + +Mehr zum Django-Admin-Dashboard kannst du in der Django-Dokumentation erfahren: https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +Jetzt ist wahrscheinlich ein guter Moment, um dir einen Kaffee (oder Tee) zu gönnen und neue Kraft zu tanken. Du hast dein erstes Django-Model erstellt - du hast dir eine kleine Pause verdient! \ No newline at end of file diff --git a/de/django_admin/images/django_admin3.png b/de/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/de/django_admin/images/django_admin3.png differ diff --git a/de/django_admin/images/edit_post3.png b/de/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/de/django_admin/images/edit_post3.png differ diff --git a/de/django_admin/images/login_page2.png b/de/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/de/django_admin/images/login_page2.png differ diff --git a/de/django_forms/README.md b/de/django_forms/README.md new file mode 100644 index 00000000000..eaaea05d302 --- /dev/null +++ b/de/django_forms/README.md @@ -0,0 +1,478 @@ +# Django-Formulare + +Als Letztes möchten wir auf unserer Website noch die Möglichkeit haben, Blogposts hinzuzufügen und zu editieren. Die Django `admin`-Oberfläche ist cool, aber eher schwierig anzupassen und hübsch zu machen. Mit Formularen, `forms`, haben wir die absolute Kontrolle über unser Interface - wir können fast alles machen, was man sich vorstellen kann! + +Das Gute an Django-Forms ist, dass man sie entweder vollständig selbst definieren oder eine `ModelForm` erstellen kann, welche den Inhalt des Formulars in das Model speichert. + +Genau das wollen wir jetzt machen: Wir erstellen ein Formular für unser `Post`-Model. + +So wie die anderen wichtigen Django-Komponenten haben auch die Forms ihre eigene Datei: `forms.py`. + +Wir erstellen nun eine Datei mit diesem Namen im `blog`-Verzeichnis. + + blog + └── forms.py + + +So, jetzt lass uns diese im Code-Editor öffnen und folgenden Code hinzufügen: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Zuerst müssen wir die Django-Forms importieren (`from django import forms`) und auch unser `Post`-Model (`from .models import Post`). + +Wie du wahrscheinlich schon vermutet hast, `PostForm` ist der Name unseres Formulars. Wir müssen Django mitteilen, dass unser Formular ein `ModelForm` ist (so kann Django ein bisschen für uns zaubern) - `forms.ModelForm` ist dafür verantwortlich. + +Als Nächstes sehen wir uns `class Meta` an, damit sagen wir Django, welches Model benutzt werden soll, um das Formular zu erstellen (`model = Post`). + +Nun können wir bestimmen, welche(s) Feld(er) unser Formular besitzen soll. Wir wollen hier nur den `title` und `text` sichtbar machen - der `author` sollte die Person sein, die gerade eingeloggt ist (Du!) und `created_date` sollte automatisch generiert werden, wenn der Post erstellt wird (also im Code). Stimmt's? + +Und das war's schon! Jetzt müssen wir das Formular nur noch in einem *view* benutzen und im Template darstellen. + +Also erstellen wir hier auch wieder einen Link auf die Seite, eine URL, eine View und ein Template. + +## Link auf eine Seite mit dem Formular + +Bevor wir den Link hinzufügen, benötigen wir einige Icons als Buttons für den Link. Lade für dieses Tutorial [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) herunter und speicher es im Ordner `blog/templates/blog/blog/icons/` + +> Hinweis: Um das SVG-Bild herunterzuladen, öffne das Kontextmenü auf dem Link (normalerweise durch einen Rechtsklick darauf) und wähle "Link speichern unter". Im Dialog, in dem du gefragt wirst, wo du die Datei speichern willst, navigiere zum `djangogirls`-Verzeichnis deines Django-Projekts und innerhalb davon in das Unterverzeichnis `blog/templates/blog/icons/` und speicher die Datei dort. + +Es ist an der Zeit, `blog/templates/blog/base.html` im Code-Editor zu öffnen. Jetzt können wir diese Icon-Datei im Basis-Template wie folgt verwenden. Im `div`-Element innerhalb des `header`-Abschnitts werden wir einen Link vor dem `h1`-Element hinzufügen: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Beachte, dass wir unsere neue View `post_new` nennen wollen. Das [SVG-Icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) wird von [Bootstrap Icons](https://icons.getbootstrap.com/) zur Verfügung gestellt und zeigt ein Seitensymbol mit Pluszeichen an. Wir verwenden eine Django-Template-Direktive namens `include`. Dadurch wird der Inhalt der Datei in das Django-Template eingefügt. Der Web-Browser weiß, wie man diese Art von Inhalt ohne weitere Verarbeitung handhabt. + +> Alle Bootstrap-Icons kannst du [hier herunterladen](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip). Entpacke die Datei und kopiere alle SVG-Bilddateien in einen neuen Ordner namens `icons` innerhalb von `blog/templates/blog/`. So kannst du auf ein Symbol wie `pencil-fill.svg` mit dem Dateipfad `blog/templates/blog/icons/pencil-fill.svg` zugreifen + +Nach dem Bearbeiten der Zeile sieht deine HTML-Datei so aus: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Nach dem Speichern und Neuladen von http://127.0.0.1:8000 solltest du den bereits bekannten `NoReverseMatch`-Fehler sehen. Ist dem so? Gut! + +## URL + +Wir öffnen `blog/urls.py` im Code-Editor und fügen eine Zeile hinzu: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +Der finale Code sieht dann so aus: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Nach dem Neuladen der Site sehen wir einen `AttributeError`, weil wir noch keine `post_new`-View eingefügt haben. Fügen wir sie gleich hinzu! + +## Die post_new-View + +Jetzt wird es Zeit, die Datei `blog/views.py` im Code-Editor zu öffnen und die folgenden Zeilen zu den anderen `from` Zeilen hinzuzufügen: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +Und dann unsere *View*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Um ein neues `PostForm` zu erstellen, rufen wir `PostForm()` auf und übergeben es an das Template. Wir kommen gleich nochmal zu dem *View* zurück, aber jetzt erstellen wir schnell ein Template für das Form. + +## Template + +Wir müssen eine Datei `post_edit.html` im Verzeichnis `blog/templates/blog` erstellen und im Code-Editor öffnen. Damit ein Formular funktioniert, benötigen wir einige Dinge: + +* Wir müssen das Formular anzeigen. Wir können das zum Beispiel mit einem einfachen `{{ form.as_p }}` tun. +* Die Zeile oben muss von einem HTML-Formular-Element eingeschlossen werden `...`. +* Wir benötigen einen `Save`-Button. Wir erstellen diesen mit einem HTML-Button: ``. +* Und schließlich fügen wir nach dem öffnenden `
` Tag `{% raw %}{% csrf_token %}{% endraw %}` hinzu. Das ist sehr wichtig, da es deine Formulare sicher macht! Wenn du diesen Teil vergisst, wird sich Django beim Speichern des Formulars beschweren. + +![CSFR Forbidden page](images/csrf2.png) + +Ok, also schauen wir mal, wie der HTML-Code in `post_edit.html` aussehen sollte: + +{% filename %}blog/templates/blog/post_edit.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +So, jetzt aktualisieren wir die Seite! Yay! Das Formular wird angezeigt! + +![Neues Formular](images/new_form2.png) + +Aber Moment! Wenn du in das `title`- oder `text`-Feld etwas eintippst und versuchst es zu speichern - was wird wohl passieren? + +Nichts! Wir landen wieder auf der selben Seite und unser Text ist verschwunden... und kein neuer Post wurde hinzugefügt. Was lief denn hier schief? + +Die Antwort ist: nichts. Wir müssen einfach noch etwas mehr Arbeit in unsere *View* stecken. + +## Speichern des Formulars + +Öffne `blog/views.py` erneut im Code-Editor. Derzeit ist alles, was wir in der View `post_new` haben, das hier: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Wenn wir das Formular übermitteln, werden wir zur selben Ansicht weitergeleitet, aber dieses Mal haben wir mehr Daten in `request`, genauer in `request.POST` (der Name hat nichts zu tun mit einem "Blogpost", sondern damit, dass wir Daten "posten"). Erinnerst du dich daran, dass in der HTML-Datei unsere `
` Definition die Variable `method="POST"` hatte? Alle Felder aus dem Formular sind jetzt in `request.POST`. Du solltest `POST` nicht umbenennen (der einzige andere gültige Wert für `method` ist `GET`, wir wollen hier jetzt aber nicht auf den Unterschied eingehen). + +Somit müssen wir uns in unserer *View* mit zwei verschiedenen Situationen befassen: erstens, wenn wir das erste Mal auf die Seite zugreifen und ein leeres Formular wollen und zweitens, wenn wir zur *View* mit allen soeben ausgefüllten Formular-Daten zurück wollen. Wir müssen also eine Bedingung hinzufügen (dafür verwenden wir `if`): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Es wird Zeit, die Lücken zu füllen `[...]`. Falls die `Methode` `POST` ist, wollen wir das `PostForm` mit Daten vom Formular erstellen. Oder? Das machen wir folgendermaßen: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Als Nächstes müssen wir testen, ob das Formular korrekt ist (alle benötigten Felder sind ausgefüllt und keine ungültigen Werte werden gespeichert). Wir tun das mit `form.is_valid()`. + +Wir überprüfen also, ob das Formular gültig ist und wenn ja, können wir es speichern! + +{% 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() +``` + +Im Grunde passieren hier zwei Dinge: Wir speichern das Formular mit `form.save` und wir fügen einen Autor hinzu (da es bislang kein `author` Feld in der `PostForm` gab und dieses Feld notwendig ist). `commit=False` bedeutet, dass wir das `Post` Model noch nicht speichern wollen - wir wollen erst noch den Autor hinzufügen. Meistens wirst du `form.save()` ohne `commit=False` benutzen, aber in diesem Fall müssen wir es so tun. `post.save()` wird die Änderungen sichern (den Autor hinzufügen) und ein neuer Blogpost wurde erstellt! + +Wäre es nicht grossartig, wenn wir direkt zu der `post_detail` Seite des neu erzeugten Blogposts gehen könnten? Um dies zu tun, benötigen wir noch einen zusätzlichen Import: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Füge dies direkt am Anfang der Datei hinzu. Jetzt können wir endlich sagen: "Gehe zu der `post_detail` Seite unseres neu erstellten Posts": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` ist der Name der View, zu der wir springen wollen. Erinnerst du dich daran, dass diese *view* einen `pk` benötigt? Um diesen an die View weiterzugeben, benutzen wir `pk=post.pk`, wobei `post` unser neu erstellter Blogpost ist! + +Ok, wir haben jetzt eine ganze Menge geredet, aber du willst bestimmt sehen, wie die gesamte *View* aussieht, richtig? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Schauen wir mal, ob es funktioniert. Gehe zur Seite http://127.0.0.1:8000/post/new/, füge einen `title` und `text` hinzu und speichere es...voilà! Der neue Blogpost wird hinzugefügt und wir werden auf die `post_detail` Seite umgeleitet! + +Du hast vielleicht bemerkt, dass wir das Veröffentlichungsdatum festlegen, bevor wir den Post veröffentlichen. Später werden wir einen *publish button* in **Django Girls Tutorial: Extensions** einführen. + +Das ist genial! + +> Da wir vor Kurzem das Django-Admin-Interface benutzt haben, denkt das System, dass wir noch angemeldet sind. Es gibt einige Situationen, welche dazu führen können, dass wir ausgeloggt werden (Schließen des Browsers, Neustarten der Datenbank etc). Wenn du feststellst, dass du bei dem Erstellen von Posts Fehlermeldungen bekommst, die auf nicht angemeldete Nutzer zurückzuführen sind, dann gehe zur Admin Seite http://127.0.0.1:8000/admin und logge dich erneut ein. Dies wird das Problem vorübergehend lösen. Es gibt eine permanente Lösung dafür, die im Kapitel **Homework: add security to your website!** nach dem Haupttutorial auf dich wartet. + +![Anmeldefehler](images/post_create_error.png) + +## Formularvalidierung + +Jetzt zeigen wir dir, wie cool Django-Formulare sind. Ein Blogpost muss `title`- und `text`-Felder besitzen. In unserem `Post`-Model haben wir (im Gegensatz zu dem `published_date`) nicht festgelegt, dass diese Felder nicht benötigt werden, also nimmt Django standardmäßig an, dass sie definiert werden. + +Versuch, das Formular ohne `title` und `text` zu speichern. Rate, was passieren wird! + +![Formularvalidierung](images/form_validation2.png) + +Django kümmert sich darum sicherzustellen, dass alle Felder in unserem Formular richtig sind. Ist das nicht großartig? + +## "Bearbeiten"-Formular + +Jetzt wissen wir, wie ein neuer Blogpost hinzugefügt wird. Aber was ist, wenn wir einen bereits bestehenden bearbeiten wollen? Das funktioniert so ähnlich wie das, was wir gerade getan haben. Lass uns schnell ein paar wichtige Dinge erstellen. (Falls du etwas nicht verstehst, solltest du deinen Coach fragen oder in den vorherigen Kapiteln nachschlagen, da wir all die Schritte bereits behandelt haben.) + +Lass uns zunächst das Symbol speichern, das den Bearbeiten-Button darstellt. Lade [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) herunter und speichere es in `blog/templates/blog/icons/`. + +Öffne `blog/templates/blog/post_detail.html` im Code-Editor und füge folgenden Code innerhalb des Elements `article` hinzu: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +damit die Vorlage so aussieht: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +Öffne `blog/urls.py` im Code-Editor und fügen diese Zeile hinzu: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Wir werden die Vorlage `blog/templates/blog/post_edit.html` wiederverwenden, daher ist das einzig Fehlende eine neue *View*. + +Öffne `blog/views.py` im Code-Editor und füge ganz am Ende der Datei Folgendes hinzu: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Sieht genauso aus wie unsere `post_new`-View, oder? Aber nicht ganz. Zum einen übergeben wir einen zusätzliche `pk`-Parameter aus `urls`. Und: Wir bekommen das `Post`-Model, welches wir bearbeiten wollen, mit `get_object_or_404(Post, pk=pk)` und wenn wir dann ein Formular erstellen, übergeben wir diesen Post als `instance`, wenn wir das Formular speichern… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +als auch, wenn wir ein Formular mit post zum Editieren öffnen: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Ok, lass uns mal schauen, ob das funktioniert! Geh auf die `post_detail`-Seite. Dort sollte sich ein Editier-Button in der oberen rechten Ecke befinden: + +![Schaltfläche "Bearbeiten"](images/edit_button2.png) + +Wenn du darauf klickst, siehst du das Formular mit unserem Blogpost: + +!["Bearbeiten"-Formular](images/edit_form2.png) + +Probier doch einmal, den Titel oder den Text zu ändern und die Änderungen zu speichern! + +Herzlichen Glückwunsch! Deine Anwendung nimmt immer mehr Gestalt an! + +Falls du mehr Informationen über Django-Formulare benötigst, solltest du die offizielle Dokumentation lesen: https://docs.djangoproject.com/en/2.2/topics/forms/ + +## Sicherheit + +Neue Posts durch Klick auf einen Link zu erstellen ist großartig! Aber im Moment ist jeder, der deine Seite besucht, in der Lage, einen neuen Blogpost zu veröffentlichen, und das ist etwas, was du garantiert nicht willst. Lass es uns so machen, dass der Button für dich angezeigt wird, aber für niemanden sonst. + +Öffne die Datei `blog/templates/blog/base.html` im Code-Editor, finde darin unseren `header` und das Anchor-Element, welches du zuvor eingefügt hast. Es sollte so aussehen: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Wir fügen ein weiteres `{% if %}`-Tag ein, was dafür sorgt, dass der Link nur für angemeldete Nutzer angezeigt wird. Im Moment bist das also nur du! Ändere das ``-Element zu Folgendem: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/file-earmark-plus.svg' %} + +{% endif %} +``` + +Dieses `{% if %}` sorgt dafür, dass der Link nur zu dem Browser geschickt wird, wenn der anfragende Nutzer auch angemeldet ist. Das verhindert das Erzeugen neuer Posts nicht komplett, ist aber ein sehr guter erster Schritt. In der Erweiterungslektion kümmern wir uns ausgiebiger um Sicherheit. + +Erinnerst du dich an den Editier-Button, den wir gerade zu unserer Seite hinzugefügt haben? Wir wollen dort dieselbe Anpassung machen, damit andere Leute keine existierenden Posts verändern können. + +Öffne `blog/templates/blog/post_detail.html` im Code-Editor und finde folgende Zeile: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +Ändere es wie folgt: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +Da du wahrscheinlich angemeldet bist, wirst du beim Refresh der Seite keinen Veränderung feststellen. Lade jedoch die Seite in einem anderen Browser oder einem Inkognito-Fenster ("In Private" im Windows Edge) und du wirst sehen, dass dieser Link nicht auftaucht und das Icon ebenfalls nicht angezeigt wird! + +## Eins noch: Zeit für das Deployment! + +Mal sehen, ob das alles auch auf PythonAnywhere funktioniert. Zeit für ein weiteres Deployment! + +* Commite als Erstes deinen neuen Code und schiebe ihn auf 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 + + +* Dann führe Folgendes in der [PythonAnywhere Bash-Konsole](https://www.pythonanywhere.com/consoles/) aus: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Denk daran, `` durch deine tatsächliche PythonAnywhere-Subdomain zu ersetzen - ohne die spitzen Klammern.) + +* Gehe schließlich noch rüber [auf die Seite "Web"](https://www.pythonanywhere.com/web_app_setup/) (benutze den Menü-Knopf in der rechten oberen Ecke der Konsole) und klicke **Reload**. Lade deinen Blog https://subdomain.pythonanywhere.com neu, um die Änderungen zu sehen. + +Und das war's. Glückwunsch! :) \ No newline at end of file diff --git a/de/django_forms/images/csrf2.png b/de/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/de/django_forms/images/csrf2.png differ diff --git a/de/django_forms/images/drafts.png b/de/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/de/django_forms/images/drafts.png differ diff --git a/de/django_forms/images/edit_button2.png b/de/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/de/django_forms/images/edit_button2.png differ diff --git a/de/django_forms/images/edit_form2.png b/de/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/de/django_forms/images/edit_form2.png differ diff --git a/de/django_forms/images/form_validation2.png b/de/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/de/django_forms/images/form_validation2.png differ diff --git a/de/django_forms/images/new_form2.png b/de/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/de/django_forms/images/new_form2.png differ diff --git a/de/django_forms/images/post_create_error.png b/de/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/de/django_forms/images/post_create_error.png differ diff --git a/de/django_installation/README.md b/de/django_installation/README.md new file mode 100644 index 00000000000..e2fe6b6e527 --- /dev/null +++ b/de/django_installation/README.md @@ -0,0 +1,7 @@ +# Django-Installation + +> **Hinweis** Wenn du ein Chromebook verwendest, überspringe bitte dieses Kapitel und folge den Anweisungen im [Chromebook Setup](../chromebook_setup/README.md). +> +> **Hinweis:** Falls du dich bereits durch die [Installationsschritte](../installation/README.md) gearbeitet hast, gibt es keinen Grund dies erneut zu tun – du kannst direkt zum nächsten Kapitel springen! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/de/django_installation/instructions.md b/de/django_installation/instructions.md new file mode 100644 index 00000000000..3a84565b975 --- /dev/null +++ b/de/django_installation/instructions.md @@ -0,0 +1,229 @@ +> Ein Teil dieses Kapitels basiert auf den Tutorials von Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Teile dieses Kapitels basieren auf dem [django-marcador Tutorial](http://django-marcador.keimlink.de/) lizenziert unter der Creative Commons Attribution-ShareAlike 4.0 International License. Für das "django-marcador Tutorial" liegt das Urheberrecht bei Markus Zapke-Gründemann et al. + +## Virtuelle Umgebung + +Bevor wir mit der Installation von Django beginnen, lernen wir ein sehr hilfreiches Tool kennen, das uns hilft, unsere Arbeitsumgebung zum Coden sauber zu halten. Es ist möglich, diesen Schritt zu überspringen, aber wir legen ihn dir dennoch besonders ans Herz. Mit dem bestmöglichen Setup zu starten, wird dir in der Zukunft eine Menge Frust ersparen! + +Wir erzeugen eine virtuelle Arbeitsumgebung - ein **virtual environment** oder auch *virtualenv*. Das isoliert die Python-/Django-Setups verschiedener Projekte voneinander. Das bedeutet, dass deine Änderungen an einem Website-Projekt keine anderen Projekte beeinträchtigen, an welchen du sonst noch entwickelst. Klingt nützlich, oder? + +Du musst nur das Verzeichnis festlegen, in dem du das `virtualenv` erstellen willst; zum Beispiel dein Home-Verzeichnis. Auf Windows ist dies `C:\Users\Name` (`Name` ist dein Anmeldename/Login). + +> **HINWEIS:** Stelle auf Windows sicher, dass dieser Verzeichnisname keine Umlaute oder Sonderzeichen enthält. Falls dein Benutzername Umlaute enthält, verwende ein anderes Verzeichnis, zum Beispiel `C:\djangogirls`. + +In diesem Tutorial erstellen wir darin ein neues Verzeichnis `djangogirls`: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Wir erstellen eine virtuelle Umgebung namens `myvenv`. Das Kommando dazu lautet dann: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Um ein neues `virtualenv` zu erzeugen, musst du auf der Kommandozeile von Windows `python -m venv myvenv` ausführen. Das wird so aussehen: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +wobei `myvenv` der Name deines `virtualenv` ist. Du kannst auch irgend einen anderen Namen wählen, aber bleibe bei Kleinbuchstaben und verwende keine Leerzeichen, Umlaute oder Sonderzeichen. Eine Gute Idee ist, den Namen kurz zu halten. Du wirst ihn oft benutzen bzw. eingeben müssen! + + + + + +Auf Linux oder macOS kann ein `virtualenv` durch das Ausführen von `python3 -m venv myvenv` erzeugt werden. Das wird so aussehen: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` ist der Name deiner neuen virtuellen Arbeitsumgebung, deines neuen `virtualenv`. Du kannst auch irgend einen anderen Namen wählen, aber bleibe bei Kleinbuchstaben und verwende keine Leerzeichen. Eine Gute Idee ist, den Namen kurz zu halten. Du wirst ihn oft benutzen bzw. eingeben müssen! + +> **Hinweis:** Bei manchen Versionen von Debian/Unbuntu kann folgender Fehler auftreten: +> +> {% 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. +> +> +> Falls das auftritt, folge den Anweisungen in der Fehlermeldung und installiere das `python3-venv`-Paket: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **HINWEIS:** In manchen Debian/Ubuntu-Versionen kann das zu folgendem Fehler führen: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Falls das eintritt, verwende stattdessen den `virtualenv`-Befehl. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **HINWEIS:** Wenn du einen Fehler wie +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> erhältst, führe stattdessen Folgendes aus: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + + +## Mit der virtuellen Umgebung arbeiten + +Die obigen Kommandos erstellen ein Verzeichnis `myvenv` (bzw. den von Dir vergebenen Namen). Es enthält unsere virtuelle Arbeitsumgebung (im Wesentlichen ein paar Verzeichnisse und Dateien). + + + +Starte deine virtuelle Umgebung, indem du Folgendes eingibst: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **HINWEIS:** Auf Windows 10 kannst du in der Windows PowerShell die Fehlermeldung `execution of scripts is disabled on this system` erhalten. Öffne in diesem Fall eine weitere Windows PowerShell über "Als Administrator ausführen". Versuche dann, das folgende Kommando einzugeben, bevor du das virtualenv noch einmal aktivierst: +> +> {% 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 +> + + + +> **Hinweis:** Für Benutzerinnen des populären Editors VS Code, der einen PowerShell-basiertes Terminal eingebaut hat: Wenn du beim eingebauten Terminal bleiben willst, kannst du deine virtuelle Umgebung mit folgendem Befehl aktivieren: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> Der Vorteil davon ist, dass du nicht zwischen den Editor-Fenstern und den Kommandozeilen-Fenstern wechseln musst + + + + + +Starte deine virtuelle Umgebung, indem du eingibst: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Der Name `myvenv` muss mit dem von Dir gewählten Namen des `virtualenv` übereinstimmen! + +> **Anmerkung:** Manchmal ist das Kommando `source` nicht verfügbar. In diesen Fällen geht es auch so: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Du erkennst, dass dein `virtualenv` gestartet ist, wenn du vor der Eingabeaufforderung eine Klammer mit dem Namen deiner Umgebung siehst, `(myvenv)`. + +In deiner neuen virtuellen Umgebung wird automatisch die richtige Version von `python` verwendet. Du kannst also `python` statt `python3` eingeben. + +Ok, jetzt ist die erforderliche Umgebung startklar und wir können endlich Django installieren! + +## Django-Installation {#django} + +Da du nun dein `virtualenv` gestartet hast, kannst du Django installieren. + +Bevor wir damit loslegen, sollten wir jedoch sicherstellen, dass wir die neueste Version von `pip` haben, eine Software, mit Hilfe derer wir Django installieren werden: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Pakete mittels requirements-Datei installieren + +Eine requirements-Datei enthält eine Liste von Abhängigkeiten, die von `pip install` installiert werden sollen: + +Erstelle mit dem zuvor installierten Code-Editor eine Datei namens `requirements.txt` im Verzeichnis `djangogirls/`. Das machst du, indem du eine neue Datei in deinem Code-Editor öffnest und als `requirements.txt` im Ordner `djangogirls/` abspeicherst. Dein Ordner sieht jetzt so aus: + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +Schreibe in die Datei `djangogirls/requirements.txt` folgenden Text: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Führe nun `pip install -r requirements.txt` aus, um Django zu installieren. + +{% 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Wenn du einen Fehler auf einem Windowsrechner bekommst, überprüfe, ob der Pfadname deines Projekts Leerzeichen, Umlaute oder Sonderzeichen enthält (z.B. `C:\Users\User Name\djangogirls`). Ist das der Fall, dann verwende bitte einen anderen Ordner ohne Sonderzeichen, Umlaute oder Leerzeichen. (Vorschlag: `C:\djangogirls`). Erstelle ein neues virtualenv in einem neuen Verzeichnis, lösche danach das alte und wiederhohle den oben genannten Befehl. (Das Verzeichnis des virtualenv zu verschieben funktioniert dabei nicht, da virtualenv absolute Pfade verwendet.) + + + + + +> Es kann sein, dass deine Befehlszeile einfriert, wenn du versuchst Django zu installieren. Sollte das passieren, nutze folgenden Befehl anstelle des oben angegebenen: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Falls der pip-Aufruf auf Ubuntu 12.04 zu einer Fehlermeldung führt, rufe `python -m pip install -U --force-reinstall pip` auf, um die Installation von pip im virtualenv zu reparieren. + + + +Das war's! Du bist nun (endlich) bereit, deine erste Django-Anwendung zu starten! \ No newline at end of file diff --git a/de/django_models/README.md b/de/django_models/README.md new file mode 100644 index 00000000000..a0f1172dd14 --- /dev/null +++ b/de/django_models/README.md @@ -0,0 +1,201 @@ +# Django-Models + +Wir erstellen jetzt etwas, damit wir alle Posts von unserem Blog speichern können. Aber um das zu tun, müssen wir zunächst über `Objekte` sprechen. + +## Objekte + +Eine Herangehensweise an das Programmieren ist das so genannte `objektorientierte Programmieren`. Die Idee dahinter ist, dass wir Dinge und ihre Interaktionen untereinander modellieren können und nicht alles als langweilige Kette von Programmbefehlen hintereinander aufschreiben müssen. + +Was ist denn nun ein Objekt? Ein Objekt ist eine Sammlung von Eigenschaften und Aktionsmöglichkeiten, das anhand einer Vorlage (Klasse) erstellt wird. Das klingt erst einmal komisch, aber hier haben wir gleich ein Beispiel. + +Wenn wir zum Beispiel eine Katze modellieren wollen, erschaffen wir eine Objektvorlage `Katze`, eine Art Blaupause oder Schema, nach welcher zukünftig jedes spezifische Katzenobjekt erstellt werden kann. Die Vorlage beschreibt typische Eigenschaften von Katzen, z.B. `farbe`, `alter`, `stimmung` (also gut, schlecht oder müde ;)), `besitzerin` (die ein `Person`-Objekt ist oder – im Falle einer Streunerkatze – leer bleibt). + +Jedes Objekt einer `Katze` soll natürlich auch einige Aktionsmöglichkeiten besitzen: `schnurren`, `kratzen` oder `füttern` (hier bekäme die Katze ein bisschen `Katzenfutter`, welches wieder durch ein eigenes Objekt mit Eigenschaften wie `Geschmack` repräsentiert sein könnte). + + Katze + -------- + farbe + alter + stimmung + besitzerin + schnurren() + kratzen() + fuettern(katzen_futter) + + + Katzenfutter + -------- + geschmack + + +Der Gedanke dahinter ist also, echte Dinge mit Hilfe von Eigenschaften (genannt `Objekteigenschaften`) und Aktionsmöglichkeiten (genannt `Methoden`) im Programmcode zu beschreiben. + +Wie also modellieren wir Blogposts? Schließlich wollen wir ja einen Blog bauen, nicht wahr? + +Wir müssen folgende Fragen beantworten: Was ist ein Blogpost? Welche Eigenschaften sollte er haben? + +Nun, zum einen braucht unser Blogpost Text mit einem Inhalt und einen Titel, oder? Außerdem wäre es schön zu wissen, wer ihn geschrieben hat – wir brauchen also noch einen Autor. Schließlich wollen wir wissen, wann der Post geschrieben und veröffentlicht wurde. + + Post + -------- + title + text + author + created_date + published_date + + +Was für Dinge könnte man mit einem Blogpost machen? Es wäre schön, wenn wir eine `Methode` hätten, die den Post veröffentlicht, nicht wahr? + +Wir brauchen also eine `veröffentlichen`-Methode. + +Da wir jetzt wissen, was wir erreichen wollen, können wir nun damit anfangen, es in Django zu formulieren! + +## Ein Django-Model erstellen + +Da wir jetzt in etwa wissen, was ein Objekt ist, wollen wir ein Django-Model, eine Vorlage, für unsere Blogposts anlegen, nach welcher wir zukünftig unsere Blogpostobjekte erstellen können. + +Ein "Modell" ist in Django ein Objekt einer speziellen Sorte – eines das in der `Datenbank` gespeichert wird. Eine Datenbank ist eine Sammlung von Daten. Dies ist ein Ort, an dem du Informationen zu Benutzern, deinen Blogposts usw. speichern wirst. Wir benutzen dafür eine SQLite-Datenbank. Das ist die Voreinstellung in Django – für uns wird das erst einmal ausreichen. + +Du kannst dir ein Model wie eine Tabelle mit Spalten ("Feldern", englisch "fields") und Zeilen (Datensätzen) vorstellen. + +### Eine Applikation für unseren Blog + +Um unsere Webseite aufgeräumt zu halten, werden wir eine eigene Anwendung für unser Projekt erstellen, wir nennen das eine Applikation. Wir wollen uns gleich daran gewöhnen, alles ordentlich und sortiert zu halten. Um eine Applikation zu erstellen, müssen wir das folgende Kommando in der Konsole ausführen (wieder in dem `djangogirls`-Verzeichnis, in dem die `manage.py`-Datei liegt): + +{% filename %}macOS und Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Wie du sehen kannst, wurde ein neues `blog`-Verzeichnis erstellt, welches schon einige Dateien enthält. Das Verzeichnis und die Dateien unseres Projektes sollten jetzt so aussehen: + + djangogirls + ├── blog + │   ├── admin.py + │   ├── apps.py + │   ├── __init__.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + + +Nach dem Erstellen der Applikation müssen wir Django noch sagen, dass diese auch genutzt werden soll. Das tun wir in der Datei `mysite/settings.py` -- öffne diese in deinem Code-Editor. Wir suchen den Eintrag `INSTALLED_APPS` und fügen darin die Zeile `'blog.apps.BlogConfig',` direkt über der schließenden Klammer `]` ein. Danach sollte es also so aussehen: + +{% 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.apps.BlogConfig', +] +``` + +### Das Blogpost-Model + +Alle `Models` unserer Applikation werden in der `blog/models.py`-Datei definiert. Dies ist also der richtige Platz für unser Blogpost-Model. + +Öffnen wir also `blog/models.py` im Code-Editor, löschen alles darin und schreiben Code wie diesen: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Kontrolliere nochmal, dass du zwei Unterstriche (`__`) vor und hinter dem `str` gesetzt hast. Diese Konvention wird häufig in Python benutzt und manchmal nennen wir es "dunder" (kurz für "double-underscore"). + +Es sieht kompliziert aus, oder? Aber keine Sorge, wir werden erklären, was diese Zeilen bedeuten! + +Die Zeilen, die mit `from` oder `import` beginnen, sind Anweisungen, um Sachen aus anderen Dateien mitzunutzen. Anstatt häufig genutzten Code in jede Datei einzeln zu kopieren, binden wir ihn ein mit: `from... import ...`. + +`class Post(models.Model):` – Diese Zeile definiert unser Model (eine Objekt-Vorlage). + +- `class` ist ein spezielles Schlüsselwort, das angibt, dass wir hier eine Klasse, eine Vorlage für zukünftige Objekte, definieren wollen. +- `Post` ist der Name unseres Models. Wir können ihm auch einen anderen Namen geben (aber wir müssen Sonderzeichen und Leerzeichen vermeiden). Beginne einen Klassennamen immer mit einem Großbuchstaben. +- `models.Model` gibt an, dass das Post-Model ein Django-Model ist, so weiß Django, dass es in der Datenbank gespeichert werden soll. + +Jetzt definieren wir die Eigenschaften, über welche wir gesprochen haben: `title`, `text`, `created_date`, `published_date` und `author`. Um dies zu tun, müssen wir den Typ jedes Felds definieren. (Ist es Text? Eine Zahl? Ein Datum? Eine Beziehung zu einem anderen Objekt, z.B. einem Benutzer?) + +- `models.CharField` – so definierst du ein Textfeld mit einer limitierten Anzahl von Zeichen. +- `models.TextField` – so definierst du ein langes Textfeld ohne Grössenbeschränkung. Klingt doch perfekt für unsere Blogpostinhalte, oder? +- `models.DateTimeField` – ein Feld für einen Zeitpunkt (ein Datum und eine Uhrzeit). +- `models.ForeignKey` – definiert eine Verknüpfung/Beziehung zu einem anderen Model. + +Wir werden nicht den gesamten Code hier erklären, da das zu lange dauern würde. Du solltest einen Blick in die offizielle Django-Dokumentation werfen, wenn du mehr über Modelfelder und darüber wissen möchtest, wie man auch andere Dinge als die oben beschriebenen definiert (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field-types). + +Was ist mit `def publish(self):`? Das ist genau die `publish`-Methode zum Veröffentlichen unserer Blogposts, über die wir vorher bereits sprachen. `def` zeigt an, dass es sich nachfolgend um eine Funktion/Methode handelt, und `publish` ist der Name der Methode. Du kannst den Namen der Methode auch ändern, wenn du möchtest. Die Benennungsregel ist, dass wir Kleinbuchstaben verwenden, und anstatt Leerzeichen (die in Funktionsnamen nicht vorkommend dürfen) Unterstriche. Eine Methode, die einen Durchschnittspreis berechnet, könnte zum Beispiel `calculate_average_price` genannt werden. + +Oft geben Methoden einen Wert zurück (englisch: `return`). Ein Beispiel dafür ist die Methode `__str__`. In diesem Szenario, wenn wir `__str__()` aufrufen, bekommen wir einen Text (**string**) mit einem Blogpost-Titel zurück. + +Beachte, dass sowohl `def publish(self):` als auch `def __str__(self):` in unserer Klasse eingerückt sind. Mit der Einrückung sagen wir Python, dass diese Methoden Teil der Klasse sind. Ohne die Einrückung wären es für Python Funktionen ausserhalb der Klasse, was zu anderem Verhalten führen würde. + +Wenn dir über Methoden noch etwas nicht klar ist, dann zögere nicht, deinen Coach zu fragen! Wir wissen, dass es kompliziert ist, vor allem, wenn du gleichzeitig lernst, was Objekte und Funktionen sind. Aber hoffentlich sieht es für dich jetzt etwas weniger nach Magie aus! + +### Tabellen für Models in deiner Datenbank erstellen + +Als letzten Schritt wollen wir unser neues Model der Datenbank hinzufügen. Dazu müssen wir Django erst 'mal mitteilen, dass wir einige Änderungen an unserem Model vorgenommen haben. (Wir haben es eben erst erstellt!) Scheibe `python manage.py makemigrations blog` in dein Kommandozeilen-Fenster. Das sieht dann so aus: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Hinweis:** Denke daran, die Dateien nach dem Editieren zu speichern. Ansonsten führt dein Computer die vorherige Version aus, was zu unerwarteten Fehlermeldungen führen kann. + +Django hat eine Migrationsdatei für uns vorbereitet, die wir nun auf unsere Datenbank anwenden müssen. Schreibe `python manage.py migrate blog`. Die Ausgabe sollte so aussehen: + +{% 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 + + +Hurra! Unser Post-Model ist ab sofort in unserer Datenbank gespeichert! Es wäre doch schön, zu wissen, wie es aussieht, oder? Springe zum nächsten Kapitel, um es dir anzusehen! \ No newline at end of file diff --git a/de/django_orm/README.md b/de/django_orm/README.md new file mode 100644 index 00000000000..6621b90a1d9 --- /dev/null +++ b/de/django_orm/README.md @@ -0,0 +1,219 @@ +# Django-ORM und QuerySets + +In diesem Kapitel lernst du, wie sich Django mit der Datenbank verbindet und Daten darin speichert. Lass uns loslegen! + +## Was ist ein QuerySet? + +Zusammengefasst ist ein QuerySet eine Liste von Objekten eines bestimmten Models. QuerySets erlauben es dir, Daten aus der Datenbank zu lesen, zu filtern und zu sortieren. + +Am besten wir sehen uns das an einem Beispiel an. Versuchen wir's? + +## Django-Shell + +Öffne deine lokale Konsole (nicht in PythonAnywhere) und tippe dieses Kommando ein: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Das sollte angezeigt werden: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) >>> +``` + +Nun bist du in der interaktiven Konsole von Django. Die funktioniert wie der Python-Prompt, aber hat noch etwas zusätzliche Django-Magie. :) Du kannst hier auch alle Python-Befehle verwenden. + +### Alle Objekte + +Zunächst wollen wir alle unsere Blogposts ansehen. Das kannst du mit folgendem Kommando erreichen: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Hoppla! Eine Fehlermeldung ist erschienen. Sie sagt uns, dass Python "Post" nicht kennt. Und sie hat recht: Wir haben vergessen zu importieren! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Wir importieren das Model `Post` aus `blog.models`. Versuchen wir nochmal, alle Posts anzuzeigen: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Das ist eine Liste all der Posts, die wir zuvor lokal erstellt haben! Wir haben diese Posts mit der Django-Admin-Oberfläche erstellt. Aber nun wollen wir weitere Posts mit Python erstellen! Wie geht das also? + +### Objekt erstellen + +So erstellst du ein neues Post-Objekt in der Datenbank: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Allerdings fehlt noch eine Zutat: `me`. Wir müssen eine Instanz des Models `User` als Autor übergeben. Wie macht man das? + +Als Erstes müssen wir das User-Model importieren: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Welche User sind in unserer Datenbank vorhanden? Finde es damit heraus: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Das ist der Superuser, den wir vorhin erstellt haben! Lass uns jetzt eine Instanz des Users erstellen (passe diese Zeile an, so dass dein eigener Benutzername verwendet wird): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Wie du siehst, holen (`get`) wir jetzt ein `User`-Objekt mit einem `username` 'ola'. Prima! + +Jetzt können wir schließlich unseren Post erstellen: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Super! Wollen wir nachsehen, ob es funktioniert hat? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Da ist er, ein weiterer Post in der Liste! + +### Mehrere Posts hinzufügen + +Du kann jetzt nach Belieben weitere Blogposts hinzufügen, um ein Gefühl dafür zu bekommen, wie es funktioniert. Füge doch noch zwei, drei hinzu bevor du zum nächsten Teil übergehst. + +### Objekte filtern + +Eine wichtige Eigenschaft von QuerySets ist, dass die Einträge gefiltert werden können. Zum Beispiel wollen wir alle Posts finden, die der User Ola geschrieben hat. Dafür nehmen wir `filter` statt `all` in `Post.objects.all()`. In Klammern schreiben wir die Bedingung(en), die ein Blogpost erfüllen muss, damit ein er in unser Queryset kommt. So soll jetzt z.B. `author` gleich `me` sein, damit nur die Blogposts des Autors "me" herausgefiltert werden. In Django schreiben wir deshalb: `author=me`. Jetzt sieht unser Code folgendermaßen aus: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +Oder vielleicht wollen wir alle Posts haben, die das Wort "title" im `title`-Feld haben? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Anmerkung:** Zwischen `title` und `contains` befinden sich zwei Unterstriche (`__`). Das ORM von Django nutzt diese Regel, um Feldnamen ("title") und Operationen oder Filter ("contains") voneinander zu trennen. Wenn du nur einen Unterstrich benutzt, bekommst du einen Fehler wie "FieldError: Cannot resolve keyword title_contains". + +Du kannst auch eine Liste aller bereits publizierten Posts erhalten, indem wir nach allen Posts suchen, deren `published_date` in der Vergangenheit liegt: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Unglücklicherweise ist der Post, den wir über die Python-Konsole hinzugefügt haben, noch nicht veröffentlicht. Aber das können wir ändern! Als Erstes holen wir eine Instanz des Posts, den wir veröffentlichen wollen: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Dann publizieren wir ihn mit unserer `publish`-Methode: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Jetzt versuch nochmal, eine Liste von veröffentlichten Posts zu bekommen (drücke dreimal "Pfeil nach oben" und `enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Objekte ordnen + +Mit den QuerySets kannst du eine Liste auch nach bestimmten Kriterien ordnen. Lass uns das mit dem `created_date` Feld ausprobieren: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Wir können die Reihenfolge auch umdrehen, indem wir "`-`" davor schreiben: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Komplexe Queries durch Methoden-Verkettung + +Wie du gesehen hast, geben einige Methoden auf `Post.objects` ein QuerySet zurück. Die selben Methoden können wiederum auch auf einem QuerySet aufgerufen werden und geben dann ein neues QuerySet zurück. Das ermöglicht es, ihre Wirkung zu kombinieren, indem du die Methoden **verkettest**: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Dies ist wirklich mächtig und lässt dich ziemlich komplexe Abfragen schreiben. + +Cool! Jetzt bist du bereit für den nächsten Teil! Um die Konsole zu schließen, schreib das: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +``` \ No newline at end of file diff --git a/de/django_start_project/README.md b/de/django_start_project/README.md new file mode 100644 index 00000000000..002885116af --- /dev/null +++ b/de/django_start_project/README.md @@ -0,0 +1,260 @@ +# Dein erstes Django-Projekt! + +> Ein Teil dieses Kapitels basiert auf Tutorials der Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Teile dieses Kapitels basieren auf dem [django-marcador Tutorial](http://django-marcador.keimlink.de/) lizenziert unter Creative Commons Attribution-ShareAlike 4.0 International License. Für das "django-marcador Tutorial" liegt das Urheberrecht bei Markus Zapke-Gründemann et al. + +Wir werden einen kleinen Blog erstellen! + +Der erste Schritt ist, ein neues Django-Projekt zu starten. Im Grunde bedeutet das, dass wir einige Skripte ausführen werden, die Django zur Verfügung stellt, um ein Skelett eines Django-Projekts für uns zu erzeugen. Das Projekt beinhaltet einen Haufen von Verzeichnissen und Dateien, die wir später verwenden werden. + +Die Namen einiger Dateien und Verzeichnisse sind sehr wichtig für Django. Die Dateien, die erstellt werden, solltest du nicht umbenennen. Sie an eine andere Stelle zu verschieben, ist auch keine gute Idee. Django muss zwingend eine gewisse Struktur erhalten, um wichtige Dinge wiederzufinden. + +> Denk daran, alles in der "Virtualenv"-Umgebung auszuführen. Wenn du kein Präfix `(myvenv)` in deiner Konsole siehst, musst du deine Virtualenv-Umgebung aktivieren. Wie das gemacht wird, erklären wir im Kapitel **Django-Installation**, im Abschnitt **Arbeiten mit Virtualenv**. Zur Erinnerung: Gib dazu auf Windows `myvenv\Scripts\activate` ein, bzw. auf macOS oder Linux `source myvenv/bin/activate`. + + + +In deiner macOS- oder Linux-Konsole solltest du den folgenden Befehl ausführen; **vergiss den Punkt (`.`) am Ende nicht!** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Der Punkt `.` ist sehr wichtig, weil er dem Skript mitteilt, dass Django in deinem aktuellen Verzeichnis installiert werden soll. (Der Punkt `.` ist eine Schnellreferenz dafür.) +> +> **Hinweis:** Wenn du das oben angegebene Kommando eingibst, denk daran, nur das einzutippen, was mit `django-admin` anfängt. Der `(myvenv) ~/djangogirls$`-Teil hier ist nur ein Beispiel für die Eingabeaufforderung (den "Prompt") auf der Kommandozeile. + + + + + +Auf Windows solltest du den folgenden Befehl ausführen. **(Vergiss den Punkt (`.`) am Ende nicht!)**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Der Punkt `.` ist sehr wichtig, weil er dem Skript mitteilt, dass Django in deinem aktuellen Verzeichnis installiert werden soll. (Der Punkt `.` ist eine Schnellreferenz dafür.) +> +> **Hinweis:** Wenn du das oben angegebene Kommando eingibst, denk daran, nur das einzutippen, was mit `django-admin.exe` anfängt. Der `(myvenv) C:\Users\Name\djangogirls>`-Teil hier ist nur ein Beispiel für die Eingabeaufforderung (den "Prompt") auf der Kommandozeile. + + + +`django-admin.py` ist ein Skript, welches Verzeichnisse und Dateien für dich erstellt. Du solltest jetzt eine Verzeichnisstruktur haben, die folgendermaßen aussieht: + + djangogirls + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **Hinweis:** In deiner Verzeichnisstruktur wirst du auch den `myvenv`-Ordner sehen, den wir vorhin erzeugt haben. + +`manage.py` ist ein Script, das das Management deines Projektes unterstützt. Mit dem Script bist du unter anderem in der Lage, den Webserver auf deinem Rechner zu starten, ohne etwas Weiteres installieren zu müssen. + +Die Datei `settings.py` beinhaltet die Konfiguration deiner Website. + +Erinnerst du dich, als wir über den Postboten gesprochen haben, der überlegt, wohin er den Brief liefern soll? Die `urls.py` Datei beinhaltet eine Liste von Patterns (Mustern), die vom `urlresolver` benutzt werden. + +Lass uns kurz die anderen Dateien vergessen - wir werden sie nicht verändern. Denk aber dran, sie nicht versehentlich zu löschen! + +## Einstellungen anpassen + +Wir machen nun ein paar Änderungen in `mysite/settings.py`. Öffne die Datei mit dem Code-Editor, den du schon installiert hast. + +**Hinweis**: `settings.py` ist eine Datei wie jede andere. Du kannst sie aus deinem Code-Editor heraus öffnen, in dem du im "Datei"-Menü die "Öffnen"-Aktion wählst. So solltest du das normale Fenster zur Dateiauswahl bekommen, in dem du zur `settings.py`-Datei navigieren und sie auswählen kannst. Stattdessen kannst du die Datei aber auch öffnen, in dem du im Dateimanager zum "djangogirls"-Ordner navigierst und auf die Datei rechtsklickst. Wähle dann deinen Code-Editor aus der Liste der "Öffnen mit"-Programme. Das ist wichtig, da du andere Programme installiert haben könntest, die diese Datei zwar öffnen können, aber die dich die Datei nicht editieren lassen würden. + +Es wäre schön, wenn die richtige Zeit auf deiner Webseite eingestellt ist. Gehe zur [Zeitzonen-Liste auf Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) und kopiere die für dich geltende Zeitzone (Spalte "TZ"), z.B. `Europe/Berlin`. + +Suche in `settings.py` die Zeile, die `TIME_ZONE` enthält und ändere sie ab, um deine eigene Zeitzone auszuwählen. Zum Beispiel: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Ein Sprachkennung besteht aus einem Kürzel für die Sprache, z.B. `en` für Englisch oder `de` für Deutsch, und einem Länder-Kürzel z.B. `de` für Deutschland oder `ch` für die Schweiz. Falls Englisch nicht deine Muttersprache ist, kannst du damit die Standard-Knöpfe und -Meldungen von Django auf deine Sprache wechseln. Der "Cancel"-Knopf würde dann in diese Sprache übersetzt (und z.B. bei Deutsch mit "Abbrechen" beschriftet). [Django enthält viele fix-fertige Übsersetzungen](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code). + +Wenn du eine andere Sprache als Englisch willst, ändere die Sprachkennung, indem du die folgende Zeile änderst: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Ausserdem müssen wir einen Pfad für statische Dateien festlegen. (Über statische Dateien und CSS lernst du später in diesem Tutorial etwas.) Geh hinunter zum *Ende* der Datei und füge direkt unter dem `STATIC_URL`-Eintrag einen neuen Eintrag namens `STATIC_ROOT` ein: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Wenn `DEBUG` auf `True` gesetzt ist und `ALLOWED_HOSTS` leer, dann wird der "Host" gegen `['localhost', '127.0.0.1', '[::1]']` validiert. Unser Hostname auf PythonAnywhere, wo wir unsere Anwendung deployen werden, würde da nicht passen. Deswegen ändern wir folgende Einstellung: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Hinweis**: Wenn du ein Chromebook verwendest, füge noch diese Zeile am Ende deiner settings.py-Datei hinzu: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Falls du Cloud9 benutzt, füge auch `.amazonaws.com` zu den `ALLOWED_HOSTS` hinzu +> +> Wenn du dein Projekt auf `Glitch.com` hostest, dann lass uns den Django-Sekret-Key schützen, der vertraulich bleiben muss (andernfalls könnte jeder, der dein Projekt remixt, diesen sehen): +> +> - Zuerst erstellen wir einen zufälligen geheimen Schlüssel. Öffne erneut das Glitch-Terminal und gib den folgenden Befehl ein: +> +> {% filename %}Kommandozeile{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> Das sollte einen langen zufälligen String ausgeben, der perfekt für die Verwendung als geheimer Schlüssel für deine brandneue Django-Website geeignet ist. Wir werden diesen Schlüssel jetzt in eine Datei namens `.env` einfügen, die Glitch nur dir als Besitzerin der Website anzeigen wird. +> +> - Erstelle eine Datei namens `.env` im Wurzelverzeichnis deines Projekts und füge folgenden Inhalt ein: +> +> {% filename %}.env{% endfilename %} +> +> ```bash +> # Hier, innerhalb der einfachen Anführungszeichen, kannst den oben erzeugten zufälligen Schlüssel einfügen +> SECRET='3!0k#7ds5mp^-x$lqs2%le6v97h#@xopab&oj5y7d=hxe511jl' +> ``` +> +> - Aktualisiere dann die Django-Einstellungen-Datei, um diesen geheimen Wert einzufügen zu lassen und lege den Django-Webseitennamen fest: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - Und etwas weiter unten in derselben Datei geben wir den Namen deiner neuen Glitch-Website ein: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> Der Wert `PROJECT_DOMAIN` wird automatisch von Glitch generiert. Er wird dem Namen deines Projekts entsprechen. + +## Eine Datenbank erstellen + +Es gibt viele verschiedene Datenbank Programme, welche die Daten unserer Website verwalten können. Wir werden die Standard-Datenbanksoftware nehmen, `sqlite3`. + +Das sollte schon in der `mysite/settings.py`-Datei eingestellt sein: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Um eine Datenbank für unseren Blog zu erstellen, müssen wir folgenden Befehl in der Konsole ausführen (Dazu müssen wir in dem `djangogirls`-Verzeichnis sein, in dem sich auch die `manage.py`-Datei befindet). Wenn alles glatt läuft, sollte das so aussehen: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +Und wir sind fertig! Zeit, unseren Webserver zu starten, um zu sehen, ob unsere Website funktioniert! + +## Den Webserver starten + +Kontrolliere, dass du in dem Verzeichnis bist, in dem die `manage.py`-Datei liegt (das `djangogirls`-Verzeichnis). Wir starten den Webserver, indem wir in der Konsole `python manage.py runserver` ausführen: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Wenn du ein Chromebook verwendest, benutze stattdessen diesen Befehl: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +oder wenn du Glitch verwendest, diesen: + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +Wenn du Windows benutzt und dies mit dem `UnicodeDecodeError` fehlschläft, verwende diesen Befehl: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Jetzt wollen wir schauen, ob unsere Website funktioniert: Öffne deinen Browser (Firefox, Chrome, Safari, Edge oder was du sonst nutzt) und gib diese Adresse ein: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Wenn du ein Chromebook und Cloud9 verwendest, dann klicke stattdessen die URL im erschienenen Fenster in der oberen rechten Ecke des Kommandozeilenfensters, in dem der Webserver läuft. Die URL sollte etwa so aussehen: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +oder auf Glitch: + + https://name-deines-glitch-projects.glitch.me + + +Glückwunsch! Du hast gerade deine erste Website erstellt und sie auf deinem Webserver laufen! Ist das nicht toll? + +![Installation hat funktioniert!](images/install_worked.png) + +Beachte, dass ein Terminalfenster immer nur eine Sache zur selben Zeit erledigen kann, und in dem Terminalfenster, was du vorhin geöffnet hast, läuft gerade der Webserver. Und solange der Webserver läuft und auf einkommende Anfragen wartet, akzeptiert das Terminal zwar Texteingaben, aber es wird keine neuen Befehle ausführen. + +> Wie Webserver funktionieren, haben wir im Kapitel **"Wie das Internet funktioniert"** angesehen. + +Um weitere Kommandos einzugeben, während der Webserver läuft, öffne ein neues Kommandozeilen-Fenster und aktiviere dort deine Virtualenv-Umgebung. Siehe [Einführung in die Kommandozeile](../intro_to_command_line/README.md), um nachzulesen, wie du ein zweites Kommandozeilen-Fenster öffnen kannst. Um den Webserver zu stoppen, wechsel zurück in das Fenster, in dem er läuft, und drücke STRG+C - Steuerung und C gleichzeitig. (In Windows kann es sein, dass du STRG und "Pause"-Taste drücken musst). + +Bereit für den nächsten Schritt? Es wird Zeit, ein paar Inhalte hinzuzufügen! \ No newline at end of file diff --git a/de/django_start_project/images/install_worked.png b/de/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/de/django_start_project/images/install_worked.png differ diff --git a/de/django_templates/README.md b/de/django_templates/README.md new file mode 100644 index 00000000000..3366184c03e --- /dev/null +++ b/de/django_templates/README.md @@ -0,0 +1,108 @@ +# Django-Templates + +Es wird Zeit, ein paar Daten anzuzeigen! Django bringt dafür bereits ein paar sehr hilfreiche **Template-Tags** mit. + +## Was sind Template-Tags? + +Also, in HTML kann man nicht wirklich Python-Code schreiben, weil es der Browser nicht verstehen würde. Denn der kennt nur HTML. Wir wissen, dass HTML ziemlich statisch ist, während Python dynamischer ist. + +Die **Django-Template-Tags** erlauben uns, Python-artige Dinge ins HTML zu bringen, so dass man einfach und schnell dynamische Websites erstellen kann. Super! + +## Anzeigen des Post-List-Templates + +Im vorangegangen Kapitel haben wir unserem Template in der `posts`-Variable eine Liste von Posts übergeben. Diese wollen wir jetzt in HTML anzeigen. + +Um eine Variable in einem Django-Template darzustellen, nutzen wir doppelte, geschweifte Klammern mit dem Namen der Variable darin, so wie hier: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Versuche das in deinem `blog/templates/blog/post_list.html` Template. Öffne es in deinem Code-Editor und ersetze die `
`-Abschnitte mit `{{ posts }}`. Speichere die Datei und aktualisiere die Seite, um die Ergebnisse anzuzeigen. + +![Abbildung 13.1](images/step1.png) + +Wie du siehst, haben wir nun das: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Das heißt, Django versteht es als Liste von Objekten. Kannst du dich noch an die Einführung von Python erinnern, wie man Listen anzeigen kann? Ja, mit for-Schleifen! In einem Django-Template benutzt du sie so: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +    {{ post }} +{% endfor %} +``` + +Versuch das in deinem Template. + +![Abbildung 13.2](images/step2.png) + +Es funktioniert! Aber wir wollen, dass die Posts so wie die statischen Posts angezeigt werden, die wir vorhin im **Einführung in HTML**-Kapitel erstellt haben. Du kannst HTML und Template Tags mischen. Unser `body` sollte dann so aussehen: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Alles, was du zwischen `{% for %}`und `{% endfor %}` schreibst, wird für jedes Objekt in der Liste wiederholt. Aktualisiere deine Seite:{% endraw %} + +![Abbildung 13.3](images/step3.png) + +Ist dir aufgefallen, dass wir diesmal eine etwas andere Notation benutzen haben (`{{ post.title }}` oder `{{ post.text }}`)? Wir greifen auf Daten von jedem Feld unseres `Post`-Models zu. Außerdem leitet das `|linebreaksbr` den Text der Posts durch einen Filter, um Zeilenumbrüche in Absätze umzuwandeln. + +## Und zum Schluss + +Es wäre gut zu sehen, ob deine Website noch immer im öffentlichen Internet funktioniert, richtig? Lass uns versuchen, unsere Aktualisierungen wieder zu PythonAnywhere hochzuladen. Hier ist eine Zusammenfassung der Schritte… + +* Schiebe zuerst deinen Code auf GitHub + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Dann logg dich wieder bei [PythonAnywhere](https://www.pythonanywhere.com/consoles/) ein, geh zu deiner **Bash-Konsole** (oder starte eine neue) und gib ein: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(Denk daran, `` durch deine tatsächliche PythonAnywhere-Subdomain zu ersetzen - ohne die spitzen Klammern.) + +* Spring anschließend rüber zur [Seite "Web"](https://www.pythonanywhere.com/web_app_setup/) und klick auf **Neu laden** in deinem Browser. (Um von der Konsolen-Seite aus zu anderen PythonAnywhere-Seiten zu gelangen, benutze den Menü-Knopf in der rechten oberen Ecke.) Ein Update sollte auf https://subdomain.pythonanywhere.com live sein -- guck's dir im Browser an! Wenn die Blogposts auf deiner PythonAnywhere-Seite anders sind als die auf deinem lokalen Server, ist das in Ordnung so. Die Datenbanken auf deinem lokalen Computer und auf PythonAnywhere werden nicht zusammen mit den restlichen Dateien abgeglichen. + +Glückwunsch! Nun kannst du dich daran machen, neue Posts in deinem Django Admin zu erstellen (denk daran, auch ein published_date einzufügen!). Stell sicher, dass du im Django-Admin der PythonAnywhere-Seite https://subdomain.pythonanywhere.com/admin arbeitest. Dann aktualisiere die Seite und schau nach, ob die Posts dort erscheinen. + +Funktioniert super? Wir sind so stolz auf dich! Steh kurz auf und geh ein Stück weg vom Computer. Du hast dir eine Pause verdient :) + +![Abbildung 13.4](images/donut.png) \ No newline at end of file diff --git a/de/django_templates/images/donut.png b/de/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/de/django_templates/images/donut.png differ diff --git a/de/django_templates/images/step1.png b/de/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/de/django_templates/images/step1.png differ diff --git a/de/django_templates/images/step2.png b/de/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/de/django_templates/images/step2.png differ diff --git a/de/django_templates/images/step3.png b/de/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/de/django_templates/images/step3.png differ diff --git a/de/django_urls/README.md b/de/django_urls/README.md new file mode 100644 index 00000000000..728b50c8461 --- /dev/null +++ b/de/django_urls/README.md @@ -0,0 +1,103 @@ +# Django-URLs + +Gleich werden wir unsere erste Website basteln: eine Homepage für deinen Blog! Zuerst sollten wir uns jedoch mit Django URLs beschäftigen. + +## Was ist eine URL? + +Eine URL ist eine Web-Adresse. Jedes Mal, wenn du eine Website besuchst, kannst du eine URL sehen - sie ist in der Adressleiste des Browsers sichtbar. (Ja! `127.0.0.1:8000` ist eine URL! Und `https://djangogirls.org` ist auch eine URL.) + +![URL](images/url.png) + +Jede Seite im Internet braucht ihre eigene URL. Dadurch weiß deine Applikation, was sie dem Nutzer, der eine URL öffnet, zeigen soll. In Django verwenden wir eine sogenannte `URLconf` (URL-Konfiguration). URLconf ist eine Ansammlung von Mustern, die Django mit der empfangenen URL abgleicht, um die richtige View zu finden, das heißt, um letztlich die richtige Seite für den Nutzer anzuzeigen. + +## Wie funktionieren URLs in Django? + +Öffne die `mysite/urls.py`-Datei in deinem Code-Editor nach Wahl und schaue dir an, wie sie aussieht: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Wie du siehst, hat Django hier schon etwas für uns eingefügt. + +Zeilen zwischen dreifachen Gänsefüßchen (`'''` oder `"""`) heißen Docstrings (Kommentare) - man kann sie am Anfang der Datei, Klasse oder Methode platzieren, um zu beschreiben, was sie tut. Sie werden von Python nicht ausgeführt. + +Die admin-URL, die du im vorangegangenen Kapitel bereits besucht hast, ist schon da: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Diese Zeile bedeutet, dass Django für jede URL, die mit `admin/` beginnt, die entsprechende *View* finden wird. Hier wird mit admin-site.urls eine ganze Sammlung von admin-URLs referenziert. Dadurch müssen nicht alle in dieser kleinen Datei aufgeführt werden und sie bleibt lesbarer und übersichtlicher. + +## Deine erste Django-URL! + +Es wird Zeit, unsere erste URL zu erstellen! Wir wollen, dass 'http://127.0.0.1:8000/' die Homepage unseres Blogs wird und eine Liste unserer Posts zeigt. + +Wir wollen auch, dass die `mysite/urls.py`-Datei sauber bleibt. Deshalb importieren wir die URLs unserer `Blog`-Applikation in die `mysite/urls.py`-Hauptdatei. + +Also los: Füge eine Zeile hinzu, die `blog.urls` importiert. Ausserdem wirst du die Zeile `from django.urls…` ändern müssen, da wir hier die Funktion `include` verwenden, die du in dieser Zeile noch importieren musst. + +Deine `mysite/urls.py`-Datei sollte jetzt so aussehen: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django wird nun alle Aufrufe von 'http://127.0.0.1:8000/' auf `blog.urls` umleiten und dort nach weiteren Anweisungen schauen. + +## blog.urls + +Erstelle eine neue leere Datei namens `urls.py` im Verzeichnis `blog` und öffne sie im Code-Editor. Alles klar! Füge folgende zwei Zeilen ein: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Hier importieren wir die Django-Funktion `path` und alle unsere `views` aus unserer `blog`-Applikation. (Wir haben noch keine, aber dazu kommen wir gleich!) + +Jetzt können wir unser erstes URL-Muster hinzufügen: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Wie du siehst, fügen wir nun eine `view` mit dem Namen `post_list` zur Root-URL hinzu. Leere Zeichenfolgen passen auf dieses Muster und der Django-URL-Resolver ignoriert den Domain-Namen (z.B. http://127.0.0.1:8000/), der im vollständigen Pfad voransteht. Dieses Muster sagt Django also, dass `views.post_list` das gewünschte Ziel ist, wenn jemand deine Website über 'http://127.0.0.1:8000/' aufruft. + +Der letzte Teil `name='post_list'` ist der Name der URL, der genutzt wird, um die View zu identifizieren. Er kann identisch mit dem Namen der View sein, aber es kann auch ein komplett anderer sein. Wir werden später die Namen der URLs im Projekt benutzen. Daher ist es wichtig, jede URL in der App zu benennen. Wir sollten außerdem versuchen, eindeutige und einfach zu merkende URL-Namen zu wählen. + +Wenn du jetzt versuchst, http://127.0.0.1:8000/ aufzurufen, dann erscheint eine Meldung der Art "Webseite nicht verfügbar". Das erscheint deshalb, weil der Server nicht mehr läuft. (Erinnerst du dich noch, `runserver` eingegeben zu haben?) Schau mal in deiner Server-Konsole nach und finde heraus, warum der Server nicht mehr läuft. + +![Error](images/error1.png) + +Die Konsole zeigt einen Fehler, aber keine Sorge – der ist eigentlich ziemlich nützlich: Er sagt dir, dass **kein Attribut 'post_list'** vorhanden ist. Das ist der Name der *View*, die Django zu finden und zu verwenden versucht, aber wir haben sie noch gar nicht erstellt. In diesem Zustand wird dein `/admin/` auch nicht funktionieren. Keine Sorge, das regeln wir gleich. Wenn du eine andere Fehlermeldung siehst, versuche es nochmal nach einem Neustart des Webservers. Stoppe dazu den Webserver, indem du Strg+C drückst (die Strg- bzw. Ctrl- und die C-Taste zusammen). Auf Windows musst du evtl. Strg+Untbr (bzw. Ctrl+Break) drücken. Dann musst du den Webserver mittels des Kommandos `python manage.py runserver` erneut starten. + +> Wenn du mehr über Django-URLconfs lernen willst, dann öffne die offizielle Dokumentation: https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/de/django_urls/images/error1.png b/de/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/de/django_urls/images/error1.png differ diff --git a/de/django_urls/images/url.png b/de/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/de/django_urls/images/url.png differ diff --git a/de/django_views/README.md b/de/django_views/README.md new file mode 100644 index 00000000000..ac71c660d35 --- /dev/null +++ b/de/django_views/README.md @@ -0,0 +1,44 @@ +# Django-Views - leg los! + +Es wird jetzt Zeit, den Bug, den wir im letzten Kapitel erzeugt haben, zu beheben! :) + +In der *View* schreiben wir die Logik unserer Anwendung. So werden Informationen aus dem `Model` abgefragt werden, welches du zuvor erzeugt hast und diese werden an ein `Template` weitergeben. Ein Template erzeugen wir im nächsten Kapitel. Views sind Python-Funktionen, die ein bisschen komplizierter sind als die, die wir im Kapitel **Einführung in Python** kennengelernt haben. + +Views kommen in die `views.py` Datei. Wir fügen nun also unsere *Views* zur Datei `blog/views.py` hinzu. + +## blog/views.py + +OK, wir öffnen jetzt diese Datei in unserem Code-Editor und schauen, was darin steht: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +OK, hier steht noch nicht so viel. + +Denk daran, Zeilen mit einem `#` am Anfang sind Kommentare – das bedeutet, dass diese Zeilen von Python nicht ausgeführt werden. + +Lass uns eine *View* erstellen, wie der Kommentar das vorschlägt. Füge die folgende Mini-View unter dem Kommentar ein: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Wie du siehst, definieren wir eine Funktion (`def`) mit dem Namen `post_list`, die den Parameter `request` entgegen nimmt und die mit `return` den Rückgabewert einer anderen Funktion namens `render` zurück gibt. Letztere wird unser Template `blog/post_list.html` "rendern" (zu einer fertigen HTML-Seite zusammensetzen). + +Speichere die Datei, öffne http://127.0.0.1:8000/ im Browser und schau nach, was wir jetzt haben. + +Einen anderen Fehler! Lies, was da jetzt los ist: + +![Error](images/error.png) + +Das zeigt, dass der Server zumindest wieder läuft, aber es sieht immer noch nicht richtig aus, oder? Mach dir keine Sorgen, es ist nur eine Fehlerseite, nichts zu befürchten! Genau wie die Fehlermeldungen in der Konsole sind auch die hier ziemlich nützlich. Du erhältst den Hinweis *TemplateDoesNotExist*, also dass es das Template nicht gibt. Lass uns diesen Bug beheben, indem wir im nächsten Kapitel ein Template erstellen! + +> Erfahre mehr über Django Views in der offiziellen Dokumentation: https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/de/django_views/images/error.png b/de/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/de/django_views/images/error.png differ diff --git a/de/domain/README.md b/de/domain/README.md new file mode 100644 index 00000000000..da6c9139258 --- /dev/null +++ b/de/domain/README.md @@ -0,0 +1,51 @@ +# Die Domain + +Heroku hat dir eine Domain bereitgestellt, aber sie ist sehr lang, schwer zu merken und einfach nur hässlich. Es wäre doch toll, einen Domainnamen zu haben, der kürzer und einfacher zu merken ist, oder? + +In diesem Kapitel werden wir dir beibringen, wie man eine Domain kauft und sie mit Heroku verknüpft! + +## Wo registriert man eine Domain? + +Eine typische Domain kostet in etwa 15 $ pro Jahr. Es gibt günstigere und teurere Varianten, je nach Provider. Es gibt viele Unternehmen, bei denen du Domains kaufen kannst: eine einfache [Google-Suche](https://www.google.com/search?q=register%20domain) wird dir hunderte Vorschläge liefern. + +Unser Favorit ist [I want my name](https://iwantmyname.com/). Die werben mit "einfachem Domainmanagement" und es ist wirklich simpel. + +## Wie registriert man eine Domain auf IWantMyName? + +Gehe auf [iwantmyname](http://iwantmyname.com) und tippe eine Domain, die du haben möchtest, in das Suchfeld. + +![](images/1.png) + +Du solltest jetzt eine Liste mit all den verfügbaren Domains sehen, die zu deinem Wunschnamen passen. Wie du sehen kannst, zeigt dir ein Smiley an, wenn eine Domain verfügbar ist und ein trauriges Gesicht, wenn sie bereits vergeben ist. + +![](images/2.png) + +Wir haben beschlossen, `djangogirls.in` zu kaufen: + +![](images/3.png) + +Gehe zur Kasse. Du solltest dich jetzt bei IwantMyName anmelden, wenn du nicht bereits ein Konto dort hast. Danach gib deine Kreditkarteninformationen ein und kaufe deine Domain! + +Im Anschluss klickst du auf `Domains` im Menu und wählst deine neu gekaufte Domain aus. Dann suche und klicke auf den `manage DNS records` Link: + +![](images/4.png) + +Jetzt musst du dieses Formular finden: + +![](images/5.png) + +Fülle es mit den folgenden Details aus: - Hostname: www - Type: CNAME - Value: deine Heroku-Domain (z.B. djangogirls.herokuapp.com) - TTL: 3600 + +![](images/6.png) + +Klicke auf "Hinzufügen" und speichere die Änderungen am unteren Ende. + +Es kann einige Stunden dauern, bevor deine Domain lauffähig ist, hab etwas Geduld! + +## Konfigurieren der Domain in Heroku + +Du musst Heroku angeben, dass du deine eigene Domain benutzen möchtest. + +Gehe zum [Heroku Dashboard](https://dashboard.heroku.com/apps), logge dich auf dein Heroku-Konto ein und wähle deine App aus. Dann geh in das Einstellungsmenu und füge deine Domain in der `Domains` Sektion ein und speichere deine Änderungen. + +Das wars! diff --git a/de/dynamic_data_in_templates/README.md b/de/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..4af9e9bf509 --- /dev/null +++ b/de/dynamic_data_in_templates/README.md @@ -0,0 +1,84 @@ +# Dynamische Daten in Templates + +Wir haben nun schon einige Dinge an verschiedenen Orten fertiggestellt: das `Post`-Model ist in der `models.py` definiert, wir haben die `post_list` in der `views.py` und das Template hinzugefügt. Aber wie schaffen wir es nun, dass unsere Posts wirklich im HTML-Template erscheinen? Denn wir wollen ja erreichen, dass bestimmte Inhalte (die in der Datenbank gespeicherten Models) auf schöne Weise in unserem Template anzeigt werden, richtig? + +Genau dafür sind die *Views* zuständig: die Verbindung zwischen den Models und den Templates. In unserer `post_list`-View müssen wir die Models, die wir anzeigen wollen, hernehmen und diese dem Template übergeben. In einer *View* entscheiden wir, was (welches Model) wir in einem Template anzeigen werden. + +Okay, und wie machen wir das jetzt? + +Wir öffnen unsere Datei `blog/views.py` in unserem Code-Editor. Bisher sieht unsere `post_list`-*View* folgendermaßen aus: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Erinnerst du dich, als wir davon gesprochen haben, dass wir den Code in verschiedene Dateien einfügen müssen? Jetzt ist es an der Zeit, das Model, dass wir in `models.py` beschrieben haben, einzufügen. Wir fügen den Befehl `from .models import Post` folgendermaßen ein: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Der Punkt vor `models` bedeutet *aktuelles Verzeichnis* oder *aktuelle Anwendung*. Die Dateien `views.py` und `models.py` liegen im selben Verzeichnis. Deswegen können wir `.` und den Namen der Datei (ohne `.py`) benutzen. Dann ergänzen wir für den Import den Namen des Models (`Post`). + +Und nun? Um vom `Post`-Model die tatsächlichen Blogposts zu erhalten, brauchen wir etwas, das `QuerySet` heißt. + +## QuerySet + +Dir sollte schon ungefähr klar sein, wie QuerySets funktionieren. Wir haben darüber im Kapitel [Django-ORM und QuerySets](../django_orm/README.md) gesprochen. + +Wir wollen nun also eine Liste von publizierten Blogposts ausgeben, sortiert nach dem `published_date`, oder? Das haben wir bereits im Kapitel QuerySets gemacht! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Öffnen wir also die Datei `blog/views.py` im Code-Editor und setzen wir dieses Stück Code in die Funktion `def post_list(request)` ein. Aber vergiss nicht, zuerst `from django.utils import timezone` hinzufügen: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Um unser QuerySet auf der Blogpost-Liste unseres Blogs anzuzeigen, bleiben noch zwei Dinge zu tun: + +1. Das QuerySet `posts` dem Template-Kontext übergeben, in dem wir den `render`-Funktionsaufruf ändern. Das werden wir jetzt tun. +2. Das Template abändern, um das QuerySet `posts` anzuzeigen. Das werden wir in einem späteren Kapitel behandeln. + +Beachte, dass wir eine *Variable* für unser QuerySet erstellt haben: `posts`. Das ist sozusagen der Name unseres QuerySets. Ab jetzt bezeichnen wir das QuerySet mit diesem Namen. + +In der `render`-Funktion haben wir einen Parameter `request` (also alles, was wir vom User über das Internet bekommen) und einen weiteren Parameter, der den Template-Namen (`'blog/post_list.html'`) angibt. Der letzte Parameter, `{}`, ist eine Stelle, in der wir weitere Dinge hinzufügen können, die das Template dann benutzen kann. Wir müssen diesen einen Namen geben (wir verwenden einfach wieder `'posts'`). :) Es sollte nun so aussehen: `{'posts': posts}`. Bitte achte darauf, dass der Teil vor `:` ein String ist; das heißt, du musst ihn mit Anführungszeichen `''` umschliessen. + +Schließlich sollte deine `blog/views.py` Datei folgendermaßen aussehen: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Das war's! Zeit, zurück zum Template zu gehen und das QuerySet anzuzeigen! + +Wenn du mehr über QuerySets in Django erfahren willst, dann sieh unter diesem Link nach: https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/de/extend_your_application/README.md b/de/extend_your_application/README.md new file mode 100644 index 00000000000..546a3170994 --- /dev/null +++ b/de/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Erweitere deine Anwendung + +Wir haben bereits die verschiedenen Schritte für die Erstellung unserer Website abgeschlossen: Wir wissen, wie man Models, URLs, Views und Templates schreibt. Wir wissen auch, wie wir unsere Website verschönern. + +Zeit zu üben! + +Das erste, was unser Blog braucht, ist eine Seite, auf der ein einzelner Blogpost dargestellt wird, oder? + +Wir haben bereits ein `Post`-Model, deshalb brauchen wir nichts zur `models.py` hinzufügen. + +## Erstelle eine Template-Verknüpfung + +Wir beginnen damit, einen Link in der `blog/templates/blog/post_list.html`-Datei zu erstellen. Öffne sie im Code-Editor, und bisher sollte sie etwa so aussehen: {% 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 %} +``` + +{% raw %}Wir wollen einen Link vom Titel eines Posts in der Post-Liste zur Detailseite des jeweiligen Posts haben. Ändern wir `

{{ post.title }}

`, so dass es zu der Detailseite verlinkt:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Es ist an der Zeit, das mysteriöse `{% url 'post_detail' pk=post.pk %}` zu erklären. Wie du dir wahrscheinlich schon denkst, bedeutet `{% %}`, dass wir Django-Template-Tags verwenden. Dieses Mal verwenden wir eines, das eine URL für uns erzeugen wird! {% endraw %} + +Der `post_detail`-Teil bedeutet, dass Django eine URL in `blog/urls.py` mit dem Namen name=post_detail erwartet. + +Und was ist mit `pk=post.pk`? `pk` ist die Abkürzung für primary key (zu Deutsch: Primär-Schlüssel), ein eineindeutiges Identifikationsmerkmal zu jedem Eintrag in einer Datenbank. Jedes Django-Modell hat ein Feld, das als Primär-Schlüssel dient. Welchen Namen dieses Feld auch haben mag, es kann ebenfalls als "pk" referenziert werden. Da wir keinen Primär-Schlüssel in unserem `Post`-Modell angelegt haben, erstellt Django einen für uns (standardmäßig ist dies ein Feld namens "id", welches eine Zahl enthält, die mit jedem weiteren Eintrag nach oben gezählt wird, z.B. 1, 2, 3) und fügt ihn als Feld zu jedem unserer Posts hinzu. Wir greifen auf den Primär-Schlüssel zu, indem wir `post.pk` schreiben, genauso wie wir auf andere Felder (`title`, `author`, usw.) in unserem `Post`-Objekt zugreifen! + +Wenn wir jetzt http://127.0.0.1:8000/ aufrufen, erhalten wir einen Fehler (wie erwartet, da wir ja noch keine URL oder *View* für `post_detail` erstellt haben). Er wird so aussehen: + +![NoReverseMatch Error](images/no_reverse_match2.png) + +## Erstelle eine URL für die Post-Detailseite + +Lass uns eine URL in `urls.py` für unsere `post_detail`-*View* erstellen! + +Wir wollen, dass unsere erste Blogpost-Detailseite unter dieser **URL** angezeigt wird: http://127.0.0.1:8000/post/1/ + +Lass uns eine URL in der Datei `blog/urls.py` anlegen, um Django auf die *View* `post_detail` zu verweisen, welche dann den ganzen Blogpost anzeigen wird. Öffne die Datei `blog/urls.py` im Code-Editor und füge die Zeile `path('post//', views.post_detail, name='post_detail'),` hinzu, so dass die Datei wie folgt aussieht: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Der Teil `post//` definiert ein URL-Muster – wir erklären es dir: + +- `post/` heißt, dass die URL mit dem Wort **post** beginnen sollte, gefolgt von einem **/**. So weit, so gut. +- `` – Dieser Teil ist schwieriger. Er bedeutet, dass Django eine Ganzzahl (einen Integer-Wert) erwartet und diese in Form einer Variablen namens `pk` einer View weitergibt. +- `/` – dann brauchen wir vor dem Abschluss der URL wieder einen **/**. + +Wenn du also `http://127.0.0.1:8000/post/5/` in deinen Browser eingibst, wird Django verstehen, dass du nach einer *View* suchst, die `post_detail` heißt, und wird der *View* die Information weitergeben, dass `pk` dabei `5` sein soll. + +So, jetzt haben wir der `blog/urls.py` ein neues URL-Muster hinzugefügt! Lass uns die Seite http://127.0.0.1:8000/ neu laden - Bumm! Der Server läuft wieder nicht mehr. Schau in die Konsole - wie erwartet gibt es noch einen anderen Fehler! + +![AttributeError](images/attribute_error2.png) + +Erinnerst du dich, was der nächste Schritt ist? Eine View hinzufügen! + +## Füge eine View hinzu + +Dieses Mal bekommt unsere *View* den extra Parameter `pk`. Unsere *View* muss diesen entgegennehmen, richtig? Also definieren wir unsere Funktion als `def post_detail(request, pk)`. Beachte, dass der Parameter genau den gleichen Variablennamen haben muss, wie wir in `urls` festgelegt haben (`pk`). Beachte zudem, dass das Weglassen dieser Variable unzulässig ist und zu einem Fehler führt! + +Jetzt benötigen wir also genau einen bestimmten Blogpost. Diesen finden wir, indem wir ein QuerySet folgendermaßen schreiben: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Aber bei diesem Code gibt es ein Problem. Wenn es kein `Post`-Objekt mit diesem `primary key` (`pk`) gibt, bekommen wir einen super-hässlichen Fehler! + +![DoesNotExist Error](images/does_not_exist2.png) + +Das wollen wir nicht! Zum Glück stellt uns Django etwas zur Verfügung, das uns dieses Problem abnimmt: `get_object_or_404`. Wenn es kein `Post`-Objekt mit einem gegebenen `pk` gibt, wird eine schöne Seite angezeigt, die sogenannte `Page Not Found 404`-Seite ("Seite nicht gefunden"-Seite). + +![Page not found](images/404_2.png) + +Die gute Neuigkeit ist, dass du auch deine eigene `Page not found`-Seite erstellen und diese so hübsch gestalten kannst, wie du willst. Aber das ist jetzt gerade nicht so wichtig, deshalb überspringen wir das. + +Okay, es wird Zeit, die *View* zu unserer `views.py`-Datei hinzuzufügen! + +In `blog/urls.py` haben wir eine URL-Regel namens `post_detail` erstellt, die auf eine View namens `views.post_detail` verweist. Das heißt, dass Django eine View-Funktion erwartet, die `post_detail` heißt und in `blog/views.py` angelegt wurde. + +Wir sollten also `blog/views.py` im Code-Editor öffnen und den folgenden Code zu den anderen `from` Zeilen hinzufügen: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Und am Ende der Datei werden wir unsere *View*-Funktion ergänzen: + +{% 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}) +``` + +Super. Lass uns nun http://127.0.0.1:8000/ neu laden. + +![Die post_list-View](images/post_list2.png) + +Es hat funktioniert! Aber was passiert, wenn du auf den Link im Blog-Titel klickst? + +![TemplateDoesNotExist Error](images/template_does_not_exist2.png) + +Oh nein! Ein anderer Fehler! Aber wir wissen ja schon, wie wir mit diesem umgehen, oder? Wir müssen ein Template hinzufügen! + +## Erstelle ein Template für die Post-Detailseite + +Wir erstellen eine Datei in `blog/templates/blog` mit dem Namen `post_detail.html` und öffnen sie im Code-Editor. + +Gib den folgenden Code ein: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Wir erweitern wieder `base.html`. Im `content`-Block wollen wir das Publikationsdatum eines Posts (published_date), falls es existiert, anzeigen und auch den Titel und den Text. Aber wir müssen noch ein paar wichtige Dinge klären, oder? + +{% raw %}`{% if ... %} ... {% endif %}` ist ein Template-Tag, das wir benutzen können, wenn wir etwas überprüfen möchten. (Erinnerst du dich an `if ... else ...` vom Kapitel **Einführung in Python**?) In diesem Fall hier wollen wir prüfen, ob das `published_date`-Feld eines Post-Objektes nicht leer ist. {% endraw %} + +OK, aktualisieren wir unsere Seite und sehen, ob `TemplateDoesNotExist` jetzt weg ist. + +![Blogpost-Detailseite](images/post_detail2.png) + +Yay! Es funktioniert! + +# Veröffentlichen! + +Es wäre schön zu sehen, ob deine Website noch auf PythonAnywhere funktioniert, richtig? Lass sie uns erneut veröffentlichen. + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add . + $ git status + $ git commit -m "View und Template für Blogpost-Details sowie CSS für die Website hinzugefügt" + $ git push + + +Dann führe Folgendes in der [PythonAnywhere-Bash-Konsole](https://www.pythonanywhere.com/consoles/) aus: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Denk daran, `` durch deine tatsächliche PythonAnywhere-Subdomain zu ersetzen - ohne die spitzen Klammern.) + +## Die statischen Dateien auf dem Server aktualisieren + +Server wie PythonAnywhere behandeln statische Dateien ("static files", z.B. CSS-Dateien) anders als Python-Dateien, weil statische Dateien noch optimiert und dadurch dann schneller geladen werden können. Deswegen müssen wir, nachdem wir Änderungen an den CSS Dateien vorgenommen haben, einen zusätzlichen Befehl auf dem Server ausführen, um diese Dateien zu aktualisieren. Der Befehl heißt `collectstatic`. + +Aktiviere also deine virtuelle Umgebung, wenn sie nicht vom letzten Mal noch aktiv ist (PythonAnywhere benutzt dazu das Kommando `workon`, das ist ähnlich wie `source myenv/bin/activate`, das du auf deinem Computer verwendest): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +Der `manage.py collectstatic` Befehl ist ein bisschen wie `manage.py migrate`. Wir machen ein paar Änderungen in unserem Code und dann sagen wir Django, dass es diese übernehmen (*apply*) soll, entweder zu der servereigenen Sammlung von statischen Dateien oder in die Datenbank. + +Auf jeden Fall sind wir nun soweit, dass wir [auf die Seite "Web"](https://www.pythonanywhere.com/web_app_setup/) wechseln können (mittels dem Menü-Knopf in der Ecke oben rechts) und **Reload** klicken können. Schau dir dann die Seite https://subdomain.pythonanywhere.com an, um das Ergebnis zu sehen. + +Und das war's. Glückwunsch! :) \ No newline at end of file diff --git a/de/extend_your_application/images/404_2.png b/de/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/de/extend_your_application/images/404_2.png differ diff --git a/de/extend_your_application/images/attribute_error2.png b/de/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/de/extend_your_application/images/attribute_error2.png differ diff --git a/de/extend_your_application/images/does_not_exist2.png b/de/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/de/extend_your_application/images/does_not_exist2.png differ diff --git a/de/extend_your_application/images/no_reverse_match2.png b/de/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/de/extend_your_application/images/no_reverse_match2.png differ diff --git a/de/extend_your_application/images/post_detail2.png b/de/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/de/extend_your_application/images/post_detail2.png differ diff --git a/de/extend_your_application/images/post_list2.png b/de/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/de/extend_your_application/images/post_list2.png differ diff --git a/de/extend_your_application/images/template_does_not_exist2.png b/de/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/de/extend_your_application/images/template_does_not_exist2.png differ diff --git a/de/how_the_internet_works/README.md b/de/how_the_internet_works/README.md new file mode 100644 index 00000000000..ab728a10ce6 --- /dev/null +++ b/de/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Wie das Internet funktioniert + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc) behandelt. +> +> Dieses Kapitel wurde inspiriert durch den Vortrag "How the Internet works" von Jessica McKellar (http://web.mit.edu/jesstess/www/). + +Wahrscheinlich nutzt du das Internet jeden Tag. Aber weißt du, was passiert, wenn du eine Adresse wie https://djangogirls.org im Browser eingibst und `enter` drückst? + +Als Erstes solltest du wissen, dass eine Webseite meist nur ein paar Dateien auf der Festplatte sind -- so wie deine Filme, deine Musik oder deine Bilder. Das Besondere an Webseiten ist, dass sie aus speziellem Computer-Code bestehen, das sogenannte HTML. + +Wenn du noch nie etwas mit Programmierung zu tun hattest, kann auch HTML zuerst abschreckend aussehen, aber dein Browser (Chrome, Safari, Firefox, etc.) liebt es. Browser sind so entworfen, dass sie diesen Code verstehen, seinen Anweisungen folgen können und diese Dateien, aus denen deine Website besteht, genau so darstellen, wie du es möchtest. + +Wie jede andere Datei auch, muss die HTML-Datei irgendwo auf einer Festplatte gespeichert werden. Für das Internet verwenden wir spezielle, leistungsstarke Computer, sogenannte *Server*. An ihnen sind normalerweise weder Bildschirm, Maus oder Tastatur angeschlossen, weil der Hauptzweck der Server darin besteht, Daten zu speichern und zur Verfügung zu stellen. Darum nennt man sie *Server* - sie *bedienen* (serve) dich mit Daten. + +OK, aber du willst wissen, wie das Internet aussieht oder? + +Wir haben ein Bild gemalt. So sieht es aus: + +![Abbildung 1.1](images/internet_1.png) + +Ziemliches Durcheinander, oder? Eigentlich ist es ein Netzwerk aus verbundenen Maschinen (den oben genannten *Servern*). Hunderttausende von Rechnern! Kilometer über Kilometer Kabel rund um die Welt. Auf einer Webseite über Unterseekabel (https://submarinecablemap.com/) kannst du dir ein Bild von der Komplexität des Netzes machen. Hier ist ein Screenshot der Seite: + +![Abbildung 1.2](images/internet_3.png) + +Faszinierend, oder? Es ist jedoch nicht möglich, Kabel zwischen allen Servern des Internets zu schalten. Damit wir eine Maschine (z.B. diejenige, auf welcher https://djangogirls.org abgespeichert ist) erreichen können, muss unsere Anfrage über viele verschiedene andere Maschinen weitergeleitet werden. + +Das sieht ungefähr so aus: + +![Abbildung 1.3](images/internet_2.png) + +Stell dir vor, wenn du https://djangogirls.org in den Browser eingibst, würdest du einen Brief versenden, in dem steht; "Hallo Django Girls, ich möchte die djangogirls.org Webseite ansehen. Bitte schickt sie mir!" + +Der Brief kommt ins Postamt in deiner Nähe. Von da aus gelangt er zu einem anderen Postamt näher an der Zieladresse und näher und näher, bis der Brief zugestellt werden kann. Die einzigartige Sache ist, dass, wenn du mehrere Briefe (*Datenpakete*) zu der selben Adresse abschickst, jeder einzelne Brief durch komplett unterschiedliche Poststellen (*Router*) laufen könnte. Dies hängt davon ab, wie sie an jedem Standort verteilt werden. + +![Abbildung 1.4](images/internet_4.png) + +So einfach ist das im Prinzip. Du sendest Nachrichten und erwartest eine Antwort. Anstelle von Papier und Stift verwendest du Daten, aber die Idee ist dieselbe! + +Anstelle von Adressen mit Straße, Ort und Postleitzahl verwenden wir IP-Adressen. IP steht für Internet Protocol. Dein Computer fragt erst das DNS (Domain Name System), um die (von Menschen besser lesbare) Adresse djangogirls.org in die (besser von Maschinen lesbare) IP-Adresse umzuwandeln. Das DNS ist ein bisschen wie ein altmodisches Telefonbuch aus Papier, in dem du den Namen einer Person, die Du kontaktieren willst, suchen und die Telefonnummer und Adresse nachgucken kannst. + +Wenn du einen Brief versenden willst, brauchst du spezielle Eigenschaften wie: Postanschrift, Briefmarke etc. Außerdem musst du eine Sprache verwenden, die der Empfänger versteht. Das gleiche gilt für die *Datenpakete*, die du sendest, um eine Website betrachten zu können. Wir verwenden ein Protokoll namens HTTP (Hypertext Transfer Protocol). + +Grundsätzlich brauchst du also für eine Website auch einen *Server*, auf dem sie abgelegt ist. Wenn der *Server* eine eingehende *Anforderung* (in einem Brief) empfängt, sendet er deine Website zurück (in einem weiteren Brief). + +Da dies hier ein Django-Tutorial ist, fragst du dich vielleicht, was Django in diesem Zusammenhang macht. Wenn dein Server eine Antwort zurück sendet, soll nicht an jeden dasselbe gesendet werden. Es wäre besser, wenn die Antworten individuell personalisiert würden, entsprechend der Anfragen des jeweiligen Briefes, oder? Django hilft dir, diese personalisierten und interessanten Antworten zu erstellen. :) + +Genug der Theorie, lass uns loslegen! \ No newline at end of file diff --git a/de/how_the_internet_works/images/internet_1.png b/de/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/de/how_the_internet_works/images/internet_1.png differ diff --git a/de/how_the_internet_works/images/internet_2.png b/de/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/de/how_the_internet_works/images/internet_2.png differ diff --git a/de/how_the_internet_works/images/internet_3.png b/de/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/de/how_the_internet_works/images/internet_3.png differ diff --git a/de/how_the_internet_works/images/internet_4.png b/de/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/de/how_the_internet_works/images/internet_4.png differ diff --git a/de/html/README.md b/de/html/README.md new file mode 100644 index 00000000000..6f6cbd62cbb --- /dev/null +++ b/de/html/README.md @@ -0,0 +1,227 @@ +# Einführung in HTML + +Vielleicht fragst du dich, was ein Template (Vorlage) ist? + +Ein Template (zu deutsch "Vorlage") ist eine Textdatei und ermöglicht es uns, verschiedene Inhalte in einer einheitlichen Darstellung zu erzeugen. Eine Vorlage für z.B. einen Brief hilft uns, immer gleich aussehende Nachrichten zu versenden, in denen sich Empfänger, Betreff und Text jeweils ändern, das äußere Format jedoch bestehen bleibt. + +Ein Django-Template wird mit einer Sprache namens HTML beschrieben. (Genau das HTML aus dem ersten Kapitel: **Wie das Internet funktioniert**). + +## Was ist HTML? + +HTML ist recht einfacher Code, der von deinem Browser – z.B. Chrome, Firefox oder Safari – interpretiert wird, um dem Benutzer eine Website darzustellen. + +HTML steht für "HyperText Markup Language". Als **HyperText** wird Text bezeichnet, der über markierte Textstellen, den "Hyperlinks" (die umgangssprachlichen "Links"), auf andere (meist ebenfalls in HTML geschriebene) Seiten verweist. **Markup** bedeutet, dass wir ein Dokument nehmen und mit Code versehen, um einem Empfänger mitzuteilen (in diesem Fall dem Browser), wie diese Seite interpretiert werden muss. HTML-Code besteht aus **Tags**, wovon jeder mit `<` beginnt und mit `>` endet. Diese Tags stellen die Markup-**Elemente** dar. + +## Dein erstes Template! + +Ein Template zu erstellen, heißt, eine entsprechende Datei dafür zu erstellen. Alles ist eine Datei, wie du vielleicht schon bemerkt hast. + +Templates werden im Verzeichnis `blog/templates/blog` gespeichert. Als Erstes erzeugen wir das Verzeichnis `templates` in deinem Blog-Verzeichnis. Im Template-Verzeichnis selbst erstellen wir ein weiteres Verzeichnis `blog`: + + blog + └───templates + └───blog + + +(Falls du dich wunderst, warum wir zwei `blog`-Verzeichnisse brauchen – das hängt mit den nützlichen Namenskonventionen von Django zusammen, die das Leben einfacher machen, wenn deine Projekte immer komplizierter und komplexer werden.) + +Als nächstes erstellen wir eine Datei `post_list.html` (erst mal ohne Inhalt) innerhalb des Verzeichnisses `blog/templates/blog`. + +Kontrolliere deine überarbeitete Webseite unter: http://127.0.0.1:8000 + +> Falls du die Fehlermeldung `TemplateDoesNotExist` angezeigt bekommst, versuche den Server neu zu starten. Auf der Kommandozeile drückst du dafür Strg+C bzw. Ctrl+C (Strg-/Ctrl- und die C-Taste C zusammen) und startest danach den Server erneut mit dem Kommando `python manage.py runserver`. + +![Abbildung 11.1](images/step1.png) + +Der Fehler sollte weg sein! Gratulation! :) Deine Webseite ist allerdings noch leer, weil dein Template leer ist. Das müssen wir ändern. + +Öffne die neue Datei im Code-Editor, und füge Folgendes hinzu: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + +

Halli-Hallo!

+

Es funktioniert!

+ + +``` + +Hat sich die Seite geändert? Besuche http://127.0.0.1:8000/, um nachzusehen. + +![Abbildung 11.2](images/step3.png) + +Es funktioniert. Gute Arbeit! :) + +* Die Zeile `` ist kein HTML-Tag. Es deklariert nur den Dokumententyp. Hier informiert sie den Browser, dass der Dokumententyp [HTML5](https://html.spec.whatwg.org/#the-doctype) ist. Jede HTML5-Datei muss so anfangen. +* Der eigentliche HTML-Teil beginnt immer mit `` und endet immer mit ``. Zwischen den beiden Tags `` und `` steht der gesamte Inhalt der Webseite +* `

` ist der Tag für ein Absatz-Element (paragraph), `

` beendet einen Absatz + +## "Head" und "body" + +Jede HTML-Seite gliedert sich in zwei Teile: **head** und **body**. + +* Das Element **head** speichert im "Kopf" der Seite Informationen über die Seite, die dir nicht angezeigt werden. + +* Das Element **body** enthält den "Körper" - also den dargestellten Inhalt der Seite. + +Im `` informieren wir den Browser über Einstellungen und Konfigurationen der Webseite, z.B. wie sie dargestellt werden soll, und im `` darüber, was tatsächlich dargestellt werden soll. + +In den `` können wir z.B. noch den Titel (title) der Seite mit aufnehmen: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Olas blog + + +

Halli-Hallo!

+

Es funktioniert!

+ + +``` + +Speichere die Datei und aktualisiere die Seite im Browser. + +![Abbildung 11.3](images/step4.png) + +Der Titel "Olas Blog" wird nun im Browser angezeigt. Hast du es bemerkt? Der Browser hat `Olas Blog` interpretiert und in die Titelleiste übernommen (dieser Titel wird auch in den Lesezeichen usw. verwendet). + +Wie du vielleicht bemerkt hast, hat jedes Element zu Beginn einen öffnenden Tag und einen zugehörigen *schließenden Tag* mit `/` und innerhalb davon sind Elemente *eingebettet*. Ein innerer Tag kann nicht außerhalb des umschließenden Tags geschlossen werden, die Reihenfolge muss immer stimmen. + +Es ist, wie wenn man Sachen in Kisten steckt. Du hast eine große Kiste, ``. In der ist als weitere, etwas kleinere Kiste `` drin, und in der wiederum weitere kleine Kistchen: `

`. + +Die Regeln und Reihenfolgen von *schließenden* Tags und *Verschachtelung* der Elemente musst du immer einhalten. Anderenfalls können Browser die Seite nicht richtig interpretieren und darstellen. + +## Dein Template anpassen + +Jetzt kannst du ein bisschen rumprobieren und dein Template umgestalten! Hier sind ein paar nützliche Tags dafür: + +* `

Überschrift

` (headline) für wichtigste Überschriften +* `

Unter-Überschrift

` die nächst tiefere Überschiftenebene +* `

Unter-Unter-Überschrift

` ... und so weiter bis `
` +* `

Ein Fliesstext-Absatz

` +* `Text` hebt deinen Text hervor +* `Text` hebt deinen Text stark hervor +* `
` fängt eine neue Zeile an (du kannst nichts in das br schreiben und es gibt keinen schließenden Tag) +* `link` erstellt einen Link +* `
  • Erster Punkt
  • second item
` generiert eine Liste so wie diese hier! +* `
` definiert einen Abschnitt auf einer Seite +* `` definiert eine Reihe von Navigationslinks +* `
` definiert voneinander unabhängige, eigenständige Inhalts-Teile +* `
` definiert einen Abschnitt in einem Dokument +* `
` gibt eine Kopfzeile für ein Dokument oder einen Abschnitt an +* `
` enthält den Hauptinhalt eines Dokuments +* `` definiert eine Nebenbemerkung (wie den Inhalt einer Rand-Leiste) zum Inhaltsteil, in dem es platziert wird +* `
` definiert eine Fußzeile für ein Dokument oder einen Abschnitt +* `` definiert eine bestimmte Zeit (oder einen Zeitpunkt samt Datum) + +Hier ist ein vollständiges Beispiel eines Templates. Kopiere es und füge es in `blog/templates/blog/post_list.html` ein: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Django Girls blog + + +
+

Django Girls Blog

+
+ +
+ +

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.

+
+ +
+ +

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.

+        
+     + +``` + +Wir haben hier einen `header`-Abschnitt und zwei `article`-Abschnitte erstellt. + +* Das `header`-Element enthält den Titel unseres Blogs – eine Überschrift und einen Link +* Die beiden `Artikel` Elemente enthalten unsere Blogeinträge mit einem veröffentlichten Datum in einem `time` Element, ein `h2` Element mit einem anklickbaren Beitragstitel und einem `p` (Absatz) Element für den Text unseres Blogeintrags. + +Wir bekommen das Folgende: + +![Abbildung 11.4](images/step6.png) + +Yaaay! Bis jetzt zeigt unser Template aber immer genau die **gleichen Inhalte** – obwohl wir aber vorhin davon gesprochen haben, dass Templates uns erlauben, **verschiedene** Informationen im **gleichen Format** darzustellen. + +Eigentlich wollen wir richtige Posts anzeigen, die in unserer Django-Admin-Oberfläche hinzugefügt wurden – und das wollen wir als Nächstes tun. + +## Noch eine Sache: Deployment! + +Es wäre gut, das alles live draußen im Internet zu sehen, oder? Lass uns noch eine PythonAnywhere-Anwendung erstellen: + +### Committe und pushe deinen Code auf GitHub + +Lass uns nachsehen, welche Dateien sich nach dem letzten Veröffentlichen (Deployment) geändert haben. (Führe diese Befehle lokal aus und nicht auf PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Stelle sicher, dass du im `Djangogirls` Verzeichnis bist und sag `git`, dass alle Änderungen in diesem Verzeichnis hinzugefügt werden sollen: + +{% filename %}command-line{% endfilename %} + + $ git add . + + +Bevor wir alle Dateien hochladen, prüfen wir noch einmal, was `git` hochladen will (alle Dateien, die `git` hochladen wird, sind jetzt grün): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Fast fertig, wir sagen nun noch, dass diese Änderung in der Verlaufsübersicht gespeichert werden soll. Wir erstellen eine "Commit Message", die beschreibt, was wir verändert haben. Du kannst an diesem Punkt hier alles reinschreiben, aber es ist sehr nützlich, etwas Sinnvolles einzutragen, damit du dich in Zukunft erinnern kannst, was du geändert hast. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "HTML der Site geändert." + + +> **Beachte:** Du musst Anführungszeichen um den Commit-Kommentar setzen. + +Nachdem wir das gemacht haben, laden (push) wir unsere Änderungen auf GitHub: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Hol dir den neuen Code auf PythonAnywhere und aktualisiere deinen Browser + +* Öffne die [PythonAnywhere consoles page](https://www.pythonanywhere.com/consoles/) und gehe zu deiner **Bash-Konsole** (oder starte eine neue). Dann, führe Folgendes aus: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Du musst `` durch deine tatsächliche PythonAnywhere-Subdomain zu ersetzen - ohne die spitzen Klammern. Normalerweise ist deine Subdomain dein PythonAnywhere-Benutzername, aber in manchen Fällen ist sie leicht anders (z.B. wenn dein Benutzername Großbuchstaben enthält). Wenn dieser Befehl also nicht funktioniert, verwende den Befehl `ls` (listet Dateien auf), um den tatsächlichen Subdomain-/Ordner-Name herauszufinden, und verwende dann `cd`, um dorthin zu wechseln. + +Nun sieh zu, wie dein Code heruntergeladen wird. Wenn du überprüfen willst, dass er angekommen ist, geh' hinüber zur **Seite "Files"** and schau deinen Code auf PythonAnywhere an (du kannst andere PythonAnywhere-Seiten über den Menü-Knopf auf der Konsolen-Seite erreichen). + +* Spring anschließend rüber zur [Seite "Web"](https://www.pythonanywhere.com/web_app_setup/) und klick auf **Neu laden** in deinem Browser. + +Dein Update sollte live sein! Lade die Seite neu in deinem Browser. Es sollten nun Änderungen zu sehen sein. :) \ No newline at end of file diff --git a/de/html/images/step1.png b/de/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/de/html/images/step1.png differ diff --git a/de/html/images/step3.png b/de/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/de/html/images/step3.png differ diff --git a/de/html/images/step4.png b/de/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/de/html/images/step4.png differ diff --git a/de/html/images/step6.png b/de/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/de/html/images/step6.png differ diff --git a/de/images/application.png b/de/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/de/images/application.png differ diff --git a/de/installation/README.md b/de/installation/README.md new file mode 100644 index 00000000000..81d3744b818 --- /dev/null +++ b/de/installation/README.md @@ -0,0 +1,70 @@ +# Wenn du dieses Tutorial zu Hause bearbeitest + +Wenn du das Tutorial zu Hause bearbeitest, und nicht auf einer der [Django Girls Veranstaltungen](https://djangogirls.org/events/), kannst du dieses Kapitel komplett überspringen und direkt mit dem Kapitel [Wie funktioniert das Internet?](../how_the_internet_works/README.md) fortfahren. + +Dem ist so, weil wir die Dinge jeweils installieren werden, wenn sie im Tutorial benötigt werden. Das hier ist nur eine zusätzliche Seite, die alle Installationsanleitungen an einem Ort bündelt (was für manche Veranstaltungsformate nützlich ist). Falls du willst, kannst du alles auf dieser Seite bereits jetzt installieren. Wenn du jedoch mit dem Lernen beginnen willst, bevor du eine Hand voll Sachen auf deinem Computer installierst, überspringe dieses Kapitel und lies unsere Erklärungen zur Installation später im Tutorial. + +Viel Erfolg! + +# Wenn du an einem Workshop teilnimmst + +Wenn du an einer [Django Girls Veranstaltung](https://djangogirls.org/events/) teilnimmst: + +* Vielleicht hat deine Veranstaltung eine "Installationsparty" vor dem eigentlichen Workshoptag. Wenn du gerade auf einer Installationsparty bist, ist das deine Seite! Folge den Anweisungen hier, um alles Notwendige für den Workshop zu installieren. Frage deinen Coach, wenn du Hilfe brauchst. Am Workshoptag kannst du dann die Installationsanweisungen überspringen, auf die du im Tutorial stößt. +* Vielleicht haben die Organisatoren des Workshops dich gebeten, zu versuchen, schon zu Hause möglichst alles Benötigte auf deinem Computer zu installieren. Wenn du dazu aufgefordert wurdest, dann bist du hier auf der richtigen Seite! Folge den Anweisungen hier so gut, wie du kannst. Wenn du am Workshoptag dann im Tutorial auf einen Installationsschritt triffst, der dir zu Hause nicht gelungen ist, frage deinen Coach um Hilfe. +* Wenn dein Workshop keine Installationsparty hat (oder du nicht teilnehmen konntest) und die Organisatorien dich nicht gebeten haben, alles zu Hause zu installieren, dann überspring die Seite und geh direkt zum Kapitel [Wie das Internet funktioniert](../how_the_internet_works/README.md). Denn du wirst dann alles installieren, während du das Tutorial durcharbeitest. + +# Installation + +In diesem Tutorial wirst du einen Blog bauen. Dafür wirst du während des Tutorials aufgefordert, verschiedene Software auf deinem Computer zu installieren und auch einige Online-Konten anzulegen, wenn sie gebraucht werden. Diese Seite fasst alle Installations- und Kontoeinrichtungs-Anweisungen an einer Stelle zusammen (das ist für einige Workshopformate sinnvoll). + + +{% include "/chromebook_setup/instructions.md" %} + + + +# Kurze Einführung in die Kommandozeile {#command-line} + +Viele der folgenden Schritte beziehen sich auf die "Konsole", das "Terminal", das "Kommandozeilen-Fenster" oder die "Kommandozeile" -- all diese Begriffe bezeichnen dasselbe: Ein Fenster auf deinem Computer, in das du Kommandos eingeben kannst. Im Hauptteil des Tutorials wirst du mehr über die Kommandozeile lernen. Vorerst musst du nur wissen, wie du ein Kommandozeilenfester öffnen kannst und wie eines aussieht: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Python installieren {#python} + +{% include "/python_installation/instructions.md" %} + +# Einen Code-Editor installieren {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Virtualenv einrichten und Django installieren {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Git installieren {#git} + +{% include "/deploy/install_git.md" %} + +# Einen GitHub-Account erstellen {#github-account} + +Gehe zu [GitHub.com](https://www.github.com) und registriere dich für ein neues, kostenfreies Benutzerkonto. Achte darauf, dass du dein Passwort nicht vergisst (füge es deinem Passwortmanager hinzu, wenn du einen benutzt). + +# Einen PythonAnywhere-Account erstellen {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Fang an zu lesen! + +Herzlichen Glückwunsch, du hast alles eingerichtet und bist nun bereit loszulegen! Wenn du vor dem Workshop noch etwas Zeit hast, wäre es hilfreich, einige der einführenden Kapitel zu lesen: + +* [Wie das Internet funktioniert](../how_the_internet_works/README.md) + +* [Einführung in die Kommandozeile](../intro_to_command_line/README.md) + +* [Einführung in Python](../python_introduction/README.md) + +* [Django - Was ist das?](../django/README.md) + +# Viel Spaß beim Workshop! + +Wenn du mit dem Workshop anfängst, kannst du direkt zum Kapitel [Dein erstes Django-Projekt!](../django_start_project/README.md) gehen, weil du den Inhalt der vorhergehenden Kapitel schon bearbeitet hast. diff --git a/de/intro_to_command_line/README.md b/de/intro_to_command_line/README.md new file mode 100644 index 00000000000..4727d56a9de --- /dev/null +++ b/de/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Einführung in die Kommandozeile + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Your new friend: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8) behandelt. + +Aufregend, oder?! In ein paar Minuten wirst du deine erste Zeile Code schreiben! :) + +**Erstmal stellen wir dir deine neue Freundin vor: Die Konsole!** + +Im Folgenden zeigen wir dir, wie du das schwarze Fenster benutzt, das alle Hackerinnen nutzen. Es sieht vielleicht erstmal etwas unheimlich aus, aber es ist nur ein Programm, das darauf wartet, Anweisungen von dir zu bekommen. + +> **Hinweis:** Bitte beachte, dass wir in dem gesamten Buch die Begriffe "Verzeichnis" und "Ordner" abwechselnd gebrauchen, aber sie stehen für ein und dasselbe. + +## Was ist die Konsole? + +Das Fenster, welches gewöhnlich die **Kommandokonsole** (command line) oder **Kommandozeilen-Interface** (command-line interface) genannt wird, ist eine textbasierte Applikation zum Betrachten, Bearbeiten und Manipulieren von Dateien auf deinem Computer. Es ist dem Windows Explorer oder Finder auf dem Mac ähnlich, aber ohne die grafische Benutzeroberfläche. Andere Bezeichnungen dafür sind: *CMD*, *CLI*, *Prompt (Eingabeaufforderung)*, *Konsole* oder *Terminal*. + +## Öffnen der Konsole + +Um mit unserem Tutorial zu starten, musst du als Erstes das Kommandozeilenprogramm starten. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Eingabeaufforderung (Prompt) + +Du solltest nun ein weißes oder schwarzes Fenster sehen, das auf deine Anweisungen wartet. + + + +Auf einem Mac- oder Linux-Rechner siehst du wahrscheinlich ein `$`, also so: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +Auf einem Windows-Rechner siehst du wahrscheinlich ein `>`, so hier: + +{% filename %}command-line{% endfilename %} + + > + + +Schau 'mal in den Linux-Abschnitt hier obendrüber -- so etwas wirst du wieder im Abschnitt PythonAnywhere später im Tutorial antreffen. + + + +Vor jedem Kommando wird das Zeichen `$` oder `>` und ein Leerzeichen vorangestellt, aber du musst das nicht hinschreiben. Dein Computer macht das für dich. :) + +> Ein kleiner Hinweis: Falls du etwas in der Art wie `C:\Users\ola>` oder `Olas-MacBook-Air:~ ola$` sehen solltest, ist das auch 100%ig korrekt. + +Der Teil bis und einschließlich `$` oder `>` heißt *Kommandozeilen-Eingabeaufforderung* oder kurz *Eingabeaufforderung*. Sie fordert dich auf, hier etwas einzugeben. + +Wenn wir im Tutorial wollen, dass du einen Befehl eingibst, schreiben wir `$` oder `>` mit hin, gelegentlich auch noch die anderen Angaben links davon. Ignoriere den linken Teil und gib nur das Kommando ein, welches rechts der Eingabeaufforderung steht. + +## Dein erstes Kommando (YAY!) + +Lass uns mit diesem Kommando beginnen: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +Und dann bestätige mit `Enter`. Das ist unser Ergebnis: + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Wie du sehen kannst, hat der Computer gerade deinen Benutzernamen ausgegeben. Toll, was? :) + +> Versuch, jeden Befehl abzuschreiben und nicht zu kopieren und einzufügen. Auf diese Weise wirst du dir mehr merken! + +## Grundlagen + +Jedes Betriebssystem hat einen geringfügig anderen Bestand an Befehlen für die Kommandozeile, beachte daher die Anweisungen für dein Betriebssystem. Lass uns das ausprobieren. + +### Aktuelles Verzeichnis + +Es wäre schön zu sehen, wo wir uns befinden, oder? Lass uns nachsehen. Gib diesen Befehl in die Konsole ein und bestätige ihn mit `Enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Hinweis: 'pwd' steht für 'print working directory' (zeige derzeitiges Arbeitsverzeichnis). + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Hinweis: "cd" steht für "change directory". Mit PowerShell kannst du auch 'pwd' verwenden, wie auf Linux oder macOS. + + + +Du wirst wahrscheinlich etwas Ähnliches auf deinem Gerät sehen. Wenn du die Konsole öffnest, befindest du dich normalerweise im Heimverzeichnis deines Benutzers. + +* * * + +### Mehr über ein Kommando lernen + +Viele Befehle, die du in der Kommandozeile nutzen kannst, haben eine eingebaute Hilfe, die du anzeigen und lesen kannst! Zum Beispiel kannst du etwas über den eben verwendeten Befehl lernen: + + + +macOS und Linux haben einen `man`-Befehl, mit dem du die Hilfe über die Kommandos aufrufen kannst. Gib `man pwd` ein und schau, was angezeigt wird oder setzte `man` vor andere Kommandos und sieh dir deren Hilfe an. Das Ergebnis von `man` wird in der Regel seitenweise ausgegeben. Du kannst die Leertaste benutzen, um auf die nächste Seite zu gelangen und `q` (für engl. "quit", was "verlassen"/"rausgehen" heisst), um die Hilfeseiten zu schließen. + + + + + +Wenn du Windows benutzt, dann wird dir der Suffix `/?` für die meisten Kommandos die Hilfeseite ausgeben. Gegebenenfalls musst du nach oben scrollen, um alles zu sehen. Versuch es mal mit `cd /?`. + + + +### Anzeigen von Dateien und Unterordnern + +Nun, was befindet sich in deinem Verzeichnis? Es wäre toll, das herauszufinden. Lass uns mal schauen: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Anwendungen + Desktop + Downloads + Musik + ... + + + + + + +{% 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 + ... + + +> Hinweis: PowerShell kannst du auch 'ls' verwenden, wie auf Linux oder macOS. + +* * * + +### Wechseln des Verzeichnisses + +Lass uns jetzt zu unserem Desktop-Verzeichnis wechseln: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Wenn dein Linux-Benutzerkonto auf Deutsch eingestellt ist, kann es sein, dass auch der Name des Desktop-Verzeichnisses übersetzt ist. Wenn dem so ist, musst du im obigen Befehl `Desktop` durch den übersetzten Verzeichnisnamen `Schreibtisch` ersetzen. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Schau, ob das Wechseln des Verzeichnisses funktioniert hat: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Passt! + +> Profi-Tipp: Wenn du `cd D` tippst und dann `tab` auf deiner Tastatur drückst, wird die Kommandozeile automatisch den Rest des Namens vervollständigen, wodurch du schneller navigieren kannst. Wenn es mehr als einen Ordner gibt, dessen Name mit "D" beginnt, drücke die `tab`-Taste zweimal, um eine Liste der Möglichkeiten anzuzeigen. + +* * * + +### Erstellen eines Verzeichnisses + +Wie wär's damit, ein Übungsverzeichnis auf deinem Desktop zu erstellen? So kannst du das tun: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Dieser kleine Befehl erstellt einen Ordner mit dem Namen `practice` auf deinem Desktop. Du kannst nun überprüfen, ob er wirklich dort ist, indem du auf deinem Desktop nachschaust oder indem du den Befehl `ls` oder `dir` ausführst! Versuch es. :) + +> Profi-Tipp: Wenn du die selben Befehle nicht immer wieder und wieder schreiben willst, verwende die `Pfeil aufwärts`- und `Pfeil abwärts`-Tasten deiner Tastatur, um durch die zuletzt verwendeten Befehle zu blättern. + +* * * + +### Übung! + +Eine kleine Herausforderung für dich: Erstelle in deinem neu erstellten `practice`-Ordner ein Verzeichnis namens `test`. (Verwende dazu die Kommandos `cd` und `mkdir`.) + +#### Lösung: + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +Glückwunsch! :) + +* * * + +### Aufräumen + +Wir wollen kein Chaos hinterlassen, also lass uns das bislang Geschaffene wieder löschen. + +Zuerst müssen wir zurück zum Desktop wechseln: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Durch Verwendung von `..` mit dem `cd`-Kommando wechselst du von deinem aktuellen Verzeichnis zum übergeordneten Verzeichnis (dies ist das Verzeichnis, das das aktuelle Verzeichnis enthält). + +Schau nach, wo du gerade bist: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Jetzt ist es an der Zeit, dein `practice`-Verzeichnis zu löschen: + +> **Achtung**: Wenn du Daten mit `del`, `rmdir` oder `rm` löschst, kannst du das nicht mehr rückgängig machen, das bedeutet, *die gelöschten Dateien sind für immer weg*! Sei also sehr vorsichtig mit diesem Befehl. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Geschafft! Lass uns schauen, ob es wirklich gelöscht ist: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Beenden + +Das wärs fürs Erste. Du kannst nun beruhigt deine Konsole schließen. Lass es uns wie die Hacker machen, okay? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Cool, was? :) + +## Zusammenfassung + +Hier ist eine Zusammenfassung einiger nützlicher Kommandos: + +| Befehl (Windows) | Befehl (Mac OS / Linux) | Beschreibung | Beispiel | +| ---------------- | ----------------------- | ------------------------------- | ---------------------------------------------------- | +| exit | exit | Fenster schließen | **exit** | +| cd | cd | Verzeichnis wechseln | **cd test** | +| cd | pwd | aktuelles Verzeichnis anzeigen | **cd** (Windows) oder **pwd** (Mac OS / Linux) | +| dir | ls | Unterordner/Dateien zeigen | **dir** | +| copy | cp | Datei kopieren | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | Datei verschieben | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | neues Verzeichnis erstellen | **mkdir testdirectory** | +| rmdir (oder del) | rm | Datei löschen | **del c:\test\test.txt** | +| rmdir /S | rm -r | Verzeichnis löschen | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | Hilfe für ein Kommando aufrufen | **cd /?** (Windows) oder **man cd** (Mac OS / Linux) | + +Das sind nur sehr wenige der Befehle, welche du in deiner Konsole verwenden kannst, aber du wirst heute nicht mehr brauchen. + +Falls du neugierig bist, findest du auf [ss64.com](http://ss64.com) eine vollständige Übersicht über alle Kommandozeilen-Befehle für alle Betriebssysteme. + +## Fertig? + +Lass uns mit Python anfangen! \ No newline at end of file diff --git a/de/intro_to_command_line/open_instructions.md b/de/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..45b84b93895 --- /dev/null +++ b/de/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +Abhängig von deiner Windows-Version und deiner Tastatur sollte eine der folgenden Methoden ein Kommandozeilen-Fenster öffnen (du musst vielleicht etwas herumexperimentieren, aber du musst nicht jeden dieser Vorschläge ausprobieren): + +- Gehe zum Start-Menü oder Start-Bildschirm und gib "Eingabeaufforderung" in das Suchfeld ein. +- Klicke Start-Menü → Windows System → Eingabeaufforderung. +- Geh ins Start Menü → Alle Programme → Zubehör → Eingabeaufforderung. +- Gehe zum Startbildschirm, bewege deinen Mauszeiger zur unteren linken Bildschirmecke und klicke auf den nach unten zeigenden Pfeil, der erschienen ist (auf einem Touch-Screen streichst du mit dem Finger vom unteren Bildschirmrand nach oben). Die Apps-Seite sollte sich öffnen. Klicke auf Eingabeaufforderung im Abschnitt Windows System. +- Drücke die Windows-Taste und gleichzeitig "x" auf deiner Tastatur. Wähle "Eingabeaufforderung" aus dem Menü aus. +- Drücke die Windows-Taste und gleichzeitig "r", um das "Ausführen"-Fenster zu erhalten. Tippe "cmd" in das Feld und klicke OK. + +![Tippe "cmd" in das "Ausführen"-Fenster](../python_installation/images/windows-plus-r.png) + +Später im Tutorial wirst du zwei offene Kommandozeilen-Fenster gleichzeitig brauchen. Wenn du aber schon ein Kommandozeilen-Fenster offen hast, wirst du bei manchen Windows-Versionen einfach zu diesem geschickt, wenn du mit derselben Methode versuchst, ein zweites Fenster zu öffnen. Probiere das nun aus und achte darauf, was passiert! Wenn du nur ein Kommandozeilen-Fenster bekommst, versuche eine der anderen Methoden aus der Liste oben. Mindestens eine der Methoden sollte dazu führen, dass ein neues (zweites) Kommandozeilen-Fenster geöffnet wird. + + + + + +Öffne das Launchpad → Andere → Terminal. + + + + + +Wahrscheinlich ist es unter Programme → Zubehör → Terminal, aber das ist von deinem System abhängig. Wenn es nicht da ist, kannst du versuchen, danach zu googlen. :) + + diff --git a/de/python_installation/README.md b/de/python_installation/README.md new file mode 100644 index 00000000000..6ed46093a8a --- /dev/null +++ b/de/python_installation/README.md @@ -0,0 +1,15 @@ +# Lass uns mit Python anfangen + +Wir sind endlich da! + +Aber lass uns zuerst erklären, was Python ist. Python ist eine sehr beliebte Programmiersprache, die du zur Erstellung von Webseiten, Spielen, wissenschaftlichen Programmen, Computergrafiken und vielem, vielem mehr verwenden kannst. + +Python entstand in den späten 1980ern mit dem Hauptziel, von Menschen lesbar zu sein (nicht nur von Computern). Darum sieht es einfacher aus als andere Programmiersprachen. Aber keine Sorge - Python ist auch sehr mächtig! + +# Python-Installation + +> **Hinweis** Wenn du ein Chromebook verwendest, überspringe bitte dieses Kapitel und folge den Anweisungen im Kapitel [Chromebook Installation](../chromebook_setup/README.md). +> +> **Hinweis:** Falls du dich bereits durch die [Installationsschritte](../installation/README.md) gearbeitet hast, gibt es keinen Grund dies erneut zu tun – du kannst direkt zum nächsten Kapitel springen! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/de/python_installation/images/add_python_to_windows_path.png b/de/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/de/python_installation/images/add_python_to_windows_path.png differ diff --git a/de/python_installation/images/python-installation-options.png b/de/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/de/python_installation/images/python-installation-options.png differ diff --git a/de/python_installation/images/windows-plus-r.png b/de/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/de/python_installation/images/windows-plus-r.png differ diff --git a/de/python_installation/instructions.md b/de/python_installation/instructions.md new file mode 100644 index 00000000000..f579473b278 --- /dev/null +++ b/de/python_installation/instructions.md @@ -0,0 +1,117 @@ +> Für Leserinnen zuhause: Dieses Kapitel wird auch im Video [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA) behandelt. +> +> Dieses Kapital basiert auf einem Tutorial der Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Django ist in Python geschrieben. Wir brauchen Python für alles in Django. Fangen wir mit der Installation an! Wir möchten, dass du Python 3 installierst. Solltest du also bereits eine ältere Version installiert haben, musst du diese aktualisieren. Wenn du schon Version {{ book.py_min_version }} oder höher hast, ist das in Ordnung. + +Bitte installiere ein gewöhnliches Python wie folgt, selbst falls auf deinem Computer bereits Anaconda installiert ist. + + + +Bitte schau zuerst auf der "Systemtyp"-Zeile der Systeminformationsseite nach, ob auf deinem Computer eine 32-Bit-Version oder eine 64-Bit-Version von Windows läuft. Um diese Seite zu finden, versuche eine der folgenden Methoden: + +* Drücke die Windows-Taste und die Pause/Break-Taste zur selben Zeit +* Öffne dein Control Panel über das Windows Menü und navigiere dann zu System & Sicherheit, dann System +* Drücke die Windows-Taste und navigiere dann zu Einstellungen > System > Über +* Suche im Windows-Startmenü nach "Systeminformationen". Klicke dazu auf Start oder drücke die Windows-Taste, dann beginne `Systeminformationen` zu tippen. Sobald du etwas eingegeben hast, bekommst du passende Vorschläge. Wähle den Eintrag "Systeminformationen" an, sobald er erscheint. + +Du kannst Python für Windows von der Webseite https://www.python.org/downloads/windows/ herunterladen. Klicke auf den "Latest Python 3 Release - Python x.x.x" Link. Wenn du eine **64-bit**-Version von Windows benutzt, lade die Datei **Windows x86-64 executable installer** herunter. Andernfalls lade den **Windows x86 executable installer** herunter. Führe den Installer nach dem Download (per Doppelklick) aus und folge den Anweisungen des Installationsprogramms. + +Auf eine Sache solltest du achten: Während der Installation wird ein Setup-Fenster auftauchen. Stell sicher, dass du die Checkbox mit "Add Python {{ book.py_version }} to PATH" oder "Add Python to your environment variables" aktiviert hast und klicke dann auf "Install Now" wie hier gezeigt (es kann bei dir etwas anders aussehen, wenn du eine andere Version installierst): + +![Vergiss nicht, Python zum Pfad hinzuzufügen](../python_installation/images/python-installation-options.png) + +Wenn die Installation abgeschlossen ist, siehst du vielleicht ein Dialogfeld mit einem Link, wo du mehr über Python oder über die Version lernen kannst. Schließe es oder brich den Dialog ab -- du wirst darüber mehr in diesem Tutorial lernen! + +Hinweis: Falls du eine ältere Version von Windows verwendest (7, Vista oder älter) und die Installation von Python {{ book.py_version }} mit einer Fehlermeldung fehlschlägt, dann installiere alle Windows-Updates und versuche erneut, Python zu installieren. Falls der Fehler dann immer noch auftritt, installiere Python-Version {{ book.py_min_release }} von [Python.org](https://www.python.org/downloads/windows/). + +> Django {{ book.django_version }} benötigt Python {{ book.py_min_version }} oder höher, das weder Windows XP noch frühere Windows-Versionen unterstützt. + + + + + +> **Hinweis** Bevor du Python auf macOS installierst, musst du sicherstellen, dass deine Mac-Einstellungen es erlauben, Pakete zu installieren, die nicht aus dem App Store stammen. Geh auf Systemeinstellungen (im Ordner "Programme"), klicke auf "Sicherheit", und dann auf die Registerkarte "Allgemein". Wenn "Apps-Download erlauben von:" auf "Mac App Store" gestellt ist, ändere die Einstellung auf "Mac App Store und verifizierte Entwickler". + +Auf der Website https://www.python.org/downloads/mac-osx/ findest du aktuellen Python-Installer: + +* Lade die Datei *macOS 64-bit/32-bit installer* herunter, +* Doppelklicke auf *python-{{ book.py_release }}-macosx10.9.pkg*, um die Installation zu starten. + + + + + +Es ist ziemlich wahrscheinlich, dass du Python schon automatisch installiert hast. Um herauszufinden, ob das so ist (und wenn ja, welche Version du hast), öffne eine Konsole und gib das folgende Kommando ein: + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python {{ book.py_release }} +``` + +Wenn du eine andere Version von Python installiert hast, die {{ book.py_min_version }} oder höher ist, z.B. {{ book.py_min_release }}, dann musst du die Version nicht aktualisieren. Wenn du Python noch nicht installiert hast oder wenn du eine andere Python-Version willst, prüfe zuerst mit folgendem Befehl, welche Linux-Distribution du benutzt: + +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +Folge danach je nach Ergebnis einer der unterhalb dieses Abschnitts folgenden Installationsanweisungen. + + + + + +Gib diesen Befehl in die Konsole ein: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Gib diesen Befehl in die Konsole ein: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Auf älteren Fedora-Versionen kann es sein, dass du eine Fehlermeldung bekommst, dass das Kommando `dnf` nicht gefunden wird. Falls das passiert, musst du stattdessen `yum` verwenden. + + + + + +Gib diesen Befehl in die Konsole ein: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Prüfe, ob die Installation erfolgreich war, indem du ein Kommandozeilenfenster öffnest und den `python3`-Befehl ausführst: + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python {{ book.py_release }} +``` + +Die angezeigte Version kann bei dir eine andere sein als {{ book.py_release }} -- sie sollte aber der entsprechen, die du installiert hast. + +**Hinweis:** Wenn du unter Windows eine Fehlermeldung bekommst, dass `python3` nicht gefunden wurde, versuche es mit `python` (ohne die `3`) und prüfe, ob es dennoch eine Version von Python {{ book.py_min_version }} oder höher ist. Wenn auch das nicht funktioniert, kannst du ein neues Kommandozeilenfenster öffnen und es dort erneut versuchen; dies geschieht, wenn du ein Kommandozeilenfenster verwendet, das schon vor der Python-Installation geöffnet war. + +* * * + +Wenn es Unklarheiten gibt oder wenn etwas schief ging und du nicht weiter weißt, frage bitte deinen Coach! Manchmal laufen die Dinge einfach nicht so glatt und dann ist es besser, jemanden mit mehr Erfahrung um Hilfe zu bitten. diff --git a/de/python_introduction/README.md b/de/python_introduction/README.md new file mode 100644 index 00000000000..bd5bc5802a2 --- /dev/null +++ b/de/python_introduction/README.md @@ -0,0 +1,1071 @@ +{% set warning_icon = '' %} + +# Einführung in Python + +> Ein Teil dieses Kapitels basiert auf dem Tutorial der Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Fangen wir an, schreiben wir Code! + +## Der Python-Prompt + +> Für Leserinnen, die sich bereits mit Python auskennen: Dieser Teil befindet sich im [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U) Video. + +Um Python zu starten, musst du an die *Kommandozeile* deines Computers. Wie das geht, weißt du bereits - denn du hast es im Kapitel [Einführung in die Kommandozeile](../intro_to_command_line/README.md) gelernt. + +Also öffne die Konsole, dann fangen wir an. + +Wir wollen eine Python Konsole öffnen, also tippe unter Windows `python` oder im Mac OS/Linux Terminal `python3` und drücke `Enter`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python {{ book.py_release }} (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Dein erster Python-Befehl! + +Nach Eingabe von python3 in der Konsole ändert sich das Prompt-Zeichen zu `>>>`. Für uns bedeutet das, dass wir ab nun nur noch Python-Code eingeben können. Den Python-Prompt `>>>` musst du nicht jedesmal eingeben - dies macht Python für dich. + +Wenn du die Python-Konsole wieder verlassen möchtest, gib `exit()` ein oder nutze das Tastatur-Kürzel `Strg + Z` unter Windows bzw. `Strg + D`, wenn du einen Mac hast oder Linux verwendest. Dann bist du wieder in der normalen Konsole und der Python-Prompt `>>>` ist weg. + +Fürs Erste bleiben wir in der Python Konsole, wir wollen mehr darüber lernen. Lass uns mit ein wenig Mathematik anfangen, gib `2 + 3` ein und drück `enter`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Cool! Schon ist das Ergebnis da. Python kann rechnen! Probier einfach einige andere Befehle aus, wie z.B.: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Um Potenzen zu berechnen, sagen wir 2 hoch 3, müssen wir Folgendes eingeben: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Spiel ein wenig herum, dann machen wir weiter. :) + +Wie du siehst, kann Python richtig toll rechnen. Aber Python kann noch viel mehr ... + +## Strings + +Strings sind Zeichenketten. Das ist eine Folge von Buchstaben, die von Anführungszeichen umgeben sind. Gib einfach mal deinen Namen ein (bei mir "Ola"): + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Nun hast du deinen ersten String erzeugt! Dies ist eine Folge von Zeichen (also nicht nur Buchstaben, wie ich oben schrieb, sondern Zeichen aller Art), die von einem Computer verarbeitet werden können. Ein String muss stets mit dem gleichen Zeichen beginnen und enden. Dies kann entweder ein einzelnes Gänsefüßchen sein (`'`) oder ein doppeltes (`"`), da gibt es keinen Unterschied! Die Anführungszeichen zeigen Python nur an, dass alles dazwischen ein String ist. + +Strings können zusammengesetzt werden. Versuch es einmal: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +Du kannst Strings auch vervielfältigen: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Brauchst du einen Apostroph in einem String, so hast du zwei Möglichkeiten. + +Du kannst für den String doppelte Anführungszeichen verwenden: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +oder du kannst den Apostroph mit einem Backslash (`\`) markieren: + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Toll, was? Um deinen Namen in Großbuchstaben anzuzeigen, gib Folgendes ein: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Hier hast du die `upper`-**Methode** auf den String angewendet! Eine Methode (wie `upper()`) ist eine Abfolge von Anweisungen, die Python für ein gegebenes Objekt (hier `"Ola"`) ausführt, wenn sie aufgerufen wird. + +Nehmen wir an, du möchtest die Zahl der Buchstaben in deinem Namen wissen. Auch dafür gibt es eine **Funktion**! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Nun fragst du dich sicher, warum du manchmal eine Methode mit einem `.` am Ende des Strings (wie bei `"Ola".upper()`) schreibst und manchmal eine Funktion direkt aufrufst und den String dahinter in Klammern setzt? Im ersten Fall gehören solche Methoden, wie `upper()`, zu Objekten (hier: ein String) und funktionieren auch nur bei diesen. In solchen Fällen bezeichnen wir eine Funktion als **Methode**. Andere Funktionen sind dagegen allgemeiner und können auf unterschiedliche Datentypen angewendet werden, wie beispielsweise `len()`. Daher übergeben wir `"Ola"` als Parameter an die `len` Funktion. + +### Zusammenfassung + +Ok, genug über Strings. Bisher haben wir Folgendes kennengelernt: + +- **Der Prompt** - Wenn wir beim Python-Prompt Anweisungen (oder Programm-Code) in Python eingeben, dann erhalten wir auch Ergebnisse in Python. Man sagt zu dieser Python-Umgebung auch "Python-Shell". +- **Zahlen und Strings** - In Python nutzen wir Zahlen für Berechnungen und Strings für Text-Objekte. +- **Operatoren**, wie + und *, verarbeiten mehrere Werte und erzeugen als Ergebnis einen neuen Wert. +- **Funktionen** - wie upper() und len(), tun etwas mit Objekten (in unserem Beispiel ändern sie diese, wie bei upper(), oder sie geben eine Eigenschaft zurück, wie bei len()). + +Das sind Grundlagen jeder Programmiersprache, die Du lernen wirst. Bist Du bereit für mehr? Bestimmt! + +## Fehler + +Probieren wir etwas Neues: Errors. Können wir die Länge einer Zahl auf die gleiche Weise ermitteln, wie die Länge eines Namens? Gib dazu `len(304023)` ein und drücke auf Enter: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Wir haben unsere erste Fehlermeldung (Error) erhalten! Mit dem Icon {{ warning_icon }} teilen wir dir in diesem Tutorial jeweils mit, dass der einzugebende Code nicht wie erwartet funktionieren wird. Fehler zu machen (selbst absichtlich) ist ein wesentlicher Teil beim Lernen! + +Unser erster Fehler sagt, dass Objekte vom Typ "int" (Integers, das sind ganze Zahlen) keine Länge haben. Was also nun? Vielleicht sollten wir unsere Zahl als String schreiben? Denn bei Strings funktioniert es ja, wie wir wissen. + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Ja, das funktioniert! Hier haben wir die `str`-Funktion innerhalb der Funktion `len` aufgerufen. `str()` konvertiert alles zu einem String. + +- Die `str`-Funktion wandelt den übergebenen Wert in einen **String** um. +- Die `int`-Funktion wandelt den übergebenen Wert in einen **Integer** um. + +> Wichtig: Zwar können wir Zahlen in Text umwandeln, aber nicht immer auch Text in Zahlen - was beispielsweise sollte `int('hello')` ergeben? + +## Variablen + +Ein wichtiger Bestandteil beim Programmieren sind Variablen. Eine Variable ist einfach ein Name für etwas, das wir später unter genau diesem Namen wieder verwenden können. Programmiererinnen nutzen Variablen, um Daten zu speichern, den Code lesbar zu halten und um sich nicht immer alles merken zu müssen. + +Lass uns eine Variable mit der Bezeichnung `name` anlegen: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Wir geben ein: name ist gleich "Ola". + +Du hast sicher schon bemerkt, dass Python diesmal kein Ergebnis zurückgegeben hat. Woher sollen wir nun wissen, dass es die Variable jetzt auch tatsächlich gibt? Gib `name` ein und drücke wieder auf `Enter`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +Hurra! Deine erste Variable :)! Nun kannst du auch stets ändern, was sie enthalten soll: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Du kannst die Variable auch in Funktionen verwenden: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Das ist toll, oder? Variablen können alles enthalten, also auch Zahlen. Versuche Folgendes: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Was aber, wenn wir für eine Variable den falschen Namen verwenden? Uns einfach vertippen. Hast du schon eine leise Ahnung, was dann passiert? Probieren wir es aus! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Ein Fehler! Wie du siehst, kennt Python verschiedene Arten von Fehlern. In unserem Fall hier ist es ein **NameError**. Python liefert diesen Fehler immer dann, wenn du versuchst, eine Variable zu verwenden, die es noch gar nicht gibt. Wenn du einen solchen Fehler erhältst, prüfe einfach in deinem Code, ob du dich irgendwo vertippt hast. + +Spiel einfach ein wenig rum und schaue, was alles so passiert. + +## Die print-Funktion + +Gib einmal Folgendes ein: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Wenn du in der zweiten Zeile `name` eintippst, dann gibt der Python-Interpreter die String-*Darstellung* (engl. 'representation') der Variable 'name' aus. In unserem Beispiel die Buchstaben M-a-r-i-a, umschlossen von einfachen Anführungszeichen ('). Wenn du hingegen `print(name)` schreibst, dann gibt Python den Inhalt der Variablen ohne die Anführungszeichen zurück, was etwas schöner aussieht. + +Wie wir später sehen werden, ist `print()` auch recht nützlich, wenn wir etwas aus Funktionen heraus ausgeben möchten oder auch eine Ausgabe über mehrere Zeilen darstellen wollen. + +## Listen + +Außer Strings (Zeichenketten) und Integern (ganze Zahlen) hat Python noch viele andere Arten von Datentypen. Von denen wollen wir uns nun **Listen** anschauen. Listen sind genau das, was du wahrscheinlich schon vermutest: Es sind Objekte, die Listen von anderen Objekten enthalten. :) + +Legen wir los und erzeugen eine Liste: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Ja, dies ist eine leere Liste. Für uns noch nicht sehr nützlich. Legen wir nun eine Liste von Lottozahlen an. Da wir uns nicht dauernd wiederholen wollen, ordnen wir diese Liste auch direkt einer Variablen zu: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +So, nun haben wir eine Liste mit Lottozahlen! Was aber können wir damit tun? Zuerst einmal wollen wir feststellen, wie viele Zahlen in ihr enthalten sind. Hast du schon eine Idee, wie dies geht? Klar, das weißt du ja bereits! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Genau! `len()` liefert die Anzahl von Objekten in einer Liste zurück. Praktisch, nicht wahr? Nun wollen wir die Liste sortieren: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +Diese Anweisung gibt nichts zurück, sie hat aber die Reihenfolge der Objekte in der Liste geändert. Um zu sehen, was passiert ist, müssen wir die Liste ausgeben: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Wie du siehst, sind die Zahlen in der Liste nun aufsteigend sortiert. Super! + +Aber vielleicht wollten wir es genau andersherum haben? Nichts leichter als das! + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Einfach, oder? Du kannst auch etwas zu deiner Liste hinzufügen: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Falls du nicht immer die gesamte Liste, sondern beispielsweise nur den ersten Eintrag sehen möchtest, kannst du dafür **Indizes** benützen. Ein Index gibt die Stelle innerhalb einer Liste an, die uns interessiert. Programmierer bevorzugen es, bei 0 mit dem Zählen anzufangen. Also hat das erste Objekt in deiner Liste den Index 0, das nächste die 1 und so weiter. Gib einmal Folgendes ein: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Wie du siehst, kannst du auf die einzelnen Objekte in deiner Liste zugreifen, indem du den Namen der Liste verwendest und anschließend den Index in eckigen Klammern anfügst. + +Um etwas aus deiner Liste zu löschen, musst du die **Indizes** wie gerade gelernt benutzen und die `pop()`-Methode. Lass uns ein Beispiel versuchen und das festigen, was wir zuvor gelernt haben; wir werden die erste Nummer aus unserer Liste löschen. + +{% 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] +``` + +Das hat doch super geklappt! + +Probier einmal andere Indizes aus: 6, 7, 1000, -1, -6 oder -1000 und versuch dir das Ergebnis vorzustellen, bevor du den jeweiligen Index verwendest. Sind die Ergebnisse sinnvoll? + +Eine Liste aller Methoden, die du auf Listen anwenden kannst, findest du in der Python-Dokumentation: https://docs.python.org/3/tutorial/datastructures.html + +## Dictionaries + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Installing Python Code Editor](https://www.youtube.com/watch?v=ZX1CVvZLE6c) behandelt. + +Ein Wörterbuch (von nun an mit dem englischen Begriff 'Dictionary' bezeichnet) verhält sich ähnlich wie eine Liste, jedoch greifen wir auf die enthaltenen Objekte nicht mit einem Index, sondern mit einem Schlüssel zu (auf englisch 'key', und auch hier verwenden wir im weiteren den englischen Begriff). Ein 'key' kann ein String oder eine Zahl sein. Ein leeres Dictionary legen wir wie folgt an: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Und schon hast du ein leeres Dictionary erstellt. Super! + +Nun gib einmal Folgendes ein (verwende statt 'Ola' usw. deine eigenen Informationen): + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Du hast nun soeben die Variable mit dem Namen `participant` angelegt, die ein Dictionary mit drei key-value Paaren enthält (values, also Werte, sind die Objekte in einem Dictionary, - aber auch hier bleiben wir beim englischen Begriff): + +- Der key `name` verweist auf den value `'Ola'` (welches ein `string` Objekt ist), +- `country` verweist auf `'Poland'` (ebenfalls ein `string` Objekt), +- und `favorite_numbers` schließlich verweist auf `[7, 42, 92]` (eine `Liste` mit drei Zahlen). + +Auf die einzelnen Objekte in einem Dictionary kannst du wie folgt zugreifen: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +Also ganz ähnlich wie bei einer Liste. Aber statt dir einen Index merken zu müssen, benutzt du bei einem Dictionary einfach einen key (hier: den String 'name'). + +Was aber geschieht, wenn wir Python nach dem Wert eines keys fragen, den es gar nicht gibt? Errätst du es schon? Probieren wir es einfach aus und schauen was passiert! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Ah, wieder ein Fehler! Diesmal ein **KeyError**. Python hilft uns auch hier und sagt uns, dass es den key `'age'` in diesem Dictionary gar nicht gibt. + +Wenn du zwischen Dictionaries und Listen wählen kannst, wann sollte welche Datenstruktur verwendet werden? Das ist eine gute Frage, über die es sich nachzudenken lohnt; und vielleicht möchtest du dies kurz tun, bevor du weiterliest. + +- Du brauchst nur eine geordnete Folge von Elementen? Dann wähle eine Liste. +- Du brauchst eine Sammlung von Elementen, auf die du später einzeln, gezielt und effizient mit Hilfe eines Namens (d.h. keys) zugreifen kannst? Dann wähle ein Dictionary. + +Dictionaries sind, so wie auch Listen, *mutable*, d. h. nachträglich veränderbar. So kannst du bei Dictionaries später noch weitere key-value Paare hinzufügen: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Wie bei Listen können wir auch bei Dictionaries die `len()`-Funktion verwenden, um die Zahl der enthaltenen Einträge (das sind die key-value Paare) zu ermitteln. Probier es gleich aus und tippe dieses Kommando ein: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Wir hoffen, dass das Alles für dich bisher Sinn ergibt. :) Bist du bereit für mehr Spaß mit Dictionaries? Machen wir weiter. + +Zum Löschen von Elementen kannst du den `pop()`-Befehl verwenden. Nehmen wir an, du möchtest den Eintrag mit dem key `'favorite_numbers'` entfernen, dann tippe: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Wie du an der Ausgabe erkennst, ist nun das key-value Paar von 'favorite_numbers' gelöscht. + +Ebenso kannst du auch den Wert eines bestehenden Eintrages ändern: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Wie du siehst, hast du nun im key-value Paar mit dem key `'country'` den Wert von `'Poland'` nach `'Germany'` geändert. :) Hurra! Schon wieder was gelernt. + +### Zusammenfassung + +Großartig! Inzwischen hast du schon einiges über Programmierung gelernt und die folgenden Dinge sind dir vertraut: + +- **Errors** - Du weißt, wie sie zu lesen sind und dass Python sie dann ausgibt, wenn es eine Anweisung von dir nicht ausführen kann. +- **Variablen** - sind Namen für Objekte, die dir dabei helfen, deinen Code leichter zu schreiben und ihn dabei auch gut lesbar zu halten. +- **Listen** - können Objekte in einer geordneten Reihenfolge speichern. +- **Dictionaries** - speichern Objekte als key-value Paare. + +Schon gespannt auf den nächsten Teil? :) + +## Vergleichen + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4) behandelt. + +Ein großer Teil beim Programmieren besteht darin, Dinge zu vergleichen. Was lässt sich am besten vergleichen? Zahlen! Schauen wir uns mal an, wie das funktioniert: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +Hier haben wir Python einige Zahlen zum Vergleichen gegeben. Wie du siehst, kann Python nicht nur die Zahlen vergleichen, sondern auch die Ergebnisse von mathematischen Ausdrücken wie `2 * 2` und Funktionswerte wie die `2`, die von `len([4, 5])` zurückgegeben wird. Cool, nicht wahr? + +Womöglich wunderst du dich aber über die beiden `==` Gleichheitszeichen zum Vergleich, ob zwei Zahlen den selben Wert haben? Ein einfaches Gleichheitszeichen `=` verwenden wir bereits, um Variablen bestimmte Werte zuzuweisen. Da beim Programmieren alle Anweisungen eindeutig sein müssen, benötigst du in Python daher **stets** zwei `==` Zeichen, um Dinge auf Gleichheit zu testen. Wir können auch feststellen, ob Werte unterschiedlich sind. Dafür verwenden wir das Symbol `!=`, wie im obigen Beispiel. + +Nun noch zwei weitere Vergleiche: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>` und `<` sind klar, was aber sollen `>=` und `<=` bedeuten? Vergleiche liest du folgendermaßen: + +- x `>` y bedeutet: x ist größer als y +- x `<` y bedeutet: x ist kleiner als y +- x `<=` y bedeutet: x ist kleiner oder gleich y +- x `>=` y bedeutet: x ist größer oder gleich y + +Sensationell! Lust auf mehr? Dann probier das: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Du kannst Python beliebig viele Vergleiche vornehmen lassen und wirst ein Ergebnis erhalten. Das ist wirklich cool, oder? + +- **and** - wenn Du den `and`-Operator verwendest, müssen beide Vergleiche True (d.h. wahr) ergeben, damit das Gesamtergebnis auch True ist +- **or** - wenn Du den `or`-Operator verwendest, genügt es, wenn einer der beiden Vergleiche True ergibt, damit das Gesamtergebnis True ergibt + +Die Redewendung "Äpfel mit Birnen zu vergleichen" hast du bestimmt schon einmal gehört. Machen wir dies doch einmal in Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Unterschiedliche Dinge, hier die Datentypen Zahlen (`int`) und Strings (`str`), lassen sich auch in Python nicht miteinander vergleichen. In solch einem Fall liefert uns Python einen **TypeError** und sagt uns, dass diese zwei Datentypen nicht miteinander verglichen werden können. + +## Boolean + +Du hast gerade einen neuen Typ von Python-Objekten kennen gelernt. Er heisst **Boolean**. + +Es gibt zwei Boolean-Objekte: + +- True (wahr) +- False (falsch) + +Damit Python diese beiden Werte versteht, musst du sie auch genau so schreiben (den ersten Buchstaben groß, alle weiteren klein). **true, TRUE und tRUE funktionieren nicht – nur True ist korrekt.** (Dasselbe gilt auch für False.) + +Auch Booleans können Variablen zugewiesen werden: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Auch Folgendes geht: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Übe ein wenig, indem du mit Booleans rumspielst, zum Beispiel mit diesen Anweisungen: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Glückwunsch! Booleans sind echt eine der coolsten Features beim Programmieren und du hast gerade gelernt, damit umzugehen! + +# Speicher es! + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk) behandelt. + +Bisher haben wir den Python-Code nur im Interpreter eingegeben, wodurch wir immer nur eine Zeile Code auf einmal ausführen konnten. Richtige Programme dagegen werden in Dateien gespeichert und, je nach Programmiersprache, durch einen **Interpreter** ausgeführt oder durch einen **Compiler** übersetzt. Unseren bisherigen Code haben wir dagegen im Python-**Interpreter** Zeile für Zeile eingegeben und einzeln ausgeführt. Für die nächsten Beispiele brauchen wir mehr als eine Zeile, daher werden wir nun: + +- Den Python-Interpreter beenden +- Einen Code-Editor unserer Wahl öffnen +- Code eingeben und diesen in einer Python-Datei sichern +- Und diesen dann laufen lassen! + +Um den Python-Interpreter zu beenden, nutze die `exit()`-Funktion + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +``` + +Nun siehst du wieder den normalen Kommandozeilen-Prompt. + +Im Kapitel [Code-Editor](../code_editor/README.md) haben wir uns bereits einen Code-Editor ausgesucht. Nun öffnen wir den Code-Editor und schreiben folgenden Code in eine neue Datei (wenn du ein Chromebook benutzt, dann erstelle eine neue Datei in der Cloud-IDE, öffne sie und du befindest dich automatisch im integrierten Code-Editor): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Da du nun schon einige Python-Erfahrung hast, schreibe ein wenig Code mit dem, was du bislang gelernt hast. + +Als nächstes wollen wir diesen Code in einer Datei mit einem aussagekräftigen Namen speichern. Lass uns die Datei **python_intro.py** nennen und auf dem Desktop speichern. Wir können der Datei jeden Namen geben, den wir wollen, aber es ist wichtig sicherzustellen, dass der Dateiname auf **.py** endet. Die Erweiterung **.py** gibt unserem Betriebssystem an, dass dies ein **Python executable file** ist und Python diese ausführen kann. + +> **Hinweis:** Du wirst eines der coolsten Eigenschaften von Code-Editoren bemerken: Farben! In der Python-Konsole hatte alles die gleiche Farbe. Der Code-Editor dagegen sollte dir nun die `print`-Funktion in einer anderen Farbe anzeigen als der von ihr auszugebende Text. Dies wird "Syntax Hervorhebung" ("syntax highlighting") genannt und ist ein wirklich sehr nützliches Werkzeug beim Programmieren. Die Farbe von Dingen gibt dir Hinweise auf z.B. nicht geschlossene Zeichenfolgen oder Tippfehler in einem Schlüsselwort (wie das `def` in einer Funktion, das wir weiter unten sehen werden). Dies ist einer der Gründe, warum wir Code-Editoren verwenden. :) + +Nun, da die Datei gesichert ist, wollen wir sie ausführen! Nutze, was du bisher über die Kommandozeile (das mit dem Prompt) gelernt hast, um in der Konsole in das Desktop-Verzeichnis zu wechseln. + + + +Auf einem Mac sieht das etwa so aus: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Unter Linux ist es ähnlich: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Denk daran, dass das "Desktop"-Verzeichnis bei dir "Schreibtisch" heißen kann.) + + + + + +In der Eingabeaufforderung von Windows wird's so sein: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +Und in der Powershell von Windows so: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Wenn du nicht weiterkommst, frag' um Hilfe. Denn genau dafür sind die Coaches da! + +Benutze jetzt Python, um den Code in der Datei auszuführen: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Hinweis: Unter Windows gibt es den 'python3'-Befehl nicht. Verwende stattdessen 'python', um die Datei auszuführen: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Prima! Du hast soeben dein erstes Python-Programm aus einer Datei heraus ausgeführt. Großartig, oder? + +Nun wollen wir uns einem wichtigen Teil der Programmierung zuwenden: + +## Wenn ... sonst-wenn ... sonst (If … elif … else) + +Oft sollen manche Programmteile nur ausgeführt werden, wenn bestimmte Vorbedingungen erfüllt sind. Dafür gibt es in Python sogenannte **if-Anweisungen**. + +Nun ändere den Code in deiner **python_intro.py** Datei: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Würden wir das nun speichern und anschließend ausführen, würden wir einen Fehler erhalten: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python erwartet hier noch weiteren Programmcode, der ausgeführt werden soll, wenn die Bedingung `3 > 2` wahr ist (also `True` ergibt). Versuchen wir, Python “It works!” ausgeben zu lassen. Ändere den Code in **python_intro.py** zu: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +Du fragst dich nun, warum wir die angefügte Zeile mit 4 Leerzeichen eingerückt haben? Damit teilen wir Python mit, dass dieser Code ausgeführt werden soll, wenn die vorhergehende Bedingung True ergeben hat. Du könntest auch eine andere Anzahl von Leerzeichen wählen, aber fast alle Python-Programmier nutzen 4 Leerzeichen, damit's gut aussieht. Ein einfaches Tab zählt auch wie 4 Leerzeichen, sofern dies in deinem Editor so eingestellt ist. Wenn du dich einmal entschieden hast, bleib dabei! Wenn du mit 4 Leerzeichen angefangen hast, solltest du alle weiteren Einrückungen auch mit 4 Leerzeichen machen, anderweitig könnte das Probleme verursachen. + +Nun sichere die Datei und führe sie noch einmal aus: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +Hinweis: Denk daran, dass Windows den 'python3'-Befehl nicht kennt. Falls du auf Windows arbeitest, verwende ab jetzt immer 'python', wenn in dieser Anleitung 'python3' steht. + +### Was passiert, wenn eine Bedingung nicht wahr (not True) ist? + +In den vorigen Beispielen wurde Code ausgeführt, wenn eine vorhergehende Bedingung True (wahr) ergab. Aber Python kennt auch `elif`- und `else`-Anweisungen: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 ist wirklich größer als 2') +else: + print('5 ist nicht größer als 2') +``` + +Wenn dies ausgeführt wird, wird es anzeigen: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 ist wirklich größer als 2 + + +Wenn 2 größer als 5 wäre, würde die zweite Anweisung (die nach dem else) ausgeführt. Schauen wir uns nun an, wie `elif` funktioniert: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +und ausgeführt erhalten wir: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +Hast du bemerkt, was passiert ist? `elif` lässt dich zusätzliche Bedingungen hinzufügen, die geprüft werden, falls die vorherige fehlschlägt. + +Du kannst so viele `elif`-Bedingungen nach der anfänglichen `if`-Anweisung hinzufügen, wie du magst. Zum Beispiel: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 # "volume" ist Englisch für "Lautstärke" +if volume < 20: + print("Das ist etwas leise.") +elif 20 <= volume < 40: + print("Das ist gut für Hintergrund-Musik.") +elif 40 <= volume < 60: + print("Perfekt, ich kann alle Details hören.") +elif 60 <= volume < 80: + print("Gut für Partys.") +elif 80 <= volume < 100: + print("Etwas laut!") +else: + print("Mir tun die Ohren weh! :(") +``` + +Python läuft durch jeden Test der Reihe nach und gibt dann aus: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfekt, ich kann alle Details hören. + + +## Kommentare + +Kommentare sind Zeilen, die mit `#` beginnen. Du kannst nach dem `#` schreiben, was auch immer du willst, und Python wird es ignorieren. Kommentare können deinen Code für andere Leute einfacher zu verstehen machen. + +Schauen wir, wie das aussieht: + +{% filename %}python_intro.py{% endfilename %} + +```python +# Ändert die Lautstärke, wenn sie zu leise oder zu laut ist +if volume < 20 or volume > 80: + volume = 50 + print("So ist's besser!") +``` + +Du musst nicht für jede Codezeile einen Kommentar schreiben, aber Kommentare sind nützlich um zu erklären, wieso dein Code etwas macht, oder um zusammenzufassen, wenn er etwas Komplexes tut. + +### Zusammenfassung + +In den letzten paar Übungen hast du gelernt: + +- **Vergleiche vorzunehmen** – in Python kannst du Vergleiche mit den folgenden Operatoren `>`, `>=`, `==`, `<=`, `<` sowie `and` und `or` vornehmen +- **Boolsche Datentypen** zu verwenden – dies sind Objekte, die nur zwei Werte annehmen können: `True` bzw. `False` +- **Dateien zu speichern** – also Programmcode in Dateien abzulegen, so dass du auch umfangreichere Programme schreiben kannst. +- **if … elif … else** – Anweisungen, die dir erlauben, bestimmte Programmteile nur auszuführen, wenn bestimmte Bedingungen erfüllt sind. +- **Kommentare** – Zeilen, die Python nicht ausführt und die dir ermöglichen deinen Code zu dokumentieren + +Zeit für den letzten Teil dieses Kapitels! + +## Deine eigenen Funktionen! + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0) behandelt. + +Erinnerst du dich an Funktionen wie `len()`, die du in Python aufrufen kannst? Prima! Du wirst nun lernen, eigene Funktionen zu schreiben! + +Eine Funktion ist eine Folge von Anweisungen, die Python ausführen soll. Jede Funktions-Definition beginnt mit dem Schlüsselwort (engl. "Keyword") `def`, bekommt einen Namen und kann Argumente (manchmal auch "Parameter" genannt) haben. Probieren wir's aus! Ersetze den Code in der Datei **python_intro.py** mit dem folgenden: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hallo(): + print("Halli-hallo!") + print("Wie geht's?") + +hallo() +``` + +Und schon hast du deine erste Funktion erstellt! + +Nun fragst du dich vielleicht, warum wir am Ende der Datei den Namen der Funktion nochmal hingeschrieben haben. Wenn wir `def hallo():` und die darauf folgenden, eingerückten Zeilen schreiben, dann schreiben wir Anweisungen, was die `hallo()` Funktion tun soll. Python wird diese Anweisungen lesen und speichern, die Funktion jedoch noch nicht ausführen. Um Python zu sagen, dass wir die Funktion ausführen wollen, müssen wir die Funktion mit `hallo()` aufrufen. Python liest und führt die Datei von oben nach unten aus, daher müssen wir die Funktion in der Datei erst definieren bevor wir sie aufrufen. + +Schauen wir, was passiert, wenn wir die Datei ausführen: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Halli-hallo! + Wie geht's? + + +Falls das nicht funktionert hat, keine Panik! Die Ausgabe wird dir dabei helfen, herauszufinden wieso: + +- Wenn du einen `NameError` erhältst, hast du dich vermutlich irgendwo im Code vertippt. Prüfe also, ob du bei der Funktionsdefinition `def hallo():` und beim Funktionsaufruf `hallo()` den Funktionsnamen gleich geschrieben hast. +- Wenn du einen `IndentationError` bekommst, prüfe, ob beide `print`-Zeilen die gleichen Whitespaces am Zeilenanfang haben: Python will den ganzen Code in einer Funktion hübsch ausgerichtet haben. +- Wenn du gar keine Ausgabe erhältst, stelle sicher, dass `hallo()` am Datei-Ende *nicht* eingerückt ist. Wenn es eingerückt ist, ist dieser Aufruf selbst Teil der Funktion und sie wird gar nicht ausgeführt. + +Als Nächstes bauen wir Funktionen mit sogenannten Argumenten. Wir werden das gerade gebaute Beispiel benutzen – eine Funktion, die die ausführende Person begrüßt – aber diesmal mit Namen: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hallo(name): +``` + +Wie du siehst, geben wir der Funktion jetzt einen Parameter, den wir `name` nennen: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hallo(name): + if name == 'Ola': + print('Hallo Ola!') + elif name == 'Sonja': + print('Hallo Sonja!') + else: + print('Hallo Unbekannte(r)!') + +hallo() +``` + +Denk daran: Die `print`-Funktion ist 4 Leerzeichen innerhalb der `if`-Anweisung eingerückt. Das ist sinnvoll, da die Funktion ausgeführt wird, wenn die Bedingung eintritt. Mal sehen, wie das jetzt funktioniert: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + Traceback (most recent call last): + File "python_intro.py", line 10, in + hallo() + TypeError: hallo() missing 1 required positional argument: 'name' + + +Hoppla, ein Fehler. Zum Glück gibt uns Python eine recht nützliche Fehlermeldung. Diese besagt, dass die Funktion `hallo()` (welche wir definiert haben) ein erforderliches Argument (namens `name`) hat und dass wir vergessen haben, dieses beim Funktionsaufruf mitzugeben. Lass uns das am unteren Ende der Datei schnell beheben: + +{% filename %}python_intro.py{% endfilename %} + +```python +hallo("Ola") +``` + +Und wir führen sie erneut aus: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hallo Ola! + + +Und wenn wir den Namen ändern? + +{% filename %}python_intro.py{% endfilename %} + +```python +hallo("Sonja") +``` + +Und ausgeführt: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hallo Sonja! + + +Nun, was denkst du, wird passieren, wenn du einen anderen Namen dort hinein schreibst? (Weder Ola noch Sonja.) Probier es aus und schau, ob du richtig liegst. Es sollte das Folgende herauskommen: + +{% filename %}command-line{% endfilename %} + + Hallo Unbekannte(r)! + + +Das ist genial, oder? Auf diese Weise musst du dich nicht jedesmal wiederholen, wenn du den Namen der Person änderst, die die Funktion grüßen soll. Und das ist genau der Grund, warum wir Funktionen brauchen – du willst auf keinem Fall deinen Code wiederholen! + +Lass uns noch etwas Schlaueres probieren – es gibt schließlich mehr als zwei Namen und für jeden eine eigene Bedingung aufzuschreiben, wäre ziemlich aufwendig, oder? Ersetze also deinen Code in der Datei durch den folgenden: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hallo(name): + print('Hallo ' + name + '!') + +hallo("Rachel") +``` + +Lass uns den Code aufrufen: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hallo Rachel! + + +Herzlichen Glückwunsch! Du hast gerade gelernt, wie du Funktionen schreibst! :) + +## Schleifen + +> Für die Leser zu Hause: Dieses Kapitel wird im Video [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) behandelt. + +Dies ist bereits der letzte Teil. Das ging doch schnell, oder? :) + +Programmierer wiederholen sich nicht gerne. Beim Programmieren geht es darum, Dinge zu automatisieren. Wir wollen also nicht jede Person mit ihrem Namen manuell grüßen müssen, oder? Für so etwas kommen Schleifen gelegen. + +Erinnerst du dich noch an Listen? Lass uns eine Liste mit Mädchennamen erstellen: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Wir wollen alle mit ihrem Namen grüßen. Wir besitzen bereits die `hallo`-Funktion, um dies zu tun, also lass sie uns in einer Schleife verwenden: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +Die `for`-Anweisung verhält sich ähnlich wie die `if`-Anweisung; Code unter beiden muss 4 Leerzeichen eingerückt werden. + +Hier ist der vollständige Code für die Datei: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hallo(name): + print('Hallo ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'du'] +for name in girls: + hallo(name) + print('Nächstes Mädchen') +``` + +Und wenn wir es ausführen: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hallo Rachel! + Nächstes Mädchen + Hallo Monica! + Nächstes Mädchen + Hallo Phoebe! + Nächstes Mädchen + Hallo Ola! + Nächstes Mädchen + Hallo du! + Nächstes Mädchen + + +Wie du sehen kannst, wird alles, was du innerhalb einer `for`-Anweisung eingerückt hast, für jedes Element der Liste `girls` wiederholt. + +Du kannst auch `for` auf Ganzzahlen beziehen, wenn du die `range`-Funktion benutzt: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Das würde ausgeben: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` ist eine Funktion, die eine Liste von aufeinander folgenden Zahlen erschafft (die Randwerte werden von dir als Argumente bereitgestellt). + +Beachte, dass der zweite der Werte, die du als Argumente übergibst, nicht in der Liste enthalten ist, die von Python ausgegeben wird. (Das bedeutet, dass `range(1, 6)` von 1 bis 5 zählt, aber nicht die Zahl 6 enthält). Das liegt daran, dass "range" halboffen ist, was wiederum bedeutet, dass es den ersten Wert enthält, aber nicht den letzten. + +## Zusammenfassung + +Das ist alles. **Du rockst total!** Das war ein kniffliges Kapitel, du darfst also ruhig stolz auf dich sein. Wir sind definitiv stolz auf dich und darauf, dass du es so weit geschafft hast! + +Wenn du zum offiziellen und vollständigen Python-Tutorial willst, besuche https://docs.python.org/3/tutorial/. Dort gibt's (bislang jedoch noch nicht auf Deutsch) eine gründlichere und umfassendere Einführung in diese Programmiersprache. Viel Erfolg! :) + +Bevor du zum nächsten Kapitel übergehst, mach kurz 'was anderes – streck dich, lauf etwas 'rum, ruh' deine Augen aus. :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/de/python_introduction/images/cupcake.png b/de/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/de/python_introduction/images/cupcake.png differ diff --git a/de/template_extending/README.md b/de/template_extending/README.md new file mode 100644 index 00000000000..5362ae574b6 --- /dev/null +++ b/de/template_extending/README.md @@ -0,0 +1,151 @@ +# Erweiterung der Templates + +Eine weitere praktische Sache von Django ist das **template extending**, Erweiterungen des Templates. Was bedeutet das? Damit kannst du Teile deines HTML-Codes für andere Seiten deiner Website nutzen. + +Templates helfen, wenn du die selben Informationen oder das selbe Layout an mehreren Stellen verwenden willst. Du musst dich so nicht in jeder Datei wiederholen. Und wenn du etwas ändern willst, dann musst du es nicht in jedem einzelnen Template tun, sondern nur in einem! + +## Ein Basis-Template erstellen + +Ein Basis-Template ist das grundlegende Template, welches dann auf jeder einzelnen Seite deiner Website erweitert wird. + +Wir erstellen jetzt eine `base.html`-Datei in `blog/templates/blog/`: + + blog + └───templates +     └───blog +             base.html +             post_list.html + + +Öffne sie im Code-Editor, kopiere alles von `post_list.html` und füge es wie folgt in die `base.html`-Datei ein: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Dann ersetze in `base.html` den gesamten `` (alles zwischen `` und ``) hiermit: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Vielleicht hast du bemerkt, dass das alles von `{% for post in posts %}` bis `{% endfor %}` mit dem Folgenden ersetzt: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Aber warum? Du hast gerade einen `block` erstellt! Du hast den Template-Tag `{% block %}` benutzt, um einen Bereich zu schaffen, der HTML aufnehmen kann. Dieses HTML kommt aus einem anderen Template, welches das Template hier (`base.html`) erweitert. Wir zeigen dir gleich, wie das geht. + +Speichere nun die Datei `base.html` und öffne wieder `blog/templates/blog/post_list.html` im Code-Editor. {% raw %}Du löschst alles oberhalb von `{% for post in posts %}` und unterhalb von `{% endfor %}`. Wenn du das gemacht hast, sieht die Datei so aus:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Dieser Teil unseres Templates soll nun das Basis-Template erweitern. Wir müssen daher Block-Tags ergänzen! + +{% raw %}Deine Block-Tags müssen mit den Tags in der `base.html`-Datei übereinstimmen. Stelle sicher, dass die Block-Tags den ganzen Code deines content-Blocks umschließen. Um das zu erreichen, umschließt du ihn mit `{% block content %}` und `{% endblock %}`. So hier:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Nur eine Sache noch. Wir müssen die beiden Templates miteinander verknüpfen. Darum geht es ja bei der Template-Erweiterung! Dafür ergänzen wir einen Tag für Erweiterung (extends tag) ganz oben in der Datei. Und zwar so: + +{% 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 %} +``` + +Das war's! Speichere die Datei und probier aus, ob deine Website noch richtig funktioniert. :) + +> Wenn du den Fehler `TemplateDoesNotExist` erhältst, dann heißt das, dass es die Datei `blog/base.html` nicht gibt und dass `runserver` in der Konsole läuft. Halte ihn an (durch Drücken von Ctrl+C bzw. Strg+C – Control- und die C-Taste gleichzeitig) und starte ihn neu, indem du den Befehl `python manage.py runserver` ausführst. \ No newline at end of file diff --git a/de/whats_next/README.md b/de/whats_next/README.md new file mode 100644 index 00000000000..caa79e6cb03 --- /dev/null +++ b/de/whats_next/README.md @@ -0,0 +1,43 @@ +# Wie geht es weiter? + +Herzlichen Glückwunsch! **Du bist der Hammer!** Wir sind echt stolz! <3 + +### Was jetzt? + +Mach eine Pause und entspanne! Du hast gerade etwas wirklich Großes geleistet. + +Und dann folge Django Girls doch auf [Facebook](http://facebook.com/djangogirls) oder [Twitter](https://twitter.com/djangogirls), um auf dem Laufenden zu bleiben. + +### Könnt ihr weiteres Lernmaterial empfehlen? + +Ja! Es gibt *sehr* viele Online-Ressourcen zum Erlernen aller möglichen Programmierfähigkeiten – es kann ziemlich entmutigend sein, herauszufinden, was man als Nächstes machen sollte, aber wir helfen dir dabei. Was auch immer du für Interessen hattest, bevor du zu Django Girls gekommen bist und was auch immer du für Interessen während des Tutorials entwickelt hast, hier sind einige kostenfreie Ressourcen (oder solche mit größeren kostenlosen Teilen), die du nutzen kannst, um auf deinem Weg voranzukommen. + +#### Django + +- Unser anderes Buch, [Django Girls Tutorial: Erweiterungen](https://tutorial-extensions.djangogirls.org/) +- [Das offizielle Django-Tutorial](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [Video-Lektionen "Getting Started With Django"](http://www.gettingstartedwithdjango.com/) +- Spezialisierung [Django for Everybody](https://www.coursera.org/specializations/django) – einige Video-Lektionen können kostenlos getestet werden und du kannst ein Coursera-Zertifikat erlangen, wenn du diesen Kurs belegst + +#### HTML, CSS und JavaScript + +- [Web-Development-Kurs auf Codeacademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Python-Kurs auf Codecademy](https://www.codecademy.com/learn/learn-python) +- [Googles Python-Kurs](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way](http://learnpythonthehardway.org/book/) – die ersten Übungen sind kostenlos +- [New Coder Tutorials](http://newcoder.io/tutorials/) – eine Vielzahl von praktischen Beispielen, wie Python verwendet werden kann +- [edX](https://www.edx.org/course?search_query=python) – die meisten Kurse kannst du kostenfrei testen, aber wenn du ein Zertifikat oder Credits für eine Weiterbildung erhalten willst, dann kostet das etwas +- [Courseras Python-Spezialisierung](https://www.coursera.org/specializations/python) – einige Video-Lektionen können kostenlos getestet werden und du kannst ein Coursera-Zertifikat erlangen, wenn du diesen Kurs belegst +- [Python for Everybody](https://www.py4e.com/) - eine kostenlose und offene Version der Coursera-Python-Spezialisierung + +#### Mit Daten arbeiten + +- [Der Data-Science-Kurs von Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – die meisten Kurse kannst du kostenfrei testen, aber wenn du ein Zertifikat oder Credits für eine Weiterbildung erhalten willst, dann kostet das etwas +- [Dataquest](https://www.dataquest.io/) – die ersten 30 "Missionen" sind frei + +Wir sind gespannt darauf, was du als Nächstes baust! \ No newline at end of file diff --git a/deploy/README.md b/deploy/README.md deleted file mode 100644 index d946889c191..00000000000 --- a/deploy/README.md +++ /dev/null @@ -1,179 +0,0 @@ -# Deploy! - -Until now your website was only available on your computer, now you will learn how to deploy it! Deploying is the process of publishing your application on the Internet so people can finally go and see your app :). - -As you learned, a website has to be located on a server. There are a lot of providers, but we will use the one with the simplest deployment process: [Heroku](http://heroku.com/). Heroku is free for small applications that don't have too many visitors, it'll definitely be enough for you now. - -We will be following this tutorial: https://devcenter.heroku.com/articles/getting-started-with-django, but we pasted it here so it's easier for you. - -## The `requirements.txt` file - -We need to create a `requirements.txt` file to tell Heroku what Python packages need to be installed on our server. - -But first, Heroku needs us to install a few packages. Go to your console with `virtualenv` activated and type this: - - (myvenv) $ pip install dj-database-url gunicorn whitenoise - -After the installation is finished, go to the `djangogirls` directory and run this command: - - (myvenv) $ pip freeze > requirements.txt - -This will create a file called `requirements.txt` with a list of your installed packages (i.e. Python libraries that you are using, for example Django :)). - -Open this file and add the following line at the bottom: - - psycopg2==2.5.3 - -This line is needed for your application to work on Heroku. - - -## Procfile - -Another thing we need to create is a Procfile. Open up your code editor, create a file called `Procfile` in `djangogirls` directory and add this line: - - web: gunicorn mysite.wsgi - -Then save it. Done! - -## The `runtime.txt` file - -We need to tell Heroku which Python version we want to use. This is simply done by creating a `runtime.txt` and putting the following text inside: - - python-3.4.1 - -## mysite/local_settings.py - -There is a difference between settings we are using locally (on our computer) and settings for our server. Heroku is using one database, and your computer is using a different database. That's why we need to create a seperate file for settings that will only be available for our local enviroment. - -Go ahead and create `mysite/local_settings.py` file. It should contain your `DATABASE` setup from your `mysite/settings.py` file. Just like that: - - import os - BASE_DIR = os.path.dirname(os.path.dirname(__file__)) - - DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), - } - } - - DEBUG = True - -Then just save it! :) - -## mysite/settings.py - -Another thing we need to do is modify our website's `settings.py` file. Open `mysite/settings.py` in your editor and add the following lines at the end of the file: - - import dj_database_url - DATABASES['default'] = dj_database_url.config() - - SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') - - ALLOWED_HOSTS = ['*'] - - STATIC_ROOT = 'staticfiles' - - DEBUG = False - -At the end of the `mysite/settings.py`, copy and paste this: - - try: - from .local_settings import * - except: - pass - -It'll import all of your local settings if the file exists. - -Then save the file. - -## mysite/wsgi.py - -Open the `mysite/wsgi.py` file and add these lines at the end: - - from whitenoise.django import DjangoWhiteNoise - application = DjangoWhiteNoise(application) - -All right! - -## Heroku account - -You need to install your Heroku toolbelt which you can find here (you can skip the installation if you've already installed it during setup): https://toolbelt.heroku.com/ - -> When running the Heroku toolbelt installation program on Windows make sure to choose "Custom Installation" when being asked which components to install. In the list of components that shows up after that please additionally check the checkbox in front of "Git and SSH". - -> On Windows you also must run the following command to add Git and SSH to your command prompt's `PATH`: `setx PATH "%PATH%;C:\Program Files\Git\bin"`. Restart the command prompt program afterwards to enable the change. - -Please also create a free Heroku account here: https://id.heroku.com/signup/www-home-top - -Then authenticate your Heroku account on your computer by running this command: - - $ heroku login - -In case you don't have an SSH key this command will automatically create one. SSH keys are required to push code to the Heroku. - -## Git - -Heroku uses a git repository to manage your project files, so we need to use it too. - -Create `.gitignore` file with the following content: - - myvenv - __pycache__ - staticfiles - local_settings.py - db.sqlite3 - -and save it. The dot on the beginning of the file name is important! As you can see, we're now telling Heroku to ignore `local_settings.py` and don't download it, so it's only available on your computer (locally). - -__NOTE:__ Remember to replace `myvenv` with the name you gave your `virtualenv`! - -Next, we’ll create a new git repository and save our changes. Go to your console and run these commands: - - $ git init - Initialized empty Git repository in ~/djangogirls/.git/ - $ git add . - $ git commit -m "My Django Girls app" - [master (root-commit) 2943412] My Django Girls - 7 files changed, 230 insertions(+) - create mode 100644 .gitignore - create mode 100644 Procfile - create mode 100644 mysite/__init__.py - create mode 100644 mysite/settings.py - create mode 100644 mysite/urls.py - create mode 100644 mysite/wsgi.py - create mode 100644 manage.py - create mode 100644 requirements.txt - create mode 100644 runtime.txt - -## Deploy to Heroku! - -It was a lot of configuration and installing, right? But you need to do that once! Now you can deploy! - -It's as simple as running this command, replacing `djangogirlsblog` with your own application name: - - $ heroku create djangogirlsblog - -This automatically added the Heroku remote for our app to our repository. Now we can do a simple git push to deploy our application: - - $ git push heroku master - -## Visit your application - -You’ve deployed your code to Heroku, and specified the process types in a `Procfile`. You can now instruct Heroku to execute a process type. - -Let’s ensure we have one dyno running the web process type: - - $ heroku ps:scale web=1 - -We can now visit the app in our browser with `heroku open`. - - $ heroku open - -As you can see, there is an error. Heroku created a new database for us and it's empty. We also need to sync it: - - $ heroku run python manage.py syncdb - -You should now be able to see your website in a browser! Congrats :)! - - diff --git a/django/README.md b/django/README.md deleted file mode 100644 index e5084f751ab..00000000000 --- a/django/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# What is Django? - -Django (_/ˈdʒæŋɡoʊ/ jang-goh_) is a free and open source web application framework, written in Python. It's a web framework - a set of components that helps you to develop websites faster and easier. - -You see, when you're building a website, you always need a similiar set of components: a way to handle user authentication (signing up, signing in, signing out), management panel for your website, forms, uploading files, etc. - -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 is one of them) that give you ready components you can use. - -Frameworks exist to save you from having to reinvent the wheel and help alleviate some of the overhead when you’re building a new site. - -## Why do you need a framework? - -To understand what Django actually is for, we need a closer look at the servers. The first thing is that the server needs to know that you want it to serve you a webpage. - -Imagine a mailbox (port) which is monitored for incoming letters (requests). This is done by a web server. The web server reads the letter, and sends a response with a webpage. But when you want to send something, you need to have some content. And Django is something that helps you create the content. - -## What happens when someone requests a website from your server? - -When a request comes to a web server it's passed to Django which tries to figure out what actually is requested. It takes a webpage 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 the bottom and if something is matched then Django passes the request to the associated function (which is called *view*). - -Imagine a postman with a letter. She is walking down the street and checks each house number with the one on the letter. If it matches, they put the letter there. This is how the urlresolver works! - -In the *view* function all interesting things are done: we can look at a database to look for some information. Maybe the user asked to change something in the data? Like a letter saying "Please change 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. - -Of course, 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. - -So instead of diving too much into details, we will simply start creating something with Django and we will learn all the important parts along the way! - - diff --git a/django_admin/README.md b/django_admin/README.md deleted file mode 100644 index 8d03bf44587..00000000000 --- a/django_admin/README.md +++ /dev/null @@ -1,36 +0,0 @@ -# Django admin - -To add, edit and delete posts we've just modeled, we will use Django admin. - -Let's open the `blog/admin.py` file and replace its content with this: - - from django.contrib import admin - from .models import Post - - admin.site.register(Post) - -As you can see, we import (include) the Post model defined in the previous chapter. To make our model visible on the admin page, we need to register the model with `admin.site.register(Post)`. - -Ok, time to look at our Post model. Remember to run `python manage.py runserver` in the console to run the web server. Go to the browser and type the address: - - http://127.0.0.1:8000/admin/ - -You will see a login page like this: - -![Login page](images/login_page2.png) - -You should use the username and password you chose when you were creating a database (in the __Starting Django project__ chapter). After logging in, you should see the Django admin dashboard. - -![Django admin](images/django_admin3.png) - -Go to Posts and experiment a little bit with it. Add five or six blog posts. Don't worry about the content - you can simply copy-paste some text from this tutorial as your posts' content to save time :). - -Make sure that at least two or three posts (but not all) have a publish date set. It will be helpful later. - -![Django admin](images/edit_post3.png) - -If you want to know more about Django admin, you should check Django's documentation: https://docs.djangoproject.com/en/1.6/ref/contrib/admin/ - -It is probably a good moment to grab a coffee (or tea) and eat something sweet. You created your first Django model - you deserve a little treat! - - diff --git a/django_admin/images/django_admin3.png b/django_admin/images/django_admin3.png deleted file mode 100644 index a450b4f9630..00000000000 Binary files a/django_admin/images/django_admin3.png and /dev/null differ diff --git a/django_admin/images/edit_post3.png b/django_admin/images/edit_post3.png deleted file mode 100644 index c8572a73e7d..00000000000 Binary files a/django_admin/images/edit_post3.png and /dev/null differ diff --git a/django_admin/images/login_page2.png b/django_admin/images/login_page2.png deleted file mode 100644 index 47153ef6960..00000000000 Binary files a/django_admin/images/login_page2.png and /dev/null differ diff --git a/django_forms/README.md b/django_forms/README.md deleted file mode 100644 index 6ddbfc6ad75..00000000000 --- a/django_forms/README.md +++ /dev/null @@ -1,294 +0,0 @@ -# Django Forms - -The final thing we want to do on our website is create a nice way to add and edit blog posts. Django's `admin` is cool, but it is rather hard to customize and make pretty. With `forms` we will have absolute power over our interface - we can do almost anything we can imagine! - -The nice thing about Django forms is that we can either define one from scratch or create a `ModelForm` which will save the result of the form to the model. - -This is exactly what we want to do: we will create a form for our `Post` model. - -Like every important part of Django, forms have their own file: `forms.py`. - -We need to create a file with this name in the `blog` directory. - - blog - └── forms.py - -Ok, let's open it and type the following code: - - from django import forms - - from .models import Post - - class PostForm(forms.ModelForm): - - class Meta: - model = Post - fields = ('title', 'text',) - -We need to import Django forms first (`from django import forms`) and, obviously, our `Post` model (`from .models import Post`). - -`PostForm`, as you probably suspect is the name of our form. 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. - -Next, we have `class Meta`, where we tell Django which model should be used to create this form (`model = Post`). - -Finally, we can say which field(s) should end up in our form. 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? - -And that's it! All we need to do now is use the form in a *view* and display it in a template. - -So once again we will create: a link to the page, a URL, a view and a template. - -## Link to a page with the form - -It's time to open `mysite/templates/mysite/base.html`. We will add a link in `div` named `page-header`: - - - -Note that we want to call our new view `post_new`. - -After adding the line, your html file should now look like this: - - {% load staticfiles %} - - - Django Girls blog - - - - - - - - -
- -

Django Girls Blog

-
-
-
-
- {% block content %} - {% endblock %} -
-
-
- - - - -After saving and refreshing the page `http://127.0.0.1:8000` you will obviously see a familiar `NoReverseMatch` error, right? - -## URL - -We open `blog/urls.py` and add a line: - - url(r'^post/new/$', views.post_new, name='post_new'), - -And the final code will look like this: - - from django.conf.urls import patterns, include, url - from . import views - - urlpatterns = patterns('', - url(r'^$', views.post_list), - url(r'^post/(?P[0-9]+)/$', views.post_detail), - url(r'^post/new/$', views.post_new, name='post_new'), - ) - -After refreshing the site, we see an `AttributeError`, since we don't have `post_new` view implemented. Let's add it right now. - -## post_new view - -Time to open the `blog/views.py` file and add the following lines with the rest of the `from` rows: - - from .forms import PostForm - -and our *view*: - - def post_new(request): - form = PostForm() - return render(request, 'blog/post_edit.html', {'form': form}) - -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 create quickly a template for the form. - -## Template - -We need to create a file `post_edit.html` in the `blog/templates/blog` directory. To make a form work we need several things: - -- we have to display the form. We can do that for example with a simple `{{ form.as_p }}`. -- the line above needs to be wrapped with an HTML form tag: <`form method="POST">...` -- we need a `Save` button. We do that with an HTML button: `` -- and finally just after the opening `
` tag we need to add `{% csrf_token %}`. This is very important, since it makes your forms secure! Django will complain if you forget about this bit if you try to save the form: - -![CSFR Forbidden page](images/csrf2.png) - -Ok, so let's see how the HTML in `post_edit.html` should look: - - {% extends 'mysite/base.html' %} - - {% block content %} -

New post

- {% csrf_token %} - {{ form.as_p }} - -
- {% endblock %} - -Time to refresh! Yay! Your form is displayed! - -![New form](images/new_form2.png) - -But, wait a minute! When you type something in `title` and `text` fields and try to save it - what will happen? - -Nothing! We are once again on the same page and our text is gone... and no new post is added. So what went wrong? - -The answer is: nothing. We need to do a little bit more work in our *view*. - -## Saving the form - -Open `blog/views.py` once again. Currently all we have in `post_new` view is: - - def post_new(request): - form = PostForm() - return render(request, 'blog/post_edit.html', {'form': form}) - -When we submit the form, we are back in the same view, but this time we have some more data in `request`, more specifically in `request.POST`. Remember that in HTML file our `
` definition had 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). - -So in our *view* we have two separate situations to handle. First one: when we access the page for the first time and we want a blank form. Second one: when we go back to the *view* with all form's data we just typed. So we need to add a condition (we will use `if` for that). - - if request.method == "POST": - [...] - else: - 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 with: - - form = PostForm(request.POST) - -Easy! Next thing is to check if the form is correct (all required fields are set and no incorrect values will be saved). We do that with `form.is_valid()`. - -We check if the form is valid and if so, we can save it! - - if form.is_valid(): - post = form.save(commit=False) - post.author = request.user - post.save() - -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 `Post` model yet - we want to add author first. Most of the time you will use `form.save()`, without `commit=False`, but in this case, we need to do that. -`post.save()` will preserve changes (adding author) and a new blog post is created! - -Finally, it would be awesome if we can immediatelly go to `post_detail` page for newly created blog post, right? To do that we need more imports: - - from django.core.urlresolvers import reverse - from django.shortcuts import redirect - -Add them at the very beginning of your file. And now we can say: go to `post_detail` page for a newly created post. - - return redirect('blog.views.post_detail', pk=post.pk) - -`blog.views.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! - -Ok, we talked a lot, but we probably want to see what the whole *view* looks like now, right? - - def post_new(request): - if request.method == "POST": - form = PostForm(request.POST) - if form.is_valid(): - post = form.save(commit=False) - post.author = request.user - post.save() - return redirect('blog.views.post_detail', pk=post.pk) - else: - form = PostForm() - return render(request, 'blog/post_edit.html', {'form': form}) - -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 `post_detail` page! - -That is awesome! - -## Form validation - -Now, we will show you how cool Django forms are. Blog post needs to have `title` and `text` fields. In our `Post` model we did not say (as opposed to `published_date`) that these fields are not required, so Django, by default, expects them to be set. - -Try to save the form without `title` and `text`. Guess, what will happen! - -![Form validation](images/form_validation2.png) - -Django is taking care of validating that all the fields in our form are correct. Isn't it awesome? - -> As we have recently used the Django admin interface the system currently thinks we are logged in. There are a few situations that could lead to us being logged out (closing the browser, restarting the DB etc.). If you find that you are getting errors creating a post referring to a lack of a logged in user. Head to the admin page `http://127.0.0.1:8000/admin` and login 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. - -![Logged in error](images/post_create_error.png) - - -## Edit form - -Now we know how to add a new form. But what if we want to edit an existing one? It 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 the steps already). - -Open `blog/post_detail.html` and add this line: - - - -so that the template will look like: - - {% extends 'mysite/base.html' %} - - {% block content %} -
- {% if post.published_date %} - {{ post.published_date }} - {% endif %} - -
-

{{ post.title }}

-

{{ post.text }}

- {% endblock %} - -In `blog/urls.py` we add this line: - - url(r'^post/(?P[0-9]+)/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*. - -Let's open a `blog/views.py` and add at the very end of the file: - - 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.save() - return redirect('blog.views.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. First thing: 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: - - form = PostForm(request.POST, instance=post) - -and when we just opened a form with this post to edit: - - form = PostForm(instance=post) - -Ok, let's test if it works! Let's go to `post_detail` page. There should be an edit button in the top-right corner:: - -![Edit button](images/edit_button2.png) - -When you click it you will see the form with our blog post: - -![Edit form](images/edit_form2.png) - -Feel free to change the title or the text and save changes! - -Congratulations! Your application is more and more complete! - -If you need more information about Django forms you should read the documentation: https://docs.djangoproject.com/en/1.6/topics/forms/ - -We prepared some extra tasks for you, but they are not very hard. You can do them as homework (they are described in __Homework: add more to your website__ chapter): -- create a page with all __draft__ posts -- adding a __publish__ button, which will make your post visible on `post_list` page -- deleting a post - -If you are ready for more: go to the next chapter and see if you can complete all the tasks! diff --git a/django_forms/images/csrf2.png b/django_forms/images/csrf2.png deleted file mode 100644 index 9dd1a9a4baa..00000000000 Binary files a/django_forms/images/csrf2.png and /dev/null differ diff --git a/django_forms/images/drafts.png b/django_forms/images/drafts.png deleted file mode 100644 index 1afd1432ddc..00000000000 Binary files a/django_forms/images/drafts.png and /dev/null differ diff --git a/django_forms/images/edit_button2.png b/django_forms/images/edit_button2.png deleted file mode 100644 index 669571631f4..00000000000 Binary files a/django_forms/images/edit_button2.png and /dev/null differ diff --git a/django_forms/images/edit_form2.png b/django_forms/images/edit_form2.png deleted file mode 100644 index 329674ee5ad..00000000000 Binary files a/django_forms/images/edit_form2.png and /dev/null differ diff --git a/django_forms/images/form_validation2.png b/django_forms/images/form_validation2.png deleted file mode 100644 index 0e81288c33e..00000000000 Binary files a/django_forms/images/form_validation2.png and /dev/null differ diff --git a/django_forms/images/new_form2.png b/django_forms/images/new_form2.png deleted file mode 100644 index 8180ce66a06..00000000000 Binary files a/django_forms/images/new_form2.png and /dev/null differ diff --git a/django_forms/images/post_create_error.png b/django_forms/images/post_create_error.png deleted file mode 100644 index ae4650a575a..00000000000 Binary files a/django_forms/images/post_create_error.png and /dev/null differ diff --git a/django_installation/README.md b/django_installation/README.md deleted file mode 100644 index 77da746e100..00000000000 --- a/django_installation/README.md +++ /dev/null @@ -1,101 +0,0 @@ -# Django installation - -> Part of this chapter is based on tutorials by Geek Girls Carrots (http://django.carrots.pl/). - -> Parts of this chapter is based on the [django-marcador -tutorial](http://django-marcador.keimlink.de/) licensed under Creative Commons -Attribution-ShareAlike 4.0 International License. The django-marcador tutorial -is copyrighted by Markus Zapke-Gründemann et al. - - -## Virtual environment - -Before we install Django, we'll get you to install an extremely useful tool that will help keep your coding environment tidy on your computer. It's possible to skip this step, but it's highly recommended not to - starting with the best possible setup will save you a lot of trouble in the future! - -So, let's create a **virtual environment** (also called a *virtualenv*). It will isolate your Python/Django setup on a per-project basis, meaning that any changes you make to one website won't affect any others you're also developing. Neat, right? - -All you need to do is find a directory in which you want to create the `virtualenv`; your home directory, for example. On Windows it might look like `C:\Users\Name\` (where `Name` is the name of your login). - -For this tutorial we will be using a new directory `djangogirls` from your home directory: - - mkdir djangogirls - cd djangogirls - -We will make a virtualenv called `myvenv`. The general command will be in the format: - - python -m venv myvenv - -### Windows - -To create a new `virtualenv`, you need to open the console (we told you about that a few tutorials ago - remember?) and run `C:\Python\python -m venv venv`. It will look like this: - - C:\Users\Name\djangogirls> C:\Python34\python -m venv myvenv - -where `C:\Python34\python` is the directory in which you previously installed Python and `myvenv` is the name of your `virtualenv`. You can use any other name, but stick to lowercase and use no spaces. It is also good idea to keep the name short - you'll be referencing it a lot! - -### Linux and OS X - -Creating a `virtualenv` on both Linux and OS X is as simple as running `python3 -m venv myvenv`. -It will look like this: - - ~/djangogirls$ python3 -m venv myvenv - -and just like the Windows instructions above, `myvenv` is the name of your `virtualenv`. You can use any other name, but stick to lowercase and use no spaces. It is also good idea to keep the name short - you'll be referencing it a lot! - -> __NOTE:__ Initiating the virtual environment on Ubuntu 14.04 like this currently gives the following error: - -> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 - -> To get around this, use the `virtualenv` command instead. - -> ~/djangogirls$ sudo apt-get install python-virtualenv -> ~/djangogirls$ virtualenv myvenv - - -## Working with virtualenv - -The command above will create a directory called `myvenv` (or whichever name you chose) that contains our virtual environment (basically bunch of directory and files). All we want to do now is starting it by running: - - C:\Users\Name\djangogirls> myvenv\Scripts\activate - -on Windows, or: - - ~/djangogirls$ source myvenv/bin/activate - -on OS X and Linux. - -Remember to replace `myvenv` with your chosen `virtualenv` name! - -> __NOTE:__ sometimes `source` might not be available. In those cases try doing this instead: - -> ~/djangogirls$ . myvenv/bin/activate - - - -You will know that you have `virtualenv` started when you see that the prompt in your console looks like: - - (myvenv) C:\Users\Name\djangogirls> - -or: - - (myvenv) ~/djangogirls$ - -Notice the prefix `(myvenv)` appears! - -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 - -Now that you have your `virtualenv` started, you can install Django using `pip`. In the console, run `pip install django==1.6.5` (note that we use a double equal sign: `==`). - - (myvenv) ~$ pip install django==1.6.5 - Downloading/unpacking django==1.6.5 - Installing collected packages: django - Successfully installed django - Cleaning up... - -> 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. - -That's it! You're now (finally) ready to create a Django application! But to do that, you need a nice program to write your code in... diff --git a/django_models/README.md b/django_models/README.md deleted file mode 100644 index 3853da8a399..00000000000 --- a/django_models/README.md +++ /dev/null @@ -1,157 +0,0 @@ -# Django models - -What we want to create now is something that will store all posts in our blog. But to be able to do that we need to talk a little bit about things called `objects`. - -## Objects - -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. - -So what is an object? It is a number of properties and actions. It sounds weird, but we will give you an example. - -If we want to model a cat we will create an object `Cat` that has some properties, i.e. `color`, `age`, `mood` (i.e. good, bad, sleepy ;)), `owner` (that is a `Person` object or maybe, in case of a strayed cat, this property is empty). - -And then the `Cat` has some actions: `purr`, `scratch` or `feed` (in which we will give the cat some `CatFood`, which could be a separate object with properties, i.e. `taste`). - - Cat - -------- - color - age - mood - owner - purr() - scratch() - feed(cat_food) - - - CatFood - -------- - taste - -So basically the idea is to describe real things in code with properties (called `object properties`) and actions (called `methods`). - -How will we model blog posts then? We want to build a blog, right? - -We need to answer the question: what is a blog post? What properties should it have? - -Well, for sure our blog post needs some text with its content and a title, right? It would be also nice to know who wrote it - so we need an author. Finally, we want to know when the post was created and published. - - Post - -------- - title - text - author - created_date - published_date - -What kind of things could be done with a blog post? It would be nice to have some `method` that publishes the post, right? - -So we will need `publish` method. - -Since we already know what we want to achieve, we can start modelling it in Django! - -## Django model - -Knowing what an object is, we can create a Django model for our blog post. - -A model in Django is a special kind of object - it is saved in the `database` (database we created in the __Database__ chapter). - -### Creating an application - -To keep everything tidy, we will create a separate application inside our project. It is very nice to have everything organized from the very beginning. To create an application we need to run in the console (from `djangogirls` directory where `manage.py` file is) `python manage.py startapp blog`. - - (myvenv) ~/djangogirls$ python manage.py startapp blog - -You will notice that a new `blog` directory is created and it contains a number of files now. Our directories and files in our project should look like this: - - mysite - ├── __init__.py - ├── settings.py - ├── urls.py - ├── wsgi.py - manage.py - blog - ├── __init__.py - ├── admin.py - ├── models.py - ├── tests.py - └── views.py - -After creating an application we also need to tell Django that it should use it. We do that in the file `mysite/settings.py`. We need to find `INSTALLED_APPS` and add a line `blog` just above `)`. We should also add the `mysite` application (which was created for us when we started a new project in the last chapter). So the final product should look like this: - - INSTALLED_APPS = ( - 'django.contrib.admin', - 'django.contrib.auth', - 'django.contrib.contenttypes', - 'django.contrib.sessions', - 'django.contrib.messages', - 'django.contrib.staticfiles', - 'blog', - 'mysite', - ) - -### Creating a blog post model - -In a file `models.py` we define all objects called `Models` - this is a place in which we will define our blog post. - -Let's open `blog/models.py`, remove everything from it and write code like this: - - from django.db import models - from django.utils import timezone - from django.contrib.auth.models import User - - class Post(models.Model): - author = models.ForeignKey(User) - title = models.CharField(max_length=200) - text = models.TextField() - created_date = models.DateTimeField( - default=timezone.now) - published_date = models.DateTimeField( - blank=True, null=True) - - def publish(self): - self.published_date = timezone.now() - self.save() - - def __str__(self): - return self.title - -It is scary, right? But no worries, we will explain what these lines mean! - -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 ...`. - -`class Post(models.Model):` - this line defines our model (it is an `object`!). - -- `class` is a special keyword that indicates that we are defining an object. -- `Post` is the name of our model, we can give it a different name (but we must avoid special characters and whitespaces). Always start a name with an uppercase letter. -- `models.Model` means that the Post is a Django Model, so Django knows that it should be saved in the database. - -Now we define properties we were talking about: `title`, `text`, `created_date`, `published_date` and `author`. To do that we need to define a type of field (is it text? A number? A date? A relation to another object, i.e. a User?). - -- `models.CharField` - this is how you define text with a limited number of characters. -- `models.TextField` - this is for long texts without a limit. It will be ideal for a blog post content, right? -- `models.DateTimeField` - this is a date and time. -- `models.ForeignKey` - this is a link to another model. - -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/1.6/ref/models/fields/#field-types). - -What about `def publish(self):`? It is exactly our `publish` method we were talking about before. `def` means that this is a function/method. `publish` is a name of the method. You can change it, if you want. The rule is that we use lowercase and underscores instead of whitespaces (i.e. if you want to have a method that calculates average price you could call it `calculate_average_price`). - -Methods very 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. - -If something is still not clear about models, feel free to ask your coach! We know it is very complicated, especially when you learn what objects and functions are at the same time. But hopefully it looks slightly less magic for you now! - -### Create tables for models in your database - -The last step here is to add our new model to our database. It is as easy as typing `python manage.py syncdb`. It will look like this: - - (myvenv) ~/djangogirls$ python manage.py syncdb - Creating tables ... - Creating table blog_post - Installing custom SQL ... - Installing indexes ... - Installed 0 object(s) from 0 fixture(s) - -It would be nice to see this Post model, right? Jump to the next chapter to see what your Post looks like! - - - diff --git a/django_orm/README.md b/django_orm/README.md deleted file mode 100644 index 0b20c4fa1cd..00000000000 --- a/django_orm/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# Django Querysets - -We have different pieces in place: the `Post` model is defined in `models.py`, we have `post_list` in `views.py` and the template added. But how will we actually make our posts appear in our HTML template? Because that is what we want: take some content (models saved in the database) and display it nicely in our template, right? - -This is exactly what *views* are supposed to do: connect models and templates. In our `post_list` *view* we will need to take models we want to display and pass them to the template. So basically in a *view* we decide what (model) will be displayed in a template. - -Ok, so how we will achieve it? - -We need to open our `blog/views.py`. So far `post_list` *view* looks like this: - - from django.shortcuts import render - - def post_list(request): - return render(request, 'blog/post_list.html', {}) - -Remember when we talked about including code written in different files? Now is a moment when we have to include the model we have written in `models.py`. We will add this line `from .models import Post` like this: - - from django.shortcuts import render - from .models import Post - -Dot after `from` means *current directory* or *current application*. Since `views.py` and `models.py` are in the same directory we can simply use `.` and the name of the file (without `.py`). Then we import the name of the model (`Post`). - -But what's next? To take actual blog posts from `Post` model we need something called a `Queryset`. - -## Queryset - -So now we are interested in a list of blog posts, right? But all we have is model `Post`. A Queryset will give us a collection we are looking for. All we need to do is use: - - Post.objects.all() - -which returns all blog posts! - -And we have our first queryset! Now we can take each element out of it and display it or do something else with it. - -But before we pass this queryset to the template and display blog posts we will do some magic and select only posts that are published (they have a `published_date` set). - -This is where we introduce a `filter`. We will use it instead of `all` in `Post.objects.all()`. In parentheses we will state what condition(s) needs to be met by a blog post to end up in our queryset. In our situation it is `published_date` that is not empty. The way to write it in Django is: `published_date__isnull=False` (`null` in programming means *empty*). Now our piece of code looks like: - - Post.objects.filter(published_date__isnull=False) - -Finally, it would be good to have our posts ordered by publish date, right? We can do that with `order_by`. In parentheses we will type (in quotation marks `''`) the name of a field (`published_date`) to order by. Our final queryset looks like this: - - Post.objects.filter(published_date__isnull=False).order_by('published_date') - -Now we put this piece of code inside the `post_list` file, by adding it to the function `def post_list(request)`: - - from django.shortcuts import render - from .models import Post - - def post_list(request): - posts = Post.objects.filter(published_date__isnull=False).order_by('published_date') - return render(request, 'blog/post_list.html', {}) - -Please note that we create a *variable* for our queryset: `posts`. Treat this as the name of our queryset. From now on we can refer to it by this name. -The last missing part is to pass the `posts` queryset to the template (we will cover how to display it in a next chapter). - -In the `render` function we already have parameter with `request` (so everything we receive from the user via the Internet) and a template file `'blog/post_list.html'`. The last parameter, which looks like this: `{}` is a place in which we can add some things for the template to use. We need to give them names (we will stick to `'posts'` right now :)). It should look like this: `{'posts': posts}`. Please note that the part before `:` is wrapped with quotes `''`. - -So finally our `blog/views.py` file should look like this: - - from django.shortcuts import render - from .models import Post - - def post_list(request): - posts = Post.objects.filter(published_date__isnull=False).order_by('published_date') - return render(request, 'blog/post_list.html', {'posts': posts}) - -That's it! Time to go back to our template and display this queryset! - -If you want to read a little bit more about querysets in Django you should look here: https://docs.djangoproject.com/en/1.6/ref/models/querysets/ - - - - diff --git a/django_start_project/README.md b/django_start_project/README.md deleted file mode 100644 index 0fc9a281644..00000000000 --- a/django_start_project/README.md +++ /dev/null @@ -1,116 +0,0 @@ -# Your first Django project! - -> Part of this chapter is based on tutorials by Geek Girls Carrots (http://django.carrots.pl/). - -> Parts of this chapter is based on the [django-marcador -tutorial](http://django-marcador.keimlink.de/) licensed under Creative Commons -Attribution-ShareAlike 4.0 International License. The django-marcador tutorial -is copyrighted by Markus Zapke-Gründemann et al. - -We're going to create a simple blog! - -The first step towards creating it is starting a new Django project. Basically, this means that we'll run some scripts provided by Django that will create the skeleton of a Django project for us: a bunch of directories and files that we will later use. - -The names of some files and directories are very important for Django. You should not rename the files that we are about to create. Moving them to a different place is also not a good idea. Django needs to maintain a certain structure in order to be able to find important things. - -In console you should run (remember that you don't type `(myvenv) ~/djangogirls$`, ok?): - -> Remember to run everything in the virtualenv. If you don't see a prefix `(myvenv)` in your console you need to activate your virtualenv. We explained how to that in __Django installation__ chapter in __Working with virtualenv__ part. - -Run on Windows: - - (myvenv) ~/djangogirls$ python myvenv\Scripts\django-admin.py startproject mysite . - -or on Linux or Mac OS: - - (myvenv) ~/djangogirls$ django-admin.py startproject mysite . - -`django-admin.py` is a script that will create the directories and files for you. You should now have a directory structure which looks like this: - - manage.py - │ - └───mysite - settings.py - urls.py - wsgi.py - __init__.py - - -`manage.py` is a script that helps with management of the site. With it we will be able to start a web server on our computer without installing anything else, amongst other things. - -The `settings.py` file contains the configuration of your website. - -Remember when we talked about a postman checking where to deliver a letter? `urls.py` file contains a list of patterns used by `urlresolver`. - -Let's ignore the other files for now - we won't change them. The only thing to remember is to not delete them by accident! - -## Changing settings - -Let's make some changes in `mysite/settings.py`. Open the file using the code editor you installed earlier. - -It would be nice to have the correct time on our website. Go to http://en.wikipedia.org/wiki/List_of_tz_database_time_zones and copy your relevant time zone (TZ). (eg. `Europe/Berlin` ) - -You should find lines that contain `USE_TZ` and `TIME_ZONE` and modify them to look like this, substituting `Europe/Berlin` with your relevant time zone: - - USE_TZ = False - TIME_ZONE = 'Europe/Berlin' - -(But with the correct country and city for your timezone.) - -## Setup a database - -There's a lot of different database software that can store data for your site. We'll use the default one, `sqlite3`. - -This is already set up in this part of your `mysite/settings.py` file: - - DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), - } - } - -To create a database for our blog, let's run the following in the console: `python manage.py syncdb` (we need to be the `djangogirls` directory that contains the `manage.py` file). If that goes well, you should see something like this: - - (myvenv) ~/djangogirls$ python manage.py syncdb - Creating tables ... - Creating table django_admin_log - Creating table auth_permission - Creating table auth_group_permissions - Creating table auth_group - Creating table auth_user_groups - Creating table auth_user_user_permissions - Creating table auth_user - Creating table django_content_type - Creating table django_session - - You just installed Django's auth system, which means you don't have any superusers defined. - Would you like to create one now? (yes/no): yes - Username (leave blank to use 'Name'): - Email address: admin@example.com - Password: - Password (again): - Superuser created successfully. - Installing custom SQL ... - Installing indexes ... - Installed 0 object(s) from 0 fixture(s) - -It will ask you if you want to create a *superuser* - a user which has control over everything on the site. Type `yes`, press enter and type your username (lowercase, no spaces), email address and password when you're asked for them. Remember this username and password! We'll use it later. - -And we're done! Time to start the web server and see if our website is working! - -You need to be in the directory that contains the `manage.py` file (the `djangogirls` directory). In the console, we can start the web server by running `python manage.py runserver`: - - (myvenv) ~/djangogirls$ python manage.py runserver - -Now all you need to do is check that your website is running - open your browser (Firefox, Chrome, Safari, Internet Explorer or whatever you use) and enter the address: - - http://127.0.0.1:8000/ - -You can stop the web server again (e.g. to type other commands on the command prompt) by pressing CTRL+C - Control and C buttons together. - -Congratulations! You've just created your first website and run it using a web server! Isn't that awesome? - -![It worked!](images/it_worked2.png) - -Ready for the next step? It's time to create some content! diff --git a/django_start_project/images/it_worked2.png b/django_start_project/images/it_worked2.png deleted file mode 100644 index 4412ecfc49e..00000000000 Binary files a/django_start_project/images/it_worked2.png and /dev/null differ diff --git a/django_templates/README.md b/django_templates/README.md deleted file mode 100644 index fd413a85bc0..00000000000 --- a/django_templates/README.md +++ /dev/null @@ -1,61 +0,0 @@ -# Django templates - -Time to display some data! Django gives us some helpful, built-in __template tags__ for that. - -## What are template tags? - -You see, in HTML, you can't really put Python code, because browsers don't understand it. They only know HTML. We know that HTML is rather static, while Python is much more dynamic. - -__Django template tags__ allow us to transfer Python-like things into HTML, so you can build dynamic websites faster and easier. Yikes! - -## Display post list template - -In the previous chapter we gave our template a list of posts in a `posts` variable. Now we will display it in HTML. - -To print a variable in Django template, we use double curly brackets with the variable's name inside, like this: - - {{ posts }} - -Try this in your `blog/templates/blog/post_list.html` template (replace everything between the second `
` tags with `{{ posts }}` line), save the file and refresh the page to see the results: - -![Figure 13.1](images/step1.png) - -As you can see, all we've got is this: - - [, ] - -This means that Django understand it as a list of objects. Remember from __Introduction to Python__ how we can display lists? Yes, with for loops! In a Django template, you do them this way: - - {% for post in posts %} - {{ post }} - {% endfor %} - -Try this in your template. - -![Figure 13.2](images/step2.png) - -It works! But we want them to be displayed in a way we created earlier in the __Introduction to HTML__ chapter - like the static posts we put there before. You can mix HTML and template tags. Our `body` will look like this: - - - - {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text|linebreaks }}

-
- {% endfor %} - -Everything you put between `{% for %}` and `{% endfor %}` will be repeated for each object in the list. Refresh your page: - -![Figure 13.3](images/step3.png) - -Have you noticed that we used a slightly different notation this time `{{ post.title }}` or `{{ post.text }}`. We are accessing data in each of the fields defined in our `Post` model. Also the `|linebreaks` is piping the posts text through a filter to convert line-breaks into paragraphs. - -Congrats! Now go ahead and try adding a new post in your Django admin (remember to add published_date!), then refresh your page to see if the post appears there. - -Works like a charm? We're proud! Treat yourself something sweet, you have earned it :) - -![Figure 13.4](images/donut.png) diff --git a/django_templates/images/donut.png b/django_templates/images/donut.png deleted file mode 100644 index 64d38b4e889..00000000000 Binary files a/django_templates/images/donut.png and /dev/null differ diff --git a/django_templates/images/step1.png b/django_templates/images/step1.png deleted file mode 100644 index 113e145c943..00000000000 Binary files a/django_templates/images/step1.png and /dev/null differ diff --git a/django_templates/images/step2.png b/django_templates/images/step2.png deleted file mode 100644 index 464a7645731..00000000000 Binary files a/django_templates/images/step2.png and /dev/null differ diff --git a/django_templates/images/step3.png b/django_templates/images/step3.png deleted file mode 100644 index b56b64f142e..00000000000 Binary files a/django_templates/images/step3.png and /dev/null differ diff --git a/django_urls/README.md b/django_urls/README.md deleted file mode 100644 index b0964246e13..00000000000 --- a/django_urls/README.md +++ /dev/null @@ -1,95 +0,0 @@ -# Django urls - -We're about to build our first webpage -- a homepage for your blog! But first, let's learn a little bit about Django urls. - -## What is a URL? - -A URL is simply like a web address, you can see a URL every time you visit any website - it is visible in your browser's address bar (yes! `127.0.0.1:8000` is a URL! And http://djangogirls.com is also a URL): - -![Url](images/url.png) - -Every page on the Internet needs its own URL. This way your application knows what it should show to a user who opens a URL. In Django we use something called `URLconf` (URL configuration), which is a set of patterns that Django will try to match with the received URL to find the correct view. - -## How do URLs work in Django? - -Let's open up the `mysite/urls.py` file and see what it looks like: - - from django.conf.urls import patterns, include, url - - from django.contrib import admin - admin.autodiscover() - - urlpatterns = patterns('', - # Examples: - # url(r'^$', 'mysite.views.home', name='home'), - # url(r'^blog/', include('blog.urls')), - - url(r'^admin/', include(admin.site.urls)), - ) - -As you can see, Django already put something here for us. - -Lines that start with `#` are comments - it means that those lines won't be executed by Python. Pretty handy, right? - -The admin url, which you visited in previous chapter is already here: - - url(r'^admin/', include(admin.site.urls)), - -It 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. - -## Regex - -Do you wonder how Django matches URLs to views? Well, this part is tricky. Django uses `regex` -- regular expressions. Regex has a lot (a lot!) of rules that form a search pattern. It is not so easy to understand so we won't worry about it today and you'll definitely get to know them in the future. Today we will only use the ones we need. - -## Your first Django url! - -Time to create our first urls! We want http://127.0.0.1:8000/ to be a homepage of our blog and display a list of posts. - -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. -Go ahead, delete comment lines (lines starting with `#`) and add a line that will import `blog.urls` into the main url (`''`). - -Your `mysite/urls.py` file should now look like this: - - from django.conf.urls import patterns, include, url - - from django.contrib import admin - admin.autodiscover() - - urlpatterns = patterns('', - url(r'^admin/', include(admin.site.urls)), - url(r'', include('blog.urls')), - ) - -Django will now redirect everything that comes into `http://127.0.0.1:8000/` to `blog.urls` and look for further instructions there. - -## blog.urls - -Create a new `blog/urls.py` empty file. All right! Add these two first lines: - - from django.conf.urls import patterns, include, url - from . import views - -Here we're just importing Django's methods and all of our `views` from `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: - - urlpatterns = patterns('', - url(r'^$', views.post_list), - ) - -As you can see, we're now assigning a `view` called `post_list` to `^$` URL. But what does `^$` mean? It's regex magic :) Let's break it down: -- `^` in regex means "the beginning"; from this sign we can start looking for our pattern -- `$` matches only "the end" of the string, which means that we will finish looking for our pattern here - -If you put these two signs together, it looks like we're looking for an empty string! And that's correct, because in Django url resolvers, `http://127.0.0.1:8000/` is not a part of URL. This pattern will show 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. - -Everything all right? Open http://127.0.0.1:8000/ in your browser to see the result. - -![Error](images/error1.png) - -There is no "It works" anymore, huh? Don't worry, it's just an error page, nothing to be scared of! They're actually pretty useful: - -You can read that there is __no attribute 'post_list'__. Is *post_list* reminding you of anything? This is how we called our view! This means that everything is in place, we just didn't create our *view* yet. No worries, we will get there. - - - diff --git a/django_urls/images/error1.png b/django_urls/images/error1.png deleted file mode 100644 index cc17593d19d..00000000000 Binary files a/django_urls/images/error1.png and /dev/null differ diff --git a/django_urls/images/url.png b/django_urls/images/url.png deleted file mode 100644 index 6cd1bd96291..00000000000 Binary files a/django_urls/images/url.png and /dev/null differ diff --git a/django_views/README.md b/django_views/README.md deleted file mode 100644 index bdafc1a068e..00000000000 --- a/django_views/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# Django views - time to create! - -Time to get rid of the bug we created in the last chapter :) - -A *view* is a place where we put the "logic" of our application. It will request information from the `model` you created before and pass it to a `template` that you will create in the next chapter. Views are just Python methods that are a little bit more complicated than the thing we did in the __Introduction to Python__ chapter. - -Views are placed in the `views.py` file. We will add our *views* to the `blog/views.py` file. - -## blog/views.py - -OK, let's open up this file and see what's in there: - - from django.shortcuts import render - - # Create your views here. - -Not too much stuff here yet. The simplest *view* can look like this. - - def post_list(request): - - return render(request, 'blog/post_list.html', {}) - -As you can see, we created a method (`def`) called `post_list` that takes `request` and `return` a method `render` that will render (put together) our template `blog/post_list.html`. - -Save the file, go to http://127.0.0.1:8000/ and see what we have got now. - -Another error! Read what's going on now: - -![Error](images/error.png) - -This one is easy: *TemplateDoesNotExist*. Let's fix this bug and create a template in the next chapter! diff --git a/django_views/images/error.png b/django_views/images/error.png deleted file mode 100644 index 391c9e61e16..00000000000 Binary files a/django_views/images/error.png and /dev/null differ diff --git a/domain/images/1.png b/domain/images/1.png deleted file mode 100644 index 97a06e28f2a..00000000000 Binary files a/domain/images/1.png and /dev/null differ diff --git a/domain/images/2.png b/domain/images/2.png deleted file mode 100644 index 604fd5b02c8..00000000000 Binary files a/domain/images/2.png and /dev/null differ diff --git a/domain/images/3.png b/domain/images/3.png deleted file mode 100644 index c941c0d231d..00000000000 Binary files a/domain/images/3.png and /dev/null differ diff --git a/domain/images/4.png b/domain/images/4.png deleted file mode 100644 index dcbe145b271..00000000000 Binary files a/domain/images/4.png and /dev/null differ diff --git a/domain/images/5.png b/domain/images/5.png deleted file mode 100644 index 778765053e5..00000000000 Binary files a/domain/images/5.png and /dev/null differ diff --git a/domain/images/6.png b/domain/images/6.png deleted file mode 100644 index 52a0bb87c4c..00000000000 Binary files a/domain/images/6.png and /dev/null differ diff --git a/el/GLOSSARY.md b/el/GLOSSARY.md new file mode 100644 index 00000000000..b1bce01c323 --- /dev/null +++ b/el/GLOSSARY.md @@ -0,0 +1,3 @@ +# Επεξεργαστής Κώδικα + +Ο επεξεργαστής κώδικα είναι μια εφαρμογή που σου επιτρέπει να επεξεργάζεσαι και να αποθηκεύεις τον κώδικα σου, ώστε να είσαι σε θέση να επιστρέψεις σε αυτό αργότερα. Επίσης σου προσφέρει διάφορα εργαλεία όπως εύκολη αναζήτηση, αυτόματη συμπλήρωση κώδικα, απ' ευθείας μετάβαση σε κάποιο σημείο κλπ. Μπορείς να μάθεις πού μπορείς να βρείς ένα από το [κεφάλαιο επεξεργαστής κώδικα](./code_editor/README.md) \ No newline at end of file diff --git a/el/README.md b/el/README.md new file mode 100644 index 00000000000..447cc87d29b --- /dev/null +++ b/el/README.md @@ -0,0 +1,51 @@ +# Φροντιστήριο Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Αυτό το φροντιστήριο χορηγείται υπό την άδεια χρήσης με το όνομα: Creative Commons Attribution-ShareAlike 4.0 International License. Για να δείτε ένα αντίγραφο αυτής της άδειας χρήσης, επισκεφθείτε τον ακόλουθο σύνδεσμο https://creativecommons.org/licenses/by-sa/4.0/ + +## Καλώς ήρθατε + +Καλώς ήρθατε στο φροντιστήριο Django Girls! Χαιρόμαστε που σε βλέπουμε εδώ :) Σε αυτόν τον οδηγό θα σε πάμε ένα ταξίδι γύρω από τις τεχνολογίες ιστοσελίδων, προσφέροντας σου μία γεύση από όλα τα κομμάτια που πρέπει να συγκεντρωθούν ώστε να κάνουν τον ιστό (με άλλα λόγια το internet) να δουλέψει όπως το γνωρίζουμε. + +Όπως με όλα τα άγνωστα πράγματα, αυτό πρόκειται να είναι άλλη μία εμπειρία για σένα, αλλά μην ανησυχείς, αφού ήδη πήρες την απόφαση να είσαι εδώ, θα είσαι μια χαρά :) + +## Εισαγωγή + +Έχεις νιώσει ποτέ ότι ο κόσμος γίνεται όλο και περισσότερο σχετικός με την τεχνολογία και δεν μπορείς (ακόμα) να συσχετιθείς; Έχεις ποτέ αναρωτηθεί πώς να δημιουργήσεις μια ιστοσελίδα, αλλά ποτέ δεν είχες αρκετό κίνητρο για να ξεκινήσεις; Έχεις ποτέ σκεφτεί οτι ο κόσμος του software είναι πολύ περίπλοκος για σένα για να προσπαθήσεις να κάνεις κάτι από μόνη σου; + +Λοιπόν, έχουμε καλά νέα για σένα! Ο προγραμματισμός δεν είναι τόσο δύσκολος όσο φαίνεται και θέλουμε να σου δείξουμε πόσο διασκεδαστικός μπορεί να είναι. + +Αυτός ο οδηγός δεν θα σε μετατρέψει σε προγραμματιστή ως δια μαγείας. Αν θέλεις να γίνεις καλή προγραμματίστρια, χρειάζεται μήνες ή ακόμη και χρόνια εκμάθησης και πρακτικής εξάσκησης. Όμως θέλουμε να σου δείξουμε οτι ο προγραμματισμός ή η δημιουργία ιστιοσελίδων δεν είναι τόσο περίπλοκο όσο φαίνεται. Θα προσπαθήσουμε να σου εξηγήσουμε τα διάφορα κομμάτια όσο καλύτερα μπορούμε, ούτως ώστε να μην σε φοβίζει η τεχνολογία. + +Ελπίζουμε να μπορέσουμε να σε κάνουμε να αγαπήσεις την τεχνολογία, όπως εμείς! + +## Τι θα μάθεις κατα τη διάρκεια του οδηγού; + +Μόλις ολοκληρώσεις τον οδηγό, θα έχεις μία μικρή λειτουργική εφαρμογή ιστού (web application): το δικό σου blog. Θα σου δείξουμε πως να το ανεβάσεις ηλεκτρονικά, ώστε άλλοι να δουν την δουλειά σου! + +Θα φαίνεται έτσι (πάνω κάτω): + +![Σχήμα 0.1](images/application.png) + +> Αν είσαι μόνος σου χωρίς κάποιον να σε βοηθάει, τότε σε περίπτωση προβλήματος, έχουμε ένα σύστημα συνομιλίας για εσένα: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Ζητήσαμε από τους προπονητές μας και τους προηγούμενους συμμετάσχοντες να είναι εκεί που και που και να βοηθάνε άλλους με το σεμινάριο! Μην φοβάστε να κάνετε ερωτήσεις εκεί! + +Οκ, [ ας ξεκινήσουμε από την αρχή...](./how_the_internet_works/README.md) + +## Ακολουθώντας τον οδηγό στο σπίτι + +Είναι εκπληκτικό να λάβετε μέρος στο εργαστήριο Django Girls, αλλά γνωρίζουμε ότι δεν είναι πάντα εφικτό να παρακολουθήσετε ένα. Για αυτό σας ενθαρρύνουμε να προσπαθήσετε να ακολουθήσετε αυτό το σεμινάριο στο σπίτι. Για τους αναγνώστες στο σπίτι, προς το παρόν ετοιμάζουμε βίντεο που θα το κάνουν ευκολότερο να παρακολουθήσετε τον οδηγό από μόνοι σας. Είναι ακόμα ένα έργο σε εξέλιξη, αλλά όλο και περισσότερα πράγματα θα καλυφθούν σύντομα στο κανάλι του YouTube [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed). + +Σε κάθε κεφάλαιο που έχει ήδη καλυφθεί, υπάρχει ένας σύνδεσμος που οδηγεί στο αντίστοιχο βίντεο. + +## Σχετικά με μας και πως να συνεισφέρετε + +Αυτό το σεμινάριο συντηρείται από την κοινότητα [DjangoGirls](https://djangogirls.org/). Εάν βρείτε τυχόν λάθη ή θέλετε να ενημερώσετε το φροντιστήριο παρακαλούμε [ακολουθήστε τις οδηγίες για συνεισφορά](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Θα θέλατε να μας βοηθήσετε να μεταφράσετε τον οδηγό σε άλλες γλώσσες; + +Προς το παρόν, οι μεταφράσεις διατηρούνται στην πλατφόρμα του crowdin.com στο: + +https://crowdin.com/project/django-girls-tutorial + +Εάν η γλώσσα σας δεν είναι καταχωρημένη στο [crowdin](https://crowdin.com/), παρακαλούμε [ανοίξτε ένα νέο θέμα](https://github.com/DjangoGirls/tutorial/issues/new) ενημερώνοντας μας για την γλώσσα ώστε να την προσθέσουμε. \ No newline at end of file diff --git a/el/SUMMARY.md b/el/SUMMARY.md new file mode 100644 index 00000000000..fd3f634310a --- /dev/null +++ b/el/SUMMARY.md @@ -0,0 +1,27 @@ +# Περίληψη + +* [Εισαγωγή](README.md) +* [Εγκατάσταση](installation/README.md) +* [Εγκατάσταση (chromebook)](chromebook_setup/README.md) +* [Πως λειτουργεί το διαδίκτυο](how_the_internet_works/README.md) +* [Εισαγωγή στην γραμμή εντολών](intro_to_command_line/README.md) +* [Εγκατάσταση Python](python_installation/README.md) +* [Επεξεργαστής Κώδικα](code_editor/README.md) +* [Εισαγωγή στην Python](python_introduction/README.md) +* [Τι είναι το Django;](django/README.md) +* [Εγκατάσταση του Django](django_installation/README.md) +* [Το πρώτο σου Django project!](django_start_project/README.md) +* [Μοντέλα (models) του Django](django_models/README.md) +* [Διαχείριση μέσω Django admin](django_admin/README.md) +* [Ανεβάστε!](deploy/README.md) +* [Django urls](django_urls/README.md) +* [Django views - ώρα να δημιουργήσετε!](django_views/README.md) +* [Εισαγωγή στην HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Δυναμικά δεδομένα στα templates](dynamic_data_in_templates/README.md) +* [Django templates](django_templates/README.md) +* [CSS - κάντε το όμορφο](css/README.md) +* [Επεκτείνοντας τα templates](template_extending/README.md) +* [Επεκτείνοντας την εφαρμογή σας](extend_your_application/README.md) +* [Φόρμες Django](django_forms/README.md) +* [Τι υπάρχει μετά;](whats_next/README.md) \ No newline at end of file diff --git a/el/chromebook_setup/README.md b/el/chromebook_setup/README.md new file mode 100644 index 00000000000..6cb47273d1a --- /dev/null +++ b/el/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Ρυθμίσεις για χρήστες Chromebook + +> **Σημείωση** Εάν έχετε ήδη τελειώσει με τα βήματα της εγκατάστασης, δεν χρειάζεται να επαναλάβετε αυτή την ενότητα - μπορείτε να πάτε απευθείας στην ενότητα [ Εισαγωγή στην Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/el/chromebook_setup/instructions.md b/el/chromebook_setup/instructions.md new file mode 100644 index 00000000000..85ac6811b0a --- /dev/null +++ b/el/chromebook_setup/instructions.md @@ -0,0 +1,75 @@ +Μπορείτε [ να παραλείψετε αυτή την ενότητα](http://tutorial.djangogirls.org/en/installation/#install-python) εάν δεν χρησιμοποιείτε το Chromebook. Εάν το χρησιμοποιείτε, η διαδικασία εγκατάστασης θα είναι λίγο διαφορετική. Σε αυτή την περίπτωση μπορείτε να αγνοήσετε τις υπόλοιπες οδηγίες εγκατάστασης. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9) + +Το CloudIDE είναι ένα εργαλείο το οποίο σου παρέχει έναν επεξεργαστή κώδικα καθώς και πρόσβαση σε έναν υπολογιστή στο internet στον οποίο μπορείς να εγκαταστήσεις, να γράψεις και να τρέξεις το λογισμικό. Κατά τη διάρκεια του οδηγού, το CloudIDE θα παίζει το ρόλο του *local machine* (δηλαδή του τοπικού υπολογιστή σας). Παραταύτα, θα χρειαστεί να γράφετε εντολές στο τερματικό όπως ακριβώς οι συμμαθητές σας που χρησιμοποιούν macOS, Ubuntu ή Windows, με την μόνη διαφορά ότι το τερματικό δεν θα τρέχει στον υπολογιστή που κάθεστε αλλά στο cloud (σύννεφο), εκεί που το όρισε το CloudIDE (σε κάποιον εικονικό υπολογιστή, δηλαδή, στο internet). Εδώ είναι οι οδηγίες για τα cloud IDEs (PaizaCloud Cloud IDE, AWS Cloud9). Μπορείτε να επιλέξετε ένα από τα cloud IDEs και να ακολουθήσετε τις αντίστοιχες οδηγίες του. + +#### PaizaCloud Cloud IDE + +1. Πηγαίνετε στο [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Δημιούργησε λογαριασμό +3. Κάντε κλικ στο κουμπί *New Server* +4. Κάντε κλικ στο κουμπί Terminal (στην αριστερή πλευρά του παραθύρου) + +Τώρα θα πρέπει να δείτε μια σελίδα με πλαϊνή μπάρα εργασίων και κουμπιά στα αριστερά. Κάντε κλικ στο κουμπί «Terminal» για να ανοίξετε το παράθυρο του τερματικού (ή αλλιώς "κοσνόλα" ή "γραμμή εντολών") όπως παρακάτω: + +{% filename %}Terminal{% endfilename %} + + $ + + +Το τερματικό στο PaizaCloud Cloud IDE είναι έτοιμο να δεχτεί τις εντολές σας. Μπορείτε να αλλάξετε το μέγεθος του παραθύρου ή να το μεγιστοποιήσετε, αν θέλετε. + +#### AWS Cloud9 + +1. Μεταβείτε στο [AWS Cloud9](https://aws.amazon.com/cloud9/) +2. Δημιούργησε λογαριασμό +3. Κάντε κλικ στο κουμπί *Create Environment* + +Τώρα θα πρέπει να δείτε μια σελίδα με πλαϊνή μπάρα εργασίων, ένα μεγάλο κύριο παράθυρο με κείμενο και ένα μικρό παράθυρο στο κάτω μέρος της που μοιάζει κάπως έτσι: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +Αυτή η περιοχή κάτω είναι το *τερματικό*, όπου θα μπορείτε να δίνετε εντολές στον υπολογιστή που έφτιαξε για εσάς το Cloud 9. Μπορείτε να αλλάξετε τις διαστάσεις του παραθύρου ανάλογα τις ανάγκες σας. + +### Εικονικό Περιβάλλον + +Το εικονικό περιβάλλον (επίσης και ως virtualenv - virtual environment) είναι σαν ένα κουτί όπου μπορούμε να βάλουμε μέσα κώδικα για ένα project χωρίς αυτό να αλληλεπιδρά με κώδικα του συστήματος. Τα χρησιμοποιούμε ούτως ώστε κάθε project να έχει τα δικά του κομμάτια κώδικα και έτσι επιτυγχάνουμε απομόνωση των projects. Φανταστείτε να είχατε ένα project που εξαρτάται από την έκδοση Django 2.0 και ένα άλλο που εξαρτάται από το Django 2.1. Πως θα ικανοποιούσατε τις απαιτήσεις κάθε project; Η απάντηση είναι τα virtualenvs! + +Στο τερματικό σας στο κάτω μέρος, γράψτε τα εξής: + +{% filename %}Cloud 9{% endfilename %} + + sudo apt update + sudo apt install python3.6-venv + + +Αν αυτό εξακολουθεί να μην λειτουργεί, θα πρέπει να ζητήσετε βοήθεια από κάπου. + +Στη συνέχεια, τρέξτε τις ακόλουθες εντολές: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(παρατήρησε ότι στην τελευταία γραμμή χρησιμοποιούμε μία περισπωμένη, την οποία ακολουθεί ένα ίσον: ~=). + +### GitHub + +Φτιάξε έναν λογαριασμό στο [GitHub](https://github.com). + +### PythonAnywhere + +Ο οδηγός της κοινότητας Django Girls περιλαμβάνει μια ενότητα αυτού που ονομάζεται Deployment (δυστυχώς δεν υπάρχει κάποιος ακριβής ελληνικός όρος, οπότε θα αναφερόμαστε σε αυτόν με την αγγλική λέξη) που είναι η δυνατότητα του να "ανεβάσεις" τον κώδικα σου - αυτόν που είναι γραμμένη η εφαρμογή σου - σε κάποιον διακομιστή (server) ο οποίος είναι προσβάσιμος από όλους, ούτως ώστε οι άλλοι να δουν τη δουλειά σας. + +Αυτό το κομμάτι είναι λίγο περίεργο όταν ακολουθείτε αυτόν τον οδηγό σε ένα Chromebook, δεδομένου ότι χρησιμοποιείτε ήδη έναν υπολογιστή που βρίσκεται στο διαδίκτυο (σε αντίθεση με την περίπτωση του φορητού ή επιτραπέζιου υπολογιστή). Ωστόσο, θεωρείται ακόμα χρήσιμος ο όρος αυτός (deployment), καθώς μπορούμε να αναλογιστούμε το χώρο εργασίας του Cloud 9 ως το «προς εξέλιξη έργο» και την εταιρεία PythonAnywhere ως ένα μέρος για να "ανεβάσουμε" την εργασία μας καθώς αυτή θα ολοκληρώνεται. + +Δημιουργήστε λοιπόν έναν νέο λογαριασμό στο PythonAnywhere ακολουθώντας αυτόν τον σύνδεσμο [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/el/code_editor/README.md b/el/code_editor/README.md new file mode 100644 index 00000000000..816de29e135 --- /dev/null +++ b/el/code_editor/README.md @@ -0,0 +1,11 @@ +# Επεξεργαστής Κώδικα + +> Για τους αναγνώστες στο σπίτι: αυτό το κεφάλαιο καλύπτεται στο [ Εγκαθιστώντας την Python& Πρόγραμμα επεξεργασίας κώδικα](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s)βίντεο. + +Είστε έτοιμοι να γράψετε την πρώτη σας γραμμή κώδικα, οπότε ήρθε η ώρα για να κατεβάσετε ένα πρόγραμμα επεξεργασίας κώδικα (code editor)! + +> **Σημείωση** εάν χρησιμοποιείτε Chromebook, παρακάμψτε αυτό το κεφάλαιο και σιγουρευτείτε ότι ακολουθείτε τις οδηγίες [Εγκατάστασης Chromebook](../chromebook_setup/README.md). Η επιλογή σας ως προς το cloud IDE (PaizaCloud cloud IDE ή AWS Cloud9) περιλαμβάνει ήδη ένα πρόγραμμα επεξεργασίας κώδικα και όταν ανοίγετε ένα αρχείο στο IDE σας από το μενού "Αρχείο", θα χρησιμοποιείτε αυτόματα εκείνον τον επεξεργαστή. +> +> **Σημείωση** Μπορεί να το έχετε ήδη κάνει αυτό νωρίτερα στο κεφάλαιο εγκατάστασης. Αν ναι, μπορείτε να μεταβείτε κατευθείαν στο επόμενο κεφάλαιο! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/el/code_editor/instructions.md b/el/code_editor/instructions.md new file mode 100644 index 00000000000..5c1738d2f37 --- /dev/null +++ b/el/code_editor/instructions.md @@ -0,0 +1,31 @@ +Υπάρχουν πολλά code editors (επεξεργαστές κώδικα) διαθέσιμοι και για αυτό είστε ελεύθεροι να διαλέξετε αυτόν που σας αρέσει περισσότερο (ή ανάλογα την τσέπη σας αν θέλετε να αγοράσετε κάποιον). Οι περισσότεροι προγραμματιστές της Python χρησιμοποιούν περίπλοκα, αλλά εξαιρετικά ισχυρά IDEs (Integrated Development Environments - Ολοκληρωμένα Περιβάλλοντα Ανάπτυξης), όπως το PyCharm. Για αρχάριους, ωστόσο, αυτή η επιλογή είναι ίσως η λιγότερο κατάλληλη· οι συστάσεις μας είναι προγράμματα εξίσου ισχυρά, αλλά πολύ απλούστερα. + +Οι προτάσεις μας φαίνονται παρακάτω αλλά μην διστάσετε να ρωτήσετε τον προπονητή σας ποιες είναι οι προτιμήσεις του. Θα είναι ευκολότερο να σας βοηθήσουν. + +## Gedit + +Το Gedit είναι ένα ανοικτού κώδικα (open source) δωρεάν πρόγραμμα επεξεργασίας (free editor), διαθέσιμο για όλα τα λειτουργικά συστήματα. + +[Κατεβάστε το εδώ](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Το Sublime Text είναι ένας δημοφιλής επεξεργαστής με μια περίοδο δωρεάν χρήσης (στο πέρας αυτής μπορείτε να εξακολουθείτε να το χρησιμοποιείτε) και είναι διαθέσιμο για όλα τα λειτουργικά συστήματα. + +[Κατεβάστε το εδώ](https://www.sublimetext.com/) + +## Atom + +Το Atom είναι άλλος ένας δημοφιλής επεξεργαστής. Είναι δωρεάν, ανοιχτού κώδικα και διαθέσιμος για Windows, macOS και Linux. Το Atom αναπτύχθηκε από το [GitHub](https://github.com/). + +[Κατεβάστε το εδώ](https://atom.io/) + +## Γιατί χρειαζόμαστε τον Επεξεργαστή Κώδικα; + +Μπορεί να αναρωτιέσαι γιατί εγκαθιστούμε αυτό το ειδικό πρόγραμμα επεξεργασίας κώδικα λογισμικού, αντί να χρησιμοποιήσουμε κάτι σαν το Word ή το Notepad. + +Ο πρώτος λόγος είναι ότι ο κώδικας πρέπει να είναι **απλό κείμενο** (δίχως bold, italic, πίνακες, εικόνες κλπ, όπως θα χρησιμοποιούσε κανείς ένας επεξεργαστή κειμένου). Το πρόβλημα με τα προγράμματα όπως το Word και το Textedit είναι ότι δεν παράγουν στην ουσία απλό κείμενο αλλά "πλούσιο" (με γραμματοσειρές, φορμάρισμα κειμένου και αυτά που αναφέραμε παραπάνω), χρησιμοποιώντας δικές του μορφές όπως [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +Δεύτερον, τα προγράμματα επεξεργασίας κώδικα είναι εξειδικευμένα στην σύνταξη κώδικα ούτως ώστε να μπορούν να παρέχουν χρήσιμα χαρακτηριστικά όπως η επισήμανση κώδικα με χρώμα σύμφωνα με την σημασία του, η αυτόματο κλείσιμο εισαγωγικών κλπ. + +Θα τα δούμε όλα αυτά αργότερα. Σύντομα, θα αρχίσετε να βλέπετε τον παλιό σας, έμπιστο επεξεργαστή κώδικα ως ένα από τα αγαπημένα σας εργαλεία. :) diff --git a/el/css/README.md b/el/css/README.md new file mode 100644 index 00000000000..b1afe88b2d3 --- /dev/null +++ b/el/css/README.md @@ -0,0 +1,305 @@ +# CSS - κάντε το όμορφο! + +Το blog μας φαίνεται αρκετά άσχημο, έτσι δεν είναι; Ωρα να το κάνουμε όμορφο! Γι'αυτή τη δουλειά θα χρειαστούμε το CSS. + +## Τι είναι το CSS; + +Το CSS (Cascading Style Sheets - Διαδοχικά Φύλλα Στυλ) είναι μια γλώσσα που χρησιμοποιείται για να περιγράψει την εμφάνιση και την μορφοποίηση μιας ιστοσελίδας που έχει γραφτεί σε γλώσσα σήμανσης (όπως η HTML). Δείτε το σαν το μακιγιάζ για την ιστοσελίδα μας ;) + +Άλλα δεν θέλουμε να ξεκινήσουμε από την αρχή ξανά, έτσι; Για ακόμα μια φορά θα χρησιμοποιήσουμε κάτι που οι προγραμματιστές χρησιμοποιούν ήδη και είναι δωρεάν στο διαδίκτυο. Το να ανακαλύπτουμε τον τροχό δεν έχει πλάκα, ξέρετε. + +## Ας χρησιμοποιήσουμε το Bootstrap! + +Το Bootstrap είναι μια από τις πιο δημοφιλή HTML / CSS εργαλειοθήκες (framework) που αποσκοπούν στην εύκολη και γρήγορη ανάπτυξη όμορφων ιστοσελίδων: https://getbootstrap.com/ + +Γράφτηκε από προγραμματιστές που εργάστηκαν στο Twitter. Τώρα αναπτύσσεται από εθελοντές από ολόκληρο το κόσμο! + +## Εγκατάσταση του Bootstrap + +Για την εγκατάσταση του Bootstrap, ανοίξτε το αρχείο `.html` στον επεξεργαστή κώδικα και προσθέστε αυτό στην ενότητα ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +Αυτό δεν προσθέτει κάποια αρχεία στο project σας. Απλώς, δείχνει σε αρχεία που υπάρχουν στο διαδίκτυο. Πηγαίνετε, λοιπόν, επισκεφτείτε την ιστοσελίδα σας και ανανεώστε τη σελίδα. Νάτο! + +![Σχήμα 14.1](images/bootstrap1.png) + +Δείχνει ήδη πολύ καλύτερο! + +## Στατικά αρχεία στο Django + +Τέλος, ας ρίξουμε μια πιο προσεκτική ματιά στα λεγόμενα **στατικά αρχεία**. Τα στατικά αρχεία (static files) είναι όλα τα αρχεία CSS και όλα τα αρχεία εικόνας (φωτογραφίες). Το περιεχόμενο τους δεν εξαρτάται από το εκάστοτε request και έτσι μένει ίδιο για κάθε χρήστη. + +### Πού να τοποθετήσετε τα στατικά αρχεία στο Django + +Το Django ήδη ξέρει πού να βρει τα στατικά αρχεία για την ενσωματωμένη εφαρμογή «admin». Τώρα πρέπει να προσθέσουμε κάποια στατικά αρχεία για την δική μας εφαρμογή, `blog`. + +Για να το κάνουμε αυτό πρέπει να δημιουργήσουμε ένα φάκελο με το όνομα `static` μέσα στο φάκελο blog της εφαρμογής μας: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + + +Το Django θα βρίσκει αυτόματα οποιοδήποτε φάκελο ονομάζεται "static" μέσα στους φακέλους οποιασδήποτε εφαρμογή σας. Έπειτα θα μπορεί να χρησιμοποιεί το περιεχόμενο τους ως στατικά αρχεία. + +## Το πρώτο CSS αρχείο σας! + +Ας δημιουργήσουμε ένα CSS αρχείο τώρα, για να προσθέσετε το δικό σας στυλ στην ιστοσελίδα σας. Δημιουργήστε έναν νέο φάκελο που ονομάζεται `css` μέσα στο `static` φάκελο. Στη συνέχεια, δημιουργήστε ένα νέο αρχείο που ονομάζεται `blog.css` μέσα σε αυτόν τον φάκελο `css`. Είστε έτοιμοι; + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Ώρα να γράψουμε λίγο CSS! Άνοιξτε το αρχείο `blog/static/css/blog.css` στον επεξεργαστή. + +Δεν θα εμβαθύνουμε πολύ σχετικά με την γλώσσα CSS. Υπάρχει μια πρόταση σχετικά με μάθημα CSS στο τέλος αυτής της σελίδας αν θέλετε να μάθετε περισσότερα. + +Αλλά ας δοκιμάσουμε μερικά πράγματα. Ίσως θα μπορούσαμε να αλλάξουμε το χρώμα των τίτλων της σελίδας μας; Για να καταλάβετε τη λογική των χρωμάτων, οι υπολογιστές χρησιμοποιούν ειδικούς κώδικες. Αυτοί οι κώδικες ξεκινάνε με `#` και ακολουθούνται από 6 γράμματα (A-F) και αριθμούς (0-9). Για παράδειγμα, ο κωδικός για το μπλε είναι `#0000FF`. Μπορείτε να βρείτε τους κωδικούς των χρωμάτων για πολλά χρώματα εδώ: http://www.colorpicker.com/. Μπορείτε επίσης να χρησιμοποιήσετε [προκαθορισμένα χρώματα](http://www.w3schools.com/colors/colors_names.asp) με το αγγλικό όνομά τους, όπως το `red` (κόκκινο) και το `green` (πράσινο). + +Στο αρχείο `blog/static/css/blog.css` πρέπει να προσθέσετε τον παρακάτω κώδικα: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +Το `h1 a` είναι ένας επιλογέας CSS (CSS selector). Αυτό σημαίνει ότι θέλουμε να εφαρμόσουμε τα στυλ (στη συγκεκριμένη περίπτωση έχουμε ένα στυλ, το χρώμα) σε κάθε `a` στοιχείο μέσα σε κάθε `h1` στοιχείο. Ο επιλογέας `h2 a` κάνει το ίδιο πράγμα αλλά για τα `h2` στοιχεία. Έτσι όταν έχουμε κάτι σαν `

σύνδεσμο

`, το `h1 a ` στυλ θα εφαρμοστεί. Σε αυτή τη περίπτωση, του λέμε να αλλάξει το χρώμα του σε `#C25100`, που είναι το σκούρο πορτοκαλί. Ή μπορείτε να βάλετε το δικό σας χρώμα εδώ, αλλά σιγουρευτείτε ότι έχει καλή αντίθεση σε λευκό φόντο! + +Μέσα σε ενα αρχείο CSS καθορίζουμε τα στύλ για τα στοιχεία μέσα στο HTML αρχείο. Ο πρώτος τρόπος που αναγνωρίζουμε στοιχεία είναι με το όνομα στοιχείου. Μπορεί να τα θυμάστε αυτά ως ετικέτες από την HTML. Πράγματα όπως `a`, `h1` και το `body` είναι όλα τα παραδείγματα των ονομάτων στοιχείων (HTML elements). Μπορούμε επίσης να προσδιορίσουμε στοιχεία από το χαρακτηριστικό `class` ή το χαρακτηριστικό `id`. Η τάξη (class) και η ταυτότητα (id) είναι ονόματα που δίνεις εσύ στο κάθε στοιχείο. Οι τάξεις αναφέρονται σε ομάδες στοιχείων και οι ταυτότητες σε συγκεκριμένα στοιχεία. Για παράδειγμα, το ακόλουθο tag μπορεί να προσδιοριστεί απο την CSS χρησιμοποιώντας το όνομα του tag `a`, την class `external_link`, ή το id `link_to_wiki_page`: + +```html + +``` + +Διαβάστε περισσότερα για τους επιλογείς CSS στο [w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Στη συνέχεια, πρέπει να πούμε στο HTML αρχείο οτι θέλουμε να συμπεριλάβουμε αρχείο/α CSS. Ανοίξτε το αρχείο `blog/templates/blog/post_list.html` και προσθέστε αυτή τη γραμμή στην αρχή: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Απλά "φορτώνουμε" στατικά αρχεία σε αυτό το σημείο :) Μεταξύ του `` και `` ετικετών (tags), μετά τα links με τα Bootstrap αρχεία CSS, προσθέστε αυτή τη γραμμή: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Ο browser διαβάζει τα αρχεία με την σειρά που δίνονται, οπότε πρέπει να σιγουρευτούμε ότι αυτή είναι η σωστή θέση. Διαφορετικά ο κώδικας στο αρχείο μας μπορεί να παρακαμφθεί από τον κώδικα στα αρχεία Bootstrap. Μόλις είπαμε στο template μας που βρίσκεται το CSS αρχείο μας. + +Το αρχείο σας πρέπει τώρα να μοιάζει κάπως έτσι: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Εντάξει, αποθηκεύστε το αρχείο και ανανεώστε τη σελίδα! + +![Σχήμα 14.2](images/color2.png) + +Πολύ καλά! Θα θέλατε να δώσουμε λίγο αέρα στην ιστοσελίδα μας και να αυξήσουμε το περιθώριο στα αριστερά; Ας το δοκιμάσουμε! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Προσθέστε αυτό στο CSS σας, αποθηκεύστε τον αρχείο και δείτε πως λειτουργεί! + +![Σχήμα 14.3](images/margin2.png) + +'Ισως μπορούμε να αλλάξουμε την γραμματοσειρά της επικεφαλίδας μας. Μεσα στο `` που βρίσκεται μεσα στο αρχείο `blog/templates/blog/post_list.html` βάλτε αυτό: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Όπως πριν, ελέγξτε τη σειρά και τοποθετήστε το πριν τον σύνδεσμο `blog/static/css/blog.css`. Αυτή η γραμμή θα εισάγει μια γραμματοσειρά που λέγεται *Lobster* από τα Google Fonts (https://www.google.com/fonts). + +Βρείτε το `h1 a` μπλοκ (τον κώδικα μεταξύ `{` και `}`) μέσα στο αρχείο CSS `blog/static/css/blog.css`. Τώρα προσθέστε την γραμμή `font-family: 'Lobster';` μεταξύ των αγκύλων και ανανεώστε τη σελίδα: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Σχήμα 14.3](images/font.png) + +Τέλεια! + +Όπως αναφέρθηκε παραπάνω, το CSS έχει την έννοια των κλάσεων (classes). Αυτές σας επιτρέπουν να ονομάσετε ένα μέρος του κώδικα HTML και να εφαρμόσετε στυλ μόνο σε αυτό το μέρος, χωρίς να επηρεάσετε άλλα μέρη. Αυτό μπορεί να είναι εξαιρετικά χρήσιμο! Ίσως να έχετε δύο divs τα οποία περιγράφουν κάτι διαφορετικό το καθένα (όπως πχ μια επικεφαλίδα και ένα post). Μια class μπορεί να σας βοηθήσει να τα κάνετε να μοιάζουν διαφορετικά. + +Πηγαίνετε λοιπόν και ονομάστε μερικά μέρη του HTML. Πρόσθεσε μια κλάση μεε το όνομα `page-header` στο `div` που περιέχει την επικεφαλίδα σας. Κάπως έτσι: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +Και τώρα προσθέστε μια κλάση `post` στο `div` που περιέχει ένα blog post. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Τώρα θα προσθέσουμε κώδικα στους επιλογείς (selectors) που μόλις δημιουργήσαμε. Οι επιλογείς που ξεκινούν με `.` αναφέρονται σε κλάσεις. Υπάρχουν πολλοί σπουδαίοι οδηγοί (tutorials) και εξηγήσεις σχετικά με το CSS στο διαδίκτυο τα οποία θα σας βοηθήσουν να καταλάβετε τον παρακάτω κώδικα. Για αρχή, αντιγράψτε το στο αρχείο `blog/static/css/blog.css`: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #C25100; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +Μετά, περιβάλλετε τον κώδικα HTML που προβάλει τα posts με κλάσεις. Αντικατάστησε αυτό: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +μέσα στο αρχείο `blog/templates/blog/post_list.html` με αυτό: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Αποθήκευσε τα αρχεία και ανανέωστε την ιστοσελίδα σας. + +![Σχήμα 14.4](images/final.png) + +Ουάου! Φαίνεται τέλειο, έτσι δεν είναι; Κοιτάξτε τον κώδικα που μόλις κάναμε επικόλληση για να βρείτε τα σημεία που προσθέσαμε κλάσεις στην HTML και τις χρησιμοποιήσαμε στο CSS. Που θα κάνατε την αλλαγή αν θέλατε την ημερομηνία να είναι τιρκουάζ; + +Μην φοβάστε να πειραματιστείτε με το CSS λίγο και να προσπαθήσετε να αλλάξετε μερικά πράγματα. Παίζοντας με το CSS μπορεί να σε κάνει να καταλάβεις τι κάνουν τα διάφορα πράγματα. Εάν κάτι πάει στραβά μην ανησυχείτε - μπορείτε πάντα να το αναιρέσετε! + +Συστήνουμε να πάρετε αυτή την δωρεάν online σειρά μαθημάτων [Codeacademy HTML &](https://www.codecademy.com/tracks/web). Μπορεί να σας βοηθήσει να μάθετε τα πάντα σχετικά με το να κάνεις τις ιστοσελίδες σας ομορφότερες με το CSS. + +Είστε έτοιμοι για το επόμενο κεφάλαιο; :) \ No newline at end of file diff --git a/el/css/images/bootstrap1.png b/el/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/el/css/images/bootstrap1.png differ diff --git a/el/css/images/color2.png b/el/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/el/css/images/color2.png differ diff --git a/el/css/images/final.png b/el/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/el/css/images/final.png differ diff --git a/el/css/images/font.png b/el/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/el/css/images/font.png differ diff --git a/el/css/images/margin2.png b/el/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/el/css/images/margin2.png differ diff --git a/el/deploy/README.md b/el/deploy/README.md new file mode 100644 index 00000000000..80c17ae0d61 --- /dev/null +++ b/el/deploy/README.md @@ -0,0 +1,220 @@ +# Ανεβάστε! + +> **Σημείωση** Το ακόλουθο κεφάλαιο μπορεί να είναι μερικές φορές λίγο δύσκολο να ολοκληρωθεί. Επιμένετε και τελειώστε το, το ανέβασμα είναι ένα σημαντικό μέρος της διαδικασίας ανάπτυξης της ιστοσελίδας. Άλλωστε όταν αναπτύσετε ένα website θα θέλατε στο τέλος να το δει όλος ο κόσμος, όχι μόνο εσείς στον υπολογιστή σας. Το κεφάλαιο αυτό τοποθετείται στη μέση του οδηγού, έτσι ώστε ο μέντορας σας να μπορεί να σας βοηθήσει με την περίπλοκη διαδικασία του "ανεβάσματος" της ιστοσελίδας στο διαδίκτυο. Αυτό σημαίνει ότι μπορείτε ακόμη να ολοκληρώσετε τον οδηγό μόνοι σας ακόμα και αν σας τελειώσει ο χρόνος. + +Μέχρι τώρα, η ιστοσελίδα σου ήταν μόνο διαθέσιμη στον υπολογιστή σου. Τώρα θα μάθεις πως να την ανεβάσεις σε κάποιον server! "Ανεβάζω στο server" (ή άλλιώς deploy) είναι η διαδικασία της δημοσίευσης την εφαρμογής σας στο διαδίκτυο, έτσι ώστε οι άνθρωποι τελικά να πάνε και να δουν την εφαρμογή σας (μέσα από κάποιο url, πχ https://www.mypage. gr). :) + +Όπως μάθατε, μια ιστοσελίδα πρέπει να βρίσκεται σε ένα διακομιστή (server). Υπάρχουν εκατοντάδες υπηρεσίες διακομιστών (server providers) εκεί έξω. Εμείς θα χρησιμοποιήσουμε το [PythonAnywhere](https://www.pythonanywhere.com/). Το PythonAnywhere είναι δωρεάν για μικρές εφαρμογές που δεν έχουν πολλούς επισκέπτες, καθιστώντας το ιδανικό για την περίπτωση μας. + +Η άλλη υπηρεσία που θα χρησιμοποιήσουμε είναι το [GitHub](https://www.github.com), το οποίο είναι μια υπηρεσία φιλοξενίας κώδικα. Υπάρχουν και άλλες υπηρεσίες φιλοξενίας κώδικα εκεί έξω (όπως το BitBucket και άλλες), αλλά σχεδόν όλοι οι προγραμματιστές έχουν λογαριασμό GitHub αυτές τις μέρες όπως και εσείς τώρα! + +Αυτά τα τρία μέρη θα είναι σημαντικά για εσάς. Ο τοπικός σας υπολογιστής θα είναι το μέρος όπου θα κάνετε ανάπτυξη και δοκιμή. Όταν είστε ικανοποιημένοι με τις αλλαγές, θα τοποθετήσετε ένα αντίγραφο του προγράμματος σας στο GitHub. Η ιστοσελίδα σας θα είναι στο PythonAnywhere και θα την ενημερώσετε με το να πάρετε ένα καινούριο αντίγραφο του κωδικού σας από το GitHub. + +# Git + +> **Σημείωση** Αν κάνατε ήδη τα βήματα εγκατάστασης, δεν χρειάζεται να τα ξανακάνετε. Μπορείτε να μεταβείτε στην επόμενη ενότητα και να ξεκινήσετε να δημιουργήσετε GitHub repository σας (ή με μια λέξη, repo). + +{% include "/deploy/install_git.md" %} + +## Ξεκινώντας με το Git repo + +Το Git παρακολουθεί τις αλλαγές σε ένα συγκεκριμένο σύνολο αρχείων που αποκαλείται αρχείο αποθήκευσης κώδικα (ή «repo» εν συντομία, όπως είπαμε παραπάνω). Ας δημιουργήσουμε ένα για την εφαρμογή μας. Ανοίξτε την κονσόλα σας, μεταβείτε στον φάκελο`djangogirls` και εκτελέστε αυτές τις εντολές: + +> **Σημείωση** Ελέγξτε που βρίσκεστε στην κονσόλα (δηλαδή σε ποιον φάκελο) με την εντολή `pwd` (macOS/Linux) ή `cd` (Windows) πριν αρχικοποιήσετε το repo σας. Θα πρέπει να βρίσκεστε στο φάκελο `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 + + +Η αρχικοποίηση του repo είναι κάτι που πρέπει να γίνεται μόνο μια φορά ανά project (δίχως να χρειάζεται να εισάγετε το όνομα χρήστη και το email σας, ποτέ ξανά). + +Το Git θα παρακολουθήσει τις αλλαγές σε όλα τα αρχεία και τους φακέλους σε αυτόν τον φάκελο (σε αυτό το project). Ωστόσο υπάρχουν ορισμένα αρχεία που θέλουμε να τα αγνοήσει και να μην συμπεριληφθούν στο repo. Το κάνουμε αυτό δημιουργώντας ένα αρχείο που ονομάζεται `.gitignore` στον αρχικό φάκελο. Ανοίξτε το πρόγραμμα επεξεργασίας κειμένου και δημιουργήστε ένα νέο αρχείο με το ακόλουθο περιεχόμενο: + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +Αποθηκεύστε το ως `.gitignore` μέσα στον φάκελο "djangogirls". + +> **Σημείωση** Η τελεία στην αρχή του ονόματος του αρχείου είναι σημαντική! Αν έχετε κάποιο πρόβλημα στη δημιουργία του (στο Finder, για παράδειγμα, των Mac υπολογιστών, δεν αρέσει να δημιουργούνται αρχεία με την τελεία ως πρώτο χαρακτήρα), τότε χρησιμοποιήστε το "Αποθήκευση ως...". Σιγουρευτείτε, πάντως, να μην προσθέσετε `.txt`, `.py`, ή οποιοδήποτε άλλη κατάληξη στο όνομα του αρχείου. Θα αναγνωριστεί από το Git μόνο αν το όνομα του είναι ακριβώς `.gitignore`. +> +> **Σημείωση** Ένα από τα ονόματα αρχείων που συμπεριλάβατε στο αρχείο `.gitignore` είναι το αρχείο `db.sqlite3`. Αυτό το αρχείο είναι μια τοπική βάση δεδομένων (database), όπου όλοι οι χρήστες και τα posts σας είναι αποθηκευμένα. Ακολουθούμε μια κοινή πρακτική όσον αφορά τον προγραμματισμό ιστού (web programming) η οποία απαιτεί την χρήση ξεχωριστής βάσης δεδομένων τοπικά στον υπολογιστή μας και στον server όπου θα ανεβάσουμε την εφαρμογή μας (PythonAnywhere). Η βάση δεδομένων του PythonAnywhere θα μπορούσε να είναι και αυτή SQLite, όπως στον υπολογιστή σας αλλά συχνά θα χρησιμοποιείτε μια πιο ευρέως διαδεδομένη και εμπλουτισμένη με πιο πολλά χαρακτηριστικά και δυνατότητες όπως η PostgresQL ή η MySQL. Όπως και να 'χει, μη συμπεριλαμβάνοντας την SQLite βάση στο repo, σημαίνει ότι όλα τα posts και οι χρήστες που δημιουργήσατε μέχρι τώρα θα είναι διαθέσιμα τοπικά στον υπολογιστή σας και θα χρειαστεί να τα ξαναδημιουργήσετε όταν ανεβάσετε το project σας. Να σκέφτεστε την τοπική βάση δεδομένων σας ως ένα παιδότοπο όπου μπορείτε να δοκιμάσετε διαφορετικά πράγματα και να μην φοβάστε ότι πρόκειται να διαγράψετε τις αληθινές σας δημοσιεύσεις από το blog σας. + +Είναι καλή ιδέα να χρησιμοποιήσετε την εντολή `git status` πριν από την εντολή`git add` ή όποτε δεν είστε βέβαιοι για το τι έχει αλλάξει. Αυτό θα βοηθήσει να αποτραπούν οποιεσδήποτε εκπλήξεις, όπως το να προστεθούν ή να αποθηκευτούν λανθασμένα αρχεία. Η εντολή `git status` επιστρέφει πληροφορίες σχετικά με το ποια αρχεία είναι untracked/modified/staged files, το status του branch και πολλές ακόμη πληροφορίες. Η έξοδος πρέπει να είναι παρόμοια με τα ακόλουθα: + +{% filename %}command-line{% endfilename %} + + $ git status + On branch master + + Initial commit + + 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) + + +Και τέλος αποθηκεύουμε τις αλλαγές μας. Πηγαίνετε στην κονσόλα σας και εκτελέστε αυτές τις εντολές: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Ανεβάζοντας τον κώδικα σας στο GitHub + +Πηγαίνετε στο [https://github.com](https://www.github.com) και δημιουργήστε έναν δωρεάν λογαριασμό. (Αν το έχετε ήδη κάνει αυτό, τέλεια!). Σιγουρευτείτε ότι θυμάστε τον κωδικό πρόσβασης σας (προσθέστε τον σε κάποιον διαχειριστή κωδικών πρόσβασης, αν έχετε κάποιον). + +Έπειτα, δημιουργήστε ένα νέο repo, δίνοντας του το όνομα "my-first-blog". Αφήστε το κουτάκι "initialize with a README" κενό. Αφήστε, επίσης την επιλογή .gitignore κενή (το έχουμε ήδη αυτό το αρχείο) και τέλος αφήστε το License ως None. + +![](images/new_github_repo.png) + +> **Σημείωση** Το όνομα `my-first-blog` είναι σημαντικό. Θα μπορούσατε να διαλέξετε ένα άλλο, αλλά επειδή θα το χρησιμοποιείτε αρκετά στις ακόλουθες εντολές, καλό να είναι χρησιμοποιήσετε το ίδιο εκτός και αν είστε λάτρης του πληκτρολογίου και σας αρέσει να γράφετε! Είναι πιο εύκολο να μείνετε με το όνομα `my-first-blog`. + +Στην επόμενη οθόνη θα δείτε το url (την διεύθυνση) του repo σας την οποία θα χρησιμοποιήσουμε παρακάτω: + +![](images/github_get_repo_url_screenshot.png) + +Τώρα το μόνο που μένει είναι να συνδέσουμε το τοπικό repo μας με το remote (απομακρυσμένο). + +Πληκτρολογήστε τα ακόλουθα στην κονσόλα σας (αντικαταστήστε το `` με το όνομα χρήστη σας στο GitHub αλλά χωρίς τα "<>". Το url θα πρέπει να είναι το ίδιο με το url που είδατε πριν: + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Όταν ανεβάζετε στο GitHub, θα ερωτηθείτε για το όνομα χρήστη και τον κωδικό πρόσβασης σας (είτε μέσω κονσόλας είτε μέσω ενός χωριστού παράθυρου). Αφού τα εισάγετε, θα δείτε κάτι σαν το παρακάτω: + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Ο κώδικας σας είναι πλέον στο GitHub. Πηγαίνετε να τον δείτε! Θα διαπιστώσετε ότι και άλλο δημοφιλή ανοιχτού λογισμικού projects φιλοξενούνται στο GitHub, όπως το ίδιο το [Django](https://github.com/django/django), το [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial) και άλλα πολλά. :) + +# Ανεβάζοντας το blog μας στο PythonAnywhere + +## Δημιουργήστε έναν δωρεάν λογαριασμό στο PythonAnywhere + +> **Σημείωση** Αν έχετε δημιουργήσει ήδη έναν τότε παραλείψτε αυτό το βήμα. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Παραμετροποιώντας το site μας στο PythonAnywhere + +Μεταβείτε πίσω στο [PythonAnywhere Dashboard](https://www.pythonanywhere.com/) κλικάροντας στο logo και επιλέξτε να εκκινήσετε μια κονσόλα "Bash". Αυτή είναι η έκδοση της κονσόλας του PythonAnywhere σαν και αυτή που έχετε στον υπολογιστή σας. + +![Η ενότητα 'New Console' στο PythonAnywhere με ένα κουμπί για το 'bash'](images/pythonanywhere_bash_console.png) + +> **Σημείωση** Το PythonAnywhere είναι βασισμένο στο Linux, οπότε αν τρέχετε Windows, η κονσόλα ίσως να σας φανεί διαφορετική από αυτή που έχετε συνηθίσει. + +Η διαδικασία του ανεβάσματος της εφαρμογή σας (το blog) στο PythonAnywhere περιλαμβάνει τα εξής βήματα: το PythonAnywhere να μπορεί να "διαβάσει" τον κώδικα σας στο GitHub, να τον "κατεβάσει" και να τον αποθηκεύσει σε κάποιον από τους σκληρούς του δίσκους (pull) και στο τέλος να κάνει serve την εφαρμογή αυτή. Υπάρχουν οι χειροκίνητοι τρόποι για να επιτευχθούν αυτά τα βήματα αλλά το PythonAnywhere προσφέρει εργαλεία για αυτόν ακριβώς το λόγο. Ας το εγκαταστήσουμε πρώτα: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +Αυτό θα εμφανίσει κάτι σαν `Collecting pythonanywhere` και στο τέλος θα τελειώσει με μια γραμμή η οποία θα λέει `Successfully installed (...) pythonanywhere- (...)`. + +Τώρα θα τρέξουμε το βοηθητικό εργαλείο ούτως ώστε να παραμετροποιήσει την εφαρμογή μας από το GitHub. Πληκτρολογήστε τα ακόλουθα στην κονσόλα του PythonAnywhere (μην ξεχάσετε να χρησιμοποιήσετε αντί του `` το όνομα χρήστη σας του GitHub ούτως ώστε τα urls να είναι τα ίδια): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py https://github.com//my-first-blog.git + + +Μπορείτε να βλέπετε τι γίνεται καθώς το πρόγραμμα τρέχει: + +- Κατεβάζει τον κώδικα σας από το GitHub +- Δημιουργεί ένα virtualenv στο PythonAnywhere όπως ακριβώς αυτό στον υπολογιστή σας +- Εμπλουτίζει το αρχείο settings.py με κάποιες ρυθμίσεις για το deployment +- Ρυθμίζει τη βάση δεδομένων στο PythonAnywhere χρησιμοποιώντας την εντολή `manage.py migrate` +- Ρυθμίζει τα στατικά αρχεία (θα μάθουμε γι'αυτά αργότερα) +- Τέλος ρυθμίζει το PythonAnywhere για να εξυπηρετήσει την εφαρμογή σας + +Παρόλο που στο PythonAnywhere όλα αυτά τα βήματα είναι αυτοματοποιημένα, όλα αυτά δεν αλλάζουν αν επιλέξετε κάποιον άλλον server provider. + +Αυτό που πρέπει να τονίσουμε είναι ότι η βάση δεδομένων στο PythonAnywhere είναι διαφορετική από αυτήν στον υπολογιστή σας. Ως αποτέλεσμα αυτού, θα χρειαστεί να αρχικοποιήσουμε τον λογαριασμό διαχειριστή με την εντολή `createsuperuser`. Το PythonAnywhere έχει ενεργοποιήσει το virtualenv για σας, οπότε το μόνο που μένει είναι να τρέξουμε: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Εισάγετε τα στοιχεία του χρήστη admin. Καλό είναι να χρησιμοποιήσετε τα ίδια με αυτά στον τοπικό υπολογιστή σας για να μην μπερδεύεστε εκτός και αν θέλετε να κάνετε να φτιάξετε ένα πιο ρεαλιστικό σενάριο όπου ο κωδικός αυτός θα πρέπει να είναι πιο δύσκολος ως προς την μαντεψιά. + +Τώρα, αν θέλετε, μπορείτε να δείτε τον κώδικα σας στο PythonAnywhere δίνοντας την εντολή `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 forms.py migrations models.py static + templates tests.py urls.py views.py + + +Μπορείτε, επίσης, να μεταβείτε στη σελίδα "Files" και απο κει να περιηγηθείτε χρησιμοποιώντας τον browser του PythonAnywhere. (Από την σελίδα Console, μπορείτε να μεταβείτε στις άλλες σελίδες του PythonAnywhere από το κουμπί menu στην πάνω δεξιά γωνία. Μόλις είστε σε μία από τις σελίδες, υπάρχουν συνδέσεις με τις άλλες πάνω στην κορυφή.) + +## Τώρα είστε ζωντανά! + +Το site σας είναι πλεόν deployed! Κλικάρετε στη σελίδα "Web" του PythonAnywhere για να αποκτήσετε το url σας. Μπορείτε να το μοιραστείτε με όποιον θέλετε :) + +> **Σημείωση** Αυτός είναι ένας οδηγός για αρχάριους και κατά τη διάρκεια του deploying παρακάμψαμε κάποια βήματα τα οποία είναι πολύ σημαντικά από άποψη ασφάλειας. Αν και όταν θελήσετε να εμπλουτίσετε ή να φτιάξετε ένα νέο project αλλά πιο σοβαρό αυτή τη φορά, καλό θα ήταν να συμβουλευτείτε το [Django deployment checklist](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/) για μερικές συμβουλές ασφάλειας. + +## Συμβουλές debugging + +Αν λάβετε κάποιο σφάλμα καθώς τρέχετε το script `pa_autoconfigure_django.py`, δείτε τα ακόλουθα: + +- Έχετε ξεχάσει να δημιουργήσετε ένα PythonAnywhere API token. +- Έχετε κάνει λάθος στο GitHub URL +- Αν δείτε ένα σφάλμα που λέει *«Could not find your settings.py»*, είναι πιθανώς επειδή δεν συμπεριλάβατε όλα τα αρχεία σας στο repo ή/και δεν έχετε κάνει push τις αλλαγές σας στο GitHub επιτυχώς. Δείτε ξανά την ενότητα Git παραπάνω + +Αν δείτε ένα σφάλμα όταν προσπαθείτε να επισκεφθείτε την ιστοσελίδα σας, το πρώτο μέρος για debbuging είναι το αρχείο **error log**. Θα βρείτε ένα σύνδεσμο για το error log στο ["Web" page](https://www.pythonanywhere.com/web_app_setup/) του PythonAnywhere. Δείτε εάν υπάρχουν μηνύματα σφάλματος εκεί. Τα πιο πρόσφατα είναι στο κάτω μέρος. + +Υπάρχουν επίσης ορισμένες [γενικές συμβουλές εντοπισμού σφαλμάτων στο PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +Και θυμηθείτε, ο εκπαιδευτής σας είναι είδω να σας βοηθήσει! + +# Δείτε το site σας! + +Η αρχική σελίδα του site σας θα λέει "Δούλεψε", όπως ακριβώς εμφανίστηκε στον υπολογιστή σας. Μεταβείτε στη διαχειριστική σελίδα προσθέτοντας το `/admin/` στο τέλος του URL. Κάντε login χρησιμοποιώντας το όνομα χρήστη και τον κωδικό σας και θα δείτε την γνώριμη σελίδα που σας επιτρέπει να προσθέστε χρήστες, posts και άλλα. Θημηθείτε, ο λόγος που δεν βλέπετε τα posts σας είναι διότι η βάση δεδομένων στο PythonAnywhere είναι "κενή" από αυτή του τοπικού υπολογιστή σας. + +Μόλις δημιουργήσετε μερικά posts, πηγαίνετε πάλι στην αρχική σελίδα του site σας. Από αυτό εδώ το σημείο και ύστερα θα πρέπει να εργάζεστε πρώτα τοπικά στον υπολογιστή σας για τυχόν αλλαγές και μετά να τις ανεβάζετε στον server. Αυτό είναι μια κοινή καλή πρακτική. Όταν λέμε αλλαγές, δεν εννοούμε προσθήκη posts, users κλπ αλλά αλλαγές στον κώδικα. Αυτό επιτρέπει να εργάζεστε και να πειραματίζεστε τοπικά δίχως να χαλάσετε κάτι στο site σας που είναι στον αέρα. Πολύ καλό, εε; + +Πείτε στον εαυτό σας ένα *ΜΕΓΑΛΟ* "ΣΥΓΧΑΡΗΤΗΡΙΑ"! Το ανέβασμα σε κάποιον server αποτελεί ένα από τα δυσκολότερα βήματα του web development και συνήθως παίρνει αρκετές μέρες για να επιτευχθεί. Όμως εσείς έχετε το site σας live, στο internet! \ No newline at end of file diff --git a/el/deploy/images/github_get_repo_url_screenshot.png b/el/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/el/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/el/deploy/images/new_github_repo.png b/el/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/el/deploy/images/new_github_repo.png differ diff --git a/el/deploy/images/pythonanywhere_account.png b/el/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/el/deploy/images/pythonanywhere_account.png differ diff --git a/el/deploy/images/pythonanywhere_bash_console.png b/el/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..458b43f5d0d Binary files /dev/null and b/el/deploy/images/pythonanywhere_bash_console.png differ diff --git a/el/deploy/images/pythonanywhere_beginner_account_button.png b/el/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/el/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/el/deploy/images/pythonanywhere_create_api_token.png b/el/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..6e617d0a53e Binary files /dev/null and b/el/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/el/deploy/install_git.md b/el/deploy/install_git.md new file mode 100644 index 00000000000..93ff5b1c4ee --- /dev/null +++ b/el/deploy/install_git.md @@ -0,0 +1,52 @@ +Το Git είναι ένα «σύστημα ελέγχου έκδοσης» και χρησιμοποιείται από πολλούς προγραμματιστές. Αυτό το εργαλείο μπορεί να παρακολουθήσει τις αλλαγές στα αρχεία με την πάροδο του χρόνου έτσι ώστε να μπορείτε να ανακαλέσετε συγκεκριμένες εκδόσεις σε μεταγενέστερο στάδιο. Είναι κάπως σαν την δυνατότητα "παρακολούθηση αλλαγών" σε προγράμματα επεξεργασίας κειμένου (όπως το Microsoft Word ή το LibreOffice Writer) αλλά πολύ πιο δυνατό. + +## Εγκαθιστώντας το Git + + + +Μπορείτε να κατεβάσετε το Git από το [git-scm.com](https://git-scm.com/). Μπορείτε να πατάτε "επόμενο" σε όλα τα στάδια εκτός από δύο: στο στάδιο που ρωτάει για τον προτιμώμενο επεξεργαστή κειμένου θα πρέπει να επιλέξετε το Nano και στο στάδιο με το όνομα "Adjusting your PATH environment", θα πρέπει να επιλέξετε το "Use Git and optional Unix tools from the Windows Command Prompt" (την τελευταία επιλογή). Εκτός από αυτό, οι προκαθορισμένες ρυθμίσεις είναι μια χαρά. Επίσης, οι επιλογές Checkout Windows-style και Commit Unix-style είναι μια χαρά. + +Μη ξεχάσετε να επανεκκινήσετε τη γραμμή εντολών ή το PowerShell μετά την επιτυχής εγκατάσταση. + + + +Κατεβάστε το Git από το [git-scm.com](https://git-scm.com/) και ακολουθήστε τις οδηγίες. + +> **Σημείωση** Αν έχετε OS X 10.6, 10.7, ή 10.8, θα χρειαστεί να εγκαταστήσετε την έκδοση του git από εδώ: [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/el/deploy/signup_pythonanywhere.md b/el/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..e0631825139 --- /dev/null +++ b/el/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +Το PythonAnywhere είναι μια υπηρεσία για την εκτέλεση Python κώδικα σε διακομιστές «στο σύννεφο» (cloud). Θα το χρησιμοποιήσουμε για τη φιλοξενία του site μας στο internet. + +Θα φιλοξενήσουμε το blog που χτίσαμε στο PythonAnywhere. Δημιουργήστε έναν "Beginner" λογαριασμό (δεν χρειάζεστε πιστωτική κάρτα). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![H σελίδα εγγραφής του PythonAnywhere δείχνει ένα κουμπί για να δημιουργήσετε έναν δωρεάν «Beginner» λογαριασμό](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Σημείωση** Όταν επιλέξετε όνομα χρήστη θυμηθείτε ότι τα urls του blog σας θα έχουν τη μορφή `yourusername.pythonanywhere.com`. Οπότε επιλέξτε είτε το συνηθισμένο σας όνομα χρήστη (πχ αυτό που βάλατε στο GitHub) είτε κάποιο που να ταιριάζει με τη θεματολογία του blog σας. Επίσης, σιγουρευτείτε ότι θα θυμάστε τον κωδικό πρόσβασης σας. + +## Δημιουργώντας ένα PythonAnywhere API token + +Αυτό είναι κάτι που πρέπει να κάνετε μόνο μια φορά. Μετά την εγραφή σας στο  PythonAnywhere θα μεταφερθείτε στο ταμπλό σας. Βρείτε το σύνδεσμο "Λογαριασμός" πάνω δεξιά στη σελίδα σας: + +![Σύνδεσμος λογαριασμού πάνω δεξιά στη σελίδα](../deploy/images/pythonanywhere_account.png) + +στη συνέχεια επιλέξτε την καρτέλα που ονομάζεται "API Token" και πατήστε το κουμπί που λεει "Δημιουργία νέου  API Token". + +![Η καρτέλα "API Token" στη σελίδα λογαριασμού](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/el/django/README.md b/el/django/README.md new file mode 100644 index 00000000000..c615f899a96 --- /dev/null +++ b/el/django/README.md @@ -0,0 +1,27 @@ +# Τι είναι το Django; + +Το Django (*goh/ˈdʒæŋɡoʊ/jang-goh*) είναι ένα δωρεάν και ανοικτού κώδικα web framework γραμμένο σε Python. Ένα web framework είναι ένα σύνολο από στοιχεία που σας βοηθά να αναπτύξετε ιστοσελίδες πιο γρήγορα και εύκολα. + +Όταν κατασκευάζετε μία ιστοσελίδα, χρειάζεστε πάντα ένα παρόμοιο σύνολο στοιχείων: έναν τρόπο για να χειρίζεστε τον έλεγχο ταυτότητας χρήστη (εγγραφή, σύνδεση, αποσύνδεση), ένα πάνελ διαχείρισης για την ιστοσελίδα σας, φόρμες, έναν τρόπο για να ανεβάσετε αρχεία κλπ. + +Ευτυχώς για εσάς, άλλα άτομα πριν από αρκετό καιρό παρατήρησαν ότι οι προγραμματιστές ιστού αντιμετωπίζουν παρόμοια προβλήματα κατά τη δημιουργία ενός νέου ιστοτόπου και έτσι συνεργάστηκαν και δημιούργησαν τα frameworks (το Django είναι ένα από αυτά) που σας δίνουν έτοιμα συστατικά που μπορείτε να χρησιμοποιήσετε. + +Τα πλαίσια υπάρχουν για να μην χρειάζεται να "επανεφεύρετε τον τροχό" και να σας ελαφρύνουν από αρκετές εργασίες κατά την διάρκεια της κατασκευής μίας νέας ιστοσελίδας. + +## Γιατί χρειάζεστε ένα framework; + +Για να καταλάβουμε τι είναι πραγματικά το Django, πρέπει να ρίξουμε μία πιο προσεκτική ματιά στους διακομιστές (servers). Το πρώτο πράγμα είναι ότι ο διακομιστής θα πρέπει να ξέρει τι θέλετε να εξυπηρετήσει σε μια ιστοσελίδα. + +Φανταστείτε ένα γραμματοκιβώτιο (θύρα), το οποίο παρακολουθείται για εισερχόμενα γράμματα (αιτήματα). Αυτό γίνεται από έναν διακομιστή διαδικτύου (web server). Ο διακομιστής διαδικτύου διαβάζει το γράμμα και αποκρίνεται με μια ιστοσελίδα. Αλλά όταν θέλετε να στείλετε κάτι, πρέπει να έχει και κάποιο περιεχόμενο. Και το Django είναι κάτι που σας βοηθάει να δημιουργήσετε αυτό το περιεχόμενο. + +## Τι συμβαίνει όταν κάποιος ζητά μια ιστοσελίδα από το διακομιστή σας; + +Όταν ένα αίτημα φτάσει σε ένα διακομιστή δικτύου, περνάει στο Django το οποίο προσπαθεί να καταλάβει τι ζητάει αυτό το αίτημα στην ουσία. Λαμβάνει πρώτα μια διεύθυνση σελίδας δικτύου και προσπαθεί να καταλάβει τι να κάνει. Αυτό το κομμάτι γίνεται από τον **urlresolver** του Django (σημειώστε ότι η διεύθυνση ενός ιστότοπου ονομάζεται URL - Uniform Resource Locator - και έτσι το όνομα *urlresolver* βγάζει νόημα). Παρόλαυτα δεν είναι πολύ έξυπνο. Παίρνει μια λίστα από μοτίβα και προσπαθεί να ταιριάξει την διεύθυνση URL. Το Django ελέγχει τα μοτίβα από πάνω προς τα κάτω και αν κάτι ταιριάζει, μεταβιβάζει το αίτημα στην σχετική λειτουργία (η οποία ονομάζεται *view*). + +Φανταστείτε έναν ταχυδρόμο με ένα γράμμα. Περπατάει στην οδό και ελέγχει κάθε αριθμό σπιτιού αν είναι ίδιος με τον αντίστοιχο αριθμό στο γράμμα. Αν ταιριάζει, βάζει το γράμμα εκεί. Αυτός είναι ο τρόπος που λειτουργεί ο urlresolver! + +Στο *view*, γίνονται όλα τα ενδιαφέροντα πράγματα: μπορούμε να δούμε μια βάση δεδομένων για να ψάξουμε για μερικές πληροφορίες. Μήπως ο χρήστης ζήτησε να αλλάξει κάτι στα δεδομένα; Όπως ένα γράμμα που λέει "Παρακαλώ, αλλάξτε την περιγραφή της δουλειάς μου.» Το *view* μπορεί να ελέγξει αν επιτρέπεται να το κάνετε αυτό και στη συνέχεια ενημερώνει την περιγραφή της δουλειάς σας και στείλνει πίσω ένα μήνυμα: "Έγινε!". Έπειτα το *view* παράγει ένα response και το Django το στέλνει πίσω στον web browser του χρήστη και προβάλεται στην οθόνη. + +Φυσικά, η παραπάνω περιγραφή είναι λίγο απλοποιημένη, αλλά δεν χρειάζεται να γνωρίζετε όλα τα τεχνικά ζητήματα ακόμη. Μια γενική ιδέα είναι αρκετή. + +Έτσι αντί να αφιερώνουμε πάρα πολύ χρόνο σε λεπτομέρειες, θα ξεκινήσουμε απλά δημιουργώντας κάτι με το Django και θα μάθουμε όλα τα σημαντικά κομμάτια καθοδόν! \ No newline at end of file diff --git a/el/django_admin/README.md b/el/django_admin/README.md new file mode 100644 index 00000000000..023d7f6179c --- /dev/null +++ b/el/django_admin/README.md @@ -0,0 +1,57 @@ +# Διαχείριση μέσω Django admin + +Για να προσθέσουμε, επεξεργαστούμε και να διαγράψουμε τις δημοσιεύσεις που έχουμε αναρτήσει, θα χρησιμοποιήσουμε την εφαρμογή Django admin. + +Ας ανοίξουμε το αρχείο `blog/admin.py` μέσα σε έναν code editor και ας αντικαταστήσουμε τα περιεχόμενα του με τα ακόλουθα: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Με τον παραπάνω κώδικα, εισάγουμε το μοντέλο Post (δηλαδή τον πίνακα της βάσης δεδομένων με το όνομα Post) όπως ορίστηκε από το προηγούμενο κεφάλαιο. Για να κάνουμε το μοντέλο μας ορατό στην σελίδα διαχείρισης θα πρέπει να το "εγγράψουμε" (να το κάνουμε register) με την συνάρτηση `admin.site.register(Post)`. + +Εντάξει λοιπόν, ας ρίξουμε μια ματιά στο Post μοντέλο μας. Θυμηθείτε ότι πρέπει πρώτα να πληκτρολογήσουμε `python manage.py runserver` στην κονσόλα μας ώστε να ξεκινήσει ο development server. Πηγαίνετε στον browser και πληκτρολογήστε http://127.0.0.1:8000/admin/. Θα δείτε μία σελίδα σύνδεσης όπως αυτή: + +![Login page](images/login_page2.png) + +Για να συνδεθείτε, χρειάζεται να δημιουργήσετε έναν *superuser*, δηλαδή έναν χρήστη ο οποίος θα έχει δικαιώματα σε οτιδήποτε σε αυτή την σελίδα. Πηγαίνετε πίσω στην γραμμή εντολών, πατήστε Ctrl + c για να σταματήσετε τον development server Που ήδη τρέχει, πληκτρολογήστε `python manage.py createsuperuser` και πατήστε enter. + +> Θυμηθείτε, για να γράψετε νέες εντολές ενώ ο server εκτελείται, ανοίξτε μια νέα κονσόλα και ενεργοποιήστε το virtualenv. Είδαμε πως να γράφετε νέες εντολές μέσα στο κεφάλαιο **Το πρώτο σας Django project!**, στην ενότητα **Ξεκινώντας τον web server**. + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Όταν σας ζητηθεί, πληκτρολογήστε το όνομα χρήστη σας (πεζά, δίχως κενά), το email σας και ένα password. **Μην ανησυχείτε όταν πληκτρολογείτε τον κωδικό σας και δεν βλέπετε κάτι στην οθόνη. Έτσι πρέπει να είναι.** Πληκτρολογήστε τον και μετά πατήστε `enter` για να συνεχίσετε. Η απόκριση από το τερματικό θα μοιάζει κάπως έτσι (όπου "όνομα χρήστη" και "email" θα είναι τα δικά σας): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Αν ο server δεν τρέχει κάντε το τώρα: <0>python manage.py runserver. Μετά, επιστρέψτε στον browser σας. Κάντε login και εισάγετε το όνομα χρήστη και τον κωδικό σας. Θα πρέπει να δείτε, επιτέλους, την κεντρική σελίδα διαχείρισης του Django. + +![Django admin](images/django_admin3.png) + +Πηγαίνετε στα Posts και πειραματιστείτε με αυτά. Προσθέστε πέντε ή έξι posts. Μην ανησυχείτε για το περιεχόμενο των posts. Είναι μονάχα ορατό σε εσάς, στον υπολογιστή σας. Μπορείτε να κάνετε αντιγραφή-επικόλληση κείμενο από αυτόν εδώ τον οδηγό για να γλυτώσετε χρόνο. :) + +Σιγουρευτείτε ότι δύο ή τρία posts (αλλά όχι όλα) έχουν συμπληρώσει το πεδίο "publish date". Θα μας βοηθήσει αυτό αργότερα. + +![Django admin](images/edit_post3.png) + +Αν θέλετε να μάθετε περισσότερα για το Django admin, θα πρέπει να επισκεφτείτε την επίσημη σελίδα του στο: https://docs.djangoproject.com/en/2.0/ref/contrib/admin/ + +Αυτή είναι μάλλον μια καλή στιγμή να πιείτε μια γουλιά καφέ (ή τσάι) ή κάτι να φάτε για να γεμίσετε ενέργεια. Μόλις δημιουργήσατε το πρώτο σας Django model. Αξίζετε ένα μικρό διάλλειμα! \ No newline at end of file diff --git a/el/django_admin/images/django_admin3.png b/el/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/el/django_admin/images/django_admin3.png differ diff --git a/el/django_admin/images/edit_post3.png b/el/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/el/django_admin/images/edit_post3.png differ diff --git a/el/django_admin/images/login_page2.png b/el/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/el/django_admin/images/login_page2.png differ diff --git a/el/django_forms/README.md b/el/django_forms/README.md new file mode 100644 index 00000000000..ea789f40649 --- /dev/null +++ b/el/django_forms/README.md @@ -0,0 +1,449 @@ +# Φόρμες Django + +Το τελευταίο που έμεινε για την ιστοσελίδα μας είναι να δημιουργήσουμε μια όμορφη φόρμα για την εισαγαγωγή και τροποποίηση των post μας. Θα μπορούσαμε να χρησιμοποιήσουμε το Django `admin` αλλά είναι αρκετά πολύπλοκο να τροποποιήσουμε και να κάνουμε όμορφη τη φόρμα εισαγωγής εκεί. Με τις `φόρμες` έχουμε τον πλήρη έλεγχο στο περιβάλλον του χρήστη. Μπορούμε να κάνουμε ότι μπορούμε να φανταστούμε! + +Μία από τις ευκολίες των Django φορμών είναι ότι μπορούμε να ξεκινήσουμε από το μήδεν ή να χρησιμοποιήσουμε το `ModelForm` που ουσιαστικά αποθηκεύει τα δεδομένα της φόρμας στο μοντέλο (ή διαφορετικά στο σωστό πίνακα της βάσης μας). + +Αυτό είναι ακριβώς που θέλουμε να κάνουμε: δηλαδή να δημιουργήσουμε εύκολα μια φόρμα εισαγωγής δεδομένων για το ήδη υπάρχων `Post` μοντέλο. + +Οπώς κάθε άλλο σημαντικό τμήμα του Django, οι φόρμες εισαγωγής "ζούν" στο δικό τους αρχείο: `forms.py`. + +Πρέπει να δημιουργήσουμε το αρχείο forms.py μέσα στο φάκελο `blog`. + + blog + └── forms.py + + +Ωραία. Ας ανοίξουμε τον επεξεργαστή κώδικα και ας γράψουμε τον ακόλουθο κώδικα: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Θα χρειαστεί να κάνουμε import τις Django forms πρώτα (`from django import forms`) καθώς και το μοντέλο μας `Post` (`from .models import Post`). + +Οπώς πιθανόν να υποψιάζεστε το `PostForm`, είναι το όνομα της φόρμας εισαγωγής. Θα χρειαστεί να πούμε στο Django ότι αυτή η φόρμα είναι μια `ModelForm` (ούτως ώστε το Django να κάνει τα "μαγικά" του για εμάς). Η κλάση `forms.ModelForm` είναι υπεύθυνη γι'αυτό. + +Στην συνέχεια, έχουμε `class Meta`, όπου "λέμε" στο Django για ποιο μοντέλο πρέπει να δημιουργήσει την φόρμα εισαγωγής δεδομένων (`model = Post`). + +Τέλος, πρέπει να ορίσουμε ποιο/α πεδίο/α πρέπει να διαθέσουμε στην φόρμα μας. Σε αυτό το σενάριο θέλουμε μόνο το `title` και το `text` να εμφανίζονται. Το `author` θα πρέπει να είναι το πρόσωπο που είναι συνδεδεμένο εκείνη τη στιγμή (εσείς!) και το `created_date` θα παράγεται αυτόματα όταν δημιουργούμε ένα post (πχ μέσω κώδικα), σωστά; + +Αυτό ήταν! Αυτό που μας απομένει είναι να χρησιμοποιήσουμε την φόρμα μας μέσα σε ένα *view* ώστε να είναι διαθεσίμη μέσω ενός template. + +Οπότε, για ακόμα μια φορά, θα χρειαστεί να συνδέσουμε τη σελίδα με ένα url, ένα view και ένα template. + +## Πως συνδέουμε μια σελίδα με την φόρμα μας + +Ανοίξτε το template `blog/templates/blog/base.html`. Θα προσθέσουμε έναν σύνδεσμο στο `div` με το όνομα `page-header`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Σημειώστε ότι θέλουμε να ονομάσουμε το view ως `post_new`. Η κλάση `"glyphicon glyphicon-plus"` παρέχεται από το bootstrap και θα εμφανίσει το σύμβολο της πρόσθεσης. + +Αφού προσθέσουμε τη γραμμή, το HTML αρχείο θα δείχνει κάπως έτσι: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Αφού αποθηκεύσετε και ανανέωσετε τη σελίδα http://127.0.0.1:8000 θα δείτε τη γνωστή σελίδα σφάλματος `NoReverseMatch`. Αν ναι, τότε ωραία! + +## URL + +Ανοίξτε το αρχείο `blog/urls.py` και προσθέστε τη γραμμή: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new', views.post_new, name='post_new'), +``` + +Ο ολοκληρωμένος κώδικας θα δείχνει κάπως έτσι: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Αφού ανανεώσετε τη σελίδα θα δείτε ένα σφάλμα `AttributeError`, αφού δεν έχουμε φτιάξει ακόμα το view `post_new`. Ας το φτιάξουμε τώρα. + +## post_new view + +Ανοίξτε το αρχείο`blog/views.py` και προσθέστε τις ακόλουθες γραμμές μαζί με τις γραμμές `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +Στη συνέχεια το *view*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Για να δημιουργήσετε μια νέα `Post` φόρμα, θα χρειαστεί να αρχικοποιήσουμε την κλάση `PostForm()` όπως επίσης και να δηλώσουμε ένα template. Θα επιστρέψουμε σε αυτό το *view* αλλά για τώρα, ας δημιουργήσουμε γρήγορα ένα template για την φόρμα. + +## Template + +Θα χρειαστεί να δημιουργήσουμε ένα αρχείο `post_edit.html` μέσα στο φάκελο `blog/templates/blog` και να το ανοίξουμε. Για να κάνουμε τη φόρμα να δουλέψει θα χρειαστεί να κάνουμε διάφορα πράγματα: + +* Πρέπει να εμφανίσουμε τη φόρμα. Μπορούμε να το κάνουμε αυτό (για παράδειγμα) {% raw %}`{{ form.as_p }}`{% endraw %}. +* Η παραπάνω γραμμή πρέπει συμπεριληφθεί γύρω από ένα HTML form tag: `...`. +* Χρειαζόμαστε ένα κουμπί `Αποθήκευση`. Το κάνουμε αυτό με ένα κουμπί HTML: ``. +* Και στο τέλος, ακριβώς μετά το tag `
` πρέπει να προσθέσουμε {% raw %}`{% csrf_token %}`{% endraw %}. Αυτό είναι πολύ σημαντικό, αφού καθιστά τις φόρμες σας ασφαλείς! Εάν ξεχάσετε αυτό το κομμάτι, το Django θα παραπονεθεί όταν προσπαθήσετε να αποθηκεύσετε τη φόρμα: + +![Σελίδα CSFR Forbidden](images/csrf2.png) + +Εντάξει, ας δούμε πως η HTML στο template `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 }} + +
+{% endblock %} +``` + +Ώρα να ανανεώσετε! Ναι! Η φόρμα σας εμφανίζεται! + +![Νέα φόρμα](images/new_form2.png) + +Αλλά, περιμένετε ένα λεπτό! Όταν πληκτρολογείτε κάτι στα πεδία `title` και `text` και προσπαθήσετε να το αποθηκεύσετε, τι θα συμβεί; + +Τίποτα! Είμαστε άλλη μια φορά στην ίδια σελίδα και το κείμενο μας έχει εξαφανιστεί... και δεν έχει προστεθεί καμία νέα δημοσίευση. Οπότε τι πήγε λάθος; + +Η απάντηση είναι: τίποτα. Πρέπει να κάνουμε λίγη περισσότερη δουλειά στο αρχείο *view*. + +## Αποθηκεύοντας τη φόρμα + +Ανοίξτε το αρχείο `blog/views.py` ξανά. Προς το παρόν αυτό που έχουμε στο `post_new` είναι τα ακόλουθα: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Όταν υποβάλουμε την φόρμα, επανερχόμαστε στο ίδιο view αλλά αυτή τη φορά έχουμε περισσότερα δεδομένα στο `request`. Πιο συγκεκριμένα στο `request.POST` (το όνομα δεν έχει να κάνει με μία "δημοσίευση" blog, έχει να κάνει με το γεγονός ότι "δημοσιεύουμε" δεδομένα). Θυμηθείτε πως στο αρχείο HTML ο `
` ορισμός μας είχε την μεταβλητή `method="POST"`; Όλα τα πεδία από τη φόρμα είναι στο `request.POST`. Δεν πρέπει να μετονομάσετε το `POST` σε οτιδήποτε άλλο (η μόνο άλλη έγκυρη τιμή για το `method` είναι `GET`, αλλά δεν έχουμε χρόνο για να εξηγήσουμε ποια είναι η διαφορά). + +Έτσι στο *view* έχουμε δύο ξεχωριστές καταστάσεις να διαχειριστούμε: 1ον, όταν αποκτούμε πρόσβαση στην σελίδα για πρώτη φορά και θέλουμε μία άδεια φόρμα και 2ον, όταν πάμε πίσω στο *view* με όλα τα δεδομένα της φόρμας που μόλις πληκτρολογήσαμε. Επομένως, πρέπει να προσθέσουμε μια συνθήκη (θα χρησιμοποιήσουμε `if` για αυτό): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Είναι καιρός να συμπληρώσουμε τις τελείες `[...]`. Αν το `method` είναι `POST` τότε θέλουμε να δημιουργήσουμε μια `PostForm` με τα δεδομένα από τη φόρμα, σωστά; Θα το κάνουμε αυτό όπως παρακάτω: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Το επόμενο πράγμα είναι να ελέγξουμε αν η φόρμα είναι σωστή (όλα τα απαιτούμενα πεδία έχουν οριστεί και δεν έχουν υποβληθεί εσφαλμένες τιμές). Το κάνουμε αυτό με τη μέθοδο `form.is_valid()`. + +Ελέγχουμε αν η αίτηση είναι έγκυρη και αν ναι, μπορούμε να την αποθηκεύσουμε! + +{% 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() +``` + +Βασικά, έχουμε δύο πράγματα εδώ: αποθηκεύουμε τη φόρμα με τη μέθοδο `form.save()` και προσθέτουμε έναν συγγραφέα (μιας και δεν υπήρχε πεδίο `author` στην κλάση `PostForm` και αυτό το πεδίο είναι απαραίτητο). `commit=False` σημαίνει ότι δεν θέλουμε να αποθηκεύσουμε το μοντέλο `Post` ακόμα. Θέλουμε να προσθέσουμε τον author πρώτα. Τις περισσότερες φορές θα χρησιμοποιήσετε το `form.save()` χωρίς το `commit=False`, αλλά σε αυτή την περίπτωση, πρέπει να το κάνουμε. Η μέθοδος `post.save()` θα διατηρήσει τις αλλαγές (προσθέτοντας τον author) και έτσι δημιουργείται ένα νέο blog post! + +Τέλος, θα ήταν ωραίο εάν μπορούσαμε να πάμε αμέσως στην σελίδα `post_detail` για το νεοσυσταθέν blog post μας, σωστά; Για να το κάνουμε αυτό χρειαζόμαστε ένα ακόμα import: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Προσθέστε το στην αρχή του αρχείου σας. Και τώρα μπορούμε να πούμε, "πηγαίνε στη σελίδα `post_detail` για το νεοσυσταθέν post": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +Το `post_detail` είναι το όνομα του view στο οποίο θέλουμε να πάμε. Θυμηθείτε ότι αυτό το *view* απαιτεί μία μεταβλητή `pk`; Για να το περάσουμε στα views, χρησιμοποιούμε το `pk=post.pk`, όπου `post` είναι το νεοσύστατο blog post! + +Εντάξει. Έχουμε μιλήσει πολύ. Αλλά μάλλον θέλουμε να δούμε πως μοιάζει το *view*, σωστά; + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Ας δούμε αν λειτουργεί. Πηγαίνετε στην σελίδα http://127.0.0.1:8000/post/new/ και προσθέστε ένα `title` και ένα `text`, αποθηκεύστε το… και voilà! Το νέο σας post προστέθηκε και αυτόματως ανακατευθυνόμαστε στη σελίδα του `post_detail`! + +Ίσως να προσέξατε ότι ορίζουμε την ημ/νια έκδοσης (publish date) πριν την αποθήκευση του post. Αργότερα θα παρουσιάσουμε ένα *publish button* στην ενότητα **Οδηγός Django Girls: Επεκτάσεις**. + +Αυτό είναι απίθανο! + +> Επειδή έχουμε χρησιμοποιήσει το Django Admin πρόσφατα, το σύστημα υποθέτει ότι είμαστε ακόμα συνδεδεμένοι. Υπάρχουν μερικοί τρόποι που μπορεί να μας οδηγήσουν εκτός σύνδεσης (κλείνοντας τον browser, επανεκκινώντας την βάση δεδομένων κλπ). Αν, κατά τη διάρκεια δημιουργίας ενός post, λαμβάνετε σφάλματα ότι είστε εκτός σύνδεσης, πηγαίνετε στη σελίδα admin http://127.0.0.1:8000/admin και συνδεθείτε ξανά. Αυτό θα διορθώσει το πρόβλημα, προσωρινά. Υπάρχει, ωστόσο, η μόνιμη λύση του προβλήματος η οποία σας περιμένει στο κεφάλαιο **Εργασία: ασφάλεια για το site σας!** μετά από αυτόν τον οδηγό. + +![Σφάλμα σύνδεσης](images/post_create_error.png) + +## Form validation + +Τώρα θα σας δείξουμε πόσο ωραίες είναι οι Django φόρμες. Ένα post χρειάζεται να έχει τουλάχιστον τα εξής πεδία: `title` και `text`. Στο μοντέλο μας `Post` δεν δηλώσαμε ότι θέλουμε αυτά τα πεδία να είναι προαιρετικά (εν εντιθέση με το πεδίο `published_date`). Έτσι το Django, από προεπιλογή, αναμένει αυτά τα πεδία να υπάρχουν. + +Προσπαθήστε να αποθηκεύσετε τη φόρμα δίχως τιμές για τα πεδία `title` και `text`. Τι θα συμβεί; + +![Form validation](images/form_validation2.png) + +Το Django χειρίζεται την εγκυρότητα της φόρμας. Με άλλα λόγια κάνει το λεγόμενο form validation. Δεν είναι φοβερό αυτό; + +## Επεξεργασία φόρμας + +Τώρα ξέρουμε πως να προσθέσουμε μια νέα φόρμα. Αλλά πως επεξεργαζόμαστε μια ήδη υπάρχουσα; Αυτό είναι παρόμοιο με αυτό που κάναμε. Ας δημιουργήσουμε, γρήγορα, μερικά σημαντικά πράγματα. (Αν δεν καταλαβαίνετε κάτι, θα πρέπει να ζητήσετε τη βοήθεια του επιτηρητή σας ή να κοιτάξετε στα προηγούμενα κεφάλαια, δεδομένου ότι καλύψαμε ήδη όλα αυτά τα βήματα.) + +Ανοίξτε το αρχείο `blog/templates/blog/post_detail.html` και προσθέστε τη γραμμή + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +ούτως ώστε το template να δείχνει κάπως έτσι: + +{% 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 %} +``` + +Ανοίξτε το αρχείο `blog/urls.py` και προσθέστε τη γραμμή: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Θα ξαναχρησιμοποιήσουμε το template `blog/templates/blog/post_edit.html`, οπότε λείπει μόνο το *view*. + +Ανοίξτε το αρχείο `blog/views.py` και προσθέστε αυτό στο τέλος του αρχείου: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Αυτό μοιάζει σχεδόν το ίδιο με το view `post_new`, σωστά; Αλλά όχι εντελώς. Για το πρώτο, περνάμε μια έξτρα παράμετρο `pk` από τα urls. Στη συνέχεια, παίρνουμε το μοντέλο `Post` που θέλουμε να επεξεργαστούμε με την συνάρτηση `get_object_or_404 (Post, pk=pk)` και στη συνέχεια όταν δημιουργούμε μια φόρμα, περνάμε το post αυτό ως ένα `instance`, τόσο όταν αποθηκεύουμε τη φόρμα... + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +… όσο και όταν έχουμε μόλις ανοίξει μία φόρμα προς επεξεργασία με αυτό το post: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Εντάξει, ας δοκιμάσουμε αν λειτουργεί! Πάμε στην σελίδα `post_detail`. Θα πρέπει να υπάρχει ένα κουμπί επεξεργασίας στην πάνω δεξιά γωνία: + +![Κουμπί επεξεργασίας](images/edit_button2.png) + +Όταν κάνετε κλικ θα δείτε την φόρμα με την δημοσίευση στο blog μας: + +![Επεξεργασία φόρμας](images/edit_form2.png) + +Νιώστε ελεύθεροι να αλλάξετε τον τίτλο ή το κείμενο και να αποθηκεύσετε τις αλλαγές! + +Συγχαρητήρια! Η εφαρμογή σας γίνεται όλο και πιο πλήρης! + +Εάν χρειάζεστε περισσότερες πληροφορίες για τις φόρμες Django, θα πρέπει να διαβάσετε το: https://docs.djangoproject.com/en/2.0/topics/forms/ + +## Ασφάλεια + +Το να μπορείς να δημιουργήσεις νέες δημοσιεύσεις κάνοντας απλώς ένα κλικ σε ένα σύνδεσμο είναι φοβερό! Αλλά τώρα, οποιοσδήποτε επισκεφθεί την σελίδα σας θα μπορεί να φτιάξει μία καινούρια δημοσίευση blog, και αυτό είναι κάτι που πιθανώς δεν θέλετε. Ας το κάνουμε έτσι ώστε το κουμπί να εμφανίζεται μόνο για εσάς και για κανέναν άλλο. + +Ανοίξτε το αρχείο `Blog/templates/blog/base.html` και βρείτε το `page-header` `div` καθώς και το tag a του link. Θα μοιάζει κάπως έτσι: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Πρόκειται να προσθέσουμε άλλη μία ετικέτα `{% if %}` σε αυτό, το οποίο θα κάνει τον σύνδεσμο να εμφανίζεται μόνο για χρήστες που είναι συνδεδεμένοι στο Django Admin. Προς το παρόν, είστε μόνο εσείς! Αλλάξτε το tag `` να μοιάζει σαν αυτό: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Αυτό το `{% if %}` θα προκαλέσει τον σύνδεσμο να σταλθεί στο πρόγραμμα περιήγησης μόνο αν ο χρήστης που ζητά την σελίδα είναι συνδεδεμένος. Αυτό δεν προστατεύει την δημιουργία νέων δημοσιεύσεων εντελώς, αλλά είναι ένα καλό πρώτο βήμα. Θα καλύψουμε περισσότερα σχετικά με την ασφάλεια στα μαθήματα επέκτασης. + +Θυμάστε το εικονίδιο επεξεργασίας που μόλις προσθέσαμε στην σελίδα λεπτομερειών; Θέλουμε επίσης να προσθέσουμε την ίδια αλλαγή εκεί, ώστε άλλα άτομα δεν θα μπορούν να επεξεργαστούν τις υπάρχουσες δημοσιεύσεις. + +Ανοίξτε το αρχείο `blog/templates/blog/post_detail.html` και προσθέστε τη γραμμή: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Αλλάξτε το σε αυτό: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Μιας και είστε πιθανότατα συνδεδεμένοι, εάν ανανεώσετε την σελίδα, δεν θα δείτε τίποτα διαφορετικό. Φορτώστε την σελίδα σε ένα διαφορετικό πρόγραμμα περιήγησης ή ένα παράθυρο ανώνυμης περιήγησης (που ονομάζεται "InPrivate" στο Windows Edge), όμως, και θα δείτε ότι ο σύνδεσμος δεν εμφανίζεται, ούτε και το εικονίδιο! + +## Ένα πράγμα ακόμα: ώρα να το ανεβάσετε! + +Για να δούμε αν όλα αυτά λειτουργούν στο PythonAnywhere. Ώρα για άλλο ένα deploy! + +* Πρώτα κάντε commit τον νέο σας κώδικα και έπειτα push στο GitHub: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* Έπειτα, στην [κονσόλα Bash του PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Θυμηθείτε να αντικαταστήσετε με το ``πραγματικό όνομα χρήστη σας του PythonAnywhere χωρίς τα <>). + +* Τέλος, επισκεφτείτε τη σελίδα σας ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (χρησιμοποιήστε το κουμπί του menu στην πάνω δεξιά γωνία της κονσόλας) και κλικάρετε **Reload**. Ανανεώστε τη σελίδα https://yourname.pythonanywhere.com και δείτε τις αλλαγές. + +Αυτό ήταν! Συγχαρητήρια :) \ No newline at end of file diff --git a/el/django_forms/images/csrf2.png b/el/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/el/django_forms/images/csrf2.png differ diff --git a/el/django_forms/images/drafts.png b/el/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/el/django_forms/images/drafts.png differ diff --git a/el/django_forms/images/edit_button2.png b/el/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/el/django_forms/images/edit_button2.png differ diff --git a/el/django_forms/images/edit_form2.png b/el/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/el/django_forms/images/edit_form2.png differ diff --git a/el/django_forms/images/form_validation2.png b/el/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/el/django_forms/images/form_validation2.png differ diff --git a/el/django_forms/images/new_form2.png b/el/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/el/django_forms/images/new_form2.png differ diff --git a/el/django_forms/images/post_create_error.png b/el/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/el/django_forms/images/post_create_error.png differ diff --git a/el/django_installation/README.md b/el/django_installation/README.md new file mode 100644 index 00000000000..9abda63495d --- /dev/null +++ b/el/django_installation/README.md @@ -0,0 +1,7 @@ +# Εγκατάσταση του Django + +> **Σημείωση** Αν χρησιμοποιείτε ένα Chromebook, παραλείψτε αυτό το κεφάλαιο και σιγουρευτείτε ότι ακουλουθείτε τις [Chromebook Setup](../chromebook_setup/README.md) οδηγίες. +> +> **Σημείωση** Αν έχετε ήδη περάσει τα βήματα εγκατάστασης τότε το έχετε ήδη κάνει αυτό - μπορείτε να μεταβείτε απευθείας στο επόμενο κεφάλαιο! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/el/django_installation/instructions.md b/el/django_installation/instructions.md new file mode 100644 index 00000000000..daa2509df12 --- /dev/null +++ b/el/django_installation/instructions.md @@ -0,0 +1,218 @@ +> Μέρος αυτής της ενότητας βασίζεται στους οδηγούς των Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Μέρος αυτής της ενότητας βασίζεται στον οδηγό [django-marcador](http://django-marcador.keimlink.de/) υπό την άδεια χρήσης Creative Commons Attribution-ShareAlike 4.0 International License. Τα πνευματικά δικαιώματα του οδηγού django-marcador ανήκουν στον Markus Zapke-Gründemann. + +## Εικονικό περιβάλλον + +Πριν την εγκατάσταση του Django, θα εγκαταστήσουμε ενα εξαιρετικά χρήσιμο εργαλείο για να κρατήσουμε το περιβάλλον του υπολογιστή σας τακτοποιημένο και καθαρό. Μπορείτε να παραβλέψετε αυτό το βήμα, αλλά προτείνουμε να το ακολουθήσετε καθώς αν δεν το ακολουθήσετε υπάρχει σοβαρή πιθανότητα να προκύψουν σφάλματα αργότερα. Ξεκινώντας με την καλύτερη δυνατή εγκατάσταση, θα αποφύγετε πολλά προβλήματα στο μέλλον! + +Ας δημιουργήσουμε λοιπόν ενα **εικονικό περιβάλλον** (το αποκαλούμενο *virtualenv*). Το virtualenv θα απομονώσει την κάθε εγκατάσταση Python/Django ανά έργο (project). Αυτό σημαίνει ότι οι αλλαγές που κάνετε σε μια ιστοσελίδα (έργο - project) δεν θα επηρεάζουν οποιεσδήποτε άλλες ιστοσελίδες που αναπτύσσετε παράλληλα. Κάθε ιστοσελίδα θα έχει τα δικά της πακέτα και κάθε πακέτο την δική του έκδοση (version). Καλό, ε; + +Το μόνο που χρειάζεται να κάνετε είναι να βρείτε έναν φάκελο στον οποίο θέλετε να δημιουργήσετε το `virtualenv`. Για παράδειγμα, το home directory σας. Στα Windows, θα μοιάζει κάπως έτσι `C:\Users\Name` ( όπου `Name` είναι το όνομα της σύνδεσης σας). + +> **ΣΗΜΕΙΩΣΗ:** Στα Windows, σιγουρευτείτε ότι αυτός ο κατάλογος δεν περιέχει χαρακτήρες που τονίζονται ή ειδικούς χαρακτήρες. Αν το όνομα χρήστη σας περιέχει χαρακτήρες που τονίζονται, χρησιμοποιείστε ένα διαφορετικό φάκελο, για παράδειγμα `C:\djangogirls`. + +Για αυτό το tutorial θα χρησιμοποιήσουμε ένα νεο φάκελο `djangogirls` από το home directory σας: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Θα δημιουργήσουμε ένα virtualenv με το όνομα `myvenv`. Η γενική εντολή είναι: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Για την δημιουργία ενός νέου `virtualenv`, θα χρειαστεί να ανοίξετε την γραμμή εντολών στον υπολογιστή σας (κονσόλα) και να τρέξετε την εντολή `python -m venv myvenv`. Θα μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Όπου `myvenv` είναι το όνομα του `virtualenv` σας. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο όνομα, αλλά πρέπει να είναι αγγλικοί χαρακτήρες, πεζά, χωρίς κενά, εμφάσεις ή άλλους ειδικούς χαρακτήρες. Είναι επίσης καλή ιδέα να κρατήσετε το όνομα μικρό - θα το αναφέρετε συχνά! + + + + + +Μπορούμε να δημιουργήσουμε ένα `virtualenv` σε Linux και σε macOS τρέχοντας την εντολή `python3 -m venv myvenv`. Θα μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +Το `myvenv` είναι το όνομα του `virtualenv` σας. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο όνομα, αλλα πρέπει να είναι αγγλικοί χαρακτήρες, πεζά, χωρίς κενά και χωρίς άλλους ειδικούς χαρακτήρες. Είναι επίσης καλή ιδέα να κρατήσετε το όνομα μικρό - θα το αναφέρετε συχνά! + +> **ΣΗΜΕΙΩΣΗ:** Σε μερικές εκδόσεις των Debian/Ubuntu ίσως εμφανιστεί το ακόλουθο σφάλμα: +> +> {% filename %}command-line{% endfilename %} +> +> The virtual environment was not created successfully because ensurepip is not available. Στα λειτουργικά συστήματα Debian/Ubuntu, θα χρειαστεί να εγκαταστήσετε το πακέτο python3-venv χρησιμοποιώντας την ακόλουθη εντολή. +> apt install python3-venv +> Ίσως χρειαστεί να χρηιμοποιήσετε sudo με αυτή την εντολή. Αφού εγκατασταθεί επιτυχώς το πακέτο python3-venv, επαναδημιουργήστε το εικονικό σας περιβάλλον. +> +> +> Σε αυτή την περίπτωση, ακολουθήστε τις οδηγίες παραπάνω και εγκαταστήστε το πακέτο `python3-venv`: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **ΣΗΜΕΙΩΣΗ:** Σε μερικές εκδόσεις των Debian/Ubuntu η ενεργοποίηση του virtual environment με αυτόν τον τρόπο, παράγει το ακόλουθο σφάλμα: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Για την επίλυση του χρησιμοποιήστε την εντολή `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **ΣΗΜΕΙΩΣΗ:** Αν λάβετε κάποιο σφάλμα όπως +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> τότε τρέξτε: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## Δουλεύοντας με το virtualenv + +Η παραπάνω εντολή θα δημιουργήσει έναν φάκελο που ονομάζεται `myvenv` (ή όποιο άλλο όνομα διαλέξετε) που περιέχει το εικονικό μας περιβάλλον (βασικά ένα μάτσο φακέλων και αρχείων). + + + +Ξεκινήστε το εικονικό σας περιβάλλον εκτελώντας: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **ΣΗΜΕΙΩΣΗ:** στα Windows 10 μπορεί να λάβετε ένα σφάλμα στο Windows PowerShell που λέει `η εκτέλεση των σεναρίων έχει απενεργοποιηθεί σε αυτό το σύστημα`. Σε αυτή την περίπτωση, ανοίξτε ένα άλλο Windows PowerShell με την επιλογή "Εκτέλεση ως διαχειριστής". Έπειτα δοκιμάστε να πληκτρολογήσετε την ακόλουθη εντολή πριν ξεκινήσετε το εικονικό σας περιβάλλον: +> +> {% 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 +> + + + + + +Ξεκινήστε το εικονικό σας περιβάλλον εκτελώντας: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Θυμηθείτε να αντικαταστήσετε το `myvenv` με το επιλεγμένο `virtualenv` όνομα που επιλέξατε! + +> **ΣΗΜΕΙΩΣΗ:** μερικές φορές `πηγή` μπορεί να μην είναι διαθέσιμη. Σε αυτές τις περιπτώσεις προσπαθήστε να κάνετε αυτό: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Θα ξέρετε ότι είστε μέσα σε ένα `virtualenv` όταν δείτε την γραμμή εντολών στην κονσόλα σας να είναι συμπληρωμένη με το όνομα του μέσα σε παρένθεση, πχ `(myvenv)`. + +Όταν δουλεύετε μέσα σε ένα εικονικό περιβάλλον, η εντολή `python` θα αναφέρετε αυτόματα στην σωστή έκδοση ώστε να μπορείτε να χρησιμοποιήσετε την εντολή `python` αντί για `python3`. + +Εντάξει, μέχρι τώρα έχουμε τακτοποιήσει το περιβάλλον εργασίας μας. Μπορούμε επιτέλους να εγκαταστήσουμε το Django! + +## Εγκατάσταση Django + +Τώρα που είστε μέσα στο `virtualenv`, μπορείτε να εγκαταστήσετε το Django. + +Πριν κάνουμε αυτό, πρέπει να σιγουρευτούμε ότι έχουμε την τελευταία έκδοση του `pip`, το εργαλείο που χρησιμοποιούμε για να εγκαταστήσουμε το Django (και οποιοδήποτε άλλο Python πακέτο όπως θα δούμε αργότερα): + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python3 -m pip install --upgrade pip + + +### Εγκατάσταση πακέτων με τα requirements + +Το αρχείο requirements είναι μια λίστα από dependencies (δυστυχώς, πάλι, δεν υπάρχει αντίστοιχος ελληνικός όρος αλλά φανταστείτε το ως τις "απαιτήσεις" της εφαρμογής σας - απαιτήσεις όχι σε μνήμη, σκληρό δίσκο κλπ αλλά σε άλλα προγράμματα) προς εγκατάσταση χρησιμοποιώντας την εντολή `pip install`: + +Δημιουργήστε πρώτα ένα αρχείο `requirements.txt` μέσα στο φάκελο `djangogirls /` χρησιμοποιώντας το πρόγραμμα επεξεργασίας κώδικα που εγκαταστήσατε νωρίτερα. Μπορείτε να το κάνετε αυτό, ανοίγοντας ένα νέο αρχείο στο πρόγραμμα επεξεργασίας κώδικα και στη συνέχεια αποθηκεύοντάς το ως `requirements.txt` στο φάκελο `djangogirls /`. Ο φάκελός σας θα μοιάζει κάπως έτσι: + + djangogirls + └───requirements.txt + + +Στο αρχείο `djangogirls/requirements.txt` θα πρέπει να προσθέσετε τα ακόλουθα: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Τώρα τρέξτε `pip install -r requirements.txt` για να ξεκινήσει η εγκατάσταση του 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Εάν λάβετε κάποιο σφάλμα όταν τρέχετε το pip σε Windows, παρακαλούμε ελέγξτε εάν η διαδρομή (pathname) του project σας περιέχει κενά, εμφάσεις ή ειδικούς χαρακτήρες (για παράδειγμα,`C:\Users\User Name\djangogirls`). Εάν ναι, παρακαλούμε σκεφτείτε να χρησιμοποιήσετε μία άλλη τοποθεσία χωρίς κενά, εμφάσεις ή ειδικούς χαρακτήρες (για παράδειγμα: `C:\djangogirls`). Δημιουργήστε ένα νέο virtualenv στον νέο αυτό φάκελο, σβήστε τον παλιό και δοκιμάστε την παραπάνω εντολή ξανά. (Το να μετακινήσετε τον virtualenv φάκελο δεν θα δουλέψει μιας και το virtualenv χρησιμοποιεί απόλυτες διαδρομές.) + + + + + +> Η γραμμή εντολών μπορεί να παγώσει όταν εγκατασταθεί το Django. Εάν γίνει αυτό, αντί για την παραπάνω εντολή χρησιμοποιήστε: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Αν λάβετε κάποιο σφάλμα καθώς τρέχετε την εντολή pip σε Ubuntu 12.04, παρακαλούμε τρέξτε `python -m pip install -U --force-reinstall pip` για να διορθωθεί η εγκατάσταση του pip μέσα στο virtualenv. + + + +Αυτό ήταν! Είστε (επιτέλους) έτοιμοι να δημιουργήσετε μια Django εφαρμογή! \ No newline at end of file diff --git a/el/django_models/README.md b/el/django_models/README.md new file mode 100644 index 00000000000..48875c34b30 --- /dev/null +++ b/el/django_models/README.md @@ -0,0 +1,198 @@ +# Django μοντέλα (models) + +Αυτό που θέλουμε να δημιουργήσουμε τώρα είναι κάτι που θα αποθηκεύει όλες τις αναρτήσεις του blog μας. Αλλά για να είμαστε σε θέση να το κάνουμε, πρέπει να μιλήσουμε λίγο για το τι ονομάζουμε `"αντικείμενα" (objects)`. + +## Objects + +Υπάρχει μια έννοια στον προγραμματισμό που ονομάζεται `"Αντικειμενοστραφής προγραμματισμός`. Η ιδέα είναι ότι αντί να γράφετε τα πάντα ως μια βαρετή ακολουθία από προγραμματιστικές εντολές, μπορούμε να μοντελοποιήσουμε τα πράγματα και να καθορίσουμε πως αλληλεπιδρούν μεταξύ τους. + +Άρα, τι είναι ένα αντικείμενο; Είναι μια συλλογή από ιδιότητες και συμπεριφορές. Ακούγεται παράξενο, αλλά θα σας δώσουμε ένα παράδειγμα. + +Εάν θέλουμε να μοντελοποιήσουμε μια γάτα, θα δημιουργήσουμε ένα αντικείμενο `Γάτα` το οποίο έχει κάποιες ιδιότητες όπως `χρώμα`, `ηλικία`, `διάθεση` (όπως καλή, κακή, νυσταγμένη :)), και `ιδιοκτήτης`(που θα μπορεί να ανατεθεί σε ένα αντικείμενο `άτομο` ή ίσως, στην περίπτωση μιας αδέσποτης γάτας, αυτή η ιδιότητα θα μπορούσε να είναι άδεια). + +Έπειτα η `γάτα` έχει κάποιες δράσεις `γουργούρισμα`, `ξύσιμο` ή `τάισμα`( σε αυτή την περίπτωση, θα δώσουμε στην γάτα λίγη `γατοτροφή`, που θα μπορούσε να είναι ένα ξεχωριστό αντικείμενο με ιδιότητες, όπως `γεύση`). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +Βασικά η ιδέα είναι να περιγράψουμε τα αληθινά πράγματα στον κώδικα με ιδιότητες (που ονομάζονται `object properties`) και συμπεριφορές (που ονομάζονται `methods`). + +Πώς θα μοντελοποιήσουμε τότε τις αναρτήσεις του blog; Θέλουμε να κατασκευάσουμε ένα blog, σωστά; + +Πρέπει να δώσουμε απάντηση στο ερώτημα: τι είναι μία ανάρτηση στο blog; Τι ιδιότητες πρέπει να έχει; + +Λοιπόν, σίγουρα μία ανάρτηση στο blog μας χρειάζεται κάποιο κείμενο με το περιεχόμενό του και έναν τίτλο, σωστά; Θα ήταν επίσης ωραίο να ξέρουμε ποιος το έγραψε αυτό. Έτσι χρειαζόμαστε έναν συγγραφέα. Τέλος, θέλουμε να γνωρίζουμε πότε δημιουργήθηκε και δημοσιεύτηκε η συγκεκριμένη ανάρτηση. + + Post + -------- + title + text + author + created_date + published_date + + +Τι είδους πράγματα θα μπορούσαν να γίνουν με μια ανάρτηση στο blog; Θα ήταν ωραίο να έχουμε κάποια `method` που δημοσιεύει την ανάρτηση, σωστά; + +Έτσι, θα χρειαστούμε μια μέθοδο `publish`. + +Δεδομένου ότι γνωρίζουμε ήδη τι θέλουμε να επιτύχουμε, ας ξεκινήσουμε τη μοντελοποίηση στο Django! + +## Django model + +Γνωρίζοντας τι είναι ένα αντικείμενο, μπορούμε να δημιουργήσουμε ένα μοντέλο Django για την ανάρτηση στο blog μας. + +Ένα μοντέλο στο Django είναι ένα ιδιαίτερο είδος αντικειμένου το οποίο αποθηκεύεται στη βάση δεδομένων `database`. Η βάση δεδομένων είναι μια συλλογή δεδομένων. Είναι εκεί όπου θα αποθηκευτούν όλες οι πληροφορίες για τους χρήστες, τις αναρτήσεις στο blog, κλπ. Θα χρησιμοποιήσουμε την βάση δεδομένων SQLite για την αποθήκευση των δεδομένων μας. Αυτός είναι η προεπιλεγμένη βάση δεδομένων του Django. Είναι αρκετό για εμάς για την ώρα. + +Μπορείτε να σκεφτείτε ένα μοντέλο της βάσης δεδομένων ως ένα υπολογιστικό φύλλο με στήλες (πεδία) και γραμμές (δεδομένα). + +### Δημιουργία μιας εφαρμογής + +Για να κρατήσουμε τα πάντα τακτοποιημένα, θα δημιουργήσουμε μια ξεχωριστή εφαρμογή μέσα στο project μας. Είναι πολύ ωραίο να έχουμε τα πάντα οργανωμένα από την αρχή. Για την δημιουργία μιας εφαρμογής θα χρειαστεί να τρέξουμε την ακόλουθη εντολή στην κονσόλα (από τον φάκελο `djangogirls` όπου βρίσκεται το αρχείο `manage.py`): + +{% filename %}macOS and Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Θα παρατηρήσετε ότι ένας νέος φάκελος με το όνομα `blog` δημιουργήθηκε και περιέχει έναν αριθμό αρχείων. Οι φάκελοι και τα αρχεία στο project μας πρέπει να μοιάζουν κάπως έτσι: + + djangogirls + ├── blog + │   ├── __init__.py + │   ├── admin.py + │   ├── apps.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + └── requirements.txt + + +Μετά την δημιουργία μίας εφαρμογής, πρέπει επίσης να πούμε στο Django ότι πρέπει να τη χρησιμοποιήσει. Το κάνουμε αυτό μέσα στο αρχείο `mysite/settings.py`. Ανοίξτε το. Πρέπει να βρούμε την λίστα `INSTALLED_APPS` και να προσθέσουμε εκεί το εξής: `'blog',` πάνω από το `]`. Έτσι το τελικό προϊόν πρέπει να μοιάζει κάπως έτσι: + +{% 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', +] +``` + +### Δημιουργία ενός post model + +Μέσα στο αρχείο `blog/models.py` ορίζουμε όλα τα objects με το όνομα `Models`. Αυτό είναι ένα μέρος όπου θα ορίσουμε το post μοντέλο μας. + +Ας ανοίξουμε το αρχείο `blog/models.py`, διαγράψτε τα περιεχόμενα του και γράψτε τα εξής: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Σιγουρευτείτε ότι χρησιμοποιείτε δύο φορές την κάτω παύλα (`_`) σε κάθε πλευρά του `str`. Αυτό είναι απαραίτητο και συχνά θα το συναντάτε στην Python. Συνηθίζεται να ονομάζεται "dunder" (σύντμηση για "double-underscore"). + +Μη φοβάστε. Θα εξηγήσουμε τι συμβαίνει! + +Όλες οι γραμμές που ξεκινούν με τις λέξεις `from` ή `import` είναι γραμμές που εισάγουν λειτουργίες από άλλα Python αρχεία (αυτά με την κατάληξη .py). Έτσι αντί να κάνουμε αντιγραφή-επικόλληση κώδικα, πολύ απλά συμπεριλαμβάνουμε κώδικα από άλλα αρχεία με τη χρήση του `from ... import ...`. + +`class Post(models.Model):` – αυτή η γραμμή ορίζει το μοντέλο μας (είναι μια κλάση που με τη σειρά της είναι και αυτή ένα `object`). + +- Η λέξη `class` είναι μια ιδιαίτερη λέξη-κλειδί που καθορίζει τον ορισμό μιας κλάσης. +- Η λέξη `Post` είναι το όνομα του μοντέλου μας. Μπορούμε να του δώσουμε όποιο όνομα θέλουμε (αλλά πρέπει να αποφεύγουμε ιδιαίτερους χαρακτήρες και κενά). Πάντα το όνομα μιας κλάσης να ξεκινάει με ένα κεφαλαίο γράμμα. +- Η γραμμή `models.Model` σημαίνει ότι το Post είναι ένα Django Model. Με αυτό τον τρόπο το Django θα ξέρει ότι θα πρέπει να αποθηκεύεται σε μια βάση δεδομένων. + +Τώρα ορίζουμε τα properties που λέγαμε: `title`, `text`, `created_date`, `published_date` και `author`. Για να το κάνουμε αυτό θα πρέπει να ορίσουμε τον τύπο τιμών που θα δέχεται το κάθε πεδίο (είναι κείμενο; αριθμός; ημερομηνία; κάποια συσχέτιση με ένα άλλο object, όπως ένας χρήστης;) + +- `models.CharField` – έτσι δηλώνετε ότι θέλετε να ορίσετε ένα κείμενο με συγκεκριμένο αριθμό χαρακτήρων. +- `models.TextField`- αυτό είναι για μεγάλα κείμενα χωρίς όριο. Ακούγεται ιδανικό για περιεχόμενο δημοσιεύσεων blog, έτσι δεν είναι; +- `models.DateTimeField`- αυτό είναι για ημερομηνία και ώρα. +- `models.ForeignKey`- αυτό είναι ένας σύνδεσμος για ένα άλλο μοντέλο. + +Δεν θα εξηγήσουμε κάθε κομμάτι του κώδικα διότι θα πάρει αρκετό χρόνο. Θα πρέπει να ρίξετε μια ματιά στo documentation του Django αν θέλετε να μάθετε περισσότερα σχετικά με τα πεδία των μοντέλων και πως να ορίζετε πράγματα εκτός από αυτά που αναφέρθηκαν παραπάνω (https://docs.djangoproject.com/en/2.0/ref/models/fields/#field-types). + +Τι γίνεται με την μέθοδο `def publish(self):`; Αυτή είναι ακριβώς η μέθοδος `publish` για την οποία μιλούσαμε πριν. `def` σημαίνει ορίζουμε μια συνάρτηση/μέθοδο (ανάλογα αν είναι μέρος τηε κλάσης ή όχι) και `publish` είναι το όνομα της. Μπορείτε να αλλάξετε το όνομα της μεθόδου αν θέλετε. Ο κανόνας ονομασίας είναι ότι χρησιμοποιούμε πεζά γράμματα και κάτω παύλες αντί για κενά. Αν χρησιμοποιήσετε κενά τότε λάβετε σφάλμα. Για παράδειγμα, μια μέθοδος που υπολογίζει την μέση τιμή θα λεγόταν `calculate_average_price`. + +Οι μέθοδοι συχνά κάνουν `return` κάτι, δηλαδή επιστρέφουν μια τιμή ή οτιδήποτε άλλο. Μπορεί όμως και όχι. Υπάρχει ένα παράδειγμα αυτού στη μέθοδο `__str__`. Σε αυτό το σενάριο, όταν καλούμε την `__str__()` θα λάβουμε ένα κείμενο (**string**) με τον τίτλο του post. + +Επίσης προσέξτε ότι και το `def publish(self):` και το `def __str__(self):` είναι δηλωμένα μέσα στην κλάση μας (με κενά ή με tab). Επειδή η Python είναι ευαίσθητη στα κενά (στους κενούς χαρακτήρες), θα πρέπει να "βάλουμε" τις μεθόδους μας μέσα στην κλάση. Αλλιώς, οι μέθοδοι δεν θα ανήκουν στην κλάση και μπορεί να συναντήσετε απρόοπτη συμπεριφορά. + +Εάν κάτι ακόμα δεν είναι ξεκάθαρο σχετικά με τα μοντέλα, μη διστάσετε να ρωτήσετε τον επιτηρητή σας! Ξέρουμε ότι είναι περίπλοκο, ειδικά όταν μαθαίνετε τι είναι τα αντικείμενα και συναρτήσεις ταυτόχρονα. Αλλά ελπίζουμε να μοιάζει λιγότερο μαγικό για εσάς τώρα! + +### Δημιουργία πινάκων για μοντέλα στην βάση δεδομένων σας + +Το τελευταίο βήμα εδώ είναι να προσθέσουμε το νέο μοντέλο μας στην βάση δεδομένων μας. Πρώτα πρέπει να ενημερώσουμε το Django ότι έχουμε κάποιες αλλαγές στο μοντέλο μας. (Μόλις το δημιουργήσαμε!) Πηγαίνετε στο παράθυρο της κονσόλας σας και πληκτρολογήστε `python manage.py makemigrations blog`. Θα μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Σημείωση:** Θυμηθείτε να αποθηκεύετε τα αρχεία που επεξεργάζεστε. Αλλιώς, ο υπολογιστής σας θα εκτελέσει τις προηγούμενες εκδόσεις που μπορεί να σας δώσει μηνύματα απρόοπτων σφαλμάτων. + +Το Django προετοίμασε ένα αρχείο migration για εμάς που πρέπει τώρα να εφαρμόσουμε στην βάση δεδομένων μας. Πληκτρολογήστε `python manage.py migrate blog` και τo αποτελέσματα πρέπει να είναι όπως παρακάτω: + +{% 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 + + +Ζήτω! Το Post μοντέλο μας είναι στην βάση δεδομένων! Θα ήταν ωραίο να το δούμε, σωστά; Πηγαίνετε στο επόμενο κεφάλαιο για να δείτε πως μοιάζει η ανάρτηση σας! \ No newline at end of file diff --git a/el/django_orm/README.md b/el/django_orm/README.md new file mode 100644 index 00000000000..524c8fd9e3c --- /dev/null +++ b/el/django_orm/README.md @@ -0,0 +1,221 @@ +# Django ORM και QuerySets + +Σε αυτό το κεφάλαιο θα μάθετε πως το Django συνδέεται στην βάση δεδομένων και αποθηκεύει δεδομένα μέσα της. Ας ξεκινήσουμε! + +## Τι είναι ένα QuerySet; + +Ένα QuerySet είναι, στην ουσία, μία λίστα αντικειμένων ενός Μοντέλου. Τα QuerySets σας επιτρέπουν να διαβάσετε τα δεδομένα από την βάση δεδομένων, να τα φιλτράρετε και να τα ταξινομήσετε. + +Είναι πιο εύκολο να μάθεις κάνοντας το. Πάμε να δοκιμάσουμε; + +## Παράθυρο εντολών Django (django shell) + +Άνοιξτε την κονσόλα (όχι στο PythonAnywhere) και πληκτρολογήστε αυτήν την εντολή: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Το αποτέλεσμα πρέπει να είναι σαν αυτό: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Είστε τώρα στην διαδραστική κονσόλα του Django. Είναι ακριβώς όπως το παράθυρο εντολών της Python, αλλά με μια μικρή επιπρόσθετη μαγεία του Django. :) Φυσικά, μπορείτε να χρησιμοποιήσετε όλες τις εντολές Python εδώ. + +### Όλα τα αντικείμενα + +Ας προσπαθήσουμε να εμφανίσουμε όλες τις δημοσιεύσεις του blog μας πρώτα. Μπορείτε να το κάνετε με την ακόλουθη εντολή: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Ωχ! Εμφανίστηκε ένα λάθος, μας λέει ότι δεν υπάρχει καμία δημοσίευση. Είναι σωστό. Ξεχάσαμε να το εισάγουμε πρώτα (να το κάνουμε, δηλαδή, import)! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Εισάγουμε το μοντέλο `Post` από το module `blog.models`. Ας προσπαθήσουμε να εμφανίσουμε όλες τις αναρτήσεις ξανά: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Αυτή είναι μια λίστα των αναρτήσεων που δημιουργήσαμε νωρίτερα! Δημιουργήσαμε αυτές τις αναρτήσεις χρησιμοποιώντας το περιβάλλον διαχειριστή Django. Αλλά τώρα θέλουμε να δημιουργήσουμε νέες αναρτήσεις χρησιμοποιώντας την Python, οπότε πως το κάνουμε αυτό; + +### Δημιουργία αντικειμένου + +Έτσι δημιουργείται ένα νέο αντικείμενο Post στην βάση δεδομένων: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Αλλά μας λείπει ένα συστατικό εδώ: `εγώ`. Χρειαζόμαστε να περάσουμε μία παρουσία του μοντέλου `User` ως τον author. Πως το κάνουμε αυτό; + +Ας εισάγουμε το μοντέλο User πρώτα: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Τι χρήστες έχουμε στην βάση δεδομένων μας; Δοκιμάστε αυτό: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Αυτός είναι ο χρήστης superuser που δημιουργήσαμε νωρίτερα! Ας πάρουμε ένα instance από την κλάση User τώρα (αντικαταστείστε το όνομα με το όνομα χρήστη που βάλατε νωρίτερα ως superuser): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Όπως βλέπετε, κάνουμε ένa `get` για έναν `User` με ένα `username` το οποίο ισούται με 'ola'. Καλό! + +Τώρα μπορούμε, επιτέλους να δημιουργήσουμε το post: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Ζήτω! Θέλετε να ελέγξετε αν λειτούργησε; + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Αυτό είναι, άλλη ένα post στη λίστα! + +### Προσθέστε περισσότερα posts + +Τώρα μπορείτε να διασκεδάσετε λίγο και να προσθέσετε περισσότερες δημοσιεύσεις για να δείτε πως δουλεύει. Προσθέστε δυο-τρεις ακόμα και μετά προχωρήστε στο επόμενο μέρος. + +### Φιλτράρισμα αντικειμένων + +Ένα μεγάλο μέρος των χαρακτηριστικών των QuerySets είναι η δυνατότητα να τα φιλτράρουμε. Ας υποθέσουμε ότι θέλουμε να βρούμε όλα τα posts όπου ο χρήστης ola έγραψε. Θα χρησιμοποιήσουμε την μέθοδο `filter` αντί της `all` στην εντολή `Post.objects.all()`. Μέσα στις παρενθέσεις της μεθόδου filter δηλώνουμε τα κριτήρια αναζήτησης για αυτό που ψάχνουμε. Στην περίπτβση μας, το κριτήριο είναι ένα `author` και θέλουμε να είναι ίσο με `me`. Ο τρόπος που το γράφουμε στο Django είναι `author=me`. Τώρα ο κώδικας μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +Ή ίσως θα θέλαμε να δούμε όλα τα posts τα οποία περιέχουν τη λέξη 'title' μέσα στο πεδίο `title`; + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Σημείωση** Υπάρχουν δύο κάτω παύλες (`_`) μεταξύ του `title` και του `contains`. Το Django ORM χρησιμοποιεί αυτόν τον κανόνα για να διαχωρίσει τα ονόματα των πεδίων των μοντέλων ("title") με τους διαχωριστές ή τα φίλτρα ("contains"). Αν χρησιμποιούσατε μόνο μια κάτω παύλα θα λαμβάνατε το σφάλμα "FieldError: Cannot resolve keyword title_contains". + +Μπορείτε επίσης να πάρετε μια λίστα από δημοσιευμένα posts. Το κάνουμε αυτό φιλτράροντας όλα τα posts που έχουν παρελθοντική ημ/νια `published_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Δυστυχώς, το post που αναρτήσαμε από την Python κονσόλα δεν είναι δημοσιευμένο ακόμα. Αλλά μπορούμε να το αλλάξουμε αυτό. Πρώτα, πάρτε ένα instance από το post που θέλετε να δημοσιεύσετε: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Και έπειτα δημοσιεύστε το με την μέθοδο `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Τώρα προσπαθήστε να πάρετε μια λίστα από δημοσιευμένα posts ξανά (πιέστε το πάνω βελάκι στο πληκτρολόγιο 3 φορές και έπειτα `enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Ταξινόμηση objects + +Τα QuerySets επίσης σου επιτρέπουν να ταξινομήσεις την λίστα των αντικειμένων. Ας προσπαθήσουμε να τα ταξινομήσουμε ως προς πεδίο `created_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Μπορούμε επίσης να αντιστρέψουμε την ταξινόμηση προσθέτοντας `-` στην αρχή: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Αλυσιδωτά QuerySets + +Μπορείτε επίσης να συνδυάσετε QuerySets με το να τα **αλυσοδέσετε** μαζί: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Αυτό είναι πολύ ισχυρό και σας επιτρέπει να γράψετε αρκετά σύνθετα ερωτήματα. + +Ωραία! Τώρα είστε έτοιμοι για το επόμενο μέρος! Για να κλείσετε το κέλυφος, πληκτρολογήστε αυτό: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/el/django_start_project/README.md b/el/django_start_project/README.md new file mode 100644 index 00000000000..59b6da15d12 --- /dev/null +++ b/el/django_start_project/README.md @@ -0,0 +1,205 @@ +# Το πρώτο σας Django project! + +> Μέρος αυτού του κεφαλαίου είναι βασισμένο στους οδηγούς από την κοινότητα Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Μέρος αυτού του κεφαλαίου είναι βασισμένο στους οδηγούς από την κοινότητα [django-marcador tutorial](http://django-marcador.keimlink.de/) υπό την άδεια χρήσης Creative Commons Attribution-ShareAlike 4.0 International License. Τα πνευματικά δικαιώματα του οδηγού django-marcador ανήκουν στον Markus Zapke-Gründemann. + +Πρόκειται να δημιουργήσουμε ένα μικρό blog! + +Το πρώτο βήμα είναι να ξεκινήσουμε ένα νέο Django project. Βασικά αυτό σημαίνει ότι θα εκτελέσουμε μερικά scripts (εντολές) που παρέχονται από το Django τα οποία θα δημιουργήσουν τον σκελετό ενός Django project για εμάς. Αυτά είναι ένα σύμπλεγμα φακέλων και αρχείων που θα χρησιμοποιήσουμε αργότερα. + +Τα ονόματα μερικών αρχείων και φακέλων είναι πολύ σημαντικά για το Django. Δεν πρέπει να μετονομάσετε τα αρχεία που πρόκειται να δημιουργήσουμε. Μετακινώντας τα σε ένα διαφορετικό μέρος δεν είναι επίσης καλή ιδέα. Το Django χρειάζεται να διατηρήσει μία συγκεκριμένη δομή για να μπορεί να βρει σημαντικά πράγματα. + +> Θυμηθείτε να εκτελείτε τα πάντα μέσα σε κάποιο εικονικό περιβάλλον. Εάν δεν δείτε ένα πρόθεμα `(myenv)` στην κονσόλα σας, θα πρέπει να ενεργοποιήσετε το εικονικό περιβάλλον σας. Εξηγήσαμε πως να το κάνετε αυτό στο κεφάλαιο **Εγκατάσταση Django** στην ενότητα **Δουλεύοντας με το εικονικό περιβάλλον**. Σε Windows δοκιμάστε να γράψετε `myvenv\Scripts\activate` ή αν έχετε Lixux/macOS γράψτε `source myvenv/bin/activate`. + + + +Στην κονσόλα σας macOS ή Linux, πρέπει να εκτελέσετε την ακόλουθη εντολή. ** Μην ξεχάσετε να προσθέσετε την τελεία `. ` στο τέλος!** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Η τελεία `.` είναι ζωτικής σημασίας επειδή λέει στην εντολή να εγκαταστήσει το Django στο τρέχον φάκελο σας ( για το οποίο η τελεία `.` είναι μία συντόμευση). +> +> **Σημείωση** Όταν πληκτρολογείτε την παραπάνω εντολή, θυμηθείτε ότι πληκτρολογείτε το κομμάτι που ξεκινά με `django-admin`. Το κομμάτι κονσόλας που εμφανίζεται εδώ `(myvenv) ~/djangogirls$` είναι απλώς ένα παράδειγμα. + + + + + +Στα Windows πρέπει να εκτελέσετε την ακόλουθη εντολή. **(Μην ξεχάσετε να προσθέσετε την τελεία `.` στο τέλος)**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Η τελεία `.` είναι ζωτικής σημασίας επειδή λέει στην εντολή να εγκαταστήσει το Django στο τρέχον φάκελο σας ( για το οποίο η τελεία `.` είναι μία συντόμευση). +> +> **Σημείωση** Όταν πληκτρολογείτε την παραπάνω εντολή, θυμηθείτε ότι πληκτρολογείτε το κομμάτι που ξεκινά με `django-admin.exe`. Το κομμάτι κονσόλας που εμφανίζεται εδώ `(myvenv) ~/djangogirls$` είναι απλώς ένα παράδειγμα. + + + +Η εντολή `django-admin.py` μπορεί να δημιουργήσει τους φακέλους και τα αρχεία για εσάς. Θα πρέπει τώρα να έχετε μια δομή φακέλων που μοιάζει κάπως έτσι: + + djangogirls + ├───manage.py + ├───mysite + │ settings.py + │ urls.py + │ wsgi.py + │ __init__.py + └───requirements.txt + + +> **Σημείωση**: Στην δομή φακέλων σας, θα δείτε επίσης τον `myvenv` φάκελο σας που δημιουργήσαμε προηγουμένως. + +Το `manage.py` είναι ένα script που βοηθά με την διαχείριση του project σας. Με αυτό θα μπορούμε να (μεταξύ άλλων πραγμάτων) ξεκινήσουμε έναν server στον υπολογιστή μας χωρίς να εγκαταστήσουμε οτιδήποτε άλλο. + +Το αρχείο `settings.py` περιέχει τις διάφορες παραμέτρους του project σας. + +Θυμάστε όταν μιλήσαμε σχετικά με ένα μεταφορέα αλληλογραφίας που ελέγχει που να παραδώσει ένα γράμμα; Το αρχείο `urls.py` περιέχει μία λίστα από σχέδια που χρησιμοποιούνται από τον `urlresolver`. + +Ας αφνοήσουμε τα υπόλοιπα αρχεία προς το παρόν καθώς δεν θα τα αλλάξουμε καθόλου. Το μόνο πράγμα που πρέπει να θυμάστε είναι να μην τα διαγράψετε κατά λάθος! + +## Αλλάζοντας τις ρυθμίσεις + +Ας κάνουμε μερικές αλλαγές στο αρχείο `mysite/settings.py`. Ανοίξτε το. + +**Σημείωση**: Κρατήστε στο μυαλό σας ότι το αρχείο `settings.py` είναι ένα κοινό Python αρχείο όπως όλα τα άλλα Python αρχεία (έχουν, δηλαδή, την κατάληξη .py). Μπορείτε να το ανοίξετε μέσα από τον επεξεργαστή κώδικα που χρησιμοποιείτε, κλικάροντας στο "File -> Open". Αυτό θα εμφανίσει ένα παράθυρο εξερεύνησης αρχείων μέσα από το οποίο επιλέγετε το αρχείο `settings.py` και το ανοίγετε. Εναλλακτικά, μπορείτε να μεταβείτε μέσα από τον φάκελο djangogirls και με δεξί κλικ να το ανοίξετε. Έπειτα, επιλέξτε τον επεξεργαστή κώδικα από την προτινώμενη λίστα προγραμμάτων. Η επιλογή του επεξεργαστή κώδικα είναι σημαντική καθώς μπορεί να έχετε άλλα προγράμματα εγκατεστημένα. + +Θα ήτνα καλό να έχουμε τη σωστή ώρα στην ιστοσελίδα μας. Πηγαίνετε στο [Wikipedia's list of time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) και αντιγράψτε την ζώνη ώρας σας (TZ) (πχ `Europe/Athens`). + +Στο αρχείο `settings.py`, βρείτε τη γραμμή που λέει `TIME_ZONE` και αλλάξτε την τιμή της σε αυτή που αντιγράψατε. Για παράδειγμα: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Ο κωδικό γλώσσας (language code) αποτελείται από την γλώσσα, πχ `en` για Αγγλικά ή `el` για Ελληνικά και τον κωδικό χώρας πχ `gr` για Ελλάδα ή `ch` για την Ελβετία. Αν τα Ελληνικά είναι η μητρική σας γλώσσα, μπορείτε να προσθέσετε το παρακάτω για να αλλάξετε την γλώσσα σε Ελληνικά: Μπορείτε, δηλαδή, να έχετε ένα κουμπί "Άκυρο" μεταφρασμένο στην γλώσσα σας. [Το Django έρχεται με προεγκατεστημένες κάποιες μεταφράσεις](https://docs.djangoproject.com/en/2.0/ref/settings/#language-code). + +Αν θέλετε κάποια διαφορετική γλώσσα, αλλάξτε το string LANGUAGE_CODE όπως παρακάτω με την τική που εσείς επιθυμείτε: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'el-GR' +``` + +Χρειάζεται επίσης να ρυθμίσουμε τα στατικά αρχεία μας. (Θα βρείτε τα πάντα για τα στατικά αρχεία και το CSS αργότερα στον οδηγό.) Πηγαίνετε προς τα κάτω μέχρι το *τέλος* του αρχείου και ακριβώς κάτω από την καταχώρηση `STATIC_URL`, προσθέστε μια νέα που ονομάζεται `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Όταν το flag `DEBUG` είναι `True` και η λίστα `ALLOWED_HOSTS` είναι κενή, ο host επικυρώνεται μέσα από την ακόλουθη λίστα `[«localhost', '127.0.0.1', ' [:: 1]']`. Αυτό δεν θα ταιριάξει το hostname μας στο PythonAnywhere μόλις κάνουμε deploy την εφαρμογή μας. Οπότε θα χρειαστεί να κάνουμε την ακόλουθη αλλαγή: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Σημείωση**: Αν χρησιμοποιείτε ένα Chromebook, προσθέστε αυτή τη γραμμή στο τέλος του αρχείου settings.py: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Επίσης προσθέστε `".amazonaws.com"` στη λίστα `ALLOWED_HOSTS` αν χρησιμοποιείτε το cloud9 + +## Δημιουργία μιας βάσης δεδομένων + +Υπάρχουν πολλές διαφορετικές βάσεις δεδομένων που μπορούν να αποθηκεύσουν δεδομένα για την σελίδα σας. Θα χρησιμοποιήσουμε την προεπιλεγμένη, `sqlite3`. + +Αυτό έχει ήδη δηλωθεί στο αρχείο `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Για να δημιουργήσετε μία βάση δεδομένων για το blog σας, ας εκτελέσουμε το ακόλουθο στην κονσόλα: `python manage.py migrate` ( χρειάζεται να είμαστε στον φάκελο `djangogirls` που περιέχει το αρχείο `manage.py`). Αν αυτό πάει καλά, θα πρέπει να δείτε κάτι σαν αυτό: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... ΟΚ + + +Και τελειώσαμε! Ώρα να ξεκινήσουμε τον server και να δούμε εάν η ιστοσελίδα μας λειτουργεί! + +## Εκκίνηση του development server + +Θα πρέπει να είστε στον φάκελο που περιέχει το αρχείο `manage.py` (στον φάκελο `djangogirls`). Στην κονσόλα, μπορούμε να ξεκινήσουμε τον server εκτελώντας `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Εάν είστε σε ένα Chromebook, χρησιμοποιείστε αυτή την εντολή: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Αν είστε σε Windows και αυτή η ενέργεια αποτύχει με σφάλμα `UnicodeDecodeError`, χρησιμοποιείστε αντί για αυτό, αυτή την εντολή: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Τώρα θα χρειαστεί να ελέγξετε αν το site σας δουλεύει. Ανοίξτε έναν browser (Firefox, Chrome, Safari ή Internet Explorer ή οτιδήποτε άλλο χρησιμοποιείτε) και πληκτρολογήστε την παρακάτω διεύθυνση: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Αν χρησιμοποιείτε Chromebook και Cloud9, αντί κλικάρετε στο παράθυρο που εμφανίστηκε στην πάνω δεξιά γωνία όπου ο server τρέχει. Το url θα δείχνει κάπως έτσι: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +Συγχαρητήρια! Μόλις δημιουργήσατε το πρώτο σας website το οποίο τρέχει χρησιμοποιώντας έναν web server! Δεν είναι φοβερό; + +![Η εγκατάσταση πέτυχε!](images/install_worked.png) + +Σημειώστε ότι ένα παράθυρό εντολών μπορεί να εκτελεί μόνο μια εντολή κάθε φορά και η εντολή που τρέχει αυτή τη στιγμή είναι ένας web server. Όσο ο server τρέχει και αναμένει εισερχόμενα requests το τερματικό θα εμφανίζει κάποια μηνύματα αλλά δεν θα εκτελεί νέες εντολές. + +> Είδαμε πως λειτουργούν οι web servers στο κεφάλαιο **Πως λειτουργεί το internet**. + +Για να γράψετε άλλες εντολές όσο ο server τρέχει, ανοίξτε ένα νέο παράθυρο και ενεργοποιήστε το virtualenv σας. Για να σταματήσετε τον server, μεταβείτε στο παράθυρο που τρέχει και πιέστε Ctrl + C (σε Windows θα πρέπει να πιέσετε Ctrl + Break). + +Έτοιμοι για το επόμενο βήμα; Ώρα να δημιουργήσουμε περιεχόμενο για το blog μας! \ No newline at end of file diff --git a/el/django_start_project/images/install_worked.png b/el/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/el/django_start_project/images/install_worked.png differ diff --git a/el/django_templates/README.md b/el/django_templates/README.md new file mode 100644 index 00000000000..445ed333831 --- /dev/null +++ b/el/django_templates/README.md @@ -0,0 +1,106 @@ +# Django templates + +Ήρθε η ώρα να παρουσιάσουμε ορισμένα δεδομένα! Το Django μας δίνει κάποια προεγκατεστημένα **template tags**. + +## Τι είναι τα template tags; + +Βλέπετε, στην HTML δεν μπορείτε να γράψετε κώδικα σε Python επειδή οι browsers δεν καταλαβαίνουν αυτή τη γλώσσα. Εκείνοι ξέρουν μόνο HTML, CSS και Javascript. Ξέρουμε ότι η HTML είναι στατική γλώσσα ενώ η Python περισσότερο δυναμική. + +Τα **Django template tags** μας επιτρέπουν να μεταφέρουμε πράγματα της Python μέσα στην HTML, ούτως ώστε να χτίσετε δυναμικές ιστοσελίδες γρηγορότερα. Τέλεια! + +## Template προβολή λίστας των post + +Σε προηγούμενο κεφάλαιο δώσαμε στο template μας μια λίστα από posts μέσα σε μια μεταβλητή με το όνομα `posts`. Τώρα θα την προβάλουμε στην HTML. Άλλωστε αυτό θέλαμε να κάνουμε από την αρχή. + +Για να εκτυπώσουμε μια μεταβλητή μέσα στα Django templates, χρησιμοποιούμε διπλές αγκύλες ({% raw %}{{ }}{% endraw %}) με το όνομα της μεταβλητής ανάμεσα: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Δοκιμάστε αυτό μέσα στο template `blog/templates/blog/post_list.html`. Ανοίξτε το και αντικαταστήστε τα πάντα από το δεύτερο `
` to the third `
` με το `{{ posts }}`. Αποθηκεύστε το αρχείο και ανανεώστε τη σελίδα για να δείτε τα αποτελέσματα: + +![Σχήμα 13.1](images/step1.png) + +Όπως βλέπετε, το μόνο που έχουμε είναι το εξής: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Αυτό σημαίνει ότι το Django το εκλαμβάνει ως μια λίστα από objects. Θυμηθείτε στο κεφάλαιο **Εισαγωγή στην Python** πως προβάλαμε λίστες; Ναι, με επαναλήψεις! Στα Django template το κάνετε ως εξής: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Δοκιμάστε αυτό στο template. + +![Σχήμα 13.2](images/step2.png) + +Δούλεψε! Αλλά θέλουμε τα posts μα εμφανίζονται όπως τα στατικά posts που φτιάξαμε νωρίτερα στο κεφάλαιο **Εισαγωγή στην HTML**. Μπορείτε να μιξάρετε HTML και template tags μαζί. Έτσι, το `body` θα μοιάζει κάπως έτσι: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Οτιδήποτε βάζετε ανάμεσα στο `{% for %}` και το `{% endfor %}` θα επαναληφθεί για κάθε object στη λίστα. Ανανεώστε τη σελίδα:{% endraw %} + +![Σχήμα 13.3](images/step3.png) + +Παρατηρήσατε ότι χρησιμοποιούμε έναν διαφορετικό τρόπο πρόσβασης αυτή τη φορά (`{{ post.title }}` ή `{{ post.text }}`); Αποκτούμε πρόσβαση στα δεδομένα κάθε πεδίου που είναι ορισμένα στο μοντέλο `Post`. Επίσης, η κάθετη γραμμή `|linebreaksbr` φιλτράρει το κείμενο του posts όπου μετατρέπει τις αλλαγές γραμμής σε παράγράφους. + +## Ένα ακόμα πράγμα + +Θα ήταν καλό να βλέπαμε αν το site σας εξακολουθεί να λειτουργεί ακόμα στο internet, σωστά; Ας το κάνουμε deploy στο PythonAnywhere για ακόμη μια φορά. Παρακάτω φαίνεται μια περίληψη των βημάτων… + +* Πρώτα κάντε push τον κώδικα σας στο GitHub + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Έπειτα συνδεθείτε στο [PythonAnywhere](https://www.pythonanywhere.com/consoles/), μεταβείτε στο **Bash console** (ή ανοίξτε ένα νέο) και τρέξτε: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd $USER.pythonanywhere.com + $ git pull + [...] + + +* Τέλος, πηγαίνετε στο ["Web" page](https://www.pythonanywhere.com/web_app_setup/) και κλικάρετε **Reload** στην εφαρμογή σας. (Για να δείτε άλλες σελίδες του PythonAnywhere από την κονσόλα χρησιμοποιήστε το κουμπί του μενού στην πάνω δεξιά γωνία.) Η αλλαγή σας θα πρέπει να φαίνεται στο https://yourname.pythonanywhere.com. Δείτε το στο browser! Δεν πειράζει αν τα posts στο PythonAnywhere δεν είναι τα ίδια με τα posts που εμφανίζονται τοπικά στον υπολογιστή σας. Οι βάσεις δεδομένων στον τοπικό υπολογιστή σας και στο PythonAnywhere δεν είναι συγχρονισμένες μεταξύ τους. + +Συγχαρητήρια! Τώρα, πηγαίντε και προσθέστε μερικά posts μέσω του Django admin (θυμηθείτε να προσθέσετε το published_date!) Σιγουρευτείτε ότι βρίσκεστε στο Django admin του pythonanywhere site, https://yourname.pythonanywhere.com/admin (και όχι του τοπικού υπολογιστή σας). Έπειτα, ανανεώστε τη σελίδα και δείτε αν αυτά τα posts εμφανίστηκαν. + +Δουλεύει μια χαρά, έτσι; Είμαστε περήφανοι! Απομακρυνθείτε από τον υπολογιστή σας για λίγο. Αξίζετε ένα διάλλειμα. :) + +![Σχήμα 13.4](images/donut.png) \ No newline at end of file diff --git a/el/django_templates/images/donut.png b/el/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/el/django_templates/images/donut.png differ diff --git a/el/django_templates/images/step1.png b/el/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/el/django_templates/images/step1.png differ diff --git a/el/django_templates/images/step2.png b/el/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/el/django_templates/images/step2.png differ diff --git a/el/django_templates/images/step3.png b/el/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/el/django_templates/images/step3.png differ diff --git a/el/django_urls/README.md b/el/django_urls/README.md new file mode 100644 index 00000000000..d6ead3275eb --- /dev/null +++ b/el/django_urls/README.md @@ -0,0 +1,103 @@ +# Django URLs + +Είμαστε έτοιμοι να χτίσουμε την πρώτη μας σελίδα: μια αρχική σελίδα (homepage) για το blog μας! Αλλά πρώτα πρέπει να μάθουμε λίγα πράγματα για τα Django URLs. + +## Τι είναι ένα URL; + +Ένα URL είναι μια διεύθυνση ιστού. Μπορείτε να δείτε ένα URL κάθε φορά που επισκέπτεστε μια σελίδα. Είναι ορατό στην γραμμή διεύθυνσης. (Ναι! `127.0.0.1:8000` είναι ένα URL! Και το `https://djangogirls.org` είναι, επίσης, ένα URL.) + +![Url](images/url.png) + +Κάθε σελίδα στο ιντερνετ χρειάζεται το δικό της URL. Με αυτό τον τρόπο η εφαρμογή σας θα ξέρει τι να δείξει στον χρήστη που ανοίγει αυτό το URL. Στο Django, χρησιμοποιούμε κάτι που το ονομάζουμε `URLconf` (URL configuration). Το URLconf είναι ένα σετ από μοτίβα που το Django θα προσπαθήσει να ταιριάξει με το ζητούμενο URL ούτως ώστε να βρει το κατάλληλο view. + +## Πως δουλεύουν τα URLs στο Django; + +Ας ανοίξουμε το αρχείο `mysite/urls.py` και να δούμε τι έχει μέσα: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Όπως βλέπετε, το Django έχει γράψει μέσα κάποια πράγματα για εμάς. + +Οι γραμμές μεταξύ των τριπλών εισαγωγικών (`'''` ή `"""`) ονομάζονται docstrings. Μπορείτε να τα γράψετε στην αρχή κάθε Python αρχείου, κλάσης, μεθόδου ή συνάρτησης για να περιγράψετε το τι κάνει. Δεν θα εκτελεστούν από την Python. + +Το admin URL, το οποίο επισκεφτήκατε σε προηγούμενο κεφάλαιο, είναι ήδη εκεί: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Η γραμμή αυτή σημαίνει ότι για κάθε URL που ξεκινά με τη λέξη `admin/`, το Django θα ψάξει να βρει το αντίστοιχο *view*. Σε αυτή την περίπτωση συμπεριλαμβάνουμε αρκετά admin URLs ούτως ώστε να μην εμφανίζονται όλα σε αυτό το αρχείο. Είναι περισσότερο ευανάγνωστο κατ' αυτό τον τρόπο. + +## Το πρώτο σας Django URL! + +Ώρα να δημιουργήσουμε το πρώτο σας URL! Θέλουμε η διεύθυνση 'http://127.0.0.1:8000/' να είναι η αρχική μας σελίδα για το blog, η οποία θα εμφανίζει όλα τα posts. + +Θέλουμε, επίσης, να κρατήσουμε το αρχείο `mysite/urls.py` καθαρό. Οπότε, θα κάνουμε import τα URLs από το `blog` application στο αρχείο `mysite/urls.py`. + +Πηγαίνετε λοιπόν, και προσθέστε αυτή τη γραμμή στο αρχείο `blog.urls`. Θα χρειαστεί, επίσης, να αλλάξετε την γραμμή `from django.urls…` επειδή χρησιμοποιούμε την συνάρτηση `include`. Επομένως, θα χρειαστεί να προσθέσετε αυτή τη γραμμή. + +Το αρχείο σας `mysite/urls.py` θα μοιάζει κάπως έτσι: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Το Django, τώρα, θα ανακατευθύνει οτιδήποτε έρχεται στο 'http://127.0.0.1:8000/' προς το αρχείο `blog.urls` και από κει και πέρα θα πράττει αναλόγως. + +## blog.urls + +Δημιουργήστε ένα κενό αρχείο `urls.py` μέσα στο φάκελο `blog` και ανοίξτε το. Τέλεια! Προσθέστε αυτές τις δύο γραμμές: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Εδώ κάνουμε import τη συνάρτηση `path` του Django και όλα τα `views` από το `blog` application. (Δεν κάποια views ακόμα αλλά θα φτάσουμε εκεί σε λίγο!) + +Μετά από αυτό, μπορούμε να προσθέσουμε το πρώτο μας URL μοτίβο (URL pattern): + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Όπως μπορείτε να δείτε, αναθέτουμε ένα `view` με το όνομα `post_list` στο πηγαίο URL. Αυτό το μοτίβο θα ταιριάξει το κενό string και ο Django URL resolver θα αγνοήσει το domain name (πχ http://127.0.0.1:8000/) που το πρόθεμα του ενιαίου URL μονοπατιού. Αυτό το μοτίβο θα πει στο Django ότι το view `views.post_list` είναι το σωστό μέρος να πας αν κάποιος επισκεφτεί τη διεύθυνση 'http://127.0.0.1:8000/'. + +Το τελευταίο μέρος, `name='post_list'`, είναι το όνομα του URL το οποίο θα χρησιμοποιηθεί για να αναγνωρίσουμε αυτό το URL. Αυτό μπορεί να είναι το ίσιο όπως το όνομα του view αλλά μπορεί να είναι κάτι τελείως το διαφορετικό αν θέλετε. Θα χρησιμοποιούμε τα URLs με όνομα (named URLs) αργότερα στο project, οπότε είναι σημαντικό να ονομάσετε κάθε URL στην εφαρμογή σας. Θα προσπαθήσουμε, επίσης, να κρατήσουμε τα ονόματα μοναδικά μεταξύ τους και εύκολα να τα θυμόμαστε. + +Αν προσπαθήσετε να επισκεφτείτε τη διεύθυνση http://127.0.0.1:8000/, τότε θα δείτε ένα σφάλμα τύπου 'web page not available'. Αυτό προκύπτει επειδή ο server (θυμάστε όταν γράψατε `runserver`?) δεν τρέχει. Δείτε στην κονσόλα που έτρεχε ο server σας και δείτε το γιατί. + +![Σφάλμα](images/error1.png) + +Η κονσόλα, σας εμφάνισε σφάλμα αλλά μην ανησυχείτε. Είναι στην ουσία πολύ χρήσιμο: σας λέει **no attribute 'post_list'**. Αυτό είναι το όνομα του *view* το οποίο προσπαθεί να βρει και να χρησιμοποιήσει το Django αλλά δεν το έχουμε δημιουργήσει ακόμα. Σε αυτό το σημείο, ούτε η σελίδα `/admin/` δεν θα λειτουργεί. Μην ανησυχείτε. Θα φτάσουμε και εκεί. Αν δείτε κάποιο διαφορετικό σφάλμα προσπαθείστε να επανεκκινήσετε τον τοπικό server σας. Για να το κάνετε αυτό, στην κονσόλα που τρέχει ο server, σταματήστε τον πιέζοντας Ctrl+C και επανεκκινήστε τον γράφοντας `python manage.py runserver` και μετά πιέστε enter. + +> Αν θέλετε να περισσότερα σχετικά με τα Django URLconfs, δείτε στο επίσημο documentation: https://docs.djangoproject.com/en/2.0/topics/http/urls/ \ No newline at end of file diff --git a/el/django_urls/images/error1.png b/el/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/el/django_urls/images/error1.png differ diff --git a/el/django_urls/images/url.png b/el/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/el/django_urls/images/url.png differ diff --git a/el/django_views/README.md b/el/django_views/README.md new file mode 100644 index 00000000000..50b7c40aeb8 --- /dev/null +++ b/el/django_views/README.md @@ -0,0 +1,44 @@ +# Django views – ώρα να δημιουργήσουμε! + +Ώρα να ξεφορτωθούμε το σφάλμα που δημιουργήσαμε στο προηγούμενο κεφάλαιο! :) + +Ένα *view* είναι το μέρος όπου βάζουμε την "λογική" της εφαρμογής μας. Θα ζητήσει πληροφορίες από το μοντέλο μας (`model`) που δημιουργήσαμε νωρίτερα και θα το περάσει στο `template`. Θα δημιουργήσουμε ένα template στο επόμενο κεφάλαιο. Τα views είναι απλώς Python συναρτήσεις οι οποίες είναι ελαφρώς πιο περίπλοκες από αυτές που γράψαμε στο κεφάλαιο **Εισαγωγή στην Python**. + +Τα views τοποθετούνται σε ένα αρχείο (ανα εφαρμογή) με το όνομα `views.py`. Θα προσθέσουμε τα δικά μας *views* στο αρχείο `blog/views.py`. + +## blog/views.py + +Ωραία. Ας ανοίξουμε το αρχείο να δούμε τι έχει μέσα: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Όχι και πολλά πράγματα, ακόμα. + +Θυμηθείτε ότι οι γραμμές που ξεκινούν με δίεση `#` είναι σχόλια. Αγνοούνται πλήρως από την Python. + +Ας δημιουργήσουμε ένα *view* όπως προτείνει και το σχόλιο. Προσθέστε τα επόμενα από κάτω: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Όπως βλέπετε, δημιουργήσαμε μια συνάρτηση (`def`) με το όνομα `post_list` η οποία παίρνει την παράμετρο `request` και επιστρέφει `return` την τιμή που παίρνει από άλλη συνάρτηση, την `render`, η οποία κάνει render ("χτίζει") το template `blog/post_list.html`. + +Αποθηκεύστε το αρχείο και επισκεφτείτε τη σελίδα http://127.0.0.1:8000/ να δούμε τι εμφανίζεται. + +Κι άλλο σφάλμα! Διαβάστε το γιατί: + +![Σφάλμα](images/error.png) + +Αυτή τη φορά δείχνει ότι ο server, τουλάχιστον, τρέχει αλλά κάτι δεν πάει καλά, σωστά; Μην ανησυχείτε. Είναι απλώς μια σελίδα σφάλματος! Όπως ακριβώς τα μηνύματα σφάλματος στην κονσόλα, αυτά τα σφάλματα στον browser είναι στην πραγματικότητα πολύ χρήσιμα. Διαβάζετε ότι *TemplateDoesNotExist*. Ας το φτιάξουμε δημιουργώντας ένα template στο επόμενο κεφάλαιο! + +> Διαβάστε περισσότερα για τα Django views στο επίσημο documentation: https://docs.djangoproject.com/en/2.0/topics/http/views/ \ No newline at end of file diff --git a/el/django_views/images/error.png b/el/django_views/images/error.png new file mode 100644 index 00000000000..2ef613c8a5d Binary files /dev/null and b/el/django_views/images/error.png differ diff --git a/el/dynamic_data_in_templates/README.md b/el/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..d8afea253a9 --- /dev/null +++ b/el/dynamic_data_in_templates/README.md @@ -0,0 +1,81 @@ +# Δυναμικά δεδομένα στα templates + +Μέχρι τώρα έχουμε διαφορετικά κομμάτια έτοιμα να συναρμολογηθούν: το μοντέλο `Post` είναι δηλωμένο στο αρχείο `models.py`, την συνάρτηση `post_list` στο αρχείο `views.py` το template. Αλλά πως θα κάνουμε τα posts να εμφανιστούν στο HTML template; Επειδή αυτό θέλουμε να κάνουμε. Να αντλήσουμε δεδομένα (αποθηκευμένα μοντέλα στη βάση δεδομένων) και να τα παρουσιάσουμε όμορφα μέσα από ένα template, σωστά; + +Αυτό ακριβώς κάνουν τα *views*: συνδέουν τα μοντέλα με τα templates. Μέσα στη συνάρτηση `post_list` *view* πρέπει να προσπελάσουμε τα μοντέλα που θέλουμε και να τα δώσουμε στο template. Μέσα στο *view* αποφασίσαμε τι (μοντέλο) θα εμφανιστεί στο template. + +Ωραία, πως το κάνουμε αυτό; + +Πρέπει να ανοίξουμε το αρχείο `blog/views.py`. Μέχρι τώρα η συνάρτηση `post_list` *view* δείχνει κάπως έτσι: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Θυμάστε όταν είπαμε να συμπεριλαμβάνουμε κώδικα γραμμένο σε διαφορετικά αρχεία; Τώρα είναι η στιγμή να συπεριλάβουμε το μοντέλο που είχαμε γράψει στο αρχείο `models.py`. Θα προσθέσουμε τη γραμμή `from .models import Post`, όπως κάτωθι: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Η τελεία πριν τη λέξη `models` σημαίνει ο *παρόν φάκελος* ή το *παρόν application*. Και τα δύο αρχεία `views.py` και `models.py` βρίσκονται στον ίδιο φάκελο. Αυτό σημαίνει ότι μπορούμε να χρησιμοποιήσουμε την τελεία `.` και μετά το όνομα του αρχείου (δίχως την κατάληξη `.py`). Έπειτα κάνουμε import το όνομα του μοντέλου, δηλαδή της κλάσης (`Post`). + +Και μετά; Για να εξάγουμε τα posts από το μοντέλο `Post` χρειαζόμαστε κάτι που ονομάζεται `QuerySet`. + +## QuerySet + +Θα πρέπει να είστε ήδη εξοικειωμένοι με τον όρο QuerySet και πως αυτό λειτουργεί. Μιλήσαμε γι'αυτά στο κεφάλαιο [Django ORM (QuerySets)](../django_orm/README.md). + +Οπότε τώρα θέλουμε δημοσιευμένα posts ταξινομημένα κατά `published_date`, σωστά; Αυτό το κάναμε ήδη στο κεφάλαιο με τα QuerySets! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Επομένως, ας ανοίξουμε το αρχείο `blog/views.py` και ας προσθέσουμε αυτό το κομμάτι κώδικα στη συνάρτηση `def post_list(request)`. Αλλά μην παραλείψετε να προσθέσετε `from django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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` QuerySet στο template. Μην ανησυχείτε. Θα δούμε πως να το παρουσιάσουμε σε επόμενο κεφάλαιο. + +Παρακαλούμε σημειώστε ότι δημιουργούμε μια *μεταβλητή* για το QuerySet: `posts`. Μεταχειριστείτε τη ως το όνομα του QuerySet. Απο δω και στο εξής μπορούμε να αναφερόμαστε σε αυτό με το όνομα αυτό. + +Στη συνάρτηση `render` έχουμε μια παράμετρο `request` (οτιδήποτε λαμβάνουμε από το χρήστη μέσω του Internet) και άλλη μια ακόμα, εκείνη του αρχείου template (`'blog/post_list.html'`). Η τελευταία παράμετρος `{}`, είναι το σημείο που μπορούμε να προσθέσουμε πράγματα για να τα αξιοποιήσει το template. Χρειαζόμαστε να τους δώσουμε ονόματα (θα μείνουμε με το όνομα `'posts'`). :) Θα δείχνει κάπως έτσι: `{'posts': posts}`. Παρακαλούμε σημειώστε ότι το κομμάτι πριν το `:` είναι ένα string; πρέπει να το περικυκλώσετε με "αυτάκια": `''`. + +Εν τέλει, το αρχείο `blog/views.py` θα δείχνει κάπως έτσι: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Αυτό ήταν! Ήρθε η ώρα να πάμε πίσω στο template και να εμφανίσουμε αυτό το QuerySet! + +Θέλετε να διαβάσετε περισσότερα για τα QuerySets στο Django; Θα πρέπει να διαβάσετε εδώ: https://docs.djangoproject.com/en/2.0/ref/models/querysets/ \ No newline at end of file diff --git a/el/extend_your_application/README.md b/el/extend_your_application/README.md new file mode 100644 index 00000000000..848c3ed2ad3 --- /dev/null +++ b/el/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Επεκτείνετε την εφαρμογή σας + +Έχουμε ήδη ολοκληρώσει όλα τα βήματα που είναι απαραίτητα για τη δημιουργία της ιστοσελίδας μας: γνωρίζουμε πώς να γράψουμε ένα μοντέλο, ένα url, ένα view και ένα template. Γνωρίζουμε επίσης πώς να κάνουμε το website μας όμορφο. + +Ώρα για εξάσκηση! + +Το πρώτο πράγμα που χρειαζόμαστε στο blog μας είναι, προφανώς, μια σελίδα για το εκάστοτε post (της οποίας η εμφάνιση θα είναι η ίδια για όλα post και το μόνο που θα αλλάζει θα είναι το περιεχόμενο), σωστά; + +Έχουμε ήδη ένα μοντέλο `Post`, έτσι δεν χρειάζεται να προσθέσετε τίποτα στο αρχείο `models.py`. + +## Δημιουργία ενός συνδέσμου template με τις λεπτομέρειες του post + +Θα ξεκινήσουμε με την προσθήκη ενός συνδέσμου στο αρχείο `blog/templates/blog/post_list.html`. Ανοίξτε το. Θα δείχνει κάπως έτσι: {% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}Θέλουμε να έχουμε έναν σύνδεσμο (link) για κάθε τίτλο του post μέσα στη λίστα ο οποίος όταν κλικάρετε να μεταβαίνει στη σελίδα λεπτομερειών του post. Ας αλλάξουμε το `

{{ post.title }}

` έτσι ώστε να συνδέεται με τη σελίδα λεπτομερειών του post:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Ώρα να εξηγήσουμε το μυστηριώδης `{% url 'post_detail' pk=post.pk %}`. Όπως υποψιάζεστε, το `{% %}` σημαίνει ότι χρησιμοποιούμε τα Django template tags. Αυτή τη φορά θα χρησιμοποιήσουμε ένα που δημιουργεί μια διεύθυνση URL για εμάς!{% endraw %} + +Το μέρος `post_detail` σημαίνει ότι θα πρέπει το Django θα περιμένει μια διεύθυνση URL με το όνομα αυτό στο αρχείο `blog/urls.py` με το όνομα=post_detail + +Τι γίνεται όμως με το `pk=post.pk`; Το `pk` είναι σύντμηση για τη λέξη primary key, το οποίο είναι ένα μοναδικό όνομα για κάθε εγγραφή σε μια βάση δεδομένων. Επειδή δεν ορίσαμε κάποιο primary key στο μοντέλο μας `Post`, το Django δημιουργεί ένα για μας (από προεπιλογή, ένας αριθμός που αυξάνεται κατά ένα για κάθε εγγραφή, δηλαδή 1, 2, 3) και το προσθέτει ως ένα πεδίο που ονομάζεται `pk` σε κάθε μία από τα post μας. Μπορούμε να έχουμε πρόσβαση σε κάθε primary key γράφοντας `post.pk`, με τον ίδιο τρόπο που έχουμε πρόσβαση σε άλλα πεδία (`title`, `author`, κ.λπ.) του `Post` object μας! + +Τώρα, όταν πάμε στη διεύθυνση http://127.0.0.1:8000 / θα εμφανιστεί σφάλμα (όπως ήταν αναμενόμενο, καθώς δεν έχουμε ακόμη διεύθυνση URL ή κάποιο *view* για το `post_detail`). Αυτό θα μοιάζει κάπως έτσι: + +![Σφάλμα NoReverseMatch](images/no_reverse_match2.png) + +## Δημιουργία ενός URL για τις λεπτομέρειες του post + +Ας δημιουργήσουμε μια διεύθυνση URL στο αρχείο `urls.py` για το `post_detail` *view* μας! + +Θέλουμε οι λεπτομέρειες του πρώτου μας post να εμφανίζονται σε αυτό το **URL**: http://127.0.0.1:8000/θέση/1 / + +Ας δημιουργήσουμε ένα URL μέσα στο αρχείο `blog/urls.py` που θα κατευθύνει το Django στο *view* με το όνομα `post_detail`, που με τη σειρά του θα δείξει ένα ολόκληρο blog post. Ανοίξτε το αρχείο `blog/urls.py` και προσθέστε τη γραμμή `path('post//', views.post_detail, name='post_detail'),` έτσι ώστε το αρχείο να μοιάζει κάπως έτσι: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Το μέρος `post//` καθορίζει ένα URL μοτίβο. Θα σας το εξηγήσουμε: + +- Το μέρος `post/` σημαίνει ότι το URL θα πρέπει να ξεκινά με τη λέξη **post** ακολουθούμενο από μια κάθετο **/**. Μέχρι τώρα όλα καλά. +- `` – Αυτό το μέρος είναι πιο δύσκολο. Σημαίνει ότι το Django περιμένει έναν ακέραιο όπου με την σειρά του θα το μεταφέρει ως παράμετρο με το όνομα `pk` στο αντίστοιχο view. +- `/` – έπειτα χρειαζόματε άλλη μια κάθετο **/** πριν να κλείσει το URL. + +Αυτό σημαίνει ότι αν μεταβείτε στο `http://127.0.0.1:8000/post/5/` στον browser σας, το Django θα καταλάβει ότι ψάχνετε το *view* με το όνομα `post_detail` και θα μεταφέρει την πληροφορία του `pk` που ισούται με το `5` σε αυτό το *view*. + +Ωραία. Προσθέσαμε ένα νέο URL μοτίβο στο αρχείο `blog/urls.py`! Ας ανανεώσουμε τη σελίδα: http://127.0.0.1:8000/ Μπαμ! Ο server σταμάτησε να τρέχει ξανά. Ρίξτε μια ματιά στην κονσόλα. Όπως ήταν αναμενόμενο, υπάρχει ακόμα ένα σφάλμα! + +![AttributeError](images/attribute_error2.png) + +Θυμάστε το επόμενο βήμα; Προσθήκη ενός view! + +## Προσθήκη ενός view για τις λεπτομέρειες του post + +Αυτή τη φορά το *view* δέχεται μια έξτρα παράμετρο, το `pk`. Το *view* μας χρειάζεται με κάποιο τρόπο να αιχμαλωτίσει αυτή την παράμετρο, σωστά; Έτσι, λοιπόν, θα ορίσουμε την συνάρτηση μας ως `def post_detail(request, pk):`. Σημειώστε ότι χρειάζεται να ορίσουμε την παράμετρο με το ίδιο ακριβώς όνομα που δώσαμε στο URL μέσα στο αρχείο urls (`pk`). Η απουσία της παραμέτρου είναι λάθος και θα παρουσιάσει σφάλμα! + +Τώρα, θέλουμε να πάρουμε ένα και μόνο ένα post. Για να το κάνουμε αυτό, μπορούμε να χρησιμοποιήσουμε τα querysets, όπως παρακάτω: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Αλλά αυτός ο κώδικας έχει πρόβλημα. Αν δεν υπάρχει κάποιο `Post` με το δεδομένο `primary key` (`pk`) θα έχουμε ένα άσχημο σφάλμα! + +![Σφάλμα DoesNotExist](images/does_not_exist2.png) + +Δεν το θέλουμε αυτό! Αλλά ευτυχώς το Django περιλαμβάνει με κάτι που θα μας φανεί χρήσιμο: `get_object_or_404`. Σε αυτή την περίπτωση δεν υπάρχει κάποιο `Post` με αυτό το `pk`, θα εμφανίσει μια πολύ πιο όμορφη σελίδα, την σελίδα `Page Not Found 404`. + +![Page not found](images/404_2.png) + +Τα καλά νέα είναι ότι μπορείτε να δημιουργήσετε τη δική σας σελίδα `Page not found` και να την κάνετε όσο όμορφη θέλετε. Αλλά δεν είναι εξαιρετικά σημαντικό αυτή τη στιγμή, οπότε θα το παραλείψουμε τώρα. + +Ωραία, ώρα να προσθέσουμε ένα *view* στο αρχείο `views.py`! + +Στο αρχείο `blog/urls.py` δημιουργήσαμε ένα URL με το όνομα `post_detail`, που αναφέρεται σε ένα view με το όνομα `views.post_detail`. Αυτό σημαίνει ότι το Django θα περιμένει να υπάρχει μια συνάρτηση με το όνομα `post_detail` μέσα στο αρχείο `blog/views.py`. + +Ανοίξτε το αρχείο`blog/views.py` και προσθέστε τις ακόλουθες γραμμές μαζί με τις γραμμές `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Και στο τέλος του αρχείου θα προσθέσουμε το *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}) +``` + +Ναι. Ήρθε η ώρα να ανανεώσουμε τη σελίδα: http://127.0.0.1:8000/ + +![view για την λίστα των post](images/post_list2.png) + +Δούλεψε! Αλλά τι συμβαίνει όταν κλικάρετε στον σύνδεσμο σε κάποιον τίτλο ενός post; + +![Σφάλμα TemplateDoesNotExist](images/template_does_not_exist2.png) + +Ω όχι! Άλλο ένα άλλο σφάλμα! Αλλά ήδη γνωρίζουμε πώς να το αντιμετωπίσουμε, έτσι; Πρέπει να προσθέσουμε ένα template! + +## Δημιουργία template για τις λεπτομέρειες του post + +Θα δημιουργήσoυμε ένα αρχείο μέσα στο φάκελο `blog/πρότυπα/blog` με το όνομα `post_detail.html`. Ανοίξτε το. + +Θα μοιάζει κάπως έτσι: + +{% 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 %} +``` + +Για μια ακόμη φορά θα επεκτείνουμε το template `base.html`. Στο block`content` θέλουμε να εμφανίσουμε την ημ/νια έκδοσης του post (αν υπάρχει) τον τίτλο και το κυρίως κείμενο. Αλλά θα πρέπει να συζητήσουμε ορισμένα σημαντικά πράγματα, έτσι; + +{% raw %}`{% if ... %} ... {% endif %}` είναι ένα template tag που μας επιτρέπει να ελέγξουμε κάτι - με άλλα λόγια είναι μια συνθήκη. (Θυμάστε το `if ... else ..` από το κεφάλαιο **Εισαγωγή στην Python**?) Σε αυτό το σενάριο θέλουμε να δούμε αν το πεδίο `published_date` του post έχει κάποια τιμή.{% endraw %} + +Ωραία, μπορούμε να ανανεώσουμε τη σελίδα και να δούμε, για αρχή, αν το σφάλμα `TemplateDoesNotExist` έχει φύγει. + +![Σελίδα λεπτομέρειας του post](images/post_detail2.png) + +Ναι! Έφυγε! + +# Ώρα για deploy! + +Θα ήταν καλό να δούμε εάν η σελίδα σας εξακολουθεί να λειτουργεί στο PythonAnywhere, σωστά; Ας δοκιμάσουμε να το κάνουμε deploy ξανά. + +{% 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 + + +Έπειτα, στην [κονσόλα Bash του PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Θυμηθείτε να αντικαταστήσετε με το ``πραγματικό όνομα χρήστη σας του PythonAnywhere χωρίς τα <>). + +## Ενημέρωση των στατικών αρχείων στο διακομιστή + +Οι διακομιστές όπως το PythonAnywhere τους αρέσει να διαχειρίζονται τα «στατικά αρχεία» (όπως τα αρχεία CSS) διαφορετικά από τα αρχεία της Python επειδή μπορεί να βελτιστοποιηθούν ούτως ώστε να φορτώνονται πιο γρήγορα. Ως αποτέλεσμα, κάθε φορά που μπορούμε να κάνουμε αλλαγές στα αρχεία CSS, θα πρέπει να εκτελούμε μια πρόσθετη εντολή στο διακομιστή η οποία του λέει να τα ενημερώσει. Η εντολή ονομάζεται `collectstatic`. + +Ξεκινήστε με το να ενεργοποιήσετε το virtualenv σας, αν δεν είναι ήδη ενεργό (το PythonAnywhere χρησιμοποιεί μια εντολή που ονομάζεται `workon` για να γίνει αυτό, είναι ακριβώς σαν την εντολή `source myenv/bin/activate` που χρησιμοποιείτε στον υπολογιστή σας): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +Η εντολή `manage.py collectstatic` είναι λίγο σαν την `manage.py migrate`. Κάνουμε κάποιες αλλαγές στον κώδικα και στη συνέχεια λέμε στο Django να *εφαρμόσει* αυτές τις αλλαγές είτε στον αντίστοιχο φάκελο στατικών αρχείων του server είτε στη βάση δεδομένων. + +Σε κάθε περίπτωση, είμαστε τώρα έτοιμοι να κλικάρουμε ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (από το κουμπί του μενού στην επάνω δεξιά μεριά της κονσόλας) και κλικάρουμε στο **Reload**. Δείτε τη σελίδα https://yourname.pythonanywhere.com με το αποτέλεσμα. + +Αυτό ήταν! Συγχαρητήρια :) \ No newline at end of file diff --git a/el/extend_your_application/images/404_2.png b/el/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/el/extend_your_application/images/404_2.png differ diff --git a/el/extend_your_application/images/attribute_error2.png b/el/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/el/extend_your_application/images/attribute_error2.png differ diff --git a/el/extend_your_application/images/does_not_exist2.png b/el/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/el/extend_your_application/images/does_not_exist2.png differ diff --git a/el/extend_your_application/images/no_reverse_match2.png b/el/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/el/extend_your_application/images/no_reverse_match2.png differ diff --git a/el/extend_your_application/images/post_detail2.png b/el/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/el/extend_your_application/images/post_detail2.png differ diff --git a/el/extend_your_application/images/post_list2.png b/el/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/el/extend_your_application/images/post_list2.png differ diff --git a/el/extend_your_application/images/template_does_not_exist2.png b/el/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/el/extend_your_application/images/template_does_not_exist2.png differ diff --git a/el/how_the_internet_works/README.md b/el/how_the_internet_works/README.md new file mode 100644 index 00000000000..7a6fdb69806 --- /dev/null +++ b/el/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Πως λειτουργεί το internet + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Αυτό το κεφάλαιο είναι εμπνευσμένο από την ομιλία της Jessica McKellar με τίτλο "How the Internet works" (http://web.mit.edu/jesstess/www/). + +Στοιχηματίζουμε ότι δουλεύετε το Internet κάθε μέρα. Αλλά ξέρετε τι συμβαίνει όταν πληκτρολογείτε μια διεύθυνση όπως https://djangogirls.org στο browser σας και μετά πατήσετε `enter`; + +Το πρώτο πράγμα που πρέπει να καταλάβετε είναι ότι ένα website αποτελείτε από ένα σωρό από φακέλους αποθηκευμένους σε έναν σκληρό δίσκο. Όπως ακριβώς οι ταινίες, η μουσική και οι φωτογραφίες σας. Ωστόσο, υπάρχει ένα κομμάτι που είναι μοναδικό για τα websites: περιλαμβάνουν κώδικα υπολογιστή με το όνομα HTML. + +Αν δεν είστε εξοικειωμένοι με προγραμματισμό θα σας φανεί λίγο δύσκολη η HTML στην αρχή. Αλλά οι web browsers (όπως Chrome, Safari, Firefox, κλπ) την αγαπούν. Οι web browsers σχεδιάστηκαν για να κατανοούν αυτό τον κώδικα, να ακολουθούν τις εντολές του και να παρουσιάζουν αυτά τα αρχεία από τα οποία είναι φτιαγμένα το website σας με τον τρόπο που εσείς θέλετε. + +Όπως με κάθε αρχείο, χρειαζόμαστε να αποθηκεύουμε τα HTML αρχεία κάπου στον σκληρό δίσκο. Για το Internet, χρησιμοποιούμε ειδικούς υπολογιστές γι'αυτό, με το όνομα *servers*. Δεν έχουν οθόνη, ποντίκι ή πληκτρολόγιο επειδή ο μοναδικός σκοπός τους είναι να αποθηκεύουν δεδομένα και να τα εξυπηρετούν. Γι' αυτό το λόγο ονομάζονται *εξυπηρετητές*. Επειδή *εξυπηρετούν την μεταφορά* δεδομένων. + +ΟΚ, αλλά θέλετε να μάθετε πως φαίνεται το Internet, σωστά; + +Ζωγραφίσαμε μια εικόνα! Φαίνεται κάπως έτσι: + +![Σχήμα 1.1](images/internet_1.png) + +Λίγο χαοτική, έτσι; Στην πραγματικότητα είναι ένα δίκτυο συνδεδεμένων συσκευών (των προαναφερομένων *servers*). Εκατοντάδες χιλιάδες συσκευές! Πολλά πολλά χιλιόμετρα καλωδίων γύρω από ολόκληρο τον κόσμο! Μπορείτε να επισκεφτείτε την ιστοσελίδα του Submarine Cable Map (http://submarinecablemap.com) και να δείτε πόσο περίπλοκο είναι το δίκτυο. Παρακάτω φαίνεται ένα στιγμιότυπο από το website: + +![Σχήμα 1.2](images/internet_3.png) + +Φανταστικό, έτσι; Αλλά δεν είναι δυνατόν να έχουμε καλώδια ανάμεσα σε κάθε ζευγάρι συσκευών που είναι συνδεδμένο στο Internet. Οπότε, για να συνδεθούμε με μία συσκευή (για παράδειγμα, αυτή που είναι αποθηκευμένο το site https://djangogirls.org) θα χρειαστεί να περάσουμε ένα αίτημα (request) μέσα από πολλές πολλές διαφορετικές συσκευές. + +Δείχνει κάπως έτσι: + +![Σχήμα 1.3](images/internet_2.png) + +Φανταστείτε ότι όταν πληκτρολογείτε https://djangogirls.org, στέλνετε ένα γράμμα που λέει: "Αγαπητά Django Girls, θα ήθελα να δω την σελίδα djangogirls.org. Στείλτε τη μου, παρακαλώ!" + +Το γράμμα σας πηγαίνει στο πλησιέστερο ταχυδρομικό γραφείο. Μετά το γράμμα σας πηγαίνει σε άλλο γραφείο που είναι πιο κοντά στον παραλήπτη, μετά σε άλλον κοκ μέχρις ότου φτάσει στον προορισμό του. Το μόνο μοναδικό πράγμα είναι ότι αν στέλνετε πολλά γράμματα (*data packets*) στο ίδιο σημείο, τότε ίσως φτάσουν στον προορισμό τους μέσα από διαφορετικές διαδρομές και ταχυδρομικά γραφεία (*routers*). Αυτό εξαρτάται από το πως είναι ταξινομημένα σε κάθε γραφείο. + +![Σχήμα 1.4](images/internet_4.png) + +Έτσι λειτουργεί. Μπορείτε να στείλετε μηνύματα και να περιμένετε κάποια απάντηση. Αντί για χαρτί και στυλό χρησιμοποιείτε byte δεδομένων αλλά η ιδέα είναι η ίδια! + +Αντί για διευθύνσεις με όνομα οδού, πόλη, ταχυδρομικό κώδικα και χώρα, χρησιμοποιούμε διευθύνσεις IP. Ο υπολογιστής σας ρωτά πρώτα το DNS (Domain Name System) για να μεταφραστεί η λέξη djangogirls.org σε μια διεύθυνση IP. Λειτουργεί λίγο σαν τους παλιούς τηλεφωνικούς καταλόγους όπου μπορείτε να αναζητήσετε το όνομα του ατόμου που θέλετε να επικοινωνήσετε και να βρείτε τον αριθμό τηλεφώνου και τη διεύθυνση τους. + +Όταν στέλνετε ένα γράμμα, πρέπει να έχει ορισμένα χαρακτηριστικά πρέπει για να παραδοθεί σωστά: μια διεύθυνση, μια σφραγίδα, κλπ. Χρησιμοποιείτε επίσης μια γλώσσα που κατανοεί ο παραλήπτης, σωστά; Το ίδιο ισχύει για τα *data packets* που μπορείτε να στείλετε για να δείτε μια ιστοσελίδα. Χρησιμοποιούμε ένα πρωτόκολλο που ονομάζεται HTTP (Hypertext Transfer Protocol). + +Έτσι, βασικά, όταν έχετε μια ιστοσελίδα, θα πρέπει να έχετε έναν *server* (συσκευή). Όταν ο *server* λαμβάνει μια εισερχόμενη *αίτηση* (σε ένα γράμμα), στέλνει πίσω την ιστοσελίδα σας (σε άλλη επιστολή). + +Δεδομένου ότι αυτό είναι ένας Django οδηγός, μπορείτε να ρωτήσετε τι κάνει Django. Όταν στέλνετε μια απάντηση, δεν θέλετε να στέλνετε την ίδια σε όλους. Είναι πολύ καλύτερα αν τα γράμματα είναι εξατομικευμένα, ειδικά για το πρόσωπο που έχει γράψει αποκλειστικά για εσάς, σωστά; Το Django, σας βοηθά με τη δημιουργία αυτών των εξατομικευμένων, ενδιαφέροντων γραμμάτων. :) + +Αρκετά μιλήσαμε. Πάμε να δημιουργήσουμε! \ No newline at end of file diff --git a/el/how_the_internet_works/images/internet_1.png b/el/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/el/how_the_internet_works/images/internet_1.png differ diff --git a/el/how_the_internet_works/images/internet_2.png b/el/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/el/how_the_internet_works/images/internet_2.png differ diff --git a/el/how_the_internet_works/images/internet_3.png b/el/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/el/how_the_internet_works/images/internet_3.png differ diff --git a/el/how_the_internet_works/images/internet_4.png b/el/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/el/how_the_internet_works/images/internet_4.png differ diff --git a/el/html/README.md b/el/html/README.md new file mode 100644 index 00000000000..f5ccc02ba49 --- /dev/null +++ b/el/html/README.md @@ -0,0 +1,217 @@ +# Εισαγωγή στην HTML + +Ίσως αναρρωτιέστε, τι είναι ένα template; + +Ένα template είναι ένα αρχείο που μπορούμε να επαναχρησιμοποιούμε για να παρουσιάζουμε διαφορετικές πληροφορίες μέσα από μια συνεπή μορφή. Για παράδειγμα, θα μπορούσατε να χρησιμοποιήσετε ένα πρότυπο (template) για να σας βοηθήσει να γράψετε μια επιστολή, γιατί αν και κάθε επιστολή μπορεί να περιέχει διαφορετικό μήνυμα και να απευθύνεται σε ένα διαφορετικό πρόσωπο, μερικά σημεία θα μοιραστούν την ίδια μορφή. + +Η μορφή ενός Django template περιγράφεται με μια γλώσσα που ονομάζεται HTML (που είναι η HTML που αναφέραμε στο πρώτο κεφάλαιο, **Πώς λειτουργεί το Internet**). + +## Τι είναι η HTML; + +Η HTML είναι ένας κώδικας που ερμηνεύεται από τον web browser σας – όπως ο Chrome, Firefox ή Safari - για να εμφανιστεί μια ιστοσελίδα στον χρήστη. + +HTML σημαίνει "HyperText Markup Language". Η λέξη **HyperText** σημαίνει ότι είναι ένας τύπος κειμένου που υποστηρίζει υπερ-συνδέσεις μεταξύ των σελιδών. **Markup** σημαίνει ότι έχουμε λάβει ένα έγγραφο και το έχουμε επισημάνει με κώδικα ούτως ώστε να πει κάτι (στην προκειμένη περίπτωση, ένας browser) πώς να ερμηνεύσει τη σελίδα. Ο HTML κώδικας είναι χτισμένος με **tags**, όπου καθένα αρχίζει με `<` και τελειώνει με `>`. Αυτά τα tags αντιπροσωπεύουν τα markup **elements**. + +## Το πρώτο σας template! + +H δημιουργία ενός template σημαίνει τη δημιουργία ενός αρχείου template. Τα πάντα είναι ένα αρχείο, σωστά; Πιθανώς να το έχετε παρατηρήσει αυτό. + +Τα templates αποθηκεύονται στο φάκελο `blog/templates/blog`. Άρα, πρώτα δημιουργήστε έναν φάκελο με το όνομα `templates` μέσα στον φάκελο blog. Στη συνέχεια, δημιουργήστε έναν άλλο φάκελο που ονομάζεται `blog` μέσα στον φάκελο templates: + + blog + └───templates + └───blog + + +(Ίσως να αναρωτηθείτε γιατί χρειαζόμαστε δύο φακέλους που και οι δύο ονομάζονται `blog`. Όπως θα ανακαλύψετε αργότερα, αυτό είναι μια τεχνική ονομασίας που κάνει τη ζωή ευκολότερη όταν τα πράγματα αρχίζουν να περιπλέκονται.) + +Και τώρα δημιουργήστε ένα αρχείο `post_list.html` (απλά αφήστε το κενό για τώρα) μέσα στον φάκελο `blog/templates/blog`. + +Δείτε πώς εμφανίζεται η ιστοσελίδα σας στο: http://127.0.0.1:8000 / + +> Αν παρουσιάζεται ακόμα το σφάλμα `TemplateDoesNotExist`, δοκιμάστε να επανεκκινήσετε τον server σας. Προσπαθήστε να τον σταματήσετε (πιέζοντας Ctrl + C) και επανεκκινήστε τον τρέχοντας την εντολή `python manage.py runserver`. + +![Σχήμα 11.1](images/step1.png) + +Δεν υπάρχει σφάλμα πια! Συγχαρητήρια :) Ωστόσο, ιστοσελίδα σας δεν δείχνει κάτι παρά μια κενή σελίδα επειδή το template σας είναι κενό. Πρέπει να το διορθώσουμε αυτό. + +Ανοίξτε το νέο αρχείο και προσθέστε τα εξής: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Hi there!

+

It works!

+ + +``` + +Οπότε πως φαίνεται τώρα η ιστοσελίδα μας; Επισκεφθείτε το για να μάθετε: http://127.0.0.1:8000/ + +![Σχήμα 11.2](images/step3.png) + +Λειτουργεί! Καλή δουλειά :) + +* Το πιο βασικό tag, ``, είναι πάντα η αρχή οποιασδήποτε ιστοσελίδας και `` είναι πάντα στο τέλος. Όπως μπορείτε να δείτε, όλο το περιεχόμενο της σελίδας ενσωματώνεται μεταξύ της αρχής του tag `` και του tag κλεισίματος `` +* `

`είναι ένα tag για στοιχεία κειμένου παραγράφου. Το tag `

` κλείνει κάθε παράγραφο + +## Head και body + +Κάθε σελίδα HTML χωρίζεται σε δύο στοιχεία: το **head** και το **body**. + +* To **head** είναι ένα στοιχείο (element) που περιέχει πληροφορίες σχετικά με το έγγραφο αλλά αυτές οι πληροφορίες δεν εμφανίζονται στην οθόνη. + +* Το **body** είναι ένα στοιχείο που περιέχει όλα τα υπόλοιπα που εμφανίζονται ως μέρος της ιστοσελίδας. + +Χρησιμοποιούμε το tag ``για να πούμε στον browser σχετικά με τη διαμόρφωση της σελίδας και το tag `` για να πούμε για το περιεχόμενο της. + +Για παράδειγμα, μπορείτε να προσθέσετε τίτλο στην ιστοσελίδα σας μέσα από το tag ``, όπως παρακάτω: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Αποθηκεύστε το αρχείο και ανανέωστε την σελίδα σας. + +![Σχήμα 11.3](images/step4.png) + +Παρατηρήσατε πως ο browser κατάλαβε το "Ola's blog" ως τίτλο για την σελίδα σας; Ερμήνευσε το κείμενο `Ola's blog` και το τοποθέτησε στην μπάρα τίτλων του browser σας (το ίδιο κείμενο θα λειτουργήσει και ως όνομα σελιδοδείκτη κλπ). + +Πιθανώς να έχετε παρατηρήσει ότι κάθε tag αντιστοιχίζεται με ένα *tag κλεισίματος*, με μια κάθετο `/` και ότι τα στοιχεία είναι *ένθετα* (δηλαδή δεν μπορείτε να κλείσετε μια συγκεκριμένη ετικέτα μέχρι να έχουν κλείσει όλα αυτά που ήταν μέσα σε αυτό). + +Είναι σαν να βάζουμε πράγματα μέσα σε κουτιά. Έχετε ένα μεγάλο κουτί, ``. Στο εσωτερικό του υπάρχει το `` το οποίο με τη σειρά του περιέχει ακόμα μικρότερα κουτιά: `

`. + +Θα πρέπει να ακολουθείτε αυτούς τους κανόνες *κλεισίματος ετικέτας* και *"φωλιάσματος"* των elements. Αν δεν το κάνετε, ο browser ενδέχεται να μην μπορεί να τα ερμηνεύσει ορθά και η σελίδα να μην εμφανίζεται σωστά. + +## Παραμετροποιώντας το template + +Μπορείτε, τώρα, να διασκεδάσετε λιγάκι και να τροποιήσετε το template σας! Παρακάτω παρουσιάζονται μερικά χρήσιμα tags γι'αυτό: + +* `

A heading

` για επικεφαλίδες +* `

A sub-heading

` για επικεφαλίδες χαμηλότερου επιπέδου +* `

A sub-sub-heading

` …κοκ μέχρι την `
` +* `

Μια παράγραφος κειμένου

` +* `text` δίνει έμφαση στο κείμενο σας +* `text` κάνει τα γράμματα πιο έντονα +* `
` αλλάζει γραμμή (δεν μπορείτε να βάλετε τίποτα ανάμεσα και δεν υπάρχει αντίστοιχο tag που να το κλείνει) +* `link` δημιουργεί έναν σύνδεσμο +* `
  • first item
  • second item
` δημιουργεί μια λίστα, όπως αυτή εδώ που διαβάζετε τώρα! +* `
` ορίζει ένα τμήμα στη σελίδα + +Παρακάτω φαίνεται ένα πλήρες παράδειγμα ενός template. Αντιγράψτε-επικολλήστε το μέσα στο αρχείο `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Δημιουργήσαμε τρία `div` εδώ. + +* Το πρώτο `div` περιέχει τον τίτλο του blog μας – είναι μια επικεφαλίδα και ένας σύνδεσμος +* Τα υπόλοιπα δύο `div` περιέχουν τα posts μας με ημ/νια δημοσίευσης, το `h2` με τον τίτλο του post ο οποίος μπορεί να κλικαριστεί και επίσης δύο `p`s (παραγράφους) κείμενα, ένα για την ημ/νια και το άλλο για το κυρίως κείμενο. + +Δίνει αυτή την αίσθηση: + +![Σχήμα 11.4](images/step6.png) + +Ναιιι! Αλλά μέχρι στιγμής, το template μας εμφανίζει **τις ίδιες πληροφορίες** – ενώ προηγουμένως μιλούσαμε για templates που μας επέτρεπαν να εμφανίσουμε **διαφορετικές/δυναμικές** πληροφορίες με την **ίδια μορφή**. + +Αυτό που θέλουμε να κάνουμε είναι να εμφανίσουμε πραγματικά posts τα οποία θα τα προσθέτουμε μέσω του Django admin. Και αυτό ακριβώς θα κάνουμε μετά. + +## Ένα πράγμα ακόμα: ώρα να το ανεβάσετε! + +Θα ήταν καλό να το δούμε όλο αυτό στο internet, σωστά; Ας κάνουμε άλλο ένα deploy στο PythonAnywhere: + +### Κάντε commit και έπειτα push τον κώδικα σας στο GitHub + +Πρώτ'απ'όλα ας δούμε ποια αρχεία έχουν αλλάξει από την τελευταία φορά που κάναμε deploy (τρέξτε αυτές τις εντολές τοπικά, όχι στο PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Σιγουρευτείτε ότι βρίσκεστε μέσα στο φάκελο `djangogirls` και ας πούμε στο `git` να συμπεριλάβει όλες τις αλλαγές μέσα σε αυτό το φάκελο: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + + +> **Σημείωση** `--all` σημαίνει ότι το `git` θα αναγνωρίσει, επίσης, και τυχόν διεγραμμένα αρχεία/φακέλους (από προεπιλογή, αναγνωρίζει μόνο νέα/τροποποιημένα αρχεία). Επίσης, θυμηθείτε (από το κεφάλαιο 3) ότι η τελεία `.` σημαίνει ο τρέχων φάκελος. + +Πριν ανεβάσουμε όλα τα αρχεία, ας δούμε τι επρόκειτο να ανεβάσει το `git` (όλα τα αρχεία που επρόκειτο να ανεβούν από το `git` θα εμφανίζονται με πράσινο χρώμα): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Σχεδόν φτάσαμε. Τώρα είναι η ώρα να του πούμε να αποθηκεύσει αυτή την αλλαγή στο ιστορικό του. Θα του δώσουμε ένα "commit message" όπου θα περιγράψουμε τι άλλαξε. Μπορείτε να γράψετε ότι θέλετε σε αυτό το σημείο αλλά είναι χρήσιμο να γράψετε κάτι περιγραφικό ούτως ώστε να το θυμάστε στο μέλλον. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Changed the HTML for the site." + + +> **Σημείωση** Σιγουρευτείτε ότι χρησιμοποιείτε διπλά "αυτάκια" γύρω από το commit message. + +Μόλις τελειώσουμε με αυτό, θα ανεβάσουμε (push) τις αλλαγές μας στο GitHub: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Κάντε pull τον νέο σας κώδικα στο PythonAnywhere και ανανεώστε την εφαρμογή + +* Έπειτα συνδεθείτε στο [PythonAnywhere](https://www.pythonanywhere.com/consoles/), μεταβείτε στο **Bash console** (ή ανοίξτε ένα νέο) και τρέξτε: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Θυμηθείτε να αντικαταστήσετε με το ``πραγματικό όνομα χρήστη σας του PythonAnywhere χωρίς τα <>). + +Και δείτε τον κώδικα σας να κατεβαίνει. Αν θέλετε να δείτε ότι ολοκληρώθηκε, μεταβείτε στη σελίδα **"Files" page** και δείτε τον κώδικα σας στο PythonAnywhere (μπορείτε να ανοίξετε και άλλες σελίδες του PythonAnywhere από το κουμπί του μενού στην σελίδα της κονσόλας). + +* Τέλος, πηγαίνετε στο ["Web" page](https://www.pythonanywhere.com/web_app_setup/) και κλικάρετε **Reload** στην εφαρμογή σας. + +Οι αλλαγές θα πρέπει να είναι ορατές τώρα! Πηγαίνετε και ανανεώστε τη σελίδα στον browser σας. :) \ No newline at end of file diff --git a/el/html/images/step1.png b/el/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/el/html/images/step1.png differ diff --git a/el/html/images/step3.png b/el/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/el/html/images/step3.png differ diff --git a/el/html/images/step4.png b/el/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/el/html/images/step4.png differ diff --git a/el/html/images/step6.png b/el/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/el/html/images/step6.png differ diff --git a/el/images/application.png b/el/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/el/images/application.png differ diff --git a/el/installation/README.md b/el/installation/README.md new file mode 100644 index 00000000000..17799c07b44 --- /dev/null +++ b/el/installation/README.md @@ -0,0 +1,64 @@ +# Για σένα που κάνεις το tutorial από το σπίτι + +Αν κάνεις το tutorial στο σπίτι και όχι στο πλαίσιο ενός από τα [Django Girls events](https://djangogirls.org/events/), μπορείς να αγνοήσεις εντελώς αυτό το κεφάλαιο και να πας κατευθείαν στο κεφάλαιο [Πώς δουλεύει το internet](../how_the_internet_works/README.md). + +Αυτό οφείλεται στο γεγονός ότι καλύπτουμε γνωστικά ένα αντικείμενο καθώς το συναντάμε και όχι όλα μαζεμένα. Αυτή είναι μια σελίδα που συγκεντρώνει όλες τις οδηγίες εγκατάστασης σε ένα μέρος (το οποίο είναι χρήσιμο για ορισμένες μορφές των εργαστηρίων). Μπορείτε να διαλέξετε να τα εγκαταστήσετε όλα όσα είναι σε αυτή τη σελίδα αν θέλετε. Αλλά αν θέλετε να μαθαίνετε πράγματα καθώς εγκαθιστάτε πράγματα στον υπολογιστή σας, αγνοήστε αυτό το κεφάλαιο και θα εξηγήσουμε τη διαδικασία εγκατάστασης διαφόρων εργαλείων καθώς τα συναντάμε μπροστά μας. + +Καλή τύχη! + +# Αν παρακαλουθείτε ένα εργαστήριο + +Εάν παρακολουθείτε ένα από τα [Django Girls events](https://djangogirls.org/events/): + +* Το εργαστήριο μπορεί να έχει μια "ομάδα εγκατάστασης" πριν το κυρίως εργαστήριο. Αν ανήκετε στην ομάδα εγκατάστασης, τότε αυτή η σελίδα είναι για εσάς! Ακολουθήστε τις οδηγίες εδώ, για να έχετε όλα όσα χρειάζεστε για το εργαστήριο εγκατεστημένα, με τη βοήθεια των βοηθών αν χρειαστεί. Στη συνέχεια, στο κυρίως εργαστήριο, θα είστε σε θέση να παρακάμψετε τις οδηγίες εγκατάστασης που θα συναντήσετε στον οδηγό. +* Μπορεί να σας έχουν ζητήσει οι διοργανωτές του εργαστηρίου να δοκιμάσετε στο σπίτι να εγκαταστήσετε τα πάντα στον υπολογιστή σας, πριν ξεκινήσει το εργαστήρι. Εάν σας έχει ζητηθεί να το κάνετε αυτό, η σελίδα αυτή είναι για εσάς! Ακολουθήστε τις οδηγίες εδώ, όσο καλύτερα μπορείτε. Στη συνέχεια, στο κυρίως εργαστήριο, όταν φτάνετε σε ένα βήμα εγκατάσταση στον οδηγό, αν δεν έχει συμπεριληφθεί από εμάς μπορείτε να λάβετε βοήθεια από το λεωφορείο. +* Αν το εργαστήριο σας δεν έχει ομάδα εγκατάστασης (ή δεν μπορούσατε να παρευρεθείτε) και οι διοργανωτές δεν σας ζήτησαν να εγκαταστήσετε όσα χρειάζεται πριν φτάσετε, αγνοήστε αυτή τη σελίδα και πηγαίνετε στον κεφάλαιο [Πως δουλεύει το internet](../how_the_internet_works/README.md). Θα εγκαθιστάτε οτιδήποτε χρειάζεται καθώς το συναντάτε στον οδηγό. + +# Εγκατάσταση + +Σε αυτό τον οδηγό θα φτιάξουμε ένα blog. Για να το κάνουμε αυτό, καθώς προχωράμε θα σας ζητηθεί να εγκαταστήσετε διάφορα προγράμματα στον υπολογιστή σας και να δημιουργήσετε μερικούς λογαριασμούς. Αυτή η σελίδα συγκεντρώνει όλες τις εγκαταστάσεις και τις δημιουργίες λογαριασμών σε ένα μέρος (το οποίο είναι χρήσιμο για μερικούς τύπους εργαστηρίων). + + {% include "/chromebook_setup/instructions.md" %} + + + +# Εγκατάσταση Python + +{% include "/python_installation/instructions.md" %} + +# Εγκατάσταση επεξεργαστή κώδικα + +{% include "/code_editor/instructions.md" %} + +# Εγκατάσταση virtualenv και Django + +{% include "/django_installation/instructions.md" %} + +# Εγκατάσταση Git + +{% include "/deploy/install_git.md" %} + +# Δημιουργία GitHub λογαριασμού + +Πηγαίνετε στο [GitHub.com](https://www.github.com) και φτιάξτε έναν δωρεάν λογαριασμό. Σιγουρευτείτε ότι θα θυμάστε τον κωδικό πρόσβασης (προσθέστε τον σε κάποιον password manager, αν χρησιμοποιείτε κάποιον). + +# Δημιουργία λογαριασμού στο PythonAnywhere + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Αρχίστε να διαβάζετε + +Συγχαρητήρια, όλα έχουν ρυθμιστεί σωστά και είστε πανέτοιμοι! Αν έχετε ακόμα χρόνο πριν το workshop, ίσως να σας βοηθούσε να ξεκινήσετε να διαβάζετε μερικά από τα εισαγωγικά κεφάλαια: + +* [Πως λειτουργεί το internet](../how_the_internet_works/README.md) + +* [Εισαγωγή στην γραμμή εντολών](../intro_to_command_line/README.md) + +* [Εισαγωγή στην Python](../python_introduction/README.md) + +* [Τι είναι το Django;](../django/README.md) + +# Καλά να περάσετε στο workshop! + +Όταν ξεκινήσει το workshop, μπορείτε να πατε αμέσως στο [Το πρώτο σας Django project!](../django_start_project/README.md), αφού έχετε ήδη καλύψει το υλικό των ενδιάμεσων ενοτήτων στα προηγούμενα κεφάλαια. \ No newline at end of file diff --git a/el/intro_to_command_line/README.md b/el/intro_to_command_line/README.md new file mode 100644 index 00000000000..543b5ecbd7d --- /dev/null +++ b/el/intro_to_command_line/README.md @@ -0,0 +1,448 @@ +# Εισαγωγή στην γραμμή εντολών + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [Your new friend: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +Είναι φοβερό έτσι; Θα γράψετε την πρώτη γραμμή κώδικα σε μερικά λεπτά! :) + +**Αφήστε μας να σας παρουσιάσουμε το νέο σας φίλο πρώτα: τη γραμμή εντολών!** + +Τα επόμενα βήματα θα σας δείξουν πώς να χρησιμοποιήσετε το μαύρο παράθυρο που όλοι οι χάκερ χρησιμοποιούν. Αυτό μπορεί να μοιάζει λίγο τρομακτικό στην αρχή αλλά πραγματικά αυτό είναι απλά ένα prompt σε αναμονή για εντολές από εσάς. + +> **Σημείωση** Παρακαλούμε να σημειώσετε ότι σε όλο το βιβλίο αυτό χρησιμοποιούμε το τους όρους «φάκελος» και «κατάλογος» αλλά στην ουσία είναι το ίδιο πράγμα. + +## Τι είναι η γραμμή εντολών; + +Το παράθυρο, το οποίο συνήθως ονομάζεται **γραμμή εντολών** ή **περιβάλλον γραμμής εντολών**, είναι μια εφαρμογή που βασίζεται σε κείμενο για προβολή, διαχείριση και χειρισμό αρχείων στον υπολογιστή σας. Είναι κάπως σαν το Windows Explorer ή το Finder στα Mac αλλά χωρίς το γραφικό κομμάτι (κουμπιά, βελάκια, σχήματα κλπ). Άλλα ονόματα για την γραμμή εντολών είναι: *cmd*, *CLI*, *prompt*, *console* ή *terminal*. + +## Άνοιγμα της γραμμής εντολών + +Για να πειραματιστείτε πρέπει πρώτα να ανοίξετε μια γραμμή εντολών (ή κονσόλα, πιο σύντομα). + + + +Πηγαίνετε στο Start menu → Windows System → Command Prompt. + +> Σε παλαιότερες εκδόσεις των Windows, κοιτάχτε στο Start menu → All Programs → Accessories → Command Prompt. + + + + + +Πηγαίνετε στο Launchpad → Other → Terminal. + + + + + +Συνήθως είναι κάτω από το Applications → Accessories → Terminal, αλλά αυτό εξαρτάται από το σύστημα σας. Αν δεν είναι εκεί ψάξτε το στο Google. :) + + + +## Prompt + +Θα πρέπει, τώρα, να βλέπετε ένα άσπρο ή μαύρο παράθυρο που αναμένει εντολές από εσάς. + + + +Αν είστε σε Mac ή Linux, θα βλέπετε το `$`, όπως αυτό: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +Στα Windows, θα βλέπετε το `>`, όπως: + +{% filename %}command-line{% endfilename %} + + > + + +Ρίξτε μια ματιά τώρα στο τμήμα του Linux από πάνω. Θα δείτε κάτι παρόμοιο με αυτό του PythonAnywhere αργότερα στον οδηγό. + + + +Πριν από κάθε εντολή θα προηγείται ο χαρακτήρας `$` ή `>` και ένα κενό αλλά εσείς δεν πρέπει να τα γράφετε. Ο υπολογιστής σας θα το κάνει για εσάς. :) + +> Μια μικρή σημείωση: στην περίπτωση σας μπορεί να δείτε κάτι σαν `C:\Users\ola>` ή `Olas-MacBook-Air:~ ola$` πριν το σύμβολο του prompt. Αυτό είναι 100% OK. + +Το σημείο μέχρι το (και συμπεριλαμβανομένου) `$` ή το `>` ονομάζεται *command line prompt*, ή σκέτο *prompt* εν συντομία. Σας προτρέπει να εισάγεται κάτι εκεί. + +Στον οδηγό, όταν θέλουμε εσείς να γράψετε μια εντολή, θα συμπεριλαμβάνουμε και το `$` ή `>` και, κατά περίπτωση, περισσότερα πιο αριστερά. Αγνοήστε, λοιπόν, το αριστερό κομμάτι και πληκτρολογείτε μόνο την εντολή ως έχει η οποία θα ξεκινά μετά το prompt. + +## Η πρώτη σας εντολή (ΝΑΙ!) + +Ας ξεκινήσουμε με αυτή την εντολή: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +Και μετά πατήστε `enter`. Αυτό είναι το αποτέλεσμα: + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Όπως μπορείτε να δείτε, ο υπολογιστής μόλις εκτύπωσε το όνομα χρήστη σας. Ωραίο, εε; :) + +> Προσπαθείτε να γράφετε ξάθε εντολή. Μην κάνετε αντιγραγή-επικόλληση. Θα θυμάστε περισσότερα με αυτό τον τρόπο! + +## Βασικά + +Κάθε υπολογιστικό σύστημα ένα διαφορετικό ρεπερτόριο εντολών στη γραμμή εντολών. Οπότε, φροντίστε να ακολουθάτε τις οδηγίες του δικού σας λειτουργικού συστήματος. Ας το δοκιμάσουμε, έτσι; + +### Παρόν φάκελος + +Θα ήταν ωραίο να γνωρίζουμε πού βρισκόμαστε τώρα, έτσι; Ας δούμε. Πληκτρολογήσετε αυτή την εντολή πατήστε `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Σημείωση: 'pwd' σημαίνει 'print working directory'. + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Σημείωση: 'cd' σημαίνει 'change directory'. Με το PowerShell μπορείτε να χρησιμοποιήσετε την εντολή pwd όπως στο Linux ή το macOS. + + + +Κατά πάσα πιθανότητα θα δείτε κάτι παρόμοιο στο μηχάνημά σας. Μόλις ανοίγετε τη γραμμή εντολών, θα ξεκινάτε στον φάκελο του χρήστη (home folder). + +* * * + +### Μάθετε περισσότερα σχετικά με μια εντολή + +Πολλές εντολές που πληκτρολογείτε στη γραμμή εντολών έχουν ενσωματωμένη βοήθεια που μπορείτε να εμφανίσετε και να διαβάσετε! Για παράδειγμα, για να μάθετε περισσότερα σχετικά με τον τρέχων φάκελο: + + + +Τα λειτουργικά συστήματα macOS και Linux έχουν μια εντολή `man`, η οποία δίνει βοήθεια στις εντολές. Δοκιμάστε `man pwd` και δείτε τι λέει ή βάλτε την εντολή `man` πριν από άλλες εντολές για να δείτε τη βοήθειά τους. Η έξοδος της εντολής `man` παρουσιάζεται, συνήθως, ως σελιδοποιημένη (paged). Χρησιμοποιήστε το κουμπί του διαστήματος για να κινηθείτε προς την επόμενη σελίδα και το πλήκτρο `q` για να βγείτε από την "σελιδοποιημένη" βοήθεια, πίσω στην γραμμή εντολών. + + + + + +Προσθέτοντας το πρόθεμα `/?` στις περισσότερες εντολές θα εκτυπώσετε τη σελίδα βοήθειας. Ίσως να χρειαστεί να κάνετε scroll στο παράθυρο σας για να δείτε όλα. Δοκιμάστε `cd /;`. + + + +### Προβολή αρχείων και φακέλων + +Τι είναι, λοιπόν, μέσα; Θα ήταν ωραίο να μάθουμε. Ας δούμε: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > 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 + ... + + +> Σημείωση: Σε PowerShell μπορείτε επίσης να χρησιμοποιήσετε το 'ls' όπως στο Linux και στο macOS. + +* * * + +### Αλλαγή του τρέχοντος φακέλου + +Τώρα, ας μεταβούμε στον φάκελο επιφάνεια εργασίας: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Δείτε αν όντως άλλαξε: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Εδώ είναι! + +> PRO tip: Εάν πληκτρολογήσετε `cd D` και στη συνέχεια πατήσετε το πλήκτρο `tab`, τότε η γραμμή εντολών θα συμπληρώσει αυτόματα το υπόλοιπο όνομα του. Έτσι μπορείτε να πλοηγηθείτε ταχύτερα. Εάν υπάρχουν περισσότεροι από ένας φάκελος που ξεκινάει με το «D», πατήστε το πλήκτρο `tab` δύο φορές για να εμφανιστεί μια λίστα επιλογών. + +* * * + +### Δημιουργία φακέλου + +Τι θα λέγατε να δημιουργούσαμε έναν φάκελο για σκοπούς εξάσκησης στην επιφάνεια εργασίας; Μπορείτε να το κάνετε κατ' αυτό τον τρόπο: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Αυτή η μικρή εντολή θα δημιουργήσει ένα φάκελο με το όνομα `practice` στην επιφάνεια εργασίας. Μπορείτε να ελέγξετε αν είναι εκεί εξετάζοντας την επιφάνεια εργασίας σας ή εκτελώντας την εντολή `ls` ή `dir`! Δοκιμάστε το. :) + +> PRO tip: Αν δεν θέλετε να γράφετε την ίδια εντολή ξανά και ξανά, πιέστε το `πάνω βελάκι` ή/και το `κάτω βελάκι` στο πληκτρολόγιο σας για να περιηγηθείτε στο ιστορικό των εντολών σας. + +* * * + +### Εξασκηθείτε! + +Μια μικρή πρόκληση για εσάς: στον καινούργιο σας φάκελο με το όνομα `practice`, δημιουργήστε έναν φάκελο με το όνομα `test`. (Χρησιμοποιήστε τις εντολές `cd` και `mkdir`.) + +#### Λύση: + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + + + + +Συγχαρητήρια! :) + +* * * + +### Διαγραφή + +Δεν θέλουμε να αφήσουμε πίσω μας άχρηστα αρχεία/φακέλους. Ας διαγράψουμε ότι έχουμε δημιουργήσει μέχρι τώρα. + +Πρώτα, πρέπει να πάμε πίσω στην Επιφάνεια Εργασίας: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Χρησιμοποιώντας τις δύο τελίτσες `..` παρέα με την εντολή `cd` αλλάζετε την θέση σας από τον παρόν φάκελο σε 1 επίπεδο πιο ψηλά (δηλαδή στον φάκελο που περιέχει τον τρέχων φάκελο). + +Δείτε που είστε: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Ώρα να διαγράψουμε τον φάκελο `practice`: + +> **Προσοχή**: Η διαγραφή των αρχείων χρησιμοποιώντας τις εντολές `del`, `rmdir` ή `rm` είναι μη αναστρέψιμες, δηλαδή *τα διεγραμμένα αρχεία δεν μπορούν να επανακτηθούν*! Οπότε να είστε προσεκτικοί με αυτή την εντολή. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Έγινε! Για να βεβαιωθείτε ότι όντως διαγράφηκε, ας το δούμε: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Έξοδος + +Αυτά για τώρα! Μπορείτε να κλείσετε τη γραμμή εντολών με ασφάλεια τώρα. Ας το κάνουμε με τον τρόπο του χάκερ, εντάξει;:) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Ωραίο, ε; :) + +## Περίληψη + +Παρακάτω φαίνεται μια περίληψη μερικών χρήσιμων εντολών: + +| Εντολή (Windows) | Εντολή (Mac OS / Linux) | Περιγραφή | Παράδειγμα | +| ---------------- | ----------------------- | -------------------------------------- | ------------------------------------------------- | +| exit | exit | κλείσιμο παραθύρου | **exit** | +| cd | cd | αλλαγή φακέλου | **cd test** | +| cd | pwd | προβολή τρέχοντος φακέλου | **cd** (Windows) ή **pwd** (Mac OS / Linux) | +| dir | ls | προβολή λίστας φακέλων/αρχείων | **dir** | +| copy | cp | αντιγραφή αρχείου | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | μετακίνηση/μετονομασία αρχείου/φακέλου | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | δημιουργία φακέλου | **mkdir testdirectory** | +| rmdir (ή del) | rm | διαγραφή αρχείου | **del c:\test\test.txt** | +| rmdir /S | rm -r | διαγραφή φακέλου | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | προβολή βοήθειας για μια εντολή | **cd /?** (Windows) ή **man cd** (Mac OS / Linux) | + +Αυτό είναι ένα πολύ μικρό κομμάτι από τις διαθέσιμες εντολές που μπορείτε να τρέξετε στην γραμμή εντολών. Αλλά δεν θα χρειαστεί να χρησιμποιήσετε περισσότερες από αυτές σήμερα. + +Αν είστε περίεργοι δείτε το [ss64.com](http://ss64.com) που περιέχει μια πλήρη αναφορά σε όλες τις εντολές όλων των λειτουργικών συστημάτων. + +## Είστε έτοιμοι; + +Ας μάθουμε λίγο Python! \ No newline at end of file diff --git a/el/python_installation/README.md b/el/python_installation/README.md new file mode 100644 index 00000000000..cacadba685a --- /dev/null +++ b/el/python_installation/README.md @@ -0,0 +1,15 @@ +# Ας ξεκινήσουμε με την Python + +Είμαστε επιτέλους εδώ! + +Αλλά πρώτα θα θέλαμε να σας εξηγήσουμε τι είναι η Python. Η Python είναι μια πολύ δημοφιλής γλώσσα προγραμματισμού η οποία μπορεί να χρησιμοποιηθεί σε πολλούς τομείς όπως δημιουργία ιστοσελίδων, παιχνίδια, επιστημονικό λογισμικό, γραφικά και πολλά πολλά άλλα. + +Η Python δημιουργήθηκε στα τέλη της δεκαετίας του 1980 και ο κύριος σκοπός της είναι να είναι ευανάγνωστη από ανθρώπους (και όχι από μηχανές!). Γι'αυτό το λόγο φαίνεται απλούστερη από άλλες γλώσσες προγραμματισμού, αλλά μην ανησυχείτε. Η Python είναι πραγματικά δυνατή! + +# Εγκατάσταση Python + +> **Σημείωση** Αν χρησιμοποιείτε Chromebook, μεταβείτε στο κεφάλαιο [Εγκατάσταση Chromebook](../chromebook_setup/README.md). +> +> **Σημείωση** Αν έχετε ήδη ολοκληρώσει τα βήματα εγκατάστασης, δεν υπάρχει λόγος να τα ξανακάνετε. Μπορείτε να διαβάσετε το ακόλουθο κεφάλαιο! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/el/python_installation/images/add_python_to_windows_path.png b/el/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/el/python_installation/images/add_python_to_windows_path.png differ diff --git a/el/python_installation/images/python-installation-options.png b/el/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/el/python_installation/images/python-installation-options.png differ diff --git a/el/python_installation/images/windows-plus-r.png b/el/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/el/python_installation/images/windows-plus-r.png differ diff --git a/el/python_installation/instructions.md b/el/python_installation/instructions.md new file mode 100644 index 00000000000..ce03da6cd23 --- /dev/null +++ b/el/python_installation/instructions.md @@ -0,0 +1,116 @@ +> Για τους αναγνώστες στο σπίτι: αυτό το κεφάλαιο καλύπτεται στο βίντεο [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Αυτή η ενότητα βασίζεται σε tutorials από tην κοινότητα Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Το Django είναι γραμμένο σε Python. Χρειαζόμαστε την Python για να κάνουμε το οτιδήποτε στο Django. Ακόμη και να το εγκαταστήσουμε. Ας ξεκινήσουμε εγκαθιστώντας την Python! Θέλουμε να εγκαταστήσετε την τελευταία έκδοση της Python 3. Αν έχετε κάποια παλαιότερη έκδοση θα θέλαμε να την αναβαθμίσετε. Αν έχετε ήδη την έκδοση 3.4 ή υψηλότερη τότε θα είστε μια χαρά. + + + +Πρώτα ελέγξτε αν ο υπολογιστής σας τρέχει το λειτουργικό σύστημα 32-bit ή 64-bit των Windows. Επιλέξτε "System type" από τη σελίδα System Info. Για να φτάσετε σε αυτή τη σελίδα με μια από τις ακόλουθες μεθόδους: + +* Πιέστε το κουμπί των Windows (δίπλα από το αριστερό Alt) και το Pause/Break ταυτόχρονα. +* Ανοίξτε τον πίνακα ελέγχου (Control Panel) από το Windows μενού και περιηγηθείτε στο System & Security, έπειτα επιλέξτε System +* Πιέστε το πλήκτρο των Windows και έπειτα περιηγηθείτε στο Settings > System > About + +Μπορείτε να κατεβάσετε την Python για Windows από τη σελίδα https://www.python.org/downloads/windows/. Κλικάρετε στο σύνδεσμο "Latest Python 3 Release - Python x.x.x". Αν ο υπολογιστής σας τρέχει **64-bit** Windows, τότε κατεβάστε το αρχείο **Windows x86-64 executable installer**. Ειδάλλως, κατεβάστε το αρχείο **Windows x86 executable installer**. Αφού κατεβάσετε το αρχείο εγκατάστασης, κάντε διπλό κλικ πάνω του και ακολουθήστε τις οδηγίες. + +Ένα πράγμα να προσέξετε: Κατά τη διάρκεια της εγκατάστασης, θα παρατηρήσετε ένα παράθυρο με το όνομα "Setup". Σιγουρευτείτε ότι είναι επιλεγμένο το κουτάκι "Add Python 3.6 to PATH" ή 'Add Python to your environment variables" και έπειτα κλικάρετε στην επιλογή "Install Now", όπως φαίνεται εδώ (ίσως να φαίνεται διαφορετικά σε εσάς αν εγκαθιστάτε διαφορετική έκδοση): + +![Don't forget to add Python to the Path](../python_installation/images/python-installation-options.png) + +Όταν ολοκληρωθεί η εγκατάσταση, ενδέχεται να δείτε ένα παράθυρο διαλόγου με μια σύνδεση που μπορείτε να ακολουθήσετε για να μάθετε περισσότερα σχετικά με την Python ή σχετικά με την έκδοση που έχετε εγκαταστήσει. Κλείστε ή πατήστε "Άκυρο" σε αυτό το παράθυρο διαλόγου. Θα μάθετε περισσότερα σε αυτό τον οδηγό! + +Στα επερχόμενα βήματα, θα χρησιμοποιείτε τη γραμμή εντολών των Windows (το οποίο, επίσης, θα σας πούμε). Για τώρα, εάν χρειάζεται να πληκτρολογήσετε μερικές εντολές, πηγαίνετε στο μενού Έναρξη και πληκτρολογήστε στο πεδίο Αναζήτηση «Command Prompt» (Γραμμή Εντολών). (Σε παλαιότερες εκδόσεις των Windows, μπορείτε να ξεκινήσετε τη γραμμή εντολών με το Start menu → Windows System → Command Prompt.) Μπορείτε να επίσης κρατήστε πατημένο το πλήκτρο των Windows και το πλήκτρο «R» μέχρι να εμφανιστεί το παράθυρο «Εκτέλεση» (Run). Για να ανοίξετε τη γραμμή εντολών, πληκτρολογήστε "cmd" και πατήστε enter στο παράθυρο «Εκτέλεση» (Run). + +![Πληκτρολογήστε "cmd" στο παράθυρο "Run"](../python_installation/images/windows-plus-r.png) + +Σημείωση: Εάν χρησιμοποιείτε μια παλαιότερη έκδοση των Windows (7, Vista ή οποιαδήποτε παλαιότερη έκδοση) και το πρόγραμμα εγκατάστασης της Python 3.6.x αποτύχει με σφάλμα, τότε μπορείτε να δοκιμάσετε τα εξής: + +1. Εγκαταστήστε όλες τις ενημερώσεις των Windows και προσπαθήστε ξανά να εγκαταστήσετε Python ή +2. εγκαταστήστε μια [παλαιότερη έκδοση της Python](https://www.python.org/downloads/windows/), π.χ. [3.4.6](https://www.python.org/downloads/release/python-346/). + +Εάν εγκαταστήσετε μια παλαιότερη έκδοση της Python, η οθόνη εγκατάστασης μπορεί να φαίνεται λίγο διαφορετική από ότι φαίνεται παραπάνω. Βεβαιωθείτε ότι μπορείτε να μετακινηθείτε προς τα κάτω για να δείτε το «Add python.exe to Path». Όταν το δείτε τότε κάντε κλικ στο κουμπί στην αριστερή πλευρά και διαλέξτε το "Will be installed on local hard drive": + +![Παλαιότερες εκδόσεις Add Python to the Path](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Σημείωση** Πριν εγκαταστήσετε την Python σε λειτουργικό macOS, θα πρέπει να σιγουρευτείτε ότι οι ρυθμίσεις του Mac σας, επιτρέπουν την εγκατάσταση πακέτων που δεν είναι από το App Store. Πηγαίνετε στο System Preferences (βρίσκεται στο φάκελο Applications) και κλικάρετε στο "Security & Privacy" και έπειτα στη καρτέλα "General". Αν η επιλογή "Allow apps downloaded from:" είναι ρυθμισμένη στο "Mac App Store," αλλάξτε το σε "Mac App Store and identified developers." + +Θα χρειαστεί να μεταβείτε στη σελίδα https://www.python.org/downloads/release/python-361/ και να κατεβάσετε το αρχείο εγκατάστασης: + +* Κατεβάστε το αρχείο *macOS 64-bit/32-bit installer*, +* Διπλό κλικ στο *python-3.6.1-macosx10.6.pkg* για να ξεκινήσει η διαδικασία εγκατάστασης. + + + + + +Είναι πολύ πιθανόν ότι η Python είναι προεγκατεστημένη στο σύστημα σας. Για να δείτε αν ναι (και ποια έκδοση επίσης), ανοίξτε μια κονσόλα και γράψτε: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Αν έχετε διαφορετική έκδοση, τουλάχιστον την 3.4.0 (πχ 3.6.0), τότε δεν χρειάζεται να αναβαθμίσετε. Αν δεν την έχετε εγκατεστημένη ή αν θέλετε μια νέα έκδοση, τότε εγκαταστήστε τη ως εξής: + + + + + +Γράψτε τα ακόλουθα στην κονσόλα: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Χρησιμοποιήστε αυτή την εντολή στην κονσόλα: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Αν χρησιμοποιείτε κάποια παλιά έκδοση της Fedora ίσως να λάβετε ένα σφάλμα ότι η εντολή `dnf` δεν υπάρχει. Σε αυτή την περίπτωση, θα χρειαστεί να χρησιμοποιήσετε την εντολή `yum`. + + + + + +Χρησιμοποιήστε αυτή την εντολή στην κονσόλα: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Επιβεβαιώστε ότι η εκγκατάσταση πέτυχε ανοίγοντας μια κονσόλα και τρέχοντας `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Η έκδοση σας μπορεί να είναι διαφορετική από την 3.6.1. Θα πρέπει να είναι η ίδια με αυτή που εγκαταστήσατε. + +**ΣΗΜΕΙΩΣΗ:** Αν είστε σε Windows και λάβετε ένα σφάλμα ότι η εντολή `python3` δεν βρέθηκε, προσπαθήστε την εντολή `python` (χωρίς το `3`) και σιγουρευτείτε ότι η έκδοση εξακολουθεί να είναι ίση ή μεγαλύτερη της 3.4.0. + +* * * + +Αν έχετε τυχόν απορίες ή κάτι πήγε στραβά και δεν έχετε ιδέα τι να κάνετε, παρακαλούμε ρωτήστε τον βοηθό σας! Μερικές φορές τα πράγματα δεν πηγαίνουν καλά και είναι καλύτερο να ρωτάμε κάποιον με εμπειρία. \ No newline at end of file diff --git a/el/python_introduction/README.md b/el/python_introduction/README.md new file mode 100644 index 00000000000..5618a295b7c --- /dev/null +++ b/el/python_introduction/README.md @@ -0,0 +1,1068 @@ +{% set warning_icon = '' %} + +# Εισαγωγή στην Python + +> Μέρος αυτού του κεφαλαίου είναι βασισμένο στους οδηγούς από την κοινότητα Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Ας γράψουμε λίγο κώδικα! + +## Παράθυρο εντολών Python + +> Για τους αναγνώστες στο σπίτι: αυτό το μέρος που καλύπτεται από το βίντεο [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +Για να αρχίσετε να παίζετε με την Python, πρέπει να ανοίξετε μια *γραμμή εντολών* στον υπολογιστή σας. Πρέπει ήδη να ξέρετε πως το κάνουμε αυτό. Το μάθαμε στο κεφάλαιο [Εισαγωγή στη γραμμή εντολών](../intro_to_command_line/README.md). + +Μόλις είστε έτοιμοι, ακολουθήστε τις παρακάτω οδηγίες. + +Θέλουμε να ανοίξουμε μια κονσόλα Python. Πληκτρολογήστε `python` αν είστε σε Windows ή `python3` αν είστε σε Mac OS/Linux και πατήστε `enter`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Η πρώτη σας Python εντολή! + +Αφού εκτελέσετε την εντολή Python, το prompt θα αλλάξει σε `>>>`. Για εμάς αυτό σημαίνει ότι τώρα μπορεί να χρησιμοποιούμε μόνο εντολές για τη γλώσσα Python. Δεν χρειάζεται να πληκτρολογήσετε `>>>`. Θα το κάνει η Python για σας. + +Εάν θέλετε να τερματίσετε την κονσόλα Python σε οποιοδήποτε σημείο, απλά πληκτρολόγηστε `exit()` ή `Ctrl + Z` για Windows και `Ctrl + D` για Mac/Linux. Τότε δεν θα μπορείτε να δείτε το `>>>` πια. + +Για τώρα δεν θέλουμε να φύγουμε από αυτό το περιβάλλον. Θέλουμε να μάθουμε περισσότερα γι'αυτό. Ας ξεκινήσουμε να γράφουμε μερικές μαθηματικές πράξεις, όπως `2 + 3` και μετά πατάμε `enter`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Ωραία! Είδατε την απάντηση από κάτω; Η Python ξέρει μαθηματικά! Μπορείτε να δοκιμάσετε και άλλες εντολές, όπως: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Για να εκτελέσετε εκθετικούς υπολογισμούς, πχ 2 στη δύναμη του 3, γράφουμε: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Διασκέδασε με αυτό για λίγο και στη συνέχεια συνεχίστε πίσω εδώ. :) + +Όπως μπορείτε να δείτε, η Python είναι μια πολύ καλή αριθμομηχανή. Αν αναρωτιέστε τι άλλο μπορείτε να κάνετε… + +## Strings + +Τι θα λέγατε για το όνομα σας; Πληκτρολογήστε το μικρό σας όνομα μέσα σε "αυτάκια", όπως παρακάτω: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +"Ola" +``` + +Μόλις δημιουργήσατε το πρώτο σας string! Είναι μια ακολουθία χαρακτήρων η οποία επεξεργάζεται από τον υπολογιστή. Ένα string πρέπει πάντα να ξεκινά και να τελειώνει με τον ίδιο χαρακτήρα. Αυτό μπορεί να είναι είτε μονά "αυτάκια" (`'`) ή διπλά (`"`) (καμία διαφορά!). Τα "αυτάκια" λένε στην Python το εξής: ότι υπάρχει ανάμεσα θεώρησε το ως ένα string. + +Τα strings μπορούν να ενωθούν. Δοκιμάστε το ακόλουθο: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Hi there " + "Ola" +"Hi there Ola" +``` + +Μπορείτε επίσης να πολλαπλασιάσετε strings με αριθμό: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Αν χρειαστεί να βάλετε κάποια απόστροφο μέσα στο string, υπάρχουν δύο τρόποι να το κάνετε. + +Χρησιμοποιώντας διπλά "αυτάκια": + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +ή κάνοντας escape την απόστροφο με ένα backslash (``): + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Ωραίο εε; Για να δείτε το όνομα σας σε κεφαλαία, γράψτε: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Μόλις χρησιμοποιήσατε την `upper` **method** πάνω στο string σας! Η μέθοδος (όπως η `upper()`) είναι μια ακολουθία από οδηγίες/εντολές που η Python πρέπει να εκτελέσει πάνω σε ένα συγκεκριμένο object (`"Ola"`) μόλις την καλέσετε. + +Αν θέλετε να μάθετε τον αριθμό των γραμμάτων που περιέχονται στο όνομα σας, υπάρχει συνάρτηση **function** και γι'αυτό! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Αναρρωτιέστε γιατί μερικές φορές καλείτε συναρτήσεις με την τελεία `.` στο τέλος ενός string (όπως `"Ola".upper()`) και άλλες καλείτε μια συνάρτηση και τοποθετείτε μέσα στις παρενθέσεις το string; Λοιπόν, σε κάποια σημεία οι συναρτήσεις ανήκουν σε objects, όπως η `upper()` η οποία επιδρά μόνο πάνω σε strings. Σε αυτή την περίπτωση, ονομάζουμε τις συναρτήσεις αυτές μεθόδους (**method**). Άλλες, πάλι, φορές οι συναρτήσεις δεν ανήκουν σε κάτι συγκεκριμένο και μπορούν να χρησιμοποιηθούν σε οποιουδήποτε τύπου object, όπως η `len()`. Γι'αυτό δίνουμε το string `"Ola"` ως παράμετρο στη συνάρτηση `len`. + +### Περίληψη + +Αρκετά με τα strings. Μέχρι τώρα μάθατε: + +- **το prompt** – γράφοντας εντολές (κώδικα) μέσα σε περειβάλλον της Python έχει ως αποτέλεσμα να παίρνετε απαντήσεις από την Python +- **αριθμούς και strings** – στην Python οι αριθμοί χρησιμοποιούνται για μαθηματικά και τα strings για χαρακτήρες +- **operators** – όπως `+` και `*`, συνδυάζουν τιμές και παράγουν μια νέα τιμή +- **functions** – όπως η `upper()` και η `len()`, εκτελούν κάποιες ενέργειες στα objects. + +Αυτά είναι τα βασικά για κάθε γλώσσα προγραμματισμού. Είστε έτοιμοι για κάτι πιο δύσκολο; Είμαστε σίγουροι ότι είστε! + +## Σφάλματα + +Ας δοκιμάσουμε κάτι καινούργιο. Μπορούμε να βρούμε το μήκος ενός αριθμού ακριβώς όπως κάναμε με το όνομα σας νωρίτερα; Πληκτρολογήστε `len(304023)` και πατήστε `enter`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Μόλις λάβατε το πρώτο σας σφάλμα! Το εικονίδιο {{ warning_icon }} είναι ο δικός μας τρόπος να σας πούμε ότι ο κώδικάς που πρόκειται να τρέξετε δεν θα έχει τα αναμενόμενα αποτελέσματα. Κάνοντας λάθη (ακόμα και εσκεμμένα) είναι σημαντικό κομμάτι κατά τη διάρκεια της εκμάθησης! + +Το συγκεκριμένο σφάλμα λέει ότι τα objects τύπου "int" (από τη λέξη integers, που σημαίνει ακέραιοι αριθμοί) δεν έχουν μήκος. Οπότε τι κάνουμε τώρα; Μήπως να γράψουμε τον αριθμό ως ένα string; Τα strings έχουν μήκος, έτσι; + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Δούλεψε! Χρησιμοποιήσαμε τη συνάρτηση `str` μέσα στην `len`. Η `str()` μετατρέπει τα πάντα σε strings. + +- Η συνάρτηση `str` μετατρέπει πράγματα σε **strings** +- Η συνάρτηση `int` μετατρέπει πράγματα σε **integers** + +> Σημαντικό: μπορούμε να μετατρέψουμε αριθμούς σε κείμενο (strings) αλλά όχι απαραίτητα το αντίστροφο. Τι θα συνέβαινε αν τρέχατε `int('hello')`; + +## Μεταβλητές + +Ένα σημαντικό έννοια στον προγραμματισμό είναι οι μεταβλητές. Μια μεταβλητή δεν είναι τίποτε άλλο από ένα όνομα που μπορεί να επαναχρησιμοποιηθεί αργότερα. Οι προγραμματιστές χρησιμοποιούν τις μεταβλητές για την αποθήκευση δεδομένων, κάνοντας τον κώδικα πιο ευανάγνωστο χωρίς να χρειάζεται να θυμούνται τι ήταν τι. + +Ας υποθέσουμε ότι θέλετε να δημιουργήσετε μια μεταβλητή με το όνομα `name`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Γράφουμε name ίσον με Ola. + +Όπως θα παρατηρήσατε, το πρόγραμμα δεν επέστρεψε τίποτα όπως πριν. Πως ξέρουμε, λοιπόν, ότι η μεταβλητή υπάρχει; Πληκτρολογήστε`name` και μετά πιέστε `enter`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +Ναιιι! Η πρώτη σας μεταβλητή! :) Μπορείτε πάντα να αλλάξετε την τιμή αυτής της μεταβλητής: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Μπορείτε να χρησιμοποιήσετε μεταβλητές σε συναρτήσεις: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Φοβερό, έτσι; Οι μεταβλητές μπορεί να είναι οτιδήποτε (ακόμα και αριθμοί). Δοκιμάστε το εξής: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Αλλά τι θα γινόταν αν χρησιμοποιούσαμε λάθος όνομα; Τι θα συμβεί; Ας το δοκιμάσουμε! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Ένα σφάλμα! Όπως μπορείτε να δείτε, η Python έχει διαφορετικού τύπου σφάλματα (τα έχει κατατάξει σε κατηγορίες). Αυτό εδώ ονομάζεται **NameError**. Η Python θα σας εμφανίσει αυτό το σφάλμα αν προσπαθήσετε να χρησιμοποιήσετε κάποια μεταβλητή της οποίας το όνομα δεν έχει δηλωθεί. Αν εμφανίστηκε αυτό το σφάλμα νωρίτερα σε εσάς, δείτε τον κώδικά σας μήπως και έχετε κάνει λάθος σε κάποιο όνομα μεταβλητής. + +Παίξτε για λίγο με αυτό και δείτε τι μπορείτε να κάνετε! + +## Η συνάρτηση print + +Δοκιμάστε αυτό: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Όταν απλώς πληκτρολογείτε `name`, η Python ανταποκρίνεται με το λεγόμενο string *representation* της τιμής της μεταβλητής 'name', η οποία είναι τα γράμματα M-a-r-i-a, περικυκλωμένα με τα μονά "αυτάκια", ''. Όταν λέτε `print(name)`, η Python θα "εκτυπώσει στην οθόνη" τα περιεχόμενα της μεταβλητής, χωρίς τα "αυτάκια", κάτι το οποίο είναι πιο ωραίο. + +Όπως θα δούμε και αργότερα, η συνάρτηση `print()` είναι χρήσιμη όταν θέλουμε να εκτυπώσουμε πράγματα μέσα σε συναρτήσεις ή όταν θέλουμε να εκτυπώσουμε πράγματα σε πολλαπλές γραμμές αντί μιας. + +## Λίστες + +Πέρα από τα strings και τους αριθμούς, η Python προσφέρει αρκετά ακόμα διαφορετικούς τύπους objects. Παρακάωτ θα περιγράψουμε αυτό που αποκαλούμε λίστα (**list**). Οι λίστες είναι αυτό που φαντάζεστε: objects τα οποία είναι λίστες άλλων objects. :) + +Πηγαίνετε και δημιουργήστε μια λίστα: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Ναι, αυτή είναι μια κενή λίστα. Όχι πολύ χρήσιμη έτσι; Ας δημιουργήσουμε μια λίστα με αριθμούς. Δεν θέλουμε να επαναλαμβανόμαστε όλη την ώρα, οπότε θα βάλουμε τη λίστα μέσα σε μια μεταβλητή: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Τέλεια, έχουμε μια λίστα! Τι μπορούμε να κάνουμε με αυτή; Ας δούμε πόσοι αριθμοί υπάρχουν μέσα στη λίστα. Ξέρετε, μήπως, ποια συνάρτηση μπορούμε να χρησιμοποιήσουμε γι'αυτό; Το ξέρετε ήδη! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Ναι! Η συνάρτηση `len()` σας δίνει τον αριθμό των objects μέσα σε μια λίστα. Ωραίο, έτσι; Ίσως να μπορούμε να ταξινομήσουμε τους αριθμούς: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +Αυτό δεν επιστρέφει τίποτα, απλώς άλλαξε τη σειρά με την οποία εμφανίζονται οι αριθμοί στη λίστα. Ας εκτυπώσουμε τη λίστα να δούμε πως άλλαξαν τα δεδομένα της: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Όπως βλέπετε, οι αριθμοί μέσα στη λίστα είναι πλέον ταξινομημένοι κατά αύξοντα αριθμό. Συγχαρητήρια! + +Ίσως να θέλουμε να αντιστρέψουμε αυτή τη σειρά. Ας το κάνουμε! + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Αν θέλετε να προσθέσετε κάτι στη λίστα σας, μπορείτε να το κάνετε με την ακόλουθη εντολή: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Αν θέλετε να εμφανίσετε μόνο το πρώτο στοιχείο της λίστας, μπορείτε να το κάνετε χρησιμοποιώντας τα λεγόμενα **indexes**. Ένα index είναι ένας αριθμός ο οποίος δηλώνει σε ποιο σημείο ένα στοιχείο υπάρχει σε μια λίστα. Οι προγραμματιστές προτιμούν να ξεκινούν από το 0, οπότε το πρώτο στοιχείο θα βρίσκεται στη θέση (index) 0, το επόμενο στη θέση 1 κοκ. Δοκιμάστε αυτό: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Όπως μπορείτε να δείτε, μπορείτε να έχετε πρόσβαση στα διαφορετικά στοιχεία μια λίστας γνωρίζοντας το όνομα της λίστας και τη θέση (index) του κάθε στοιχείου, δηλώνοντας το μέσα σε αγκύλες ([]). + +Για να διαγράψετε κάτι από τη λίστα, θα χρειαστεί να χρησιμοποιήσετε τα **indexes** καθώς και την μέθοδο `pop()`. Δηλαδή, θα πρέπει να ξέρετε ποιο στοιχείο να διαγράψετε. Ας δοκιμάσουμε ένα παράδειγμα. Θα διαγράψουμε το πρώτο στοιχείο της λίστας. + +{% 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] +``` + +Δούλεψε μια χαρά! + +Παίξτε λίγο παραπάνω: δοκιμάστε μερικές άλλες θέσεις (αριθμός μέσα στην αγκύλη) όπως 6, 7, 1000, -1, -6 ή -1000. Δείτε αν μπορείτε να προβλέψετε το αποτέλεσμα πριν πατήσετε enter. Συμφωνούν τα αποτελέσματα με την πρόβλεψη σας; + +Μπορείτε να βρείτε την λίστα με όλες διαθέσιμες μεθόδους για μια λίστα στο Python documentation: https://docs.python.org/3/tutorial/datastructures.html + +## Λεξικά + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Ένα λεξικό (dictionary ή όπως έχει επικρατήσει, dict εν συντομία) είναι όμοιο με μια λίστα αλλά έχετε πρόσβαση στις τιμές όχι κατά θέση (index) αλλά κατά ένα κλειδί (key). Ένα κλειδί μπορεί να είναι ένα string ή ένας αριθμός. Η σύνταξη για ένα κενό λεξικό είναι: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Αυτό σηλώνει ότι μόλις δημιουργήσατε ένα κενό dict. Συγχαρητήρια! + +Τώρα, προσπαθήστε να εκτελέσετε την ακόλουθη εντολή (αντικαθιστώντας με δικά σας στοιχεία): + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Με αυτή την εντολή μόλις δημιουργήσατε μια μεταβλητή με το όνομα `participant` με τρια ζευγάρια κλειδι-τιμή (key value pairs): + +- Το πρώτο κλειδί είναι το `name` το οποίο αντιστοιχεί την τιμή `'Ola'` (είναι ένα `string` object), +- Το δεύτερο κλειδί με το όνομα `country` αντιστοιχεί στην τιμή `'Poland'` (άλλο ένα `string`), +- και το τρίτο κλειδί `favorite_numbers` αντιστοιχεί στην τιμή `[7, 42, 92]` (μια λίστα `list` με τρεις αριθμούς μέσα της). + +Μπορείτε να δείτε τις τιμές κάθε κλειδιού με την ακόλουθη σύνταξη: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +Βλέπετε ότι είναι όμοια με μια λίστα. Απλώς δεν χριάζεται να θυμάστε τη θέση - μόνο το όνομα. + +Τι θα συμβεί αν ζητήσουμε μια τιμή ενός κλειδιού η οποία δεν υπάρχει; Μπορείτε να μαντέψετε; Ας δοκιμάσουμε να δούμε! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Είδατε, άλλο ένα σφάλμα το οποίο λέγεται **KeyError**. Η Python είναι αρκετά καλή σε αυτό. Δηλαδή στην περιγραφικότητα των σφαλμάτων της. Σας λέει ότι το κλειδί `'age'` δεν υπάρχει στο λεξικό. + +Πότε πρέπει να χρησιμοποιείτε λεξικό έναντι μιας λίστας; Αυτό είναι ένα καλό ερώτημα. Σκεφτείτε λίγο την απάντηση πριν προχωρήσετε. + +- Χρειάζεστε μια ταξινομημένη ακολουθία από στοιχεία; Η απάντηση είναι λίστα. +- Χρειάζεστε να συσχετίζετε κλειδιά ούτως ώστε να τα αναζητείτε αργότερα μόνο με το όνομα τους και όχι με τη θέση τους; Η απάντηση είναι dict. + +Τα dicts όπως και οι λίστες είναι *mutable*, που σημαίνει ότι μπορούν να αλλάξουν μετά τη δημιουργία τους. Μπορείτε να προσθέσετε ένα νέο κλειδί-τιμή στο λεξικό αφού δημιουργηθεί, όπως παρακάτω: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Όπως στις λίστες, χρησιμοποιώντας τη μέθοδο `len()` σε λεξικά, θα πάρετε τον αριθμό των ζευγαριών κλειδί-τιμή μέσα σε ένα λεξικό. Γράφτε το παρακάτω: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Ελπίζουμε να βγάζουν νόημα όλα αυτά μέχρι τώρα. :) Είστε έτοιμοι για περισσότερη διασκέδαση με τα λεξικά; Συνεχίστε να διαβάζετε για περισσότερα πράγματα που μπορείτε να κάνετε. + +Μπορείτε να χρησιμοποιήσετε την μέθοδο `pop()` για να διαγράψετε ένα στοιχείο (ζευγάρι από κλειδί-τιμή) από ένα dict. Για παράδειγμα, αν θέλετε να διαγράψετε το ζευγάρι με το κλειδί `'favorite_numbers'`, γράψτε την ακόλουθη εντολή: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Όπως μπορείτε να δείτε από την έξοδο, το ζευγάρι του κλειδιού 'favorite_numbers' διαγράφηκε επιτυχώς. + +Επίσης, μπορείτε να αλλάξετε την τιμή σε μια τιμή μέσα σε ένα λεξικό (αλλά όχι το ίδιο το κλειδί). Δοκιμάστε το εξής: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Όπως βλέπετε, η τιμή του κλειδιού `'country'` αλλάξε από `'Poland'` σε `'Germany'`. :) Φοβερό έτσι; Μπράβο! Μόλις μάθατε άλλο ένα απίθανο πράγμα. + +### Περίληψη + +Τέλεια! Ξέρετε πολλά σχετικά με τον προγραμματισμό τώρα. Στην τελευταία ενότητα μάθατε τα εξής: + +- **errors** – μάθατε πως να διαβάζετε και να καταλαβαινέτε τα σφάλματα τα οποία εμφανίζονται αν η Python δεν καταλαβαίνει κάποια εντολή που της δώσατε +- **variables** – ονόματα για objects τα οποία σας επιτρέπουν να γράφετε κώδικα πιο εύκολα αλλά και να είναι ο κώδικας σας πιο ευανάγνωστος +- **lists** – λίστες από objects που αποθηκεύονται σε μια συγκεκριμένη σειρά +- **dictionaries** – αντικείμενα τα οποία αποθηκεύονται υπό τη μορφή ζευγαριού κλειδί-τιμή + +Ενθουσιασμένοι για το επόμενο μέρος; :) + +## Σύγκριση πραγμάτων + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Ένα μεγάλος μέρος του προγραμματισμού περιλαμβάνει τη σύγκριση πραγμάτων. Ποιο είναι το πιο εύκολο πράγμα να συγκρίνουμε; Οι αριθμοί! Ας δούμε πως: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Δώσαμε στην Python μερικούς αριθμούς προς σύγκριση. Όπως βλέπετε, όχι μόνο μπορεί να συγκρίνει αριθμούς αλλά και αποτελέσματα από μεθόδους. Καλό εε; + +Αναρρωτιέστε γιατί βάλαμε `==` (δύο ίσον σύμβολα) για να εξακριβώσουμε αν οι αριθμοί είναι ίσοι; Χρησιμοποιούμε το μονό ίσον `=` για να αναθέσουμε μια τιμή σε μια μεταβλητή. Πάντα, **πάντα** θα χρειάζεται να βάζετε διπλό ίσον – `==` – αν θέλετε να δείτε αν δύο πράγματα είναι ίσα μεταξύ τους. Αν οι τιμές τους, δηλαδή, είναι ίδιες. Μπορούμε επίσης να εξακριβώσουμε αν οι τιμές τους δεν είναι ίσες. Γι'αυτό χρησιμοποιούμε το σύμβολο `!=`, όπως φαίνεται παραπάνω. + +Ας δώσουμε στην Python δύο ακόμα εντολές: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +Είδαμε ότι τα σύμβολα `>` και `<`, αλλά τα ακόλουθα σύμβολα τι σημαίνουν: `>=`, `<=`; Διαβάστε τα κάπως έτσι: + +- x `>` y σημαίνει: το x είναι μεγαλύτερο το y +- x `<` y σημαίνει: το x είναι μικρότερο του y +- x `<=` y σημαίνει: το x είναι μικρότερο ή ίσο του y +- x `>=` y σημαίνει: το x είναι μεγαλύτερο ή ίσο του y + +Τέλεια! Θέλετε να δοκιμάσετε άλλο ένα; Δοκιμάστε αυτό: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Μπορείτε να δώσετε στην Python όσα νούμερα θέλετε προς σύγκριση και θα σας δώσει την απάντηση! Πολύ καλό, έτσι; + +- **and** – αν χρησιμοποιήσετε τον operator `and`, τότε και οι δύο συγκρίσεις θα πρέπει να είναι αληθείς (True) για να είναι όλη η εντολή True +- **and** – αν χρησιμοποιήσετε τον operator `or`, τότε αρκεί μόνο μια από τις συγκρίσεις να είναι αληθής (True) για να είναι όλη η εντολή True + +Έχετε ακούσει την έκφραση "συγκρίνω μήλα με πορτοκάλια"; Ας το δοκιμάσουμε με την Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Όπως ισχύει με την παραπάνω έκφραση στην καθομιλουμένη, έτσι και στην Python δεν είναι δυνατόν να συγκριθεί ένας αριθμός (`int`) με ένα string (`str`). Αντ' αυτού, εμφανίζεται ένα σφάλμα τύπου **TypeError** το οποίο μας λέει ότι οι δύο τύποι objects δεν μπορούν να συγκριθούν μεταξύ τους. + +## Λογικές τιμές + +Χωρίς να το θέλετε, μόλις μάθατε έναν νέο τύπο object στην Python. Ονομάζεται **Boolean**. + +Υπάρχουν μόνο δύο ειδών Boolean objects: + +- True +- False + +Αλλά για να το καταλάβει η Python θα πρέπει πάντα να το γράφετε ως 'True' (το πρώτο γράμμα κεφαλαίο με τα υπόλοιπα πεζά). Τα **true, TRUE, και tRUE δεν θα δουλέψουν – μόνο το True είναι σωστό.** (Το ίδιο ισχύει και για το 'False'.) + +Τα booleans μπορούν να είναι και μεταβλητές! Δείτε εδώ: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Μπορείτε να το κάνετε και έτσι: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Εξασκηθείτε και διασκεδάστε με τα Booleans δοκιμάζοντας τις ακόλουθες εντολές: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Συγχαρητήρια! Τα Booleans είναι ένα από τα πιο διασκεδαστικά πράγματα στον προγραμματισμό και μόλις μάθατε πως να τα χρησιμοποιείτε! + +# Αποθήκευση! + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Τόση ώρα γράφαμε τον κώδικα στην κονσόλα η οποία μας περιορίζει στο να εισάγουμε μια γραμμή κάθε φορά. Τα περισσότερα προγράμματα αποθηκεύονται σε αρχεία και τρέχουν όταν τους ζητηθεί από τον **interpreter** ή τον **compiler** της αντίστοιχης γλώσσας προγραμματισμού. Τόση ώρα τρέχαμε τα προγράμματα μας σε μια γραμμή κάθε φορά μέσα στον Python **interpreter**. Θα χρειαστούμς περισσότερες από μια γραμμές κώδικα για τα επόμενα στάδια. Οπότε θα χρειαστεί εν συντομία να κάνουμε τα εξής: + +- Να φύγουμε από τον Python interpreter +- Να ανοίξουμε τον επεξεργαστή κώδικα της αρέσκειας μας +- Να αποθηκεύσουμε κάποιο κομμάτι κώδικα σε ένα python αρχείο (με την κατάληξη .py) +- Να το τρέξουμε! + +Για να φύγουμε από τον Python interpreter θα γράψουμε `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Αυτό θα σας επαναφέρει στη γραμμή εντολών. + +Νωρίτερα, επιλέξαμε έναν επεξεργαστή κώδικα από την ενότητα [επεξεργαστής κώδικα](../code_editor/README.md). Θα χρειαστεί να ανοίξουμε τον επεξεργαστή κώδικα και να γράψουμε κώδικα σε ένα νέο αρχείο (ή αν χρησιμοποιείτε Chromebook, δημιουργήστε ένα νέο αρχείο μέσω του Cloud IDE και ανοίξτε το αρχείο): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Προφανώς, είστε ένας αρκετά έμπειρος Python developer τώρα, οπότε γράφτε κάποιον κώδικα μέσα στο αρχείο. + +Τώρα θέλουμε να αποθηκεύσουμε το αρχείο και να του δώσουμε ένα περιγραφικό όνομα. Ας το ονομάσουμς **python_intro.py** και ας το αποθηκεύσουμε στην επιφάνεια εργασίας. Μπορούμε να ονομάσουμε το αρχείο όπως θέλουμε αλλά το σημαντικό εδώ είναι η κατάληξηξ **.py** που πρέπει να έχει. Η κατάληξη **.py** λέει στο λειτουργικό μας σύστημα ότι αυτό το αρχείο αποτελεί ένα **εκτελέσιμο Python αρχείο** και έτσι η Python μπορεί να το τρέξει. + +> **Σημείωση** Θα πρέπει να είδατε ήδη ένα από τα πιο ωραία πράγματα στους επεξεργαστές κώδικα: τα χρώματα! Στην Python κονσόλα, όλα ήταν το ίδιο χρώμα. Τώρα βλέπετε ότι η συνάρτηση `print` έχει διαφορετικό χρώμα από ένα string. Αυτό ονομάζεται "syntax highlighting" και είναι ένα πολύ χρήσιμο χαρακτηριστικό καθώς προγραμματίζετε. Τα χρώματα θα σας δίνουν βοήθεια, όπως ένα string που του λείπει ένα "αυτάκι" ή ένα τυπογραφικό λάθος (typo) σε κάποια λέξε κλειδί της Python όπως `def` κλπ). Αυτός είναι ένας λόγος που χρησιμοποιούμε έναν επεξεργαστή κώδικα. :) :) + +Με αποθηκευμένο το αρχείο, είναι ώρα να το τρέξουμε! Χρησιμοποιώντας τις δεξιότητες που μάθατε στη γραμμή εντολών, χρησιμοποιήστε την κονσόλα για να **αλλάξετε φάκελο** και να μεταβείτε στην επιφάνεια εργασίας. + + + +Σε Mac, η εντολή θα μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Σε Linux, θα μοιάζει κάπως έτσι (η λέξη "Desktop" ίσως να είναι μεταφρασμένη στη γλώσσα σας ως "Επιφάνεια Εργασίας"): + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Στα Windows θα μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +Και στα Windows Powershell, θα μοιάζει κάπως έτσι: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Αν κολλήσετε, ζητήστε βοήθεια. Για αυτόν ακριβώς το λόγο βρίσκονται οι βοηθοί! + +Τώρα χρησιμοποιήστε την Python για να τρέξετε τον κώδικα στο αρχείο όπως κατώθι: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Σημείωση: στα Windows η εντολή 'python3' δεν αναγνωρίζεται. Αντ'αυτού χρησιμοποιήστε την εντολή 'python': + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Τέλεια! Μόλις τρέξατε το πρώτο σας Python πρόγραμμα το οποίο είναι αποθηκευμένο σε αρχείο. Αισθάνεστε ωραία; + +Μπορείτε, τώρα, να μεταβείτε σε ένα σημαντικό εργαλείο στον προγραμματισμό: + +## If … elif … else + +Μερικές φορές, πολλά πράγματα στον κώδικα θα πρέπει να εκτελούνται αν ισχύουν συγκεκριμένες συνθήκες. Γι'αυτό το λόγο η Python (και κάθε άλλη γλώσσα προγραμματισμού) έχει κάτι που ονομάζει **if statements**. + +Αντικαταστήστε τον κώδικα στο αρχείο **python_intro.py** με αυτό: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Αν το αποθηκεύσουμε και το τρέξουμε, θα δούμε το ακόλουθο σφάλμα: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Η Python περιμένει από εμάς να της δώσουμε περαιτέρω οδηγίες για το τι θα γίνει (τι θα εκτελεστεί) αν η συνθήκε `3 > 2` είναι αληθής (ή αλλιώς `True`). Ας προσπαθήσουμε να εκτυπώσουμε τη λέξη "It works!". Αλλάξτε τον κώδικα στο αρχείο **python_intro.py** ως εξής: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +Παρατηρήστε ότι προσθέσαμε τέσσερα κενά (4 spaces) για να κάνουμε indent την τελευταία γραμμη. Πρέπει να το κάνουμε αυτό ούτως ώστε να πούμε στην Python τι να κάνει αν η συνθήκη είναι αληθής. Μπορείτε να βάλετε ένα διάστημα (έναν κενό χαρακτήρα) αλλά όλοι οι προγραμματιστές Python χρησιμοποιούν τέσσερα για να φαίνεται πιο όμορφο και ευανάγνωστο. Η χρήση του Tab λαμβάνεται ως 4 κενά αρκεί ο επεξεργαστής κώδικα να είναι ρυθμισμένος γι'αυτό. Όταν κάνετε την επιλογή σας (Tab ή κενοί χαρακτήρες), μην την αλλάξετε! Αν χρησιμοποιείτε τα 4 κενά τότε να χρησιμοποιείτε τα 4 κενά για πάντα. Αλλιώς θα προκύψουν προβλήματα (mixed Tabs and spaces). + +Αποθηκεύστε το και δοκιμάστε να το ξανατρέξετε: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +Σημείωση: θυμηθείτε ότι στα Windows η εντολή 'python3' δεν αναγνωρίζεται. Χρησιμοποιείτε την 'python' για να τρέχετε αρχεία. + +### Αν όμως η συνθήκη δεν είναι True; + +Στα προηγούμενα παραδείγματα, ο κώδικας έτρεχε μόνο όταν η σνυθήκη ήταν αληθής. Αλλά η Python έχει και άλλα statements όπως το `elif` και το `else`: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Όταν αυτό τρέχει θα εκτυπώσει: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +Αν το 2 ήταν μεγαλύτερο του 5 τότε η δεύτερη εντολή θα έτρεχε. Ας δούμε πως λειτουργεί η `elif`: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +και τρέξτε το: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +Είδατε τι έγινε εδώ; Το `elif` σας επέτρεψε να προσθέσετε έξτρα συνθήκες σε περίπτωση που οι προηγούμενες αποτύχουν. + +Μπορείτε να προσθέσετε όσα `elif` θέλετε μετά το αρχικό `if`. Για παράδειγμα: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Η Python τρέχει κάθε τεστ με τη σειρά και εκτυπώνει: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## Σχόλια + +Τα χόλια είναι γραμμές οι οποίοες ξεκινούν με την δίεση `#`. Μπορείτε να γράψετε ότι θέλετε μετά την δίεση `#` και πολύ απλά η Python θα το αγνοήσει. Τα σχόλια μπορούνα να κάνουν τον κώδικα σας πιο ευανάγνωστο σε άλλους προγραμματιστές και όχι μόνο. + +Ας δούμε πως φαίνεται: + +{% 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!") +``` + +Δεν χρειάζεται να γράφεται σχόλιο για κάθε γραμμή κώδικα (άλλωστε δεν είναι καλή πρακτική ούτως ή άλλως) αλλά τα σχόλια είναι χρήσιμα ως προς το να εξηγήσουν το τι κάνει ο κώδικας ή να δώσουν κάποιου είδους περίληψη όταν κάνετε κάτι περίπλοκο. + +### Περίληψη + +Στις τελευταίες ασκήσεις μάθατε τα εξής: + +- **να συγκρίνετε πράγματα** – στην Python μπορείτε να συγκρίνετε πράγματα χρησιμοποιώντας `>`, `>=`, `==`, `<=`, `<` και `and`, `or` +- **Boolean** – ένας τύπος object το οποίο μπορεί να πάρει μόνο δύο τιμές: `True` ή `False` +- **Αποθήκευση αρχείων** – αποθήκευση κώδικα σε αρχεία ούτως ώστε να τρέχετε μεγαλύτερου όγκου προγράμματα. +- **if … elif … else** – αυτά τα statements σας επιτρέπουν να εκτελείτε κώδικα υπό συγκεκριμένες συνθήκες. +- **σχόλια** - γραμμές στην Python οι οποίες δεν εκτελούνται και σας επιτρέπουν να κάνετε τον κώδικα σας πιο περιγραφικό και ευανάγνωστο + +Ώρα για το τελευταίο μέρος του κεφαλαίου! + +## Οι δικές σας συναρτήσεις! + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Θυμάστε τις συναρτήσεις όπως τη `len()` που εκτελούσατε; Λοιπόν, σας έχουμε καλά νέα! Θα μάθετε πως να δημιουργείτε τις δικές σας! + +Μια συνάρτηση είναι μια σειρά από οδηγίες που η Python πρέπει να εκτελέσει. Κάθε συνάρτηση ξεκινά με τη λέξη κλειδί της Python `def`, μετά ακολουθεί το όνομα αυτής και μετά δίνονται τυχόν παράμετροι. Ας το προσπαθήσουμε. Αντικαταστήστε τον κώδικα στο αρχείο **python_intro.py** με το ακόλουθο: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Ωραία. Η πρώτη μας συνάρτηση είναι έτοιμη! + +Θα αναρρωτιέστε γιατί γράψαμε το όνομα της συνάρτησης στο τέλος του αρχείου. Αυτό γίνεται επειδή η Python διαβάζει το αρχείο και το τρέχει από την κορυφή έως το τέλος. Για να χρησιμοποιήσουμε, λοιπόν, την συνάρτηση μας θα πρέπει να την ξαναγράψουμε στο τέλος. + +Ας το τρέξουμε για να δούμε το αποτέλεσμα: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +Σημείωση: αν δεν δούλεψε, μην πανικοβάλεστε! Η έξοδος θα σας βοηθήσει να καταλάβετε το γιατί: + +- Αν λέβετε ένα σφάλμα τύπου `NameError`, τότε ίσως γράψατε κάτι λάθος όπως το όνομα της συνάρτηση στο τέλος του αρχείου. Επιβεβαιώστε ότι το όνομα στη δήλωση της συνάρτηση `def hi():` είναι το ίδιο με το όνομα όταν την καλείτε `hi()`. +- Αν λάβατε ένα σφάλμα τύπου `IndentationError`, ελέγξτε ότι και οι γραμμές που καλούνται οι δύο συναρτήσεις `print` έχουν τον ίδιο αριθμό κενών στην αρχή: η Python απαιτεί όλος ο κώδικας μέσα στις συναρτήσεις να είναι στοιχισμένος το ίδιο. +- Αν δεν βλέπετε κάποια έξοδο τότε είτε έχετε παραλείψει να καλέσετε την συνάρτηση χρησιμοποιώντας τις παρενθέσεις `hi()` είτε το έχετε κάνει αλλά η κλήση της συνάρτησης (hi()) έχει *κενό* στην αρχή και αποτελεί μέρος του κυρίου σώματος της συνάρτησης (def hi():). + +Ας φτιάξουμε την πρώτη μας συνάρτηση με παραμέτρους. Θα αλλάξουμε το προηγούμενο παράδειγμα συμπεριλαμβάνοντας ένα όνομα. Θα φτιάξουμε μια συνάρτηση που να λέει 'hi' στο πρόσωπο που την καλεί: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Όπως βλέπετε, δώσαμε μια παράμετρο στην συνάρτηση με το όνομα `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!') + +hi() +``` + +Θυμηθείτε: Η συνάρτηση `print` είναι στοιχισμένη με 4 κενά μέσα στο statement `if`. Αυτό το κάνουμε διότι θέλουμε να εκτελεστεί η συνάρτηση όταν η συνθήκη στο if είναι αληθής. Ας δούμε πως δουλεύει τώρα: + +{% 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' + + +Ώπα, ένα σφάλμα. Ευτυχώς, η Python μας δίνει ένα αρκετά χρήσιμο σφάλμα. Μας λέει ότι η συνάρτηση `hi()` (αυτή που ορίσαμε) δέχεται μια απαραίτητη παράμετρο (με το όνομα `name`) και ότι ξεχάσαμε να την ορίσουμε καθώς την καλούσαμε. Ας το φτιάξουμε αυτό στο τέλος του αρχείου: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +Και ας το τρέξουμε ξανά: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +Και αν μπορούμε να αλλάξουμε το όνομα; + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +Και το τρέξουμε: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +Τώρα τι νομίζετε ότι θα γίνει αν γράψετε άλλο όνομα εκεί μέσα; (Όχι το Ola ή το Sonja). Δοκιμάστε το και προβλέψτε την έξοδο. Θα εκτυπώσει το εξής: + +{% filename %}command-line{% endfilename %} + + Hi anonymous! + + +Αυτό είναι φοβερό, έτσι; Με αυτό τον τρόπο δεν χρειάζεται να επαναλαμβάνεστε κάθε φορά που θέλετε να αλλάξετε το όνομα του προσώπου που η συνάρτηση υποτίθεται ότι χαιρετά. Και γι'αυτό το λόγο χρησιμοποιούμε τις συναρτήσεις. Δεν θέλετε ποτέ να επαναλάβετε τον κώδικα σας! + +Ας κάνουμε κάτι πιο έξυπνο. Υπάρχουν περισσότερα ονόματα από δύο και το να γράφουμε συνθήκες για καθένα χωριστά καταντά κουραστικό και ευάλωτο σε λάθη. Αντικαταστήστε το περιεχόμενο του αρχείου σας με τα κατώθι: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +Ας τρέξουμε τον κώδικα τώρα: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +Συγχαρητήρια! Μόλις μάθατε πως να γράφετε συναρτήσεις! :) + +## Επαναλήψεις + +> Για τους αναγνώστες στο σπίτι: αυτή η ενότητα καλύπτεται στο βίντεο [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +Αυτό είναι το τελευταίο κομμάτι. Ήταν σύντομο, έτσι; :) + +Οι προγραμματιστές δεν θέλουν να επαναλαμβάνουν τα ίδια και τα ίδια. Ο προγραμματισμός έχει να κάνει με την αυτοματοποίηση των πραγμάτων. Οπότε δεν θέλουμε να χαιρετάμε κάθε πρόσωπο με το όνομα τους χειροκίνητα, έτσι; Εδώ, λοιπόν, έρχονται οι επαναλήψεις (ή loops ή βρόγχοι). + +Θυμάστε τις λίστες; Ας φτιάξουμε μια λίστα με ονόματε κοριτσιών: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Θέλουμε να τις χαιρετίσουμε όλες με το όνομα τους. Έχουμε, ήδη, μια συνάρτηση με το όνομα `hi`, οπότε θα χρησιμοποιήσουμε αυτή: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +Η λέξη κλειδί της Python `for` συμπεριφέρεται περίπου όπως το `if`. Το κυρίως σώμα του κώδικα που ακολουθεί θα πρέπει να είναι στοιχισμένο με 4 κενά. + +Αυτός θα είναι ο κώδικας που θα υπάρχει στο αρχείο: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +Και όταν το τρέχουμε: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +Όπως βλέπετε οτιδήποτε βάλτε μέσα σε ένα statement `for` με την ανάλογη στοίχιση θα επαναληφθεί για κάθε στοιχείο της λίστας `girls`. + +Μπορείτε να χρησιμοποιήσετε το `for` και για αριθμούς χρησιμοποιώντας της συνάρτηση `range`: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Το οποίο θα εκτυπώσει: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +Η συνάρτηση `range` δημιουργεί μια λίστα από αριθμούς (αυτοί οι αριθμοί εισάγονται από εσάς ως παράμετροι). + +Σημειώστε ότι η δεύτερη παράμετρος δεν περιλαμβάνεται στην λίστα που επιστρέφει (δηλαδή το `range(1, 6)` θα μετρήσει από το 1 έως το 5, αλλά δεν θα συμπεριλάβει το 6). Αυτό γίνεται διότι η συνάρτηση "range" είναι τύπου κλειστό-ανοιχτό, δηλαδή συμπεριλαμβάνει την πρώτη τιμή αλλά όχι την τελευταία. + +## Περίληψη + +Αυτό ήταν. **Τα σπάτε!** Αυτό ήταν ένα δύσκολο κεφάλαιο, οπότε θα πρέπει να νιώθετε περίφανοι με τον εαυτό σας. Είμαστε πολύ περήφανοι που τα καταφέρατε μέχρι εδώ! + +Για τον επίσημο και πλήρης Python οδηγό επισκεφτείτε την σελίδα https://docs.python.org/3/tutorial/. Αυτό θα σας δώσει μια πιο ολοκληρωμένη και εις βάθος γνώση αυτής της γλώσσας προγραμματισμού. Γεια σας :) + +Ίσως θα θέλατε να κάνετε κάτι κάτι άλλο, πχ τεντωθείτε, να περπατήσετε λίγο, να ξεκουράσετε τα μάτια σας, πριν συνεχίσετε στο επόμενο κεφάλαιο. :) + +![Κεκάκι](images/cupcake.png) \ No newline at end of file diff --git a/el/python_introduction/images/cupcake.png b/el/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/el/python_introduction/images/cupcake.png differ diff --git a/el/template_extending/README.md b/el/template_extending/README.md new file mode 100644 index 00000000000..422326b0782 --- /dev/null +++ b/el/template_extending/README.md @@ -0,0 +1,147 @@ +# Επεκτείνοντας τα template + +Ένα άλλο ωραίο πράγμα που προσφέρει το Django είναι η **επέκταση των templates**. Τι σημαίνει αυτό; Αυτό σημαίνει ότι μπορείτε να χρησιμοποιείτε τα ίδια κομμάτια HTML για διαφορετικές σελίδες του διαδυκτιακού σας τόπου. + +Τα templates σας βοηθάνε στο να επαναχρησιμοποιήσετε το ίδιο τμήμα HTML (την ίδια, δηλαδή, πληροφορία) σε περισσότερα από ένα μέρη. Δεν χρειάζεται να επαναλαμβάνεται τον εαυτό σας σε κάθε αρχείο. Και αν χρειαστεί να αλλάξετε κάτι, δεν χρειάζεται να το κάνετε σε κάθε template παρά μόνο σε ένα! + +## Δημιουργία ενός βασικού (base) template + +Το base template είναι το πιο βασικό template που μπορείτε να επεκτείνετε σε κάθε σελίδα του ιστότοπού σας. + +Ας δημιουργήσουμε ένα αρχείο `base.html` μέσα στο `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +Στη συνέχεια, άνοιξε το και να αντίγραψε τα πάντα από το αρχείο `post_list.html` στο `base.html`, όπως ακολούθως: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Στη συνέχεια στο αρχείο `base.html`, αντικαταστήστε τα περιεχόμενα των: ``(τα πάντα μεταξύ `` και ``) με αυτό: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Ίσως παρατηρήσατε ότι αυτό αντικατέστησε τα πάντα από το `{% for post in posts %}` μέχρι το `{% endfor %}` με αυτό: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Αλλά γιατί; Μόλις δημιουργήσατε ένα `block`! Χρησιμοποιήσατε ένα template tag με το όνομα `{% block %}` για να δημιουργήσετε μια περιοχή όπου μέσα θα εισαχθεί HTML. Η HTML θα έρθει από άλλο αρχείο template το οποίο κάνει extend (επεκτείνει) αυτό το template (`base.html`). Θα σας δείξουμε πως να το κάνετε αυτο σε λίγο. + +Αποθηκεύστε το template `base.html` και ανοίξτε το αρχείο `blog/templates/blog/post_list.html` ξανά. {% raw %}Θα χρειαστεί να διαγράψετε τα πάντα πάνω από το `{% for post in posts %}` και κάτω από το `{% endfor %}`. Όταν είστε έτοιμοι, το αρχείο θα δείχνει κάπως έτσι:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Θέλουμε να χρησιμοποιήσουμε αυτό το κομμάτι ως μέρος του template μας για όλα τα blocks με περιεχόμενο. Ήρθε η ώρα να προσθέσουμε blocks σε αυτό το αρχείο! + +{% raw %}Πρέπει το όνομα του block να είναι το ίδιο με αυτό που δηλώσαμε στο template `base.html`. Πρέπει επίσης να συμπεριλάβουμε όλο τον κώδικα που ανήκει σε αυτά τα blocks. Για να γίνει αυτό, βάλτε τα όλα μεταξύ `{% block content %}` και `{% endblock %}`. Έτσι:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Μόνο ένα πράγμα έμεινε. Πρέπει να "συνδέσουμε" αυτά τα δύο templates μαζί. Αυτή είναι η έννοια της επέκτασης των template! Θα το κάνουμε αυτό προσθέτοντας τη λέξη-κλειδί "extends" στην αρχή του αρχείου. Κάπως έτσι: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Αυτό ήταν! Αποθηκεύστε το αρχείο και επιβεβαιώστε ότι η ιστοσελίδα σας λειτουργεί όπως πριν. :) + +> Αν λέβετε κάποιο σφάλμα όπως `TemplateDoesNotExist`, αυτό σημαίνει ότι δεν υπάρχει το αρχείο `blog/base.html` και ότι ο `server` τρέχει στην κονσόλα. Προσπαθήστε να τον σταματήσετε (πιέζοντας Ctrl + C) και επανεκκινήστε τον τρέχοντας την εντολή `python manage.py runserver`. \ No newline at end of file diff --git a/el/whats_next/README.md b/el/whats_next/README.md new file mode 100644 index 00000000000..9c03c6a2bf8 --- /dev/null +++ b/el/whats_next/README.md @@ -0,0 +1,42 @@ +# Τι υπάρχει μετά; + +Επιβράβευσε τον εαυτό σου! **Είσαι φοβερή**. Είμαστε περήφανοι! <3 + +### Τι μπορείς να κάνεις τώρα; + +Κάνε ένα διάλλειμα και χαλάρωσε! Μόλις έφερες εις πέρας κάτι πραγματικά μεγάλο. + +Μετά, ακολούθησε την κοινότητα Django Girls στο [Facebook](http://facebook.com/djangogirls) ή/και στο [Twitter](https://twitter.com/djangogirls) ούτως ώστε να μένεις ενημερωμένος. + +### Μπορείς να προτείνεις τυχόν επιπρόσθετες πηγές; + +Ναι! Υπάρχουν *πολλές* πηγές στο διαδίκτυο σχετικά με την εκμάθηση γλωσσών προγραμματισμού όλων των ειδών. Ίσως να είναι δύσκολη η επιλογή του επόμενου βήματος αλλά μην ανησυχείτε. Σας καλύπτουμε. Όποια και αν ήταν τα ενδιαφέροντα σας προτού έρθετε στην κοινότητα των Django Girls και οποιαδήποτε ενδιαφέροντα αναπτύξατε κατά τη διάρκεια του οδηγού, παρακάτω σας παρουσιάζουμε μερικές δωρεάν πηγές (κάποιες από τις οποίες δεν είναι αμιγώς δωρεάν αλλά περιέχουν δωρεάν κομμάτια) τις οποίες μπορείτε να χρησιμοποιήσετε προκειμένου να πετύχετε τον στόχο σας. + +#### Django + +- Το άλλο μας βιβλίο, [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Ο επίσημος οδηγός του Django](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) +- [Ξεκινώντας με το Django με μαθήματα βίντεο](http://www.gettingstartedwithdjango.com/) +- [Hello Web App: Learn How to Build a Web App](https://hellowebbooks.com/learn-django/) – το μάθημα δεν είναι δωρεάν αλλά μπορείτε να ζητήσετε μια δωρεάν eBook άδεια από την συγγραφέα Tracy Osborn στο + +#### HTML, CSS και JavaScript + +- [Μάθημα web development από την εταιρεία Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Μάθημα Python από την εταιρεία Codecademy](https://www.codecademy.com/learn/learn-python) +- [Μάθημα Python από την Google](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) – οι πρώτες ασκήσεις είναι δωρεάν +- [New Coder tutorials](http://newcoder.io/tutorials/) – είναι μια ποικιλία πρακτικών παραδειγμάτων του πως μπορεί να χρησιμοποιηθεί η γλώσσα προγραμματισμού Python +- [edX](https://www.edx.org/course?search_query=python) – σε αυτό το γνωστό site, μπορείτε να παρακολουθήσετε τα περισσότερα μαθήματα δωρεάν αλλά για την απόκτηση κάποιου πιστοποιητικού τότε θα χρειαστεί να καταβάλετε κάποιο ποσό ανάλογα το μάθημα και το πιστοποιτικό +- [Μαθήματα για Python από το Coursera](https://www.coursera.org/specializations/python) – μερικά μαθήματα βίντεο είναι δωρεάν + +#### Δουλεύοντας με δεδομένα + +- [Μάθημα επιστημονικών δεδομένων από την εταιρία Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – σε αυτό το γνωστό site, μπορείτε να παρακολουθήσετε τα περισσότερα μαθήματα δωρεάν αλλά για την απόκτηση κάποιου πιστοποιητικού τότε θα χρειαστεί να καταβάλετε κάποιο ποσό ανάλογα το μάθημα και το πιστοποιτικό +- [Dataquest](https://www.dataquest.io/) – οι πρώτες 30 "αποστολές" είναι δωρεάν + +Ανυπομονούμε να δούμε το επόμενο σας project! \ No newline at end of file diff --git a/en/GLOSSARY.md b/en/GLOSSARY.md new file mode 100644 index 00000000000..07613d2c221 --- /dev/null +++ b/en/GLOSSARY.md @@ -0,0 +1,2 @@ +# code editor +Code editor is an application that allows you to save your code so you will be able to get back to it later. You can learn where to get one from the [Code editor chapter](./code_editor/README.md) diff --git a/en/README.md b/en/README.md new file mode 100644 index 00000000000..419cf0c347f --- /dev/null +++ b/en/README.md @@ -0,0 +1,53 @@ +# Django Girls Tutorial + +> This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. +> To view a copy of this license, visit https://creativecommons.org/licenses/by-sa/4.0/ + +## Welcome +Welcome to the Django Girls Tutorial! 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. + +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. :) + +{% if output.name != "ebook" %} +> Do you want to read this tutorial on your e-reader? +> Then [download the Django Girls Tutorial as an e-book in ePub format](../django-girls-tutorial_{{ book.language }}.epub). +{% endif %} + +## Introduction + +Have you ever felt that the world is more and more about technology to which you cannot (yet) relate? Have you ever wondered how to create a website but have never had enough motivation to start? Have you ever thought that the software world is too complicated for you to even try doing something on your own? + +Well, we have good news for you! Programming is not as hard as it seems and we want to show you how fun it can be. + +This tutorial will not magically turn you into a programmer. If you want to be good at it, you need months or even years of learning and practice. But we want to show you that programming or creating websites is not as complicated as it seems. We will try to explain different bits and pieces as well as we can, so you will not feel intimidated by technology. + +We hope that we'll be able to make you love technology as much as we do! + +## What will you learn during the tutorial? + +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! + +It will (more or less) look like this: + +![Figure 0.1](images/application.png) + +OK, [let's start at the beginning…](./how_the_internet_works/README.md) + +## Following the tutorial at home + +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. + +In every chapter already covered, there is a link that points to the correct video. + + +## About and contributing + +This tutorial is maintained by [DjangoGirls](https://djangogirls.org/). If you find any mistakes or want to update the tutorial please [follow the contributing guidelines](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Would you like to help us translate the tutorial into other languages? + +Currently, translations are being kept on the crowdin.com platform at: + +https://crowdin.com/project/django-girls-tutorial + +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. diff --git a/en/SUMMARY.md b/en/SUMMARY.md new file mode 100644 index 00000000000..f5ca8d54132 --- /dev/null +++ b/en/SUMMARY.md @@ -0,0 +1,36 @@ +# Summary + +* [Introduction](README.md) +* [Installation](installation/README.md) + * [Installation (Chromebook)](chromebook_setup/README.md) + * [Installation (macOS/Windows/Linux)](installation/README.md#macos-windows-linux) + * [Command Line](installation/README.md#intro-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) +* [How the Internet works](how_the_internet_works/README.md) +* [Introduction to command line](intro_to_command_line/README.md) +* [Python installation](python_installation/README.md) +* [Code editor](code_editor/README.md) +* [Introduction to Python](python_introduction/README.md) +* [What is Django?](django/README.md) +* [Django installation](django_installation/README.md) +* [Your first Django project!](django_start_project/README.md) +* [Django models](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Deploy!](deploy/README.md) +* [Django URLs](django_urls/README.md) +* [Django views – time to create!](django_views/README.md) +* [Introduction to HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Dynamic data in templates](dynamic_data_in_templates/README.md) +* [Django templates](django_templates/README.md) +* [CSS – make it pretty](css/README.md) +* [Template extending](template_extending/README.md) +* [Extend your application](extend_your_application/README.md) +* [Django Forms](django_forms/README.md) +* [What's next?](whats_next/README.md) diff --git a/en/chromebook_setup/README.md b/en/chromebook_setup/README.md new file mode 100644 index 00000000000..cadeff050a0 --- /dev/null +++ b/en/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook setup + +> **Note** If you already worked through the [installation steps](../installation/README.md), no need to do this again – you can skip straight ahead to [Introduction to Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} diff --git a/en/chromebook_setup/images/codespace-auto-delete-off.png b/en/chromebook_setup/images/codespace-auto-delete-off.png new file mode 100644 index 00000000000..e978d379335 Binary files /dev/null and b/en/chromebook_setup/images/codespace-auto-delete-off.png differ diff --git a/en/chromebook_setup/images/codespace-preview.png b/en/chromebook_setup/images/codespace-preview.png new file mode 100644 index 00000000000..f50b449d48b Binary files /dev/null and b/en/chromebook_setup/images/codespace-preview.png differ diff --git a/en/chromebook_setup/images/create-new-codespace.png b/en/chromebook_setup/images/create-new-codespace.png new file mode 100644 index 00000000000..cd254212fe5 Binary files /dev/null and b/en/chromebook_setup/images/create-new-codespace.png differ diff --git a/en/chromebook_setup/images/create-new-repo.png b/en/chromebook_setup/images/create-new-repo.png new file mode 100644 index 00000000000..0684a12752a Binary files /dev/null and b/en/chromebook_setup/images/create-new-repo.png differ diff --git a/en/chromebook_setup/images/vscode-install-python.png b/en/chromebook_setup/images/vscode-install-python.png new file mode 100644 index 00000000000..ccf32591c0a Binary files /dev/null and b/en/chromebook_setup/images/vscode-install-python.png differ diff --git a/en/chromebook_setup/instructions.md b/en/chromebook_setup/instructions.md new file mode 100644 index 00000000000..b986d832871 --- /dev/null +++ b/en/chromebook_setup/instructions.md @@ -0,0 +1,32 @@ +For people using a Chromebook or those with limited memory on their laptops, we recommend using a cloud IDE environment. This allows you to interact with the command line, Python, and Django directly through your browser, where a code editor is already installed. In case you using this instruction, some steps of the tutorial don't have to be done again ("Deploy/Git" [part](https://tutorial.djangogirls.org/en/deploy/#installing-git) ). You’ll find a more detailed explanation in the “Deploy/Git” section. + +Your installation experience will be a little different. + +1. **Go to [GitHub.com](https://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). + +2. **Create a GitHub project**. Visit [this](https://github.com/new) link, use "my-first-blog" name for your project, and make it public (needed for deployment, you can make it private later). Also, add a `README.md` and `.gitignore` file. + + ![](../chromebook_setup/images/create-new-repo.png) + +3. **Start a Codespace**. Go to GitHub [Codespaces](https://github.com/codespaces/new) and select the repository you just created. Click "Create Codespace". + + ![](../chromebook_setup/images/create-new-codespace.png) + + Wait a little bit and you'll see something like that: + + ![](../chromebook_setup/images/codespace-preview.png) + + The [VSCode](https://code.visualstudio.com) editor will open for you automatically. If you see a notification that says "Install Python", please click on it. If not prompted, click the "Extensions" icon on the left sidebar in the Codespace editor. Search for "Python" and click "Install." + + ![](../chromebook_setup/images/vscode-install-python.png) + + The bash terminal (similar to Linux) is at the bottom of the page. + + ![](../chromebook_setup/images/codespace-preview.png) + + By default, the GitHub Codespace environment will be deleted after 1 month (this applies only to the environment, not your code). To prevent auto-deletion, you can adjust the settings on the page: https://github.com/codespaces + + ![](../chromebook_setup/images/codespace-auto-delete-off.png) + +4. **Continue with the tutorial**. Follow the next steps from the section [Set up virtual environment and install Django](https://tutorial.djangogirls.org/en/installation/#virtualenv). + Follow than sections for Ubuntu/Linux. Use the Codespaces command line (terminal), accessible through your browser. diff --git a/en/code_editor/README.md b/en/code_editor/README.md new file mode 100644 index 00000000000..c1ff8c58248 --- /dev/null +++ b/en/code_editor/README.md @@ -0,0 +1,11 @@ +# Code editor + +> For readers at home: this chapter is covered in the [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) video. + +You're about to write your first line of code, so it's time to download a code editor! + +> **Note** If you're using a Chromebook, skip this chapter and make sure you follow the [Chromebook Setup](../chromebook_setup/README.md) instructions. The cloud IDE you chose (PaizaCloud Cloud IDE or AWS Cloud9) includes a code editor, and when you open a file in your IDE from the File menu, you will automatically be using the editor. + +> **Note** You might have done this earlier in the [Installation chapter](../installation/README.md) – if so, you can skip right ahead to the next chapter! + +{% include "/code_editor/instructions.md" %} diff --git a/en/code_editor/instructions.md b/en/code_editor/instructions.md new file mode 100644 index 00000000000..d162c6d307b --- /dev/null +++ b/en/code_editor/instructions.md @@ -0,0 +1,32 @@ +There are a lot of different editors and it largely boils down to personal preference. Most Python programmers use complex but extremely powerful IDEs (Integrated Development Environments), such as PyCharm. As a beginner, however, that's probably less suitable; our recommendations are equally powerful, but a lot simpler. + +Our suggestions are below, but feel free to ask your coach what their preferences are – it'll be easier to get help from them. + +## Visual Studio Code + +Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. + +[Download it here](https://code.visualstudio.com/) + +## Gedit + +Gedit is an open-source, free editor, available for all operating systems. + +[Download it here](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text is a very popular editor with a free evaluation period and it's available for all operating systems. + +[Download it here](https://www.sublimetext.com/) + +## Why are we installing a code editor? + +You might be wondering why we are installing this special code editor software, rather than using something like Word or Notepad. + +The first reason is that code needs to be **plain text**, and the problem with programs like Word and Textedit is that they don't actually produce plain text, they produce rich text (with fonts and formatting), using custom formats like [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +The second reason is that code editors are specialized for editing code, so they can provide helpful features like highlighting code with color according to its meaning, or automatically closing quotes for you. + +We'll see all this in action later. Soon, you'll come to think of your trusty old code editor as one of your favorite tools. :) + diff --git a/en/css/README.md b/en/css/README.md new file mode 100644 index 00000000000..a5abd124e8c --- /dev/null +++ b/en/css/README.md @@ -0,0 +1,328 @@ +# CSS – make it pretty! + +Our blog still looks pretty ugly, right? Time to make it nice! We will use CSS for that. + +## What is CSS? + +Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a website written in a markup language (like HTML). Treat it as make-up for our web page. ;) + +But we don't want to start from scratch again, right? Once more, we'll use something that programmers released on the Internet for free. Reinventing the wheel is no fun, you know. + +## Let's use Bootstrap! + +Bootstrap is one of the most popular HTML and CSS frameworks for developing beautiful websites: https://getbootstrap.com/ + +It was written by programmers who worked for Twitter. Now it's developed by volunteers from all over the world! + +## Install Bootstrap + +To install Bootstrap, open up your `.html` file in the code editor and add this to the `` section: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` + +This doesn't add any files to your project. It just points to files that exist on the Internet. So go ahead, open your website and refresh the page. Here it is! + +![Figure 14.1](images/bootstrap1.png) + +Looking nicer already! + + +## Static files in Django + +Finally we will take a closer look at these things we've been calling __static files__. Static files are all your CSS and images. Their content doesn't depend on the request context and will be the same for every user. + + +### Where to put static files for Django + +Django already knows where to find the static files for the built-in "admin" app. Now we need to add some static files for our own app, `blog`. + +We do that by creating a folder called `static` inside the blog app: + +``` +djangogirls +├── blog +│ ├── migrations +│ ├── static +│   └── templates +└── mysite +``` + +Django will automatically find any folders called "static" inside any of your apps' folders. Then it will be able to use their contents as static files. + + +## Your first CSS file! + +Let's create a CSS file now, to add your own style to your web page. Create a new directory called `css` inside your `static` directory. Then create a new file called `blog.css` inside this `css` directory. Ready? + +``` +djangogirls +└─── blog + └─── static + └─── css + └─── blog.css +``` + +Time to write some CSS! Open up the `blog/static/css/blog.css` file in your code editor. + +We won't be going too deep into customizing and learning about CSS here. There is a recommendation for a free CSS course at the end of this page if you would like to learn more. + +But let's do at least a little. Maybe we could change the color of our headers? +To understand colors, computers use special codes. These codes start with `#` followed by 6 letters (A–F) and numbers (0–9). For example, the code for blue is `#0000FF`. You can find the color codes for many colors here: https://www.colorpicker.com/. You may also use predefined [named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), such as `red` and `green`. + + +In your `blog/static/css/blog.css` file you should add the following code: + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` is a CSS Selector. This means we're applying our styles to any `a` element inside of an `h1` element; the `h2 a` selector does the same thing for `h2` elements. So when we have something like `

link

`, the `h1 a` style will apply. In this case, we're telling it to change its color to `#C25100`, which is a dark orange. Or you can put your own color here, but make sure it has good contrast against a white background! + +In a CSS file we determine styles for elements in the HTML file. The first way we identify elements is with the element name. You might remember these as tags from the HTML section. Things like `a`, `h1`, and `body` are all examples of element names. +We also identify elements by the attribute `class` or the attribute `id`. Class and id are names you give the element by yourself. Classes define groups of elements, and ids point to specific elements. For example, you could identify the following element by using the element name `a`, the class `external_link`, or the id `link_to_wiki_page`: + +```html + +``` + +You can read more about [CSS Selectors at MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors). +We also need to tell our HTML template that we added some CSS. Open the `blog/templates/blog/post_list.html` file in the code editor and add this line at the very beginning of it: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% load static %} +``` + +We're just loading static files here. :) +Between the `` and `` tags, after the links to the Bootstrap CSS files, add this line: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` +The browser reads the files in the order they're given, so we need to make sure this is in the right place. Otherwise the code in our file may be overridden by code in Bootstrap files. +We just told our template where our CSS file is located. + +Your file should now look like this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +OK, save the file and refresh the site! + +![Figure 14.2](images/color2.png) + +Nice work! Maybe we would also like to give our website a little air and increase the margin on the left side? Let's try this! + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +body { + padding-left: 15px; +} +``` + +Add that to your CSS, save the file and see how it works! + +![Figure 14.3](images/margin2.png) + +Maybe we can customize the font in our header? Paste this into your `` in `blog/templates/blog/post_list.html` file: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` + +Again, check the order and place it before the link to `blog/static/css/blog.css`. This line will import a font called *Lobster* from Google Fonts (https://www.google.com/fonts). + +Find the `h1 a` declaration block (the code between braces `{` and `}`) in the CSS file `blog/static/css/blog.css`. Now add the line `font-family: 'Lobster';` between the braces, and refresh the page: + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Figure 14.3](images/font.png) + +Great! + + +As mentioned above, CSS has a concept of classes. These allow you to name a part of the HTML code and apply styles only to this part, without affecting other parts. This can be super helpful! Maybe you have two divs that are doing something different (like your header and your post). A class can help you make them look different. + +Go ahead and name some parts of the HTML code. Replace the `header` that contains your header with the following: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+
+

Django Girls Blog

+
+
+``` + +And now add a class `post` to your `article` containing a blog post. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +We will now add declaration blocks to different selectors. Selectors starting with `.` relate to classes. There are many great tutorials and explanations about CSS on the Web that can help you understand the following code. For now, copy and paste it into your `blog/static/css/blog.css` file: + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-secondary, +.btn-secondary:visited { + color: #C25100; + background: none; + border-color: #C25100; + margin-left: 15px; +} + +.btn-secondary:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Then surround the HTML code which displays the posts with declarations of classes. Replace this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +in the `blog/templates/blog/post_list.html` with this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Save those files and refresh your website. + +![Figure 14.4](images/final.png) + +Woohoo! Looks awesome, right? +Look at the code we just pasted to find the places where we added classes in the HTML and used them in the CSS. Where would you make the change if you wanted the date to be turquoise? + +Don't be afraid to tinker with this CSS a little bit and try to change some things. Playing with the CSS can help you understand what the different things are doing. If you break something, don't worry – you can always undo it! + +We really recommend taking the free online courses "Basic HTML & HTML5" and "Basic CSS" on [freeCodeCamp](https://learn.freecodecamp.org/). They can help you learn all about making your websites prettier with HTML and CSS. + +Ready for the next chapter?! :) diff --git a/en/css/images/bootstrap1.png b/en/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/en/css/images/bootstrap1.png differ diff --git a/en/css/images/color2.png b/en/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/en/css/images/color2.png differ diff --git a/en/css/images/final.png b/en/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/en/css/images/final.png differ diff --git a/en/css/images/font.png b/en/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/en/css/images/font.png differ diff --git a/en/css/images/margin2.png b/en/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/en/css/images/margin2.png differ diff --git a/en/deploy/README.md b/en/deploy/README.md new file mode 100644 index 00000000000..d114936911f --- /dev/null +++ b/en/deploy/README.md @@ -0,0 +1,207 @@ +# Deploy! + +> **Note** The following chapter can be sometimes a bit hard to get through. Persist and finish it; deployment is an important part of the website development process. This chapter is placed in the middle of the tutorial so that your mentor can help with the slightly trickier process of getting your website online. This means you can still finish the tutorial on your own if you run out of time. + +Until now, your website was only available on your computer. Now you will learn how to deploy it! Deploying is the process of publishing your application on the Internet so people can finally go and see your app. :) + +As you learned, a website has to be located on a server. 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. + +The other external service we'll be using is [GitHub](https://www.github.com), which is a code hosting service. There are others out there, but almost all programmers have a GitHub account these days, and now so will you! + +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. + +The deployment process can be illustrated as follows: + +![](../deploy/images/deployment_local.png) + +If you’re using a **Chromebook** and [GitHub Codespaces](https://github.com/codespaces), your setup will look a bit different. All code-related changes are made not locally on your **Chromebook**, but in the Cloud Environment provided by GitHub. + +The deployment process on **Chromebook** and Cloud environment can be illustrated as follows: + +![](../deploy/images/deployment_cloud.png) + +# Git + +> **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" %} + +> **Note** If you're using a **Chromebook** and have already completed the **Chromebook** Installation [part](../chromebook_setup/README.md), you've already created the repository and can **skip** all commands from the "Starting our Git repository" and "Ignoring files" chapters. You can continue from the "First Git commands" chapter. While you’re welcome to read these chapters, the Terminal commands can be skipped. + +## Starting our Git repository + +Git tracks changes to a particular set of files in what's called a code repository (or "repo" for short). Let's start one for our project. Open up your console and run these commands, in the `djangogirls` directory: + +> **Note** Check your current working directory with a `pwd` (macOS/Linux) or `cd` (Windows) command before initializing the repository. You should be in the `djangogirls` folder. + +{% 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). + +### Ignoring files + +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: + +{% filename %}.gitignore{% endfilename %} +``` +# 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 +``` + +And save it as `.gitignore` in the "djangogirls" folder. + +> **Note** The dot at the beginning of the file name is important! 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. + + +### First Git commands + +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: + +{% filename %}command-line{% endfilename %} +``` +$ 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) +``` + +And finally we save our changes. Go to your console and run these commands: + +{% filename %}command-line{% endfilename %} +``` +$ 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 +``` + + +## Pushing your code to GitHub + +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). + +### Creating a Personal Access Token + +Now follow the instructions from GitHub to [create a personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic). +The token should have the 'repo' scope. +Copy the value of the token, and save it somewhere safe (like a password manager). + +### Creating a new repository + +Back on the GitHub homepage, +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. + +![](images/new_github_repo.png) + +> **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`. + +On the next screen, you'll be shown your repo's clone URL, which you will use in some of the commands that follow: + +![](images/github_get_repo_url_screenshot.png) + +Now we need to hook up the Git repository on your computer to the one up on GitHub. + +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). + +{% filename %}command-line{% endfilename %} +``` +$ git remote add origin https://github.com//my-first-blog.git +$ git push -u origin HEAD +``` + +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). +Use the Personal Access Token you created earlier, +not your account password. + +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. +``` + + + +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. :) + +{% include "/deploy/pythonanywhere.md" %} + + +# Check out your site! + +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. + +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? + + +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! diff --git a/en/deploy/images/deployment_cloud.png b/en/deploy/images/deployment_cloud.png new file mode 100644 index 00000000000..6cead7a07ad Binary files /dev/null and b/en/deploy/images/deployment_cloud.png differ diff --git a/en/deploy/images/deployment_local.png b/en/deploy/images/deployment_local.png new file mode 100644 index 00000000000..ae87eca532f Binary files /dev/null and b/en/deploy/images/deployment_local.png differ diff --git a/en/deploy/images/github_get_repo_url_screenshot.png b/en/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/en/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/en/deploy/images/new_github_repo.png b/en/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..997b7fe129c Binary files /dev/null and b/en/deploy/images/new_github_repo.png differ diff --git a/en/deploy/images/pythonanywhere_account.png b/en/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/en/deploy/images/pythonanywhere_account.png differ diff --git a/en/deploy/images/pythonanywhere_bash_console.png b/en/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/en/deploy/images/pythonanywhere_bash_console.png differ diff --git a/en/deploy/images/pythonanywhere_beginner_account_button.png b/en/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/en/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/en/deploy/images/pythonanywhere_create_api_token.png b/en/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/en/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/en/deploy/install_git.md b/en/deploy/install_git.md new file mode 100644 index 00000000000..5325080cc89 --- /dev/null +++ b/en/deploy/install_git.md @@ -0,0 +1,55 @@ +Git is a "version control system" used by a lot of programmers. This software can track changes to files over time so that you can recall specific versions later. A bit like the "track changes" feature in word processor programs (e.g., Microsoft Word or LibreOffice Writer), but much more powerful. + +## Installing Git + + + +You can download Git from [git-scm.com](https://git-scm.com/). You can hit "next" on all steps except for two: in the step where it asks to choose your editor, you should pick Nano, and in the step entitled "Adjusting your PATH environment", choose "Use Git and optional Unix tools from the Windows Command Prompt" (the bottom option). Other than that, the defaults are fine. Checkout Windows-style, commit Unix-style line endings is good. + +Do not forget to restart the command prompt or PowerShell after the installation finished successfully. + + + + +Download Git from [https://git-scm.com/download/mac](https://git-scm.com/download/mac) and follow the instructions. + +> **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) + +> It is recommended to install using brew (you may need to install homebrew if you don't already have it): +> ```brew install git``` +> +> Please note that some Mac M1/M2/M3 users may have the error `zsh: command not found: brew`. In that case, please follow [this](https://stackoverflow.com/a/66019047) or [this](https://mac.install.guide/homebrew/zsh-command-not-found-brew) to fix the error. + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo apt install git +``` + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo zypper install git +``` + + diff --git a/en/deploy/pythonanywhere.md b/en/deploy/pythonanywhere.md new file mode 100644 index 00000000000..11cb64c5786 --- /dev/null +++ b/en/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/{{ book.docs_version }}/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](https://help.pythonanywhere.com/pages/DebuggingImportError). + +And remember, your coach is here to help! diff --git a/en/deploy/signup_pythonanywhere.md b/en/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..f4eefc3bf7c --- /dev/null +++ b/en/deploy/signup_pythonanywhere.md @@ -0,0 +1,21 @@ +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. + +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). + +* [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) diff --git a/en/django/README.md b/en/django/README.md new file mode 100644 index 00000000000..acb6a9f2358 --- /dev/null +++ b/en/django/README.md @@ -0,0 +1,27 @@ +# What is Django? + +Django (/ˈdʒæŋɡoʊ/ _jang-goh_) is a free and open source web application framework, written in Python. A web framework is a set of components that helps you to develop websites faster and easier. + +When you're building a website, you always need a similar set of components: a way to handle user authentication (signing up, signing in, signing out), a management panel for your website, forms, a way to upload files, etc. + +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. + +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. + +## Why do you need a framework? + +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. + +Imagine a mailbox (port) which is monitored for incoming letters (requests). This is done by a web server. The web server reads the letter and then sends a response with a webpage. But when you want to send something, you need to have some content. And Django is something that helps you create the content. + +## What happens when someone requests a website from your server? + +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*). + +Imagine a mail carrier with a letter. She is walking down the street and checks each house number against the one on the letter. If it matches, she puts the letter there. This is how the urlresolver works! + +In the *view* function, all the interesting things are done: we can look at a database to look for some information. Maybe the user asked to change something in the data? 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. + +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. + +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! diff --git a/en/django_admin/README.md b/en/django_admin/README.md new file mode 100644 index 00000000000..d9c482e60d2 --- /dev/null +++ b/en/django_admin/README.md @@ -0,0 +1,57 @@ +# Django admin + +To add, edit and delete the posts we've just modeled, we will use Django admin. + +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) +``` + +As you can see, we import (include) the Post model defined in the previous chapter. To make our model visible on the admin page, we need to register the model with `admin.site.register(Post)`. + +OK, time to look at our Post model. Remember to run `python manage.py runserver` in the console to run the web server. 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](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. + +> 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. + +{% filename %}macOS or Linux:{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py createsuperuser +``` + +{% filename %}Windows:{% endfilename %} +``` +(myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser +``` + +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): + +``` +Username: ola +Email address: ola@example.com +Password: +Password (again): +Superuser created successfully. +``` + +Return to your browser. Log in with the superuser's credentials you chose; you should see the Django admin dashboard. + +![Django admin](images/django_admin3.png) + +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. :) + +Make sure that at least two or three posts (but not all) have the publish date set. It will be helpful later. + +![Django admin](images/edit_post3.png) + +If you want to know more about Django admin, you should check Django's documentation: https://docs.djangoproject.com/en/{{ book.docs_version }}/ref/contrib/admin/ + +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! diff --git a/en/django_admin/images/django_admin3.png b/en/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/en/django_admin/images/django_admin3.png differ diff --git a/en/django_admin/images/edit_post3.png b/en/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/en/django_admin/images/edit_post3.png differ diff --git a/en/django_admin/images/login_page2.png b/en/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/en/django_admin/images/login_page2.png differ diff --git a/en/django_forms/README.md b/en/django_forms/README.md new file mode 100644 index 00000000000..87df9d91699 --- /dev/null +++ b/en/django_forms/README.md @@ -0,0 +1,459 @@ +# Django Forms + +The final thing we want to do on our website is create a nice way to add and edit blog posts. Django's `admin` is cool, but it is rather hard to customize and make pretty. With `forms` we will have absolute power over our interface – we can do almost anything we can imagine! + +The nice thing about Django forms is that we can either define one from scratch or create a `ModelForm` which will save the result of the form to the model. + +This is exactly what we want to do: we will create a form for our `Post` model. + +Like every important part of Django, forms have their own file: `forms.py`. + +We need to create a file with this name in the `blog` directory. + +``` +blog + └── forms.py +``` + +OK, let's open it in the code editor and type the following code: + +{% filename %}blog/forms.py{% endfilename %} +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text') +``` + +We need to import Django forms first (`from django import forms`) and our `Post` model (`from .models import Post`). + +`PostForm`, as you probably suspect, is the name of our form. 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. + +Next, we have `class Meta`, where we tell Django which model should be used to create this form (`model = Post`). + +Finally, we can say which field(s) should end up in our form. 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? + +And that's it! All we need to do now is use the form in a *view* and display it in a template. + +So once again we will create a link to the page, a URL, a view and a template. + +## Link to a page with the form + +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. + +> You can download all the Bootstrap icons [here](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.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` + +After editing the line, your HTML file should now look like this: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +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 + +We open `blog/urls.py` in the code editor and add a line: + +{% filename %}blog/urls.py{% endfilename %} +```python +path('post/new/', views.post_new, name='post_new'), +``` + +And the final code will look like this: + +{% filename %}blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +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 + +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 +``` + +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}) +``` + +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. + +## Template + +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: + +- 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: `...`. +- We need a `Save` button. We do that with an HTML button: ``. +- And finally, just after the opening `
` tag we need to add {% raw %}`{% csrf_token %}`{% endraw %}. This is very important, since it makes your forms secure! If you forget about this bit, Django will complain when you try to save the form: + +![CSRF Forbidden page](images/csrf2.png) + +OK, so let's see how the HTML in `post_edit.html` should look: + +{% filename %}blog/templates/blog/post_edit.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +Time to refresh! Yay! Your form is displayed! + +![New form](images/new_form2.png) + +But, wait a minute! When you type something in the `title` and `text` fields and try to save it, what will happen? + +Nothing! We are once again on the same page and our text is gone… and no new post is added. So what went wrong? + +The answer is: nothing. We need to do a little bit more work in our *view*. + +## Saving the form + +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}) +``` + +When we submit the form, we are brought back to the same view, but this time the `request` parameter is different. If we look at the `request.method` it will be `"POST"` (method for sending forms) instead of `"GET"` (method for requesting pages) and the `request.POST` attribute will contain all the fields from the form. The naming has nothing to do with a blog "post"; it's to do with the fact that we're "posting" data. + +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() +``` + +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: + +{% 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()`. + +We check if the form is valid and if so, we can save 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() +``` + +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! + +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 +``` + +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! + +OK, we've talked a lot, but we probably want to see what the whole *view* looks like now, right? + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +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! + +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__. + +That is awesome! + +> 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. + +![Logged in error](images/post_create_error.png) + + +## Form validation + +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. + +Try to save the form without `title` and `text`. Guess what will happen! + +![Form validation](images/form_validation2.png) + +Django is taking care to validate that all the fields in our form are correct. Isn't it awesome? + + +## Edit form + +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/`. + +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 + +``` + +so that the template will look like this: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +Open `blog/urls.py` in the code editor, and add this line: + +{% filename %}blog/urls.py{% endfilename %} +```python + 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*. + +Let's open `blog/views.py` in the code editor and add this at the very end of the file: + +{% 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('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: + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(instance=post) +``` + +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: + +![Edit button](images/edit_button2.png) + +When you click it you will see the form with our blog post: + +![Edit form](images/edit_form2.png) + +Feel free to change the title or the text and save the changes! + +Congratulations! Your application is getting more and more complete! + +If you need more information about Django forms, you should read the documentation: https://docs.djangoproject.com/en/{{ book.docs_version }}/topics/forms/ + +## Security + +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: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +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 %} +``` + +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. + +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. + +Open `blog/templates/blog/post_detail.html` in the code editor and find this line: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +Change it to this: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +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! + +## One more thing: deploy time! + +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 +``` + +* Then, in a [PythonAnywhere Bash console](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.) + + +* 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. + + +And that should be it. Congrats! :) diff --git a/en/django_forms/images/csrf2.png b/en/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/en/django_forms/images/csrf2.png differ diff --git a/en/django_forms/images/drafts.png b/en/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/en/django_forms/images/drafts.png differ diff --git a/en/django_forms/images/edit_button2.png b/en/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/en/django_forms/images/edit_button2.png differ diff --git a/en/django_forms/images/edit_form2.png b/en/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/en/django_forms/images/edit_form2.png differ diff --git a/en/django_forms/images/form_validation2.png b/en/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/en/django_forms/images/form_validation2.png differ diff --git a/en/django_forms/images/new_form2.png b/en/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/en/django_forms/images/new_form2.png differ diff --git a/en/django_forms/images/post_create_error.png b/en/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/en/django_forms/images/post_create_error.png differ diff --git a/en/django_installation/README.md b/en/django_installation/README.md new file mode 100644 index 00000000000..e5e8b62d653 --- /dev/null +++ b/en/django_installation/README.md @@ -0,0 +1,7 @@ +# Django installation + +> **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" %} diff --git a/en/django_installation/instructions.md b/en/django_installation/instructions.md new file mode 100644 index 00000000000..55c709a01a2 --- /dev/null +++ b/en/django_installation/instructions.md @@ -0,0 +1,238 @@ +> 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. The django-marcador tutorial +is copyrighted by Markus Zapke-Gründemann et al. + + +## Virtual environment + +Before we install Django we will get you to install an extremely useful tool to help keep your coding environment tidy on your computer. It's possible to skip this step, but it's highly recommended to follow it. Starting with the best possible setup will save you a lot of trouble in the future! + +So, let's create a **virtual environment** (also called a *virtualenv*). Virtualenv will isolate your Python/Django setup on a per-project basis. This means that any changes you make to one website won't affect any others you're also developing. Neat, right? + +All you need to do is find a directory in which you want to create the `virtualenv`; your home directory, for example. 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`. + +For this tutorial we will be using a new directory `djangogirls` from your home directory: + +{% filename %}command-line{% endfilename %} +``` +$ mkdir djangogirls +$ cd djangogirls +``` + +We will make a virtualenv called `myvenv`. The general command will be in the format: + +{% 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: + +{% filename %}command-line{% endfilename %} +``` +C:\Users\Name\djangogirls> python -m venv myvenv +``` + +Where `myvenv` is the name of your `virtualenv`. You can use any other name, but stick to lowercase and use no spaces, accents or special characters. It is also a good idea to keep the name short – you'll be referencing it a lot! + + + + + +We can create a `virtualenv` on both Linux and macOS by running `python3 -m venv myvenv`. +It will look like this: + +{% filename %}command-line{% endfilename %} +``` +$ python3 -m venv myvenv +``` + +`myvenv` is the name of your `virtualenv`. You can use any other name, but stick to lowercase and use no spaces. 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 +>``` + +> To get around this, use the `virtualenv` command instead. + +>{% 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 +>``` + + + + +## Working with virtualenv + +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). + + + +Start your virtual environment by running: + +{% filename %}command-line{% endfilename %} +``` +C:\Users\Name\djangogirls> myvenv\Scripts\activate +``` + +> __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 https://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 + + + + + +Start your virtual environment by running: + +{% filename %}command-line{% endfilename %} +``` +$ 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 +>``` + + + +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) ~$ python -m pip install --upgrade pip +``` + +### Installing packages with requirements + +A requirements file keeps a list of dependencies to be installed using +`pip install`: + +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: + +``` +djangogirls +├── myvenv +│ └── ... +└───requirements.txt +``` + +In your `djangogirls/requirements.txt` file you should add the following text: + +{% filename %}djangogirls/requirements.txt{% endfilename %} +``` +Django~={{ book.django_version }} +``` + +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 +>``` + + + + + +> 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. + + + +That's it! You're now (finally) ready to create a Django application! diff --git a/en/django_models/README.md b/en/django_models/README.md new file mode 100644 index 00000000000..c1ec802ab9f --- /dev/null +++ b/en/django_models/README.md @@ -0,0 +1,202 @@ +# Django models + +What we want to create now is something that will store all the posts in our blog. But to be able to do that we need to talk a little bit about things called `objects`. + +## Objects + +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. + +So what is an object? It is a collection of properties and actions. It sounds weird, but we will give you an example. + +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). + +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 +``` + +So basically the idea is to describe real things in code with properties (called `object properties`) and actions (called `methods`). + +How will we model blog posts then? We want to build a blog, right? + +We need to answer the question: What is a blog post? What properties should it have? + +Well, for sure our blog post needs some text with its content and a title, right? It would be also nice to know who wrote it – so we need an author. Finally, we want to know when the post was created and published. + +``` +Post +-------- +title +text +author +created_date +published_date +``` + +What kind of things could be done with a blog post? It would be nice to have some `method` that publishes the post, right? + +So we will need a `publish` method. + +Since we already know what we want to achieve, let's start modeling it in Django! + +## Django model + +Knowing what an object is, we can create a Django model for our blog post. + +A model in Django is a special kind of object – it is saved in the `database`. A database is a collection of data. This is a place in which you will store information about users, your blog posts, etc. We will be using a SQLite database to store our data. This is the default Django database adapter – it'll be enough for us right now. + +You can think of a model in the database as a spreadsheet with columns (fields) and rows (data). + +### Creating an application + +To keep everything tidy, we will create a separate application inside our project. It is very nice to have everything organized from the very beginning. To create an application we need to run the following command in the console (from `djangogirls` directory where `manage.py` file is): + +{% filename %}macOS and Linux:{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py startapp blog +``` + +{% 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', +] +``` + +### Creating a blog post model + +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: + +{% filename %}blog/models.py{% endfilename %} +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Double-check that you use two underscore characters (`_`) on each side of `str`. This convention is used frequently in Python and sometimes we also call them "dunder" (short for "double-underscore"). + +It looks scary, right? But don't worry – we will explain what these lines mean! + +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 ...`. + +`class Post(models.Model):` – this line defines our model (it is an `object`). +- `class` is a special keyword that indicates that we are defining an object. +- `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` means that the Post is a Django Model, so Django knows that it should be saved in the database. + +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?) + +- `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. + +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/{{ book.docs_version }}/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`. + +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. + +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. + +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! + +### Create tables for models in your database + +The last step here is to add our new model to our database. First we have to make Django know that we have some changes in our model. (We have just created it!) Go to your console window and type `python manage.py makemigrations blog`. It will look like this: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py makemigrations blog +Migrations for 'blog': + blog/migrations/0001_initial.py + - Create model Post +``` + +**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! diff --git a/en/django_orm/README.md b/en/django_orm/README.md new file mode 100644 index 00000000000..b14ceb944c7 --- /dev/null +++ b/en/django_orm/README.md @@ -0,0 +1,214 @@ +# Django ORM and QuerySets + +In this chapter you'll learn how Django connects to the database and stores data in it. Let's dive in! + + +## What is a QuerySet? + +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. + +It's easier to learn by example. Let's try this, shall we? + + +## Django shell + +Open up your local console (not on PythonAnywhere) and type this command: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py shell +``` + +The effect should be like this: + +{% filename %}command-line{% endfilename %} +```python +(InteractiveConsole) +>>> +``` + +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. + + +### All objects + +Let's try to display all of our posts first. You can do that with the following command: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +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 +``` + +We import the model `Post` from `blog.models`. Let's try displaying all posts again: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +, ]> +``` + +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? + + +### Create object + +This is how you create a new Post object in database: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +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? + +Let's import User model first: + +{% filename %}command-line{% endfilename %} +```python +>>> from django.contrib.auth.models import User +``` + +What users do we have in our database? Try this: + +{% 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): + +{% filename %}command-line{% endfilename %} +```python +>>> me = User.objects.get(username='ola') +``` + +As you can see, we now `get` a `User` with a `username` that equals 'ola'. Neat! + +Now we can finally create our post: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Hurray! Wanna check if it worked? + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +, , ]> +``` + +There it is, one more post in the list! + + +### Add more posts + +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. + + +### Filter objects + +A big part of QuerySets is the ability to filter them. Let's say we want to find all posts that user ola authored. We will use `filter` instead of `all` in `Post.objects.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`. Now our piece of code looks like this: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +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') +, ]> +``` + +> **Note** There are two underscore characters (`_`) between `title` and `contains`. 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". + +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()) + +``` + +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") +``` + +And then publish it with our `publish` method: + +{% filename %}command-line{% endfilename %} +```python +>>> post.publish() +``` + +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()) +]> +``` + + +### Ordering objects + +QuerySets also allow you to order the list of objects. Let's try to order them by `created_date` field: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +We can also reverse the ordering by adding `-` at the beginning: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + + +### Complex queries through method-chaining + +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') +, , , ]> +``` + +This is really powerful and lets you write quite complex queries. + +Cool! You're now ready for the next part! To close the shell, type this: + +{% filename %}command-line{% endfilename %} +```python +>>> exit() +$ +``` diff --git a/en/django_start_project/README.md b/en/django_start_project/README.md new file mode 100644 index 00000000000..577ead8459b --- /dev/null +++ b/en/django_start_project/README.md @@ -0,0 +1,279 @@ +# Your first Django project! + +> 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. The django-marcador tutorial +is copyrighted by Markus Zapke-Gründemann et al. + +We're going to create a small blog! + +The first step is to start a new Django project. Basically, this means that we'll run some scripts provided by Django that will create the skeleton of a Django project for us. This is just a bunch of directories and files that we will use later. + +The names of some files and directories are very important for Django. You should not rename the files that we are about to create. Moving them to a different place is also not a good idea. Django needs to maintain a certain structure to be able to find important things. + +> Remember to run everything in the virtualenv. If you don't see a prefix `(myvenv)` in your console, you need to activate your virtualenv. We explained how to do that in the __Django installation__ chapter in the __Working with virtualenv__ part. Typing `myvenv\Scripts\activate` on Windows or +`source myvenv/bin/activate` on macOS or Linux will do this for you. + + + +In your macOS or Linux console, you should run the following command. **Don't forget to add the period (or dot) `.` at the end!** + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ django-admin startproject mysite . +``` + +> The period `.` is crucial because it tells the script to install Django in your current directory (for which the period `.` is a short-hand reference). + +> **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 . +``` +> The period `.` is crucial because it tells the script to install Django in your current directory (for which the period `.` is a short-hand reference). + +> **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` is a script that will create the directories and files for you. You should now have a directory structure which looks like this: + +``` +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` is a script that helps with management of the site. With it we will be able (among other things) to start a web server on our computer without installing anything else. + +The `settings.py` file contains the configuration of your website. + +Remember when we talked about a mail carrier checking where to deliver a letter? `urls.py` file contains a list of patterns used by `urlresolver`. + +Let's ignore the other files for now as we won't change them. The only thing to remember is not to delete them by accident! + + +## Changing settings + +Let's make some changes in `mysite/settings.py`. Open the file using the code editor you installed earlier. + +**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 action. 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. + +#### Changing the Timezone + +It would be nice to have the correct time on our website. 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`). + +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/Berlin' +``` + +> **Note**: Timezones should be in the Region/City format, so eg "EDT" is not valid, but "America/Detroit" is. + + +#### Changing the Language + +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/{{ book.docs_version }}/ref/settings/#language-code). + +If you want a different language, change the language code by changing the following line: + +{% filename %}mysite/settings.py{% endfilename %} +```python +LANGUAGE_CODE = 'de-ch' +``` + + +#### Other settings + +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 = BASE_DIR / 'static' +``` + +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 = ['localhost', '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 + +There's a lot of different database software that can store data for your site. We'll use the default one, `sqlite3`. + +This is already set up in this part of your `mysite/settings.py` file: + +{% filename %}mysite/settings.py{% endfilename %} +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +To create a database for our blog, let's run the following in the console: `python manage.py migrate` (we need to be in the `djangogirls` directory that contains the `manage.py` file). If that goes well, you should see something like this: + +{% filename %}command-line{% endfilename %} +``` +(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 +``` + +And we're done! Time to start the web server and see if our website is working! + +## Starting the web server + +You need to be in the directory that contains the `manage.py` file (the `djangogirls` directory). In the console, we can start the web server by running `python manage.py runserver`: + +{% 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 +``` + +You can open this in another browser window and you should see the Django install worked page. + +Congratulations! You've just created your first website and run it using a web server! Isn't that awesome? + +![Install worked!](images/install_worked.png) + +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. + +> We reviewed how web servers work in the How the Internet works chapter. + +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). + +Ready for the next step? It's time to create some content! diff --git a/en/django_start_project/images/install_worked.png b/en/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..c20c9c973c0 Binary files /dev/null and b/en/django_start_project/images/install_worked.png differ diff --git a/en/django_templates/README.md b/en/django_templates/README.md new file mode 100644 index 00000000000..6086ba883d5 --- /dev/null +++ b/en/django_templates/README.md @@ -0,0 +1,106 @@ +# Django templates + +Time to display some data! Django gives us some helpful built-in __template tags__ for that. + +## What are template tags? + +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 template tags__ allow us to transfer Python-like things into HTML, so you can build dynamic websites faster. Cool! + +## Display post list template + +In the previous chapter we gave our template a list of posts in the `posts` variable. Now we will display it in HTML. + +To print a variable in Django templates, we use double curly brackets with the variable's name inside, like this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{{ posts }} +``` + +Try this in your `blog/templates/blog/post_list.html` template. Open it up in the code editor, and replace the existing `
` elements with `{{ posts }}`. Save the file, and refresh the page to see the results: + +![Figure 13.1](images/step1.png) + +As you can see, all we've got is this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +, ]> +``` + +This means that Django understands it as a list of objects. Remember from __Introduction to Python__ how we can display lists? Yes, with for loops! In a Django template you do them like this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Try this in your template. + +![Figure 13.2](images/step2.png) + +It works! But we want the posts to be displayed like the static posts we created earlier in the __Introduction to HTML__ chapter. You can mix HTML and template tags. Our `body` will look like this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Everything you put between `{% for %}` and `{% endfor %}` will be repeated for each object in the list. Refresh your page:{% endraw %} + +![Figure 13.3](images/step3.png) + +Have you noticed that we used a slightly different notation this time (`{{ post.title }}` or `{{ post.text }}`)? We are accessing data in each of the fields defined in our `Post` model. Also, the `|linebreaksbr` is piping the posts' text through a filter to convert line-breaks into paragraphs. + + +## One more thing + +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… + +* First, push your code to GitHub + +{% filename %}command-line{% endfilename %} +``` +$ git status +[...] +$ git add . +$ git status +[...] +$ git commit -m "Modified templates to display posts from database." +[...] +$ git push +``` + +* Then, log back in to [PythonAnywhere](https://www.pythonanywhere.com/consoles/) and go to your **Bash console** (or start a new one), and run: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd .pythonanywhere.com +$ git pull +[...] +``` + +(Remember to substitute `` with your actual PythonAnywhere subdomain, without the angle-brackets.) + +* 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. + + +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. + +Works like a charm? We're proud! Step away from your computer for a bit – you have earned a break. :) + +![Figure 13.4](images/donut.png) diff --git a/en/django_templates/images/donut.png b/en/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/en/django_templates/images/donut.png differ diff --git a/en/django_templates/images/step1.png b/en/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/en/django_templates/images/step1.png differ diff --git a/en/django_templates/images/step2.png b/en/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/en/django_templates/images/step2.png differ diff --git a/en/django_templates/images/step3.png b/en/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/en/django_templates/images/step3.png differ diff --git a/en/django_urls/README.md b/en/django_urls/README.md new file mode 100644 index 00000000000..0fc196b184d --- /dev/null +++ b/en/django_urls/README.md @@ -0,0 +1,115 @@ +# Django URLs + +We're about to build our first webpage: a homepage for your blog! But first, let's learn a little bit about Django URLs. + +## What is a 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` is a URL! And `https://djangogirls.org` is also a URL.) + +![URL](images/url.png) + +Every page on the Internet needs its own 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. + +## How do URLs work in Django? + +Let's open up the `mysite/urls.py` file in your code editor of choice and see what it looks like: + + +{% filename %}mysite/urls.py{% endfilename %} +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +As you can see, Django has already put something here for us. + +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. + +The admin URL, which you visited in the previous chapter, is already here: + +{% filename %}mysite/urls.py{% endfilename %} +```python + path('admin/', admin.site.urls), +``` + +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. + + +## Your first 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. + +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. + +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. + +Your `mysite/urls.py` file should now look like this: + +{% filename %}mysite/urls.py{% endfilename %} +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +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 + +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.urls import path +from . import views +``` + +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: + +{% filename %}blog/urls.py{% endfilename %} +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +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. + +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. + +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. + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +``` + 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' +``` + +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. + + +> If you want to know more about Django URLconfs, look at the official documentation: https://docs.djangoproject.com/en/{{ book.docs_version }}/topics/http/urls/ diff --git a/en/django_urls/images/url.png b/en/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/en/django_urls/images/url.png differ diff --git a/en/django_views/README.md b/en/django_views/README.md new file mode 100644 index 00000000000..106072c1906 --- /dev/null +++ b/en/django_views/README.md @@ -0,0 +1,48 @@ +# Django views – time to create! + +Time to get rid of the bug we created in the last chapter! :) + +A *view* is a place where we put the "logic" of our application. The views do the following: + +1. Receive the `request` information (current user session and other stuff) as well as parameters parsed from the url (for example, the id of a blog post) +2. Fetch the information from the `model`, probably adding some logic (like filtering logic to show only the published posts) +3. Create a response by filling a `template` with the fetched info + +We'll create a template in the next chapter. Now we'll create a view. Technically, views are Python functions, exactly like the ones we wrote in the __Introduction to Python__ chapter. These functions take `request` as a parameter and return `HttpResponse`. You shouldn't worry about the type of the return value because another function from the Django framework will construct it for us. + +Views are placed in the `views.py` file. We will add our *views* to the `blog/views.py` file. + +## blog/views.py + +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. + +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', {}) +``` + +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`. + +Save the file, go to http://127.0.0.1:8000/ and see what we've got. + +Another error! Read what's going on now: + +![Error](images/error.png) + +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! + +> Learn more about Django views by reading the official documentation: https://docs.djangoproject.com/en/{{ book.docs_version }}/topics/http/views/ diff --git a/en/django_views/images/error.png b/en/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/en/django_views/images/error.png differ diff --git a/en/dynamic_data_in_templates/README.md b/en/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..bca1cbc03d3 --- /dev/null +++ b/en/dynamic_data_in_templates/README.md @@ -0,0 +1,78 @@ +# Dynamic data in templates + +We have different pieces in place: the `Post` model is defined in `models.py`, we have `post_list` in `views.py` and the template added. But how will we actually make our posts appear in our HTML template? Because that is what we want to do – take some content (models saved in the database) and display it nicely in our template, right? + +This is exactly what *views* are supposed to do: connect models and templates. 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, so how will we achieve this? + +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', {}) +``` + +Remember when we talked about including code written in different files? 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: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from .models import 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`). Then we import the name of the model (`Post`). + +But what's next? To take actual blog posts from the `Post` model we need something called `QuerySet`. + +## QuerySet + +You should already be familiar with how QuerySets work. We talked about them in [Django ORM (QuerySets) chapter](../django_orm/README.md). + +So now we want published blog posts sorted by `published_date`, right? We already did that in QuerySets chapter! + +{% filename %}blog/views.py{% endfilename %} +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +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 +from django.utils import timezone +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', {}) +``` + +To display our QuerySet on our blog's post list, we have two things left to do: +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. + +Please note that we create a *variable* for our QuerySet: `posts`. Treat this as the name of our QuerySet. From now on we can refer to it by this name. + +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. We need to give them names (we will stick to `'posts'` right now). :) It should look like this: `{'posts': posts}`. Please note that the part before `:` is a string; you need to wrap it with quotes: `''`. + +So finally our `blog/views.py` file should look like this: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +That's it! Time to go back to our template and display this QuerySet! + +Want to read a little bit more about QuerySets in Django? You should look here: https://docs.djangoproject.com/en/{{ book.docs_version }}/ref/models/querysets/ diff --git a/en/extend_your_application/README.md b/en/extend_your_application/README.md new file mode 100644 index 00000000000..2928d86a0a9 --- /dev/null +++ b/en/extend_your_application/README.md @@ -0,0 +1,223 @@ +{% set warning_icon = '' %} + +# Extend your application + +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. + +Time to practice! + +The first thing we need in our blog is, obviously, a page to display one post, right? + +We already have a `Post` model, so we don't need to add anything to `models.py`. + +## Create a template link to a post's detail + +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.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 %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} +```html +

{{ post.title }}

+``` + +{% 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 %} + +The `post_detail` part means that Django will be expecting a URL in `blog/urls.py` with `name=post_detail`. + +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! + +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: + +![NoReverseMatch error](images/no_reverse_match2.png) + +## Create a URL to a post's detail + +Let's create a URL in `urls.py` for our `post_detail` *view*! + +We want our first post's detail to be displayed at this **URL**: http://127.0.0.1:8000/post/1/ + +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.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +This part ``post//`` specifies a URL pattern – we will explain it for you: +- `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. + +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, 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! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +``` + 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' +``` + +Do you remember what the next step is? It's adding a view! + +## Add a post's detail view + +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! + + +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) +``` + +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](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. + +![Page not found](images/404_2.png) + +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. + +OK, time to add a *view* to our `views.py` file! + +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`. + +We should open `blog/views.py` in the code editor and add the following code near the other `from` lines: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render, get_object_or_404 +``` + +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}) +``` + +Yes. It is time to refresh the page: http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +It worked! But what happens when you click a link in blog post title? + +![TemplateDoesNotExist error](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! + +## Create a template for the post details + +We will create a file in `blog/templates/blog` called `post_detail.html`, and open it in the code editor. + +Enter the following code: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +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 %}` 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, we can refresh our page and see if `TemplateDoesNotExist` is gone now. + +![Post detail page](images/post_detail2.png) + +Yay! It works! + + +# Deploy time! + +It'd be good to see if your website still works on PythonAnywhere, right? Let's try deploying again. + +{% filename %}command-line{% endfilename %} +``` +$ 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 +``` + +Then, in a [PythonAnywhere Bash console](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.) + + +## 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 +[...] +``` + +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. + +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. + +And that should be it. Congrats! :) diff --git a/en/extend_your_application/images/404_2.png b/en/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/en/extend_your_application/images/404_2.png differ diff --git a/en/extend_your_application/images/does_not_exist2.png b/en/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/en/extend_your_application/images/does_not_exist2.png differ diff --git a/en/extend_your_application/images/no_reverse_match2.png b/en/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/en/extend_your_application/images/no_reverse_match2.png differ diff --git a/en/extend_your_application/images/post_detail2.png b/en/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/en/extend_your_application/images/post_detail2.png differ diff --git a/en/extend_your_application/images/post_list2.png b/en/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/en/extend_your_application/images/post_list2.png differ diff --git a/en/extend_your_application/images/template_does_not_exist2.png b/en/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/en/extend_your_application/images/template_does_not_exist2.png differ diff --git a/en/how_the_internet_works/README.md b/en/how_the_internet_works/README.md new file mode 100644 index 00000000000..ad7bc9cce29 --- /dev/null +++ b/en/how_the_internet_works/README.md @@ -0,0 +1,50 @@ +# How the Internet works + +> 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 (https://web.mit.edu/jesstess/www/). + +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`? + +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. + +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. Web browsers are designed to understand this code, +follow its instructions, and present these files that your website is made of, exactly the way you want. + +As with every file, we need to store HTML files somewhere on a hard disk. For the Internet, we use special, powerful computers called *servers*. They don't have +a screen, mouse or a keyboard, because their main purpose is to store data and serve it. That's why they're called *servers* – because they *serve* you data. + +OK, but you want to know how the Internet looks, right? + +We drew you a picture! It looks like this: + +![Figure 1.1](images/internet_1.png) + +Looks like a mess, right? In fact it is a network of connected machines (the above-mentioned *servers*). Hundreds of thousands of machines! Many, many kilometers of cables around the world! You can visit a Submarine Cable Map website (https://submarinecablemap.com) to see how complicated the net is. Here is a screenshot from the website: + +![Figure 1.2](images/internet_3.png) + +It is fascinating, isn't it? 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. + +It looks like this: + +![Figure 1.3](images/internet_2.png) + +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!" + +Your letter goes to the post office closest to you. Then it goes to another that is a bit nearer to your addressee, then to another, and another until it is delivered at its destination. The only unique thing is that if you send many letters (*data packets*) to the same place, they could go through totally different post offices (*routers*). This depends on how they are distributed at each office. + +![Figure 1.4](images/internet_4.png) + +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! + +Instead of addresses with a street name, city, zip code and country name, we use IP addresses. Your computer first asks the DNS (Domain Name System) to translate `djangogirls.org` into an IP address. 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. + +When you send a letter, it needs to have certain features to be delivered correctly: an address, a stamp, etc. You also use a language that the receiver understands, right? The same applies to the *data packets* you send to see a website. We use a protocol called HTTP (Hypertext Transfer Protocol). + +So, basically, when you have a website, you need to have a *server* (machine) where it lives. When the *server* receives an incoming *request* (in a letter), it sends back your website (in another letter). + +Since this is a Django tutorial, you might ask what Django does. When you send a response, you don't always want to send the same thing to everybody. It is so much better if your letters are personalized, especially for the person that has just written to you, right? Django helps you with creating these personalized, interesting letters. :) + +Enough talk – time to create! diff --git a/en/how_the_internet_works/images/internet_1.png b/en/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/en/how_the_internet_works/images/internet_1.png differ diff --git a/en/how_the_internet_works/images/internet_2.png b/en/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/en/how_the_internet_works/images/internet_2.png differ diff --git a/en/how_the_internet_works/images/internet_3.png b/en/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/en/how_the_internet_works/images/internet_3.png differ diff --git a/en/how_the_internet_works/images/internet_4.png b/en/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/en/how_the_internet_works/images/internet_4.png differ diff --git a/en/html/README.md b/en/html/README.md new file mode 100644 index 00000000000..a3dd63d8cee --- /dev/null +++ b/en/html/README.md @@ -0,0 +1,226 @@ +# Introduction to HTML + +What's a template, you may ask? + +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. + +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__). + +## What is HTML? + +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 stands for "HyperText Markup Language". __HyperText__ means it's a type of text that supports hyperlinks between pages. __Markup__ means we have taken a document and marked it up with code to tell something (in this case, a browser) how to interpret the page. HTML code is built with __tags__, each one starting with `<` and ending with `>`. These tags represent markup __elements__. + +## Your first template! + +Creating a template means creating a template file. Everything is a file, right? You have probably noticed this already. + +Templates are saved in `blog/templates/blog` directory. So first create a directory called `templates` inside your blog directory. Then create another directory called `blog` inside your templates directory: + +``` +blog +└───templates + └───blog +``` + +(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.) + +And now create a `post_list.html` file (just leave it blank for now) inside the `blog/templates/blog` directory. + +See how your website looks now: http://127.0.0.1:8000/ + +> If you still have an error `TemplateDoesNotExist`, try to restart your 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](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. + +Open the new file in the code editor, and add the following: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + + +

Hi there!

+

It works!

+ + +``` + +So how does your website look now? Visit it to find out: http://127.0.0.1:8000/ + +![Figure 11.2](images/step3.png) + +It worked. Nice work there! :) + +- 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 + +## Head and body + +Each HTML page is also divided into two elements: __head__ and __body__. + +- __head__ is an element that contains information about the document that is not displayed on the screen. + +- __body__ is an element that contains everything else that is displayed as part of the web page. + +We use `` to tell the browser about the configuration of the page, and `` to tell it what's actually on the page. + +For example, you can put a web page title element inside the ``, like this: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Save the file and refresh your page. + +![Figure 11.3](images/step4.png) + +Notice how the browser has understood that "Ola's blog" is the title of your page? It has interpreted `Ola's blog` and placed the text in the title bar of your browser (it will also be used for bookmarks and so on). + +Probably you have also noticed that each opening tag is matched by a _closing tag_, with a `/`, and that elements are _nested_ (i.e. you can't close a particular tag until all the ones that were inside it have been closed too). + +It's like putting things into boxes. You have one big box, ``; inside it there is ``, and that contains still smaller boxes: `

`. + +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. + +## Customize your template + +You can now have a little fun and try to customize your template! Here are a few useful tags for that: + +- `

A heading

` for your most important heading +- `

A sub-heading

` for a heading at the next level +- `

A sub-sub-heading

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

A paragraph of text

` +- `text` emphasizes your text +- `text` strongly emphasizes your text +- `
` goes to another line (you can't put anything inside br and there's no closing tag) +- `link` creates a link +- `
  • first item
  • second item
` makes a list, just like this one! +- `
` defines a section of the page +- `` 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

+
+ +
+ +

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.

+
+ +
+ +

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.

+
+ + +``` + +We've created one `header` section and two `article` section here. + +- 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. + +It gives us this effect: + +![Figure 11.4](images/step6.png) + +Yaaay! 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__. + +What we really want to do is display real posts added in our Django admin – and that's where we're going next. + +## One more thing: deploy! + +It'd be good to see all this out and live on the Internet, right? Let's do another PythonAnywhere deploy: + +### Commit, and push your code up to GitHub + +First off, let's see what files have changed since we last deployed (run these commands locally, not on PythonAnywhere): + +{% filename %}command-line{% endfilename %} +``` +$ git status +``` + +Make sure you're in the `djangogirls` directory and let's tell `git` to include all the changes in this directory: + +{% filename %}command-line{% endfilename %} +``` +$ git add . +``` + +Before we upload all the files, let's check what `git` will be uploading (all the files that `git` will upload should now appear in green): + +{% filename %}command-line{% endfilename %} +``` +$ git status +``` + +We're almost there, now it's time to tell it to save this change in its history. We're going to give it a "commit message" where we describe what we've changed. You can type anything you'd like at this stage, but it's helpful to type something descriptive so that, in the future, you can remember what you've done. + +{% filename %}command-line{% endfilename %} +``` +$ git commit -m "Changed the HTML for the site." +``` + +> __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 +``` + +### Pull your new code down to PythonAnywhere, and reload your web app + +* Open up the [PythonAnywhere consoles page](https://www.pythonanywhere.com/consoles/) and go to your **Bash console** (or start a new one). Then, run: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd ~/.pythonanywhere.com +$ git pull +[...] +``` + +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. + +Now watch your code getting 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). + + +* Finally, hop on over to the ["Web" page](https://www.pythonanywhere.com/web_app_setup/) and hit **Reload** on your web app. + +Your update should be live! Go ahead and refresh your website in the browser. Changes should be visible. :) diff --git a/en/html/images/step1.png b/en/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/en/html/images/step1.png differ diff --git a/en/html/images/step3.png b/en/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/en/html/images/step3.png differ diff --git a/en/html/images/step4.png b/en/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/en/html/images/step4.png differ diff --git a/en/html/images/step6.png b/en/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/en/html/images/step6.png differ diff --git a/en/images/application.png b/en/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/en/images/application.png differ diff --git a/en/installation/README.md b/en/installation/README.md new file mode 100644 index 00000000000..32d8b16c4ea --- /dev/null +++ b/en/installation/README.md @@ -0,0 +1,81 @@ +# If you're doing the tutorial at home + +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. + +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. + +Good luck! + +# If you're attending a workshop + +If you are attending one of the [Django Girls events](https://djangogirls.org/events/): +- 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. + +# Installation +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 needed (if you are using local desktop environment) or instructed on how to create online accounts only (if you are using cloud development). This page gathers all of the installation and sign-up instructions in one place (which is useful for some workshop formats). + +# Chromebook Installation +To set up your Chromebook, follow the instructions below: + + +{% include "/chromebook_setup/instructions.md" %} + + + +# macOS, Windows, Linux Installation {#macos-windows-linux} +If you are not using a Chromebook, your experience will be a little different as you need to download and install some software locally as well as set up online accounts. + +To install software on your machine, follow the instructions below: + +## Brief intro to the command line {#intro-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" %} + +### The Command-line Prompt + +Now you know how to open a command line, +we just need to understand what the "prompt" is. + +{% include "/intro_to_command_line/prompt.md" %} + + +## Install Python {#python} +{% include "/python_installation/instructions.md" %} + +## Install a code editor {#code-editor} +{% include "/code_editor/instructions.md" %} + +## Set up virtualenv and install Django {#virtualenv} +{% include "/django_installation/instructions.md" %} + +## Install Git {#git} +{% include "/deploy/install_git.md" %} + +## Create a GitHub account {#github-account} +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). + +## Create a PythonAnywhere account {#pythonanywhere-account} +{% include "/deploy/signup_pythonanywhere.md" %} + + +# 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) + +* [Introduction to the command line](../intro_to_command_line/README.md) + +* [Introduction to Python](../python_introduction/README.md) + +* [What is Django?](../django/README.md) + + +# Enjoy the workshop! + +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. diff --git a/en/intro_to_command_line/README.md b/en/intro_to_command_line/README.md new file mode 100644 index 00000000000..49a9ca358ac --- /dev/null +++ b/en/intro_to_command_line/README.md @@ -0,0 +1,416 @@ +# Introduction to the command-line interface + +> 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! :) + +__Let us introduce you to your first new friend: the command line!__ + +The following steps will show you how to use the black window all hackers use. It might look a bit scary at first but really it's just a prompt waiting for commands from you. + +> **Note** Please note that throughout this book we use the terms 'directory' and 'folder' interchangeably but they are one and the same thing. + +## What is the command line? + +The window, which is usually called the __command line__ or __command-line interface__, is a text-based application for viewing, handling, and manipulating files on your computer. It's much like Windows Explorer or Finder on the Mac, but without the graphical interface. Other names for the command line are: *cmd*, *CLI*, *prompt*, *console* or *terminal*. + +## Open the command-line interface + +To start some experiments we need to open our command-line interface first. + +{% include "/intro_to_command_line/open_instructions.md" %} + +You now should see a white or black window that is waiting for your commands. + +### The command-line Prompt + +{% include "/intro_to_command_line/prompt.md" %} + + + +## Your first command (YAY!) + +Let's start by typing this command: + + + +{% filename %}command-line{% endfilename %} +``` +$ whoami +``` + + + + + + +{% filename %}command-line{% endfilename %} +``` +> whoami +``` + + + +And then hit `enter`. This is our result: + +{% filename %}command-line{% endfilename %} +``` +$ 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! + +## Basics + +Each operating system has a slightly different set of commands for the command line, so make sure to follow instructions for your operating system. + +If you make a typo, you can use the left and right arrow keys to move your cursor, backspace and delete to edit the command. Most command lines don't support using the mouse to move the cursor. + +Let's try this, shall we? + +### Current directory + +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 +``` + +> Note: 'pwd' stands for 'print working directory'. + + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd +C:\Users\olasitarska +``` +> Note: 'cd' stands for 'change directory'. With PowerShell you can use pwd just like on Linux or macOS. + + + +You'll probably see something similar on your machine. Once you open the command line you usually start at your user's home directory. + +--- + +### 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: + + + +macOS 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. + + + + + + +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 +Applications +Desktop +Downloads +Music +... +``` + + + + + +{% 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 macOS. + + +--- + +### 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. + + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd Desktop +``` + + +Check if it's really changed: + + + +{% filename %}command-line{% endfilename %} +``` +$ pwd +/Users/olasitarska/Desktop +``` + + + + +{% 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. + +--- + +### Create directory + +How about creating a practice directory on your desktop? You can do it this way: + + + +{% filename %}command-line{% endfilename %} +``` +$ mkdir practice +``` + + + + + +{% 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. + +--- + +### Exercise! + +A small challenge for you: in your newly created `practice` directory, create a directory called `test`. (Use the `cd` and `mkdir` commands.) + +#### Solution: + + + +{% filename %}command-line{% endfilename %} +``` +$ cd practice +$ mkdir test +$ ls +test +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd practice +> mkdir test +> dir +05/08/2020 07:28 PM test +``` + + +Congrats! :) + +--- + +### Clean up + +We don't want to leave a mess, so let's remove everything we did until that point. + +First, we need to get back to Desktop: + + + +{% filename %}command-line{% endfilename %} +``` +$ cd .. +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd .. +``` + + +Using `..` with the `cd` command will change your current directory to the parent directory (that is, the directory that contains your current directory). + +Check where you are: + + + +{% filename %}command-line{% endfilename %} +``` +$ pwd +/Users/olasitarska/Desktop +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd +C:\Users\olasitarska\Desktop +``` + + +Now time to delete the `practice` directory: + +> __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. + + + +{% filename %}command-line{% endfilename %} +``` +$ rm -r practice +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> rmdir /S practice +practice, Are you sure ? Y +``` + + +Done! To be sure it's actually deleted, let's check it: + + + +{% 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? :) + +## Summary + + Here is a summary of some useful commands: + +Command (Windows) | Command (Mac OS / Linux) | Description | Example +----------------- | ------------------------ | -------------------------- | --------------------------------------------- +exit | exit | close the window | **exit** +cd | cd | change directory | **cd test** +cd | pwd | show the current directory | **cd** (Windows) or **pwd** (Mac OS / Linux) +dir | ls | list directories/files | **dir** +copy | cp | copy file | **copy c:\test\test.txt c:\windows\test.txt** +move | mv | move file | **move c:\test\test.txt c:\windows\test.txt** +mkdir | mkdir | create a new directory | **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) + +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. + +If you're curious, [ss64.com](https://ss64.com) contains a complete reference of commands for all operating systems. + +## Ready? + +Let's dive into Python! diff --git a/en/intro_to_command_line/open_instructions.md b/en/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..75ac139f269 --- /dev/null +++ b/en/intro_to_command_line/open_instructions.md @@ -0,0 +1,27 @@ + + +Go to Launchpad → Other → 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. :) + + + + + +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. + + diff --git a/en/intro_to_command_line/prompt.md b/en/intro_to_command_line/prompt.md new file mode 100644 index 00000000000..8c0c2ca7aac --- /dev/null +++ b/en/intro_to_command_line/prompt.md @@ -0,0 +1,32 @@ + + + +If you're on Mac or Linux, you probably see a `$`, like this: + +{% filename %}command-line{% endfilename %} +``` +$ +``` + + + + + +On Windows, you probably see a `>`, like this: + +{% filename %}command-line{% endfilename %} +``` +> +``` + +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. + + + +Each command will be prepended by a `$` or `>` and one space, but you should not type it. Your computer will do it for you. :) + +> 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. + +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. diff --git a/en/python_installation/README.md b/en/python_installation/README.md new file mode 100644 index 00000000000..c2d343ec52b --- /dev/null +++ b/en/python_installation/README.md @@ -0,0 +1,16 @@ +# Let’s start with Python + +We're finally here! + +But first, let us tell you what Python is. Python is a very popular programming language that can be used for creating websites, games, scientific software, graphics, and much, much more. + +Python originated in the late 1980s and its main goal is to be readable by human beings (not only machines!). This is why it looks simpler than other programming languages, but don't worry – Python is also really powerful! + +# Python installation + +> **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" %} + diff --git a/en/python_installation/images/python-installation-options.png b/en/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a6e9850cdc6 Binary files /dev/null and b/en/python_installation/images/python-installation-options.png differ diff --git a/en/python_installation/images/windows-plus-r.png b/en/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/en/python_installation/images/windows-plus-r.png differ diff --git a/en/python_installation/instructions.md b/en/python_installation/instructions.md new file mode 100644 index 00000000000..81bf30b727c --- /dev/null +++ b/en/python_installation/instructions.md @@ -0,0 +1,115 @@ +> 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 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. + +Please install normal Python as follows, even when you have Anaconda installed on your computer. + + + +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: +* 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. + +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. + +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): + +![Don't forget to add Python to the Path](../python_installation/images/python-installation-options.png) + +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! + +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/). + +> Django {{ book.django_version }} needs Python {{ book.py_min_version }} or greater, which does not support Windows XP or earlier versions. + + + + + +> **Note** Before you install Python on macOS, 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." + +You need to go to the website https://www.python.org/downloads/ and download the latest Python installer: + +* Download Python {{ book.py_release }}, +* Double click *python-{{ book.py_release }}-macos11.pkg* to run the installer. + + + + + +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: + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python {{ book.py_release }} +``` + +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 which Linux distribution you are using with the following command: + +{% 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 that was opened before the Python installation. + +---- + +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. diff --git a/en/python_introduction/README.md b/en/python_introduction/README.md new file mode 100644 index 00000000000..e3798b6da3e --- /dev/null +++ b/en/python_introduction/README.md @@ -0,0 +1,1002 @@ +{% set warning_icon = '' %} + +# Introduction to Python + +> Part of this chapter is based on tutorials by Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Let's write some code! + +{% include "/python_introduction/prompt.md" %} + +## Your first Python command! + +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. + +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. + +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`. + +{% filename %}command-line{% endfilename %} +```python +>>> 2 + 3 +5 +``` + +Nice! See how the answer popped out? Python knows math! You could try other commands like: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +To perform exponential calculation, say 2 to the power 3, we type: +{% filename %}command-line{% endfilename %} +```python +>>> 2 ** 3 +8 +``` + +Have fun with this for a little while and then get back here. :) + +As you can see, Python is a great calculator. If you're wondering what else you can do… + +## Strings + +How about your name? Type your first name in quotes like this: + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola" +'Ola' +``` + +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. + +Strings can be strung together. Try this: + +{% filename %}command-line{% endfilename %} +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +You can also multiply strings with a number: + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +If you need to put an apostrophe inside your string, you have two ways to do it. + +Using double quotes: + +{% filename %}command-line{% endfilename %} +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +or escaping the apostrophe with a backslash (`\`): + +{% filename %}command-line{% endfilename %} +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Nice, huh? To see your name in uppercase letters, type: + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola".upper() +'OLA' +``` + +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. + +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 +``` + +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. + +### Summary + +OK, enough of strings. So far you've learned about: + +- __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. + +These are the basics of every programming language you learn. Ready for something harder? We bet you are! + +## Errors + +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 +TypeError: object of type 'int' has no len() +``` + +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 +``` + +It worked! We used the `str` function inside of the `len` function. `str()` converts everything to strings. + +- The `str` function converts things into __strings__ +- The `int` function converts things into __integers__ + +> Important: we can convert numbers into text, but we can't necessarily convert text into numbers – what would `int('hello')` be anyway? + +## Variables + +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. + +Let's say we want to create a new variable called `name`: + +{% filename %}command-line{% endfilename %} +```python +>>> name = "Ola" +``` + +We type name equals Ola. + +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' +``` + +Yippee! Your first variable! :) You can always change what it refers to: + +{% filename %}command-line{% endfilename %} +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +You can use it in functions too: + +{% filename %}command-line{% endfilename %} +```python +>>> len(name) +5 +``` + +Awesome, right? Now, variables can be anything – numbers too! Try this: + +{% filename %}command-line{% endfilename %} +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +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 +NameError: name 'ctiy' is not defined +``` + +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. + +Play with this for a while and see what you can do! + + +## The print function + +Try this: + +{% filename %}command-line{% endfilename %} +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +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. + +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. + + +## Lists + +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. :) + +Go ahead and create a list: + +{% filename %}command-line{% endfilename %} +```python +>>> [] +[] +``` + +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] +``` + +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 +``` + +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() +``` + +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] +``` + +As you can see, the numbers in your list are now sorted from the lowest to highest value. Congrats! + +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] +``` + +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] +``` + +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 +``` + +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. + +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] +``` + +That worked like a charm! + +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? + +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 + +## Dictionaries + +> 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 +>>> {} +{} +``` + +This shows that you just created an empty dictionary. Hurray! + +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]} +``` + +With this command, you just created a variable named `participant` with three key–value pairs: + +- The key `name` points to the value `'Ola'` (a `string` object), +- `country` points to `'Poland'` (another `string`), +- and `favorite_numbers` points to `[7, 42, 92]` (a `list` with three numbers in it). + +You can check the content of individual keys with this syntax: + +{% filename %}command-line{% endfilename %} +```python +>>> print(participant['name']) +Ola +``` + +See, it's similar to a list. But you don't need to remember the index – just the name. + +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 +KeyError: 'age' +``` + +Look, another error! This one is a **KeyError**. Python is helpful and tells you that the key `'age'` doesn't exist in this dictionary. + +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. + +- Do you just need an ordered sequence of items? Go for a list. +- Do you need to associate values with keys, so you can look them up efficiently (by key) later on? Use a dictionary. + +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: + +{% filename %}command-line{% endfilename %} +```python +>>> len(participant) +3 +``` + +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: + +{% 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'} +``` + +As you can see from the output, the key–value pair corresponding to the 'favorite_numbers' key has been deleted. + +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'} +``` + +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. + +### Summary + +Awesome! You know a lot about programming now. In this last part you learned about: + +- __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 + +Excited for the next part? :) + +## Compare things + +> 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 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +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? + +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. + +Give Python two more tasks: + +{% filename %}command-line{% endfilename %} +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +We've seen `>` and `<`, but what do `>=` and `<=` mean? Read them like this: + +- x `>` y means: x is greater than y +- x `<` y means: x is less than y +- x `<=` y means: x is less than or equal to y +- x `>=` y means: x is greater than or equal to y + +Awesome! Wanna do one more? Try this: + +{% filename %}command-line{% endfilename %} +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +You can give Python as many numbers to compare as you want, and it will give you an answer! Pretty smart, right? + +- __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 + +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 +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +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. + +## Boolean + +Incidentally, you just learned about a new type of object in Python. It's called __Boolean__. + +There are only two Boolean objects: +- True +- False + +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 +``` + +You can also do it this way: + +{% filename %}command-line{% endfilename %} +```python +>>> a = 2 > 5 +>>> a +False +``` + +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` + +Congrats! Booleans are one of the coolest features in programming, and you just learned how to use them! + +# Save it! + +> 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. + + +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: + +- Exit the Python interpreter +- Open up our code editor of choice +- Save some code into a new python file +- Run it! + +To exit from the Python interpreter that we've been using, type the `exit()` function + +{% filename %}command-line{% endfilename %} +```python +>>> exit() +$ +``` + +This will put you back into the command prompt. + +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): + +{% filename %}editor{% endfilename %} +```python +print('Hello, Django girls!') +``` + +Obviously, you're a pretty seasoned Python developer now, so feel free to write some code that you've learned today. + +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. + +> **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. :) + + +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. + + + +On a Mac, the command will look something like this: + +{% filename %}command-line{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + +On Linux, it will be like this: + +{% 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 +``` + +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: + +## 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__. + +Replace the code in your **python_intro.py** file with this: + +{% filename %}python_intro.py{% endfilename %} +```python +if 3 > 2: +``` + +If we were to save and run this, we'd see an error like this: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} +``` +$ python3 python_intro.py +File "python_intro.py", line 2 + ^ +SyntaxError: unexpected EOF while parsing +``` + +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!') +``` + +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. + +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. + +### What if a condition isn't True? + +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') +else: + print('5 is not greater than 2') +``` + +When this is run it will print out: + +{% 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: + +{% filename %}python_intro.py{% endfilename %} +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +and executed: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hey Sonja! +``` + +See what happened there? `elif` lets you add extra conditions that run if the previous conditions fail. + +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("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python runs through each test in sequence and prints: + +{% 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. + + +### Summary + +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 + +Time for the last part of this chapter! + +## Your own functions! + +> For readers at home: this part is covered in the [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0) video. + +Remember functions like `len()` that you can execute in Python? Well, good news – you will learn how to write your own functions now! + +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?') + +hi() +``` + +Okay, our first function is ready! + +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. + +Let's run this now and see what happens: + +{% 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: + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(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!') + +hi() +``` + +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: + +{% 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: + +{% filename %}python_intro.py{% endfilename %} +```python +hi("Ola") +``` + +And run it again: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Ola! +``` + +And if we change the name? + +{% filename %}python_intro.py{% endfilename %} +```python +hi("Sonja") +``` + +And run it: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Sonja! +``` + +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! +``` + +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! + +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 + '!') + +hi("Rachel") +``` + +Let's call the code now: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Rachel! +``` + +Congratulations! You just learned how to write functions! :) + +## Loops + +> For readers at home: this part is covered in the [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) video. + +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'] +``` + +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: +``` + +The `for` statement behaves similarly to the `if` statement; code below both of these need to be indented four spaces. + +Here is the full code that will be in the file: + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +And when we run it: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Rachel! +Next girl +Hi Monica! +Next girl +Hi Phoebe! +Next girl +Hi Ola! +Next girl +Hi You! +Next girl +``` + +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) +``` + +Which would print: + +{% filename %}command-line{% endfilename %} +``` +1 +2 +3 +4 +5 +``` + +`range` is a function that creates a list of numbers following one after the other (these numbers are provided by you as parameters). + +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. + +## Summary + +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! + +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! :) + +You might want to briefly do something else – stretch, walk around for a bit, rest your eyes – before going on to the next chapter. :) + + +![Cupcake](images/cupcake.png) diff --git a/en/python_introduction/images/cupcake.png b/en/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/en/python_introduction/images/cupcake.png differ diff --git a/en/python_introduction/prompt.md b/en/python_introduction/prompt.md new file mode 100644 index 00000000000..27f422934c0 --- /dev/null +++ b/en/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/en/styles/website.css b/en/styles/website.css new file mode 100644 index 00000000000..917a9d65a50 --- /dev/null +++ b/en/styles/website.css @@ -0,0 +1,64 @@ + +/* add text to top menu items */ + +.book-header .fa::after { + text-transform: none; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; +} +.book-header .fa-align-justify::after { + content: ' Show Outline'; + text-transform: none; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; +} +.book.with-summary .book-header .fa-align-justify::after { + content: ' Hide Outline'; +} +.book-header .fa-globe::after { + content: ' Language'; +} +.book-header .fa-font::after { + content: ' Font Settings'; +} +@media (max-width:600px) { + .book-header .fa-font::after { + content: ' Font'; + } + .book-header .js-toolbar-action.pull-right { /* social sharing links */ + display: none; + } +} + +/* add text to the Next & Prev arrows */ + +.navigation-prev::after { + content: 'Previous'; + font-size: 20pt; + vertical-align: text-bottom; + line-height: 44px; +} +.navigation-next::after { + content: 'Next'; + font-size: 20pt; + vertical-align: text-bottom; + line-height: 44px; +} + +@media (max-width:1240px) { + /* on small viewports, the arrows are shown on the side, so move text around to look better */ + .navigation-next::after { + content: none; + } + .navigation-next::before { + content: 'Next'; + font-size: 20pt; + vertical-align: text-bottom; + line-height: 44px; + } +} + +/* fine tune text size to not overlap main body text on very specific viewport sizes */ +@media (min-width:1241px) and (max-width:1274px) { + .navigation-prev::after { + font-size: 16pt; + } +} diff --git a/en/template_extending/README.md b/en/template_extending/README.md new file mode 100644 index 00000000000..7fd9ab86ba7 --- /dev/null +++ b/en/template_extending/README.md @@ -0,0 +1,147 @@ +# Template extending + +Another nice thing Django has for you is __template extending__. What does this mean? It means that you can use the same parts of your HTML for different pages of your website. + +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! + +## Create a base template + +A base template is the most basic template that you extend on every page of your website. + +Let's create a `base.html` file in `blog/templates/blog/`: + +``` +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: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Then in `base.html`, replace your whole `` (everything between `` and ``) with this: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% 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`). We will show you how to do this in a moment. + +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 %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} +
+ +

{{ 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 %}`. Like this:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```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: + +{% 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 %} +``` + +That's it! Save the file, and check if your website is still working properly. :) + +> 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. diff --git a/en/whats_next/README.md b/en/whats_next/README.md new file mode 100644 index 00000000000..1e5e9948049 --- /dev/null +++ b/en/whats_next/README.md @@ -0,0 +1,40 @@ +# What's next? + +Congratulate yourself! __You're totally awesome__. We're proud! <3 + +### What to do now? + +Take a break and relax! You have just done something really huge. + +After that, make sure to follow Django Girls on [Facebook](https://facebook.com/djangogirls) or [X](https://x.com/djangogirls) to stay up to date. + +### Can you recommend any further resources? + +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. + +#### Django +- Our other book, [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Django's official tutorial](https://docs.djangoproject.com/en/{{ book.docs_version }}/intro/tutorial01/) +- [Getting Started With Django video lessons](https://thekennethlove.com/videos/) +- [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](https://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 + +We can't wait to see what you build next! diff --git a/es/GLOSSARY.md b/es/GLOSSARY.md new file mode 100644 index 00000000000..9a6912eacf6 --- /dev/null +++ b/es/GLOSSARY.md @@ -0,0 +1,3 @@ +# editor de código + +Un editor de código es una aplicación que te permite escribir código y guardarlo en ficheros del disco de tu ordenador. Puedes ver dónde descargar uno en el [capítulo Editor de código](./code_editor/README.md) \ No newline at end of file diff --git a/es/README.md b/es/README.md new file mode 100755 index 00000000000..44b38f259c4 --- /dev/null +++ b/es/README.md @@ -0,0 +1,51 @@ +# Tutorial de Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Este trabajo está bajo la licencia internacional Creative Commons Attribution-ShareAlike 4.0. Para ver una copia de esta licencia, visita el siguiente enlace https://creativecommons.org/licenses/by-sa/4.0/ + +## Bienvenida/o + +¡Bienvenido/a al tutorial de las Django Girls! ¡Nos alegra que estés aquí :) En este tutorial, te llevaremos de viaje a las entrañas de la tecnología web, para que veas todas las piezas que se necesitan para que la web funcione. + +Como pasa con todas las cosas nuevas, va a ser una aventura - pero no te preocupes; una vez que te has decidido a empezar, te irá de maravilla :) + +## Introducción + +¿Alguna vez has tenido la sensación de que el mundo es cada vez más tecnológico? ¿que cada vez lo entiendes menos? ¿Alguna vez te has planteado crear un sitio web pero no sabías por dónde empezar? ¿Has pensado alguna vez que el mundo del software es demasiado complicado como para intentar hacer algo por tu cuenta? + +Bueno, ¡tenemos buenas noticias! Programar no es tan difícil como parece y queremos demostrarte lo divertido que puede llegar a ser. + +Este tutorial no te convertirá en programadora de la noche a la mañana. Si quieres ser buena en esto, necesitarás meses o incluso años de aprendizaje y práctica. Sin embargo queremos enseñarte que programar o crear sitios web no es tan complicado como parece. Intentaremos explicar las cosas lo mejor que podamos, para perderle el miedo a la tecnología. + +¡Esperamos conseguir que te guste la tecnología tanto como a nosotras! + +## ¿Qué aprenderás con este tutorial? + +Cuando termines el tutorial, tendrás una aplicación web sencilla y funcional: tu propio blog. Te mostraremos como ponerla en línea, ¡para que otros puedan ver tu trabajo! + +Tendrá (más o menos) esta pinta: + +![Figure 0.1](images/application.png) + +> Si estás siguiendo este tutorial por tu cuenta y no tienes un mentor que te ayude en caso de dificultades, tenemos un chat para ti: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). ¡Hemos pedido a mentores y asistentes de ediciones anteriores, que pasen por allí de vez en cuando para echar una mano a otras con el tutorial! ¡No tengas miedo de preguntar ahí! + +Bien, [empecemos por el comienzo...](./how_the_internet_works/README.md) + +## Seguir el tutorial desde casa + +Participar en un taller de Django Girls en vivo es genial, pero somos conscientes de que no siempre es posible hacerlo. Por eso, te recomendamos hacer este tutorial en casa. Para las que estáis en casa, estamos preparando vídeos que facilitarán seguir el tutorial por tu cuenta. Todavía está en progreso, pero cada vez hay más cosas explicadas en el canal de YouTube [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) (Nota: en inglés). + +En cada capítulo hay un enlace que lleva al vídeo correspondiente (si lo hay). + +## Sobre nosotras y Cómo contribuir + +Este tutorial lo mantiene [DjangoGirls](https://djangogirls.org/). Si encuentras algún error o quieres actualizar el tutorial, por favor [sigue la guía de cómo contribuir](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## ¿Te gustaría ayudarnos a traducir el tutorial a otros idiomas? + +Actualmente, las traducciones se hacen en la plataforma crowdin.com, en el siguiente enlace: + +https://crowdin.com/project/django-girls-tutorial + +Si tu idioma no aparece en la lista de [crowdin](https://crowdin.com/), por favor [abre un nuevo issue](https://github.com/DjangoGirls/tutorial/issues/new) con el idioma para que podamos añadirlo. \ No newline at end of file diff --git a/es/SUMMARY.md b/es/SUMMARY.md new file mode 100755 index 00000000000..7f7fcb716db --- /dev/null +++ b/es/SUMMARY.md @@ -0,0 +1,35 @@ +# Contenido + +* [Introducción](README.md) +* [Instalación](installation/README.md) + * [Línea de Comandos](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Editor de texto](installation/README.md#code-editor) + * [Entorno Virtual](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) +* [Instalación (chromebook)](chromebook_setup/README.md) +* [Cómo funciona Internet](how_the_internet_works/README.md) +* [Introducción a la línea de comandos](intro_to_command_line/README.md) +* [Instalación de Python](python_installation/README.md) +* [Editor de código](code_editor/README.md) +* [Introducción a Python](python_introduction/README.md) +* [¿Qué es Django?](django/README.md) +* [Instalación de Django](django_installation/README.md) +* [¡Tu primer proyecto en Django!](django_start_project/README.md) +* [Modelos en Django](django_models/README.md) +* [Administrador de Django](django_admin/README.md) +* [¡Despliega!](deploy/README.md) +* [URLs en Django](django_urls/README.md) +* [Vistas en Django - ¡Hora de crear!](django_views/README.md) +* [Introducción a HTML](html/README.md) +* [ORM de Django (QuerySets)](django_orm/README.md) +* [Datos dinámicos en las plantillas](dynamic_data_in_templates/README.md) +* [Plantillas de Django](django_templates/README.md) +* [CSS - ¡Que quede bonito!](css/README.md) +* [Extendiendo plantillas](template_extending/README.md) +* [Amplía tu aplicación](extend_your_application/README.md) +* [Formularios de Django](django_forms/README.md) +* [¿Y ahora qué?](whats_next/README.md) diff --git a/es/chromebook_setup/README.md b/es/chromebook_setup/README.md new file mode 100644 index 00000000000..217da1f3ea0 --- /dev/null +++ b/es/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Configuración de Chromebook + +> **Nota** Si ya ejecutaste todas las instrucciones indicadas durante la instalación, no es necesario volverlo a hacer - puedes omitir lo que sigue hasta la [Introducción a Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/es/chromebook_setup/instructions.md b/es/chromebook_setup/instructions.md new file mode 100644 index 00000000000..964ddd4cef1 --- /dev/null +++ b/es/chromebook_setup/instructions.md @@ -0,0 +1,73 @@ +Puedes [saltarte esta sección](http://tutorial.djangogirls.org/en/installation/#install-python) en caso de que no estés usando un Chromebook. Si lo usas, tu experiencia de instalación será algo diferente. Puedes ignorar el resto de las instrucciones de instalación. + +### IDE en la nube (PaizaCloud Cloud IDE, AWS Cloud9) + +Nube de IDE es una herramienta que te ofrece un editor de código y el acceso por medio de internet a una computadora donde puedes instalar, escribir y ejecutar el software. Durante este tutorial, el IDE en la nube te servirá como tu *máquina local*. Seguirás ejecutando comandos en una terminal igual que tus compañeros de clase en macOS, Ubuntu, o Windows, pero tu terminal en realidad estará conectada a una computadora trabajando en algún otro lugar, que el IDE en la nube configura para ti. Aquí están las instrucciones para IDEs en la nube (PaizaCloud Cloud IDE, AWS Cloud9). Puedes elegir uno de los IDEs en la nube, y seguir sus instrucciones. + +#### PaizaCloud Cloud IDE + +1. Ve a [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Crea una cuenta +3. Haz clic en *Nuevo Servidor* y elige la aplicación Django +4. Haz clic en el botón Terminal (en el lado izquierdo de la ventana) + +Ahora deberías ver una interfaz con una barra y botones en la izquierda. Haz click en al botón "Terminal" para abrir la ventana de la terminal con un símbolo de sistema como este: + +{% filename %}Terminal{% endfilename %} + + $ + + +La terminal en el IDE en la nube PaizaCloud está preparada para ejecutar tus instrucciones. Puedes redimensionar o maximizar la ventana para hacerla un poco más grande. + +#### AWS Cloud9 + +Actualmente Cloud 9 requiere que te registres con AWS y ingreses la información de la tarjeta de crédito. + +1. Instala Cloud 9 desde la [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Ve a [c9.io](https://c9.io) y haz clic en *Get started with AWS Cloud9* +3. Regístrate en una cuenta AWS (requiere información de tarjeta de crédito, pero puedes usar gratis) +4. En el panel de control AWS, introduz *Cloud9* en la barra de búsqueda y haz clic en él +5. En el panel de control de la Cloud 9, haz clic en *Create environment* +6. Nómbralo *django-girls* +7. Mientras configuras los ajustes, selecciona *Create a new instance for environment (EC2)* para "Environment Type" y selecciona el valor *t2.micro* para "Instance type" (debería decir "Free-tier eligible."). La configuración de ahorro de costes por defecto está bien y puede mantener los otros valores por defecto. +8. Haz clic en *Next step* +9. Haz clic en *Create environment* + +Ahora deberías ver una interfaz con una barra, una gran ventana principal con algún texto y una ventana pequeña en la parte inferior que se vería así: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +El área de abajo es tu terminal. Puedes usar el terminal para enviar instrucciones al ordenador remoto en Cloud 9. Puedes redimensionar o maximizar la ventana para hacerla un poco más grande. + +### Entorno Virtual + +Un entorno virtual (también llamado "virtualenv" o "vitual environment" en inglés) es un tipo de caja privada donde podemos introducir código para el proyecto en el cual estemos trabajando. Lo usamos para mantener separados los diferentes trozos de código de nuestros proyectos, de modo que no haya mezclas indeseadas entre los mismos. + +Ejecutar: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(nota que en la última línea usamos una virgulilla (~) seguida de un signo igual `~=`). + +### GitHub + +Hazte una cuenta de [GitHub](https://github.com). + +### PythonAnywhere + +El tutorial de Django Girls incluye una sección en lo que se conoce como Despliegue, lo cual se refiere al proceso de tomar el código que da vida a tu nueva aplicación web y moverlo a un ordenador de acceso público (llamado servidor) para que otras personas puedan ver tu trabajo. + +Esta parte del tutorial es algo extraña usando un Chromebook, pues ya estamos usando un computador conectado a Internet (contrario a, por ejemplo, un portátil). Sin embargo, aún es útil, ya que podemos pensar que nuestro espacio de trabajo en Cloud 9 como un repositorio para nuestro trabajo "en progreso" y Python Anywhere como un lugar donde mostrar nuestro trabajo más completo. + +Así que, registra una cuenta en Python Anywhere [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/es/code_editor/README.md b/es/code_editor/README.md new file mode 100755 index 00000000000..677874a96ec --- /dev/null +++ b/es/code_editor/README.md @@ -0,0 +1,11 @@ +# Editor de código + +> Para los lectores en casa: este capitulo se explica en el vídeo [Instalando Python & Editor de Código](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +Estás a punto de escribir tu primera línea de código, así que, ¡ya toca descargar un editor de código! + +> **Nota** Si estás usando un Chromebook, omite este capítulo y asegúrate de seguir las instrucciones de [Instalación de Chromebook](../chromebook_setup/README.md). La nube IDE que elegiste (Paizacloud Cloud IDE o AWS cloud9) incluyen un editor de código, y cuando abres un archivo en tu IDE desde el menú de archivos, automáticamente estarás utilizando el editor. +> +> **Nota** Es posible que ya hayas hecho esto en el capítulo de instalación. Si es así, ¡puedes avanzar directamente al siguiente capítulo! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/es/code_editor/instructions.md b/es/code_editor/instructions.md new file mode 100644 index 00000000000..187a5d3a92d --- /dev/null +++ b/es/code_editor/instructions.md @@ -0,0 +1,37 @@ +Hay muchos editores diferentes y la elección es principalmente una cuestión de preferencia personal. La mayoría de programadores de Python usan IDEs (Entornos de Desarrollo Integrados) complejos pero muy potentes, como PyCharm. Sin embargo, como principiante, probablemente no es lo más aconsejable; nuestras recomendaciones son igualmente potentes pero mucho más simples. + +Abajo presentamos nuestras sugerencias pero también puedes preguntarle a tu mentora cuáles son las suyas -será más fácil que te ayude. + +## Visual Studio Code + +Visual Studio Code es un recurso de edición de código desarrollado por Microsoft para Windows, Linux y macOS. Esto incluye soporte para depuración, control de Git incrustado, sintaxis destacada, completación de código inteligente, fragmentos y refactorización de código. + +[Descárgalo aquí](https://code.visualstudio.com/download) + +## Gedit + +Gedit es un editor gratuito de código abierto, disponible para todos los sistemas operativos. + +[Descárgalo aquí](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text es un editor muy popular con un periodo de prueba gratis, y está disponible para todos los sistemas operativos. + +[Descárgalo aquí](https://www.sublimetext.com/) + +## Atom + +Atom es otro editor popular. Es gratis, de código abierto y disponible para Windows, macOS and Linux. Atom está desarrollado por [Github](https://github.com/). + +[Descárgalo aquí](https://atom.io/) + +## ¿Por qué estamos instalando un editor de código? + +Tú podrías estar preguntándote por qué estamos instalando este especializado software editor de código en vez de usar algo como Word o Notepad. + +La primera razón es que el código necesita ser **texto plano**, y el problema con programas como Word y Textedit es que no producen texto plano, sino texto enriquecido (con fuentes y formatos), usando formatos personalizados como [RTF ( Formato del Texto Enriquecido, del inglés Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +La segunda razón es que los editores de código están especializados para esta función, así ellos pueden proveer ayuda a características como destacar código con color acorde a su significado, o automáticamente cerrando etiquetas para ti. + +Veremos todo esto en acción más adelante. Pronto pensarás en convertir el editor de código en una de tus herramientas favoritas. :) diff --git a/es/css/README.md b/es/css/README.md new file mode 100755 index 00000000000..158770ba9c1 --- /dev/null +++ b/es/css/README.md @@ -0,0 +1,305 @@ +# CSS - ¡Que quede bonito! + +Nuestro blog todavía es un poco feo, ¿no te parece? ¡Es hora de ponerlo bonito! Para eso, vamos a usar CSS. + +## ¿Qué es CSS? + +El lenguaje CSS (las siglas en inglés de Hojas de Estilos en Cascada, o Cascading Style Sheets) sirve para describir la apariencia de un sitio web escrito en un lenguaje de marcado (como HTML). Es como la capa de pintura para nuestra página web. ;) + +Pero no queremos empezar de cero otra vez, ¿verdad? De nuevo vamos a usar algo que otros programadores han publicado ya en Internet. Estar siempre reinventando la rueda no mola. + +## ¡Vamos a usar Bootstrap! + +Bootstrap es uno de los frameworks de HTML y CSS más populares para desarrollar sitios web atractivos: https://getbootstrap.com/ + +Lo escribieron programadores que trabajaban en Twitter. ¡Ahora lo mantienen y desarrollan voluntarios de todo el mundo! + +## Instalar Bootstrap + +Para instalar Bootstrap, abre tu fichero `.html` en el editor de código y añade esto a la sección ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +Esto no añade ningún archivo a tu proyecto. Solo apunta a archivos que existen en Internet. Así que adelante, accede a tu sitio web y refresca la página ¡Aquí la tienes! + +![Figura 14.1](images/bootstrap1.png) + +¡Ya tiene mejor pinta! + +## Archivos estáticos (static files) en Django + +Finalmente nos vamos a fijar en esto que hemos estado llamando **archivos estáticos**. Los archivos estáticos son los archivos CSS e imágenes. Su contenido no depende del contexto de la petición y siempre será el mismo para todos los usuarios. + +### Dónde poner los archivos estáticos en Django + +Django ya sabe dónde encontrar los archivos estáticos de la app "admin". Ahora necesitamos añadir los archivos estáticos de nuestra aplicación, `blog`. + +Crearemos una carpeta llamada `static` dentro de la app blog: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Django encontrará automáticamente cualquier carpeta llamada "static" dentro de cualquiera de las carpetas de tus apps. Podrá usar su contenido como archivos estáticos. + +## ¡Tu primer archivo CSS! + +Vamos a crear un archivo CSS, para añadir tu propio estilo a la página. Crea un nuevo directorio llamado `css` dentro de la carpeta `static`. A continuación, crea un nuevo archivo llamado `blog.css` dentro de la carpeta `css`. ¿Listos? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +¡Vamos a escribir algo de CSS! Abre el archivo `blog/static/css/blog.css` en el editor de código. + +No vamos a profundizar demasiado en cómo personalizar y aprender CSS. Pero te podemos recomendar un un curso gratuito de CSS al final de esta página por si quieres aprender más. + +Pero vamos a hacer al menos un poco. ¿Quizás podamos cambiar el color de nuestros encabezados? Los ordenadores utilizan códigos especiales para expresar los colores. Estos códigos empiezan con `#` seguidos por 6 letras (A-F) y números (0-9). Por ejemplo, el código del color azul es `#0000FF`. Puedes encontrar los códigos de muchos colores aquí: http://www.colorpicker.com/ y en otras páginas web. También puedes utilizar [colores predefinidos](http://www.w3schools.com/colors/colors_names.asp) utilizando su nombre en inglés, como `red` y `green`. + +En el archivo `blog/static/css/blog.css` deberías añadir el siguiente código: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` es un selector CSS. Esto significa que estamos aplicando nuestros estilos a cualquier elemento de `a` dentro de un elemento de `h1`; el selector `h2 a` hace lo mismo para los elementos de `h2`. Así, cuando tenemos algo como `

link

`, se aplicará el estilo `h1 a`. En este caso, le estamos diciendo que cambie el color a un `#C25100`, que es un naranjo oscuro. O puedes poner tu propio color aqui, ¡pero asegúrate que tenga un buen contraste contra un fondo blanco! + +En un archivo CSS se definen los estilos de los elementos que aparecen en el archivo HTML. La primera forma de identificar los elementos es por su nombre. Puede que los recuerdes como 'tags' de la sección de HTML. Cosas como `a`, `h1`, y `body` son algunos ejemplos de nombres de elementos. También podemos identificar elementos por el atributo `class` o el atributo `id`. Los valores de "class" e "id" son nombres que das al elemento para poderlo identificar. Con el atributo "class" identificamos grupos de elementos del mismo tipo y con el atributo "id" identificamos un elemento específico. Por ejemplo, el siguiente elemento lo podrías identificar por su nombre de "tag" `a`, por su "class" `external_link`, o por su "id" `link_to_wiki_page`: + +```html + +``` + +Si quieres aprender más sobre los selectores CSS puedes consultar en [Selectores de CSS en w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +También necesitamos decirle a nuestra plantilla HTML que hemos añadido código CSS. Abre el archivo `blog/templates/blog/post_list.html` en el editor de código y añade esta línea al principio del todo: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Aquí solo estamos cargando archivos estáticos. :) Entre las etiquetas `` y ``, después de los enlaces a los archivos CSS de Bootstrap, añade esta línea: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +El navegador lee los archivos en el orden que le son dados, por lo que debemos asegurarnos de que está en el lugar correcto. De lo contrario, el código en nuestro archivo podría ser reemplazado por código en nuestros archivos Bootstrap. Le acabamos de decir a nuestra plantilla dónde se encuentra nuestro archivo CSS. + +Ahora tu archivo debe tener este aspecto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +De acuerdo, ¡guarda el archivo y actualiza el sitio! + +![Figura 14.2](images/color2.png) + +¡Buen trabajo! ¿Tal vez nos gustaría también dar un poco de aire a nuestro sitio web y aumentar el margen en el lado izquierdo?. ¡Vamos a intentarlo! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Añade esto a tu CSS, guarda el archivo y ¡mira cómo funciona! + +![Figura 14.3](images/margin2.png) + +¿Quizá podríamos personalizar la tipografía del título? Pega esto en la sección `` del archivo `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Como antes, revisa el orden y pon antes del enlace a `blog/static/css/blog.css`. Esta línea importará un estilo de letra llamada *Lobster* de Google Fonts (https://www.google.com/fonts). + +Encuentra el bloque de declaración (el código entre las llaves `{` y `}`) `h1 a` en el archivo CSS `blog/static/css/blog.css`. Ahora añade la línea `font-family: 'Lobster';` entre las llaves y actualiza la página: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![Figura 14.3](images/font.png) + +¡Genial! + +Como ya hemos dicho, CSS tiene un concepto de clases. Las clases te permiten dar un nombre a una parte del código HTML para aplicar estilos solo a esta parte, sin afectar a otras. ¡Esto puede ser súper útil! Quizá tienes dos divs haciendo algo diferente (como el encabezado y el texto de tu publicación). Las clases pueden ayudarte a asignarles estilos distintos. + +Adelante, nombra algunas partes del código HTML. Añade una clase llamada `page-header` a tu `div` que contiene el encabezado, así: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +Y ahora añade una clase `post` a tu `div` que contiene una publicación del blog. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

publicado: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Ahora añadiremos bloques de declaración a varios selectores. Los selectores que comienzan con `.` hacen referencia a clases. Hay muchos tutoriales y explicaciones excelentes sobre CSS en la Web que te pueden ayudar a entender el código que sigue a continuación. Por ahora, copia y pega lo siguiente en tu archivo `blog/static/css/blog.css`: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #C25100; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, .post h2 a:visited { + color: #000000; +} +``` + +Luego rodea el código HTML que muestra los posts con declaraciones de clases. Cambia esto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

publicado: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +en `blog/templates/blog/post_list.html` por esto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

publicado: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Guarda estos archivos y recarga tu sitio. + +![Figura 14.4](images/final.png) + +¡Woohoo! Queda genial, ¿Verdad? Mira el código que acabamos de pegar para encontrar los lugares donde añadimos clases en el HTML y las usamos en el CSS. ¿Qué cambiarías si quisieras que la fecha fuera color turquesa? + +No tengas miedo a experimentar con este CSS un poco y tratar de cambiar algunas cosas. Jugar con el CSS te puede ayudar a entender lo que hacen las distintas secciones. Si algo deja de funcionar, no te preocupes, ¡siempre puedes deshacerlo! + +Realmente te recomendamos seguir este [Curso de HTML y CSS de CodeAcademy](https://www.codecademy.com/tracks/web). Puede ayudarte a aprender todo lo que necesitas para hacer tus websites más bonitos con CSS. + +¡¿Lista para el siguiente capítulo?! :) diff --git a/es/css/images/bootstrap1.png b/es/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/es/css/images/bootstrap1.png differ diff --git a/es/css/images/color2.png b/es/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/es/css/images/color2.png differ diff --git a/es/css/images/final.png b/es/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/es/css/images/final.png differ diff --git a/es/css/images/font.png b/es/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/es/css/images/font.png differ diff --git a/es/css/images/margin2.png b/es/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/es/css/images/margin2.png differ diff --git a/es/deploy/README.md b/es/deploy/README.md new file mode 100755 index 00000000000..491bbd9f535 --- /dev/null +++ b/es/deploy/README.md @@ -0,0 +1,221 @@ +# ¡Despliega! + +> **Nota** El siguiente capítulo puede ser, a veces, un poco difícil de seguir. Ten paciencia y acábalo. El despliegue es una parte importante del proceso en el desarrollo de un sitio web. Este capítulo está a mitad del tutorial para que tu mentor pueda ayudarte a conseguir que tu sitio web esté online, algo que puede ser un poco complicado. Así, aunque se te acabe el tiempo, podrás terminar el tutorial por tu cuenta. + +Hasta ahora, tu sitio web sólo está disponible en tu ordenador. ¡Ahora aprenderás como desplegarlo! El despliegue es el proceso de publicar tu aplicación en internet para que la gente pueda acceder y ver tu sitio web. :) + +Como ya has aprendido, un sitio web tiene que estar en un servidor. Hay muchos proveedores de servidores disponibles en internet, nosotros vamos a usar [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere es gratuito para aplicaciones pequeñas que no tienen muchos visitantes, y con eso tendrás más que suficiente por ahora. + +El otro servicio externo que vamos a utilizar es [GitHub](https://www.github.com), un servicio de almacenamiento de código. Hay otras opciones por ahí, pero hoy en día casi todas las programadoras y programadores tenemos una cuenta de GitHub, ¡y ahora tú también la vas a tener! + +Estos tres lugares serán importantes para ti. Tu ordenador local será el lugar donde desarrollas y pruebas. Cuando estés contento con los cambios, subirás una versión de tu programa a GitHub. Tu sitio web estará en PythonAnywhere y para actualizarlo descargarás la última versión de tu código desde GitHub. + +# Git + +> **Nota** Si ya has realizado los pasos de instalación, no los tienes que repetir, puedes avanzar a la siguiente sección y empezar a crear tu repositorio de Git. + +{% include "/deploy/install_git.md" %} + +## Crear nuestro repositorio Git + +Git sigue los cambios realizados a un grupo determinado de archivos en lo que llamamos un repositorio de código (abreviado "repo"). Vamos a crear uno para nuestro proyecto. Abre la consola y ejecuta los siguientes comandos en el directorio de `djangogirls`: + +> **Nota** Comprueba en qué directorio estás ahora mismo (es decir, el directorio de trabajo actual) con el comando `pwd` (OSX/Linux) o `cd` (Windows) antes de inicializar el repositorio. Deberías estar en la carpeta `djangogirls`. + +{% filename %}command-line{% endfilename %} + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Tu nombre" + $ git config --global user.email tu@ejemplo.com + + +Inicializar el repositorio de git es algo que sólo tenemos que hacer una vez por proyecto (y no tendrás que volver a teclear tu nombre de usuario y correo electrónico nunca más). + +Git llevará un seguimiento de los cambios realizados en todos los archivos y carpetas en este directorio, pero hay algunos archivos que queremos que ignore. Esto lo hacemos creando un archivo llamado `.gitignore` en el directorio base. Abre tu editor y crea un nuevo archivo con el siguiente contenido: + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +Y guárdalo como `.gitignore` en la carpeta "djangogirls". + +> **Nota** ¡El punto al principio del nombre del archivo es importante! Si tienes problemas para crearlo (a los Mac no les gusta que crees ficheros con un punto al principio del nombre usando el Finder por ejemplo), entonces usa la opción "Save As" o "Guardar como" de tu editor, esto funcionará seguro. Asegúrate de no añadir `.txt`, `.py`, o ninguna otra extensión al nombre de fichero -- Git solo lo reconocerá si se llama exactamente `.gitignore`, sin nada más. +> +> **Nota** Uno de los archivos especificados en tu `.gitignore` es `db.sqlite3`. Ese fichero es tu base de datos local, donde se almacenan los usuarios y publicaciones de tu blog. Vamos a seguir las buenas prácticas de programación web: vamos a usar bases de datos separadas para tu sitio local y tu sitio en producción en PythonAnywhere. La base de datos en PythonAnywhere podría ser SQLite, como en tu máquina de desarrollo, pero también podrías usar otro gestor de base de datos como MySQL o PostgreSQL que pueden soportar muchas más visitas que SQLite. En cualquier caso, al ignorar la base de datos SQLite en tu copia de GitHub, todos los posts y el super usuario que has creado hasta el momento solo estarán disponibles en local, y tendrás que crear nuevos usuarios y publicaciones en producción. Tu base de datos local es un buen campo de pruebas donde puedes probar diferentes cosas sin miedo a estropear o borrar las publicaciones reales de tu blog. + +Te recomendamos utilizar el comando `git status` antes de `git add` o en cualquier momento en que no sepas muy bien lo que ha cambiado. Esto te ayudará a evitar sorpresas, como subir cambios o archivos que no queríamos subir. El comando `git status` muestra información sobre cualquier archivo no seguido ("untracked"), modificado ("modified"), preparado ("staged"), el estado de la rama y muchas cosas más. La salida debería ser parecida a esto: + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +Y finalmente guardamos nuestros cambios. Ve a la consola y ejecuta estos comandos: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + $ git commit -m "Mi aplicación Django Girls, primer commit" + [...] + 13 files changed, 200 insertions(+) + create mode 100644 .gitignore + [...] + create mode 100644 mysite/wsgi.py + + +## Subiendo tu código a Github + +Vete a [GitHub.com](https://www.github.com) y regístrate para obtener una cuenta de usuario nueva y gratuita. (Si ya lo hiciste en la preparación del taller, ¡eso es genial!) Asegúrate de recordar tu contraseña (agrégala a tu administrador de contraseñas, si usas uno). + +A continuación, crea un nuevo repositorio con el nombre "my-first-blog". Deja el checkbox "initialize with a README" sin marcar, deja la opción de .gitignore vacía (ya lo hemos hecho manualmente) y deja la licencia como None. + +![](images/new_github_repo.png) + +> **Nota** El nombre `my-first-blog` es importante - podrías escoger otro, pero va a salir muchas veces en las instrucciones que vienen a continuación, y vas a tener que acordarte de cambiarlo cada vez. Lo más fácil es quedarse con el nombre `my-first-blog`. + +En la siguiente pantalla, verás la URL para clonar el repo, que tendrás que usar en los comandos que van a continuación: + +![](images/github_get_repo_url_screenshot.png) + +Ahora necesitas enlazar el repositorio Git en tu ordenador con el repositorio de GitHub. + +Escribe lo siguiente en la consola (cambia `` por tu nombre de usuario de GitHub, pero sin los símbolos < y > -- fíjate en que la URL debería coincidir con la URL para clonar el repo que acabas de ver): + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Cuando hagas push a GitHub, te preguntará tu usuario y password de GitHub, y después de introducirlos, deberías ver algo como esto: + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Tu código ya está subido a GitHub. ¡Ve y compruébalo! Encontrarás que está en buena compañía - [Django](https://github.com/django/django), [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial) y muchos otros proyectos de software libre están alojados en GitHub. :) + +# Configurar nuestro blog en PythonAnywhere + +## Crea una cuenta en PythonAnywhere + +> **Nota** A lo mejor ya has creado una cuenta en PythonAnywhere durante los pasos de instalación. Si es así, no necesitas hacerlo otra vez. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Configurar nuestro sitio en PythonAnywhere + +Vuelve al [dashboard de PythonAnywhere](https://www.pythonanywhere.com/) haciendo click en el logo, y escoge la opción de iniciar una consola "Bash" – esta terminal es como la que hay en tu ordenador, pero en el servidor de PythonAnywhere. + +![La sección 'New Console' en la interfaz de PythonAnywhere con un botón para 'bash'](images/pythonanywhere_bash_console.png) + +> **Nota** PythonAnywhere está basado en Linux, así que si estás en Windows, la consola será un poco distinta a la de tu ordenador. + +Para desplegar una aplicación web en PythonAnywhere necesitas descargar tu código de GitHub y configurar PythonAnywhere para que lo reconozca y lo sirva como una aplicación web. Hay formas de hacerlo manualmente, pero PythonAnywhere tiene una herramienta automática que lo hará todo por nosotros. Lo primero, vamos a instalar la herramienta: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +Eso debería mostrar en pantalla algunos mensajes como `Collecting pythonanywhere`, y finalmente una linea diciendo que ha terminado bien: `Successfully installed (...) pythonanywhere- (...)`. + +Ahora ejecutaremos el asistente para configurar automáticamente nuestra aplicación desde GitHub. Teclea lo siguiente en la consola de PythonAnywhere (no te olvides de usar tu propio nombre de usuario de GitHub en lugar de ``, para que la URL sea como la URL de clonar el repo de GitHub): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.6 https://github.com//my-first-blog.git + + +A medida que se ejecuta, podrás ver lo que hace: + +- Se descarga tu código de GitHub. +- Crea un virtualenv en PythonAnywhere, como el de tu propia computadora. +- Actualiza tus ficheros de settings con algunos settings de despliegue. +- Crea la base de datos en PythonAnywhere ejecutando el comando `manage.py migrate`. +- Configura los archivos estáticos (static) (luego hablaremos de éstos con más detalle). +- Y configura PythonAnywhere para publicar tu aplicación web a través de su API. + +En PythonAnywhere todos estos pasos están automatizados, pero son los mismos que tendrías que seguir en cualquier otro proveedor de servidores. + +Lo más importante que debes notar en este momento es que tu base de datos en PythonAnywhere está totalmente separada de tu base de datos en tu propia computadora, por lo que puedes tener diferentes publicaciones y cuentas de administrador. Como consecuencia, igual que lo hicimos en tu ordenador, tenemos que crear la cuenta de administrador con el comando `createsuperuser`. PythonAnywhere ya ha activado el virtualenv automáticamente, así que lo único que tienes que hacer es ejecutar: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Teclea las credenciales para tu usuario admin. Para evitar confusiones, te recomendamos usar el mismo nombre de usuario que usaste en tu ordenador local; aunque a lo mejor prefieres que la contraseña en PythonAnywhere sea más segura. + +Ahora, si quieres, también puedes ver tu código en PythonAnywhere con el comando `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 + + +También puedes ir a la página de ficheros ("Files") y navegar por los ficheros y directorios usando el visor de PythonAnywhere. (Desde la página de la consola ("Console"), puedes ir a cualquier otra página de PythonAnywhere usando el botón de la esquina superior derecha. Desde el resto de páginas, también hay enlaces a las otras en la parte superior.) + +## ¡Ya estás en vivo! + +¡Tu sitio ya debería estar online en internet! Haz click en la página "Web" de PythonAnywhere para obtener un enlace a él. Puedes compartir este enlace con quien tu quieras :) + +> **Nota** Este es un tutorial para principiantes, y al desplegar este sitio hemos tomado algunos atajos que tal vez no sean las mejores prácticas desde el punto de vista de la seguridad. Si decide construir sobre este proyecto, o comenzar un nuevo proyecto, debe revisar la [lista de verificación de despliegue de Django](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) para obtener algunos consejos sobre cómo proteger su sitio. + +## Consejos de depuración + +Si te sale un error al ejecutar el script `pa_autconfigure_django.py`, aquí hay algunas causas comunes: + +- Te has olvidado de crear el token de API de PythonAnywhere. +- No has puesto bien la URL de GitHub. +- Si ves un error diciendo *"Could not find your settings.py*, es probable que no añadieras todos tus archivos a Git, y/o no los subiste a GitHub correctamente. Repasa la sección de Git más arriba. +- Si anteriormente te suscribiste a una cuenta de PythonAnywhere y tuviste un error con *collectstatic*, probablemente tengas una versión antigua de SQLite (por ejemplo, 3.8.2) en tu cuenta. En este caso, regístrate con una nueva cuenta e intenta los comandos en la sección PythonAnywhere anterior. + +Si ves un error al visitar tu sitio, el primer lugar para ver qué está pasando es el **log de errores**. Encontrarás un enlace en la página ["Web"](https://www.pythonanywhere.com/web_app_setup/) de PythonAnywhere. Mira si hay algún mensaje de error allí; los más recientes están en la parte inferior. + +Hay también algunos [consejos generales de depuración en la página de ayuda de PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +Y recuerda, ¡tu mentora está aquí para ayudar! + +# ¡Comprueba tu página! + +La página por defecto debería decir "It worked!", tal como dice en tu ordenador local. Prueba a añadir `/admin/` al final de la URL y llegarás a la página de administración. Entra con tu usuario y password, y verás que puedes añadir nuevas publicaciones en el servidor -- recuerda, los post que tenías en tu base de datos local no se han subido a al blog publicado en producción. + +Después de crear algunas publicaciones, puedes volver a tu instalación local (no la de PythonAnywhere). A partir de ahora, trabaja en tu instalación local para hacer los siguientes cambios. Este es un flujo de trabajo típico en el desarrollo web – haz cambios localmente, sube (push) esos cambios a GitHub, y descarga (pull) tus cambios al servidor de publicación. Esto te permite trabajar y experimentar en local sin romper tu página publicada. Mola, ¿eh? + +¡Date una *GRAN* palmada en la espalda! Desplegar a un servidor es una de las partes más complicadas de desarrollo web y a menudo la gente necesita varios días para que funcione del todo. Pero tú ya tienes tu sitio publicado, ¡en internet de verdad! \ No newline at end of file diff --git a/es/deploy/images/github_get_repo_url_screenshot.png b/es/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/es/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/es/deploy/images/new_github_repo.png b/es/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/es/deploy/images/new_github_repo.png differ diff --git a/es/deploy/images/pythonanywhere_account.png b/es/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/es/deploy/images/pythonanywhere_account.png differ diff --git a/es/deploy/images/pythonanywhere_bash_console.png b/es/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..458b43f5d0d Binary files /dev/null and b/es/deploy/images/pythonanywhere_bash_console.png differ diff --git a/es/deploy/images/pythonanywhere_beginner_account_button.png b/es/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/es/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/es/deploy/images/pythonanywhere_create_api_token.png b/es/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..6e617d0a53e Binary files /dev/null and b/es/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/es/deploy/install_git.md b/es/deploy/install_git.md new file mode 100644 index 00000000000..906ce43c9ea --- /dev/null +++ b/es/deploy/install_git.md @@ -0,0 +1,52 @@ +Git es un "sistema de control de versiones" que utilizan muchos programadores. Este software puede seguir los cambios realizados en archivos a lo largo del tiempo de forma que más tarde puedas volver a cualquier versión anterior. Algo similar a la herramienta de "Control de Cambios" en los programas de tipo Word (por ejemplo, Microsoft Word o LibreOffice Writer), pero mucho más potente. + +## Instalar Git + + + +Puedes descargar Git desde [git-scm.com](https://git-scm.com/). Puedes hacer click en "Next" en todos los pasos excepto en dos: cuando se te pregunte que selecciones tu editor, selecciona Nano, y en el paso "adjusting your PATH environment", selecciona "Use Git and optional Unix tools from the Windows Command Prompt" (la última opción). Aparte de eso, los valores por defecto son correctos. "Checkout Windows-style, commit Unix-style line endings" tampoco necesita corrección. + +No olvides reiniciar el Símbolo del Sistema o el PowerShell una vez que la instalación se complete con éxito. + + + +Descarga Git de [git-scm.com](https://git-scm.com/) y sigue las instrucciones. + +> **Nota** Si estas usando OS X 10.6, 10.7 o 10.8, tendrás que instalar git desde aquí: [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$sudo zypper install git +``` + + \ No newline at end of file diff --git a/es/deploy/signup_pythonanywhere.md b/es/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..03bdd1c7f53 --- /dev/null +++ b/es/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere es un servicio para ejecutar código Python en servidores "en la nube". Lo vamos a usar para alojar nuestro sitio para que esté disponible en Internet. + +Almacenaremos del blog que estamos construyendo sobre Python Anywhere. Crea una cuenta como "Principiante/Beginner" en Python Anywhere (el modo gratuito está bien, no necesitas una tarjeta de crédito). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![La pagina de entrada de Python Anywhere muestra el botón para crear una cuenta "Principiante"](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Nota** Cuando elijas un nombre de usuario, recuerda que la URL de tu blog tendrá la forma `tunombredeusuario.pythonanywhere.com`, así que lo mejor será usar tu apodo o elegir un nombre que indique de qué trata tu blog. Asegúrate también de recordar tu contraseña (añádela a tu gestor de contraseñas, si usas uno). + +## Crear un token para la API de PythonAnywhere + +Este paso solo necesita ser completado una vez. Una vez que te hayas registrado en PythonAnywhere, serás llevado a tu tablón principal. Encontrarás el enlace a la página de tu "Cuenta" en la esquina superior derecha: + +![Enlace de cuenta en la parte superior derecha de la página](../deploy/images/pythonanywhere_account.png) + +Después selecciona la lengueta llamada "API token", y haz click en el botón que dice "Crear nueva API token" + +![Lengüeta de la API token en la página de cuenta](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/es/django/README.md b/es/django/README.md new file mode 100755 index 00000000000..4f3961707b2 --- /dev/null +++ b/es/django/README.md @@ -0,0 +1,27 @@ +# ¿Qué es Django? + +Django (*gdh/ˈdʒæŋɡoʊ/jang-goh*) es un framework de aplicaciones web gratuito y de código abierto (open source) escrito en Python. Un framework web es un conjunto de componentes que te ayudan a desarrollar sitios web más fácil y rápidamente. + +Cuando construyes un sitio web, siempre necesitas un conjunto de componentes similares: una manera de manejar la autenticación de usuarios (registrarse, iniciar sesión, cerrar sesión), un panel de administración para tu sitio web, formularios, una forma de subir archivos, etc. + +Por suerte para nosotros, hace tiempo que otros desarrolladores se dieron cuenta de que siempre se enfrentaban a los mismos problemas cuando construían sitios web, y por eso se unieron y crearon frameworks (Django es uno de ellos) con componentes listos para usarse. + +Los frameworks sirven para que no tengamos que reinventar la rueda cada vez y que podamos avanzar más rápido al construir un nuevo sitio. + +## ¿Por qué necesitas un framework? + +Para entender para qué sirve realmente Django, necesitamos fijarnos en cómo funcionan los servidores. Lo primero es que el servidor necesita enterarse de que tú quieres que te sirva una página web. + +Imagina un buzón (puerto) en el que alguien está constantemente mirando si hay cartas entrantes (peticiones). Esto es lo que hace un servidor web. El servidor web lee la carta, y envía una respuesta con la página web. Pero para enviar algo, tenemos que tener algún contenido. Y Django nos ayuda a crear ese contenido. + +## ¿Qué sucede cuando alguien solicita una página web de tu servidor? + +Cuando llega una petición a un servidor web, esta es pasada a Django, quien intenta averiguar qué es lo realmente solicitado. Toma primero una dirección de página web e intenta averiguar qué hacer con ella. Esta parte es realizada por el **urlresolver** de Django (ten en cuenta que la dirección de un sitio web es llamada URL - Uniform Resource Locator; así que el nombre *urlresolver* tiene sentido). Este no es muy inteligente - toma una lista de patrones y trata de hacer coincidir la URL. Django comprueba los patrones de arriba hacia abajo y si algo coincide entonces Django le pasa la solicitud a la función asociada (que se llama *view (vista)*). + +Imagina a un cartero llevando una carta. Él está caminando por la calle y comprueba cada número de casa con el que está en la carta. Si coincide, deja la carta allí. Así es como funciona el urlresolver! + +En la función de *view (vista)* se hacen todas las cosas interesantes: podemos mirar a una base de datos para buscar alguna información. ¿Tal vez el usuario pidió cambiar algo en los datos? Como una carta diciendo "Por favor cambia la descripción de mi trabajo." La *vista* puede comprobar si tienes permiso para hacerlo, actualizar la descripción de tu trabajo y devolver un mensaje: "¡Hecho!". Luego la *vista* genera una respuesta y Django puede enviarla al navegador del usuario. + +Esta descripción es un poco simplista, pero de momento no necesitas saber todos los detalles técnicos, con tener una idea general es más que suficiente. + +Así que en lugar de detenernos demasiado en los detalles, vamos a empezar a crear algo con Django y ¡así aprenderemos las cosas importantes sobre la marcha! \ No newline at end of file diff --git a/es/django_admin/README.md b/es/django_admin/README.md new file mode 100755 index 00000000000..a2b07feae4a --- /dev/null +++ b/es/django_admin/README.md @@ -0,0 +1,57 @@ +# Administrador de Django + +Para agregar, editar y borrar los posts que hemos modelado, usaremos el administrador (admin) de Django. + +Abre el fichero `blog/admin.py` en el editor y reemplaza su contenido con esto: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Como puedes ver, importamos (incluimos) el modelo Post definido en el capítulo anterior. Para hacer nuestro modelo visible en la página del administrador, tenemos que registrar el modelo con `admin.site.register(Post)`. + +Ok, es hora de ver nuestro modelo Post. Recuerda ejecutar `python manage.py runserver` en la consola para correr el servidor web. Ve a tu navegador y escribe la dirección http://127.0.0.1:8000/admin/. Verás una página de inicio de sesión como esta: + +![Página de inicio de sesión](images/login_page2.png) + +Para iniciar sesión, deberás crear un *superusuario (superuser)*, que es un usuario que tiene control sobre todo el sitio. Vuelve a la línea de comandos, escribe `python manage.py createsuperuser` y pulsa enter. + +> Recuerda, para escribir comandos mientras el servidor web está funcionando, abre una nueva terminal y activa el virtualenv. Revisamos cómo escribir nuevos comandos en el capítulo **Tu primer proyecto de Django!**, al inicio de la sección **Iniciando el servidor web**. + +{% filename %}macOS o Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Cuando te lo pida, escribe tu nombre de usuario (en minúscula, sin espacios), email y contraseña. **No te preocupes si no puedes ver la contraseña que estás tecleando - así es como debe ser.** Tecléalo y pulsa `intro` para continuar. Luego, verás algo así (donde username y email serán los que escribiste anteriormente): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Vuelve a tu navegador. Entra con las credenciales de super usuario que escogiste; verás el panel de administrador de Django. + +![Administrador de Django](images/django_admin3.png) + +Ve a 'Posts' y curiosea un poco. Añade cinco o seis publicaciones en tu blog. No te preocupes por el contenido -- solo será visible para ti en tu ordenador -- puedes copiar y pegar texto de este tutorial para ir más rápido. :) + +Asegúrate de que al menos dos o tres posts (pero no todos) tengan la fecha de publicación definida. Esto será muy poderoso después. + +![Administrador de Django](images/edit_post3.png) + +Si desea saber más sobre el administrador de Django, debe consultar la documentación de Django: https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +Este posiblemente sea un buen momento para tomar un café (o té) o algo para comer y reenergizar tu cuerpo. Has creado tu primer modelo en Django - ¡Mereces un pequeño descanso! \ No newline at end of file diff --git a/es/django_admin/images/django_admin3.png b/es/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/es/django_admin/images/django_admin3.png differ diff --git a/es/django_admin/images/edit_post3.png b/es/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/es/django_admin/images/edit_post3.png differ diff --git a/es/django_admin/images/login_page2.png b/es/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/es/django_admin/images/login_page2.png differ diff --git a/es/django_forms/README.md b/es/django_forms/README.md new file mode 100755 index 00000000000..2e4c49fa148 --- /dev/null +++ b/es/django_forms/README.md @@ -0,0 +1,449 @@ +# Formularios de Django + +Lo último que haremos en nuestro sitio web será crear una forma agradable de agregar y editar posts en el blog. El `admin` de Django está bien, pero es bastante difícil de personalizar y hacerlo bonito. Con `forms` tendremos un poder absoluto sobre nuestra interfaz; ¡podemos hacer casi cualquier cosa que podamos imaginar! + +Lo bueno de los formularios de Django es que podemos definirlos desde cero o crear un `ModelForm`, el cual guardará el resultado del formulario en el modelo. + +Esto es exactamente lo que queremos hacer: crearemos un formulario para nuestro modelo `Post`. + +Como cada parte importante de Django, los formularios tienen su propio archivo: `forms.py`. + +Necesitamos crear un archivo con este nombre en el directorio `blog`. + + blog + └── forms.py + + +Vale, ábrelo en el editor de código y teclea lo siguiente: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Lo primero, necesitamos importar Django forms (`from django import forms`) y nuestro modelo `Post` (`from .models import Post`). + +`PostForm`, como probablemente sospechas, es el nombre de nuestro formulario. Necesitamos decirle a Django que este formulario es un `ModelForm` (así Django hará algo de magia por nosotros) - `forms.ModelForm` es responsable de ello. + +Luego, tenemos `class Meta`, donde le decimos a Django qué modelo debe ser utilizado para crear este formulario (`model = Post`). + +Finalmente, podemos decir qué campo(s) deberían estar en nuestro formulario. En este escenario sólo queremos `title` y `text` para ser mostrados - `author` será la persona que está conectada (¡tú!) y `created_date` se definirá automáticamente cuando creemos un post (es decir, en el código), ¿cierto? + +¡Y eso es todo! Todo lo que necesitamos hacer ahora es usar el formulario en una *view* y mostrarla en una plantilla. + +Una vez más vamos a crear: un enlace a la página, una dirección URL, una vista y una plantilla. + +## Enlace a una página con el formulario + +Ahora toca abrir el fichero `blog/templates/blog/base.html` en el editor. Vamos a añadir un enlace en el `div` llamado `page-header`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Ten en cuenta que queremos llamar a nuestra nueva vista `post_new`. La clase `"glyphicon glyphicon-plus"` es proporcionada por el tema de bootstrap que estamos utilizando, y nos mostrará un signo de suma. + +Después de agregar la línea, tu archivo html debería lucir de esta forma: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Después de guardar y refrescar la página http://127.0.0.1:8000 verás el - ya conocido - error `NoReverseMatch`. ¿Es así? ¡Vamos bien! + +## URL + +Abrimos `blog/urls.py` en el editor para añadir una línea: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new', views.post_new, name='post_new'), +``` + +Y el código final tendrá este aspecto: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Después de actualizar el sitio, veremos un `AttributeError`, puesto que no tenemos la vista `post_new` implementada. Añadaáosla de una vez. + +## Vista post_new + +Ahora abre el fichero `blog/views.py` en el editor y añade estas líneas con el resto de imports `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +Y ahora nuestra *vista*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Para crear un nuevo formulario `Post`, tenemos que llamar a `PostForm()` y pasarlo a la plantilla. Volveremos a esta *vista* pero, por ahora, vamos a crear rápidamente una plantilla para el formulario. + +## Plantilla + +Tenemos que crear un fichero `post_edit.html` el el directorio `blog/templates/blog`, y abrirlo en el editor de código. Para hacer que un formulario funcione necesitamos varias cosas: + +* Tenemos que mostrar el formulario. Podemos hacerlo, por ejemplo, con un sencillo {% raw %}`{{ form.as_p }}`{% endraw %}. +* La línea anterior tiene que estar dentro de una etiqueta de formuLario HTML: `
...
`. +* Necesitamos un botón `Guardar`. Lo hacemos con un botón HTML: ``. +* Finalmente justo después de abrir la etiqueta `
` tenemos que añadir {% raw %}`{% csrf_token %}`{% endraw %}. ¡Esto es muy importante ya que hace que tus formularios sean seguros! Si olvidas este pedazo, Django se molestará cuando intentes guardar el formulario: + +![CSFR Forbidden page](images/csrf2.png) + +Bueno, miremos lo que se debería ver el HTML en `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 }} + +
+{% endblock %} +``` + +¡Es hora de actualizar! ¡Sí! ¡Tu formulario se muestra! + +![Nuevo formulario](images/new_form2.png) + +Pero, ¡un momento! Si escribes algo en los campos `title` y `text` y tratas de guardar los cambios - ¿qué pasará? + +¡Nada! Una vez más estamos en la misma página y el texto se ha ido... no se añade ningún post nuevo. Entonces, ¿qué ha ido mal? + +La respuesta es: nada. Tenemos que trabajar un poco más en nuestra *vista*. + +## Guardar el formulario + +Abre `blog/views.py` de nuevo en el editor. De momento todo lo que tenemos en la vista `post_new` es lo siguiente: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Cuando enviamos el formulario somos redirigidos a la misma vista, pero esta vez tenemos algunos datos adicionales en `request`, más específicamente en `request.POST` (el nombre no tiene nada que ver con un post del blog, se refiere a que estamos "publicando" -en inglés, posting- datos). ¿Recuerdas que en el archivo HTML la definición de `
` tenía la variable `method="POST"`? Todos los campos del formulario estan ahora en `request.POST`. No deberías renombrar la variable `POST` (el único nombre que también es válido para la variable `method` es `GET`, pero no tenemos tiempo para explicar cuál es la diferencia). + +En nuestra *vista* tenemos dos situaciones distintas que manejar: primero, cuando accedemos a la página por primera vez y queremos un formulario vacío, y segundo, cuando regresamos a la *vista* con los datos del formulario que acabamos de ingresar. Así que tenemos que añadir una condición (utilizaremos `if` para eso): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Es hora de rellenar los puntos `[...]`. Si el `método` es `POST` entonces querremos construir el `PostForm` con datos del formulario, cierto? Lo haremos de la siguiente manera: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Lo siguiente es verificar si el formulario está correcto (si todos los campos necesarios están definidos y no hay valores incorrectos). Lo hacemos con `form.is_valid()`. + +Comprobamos que el formulario es válido y, si es así, ¡lo podemos salvar! + +{% 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() +``` + +Básicamente, tenemos que hacer dos cosas: guardamos el formulario con `form.save` y añadimos una autora (ya que no había ningún campo de `author` en el `PostForm` y este campo es obligatorio). `commit=False` significa que no queremos guardar el modelo `Post` aún - queremos añadir la autora primero. La mayoría de las veces utilizarás `form.save()`, sin `commit=False`, pero en este caso, tenemos que hacerlo. `post.save()` conservará los cambios (añadiendo a autor) y se creará una nuevo post en el blog! + +Por último, sería genial si podemos inmediatamente ir a la página `post_detail` del nuevo post, ¿no? Para hacerlo necesitamos importar algo más: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Agrégalo al principio del archivo. Y ahora podemos decir: "ve a la página `post_detail` del post recién creado": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` es el nombre de la vista a la que queremos ir. ¿Recuerdas que esta *view* requiere una variable `pk`? Para pasarlo a las vistas utilizamos `pk=post.pk`, donde `post` es el post recién creado! + +Bien, hablamos mucho, pero probablemente queremos ver como se ve la *vista*, ¿verdad? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Veamos si funciona. Ve a la página http://127.0.0.1:8000/post/new/, añade un `title` y un `text`, guárdalo... y voilá! Se ha añadido el nuevo post al blog y somos redirigidos a la página de `post_detail`! + +Puede que hayas notado que estamos indicando la fecha de publicación antes de guardar el post. Más adelante introduciremos un *botón de publicar* en el libro **Django Girls Tutorial: Extensions**. + +¡Eso es genial! + +> Como recientemente hemos utilizado la interfaz de administrador de Django, el sistema piensa que estamos conectados. Hay algunas situaciones que podrían llevarnos a desconectarnos (cerrando el navegador, reiniciando la base de datos, etc.). Si estás recibiendo errores al crear un post que indican la falta de inicio de sesión de usuario, dirígete a la pagina de admin http://127.0.0.1:8000/admin e inicia sesión nuevamente. Esto resolverá el problema temporalmente. Hay un arreglo permanente esperándote en el capítulo **Tarea: ¡Añadir seguridad a tu sitio web!** después del tutorial principal. + +![Error de inicio de sesión](images/post_create_error.png) + +## Validación de formularios + +Ahora, vamos a enseñarte qué tan bueno es Django forms. Un post del blog debe tener los campos `title` y `text`. En nuestro modelo `Post` no dijimos (a diferencia de `published_date`) que estos campos no son requeridos, así que Django, por defecto, espera que estén definidos. + +Trata de guardar el formulario sin `title` y `text`. ¡Adivina qué pasará! + +![Validación de formularios](images/form_validation2.png) + +Django se encarga de validar que todos los campos en el formulario estén correctos. ¿No es genial? + +## Editar formulario + +Ahora sabemos cómo agregar un nuevo formulario. Pero, ¿qué pasa si queremos editar uno existente? Es muy similar a lo que acabamos de hacer. Creemos rápidamente algunas cosas importantes. (si no entiendes algo, pregúntale a tu tutora o tutor, o revisa lo capítulos anteriores, son temas que ya hemos cubierto.) + +Abre `blog/templates/blog/post_detail.html` en el editor de código y añade la línea + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +para que la plantilla quede así: + +{% 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 %} +``` + +Abre `blog/urls.py` en el editor y añade esta línea: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Vamos a reusar la plantilla `blog/templates/blog/post_edit.html`, así que lo último que nos falta es una *view*. + +Abre `blog/views.py` en el editor de código y añade esto al final del todo: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Esto se ve casi exactamente igual a nuestra view `post_new`, ¿no? Pero no del todo. Por un lado, pasamos un parámetro `pk` adicional de `urls`. Segundo: obtenemos el modelo `Post` que queremos editar con `get_object_or_404(Post, pk=pk)` y después, al crear el formulario pasamos este post como una `instancia` tanto al guardar el formulario… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +... y justo cuando abrimos un formulario con este post para editarlo: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Ok, ¡vamos a probar si funciona! Dirígete a la página `post_detail`. Ahí debe haber un botón para editar en la esquina superior derecha: + +![Botón editar](images/edit_button2.png) + +Al dar clic ahí, debes ver el formulario con nuestro post del blog: + +![Editar formulario](images/edit_form2.png) + +¡Siéntete libre de cambiar el título o el texto y guarda los cambios! + +¡Felicitaciones! ¡Tu aplicación está cada vez más completa! + +Si necesitas más información sobre los formularios de Django, lee la documentación: https://docs.djangoproject.com/en/2.2/topics/forms/ + +## Seguridad + +¡Poder crear nuevas publicaciones haciendo click en un enlace es genial! Pero, ahora mismo, cualquiera que visite tu página podría publicar un nuevo post y seguro que eso no es lo que quieres. Vamos a hacer que el botón sea visible para ti pero no para nadie más. + +Abre `blog/templates/blog/base.html` en el editor, busca el `div` `page-header` y la etiqueta del enlace (anchor) que pusimos antes. Debería ser algo así: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Vamos a añadir otra etiqueta `{% if %}` que hará que el enlace sólo parezca para los usuarios que hayan iniciado sesión en el admin. Ahora mismo, ¡eres sólo tú! Cambia la etiqueta `` para que se parezca a esto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Este `{% if %}` hará que el enlace sólo se envíe al navegador si el usuario que solicita la página ha iniciado sesión. Esto no protege completamente la creación de nuevas entradas, pero es un buen primer paso. Veremos más sobre seguridad en el libro de extensiones. + +Recuerdas el icono de "editar" que acabamos de añadir a nuestra página de detalles? También queremos añadir lo mismo aquí, así otras personas no podrán editar posts existentes. + +Abre `blog/templates/blog/post_detail.html` en el editor y busca esta línea: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Cámbiala a lo siguiente: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Dado que es probable que estés conectado, si actualizas la página, no verás nada diferente. Carga la página en un navegador diferente o en una ventana en modo incógnito ("privado" en Windows Edge) y verás que el link no aparece, y el icono tampoco! + +## Una cosa más: ¡Tiempo de despliegue! + +Veamos si todo esto funciona en PythonAnywhere. ¡Tiempo de hacer otro despliegue! + +* Lo primero, haz commit de tus últimos cambios y súbelo (push) a GitHub: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* Luego, en una [consola Bash de PythonAnywhere](https://www.pythonanywhere.com/consoles/) + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Recuerda sustituir `` con tu subdominio de PythonAnywhere real, sin los paréntesis angulares.) + +* Para terminar ve a ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (usa el botón del menú de la esquina superior derecha, encima de la consola) y haz click en **Reload**. Recarga tu https://subdomain.pythonanywhere.com blog para ver los cambios. + +¡Y eso debería ser todo! Felicidades :) diff --git a/es/django_forms/images/csrf2.png b/es/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/es/django_forms/images/csrf2.png differ diff --git a/es/django_forms/images/drafts.png b/es/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/es/django_forms/images/drafts.png differ diff --git a/es/django_forms/images/edit_button2.png b/es/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/es/django_forms/images/edit_button2.png differ diff --git a/es/django_forms/images/edit_form2.png b/es/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/es/django_forms/images/edit_form2.png differ diff --git a/es/django_forms/images/form_validation2.png b/es/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/es/django_forms/images/form_validation2.png differ diff --git a/es/django_forms/images/new_form2.png b/es/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/es/django_forms/images/new_form2.png differ diff --git a/es/django_forms/images/post_create_error.png b/es/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/es/django_forms/images/post_create_error.png differ diff --git a/es/django_installation/README.md b/es/django_installation/README.md new file mode 100755 index 00000000000..03408eab6da --- /dev/null +++ b/es/django_installation/README.md @@ -0,0 +1,7 @@ +# Instalacion de Django + +> **Nota** Si usas un Chromebook, omite este capítulo y asegúrate de seguir las instrucciones de [Chromebook Setup](../chromebook_setup/README.md). +> +> **Nota** Si ya has realizado los pasos de instalación, esto ya lo has hecho. ¡Puedes avanzar directamente al siguiente capítulo! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/es/django_installation/instructions.md b/es/django_installation/instructions.md new file mode 100644 index 00000000000..ef02551a181 --- /dev/null +++ b/es/django_installation/instructions.md @@ -0,0 +1,225 @@ +> Parte de esta sección está basada en tutoriales por Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Parte de este capítulo está basada en el [django-marcador tutorial](http://django-marcador.keimlink.de/) bajo la licencia Creative Commons Attribution-ShareAlike 4.0 internacional. El tutorial de django-marcador tiene derechos de autor de Markus Zapke-Gündemann et al. + +## Entorno virtual + +Antes de instalar Django, instalaremos una herramienta extremadamente útil que ayudará a mantener tu entorno de desarrollo ordenado en tu computadora. Es posible saltarse este paso, pero es altamente recomendable. ¡Empezar con la mejor configuración posible te ahorrará muchos problemas en el futuro! + +Así que, vamos a crear un **entorno virtual** (también llamado un *virtualenv*). Virtualenv aísla tu configuración de Python/Django para cada proyecto. Esto quiere decir que cualquier cambio que hagas en un sitio web no afectará a ningún otro que estés desarrollando. Genial, ¿no? + +Todo lo que necesitas hacer es encontrar un directorio en el que quieras crear el `virtualenv`; tu directorio home, por ejemplo. En Windows, puede verse como `C:\Users\Name` (donde `Name` es el nombre de tu usuario). + +> **NOTA:** En Windows, asegúrate de que este directorio no contiene caracteres especiales o acentuados; si tu nombre de usuario contiene caracteres acentuados, usa un directorio distinto, por ejemplo `C:\djangogirls`. + +Para este tutorial usaremos un nuevo directorio `djangogirls` en tu directorio home: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Haremos un virtualenv llamado `myvenv`. El comando general estará en el formato: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Para crear un nuevo `virtualenv`, necesitas abrir una terminal "command prompt" y ejecutar `python -m venv myvenv`. Se verá así: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Donde `myvenv` es el nombre de tu `virtualenv`. Puedes utilizar cualquier otro nombre, pero asegúrate de usar minúsculas y no usar espacios, acentos o caracteres especiales. También es una buena idea mantener el nombre corto. ¡Vas utilizarlo muchas vecesl! + + + + + +Podemos crear un `virtualenv` en Linux y macOS, es tan sencillo como ejecutar `python3 -m venv myvenv`. Se verá así: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` es el nombre de tu `virtualenv`. Puedes usar cualquier otro nombre, pero sólo utiliza minúsculas y no incluyas espacios. También es una buena idea mantener el nombre corto. ¡Vas a referirte muchas veces a él! + +> **NOTA:** En algunas versiones de Debian/Ubuntu, puede que obtengas el siguiente error: +> +> {% filename %}command-line{% endfilename %} +> +> The virtual environment was not created successfully because ensurepip is not available. En sistemas Debian/Ubuntu, tendrás que instalar el paquete python3-venv usando el siguiente comando. +> apt-get install python3-venv +> Puede que tengas que usar sudo con este comando. Después de instalar el paquete python3-venv, vuelve a crear tu entorno virtual. +> +> +> En este caso, sigue las instrucciones anteriores e instala el paquete `python3-venv`: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **NOTA:** En algunas versiones de Debian/Ubuntu inicializar el entorno virtual de esta manera da el siguiente 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 +> +> +> Para evitar esto, utiliza directamente el comando `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt-get install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **NOTA:** Si obtienes un error como +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> entonces ejecuta: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## Trabajar con virtualenv + +El comando anterior creará un directorio llamado `myvenv` (o cualquier nombre que hayas elegido) que contiene nuestro entorno virtual (básicamente un montón de archivos y carpetas). + + + +Inicia el entorno virtual ejecutando: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **Nota:** en 10 de Windows puedes obtener un error en Windows PowerShell que dice `execution of scripts is disabled on this system`. En este caso, abre otro Windows PowerShell con la opción "Ejecutar como administrador". Luego intenta escribir el siguiente comando antes de inicializar tu entorno virtual: +> +> {% 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 +> + +> **NOTA:** Para usuarios del popular editor VS Code, el cual viene con una terminal integrada basada en el poweshell de windows; si deseas añadir la terminal integrada, puedes arrancar el siguiente comando para activar tu entorno virtual: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> La ventaja es que no tienes que cambiar las ventanas entre el editor de código y la línea de comandos. + + + + + +Inicia el entorno virtual ejecutando: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +¡Recuerda reemplazar `myvenv` con tu nombre de `virtualenv` que hayas elegido! + +> **NOTA:** a veces `source` podría no estar disponible. En ese caso trata hacerlo de esta forma: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Sabrás que tienes `virtualenv` iniciado cuando veas que la línea de comando en tu consola tiene el prefijo `(myvenv)`. + +Cuando trabajes en un entorno virtual, `python` automáticamente se referirá a la versión correcta, de modo que puedes utilizar `python` en vez de `python3`. + +Ok, tenemos todas las dependencias importantes en su lugar. ¡Finalmente podemos instalar Django! + +## Instalar Django {#django} + +Ahora que tienes tu `virtualenv` iniciado, puedes instalar Django. + +Antes de hacer eso, debemos asegurarnos que tenemos la última versión de `pip`, el software que utilizamos para instalar Django: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Instalar paquetes con un fichero de requisitos (requirements) + +Un fichero de requisitos (requirements) tiene una lista de dependencias que se deben instalar mediante `pip install`: + +Primero crea un archivo `requirements.txt` dentro de tu directorio `djangogirls`, usando el editor de código que instalaste previamente. Lo puedes hacer mediante abriendo un nuevo archivo en el editor de código y guardándolo como `requirements.txt` en el directorio `djangogirls`. Tu directorio se verá así: + + djangogirls + └───requirements.txt + + +Dentro del fichero `djangogirls/requirements.txt` deberías tener el siguiente texto: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Ahora, ejecuta `pip install -r requirements.txt` para instalar 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Si obtienes un error cuando llamas al pip en la plataforma de Windows, por favor verifica si el nombre de ruta de tu proyecto contiene espacios, acentos o caracteres especiales (por ejemplo, `C:\Usuarios\NombreUsuario\djangogirls`). Si los tiene, utiliza otro en su lugar sin espacios, acentos o caracteres especiales (sugerencia: `C:\djangogirls`). Crea un nuevo virtualenv en el nuevo directorio, luego borra el viejo y trata de escribir el comando anterior otra vez. (Moviendo el directorio virtualenv no funcionará debido a que usa rutas absolutas.) + + + + + +> Tu línea de comando puede congelarse luego de intentar instalar Django. Si esto sucede, usa el siguiente comando: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Si obtienes un error cuando llamas pip en Ubuntu 12.04, por favor corre `python -m pip install -U --force-reinstall pip` para reparar la instalación de pip en el virtualenv. + + + +¡Eso es todo! Ahora estás lista (por fin) para crear una aplicación Django! diff --git a/es/django_models/README.md b/es/django_models/README.md new file mode 100755 index 00000000000..23c9db14d75 --- /dev/null +++ b/es/django_models/README.md @@ -0,0 +1,201 @@ +# Modelos en Django + +Lo que queremos crear ahora es algo que almacene todas las entradas de nuestro blog. Pero para poder hacerlo tenemos que hablar un poco sobre algo llamado `objetos`. + +## Objetos + +Hay un concepto en el mundo de la programación llamado `programación orientada a objetos`. La idea es que en lugar de escribir todo como una aburrida secuencia de instrucciones de programación podemos modelar cosas y definir cómo interactúan entre ellas. + +Entonces, ¿qué es un objeto? Es un conjunto de propiedades y acciones. Suena raro, pero te daremos un ejemplo. + +Si queremos modelar un gato crearemos un objeto `Gato` que tiene algunas propiedades como: `color`, `edad`, `temperamento` (como bueno, malo, o dormilón ;)), y `dueño` (este es un objeto `Persona` o en caso de un gato callejero, esta propiedad está vacía). + +Luego, el `Gato` tiene algunas acciones como: `ronronear`, `arañar` o `alimentar` (en cuyo caso daremos al gato algo de `ComidaDeGato`, el cual debería ser un objeto aparte con propiedades como `sabor`). + + Gato + --------- + color + edad + humor + dueño + ronronear() + rasguñar() + alimentarse(comida_de_gato) + + + + ComidaDeGato + -------- + sabor + + +Básicamente se trata de describir cosas reales en el código con propiedades (llamadas `propiedades del objeto`) y las acciones (llamadas `métodos`). + +Y ahora, ¿cómo modelamos las entradas en el blog? Queremos construir un blog, ¿no? + +Necesitamos responder a la pregunta: ¿Qué es una entrada de un blog? ¿Qué propiedades debería tener? + +Bueno, seguro que nuestras entradas de blog necesitan un texto con su contenido y un título, ¿cierto? También sería bueno saber quién lo escribió, así que necesitamos un autor. Por último, queremos saber cuándo se creó y publicó la entrada. + + Post + -------- + title + text + author + created_date + published_date + + +¿Qué tipo de cosas podría hacerse con una entrada del blog? Sería bueno tener algún `método` que publique la entrada, ¿no? + +Así que vamos a necesitar el método `publicar`. + +Puesto que ya sabemos lo que queremos lograr, ¡podemos empezar a modelarlo en Django! + +## Modelos en Django + +Sabiendo qué es un objeto, podemos crear un modelo en Django para nuestros entradas de blog. + +Un modelo en Django es un tipo especial de objeto que se guarda en la `base de datos`. Una base de datos es una colección de datos. Es un lugar en el cual almacenarás la información sobre usuarios, tus entradas de blog, etc. Utilizaremos una base de datos SQLite para almacenar nuestros datos. Este es el adaptador de base de datos predeterminado en Django -- será suficiente para nosotros por ahora. + +Puedes pensar el modelo en la base de datos, como una hoja de cálculo con columnas (campos) y filas (datos). + +### Crear una aplicación + +Para mantener todo en orden, crearemos una aplicación separada dentro de nuestro proyecto. Es muy bueno tener todo organizado desde el principio. Para crear una aplicación, necesitamos ejecutar el siguiente comando en la consola (dentro de la carpeta de `djangogirls` donde está el archivo `manage.py`): + +{% filename %}macOS y Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Notarás que se ha creado un nuevo directorio `blog` y ahora contiene una cantidad de archivos. Los directorios y archivos en nuestro proyecto deberían verse así: + + djangogirls + ├── blog + │   ├── __init__.py + │   ├── admin.py + │   ├── apps.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + └── requirements.txt + + +Después de crear una aplicación, también necesitamos decirle a Django que debe utilizarla. Eso se hace en el fichero `mysite/settings.py` -- ábrelo en el editor. Tenemos que encontrar `INSTALLED_APPS` y agregar una línea que contiene `'blog.apps.BlogConfig',` justo por encima de `]`. El producto final debe tener este aspecto: + +{% 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.apps.BlogConfig', +] +``` + +### Crear el modelo del Post + +En el archivo `blog/models.py` definimos todos los objetos llamados `Models`. Este es un lugar en el cual definiremos nuestra entrada del blog. + +Abre `blog/models.py` en el editor, borra todo, y escribe código como este: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Comprueba nuevamente que usas dos guiones bajos (`_`) en cada lado de `str`. Esta convención se usa en Python con mucha frecuencia y a veces también se llaman "dunder" (abreviatura de "double-underscore" o, en español, "doble guión bajo"). + +Da un poco de miedo, ¿no? Pero no te preocupes, ¡vamos a explicar qué significan estas líneas! + +Todas las líneas que comienzan con `from` o `import` son líneas para agregar algo de otros archivos. Así que en vez de copiar y pegar las mismas cosas en cada archivo, podemos incluir algunas partes con `from... import ...`. + +`class Post(models.Model):`, esta línea define nuestro modelo (es un `objeto`). + +- `class` es una palabra clave que indica que estamos definiendo un objeto. +- `Post` es el nombre de nuestro modelo. Podemos darle un nombre diferente (pero debemos evitar espacios en blanco y caracteres especiales). Siempre inicia el nombre de una clase con una letra mayúscula. +- `models.Model` significa que Post es un modelo de Django, así Django sabe que debe guardarlo en la base de datos. + +Ahora definimos las propiedades de las que hablábamos: `title`, `text`, `created_date`, `published_date` y `author`. Para ello tenemos que definir el tipo de cada campo (¿es texto? ¿un número? ¿una fecha? ¿una relación con otro objeto como un User (usuario)?) + +- `models.CharField`, así es como defines un texto con un número limitado de caracteres. +- `models.TextField`, este es para texto largo sin límite. Suena perfecto para el contenido de la entrada del blog, ¿no? +- `models.DateTimeField`, este es fecha y hora. +- `modelos.ForeignKey`, este es una relación (link) con otro modelo. + +No vamos a explicar aquí cada pedacito de código porque nos tomaría demasiado tiempo. Deberías echar un vistazo a la documentación de Django si deseas obtener más información sobre los campos Modelo y cómo definir otras cosas distintas a las descritas anteriormente (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field-types). + +¿Y qué sobre `def publish(self):`? Es exactamente el método `publish` que mencionábamos antes. `def` significa que es una función/método y `publish` es el nombre del método. Puedes cambiar el nombre del método, si quieres. La regla de nomenclatura es utilizar minúsculas y guiones bajos en lugar de espacios. Por ejemplo, un método que calcule el precio medio se podría llamar `calcular_precio_medio`. + +Los métodos suelen devolver (`return`, en inglés) algo. Hay un ejemplo de esto en el método `__str__`. En este escenario, cuando llamemos a `__str__()` obtendremos un texto (**string**) con un título de Post. + +También, nota que ambos `def publish(self):`, y `def __str__(self):` son indentados dentro de nuestra clase. Porque Python es sensible a los espacios en blancos, necesitamos indentar nuestros métodos dentro de la clase. De lo contrario, los métodos no pertenecen a la clase, y puedes obtener un comportamiento inesperado. + +Si algo todavía no está claro sobre modelos, ¡no dudes en preguntar a tu guía! Sabemos que es complicado, sobre todo cuando aprendes lo que son funciones y objetos al mismo tiempo. Pero con suerte, ¡todo tiene un poco más de sentido para ti ahora! + +### Crear tablas para los modelos en tu base de datos + +El último paso aquí es agregar nuestro nuevo modelo a la base de datos. Primero tenemos que hacer saber a Django que hemos hecho cambios en nuestro modelo. (Lo acabamos de crear!) Ve a tu terminal y escribe `python manage.py makemigrations blog`. Se verá así: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Nota:** Recuerda guardar los archivos que edites. De otro modo, tu computador ejecutará las versiones anteriores lo que puede ocasionar errores inesperados. + +Django preparó un archivo de migración que ahora tenemos que aplicar a nuestra base de datos. Escribe `python manage.py migrate blog` y el resultado debería ser: + +{% 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 + + +¡Hurra! ¡Nuestro modelo Post ya está en nuestra base de datos! Estaría bien verlo, ¿no? ¡Salta al siguiente capítulo para ver qué aspecto tiene tu Post! \ No newline at end of file diff --git a/es/django_orm/README.md b/es/django_orm/README.md new file mode 100755 index 00000000000..c814d6d0bc5 --- /dev/null +++ b/es/django_orm/README.md @@ -0,0 +1,221 @@ +# ORM de Django y QuerySets + +En este capítulo aprenderás cómo Django se conecta a la base de datos y almacena los datos en ella. ¡Vamos a sumergirnos! + +## ¿Qué es un QuerySet? + +Un QuerySet es, en esencia, una lista de objetos de un modelo determinado. Un QuerySet te permite leer los datos de la base de datos, filtrarlos y ordenarlos. + +Es más fácil de aprender con ejemplos. Vamos a intentarlo, ¿de acuerdo? + +## Django shell + +Abre tu consola local (no la de PythonAnywhere) y escribe este comando: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +El resultado debería ser: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Ahora estás en la consola interactiva de Django. Es como una consola de Python normal, pero con un poco de magia de Django. :) Aquí también se pueden usar todos los comandos de Python. + +### Todos los objetos + +Vamos a mostrar todos nuestros posts primero. Puedes hacerlo con el siguiente comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +¡Uy! Apareció un error. Nos dice que Post no existe. Esto es correcto, ¡olvidamos importarlo! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Vamos a importar el modelo `Post` de `blog.models`. Y probamos de nuevo a mostrar todas las publicaciones (posts): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +¡Es la lista de posts que creamos anteriormente! Creamos estos posts usando la interfaz de administración de Django. Pero, ahora queremos crear nuevos posts usando Python, ¿cómo lo hacemos? + +### Crear objetos + +Esta es la forma de crear un nuevo objeto Post en la base de datos: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Pero nos falta un ingrediente aquí: `me`. Tenemos que pasar una instancia del modelo `User` como autor. ¿Eso cómo se hace? + +Primero importemos el modelo User: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +¿Qué usuarios tenemos en nuestra base de datos? Prueba esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +¡Este es el superusuario que hemos creado antes! Ahora, vamos a obtener una instancia de este usuario (cambia el código para usar tu propio nombre de usuario): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Como ves, ya hemos obtenido (`get`) un usuario (`User`) cuyo `username` es igual a 'ola'. ¡Mola! + +Ahora, finalmente, podemos crear nuestra entrada: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +¡Hurra! ¿Quieres probar si funcionó? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +¡Ahí está, una entrada de blog más en la lista! + +### Agrega más entradas + +Ahora puedes divertirte un poco y agregar más entradas para ver cómo funciona. Agrega dos o tres más y avanza a la siguiente parte. + +### Filtrar objetos + +Una parte importante de los QuerySets es la habilidad para filtrar los resultados. Digamos que queremos encontrar todos los post del usuario ola. Usaremos `filter` en vez de `all` en `Post.objects.all()`. Entre paréntesis estableceremos qué condición (o condiciones) debe cumplir un post del blog para aparecer como resultado en nuestro queryset. En nuestro caso sería `author` es igual a `me`. La forma de escribirlo en Django es: `author=me`. Ahora nuestro bloque de código tiene este aspecto: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +¿O quizá queremos ver todas las entradas que contengan la palabra 'title' en el campo `title`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Nota** Hay dos guiones bajos (`_`) entre `title` y `contains`. El ORM de Django utiliza esta sintaxis para separar los nombres de los campos ("title") de las operaciones o filtros ("contains"). Si sólo utilizas un guion bajo, obtendrás un error como "FieldError: Cannot resolve keyword title_contains". + +También puedes obtener una lista de todos los post publicados. Lo hacemos filtrando los post que tienen la fecha de publicación, `published_date`, en el pasado: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Por desgracia, el post que hemos añadido desde la consola de Python aún no está publicado. ¡Pero lo podemos cambiar! Primero obtén una instancia de la entrada que queremos publicar: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Y luego publícala con nuestro método `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Ahora vuelve a intentar obtener la lista de posts publicados (pulsa la tecla de "flecha arriba" tres veces y pulsa `enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Ordenar objetos + +Los QuerySets también te permiten ordenar la lista de objetos. Intentemos ordenarlos por el campo `created_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +También podemos invertir el orden agregando `-` al principio: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Consultas complejas a través de encadenamiento de métodos + +Como ves, algunos métodos en `Post.objects` devuelven un QuerySet. Los mismos métodos pueden ser llamados también en un QuerySet, y entonces devolverán un nuevo QuerySet. También puedes combinar QuerySets **encadenando** uno con otro: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Es muy potente y te permite escribir consultas bastante complejas. + +¡Genial! ¡Ahora estás lista para la siguiente parte! Para cerrar la consola, escribe esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/es/django_start_project/README.md b/es/django_start_project/README.md new file mode 100755 index 00000000000..1301c300bf9 --- /dev/null +++ b/es/django_start_project/README.md @@ -0,0 +1,206 @@ +# ¡Tu primer proyecto en Django! + +> Parte de este capítulo se basa en tutoriales por Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Parte de este capítulo está basado en el [tutorial django-marcador](http://django-marcador.keimlink.de/) bajo licencia de Creative Commons Attribution-ShareAlike 4.0 internacional. El tutorial de django-marcador tiene derechos de autor de Markus Zapke-Gündemann et al. + +¡Vamos a crear un blog sencillo! + +El primer paso es iniciar un nuevo proyecto de Django. Básicamente, significa que vamos a lanzar unos scripts proporcionados por Django que nos crearán el esqueleto de un proyecto de Django. Son solo un montón de directorios y archivos que usaremos más tarde. + +Los nombres de algunos archivos y directorios son muy importantes para Django. No deberías renombrar los archivos que estamos a punto de crear. Moverlos a un lugar diferente tampoco es buena idea. Django necesita mantener una cierta estructura para poder encontrar cosas importantes. + +> Recuerda ejecutar todo en el virtualenv. Si no ves un prefijo `(myvenv)` en tu consola tienes que activar tu virtualenv. Explicamos cómo hacerlo en el capítulo de **Instalación de Django** en la sección **Trabajar con virtualenv**. Basta con escribir `myvenv\Scripts\activate` en Windows o `source myvenv/bin/activate` en Mac OS / Linux. + + + +En MacOS o Linux deberías ejecutar el siguiente comando en la consola. **no te olvides de añadir el punto `.` al final** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> El punto `.` es crucial porque le dice al script que instale Django en el directorio actual (para el cual el punto `.` sirve de abreviatura). +> +> **Nota** Cuando escribas los comandos de arriba acuérdate de que sólo tienes que escribir la parte que empieza por `django-admin`. La parte de `(myvenv) ~/djangogirls$` que mostramos aquí es sólo un ejemplo del mensaje que aparecerá en tu línea de comandos. + + + + + +En Windows debes ejecutar el siguiente comando. **(No olvides incluir el punto `.` al final)**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> El punto `.` es crucial porque le dice al script que instale Django en el directorio actual (para el cual el punto `.` sirve de abreviatura). +> +> **Nota** Cuando teclees los comandos de arriba, recuerda que sólo tienes que escribir la parte que empieza por `django-admin.exe`. La parte de `(myvenv) C:\Users\Name\djangogirls>` que mostramos aquí es sólo un ejemplo del mensaje que aparecerá en tu línea de comandos. + + + +`django-admin.py` es un script que creará los archivos y directorios para ti. Ahora deberías tener una estructura de directorios parecida a esta: + + djangogirls + ├───manage.py + ├───mysite + │ settings.py + │ urls.py + │ wsgi.py + │ __init__.py + └───requirements.txt + + +> **Nota**: en tu estructura de directorios, también verás el directorio `myvenv` que creamos anteriormente. + +`manage.py` es un script que ayuda con la administración del sitio. Con él podremos iniciar un servidor web en nuestro ordenador sin necesidad de instalar nada más, entre otras cosas. + +El archivo `settings.py` contiene la configuración de tu sitio web. + +Recuerdas cuando hablamos de una cartera que debía comprobar dónde entregar una carta? El archivo `urls.py` contiene una lista de los patrones utilizados por `urlresolver`. + +Por ahora vamos a ignorar el resto de archivos porque no los vamos a cambiar. ¡Sólo acuérdate de no borrarlos accidentalmente! + +## Cambiar la configuración + +Vamos a hacer algunos cambios en `mysite/settings.py`. Abre el archivo usando el editor de código que has instalado anteriormente. + +**Nota**: Ten en cuenta que `settings.py` es un archivo normal, como cualquier otro. Puedes abrirlo con el editor de texto, usando "file -> open" en el menu de acciones. Esto te debería llevar a la típica ventana donde puedes buscar el archivo `settings.py` y seleccionarlo. Como alternativa, puedes abrir el archivo haciendo click derecho en la carpeta djangogirls en tu escritorio. Luego, selecciona tu editor de texto en la lista. Elegir el editor es importante puesto que puede que tengas otros programas que pueden abrir el archivo pero que no te dejaran editarlo. + +Sería bueno tener el horario correcto en nuestro sitio web. Ve a [lista de Wikipedia de las zonas horarias](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) y copia tu zona horaria (TZ) (e.g. `Europa/Berlín`). + +En `settings.py`, encuentra la línea que contiene `TIME_ZONE` y modifícala para elegir tu zona horaria. Por ejemplo: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Un código de idioma tiene dos partes: el idioma, p.ej. `en` para inglés o `de` para alemán, y el código de país, p.ej. `de` para Alemania o `ch` para Suiza. Si tu idioma nativo no es el inglés, puedes añadir lo siguiente para cambiar el idioma de los botones y notificaciones de Django. Así tendrás el botón "Cancel" traducido al idioma que pongas aquí. [Django viene con muchas traducciones preparadas](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code). + +Si quieres un idioma diferente, cambia el código de idioma cambiando la siguiente línea: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'es-es' +``` + +También tenemos que añadir una ruta para archivos estáticos. (Veremos todo acerca de archivos estáticos y CSS más adelante.) Ve al *final* del archivo, y justo debajo de la entrada `STATIC_URL`, añade una nueva llamada `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Cuando `DEBUG` es `True` y `ALLOWED_HOST` esta vacío, el host es validado contra `['localhost', '127,0.0.1', '[::1]']`. Una vez despleguemos nuestra aplicación este no sera el mismo que nuestro nombre de host en PythonAnywhere así que cambiaremos la siguiente opción: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Nota**: si estas usando un Chromebook, añade esta linea al final del archivo settings.py: `MESSAGE_STORAGE = +'django.contrib.messages.storage.session.SessionStorage'` +> +> Añade también `.c9users.io` a `ALLOWED_HOSTS` si estás usando cloud9. + +## Configurar una base de datos + +Hay una gran variedad de opciones de bases de datos para almacenar los datos de tu sitio. Utilizaremos la que viene por defecto, `sqlite3`. + +Esta ya está configurado en esta parte de tu archivo `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Para crear una base de datos para nuestro blog, ejecutemos lo siguiente en la consola: `python manage.py migrate` (necesitamos estar en el directorio de `djangogirls` que contiene el archivo `manage.py`). Si eso va bien, deberías ver algo así: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +Y, ¡terminamos! ¡Es hora de iniciar el servidor web y ver si está funcionando nuestro sitio web! + +## Iniciar el servidor + +Debes estar en el directorio que contiene el archivo `manage.py` (en la carpeta `djangogirls`). En la consola, podemos iniciar el servidor web ejecutando `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Si estas usando un Chromebook, utiliza este comando: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Si estás en Windows y te falla con un error `UnicodeDecodeError`, utiliza en su lugar este comando: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Ahora necesitas revisar que tu website se está ejecutando. Abre tu navegador (Firefox, Chrome, Safari, Internet Explorer, o cualquiera que uses) y escribe esta dirección: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Si estás usando una Chromebook y Cloud9, haga clic en la URL de la ventana emergente que debería haber aparecido en la esquina superior derecha de la ventana de comandos donde se está ejecutando el servidor web. La URL se verá parecida a: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +¡Enhorabuena! ¡Has creado tu primer sitio web y lo has iniciado usando un servidor web! ¿No es genial? + +![¡La instalación ha funcionado!](images/install_worked.png) + +Tenga en cuenta que una ventana de comandos sólo puede ejecutar una cosa a la vez, y la ventana de comandos que abrió antes está ejecutando el servidor web. Mientras el servidor web esté corriendo y esperando solicitudes adicionales, la terminal aceptará nuevo texto pero no ejecutará nuevos comandos. + +> Miramos cómo funcionan los servidores web en el capítulo **Cómo funciona internet**. + +Para escribir comandos adicionales mientras el servidor web está corriendo, abra una nueva ventana de terminal y active su virtualenv -- para revisar las instrucciones sobre cómo abrir una segunda ventana de terminal, vea [Introducción a la línea de comandos](../intro_to_command_line/README.md). Para parar el servidor web, ve a la ventana donde se esté ejecutando y pulsa CTRL+C, las teclas Control y C a la vez ( en Windows puede que tengas que pulsar Ctrl+Break). + +¿Preparada para el próximo paso? ¡Es momento de crear algo de contenido! diff --git a/es/django_start_project/images/install_worked.png b/es/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/es/django_start_project/images/install_worked.png differ diff --git a/es/django_templates/README.md b/es/django_templates/README.md new file mode 100755 index 00000000000..8c923c37b3a --- /dev/null +++ b/es/django_templates/README.md @@ -0,0 +1,106 @@ +# Plantillas de Django + +¡Es hora de mostrar algunos datos! Para ello Django incorpora unas etiquetas de plantillas, **template tags**, muy útiles. + +## ¿Qué son las etiquetas de plantilla? + +Verás, en HTML no se puede escribir código en Python porque los navegadores no lo entienden. Sólo saben HTML. Sabemos que HTML es bastante estático, mientras que Python es mucho más dinámico. + +Las **etiquetas de plantilla de Django** nos permiten insertar elementos de Python dentro del HTML, para que puedas construir sitios web dinámicos más rápida y fácilmente. ¡Genial! + +## Mostrar la plantilla lista de posts + +En el capítulo anterior le dimos a nuestra plantilla una lista de entradas en la variable `posts`. Ahora la vamos a mostrar en HTML. + +Para imprimir una variable en una plantilla de Django, utilizamos llaves dobles con el nombre de la variable dentro, algo así: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Prueba esto en la plantilla `blog/templates/blog/post_list.html`. Ábrela en el editor de código, y cambia todo desde el segundo `
` hasta el tercer `
` por `{{ posts }}`. Guarda el archivo y refresca la página para ver los resultados: + +![Figura 13.1](images/step1.png) + +Como puedes ver, lo que hemos conseguido es esto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ] > +``` + +Significa que Django lo entiende como una lista de objetos. ¿Recuerdas de **Introducción a Python** cómo podemos mostrar listas? Sí, ¡con bucles for! En una plantilla de Django se hacen así: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} {{ post }}{% endfor %} +``` + +Prueba esto en tu plantilla. + +![Figura 13.2](images/step2.png) + +¡Funciona! Pero queremos que se muestren como los post estáticos que creamos anteriormente en el capítulo de **Introducción a HTML**. Usted puede mezclar HTML y etiquetas de plantilla. Nuestro `body` se verá así: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

publicado: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Todo lo que pongas entre `{% for %}` y `{% endfor %}` se repetirá para cada objeto de la lista. Refresca la página:{% endraw %} + +![Figura 13.3](images/step3.png) + +¿Has notado que utilizamos una notación diferente esta vez (`{{ post.title }}` o `{{ post.text }}`)? Estamos accediendo a los datos en cada uno de los campos definidos en nuestro modelo `Post`. También el `|linebreaksbr` está pasando el texto de los post a través de un filtro para convertir saltos de línea en párrafos. + +## Una cosa más + +Sería bueno ver si tu sitio web seguirá funcionando en la Internet pública, ¿no? Vamos a intentar desplegar de nuevo en PythonAnywhere. Aquí va un resumen de los pasos… + +* Lo primero, sube tu código a GitHub + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Templates modificados para mostrar post desde base de datos." + [...] + $ git push + + +* Luego, vuelve a entrar en [PythonAnywhere](https://www.pythonanywhere.com/consoles/) y ve a tu **consola Bash** (o inicia una nueva), y ejecuta: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(Recuerda sustituir `` con tu subdominio de PythonAnywhere real, sin los paréntesis angulares.) + +* Y finalmente, dirígete a la [página "Web"](https://www.pythonanywhere.com/web_app_setup/) y haz clic en **Reload** en tu aplicación web. (Para ir a otras páginas de PythonAnywhere desde la consola, haz clic en el botón de la esquina superior derecha.) Los cambios deberían estar visibles en https://subdomain.pythonanywhere.com -- ¡compruébalo en el navegador! Si ves distintas publicaciones en el sitio en PythonAnywhere de las que tienes en tu servidor local, es lo normal. Tienes dos bases de datos, una en tu ordenador local y otra en PythonAnywhere y no tienen por qué tener el mismo contenido. + +¡Felicidades! Ahora intenta añadir un nuevo post en tu administrador de Django (recuerda añadir published_date!) Asegúrate de que estás en el administrador de Django de PytonAnywhere, https://tunombre.pythonanywhere.com/admin. Luego actualiza tu página para ver si los posts aparecen. + +¿Funciona de maravilla? ¡Estamos orgullosas! Aléjate un rato del ordenador, te has ganado un descanso. :) + +![Figura 13.4](images/donut.png) \ No newline at end of file diff --git a/es/django_templates/images/donut.png b/es/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/es/django_templates/images/donut.png differ diff --git a/es/django_templates/images/step1.png b/es/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/es/django_templates/images/step1.png differ diff --git a/es/django_templates/images/step2.png b/es/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/es/django_templates/images/step2.png differ diff --git a/es/django_templates/images/step3.png b/es/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/es/django_templates/images/step3.png differ diff --git a/es/django_urls/README.md b/es/django_urls/README.md new file mode 100755 index 00000000000..3fb81908e7a --- /dev/null +++ b/es/django_urls/README.md @@ -0,0 +1,103 @@ +# URLs en Django + +Estamos a punto de construir nuestra primera página web: ¡una página de inicio para el blog! Pero primero, vamos a aprender un poco acerca de las urls en Django. + +## ¿Qué es una URL? + +Una URL es una dirección de la web. Puedes ver una URL cada vez que visitas una página. Se ve en la barra de direcciones del navegador. (Sí! ¡`127.0.0.1:8000` es una URL! Y `https://djangogirls.org` también es una URL.) + +![URL](images/url.png) + +Cada página en Internet necesita su propia URL. De esta manera tu aplicación sabe lo que debe mostrar a un usuario que abre una URL. En Django utilizamos algo que se llama `URLconf` (configuración de URL). URLconf es un conjunto de patrones que Django intentará comparar con la URL recibida para encontrar la vista correcta. + +## ¿Cómo funcionan las URLs en Django? + +Vamos a abrir el archivo `mysite/urls.py` en el editor de código de tu elección y veamos lo que tiene: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Como puedes ver, Django ya puso algo aquí por nosotros. + +Líneas entre triples comillas (`'''` o `"""`) son llamadas docstrings - puedes escribirlos en la parte superior de un archivo, clase o método para describir lo que hace. No serán ejecutadas por Python. + +La URL de admin, que hemos visitado en el capítulo anterior ya está aquí: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Esta línea dice que para cada URL que empieza con `admin/` Django encontrará su correspondiente *view*. En este caso estamos incluyendo muchas URLs admin así que no todo está empaquetado en este pequeño archivo. Es más limpio y legible. + +## ¡Tu primera URL de Django! + +¡Es hora de crear nuestra primera URL! Queremos que 'http://127.0.0.1:8000/' sea la página de inicio del blog y que muestre una lista de post. + +También queremos mantener limpio el archivo `mysite/urls.py`, así que vamos a importar las urls de nuestra aplicación `blog` en el archivo principal `mysite/urls.py`. + +Vamos, añade la línea para importar `blog.urls`. Tú también necesitarás cambiar la línea `desde django.urls...` porque estaremos usando la función `include` aquí, así que se necesitará añadir ese import a la línea. + +El archivo `mysite/urls.py` debería verse ahora así: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Ahora Django redirigirá todo lo que entre a 'http://127.0.0.1:8000/' hacia `blog.urls` y buscará más instrucciones allí. + +## blog.urls + +Crea un nuevo fichero vacío llamado `urls.py` en el directorio `blog`, y ábrelo en el editor de código. ¡Vale! Añade las dos primeras líneas: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Aquí estamos importando la función de Django `path` y todos nuestras `views` desde la aplicación `blog` (no tenemos una aun, pero veremos eso en un minuto!) + +Luego de esto, podemos agregar nuestro primer patrón URL: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Como puedes ver, estamos asociando una vista (`view`) llamada `post_list` a la URL raíz. Este patrón de URL coincidirá con una cadena vacía y el solucionador de URL de Django ignorará el nombre de dominio (es decir, http://127.0.0.1:8000/) que prefija la ruta de URL completa. Este patrón le dirá a Django que `views.post_list` es el lugar correcto al que ir si alguien entra a tu sitio web con la dirección 'http://127.0.0.1:8000/'. + +La última parte `name='post_list'` es el nombre de la URL que se utilizará para identificar a la vista. Puede coincidir con el nombre de la vista pero también puede ser algo completamente distinto. Utilizaremos las URL con nombre más delante en el proyecto así que es importante darle un nombre a cada URL de la aplicación. También deberíamos intentar mantener los nombres de las URL únicos y fáciles de recordar. + +Si tratas de visitar http://127.0.0.1:8000/ ahora, encontrarás un mensaje de error 'web page not available' a algo así. Esto es porque el servidor (¿recuerdas que escribimos `runserver`?) ya no está funcionando. Mira la ventana de la consola del servidor para saber por qué. + +![Error](images/error1.png) + +La consola esta mostrando un error, pero no te preocupes - de hecho es muy útil: está diciendote que **no existe el atributo 'post_list'**. Ese es el nombre del *view* que Django está tratando de encontrar y usar, pero aún no lo hemos creado. En esta etapa tu `/admin/` tampoco funcionará. No te preocupes, ya llegaremos a eso. Si ves un error diferente, intenta reiniciar el servidor web. Para hacerlo, en la ventana de la consola que ejecuta el servidor web, deténgalo presionando Ctrl+C (las teclas juntas Control y C). En Windows, es posible que deba presionar Ctrl+Break. Luego, debe reiniciar el servidor web ejecutando el comando `python manage.py runserver`. + +> Si quieres saber más sobre URLconfs de Django, mira la documentación oficial: https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/es/django_urls/images/error1.png b/es/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/es/django_urls/images/error1.png differ diff --git a/es/django_urls/images/url.png b/es/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/es/django_urls/images/url.png differ diff --git a/es/django_views/README.md b/es/django_views/README.md new file mode 100755 index 00000000000..ac297798f76 --- /dev/null +++ b/es/django_views/README.md @@ -0,0 +1,44 @@ +# Vistas en Django - ¡Hora de crear! + +Es hora de deshacerse del error que hemos creado en el capítulo anterior! :) + +Una *View* es un lugar donde ponemos la "lógica" de nuestra aplicación. Pedirá información del `modelo` que has creado antes y se la pasará a la `plantilla`. Crearemos una plantilla en el próximo capítulo. Las vistas son sólo métodos de Python que son un poco más complicados que los que escribimos en el capítulo **Introducción a Python**. + +Las Vistas se colocan en el archivo `views.py`. Agregaremos nuestras *views* al archivo `blog/views.py`. + +## blog/views.py + +Vale, abre este fichero en el editor y mira lo que hay en él: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +No hay demasiadas cosas aquí todavía. + +Recuerda que las líneas que comienzan con `#` son comentarios - significa que Python no las ejecutará. + +Creemos una *vista (view)* como sugiere el comentario. Añade la siguiente mini-vista por debajo: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Como puedes ver, hemos creado una función (`def`) llamada `post_list` que acepta `request` y `return` una función `render` que reproduce (construye) nuestra plantilla `blog/post_list.html`. + +Guarda el archivo, ve a http://127.0.0.1:8000/ y mira lo que hemos hecho. + +¡Otro error! Leamos lo que está pasando ahora: + +![Error](images/error.png) + +Esto demuestra que el servidor está funcionando otra vez, al menos, pero todavía no se ve bien, ¿no? No te preocupes, es sólo una página de error, ¡nada que temer! Al igual que los mensajes de error en la consola, estos son realmente muy útiles. Puedes leer que la *TemplateDoesNotExist*. Vamos a corregir este error y crear una plantilla en el próximo capítulo! + +> Obtenga más información sobre las vistas de Django leyendo la documentación oficial: https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/es/django_views/images/error.png b/es/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/es/django_views/images/error.png differ diff --git a/es/dynamic_data_in_templates/README.md b/es/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..c96bf39cef2 --- /dev/null +++ b/es/dynamic_data_in_templates/README.md @@ -0,0 +1,81 @@ +# Datos dinámicos en plantillas + +Tenemos diferentes piezas en su lugar: el modelo `Post` está definido en `models.py`, tenemos a `post_list` en `views.py` y la plantilla agregada. ¿Pero cómo haremos realmente para que nuestros posts aparezcan en nuestra plantilla HTML? Porque eso es lo que queremos, tomar algún contenido (modelos guardados en la base de datos) y mostrarlo adecuadamente en nuestra plantilla, ¿no? + +Esto es exactamente lo que las *views* se supone que hacen: conectar modelos con plantillas. En nuestra *view* `post_list` necesitaremos tomar los modelos que deseamos mostrar y pasarlos a una plantilla. En una *vista* decidimos qué (modelo) se mostrará en una plantilla. + +Muy bien, entonces ¿cómo lo logramos? + +Tenemos que abrir `blog/views.py` en el editor. De momento `post_list` *view* tiene esto: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +¿Recuerdas cuando hablamos de incluir código en diferentes archivos? Ahora tenemos que incluir el modelo que definimos en el archivo `models.py`. Agregaremos la línea `from .models import Post` de la siguiente forma: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +El punto antes de `models` indica el *directorio actual* o la *aplicación actual*. Ambos, `views.py` y `models.py` están en el mismo directorio. Esto significa que podemos utilizar `.` y el nombre del archivo (sin `.py`). Ahora importamos el nombre del modelo (`Post`). + +¿Pero ahora qué sigue? Para tomar posts reales del modelo `Post`, necesitamos algo llamado `QuerySet`. + +## QuerySet + +Ya debes estar familiarizada con la forma en que funcionan los QuerySets. Hablamos de ellos en el capítulo [Django ORM (QuerySets)](../django_orm/README.md). + +Así que ahora nos interesa tener una lista de post publicados ordenados por `published_date` (fecha de publicación), ¿no? ¡Ya lo hicimos en el capítulo QuerySets! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Abre `blog/views.py` en el editor, y añade este trozo de código a la función `def post_list(request)` -- pero no te olvides de añadir `from django.utils import timezone` antes: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +La última parte es pasar el QuerySet `posts` a la plantilla context. No te preocupes, enseñaremos cómo mostrarlo más adelante. + +Fíjate en que creamos una *variable* para el QuerySet: `posts`. Trátala como si fuera el nombre de nuestro QuerySet. De aquí en adelante vamos a referirnos al QuerySet con ese nombre. + +En la función `render` tenemos el parámetro `request` (todo lo que recibimos del usuario via Internet) y otro parámetro dándole el archivo de la plantilla (`'blog/post_list.html'`). El último parámetro, que se ve así: `{}` es un lugar en el que podemos agregar algunas cosas para que la plantilla las use. Necesitamos nombrarlos (los seguiremos llamando `'posts'` por ahora). :) Se debería ver así: `{'posts': posts}`. Fíjate en que la parte antes de `:` es una cadena; tienes que envolverla con comillas: `"`. + +Finalmente nuestro archivo `blog/views.py` debería verse así: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +¡Terminamos! Ahora regresemos a nuestra plantilla y mostremos este QuerySet. + +¿Quieres leer un poco más sobre QuerySets en Django? Debería mirar aquí: https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/es/extend_your_application/README.md b/es/extend_your_application/README.md new file mode 100755 index 00000000000..f5c523f1709 --- /dev/null +++ b/es/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Extiende tu aplicación + +Ya hemos completado todos los diferentes pasos necesarios para la creación de nuestro sitio web: sabemos cómo escribir un modelo, URL, vista y plantilla. También sabemos cómo hacer que nuestro sitio web sea bonito. + +¡Hora de practicar! + +Lo primero que necesitamos en nuestro blog es, obviamente, una página para mostrar un post, ¿cierto? + +Ya tenemos un modelo `Post`, así que no necesitamos añadir nada a `models.py`. + +## Crea un enlace a la página de detalle de una publicación + +Empezaremos añadiendo un enlace al fichero `blog/templates/blog/post_list.html`. Ábrelo en el editor; de momento debería tener este contenido: {% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}Queremos tener un enlace del título de una publicación en la lista de publicaciones al detalle de la misma. Cambiemos `

{{ post.title }}

` para enlazarla a la página detalle del post:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Es hora de explicar el misterioso`{% url 'post_detail' pk=post.pk %}`. Como probablemente sospeches, la notación `{% %}` significa que estamos utilizando Django template tags. ¡Esta vez usaremos uno que creará un URL para nosotros!{% endraw %} + +La parte de`post_detail` significa que Django estará esperando un URL en `blog/urls.py` con el nombre=post_detail + +¿Y ahora qué pasa con `pk=post.pk`? `pk` se refiere a primary key (clave primaria), la cual es un nombre único por cada registro en una base de datos. Debido a que no especificamos una llave primaria en nuestro modelo `Post`, Django creará una por nosotros (por defecto, un número que incrementa una unidad por cada registro, por ejemplo, 1, 2, 3) y lo añadirá como un campo llamado `pk` a cada uno de nuestros posts. Accedemos a la clave primaria escribiendo `post.pk`, del mismo modo en que accedemos a otros campos (`título`, `autor`, etc.) en nuestro objeto `Post`! + +Ahora cuando vayamos a: http://127.0.0.1:8000/ tendremos un error (como era de esperar, ya que no tenemos una URL o una *vista* para `post_detail`). Se verá así: + +![NoReverseMatch error](images/no_reverse_match2.png) + +## Crea una URL al detalle de una publicación + +Vamos a crear una URL en `urls.py` para nuestra *view* `post_detail`! + +Queremos que el detalle de la primera entrada se visualice en esta **URL**: http://127.0.0.1:8000/post/1/ + +Vamos a crear una URL en el fichero `blog/urls.py` que dirija a Django hacia una *vista* llamada `post_detail`, que mostrará una entrada de blog completa. Abre el fichero `blog/urls.py` en el editor, y añade la línea `path('post//', views.post_detail, name='post_detail'),` para que el fichero quede así: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Esta parte `post//` especifica un patrón de URL – ahora lo explicamos: + +- `post/` significa que la URL debería empezar con la palabra **post** seguida por una **/**. Hasta aquí bien. +- `` – esta parte tiene más miga. Significa que Django buscará un número entero y se lo pasará a la vista en una variable llamada `pk`. +- `/` – necesitamos otra **/** al final de la URL. + +Esto quiere decir que si pones `http://127.0.0.1:8000/post/5/` en tu navegador, Django entenderá que estás buscando una *vista* llamada `post_detail` y transferirá la información de que `pk` es igual a `5` a esa *vista*. + +OK, ¡hemos añadido un nuevo patrón de URL a `blog/urls.py`! Actualizamos la página: http://127.0.0.1:8000/ y, ¡boom! El servidor vuelve a dejar de funcionar. Echa un vistazo a la consola – como era de esperar, ¡hay otro error! + +![AttributeError](images/attribute_error2.png) + +¿Recuerdas cuál es el próximo paso? ¡Añadir una vista! + +## Añade la vista de detalle de la publicación + +Esta vez nuestra *vista* tomará un parámetro adicional `pk`. Nuestra *vista* necesita recibirlo, ¿verdad? Así que definiremos nuestra función como `def post_detail (request, pk):`. Tenga en cuenta que necesitamos usar exactamente el mismo nombre que el que especificamos en `urls` (`pk`). ¡Omitir esta variable es incorrecto y resultará en un error! + +Ahora, queremos obtener solo un post. Para ello podemos usar querysets como este: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Pero este código tiene un problema. Si no hay ningún `Post` con esa `clave primaria` (`pk`), ¡tendremos un error muy feo! + +![DoesNotExist error](images/does_not_exist2.png) + +¡No queremos eso! Por suerte, Django tiene una función que se encarga de eso: `get_object_or_404`. En caso de que no haya ningún `Post` con el `pk` dado se mostrará una página mucho más agradable, `Page Not Found 404`. + +![Page not found](images/404_2.png) + +La buena noticia es que puedes crear tu propia página `Page Not Found` y diseñarla como desees. Pero por ahora no es tan importante, así que lo omitiremos. + +¡Es hora de agregar una *view* a nuestro archivo `views.py`! + +En `blog/urls.py` creamos un regla de URL denominada `post_detail` que hace referencia a una vista llamada `view.post_detail`. Esto significa que Django va a estar esperando una función llamada `post_detail` de vista en `blog/views.py`. + +Deberíamos abrir `blog/views.py` en el editor y añadir el siguiente código cerca de los otros import `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Y al final del archivo agregamos nuestra *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}) +``` + +Sí. Es hora de actualizar la página: http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +¡Funcionó! Pero, ¿qué pasa cuando haces click en un enlace en el título del post? + +![TemplateDoesNotExist error](images/template_does_not_exist2.png) + +¡Oh, no! ¡Otro error! Pero ya sabemos cómo lidiar con eso, ¿no? ¡Tenemos que añadir una plantilla! + +## Crear una plantilla para post detail + +Vamos crear un fichero en `blog/templates/blog` llamado `post_detail.html`, y abrirlo en el editor de código. + +Se verá así: + +{% 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 %} +``` + +Una vez más estamos extendiendo `base.html`. En el bloque `content` queremos mostrar la fecha de publicación (si existe), título y texto de nuestros posts. Pero deberíamos discutir algunas cosas importantes, ¿cierto? + +{% raw %}`{% if ... %} ... {% endif %}` es un template tag que podemos usar cuando querramos ver algo. (Recuerdas `if ... else ..` del capítulo **Intruducción a Python**?) Ahora queremos mirar si la `published_date` de un post no esta vacía.{% endraw %} + +Bien, podemos actualizar nuestra página y ver si `TemplateDoesNotExist` se ha ido. + +![Post detail page](images/post_detail2.png) + +¡Yay! ¡Funciona! + +# ¡Hora de despliegue! + +Sería bueno verificar que tu sitio web aún funcionará en PythonAnywhere, ¿cierto? Intentemos desplegar de nuevo. + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add -A . + $ git status + $ git commit -m "Agregadas vistas y plantilla para el detalle del post del blog así como también CSS para el sitio." + $ git push + + +Luego, en una [consola Bash de PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Recuerda sustituir `` con tu subdominio de PythonAnywhere real, sin los paréntesis angulares.) + +## Actualizar los ficheros estáticos (static files) en el servidor + +Normalmente, los servidores como PythonAnywhere tratan los ficheros estáticos (como los ficheros CSS) de manera diferente a los ficheros de Python. Se llaman estáticos porque el servidor no debe ejecutarlos, sino servirlos tal cual. Y por ello se tratan por separado para servirlos más rápido. Como consecuencia, si cambiamos nuestros ficheros CSS, tenemos que ejecutar un comando extra en el servidor para decirle que los actualice. Este comando se llama `collectstatic`. + +Activa el virtualenv si no estaba activado de antes (en PythonAnywhere se usa el comando `workon`, es igual que el comando `source myenv/bin/activate` que usamos en local): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +El comando `manage.py collectstatic` es un poco como el comando `manage.py migrate`. Hacemos cambios en nuestro código y luego le decimos a Django que los *aplique*, bien a la colección de ficheros estáticos o bien a la base de datos. + +En cualquier caso, ahora estaremos listos para saltar sobre la [página "Web"](https://www.pythonanywhere.com/web_app_setup/) (desde el botón del menú en el lado superior derecho de la consola), realizar la **Recarga**, y mirar en la página https://subdomain.pythonanywhere.com para ver el resultado. + +¡Y eso debería ser todo! Felicidades :) diff --git a/es/extend_your_application/images/404_2.png b/es/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/es/extend_your_application/images/404_2.png differ diff --git a/es/extend_your_application/images/attribute_error2.png b/es/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/es/extend_your_application/images/attribute_error2.png differ diff --git a/es/extend_your_application/images/does_not_exist2.png b/es/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/es/extend_your_application/images/does_not_exist2.png differ diff --git a/es/extend_your_application/images/no_reverse_match2.png b/es/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/es/extend_your_application/images/no_reverse_match2.png differ diff --git a/es/extend_your_application/images/post_detail2.png b/es/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/es/extend_your_application/images/post_detail2.png differ diff --git a/es/extend_your_application/images/post_list2.png b/es/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/es/extend_your_application/images/post_list2.png differ diff --git a/es/extend_your_application/images/template_does_not_exist2.png b/es/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/es/extend_your_application/images/template_does_not_exist2.png differ diff --git a/es/how_the_internet_works/README.md b/es/how_the_internet_works/README.md new file mode 100755 index 00000000000..a57e6a7e599 --- /dev/null +++ b/es/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# ¿Cómo funciona Internet? + +> Para lectores en casa: este capítulo está cubierto en el video [¿Cómo funciona Internet?](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Este capítulo está inspirado en la charla "How the Internet works" de Jessica McKellar (http://web.mit.edu/jesstess/www/). + +Apostamos a que utilizas Internet todos los días. Pero, ¿sabes lo que pasa cuando escribes una dirección como http://djangogirls.org en tu navegador y presionas `enter`? + +La primera cosa que necesitas entender, es que una página web consiste de un puñado de archivos guardados en el disco duro -- como tus películas, música, o imágenes. Sin embargo, hay una parte que es única para los sitios web: ellos incluyen código computarizado llamado HTML. + +Si no estás familiarizada con la programación, puede ser difícil de comprender HTML a la primera, pero tus navegadores web (como Chrome, Safari, Firefox, etc.) lo aman. Los navegadores están diseñados para entender este código, seguir sus instrucciones y presentar estos archivos de los cuales está hecho tu sitio web, exactamente de la forma que quieres. + +Como cualquier otro archivo, tenemos que guardar los archivos HTML en algún lugar de un disco duro. Para Internet, utilizamos equipos especiales, de gran alcance llamados *servidores*. Estos no tienen una pantalla, ratón o teclado, debido a que su propósito es almacenar datos y servirlos. Por esa razón son llamados *servidores* -- porque *sirven* los datos. + +OK, pero quieres saber cómo Internet se ve, ¿cierto? + +¡Te hemos hecho una imagen! Luce algo así: + +![Figura 1.1](images/internet_1.png) + +Parece un lío, ¿no? De hecho, es una red de máquinas interconectadas (los *servidores* que nombramos anteriormente). ¡Cientos de miles de máquinas! ¡Muchos, muchos kilómetros de cables alrededor del mundo! Puedes visitar el sitio web Submarine Cable Map (http://submarinecablemap.com/) y ver lo complicada que es la red. Aquí hay una captura de pantalla de la página web: + +![Figura 1.2](images/internet_3.png) + +Es fascinante, ¿no? Pero sería imposible tener un cable entre todas y cada una de las máquinas conectadas a internet. Así que, para llegar a una máquina (por ejemplo la que aloja http://djangogirls.org) tenemos que elevar una solicitud mediante una gran cantidad de máquinas diferentes. + +Se parece a esto: + +![Figura 1.3](images/internet_2.png) + +Imagina que cuando escribes http://djangogirls.org, estas enviando una carta que dice: "Estimadas Django Girls, me gustaría ver su sitio web djangogirls.org. ¡Por favor, envíenmelo!" + +Tu carta va hacia la oficina de correo más cercana. Luego va a otra que es un poco más cerca de su destinatario, luego otra y otra hasta que es entregada a su destino. La única cosa diferente es que si envías muchas cartas (*paquetes de datos*) al mismo lugar, cada una podría ir a través de oficinas de correos totalmente distintas (*routers*). Esto depende de cómo se distribuyen en cada oficina. + +![Figura 1.4](images/internet_4.png) + +Así es como funciona - se envían mensajes y se espera una respuesta. En lugar de papel y lápiz, se usan bytes de datos, pero ¡la idea es la misma! + +En lugar de direcciones con el nombre de la calle, ciudad, código postal y nombre del país, utilizamos direcciones IP. Tu computadora pide primero el DNS (Domain Name System - en español Sistema de Nombres de Dominio) para traducir djangogirls.org a una dirección IP. Funciona en cierta manera como los viejos directorios telefónicos donde puedes buscar el nombre de la persona que se deseas contactar y encontrar su número de teléfono y dirección. + +Cuando envías una carta, esta necesita tener ciertas características para ser entregada correctamente: una dirección, sello, etc. También utilizas un lenguaje que el receptor pueda entender, ¿cierto? Lo mismo se aplica a los *paquetes de datos* que envía para ver un sitio Web. Utilizamos un protocolo llamado HTTP (Protocolo de transferencia de hipertexto). + +Así que, básicamente, cuando tienes un sitio web necesitas tener un *servidor* (la máquina) donde este vive. Cuando el *servidor* recibe una *petición* entrante (en una carta), este envía su sitio de Internet (en otra carta). + +Ya que este es un tutorial de Django, puede que te preguntes qué es lo que Django hace. Bueno, cuando envías una respuesta, no siempre quieres enviar lo mismo a todo el mundo. Es mucho mejor si tus cartas son personalizadas, especialmente para la persona que acaba de escribir, ¿cierto? Django nos ayuda con la creación de estas cartas personalizadas. :) + +Suficiente conversación - ¡tiempo de crear! \ No newline at end of file diff --git a/es/how_the_internet_works/images/internet_1.png b/es/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/es/how_the_internet_works/images/internet_1.png differ diff --git a/es/how_the_internet_works/images/internet_2.png b/es/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/es/how_the_internet_works/images/internet_2.png differ diff --git a/es/how_the_internet_works/images/internet_3.png b/es/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/es/how_the_internet_works/images/internet_3.png differ diff --git a/es/how_the_internet_works/images/internet_4.png b/es/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/es/how_the_internet_works/images/internet_4.png differ diff --git a/es/html/README.md b/es/html/README.md new file mode 100755 index 00000000000..31f71a3f908 --- /dev/null +++ b/es/html/README.md @@ -0,0 +1,217 @@ +# Introducción a HTML + +Te estarás preguntando, ¿qué es una plantilla? + +Una plantilla es un archivo que podemos reutilizar para presentar información diferente de forma consistente - por ejemplo, podrías utilizar una plantilla para ayudarte a escribir una carta, porque aunque cada carta puede contener un mensaje distinto y dirigirse a una persona diferente, compartirán el mismo formato. + +El formato de una plantilla de Django se describe en un lenguaje llamado HTML (el HTML que mencionamos en el primer capítulo **Cómo funciona Internet**). + +## ¿Qué es HTML? + +HTML es un código simple que es interpretado por tu navegador web - como Chrome, Firefox o Safari - para mostrar una página web al usuario. + +HTML significa HyperText Markup Language - en español, Lenguaje de Marcas de HyperTexto. **HyperText** -hipertexto en español- significa que es un tipo de texto que soporta hipervínculos entre páginas. **Markup** significa que hemos tomado un documento y lo hemos marcado con código para decirle a algo (en este caso, un navegador) cómo interpretar la página. El código HTML está construido con **etiquetas**, cada una comenzando con `<` y terminando con `>`. Estas etiquetas representan **elementos** de marcado. + +## ¡Tu primera plantilla! + +Crear una plantilla significa crear un archivo de plantilla. Todo es un archivo, ¿verdad? Probablemente hayas notado esto ya. + +Las plantillas se guardan en el directorio de `blog/templates/blog`. Así que primero crea un directorio llamado `templates` dentro de tu directorio blog. Luego crea otro directorio llamado `blog` dentro de tu directorio de templates: + + blog + └───templates + └───blog + + +(Tal vez te estés preguntando por qué necesitamos dos directorios llamados `blog` – como verás más adelante, es una convención de nombres que nos facilitará la vida cuando las cosas se pongan más complicadas.) + +Y ahora crea un archivo `post_list.html` (déjalo en blanco por ahora) dentro de la carpeta `blog/templates/blog`. + +Mira cómo se ve su sitio web ahora: http://127.0.0.1:8000/ + +> Si todavía tienes un error `TemplateDoesNotExist`, intenta reiniciar tu servidor. Ve a la consola, para el servidor pulsando Ctrl+C (las teclas Control y C a la vez) y reinícialo ejecuntado el comando `python manage.py runserver`. + +![Figura 11.1](images/step1.png) + +¡Ningún error más! Felicidades :) Sin embargo, por ahora, tu sitio web no está publicando nada excepto una página en blanco, porque la plantilla también está vacía. Tenemos que arreglarlo. + +Abre un fichero nuevo en el editor y escribe lo siguiente: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Hi there!

+

It works!

+ + +``` + +Ahora, ¿cómo luce tu sitio web? Haz clic para verlo: http://127.0.0.1:8000/ + +![Figura 11.2](images/step3.png) + +¡Funcionó! Buen trabajo :) + +* La etiqueta más básica, ``, siempre va al inicio de cualquier página web y `` va siempre al final. Como puedes ver, todo el contenido de la página web va desde el principio de la etiqueta `` y hasta la etiqueta de cierre `` +* `

` es una etiqueta para los elementos de párrafo; `

` cierra cada párrafo + +## Cabeza y cuerpo + +Cada página HTML también se divide en dos elementos: **head** y **body**. + +* **head** es un elemento que contiene información sobre el documento que no se muestra en la pantalla. + +* **body** es un elemento que contiene todo lo que se muestra como parte de la página web. + +Usamos `` para decirle el navegador acerca de la configuración de la página y `` para decir lo que realmente está en la página. + +Por ejemplo, puedes ponerle un título a la página web dentro de la ``, así: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Guarda el archivo y actualiza tu página. + +![Figura 11.3](images/step4.png) + +¿Observas cómo el navegador ha comprendido que "Ola's blog" es el título de tu página? Ha interpretado `Ola's blog` y colocó el texto en la barra de título de tu navegador (también se utilizará para marcadores y así sucesivamente). + +Probablemente también hayas notado que cada etiqueta de apertura coincide con una *etiqueta de cierre*, con un `/`, y que los elementos son *anidados* (es decir, no puedes cerrar una etiqueta particular hasta que todos los que estaban en su interior se hayan cerrado también). + +Es como poner cosas en cajas. Tienes una caja grande, ``; en su interior hay ``, y que contiene las cajas aún más pequeñas: `

`. + +Tienes que seguir estas reglas de etiquetas de *cierre* y de *anidación* de elementos - si no lo haces, el navegador puede no ser capaz de interpretarlos apropiadamente y tu página se mostrará incorrectamente. + +## Personaliza tu plantilla + +¡Ahora puedes divertirte un poco y tratar de personalizar tu plantilla! Aquí hay algunas etiquetas útiles para eso: + +* `

Un título

` - para tu título más importante +* `

Un subtítulo

` - para el título del siguiente nivel +* `

Un subsubtítulo

` - ... y así hasta `
` +* `

Un párrafo de texto

` +* `texto` - pone en cursiva tu texto +* `texto` - pone en negrita tu texto +* `
` va en otra línea (no puedes poner nada dentro de br y no hay etiqueta de cierre) +* `link` - crea un vínculo +* `
  • primer elemento
  • segundo elemento
` - crea una lista, ¡igual que esta! +* `
` - define una sección de la página + +Aquí va un ejemplo de una plantilla completa, cópialo y pégalo en `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Aquí hemos creado tres secciones `div`. + +* El primer elemento `div` contiene el título de nuestro blog - es un encabezado y un enlace +* Otros dos elementos `div` contienen nuestras publicaciones (posts) del blog con su fecha de publicación, `h2` con el título del post que es clickable y dos `p`s (párrafos) de texto, uno para la fecha y otro para el contenido del post. + +Nos da este efecto: + +![Figura 11.4](images/step6.png) + +¡Yaaay! Pero hasta el momento, nuestra plantilla sólo muestra exactamente **la misma información** - considerando que antes hablábamos de plantillas como permitiéndonos mostrar información **diferente** en el **mismo formato**. + +Lo que queremos realmente es mostrar posts reales añadidos en nuestra página de administración de Django - y ahí es a donde vamos a continuación. + +## Una cosa más: ¡despliega! + +Sería bueno ver todo esto disponible en Internet, ¿no? Hagamos otro despliegue en PythonAnywhere: + +### Haz commit, y sube tu código a GitHub + +En primer lugar, vamos a ver qué archivos han cambiado desde la última puesta en marcha (ejecute estos comandos localmente, no en PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Asegúrate de que estás en el directorio `djangogirls` y vamos a decirle a `git` que incluya todos los cambios en este directorio: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + + +> **Nota** `--all` significa que `git` tambien reconocerá si has borrado archivos (por defecto, solo reconoce archivos nuevos o modificados). También recuerda (del capítulo 3) que `.` significa el directorio actual. + +Antes de que subamos todos los archivos, vamos a ver qué es lo que `git` subirá (todos los archivos que `git` cargará deberían aparecer en verde): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Ya casi estamos, ahora es tiempo de decirle que guarde este cambio en su historial. Vamos a darle un "mensaje de commit" donde describimos lo que hemos cambiado. Puedes escribir cualquier cosa que te gustaría en esta etapa, pero es útil escribir algo descriptivo para que puedes recordar lo que has hecho en el futuro. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Cambie el HTML para la página." + + +> **Nota** Asegúrate de usar comillas dobles alrededor del mensaje de commit. + +Una vez hecho esto, subimos (push) los cambios a Github: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Descarga tu nuevo código a PythonAnywhere y actualiza tu aplicación web + +* Abre la [página de consolas de PythonAnywhere](https://www.pythonanywhere.com/consoles/) y ve a tu **consola Bash** (o comienza una nueva). Luego, ejecuta: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Necesitarás sustituir `` con tu actual nombre de subdominio PythonAnywhere, sin los paréntesis angulares o corchetes. Tu nombre de subdominio es normalmente tu nombre de usuario PythonAnywhere, pero en algunos casos puede ser un poco diferente (por ejemplo, si tu nombre de usuario contiene letras mayúsculas). Así, si este comando no funciona, usa el comando `ls`(listar archivos) para encontrar tu actual subdominio/nombre-carpeta, y muévete allí con `cd `. + +Ahora mira cómo se descarga tu código. Si quieres comprobar que efectivamente ha llegado bien, puedes ir a la **página "Files"** y ver tu código en PythonAnywhere (puedes ir a otras páginas de PythonAnywhere desde el botón de la esquina superior derecha de la página de la consola). + +* Finalmente, ve a la [página "Web"](https://www.pythonanywhere.com/web_app_setup/) y pulsa **Reload** en tu aplicación web. + +¡Tu nueva versión ya debería estar publicada! Ve al navegador y refresca tu sitio web. Deberías ver los cambios. :) \ No newline at end of file diff --git a/es/html/images/step1.png b/es/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/es/html/images/step1.png differ diff --git a/es/html/images/step3.png b/es/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/es/html/images/step3.png differ diff --git a/es/html/images/step4.png b/es/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/es/html/images/step4.png differ diff --git a/es/html/images/step6.png b/es/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/es/html/images/step6.png differ diff --git a/es/images/application.png b/es/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/es/images/application.png differ diff --git a/es/installation/README.md b/es/installation/README.md new file mode 100644 index 00000000000..b1f2b98f99e --- /dev/null +++ b/es/installation/README.md @@ -0,0 +1,69 @@ +# Si estás haciendo el tutorial en casa + +Si estás haciendo el tutorial en casa, y no en uno de los [eventos de Django Girls](https://djangogirls.org/events/), puedes saltar este capítulo por completo e ir directamente al capítulo [¿cómo funciona Internet?](../how_the_internet_works/README.md). + +Esto es porque cubrimos las instalaciones de cosas a medida que se requieran en el tutorial -- esta es solamente una página adicional que reúne toda la información de instalación en un solo lugar (lo que es útil para algunos formatos de taller). Puedes escoger instalar todo lo que está en esta página ya mismo si lo deseas. Pero si quieres empezar a aprender cosas antes de instalar un grupo de materiales en tu computadora, salta este capítulo y te explicaremos las partes de la instalación luego, cuando sean necesarias. + +¡Buena suerte! + +# Si estás asistiendo a un workshop + +Si estás asistiendo a uno de los [Django Girls events](https://djangogirls.org/events/): + +* Tu workshop puede tener una "fiesta de instalación" antes del workshop principal. Si estás en un equipo de instalación, ¡ésta página es para ti! Sigue las instrucciones aquí para obtener todo lo que tu necesitas para el workshop de instalación, con la ayuda de los entrenadores si lo necesitas. Entonces en el workshop principal, tu estarás preparado para saltar las instrucciones de instalación que encontrarás en el tutorial principal cuando llegues a ellos. +* Los organizadores del taller pueden pedirte que en casa intentes instalar todo en tu computadora antes de iniciar el taller. Si has estado preguntando cómo hacer esto, ¡esta página es para ti! Sigue las instrucciones aquí, lo mejor puedas. Así, en el taller principal, cuando estés en uno de los pasos de la instalación del tutorial, y si no tenías esa pieza instalada, puedes pedir ayuda a una de tus entrenadoras. +* Si tu taller no tiene una sesión de instalación (o no pudiste asistir), y si los organizadores no te piden que intentes instalar todo antes de tu llegada, salta esta página y ve al capítulo [Cómo el internet funciona](../how_the_internet_works/README.md). Instalarás todo lo que necesitas para trabajar a lo largo del tutorial. + +# Instalación + +En este tutorial vas a construir un blog. Según cómo vayas a través del tutorial, serás instruida en cómo instalar varios softwares en tu computadora y configurar algunas cuentas online como sean necesarias. Esta página reune todas las instalaciones e instrucciones del registro en un lugar (el cual es útil para algunos formatos del taller). + + +{% include "/chromebook_setup/instructions.md" %} + + +# Breve introducción a la línea de comandos {#command-line} + +Muchos de los pasos citados abajo hacen referencia a la "consola", "terminal", "ventana de comandos", o "línea de comandos" -- todos éstos términos significan la misma cosa: una ventana en tu computadora donde puedes introducir comandos. Cuando estés en el tutorial principal, aprenderás más acerca de la línea de comandos. Por ahora, la parte principal que necesitas es saber cómo abrir una ventana de comandos y cómo luce: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Instalar Python {#python} + +{% include "/python_installation/instructions.md" %} + +# Instala un Editor de Código {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Configura el entorno virtual (virtualenv) e instala Django {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Instalar Git {#git} + +{% include "/deploy/install_git.md" %} + +# Crear una cuenta de GitHub {#github-account} + +Ve a [GitHub.com](https://www.github.com) y regístrate con una nueva y gratuita cuenta de usuario. Asegúrate de recordar tu contraseña (añádela a tu gestor de contraseñas, si usas uno). + +# Crear una cuenta de PythonAnywhere {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Comienza a leer + +Felicitaciones, ¡tú tienes todo configurado y listo para avanzar! si aún tienes tiempo antes del taller, sería útil empezar a leer un poco de los capítulos iniciales: + +* [¿Cómo funciona internet?](../how_the_internet_works/README.md) + +* [Introducción a la línea de comandos](../intro_to_command_line/README.md) + +* [Introducción a Python](../python_introduction/README.md) + +* [¿Qué es Django?](../django/README.md) + +# ¡Disfrutar el taller! + +Cuando comiences el taller, estarás habilitada para ir directamente a [¡Tu primer proyecto en Django!](../django_start_project/README.md) porque ya cubriste el material en los capítulos anteriores. diff --git a/es/intro_to_command_line/README.md b/es/intro_to_command_line/README.md new file mode 100755 index 00000000000..ea94716486d --- /dev/null +++ b/es/intro_to_command_line/README.md @@ -0,0 +1,436 @@ +# Introducción a la interfaz de línea de comandos + +> Para los lectores en casa: este capítulo puede verse en el vídeo [Tu nuevo amigo: Línea de Comandos](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +Es emocionante, ¿verdad? ¡Vas a escribir tu primera línea de código en pocos minutos! :) + +**Permítenos presentarte a tu primer amigo nuevo: ¡la línea de comandos!** + +Los siguientes pasos te mostrarán cómo usar aquella ventana negra que todos los hackers usan. Puede parecer un poco aterrador al principio pero es solo un mensaje en pantalla que espera a que le des órdenes. + +> **Nota** Ten en cuenta que a lo largo de este libro usamos los términos 'directorio' y 'carpeta' indistintamente pero son la misma cosa. + +## ¿Qué es la línea de comandos? + +La ventana, que generalmente es llamada **línea de comandos** ó **interfaz de línea de comandos**, es una aplicación basada en texto para ver, manejar y manipular archivos en tu ordenador. Similar a Windows Explorer o Finder en Mac, pero sin la interfaz gráfica. Otros nombres para la línea de comandos son: *cmd*, *CLI*, *prompt* -símbolo de sistema-, *console* -consola- o *terminal*. + +## Abrir la interfaz de línea de comandos + +Para empezar con algunos experimentos necesitarás abrir nuestra interfaz de línea de comandos en primer lugar. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Símbolo del Sistema (Prompt) + +Ahora deberías ver una pantalla blanca o negra que espera a que introduzcas tus comandos. + + + +Si estás en Mac o Linux, probablemente veas una `$`, como ésta: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +En Windows, probablemente veas un `>`, como éste: + +{% filename %}command-line{% endfilename %} + + > + + +Echa un vistazo a la sección anterior sobre Linux -- podrás consultar más cuando llegues a PythonAnywhere más adelante en este tutorial. + + + +Cada comando vendrá precedido por un `$` o un `>` y un espacio, pero no debes escribirlos tú mismo. El ordenador lo hará por ti. :) + +> Solo una pequeña anotación: en tu caso puede que haya algo como `C:\Users\ola>` o `Olas-MacBook-Air:~ ola$` antes del símbolo de introducción, lo cual es 100% NORMAL. + +La parte superior incluye el `$` o el `>` que es llamado en la *línea de comandos*, o mas corto *prompt*. Introduce algo allí. + +En el tutorial, cuando queramos introducir un comando, incluye el `$` o `>`, y ocasionalmente más a la izquierda. Ignora la parte izquierda solamente escribiendo el comando, el cuál inicia después del prompt. + +## Tu primer comando (¡BIEN!) + +Comencemos tecleando este comando: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +Y luego presiona `enter`. Esto será nuestro resultado: + +{% filename %}command-line{% endfilename %} + + $ whoami olasitarska + + +Como puedes ver, el computador solo ha impreso tu nombre de usuario. Ordenado, ¿ah? :) + +> Intenta escribir cada comando; no copies y pegues. ¡De esta manera lo recordarás! + +## Fundamentos + +Cada sistema operativo tiene un poco diferente la configuración de los comandos para la consola, así que asegurate de seguir las instrucciones para tu sistema operativo. Intentemos esto, ¿Verdad? + +### Directorio actual + +Sería bueno saber dónde estamos ahora, ¿Correcto? Veamos. Escribe éste comando y presiona `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Nota: 'pwd' es para imprimir el directorio de trabajo (print working directory). + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Nota: 'cd' es para cambiar de directorio (change directory). Con la consola tu puedes usar pwd solo con Linux o macOS. + + + +Probablemente veremos algo similar en tu computador. Una vez que abres la consola o la línea de comandos, usualmente inicias en tu directorio principal. + +* * * + +### Aprende más sobre un comando + +¡Muchos comandos pueden escribirse en el prompt que tiene construido una ayuda que puedes leer! Por ejemplo, aprende más acerca de el comando del directorio actual: + + + +macOS y Linux tienen un comando `man`, el cual te da una ayuda en comandos. Intenta `man pwd` y ve qué dice, o coloca `man` antes de otro comando para ver su ayuda. La salida de `man` nomalmentes es paginada. Usa la barra de espacio para moverte a la siguiente página, y `q` para salir de la ayuda. + + + + + +Añade un sufijo `/?` para más comandos que se imprimirán en la página de ayuda. Puedes hacer scroll a la ventana de comandos para verlos todos. Intenta `cd /?`. + + + +### Listar ficheros y directorios + +Así que, ¿en qué estamos? Estaría bien saberlo. Veamos: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > 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 + ... + + +> Nota: En consola tu puedes usar también 'ls' como en Linux y macOS. + +* * * + +### Cambiar el directorio actual + +Ahora, vamos a nuestro directorio de escritorio: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Escritorio + + +Nota que el nombre del directorio "Escritorio" puede ser traducido al lenguaje de tu cuenta de Linux. Si ese es el caso, necesitarás reemplazar `Escritorio` con la traducción del nombre; por ejemplo, `Desktop` para el inglés. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Escritorio + + + + +Verifica si está cambiado actualmente: + + + +{% filename %}command-line{% endfilename %} + + $ pwd /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd C:\Users\olasitarska\Desktop + + + + +¡Aquí está! + +> PRO tip: si escribes `cd D` y luego presionas `tab` en tu teclado, la línea de comandos automáticamente llenará el resto de el nombre por el que puedes navegar. Si hay mas que una carpeta iniciando con "D", presiona la tecla `tab` dos veces para obtener una lista de opciones. + +* * * + +### Crear un directorio + +¿Cómo crear un práctico directorio para tu escritorio? Puedes hacerlo de esta manera: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Este pequeño comando creará una carpeta con el nombre `práctica` en tu computador. ¡Puedes verificar si está allí en tu Escritorio o ejecutando uno de los siguientes comandos `ls` o `dir`! Inténtalo. :) + +> PRO tip: Si no quieres escribir el mismo comando una y otra vez, intenta presionando la `flecha arriba` y `flecha abajo` en tu teclado para regresar a través de los comandos recientemente usados. + +* * * + +### ¡Ejercicio! + +Un pequeño reto para ti: en tu nuevo directorio creado `práctica`, crea un directorio llamado `prueba`. (Usa los comandos `cd` y `mkdir`.) + +#### Solución: + + + +{% filename %}command-line{% endfilename %} + + $ cd practica + $ mkdir prueba + $ ls + prueba + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practica + > mkdir prueba + > dir + 05/08/2014 07:28 PM prueba + + + + +¡Felicidades! :) + +* * * + +### Limpieza + +No queremos dejar un enredo, así que removamos todo lo que hicimos hasta este momento. + +Primero, necesitamos regresar al Escritorio: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Usando los `..` con el comando `cd` cambiaremos tu actual directorio al directorio padre (que es el directorio que contiene tu directorio actual). + +Verifica dónde estás: + + + +{% filename %}command-line{% endfilename %} + + $ pwd /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd C:\Users\olasitarska\Desktop + + + + +Es hora de eliminar el directorio `practica`: + +> **Atención**: Si eliminas los archivos usando `del`, `rmdir` o `rm` no se podrán recuperar, esto significa ¡*el borrado de los archivos será para siempre*! Sé muy cuidados@ con este comando. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practica + practica, ¿Estás segur@? Y + + + + +¡Hecho! Estás seguro que lo eliminaste realmente, verifica: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Salir + +¡Eso es todo por ahora! Tú puedes ahora cerrar la línea de comandos o consola sin problemas. Hazlo como un hacker, ¿vale? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Genial, ¿no? :) + +## Resumen + +Aquí está un resumen de algunos comandos útiles: + +| Comando (Windows) | Comando (Mac OS / Linux) | Descripción | Ejemplo | +| ----------------- | ------------------------ | ----------------------------- | ------------------------------------------------- | +| exit | exit | Cierra la ventana | **exit** | +| cd | cd | Cambia el directorio | **cd test** | +| cd | pwd | Mostrar el directorio actual | **cd** (Windows) o **pwd** (Mac OS / Linux) | +| dir | ls | Lista directorios/archivos | **dir** | +| copy | cp | Copia de archivos | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | Mueve archivos | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | Crea un nuevo directorio | **mkdir testdirectory** | +| rmdir (o del) | rm | Eliminar un archivo | **del c:\test\test.txt** | +| rmdir /S | rm -r | Eliminar un Directorio | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | Obtener ayuda para un comando | **cd /?** (Windows) o **man cd** (Mac OS / Linux) | + +Estos son solo algunos de los comandos que puedes ejecutar en tu línea de comando o consola, pero no usarás ninguno más por hoy. + +Si eres curios@, [ss64.com](http://ss64.com) contiene una referencia completa de comandos para todos los sistemas operativos. + +## ¿Listo? + +¡Vamos a bucear en Python! \ No newline at end of file diff --git a/es/intro_to_command_line/open_instructions.md b/es/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..91a4488b9c0 --- /dev/null +++ b/es/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +Dependiendo de tu versión de Windows y tu teclado, una de las opciones siguientes debería abrir una ventana de comandos (puede que necesites experimentar un poco, pero no se necesita probar todas estas sugerencias): + +- Ve al menú o pantalla de Inicio, y escribe "Símbolo del Sistema" en el cuadro de búsqueda. +- Ve a Menú de inicio → Windows System → Command Prompt. +- Ve al menú de Inicio → Todos los Programas → Accessorios → Símbolo del Sistema. +- Ve a la pantalla de Inicio, pasa el ratón sobre la esquina inferior izquierda de la pantalla, y haz click en la flecha hacia abajo (en una pantalla táctil, desliza hacia arriba desde la parte baja de la pantalla). La página de la Aplicación debería abrirse. Haz click en Símbolo del Sistema en la sección Sistema de Windows. +- Mantén la tecla especial de Windows de tu teclado y pulsa "X". Elige "Símbolo del Sistema" del menú emergente. +- Mantén pulsada la tecla de Windows y pulsa "R" para abrir una ventana "Ejecutar". Escribe "cmd" en la caja, y haz click en OK. + +![Escribe "cmd" en la ventana "Ejecutar"](../python_installation/images/windows-plus-r.png) + +Más adelante en este tutorial, necesitarás tener dos consolas de comandos abiertas a la misma vez. Sin embargo, en algunas versiones de Windows, si ya tienes abierta una ventana de comandos e intentas abrir otra usando el mismo método, simplemente maximizará la que ya tienes abierta. ¡Inténtalo ahora en tu ordenador y mira qué ocurre! Si solo se abre una ventana de comandos, intenta alguno de los otros métodos explicados anteriormente. Al menos uno de ellos debería abrir una nueva ventana de comandos. + + + + + +Ve a Aplicaciones → Utilidades → Terminal. + + + + + +Probablemente se encuentre en Aplicaciones → Accesorios → Terminal, o Aplicaciones → Sistema → Terminal, aunque esto dependerá de tu sistema. Si no lo encuentras allí, intenta buscarlo en Google. :) + + diff --git a/es/python_installation/README.md b/es/python_installation/README.md new file mode 100755 index 00000000000..7aa0757f913 --- /dev/null +++ b/es/python_installation/README.md @@ -0,0 +1,15 @@ +# Vamos a empezar con Python + +¡Por fin estamos aquí! + +Pero primero, déjanos decirte qué es Python. Python es un lenguaje de programación muy popular que puede ser usado para crear sitios web, juegos, software científico, gráficos, y más, mucho más. + +Python se originó en la década de 1980 y su principal objetivo es ser legible por los seres humanos (¡no sólo por máquinas!). Por esta razón parece mucho más sencillo que otros lenguajes de programación, pero no te preocupes – ¡Python también es realmente poderoso! + +# Instalación de Python + +> **Nota** Si usas un Chromebook, omite este capítulo y asegúrate de seguir las instrucciones de [Chromebook Setup](../chromebook_setup/README.md). +> +> **Nota** Si ya has seguido los pasos de instalación, no hay necesidad de hacerlo nuevamente - ¡puedes saltar y continuar al siguiente capítulo! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/es/python_installation/images/add_python_to_windows_path.png b/es/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/es/python_installation/images/add_python_to_windows_path.png differ diff --git a/es/python_installation/images/python-installation-options.png b/es/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/es/python_installation/images/python-installation-options.png differ diff --git a/es/python_installation/images/windows-plus-r.png b/es/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/es/python_installation/images/windows-plus-r.png differ diff --git a/es/python_installation/instructions.md b/es/python_installation/instructions.md new file mode 100644 index 00000000000..b1823d67003 --- /dev/null +++ b/es/python_installation/instructions.md @@ -0,0 +1,121 @@ +> Para lectores en casa: este capitulo se cubre en el vídeo [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Esta sección está basada en un tutorial de Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django está escrito en Python. Necesitamos Python para hacer cualquier cosa en Django. ¡Empecemos con instalarlo! Queremos que instales la última versión de Python 3, así que si tienes una versión anterior, necesitarás actualizarla. Si ya tienes la versión 3.4 o una superior, debería ir bien. + +Por favor, instala Python normalmente de la siguiente forma, incluso si tienes Anaconda instalada en el ordenador. + + + +Primero comprueba si tu ordenador ejecuta la versión 32 bits de Windows o la de 64, en "Tipo de sistema" en la página de "Acerca de". Para llegar a esta página, intenta uno de estos métodos: + +* Presiona la tecla de Windows y la tecla Pause/Break al mismo tiempo +* Abre el Panel de Control desde el menú de Windows, después accede a Sistema & y Seguridad, luego a Sistema +* Presiona el botón de Windows, luego accede a Configuración > Sistema > Acerca de + +Puedes descargar Python para Windows desde la siguiente web https://www.python.org/downloads/windows/. Clica en el enlace "Latest Python 3 Release -Python x.x.x". Si tu ordenador ejecuta la versión de **64 bits** de Windows, descarga **Windows x86-64 executable installer**. De lo contrario, descarga **Windows x86 executable installer**. Después de descargar el instalador, deberías ejecutarlo (dándole doble click) y seguir las instrucciones. + +Una cosa para tener en cuenta: Durante la instalación, verás una ventana de "Setup". Asegúrate de marcar las casillas "Add Python 3.6 to PATH" o "Add Python to your environment variables" y hacer click en "Install Now", como se muestra aquí (puede que se vea un poco diferente si estás instalando una versión diferente): + +![No te olvides de agregar Python al Path](../python_installation/images/python-installation-options.png) + +Cuando la instalación se complete, verás un cuadro de diálogo con un enlace que puedes seguir para saber más sobre Python o sobre la versión que has instalado. Cierra o cancela ese dialogo -- ¡Aprenderás más en ese tutorial! + +Nota: si estás usando una versión anterior de Windows (7, Vista o cualquier versión anterior) y el instalador de la versión 3.6.x de Python falla con un error, intenta también: + +1. instalar todas las actualizaciones de Windows e intenta instalar Python de nuevo; o +2. instalar una [versión de Python anterior](https://www.python.org/downloads/windows/), por ejemplo, [3.4.6](https://www.python.org/downloads/release/python-346/). + +Si instalas una versión anterior de Python, la pantalla de instalación puede ser un poco diferente a la mostrada arriba. Asegúrate de desplazarte hacia abajo para ver "Add python.exe to Path", después haz click en el botón de la izquierda y selecciona "Will be installed on local hard drive": + +![Añadir Python a Path, versiones más antiguas](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Nota** Antes de instalar Python en macOS, debes asegurarte de que la configuración del Mac permita instalar paquetes que no estén en la App Store. ve a preferencias del sistema (System Preferences, está en la carpeta Aplicaciones), da click en "Seguridad y privacidad" (Security & Privacy) y luego la pestaña "General". Si tu "Permitir aplicaciones descargadas desde:" (Allow apps downloaded from:) está establecida a "Mac App Store," cambia a "Mac App Store y desarrolladores identificados." (Mac App Store and identified developers) + +Necesitas ir a la página web https://www.python.org/downloads/release/python-361/ y descargar el instalador de Python: + +* Descarga el archivo *macOS 64-bit/32-bit installer*, +* Doble click en *python-3.6.1-macosx10.6.pkg* para ejecutar el instalador. + + + + + +Es muy posible que ya tengas instalado Python de serie. Para verificar que ya lo tienes instalado (y qué versión es), abre una consola y escribe el siguiente comando: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Si tienes instalada una versión diferente de Python, al menos 3.4.0 (por ejemplo 3.6.0), entonces no tienes que actualizar. Si tu no has instalado Python, o si tu quieres una versión diferente, primero verifica que distribución de Linux estás usando con el siguiente comando: + +{% filename %}command-line{% endfilename %} + + $ grep ^NOMBRE= /etc/os-release + + +Después, dependiendo de el resultado, sigue una de las siguientes guías de instalación bajo ésta sección. + + + + + +Escribe este comando en tu consola: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Usa este comando en tu consola: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Si estás en versiones antiguas de Fedora, puedes obtener un error que el comando `dnf` no se encuentra. En ese caso, necesitas usar `yum` en su lugar. + + + + + +Usa este comando en tu consola: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Verifica si la instalación fue exitosa abriendo una terminal o consola, y corriendo el comando `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +La versión mostrada puede ser diferente desde 3.6.1 -- debería marcar la versión que instalaste. + +**NOTA:** Si está en Windows y recibe un mensaje de error que indica que `python3` no se encontró, intente usar `python` (sin el `3`) y compruebe si todavía podría ser una versión de Python que sea 3.4.0 o superior. Si eso tampoco funciona, puede abrir un nuevo símbolo del sistema e intentar nuevamente; Esto sucede si usa un símbolo del sistema abierto antes de la instalación de Python. + +* * * + +Si tienes alguna duda, o si ocurrió algún error y no tienes idea sobre qué hacer, ¡por favor pregunta a tu entrenador! Algunas veces las cosas no van bien y es mejor pedir ayuda a alguien con más experiencia. \ No newline at end of file diff --git a/es/python_introduction/README.md b/es/python_introduction/README.md new file mode 100755 index 00000000000..6d6ad0d33fb --- /dev/null +++ b/es/python_introduction/README.md @@ -0,0 +1,1070 @@ +{% set warning_icon = ' ' %} + +# Introducción a Python + +> Parte de este capítulo se basa en tutoriales de Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +¡Escribamos algo de código! + +## La Consola de Python + +> Para los lectores en casa: el vídeo [conceptos básicos de Python: enteros, cadenas, listas, variables y errores](https://www.youtube.com/watch?v=MO63L4s-20U) cubre esta parte. + +Para empezar a jugar con Python, tenemos que abrir una *línea de comandos* en nuestra computadora. Deberías saber cómo hacerlo, pues lo aprendiste en el capítulo de [Introducción a la Línea de Comandos](../intro_to_command_line/README.md). + +Una vez que estés lista, sigue las instrucciones a continuación. + +Queremos abrir una consola de Python, así que escribe `python` en Windows o `python3` en Mac OS/Linux y pulsa `intro`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## ¡Tu primer comando en Python! + +Después de ejecutar el comando de Python, el cursor cambiará a `>>>`. Para nosotros esto significa que por ahora sólo podemos utilizar comandos del lenguaje Python. No tienes que escribir e`>>>` pues Python lo hará por ti. + +Si deseas salir de la consola de Python en cualquier momento, solo escribe `exit()` o usa el atajo `Ctrl + Z` para Windows y `Ctrl + D` para Mac/Linux. Luego no verás más `>>>`. + +Por ahora, no queremos salir de la consola de Python. Deseamos aprender más sobre ella. Vamos a comenzar escribiendo algo de matemática, escribe `2 + 3` y oprime la tecla `enter`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +¡Qué bien! ¿Ves cómo salió la respuesta? ¡Python sabe matemática! Puedes probar otros comandos como: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Para realizar una operación exponencial, digamos 2 elevado al cubo, escribimos: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Diviértete con esto por un momento y luego vuelve aquí. :) + +Como puedes ver, Python es una gran calculadora. Si te estás preguntando qué más puedes hacer… + +## Cadena de caracteres + +¿Qué tal tu nombre? Escribe tu nombre entre comillas, así: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +¡Has creado tu primera cadena de texto! La misma es una secuencia de caracteres que puede ser procesada por una computadora. La cadena de texto (o string, en inglés) debe comenzar y terminar con el mismo carácter. Pueden ser comillas simples (`'`) o dobles (`"`) (¡no hay ninguna diferencia!) Las comillas le dicen a Python que lo que está dentro de ellas es una cadena de texto. + +Las cadenas pueden estar concatenadas. Prueba esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Hola " + "Ola" +'Hola Ola' +``` + +También puedes multiplicar las cadenas por un número: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Si necesitas poner un apóstrofe dentro de una cadena, hay dos formas de hacerlo. + +Usar comillas dobles: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +o escapar el apóstrofe con la diagonal inversa (``): + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Bien, ¿eh? Para ver tu nombre en letras mayúsculas, escribe: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +¡Acabas de usar el **método** `upper` sobre tu cadena de texto! Un método (como `upper()`) es un conjunto de instrucciones que Python tiene que realizar sobre un objeto determinado (`"Ola"`) una vez que se le invoca. + +Si quieres saber el número de letras que contiene tu nombre, ¡también hay una **función** para eso! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Te preguntarás ¿por qué a veces se invoca a las funciones con un `.` al final de una cadena (como `"Ola".upper()`) y a veces se invoca a la función colocando la cadena entre paréntesis? Bueno, en algunos casos las funciones pertenecen a los objetos, como `upper()`, que sólo puede ser utilizada sobre cadenas. En este caso, a la función le llamamos **método**. Otra veces, las funciones no pertenecen a ningún objeto específico y pueden ser usadas en diferentes objetos, como `len()`. Esta es la razón de por qué estamos pasando `"Ola"` como un parámetro a la función `len`. + +### Resumen + +Ok, es suficiente sobre las cadenas. Hasta ahora has aprendido sobre: + +- **la terminal** - teclear comandos (código) en la terminal de Python resulta en respuestas de Python +- **números y strings** - en Python los números son usados para matemáticas y strings (cadenas de caracteres) para objetos de texto +- **operadores** - como `+` y `*`, combinan valores para producir uno nuevo +- **funciones** - como `upper()` y `len()`, ejecutan acciones sobre los objetos. + +Estos son los conocimientos básicos que puedes aprender de cualquier lenguaje de programación. ¿Lista para algo más difícil? ¡Seguro que lo estás! + +## Errores + +Vamos a intentar algo nuevo. ¿Podemos obtener la longitud de un número de la misma manera que pudimos averiguar la longitud de nuestro nombre? Escribe `len(304023)` y pulsa `enter`: + +{% filename %}PythonAnywhere command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +¡Pues tenemos nuestro primer error! El icono de {{ warning_icon }} es nuestra manera de darte un aviso de que el código que estás ejecutando no funciona como se espera. ¡Cometer errores (incluso algunos intencionales) son una parte importante del aprendizaje! + +Dicho error dice que los objetos de tipo "int" (números enteros) no tienen longitud. ¿Qué podemos hacer ahora? ¿Quizás podamos escribir el número como una cadena? Las cadenas tienen longitud, ¿verdad? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +¡Funcionó! Hemos utilizado la función `str` dentro de la función `len`. `str()` convierte todo en cadenas de texto. + +- La función `str` convierte cosas en cadenas, **strings** +- La función `int` convierte cosas en enteros, **integers** + +> Importante: podemos convertir números en texto, pero no necesariamente podemos convertir texto en números - ¿qué sería `int('hello')`? + +## Variables + +Un concepto importante en la programación son las variables. Una variable no es más que un nombre para algo, de forma que puedas usarlo más tarde. Los programadores usan estas variables para almacenar datos, hacer su código más legible y para no tener que recordar qué es cada cosa. + +Supongamos que queremos crear una nueva variable llamada `name`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Indicamos que el nombre es igual a Ola. + +Como habrás notado, tu programa no devolvió nada como lo hacía antes. Así que ¿cómo sabemos que la variable existe realmente? Escribe `name` y pulsa `intro`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +¡Genial! ¡Tu primera variable :)! Siempre puedes cambiar a lo que se refiere: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +También puedes usarla dentro de funciones: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Increíble, ¿verdad? Por supuesto, las variables pueden ser cualquier cosa, ¡también números! Prueba esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Pero ¿qué pasa si usamos el nombre equivocado? ¿Puedes adivinar qué pasaría? ¡Vamos a probar! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): +  File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +¡Un error! Como puedes ver, Python tiene diferentes tipos de errores y este se llama **NameError**. Python te dará este error si intentas utilizar una variable que no ha sido definida aún. Si más adelante te encuentras con este error, verifica tu código para ver si no has escrito mal una variable. + +¡Juega con esto un rato y descubre qué puedes hacer! + +## La función print + +Intenta esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Cuando sólo escribes `name`, el intérprete de Python responde con la *representación* en forma de cadena de la variable 'name', que son las letras M-a-r-i-a, rodeadas de comillas simples ''. Cuando dices `print(name)`, Python va a "imprimir" el contenido de la variable a la pantalla, sin las comillas, que es más claro. + +Como veremos después, `print()` también es útil cuando queremos imprimir cosas desde adentro de las funciones, o cuando queremos imprimir cosas en múltiples líneas. + +## Listas + +Además de cadenas y enteros, Python tiene toda clase de tipos de objetos diferentes. Ahora vamos a introducir uno llamado **list**. Las listas son exactamente lo que piensas que son: objetos que son listas de otros objetos. :) + +Anímate y crea una lista: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Sí, esta lista está vacía. No es muy útil, ¿verdad? Vamos a crear una lista de números de lotería. No queremos repetirnos todo el rato, así que la pondremos también en una variable: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Muy bien, ¡tenemos una lista! ¿Qué podemos hacer con ella? Vamos a ver cuántos números de lotería hay en la lista. ¿Tienes alguna idea de qué función deberías usar para eso? ¡Ya lo sabes! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +¡Sí! `len()` puede darte el número de objetos en una lista. Útil, ¿verdad? Tal vez la ordenemos ahora: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +No devuelve nada, sólo ha cambiado el orden en que los números aparecen en la lista. Vamos a imprimirla otra vez y ver qué ha pasado: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Como puedes ver, los números de tu lista ahora están ordenados de menor a mayor. ¡Enhorabuena! + +¿Te gustaría invertir ese orden? ¡Vamos a hacerlo! + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Si quieres añadir algo a tu lista, puedes hacerlo escribiendo este comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Si deseas mostrar sólo el primer número, puedes hacerlo mediante el uso de **indexes** (en español, índices). Un índice es el número que te dice dónde en una lista aparece un ítem. Las programadoras y los programadores prefieren comenzar a contar desde 0, por lo tanto el primer objeto en tu lista está en el índice 0, el próximo esta en el 1, y así sucesivamente. Intenta esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Como puedes ver, puedes acceder a diferentes objetos en tu lista utilizando el nombre de la lista y el índice del objeto dentro de corchetes. + +Para borrar algo de tu lista tendrás que usar **índices** como aprendimos anteriormente y la función `pop()`. Vamos a tratar de ejemplificar esto y reforzaar lo que aprendimos anteriormente; vamos a borrar el primer número de nuestra lista. + +{% 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] +``` + +¡Funcionó de maravilla! + +Para diversión adicional, prueba algunos otros índices: 6, 7, 1000, -1, -6 ó -1000. A ver si puedes predecir el resultado antes de intentar el comando. ¿Tienen sentido los resultados? + +Puedes encontrar una lista de todos los métodos disponibles para listas en este capítulo de la documentación de Python: https://docs.python.org/3/tutorial/datastructures.html + +## Diccionarios + +> Para lectores en casa: este capítulo está cubierto en el video [Bases de Python: Diccionarios](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Un diccionario es similar a una lista, pero accedes a valores usando una llave en vez de un índice. Una llave puede ser cualquier cadena o número. La sintaxis para definir un diccionario vacío es: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Esto demuestra que acabas de crear un diccionario vacío. ¡Hurra! + +Ahora, trata escribiendo el siguiente comando (intenta reemplazando con tu propia información): + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Con este comando, acabas de crear una variable llamada `participant` con tres pares llave-valor: + +- La llave `name` apunta al valor `'Ola'` (un objeto `string`), +- `country` apunta a `'Poland'` (otro `string`), +- y `favorite_numbers` apunta a `[7, 42, 92]` (una `list` con tres números en ella). + +Puedes verificar el contenido de claves individuales con esta sintaxis: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +Lo ves, es similar a una lista. Pero no necesitas recordar el índice - sólo el nombre. + +¿Qué pasa si le pedimos a Python el valor de una clave que no existe? ¿Puedes adivinar? ¡Pruébalo y verás! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +¡Mira, otro error! Este es un **KeyError**. Python te ayuda y te dice que la llave `'age'` no existe en este diccionario. + +¿Cuando deberías usar un diccionario o una lista? Bueno, es un buen punto para reflexionar. Piensa sobre la respuesta, antes de mirar una solución en la siguiente línea. + +- ¿Sólo necesitas una secuencia ordenada de elementos? Usa una lista. +- ¿Necesitas asociar valores con claves, así puedes buscarlos eficientemente (usando las claves) más adelante? Utiliza un diccionario. + +Los diccionarios, como las listas, son *mutables*, lo que quiere decir que pueden ser modificados después de ser creados. Puedes agregar nuevos pares llave/valor a un diccionario luego de crearlo, como: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Como las listas, usando el método `len()` en los diccionarios devuelven el número de pares llave-valor en el diccionario. Adelante escribe el comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Espero tenga sentido hasta ahora. :) ¿Listo para más diversión con diccionarios? Salta a la siguiente línea para algunas cosas sorprendentes. + +Puedes utilizar el comando `pop()` para borrar un elemento en el diccionario. Por ejemplo, si deseas eliminar la entrada correspondiente a la clave `'favorite_numbers'`, tienes que escribir el siguiente comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Como puedes ver en la salida, el par de llave-valor correspondiente a la llave 'favorite_numbers' ha sido eliminado. + +Además de esto, también puedes cambiar un valor asociado a una llave ya creada en el diccionario. Escribe: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Como puedes ver, el valor de la llave `'country'` ha sido modificado de `'Poland'` a `'Germany'`. :) ¿Emocionante? ¡Hurra! Has aprendido otra cosa asombrosa. + +### Resumen + +¡Genial! Sabes mucho sobre programación ahora. En esta última parte aprendiste sobre: + +- **errores** - ahora sabes cómo leer y entender los errores que aparecen si Python no entiende un comando +- **variables** - nombres para los objetos que te permiten codificar más fácilmente y hacer el código más legible +- **listas** - listas de objetos almacenados en un orden determinado +- **diccionarios** - objetos almacenados como pares llave-valor + +¿Emocionada por la siguiente parte? :) + +## Compara cosas + +> Para lectores en casa: este capítulo está cubierto en el vídeo [Bases de Python: Comparaciones](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Buena parte de la programación incluye comparar cosas. ¿Qué es lo más fácil para comparar? Números, por supuesto. Vamos a ver cómo funciona: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Le dimos a Python algunos números para comparar. Como puedes ver, Python no sólo puede comparar números, sino que también puede comparar resultados de funciones. Bien, ¿eh? + +¿Te preguntas por qué pusimos dos signos igual `==` al lado del otro para comparar si los números son iguales? Utilizamos un solo `=` para asignar valores a las variables. Siempre, **siempre** es necesario poner dos `==` Si deseas comprobar que las cosas son iguales entre sí. También podemos afirmar que las cosas no son iguales a otras. Para eso, utilizamos el símbolo `!=`, como mostramos en el ejemplo anterior. + +Da dos tareas más a Python: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +Hemos visto `>` y `<`, pero, ¿qué significan `>=` y `<=`? Los puedes leer así: + +- x `>` y significa: x es mayor que y +- x `<` y significa: x es menor que y +- x `<=` y significa: x es menor o igual que y +- x `>=` y significa: x es mayor o igual que y + +¡Genial! ¿Quieres hacer uno más? Intenta esto: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Puedes darle a Python todos los números para comparar que quieras, y siempre te dará una respuesta. Muy inteligente, ¿verdad? + +- **and** - si utilizas el operador `and`, ambas comparaciones deben ser True para que el resultado de todo el comando sea True +- **or** - si utilizas el operador `or`, sólo una de las comparaciones tiene que ser True para que el resultado de todo el comando sea True + +¿Has oído la expresión "comparar manzanas con naranjas"? Vamos a probar el equivalente en Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Aquí verás que al igual que en la expresión, Python no es capaz de comparar un número (`int`) y un string (`str`). En cambio, muestra un **TypeError** y nos dice que los dos tipos no se pueden comparar. + +## Boolean + +Incidentalmente, acabas de aprender sobre un nuevo tipo de objeto en Python. Se llama **Boolean** (booleano). + +Hay sólo dos objetos booleanos: + +- True - verdadero +- False - falso + +Pero para que Python entienda esto, siempre los tienes que escribir de modo 'True' (la primera letra en mayúscula, con el resto de las letras en minúscula). **true, TRUE, y tRUE no funcionarán – solamente True es correcta.** (Lo mismo aplica también para 'False'.) + +Los valores booleanos pueden ser variables, también. Ve el siguiente ejemplo: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +También puedes hacerlo de esta manera: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Practica y diviértete con los booleanos ejecutando los siguientes comandos: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +¡Felicidades! Los booleanos son una de las funciones más geniales en programación y acabas de aprender cómo usarlos. + +# ¡Guárdalo! + +> Para lectores en casa: este capítulo está cubierto en el vídeo [Bases de Python: Guardando archivos y condicionales](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Hasta ahora hemos escrito todo nuestro código Python en el intérprete, lo cual nos limita a ingresar una línea de código a la vez. Normalmente los programas son guardados en archivos y son ejecutados por el **intérprete** o **compilador** de nuestro lenguaje de programación. Hasta ahora, hemos estado corriendo nuestros programas de a una línea por vez en el **intérprete** de Python. Necesitaremos más de una línea de código para las siguientes tareas, entonces necesitaremos hacer rápidamente lo que sigue: + +- Salir del intérprete de Python +- Abrir el editor de texto de nuestra elección +- Guardar algo de código en un nuevo archivo de Python +- ¡Ejecutarlo! + +Para salir del intérprete de Python que hemos estado usando, escribe `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Esto te llevará de vuelta a la línea de comandos. + +Anteriormente, seleccionamos un editor de código de la sección editor de código. Necesitaremos abrir el editor ahora y escribir algo de código en un nuevo archivo (o si está usando un Chromebook, cree un nuevo archivo en el IDE de la nube y abra el archivo, que estará en el editor de código incluido): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Obviamente, ahora eres una desarrolladora Python muy experimentada, asi que sintete libre de escribir algo del código que has aprendido hoy. + +Ahora tenemos que guardar el archivo y asignarle un nombre descriptivo. Vamos a llamar al archivo **python_intro.py** y guardarlo en tu escritorio. Podemos nombrar el archivo como queramos, pero la parte importante es asegurarse de que termina en **.py**. La extensión **.py** le dice a nuestro sistema operativo que es un **archivo ejecutable de python** y Python lo puede ejecutar. + +> **Nota** Deberías notar una de las cosas más geniales de los editores de código: ¡los colores! En la consola de Python, todo era del mismo color, ahora deberías ver que la función `print` es de un color diferente a la cadena en su interior. Esto de denomina "sintaxis resaltada", y es una característica muy útil cuando se programa. El color de las cosas te dará pistas, como cadenas no cerradas o errores tipográficos en un nombre clave (como `def` en una función, que veremos a continuación). Esta es una de las razones por las cuales usar un editor de código. :) + +Con el archivo guardado, ¡es hora de ejecutarlo! Utilizando las habilidades que has aprendido en la sección de línea de comandos, utiliza la terminal para **cambiar los directorios** e ir al escritorio. + + + +En una Mac, el comando se verá algo como esto: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +En Linux, será así: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Recuerde que la palabra "Desktop" puede traducirse a su idioma local.) + + + + + +En la consola de Windows, ésto será como: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +Y en Windows Powershell, será así: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Si estás atascada, pide ayuda. ¡Eso es exactamente lo que hacen las entrenadoras! + +Ahora usa Python para ejecutar el código en el archivo como esto: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Nota: en Windows 'python3' no es reconocido como un comando. En su lugar, usa 'python' para ejecutar el archivo: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +¡Correcto! Ahora corriste tu primer programa de Python que fue guardado en un archivo. ¿Se siente increíble? + +Puedes ahora moverte a una herramienta esencial en programación: + +## If … elif … else + +Muchas de las cosas en código debería ser ejecutadas solo cuando las condiciones son conocidas. Eso es por qué Python lo ha llamado **sentencias if**. + +Reemplaza el código en tu archivo **python_intro.py** con esto: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Si guardáramos y corriéramos esto, veríamos un error como éste: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python nos espera dar nuevas instrucciones, las cuales son ejecutadas si la condición `3 > 2` torna a ser verdadera (o `True` para ese caso). Intentemos imprimir en Python "¡Funciona!". Cambia el código de tu archivo **python_intro.py** a esto: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +¿Notas cómo estamos indentando la siguiente línea de código con 4 espacios? Nosotros necesitamos hacer esto para que Python comprenda que el código se ejecuta si el resultado es verdadero. Tú puedes poner un espacio, pero prácticamente todos los programadores en Python ponen 4 espacios para hacer el código más legible. Un simple tabulador también contará como 4 espacios tan largos como tu editor de texto esté configurado. Cuando hagas tu elección, ¡no la cambies! Si ya identaste con 4 espacios, sigue haciendo futuras identaciones con 4 espacios también, de otra forma, puedes encontrar problemas. + +Guárdalo y ejecútalo de nuevo: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +Nota: Recuerda que en Windows, 'python3' no es reconocido como un comando. Desde ahora, reemplaza 'python3' con 'python' para ejecutar el archivo. + +### ¿Qué pasa si una condición no es verdadera? + +En previos ejemplos, el código fue ejecutado solamente cuando las condiciones eran Verdaderas. Pero Python también tiene sentencias `elif` y `else`: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Cuando ésto se ejecuta, imprimirá: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +Si 2 era mayor que el número 5, entonces el segundo comando sería ejecutado. Veamos cómo `elif` funciona: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +y ejecuta: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +¿Ves qué sucedió allí? `elif` te deja añadir condiciones adicionales que se ejecutan si las condiciones previas fallan. + +Tú puedes añadir tantas sentencias `elif` como quieras, luego de tu sentencia inicial `if`. Por ejemplo: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("Me duelen las orejas! :(") +``` + +Python corre a través de cada prueba secuencialmente e imprime: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## Comentarios + +Los comentarios son líneas que comienzan con `#`. Tú puedes escribir lo que quieras tras el `#` y Python lo ignorará. Los comentarios pueden hacer que el código sea más fácil de entender para otras personas. + +Veamos cómo luce: + +{% filename %}python_intro.py{% endfilename %} + +```python +# Cambiar el volumen si esta muy alto o muy bajo +if volume < 20 or volume > 80: + volume = 50 + print("Mucho mejor!") +``` + +Tú no necesitas escribir un comentario para cada línea de código, pero ellos son útiles para explicar qué está haciendo el código, o proveer un resumen cuando se está haciendo algo complejo. + +### Resumen + +En los últimos ejercicios aprendiste acerca de: + +- **Comparar cosas** - en Python puedes comparar cosas haciendo uso de `>`, `>=`, `==`, `<=`, `<` y de los operadores `and` y `or` +- **Boolean** - un tipo de objeto que sólo puede tener uno de dos valores: `True` o `False` +- **Guardar archivos** - almacenar código en archivos para que puedas ejecutar programas más grandes. +- **if... elif... else** - sentencias que te permiten ejecutar código sólo cuando se cumplen ciertas condiciones. +- **comentarios** - líneas que Python no ejecutará que permiten documentar el código + +¡Es tiempo para leer la última parte de este capítulo! + +## ¡Tus propias funciones! + +> Para lectores en casa: este capítulo está cubierto en el vídeo [Bases de Python: Funciones](https://www.youtube.com/watch?v=5owr-6suOl0). + +¿Recuerdas las funciones como `len()` que puedes ejecutar en Python? Bien, buenas noticias - ¡aprenderás cómo escribir tus propias funciones ahora! + +Una función es una secuencia de instrucciones que Python debería ejecutar. Cada función en Python inicia con la palabra clave `def`, el nombre es dado, y puede tener algunos parámetros. Veamos. Reemplaza el código en **python_intro.py** con lo siguiente: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Okay, ¡nuestra primera función está lista! + +Tú puedes preguntar por qué hemos escrito el nombre de la función en la parte inferior del archivo. Esto es porque Python lee el archivo y lo ejecuta de arriba a bajo. Así en orden para usar nuestra función, tenemos que re-escribirlo en la parte inferior. + +Ejecuta ésto ahora y mira qué sucede: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +Nota: si ésto no funciona, ¡Tranquil@! La salida te ayudará a entender por qué: + +- Si te sale `NameError`, probablemente significa que escribiste algo mal, así que deberias comprobar si utilizaste el mismo nombre para crear la función con `def hi():` y al llamarla con `hi()`. +- Si te sale un `IndentationError`, comprueba que las líneas del `print` tienen el mismo espacio en blanco al comienzo de línea: python requiere que todo el código dentro de la función esté perfectamente alineado. +- Si no hay ninguna salida, comprueba que el último `hi()` *no esté* identado - si lo está, esa línea también será parte de la función, y nunca se ejecutará. + +Construyamos nuestra primera función con parámetros. Cambiaremos el ejemplo anterior - una función que dice 'hola' para la persona que lo ejecuta - con un nombre: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Como puedes ver, ahora le dimos a nuestra función un parámetro que llamamos `nombre`: + +{% 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!') + +hi() +``` + +Recuerda: La función `print` está indentada con 4 espacios en la sentencia `if`. Esto es porque la función se ejecuta cuando la condición es conocida. Veamos cómo funciona ahora: + +{% 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, un error. Por suerte, Python nos da un útil y agradable mensaje de error. Este nos dice que la función `hi()` (que definimos) tiene un argumento requerido (llamado `nombre`) y que olvidamos pasarlo cuando llamamos a la función. Configuremos esto en la parte inferior del archivo: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +Y ejecutemos otra vez: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +¿Y si cambiamos el nombre? + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +Y lo ejecutamos: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +Ahora, ¿qué piensas que sucederá si escribes otro nombre allí? (No Ola o Sonja.) Inténtalo y comprueba si estás en lo correcto. Debería imprimir esto: + +{% filename %}command-line{% endfilename %} + + Hi anonymous! + + +Esto es sorprendente, ¿Verdad? De esta manera tú no tienes que repetir la función cada vez que cambies el nombre de la persona que está supuesta a recibir. Y eso es exactamente por qué necesitamos funciones - ¡tú nunca quieres repetir tú código! + +Hacer algo más inteligente - hay más nombres que dos, y escribir una condición para cada uno sería difícil, ¿Verdad? Reemplaza el contenido de tu archivo con lo siguiente: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +Llamarémos al código ahora: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +¡Felicidades! ¡Ya aprendíste cómo escribir funciones! :) + +## Bucles + +> Para lectores en casa: este capítulo está cubierto en el vídeo [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +Listo esta es la última parte. Eso fue rápido, ¿verdad? :) + +Los programadores no les gusta repetir. Programar es todo acerca de automatizar cosas, así que no queremos recibir a cada persona por su nombre manualmente, ¿verdad? Allí es dónde los ciclos vienen a manejarse. + +¿Aún recuerdas las listas? Hagamos una lista de niñas: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Queremos recibir a todos ellos con sus nombres. Tenemos la función `hola` para hacerlo, así que usémosla en un ciclo: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +La sentencia `for` se comporta parecido a una sentencia `if`; ambos códigos necesitan ser indentados por 4 espacios. + +Aquí está completo el código que estará en el archivo: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +Y cuando lo ejecutemos: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +Como puedes ver, todo lo que coloques dentro de una sentencia `for` con una indentación, será repetida para cada elemento de la lista `girls`. + +Tu puedes también usar `for` con números usando la función `range`: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +El cuál imprimirá: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` es una función que crea una lista de números en serie (estos números son proporcionados por ti como parámetros). + +Nota que el segundo de estos números no está incluido en la lista que regresa Python (es decir, `range(1, 6)` cuenta desde 1 a 5, pero no incluye el número 6). Esto es porque "range" está medio-abierto, y por eso se incluye el primer valor, pero no el último. + +## Resumen + +Eso es todo. **¡Tú rockeas totalmente!** Esto fue un capítulo difícil, así que deberías sentirte orgullos@ de ti. ¡Estamos definitivamente encantados de que hayas llegado tan lejos! + +Para un tutorial oficial y completo de python visita https://docs.python.org/3/tutorial/. Este te dará un estudio completo de éste lenguaje. Gracias :) + +Tu podrías querer un momento para algo - estirarte, caminar cerca, descansar tus ojos - antes de avanzar a un próximo capítulo. :) + +![Pastelillo](images/cupcake.png) diff --git a/es/python_introduction/images/cupcake.png b/es/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/es/python_introduction/images/cupcake.png differ diff --git a/es/template_extending/README.md b/es/template_extending/README.md new file mode 100755 index 00000000000..7dc522a90ff --- /dev/null +++ b/es/template_extending/README.md @@ -0,0 +1,147 @@ +# Extendiendo plantillas + +Otra cosa buena que tiene Django es la **extensión de plantillas**. ¿Qué significa? Significa que puedes reutilizar partes del HTML para diferentes páginas del sitio web. + +Las plantillas son útiles cuando quieres utilizar la misma información o el mismo diseño en más de un lugar. No tienes que repetirte a ti misma en cada archivo. Y si quieres cambiar algo, no tienes que hacerlo en cada plantilla, sólo en una! + +## Crea una plantilla base + +Una plantilla base es la plantilla más básica que extiendes en cada página de tu sitio web. + +Vamos a crear un archivo `base.html` en `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +Ahora, ábrelo en el editor de código y copia todo el contenido de `post_list.html` en `base.html`, así: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Luego, en `base.html` reemplaza por completo tu `` (todo lo que haya entre `` and ``) con esto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Seguro que ya te has dado cuenta de que lo que hemos hecho ha sido cambiar todo lo que había entre `{% for post in posts %}` y `{% endfor %}` por {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Pero ¿por qué? ¡Acabas de crear un bloque! Hemos usado la etiqueta de plantilla `{% block %}` para crear un área en la que se insertará HTML. Ese HTML vendrá de otra plantilla que extiende esta (`base.html`). Enseguida te enseñamos cómo se hace. + +Ahora guarda `base.html` y abre `blog/templates/blog/post_list.html` de nuevo en el editor. {% raw %}Quita todo lo que hay encima de `{% for post in posts %}` y por debajo de `{% endfor %}`. Cuando termines, el archivo tendrá este aspecto:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Queremos utilizar esto como parte de nuestra plantilla en los bloques de contenido. ¡Es hora de añadir etiquetas de bloque en este archivo! + +{% raw %}Tu etiqueta de bloque debe ser la misma que la etiqueta del archivo `base.html`. También querrás que incluya todo el código que va en los bloques de contenido. Para ello, pon todo entre `{% block content %}` y `{% endblock %}`. Algo como esto:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Solo falta una cosa. Tenemos que conectar estas dos plantillas. ¡Esto es lo que significa extender plantillas! Para eso tenemos que añadir una etiqueta "extends" al comienzo del archivo. Así: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +¡Y ya está! Guarda el fichero y comprueba que el sitio web sigue funcionando como antes. :) + +> Si te sale el error `TemplateDoesNotExist`, que significa que no hay ningún archivo `blog/base.html` y tienes `runserver` corriendo en la consola. Intenta pararlo, pulsando Ctrl+C (teclas Control y C a la vez) en la consola y reiniciarlo con el comando `python manage.py runserver`. \ No newline at end of file diff --git a/es/whats_next/README.md b/es/whats_next/README.md new file mode 100755 index 00000000000..53a1d3cc887 --- /dev/null +++ b/es/whats_next/README.md @@ -0,0 +1,42 @@ +# ¿Y ahora qué? + +Date muchas felicitaciones. **¡Eres increíble!** ¡Estamos orgullosas! <3 + +### ¿Qué hacer ahora? + +Toma un descanso y ¡relájate!. Acabas de hacer algo realmente grande. + +Después de eso, asegúrate de seguir a Django Girls en [Facebook](http://facebook.com/djangogirls) o [Twitter](https://twitter.com/djangogirls) para estar al día. + +### ¿Me puedes recomendar recursos adicionales? + +¡ Sí! Hay un *montón* de recursos en línea para el aprendizaje de todas las clases de habilidades en programación – puede ser algo intimidante donde ir, pero lo tenemos cubierto. Cualquiera que fueran tus intereses antes de que vinieras a Django Girls, y los intereses que hayas desarrollado a lo largo del tutorial, aquí hay algunos recursos gratuitos (o recursos con grandes componentes libres) que puedes utilizar para llegar hasta donde quieras. + +#### Django + +- En nuestro libro [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [El tutorial oficial de Django](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [Comienza a usar las lecciones en vídeo de Django](http://www.gettingstartedwithdjango.com/) + +#### HTML, CSS y JavaScript + +- [El curso de desarrollo web de Codeacademy](https://www.codecademy.com/learn/paths/web-development) +- [FreeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [El curso de Python en Codeacademy](https://www.codecademy.com/learn/learn-python) +- [Curso de Python de Google](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) – Los primeros ejercicios son gratuitos +- [Nuevos tutoriales de Coder](http://newcoder.io/tutorials/) - esta es una variedad de ejemplos prácticos de cómo puedes usar Python +- [edX](https://www.edx.org/course?search_query=python) – puedes auditar la mayoría de los cursos gratis, pero si deseas un certificado o créditos para una calificación de educación superior, entonces eso costará dinero +- [La especialización Python en Coursera](https://www.coursera.org/specializations/python) – algunas videoconferencias pueden ser auditadas gratuitamente y puedes ganar un certificado de Coursera tomando estos cursos +- [Python for Everybody](https://www.py4e.com/) - una versión libre y abierta de la especialización de Python en Coursera + +#### Trabajar con datos + +- [Curso de ciencia de datos de Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – puedes auditar la mayoría de los cursos gratis, pero si desea un certificado o créditos para una calificación de educación superior, entonces eso costará dinero +- [Dataquest](https://www.dataquest.io/) – las primeras 30 "misiones" son gratuitas + +¡No podemos esperar para ver lo que construyes a continuación! \ No newline at end of file diff --git a/extend_your_application/README.md b/extend_your_application/README.md deleted file mode 100644 index 74853569f42..00000000000 --- a/extend_your_application/README.md +++ /dev/null @@ -1,147 +0,0 @@ -# Extend your application - -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. - -Time to practice! - -The first thing we need in our blog is, obviously, a page to display one post, right? - -We already have a `Post` model, so we don't need to add anything to `models.py`. - -## Create a link in the template - -We will start with adding a link inside `blog/templates/blog/post_list.html` file. So far it should look like: - - {% extends 'mysite/base.html' %} - - {% block content %} - {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text }}

-
- {% endfor %} - {% endblock content %} - -We want to have a link to a post detail page on the post's title. Let's change `

{{ post.title }}

` into a link: - -

{{ post.title }}

- -Time to explain the mysterious `{% url 'blog.views.post_detail' pk=post.pk %}`. As you suspect `{% %}` notation means that we are using Django template tags. This time we will use one that will create a URL for us! - -`blog.views.post_detail` is a path to a `post_detail` *view* we want to create. Please note: `blog` is the name of our application (the directory `blog`), `views` is from the name of the `views.py` file and the last bit: `post_detail` is the name of the *view*. - -Now when we go to: - - http://127.0.0.1:8000/ - -we will have an error (as suspected, since we don't have a URL or a *view* for `post_detail`). It will look like this: - -![NoReverseMatch error](images/no_reverse_match2.png) - -Let's create a URL in `urls.py` for our `post_detail` *view*! - -### URL: http://127.0.0.1:8000/post/1/ - -We want to create a URL to point Django to a *view* called `post_detail`, that will show an entire blog post. Add the line `url(r'^post/(?P[0-9]+)/$', views.post_detail),` to the `blog/urls.py` file. It should look like this: - - from django.conf.urls import patterns, include, url - from . import views - - urlpatterns = patterns('', - url(r'^$', views.post_list), - url(r'^post/(?P[0-9]+)/$', views.post_detail), - ) - -That one looks scary, but no worries - we will explain it for you: -- it's starts with `^` again -- "the beginning" -- `post/` only means that after the beginning, the URL should contain the word __post__ and __/__. So far so good. -- `(?P[0-9]+)` - this part is trickier. It means that Django will take everything that you'll place here and transfer it to a view as a variable called `pk`. `[0-9]` also tells us that it can only be a number, not a letter (so everything between 0 and 9). `+` means that there needs to be one or more digits there. So something like `http://127.0.0.1:8000/post//` is not valid, but `http://127.0.0.1:8000/post/1234567890/` is perfectly ok! -- `/` - then we need __/__ again -- `$` - "the end"! - -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*. - -`pk` is shortcut for `primary key`. This name is often used in many Django projects. But you can name your variable as you like (remember: lowercase and `_` instead of whitespaces!). For example instead of `(?P[0-9]+)` we could have variable `post_id`, so this bit would look like: `(?P[0-9]+)`. - -Ok! Let's refresh the page: - - http://127.0.0.1:8000/ - -Boom! Yet another error! As expected! - -![AttributeError](images/attribute_error2.png) - -Do you remember what the next step is? Of course: adding a view! - -## post_detail view - -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 we need to use exactly the same name as the one we specified in urls (`pk`). Omitting this variable is incorrect and will result in an error! - -Now, we want to get one and only one blog post. To do this we can use querysets like this: - - Post.objects.get(pk=pk) - -But this code has a problem. If there is no `Post` with given `primary key` (`pk`) we will have a super ugly error! - -![DoesNotExist error](images/does_not_exist2.png) - -We don't want that! But, of course, 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 (called `Page Not Found 404` page). - -![Page not found](images/404_2.png) - -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. - -Ok, time to add a *view* to our `views.py` file! - -We should open `blog/views.py` and add the following code: - - from django.shortcuts import render, get_object_or_404 - -Near other `from` lines. And at the end of the file we will add our *view*: - - def post_detail(request, pk): - post = get_object_or_404(Post, pk=pk) - return render(request, 'blog/post_detail.html', {'post': post}) - -Yes. It is time to refresh the page: - - http://127.0.0.1:8000/ - -![Post list view](images/post_list2.png) - -It worked! But what happens when you click a link in blog post title? - -![TemplateDoesNotExist error](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! - -We will create a file in `blog/templates/blog` called `post_detail.html`. - -It will look like this: - - {% extends 'mysite/base.html' %} - - {% block content %} -
- {% if post.published_date %} - {{ post.published_date }} - {% endif %} -
-

{{ post.title }}

-

{{ post.text }}

- {% endblock %} - -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? - -`{% 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. - -Ok, we can refresh our page and see if `Page not found` is gone now. - -![Post detail page](images/post_detail2.png) - -Yay! It works! - -You should be proud of yourself! You already did __a lot__! - diff --git a/extend_your_application/images/404_2.png b/extend_your_application/images/404_2.png deleted file mode 100644 index a8cb53172af..00000000000 Binary files a/extend_your_application/images/404_2.png and /dev/null differ diff --git a/extend_your_application/images/attribute_error2.png b/extend_your_application/images/attribute_error2.png deleted file mode 100644 index 6edcd9933c3..00000000000 Binary files a/extend_your_application/images/attribute_error2.png and /dev/null differ diff --git a/extend_your_application/images/does_not_exist2.png b/extend_your_application/images/does_not_exist2.png deleted file mode 100644 index 023d8720081..00000000000 Binary files a/extend_your_application/images/does_not_exist2.png and /dev/null differ diff --git a/extend_your_application/images/no_reverse_match2.png b/extend_your_application/images/no_reverse_match2.png deleted file mode 100644 index db65a5dc70a..00000000000 Binary files a/extend_your_application/images/no_reverse_match2.png and /dev/null differ diff --git a/extend_your_application/images/post_detail2.png b/extend_your_application/images/post_detail2.png deleted file mode 100644 index 240dc447b51..00000000000 Binary files a/extend_your_application/images/post_detail2.png and /dev/null differ diff --git a/extend_your_application/images/post_list2.png b/extend_your_application/images/post_list2.png deleted file mode 100644 index 8ae30c71311..00000000000 Binary files a/extend_your_application/images/post_list2.png and /dev/null differ diff --git a/extend_your_application/images/template_does_not_exist2.png b/extend_your_application/images/template_does_not_exist2.png deleted file mode 100644 index 335ce2569ef..00000000000 Binary files a/extend_your_application/images/template_does_not_exist2.png and /dev/null differ diff --git a/fa/GLOSSARY.md b/fa/GLOSSARY.md new file mode 100644 index 00000000000..c65a983e6a3 --- /dev/null +++ b/fa/GLOSSARY.md @@ -0,0 +1,3 @@ +# ویرایشگر کد + +ویرایشگر کد یک برنامه کاربردی است که به شما امکان می دهد کد خود را ذخیره کنید تا بتوانید بعدا به آن بازگردید. شما می توانید در [بخش ویرایشگر کد](./code_editor/README.md) یاد بگیرید که چطور یکی از آن‌ها را دانلود کنید \ No newline at end of file diff --git a/fa/README.md b/fa/README.md new file mode 100644 index 00000000000..4c69142bfbc --- /dev/null +++ b/fa/README.md @@ -0,0 +1,51 @@ +# جنگو برای دختران + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> این کار تحت مجوز Creative Commons Attribution-Share Alike 4.0 مجاز است. برای مشاهده یک نسخه از این مجوز، بهhttps://creativecommons.org/licenses/by-sa/4.0/ مراجعه کنید + +## خوش آمدید + +به دوره آموزشی دختران جنگو خوش آمدید! خوشحال هستیم که شما را اینحا می‌بینیم. :) در این آموزش، شما را به سفری به پشت صحنه تکنولوژی‌های وب خواهیم برد و نگاهی اجمالی می‌اندازیم به تمام بخش‌های بزرگ و کوچکی که کنار هم قرار می‌گیرند تا وب، آن طور که می‌شناسیمش، کار کند. + +مثل تمام کارهای ناشناخته دیگر، این کار نیز یک ماجراجویی خواهد بود. اما نگران نباشید، چرا که شهامت اینجا بودن را داشته‌اید، همه چیز خوب پیش خواهد رفت. :) + +## معرفی + +آیا تا به حال احساس کرده اید دنیا هر روز بیشتر و بیشتر پیرامون تکنولوژی می‌گذرد که شما (هنوز) با آن ارتباط برقرار نمی‌کنید؟ آیا شده به ساختن یک وبسایت فکر کنید ولی انگیزه کافی را برای شروع اش نداشته باشید؟ آیا تا به حال به این فکر کرده‌اید که دنیای نرم‌افزار برای آنکه شما وارد آن بشوید، بیش از حد پیچیده است؟ + +ما خبرهای خوبی برای شما داریم. برنامه نویسی آن قدر که به نظر می‌رسد سخت نیست و می‌خواهیم نشان دهیم که حتی میتواند جالب هم باشد. + +این آموزش شما را به طرز جادویی تبدیل به برنامه نویس نخواهد کرد. اگر بخواهید برنامه نویس خوبی شوید، باید ماه‌ها و یا حتی سال‌ها برایش وقت بگذارید. ولی ما می‌خواهیم نشان دهیم که برنامه نویسی یا ساختن وبسایت آنقدرها که به نظر می‌رسد پیچیده نیست. سعی ما این است که قدم به قدم و جز به جز جلو برویم، تا زیاد گیج نشوید. + +امیدواریم بتوانیم کاری کنیم که شما هم به اندازه ما از تکنولوژی خوشتان بیاید! + +## در این آموزش چه چیزی یاد خواهید گرفت؟ + +وقتی این برنامه آموزشی را تمام کنید، یک برنامه وب که کار می‌کند یعنی وبلاگ خودتان را خواهید داشت. به شما نشان خواهیم داد چه طور آن را روی اینترنت بگذارید تا بقیه کارتان را ببینند! + +کمابیش شبیه این خواهد شد: + +![تصویر 0.1](images/application.png) + +> اگر خودتان به تنهایی با این آموزش کار می‌کنید و مربی ندارید تا به شما کمک کند، در صورت بروز هر مشکلی ما یک سیستم چت برای شما داریم: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). ما از مربی‌ها و شرکت کنندگان قبلی خود خواسته ایم تا هر چند وقت یکبار اینجا باشند و به بقیه کمک کنند! از پرسیدن سوال هایتان نترسید! + +خوب،[ بیایید از ابتدا شروع کنیم... ](./how_the_internet_works/README.md) + +## دنبال کردن آموزش در منزل + +فوق‌العاده خواهد بود که در یکی از کارگاه‌های دختران جنگو شرکت کنید، اما می‌دانیم که امکان شرکت همیشه فراهم نیست. به همین دلیل است که شما را تشویق می کنیم که در خانه از این آموزش استفاده کنید. برای خوانندگان در منزل، ما در حال تهیه ویدئوهایی هستیم که دنبال کردن آموزش به تنهایی را آسان‌‌تر می‌سازد. هنوز کامل نشده‌است، اما چیزهای بیشتر و بیشتری به زودی در کانال یوتیوب [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) قرار خواهد گرفت. + +در هر فصل که قبلاً پوشش داده شده است، یک لینک وجود دارد که به ویدیو صحیح اشاره می‌کند. + +## مشارکت در توسعه + +این آموزش توسط [DjangoGirls](https://djangogirls.org/) نگهداری می‌شود. در صورتی که مشکلی در این آموزش می‌بینید یا می‌خواهید آن را بروز رسانی کنید [لطفاً دستورالعمل‌های مرتبط را انجام دهید](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## آیا می‌خواهید به ما در ترجمه این دوره به زبان‌های دیگر، کمک کنید؟ + +در حال حاضر، ترجمه بر روی بستر crowdin.com نگهداری می‌شود: + +https://crowdin.com/project/django-girls-tutorial + +اگر زبان شما در [crowdin](https://crowdin.com/) لیست نشده است، [یک issue جدید](https://github.com/DjangoGirls/tutorial/issues/new) باز کنید و در مورد این زبان به ما اطلاع دهید تا ما بتوانیم آن را اضافه کنیم. \ No newline at end of file diff --git a/fa/SUMMARY.md b/fa/SUMMARY.md new file mode 100644 index 00000000000..e91eb48cbea --- /dev/null +++ b/fa/SUMMARY.md @@ -0,0 +1,35 @@ +# چکیده + +* [معرفی](README.md) +* [نصب و راه‌اندازی](installation/README.md) + * [خط فرمان](installation/README.md#command-line) + * [پایتون](installation/README.md#python) + * [ویرایشگر کد](installation/README.md#code-editor) + * [محیط مجازی](installation/README.md#virtualenv) + * [جنگو](installation/README.md#django) + * [گیت](installation/README.md#git) + * [GitHub](installation/README.md#github-account) + * [PythonAnywhere](installation/README.md#pythonanywhere-account) +* [نصب و راه اندازی (کروم بوک)](chromebook_setup/README.md) +* [اینترنت چگونه کار می‌کند](how_the_internet_works/README.md) +* [آشنایی با خط فرمان](intro_to_command_line/README.md) +* [نصب و راه اندازی پایتون](python_installation/README.md) +* [ویرایشگر کد](code_editor/README.md) +* [آشنایی با پایتون](python_introduction/README.md) +* [جنگو چیست?](django/README.md) +* [نصب و راه اندازی جنگو](django_installation/README.md) +* [اولین پروژه جنگو شما!](django_start_project/README.md) +* [مدل در جنگو](django_models/README.md) +* [پنل مدیریت در جنگو](django_admin/README.md) +* [فاز دیپلوی!](deploy/README.md) +* [URL ها در جنگو](django_urls/README.md) +* [ساخت view در جنگو!](django_views/README.md) +* [آشنایی با HTML](html/README.md) +* [ORM در جنگو](django_orm/README.md) +* [داده های پویا در templates](dynamic_data_in_templates/README.md) +* [templates در جنگو](django_templates/README.md) +* [CSS - آن را زیبا کنید](css/README.md) +* [توسعه template](template_extending/README.md) +* [برنامه خود را توسعه دهید](extend_your_application/README.md) +* [فرم در جنگو](django_forms/README.md) +* [گام بعدی چیست؟](whats_next/README.md) \ No newline at end of file diff --git a/fa/chromebook_setup/README.md b/fa/chromebook_setup/README.md new file mode 100644 index 00000000000..73d2075a168 --- /dev/null +++ b/fa/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# نصب Chromebook + +> **نکته** اگر الان در حال گذراندن [مراحل نصب](../installation/README.md) هستید، لازم نیست مجددا این مراحل را انجام دهید و می‌توانید مستقیماً به بخش [آشنایی با پایتون](../python_introduction/README.md) بروید. + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/fa/chromebook_setup/instructions.md b/fa/chromebook_setup/instructions.md new file mode 100644 index 00000000000..43acffe4657 --- /dev/null +++ b/fa/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +اگر از Chromebook استفاده نمی‌کنید می‌توانید [از این بخش ](http://tutorial.djangogirls.org/en/installation/#install-python) عبور کنید. اگر از آن استفاده می‌کنید تجربه نصب شما کمی متفاوت خواهد بود. شما می توانید بقیه دستورالعمل نصب را نادیده بگیرید. + +### IDE ابری (PaizaCloud Cloud IDE, AWS Cloud9 و Glitch.com) + +IDE ابری ابزاری است که به شما دسترسی به یک ویرایشگر کد و یک کامپیوتر در حال کار کردن روی اینترنت را می‌دهد که می‌توانید نصب، نوشتن و اجرای برنامه‌ها را در آن انجام دهید. در زمان این آموزش، IDE ابری به عنوان * دستگاه محلی شما * عمل خواهد کرد. شما همچنان مانند سایر همکلاسی‌ها که از macOS، اوبونتو یا ویندوز استفاده می‌کنند، دستورات را در ترمینال اجرا خواهید کرد اما ترمینال شما به کامپیوتری که IDE ابری برای شما آماده کرده متصل است. در اینحا دستورالعمل استفاده از IDE های ابری ( PaizaCloud Cloud IDE، AWS Cloud9 و Glitch.com) را خواهید دید. شما می‌توانید یکی از IDE های ابری را انتخاب کنید و دستورالعمل را دنبال کنید. + +#### IDE ابری PiazaCloud + +1. به [PaizaCloud Cloud IDE](https://paiza.cloud/) بروید +2. یک حساب کاربری بسازید +3. بر روی *New Server* کلیک کنید و گزینه Django app را انتخاب کنید +4. دکمه Terminal را (در سمت چپ صفحه) بزنید + +حالا شما باید صفحه ای با یک ستون کناری و کلیدهایی در سمت چپ ببینید. بر روی دکمه "Terminal" کلیک کنید تا پنجره ترمینال با پیغامی شبیه به این باز شود: + +{% filename %}Terminal{% endfilename %} + + $ + + +ترمینال در IDE ابری PiazaCloud برای دستورات شما آماده شده است. شما می‌توانید اندازه این پنجره را تغییر دهید تا کمی بزرگتر دیده شود. + +#### AWS Cloud9 + +در حال حاضر برای استفاده از Cloud 9 باید با اکانت AWS ثبت نام کنید و مشخصات کارت اعتباری را نیز وارد کنید. + +1. Cloud 9 را از [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) نصب کنید +2. به [c9.io](https://c9.io) بروید و بر روی *Get started with AWS Cloud9* کلیک کنید +3. با یک حساب AWS ثبت نام کنید (به اطلاعات کارت اعتباری نیاز است اما می‌توانید به رایگان از آن استفاده کنید) +4. در داشبورد AWS عبارت *Cloud9* را در محل جستجو وارد کنید و کلید جستجو را بزنید +5. در داشبورد Cloud 9 بر روی *Create environment* کلیک کنید +6. نام آن را *django-girls* بگذارید +7. در هنگام انجام تنظیمات، در بخش "Environment Type" گزینه *Create a new instance for environment (EC2)* را و در بخش "Instance type" گزینه *t2.micro* را انتخاب کنید ("Free-tier eligible" را نشان خواهد داد). تنظیمات پیشفرض صرفه جویانه و خوب است و شما هم باقی تنظیمات پیشفرض را نگه دارید. +8. بر روی *Next step* کلیک کنید +9. بر روی *Create environment* کلیک کنید + +حالا باید صفحه‌ای با یک نوار کناری، یک صفحه اصلی بزرگ با مقداری نوشته و یک صفحه کوچک در پایین ببینید که شبیه به این خواهد بود: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +این محدوده پایین، ترمینال شماست. شما می‌توانید از این ترمینال برای فرستادن دستورات به کامپیوتر Cloud 9 استفاده کنید. می‌توانید ابعاد این پنجره را تغییر دهید تا کمی بزرگتر دیده شود. + +#### IDE ابری Glitch.com + +1. به [Glitch.com](https://glitch.com/) بروید +2. یک حساب کاربری (https://glitch.com/signup) بسازید یا از حساب GitHub خود استفاده کنید. (راهنمای استفاده از حساب GitHubرا در زیر ببینید) +3. بر روی *New Project* کلیک کنید و گزینه *hello-webpage* را انتخاب کنید +4. بر روی گزینه کشویی Tools کلیک کنید (در سمت چپ و پایین صفحه)، سپس بر روی دکمه Terminal کلیک کنید تا یک کنسول خط فرمان باز شود: + +{% filename %}Terminal{% endfilename %} + + app@name-of-your-glitch-project:~ + + +هنگامی که از Glitch.com به عنوان ویرایشگر ابری خود استفاده می‌کنید، لازم نیست که یک محیط مجازی بسازید، به جای آن فایل‌های زیر را باید بسازید: + +{% 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 +``` + +وقتی این فایل‌ها ساخته شدند، به Terminal بروید و دستورات زیر را اجرا کنید تا اولین پروژه جنگو شما ساخته شود: + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +برای دیدن جزییات مربوط به پیغام خطا، می‌توانید لاگ عیب‌یابی جنگو را در اپلیکیشن Glitch فعال کنید. به سادگی کد زیر را به انتهای فایل `mysite/settings.py` اضافه کنید. + +{% 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, + }, + }, +} +``` + +این کار یک فایل `debug.log` می‌سازد که جزییات عملیات جنگو و پیغام‌های خطای احتمالی، در آن است، به کمک این فایل عیب‌یابی وب‌سایت بسیار ساده‌تر می‌شود. + +اولین ریستارت پروژه Glitch‌ موفقیت‌آمیز نخواهد بود. (اگر بر روی منوی کشویی `Show` کلیک کنید و سپس `In a New Window` را بزنید، پیغام خطای `DisallowedHost` را دریافت خواهید کرد) در مورد این مرحله نگران نباشید، این آموزش این مشکل را به زودی و پس از به روزرسانی تنظیمات پروژه که در فایل `mysite/settings.py` است، حل خواهد کرد. + +### محیط مجازی + +یک محیط مجازی (Virtual Environment یا virtualenv) شبیه یک جعبه خصوصی است که ما می‌توانیم کدهای کامپیوتری مربوط به یک پروژه را در آن جمع کنیم. ما از آن‌ها استفاده می‌کنیم تا تکه‌های مختلف کدهای هر پروژه را جدا از پروژه دیگر نگه داریم تا بین پروژه‌ها تداخل پیش نیاید. + +بعد، دستورات زیر را اجرا کنید: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(توجه کنید که در خط آخر ما از یک علامت مد و یک مساوی استفاده کردیم: `~=`). + +### GitHub + +یک حساب کاربری [GitHub](https://github.com) بسازید. + +### PythonAnywhere + +دوره آموزشی جنگوگرلز شامل بخشی است به نام فاز دیپلوی یا Deployment، که شامل گرفتن و انتقال دادن کدهای وبسایت شما به یک کامپیوتر در دسترس عموم (به نام سرور) است تا سایرین هم بتوانند کار شما را ببینند. + +اگر این دوره آموزشی را بر روی Chromebook که خودش کامپیوتری بر روی اینترنت است (در مقابل لپ تاپ‌های معمولی که کامپیوتری محلی محسوب می‌شوند)، انجام می‌دهید این بخش کمی عجیب خواهد بود. با این‌حال، استفاده از Cloud 9 به عنوان یک محیط کاری برای کارهای در جریان و استفاده از Python Anywhere به عنوان یک فضای معرفی و نمایش پروژه هایی که در طول زمان کامل می‌شوند، مفید است. + +بنابراین یک حساب کاربری جدید در [www.pythonanywhere.com](https://www.pythonanywhere.com) بسازید. \ No newline at end of file diff --git a/fa/code_editor/README.md b/fa/code_editor/README.md new file mode 100644 index 00000000000..90c36a2806f --- /dev/null +++ b/fa/code_editor/README.md @@ -0,0 +1,11 @@ +# ویرایشگر کد + +> برای خوانندگان در خانه: این فصل در ویدئو [نصب پایتون و ویرایشگر کد](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) توضیح داده شده است. + +به نوشتن اولین خط کدتان نزدیک می‌شوید، زمان مناسبی برای دانلود یک ویرایشگر کد است! + +> **نکته** اگر از Chromebook استفاده میکنید، این فصل را رد کنید و مطمئن شوید که دستورالعمل [نصب Chromebook](../chromebook_setup/README.md) را دنبال کنید. IDE ابری که شما انتخاب کرده‌اید (PaizaCloud Cloud IDE یا AWS Cloud9) شامل یک ویرایشگر کد هم هست و هنگامی که یک فایل را در IDE خودتان باز می‌کنید به صورت اتوماتیک از ویرایشگر استفاده می‌کنید. +> +> **نکته** ممکن است این بخش را قبل‌تر در بخش [نصب و راه‌اندازی](../installation/README.md) انجام داده باشید، در این صورت مستقیم به بخش بعد بروید! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/fa/code_editor/instructions.md b/fa/code_editor/instructions.md new file mode 100644 index 00000000000..e6146e6516e --- /dev/null +++ b/fa/code_editor/instructions.md @@ -0,0 +1,37 @@ +ویرایشگرهای مختلف زیادی وجود دارد که این امر به سلیقه شخصی برمی‌گردد. اغلب برنامه‌نویسان پایتون از محیط‌های توسعه یکپارچه (IDE, Integrated Development Environments) بسیار قدرتمند مثل PyCharm استفاده می‌کنند. اما برای یک مبتدی احتمالا خیلی مناسب نیست. پیشنهادهای ما به همان اندازه قدرتمند، اما بسیار ساده‌تر هستند. + +ما موارد زیر را پیشنهاد می‌کنیم، اما می‌توانید از مربی خود، ترجیحش را بپرسید. راحت‌تر است از مربی کمک بگیرید. + +## Visual Studio Code + +Visual Studio Code یک ویرایشگر کد است که توسط مایکروسافت توسعه داده شده و برای ویندوز، لینوکس و macOS موجود است. این ویرایشگر قابلیت عیب یابی، کنترل Git از داخل نرم افزار، برجسته سازی دستورات، سیستم هوشمند کامل کردن دستورات، سیستم snippets (جلوگیری از نوشتن بخش‌های تکراری در کدها) و بازنویسی کدها است. + +[از اینجا دانلود کنید](https://code.visualstudio.com/) + +## Gedit + +Gedit یک نرم افزار آزاد و یک ویرایشگر رایگان است که برای تمام سیستم عامل‌ها موجود است. + +[از اینجا دانلود کنید](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text یک ویرایشگر بسیار رایج است که یک دوره آزمایشی رایگان دارد و برای تمام سیستم عامل‌ها موجود است. + +[جهت دانلود کلیک نمایید](https://www.sublimetext.com/) + +## Atom + +Atom نیز یک ویرایشگر رایج دیگر است که نرم افزاری رایگان و آزاد است و برای ویندوز، لینوکس وmacOS موجود است. Atom توسط [GitHub](https://github.com/) توسعه داده شده است. + +[از اینجا دانلود کنید](https://atom.io/) + +## چرا ویرایشگر متن نصب می‌کنیم؟ + +ممکن است فکر کنید که چرا به جای استفاده از برنامه‌ای مثل Word یا Notepad، این نرم‌افزار خاص ویرایش کد را نصب می‌کنم. + +دلیل اول این است که کدها نیاز دارند که به صورت متن ساده (**plain text**) باشند و مشکل برنامه‌هایی مثل Word یا Textedit این است که متن ساده تولید نمی‌کنند، بلکه متنی غنی (با فونت و قالب‌بندی) می‌سازند و از قالب‌های سفارشی مثل [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format) استفاده می‌کنند. + +دلیل دوم این است که ویرایشگرهای متن به طور خاص برای ویرایش کد ساخته شده‌اند. بنابراین، امکاناتی مثل رنگ‌آمیزی کدها بر اساس معنایشان یا بستن خودکار نقل قول‌ها را دارند. + +همه این‌ها را بعداً در عمل خواهیم دید. به زودی، شما به ویرایشگر کد خود به عنوان یکی از ابزارهای محبوبتان نگاه خواهید کرد. :) diff --git a/fa/css/README.md b/fa/css/README.md new file mode 100644 index 00000000000..074ed7e7d6f --- /dev/null +++ b/fa/css/README.md @@ -0,0 +1,325 @@ +# CSS - زیبایش کن! + +بلاگ ما هنوز خیلی زشت است، نه؟ وقتش است که زیبایش کنیم. برای این کار از CSS استفاده می‌کنیم. + +## CSS چیست؟ + +CSS یا (Cascading Style Sheets) زبان مورد استفاده برای توصیف ظاهر و قالب‌بندی یک وب سایت نوشته شده در زبان نشانه گذاری، (مانند HTML) است. از آن به عنوان آرایش برای صفحه وب خود استفاده می‌کنیم. ؛) + +اما ما نمی‌خواهیم دوباره از ابتدا شروع کنیم، درست است؟ یک بار دیگر، ما از چیزی که برنامه‌نویسان در اینترنت به صورت رایگان منتشر کرده‌اند استفاده می‌کنیم. همانطور که می‌دانید اختراع دوباره چرخ جالب نیست. + +## با بوت‌ استرپ شروع کنیم! + +بوت استرپ یکی از محبوب‌ترین چارچوب‌های HTML و CSS برای توسعه وب سایت‌های زیبا است: https://getbootstrap.com/ + +توسط برنامه نویسانی که در توییتر کار می کردند نوشته شده بود. در حال حاضر توسط داوطلبانی از سراسر جهان توسعه یافته است! + +## نصب بوت استرپ + +برای نصب بوت استرپ فایل `.html` را در ویرایشگر متن باز کنید و به بخش `` خط‌های زیر را اضافه کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +این کار هیچ فایلی به پروژه شما اضافه نمی‌کند. این کد به فایلی که در اینترنت وجود دارد اشاره می‌کند. بنابراین به پیش بروید وبسایت خود را باز کنید و صفحه را ریفرش کنید. بفرمایید! + +![تصویر 14.1](images/bootstrap1.png) + +ظاهری قشنگ‌تر از قبل! + +## فایل‌های ایستا در جنگو + +در نهایت نگاهی دقیق‌تر به فایل‌هایی بیاندازیم که به آن‌ها فایل ایستا یا ثابت **static files** می‌گوییم. فایل‌های ایستا شامل تمامی فایل‌های CSS و عکس‌ها می‌باشند. محتوای آن‌ها به متن درخواست بستگی ندارد و برای هر کاربر یکسان خواهد بود. + +### فایل‌های ایستا کجای جنگو قرار میگیرند + +جنگو به هرحال می‌داند که فایل‌های ثابت در اپلیکیشن پیش ساخته "admin" کجا قرار گرفته‌اند. حالا ما لازم داریم تا چند فایل ثابت را به اپلیکیشن `blog` خودمان اضافه کنیم. + +ما این کار را با ایجاد یک پوشه به نام `static` در داخل برنامه وبلاگ انجام می‌دهیم: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + + +جنگو به طور خودکار هر پوشه‌ای با نام "static" را در پوشه اپلیکیشن‌های شما پیدا خواهد کرد. پس از آن قادر است از محتوای آن‌ها به عنوان فایل ایستا استفاده کند. + +## اولین فایل CSS شما! + +اکنون یک فایل CSS ایجاد کنیم تا سلیقه خود را به صفحه وب تان اضافه کنیم. یک پوشه جدید با نام `css` در داخل پوشه `static` بسازید. سپس در داخل این پوشه `css`، یک فایل جدید با نام `blog.css` ایجاد کنید. آماده شد؟ + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +حالا وقت کمی CSS نوشتن است! فایل `blog/static/css/blog.css` را در ویرایشگر کد خود باز کنید. + +ما در اینجا، سفارشی سازی و یادگیری CSS را خیلی عمیق بررسی نخواهیم کرد. اگر بخواهید بیشتر در باره CSS بدانید، یک توصیه برای یک دوره رایگان، در پایین این صفحه وجود دارد. + +اما بیایید حداقل کمی به آن بپردازیم. شاید بتوانیم رنگ header هایمان را تغییر دهیم؟ برای درک رنگ‌ها، رایانه‌ها از کدهای ویژه استفاده می‌کنند. این کدها با `#` شروع می‌شوند و به ترتیب شامل 6 حرف (A-F) و اعداد (0-9) هستند. به عنان مثال، کد رنگ آبی `FF0000#` است. شما می‌توانید در آدرس http://www.colorpicker.com:/ کد رنگ بسیاری از رنگ‌ها را پیدا کنید. شما همچنین ممکن است از [رنگ‌های از پیش تعریف شده](http://www.w3schools.com/colors/colors_names.asp) از جمله `قرمز` و `سبز` استفاده کنید. + +در فایل ` blog/static/css/blog.css ` کد زیر را اضافه کنید: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` انتخابگر یا selector در یک فایل CSS است. به این معنی که ما درحال تنظیم کردن فرمت هر عنصر `a` هستیم که در داخل یک بخش `h1` باشد. `h2 a` نیز دقیقا مانند همین کار را در بخش `h2` انجام می‌دهد. بنابراین وقتی ما چیزی شبیه یک `

link

` داریم، فرمت `h1 a` اعمال خواهد شد. در این مورد، ما می‌خواهیم رنگ آن را به `#C25100` تغییر دهیم که رنگ نارنجی تیره است. یا اینکه می‌توانید رنگ مورد علاقه خودتان را بگذارید فقط مطمئن باشید با رنگ سفید زمینه، کنتراست کافی داشته باشد! + +در یک فایل CSS،ما فرمت‌ بخش‌های مختلف یک فایل HTML را مشخص می‌کنیم. اولین روش شناسایی هر عنصر یا element، نام عنصر است. ممکن است این عناصر را به عنوان تگ tag از بخش HTML بخاطر داشته باشید. عناصری مانند ` a `، ` h1 `، و `body` همه نمونه‌هایی از نام یک عنصر هستند. ما همچنین عناصر را با ویژگی‌هایی مانند `class` یا `id` نیز شناسایی می‌کنیم. class و id نام‌هایی هستند که شما خودتان به عناصر مختلف نسبت می‌دهید. class ها، گروه‌های عناصر را تعریف می‌کنند و id ها به یک عنصر خاص اشاره می‌کنند. برای مثال، می‌توانید عنصر زیر را با استفاده از نام تگ، یعنی ` a`، نام کلاس ` external_link ` یا به کمک آیدی `link_to_wiki_page ` شناسایی کنید: + +```html + +``` + +شما می‌توانید در این موارد بیشتر بخوانید [CSS Selectors at w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +ما همچنین باید به قالب HTML خودمان بگوییم که یک فایل CSS اضافه کرده‌ایم. فایل `blog/templates/blog/post_list.html` را در ویرایشگر کد باز کنید و خط زیر را به ابتدای آن اضافه کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +ما فقط فایل‌های ثابت یا static را در اینجا بارگیری می‌کنیم. :) بین برچسب `` و ``، پس از پیوند به فایل‌های بوت استرپ، این خط را اضافه کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +مرورگر فایل‌ها را به ترتیب می‌خواند، بنابراین ما باید مطمئن شویم که این خط در جای مناسب قرار گرفته است. در غیر این صورت کد در فایل شما ممکن است توسط کد در فایل‌های بوت استرپ لغو شود. ما فقط به قالب HTML مان می‌گوییم که فایل CSS کجا قرار دارد. + +اکنون فایل شما باید مانند این باشد: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +خب، حالا فایل را ذخیره کنید و صفحه را دوباره بارگذاری کنید! + +![تصویر 14.2](images/color2.png) + +کارت خوب بود! شاید بخواهیم کمی حاشیه سمت چپ صفحه وب مان را افزایش دهیم؟ بیایید این را امتحان کنیم! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { padding-left: 15px; } +``` + +این کد را به فایل CSS خود اضافه کنید، و ببینید چگونه کار می‌کند! + +![تصویر 14.3](images/margin2.png) + +شاید ما بتوانیم فونت را در هدر صفحه‌مان سفارشی کنیم؟ این قطعه کد را در بخش `` فایل `blog/templates/blog/post_list.html` وارد کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +همانند قبل ترتیب قرار دادن لینک‌ها را چک کنید و این خط را قبل پیوند به `blog/static/css/blog.css` قرار دهید. این خط، فونتی به نام *Lobster* را از مجموعه فونت‌های گوگل فراخوانی می‌کند (https://www.google.com/fonts). + +در فایل CSS به آدرس `blog/static/css/blog.css`، بخش تعریف عنصر ` h1 a ` را پیدا کنید (قطعه کدی که بین `{` و `}` قرار دارد). حالا خط `font-family: 'Lobster';` را بین آکولادها اضافه کنید و صفحه وب را دوباره بارگیری کنید: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { color: #C25100; font-family: 'Lobster'; } +``` + +![تصویر 14.3](images/font.png) + +عالی! + +همانطور که در بالا ذکر شد CSS دارای مفهوم کلاس است. کلاس‌ها به شما اجازه می‌دهند تا بخشی از کد HTML را نامگذاری کنید و تنها فرمت این قسمت از کد را تغییر بدهید، بدون اینکه به سایر قسمت‌ها آسیبی برسد. کلاس‌ها می‌توانند فوق‌العاده مفید باشند! شاید شما دو div دارید که کاری متفاوت انجام می دهند (مانند header و post). یک کلاس می‌تواند به شما کمک کند آن‌ها را متفاوت نگاه کنید. + +به همین ترتیب جلو بروید و برخی بخش‌های کد HTML را نام گذاری کنید. بخش `header` را که شامل header وب‌سایت شماست با کد زیر جابجا کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+

Django Girls Blog

+
+
+``` + +و اکنون کلاس `post` را به `article` اضافه کنید که حاوی یک پست وبلاگ است. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +ما اکنون بلوک‌های معرف را به انتخاب‌گرهای مختلف اضافه خواهیم کرد. انتخابگرهایی که با `.` آغاز می‌شوند مربوط به کلاس‌ها هستند. آموزش‌ها و توضیحات بسیار خوبی درباره CSS در اینترنت وجود دارد که می‌تواند به شما در درک کد زیر کمک کند. حالا این قطعه کد را در فایل `blog/static/css/blog.css` کپی کنید: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-default, +.btn-default:visited { + color: #C25100; + background: none; + border-color: #C25100; +} + +.btn-default:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +سپس کد HTML زیر را که نمایش پست‌ها با اسامی کلاس‌ها را نشان می‌دهد: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +در فایل `blog/templates/blog/post_list.html` با قطعه کد زیر عوض کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +این فایل‎‌ها را ذخیره کنید و وبسایت خود را دوباره بارگیری کنید. + +![تصویر 14.4](images/final.png) + +یووهو! به نظر عالی می‌آید، اینطور نیست؟ به کدی که اضافه کردیم نگاه کنید تا محلی که کلاس ها را در HTML اضافه و در CSS استفاده کرده ایم پیدا کنید. اگر بخواهید نوشته تاریخ ها را فیروزه ای رنگ کنید کجا را باید تغییر دهید؟ + +نگران نباشید کمی با این CSS کار کنید و سعی کنید برخی از چیزها را تغییر دهید. بازی با CSS می‌تواند به شما کمک کند که بفهمید هر بخش چگونه کار می‌کند. اگر چیزی را خراب کردید، نگران نباشید، همیشه می‌توانید این تغییرات را به حالت قبل برگردانید! + +ما اکیداً گذراندن دوره‌های آموزشی آنلاین "Basic HTML & HTML5" و "Basic CSS" را در [freeCodeCamp](https://learn.freecodecamp.org/) توصیه می‌کنیم. این دوره‌ها به شما کمک خواهد کرد تا همه چیزهایی که برای زیباتر کردن وبسایت خود با HTML و CSS لازم دارید یاد بگیرید. + +برای فصل بعدی آماده هستید؟! :) \ No newline at end of file diff --git a/fa/css/images/bootstrap1.png b/fa/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/fa/css/images/bootstrap1.png differ diff --git a/fa/css/images/color2.png b/fa/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/fa/css/images/color2.png differ diff --git a/fa/css/images/final.png b/fa/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/fa/css/images/final.png differ diff --git a/fa/css/images/font.png b/fa/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/fa/css/images/font.png differ diff --git a/fa/css/images/margin2.png b/fa/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/fa/css/images/margin2.png differ diff --git a/fa/deploy/README.md b/fa/deploy/README.md new file mode 100644 index 00000000000..50e56b4341d --- /dev/null +++ b/fa/deploy/README.md @@ -0,0 +1,246 @@ +# مرحله منتشر کردن! + +> **توجه داشته باشید** که قسمت‌های پیش رو ممکن است کمی سخت به نظر برسد. نا امید نشوید و این بخش را تا آخر ادامه دهید، یکی از مهم‌ترین قسمت‌های توسعه وب سایت منتشرکردن یا Deploy می‌باشد. این فصل در وسط آموزش قرار گرفته است، بنابراین مربی شما می‌تواندبه شما در راه اندازی آنلاین وبسایتتان کمک کند. این به این معنی است که شما می‌توانید به تنهایی ادامه‌ی تمرین خود را به اتمام برسانید حتی اگر زمان کارگاه به پایان برسد. + +تا به اینجا وب سایت شما فقط در رایانه شما قابل مشاهده است. حالا شما یاد خواهید گرفت که چگونه آن را دیپلوی کنید! دیپلوی یعنی فرآیند انتشار پروژه شما در اینترنت، تا سایرین بتوانند در نهایت پروژه شما را ببینند. :) + +همانطور که یاد گرفتید، وب سایت باید بر یک سرور جای بگیرد. سرورهای زیادی در اینترنت وجود دارد، ما قصد داریم از [PythonAnywhere](https://www.pythonanywhere.com/) استفاده نماییم. PythonAnywhere برای پروژه‌های کوچک که بازدید‌کنندگان خیلی زیادی ندارند رایگان است بنابراین در حال حاضر برای شما مناسب است. + +سرویس خارجی دیگری که ما استفاده می‌کنیم [گیت هاب](https://www.github.com) است که سرویس میزبانی کد است. سرویس‌های دیگری نیز وجود دارد، اما تقریباً این روزها همه برنامه نویسان اکانت گیت هاب دارند و الان شما هم خواهید داشت! + +این سه مکان برای شما مهم خواهد بود. کامپیوتر محلی شما جایی است که شما در حال توسعه و تست هستید. هنگامی که شما تغییرات را اعمال کردید، یک نسخه از برنامه خود را در گیت هاب قرار می‌دهید. وب سایت شما در PythonAnywhere خواهد بود و شما آن را با یک کپی جدید از کدهای خود که از گیت هاب گرفته‌اید، به روز رسانی خواهید کرد. + +# گیت + +> **نکته** اگر بخش [نصب و راه‌اندازی](../installation/README.md) را انجام داده‌اید، نیازی نیست که دوباره این بخش را انجام دهید. می‌توانید از این بخش رد شده و ساختن مخزن گیت را شروع کنید. + +{% include "/deploy/install_git.md" %} + +## ایجاد مخزن گیت + +نرم افزار گیت تغییرات یک مجموعه فایل که در جایی به نام مخزن (به طور مخفف repo) وجود دارند را ردگیری می‌کند. بیایید یکی برای پروژه خودمان بسازیم. کنسول خود را باز کنید و این دستورات را در پوشه `djangogirls` اجرا کنید: + +> ** توجه ** قبل از شروع به کار موقعیت پوشه‌ای را که در آن هستید با دستور `pwd` (در سیستم عامل macOS / Linux) یا `cd` (در ویندوز) بفهمید. شما باید در پوشه `djangogirls` باشید. + +{% filename %}خط فرمان{% 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 + + +راه اندازی مخزن گیت کاری است که ما برای هر پرژه فقط یک بار انجام می‌دهیم (لازم نیست مجدداً نام کاربری و ایمیل را وارد کنید). + +گیت هاب تغییرات روی تمام فایل‌ها و پوشه های زیرمجموعه این پوشه را پیگیری می‌کند، اما برخی فایل‌هایی که می‌خواهیم آن‌ها را نادیده بگیریم نیز وجود دارند. ما این کار را با ایجاد یک فایل به نام `.gitignore` در پوشه پایه انجام می‌دهیم. ویرایشگر خود را باز کنید و یک فایل جدید با محتویات زیر ایجاد کنید: + +{% filename %}.gitignore{% endfilename %} + + # 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 + + +و آن را در پوشه "djangogirls" با نام `.gitignore` ذخیره کنید. + +> ** توجه** نقطه در ابتدای نام فایل مهم است! اگر مشکلی در ایجاد آن دارید (به عنوان مثال Mac شما دوست ندارد فایل هایی را بسازید که با نقطه شروع می‌شود)، پس از ویژگی save as استفاده کنید که به کمک آن می‌توانید این نوع فایل‌ها را ذخیره کنید. و مطمئن باشید که هیچ پسوندی مانند `.txt` یا `.py` در انتهای فایل نگذاشته باشید نام این فایل فقط باید `.gitignore` باشد تا توسط Git شناسایی شود. لینوکس و MacOS با فایل‌هایی که با `.` شروع شوند (مانند `.gitignore`) مانند یک فایل مخفی شده برخورد می‌کند و دستور `ls` به طور معمول آن‌ها را نشان نمی‌دهد. به جای آن از دستور `ls -a` برای دیدن فایل `.gitignore` استفاده کنید. +> +> **توجه** یکی از فایل‌هایی که در فایل `.gitignore` مشخص شده است فایل `db.sqlite3` است. این فایل پایگاه داده محلی شماست جایی که تمام اطلاعات مربوط به کاربر و پست‌های وبلاگ شما در آن ذخیره می‌شود. ما از روش استاندارد برنامه نویسی استفاده خواهیم کرد به این معنی که ما از پایگاه داده‌های متفاوتی برای توسعه بر روی کامپیوتر محلی و سپس وبسایت اصلی که روی PythonAnywhere هست استفاده خواهیم کرد. پایگاه داده بر روی PythonAnywhere می‌تواند SQLite باشد همانند آنچه بر روی کامپیوتر خود از آن استفاده می‌کنید اما معمولاً از پایگاه داده MySQL برای وبسایت اصلی استفاده می‌کنیم که می‌تواند تعداد بسیار زیاد بازدیدکننده از سایت را مدیریت کند. علاوه بر این حذف کردن فایل SQLite در کپی مربوط به GitHub به این معنی است که تمام پست‌های وبلاگی و superuser هایی که تا الان ساخته‌اید فقط روی کامپیوتر خودتان مورد استفاده خواهد بود و برای محیط اصلی وبسایت باید دوباره آن‌ها را بسازید. شما باید از پایگاه داده محلی خود به عنوان یک زمین بازی خوب استفاده کنید که در آن می‌توانید چیزهای مختلف را آزمایش کنید و نگرانی پاک کردن پست‌های اصلی از وبلاگ را نداشته باشید. + +ایده خوبی است که همیشه قبل از زدن دستور `git add` یا هر وقت که مطمئن نیستید چه چیزی تغییر کرده، دستور `git status` را بزنید. این کار کمک می‌کند که از هر نوع غافلگیری مانند اضافه کردن یا commit کردن فایل اشتباه، جلوگیری شود. دستور `git status` اطلاعاتی در مورد فایل‌های ردگیری نشده untracked، اصلاح شده modified، استیج شده staged و نیز درمورد وضعیت شاخه ای که در آن هستیم می‌دهد. خروجی باید شبیه به موارد زیر باشد: + +{% filename %}خط فرمان{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +و در نهایت ما تغییرات را ذخیره می‌کنیم. به کنسول خود بروید و این دستورات را اجرا کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ 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 + + +## کدهای خود را به GitHub انتقال دهید + +به [GitHub.com](https://www.github.com) بروید و یک حساب کاربری رایگان برای خود بسازید. اگر این کار را در کارگاه برای اولین بار انجام می‌دهید حواستان باشد که رمز عبور خود را حفظ کنید یا به نر‌م‌افزار مدیریت رمز عبور خود بسپرید. + +حالا یک مخزن یا repository بسازید و نام آن را "my-first-blog" بگذارید. گزینه "initialize with a README" را علامت نخورده باقی بگذارید و هم چنین گزینه .gitignore را هم خالی بگذارید (ما بعداً آن را اضافه خواهیم کرد). هم چنین گزینه License را None بگذارید. + +![](images/new_github_repo.png) + +> **توجه** نام `my-first-blog` مهم است. شما می‌توانید اسم دیگری انتخاب کنید اما از این اسم زیاد استفاده خواهیم کرد و به یاد داشته باشید که اگر اسم دیگری گذاشتید هرجا لازم بود اسم انتخابی خود را استفاده کنید. احتمالاً راحت‌تر است که از همین اسم `my-first-blog` استفاده نمایید. + +در صفحه بعد شما URL مخزن خود را خواهید دید که در برخی دستورات بعدی از آن استفاده خواهیم کرد: + +![](images/github_get_repo_url_screenshot.png) + +حالا وقت آن است که مخزن Git روی کامپیوتر شما را به مخزن موجود در Github وصل کنیم. + +خط زیر را در کنسول خود تایپ کنید (`` را با نام کاربری و گذر واژه خود که در GitHub تعریف کرده اید عوض کنید. علامت‌های کوچکتر و بزرگتر را استفاده نکنید. URL باید دقیقاً همان آدرسی باشد که کمی قبل‌تر دیده‌اید): + +{% filename %}خط فرمان{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +وقتی شما فایلی را به GitHub می‌فرستید یا push می‌کنید نام کاربری و گذرواژه از شما پرسیده می‌شود (ممکن است در همان کنسول خط فرمان یا در یک پنجره جدید از شما پرسیده شود) پس از وارد کردن اطلاعات ورود، چیزی شبیه به این خواهید دید: + +{% filename %}خط فرمان{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +کد شما الان روی GitHub است. بروید و آن را کنترل کنید! خواهید دید که کدهای شما در جای خوبی است. پروژه [Django](https://github.com/django/django)، دوره آموزشی [Django Girls](https://github.com/DjangoGirls/tutorial) و بسیاری نرم‌افزارهای متن باز فوق العاده دیگر هم، کدهایشان را در GitHub قرار داده‌اند. :) + +# تنظیم کردن وبلاگ بر روی PythonAnywhere + +## یک حساب کاربری بر روی PythonAnywhere بسازید + +> **توجه** شما ممکن است کمی قبل‌تر و در مراحل نصب یک حساب کاربری در PythonAnywhere درست کرده باشید. اگر چنین است نیاز نیست که حساب کاربری دیگری بسازید. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## وبسایت‌مان را بر روی PythonAnywhere تنظیم کنیم + +با کلیک کردن بر روی لوگو و انتخاب گزینه شروع یک کنسول "Bash" به [داشبورد PythonAnywhere ](https://www.pythonanywhere.com/) بروید. این محیط خط فرمان مخصوص PythonAnywhere است، شبیه آنچه در کامپیوتر خود دارید. + +![بخش 'New Console' در صفحه وبسایت PythonAnywhere با دکمه‌ای برای 'bash'](images/pythonanywhere_bash_console.png) + +> **توجه** PythonAnywhere بر مبنای لینوکس است، بنابراین اگر روی ویندوز کار می‌کنید این محیط خط فرمان با آنچه در ویندوز دارید کمی متفاوت است. + +منتشر کردن یک اپلیکیشن تحت وب بر روی PythonAnywhere شامل آوردن کدها از GitHub و تنظیم کردن PythonAnywhere برای تشخیص آن و اجرا کردنش به عنوان یک برنامه تحت وب است. روش‌های غیرخودکار برای این کار وجود دارد اما PythonAnywhere یک ابزار کمکی دارد که همه این کارها را برای شما انجام می‌دهد. اجازه بدهید اول از همه این ابزار را نصب کنیم: + +{% filename %}خط فرمان PythonAnywhere {% endfilename %} + + $ pip install --user pythonanywhere + + +این دستور باید چیزهایی شبیه به `Collecting pythonanywhere` بر روی صفحه نشان دهد و در انتها نیز این پیغام `Successfully installed (...) pythonanywhere- (...)` نمایش داده خواهد شد. + +حالا ما برنامه کمکی را اجرا می‌کنیم تا به طور اتوماتیک برنامه ما را از GitHub بخواند. خطوط زیر را در کنسول PythonAnywhere بنویسید (فراموش نکنید که نام کاربری GitHub را به جای `` بنویسید در نتیجه URL شما مانند URL اختصاصی شما در GitHub میشود): + +{% filename %}خط فرمان PythonAnywhere {% endfilename %} + + $ pa_autoconfigure_django.py --python=3.10 https://github.com//my-first-blog.git + + +همینطور که به اجراشدن آن نگاه می‌کنید می‌توانید بفهمید که چه کاری انجام می‌دهد: + +- دانلود کردن کد شما از GitHub +- ساختن یک محیط مجازی virtualenv بر روی PythonAnywhere شبیه آنچه که بر روی کامپیوتر خود داشتید +- به روزرسانی برخی از تنظیمات شما با تنظیمات مورد نیاز برای انتشار +- تنظیم کردن یک دیتابیس در PythonAnywhere با استفاده از دستور `manage.py migrate` +- تنظیم کردن فایل‌های ثابت شما (بعداً درمورد آن‌ها یاد خواهیم گرفت) +- و در نهایت تنظیم کردن PythonAnywhere برای ارائه اپلیکیشن شما از طریق API خودش + +در PythonAnywhere تمام این مراحل اتوماتیک انجام می‌شود اما برای سایر سرورها شما باید دقیقا تمام این اقدامات را انجام دهید. + +مهم‌ترین چیزی که اینجا باید به آن توجه کنید آن است که پایگاه داده شما در اینجا از چیزی که بر روی کامپیوتر خود دارید کاملا مستقل است در نتیجه ممکن است اینجا حساب کاربری ادمین یا پست‌های متفاوتی نسبت به کامپیوتر شخصی خود داشته باشید. در نتیجه همان طور که بر روی کامپیوتر خودمان انجام داده ایم باید یک کاربر admin با دستور `createsuperuser` بسازیم. PythonAnywhere به صورت اتوماتیک محیط مجازی یا virtulenv شما را فعال کرده است درنتیجه تنها چیزی که لازم دارید این است که خط زیر را اجرا کنید: + +{% filename %}خط فرمان Python Anywhere{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +مشخصات کاربر ادمین را وارد کنید. می‌توانید این اطلاعات را شبیه اطلاعات ادمین که قبلاً در کامپیوتر خود زده‌اید در نظر بگیرید مگر اینکه بخواهید گذره واژه امن‌تری در PythonAnywhere در نظر بگیرید. + +حالا اگر بخواهید می‌‌توانید نگاهی به کدهای خود در PythonAnywhere بیندازید دستور `ls` را بزنید: + +{% filename %}خط فرمان PythonAnywhere{% 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.pytests.py static + templates views.py + + +علاوه بر این می‌توانید به صفحه File بروید و به کمک مرورگر فایل پیش‌ساخته که در PythonAnywhere قرار داده شده به فایل‌های خود نگاهی بیاندازید. از صفحه کنسول و به کمک کلید منو در گوشه بالا و سمت راست، می توانید به سایر صفحات PythonAnywhere بروید. وقتی شما در یک صفحه هستید، نزدیک به بالای صفحه، لینک‌هایی به سایر صفحات وجود دارد. + +## اکنون آنلاین هستید! + +وب‌سایت شما باید الان به طور عمومی در اینترنت منتشر شده باشد! از طریق صفحه "Web" در PythonAnywhere لینک به این صفحه را پیدا کنید. شما می‌توانید این صفحه را با هر کسی به اشتراک بگذارید. :) + +> **توجه** این یک تمرین ابتدایی است و ما در هنگام انتشار، برخی میانبرهایی را استفاده کرده‌ایم که از جنبه امنیت وبسایت، روش‌های ایده‌آلی نیستند. هرگاه تصمیم گرفتید که این پروژه یا پروژه دیگری را بسازید، باید به راهنمایی‌های امنیتی موجود در [چک لیست انتشار جنگو](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) نگاهی بیندازید. + +## نکات عیب‌یابی + +اگر شما با خطایی در هنگام اجرا کردن دستور `pa_autoconfigure_django.py` مواجه شدید ممکن است به دلایل زیر باشد: + +- فراموشی در ساخت توکن API در PythonAnywhere. +- اشتباه در URL مربوط به GitHub +- اگر خطایی با این مضمون *"Could not find your settings.py"* مشاهده کردید، احتمالاً تمام فایل‌های خود را به Git اضافه نکرده‌اید یا همه آن‌ها را (به کمک دستور push) به GitHub نفرستاده‌اید. به بخش Git در بالا نگاهی دوباره بیندازید +- اگر قبلاً حساب کاربری در PythonAnywhere داشته‌اید و خطای collectstatic دریافت می‌کنید احتمالاً نسخه‌های قدیمی‌تر SQLite (مثلاً 3.8.2) را در حساب کاربری خود دارید. در این موارد، یک حساب کاربری جدید بسازید و دستورات مربوط به PythonAnywhere را دوباره بزنید. + +اگر هنگام مراجعه به وبسایت خطایی مشاهده کردید اولین جا برای بررسی و عیب یابی نگاه کردن به بخش **error log** است. حتماً در صفحه ["Web"](https://www.pythonanywhere.com/web_app_setup/) در PythonAnywhere لینکی به این بخش پیدا خواهید کرد. نگاه کنید که آیا پیغام خطایی در این صفحه وجود دارد؛ آخرین پیغام‌ها در پایین‌ترین خط ها است. + +علاوه بر این دستورالعمل‌های عیب‌یابی عمومی‌تری هم در [صفحه راهنمای سایت PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError) وجود دارد. + +و به یاد داشته باشید که مربی شما اینجاست تا به شما کمک کند! + +# وبسایت خود را بررسی کنید! + +صفحه اصلی سایت شما باید "It worked" را نشان دهد همانطور که بر روی کامپیوتر خودتان کار می‌کرد. سعی کنید ` /admin/ ` را به انتهای آدرس اینترنتی اضافه کنید و به سایت مدیریت برسید. با نام کاربری و گذرواژه خود وارد شوید خواهید دید که می‌توانید پست جدیدی ایجاد کنید. به یاد داشته باشید که پست‌هایی که در پایگاه داده کامپیوتر خود ایجاد کرده اید بر روی وبسایت آنلاین شما منتقل نشده است. + +وقتی چند پست جدید ایجاد کردید به تنظیمات بر روی کامپیوتر خود (local و نه تنظیمات روی PythonAnywhere) برگردید. از اینجا می‌توانید تنظیمات محلی را تغییر دهید. این یک روش رایج در توسعه وبسایت است؛ تغییرات را روی کامپیوتر خود اعمال کنید، آن‌ها را به GitHub بفرستید و سپس این تغییرات را از گیتهاب، بر روی وب سرور کپی کنید. این روش کمک می‌کند که بدون ایجاد خرابی در وبسایت آنلاین بتوان آن را به روز رسانی کرد. جالب نیست؟ + +یک *خسته نباشید* حسابی به خودتان بگویید! راه اندازی سرور یکی از مهارتی‌ترین بخش‌های توسعه وبسایت است و گاهی برای برخی افراد روزها زمان می‌برد تا بتوانند آن را راه اندازی کنند. اما شما توانستید سایت خود را بر روی اینترنت واقعی راه اندازی کنید! \ No newline at end of file diff --git a/fa/deploy/images/github_get_repo_url_screenshot.png b/fa/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/fa/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/fa/deploy/images/new_github_repo.png b/fa/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/fa/deploy/images/new_github_repo.png differ diff --git a/fa/deploy/images/pythonanywhere_account.png b/fa/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/fa/deploy/images/pythonanywhere_account.png differ diff --git a/fa/deploy/images/pythonanywhere_bash_console.png b/fa/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/fa/deploy/images/pythonanywhere_bash_console.png differ diff --git a/fa/deploy/images/pythonanywhere_beginner_account_button.png b/fa/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/fa/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/fa/deploy/images/pythonanywhere_create_api_token.png b/fa/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/fa/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/fa/deploy/install_git.md b/fa/deploy/install_git.md new file mode 100644 index 00000000000..73a95657347 --- /dev/null +++ b/fa/deploy/install_git.md @@ -0,0 +1,52 @@ +گیت یک "سیستم کنترل نسخه" است که توسط بسیاری از برنامه‌نویسان مورد استفاده قرار می‌گیرد. این نرم‌افزار می‌تواند تغییرات روی فایل‌ها را در طول زمان دنبال کند بنابراین می‌توانید نسخه خاصی را بعداً بازیابی کنید. این قابلیت تقریباً شبیه ابزار "track changes" در برنامه‌های ویرایش متن (مانند Microsoft Word و LibreOffice Writer) است اما به مراتب از آن‌ها قویتر است. + +## نصب گیت + + + +برای نصب گیت می‌توانید آن را از [git-scm.com](https://git-scm.com/) دانلود کنید. همه جا میتوانید کلید next را بزنید به غیر از دو جا: جایی که در مورد ویرایشگر متن از شما می‌پرسد شما باید ویرایشگر Nano را انتخاب کنید و در مرحله‌ای که عنوان آن "Adjusting your PATH environment" است، گزینه "Use Git and optional Unix tools from the Windows Command Prompt" (گزینه آخر) را انتخاب کنید. در بقیه موارد، پیش فرض‌ها مناسب هستند. گزینه "Checkout Windows-style, commit Unix-style line endings" را انتخاب کنید. + +فراموش نکنید که بعد از اینکه نصب به پایان رسید command prompt یا PowerShell را از نو باز کنید. + + + +گیت را از [git-scm.com](https://git-scm.com/) دانلود کنید و دستورالعمل‌ها را دنبال کنید. + +> ** نکته **اگر شما از OS X نسخه 10.6، 10.7 یا 10.8 استفاده می‌کنید باید GIT را از اینجا نصب کنید: [ نصب Git برای 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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/fa/deploy/signup_pythonanywhere.md b/fa/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..919b24ce459 --- /dev/null +++ b/fa/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere سرویسی است که برای اجرای کدهای نوشته شده با پایتون در سرورهای ابری استفاده می‌شود. ما از آن برای میزبانی سایت خود و قرار دادن آن بر روی اینترنت استفاده خواهیم کرد. + +بلاگی که در حال ساختن آن هستیم را بر روی PythonAnywhere قرار خواهیم داد. برای استفاده از سرویس PythonAnywhere میتوانید به صورت رایگان به عنوان تازه کار در آن ثبت نام کنید (ثبت نام به صورت تازه کار برای کار ما کفایت می کند. نیازی به ورود کارت اعتباری نیست). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![صفحه ثبت نام PythonAnywhere دارای امکان ثبت نام رایگان برای کاربران تازه کار می باشد](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **نکته:** هنگام انتخاب نام کاربری خود به این نکته توجه داشته باشید که آدرس بلاگ شما با نام کاربری شما به صورت `yourusername.pythonanywhere.com` مشخص خواهد شد. بنابراین علاوه بر استفاده از نام خود به عنوان نام کاربری، می‌توانید از یک اسم دلخواه برای بلاگ خود استفاده کنید. هچینین رمز عبور خود را به خاطر داشته باشید. + +## ایجاد API توکن PythonAnywhere + +این کار را فقط یکبار هنگام شروع انجام خواهید داد. پس از اینکه در PythonAnywhere ثبت نام کردید به داشبورد خود هدایت خواهید شد. در سمت راست بالای صفحه بر روی Account خود کلیک کنید: + +![لینک Account در سمت راست بالای صفحه](../deploy/images/pythonanywhere_account.png) + +سپس به تب "API token" رفته و "Create new API token" را بزنید. + +![تب API token در صفحه Account](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/fa/django/README.md b/fa/django/README.md new file mode 100644 index 00000000000..9870bd4f5a8 --- /dev/null +++ b/fa/django/README.md @@ -0,0 +1,27 @@ +# جنگو چیست؟ + +جنگو (*جَنگو*) یک فریم‌ورک تحت وب رایگان و متن بازopen source است که با زبان پایتون نوشته شده‌است. یک فریم ورک تحت وب، دارای مجموعه‌ای از ابزارهاست که به شما کمک می‌کنند تا یک وب سایت را سریع‌تر و راحت‌تر توسعه دهید. + +هنگامی که در حال ساخت یک وب سایت هستید، شما همیشه به مجموعه ای از اجزای مشابه نیاز دارید. به شرح زیر: یک روش برای کنترل کردن احراز هویت کاربر (ثبت نام ، ورود به حساب کاربری ، خروج از حساب کاربری) ، یک پنل مدیریت برای وب سایت خود ، فرم ها ، روشی برای آپلود فایل ها و غیره. + +خوشبختانه خیلی وقت پیش، افرادی متوجه این موضوع شدند که هنگام ساختن یک سایت جدید، توسعه دهندگان وب با مشکلات مشابهی روبرو می‌شوند، بنابراین آنها تیمی را تشکیل دادند که به راحتی اجزای کار را در اختیار شما قرار می‌دهد که شما بتوانید به راحتی از آنها استفاده کنید ودر نهایت فریم ورک‌ها را ساختند (جنگو یکی از آن هاست). + +فریم ورکها به این دلیل به وجود آمده اند که دیگر نیازی نباشد شما از اول چرخ را بسازید و به شما کمک می کند تا به راحتی سایت خود را بسازید. + +## چرا شما به یک فریم ورک نیاز دارید؟ + +برای درک بهتر چگونگی عملکرد جنگو لازم است نگاه دقیق‌تری به سرورها بیندازیم. اولین چیزی که سرور نیاز دارد بداند این است که شما می‌خواهید سرور برای شما یک وب پیج را ارائه کند. + +حالا یک صندوق پست (port) را تصور کنید که منتظر دریافت نامه‌ها (requests) است. این کار توسط وب سرور انجام خواهد گرفت. وب سرور نامه را خوانده و پاسخ مربوطه را به وب پیج می فرستد. اما هنگامی که شما می‌خواهید چیزی را ارسال کنید، به محتوا احتیاج دارید. و جنگو همانی است که به شما برای ایجاد محتوا کمک می‌کند. + +## زمانی که فردی از سرور شما یک وبسایت را درخواست می‌کند، چه اتفاقی می‌افتد؟ + +هنگامی که یک درخواست به وب سرور می آید، به جنگو انتقال داده می شود و جنگو تلاش می‌کند بفهمد که دقیقاً چه چیزی درخواست شده است. در ابتدا آدرس وب پیج را می‌گیرد و سعی می‌کند تشخیص دهد چه کاری باید انجام دهد. این بخش توسط **urlresolver** جنگو انجام می‌گیرد (آدرس وبسایت URL یا Uniform Resource Locator نامیده می‌شود به این دلیل *urlresolver* یا تجزیه کننده URL نام با مسمایی است). خیلی سیستم هوشمندی نیست فقط یک لیست از الگوها را می‌گیرد و سعی می‌کند درخواست را با یکی از این الگوها مطابقت دهد. جنگو الگوها را از بالا به پایین بررسی می‌کند و اگر الگویی مشابه درخواست پیدا کرد، آن درخواست را به تابع مرتبط با آن الگو (که * view * نامیده می‌شود) ارسال می‌کند. + +یک پستچی را با یک نامه تصور کنید. او در خیابان راه می‌رود و پلاک هر خانه را با پلاک نوشته شده روی نامه مقایسه می‌کند. اگر مطابقت داشته باشد، نامه را در آنجا می گذارد. این روش کار urlresolver است! + +در تابع * view*، تمام چیزهای جالب اتفاق می‌افتد: ما می‌توانیم به یک پایگاه داده نگاه کنیم تا اطلاعاتی را جستجو کنیم. شاید کاربر درخواست تغییر در داده را داشته باشد؟ مانند درخواست‌هایی که در یک نامه فرستاده می‌شوند: "لطفا شرح شغل من را تغییر دهید". تابع * view* می‌تواند بررسی کند که آیا شما مجاز به انجام این کار هستید، و سپس شرح شغل را برای شما به روز رسانی کرده و یک پیام را ارسال کند: "انجام شد!" سپس تابع *view * یک پاسخ ایجاد می‌کند و جنگو می‌تواند آن را به مرورگر وب کاربر ارسال کند. + +توضحیحات بالا کمی ساده شده‌اند اما شما نیازی ندارید که همه ریزه‌کاری‌های فنی را بدانید. یک درک کلی از فرآیند کافی است. + +پس به جای آن که بیش از این سراغ جزییات برویم می‌خواهیم با جنگو چیزی بسازیم و بخش‌های مهم آن را در این مسیر یاد بگیریم! \ No newline at end of file diff --git a/fa/django_admin/README.md b/fa/django_admin/README.md new file mode 100644 index 00000000000..49744baefaf --- /dev/null +++ b/fa/django_admin/README.md @@ -0,0 +1,57 @@ +# پنل مدیریت در جنگو + +برای اضافه کردن، ویرایش و حذف پست‌هایی که به تازگی مدلشان را درست کرده‌ایم، از جنگو ادمین یا پنل مدیریت جنگو استفاده خواهیم کرد. + +فایل `blog/admin.py` را در ویرایشگر کد باز کنید و محتوای آن را با خطوط زیر عوض کنید: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +همانطور که می‌بینید، مدل Post را که در بخش قبل تعریف کرده بودیم فراخوانی کرده‌ایم. برای اینکه مدل ما در صفحه مدیریت نمایش داده شود، ما باید مدل را با دستور ` admin.site.register(Post)` ثبت کنیم. + +خوب، وقت آن است که به مدل Post نگاهی بیندازیم. به خاطر داشته باشید که دستور `python manage.py runserver` را در کنسول اجرا کنید تا وب سرور اجرا شود. به مرورگر خود بروید و آدرس http://127.0.0.1:8000/admin/ را تایپ کنید. شما یک صفحه لاگین را به شکل زیر می‌بینید: + +![صفحه لاگین](images/login_page2.png) + +برای ورود به سیستم، باید یک کاربر *superuser* ایجاد کنید - یک حساب کاربری که بر روی همه چیز در سایت کنترل داشته باشد. به محیط خط فرمان بازگردید و دستور `python manage.py createsuperuser` را تایپ کنید و Enter را فشار دهید. + +> به یاد داشته باشید، برای نوشتن دستورات جدید در حالی که وب سرور در حال اجرا است، یک پنجره ترمینال جدید را باز کرده و محیط مجازی خود را فعال کنید. ما در مورد نحوه نوشتن دستورات جدید در بخش **راه اندازی وب سرور** از فصل **اولین پروژه جنگو شما!** صحبت کردیم. + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +هنگام درخواست، نام کاربری (با حروف کوچک و بدون فاصله)، آدرس ایمیل و رمز عبور را تایپ کنید. **نگران نباشید که تایپ شدن گذر واژه را نمی‌بینید، همانطور است که باید باشد.** گذرواژه را وارد کنید و `Enter` را بزنید. خروجی باید مانند این باشد (که در آن نام کاربری و ایمیل خود را باید ببینید): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +به مرورگر خود برگردید و با نام کاربری که انتخاب کرده اید وارد شوید. شما باید داشبورد مدیریت جنگو را ببینید. + +![جنگو ادمین](images/django_admin3.png) + +به بخش Post بروید و کمی با آن کار کنید. پنج یا شش پست وبلاگی بسازید. نگران محتوای پست‌ها نباشید، این پست‌ها فقط به صورت محلی و برای شما نمایش داده خواهد شد. می‌توانید برای صرفه جویی در وقت از جایی مطالبی در آن کپی کنید. :) + +اطمینان حاصل کنید که حداقل برای دو یا سه پست (اما نه همه پست‌ها) تاریخ انتشار را تعیین کنید. بعداً مفید خواهد بود. + +![پنل مدیریت در جنگو](images/edit_post3.png) + +اگر می‌خواهید در مورد پنل مدیریت جنگو بیشتر بدانید باید مستندات جنگو را نگاه کنید: https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +احتمالاً الان وقت مناسبی است تا قهوه یا چای بنوشید یا چیزی برای خوردن پیدا کنید تا دوباره سرحال شوید. شما اولین مدل جنگو را ایجاد کردید و شایسته یک استراحت کوتاه هستید! \ No newline at end of file diff --git a/fa/django_admin/images/django_admin3.png b/fa/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/fa/django_admin/images/django_admin3.png differ diff --git a/fa/django_admin/images/edit_post3.png b/fa/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/fa/django_admin/images/edit_post3.png differ diff --git a/fa/django_admin/images/login_page2.png b/fa/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/fa/django_admin/images/login_page2.png differ diff --git a/fa/django_forms/README.md b/fa/django_forms/README.md new file mode 100644 index 00000000000..ef7ef374dec --- /dev/null +++ b/fa/django_forms/README.md @@ -0,0 +1,479 @@ +# فرم در جنگو + +آخرین چیزی که می‌خواهیم در وب سایت مان انجام دهیم ایجاد یک راه خوب برای اضافه کردن و ویرایش پست‌های وبلاگ است. `ادمین ` جنگو خوب است، اما سخت است که آن را زیبا یا سفارشی کنیم. با ` فرم‌ها ` ما کنترل کاملی بر روی صفحه خود داریم. تقریباً می‌توانیم هرکاری که بخواهیم انجام دهیم! + +ویژگی فرم‌ها در جنگو این است که ما می‌توانیم یکی را از ابتدا تعریف کنیم یا از `ModelForm`استفاده کنیم که نتیجه فرم را به صورت مدل ذخیره می‌کند. + +این دقیقا همان چیزی است که ما می‌خواهیم انجام دهیم: ما یک فرم را برای مدل ` Post` ایجاد خواهیم کرد. + +مانند هر بخش مهمی از جنگو، فرم‌ها فایل خود را دارند: ` forms.py`. + +ما باید یک فایل با این نام در پوشه ` blog` ایجاد کنیم. + + blog + └── forms.py + + +خوب، اجازه دهید آن را در ویرایشگر کد باز کنیم و خطوط زیر را تایپ کنیم: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +باید در ابتدا فرم‌های جنگو را فراخوانی کنیم (`from django import forms`) سپس مدل مربوط به `Post` را نیز فراخوانی کنیم(`from .models import Post`). + +` PostForm`، همانطور که احتمالاً حدس زده اید، نام فرم ما است. ما باید به جنگو بگوییم که این فرم یک نوع `ModelForm` است (بنابراین جنگو برای ما چند کار جادویی انجام خواهد داد) - `forms.ModelForm` مسئول انجام این کارها است. + +بعد از این، ما `class Meta` را داریم، جایی که به جنگو می‌گویم که کدام مدل باید برای ایجاد این فرم (`model = Post`) استفاده شود. + +در نهایت می‌توانیم بگوییم که کدام بخش‌ (بخش‌ها) باید در فرم ما باشد. در این سناریو ما تنها `title` و `text` را می‌خواهیم نشان دهیم - `author` باید فردی باشد که در حال حاضر وارد شده است (شما!) و `created_date` تاریخ ایجاد یک پست جدید است که باید به طور خودکار تنظیم شود، درست است؟ + +و همین! تمام مواردی که اکنون باید انجام دهیم، استفاده از فرم در یک *view* و نمایش آن در تمپلیت است. + +بنابراین یک بار دیگر یک لینک، یک URL، یک view و یک تمپلیت ایجاد خواهیم کرد. + +## لینک به یک صفحه با فرم + +قبل از آنکه لینک را اضافه کنیم، لازم است آیکونی را به عنوان دکمه برای این لینک اضافه کنیم. برای این دوره آموزشی فایل [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) را دانلود کنید و آن را در پوشه `blog/templates/blog/icons/` ذخیره کنید + +> نکته: برای دانلود فایل SVG منو زمینه‌ای مربوط به آن را باز کنید (معمولاً به کمک راست کلیک بر روی آن) و بعد گزینه "Save link as" را انتخاب کنید. در پنجره‌ای که باز می‌شود آدرس محلی که می‌خواهید فایل را ذخیره کنید، مشخص کنید، به پوشه `djangogirls` که پروژه جنگو شما در آن است بروید و پوشه `blog/templates/blog/icons/` را پیدا کنید و فایل را در آن ذخیره کنید. + +وقت آن است که فایل `blog/templates/blog/base.html` را در ویرایشگر متن خود باز کنید. حالا می‌توانیم از فایل آیکون در تمپلیت base به شکل زیر استفاده کنیم. در عنصر `div` که در بخش `header` قرار دارد، لینکی قبل از عنصر `h1` اضافه خواهیم کرد: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +توجه داشته باشید که ما می‌خواهیم نام ویو جدید را `post_new` بگذاریم. آیتم [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) توسط [Bootstrap Icons](https://icons.getbootstrap.com/) ارائه می‌شود و علامتی مانند یک صفحه به همراه یک علامت به اضافه، نشان خواهد داد. ما از یک هدایت‌کننده جنگو یا Django template directive، به اسم `include` استفاده می‌کنیم. این هدایت‌کننده محتوای یک فایل را به تمپلیت جنگو تزریق می‌کند. مرورگر وب به خوبی می‌تواند این نوع از محتوا را بدون پردازش‌های اضافه، مدیریت کند. + +> شما می‌توانید تمام آیکون‌های بوتسترپ را از [اینجا](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip) دانلود کنید. فایل را از حالت زیپ خارج کنید و همه تصاویر را در پوشه‌ای به نام `icons` در داخل پوشه `blog/templates/blog/` قرار دهید. به این روش شما می‌توانید به آیکونی مانند `pencil-fill.svg` از طریق آدرس `blog/templates/blog/icons/pencil-fill.svg`، دسترسی داشته باشید + +بعد از اصلاح این خط، فایل شما باید به این شکل باشد: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +پس از ذخیره و بازخوانی صفحه http://127.0.0.1:8000 شما با یک خطای شناخته شده `NoReverseMatch` مواجه خواهید شد، درست است؟ بسیار عالی! + +## آدرس اینترنتی + +فایل `blog/urls.py` را باز کرده و کد زیر را به آن اضافه می‌کنیم: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +و در نهایت کد ما بصورت زیر خواهد بود: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +از آنجایی که ویوی `post_new` را پیاده سازی نکرده ایم، هنگامی که سایت را ریفرش کنیم با خطای `AttributeError` مواجه خواهیم شد. پس باید ویوی مربوطه را نیز بسازیم: + +## ویو post_new + +زمان آن است که فایل `blog/views.py` را در ویرایشگر کد باز کنید و خطوط زیر را در ردیف `from` ها اضافه کنید: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +و حالا *view* ما: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +برای ایجاد یک فرم جدید`Post`، ما باید`()PostForm` را فراخوانی کنیم و آن را به تمپلیت منتقل کنیم. ما به این *view* باز خواهیم گشت، اما در حال حاضر، بیایید به سرعت یک تمپلیت برای این فرم ایجاد کنیم. + +## تمپلیت + +لازم است یک فایل به نام `post_edit.html`در پوشه `blog/templates/blog`بسازیم و آن را در ویرایشگر کد بازکنیم. برای آنکه یک فرم کار کند به چند چیز نیاز داریم: + +* ما باید فرم را نمایش دهیم. مثلاً می‌توانیم این کار را با {% raw %}`{{ form.as_p }}`{% endraw %} انجام دهیم. +* خط بالا باید درون تگ فرم HTML پیچیده شود: `... `. +* ما به یک دکمه `ذخیره کردن` نیاز داریم. این کار را با یک دکمه HTML انجام می‌دهیم: ``. +* و در نهایت، درست بعد از باز شدن تگ `
` باید {% raw %}`{% csrf_token %}`{% endraw %} را اضافه کنیم. نوشتن این عبارت بسیار مهم است، زیرا فرم‌های شما را امن می‌کند! اگر شما این تکه را فراموش کنید، جنگو هنگام تلاش برای ذخیره کردن فرم پیغام خطا می‌دهد: + +![صفحه خطا CSRF](images/csrf2.png) + +خوب، بگذار ببینیم HTML در فایل `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 }} + +
+{% endblock %} +``` + +حالا زمان به روزرسانی پروژه است! بله فرم شما نمایش داده می‌شود! + +![فرم جدید](images/new_form2.png) + +اما یک دقیقه صبر کنید وقتی چیزی را در فیلدهای `title` و `text` تایپ کنید و سعی کنید آن را ذخیره کنید، چه اتفاقی خواهد افتاد؟ + +هیچ چی! ما یک بار دیگر در همان صفحه هستیم و متن ما رفته است... و هیچ پست جدیدی اضافه نشده است. پس چه اتفاقی افتاد؟ + +جواب این است: هیچ چیز. ما باید در *view* خودمان کمی کارهای بیشتری انجام دهیم. + +## ذخیره فرم + +یکبار دیگر فایل `blog/views.py` را در ویرایشگر کد باز کنید. در حال حاضر آنچه که در ویو `post_new` داریم این هاست: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +هنگامی که فرم را ارسال می‌کنیم، ما به همان ویوی قبل باز می‌گردیم، اما این بار ما در `request` داده‌های بیشتری داریم، به ویژه در `request.POST` (نامگذاری request.POST هیچ ارتباطی با "پست" وبلاگ ندارد و به معنی آن است که ما در حال ارسال اطلاعات هستیم). به یاد می آورید که چگونه در فایل HTML، تعریف `
` دارای متغیر `method="POST"` بود؟ تمام فیلدهای فرم اکنون در `request.POST` قرار دارند. شما نباید عبارت `POST` را در اینجا به چیز دیگری تغییر دهید (تنها مقدار معتبر دیگر برای `method` مقدار `GET` است، اما الان وقت آن را نداریم تا تفاوت آن‌ها را توضیح دهیم). + +بنابراین در *view*، ما دو موقعیت جداگانه برای رسیدگی داریم: اول اینکه زمانی که ما برای اولین بار به صفحه می‌رویم و یک فرم خالی را می‌خواهیم، و دوم، وقتی با اطلاعات نوشته شده درون فرم، به *view* برمی‌گردیم. بنابراین ما نیاز به اضافه کردن یک شرط داریم (ما از `if`برای این منظور استفاده می‌کنیم): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +وقت آن است که نقاط `[...]` را پر کنید. اگر مقدار `method` برابر با `POST` باشد، ما می خواهیم که با اطلاعات درون فرم `PostForm` را بسازیم، درست است؟ ما این کار را به صورت زیر انجام خواهیم داد: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +قدم بعدی این است که بررسی کنید که آیا فرم صحیح است (تمام فیلدهای لازم تنظیم شده و مقادیر نادرست وارد نشده است). ما این کار را با `form.is_valid()` انجام می‌دهیم. + +ما بررسی می کنیم که آیا فرم معتبر است و اگر چنین باشد، می توانیم آن را ذخیره کنیم! + +{% 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() +``` + +اساساً، ما دو چیز در اینجا داریم: فرم را با `form.save` ذخیره می‌کنیم سپس یک نویسنده برای مطلب تعیین می‌کنیم (از آنجا که فیلد `author` در فرم موجود نبوده و داشتن نویسنده برای مطلب در `PostForm`الزامی است). `commit=False` بدین معنی است که ما نمی‌خواهیم مدل `Post` را ذخیره کنیم - ما می‌خواهیم ابتدا نویسنده را اضافه کنیم. در بیشتر موارد شما از `()form.save` بدون `commit=False` استفاده می‌کنید، اما در این مورد، ما باید آن را استفاده کنیم. `()post.save` تغییرات (اضافه کردن نویسنده) را اعمال می‌کند و یک پست جدید بلاگ ایجاد می‌شود! + +سرانجام، خوب بود اگر می‌توانستیم بلافاصله به صفحه جزییات پست جدید `post_detail` که هم اکنون ساخته‌ایم برویم، درست است؟ برای این کار ما نیاز به فراخوانی دیگری داریم: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +آن را در ابتدای فایل خود اضافه کنید. و اکنون می‌توان گفت، "به صفحه جزییات پست `post_detail` برای پست جدید برو": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` نام ویویی است که ما می‌خواهیم به آن برویم. به یاد دارید که این *view* نیاز به متغیر `pk` دارد؟ برای فرستادن آن به ویو، از `pk=post.pk` استفاده می‌کنیم، که در آن `post` جدیدترین پست وبلاگ است! + +خوب، ما خیلی صحبت کرده‌ایم، اما احتمالاً می‌خواهید ببینید که کل *view* چگونه به نظر می‌رسد، درست است؟ + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +بیایید ببینیم که آیا کار می‌کند. به صفحه http://127.0.0.1:8000/post/new/ بروید، یک `title` و یک `text` اضافه کنید و نتیجه را ببینید! پست جدید وبلاگ اضافه شده است و ما به صفحه `post_detail` هدایت می‌شویم! + +ممکن است متوجه شده باشید که قبل از ذخیره پست، تاریخ انتشار را تنظیم کرده‌ایم. بعدها، ما دکمه *publish button* را در بخش **Django Girls Tutorial: Extensions** معرفی می‌کنیم. + +این عالیه! + +> همانطور که اخیراً رابط کاربری ادمین جنگجو را استفاده کردیم، سیستم در حال حاضر فکر می‌کند ما هنوز در سیستم لاگین هستیم. چند موقعیت وجود دارد که می تواند منجر به خروج ما از رابط کاربری مدیریت شود (بسته شدن مرورگر، راه اندازی مجدد دیتابیس و غیره). اگر در هنگام ایجاد یک پست متوجه شدید که خطایی در رابطه با عدم وجود یک کاربر ایجاد شده است، به صفحه مدیریت http://127.0.0.1:8000/admin بروید و دوباره وارد شوید. این مسأله به طور موقت حل خواهد شد. یک تکلیف اضافه برای خانه که بعد از بخش اصلی آموزش، انتظار شما را می‌کشد رفع مشکلات امنیتی وبسایت در بخش **Homework: add security to your website!** است. + +![خطا ورود به سیستم](images/post_create_error.png) + +## اعتبارسنجی فرم + +حالا به شما نشان می‌دهیم که فرم‌ها در جنگو چقدر جالب هستند. یک پست وبلاگ باید فیلدهای `title` و `text` را داشته باشد. در مدل `Post` ما نگفتیم که این فیلدها (به غیر از `published_date`) الزامی نیستند، بنابراین، جنگو به طور پیش فرض آن‌ها را الزامی می‌داند. + +سعی کنید فرم را بدون `title` و `text` ذخیره کنید. حدس بزنید چه اتفاقی خواهد افتاد! + +![اعتبارسنجی فرم](images/form_validation2.png) + +جنگو مواظب است که تمام فیلدهای موجود در فرم ما صحیح پر شده باشند. فوق‌العاده نیست؟ + +## ويرايش فرم + +حالا ما می‌دانیم که چگونه یک پست جدید اضافه کنیم. اما اگر بخواهیم یک فرم موجود را ویرایش کنیم، چه؟ این کار بسیار شبیه آنچه ما انجام داده‌یم است. بگذارید برخی از چیزهای مهم را سریع بسازیم. (اگر چیزی را درک نمی‌کنید، باید از مربی خود بپرسید یا در فصل‌های قبلی نگاه کنید، زیرا ما قبلاً همه این مراحل را پوشش دادیم.) + +ابتدا، اجازه دهید که آیکونی که نمایش دهنده دکمه اصلاح است را ذخیره کنیم. فایل [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) را دانلود کنید و آن را در آدرس `blog/templates/blog/icons/` ذخیره کنید. + +فایل `blog/templates/blog/post_detail.html` را در ویرایشگر متن باز کنید و خطوط زیر را به عنصر `article` اضافه کنید: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +قالب فوق شبیه به این خواهد شد: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +فایل `blog/urls.py` را باز کنید و خط زیر را به آن اضافه کنید: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +ما از این تمپلیت `blog/templates/blog/post_edit.html` مجدداً استفاده خواهیم کرد پس تنها قطعه باقی مانده *view* است. + +فایل `blog/views.py` را باز کنید و خط زیر را به انتهای این فایل اضافه کنید: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +این ویو شبیه ویوی `post_new` ماست، درست است؟ اما نه دقیقاً. در ابتدا ما یک پارامتر `pk` اضافی از `urls` ارسال کرده‌ایم. سپس مدل `Post` را که می‌خواهیم اصلاح کنیم با دستور `get_object_or_404(Post, pk=pk)` می‌گیریم و بعد از آن یک فرم می‌سازیم و این فرم را به صورت `instance`ارسال می‌کنیم، هر دو این کارها وقتی اتفاق می‌افتد که فرم را ذخیره می‌کنیم… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +… و هنگامی که یک فرم را به این صورت برای تغییر دادن باز می‌کنیم: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +بسیار خوب، حالا بیایید امتحان کنیم که آیا کار می‌کند! به صفحه `post_detail` بروید. باید یک کلید edit در گوشه سمت راست بالا باشد: + +![کلید Edit](images/edit_button2.png) + +وقتی بر روی آن کلیک کنید یک فرم که با اطلاعات پست وبلاگی ما پر شده است نشان داده می‌شود: + +![فرم Edit](images/edit_form2.png) + +به راحتی محتوای پست را تغییر دهید و آن را ذخیره کنید! + +تبریک! برنامه شما کامل و کامل‌تر می‌شود! + +اگر اطلاعات بیشتری در مورد فرم‌ها در جنگو لازم دارید باید مستندات مربوط به آن را در این آدرس بخوانید: https://docs.djangoproject.com/en/2.2/topics/forms/ + +## امنیت + +ساختن یک پست جدید فقط با یک کلیک، بسیار فوق العاده است! اما همین الان هرکسی که از صفحه شما بازدید می‌کند می‌تواند به راحتی یک پست جدید بسازد و این احتمالاً چیزی نیست که شما بخواهید. حالا بیایید کاری کنیم که این دکمه فقط برای شما نشان داده شود و کس دیگری آن را نبیند. + +فایل `blog/templates/blog/base.html` را در ویرایشگر کد باز کنید بخش `div` با نام `header` و تگ a موجود در آن را پیدا کنید. باید چیزی شبیه به این باشد: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +حالا ما می‌خواهیم یک تگ `{% if %}` دیگر به این اضافه کنیم که باعث خواهد شد این لینک فقط برای کاربری نشان داده شود که به عنوان ادمین وارد شده باشد که در حال حاضر فقط شما هستید! تگ `` را به شکل زیر تغییر دهید: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/file-earmark-plus.svg' %} + +{% endif %} +``` + +تگ `{% if %}` باعث خواهد شد که لینک فقط در صورتی به مرورگر ارسال شود که کاربر درخواست کننده صفحه، با حساب کاربری ادمین وارد شده باشد. این کار به طور کامل ساختن پست جدید را محافظت نمی‌کند اما قدم اولیه‌ی خوبی است. مباحث بیشتری از امنیت را در بخش‌های اضافه آموزش پوشش خواهیم داد. + +کلید edit را که به صفحه جزییات یک پست اضافه کردیم به یاد دارید؟ حالا همین کار را برای آن صفحه نیز می‌خواهیم انجام دهیم تا دیگران قادر به تغییر محتوای یک پست نباشند. + +فایل `blog/templates/blog/post_detail.html` را باز کنید و خط زیر را پیدا کنید: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +آن را به شکل زیر تغییر دهید: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +از آنجا که احتمالاً هنوز به عنوان ادمین در سیستم لاگین کرده‌اید، اگر صفحه را دوباره بازخوانی کنید، تغییر خاصی را نمی‌بینید. صفحه را در یک مرورگر دیگر یا یک پنجره ناشناس incognito window (در Windows Edge به آن "InPrivate" می‌گویند) بارگذاری کنید. خواهید دید که لینک و آیکون اصلاح پست، نمایش داده نمی‌شود! + +## یک چیز دیگر: زمان دیپلوی است! + +بیایید ببینیم آیا همه این تغییرات در PythonAnywhere کار می‌کند. وقت یک دیپلوی کردن دیگر است! + +* ابتدا کد جدید را کامیت کنید و آن را به GitHub بفرستید: + +{% filename %}خط فرمان{% endfilename %} + + $ git status + $ git add . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* سپس در کنسول [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/) تایپ کنید: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(یادتان باشد که `` را با زیر دامنه اصلی خود در PythonAnywhere عوض کنید البته بدون آکولادها.) + +* در نهایت به صفحه ["Web" page](https://www.pythonanywhere.com/web_app_setup/) بروید (از کلید منو در بالا و سمت راست کنسول استفاده کنید) و کلید **Reload** را بزنید. آدرس وبلاگ خودتان https://subdomain.pythonanywhere.com را باز کنید تا تغییرات را ببینید. + +به نتیجه رسید! تبریک! :) \ No newline at end of file diff --git a/fa/django_forms/images/csrf2.png b/fa/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/fa/django_forms/images/csrf2.png differ diff --git a/fa/django_forms/images/drafts.png b/fa/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/fa/django_forms/images/drafts.png differ diff --git a/fa/django_forms/images/edit_button2.png b/fa/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/fa/django_forms/images/edit_button2.png differ diff --git a/fa/django_forms/images/edit_form2.png b/fa/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/fa/django_forms/images/edit_form2.png differ diff --git a/fa/django_forms/images/form_validation2.png b/fa/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/fa/django_forms/images/form_validation2.png differ diff --git a/fa/django_forms/images/new_form2.png b/fa/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/fa/django_forms/images/new_form2.png differ diff --git a/fa/django_forms/images/post_create_error.png b/fa/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/fa/django_forms/images/post_create_error.png differ diff --git a/fa/django_installation/README.md b/fa/django_installation/README.md new file mode 100644 index 00000000000..dc3cccdfa7d --- /dev/null +++ b/fa/django_installation/README.md @@ -0,0 +1,7 @@ +# نصب و راه اندازی جنگو + +> **نکته** اگر از Chromebook استفاده می‌کنید، این فصل را رد کنید و مطمئن شوید که دستورالعمل [ تنظیمات Chromebook](../chromebook_setup/README.md) را دنبال کنید. +> +> **نکته** اگر مراحل [نصب و راه‌اندازی](../installation/README.md) را انجام داده‌اید یعنی این بخش انجام شده است، می‌توانید مستقیم به بخش بعد بروید! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/fa/django_installation/instructions.md b/fa/django_installation/instructions.md new file mode 100644 index 00000000000..f35dfc76d3f --- /dev/null +++ b/fa/django_installation/instructions.md @@ -0,0 +1,229 @@ +> قسمت‌هایی از این بخش بر اساس دوره آموزشی Geek Girls Carrots است (https://github.com/ggcarrots/django-carrots). +> +> قسمتهایی نیز بر پايه دوره آموزشی [django-marcador tutorial](http://django-marcador.keimlink.de/) و با مجوز Creative Commons Attribution-ShareAlike 4.0 International License است. حقوق دوره آموزشی django-marcador متعلق به Markus Zapke-Gründemann و همکاران می‌باشد. + +## محیط مجازی + +قبل از اینکه ما جنگو را نصب کنیم، ابزاری بسیار پراستفاده به شما می‌دهیم تا با نصب آن محیط برنامه نویسی خود را بر روی کامپیوترتان تمیز و مرتب نگه دارید. می‌توانید برای ادامه کار از این مرحله صرف نظر کنید اما استفاده از آن بسیار توصیه می‌شود. شروع کار با تنظیمات مناسب جلوی بسیاری از مشکلات در آینده را می‌گیرد! + +بنابراین، اجازه دهید یک ** محیط مجازی ** یا virtual environment بسازیم (همچنین به آن * virtualenv* هم گفته می‌شود). محیط مجازی، تنظیمات پایتون/جنگو را برای هر پروژه و جدا از دیگر پروژه‌ها، قرنطینه و حفظ خواهد کرد. یعنی هر تغییری که در تنظیمات یک وبسایت انجام می‌دهید، بر روی دیگر وبسایت‌هایی که در حال توسعه آن‌ها هستید تاثیر نخواهد گذاشت. تمیز و مرتب، اینطور نیست؟ + +آنچه شما باید انجام دهید این است که یک پوشه را پیدا کنید که در آن می‌خواهید ` محیط مجازی` را ایجاد کنید. برای مثال، پوشه home. در ویندوز، چیزی شبیه `C:\Users\Name` است (که در آن `Name` نام کاربری شما است که با آن وارد ویندوز شده‌اید). + +> **نکته: ** در ویندوز اطمینان حاصل کنید که نام این پوشه حاوی کاراکترهای خاص یا دارای اعراب نیست؛ اگر نام کاربری شما دارای کاراکترهای خاص است، از یک پوشه دیگر استفاده کنید، به عنوان مثال `C:\djangogirls`. + +برای این آموزش ما از یک پوشه جدید `djangogirls` در پوشه اصلی شما استفاده خواهیم کرد: + +{% filename %}خط فرمان{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +ما یک محیط مجازی به نام `myvenv` خواهیم ساخت. فرمان کلی در این قالب خواهد بود: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 -m venv myvenv + + + + +برای ایجاد یک `محیط مجازی` جدید، باید کنسول خط فرمان را باز کنید و دستور <`python -m venv myvenv` را اجرا کنید. شبیه این خواهد شد: + +{% filename %}خط فرمان{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +در اینجا `myvenv` نام `محیط مجازی` شماست. می‌توانید هر نام دیگری انتخاب کنید اما از حروف کوچک استفاده کنید و از اسپیس، اعراب گذاری و کاراکترهای خاص استفاده نکنید. همچنین بهتر است اسم کوتاهی انتخاب کنید چون بعدتر ارجاعات زیادی به آن خواهید داشت! + + + + + +می‌توانیم با دستور `python3 -m venv myvenv` هم در لینوکس و هم در macOS `محیط مجازی` بسازیم. شبیه این خواهد بود: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 -m venv myvenv + + +نام `محیط مجازی` شما، `myvenv` است. می‌توانید هر نام دیگری انتخاب کنید اما از حروف کوچک استفاده کنید و از اسپیس استفاده نکنید. همچنین بهتر است اسم کوتاهی انتخاب کنید چون بعدتر ارجاعات زیادی به آن خواهید داشت! + +> **نکته: ** در بعضی نسخه‌های دبیان/اوبونتو ممکن است چنین پیغام خطایی دریافت کنید: +> +> {% filename %}خط فرمان{% 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. +> +> +> در این موارد دستورالعمل داده شده در بالا را دنبال کنید. پکیج `python3-venv` را نصب کنید: {% filename %}خط فرمان{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **نکته: ** در بعضی نسخه‌های دبیان/اوبونتو ساختن محیط مجازی با این دستور ممکن است باعث چنین خطایی بشود: +> +> {% filename %}خط فرمان{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> برای حل این مشکل، از دستور `virtualenv` استفاده کنید. +> +> {% filename %}خط فرمان{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **نکته: ** اگر چنین خطایی گرفتید +> +> {% filename %}خط فرمان{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> در عوض از این دستور استفاده کنید: +> +> {% filename %}خط فرمان{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + + +## کار کردن با محیط مجازی + +دستور بالا یک پوشه به نام `myvenv` می‌سازد (یا هر نام دیگری که شما گذاشته باشید) که شامل محیط مجازی ماست (درواقع مجموعه‌ای از پوشه‌ها و فایل‌ها). + + + +محیط مجازی خود را با اجرای دستور زیر فعال کنید: + +{% filename %}خط فرمان{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **نکته: ** در ویندوز 10 و در هنگام استفاده از Windows PowerShell ممکن است با این خطا مواجه شوید `execution of scripts is disabled on this system`. در این شرایط یک بار دیگر Windows PowerShell را با گزینه "Run as Administrator" اجرا کنید. سپس دستورات زیر را قبل از فعال کردن محیط مجازی خود، اجرا کنید: +> +> {% filename %}خط فرمان{% 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 +> + + + +> **نکته:** برای کاربران ویرایشگر VS Code که درون خود یک ترمینال خط فرمان منطبق بر PowerShell ویندوز دارد، اگر بخواهید از این ترمینال استفاده کنید باید این دستور را برای فعال کردن محیط مجازی خود بزنید: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> مزیت آن این است که لازم نیست بین پنجره ویرایشگر کد و پنجره خط فرمان جابجا شوید + + + + + +محیط مجازی خود را با اجرای دستور زیر فعال کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ source myvenv/bin/activate + + +به یاد داشته باشید که `myvenv` را با نامی که برای `محیط مجازی` خود انتخاب کرده‌اید عوض کنید! + +> **نکته: ** گاهی اوقات ممکن است دستور `source` در دسترس نباشد. در این مواقع دستور زیر را امتحان کنید: +> +> {% filename %}خط فرمان{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +هنگامی که پیشوند `(myvenv)` در کنسول خط فرمان اضافه شود به معنی آن است که `محیط مجازی` شما فعال شده است. + +وقتی درون یک محیط مجازی کار می‌کنید کلمه `python` به صورت اتوماتیک به نسخه صحیح پایتون ارجاع می‌دهد در نتیجه می‌توانید به جای `python3` از `python` استفاده کنید. + +بسیار خوب، ما همه نیازمندی‌ها را داریم حالا می‌توانیم جنگو را نصب کنیم! + +## نصب جنگو {#django} + +حالا که `محیط مجازی` شما فعال شده است می‌توانید جنگو را نصب کنید. + +قبل از آن باید مطمئن شویم که آخرین نسخه `pip` که برای نصب جنگو استفاده می‌شود را داریم: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### نصب پکیج‌ها و پیش‌نیازهایشان + +یک فایل پیش‌نیازها شامل لیستی از پکیج‌های وابسته است که باید به کمک `pip install` نصب شوند: + +در ابتدا یک فایل `requirements.txt` در پوشه `djangogirls/` بسازید. معمولاً می‌توانید از خود ویرایشگر کد که قبل‌تر نصب کرده‌اید هم برای ساختن فایل جدید استفاده کنید. یک فایل جدید در ویرایشگر کد بسازید و سپس به نام `requirements.txt`در پوشه `djangogirls/` ذخیره‌اش کنید. پوشه شما شبیه این خواهد بود: + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +در فایل `djangogirls/requirements.txt` باید خط زیر را اضافه کنید: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +حالا دستور `pip install -r requirements.txt` را اجرا کنید تا جنگو نصب شود. + +{% filename %}خط فرمان{% 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> اگر در هنگام اجرای دستور pip در ویندوز خطایی دریافت کردید لطفاً کنترل کنید که در مسیر نام پوشه‌ها هیچ پوشه‌ای اسپیس، اعراب گذاری یا کارکتر خاص در نام خود نداشته باشد (مثلا مانند این `C:\Users\User Name\djangogirls`). اگر چنین است لطفاً از مسیری استفاده کنید که در آن اسپیس به کار نرفته باشد (مثلا چنین مسیری `C:\djangogirls`). یک محیط مجازی در پوشه جدید درست کنید سپس محیط مجازی قبلی را پاک کنید و دستور بالا را دوباره اجرا کنید. (جابجا کردن پوشه مربوط به محیط مجازی ایده خوبی نیست و باعث می‌شود محیط مجازی کار نکند. محیط مجازی با آدرس مطلق کار می‌کند) + + + + + +> ممکن است کنسول خط فرمان شما بعد از اجرای دستور فوق ثابت و بی‌حرکت شود. اگر چنین اتفاقی افتاد به جای دستور بالا از خط زیر استفاده کنید: +> +> {% filename %}خط فرمان{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> اگر هنگام اجرای دستور pip بر روی اوبونتو نسخه 12.04 پیغام خطا گرفتید از دستور `python -m pip install -U --force-reinstall pip` برای اصلاح پکیج pip در محیط مجازی استفاده کنید. + + + +عالی! بالاخره در نهایت آماده شدید تا یک برنامه جنگو بسازید! \ No newline at end of file diff --git a/fa/django_models/README.md b/fa/django_models/README.md new file mode 100644 index 00000000000..6804dde9f87 --- /dev/null +++ b/fa/django_models/README.md @@ -0,0 +1,203 @@ +# مدل در جنگو + +آنچه الان می‌خواهیم بسازیم چیزی است که تمام پست‌های ما در وبلاگ را ذخیره می‌کند. اما برای اینکه بتوانیم این کار را بکنیم باید کمی در مورد مفهوم `شیء` صحبت کنیم. + +## اشیاء + +مفهومی در برنامه نویسی وجود دارد که به آن `برنامه‌نویسی شیء‌گرا` گفته می‌شود. به این معنی که به جای آنکه همه چیز را در ردیف‌هایی طولانی از دستورات بنویسیم می‌توانیم مدل هایی درست کنیم و تعریف کنیم که این مدل ها چگونه با هم ارتباط داشته باشند. + +یک شیء چیست؟ یک شیء مجموعه‌ای از خصوصیات و اعمال است. ممکن است کمی عجیب باشد اما برای شما مثالی خواهیم زد. + +اگر بخواهیم مدلی برای یک گربه بسازیم یک شیء به نام `Cat` میسازیم که دارای خصوصیاتی است مانند `رنگ`، `سن`، `حالت` (مثلاً خوب، بد یا خواب‌آلود) و `مالک` (که می‌تواند اشاره به یک شیء `Person` یا در در مورد گربه‌های ولگرد، بدون اشاره به فردی خاص، خالی بماند). + +یک شیء از نوع `Cat` دارای فعالیتی‌هایی مانند: `خُرخُر کردن`، `خراشیدن` و یا `غذا خوردن` است. (برخی مواقع به گربه، `غذای گربه` می‌‌دهیم که می‌تواند یک شیء جداگانه باشد که خصوصیت `مزه` داشته باشد). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +بنابراین ایده اصلی آن است که چیزهای واقعی در کدها با خصوصیات (که به آن `object properties` می‌گوییم) و اعمال (که به آن `methods` می‌گوییم) تعریف شوند. + +ما می‌خواهیم یک وبلاگ درست کنیم، درست است؟ چگونه یک مدل برای پست‌های وبلاگی بسازیم؟ + +باید به این سوال پاسخ دهیم که: یک پست وبلاگی چیست؟ چه خصوصیاتی دارد؟ + +خب، پست وبلاگی ما قطعاً به مقداری متن و یک عنوان نیاز دارد، درست است؟ بسیار خوب خواهد بود که بدانیم چه کسی مطلب را نوشته است، پس به نویسنده هم احتیاج داریم. سرانجام می‌خواهیم بدانیم که این مطلب در چه تاریخی نوشته و منتشر شده است. + + Post + -------- + title + text + author + created_date + published_date + + +چه کارهایی با یک پست وبلاگی می‌توان انجام داد؟ بسیار جالب خواهد بود که `متدهایی` داشته باشیم که بتواند یک پست را منتشر کند. چطور است؟ + +بنابراین به یک متد انتشار یا `publish` نیاز داریم. + +حالا که می‌دانیم دقیقاً به چه چیزی احتیاج داریم بیایید مدل سازی در جنگو را شروع کنیم! + +## مدل در جنگو + +حالا که می‌دانیم شیء چیست، می‌توانیم یک مدل جنگویی برای پست‌های وبلاگ‌مان بسازیم. + +یک مدل در جنگو نوعی شیء ویژه است که در `پایگاه داده` یا database ذخیره می‌شود. یک پایگاه داده مجموعه‌ای از اطلاعات است. جایی است که در آن اطلاعات مربوط به کاربرها، پست‌های وبلاگی و غیره را نگهداری می‌کنیم. ما از پایگاه داده SQLite برای ذخیره اطلاعات استفاده می‌کنیم. این پایگاه داده، پایگاه داده پیشفرض در جنگو است و الان برای ما کافی است. + +شما می‌توانید یک مدل را در پایگاه داده، چیزی شبیه به یک صفحه گسترده با ستون‌ها (فیلدها) و ردیف‌ها(داده‌ها) تصور کنید. + +### ساختن یک اپلیکیشن + +برای آنکه همه چیز مرتب باشد ما یک برنامه مجزا (اپلیکیشن) در پروژه خود خواهیم ساخت. خوب است که همه چیز از ابتدا مرتب باشد. برای ساخت یک برنامه جدید باید دستور زیر را در خط فرمان اجرا کنیم (در پوشه `djangogirls` و جایی که فایل `manage.py` وجود دارد): + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +خواهید دید که یک پوشه جدید به نام `blog` ساخته شده و شامل تعدادی فایل است. پوشه‌ها و فایل‌ها در پروژه ما باید شبیه به این باشد: + + djangogirls + ├── blog + │   ├── admin.py + │   ├── apps.py + │   ├── __init__.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + + +بعد از ساختن این برنامه، باید به جنگو بگوییم تا از آن استفاده کند. این کار را در فایل `mysite/settings.py` انجام می‌دهیم -- این فایل را در ویرایشگر کد باز کنید. باید `INSTALLED_APPS` را پیدا کنیم و دقیقاً بالای علامت `[` در انتهای این بخش، خطی شامل `'blog.apps.BlogConfig',` را اضافه کنیم. پس در نهایت شبیه این خواهد بود: + +{% 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.apps.BlogConfig', +] +``` + +### ساختن مدل برای پست وبلاگ + +در فایل `blog/models.py` ما تمام اشیائی را که به آن `مدل Model` می‌گوییم تعریف می‌کنیم. اینجا فضایی است که پست‌های وبلاگی را تعریف می‌کنیم. + +فایل `blog/models.py` را در ویرایشگر کد باز کنید، تمام محتویات آن را پاک کنید و کد‌های زیر را در آن بنویسید: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> مطمئن بشوید که در هر طرف `str` دوبار از کاراکتر `_` استفاده کنید. از این قرارداد زیاد در پایتون استفاده می‌شود که به آن "dunder" هم می‌گویند که مخفف "double-underscore" است. + +عجیب به نظر می‌رسد؟ نگران نباشید ما درباره عملکرد این خط ها توضیح خواهیم داد! + +تمام خطوطی که با `from` یا `import` شروع می‌شوند خطوطی هستند که محتوایی را از یک فایل دیگر به این فایل اضافه می‌کنند. پس به جای آنکه یک محتوای یکسان را در هر فایل تکرار کنیم، می‌توانیم از این الگو استفاده کنیم `from ... import ... `. + +`class Post(models.Model):` – این خط مدل ما را تعریف می‌کند (که یک `شیء` یا object است). + +- `class` کلید واژه‌ای است که نشان می‌دهد در حال تعریف کردن یک شیء هستیم. +- `Post` نام مدل ما است. می‌توانیم به آن نام متفاوتی بدهیم (اما نباید از کاراکترهای خاص و اسپیس استفاده کنیم). همیشه نام یک کلاس را با حروف بزرگ شروع کنید. +- `models.Model` به این معنی است که Post یک مدل جنگویی است، بنابراین جنگو می‌داند که این مدل باید در پایگاه داده ذخیره شود. + +حالا ویژگی‌هایی که در مورد آن‌ها صحبت کردیم را اضافه می‌کنیم: `title`، `text`، `created_date`، `published_date` و `author`. برای این کار باید ویژگی‌های هرکدام از این‌ها را مشخص کنیم (آیا متن است؟ یا عدد؟ یا تاریخ؟ یا ارتباطی با یک شیء دیگر دارد، مثلا کاربر؟) + +- `models.CharField` – این عبارت مشخص می‌کند که ویژگی مورد نظر از جنس متن با تعداد کاراکتر محدود است. +- `models.TextField` – این عبارت برای اختصاص دادن متن با تعداد کاراکتر نامحدود است. به نظر برای متن پست‌های وبلاگی مناسب است، درست است؟ +- `models.DateTimeField` – مشخص کننده تاریخ و زمان است. +- `models.ForeignKey` – نشان دهنده ارتباط به یک مدل دیگر است. + +ما همه قطعات کد را توضیح نخواهیم داد برای آنکه زمان بسیار زیادی می‌گیرد. اگر بخواهید اطلاعات بیشتری در مورد فیلدهای یک مدل‌ و انواع آن بدانید باید نگاهی به مستندات جنگو بیندازید (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field-types). + +منظور از `def publish(self):` چیست؟ این دقیقاً متد یا عملیات `publish` (انتشار یک پست وبلاگی) است که قبل‌تر در مورد آن صحبت کردیم. عبارت `def` نشان دهنده آن است که یک تابع یا متد تعریف شده‌ است و `publish` نام این تابع است. شما می‌توانید نام این تابع را به دلخواه عوض کنید. برای نامگذاری متدها، معمولاً از حروف کوچک و خط زیرین (underscore) به جای کاراکتر فاصله (space) استفاده می‌کنیم. برای مثال، تابعی که برای محاسبه قیمت متوسط لازم داریم به این صورت نامگذاری می‌شود `calculate_average_price`. + +توابع معمولاً یک مقدار را باز می‌گردانند که با `return` تعریف می‌شود. نمونه‌ای از این بازگرداندن در تابع `__str__` وجود دارد. در این سناریو وقتی ما تابع `__str__()` را فراخوانی می‌کنیم یک نوشته (با فرمت **string**) که حاوی عنوان پست وبلاگی است دریافت می‌کنیم. + +همچنین توجه داشته باشید که هر دو تابع `def publish(self):` و `def __str__(self):` به کمک فاصله‌گذاری ابتدای خط، درون کلاس تعریف شده‌اند. چون پایتون به فاصله‌ها حساس است نیاز داریم که میزان فاصله ابتدا خط برای متدها درست تعریف شوند تا متد، درون کلاس قرار داشته باشد. در غیر اینصورت متدها عضوی از کلاس نخواهند بود، و ممکن است رفتار غیرمنتظره‌ای ببینید. + +اگر هنوز چیزی در مورد مدل‌ها برای شما مبهم است حتماً از مربی خود بپرسید! می‌دانیم که یادگرفتن مفاهیم اشیاء و توابع به طور همزمان، پیچیده است. ولی حداقل الان کمی برای شما واضح‌تر شده است! + +### ساختن جدول برای مدل‌ها در پایگاه داده‌ها + +آخرین مرحله این است که مدل جدیدی که ساخته‌ایم را به پایگاه داده اضافه کنیم. ابتدا باید جنگو را از تغییراتی که در مدل‌ها ایجاد کرده‌ایم آگاه کنیم. (این تغییرات همین کارهایی است که انجام داده‌ایم!) به کنسول خط فرمان بروید و تایپ کنید `python manage.py makemigrations blog`. چیزی شبیه این خواهید دید: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**نکته: **به یاد داشته باشید که فایل‌هایی که تغییر داده‌اید را ذخیره کنید وگرنه ممکن است کامپیوتر نسخه قبلی فایل را در نظر بگیرد و پیغام خطا نشان بدهد. + +جنگو یک فایل مهاجرت یا migration برای ما درست می‌کند که ما باید آن را به پایگاه داده ارسال کنیم. عبارت `python manage.py migrate blog` را اجرا کنید و خروجی باید شبیه به این باشد: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate blog + Operations to perform: + Apply all migrations: blog + Running migrations: + Applying blog.0001_initial... OK + + +هورا! مدل Post ما اکنون در پایگاه داده قرار گرفته است! جالب خواهد بود که نگاهی به آن بیندازیم! پس به سراغ بخش بعدی بروید تا ببینید Post ها به چه صورتی درآمده‌اند! \ No newline at end of file diff --git a/fa/django_orm/README.md b/fa/django_orm/README.md new file mode 100644 index 00000000000..653a5e0371f --- /dev/null +++ b/fa/django_orm/README.md @@ -0,0 +1,221 @@ +# ORM و QuerySets در جنگو + +در این فصل شما نحوه اتصال جنگو به پایگاه داده و روش ذخیره اطلاعات در آن را یاد خواهید گرفت. بگذارید شروع کنیم! + +## QuerySet چیست؟ + +به صورت خلاصه، کوئری‌ست لیستی از تعدادی شیء مربوط به یک مدل خاص است. کوئری‌ست به شما این امکان را می‌دهد که داده‌ها را از پایگاه داده بخوانید، فیلتر کنید یا آن‌ها را مرتب کنید. + +ساده‌ترین راه فهمیدن آن، مثال است. پس شروع می‌کنیم.آماده‌اید؟ + +## کنسول خط فرمان جنگو + +کنسول‌های لوکال خود را باز کرده (نه در PythonAnywhere) و این دستور را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + + +باید پاسخی مانند زیر دریافت کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +شما در حال حاضر در کنسول تعاملی جنگو هستید. این محل کاملاً شبیه به محیط تعاملی پایتون می‌باشد با این تفاوت که چند ویژگی جادویی جنگو را در بر دارد. :) شما می‌توانید تمامی دستورات پایتون را در اینجا استفاده کنید. + +### تمام اشیاء + +در ابتدا تمامی پست ها را نمایش می دهیم. با دستور زیر می توان این کار را انجام داد: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +اوه اوه! به خطا خوردیم. این خطا به این معنی است که هیچ پستی وجود ندارد. درست است! فراموش کردیم که پست ها را import کنیم! + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> from blog.models import Post +``` + +مدل `Post` را از `blog.models` فراخوانی می‌کنیم. حالا دوباره تمامی پست‌ها را نمایش می‌دهیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +لیستی از پست‌هایی که قبلا ایجاد کرده بودیم درست شد! ما این پست‌ها را با استفاده از صفحه مدیریت جنگو ایجاد کرده‌بودیم. اما حالا می‌خواهیم پست جدیدی با استفاده از پایتون درست کنیم. چطور این کار را انجام می‌دهیم؟ + +### ساختن شیء + +به صورت زیر می‌توان یک شیء جدید از نوع Post در پایگاه داده ایجاد کرد: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +اما ما در اینجا یک عنصر گم شده داریم: `نویسنده`. نیاز هست که یک نمونه از مدل `User` را به عنوان نویسنده برای ساخت شیء جدید تعریف کنیم. نحوه انجام کار به صورت زیر می باشد. + +بیایید اول مدل User را فراخوانی کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +چه کاربرانی در پایگاه داده داریم؟ این را امتحان کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +این همان کاربر اصلی یا superuser است که کمی قبل‌تر ساخته‌ایم! حالا بیایید نمونه ای از روی کاربر اصلی بسازیم (این خط را مطابق نام کاربر اصلی که قبلاً وارد کرده‌اید تغییر دهید): + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +همان طور که می‌بینید ما یک `کاربر` را به کمک دستور `get` و با ارجاع دادن مقدار 'ola' به متغیر `username` فراخوانی کردیم. خیلی دقیق! + +الان ما می‌توانیم پست خود را ایجاد کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +هورا! می‌خواهید امتحان کنیم که آیا درست کار می‌کند؟ + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +بنابراین یک پست دیگر در لیست خواهیم داشت! + +### اضافه کردن پست های بیشتر + +حالا برای تفریح هم که شده می‌توانید پست‌های بیشتری بسازید تا با نحوه کارکرد آن بهتر آشنا شوید. دو یا سه پست دیگربسازید و سپس به مرحله بعد بروید. + +### فیلتر کردن اشیاء + +بخش مهمی از QuerySet، توانایی فیلتر کردن آن است. در اینجا می‌خواهیم تمام پست‌هایی که کاربر ola ساخته است را پیدا کنیم. در اینجا از عبارت `filter` به جای `all` در `Post.objects.all()` استفاده می‌کنیم. در پرانتز ما شرطی (شرایطی) که لازم است وجود داشته باشد تا شیء مورد نظر به QuerySet اضافه شود را بیان می‌کنیم. در اینجا، شرط ما این است که `author` برابر با `me` باشد. نحوه نوشتن آن در جنگو به این صورت است `author=me`. الان یک کد به صورت زیر داریم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +یا شاید ما بخواهیم تمام پست‌هایی که در فیلد `title` کلمه 'title' را داشته باشند پیدا کنیم؟ + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **نکته** دقت کنید که ۲تا کاراکتر underscore ( `ـ`) در میان `title` و `contains` وجود دارد. ORM جنگو از این قانون استفاده می‌کند تا عملیات یا فیلتر مورد نظر را ("contains") از نام فیلد ("title") جدا کند. اگر فقط از یک underscore استفاده کنید خطایی مانند این دریافت خواهید کرد "FieldError: Cannot resolve keyword title_contains". + +همچنین می‌توانید لیستی از تمام پست‌های منتشر شده دریافت کنید. ما این کار را با فیلتر کردن همه پست‌هایی که برای آن‌ها `published_date` تعیین کرده بودیم انجام می‌دهیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +متاسفانه پست هایی که از طریق کنسول پایتون اضافه کرده‌ایم هنوز منتشر نشده‌اند. اما می‌توانیم این وضعیت را تغییر دهیم! ابتدا یک نسخه از پست‌هایی که می‌خواهیم منتشر کنیم تهیه می‌کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +و حالا با متد `publish` آن را منتشر می کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> post.publish() +``` + +الان دوباره سعی کنید لیستی از پست‌های منتشر شده را نمایش دهید (دکمه جهت بالا در کیبورد را ۳ بار زده و `enter` کنید): + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### مرتب‌سازی اشیاء (Ordering objects) + +QuerySet ها همچنین به شما اجازه می‌دهند لیستی از اشیاء را مرتب کنید. بیایید آن‌ها را بر اساس `created_date`، مرتب کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +همچنین با اضافه کردن `-` در ابتدای دستور می‌توانیم اشیاء را به صورت معکوس مرتب کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### کوئری‌های پیچیده از طریق زنجیره توابع + +همانطور که دیدید برخی از توابع در `Post.objects`، یک کوئری ست باز می‌گردانند. همان تابع می‌تواند مجدداً بر روی یک کوئری ست اعمال شود و کوئری ست دیگری برگرداند. بنابراین، شما می‌توانید تاثیر آن‌ها را به صورت **زنجیره‌ای** با هم ترکیب کنید: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +این روش واقعاً قدرتمند است و به شما اجازه می‌دهد کوئری‌های پیچیده‌ای بسازید. + +موفق شدیم! شما الان برای قسمت بعدی آماده هستید. برای بستن پوسته (shell) دستور زیر را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> exit() +``` \ No newline at end of file diff --git a/fa/django_start_project/README.md b/fa/django_start_project/README.md new file mode 100644 index 00000000000..f6185426cf0 --- /dev/null +++ b/fa/django_start_project/README.md @@ -0,0 +1,260 @@ +# اولین پروژه جنگو شما! + +> قسمت‌هایی از این بخش بر اساس دوره آموزشی Geek Girls Carrots بنا شده است (https://github.com/ggcarrots/django-carrots). +> +> قسمت‌هایی هم بر اساس دوره آموزشی [django-marcador tutorial](http://django-marcador.keimlink.de/) تحت مجوز بین المللی Creative Commons Attribution-ShareAlike 4.0 تهیه شده است. امتیاز دوره آموزشی django-marcador متعلق به Markus Zapke-Gründemann و همکاران است. + +قصد داریم یک وبلاگ کوچک بسازیم! + +در قدم اول یک پروژه جدید جنگو میسازیم. در واقع ساختن یک پروژه جنگو شامل اجرا کردن دستوراتی است که توسط جنگو آماده شده و با اجرای آن، بدنه اصلی پروژه ساخته می‌شود. این بدنه، شامل تعدادی پوشه و فایل است که ما بعداً از آن ها استفاده خواهیم کرد. + +نام برخی از این فایل‌ها و پوشه‌ها برای جنگو بسیار مهم است. شما نباید نام فایل‌‌هایی که الان می‌خواهیم بسازیم را تغییر دهید. همچنین تغییر پوشه‌های آنها هم ایده خوبی نیست. جنگو باید در یک ساختار مشخص مورد استفاده قرار گیرد تا بتواند موارد مهم را پیدا کند. + +> به یاد داشته باشید که همه دستورات را در محیط مجازی (virtualenv) اجرا کنید. اگر پیشوند `(myvenv)` را در کنسول خط فرمان نمی‌بینید، باید محیط مجازی را فعال کنید. فعال کردن محیط مجازی را در قسمت **کارکردن با محیط مجازی** از بخش **نصب جنگو** توضیح داده‌ایم. در ویندوز با تایپ `myvenv\Scripts\activate` و در لینوکس یا مک با نوشتن `source myvenv/bin/activate` می‌توانید محیط مجازی را فعال کنید. + + + +در کنسول لینوکس یا مک باید دستورات زیر را اجرا کنید. **فراموش نکنید که `علامت نقطه` را در آخر عبارت بگذارید!** + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> علامت `.` مهم است برای اینکه به سیستم می‌گوید که جنگو را در همین پوشه جاری نصب کند (علامت `.` به پوشه ای که در حال حاضر در آن هستیم اشاره میکند). +> +> **نکته** وقتی دستور بالا را می‌نویسید به یاد داشته باشید که فقط بخشی را می‌نویسید که با `django-admin` شروع می‌شود. بخش `(myvenv) ~/djangogirls$` نشان می‌دهد که شما باید دستورات ورودی را در مقابل آن بنویسید. + + + + + +در ویندوز باید دستور زیر را اجرا کنید. **(فراموش نکنید که `علامت نقطه` را در انتها بگذارید)**: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> علامت `.` مهم است برای اینکه به سیستم می‌گوید که جنگو را در همین پوشه جاری نصب کند (علامت `.` به پوشه ای که در حال حاضر در آن هستیم اشاره میکند). +> +> **نکته** وقتی دستور بالا را می‌نویسید به یاد داشته باشید که فقط بخشی را می‌نویسید که با `django-admin.exe` شروع می‌شود. بخش `(myvenv) C:\Users\Name\djangogirls>` نشان می‌دهد که شما باید دستورات ورودی را در مقابل آن بنویسید. + + + +`django-admin.py` دستوری است که پوشه‌ها و فایل‌ها را برای شما می‌سازد. الان باید ساختار پوشه‌ها و فایل‌های شما شبیه به این باشد: + + djangogirls + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **نکته**: در ساختار پوشه‌ها، شما پوشه `myvenv` را هم که قبلاً ساخته ایم خواهید دید. + +`manage.py` دستوری است که به مدیریت سایت کمک می‌کند. به کمک این دستور (و برخی چیزهای دیگر) و بدون نصب نرم افزارهای دیگر می‌توانیم یک وب سرور بر روی کامپیوتر خود راه اندازی کنیم. + +فایل `settings.py` حاوی تنظیمات وبسایت شما است. + +یادتان می‌آید در مورد حامل نامه و این موضوع که: کجا را باید نگاه کند تا بتواند نامه را به مقصد برساند‌، صحبت کردیم؟ فایل `urls.py` شامل الگوهایی است که توسط `urlresolver` استفاده می‌شوند. + +اجازه بدهید الان از سایر فایل‌ها چشم‌پوشی کنیم چون آن‌ها را تغییر نخواهیم داد. تنها چیزی که باید مواظب آن باشید این است که آن‌ها را اشتباهی پاک نکنید! + +## تغییر تنظیمات + +می‌خواهیم کمی تغییرات در فایل `mysite/settings.py` ایجاد کنیم. این فایل را در ویرایشگر کد، که پیش از این نصب کرده اید باز کنید. + +**نکته**: به یاد داشته باشید که فایل `settings.py`، یک فایل معمولی مانند بقیه فایل‌ها است. شما می‌توانید این فایل را به کمک ویرایشگر کد با استفاده از منو "file -> open"، باز کنید. از این طریق یک پنجره معمولی باز می‌شود که می‌توانید به کمک آن فایل `settings.py` را پیدا کنید و آن را انتخاب کنید. به جای این کار، می‌توانید در بین پوشه‌ها، پوشه djangogirls را پیدا کنید بر روی آن راست کلیک کنید. سپس نام ویرایشگر کد خود را از لیست به نمایش درآمده انتخاب کنید. انتخاب ویرایشگر مهم است چرا که ممکن است نرم افزارهای دیگر هم فایل را باز کنند ولی اجازه ویرایش کردن به شما ندهند. + +خیلی خوب خواهد بود که زمان درست را در وبسایت خود داشته باشیم. به [لیست منطقه های زمانی ویکیپدیا](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) بروید و محدوده زمانی مناسب را برای خود انتخاب کنید (TZ) (مثلاً `Asia/Tehran`). + +در فایل `settings.py` خطی را که حاوی `TIME_ZONE` است پیدا کنید و آن را اصلاح کنید تا منطقه زمانی شما را نشان دهد. مثلاً: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Asia/Tehran' +``` + +یک شناسه زبان شامل دو بخش است یکی زبان، مثلاً `en` برای انگلیسی و `fa` برای فارسی، و دیگری کد کشور، مثلاً `de` برای آلمان و `ir` برای ایران. اگر انگلیسی زبان اصلی شما نیست می‌توانید این شناسه را تغییر دهید تا پیغام‌های جنگو به زبان خودتان برای شما نمایش داده شود. بنابراین شما ترجمه دکمه "Cancel" را به زبانی که در اینجا معرفی کرده اید خواهید دید. [جنگو به زبان‌های زیادی ترجمه شده و قابل استفاده است](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code). + +اگر زبان دیگری را می‌خواهید شناسه زبان را در خط زیر تغییر دهید: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +علاوه بر این نیاز داریم تا آدرس فایل‌های ثابت یا ایستا را نیز اضافه کنیم. (بعداً به طور کامل در این دوره آموزشی به فایل‌های ثابت و CSS خواهیم پرداخت.) به *انتهای* فایل بروید و دقیقاً زیر ورودی `STATIC_URL`، یک خط جدید با عنوان `STATIC_ROOT` اضافه کنید: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +وقتی در این فایل `DEBUG` برابر با `True`باشد و `ALLOWED_HOSTS` خالی باشد، مقادیر هاست `['localhost', '127.0.0.1', '[::1]']` خواهد بود. این هاست در هنگام انتشار وبسایت روی اینترنت، با هاست PythonAnywhere هماهنگ نخواهد بود پس تنظیمات را به این شکل تغییر می‌دهیم: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **نکته**: اگر از کروم بوک استفاده می‌کنید، این خط را هم به انتهای فایل settings.py اضافه کنید: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> اگر از cloud9 استفاده می‌کنید `.amazonaws.com` را به `ALLOWED_HOSTS` اضافه کنید +> +> اگر شما پروژه خود را بر روی `Glitch.com` میزبانی می‌کنید، اجازه دهید که از کلید مخفی جنگو یا Djanog secret key پروژه شما که باید محرمانه بماند محافظت کنیم (در غیر اینصورت هر کس که پروژه شما را بررسی کند آن را خواهد دید): +> +> - در ابتدا، یک کلید مخفی شانسی می‌سازیم. ترمینال Glitch را دوباره باز کنید و دستورات زیر را تایپ کنید: +> +> {% filename %}خط فرمان{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> این کار باعث خواهد شد که یک رشته اتفاقی از کاراکترها و حروف ساخته شود، چیزی که به عنوان یک کلید مخفی برای پروژه جنگو شما کاملاً مناسب است. ما این کلید را در فایل `.env` در Glitch اضافه می‌کنیم، این فایل درصورتی توسط Glitch به ما نشان داده می‌شود که ما صاحب پروژه باشیم. +> +> - فایلی به نام `.env` در پوشه اصلی پروژه بسازید و کدهای زیر را در آن قرار دهید: +> +> {% 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' +> ``` +> +> - سپس فایل settings پروژه جنگو را با تغییرات زیر به روز رسانی کنید تا کلید مخفی به آن اضافه شود: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - کمی پایین‌تر در همان فایل، نام وبسایت جدید Glitch شما را اضافه می‌کنیم: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> مقدار `PROJECT_DOMAIN` به صورت اتوماتیک توسط Glitch ایجاد می‌شود. این مقدار وابسته به نام پروژه شماست. + +## راه اندازی یک پایگاه داده + +تعداد بسیار زیادی پایگاه داده وجود دارد که می‌تواند داده های وبسایت شما را ذخیره کند. ما از پایگاه داده پیشفرض `sqlite3` استفاده می‌کنیم. + +این پایگاه داده از قبل در این بخش از فایل `mysite/settings.py` تعریف شده است: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +برای ساختن یک پایگاه داده برای وبسایتمان، دستور زیر را در کنسول خط فرمان اجرا می‌کنیم: `python manage.py migrate` (هنگام اجرای این دستور باید در پوشه `djangogirls` باشیم جایی که فایل `manage.py` قرار دارد). اگر همه چیز خوب پیش برود باید چیزی شبیه به این را ببینیم: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +تمام شد! وقت آن است که وب سرور را اجرا کنیم و ببینیم آیا وبسایت ما کار می‌کند! + +## فعال کردن وب سرور + +شما باید در پوشه‌ای باشید که فایل `manage.py` در آن قرار دارد. (در پوشه `djangogirls`). در کنسول خط فرمان، وب سرور را به کمک این دستور فعال می‌کنیم `python manage.py runserver`: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +اگر در Chromebook کار می‌کنید از این دستور استفاده کنید: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +یا اگر از Glitch استفاده می‌کنید به کمک دستور زیر: + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +اگر در ویندوز کار می‌کنید و با خطای `UnicodeDecodeError` مواجه شدید، از دستور زیر استفاده کنید: + +{% filename %}خط فرمان{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +حالا زمان آن است که چک کنید وبسایت کار می‌کند یا نه. مرورگر خود را باز کنید (فایرفاکس، کروم، سافاری، اینترنت اکسپلورر یا هر چیز دیگر) و آدرس زیر را وارد کنید: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +اگر از Chromebook و Cloud9 استفاده می‌کنید، در پنجره pop-up که در گوشه ی بالا، سمت راست پنجره ی خط فرمان، که در حال اجرای وب سرور است، باز شده است، بر روی آدرس URL ظاهر شده کلیک کنید. این آدرس چیزی شبیه به این است: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +یا در Glitch: + + https://name-of-your-glitch-project.glitch.me + + +تبریک! شما اولین وبسایت خود را ساخته اید و با یک وب سرور آن را فعال کرده اید! فوق العاده نیست؟ + +![Install worked!](images/install_worked.png) + +توجه داشته باشید که یک کنسول خط فرمان در هر لحظه فقط یک کار را می‌تواند انجام دهد و کنسول خط فرمان که شما قبل‌تر باز کرده‌اید در حال اجرای وب سرور است. تا زمانی که وب سرور در حال اجراست و منتظر است تا درخواستی به آن برسد می‌توان چیزی تایپ کرد ولی هیچ دستور جدیدی را نمی‌توان اجرا کرد. + +> نحوه عملکرد وب سرور را در بخش **اینترنت چگونه کار می‌کند** دوره کرده ایم. + +برای اینکه در زمان فعال بودن وب سرور، دستورات بیشتری را در کنسول خط فرمان تایپ کنید باید یک کنسول جدید باز کنید و محیط مجازی خود را فعال کنید. برای آنکه روش باز کردن یک کنسول جدید را مرور کنید می‌توانید به بخش [آشنایی با خط فرمان](../intro_to_command_line/README.md) نگاهی بیندازید. برای قطع فعالیت وب سرور، به همان کنسولی بروید که وب سرور در آن فعال است و کلید CTRL و C را با هم بزنید (در ویندوز ممکن است لازم باشد کلید CTRL را با کلید Break بزنید). + +برای قدم بعدی آماده هستید؟ حالا وقت آن است که کمی محتوا بسازیم! \ No newline at end of file diff --git a/fa/django_start_project/images/install_worked.png b/fa/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/fa/django_start_project/images/install_worked.png differ diff --git a/fa/django_templates/README.md b/fa/django_templates/README.md new file mode 100644 index 00000000000..06eefa0c9d7 --- /dev/null +++ b/fa/django_templates/README.md @@ -0,0 +1,108 @@ +# templates در جنگو + +وقت آن است که داده‌ها را در وبسایت نمایش دهیم. جنگو چندین **template tag** مفید در اختیار ما قرار می‌دهد. + +## template tag چیست؟ + +میدانیم که در کدهای HTML نمی‌توانیم از کد های پایتون استفاده کنیم،به این دلیل که مرورگر نمی‌تواند کد پایتون را درک کند. مرورگرها فقط HTML را می‌فهمند. همینطور می‌دانیم که HTML ایستا است، در حالی که پایتون بسیار پویاتر است. + +** template tags در جنگو ** ما را قادر می‌سازد تا اشیا پایتونی را به HTML انتقال دهیم، بنابراین شما می‌توانید با سرعت بیشتری وبسایت‌های پویا توسعه دهید. چه خوب! + +## نمایش دادن قالب لیست پست‌های وبلاگ + +در بخش قبلی، ما لیستی از پست‌ها را در قالب متغیر `posts` به template دادیم. حالا آن را به وسیله HTML نمایش می‌دهیم. + +برای چاپ یک متغیر در template های جنگو، نام متغیر را درون دو جفت آکولاد قرار می دهیم. مانند کد زیر: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +این مورد را در قالب `blog/templates/blog/post_list.html` امتحان کنید. آن را در ویرایشگر کد باز کنید، و هر چیزی از دومین `
` تا سومین `
` را با `{{ posts }}` جایگزین کنید. فایل را ذخیره کنید، و صفحه را برای دیدن نتیجه refresh کنید: + +![تصویر 13.1](images/step1.png) + +همینطوری که مشاهده می‌کنید، تمام چیزی که به دست آورده‌ایم این است: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +این به معنای آن است که جنگو این متغیر را به عنوان لیستی از اشیا در نظر می‌گیرد. آیا از بخش **معرفی پایتون** بخاطر دارید که چگونه می‌توانیم لیست‌ها را نمایش دهیم؟ بله، با حلقه for ! در یک template جنگو شما این کار را به صورت زیر انجام خواهید داد: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +این کار را در template خود امتحان کنید. + +![تصویر 13.2](images/step2.png) + +کار میکند! اما ما میخواهیم تا پست ها مانند پست های ایستایی که پیش از این در بخش **معرفی HTML** ساختیم، نمایش داده شود. میتوانید HTML و template tag را با هم استفاده کنید. قسمت `body` به صورت زیر خواهد بود: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %} هر چیزی که بین `{% for %}` و `{% endfor %}` قرار می‌دهید، برای هر شی در لیست تکرار می‌شود. صفحه خود را refresh کنید: {% endraw %} + +![تصویر 13.3](images/step3.png) + +آیا توجه کردید که این بار از نشانه گذاری متفاوتی استفاده کردیم؟ (`{{ post.title }}` یا `{{ post.text }}`)؟ ما در حال دسترسی به داده‌های موجود در هر فیلد تعریف شده در مدل `Post` هستیم. همچنین، `|linebreaksbr` متن پست‌ها را از فیلتری رد می‌کند که line-break ها را به پاراگراف تبدیل می‌کند. + +## یک مورد دیگر + +خوب است اگر بدانیم وب سایت شما روی اینترنت عمومی نیز به درستی کار می‌کند یا نه، درست است؟ بیایید تا دوباره انتشار آن را روی PythonAnywhere امتحان کنیم. خلاصه‌ای از مراحل در زیر آورده شده‌ است… + +* ابتدا کد خود را روی گیتهاب push کنید + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* سپس دوباره به [PythonAnywhere](https://www.pythonanywhere.com/consoles/) وارد شوید و به **Bash console** خود بروید ( یا یک کنسول خط فرمان جدید باز کنید)، و دستورات زیر را اجرا کنید: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(به خاطر داشته باشید `` را با زیردامنه PythonAnywhere خود جایگزین کنید، بدون علامت های <>) + +* سرانجام، به برگه ["Web" page](https://www.pythonanywhere.com/web_app_setup/) بروید و **Reload** را انتخاب کنید. (برای رسیدن به سایر صفحات در PythonAnywhere از دکمه منو در سمت بالا و راست صفحه استفاده کنید.) به روز رسانی شما باید در آدرس https://subdomain.pythonanywhere.com موجود باشد در مرورگر خود آن را امتحان کنید! اگر پست‌های وبلاگی شما در PythonAnywhere با پست‌های شما در سرور فعال روی کامپیوترتان یکی نیست، نگران نباشید همه چیز مرتب است. پایگاه داده موجود روی کامپیوتر شما و PythonAnywhere، برخلاف سایر فایل‌های شما، با یکدیگر یکسان سازی نمی‌شوند و یکی نیستند. + +تبریک! حالا سعی کنید که یک پست جدید از طریق پنل مدیریت جنگو (به یاد دارید که published_date را اضافه کردیم) اضافه کنید مطمئن شوید که در بخش مدیریت جنگو در وبسایت PythonAnywhere باشید، https://subdomain.pythonanywhere.com/admin. سپس صفحه خود را دوباره بارگزاری کنید و ببینید آیا پست جدید به آن اضافه شده است. + +جذاب نیست؟ به شما افتخار می‌کنیم! کمی از کامپیوتر خود دور شوید، لازم است کمی استراحت کنید. :) + +![تصویر 13.4](images/donut.png) \ No newline at end of file diff --git a/fa/django_templates/images/donut.png b/fa/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/fa/django_templates/images/donut.png differ diff --git a/fa/django_templates/images/step1.png b/fa/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/fa/django_templates/images/step1.png differ diff --git a/fa/django_templates/images/step2.png b/fa/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/fa/django_templates/images/step2.png differ diff --git a/fa/django_templates/images/step3.png b/fa/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/fa/django_templates/images/step3.png differ diff --git a/fa/django_urls/README.md b/fa/django_urls/README.md new file mode 100644 index 00000000000..164462a0938 --- /dev/null +++ b/fa/django_urls/README.md @@ -0,0 +1,103 @@ +# URL ها در جنگو + +ما در آستانه ساخت اولین صفحه وب هستیم: یک صفحه برای وبلاگ شما! ولی قبل از آن بیایید کمی در مورد آدرس دهی در جنگو یادبگیریم. + +## URL چیست؟ + +یک URL یک آدرس اینترنتی است. شما هربار که وبسایتی را بازدید می‌کنید می‌توانید آدرس آن را ببینید، این آدرس، در address bar یا پنجره آدرس مرورگر دیده می‌شود. (بله! `127.0.0.1:8000` یک آدرس (URL) است! و `https://djangogirls.org` هم یک آدرس (URL) است.) + +![URL](images/url.png) + +هر صفحه‌ای در اینترنت آدرس خود را لازم دارد. به این روش برنامه ما متوجه می‌شود که چه چیزی را باید به کاربری که یک آدرس را باز می‌کند نشان بدهد. در جنگو ما از چیزی به نام `URLconf` استفاده می‌کنیم (URL configuration). URLconf مجموعه‌ای از الگوها است که جنگو به کمک آن می‌تواند متوجه شود که آدرس درخواست شده باید به کدام ویو، ارجاع داده شود. + +## آدرس ها در جنگو چطور کار می‌کنند؟ + +حالا فایل `mysite/urls.py` را در ویرایشگر کد خود باز کنید و ببینید چگونه است: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +همانطور که می‌بینید، اینجا جنگو چیزهایی برای ما گذاشته است. + +به خطوط بین نقل قول سه تایی (`'''` یا `"""`) docstrings یا توضیحات سند گفته می‌شود. شما می‌توانید این توضیحات را در بالای فایل، کلاس یا تابع بنویسید و عملکرد آن را شرح دهید. این خطوط توسط پایتون اجرا نمی‌شوند. + +همچنین، آدرس بخش مدیریت که در بخش قبل دیده اید، اینجا وجود دارد: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +معنی این خط این است که هر آدرسی که با `admin/` شروع شود، جنگو *view* مربوط به آن را پیدا خواهد کرد. در این مورد خاص، ما تعداد زیادی آدرس را اضافه کرده‌ایم که همه آن‌ها در این فایل نیامده‌اند - این شکل از خلاصه کردن آدرس‌ها خوانایی وتمیزی کدها را افزایش می‌دهد. + +## اولین آدرس جنگویی شما! + +زمان آن است که اولین آدرس خود را بسازید! ما می‌خواهیم که 'http://127.0.0.1:8000/' صفحه اصلی وبلاگ ما باشد که در آن لیستی از پست‌ها نمایش داده شود. + +همچنین می‌خواهیم که فایل `mysite/urls.py` را تمیز نگه داریم، در نتیجه آدرس‌ها را از اپلیکیشن `blog` ، در فایل اصلی آدرس‌ها `mysite/urls.py` فراخوانی می‌کنیم. + +به پیش برویم و خطی را اضافه کنیم که `blog.urls` را بارگذاری می‌کند. همچنین لازم است که خط `from django.urls…` را عوض کنید چرا که ما اینجا از تابع `include` استفاده می‌کنیم، بنابراین لازم است که شما دستور import را به این خط اضافه کنید. + +فایل `mysite/urls.py` شما باید چیزی شبیه به این شده باشد: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +حالا جنگو هر درخواستی که به آدرس 'http://127.0.0.1:8000/' ارسال شود را به `blog.urls` ارسال می‌کند و دستورالعمل‌های بعدی را در آنجا جستجو می‌کند. + +## blog.urls + +در پوشه `blog` یک فایل خالی به نام `urls.py` بسازید و آن را در ویرایشگر کد باز کنید. بسیار خوب! این دو خط را به آن اضافه کنید: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +در اینجا ما تابع جنگویی `path` و تمام `view` ها از اپلیکیشن `blog` را بارگذاری کرده‌ایم (هرچند که هنوز هیچ view نداریم ولی تا چند دقیقه دیگر سراغ آن خواهیم رفت!) + +بعد از این می‌توانیم اولین الگو آدرس را اضافه کنیم: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +همانطور که می‌بینید ما یک `view` به نام `post_list` را به آدرس پایه وبلاگ نسبت داده‌ایم. این الگوی URL، شامل یک رشته خالی از کاراکتر است و سیستم بررسی آدرس جنگو نام دامنه را (مثلاً http://127.0.0.1:8000/) که پیشوندی برای همه آدرس‌ها است، در نظر نمی‌گیرد. این الگو به جنگو می‌گوید که اگر کسی آدرس 'http://127.0.0.1:8000/' را وارد کرد باید به `views.post_list` بروی. + +قسمت آخر، `name='post_list'`، نام آدرس است که برای تعیین هویت یک view استفاده می‌شود. این نام می‌تواند کاملاً شبیه نام view باشد یا نام کاملاً متفاوتی داشته باشد. ما بعداً از آدرس‌های نامگذاری شده در پروژه استفاده خواهیم کرد بنابراین مهم است که برای هر آدرسی نام، تعریف شود. علاوه بر این تلاش خواهیم کرد که نام آدرس‌ها، منحصر به فرد و برای به خاطر سپردن، ساده باشد. + +اگر الان تلاش کنید تا به آدرس http://127.0.0.1:8000/ بروید احتمالاً با پیغام خطای موجود نبودن صفحه مواجه خواهید شد. این پیغام به خاطر این است که سرور (یادتان هست که تایپ می‌کردیم `runserver`؟) فعال نیست. به کنسول سرور نگاه کنید تا ببینید دلیل آن چیست. + +![خطا](images/error1.png) + +کنسول سرور یک پیعام خطا نشان می‌دهد ولی نگران نباشید، ابزار سودمندی است: این پیغام خطا می‌گوید که **no attribute 'post_list'**. این نام همان *view* است که جنگو تلاش می‌کند آن را پیدا و اجرا کند، اما ما هنوز آن را نساخته‌ایم. در این مرحله `/admin/` شما هم کار نمی‌کند. نگران نباشید، سراغ آن هم خواهیم رفت. اگر پیغام خطای دیگری دریافت کردید یک بار وب سرور را قطع و مجدداً فعال کنید. برای این کار، در پنجره کنسولی که وب سرور در آن در حال اجرا است، با زدن کلیدهای Ctrl+C (کلید Control و کلید C با هم)، وب سرور را متوقف کنید. در ویندوز ممکن است لازم باشد کلیدهای Ctrl+Break را بزنید. سپس لازم است که وب سرور را مجدداً با دستور `python manage.py runserver` راه اندازی کنید. + +> اگر می‌خواهید بیشتر در مورد URLconfs جنگو بدانید، به مستندات رسمی آن نگاهی بیندازید: https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/fa/django_urls/images/error1.png b/fa/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/fa/django_urls/images/error1.png differ diff --git a/fa/django_urls/images/url.png b/fa/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/fa/django_urls/images/url.png differ diff --git a/fa/django_views/README.md b/fa/django_views/README.md new file mode 100644 index 00000000000..7a51ba2acf9 --- /dev/null +++ b/fa/django_views/README.md @@ -0,0 +1,44 @@ +# ساخت view در جنگو! + +وقتشه که از شر باگی که تو فصل قبلی ایجاد کردیم راحت بشیم :) + +یک *view* یا نما بخشی از برنامه است که "منطق" برنامه در آن قرار می‌گیرد. این مولفه اطلاعات مورد نیاز را از `model` هایی که قبلا ایجاد کرده‌اید می گیرد و به `template` ارسال می‌کند. ما در بخش بعد یک قالب یا template خواهیم ساخت. View ها صرفاً توابع پایتونی هستند که کمی پیچیده‌تر از توابعی هستند که در بخش **آشنایی با پایتون** نوشتیم. + +ویوها در فایل `views.py` قرار دارند. ما *ویوهای* مورد نظرمان را در فایل `blog/views.py` اضافه خواهیم کرد. + +## blog/views.py + +خب، بیایید این فایل را در ویرایشگر کد باز کنیم و ببینیم چه چیزی در آن هست: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +هنوز چیز زیادی در آن نیست. + +به یاد داشته باشید که خط هایی که با `#` شروع می‌شوند کامنت یا توضیحات هستند - به این معنی که این خط ها توسط پایتون اجرا نمی‌شوند. + +حالا بیایید همانند توصیه‌ای که در خود فایل شده است یک *view* بسازیم. این ویو بسیار خلاصه را زیر کامنت موجود در فایل اضافه کنید: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +همانطور که می‌بینید ما یک تابع ساختیم ( دستور `def` تابع `post_list` را که یک آرگومان به نام `request` می‌گیرد صدا می‌زند و در نهایت به کمک یک تابع دیگر به نام `render` قالب `blog/post_list.html` را باز می‌گرداند (`return`)). + +فایل را ذخیره کنید و در مرورگر خود آدرس http://127.0.0.1:8000/ را بزنید و ببینید چه چیزی دیده می‌شود. + +باز هم خطا! ببینید چه اتفاقی افتاده است: + +![خطا](images/error.png) + +حداقل می‌توان دید که سرور در حال کار است اما هنوز، همه چیز کامل نیست، درست است؟ نگران نباشید این فقط یک صفحه خطاست، لازم نیست بترسید! دقیقاً شبیه خطاهای موجود در کنسول، این خطاها هم کاملاً مفید هستند. شما می‌توانید ببینید که با خطای *TemplateDoesNotExist* یعنی قالب وجود ندارد، مواجه شده اید. خب بگذارید این خطا را درست کنیم و در بخش بعد یک قالب یا template بسازیم! + +> با خواندن مستندات رسمی جنگو اطلاعات بیشتری در مورد ویوها یاد خواهید گرفت: https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/fa/django_views/images/error.png b/fa/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/fa/django_views/images/error.png differ diff --git a/fa/dynamic_data_in_templates/README.md b/fa/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..32450f053a8 --- /dev/null +++ b/fa/dynamic_data_in_templates/README.md @@ -0,0 +1,84 @@ +# داده‌های پویا در template ها + +ما قطعات مختلفی داریم: مدل `Post` که در فایل `models.py` تعریف شده است، `post_list` که در فایل `views.py` تعریف شده و یک template که ساخته‌ایم. ولی واقعاً چطور پست‌های وبلاگمان را در قالب HTML نشان می‌دهیم؟ چون این کاری است که می‌خواهیم انجام دهیم؛ گرفتن محتوا (مدل‌هایی که در پایگاه داده ذخیره شده اند) و نشان دادن آن در قالب مورد نظر خودمان، درست است؟ + +این دقیقاً همان چیزی است که *view*ها برای آن طراحی شده اند: وصل کردن مدل ها و قالب‌ها. در *ویو* `post_list` ما نیاز داریم که مدل مورد نظر را بگیریم و آن را به تمپلیت مناسب آن ارجاع دهیم. ما در *ویو* تصمیم می‌گیریم که چه چیزی (model) در تمپلیت نشان داده شود. + +بسیار خوب، چطور به این هدف برسیم؟ + +لازم است که فایل`blog/views.py` را در ویرایشگر کد باز کنیم. تا اینجا *ویو* `post_list` شبیه به این است: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +به یاد دارید که در مورد اضافه کردن کدهای نوشته شده در فایل‌های مختلف صحبت کردیم؟ حالا وقت آن است که مدلی را که در فایل `models.py` نوشتیم به این فایل اضافه کنیم. ما خط `from .models import Post` را به این صورت اضافه می‌کنیم: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +نقطه قبل از `models` به معنی *پوشه جاری* یا *اپلیکیشن جاری* است. هر دو فایل `views.py` و `models.py` در یک پوشه قرار دارند. پس به این معنی است که ما می‌توانیم از `.` به همراه نام فایل (بدون پسوند `.py`) استفاده کنیم. سپس نام مدل را فراخوانی می‌کنیم (`Post`). + +قدم بعدی چیست؟ برای اینکه پست‌های وبلاگی واقعی که قبلاً ساخته ایم را فراخوانی کنیم به چیزی نیاز داریم که به آن `کوئری ست` یا `QuerySet` می‌گوییم. + +## QuerySet + +شما باید با نحوه کار کوئری ست‌ها آشنا باشید. ما در [بخش ORM جنگو](../django_orm/README.md) در مورد آن‌ها صحبت کرده ایم. + +حالا ما پست‌هایی را می‌خواهیم که بر اساس `تاریخ انتشار` یا published_date، مرتب شده اند، درست است؟ این کار را هم در بخش کوئری ست انجام داده ایم! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +حالا فایل `blog/views.py` را در ویرایشگر کد باز کنید و این تکه کد را به تابع `def post_list(request)` اضافه کنید. فراموش نکنید که خط `from django.utils import timezone` را هم به بالای فایل اضافه کنید: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +برای نمایش QuerySet در لیست ارسال های بلاگ، دو کار باقی مانده است که باید انجام شود: + +1. فرستادن کوئری ست `posts` به تمپلیت با تغییر تابع `render`. الان این کار را انجام می‌دهیم. +2. اصلاح تمپلیت برای نمایش دادن کوئری ست `posts`. این کار را در بخش‌های بعد انجام خواهیم داد. + +توجه داشته باشید که ما یک *متغیر* برای کوئری ست مان درست کردیم: `posts`. آن را به عنوان نام کوئری ست در نظر بگیرید. از این به بعد ما به کمک همین نام به این کوئری ست مراجعه می‌کنیم. + +در تابع `render` ما یک پارامتر `request` داریم (درخواستی است که کاربر از طریق اینترنت برای ما ارسال کرده است) و یک پارامتر دیگر که نام فایل template است (`'blog/post_list.html'`). آخرین پارامتر ما، `{}`، محلی است که می‌توانیم چیزهایی را برای استفاده در template در آن قرار دهیم. باید برای این چیزها اسم تعریف کنیم (مثلاً همین متغیر `'posts'`). :) باید به این صورت برای فایل تمپلیت ارسال شوند: `{'posts': posts}`. توجه کنید که بخش سمت چپ علامت `:` از نوع رشته یا string است و لازم است که با علامت نقل قول `''` محصور شود. + +در نتیجه فایل `blog/views.py` ما شبیه به این خواهد شد: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +همین! وقت آن است که به فایل template برگردیم و این کوئری ست را نمایش دهیم! + +دوست دارید در مورد کوئری ست‌ها بیشتر بدانید؟ به اینجا نگاهی بیندازید: https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/fa/extend_your_application/README.md b/fa/extend_your_application/README.md new file mode 100644 index 00000000000..eb64c918205 --- /dev/null +++ b/fa/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# برنامه خود را توسعه دهید + +ما تقریباً تمام مراحل مختلف ضروری برای ساختن وبسایتمان را کامل کرده‌ایم: می‌دانیم که چطور مدل، URL، ویو و تمپلیت بنویسیم. علاوه بر این می‌دانیم که چطور وبسایتمان را زیباتر کنیم. + +زمان تمرین است! + +اولین چیزی که در وبلاگمان لازم داریم صفحه‌ای است که یک پست را نشان دهد، درست است؟ + +ما یک مدل `Post` داریم پس لازم نیست چیزی به فایل `models.py` اضافه کنیم. + +## ساختن لینک به جزییات پست در تمپلیت + +ما با اضافه کردن یک لینک به فایل `blog/templates/blog/post_list.html` آغاز می‌کنیم. این فایل را در ویرایشگر کد باز کنید و تا اینجا باید شبیه به این باشد: {% 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 %} +``` + +{% raw %} ما می‌خواهیم در لیست پست ها، یک لینک از عنوان پست وبلاگی به جزییات پست داشته باشیم. عبارت `

{{ post.title }}

` را تغییر دهید تا به صفحه جزییات پست لینک شود: {% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %} زمان آن است که عبارت رازآلود `{% url 'post_detail' pk=post.pk %}` را توضیح دهیم. همانطور که ممکن است حدس زده باشید این علامت `{% %}` به معنی آن است که ما از سیستم template tag جنگو استفاده می‌کنیم. این بار ما از یک tag استفاده خواهیم کرد که برایمان یک URL بسازد!{% endraw %} + +بخش `post_detail` به معنی آن است که جنگو انتظار دارد یک آدرس به نام post_detail، در فایل `blog/urls.py` وجود داشته باشد + +حالا معنی `pk=post.pk` چیست؟ `pk` مخفف primary key (کلید اصلی) است که یک نام منحصر به فرد برای هر ردیف از داده‌ها در پایگاه داده می‌باشد. هر مدل جنگو یک فیلد به عنوان کلید اصلی دارد، و سوای اینکه چه نام دیگری داشته باشد، همواره به عنوان pk قابل ارجاع است. چون ما در مدل `Post` کلید اصلی نساخته بودیم، جنگو یکی برای ما ساخته است (به طور پیشفرض فیلدی که نام آن "id" است، عددی را در خود ذخیره می‌کند که با هر دیتای جدید یکی به آن اضافه می‌شود مثلاً 1، 2، 3 ) و برای هر پست جدید در وبلاگ یکی به آن اضافه می‌کند. ما با نوشتن `post.pk` به کلید اصلی دسترسی پیدا می‌کنیم، همانطور که به فیلدهای دیگر (مانند `title` و `author`) در آبژکت `Post`، دسترسی داشته‌ایم. + +حالا وقتی به آدرس http://127.0.0.1:8000/ می‌رویم با خظا مواجه می‌شویم (همانطور که انتظار داشتیم، چرا که ما هنوز برای `post_detail` ، یک آدرس یا یک *view* نساخته ایم). چیزی شبیه به این: + +![خطا NoReverseMatch](images/no_reverse_match2.png) + +## ساختن آدرس برای جزییات یک پست وبلاگ + +بیایید یک URL برای *ویو* `post_detail` در فایل `urls.py` بسازیم! + +ما می‌خواهیم جزییات اولین پست ما در این **URL** دیده شود: http://127.0.0.1:8000/post/1/ + +بیایید یک آدرس در فایل `blog/urls.py` بسازیم تا جنگو را به *view* با نام `post_detail` هدایت کند که جزییات کامل یک پست وبلاگ را نشان می‌دهد. فایل `blog/urls.py`را در ویرایشگر کد باز کنید و خط `path('post//', views.post_detail, name='post_detail'),` را اضافه کنید، چیزی شبیه به این می‌شود: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +بخش `post//` یک الگوی URL را معرفی می‌کند که برای شما توضیح خواهیم داد: + +- `post/` نشان می‌دهد که آدرس باید با کلمه **post** شروع شده باشد و در ادامه آن یک **/** وجود داشته باشد. تا اینجا همه چیز خوب است. +- `` این بخش ممکن است کمی گیج کننده باشد، این عبارت به این معنی است که جنگو انتظار دارد که یک عدد صحیح دریافت کند و مقدار آن را به یک متغیر به نام `pk` نسبت خواهد داد. +- `/` - درنهایت ما به یک **/** در انتهای آدرس نیاز داریم. + +یعنی اگر شما آدرس `http://127.0.0.1:8000/post/5/` را در مرورگر خود وارد کنید جنگو متوجه خواهد شد که شما به دنبال یک *view* به نام `post_detail` هستید و مقدار متغیر `pk` را برابر `5` قرار می‌دهد و این اطلاعات را به *view* مورد نظر ارسال می‌کند. + +بسیار عالی، ما یک الگوی آدرس جدید به فایل `blog/urls.py` اضافه کردیم! حالا صفحه http://127.0.0.1:8000/ را دوباره بارگزاری کنید، بووم! سرور دوباره متوقف شده است. به کنسول نگاهی بیندازید، یک پیغام خطای دیگر دیده می‌شود! + +![AttributeError](images/attribute_error2.png) + +یادتان هست که مرحله بعدی چیست؟ اضافه کردن ویو! + +## اضافه کردن ویو جزییات یک پست + +این بار *view* ما یک پارامتر اضافه دریافت کرده است، `pk`. *ویو* ما باید بتواند آن را دریافت کند، درست است؟ پس ما تابع خودمان را به این صورت تعریف می‌کنیم `def post_detail(request, pk):`. باید توجه داشته باشید که این پارامتر باید دقیقاً همان نامی را داشته باشد که ما در `urls` تعریف کرده‌ایم (`pk`). همچنین توجه کنید که حذف این متغیر، غلط است و باعث ایجاد خطا خواهد شد. + +حالا ما می‌خواهیم فقط و فقط یک پست وبلاگی را داشته باشیم. برای اینکار از کوئری ست به شکل زیر استفاده می‌کنیم: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +اما این کد یک مشکل دارد. اگر هیچ `Post` با `کلید اصلی` (`pk`) وجود نداشته باشد، یک خطای زشت دریافت خواهیم کرد! + +![خطا DoesNotExist](images/does_not_exist2.png) + +چنین چیزی را نمی‌خواهیم! اما خوشبختانه جنگو چیزی دارد که می‌تواند این مشکل را حل کند: `get_object_or_404`. در صورتی که هیچ `Post` با `pk` داده شده وجود نداشته باشد، یک صفحه خطای زیباتر یعنی صفحه `Page Not Found 404` را نشان خواهد داد. + +![صفحه پیدا نشد](images/404_2.png) + +خبر خوب اینکه شما می‌توانید صفحه `Page not found` اختصاصی برای خودتان را با سلیقه خودتان بسازید. اما این الان موضوع خیلی مهمی نیست بنابراین ما از آن رد خواهیم شد. + +وقت آن است که یک *ویو* به فایل `views.py` اضافه کنیم! + +در فایل `blog/urls.py` ما یک الگوی آدرس به نام `post_detail` ساختیم که به یک ویو با نام `views.post_detail` ارجاع داشت. این به این معنی است که جنگو انتظار دارد که یک تابع با نام `post_detail` در فایل `blog/views.py` وجود داشته باشد. + +زمان آن است که فایل `blog/views.py` را در ویرایشگر کد باز کنید و خطوط زیر را در ردیف `from` ها اضافه کنید: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +و در انتهای فایل، *ویو* خودمان را اضافه خواهیم کرد: + +{% 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}) +``` + +بله، حالا وقت بارگذاری مجدد صفحه است: http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +کار می‌کند! ولی وقتی روی لینک مربوط به عنوان یک پست کلیک کنید چه اتفاقی می‌افتد؟ + +![خطا TemplateDoesNotExist](images/template_does_not_exist2.png) + +وای نه! یک خطای دیگر! اما حالا ما می‌دانیم که چطور با این خطا برخورد کنیم، درست است؟ ما باید یک تمپلیت اضافه کنیم! + +## ساختن یک تمپلیت برای جزییات پست وبلاگی + +در پوشه `blog/templates/blog` یک فایل به نام `post_detail.html` بسازید و آن را در ویرایشگر کد باز کنید. + +حالا کد زیر را تایپ کنید: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +یک بار دیگر ما فایل `base.html` را اضافه کرده‌ایم. ما می‌خواهیم در بلوک `content` ، جزییات یک پست منتشر شده (اگر چنین پستی وجود داشت) شامل عنوان و متن را نشان دهیم. اما باید در مورد چند موضوع مهم صحبت کنیم، خب؟ + +{% raw %}`{% if ... %} ... {% endif %}` یک تمپلیت تگ است که وقتی می‌خواهیم چیزی را چک کنیم از آن استفاده می‌کنیم. (عبارت `if ... else ...` را از بخش **آشنایی با پایتون** به یاد دارید؟) در این سناریو ما می‌خواهیم بررسی کنیم آیا بخش `published_date` مربوط به یک پست خالی نیست.{% endraw %} + +بسیار خوب، ما می‌توانیم صفحه وبلاگمان را دوباره بارگذاری کنیم و ببینیم آیا خطا `TemplateDoesNotExist` از بین رفته است یا نه. + +![صفحه جزییات پست](images/post_detail2.png) + +واو! بالاخره کار کرد! + +# زمان دیپلوی! + +خوب خواهد بود اگر ببینیم وبسایت شما هنوز روی PythonAnywhere کار میکند یا نه؟پس بیایید یک بار دیگر آن را منتشر کنیم. + +{% filename %}خط فرمان{% endfilename %} + + $ 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 + + +سپس در کنسول [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/) تایپ کنید: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(یادتان باشد که `` را با زیر دامنه اصلی خود در PythonAnywhere عوض کنید البته بدون آکولادها.) + +## به روزرسانی فایل‌های ایستا در سرور + +سرورهایی مانند PythonAnywhere دوست دارند که با فایل‌های ایستا (مانند فایل‌های CSS) به گونه‌ای متفاوت از فایل‌های پایتون برخورد کنند، چرا که می‌توانند آن ها را بهینه کنند و سرعت لود شدن آن‌ها را افزایش دهند. در نتیجه هرگاه که ما تغییری در فایل‌های CSS می‌دهیم ، باید دستوری اضافه بر روی آن اجرا کنیم تا به سرور بگوییم که این فایل‌ها تغییر کرده اند. این دستور `collectstatic` نام دارد. + +ابتدا با فعال کردن محیط مجازی شروع کنیم اگر از قبل هنوز فعال نیست (PythonAnywhere از دستوری به نام `workon` برای این کار استفاده می‌کند این دستور دقیقاً شبیه `source myenv/bin/activate` است که شما بر روی کامپیوتر خودتان اجرا می‌کنید): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +دستور `manage.py collectstatic` تقریباً شبیه دستور `manage.py migrate` است. ما تغییراتی در کدها می‌دهیم و به جنگو می‌گوییم این تغییرات را *apply* (اعمال) کند، چه در فایل‌های ایستا در سرور باشد چه در پایگاه داده. + +به هرحال، الان ما آماده هستیم، به سراغ ["Web" page](https://www.pythonanywhere.com/web_app_setup/) بروید (از طریق دکمه menu در گوشه بالا و سمت راست کنسول) و دکمه **Reload** را بزنید و سپس به صفحه https://subdomain.pythonanywhere.com نگاه کنید تا نتیجه را ببینید. + +به نتیجه رسید! تبریک! :) \ No newline at end of file diff --git a/fa/extend_your_application/images/404_2.png b/fa/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/fa/extend_your_application/images/404_2.png differ diff --git a/fa/extend_your_application/images/attribute_error2.png b/fa/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/fa/extend_your_application/images/attribute_error2.png differ diff --git a/fa/extend_your_application/images/does_not_exist2.png b/fa/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/fa/extend_your_application/images/does_not_exist2.png differ diff --git a/fa/extend_your_application/images/no_reverse_match2.png b/fa/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/fa/extend_your_application/images/no_reverse_match2.png differ diff --git a/fa/extend_your_application/images/post_detail2.png b/fa/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/fa/extend_your_application/images/post_detail2.png differ diff --git a/fa/extend_your_application/images/post_list2.png b/fa/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/fa/extend_your_application/images/post_list2.png differ diff --git a/fa/extend_your_application/images/template_does_not_exist2.png b/fa/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/fa/extend_your_application/images/template_does_not_exist2.png differ diff --git a/fa/how_the_internet_works/README.md b/fa/how_the_internet_works/README.md new file mode 100644 index 00000000000..92ce549d377 --- /dev/null +++ b/fa/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# اینترنت چگونه کار می‌کند + +> برای خوانندگان در خانه: این فصل در ویدئو [نصب پایتون و کد ویرایشگر](https://www.youtube.com/watch?v=oM9yAA09wdc) توضیح داده شده است. +> +> این فصل "اینترنت چگونه کار می‌کند" از سخنرانی جسیکا مک کلر (http://web.mit.edu/jesstess/www/) الهام گرفته شده است. + +قطعاً شما هر روز از اینترنت استفاده می‌کنید. اما آیا می‌دانید در واقع وقتی شما آدرسی مثل https://djangogirls.org را در مرورگر خود تایپ می‌کنید، چه اتفاقی می‌افتد؟ + +اولین چیزی که باید بدانید این است که یک وب سایت از مجموعه‌ای از فایل‌ها تشکیل شده است که روی یک هارد دیسک ذخیره شده اند ـ دقیقاً مانند فیلم‌ها، آهنگ‌ها و تصاویر شما. با این وجود، وب سایت ها یک ویژگی منحصر به فرد دارند: کدهای کامپیوتری به نام HTML. + +اگر با برنامه نویسی آشنایی ندارید، ممکن است درک HTML در ابتدا سخت باشد، ولی مرورگر های شما (مثل گوگل کروم، سافاری، فایرفاکس و...) عاشق آن هستند. مرورگرها طراحی شده اند تا این کدها را درک کنند، دستورات آنها را دنبال کنند و فایل‌هایی را که وب سایت شما از آن تشکیل شده است، دقیقاً آنطور که می‌خواهید، نمایش دهند. + +مانند هر فایل دیگری، ما نیاز داریم تا فایل‌های HTML را نیز جایی بر روی هارد دیسک ذخیره کنیم. برای اینترنت، ما از کامپیوترهای مخصوص و قوی به نام *servers* استفاده می‌کنیم. این کامپیوترها صفحه نمایش، کیبورد یا موس ندارند برای آنکه وظیفه اصلی آن‌ها ذخیره اطلاعات و ارائه آن‌ها است. برای همین به آن‌ها *سرور* می‌گویند برای آنکه آن‌ها داده‌ها را *ارائه* می‌کنند (serve یعنی ارائه کردن). + +خب، ولی شما می‌خواهید بدانید که اینترنت چطور کار می‌کند، درست است؟ + +تصویری برای شما کشیده ایم! چیزی شبیه به این: + +![تصویر 1.1](images/internet_1.png) + +کمی به هم ریخته است، درست است؟ در واقع این شبکه‌ای از ماشین‌های به هم متصل شده است (همانطور که در بالا اشاره شد *سرورها* هستند). صدها و هزاران دستگاه! کیلومترها سیم و کابل دور دنیا! شما می‌توانید وبسایت نقشه کابل‌های زیردریایی (http://submarinecablemap.com) را ببینید تا با پیچیدگی شبکه آشنا شوید. این تصویری از این وبسایت است: + +![تصویر 1.2](images/internet_3.png) + +جذاب است، اینطور نیست؟ اما کشیدن یک سیم مستقیم بین هر دستگاه متصل شده به اینترنت با دیگر دستگاه‌ها ممکن نیست. بنابراین برای رسیدن به یک دستگاه (مثلاً دستگاهی که https://djangogirls.org روی آن ذخیره شده) نیاز است تا ما درخواستی (request) را از طریق دستگاه‌های بسیار زیادی ارسال کنیم. + +شبیه به این: + +![تصویر 1.3](images/internet_2.png) + +تصور کنید که وقتی شما https://djangogirls.org را تایپ می‌کنید، نامه‌ای فرستاده اید به این مضمون: "دختران جنگو عزیز، من می‌خواهم وب سایت djangogirls.org را ببینم. لطفاً آن را برای من بفرستید!" + +نامه شما به نزدیکترین اداره پست فرستاده می‌شود. بعد به اداره پست دیگری می‌رود که کمی بیشتر به مقصد نزدیک است و همینطور پیش می‌رود تا به مقصد نهایی برسد. تنها ویژگی این سیستم این است که اگر نامه های بسیاری به یک مقصد بفرستید (*data packets*) آن‌ها می‌توانند از مسیرهایی کاملاً متفاوت (*routers*) به مقصد برسند. این موضوع بستگی به این دارد که نامه ها در هر اداره پست چطور تقسیم شوند. + +![تصویر 1.4](images/internet_4.png) + +این روش کار است - شما پیغامی میفرستید و منتظر پاسخ می‌مانید. به جای قلم و کاغذ شما از بایت‌های داده استفاده می‌کنید اما منطق کار یکسان است! + +به جای آدرس یا نام خیابان، شهر و کدپستی، ما از آدرس IP استفاده می‌کنیم. کامپیوتر شما ابتدا از DNS (Domain Name System) می‌خواهد که djangogirls.org را به IP address تبدیل کند. این سیستم شبیه دفترچه تلفن‌های قدیمی است که شما می‌توانستید دنبال نام یک نفر بگردید و آدرس و شماره تلفن وی را پیدا کنید. + +وقتی شما نامه‌ای می‌فرستید نیاز است که ویژگی های مشخصی داشته باشد تا قابل ارسال باشد: آدرس، تمبر و غیره. علاوه بر این از زبانی استفاده می‌کنید که گیرنده آن را متوجه شود، درست است؟ عین همین اتفاق برای *data packet* هایی می‌افتد که شما برای دیدن یک وبسایت ارسال می‌کنید. ما از پروتکلی به نام HTTP (Hypertext Transfer Protocol) استفاده می‌کنیم. + +بنابراین به طور اصولی، وقتی شما وبسایتی دارید، نیاز است تا یک *سرور* داشته باشید که وبسایت بر روی آن قرار داشته باشد. وقتی که *سرور* یک *ریکوئست* (یک درخواست به صورت یک نامه) را دریافت می‌کند، وبسایت شما را در پاسخ به آن نامه ارسال می‌کند (در یک نامه جداگانه). + +از آنجاییکه این دوره آموزشی جنگو است، ممکن است شما بپرسید جنگو چه کاری را انجام می‌دهد. وقتی شما پاسخ هر درخواست را می‌فرستید، معمولاً نمی‌خواهید یک پاسخ یکسان را برای همه بفرستید. بسیار بهتر خواهد بود اگر هر نامه‌ای شخصی و ویژه هر فرد فرستنده، پاسخ داده شود، درست است؟ جنگو به شما کمک می‌کند تا این نامه‌های شخصی و جالب را بسازید. :) + +صحبت بس است - وقت ساختن است! \ No newline at end of file diff --git a/fa/how_the_internet_works/images/internet_1.png b/fa/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/fa/how_the_internet_works/images/internet_1.png differ diff --git a/fa/how_the_internet_works/images/internet_2.png b/fa/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/fa/how_the_internet_works/images/internet_2.png differ diff --git a/fa/how_the_internet_works/images/internet_3.png b/fa/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/fa/how_the_internet_works/images/internet_3.png differ diff --git a/fa/how_the_internet_works/images/internet_4.png b/fa/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/fa/how_the_internet_works/images/internet_4.png differ diff --git a/fa/html/README.md b/fa/html/README.md new file mode 100644 index 00000000000..8dc4c605f52 --- /dev/null +++ b/fa/html/README.md @@ -0,0 +1,227 @@ +# آشنایی با HTML + +ممکن است بپرسید تمپلیت چیست؟ + +تمپلیت (به معنی قالب) فایلی است که می‌توانیم بارها از آن استفاده کنیم و اطلاعات مختلفی را به کمک آن و در یک فرمت ثابت ارائه کنیم. مثلاً شما می‌توانید از یک تمپلیت کمک بگیرید و یک نامه بنویسید چرا که با اینکه هر نامه‌ای پیغام و آدرس متفاوتی دارد، اما از فرمت مشابهی استفاده می‌کند. + +یک تمپلیت جنگو توسط زبانی به نام HTML تعریف می‌شود (همان HTML که در بخش اول، **اینترنت چگونه کار می‌کند**، به آن اشاره کرده بودیم). + +## HTML چیست؟ + +HTML نوعی از کد است که توسط مرورگر وب، مانند کروم و فایرفاکس یا سافاری، تفسیر و اجرا می‌شود تا یک صفحه وب را نشان دهد. + +HTML مخفف عبارت "HyperText Markup Language" است. **HyperText** به این معنی است که نوعی از نوشته است که هایپرلینک بین صفحات را پشتیبانی می‌کند. **Markup** یعنی ما یک متن را برمی‌داریم و آن را علامت گذاری می‌کنیم تا به سیستم دیگری (مثلاً در اینجا مرورگر وب) بگوییم چطور آن را تفسیر کند. کدهای HTML با **tag** ها ساخته شده اند که هرکدام با `>` آغاز و با `<` پایان می‌یابند. این تگ‌ها **المان‌های** نشانه گذاری هستند. + +## اولین تمپلیت شما! + +ساختن یک تمپلیت یعنی ساختن یک فایل تمپلیت. هرچیزی، یک فایل است، درست است؟ احتمالاً تا الان این موضوع را متوجه شده اید. + +تمپلیت‌ها در دایرکتوری `blog/templates/blog` ذخیره می‌شوند. بنابراین اول یک دایرکتوری به نام `templates` در دایرکتوری وبلاگ بسازید. سپس دایرکتوری دیگری به نام `blog` در داخل آن بسازید: + + blog + └───templates + └───blog + + +(ممکن است فکر کنید که چرا دوتا دایرکتوری به نام `blog` لازم داریم. همانطور که بعدتر خواهیم دید این یک سیستم نامگذاری کارآمد برای وقتی است که اوضاع پیچیده‌تر می‌شود.) + +حالا یک فایل `post_list.html` (که فعلاً خالی باشد) در دایرکتوری بسازید `blog/templates/blog`. + +نگاه کنید که الان وبسایت شما چه شکلی شده است: http://127.0.0.1:8000/ + +> اگر هنوز پیغام خطا `TemplateDoesNotExist` را می‌بینید، یک بار سرور را قطع و بعد دوباره فعال کنید. به خط فرمان بروید سرور را با زدن Ctrl+C (کلید کنترل و کلید C باهم) قطع کنید و با اجرای دستور `python manage.py runserver` مجدداً فعال کنید. + +![تصویر 11.1](images/step1.png) + +پیغام خطایی نیست! تبریک :) با اینحال وبسایت شما هنوز چیزی به غیر از یک صفحه خالی نشان نمی‌دهد برای اینکه تمپلیت شما خالی است. لازم است که آن را اصلاح کنیم. + +فایل جدید را در ویرایشگر کد باز کنید و موارد زیر را به آن اضافه کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + +

Hi there!

+

It works!

+ + +``` + +الان وبسایت شما چطور به نظر می‌رسد؟ به آن سری بزنید تا بفهمید: http://127.0.0.1:8000/ + +![تصویر 11.2](images/step3.png) + +کار می‌کند! خوب شد! :) + +* خط `` یک تگ HTML نیست. این عبارت فقط نوع فایل را مشخص می‌کند. در اینجا این عبارت به مرورگر اعلام می‌کند که نوع فایل [HTML5](https://html.spec.whatwg.org/#the-doctype) است. همیشه شروع هر نوع فایل HTML5 با همین عبارت شروع می‌شود. +* `` پایه‌ای‌ترین تگ و معمولاً اولین تگ در ابتدای صفحه است و تگ `` معمولاً در انتهای صفحه می‌آید. همانطور که می‌بینید، تمام محتوای وبسایت بین تگ `` در ابتدا و تگ `` در انتها قرار می‌گیرند +* تگ `

` برای پاراگراف‌ها به کار می‌رود و تگ `

` پایان هر پاراگراف را مشخص می‌کند + +## Head and body + +هر صفحه HTML همچنین به دو بخش اصلی تقسیم می‌شود: **head** و **body**. + +* **head** عنصری است که شامل اطلاعاتی در مورد هر فایل می‌شود که در صفحه نشان داده نمی‌شوند. + +* **body** عنصری است که شامل هر چیزی است که در صفحه وبسایت نمایش داده می‌شوند. + +ما از `` استفاده می‌کنیم تا در مورد تنظیمات فایل به مرورگر اطلاعاتی بدهیم و `` نشان می‌دهد که چه چیزی واقعاً در صفحه وجود دارد. + +برای مثال شما می‌توانید تگ عنوان یا title را به شکل زیر در ``، قرار دهید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +این فایل‎ را ذخیره کنید و وبسایت خود را دوباره بارگذاری کنید. + +![تصویر 11.3](images/step4.png) + +توجه کنید که چگونه مرورگر متوجه شد که "Ola's blog" عنوان صفحه شماست؟ مرورگر عبارت `Ola's blog` را تفسیر کرده و آن را به عنوان نام صفحه، در نوار نام صفحه مرورگر قرار داده است (البته عنوان در جاهای دیگری مانند bookmark کردن هم استفاده می‌شود). + +احتمالاً تا الان توجه کرده‌اید که هر تگ شروع به همراه یک *تگ پایان* و علامت `/` می‌آید و عوامل در آن نیز *nested* می‌شوند (یعنی شما نمی‌توانید یک تگ را ببندید مگر آنکه تمام تگ‌های درون آن را بسته باشید). + +شبیه گذاشتن چیزها در جعبه است. شما یک جعبه بزرگ دارید، ``؛ درون آن یک جعبه دیگر ``، و این همینطور ادامه دارد تا به کوچکترین جعبه برسد: `

`. + +شما باید از این قوانین *بستن تگ‌ها* و نیز *nesting*، پیروی کنید. اگر این قوانین رعایت نشوند مرورگر ممکن است نتواند فایل شما را درست تفسیر کند و صفحه HTML درست نمایش داده نخواهد شد. + +## تنظیم کردن تمپلیت + +الان می‌توانید کمی تفریح کنید و تلاش کنید تا تمپلیت خود را تنظیم کنید! در اینجا تعدادی تگ مفید معرفی شده: + +* `

heading

` یک تیتر برای عنوان‌های مهم +* `

sub-heading

` یک تیتر برای عنوان‌های کم اهمیت‌تر +* `

sub-sub-heading

` یک زیر عنوان که تا `
` درجه اهمیت آن کمتر می‌شود +* `

پاراگراف

پاراگرافی از نوشته‌ها` +* `تاکید` بر نوشته شما تاکید می‌کند +* `تاکید` تاکید بیشتر روی متن +* `
` به خط بعد می‌رود (شما نمی‌توانید چیزی درون تگ br بگذارید و علاوه بر این br، تگِ پایانی ندارد) +* `لینک` یک لینک می‌سازد +* `
  • آیتم اول
  • آیتم دوم
` یک لیست، دقیقاً مانند همین لیست درست می‌کند! +* `
` یک بخش جدید در صفحه تعریف می‌کند +* `` مجموعه‌ای از لینک‌های دسترسی را تعریف می‌کند +* `
`محتوای مستقل و فارق از محیط را مشخص می‌کند +* `
` یک بخش را در فایل مشخص می‌کند +* `
` بخش سربرگ یک صفحه را مشخص می‌کند +* `
` بخش محتوای اصلی صفحه را مشخص می‌کند +* `` محتوای جانبی نسبت به جایی که در آن قرار گرفته را مشخص می‌کند (مانند منوی کناری) +* `
` بخش پاورقی یک سند را مشخص می‌کند +* `` بک زمان (یا تاریخ و زمان) را مشخص می‌کند + +اینجا نمونه‌ای از یک تمپلیت کامل داریم. آن را در فایل `blog/templates/blog/post_list.html` کپی کنید: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Django Girls blog + + +
+

Django Girls Blog

+
+ +
+ +

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.

+
+ +
+ +

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.

+
+ + +``` + +ما اینجا یک بخش `header` و دو بخش 0>article ایجاد کردیم. + +* بخش `header` شامل عنوان مقاله وبلاگ ماست - یک عنوان و یک لینک +* دو عنصر `article` شامل پست‌های وبلاگ ما به همراه تاریخ انتشار در یک عنصر `time`، یک عنصر`h2` با عنوان مقاله که قابل کلیک کردن است و عنصر `p` (paragraph) که برای متن مقاله استفاده شده است. + +چنین نتیجه ای به ما می‌دهد: + +![تصویر 11.4](images/step6.png) + +واای! ولی تا اینجا تمپلیت ما دقیقاً **اطلاعات یکسانی** را نمایش می‌دهد درحالیکه قبل‌تر در مورد این صحبت کردیم که تمپلیت به ما اجازه می‌دهد **اطلاعات متفاوتی** را در **قالب یکسان** نمایش دهیم. + +آن چیزی که واقعاً می‌خواهیم این است که پست‌های واقعی که در جنگو ادمین اضافه کرده‌ایم را نمایش دهد و این همان چیزی است که در ادامه سراغ آن خواهیم رفت. + +## فقط یک چیز دیگر: دیپلوی! + +خیلی خوب خواهد بود که همه اینها را به صورت آنلاین بر روی اینترنت ببینیم، درست است؟ پس بیایید یک بار دیگر به کمک PythonAnywhere وبسایت را منتشر کنیم: + +### کامیت کنید و کد را بر روی گیتهاب پوش کنید + +اول از همه ببینیم کدام فایل ها را به نسبت آخرین انتشار، تغییر داده ایم (این دستور را بر روی کامپیوتر خود اجرا کنید و نه در PythonAnywhere): + +{% filename %}خط فرمان{% endfilename %} + + $ git status + + +مطمئن باشید که در دایرکتوری `djangogirls` هستید و به `گیت` اجازه دهید تمام تغییرات ایجاد شده در این دایرکتوری را در نظر بگیرد: + +{% filename %}خط فرمان{% endfilename %} + + $ git add . + + +قبل از آنکه همه فایل‌ها را آپلود کنیم بگذارید ببینیم که `گیت` چه فایل‌هایی را آپلود خواهد کرد (تمام فایل‌هایی که `گیت` آپلود خواهد کرد الان سبز رنگ دیده می‌شوند): + +{% filename %}خط فرمان{% endfilename %} + + $ git status + + +حالا وقت آن است که بگوییم تمام این تغییرات را در سابقه خودش ذخیره کند. الان می‌خواهیم یک "commit message" یا پیغام کامیت تعریف کنیم که تغییرات ما را توضیح می‌دهد. هرچیزی که دلتان بخواهد می‌توانید تایپ کنید، اما بهتر است توضیحاتی را بنویسید که بعداً متوجه شوید در این مرحله چه تغییراتی داده‌اید. + +{% filename %}خط فرمان{% endfilename %} + + $ git commit -m "Changed the HTML for the site." + + +> **نکته** مطمئن باشید که از علامت نقل قول دوتایی در اطراف پیغام مربوط به کامیت استفاده کنید. + +وقتی این کار را انجام دادیم تغییرات را در گیتهاب آپلود (push) می‌کنیم: + +{% filename %}خط فرمان{% endfilename %} + + $ git push + + +### فایل‌های جدیدتان را بر روی PythonAnywhere ببرید و صفحه وبسایت را دوباره بارگذاری کنید + +* سپس دوباره به صفحه **Bash console** خود در [PythonAnywhere](https://www.pythonanywhere.com/consoles/) بروید (یا یک کنسول خط فرمان جدید باز کنید) و دستورات زیر را اجرا کنید: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +یادتان باشد که `` را با زیر دامنه اصلی خود در PythonAnywhere عوض کنید البته بدون آکولادها. نام زیردامنه شما معمولاً همان نام کاربری شما در PythonAnywhere است اما در مواردی ممکن است کمی متفاوت باشد (مثلاً اگر نام کاربری شما دارای حروف بزرگ باشد). اگر این دستور کار نکرد از `ls` (لیست کردن فایل‌ها) استفاده کنید تا زیردامنه خود را پیدا کنید و سپس با دستور `cd` به آن دایرکتوری بروید. + +حالا منتظر شوید تا فایل‌های شما دانلود شوند. اگر می‌خواهید بدانید که فایل‌ها رسیده اند یا نه به صفحه **"Files"** بروید و کدهای خود بر روی PythonAnywhere را ببینید (شما میتوانید به بقیه فایل‌های خود در PythonAnywhere، از طریق کلید منو در کنسول دسترسی پیدا کنید). + +* سرانجام به صفحه ["Web"](https://www.pythonanywhere.com/web_app_setup/) بروید و **Reload** را بزنید. + +تغییرات شما آنلاین شده اند! صفحه وبسایت خود را در مرورگرتان دوباره بارگذاری کنید. تغییرات دیده خواهند شد. :) \ No newline at end of file diff --git a/fa/html/images/step1.png b/fa/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/fa/html/images/step1.png differ diff --git a/fa/html/images/step3.png b/fa/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/fa/html/images/step3.png differ diff --git a/fa/html/images/step4.png b/fa/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/fa/html/images/step4.png differ diff --git a/fa/html/images/step6.png b/fa/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/fa/html/images/step6.png differ diff --git a/fa/images/application.png b/fa/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/fa/images/application.png differ diff --git a/fa/installation/README.md b/fa/installation/README.md new file mode 100644 index 00000000000..d5fde0951c5 --- /dev/null +++ b/fa/installation/README.md @@ -0,0 +1,69 @@ +# اگر این آموزش را در خانه دنبال می‌کنید + +اگر این آموزش را در خانه دنبال می‌کنید و نه در یکی از [رویدادهای دختران جنگو](https://djangogirls.org/events/)، می‌توانید به طور کامل از این بخش بگذرید و به بخش [اینترنت چگونه کار می‌کند](../how_the_internet_works/README.md) بروید. + +به دلیل اینکه ما نصب کردن هر چیزی را که دراین سری آموزشی نیاز است، در محل مورد نیاز بیان می‌کنیم. این صفحه تنها برای بیان همه دستورات نصب در یک مکان، اضافه شده است (که برای برخی کارگاه‌ها مفید است). شما می‌توانید هرچیزی که در این بخش آمده است را نصب کنید. اما اگر ترجیح می‌دهید پیش از نصب چند ابزار و نرم افزار روی کامپیوترتان، در مورد آن‌ها یاد بگیرید، از این بخش عبور کنید. ما نحوه‌ی نصب هر چیزی را، زمانی که به آن نیاز داشتید، توضیح می‌دهیم. + +موفق باشید! + +# اگر در یک کارگاه شرکت کرده‌اید + +اگر در یکی از [رویدادهای جنگو برای دختران](https://djangogirls.org/events/) شرکت کرده اید: + +* ممکن است کارگاه شما یک "جلسه نصب پیش‌نیازها" قبل از رویداد اصلی داشته باشد. اگر در جلسه نصب پیش‌نیازها هستید، این بخش مخصوص شماست! برای نصب هرچیزی که در این رویداد نیاز دارید، دستورالعمل‌های این بخش را دنبال کنید، و در صورت نیاز از مربی‌ها کمک بگیرید. سپس در کارگاه اصلی، می‌توانید از دستورالعمل‌های نصب که در آموزش اصلی با آنها مواجه می‌شوید، عبور کنید. +* ممکن است برگزار کنندگان کارگاه، از شما بخواهند تا سعی کنید همه چیز را قبل از شروع کارگاه روی کامپیوترتان نصب کنید. اگر از شما این درخواست را داشته اند، این بخش برای شماست! به بهترین نحو دستورالعمل های این بخش را دنبال کنید. اگر نتوانستید چیزی را نصب کنید، در کارگاه اصلی، زمانی که به دستورالعمل‌های نصب آن بخش در آموزش اصلی می‌رسید، می‌توانید از مربی‌ها کمک بگیرید. +* اگر کارگاه شما فاقد جلسه نصب پیش نیازها بود (یا شما نتوانستید در آن شرکت کنید)، و اگر برگزارکنندگان از شما نخواستند که همه چیز را پیش از شروع رویداد نصب کنید، از این بخش عبور کنید و مستقیم به بخش [ اینترنت چگونه کار می‌کند](../how_the_internet_works/README.md) بروید. شما هر چیزی را که به آن نیاز دارید، در طول آموزش اصلی نصب خواهید کرد. + +# نصب پیش‌نیازها + +در این آموزش شما یک وبلاگ خواهید ساخت. برای انجام این کار، در خلال روند آموزش، به شما نحوه‌ی نصب نرم‌افزارهای مختلف روی کامپیوترتان و نحوه‌ی راه اندازی چند حساب اینترنتی گفته خواهد شد. این بخش شامل تمام مراحل نصب و دستورالعمل‌های ثبت نام است (که برای بعضی از کارگاه‌ها مفید است). + + {% include "/chromebook_setup/instructions.md" %} + + + +# معرفی کوتاه کنسول خط فرمان {#command-line} + +بسیاری از مراحل زیر به "کنسول"، "ترمینال"، "پنجره دستورات" یا "خط فرمان" اشاره می‌کنند ـ همه آنها یک معنا دارند: یک پنجره روی کامپیوتر شما که می‌توانید دستوراتی را در آن وارد کنید. زمانی که به آموزش اصلی رسیدید، در مورد خط فرمان بیشتر می‌آموزید. فعلاً، اصلی‌ترین موردی که باید بدانید نحوه باز کردن یک پنجره خط فرمان و شکل ظاهری آن است: +{% include "/intro_to_command_line/open_instructions.md" %} + +# نصب پایتون {#python} + +{% include "/python_installation/instructions.md" %} + +# نصب یک ویرایشگر متنی {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# نصب محیط مجازی و نصب جنگو {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# نصب گیت {#git} + +{% include "/deploy/install_git.md" %} + +# ساخت حساب کاربری GitHub {#github-account} + +به [GitHub.com](https://www.github.com) بروید و برای یک حساب کاربری جدید و رایگان،‌ ثبت نام کنید. از بخاطر سپردن رمز عبور خود اطمینان حاصل کنید (اگر از یک نرم افزار مدیریت رمزهای عبور استفاده میکنید، رمز عبور جدید را به آن اضافه کنید). + +# ساخت حساب کاربری PythonAnywhere {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# شروع کنید و آموزش‌ها را بخوانید + +تبریک، شما کاملاً آماده شروع هستید. اگر هنوز پیش از شروع کارگاه زمان دارید، خواندن بخش‌های ابتدایی برایتان مفید خواهد بود: + +* [اینترنت چگونه کار می‌کند](../how_the_internet_works/README.md) + +* [معرفی خط‌فرمان](../intro_to_command_line/README.md) + +* [معرفی پایتون](../python_introduction/README.md) + +* [جنگو چیست؟](../django/README.md) + +# از کارگاه لذت ببرید! + +زمانی که کارگاه را شروع کردید، می‌توانید مستقیماً به بخش [اولین پروژه جنگو شما](../django_start_project/README.md) بروید، چون قبلاً مطالب بخش‌های پیش از آن را مرور کرده اید. diff --git a/fa/intro_to_command_line/README.md b/fa/intro_to_command_line/README.md new file mode 100644 index 00000000000..331bb60fb29 --- /dev/null +++ b/fa/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# آشنایی با خط فرمان + +> برای خوانندگان در خانه: این فصل در ویدئو [دوست جدید شما: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8) توضیح داده شده است. + +هیجان انگیز است! شما تا چند دقیقه دیگر اولین خط کد خود را خواهید نوشت! :) + +**بگذارید شما را به اولین دوست جدیدتان معرفی کنیم: خط فرمان!** + +این مراحل به شما یاد می‌دهد که چطور از این پنجره سیاهی استفاده کنید که همه هکرها از آن استفاده می‌کنند. ممکن است در ابتدا کمی ترسناک به نظر بیاید ولی این فقط یک علامت است که نشان می‌دهد سیستم منتظر فرمان‌های شماست. + +> **نکته** توجه داشته باشید که در این دوره آموزشی ما بارها از دایرکتوری یا پوشه صحبت کرده ایم هر دو این مفاهیم یکی هستند. + +## خط فرمان چیست؟ + +این پنجره که معمولاً **command line** یا **صفحه خط فرمان** گفته می‌شود یک نرم افزار مبتنی بر متن است که برای مشاهده، مدیریت و تغییر فایل‌ها از آن استفاده می‌شود. شباهت زیادی به ویندوز اکسپلورر یا فایندر در مک دارد با این تفاوت که اینترفیس گرافیکی ندارد. نام های دیگر خط فرمان این‌ها هستند: *cmd*, *CLI*, *prompt*, *console* ، *terminal*. + +## اینترفیس خط فرمان را باز کنید + +برای اینکه کمی تجربه کنیم باید ابتدا اینترفیس خط فرمان را باز کنید. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Prompt + +شما صفحه‌ای سیاه یا سفید خواهید دید که منتظر دستورات شماست. + + + +اگر بر روی مک یا لینوکس کار می‌کنید، ممکن است یک علامت `$` ببینید: + +{% filename %}خط فرمان{% endfilename %} + + $ + + + + + + +بر روی ویندوز، احتمالاً علامت `>` را خواهید دید: + +{% filename %}خط فرمان{% endfilename %} + + > + + +به بخش لینوکس در بالا نگاه کنید، چیزی که در آنجا می‌بینید بسیار شبیه چیزی است که در وبسایت PythonAnywhere و در ادامه این دوره آموزشی خواهید دید. + + + +هر دستور با یک پیشوند `$` یا `>` و یک اسپیس نشان داده شده‌اند، ولی شما نباید آن‌ها را تایپ کنید کامپیوتر آن را قبل از هر دستور شما گذاشته است. :) + +> یک نکته کوچک: ممکن است در کامپیوتر شما چیزهایی شبیه به `C:\Users\ola>` یا `Olas-MacBook-Air:~ ola$` قبل از علامت پرامت باشد که کاملاً طبیعی است. + +به بخشی که از ابتدای خط تا علامت `$` یا `>` را شامل می‌شود *command line prompt* یا به طور خلاصه *prompt* گفته می‌شود (prompt به معنی تشویق کردن و برانگیختن است). این علامت شما را تشویق می‌کند تا جلوی آن چیزی بنویسید. + +در این دوره آموزشی وقتی که از شما می‌خواهیم که دستوری را بنویسید، معمولاً در سمت چپ آن `$` یا `>` را گذاشته‌ایم. این تکه را در نظر نگیرید و فقط دستور را که بلافاصله بعد از پرامت قرار دارد تایپ کنید. + +## اولین دستور شما (وای!) + +بیایید با تایپ این دستور شروع کنیم: + + + +{% filename %}خط فرمان{% endfilename %} + + $ whoami + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > whoami + + + + +و سپس کلید `enter` را بزنید. نتیجه این خواهد بود: + +{% filename %}خط فرمان{% endfilename %} + + $ whoami + olasitarska + + +همانطور که می‌بینید کامپیوتر نام کاربری شما را نشان می‌دهد. جالب نیست؟ :) + +> برای امتحان کردن هر دستور آن را کپی نکیند. با تایپ کردن بهتر یاد خواهید گرفت! + +## اصول اولیه + +هر سیستم عامل، مجموعه دستورات کمی متفاوت برای خط فرمان، با دیگر سیستم عامل‌ها دارد، بنابراین مطمئن شوید که دستورالعمل‌های سیستم عامل خود را دنبال می‌کنید. حالا این را امتحان کنیم، آماده اید؟ + +### دایرکتوری جاری + +بسیار خوب است که بفهمیم در کدام دایرکتوری هستیم. این دستور را تایپ کنید و کلید `enter` را بزنید: + + + +{% filename %}خط فرمان{% endfilename %} + + $ pwd + /Users/olasitarska + + +> نکته: 'pwd' مخفف 'print working directory' به معنی 'دایرکتوری در حال اجرا را چاپ کن' است. + + + + + +{% filename %}خط فرمان{% endfilename %} + + > cd + C:\Users\olasitarska + + +> نکته: 'cd' مخفف 'change directory' به معنی 'دایرکتوری را عوض کن'. در نرم افزار PowerShell در ویندوز شما می‌توانید مانند لینوکس یا مک از دستور pwd استفاده کنید. + + + +احتمالاً چیزی شبیه به این را بر روی کامپیوتر خود دیده اید. وقتی پنچره خط فرمان را باز می‌کنید معمولاً در دایرکتوری home اکانت کاربری خود هستید. + +* * * + +### چیزهای بیشتر در مورد یک فرمان + +بسیاری از فرمان‌هایی که شما می‌توانید در پرامت فرمان تایپ کنید یک راهنمای داخلی دارند که می‌توانید آن را ببینید و بخوانید! مثلاٌ برای آنکه در مورد فرمان دایرکتوری جاری بیشتر بدانید: + + + +macOS و لینوکس یک فرمان `man` دارند که در مورد فرمان‌ها کمک زیادی می‌کند. دستور `man pwd` را امتحان کنید و ببینید که چه می‌شود. یا دستور `man` را قبل از فرمان‌های دیگر قرار دهید تا راهنمای داخلی آن‌ها را ببینید. خروجی فرمان `man` صفحه بندی شده است. با کمک کلید اسپیس به صفحه بعد بروید و با زدن `q` از راهنما خارج شوید. + + + + + +اضافه کردن یک پسوند `/?` به اکثر فرمان‌ها باعث می‌شود که صفحه راهنما نشان داده شود. لازم است صفحه را به سمت بالا اسکرول کنید تا تمام آن را ببینید. `cd /?` را امتحان کنید. + + + +### لیست کردن فایل‌ها و دایرکتوری‌ها + +چی توش هست؟ خوبه که بفهمیم. نگاه کنید: + + + +{% filename %}خط فرمان{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}خط فرمان{% 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 + ... + + +> نکته: در PowerShell شما می‌توانید مانند لینوکس یا macOS از دستور 'ls' استفاده کنید. + +* * * + +### تغییر دایرکتوری جاری + +حالا به دایرکتوری Desktop کامپیوترمان برویم: + + + +{% filename %}خط فرمان{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}خط فرمان{% endfilename %} + + $ cd Desktop + + +توجه داشته باشید که ممکن است دایرکتوری Desktop به زبان کاربری تعیین شده در لینوکس شما ترجمه شود. اگر چنین اتفاقی افتاد لازم است که شما `Desktop` را با نام ترجمه شده عوض کنید؛ مثلاً برای زبان آلمانی با `Schreibtisch` عوض کنید. + + + + + +{% filename %}خط فرمان{% endfilename %} + + > cd Desktop + + + + +بررسی کنید که آیا واقعاً دایرکتوری جاری عوض شد: + + + +{% filename %}خط فرمان{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +بله درست شد! + +> نکته حرفه‌ای: اگر شما تایپ کنید `cd D` و بعد کلید `tab` را بر روی کیبورد بزنید، خط فرمان ادامه فرمان شما را تایپ خواهد کرد بنابراین سریعتر می‌توانید حرکت کنید. اگر دایرکتوری هایی که با "D" شروع می‌شوند بیشتر از یکی باشند، با دوبار زدن کلید `tab` لیستی از آن‌ها را خواهید دید. + +* * * + +### ساختن دایرکتوری + +چطور است که یک دایرکتوری آزمایشی بر روی دسکتاپ بسازیم؟ به این روش می‌توانید انجام دهید: + + + +{% filename %}خط فرمان{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > mkdir practice + + + + +این دستور کوچک یک دایرکتوری به نام `practice` بر روی دسکتاپ شما خواهد ساخت. شما می‌توانید با اجرا کردن دستور `ls` یا `dir` بررسی کنید که آیا این دایرکتوری روی Desktop هست یا نه! آن را امتحان کنید. :) + +> نکته حرفه‌ای: اگر دوست ندارید یک دستور را بارها و بارها تایپ کنید، کلید `up arrow` یا جهت بالا و `down arrow` یا جهت پایین را بر روی کیبورد بزنید تا فرمان‌هایی که اخیراً زده اید را ببینید. + +* * * + +### تمرین! + +یک چالش کوچک برای شما: در این دایرکتوری `practice` که اخیراٌ ساخته اید، یک دایرکتوری به نام `test` بسازید. (از دستور `cd` و `mkdir` استفاده کنید.) + +#### راه حل: + + + +{% filename %}خط فرمان{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +تبریک! :) + +* * * + +### پاک‌سازی + +نمی‌خواهیم همه جا را شلوغ کنیم، پس بیایید همه چیزهایی که ساخته ایم را پاک کنیم. + +اول از همه باید به Desktop برویم: + + + +{% filename %}خط فرمان{% endfilename %} + + $ cd .. + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > cd .. + + + + +استفاده کردن از `..` به همراه دستور `cd` باعث خواهد شد که به دایرکتوری parent بروید (parent دایرکتوری است که دایرکتوری جاری درون آن قرار دارد). + +بررسی کنید که کجا هستید: + + + +{% filename %}خط فرمان{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +حالا وقت پاک کردن دایرکتوری `practice` است: + +> **توجه**: پاک کردن فایل‌ها با `del` یا `rmdir` یا `rm` غیر قابل بازگشت است به این معنی که *فایل‌های پاک شده برای همیشه از بین می‌روند*! بنابراین هنگام کار با این دستورها بسیار احتیاط کنید. + + + +{% filename %}خط فرمان{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +انجام شد! برای اینکه مطمئن شوید پاک شده است آن را چک کنید: + + + +{% filename %}خط فرمان{% endfilename %} + + $ ls + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > dir + + + + +### خروج + +برای الان کافی است! شما می‌توانید به راحتی خط فرمان را ببندید. بیایید به روش هکرها انجامش دهیم، باشه؟ :) + + + +{% filename %}خط فرمان{% endfilename %} + + $ exit + + + + + + +{% filename %}خط فرمان{% endfilename %} + + > exit + + + + +با حال بود، نه؟ :) + +## چکیده + +اینجا چکیده‌ای از دستورات مهم آورده شده: + +| دستورات (Windows) | دستورات (Mac OS / Linux) | توضیحات | مثال | +| ----------------- | ------------------------ | --------------------------- | -------------------------------------------------- | +| exit | exit | بستن پنجره خط فرمان | **exit** | +| cd | cd | تغییر دایرکتوری | **cd test** | +| cd | pwd | نشان دادن دایرکتوری جاری | **cd** (Windows) or **pwd** (Mac OS / Linux) | +| dir | ls | لیست کردن دایرکتوری/فایل ها | **dir** | +| copy | cp | کپی کردن فایل | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | جا به جا کردن فایل | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | ساختن یک دایرکتوری جدید | **mkdir testdirectory** | +| rmdir (or del) | rm | حذف کردن یک فایل | **del c:\test\test.txt** | +| rmdir /S | rm -r | حذف کردن یک دایرکتوری | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | دیدن راهنمای یک دستور | **cd /?** (Windows) or **man cd** (Mac OS / Linux) | + +این‌ها تعداد بسیار کمی از دستوراتی هستند که می‌توانید در خط فرمان اجرا کنید، اما امروز چیزی بیشتر از این‌ها لازم ندارید. + +اگر علاقمند هستید، وبسایت [ss64.com](http://ss64.com) مرجع کاملی از انواع فرمان‌ها برای سیستم عامل‌های مختلف دارد. + +## آماده هستید؟ + +حالا در پایتون شیرجه بزنیم! \ No newline at end of file diff --git a/fa/intro_to_command_line/open_instructions.md b/fa/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..de4c44b8456 --- /dev/null +++ b/fa/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +بسته به نسخه ویندوز و نیز نوع کیبورد شما، یکی از موارد زیر برای شما یک command window یا خط فرمان باز خواهد کرد (شاید باید کمی امتحان کنید ولی لازم نیست تمام این پیشنهادات را آزمایش کنید): + +- به منوی استارت یا screen بروید و عبارت "Command Prompt" را در بخش جستجو وارد کنید. +- این مسیر را دنبال کنید Start menu → Windows System → Command Prompt. +- این مسیر را دنبال کنید Start menu → All Programs → Accessories → Command Prompt. +- به بخش Start بروید و موس را روی صفحه تکان دهید و به گوشه پایین سمت چپ بروید و بر روی فلش به سمت پایین که ظاهر می‌شود کلید کنید (در یک سیستم تاچ اسکرین باید از پایین اسکرین را لمس کنید و دست خود را بالا بکشید). صفحه App ها باید باز شود. بر روی Command Prompt در بخش Windows System کلیک کنید. +- کلید مخصوص Windows را بر روی کیبورد نگه دارید و دکمه "X" را بزنید. "Command Prompt" را از پنجره‌ای که باز می‌شود انتخاب کنید. +- کلید Windows را نگه دارید و دکمه "R" را بزنید تا پنجره "Run" بازشود. تایپ کنید "cmd" و کلید OK را بزنید. + +![در پنجره "Run" بنویسید "cmd"](../python_installation/images/windows-plus-r.png) + +بعداً در این دوره آموزشی احتیاج دارید که دو پنجره خط فرمان به طور همزمان باز داشته باشید. با این حال در برخی نسخه‌های ویندوز، اگر یک پنجره خط فرمان باز داشته باشید و از همان روش برای باز کردن یک پنجره خط فرمان دیگری استفاده کنید به جای باز شدن پنجره جدید، همان قبلی دوباره نشان داده می‌شود. حالا روی کامپیوتر خود امتحان کنید و ببینید چه اتفاقی می‌افتد! اگر فقط یک پنجره خط فرمان دریافت کردید، یک روش دیگر از این لیست بالا را امتحان کنید. حداقل یکی از این‌ها باید یک پنجره جدید خط فرمان بازکند. + + + + + +به اینجا بروید Launchpad → Other → Terminal. + + + + + +احتمالاً Applications → Accessories → Terminal یا Applications → System → Terminal است که بستگی به سیستم کامپیوتر شما دارد. اگر در این آدرس‌ها پیدا نکردید سعی کنید با جستجو در گوگل جای آن را پیدا کنید. :) + + diff --git a/fa/python_installation/README.md b/fa/python_installation/README.md new file mode 100644 index 00000000000..53720da3016 --- /dev/null +++ b/fa/python_installation/README.md @@ -0,0 +1,15 @@ +# بیایید پایتون را شروع کنیم + +بالاخره به اینجا رسیدیم! + +اما در ابتدا بگذارید که به شما بگوییم پایتون چیست. پایتون یک زبان برنامه نویسی بسیار رایج است که می‌تواند برای ساخت وبسایت، بازی‌ها، نرم افزارهای علمی، گرافیک و بسیاری امور دیگر استفاده شود. + +پایتون به اواخر دهه 1980 باز می‌گردد و هدف اصلی آن این بود که زبانی طراحی شود که خواندن آن برای افراد هم راحت باشد (و نه اینکه صرفاً ماشین‌ها راحت باشند!). به خاطر همین است که خواندن آن نسبت به بقیه زبان‌ها ساده تر است، اما نگران نباشید، پایتون واقعاً قدرتمند است! + +# نصب و راه اندازی پایتون + +> **نکته** اگر از Chromebook استفاده می‌کنید، از این بخش رد شوید و دستورالعمل‌های بخش [نصب Chromebook](../chromebook_setup/README.md) را پیگیری کنید. +> +> **نکته** اگر مراحل [نصب و راه‌اندازی](../installation/README.md) را طی کرده‌اید، نیازی به انجام دوباره آن نیست. شما می‌توانید به بخش بعد بروید! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/fa/python_installation/images/add_python_to_windows_path.png b/fa/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/fa/python_installation/images/add_python_to_windows_path.png differ diff --git a/fa/python_installation/images/python-installation-options.png b/fa/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/fa/python_installation/images/python-installation-options.png differ diff --git a/fa/python_installation/images/windows-plus-r.png b/fa/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/fa/python_installation/images/windows-plus-r.png differ diff --git a/fa/python_installation/instructions.md b/fa/python_installation/instructions.md new file mode 100644 index 00000000000..40f621ebbb0 --- /dev/null +++ b/fa/python_installation/instructions.md @@ -0,0 +1,117 @@ +> برای خوانندگان در خانه: این فصل در ویدئو [نصب پایتون و ویرایشگر کد](https://www.youtube.com/watch?v=pVTaqzKZCdA) توضیح داده شده است. +> +> این قسمت بر اساس دوره آموزشی Geek Girls Carrots نوشته شده است.(https://github.com/ggcarrots/django-carrots) + +جنگو با پایتون نوشته شده است. برای انجام هر کاری در جنگو، به زبان پایتون احتیاج داریم. بیایید با نصب پایتون شروع کنیم! ما می‌خواهیم شما آخرین نسخه پایتون 3 را نصب کنید، بنابراین اگر هرنسخه قدیمی تری دارید باید آن را به روزرسانی کنید. اگر پایتون نسخه {{ book.py_min_version }} یا بالاتر دارید، خوب است. + +حتی اگر بر روی کامپیوتر شما Anaconda نصب شده است، لطفاً پایتون معمولی را به روش زیر نصب کنید. + + + +ابتدا چک کنید که کامپیوتر شما دارای ویندوز 32-bit است یا 64-bit، در ردیف "System type" در صفحه System Info می‌توانید این را متوجه شوید. برای پیدا کردن این صفحه یکی از کارهای زیر را انجام دهید: + +* دکمه Windows و دکمه Pause/Break را همزمان روی کیبورد فشار دهید +* Control Panel را از منو ویندوز باز کنید، سپس به System & Security بروید و بعد از آن به System بروید +* دکمه Windows را فشار دهید، سپس مسیر Settings > System > About را دنبال کنید +* منوی Start ویندوز را برای یافتن "System Information" جستجو کنید. برای این کار بر روی منوی Start کلیک کنید یا کلید Windows را بزنید، سپس شروع به تایپ کردن `System Information` کنید. این کار باعث خواهد شد پیشنهادهای مختلف در هنگام تایپ کردن به شما نشان داده شود. شما می‌توانید گزینه System Information‌ را به محض ظاهر شدن، انتخاب کنید. + +می‌توانید پایتون برای ویندوز را از وبسایت https://www.python.org/downloads/windows/ دانلود کنید. بر روی لینک "Latest Python 3 Release - Python x.x.x" کلیک کنید. اگر کامپیوتر شما نسخه **64-bit** ویندوز را اجرا می‌کند، **Windows x86-64 executable installer** را دانلود کنید. در غیر اینصورت، **Windows x86 executable installer** را دانلود کنید. پس از دانلود کردن اینستالر، باید آن را اجرا کنید (بر روی آن دوبار کلیک کنید) و دستورالعمل‌ها را دنبال کنید. + +نکته قابل توجه: در هنگام نصب پنجره‌ای را خواهید دید به نام "Setup". مطمئن شوید که گزینه "Add Python {{ book.py_version }} to PATH" یا "Add Python to your environment variables"را انتخاب کرده‌اید و سپس بر روی "Install Now" که اینجا می‌بینید، کلیک کنید (اگر نسخه‌‌های دیگری را نصب کنید ممکن است کمی با این متفاوت باشد): + +![فراموش نکنید که پایتون را به Path اضافه کنید](../python_installation/images/python-installation-options.png) + +وقتی که نصب کامل شد، یک پنجره خواهید دید که شما را به یک لینک برای آموزش بیشتر در مورد پایتون و نیز در مورد نسخه‌ای که نصب کرده‌اید ارجاع می‌دهد. این پنجره را کنسل کنید و یا ببندید - شما در همین دوره آموزشی بیشتر در مورد پایتون یاد خواهید گرفت! + +نکته: اگر از نسخه‌های قدیمی‌تر ویندوز استفاده می‌کنید (7، Vista یا نسخه‌های قدیمی‌تر) و نصب پایتون نسخه {{ book.py_version }} با خطا مواجه شد، تمام آپدیت‌های ویندوز را نصب کنید و دوباره برای نصب پایتون تلاش کنید. اگر همچنان با خطا مواجه شدید، سعی کنید پایتون نسخه {{ book.py_min_release }} را از [Python.org](https://www.python.org/downloads/windows/) نصب کنید. + +> جنگو {{ book.django_version }} به پایتون {{ book.py_min_version }} یا بالاتر نیاز دارد که ویندوز XP یا نسخه‌های قدیمی‌تر را پشتیبانی نمی‌کند. + + + + + +> **نکته** قبل از نصب پایتون بر روی macOS، باید مطمئن شوید که تنظیمات Mac‌، اجازه نصب پکیج‌هایی را که در App Store‌ نیستند، می‌دهد. به System Preferences بروید (در پوشه Applications است)، بر روی "Security & Privacy," کلیک کنید و به تب "General" بروید. اگر "Allow apps downloaded from:" بر روی "Mac App Store" تنظیم شده بود آن را به گزینه "Mac App Store and identified developers" تغییر دهید. + +شما باید به آدرس https://www.python.org/downloads/ بروید و آخرین نسخه پایتون را دانلود کنید: + +* فایل *macOS installer* را دانلود کنید، +* بر روی *python-{{ book.py_release }}-macos11.pkg* دوبار کلیک کنید تا نصب‌کننده نرم‌افزار فعال شود. + + + + + +احتمال زیادی دارد که شما بر روی کامپیوترتان پایتون داشته باشید. برای چک کردن آنکه آیا پایتون دارید (یا اینکه نسخه آن چیست)، یک کنسول باز کنید و دستورات زیر را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +اگر نسخه نصب شده دیگری از پایتون دارید حداقل {{ book.py_min_version }} (یا مثلاً {{ book.py_min_release }})، نیازی به به‌‌روزرسانی ندارید. اگر پایتون نصب شده ندارید یا نسخه دیگری را می‌خواهید، اول باید به کمک دستورات زیر، کنترل کنید که از کدام توزیع لینوکس استفاده می‌کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +سپس بسته به نتیجه، یکی از روش‌های نصب زیر را به کار ببرید. + + + + + +این دستور را در کنسول تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ sudo apt install python3 + + + + + + +این دستور را در کنسول تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ sudo dnf install python3 + + +اگر بر روی نسخه‌های قدیمی Fedora کار می‌کنید ممکن است پیغام خطایی بگیرید که `dnf` پیدا نشد. در این مورد، باید به جای آن از `yum` استفاده کنید. + + + + + +این دستور را در کنسول تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ sudo zypper install python3 + + + + +برای بررسی موفقیت‌آمیز بودن نصب، یک خط فرمان باز کنید و دستور `python3 + +

{% filename %}خط فرمان{% endfilename %}

+ +
$ python3 --version
+Python {{ book.py_release }}
+`
+ +نسخه نمایش داده شده ممکن است با {{ book.py_release }} متفاوت باشد اما باید آن چیزی باشد که در موقع نصب انتخاب کرده‌اید. + +**نکته:** اگر بر روی ویندوز کار می‌کنید و خطای `python3` wasn't found را گرفتید، از دستور `python` (بدون `3`) استفاده کنید و ببنید آیا ممکن است که نسخه پایتون {{ book.py_min_version }} یا بالاتر باشد. اگر این کار هم موثر نبود، یک خط فرمان جدید بازکنید و دوباره تلاش کنید؛ اگر خط فرمان شما از قبل از نصب پایتون باز مانده باشد ممکن است چنین خطایی دریافت کنید. + +* * * + +اگر جایی تردید داشتید یا مشکل دیگری بوجود آمد که نمی‌دانستید چه باید بکنید، لطفاً از مربی خود کمک بگیرید! گاهی وقت‌ها اوضاع به خوبی پیش نمی‌رود و بهتر است از فرد باتجربه‌تری کمک بگیرید. \ No newline at end of file diff --git a/fa/python_introduction/README.md b/fa/python_introduction/README.md new file mode 100644 index 00000000000..acd4182febf --- /dev/null +++ b/fa/python_introduction/README.md @@ -0,0 +1,1071 @@ +{% set warning_icon = '' %} + +# آشنایی با پایتون + +> قسمت‌هایی از این بخش بر اساس دوره آموزشی Geek Girls Carrots طراحی شده است (https://github.com/ggcarrots/django-carrots). + +حالا بیایید کمی کد بنویسیم! + +## خط فرمان پایتون + +> > برای کسانی که در خانه مطالعه می‌کنند این بخش در ویدئو [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U) توضیح داده شده است. + +برای آنکه با پایتون کار کنیم باید یک کنسول *خط فرمان* روی کامپیوتر خود باز کنید. احتمالا بلد هستید که چطور این کار را بکنید، در بخش [آشنایی با خط فرمان](../intro_to_command_line/README.md) آن را یاد گرفته‌اید. + +زمانی که آماده بودید، دستورالعمل‌های زیر را دنبال کنید. + +ما می‌خواهیم یک کنسول پایتون باز کنیم، پس در کنسول خط فرمان ویندوز `python` و در ترمینال لینوکس/ مک `python3` را تایپ کنید و `enter` بزنید. + +{% filename %}خط فرمان{% endfilename %} + + $ python3 + Python {{ book.py_release }} (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## اولین دستور پایتونی شما! + +پس از اجرای دستور Python، خط فرمان به `>>>` تغییر می‌کند. این تغییر برای ما به معنای آن است که در حال حاضر فقط می‌توانیم از دستورات زبان پایتون استفاده کنیم. شما نیازی به تایپ `>>>` ندارید - خط فرمان پایتون این کار را برایتان میکند. + +اگر هر زمان قصد خروج از خط فرمان پابتون را داشتید `exit()` را تایپ کنید یا از `Ctrl + Z` در ویندوز و `Ctrl + D` در مک/لینوکس استفاده کنید. پس از خروج `>>>` را دیگر نمی‌بینید. + +ما الان نمی‌خواهیم از خط فرمان پایتون خارج شویم. ما می‌خواهیم چیزهای بیشتری در مورد آن یاد بگیریم. بیایید با کمی ریاضیات شروع کنیم، مانند `2 + 3`3 و زدن `enter`. + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +خوبه! دیدید که جواب چگونه ظاهر شد؟ پایتون ریاضیات را می‌فهمد! می‌توانید دستور دیگری مثل این را امتحان کنید: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +برای اجرای محاسبات نمایی، مانند ۲ به توان ۳، تایپ میکنیم: {% filename %}خط فرمان{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +کمی با دستورات مختلف محاسباتی تفریح کنید و دوباره آموزش را ادامه دهید. :) + +همانطور که می‌بینید، پایتون محاسبه‌گر بسیار خوبی است. آیا به این فکر می‌کنید که چه کارهای دیگری می‌شود انجام داد… + +## رشته‌های متنی + +چطور است با اسم شما شروع کنیم؟ نام خود را بین علامت نقل قول به صورت زیر بنویسید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +شما همین الان اولین رشته متنی خود را ساختید! رشته متنی دنباله‌ای از کاراکترها است که می‌توان آن‌ها را توسط کامپیوتر پردازش کرد. رشته متنی همواره باید با یک علامت شروع، و با همان پایان یابد. این علامت ممکن است نقل قول تکی یا آپاستروف (`'`) یا نقل قول دوتایی (`"`) باشد (در پایتون بین این دو فرقی نیست) این علامت ها به پایتون میگویند که حاوی یک رشته متنی هستند. + +رشته ها می‌توانند به همدیگر الحاق شوند. دستور زیر را امتحان کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +همچنین میتوانید یک رشته را در یک عدد ضرب کنید، رشته به تعداد آن عدد تکرار می‌شود: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +اگر نیاز داشتید تا یک علامت آپاستروف داخل رشته بیاورید، دو راه دارید. + +استفاده از علامت نقل قول دوتایی: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +یا استفاده از یک بک اسلش (`\`) پیش از علامت آپاستروف: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +خوب است، نه؟ برای دیدن نام خود با حروف بزرگ، تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +شما همین الان از **متد** `upper` روی رشته متنی استفاده کردید! یک متد (مانند `upper()`) دنباله‌ای از دستورات پایتونی است. زمانی که متد را صدا بزنید، آن دستورات روی یک شی ورودی (`"Ola"`) اعمال می‌شود. + +آیا می‌خواهید تعداد حروف نام خود را بدانید؟ یک **تابع** برای این کار هم هست! + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +به این فکر می‌کنید که چرا گاهی تابع را با یک `.` در انتهای یک رشته صدا می‌کنیم (مانند `"Ola".upper()`) و گاهی ابتدا یک تابع را صدا می‌زنیم و رشته را جلوی نام تابع داخل پرانتز می‌گذاریم؟ در بعضی موارد، توابع به اشیا تعلق دارند، مانند `upper()` ، که فقط میتواند روی رشته‌های متنی اعمال شود. در این موارد، تابع را یک **method** می‌نامیم. در موارد دیگر، توابع به چیزی تعلق ندارند و می‌توان آنها را روی انواع مختلفی از اشیا استفاده کرد، درست مانند `len()`. به همین دلیل است که `"Ola"` را به عنوان یک پارامتر ورودی به تابع `len` می‌دهیم. + +### چکیده + +بسیار خب، صحبت راجع به رشته‌ها کافی است. تا اینجا شما موارد زیر را یاد گرفته‌اید: + +- **خط فرمان** - تایپ دستورات (کد) و دیدن نتایج در خط فرمان پایتون +- ** اعداد و رشته‌های متنی** - در پایتون اعداد برای محاسبات ریاضی و رشته‌ها به عنوان اشیا متنی استفاده می‌شوند +- **عملگرها** مانند `+` و `*`، برای ساخت یک مقدار جدید، چند مقدار را با هم ترکیب می‌کنند +- **توابع**- مانند `upper()` و `len()`، که بر روی اشیا، اعمالی را انجام می‌دهند. + +موارد گفته شده، مبانی تمام زبان‌های برنامه‌نویسی است که ممکن است بعدا بیاموزید. برای کارهای سخت‌تر آماده هستید؟ حتماً آماده‌اید! + +## خطاها + +بیایید چیز جدیدی را امتحان کنیم. می‌توانیم طول یک عدد را همانطور که طول نام خودمان را پیدا می‌کنیم، به دست آوریم؟ تایپ کنید`len(304023)` و `enter` را بزنید: + +{% filename %}{{ warning_icon }} خط فرمان{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +اولین خطا را دریافت کردیم! به وسیله آیکن {{ warning_icon }} به شما اعلام می‌کنیم کدی که قرار است اجرا کنید، مطابق انتظار شما اجرا نخواهد شد. اشتباه کردن (حتی اشتباهات عمدی) بخش مهمی از یادگیری است! + +خطای دریافتی می‌گوید اشیا نوع "int" (اعداد طبیعی)، صفت "طول" ندارند. خب پس حالا چه کاری می‌توانیم بکنیم؟ می‌توانیم عددمان را به عنوان یک رشته متنی بنویسیم؟ رشته‌های متنی دارای طول هستند، درست است؟ + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +کار کرد! ما از تابع `str` داخل تابع `len` استفاده کردیم. `str()` هرچیزی را به رشته متنی تبدیل می کند. + +- تابع `str` ورودی‌اش را به **strings** تبدیل می‌کند +- تابع `int` ورودی‌اش را به **integers** تبدیل می‌کند + +> توجه: ما می‌توانیم اعداد را به متن تبدیل کنیم، اما همیشه نمی‌توان متن را به عدد تبدیل کرد - مثلا خروجی `int('hello')` چه چیزی می‌تواند باشد؟ + +## متغیرها + +یکی از مفاهیم مهم در برنامه‌نویسی، مفهوم متغیرها است. متغیر نامی است برای یک مقدار که بعدا بتوانید برای ارجاع به آن مقدار، از نام متغیر استفاده کنید. برنامه‌نویس‌ها از این متغیرها برای ذخیره داده، و بالا بردن خوانایی کد استفاده می‌کنند تا مجبور نباشند همه‌چیز را در ذهن نگه‌دارند. + +بیایید یک متغیر جدید به نام `name` بسازیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> name = "sara" +``` + +تایپ می‌کنیم name مساوی sara. + +همانطور که توجه کردید، برنامه شما مانند دفعات قبل خروجی نداد. پس از کجا بدانیم متغیر واقعا وجود دارد؟ نام متغیر `name` را وارد کنید و `enter` بزنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> name +'sara' +``` + +بلههههه! اولین متغیر شما!‌ :) همواره می‌توانید چیزی را که متغیر به آن ارجاع می‌دهد، تغییر دهید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> name = "Mahsa" +>>> name +'Mahsa' +``` + +می‌توانید از آن در توابع نیز استفاده کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> len(name) +5 +``` + +عالی است، نه؟ متغیرها می‌توانند هرچیزی باشند- مثل اعداد! این یکی را امتحان کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +ولی اگر نام اشتباه را استفاده کنیم چه می‌شود؟ می‌توانید حدس بزنید چه اتفاقی می‌افتد؟ بیایید امتحان کنیم! + +{% filename %}{{ warning_icon }} خط-فرمان{% endfilename %} + +```python +>>> city = "Tehran" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +یک خطا! همانطور که می‌بینید، پایتون دارای انواع مختلفی از خطاها است و این یکی خطا **NameError** نام دارد. اگر سعی کنید از متغیری که هنوز تعریف نشده استفاده کنید، پایتون این خطا را به شما می‌دهد. اگر بعداً به این خطا برخورد کردید، کد خود را برای اشتباه تایپی در نام متغیرها چک کنید. + +کمی این موارد را امتحان کنید تا ببینید چه کارهایی می‌توانید با آن انجام دهید! + +## تابع print + +این را امتحان کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> name = 'Mahsa' +>>> name +'Mahsa' +>>> print(name) +Mahsa +``` + +زمانی که فقط `name` را تایپ می‌کنید، مفسر پایتون با *ارائه‌ای* از رشته متنی داخل متغیر 'name' پاسخ می‌دهد، که این پاسخ دنباله کاراکترهای M-a-h-s-a درون علامت نقل قول است. وقتی که `print(name)` را اجرا می‌کنید، پایتون محتوای متغیر را در صفحه نمایش نشان می‌دهد، البته بدون علامت‌های نقل قول که مرتب‌تر است. + +بعداً خواهیم دید که `print()` زمانی که می‌خواهیم از داخل توابع چیزی را نمایش دهیم، یا زمانی که می‌خواهیم چندین خط از متن را نمایش دهیم، نیز مفید است. + +## لیست‌ها + +پایتون علاوه بر رشته ها و اعداد، انواع مختلفی از اشیا را دارد. و الان نوعی از اشیا را معرفی می‌کنیم که **list** نام دارند. لیست‌ها دقیقا همان چیزی هستند که فکرش را می‌کنید: یک نوع شی که خودش لیستی از اشیای دیگر است. :) + +حالا یک لیست بسازید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> [] +[] +``` + +بله، این لیست خالی است. آنقدر مفید نیست، درست است؟ بیایید یک لیست از اعداد بخت آزمایی بسازیم. ما نمی‌خواهیم یک عدد تکراری را انتخاب کنیم، پس اعداد بخت آزمایی را داخل یک متغیر می‌گذاریم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +بسیار خب، ما یک لیست داریم! چه کاری می‌توانیم با آن انجام دهیم؟ بیایید ببینیم چه تعداد عدد بخت آزمایی درون لیست داریم. هیچ ایده‌ای درمورد این که از چه تابعی باید استفاده کنیم، دارید؟ از قبل این را می‌دانید! + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +بله! تابع `len()` می‌تواند تعداد اشیای درون لیست را بدهد. بسیار مفید، درست است؟ حالا بیایید لیستمان را مرتب کنیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> lottery.sort() +``` + +این یکی هیچ خروجی نداد، بلکه فقط ترتیب قرارگرفتن اعداد در لیست را تغییر داد. بیایید دوباره لیست را چاپ کنیم و ببینیم چه اتفاقی افتاده: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +همانطور که می‌بینید، اعداد درون لیست از کمترین مقدار به بیشترین مقدار مرتب شده‌اند. تبریک! + +شاید بخواهیم ترتیب اعداد را برعکس کنیم. بیایید انجامش دهیم! + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +اگر می‌خواهید چیزی به لیست خود اضافه کنید، می‌توانید این دستور را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +اگر می‌خواهید فقط عدد اول را نمایش دهید، می‌توانید این کار با استفاده از **indexes** انجام دهید. ایندکس شماره‌ای است که نشان دهنده محل قرار گرفتن یک آیتم در لیست است. برنامه‌نویس‌ها ترجیح می‌دهند شمردن را از 0 شروع کنند. پس شماره اولین شی در لیست 0 است، بعدی 1 است و الی آخر. دستور زیر را امتحان کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +همانطور که می‌بینید، می‌توانید به اشیاء مختلف موجود در لیست به کمک نام لیست و ایندکس آن شیء که درون یک براکت آمده باشد، دسترسی پیدا کنید. + +برای حذف چیزی از داخل لیست، باید همانطور که در بالا یاد گرفتیم، از **ایندکس** و متد `pop()` استفاده کنید. بیایید یک مثال را امتحان کنیم و چیزی را که قبلا یاد گرفتیم، بهبود دهیم؛ ما اولین عدد لیست را حذف خواهیم کرد. + +{% filename %}خط فرمان{% 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] +``` + +مانند یک افسون عمل کرد! + +برای تفریح بیشتر، باقی ایندکس ها را نیز امتحان کنید:6 ،7، 1000، -1، -6، یا -1000. ببینید می‌توانید نتیجه را پیش از اجرای دستور، پیش بینی کنید؟ نتایج برای شما معنایی دارند؟ + +می توانید لیستی از متدهای مربوط به لیست‌ها را در این بخش از مستندات پایتون پیدا کنید: https://docs.python.org/3/tutorial/datastructures.html + +## دیکشنری‌ها + +> برای خوانندگان داخل خانه: این قسمت در ویدئوهای بخش [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c) پوشش داده شده است. + +دیکشنری شبیه به لیست است، ولی برای دسترسی به مقادیر باید از کلیدها به جای ایندکس‌های عددی استفاده کنید. یک کلید می‌تواند رشته متنی و یا عدد باشد. دستور زبان تعریف یک دیکشنری خالی این است: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> {} +{} +``` + +خروجی نشان می‌دهد که یک دیکشنری خالی ساخته‌اید. هورررااا! + +حالا سعی کنید که دستور زیر را بنویسید (سعی کنید اطلاعات خود را نیز جایگزین کنید): + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> participant = {'name': 'Mahsa', 'country': 'Iran', 'favorite_numbers': [7, 42, 92]} +``` + +با این دستور، یک متغیر به نام `participant` شامل سه جفت کلید-مقدار ساخته‌اید: + +- کلید `name` به مقدار `Mahsa` (یک شی `string` ) اشاره می‌کند +- کلید `country` به `'Iran'` (یک `string` دیگر) اشاره می‌کند +- و کلید `favorite_numbers` به `[7, 42, 92]` اشاره می‌کند (یک `لیست` با سه عدد داخل آن). + +می‌توانید محتوای هر کلید را طبق دستور زیر به تنهایی چک کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> print(participant['name']) +Mahsa +``` + +ببینید، دیکشنری مشابه یک لیست است. ولی نیازی نیست که ایندکس ها را بخاطر بیاورید - فقط کافی است نام کلید را بدانید. + +اگر مقدار کلیدی را که وجود ندارد از پایتون درخواست کنیم چه اتفاقی می‌افتد؟ می‌توانید حدس بزنید؟ بیایید امتحان کنیم و ببینیم! + +{% filename %}{{ warning_icon }} خط فرمان{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +ببینید، یک خطای دیگر! این یکی **KeyError** است. پایتون به شما کمک می‌کند و می‌گوید که کلید `'age'` در دیکشنری وجود ندارد. + +چه زمانی از لیست و چه زمانی از دیکشنری باید استفاده کرد؟ نکته خوبی است. قبل از دیدن خط بعد به پاسخ فکر کنید. + +- یک دنباله ترتیبی از آیتم ها نیاز دارید؟ لیست را انتخاب کنید. +- آیا نیاز است کلیدها و مقادیر را به همدیگر ارتباط دهید، که بعدا بتوانید به صورت کارآمد مقادیر را بوسیله کلیدها جستجو کنید؟ از یک دیکشنری استفاده کنید. + +دیکشنری‌ها، مانند لیست‌ها *تغییر پذیر* هستند، به معنای آن که می‌توان آن‌ها را پس از ساخت، تغییر داد. می‌توانید پس از ساختن دیکشنری، جفت کلید-مقدار جدید به آن اضافه کنید، مانند زیر: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +استفاده از متد `len()` روی دیکشنری، مانند لیست‌ها، تعداد جفت‌های کلید-مقدار را برمی‌گرداند. دستور زیر را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> len(participant) +4 +``` + +امیدواریم تا اینجا همه چیز برایتان روشن باشد. :) آماده تفریح بیشتر با دیکشنری‌ها هستید؟ ادامه آموزش را بخوانید تا با چیزهای شگفت انگیز روبرو شوید. + +می‌توانید از متد `pop()` برای حذف یک آیتم از دیکشنری استفاده کنید. برای مثال، اگر می‌خواهید مدخل مربوط به کلید `'favorite_numbers'` را حذف کنید، دستور زیر را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Iran', 'favorite_language': 'Python', 'name': 'Mahsa'} +``` + +همانطور که در خروجی مشاهده می‌کنید، کلید مقدار متناظر با 'favorite_numbers' حذف شده است. + +به همین شکل، می‌توانید مقدار مربوط به یک کلید موجود در دیکشنری را تغییر دهید. این را تایپ کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Mahsa'} +``` + +همانطور که می‌توانید ببینید مقدار کلید `'country'` از `'Iran'` به `'Germany'` تغییر پیدا کرده‌است. :) هیجان انگیز نیست؟ هورا! همین الان یک مورد شگفت انگیز دیگر یاد گرفتید. + +### چکیده + +بسیار عالی! الان چیزهای زیادی راجع به برنامه‌نویسی می‌دانید. در همین قسمت آخر شما موارد زیر را آموختید: + +- **خطاها** - اگر پایتون دستوری را متوجه نشود و خطایی را نشان دهد، حالا شما می‌دانید چطور آن خطا را بخوانید و درک کنید +- **متغیرها** - نام‌هایی برای اشیا هستند که شما را قادر می‌سازد راحت تر کد بزنید و کد شما را خواناتر می‌کند +- **لیست‌ها** - لیستی از اشیا که در یک ترتیب خاص ذخیره شده‌اند +- **دیکشنری‌ها** - اشیایی که به عنوان جفت‌های کلید-مقدار ذخیره شده‌اند + +برای بخش بعدی هیجان زده‌اید؟ :) + +## مقایسه اشیا + +> برای خوانندگان داخل خانه: این قسمت در ویدئو های بخش [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4) پوشش داده شده است. + +بخش بزرگی از برنامه‌نویسی شامل مقایسه اشیا است. مقایسه چه چیزهایی از همه راحت‌تر است؟ اعداد! بیایید نحوه کارکرد آن را ببینیم: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +ما به پایتون تعدادی عدد برای مقایسه کردن داده‌ایم. همانطور که می‌بینید، پایتون نه تنها می‌تواند اعداد را مقایسه کند بلکه می‌تواند عبارت‌های ریاضی مانند `2 * 2` و متدهایی همچون `len([4, 5])` که نتیجه `2` را می‌دهد نیز با هم مقایسه کند. جالب است، نه؟ + +آیا به این فکر کرده‌اید که چرا دو علامت مساوی `==` کنار هم برای چک کردن تساوی اعداد گذاشته‌ایم؟ ما از یک علامت مساوی `=` برای انتساب مقادیر به متغیرها استفاده می‌کنیم. اگر می‌خواهید مساوی بودن دو شی با همدیگر را چک کنید، همیشه و **همیشه** باید از دو علامت مساوی `==` استفاده کنید. همچنین می‌توانیم مساوی نبودن اشیا را تعیین کنیم. برای این منظور، از علامت `=!`، همانطور که در مثال بالا نشان داده شده است، استفاده می‌کنیم. + +دو تمرین دیگر با پایتون انجام بدهید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +ما `>` و `<` را دیدیم، ولی `>=` و `<=` چه معنایی دارد؟ آنها را به این صورت بخوانید: + +- x `>` y یعنی‌: x بزرگتر از y است +- x `<` y یعنی: x کوچکتر از y است +- x `<=` y یعنی: x کوچکتر یا مساوی y است +- x `>=` y یعنی: x بزرگتر یا مساوی y است + +بسیارعالی! می‌خواهید بیشتر با آن کار کنید؟ این را امتحان کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +می‌توانید هر تعداد عدد که می‌خواهید برای مقایسه به پایتون بدهید، و او به شما جواب بدهد! بسیار زیرکانه است، نه؟ + +- **and** - اگر شما از عملوند `and` استفاده کنید، هر دو مقایسه باید True باشند تا کل عبارت True ارزیابی شود +- **or** - اگر شما از عملوند `or` استفاده می‌کنید، Trueبودن یکی از مقایسه ها کافی است تا کل عبارت True ارزیابی شود + +آیا عبارت " مقایسه سیب با پرتقال" را شنیده‌اید؟ بیایید نسخه پایتونی آن را امتحان کنیم: + +{% filename %}{{ warning_icon }} خط فرمان {% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +همانطور که در عبارت بالا می‌بینید، پایتون قادر نیست یک رشته (`str`) و یک عدد (`int`) را با هم مقایسه کند. درعوض، یک **TypeError** نشان می‌دهد و به ما می‌گوید که دو نوع نمی‌توانند با یکدیگر مقایسه شوند. + +## Boolean + +در حقیقت شما با نوع جدیدی از اشیا در پایتون آشنا شدید. به نام **Boolean** بولیَن. + +فقط دو نوع شی بولین وجود دارد: + +- True - درست +- False - نادرست + +برای اینکه پایتون این نوع را بشناسد، باید همیشه آن را به صورت 'True' بنویسید (حرف اول بزرگ، و باقی حروف کوچک). **true, TRUE, و tRUE را نخواهد شناخت - فقط Trueدرست است.** ( برای False هم همینطور.) + +بولین ها می توانند به صورت متغیر باشند، اینجا را ببینید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +می‌توانید به این صورت نیز انجامش دهید: + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +با اجرای دستورات زیر، با بولین ها تفریح و تمرین کنید: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 =! 2` + +تبریک! بولین‌ها یکی از جالب ترین ویژگی‌های برنامه‌نویسی هستند، و شما همین الان یاد گرفتید چطور از آن‌ها استفاده کنید! + +# ذخیره کنید! + +> برای خوانندگان داخل خانه: این قسمت در ویدئو های بخش [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk) پوشش داده شده است. + +تا اینجا ما تمام کدهای پایتون خود را در مفسر خط فرمان نوشته‌ایم، که ما را محدود به ورود یک خط از کد در یک زمان می‌کرد. برنامه‌های نرمال در فایل ذخیره می‌شوند و به وسیله **مفسر** یا **کامپایلر** زبان برنامه‌نویسی اجرا می‌شوند. تا اینجا ما برنامه‌هایمان به صورت - هربار، یک خط - در **مفسر** پایتون اجرا کردیم. برای تمرین‌های بعدی به بیش از یک خط کد نیاز خواهیم داشت، پس ما نیاز داریم تا سریعاً: + +- از مفسر پایتون خارج شویم +- ویرایشگر متنی دلخواه خود را نصب کنیم +- چندخط کد در فایل جدید پایتون ذخیره کنیم +- آن را اجرا کنیم! + +برای خروج از مفسر پایتونی که در حال استفاده از آن هستیم، تابع `exit()` را تایپ کنید + +{% filename %}خط فرمان{% endfilename %} + +```python +>>> exit() +``` + +این عمل شما را به خط فرمان بازمی‌گرداند. + +پیش از این، ما یک ویرایشگر متنی از بخش [ویرایشگر متن](../code_editor/README.md) انتخاب کردیم. حالا باید ویرایشگر را باز کنیم و چند خط کد در یک فایل جدید بنویسیم (یا اگر از یک کروم بوک استفاده می کنید، یک فایل جدید روی cloud IDE بسازید و فایل را باز کنید): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +به وضوح، حالا شما یک توسعه دهنده پایتون کاربلد هستید، پس کمی از کدهایی که امروز یاد گرفتید را بنویسید. + +حالا باید فایل را ذخیره کنیم و یک نام توصیفی به آن بدهیم. بیایید فایل را **python_intro.py** نامگذاری کنیم و آن را روی صفحه دسکتاپ ذخیره کنیم. می‌توانیم به فایل هر نامی که می‌خواهیم بدهیم، ولی پایان یافتن فایل با **.py** مهم است. پسوند **.py** به سیستم عامل می‌گوید که این یک **فایل اجرایی پایتون** است و پایتون می تواند آن را اجرا کند. + +> **توجه** شما باید به یکی از جالب‌ترین ویژگی‌های ویرایشگر کد دقت کنید: رنگ‌ها! در کنسول پایتون، همه چیز به یک رنگ بود، حالا شما می‌توانید ببینید که تابع `print` رنگ متفاوتی با رشته متنی دارد. به این ویژگی "برجسته سازی دستوری " می‌گویند، که ویژگی بسیار مفیدی برای کد زدن است. رنگ چیزها شما را راهنمایی می‌کند، مانند رشته متنی بسته نشده یا غلط دیکته ای در کلمات کلیدی (مانند `def` در یک تابع که در ادامه خواهیم دید). این یکی از دلایلی است که از ویرایشگر کد استفاده می‌کنیم. :) + +وقتی فایل را ذخیره کردیم وقت آن است که آن را اجرا کنیم! ار مهارت‌هایی که در بخش خط فرمان گفتیم استفاده کنید، از ترمینال برای **تغییر دایرکتوری** به دسکتاپ استفاده کنید. + + + +بر روی Mac، فرمان‌ها شبیه به این خواهد بود: + +{% filename %}خط فرمان{% endfilename %} + + $ cd ~/Desktop + + + + + + +بر روی لینوکس شبیه به این است: + +{% filename %}خط فرمان{% endfilename %} + + $ cd ~/Desktop + + +(به یاد داشته باشید که ممکن است کلمه "Desktop" به زبان منتخب شما ترجمه شده باشد.) + + + + + +در خط فرمان ویندوز، شبیه به این است: + +{% filename %}خط فرمان{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +بر روی پاورشل ویندوز، شبیه به این است: + +{% filename %}خط فرمان{% endfilename %} + + > cd $Home\Desktop + + + + +اگر گیر کردید تقاضای راهنمایی کنید. مربی‌ها برای همین کار در کنار شما هستند! + +حالا از پایتون استفاده کنید تا کدهای موجود در فایل را اجرا کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +نکته: در ویندوز 'pyhton3' یک دستور محسوب نمیشود. به جای آن از 'python' برای اجرای فایل استفاده کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +> python python_intro.py +``` + +بسیار خب! شما اولین برنامه پایتون خود را که در یک فایل ذخیره شده بود اجرا کردید. فوق العاده نیستید؟ + +حالا شما می‌توانید به سراغ یکی از ابزارهای ضروری برنامه نویسی بروید: + +## If … elif … else + +بسیاری از کدها تنها زمانی باید اجرا شوند که شروط داده شده درست باشند. به همین دلیل پایتون چیزی به نام دستور شرطی - **دستور if** دارد. + +کد خود را در فایل **python_intro.py** با این جایگزین کنید: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +اگر ما این را ذخیره و اجرا کنیم، خطایی مانند زیر را مشاهده می‌کنیم: + +{% filename %}{{ warning_icon }} خط-فرمان{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +پایتون انتظار دارد که ما مشخص کنیم اگر شرط `3 > 2` درست باشد چه دستوری باید اجرا شود (یا به صورت صحیح‌تر شرط `True` باشد). بیایید کاری کنیم که در صورت درست بودن شرط، پایتون در خروجی بنویسد: “It works!”. کد را در فایل **python_intro.py** به این تغییر دهید: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +به تورفتگی خط بعدی کد به اندازه 4 اسپیس دقت کردید؟ به این تورفتگی ها نیاز داریم تا پایتون بداند در صورت درست بودن شرط کدام دستورات را اجرا کند. می توانید از یک اسپیس استفاده کنید، ولی تقریبا همه برنامه‌نویسان پایتون برای تمیزی و خوانایی کد از 4 اسپیس استفاده می کنند. همچنین می‌توانید ویرایشگر کد خود را طوری تنظیم کنید تا یک tab به عنوان 4 اسپیس محسوب شود. زمانی که انتخاب خود را تعیین کردید، آن را تغییر ندهید! اگر تورفتگی را با 4 اسپیس انجام می‌دهید، تمام تورفتگی های بعدی را با 4 اسپیس انجام دهید، درغیر این صورت به مشکل برمی‌خورید. + +فایل را ذخیره کنید و بار دیگر اجرا کنید: + +{% filename %}خط فرمان{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +توجه: یادتان باشد که در ویندوز 'python3' به عنوان یک دستور شناخته نمی‌شود. از الان به بعد 'python3' را با 'python' برای اجرای فایل ها جایگزین کنید. + +### چه می‌شود اگر یک شرط True نباشد؟ + +در مثال قبلی، کد تنها زمانی اجرا می‌شد که شرط‌ها درست بودند. ولی پایتون دستورات `elif` و `else` هم دارد: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +وقتی آن را اجرا کنید، خروجی زیر را نمایش می‌دهد: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +اگر 2 عدد بزرگتری از 5 بود، دستور دوم اجرا می‌شد. بیایید نحوه کار `elif` را ببینیم: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +و اجرا کنید: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +دیدید چه اتفاقی افتاد؟ `elif` شما را قادر میسازد تا شرط های بیشتری اضافه کنید تا اگر شروط قبلی درست نبودند، شروط جدید ارزیابی شوند. + +میتوانید هر تعداد `elif` که خواستید پس از `if` اولیه اضافه کنید، به عنوان مثال: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +پایتون تمام شرط ها را به ترتیب ارزیابی می‌کند و چاپ می‌کند: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## کامنت‌ها + +کامنت‌ها خطوطی هستند که با `#` شروع می‌شوند. می‌توانید بعد از `#` هر توضیحاتی راجع به کد بنویسید و پایتون آن را نادیده می‌گیرد. کامنت‌ها می‌توانند کد شما را برای دیگران خواناتر کنند. + +بیایید ببینیم چطور دیده می‌شود: + +{% 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!") +``` + +نیازی نیست برای هر خط کد کامنت بنویسید، ولی برای توضیح اینکه چرا کد شما کاری را انجام می‌دهد یا برای داشتن یک خلاصه، زمانی که کد کار پیچیده‌ای را انجام می‌دهد، مفید اند. + +### چکیده + +در تمرین های اخیر شما موارد زیر را یاد گرفتید: + +- **مقایسه اشیا** - در پایتون می‌توانید اشیا را به وسیله `>` و `>=` و `==` و `<=` و `<` و عملگرهای `and` و `or` مقایسه کنید +- **بولین‌ها** - نوعی از اشیا که می‌تواند فقط دو مقدار معتبر بگیرد: `True` یا `False` +- ** ذخیره فایل‌ها** - ذخیره کردن کدها در فایل تا بتوانید برنامه‌های بزرگتری را اجرا کنید. +- **if … elif … else** - دستوراتی که شما را قادر می‌سازد کدها را زمانی اجرا کنید که شروط مشخصی درست باشند. +- **کامنت‌ها** - خطوطی که پایتون آن‌ها را به عنوان کد اجرا نمی‌کند، و به شما اجازه می‌دهد تا کد خود را مستند سازی کنید + +زمان آخرین بخش از این فصل رسیده است! + +## تابع خودتان را بنویسید! + +> برای خوانندگان داخل خانه: این قسمت در ویدئو های بخش [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0) پوشش داده شده است. + +توابعی مانند `len()` را که می‌توانید در پایتون اجرا کنید، به خاطر دارید؟ بسیار خوب - شما الان یاد می‌گیرید که چطور تابع خود را بنویسید! + +یک تابع دنباله‌ای از دستورات است که پایتون باید اجرا کند. همه توابع در پایتون با کلمه کلیدی `def` شروع می شوند، نام می‌گیرند و می‌توانند پارامترهای ورودی داشته باشند. بیایید امتحانش کنیم. کد داخل فایل **python_intro.py** را با این جایگزین کنید: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +خب، اولین تابع ما آماده است! + +شاید فکر می‌کنید که چرا نام تابع را در انتهای فایل نوشته‌ایم. وقتی که ما عبارت `def hi():` و خطوط تو رفته زیر آن را می‌نویسیم، دستورالعمل‌هایی را که باید توسط تابع `hi()` اجرا شوند مشخص می‌کنیم. پایتون این دستورالعمل‌ها را می‌خواند و به یاد می‌آورد اما آن را اجرا نمی‌کند. برای آنکه به پایتون بگوییم که این تابع را اجرا کند، باید تابع را فراخوانی کنیم یا آن را با عبارت `hi()` صدا بزنیم. پایتون فایل را می‌خواند و آن را از بالا به پایین اجرا می‌کند، بنابراین ما باید قبل از صدا زدن آن، عملکرد تابع را در فایل تعریف کرده باشیم. + +بیایید این را اجرا کنیم و ببینیم چه اتفاقی می‌افتد: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +توجه: اگر درست کار نکرد، نترسید! خروجی به شما کمک می کند دلیل آن را بفهمید: + +- اگر یک خطای `NameError` دریافت کردید، احتمالا چیزی را اشتباه تایپ کرده‌اید، پس چک کنید که از نام یکسانی موقع ساختن تابع با `def hi():` و صدا کردن آن با `hi()` استفاده کرده‌باشید. +- اگر یک خطای `IndentationError` دریافت کردید، چک کنید که هر دو دستور `print` تورفتگی یکسانی دارند: پایتون می‌خواهد که تمام کدهای داخل تابع به درستی قرار بگیرند و هم راستا باشند. +- اگر اصلا چیزی چاپ نشده، چک کنید که آخرین `hi()` تورفته *نباشد* - اگر تورفتگی داشته‌باشد، بخشی از کد تابع می‌شود و هرگز اجرا نمی‌شود. + +بیایید اولین تابع خود را با پارامتر ورودی بسازیم. ما مثال قبلی را تغییر می‌دهیم - تابعی که به فرد اجرا کننده آن سلام می‌کند - با نام خود فرد: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +همانطور که می‌بینید، ما الان به تابع یک پارامتر به نام `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!') + +hi() +``` + +به خاطر داشته باشید: تابع `print` با 4 اسپیس داخل دستور `if` تورفتگی دارد. بخاطر آنکه تابع زمانی اجرا می‌شود که شرط درست باشد. بیایید نحوه کار آن را ببینیم: + +{% filename %}{{ warning_icon }} خط-فرمان{% 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' + + +آخ، خطا. خوشبختانه، پایتون یک پیام خطای مفید به ما می‌دهد. به ما می‌گوید که تابع `hi()` (همانی که تعریف کردیم) یک پارامتر ورودی دارد (به نام `name`) و ما فراموش کردیم زمان صدا کردن تابع آن را وارد کنیم. بیایید آن را در انتهای فایل درست کنیم: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +و دوباره اجرا کنیم: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +و اگر نام را تغییر دهیم چه می‌شود؟ + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +و اجرا کنیم: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +فکر میکنید اگر نام دیگری را بنویسید چه اتفاقی می‌افتد؟(بغیر از Ola یا Sonja). امتحان کنید و ببینید که درست فکر می کردید یا نه. باید این را نمایش دهد: + +{% filename %}خط فرمان{% endfilename %} + + Hi anonymous! + + +عالی است.نه؟ با این روش، نیاز نیست برای هر تغییر نامی که تابع به آن سلام میکند، کار تکراری انجام دهید. ما دقیقا توابع را برای همین نیاز داریم - شما نمی‌خواهید تا هر دفعه کد خود را تکرار کنید! + +بیایید کار هوشمندانه‌تری انجام دهیم - بیشتر از 2 اسم داریم، و نوشتن یک شرط برای هر کدام سخت است. درست است؟ محتوای فایل خود را با فایل زیر جایگذاری کنید: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +حالا بیایید تا کد را صدا بزنیم: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +تبریک! شما همین الان نحوه نوشتن توابع را یاد گرفتید! :) + +## حلقه‌های تکرار + +> برای خوانندگان داخل خانه: این قسمت در ویدئو های بخش [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) پوشش داده شده است. + +این آخرین بخش است. سریع تمام شد درست است؟ :) + +برنامه‌نویس‌ها دوست ندارند کار تکراری انجام دهند. برنامه‌نویسی برای اتوماتیک کردن کارها است، پس ما نمی‌خواهیم به طور غیر اتوماتیک به هر فرد سلام کنیم، درست است؟ این همان جایی است که حلقه‌های تکرار - Loop - به کار می‌آیند. + +هنوز لیست‌ها را به خاطر دارید؟ بیایید یک لیست از دختران بسازیم: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +ما می‌خواهیم به همه آنها با ذکر نامشان سلام کنیم. برای این کار تابع `hi` را داریم، بیایید در یک حلقه از آن استفاده کنیم: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +عبارت `for` کمی شبیه به عبارت `if` رفتار می‌کند؛ کد زیر هر دو باید به اندازه 4 اسپیس تو رفتگی داشته باشد. + +اینجا کد کاملی را که باید در فایل باشد، داریم: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +و وقتی آن را اجرا کنیم: + +{% filename %}خط فرمان{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +همانطور که می‌بینید، هر چیزی که درون یک عبارت `for` با تورفتگی قرار دهید، برای هر المان لیست `girls` تکرار می‌شود. + +همچنین می‌توانید از `for` با استفاده تابع `range` روی اعداد نیز استفاده کنید: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +که چاپ می کند: + +{% filename %}خط فرمان{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` تابعی است که لیستی از اعداد متوالی را می‌سازد (ابتدا و انتهای بازه توسط شما به عنوان پارامتر به تابع داده می شود). + +توجه کنید که کران بالای بازه -دومین پارامتر- در لیست ساخته‌شده توسط پایتون نمی‌آید (به این معناست که `range(1, 6)` از 1 تا 5 می‌شمارد، اما شامل 6 نمی‌شود). به دلیل این که "range" نیمه‌باز است، و منظور این است که شامل عدد ابتدای بازه می‌شود ولی عدد انتهایی را شامل نمی‌شود. + +## چکیده + +همین بود. **شما فوق‌العاده هستید!** این بخش دارای ریزه کاری هایی بود و شما باید به خودتان افتخار کنید. ما هم قطعاً به شما افتخار می‌کنیم که تا اینجا پیش آمده اید! + +برای دیدن آموزش رسمی و کامل پایتون آدرس https://docs.python.org/3/tutorial/ را ببینید. این آموزش به شما دید کامل‌تر و درست‌تری نسبت به این زبان می‌دهد. موفق باشید! :) + +شاید بخواهید قبل از رفتن به مرحله بعد، کارهای دیگری بکنید، کمی کش قوس بیایید، قدم بزنید و به چشم های خود استراحتی بدهید. :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/fa/python_introduction/images/cupcake.png b/fa/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/fa/python_introduction/images/cupcake.png differ diff --git a/fa/template_extending/README.md b/fa/template_extending/README.md new file mode 100644 index 00000000000..a2aa76589ec --- /dev/null +++ b/fa/template_extending/README.md @@ -0,0 +1,151 @@ +# توسعه template + +چیز دیگری که جنگو برای شما دارد **توسعه template** است. معنای آن چیست؟ به این معنی است که شما می‌توانید بخش‌هایی از یک کد HTML را در چندین صفحه مختلف از وب سایت خود استفاده کنید. + +زمانی که قصد دارید از اطلاعات یا ترکیب بندی خاصی چندین بار استفاده کنید، template ها به کمک شما خواهند آمد. نیازی نیست که یک کار تکراری را برای همه فایل ها انجام دهید. و اگر قصد داشتید چیزی را تغییر دهید، لازم نیست آن تغییر را در تک تک template ها اعمال کنید. فقط یکبار کافی است! + +## ساخت یک template پایه + +یک template پایه، اساسی ترین template است که شما آن را در هر صفحه وب سایت خود توسعه می‌دهید. + +اجازه دهید تا یک فایل `base.html` در مسیر `blog/templates/blog/` بسازیم: + + blog + └───templates + └───blog + base.html + post_list.html + + +سپس فایل را در ویرایشگر متنی باز کنید و همه چیز را از فایل `post_list.html` داخل فایل `base.html` کپی کنید، مانند زیر: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +سپس در فایل `base.html`, همه محتویات تگ `` (همه چیز بین `` و ``) را با کد زیر عوض کنید: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %} ممکن است توجه کرده باشید که این عمل هر چیزی بین `{% for post in posts %}` و `{% endfor %}` را با کد زیر عوض کرده است: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +ولی چرا؟ شما همین الان یک `block` ساختید! شما از تمپلیت تگ `{% block %}` برای ساخت یک ناحیه استفاده کردید، که کد HTML در آن قرار می‌گیرد. زمانی که تمپلیت `base.html` را در فایل تمپلیت دیگری گسترش می‌دهیم، کدهای HTML مذکور را داخل تگ block می‌نویسیم. ما نحوه انجام کار را همین الان به شما نشان خواهیم داد. + +فایل `base.html` را ذخیره کنید و فایل `blog/templates/blog/post_list.html` را دوباره در ویرایشگر متنی باز کنید. {% raw %} شما قرار است همه چیز را از بالای `{% for post in posts %}` و زیر `{% endfor %}` حذف کنید. زمانی که کار گفته شده را انجام دادید، فایل به این شکل خواهد بود:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +ما می‌خواهیم از این بخش template برای تمام بلاک‌های محتوا استفاده کنیم. زمان اضافه کردن تگ‌های block به این فایل رسیده‌است! + +{% raw %} شما می‌خواهید که تگ block با تگ‌های فایل `base.html` هماهنگ باشد. هم چنین می‌خواهید تا این تگ تمام کدهای متعلق به بلاک محتوا را شامل شود. برای انجام این کار، همه چیز را بین `{% block content %}` و `{% endblock %}` قرار دهید. به این صورت:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +تنها یک کار باقی مانده. ما باید این دو template را به یکدیگر متصل کنیم. هدفمان از گسترش template همین است! با اضافه کردن تگ extends در ابتدای فایل، این کار را انجام می‌دهیم. مانند زیر: + +{% 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 %} +``` + +همین است! فایل را ذخیره کنید، و چک کنید که آیا وب‌سایت شما هنوز به درستی کار می‌کند. :) + +> اگر خطای`TemplateDoesNotExist` را دریافت کردید، به معنای آن است که فایل `blog/base.html` وجود ندارد و دستور `runserver` در کنسول خط فرمان در حال اجرا است. سعی کنید دستور را متوقف کنید (با زدن Ctrl+C - کلید Control و کلید C به صورت همزمان) و وب سرور را دوباره با دستور `python manage.py runserver` راه اندازی کنید. \ No newline at end of file diff --git a/fa/whats_next/README.md b/fa/whats_next/README.md new file mode 100644 index 00000000000..9a14d147f2a --- /dev/null +++ b/fa/whats_next/README.md @@ -0,0 +1,43 @@ +# گام بعدی چیست؟ + +تبریک به شما! **شما فوق العاده هستید**. به شما افتخار می‌کنیم! <3 + +### حالا چه باید کرد؟ + +یک نفس راحت بکش. همین حالا هم یک کار واقعاٌ بزرگ انجام دادی. + +بعد از این مطمئن شو که جنگو گرلز را در [فیسبوک](http://facebook.com/djangogirls) یا [توییتر](https://twitter.com/djangogirls) دنبال میکنی تا در جریان تازه‌ترین‌ها باشی. + +### آیا می‌توانید منابع دیگری معرفی کنید؟ + +بله! حجم *بسیار زیادی* منابع آنلاین برای یادگرفتن هر نوع مهارت برنامه نویسی وجود دارد - این می‌تواند به راحتی باعث سردرگمی بشود اما ما از شما حمایت می‌کنیم. هرچیزی که باعث شد که شما به جنگو گرلز بیایید و یا هرچیزی که در طول دوره آموزش برایتان جالب بوده، ما منابعی کاملاً رایگان (یا با بخش‌هایی رایگان) برای آن‌ها معرفی می‌کنیم که شما می‌توانید به هر شکلی که بخواهید از آنها استفاده کنید. + +#### جنگو + +- کتاب دیگر ما، [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [دوره آموزشی رسمی جنگو](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [شروع کردن جنگو با درس‌های ویدئویی](http://www.gettingstartedwithdjango.com/) +- [Django for Everybody Specialization](https://www.coursera.org/specializations/django)، برخی ویدئوها به رایگان قابل استفاده است و می‌توانید بعد از گذراندن این دوره‌ها مدرک Coursera بگیرید + +#### HTML, CSS and JavaScript + +- [دوره توسعه وبسایت Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### پایتون + +- [دوره پایتون Codecademy](https://www.codecademy.com/learn/learn-python) +- [دوره پایتون گوگل](https://developers.google.com/edu/python/) +- [کتاب Learn Python The Hard Way](http://learnpythonthehardway.org/book/) - تمرین‌های ابتدایی رایگان است +- [دوره آموزشی New Coder](http://newcoder.io/tutorials/) - مجموعه‌ای از تمرین ‌های کاربردی است که نشان می‌دهد چطور از پایتون می‌توان استفاده کرد +- [edX](https://www.edx.org/course?search_query=python) - بسیاری از دوره‌ها را می‌توانید رایگان استفاده کنید، ولی اگر مدرک یا تأییدیه بخواهید باید هزینه بپردازید +- [Coursera's Python specialization](https://www.coursera.org/specializations/python) - برخی از دوره‌ها رایگان هستند و با گذراندن آنها می‌توانید مدرک دوره را بگیرید +- [Python for Everybody](https://www.py4e.com/) - یک دوره آزاد و رایگان بر اساس Coursera Python for Everybody + +#### کار کردن با داده‌ها + +- [دوره علم داده Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) - بسیاری از دوره‌ها را رایگان می‌توانید شرکت کنید ولی اگر مدرک یا تأییدیه می‌خواهید باید هزینه بپردازید +- [Dataquest](https://www.dataquest.io/) - سی "مأموریت" اول رایگان هستند + +نمی‌توانیم صبر کنیم تا ببینیم چه چیزی درست می‌کنید! \ No newline at end of file diff --git a/fr/GLOSSARY.md b/fr/GLOSSARY.md new file mode 100644 index 00000000000..48cb7aaa0d3 --- /dev/null +++ b/fr/GLOSSARY.md @@ -0,0 +1,3 @@ +# Éditeur de texte + +L'éditeur de texte est une application qui permet d'écrire et enregistrer du code que vous pourrez ré-utiliser plus tard. Vous pouvez apprendre comment s'en procurer un grâce au chapitre [Éditeur de Texte](./code_editor/README.md) \ No newline at end of file diff --git a/fr/README.md b/fr/README.md new file mode 100755 index 00000000000..5ba91076d15 --- /dev/null +++ b/fr/README.md @@ -0,0 +1,51 @@ +# Tutoriel de Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Cette œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution — ShareAlike 4.0 International. Pour consulter une copie de cette licence, visitez https://creativecommons.org/licenses/by-sa/4.0/deed.fr + +## Bienvenue + +Bienvenue dans le tutoriel Django Girls ! Nous sommes heureux de vous voir ici. :) Dans ce tutoriel, nous allons vous emmener dans un voyage sous le capot des technologies web, en vous offrant un aperçu de tous les pièces et les morceaux qui doivent être assemblés pour que le web fonctionne tel que nous le connaissons. + +Comme avec toutes les choses inconnues, cela va être une aventure, mais pas de soucis, puisque vous avez déjà eu le courage d'arriver ici, vous allez y arriver. :) + +## Introduction + +Avez-vous déjà eu l'impression que le monde est de plus en plus rempli de technologies avec lesquelles vous n'êtes pas (encore) familière ? Avez-vous déjà été curieuse de comment créer un site web, sans jamais avoir le courage de vous plonger dedans ? Vous êtes-vous déjà dit que le monde de l'informatique est trop compliqué, ne serait-ce que pour savoir par où commencer ? + +Hé bien, bonne nouvelle ! Programmer n'est pas aussi dur que ça en a l'air, et nous sommes là pour vous montrer à quel point ça peut être amusant. + +Ce tutoriel ne vous transformera pas magiquement en programmeuse. Si vous voulez devenir bonne, cela peut prendre des mois, voire même des années d'apprentissage et de pratique. Mais nous voulons vous montrer que programmer ou créer des sites web n'est pas aussi compliqué que ça en a l'air. Nous allons essayer de vous expliquer différents morceaux afin de rendre la technologie moins intimidante. + +Nous espérons arriver à vous faire aimer la technologie autant que nous l'aimons ! + +## Qu'apprendrez-vous au cours de ce tutoriel ? + +Une fois que vous aurez terminé le tutoriel, vous aurez une petite application web : votre propre blog. Nous allons vous montrer comment le mettre en ligne, ainsi votre travail sera visible par d'autres ! + +Ça devrait ressembler plus ou moins à ça : + +![Figure 0.1](images/application.png) + +> Si vous travaillez avec le tutoriel de votre côté et n'avez pas un coach qui vous aiderait en cas de problème, nous avons un système de discussion instantanée pour vous : [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Nous avons demandé aux coachs et participant·e·s des précédentes éditions de passer de temps en temps pour aider les autres avec le tutoriel. N'ayez pas peur et allez poser vos questions ! + +OK, [commençons par le commencement…](./how_the_internet_works/README.md) + +## Suivre le tutoriel chez soi + +Il est formidable de participer à un atelier Django Girls, mais nous comprenons qu'il n'est pas toujours facile d'en trouver un. C'est pourquoi nous vous encourageons à essayer de suivre ce tutoriel chez vous. Pour les lectrices à la maison, nous sommes actuellement en train de préparer des vidéos afin qu'il vous soit plus facile de suivre le tutoriel de votre côté. C'est encore un travail en cours, mais la chaine YouTube [Le code convient aux filles](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) couvre de plus en plus de choses. + +Dans chaque chapitre couvert se trouve un lien pointant vers la vidéo correspondante. + +## À propos et contributions + +Ce tutoriel est maintenu par [DjangoGirls](https://djangogirls.org/). Si vous rencontrez des erreurs ou souhaitez simplement suggérer une amélioration du tutoriel, il est important de respecter [les règles de contribution](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Vous voulez nous aider à traduire le tutoriel dans d'autres langues ? + +Actuellement, les traductions sont faites sur la plateforme crowdin.com : + +https://crowdin.com/project/django-girls-tutorial + +Si votre langue n'est pas listée sur [crowdin](https://crowdin.com/), merci [d'ouvrir un ticket](https://github.com/DjangoGirls/tutorial/issues/new) pour nous en informer afin que nous la rajoutions. \ No newline at end of file diff --git a/fr/SUMMARY.md b/fr/SUMMARY.md new file mode 100755 index 00000000000..e0cd7739510 --- /dev/null +++ b/fr/SUMMARY.md @@ -0,0 +1,35 @@ +# Résumé + +* [Introduction](README.md) +* [Installation](installation/README.md) + * [Ligne de commande](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Éditeur de code](installation/README.md#code-editor) + * [Environnement virtuel](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) +* [Comment marche l'Internet](how_the_internet_works/README.md) +* [Introduction à l'interface en ligne de commande](intro_to_command_line/README.md) +* [Installation de Python](python_installation/README.md) +* [L'éditeur de texte](code_editor/README.md) +* [Introduction à Python](python_introduction/README.md) +* [Qu'est-ce que Django ?](django/README.md) +* [Installation de Django](django_installation/README.md) +* [Votre premier projet Django !](django_start_project/README.md) +* [Les modèles dans Django](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Déployer !](deploy/README.md) +* [Les URL de Django](django_urls/README.md) +* [Vues Django – c'est l'heure de créer !](django_views/README.md) +* [Introduction au HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Données dynamiques dans les templates](dynamic_data_in_templates/README.md) +* [Templates Django](django_templates/README.md) +* [CSS – donnez du style](css/README.md) +* [Héritage de template](template_extending/README.md) +* [Finaliser votre application](extend_your_application/README.md) +* [Formulaires Django](django_forms/README.md) +* [Et maintenant ?](whats_next/README.md) \ No newline at end of file diff --git a/fr/chromebook_setup/README.md b/fr/chromebook_setup/README.md new file mode 100644 index 00000000000..98cda3e1c66 --- /dev/null +++ b/fr/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Installation de Chromebook + +> **Note** Si vous avez déjà passé les [étapes d’installation](../installation/README.md), il n'est pas nécessaire de les répéter - vous pouvez vous rendre directement à [Introduction à Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/fr/chromebook_setup/instructions.md b/fr/chromebook_setup/instructions.md new file mode 100644 index 00000000000..62ef8ea2dc0 --- /dev/null +++ b/fr/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +Vous pouvez [passer cette section](http://tutorial.djangogirls.org/en/installation/#install-python) si vous n'utilisez pas un Chromebook. Sinon, votre installation sera un peu différente. Vous pouvez ignorer le reste des instructions d'installation. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Cloud 9 est un outil qui vous propose un éditeur de code et un accès à un ordinateur, fonctionnant sur Internet, sur lequel vous pouvez installer, écrire et exécuter des logiciels. Pour la durée du tutoriel, Cloud IDE agira comme votre *machine locale*. Vous lancerez toujours des commandes dans un terminal exactement comme vos camarades sous macOS, Ubuntu ou Windows, mais votre terminal sera connecté à un ordinateur distant que Cloud IDE aura configuré pour vous. Voici les instructions pour Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com). Vous pouvez choisir l'un des cloud IDE et suivre les instructions du cloud IDE. + +#### PaizaCloud Cloud IDE + +1. Allez sur [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Créez un compte +3. Cliquez sur *Nouveau Serveur* et choisissez l'application Django +4. Cliquez sur le bouton Terminal (sur le côté gauche de la fenêtre) + +Maintenant vous devriez voir une interface avec une barre latérale et des boutons à gauche. Cliquez sur le bouton « Terminal » pour ouvrir la fenêtre de terminal. Vous devriez voir le résultat suivant : + +{% filename %}Terminal{% endfilename %} + + $ + + +Le terminal de PaizaCloud Cloud IDE attend vos instructions. Vous pouvez redimensionner ou maximiser la fenêtre pour la rendre un peu plus grand. + +#### AWS Cloud9 + +Cloud 9 requiert actuellement que vous vous connectiez avec AWS et que vous renseigniez votre carte de crédit. + +1. Installez Cloud 9 depuis le [Chrome Web Store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Allez à [c9.io](https://c9.io) et cliquez sur *Mise en route avec AWS Cloud9* +3. Créez un compte AWS (requiert votre carte de crédit, mais il existe un forfait gratuit) +4. Dans le tableau de bord AWS, entrez *Cloud9* dans la barre de recherche et cliquez dessus +5. Dans le tableau de bord Cloud 9, cliquez sur *Créer un environnement* +6. Appelez-le *django-girls* +7. Lors de la configuration des paramètres, sélectionnez *Créer une nouvelle instance pour l'environnement (EC2)* pour "Type d'environnement" et le "Type d'instance" *t2.micro* (il devrait être indiqué comme disponible gratuitement). Le paramètre d'économie par défaut suffira. Vous pouvez garder les autres paramètres par défaut. +8. Cliquez sur *Étape suivante* +9. Cliquez sur *Créer un environnement* + +Maintenant, vous pouvez voir une interface avec une barre latérale, une grande fenêtre principale avec du texte et une petite fenêtre en bas qui ressemble à quelque chose comme ceci: + +{% filename %}bash{% endfilename %} + + nomutilisateur:~/workspace $ + + +Cette fenêtre en bas est votre terminal. Vous pouvez l'utiliser pour donner des instructions à l'ordinateur Cloud9. Vous pouvez changer la taille de la fenêtre et l'agrandir un peu. + +#### Glitch.com Cloud IDE + +1. Allez sur [Glitch.com](https://glitch.com/) +2. Créez un compte (https://glitch.com/signup) ou utilisez votre compte GitHub si vous en avez un. (Voir les instructions GitHub ci-dessous.) +3. Cliquez sur *New Project* et choisissez *hello-webpage* +4. Cliquez sur la liste déroulante Outils (en bas à gauche de la fenêtre), puis sur le bouton Terminal pour ouvrir l'onglet terminal qui contiendra une invite comme celle-ci : + +{% filename %}Terminal{% endfilename %} + + app@nom-de-votre-projet-glitch:~ + + +Lorsque vous utilisez Glitch.com comme environnement de développement Cloud (IDE), vous n'avez pas besoin de créer un environnement virtuel. À la place, créez manuellement les fichiers suivants : + +{% 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 +``` + +Une fois ces fichiers créés, allez dans le Terminal et exécutez les commandes suivantes pour créer votre premier projet Django : + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +Afin de voir les messages d'erreur détaillés, vous pouvez activer les journaux de débogage Django pour votre application Glitch. Ajoutez simplement ce qui suit à la fin du fichier `mysite/settings.py`. + +{% 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, + }, + }, +} +``` + +Cela va créer un fichier `debug.log` détaillant les opérations Django et tous les messages d'erreur qui pourraient apparaître, ce qui rendra la correction beaucoup plus facile si votre site Web ne fonctionne pas. + +Le redémarrage initial du projet Glitch devrait échouer. (Si vous cliquez sur le bouton en haut de la liste déroulante `Show` puis cliquez sur `In a New Window`, vous recevrez un message d'erreur `DisallowedHost` (accès non autorisé).) Ne vous inquiétez pas à ce stade, le tutoriel corrigera cela dès que vous aurez mis à jour les paramètres Django de votre projet dans le fichier `mysite/settings.py` . + +### Environnement virtuel + +Un environnement virtuel (également appelé un virtualenv) est comme une boîte noire dans laquelle nous pouvons insérer du code informatique utile à un projet sur lequel nous travaillons. Nous les utilisons pour conserver séparément les différents morceaux de code que nous voulons dans nos différents projets afin que les choses ne se mélangent entre les projets. + +Lancer : + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(Notez que sur la dernière ligne, nous utilisons un tilde suivi d'un signe égal : `~=`). + +### GitHub + +Créez un compte [GitHub](https://github.com). + +### PythonAnywhere + +Le tutoriel Django Girls comprend une section sur ce qui est appelé le Déploiement, un processus qui permet de déplacer le code de votre application web vers un ordinateur public (appelé serveur) pour que d'autres personnes puissent voir votre travail. + +Cette partie est un peu étrange quand on fait le tutoriel sur un Chromebook puisque nous utilisons déjà un ordinateur qui est visible sur Internet (par opposition, par exemple, à un ordinateur portable). Cependant, c'est toujours utile, car nous devons penser à notre espace de travail Cloud 9 comme un endroit pour notre travail "en cours" et Python Anywhere comme un endroit pour publier notre projet à mesure qu'il devient plus complet. + +Donc, inscrivez-vous pour un nouveau compte Python Anywhere sur [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/fr/code_editor/README.md b/fr/code_editor/README.md new file mode 100755 index 00000000000..b3e64c1cad6 --- /dev/null +++ b/fr/code_editor/README.md @@ -0,0 +1,11 @@ +# L'éditeur de code + +> Pour les lectrices autodidactes, ce chapitre est traité dans la vidéo [Installer Python & Éditeur de code](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +Vous êtes sur le point d'écrire vos premières lignes de code, il est donc temps de télécharger un éditeur de code. + +> **Note** Si vous utilisez un Chromebook, ignorez ce chapitre mais assurez-vous de suivre les instructions dans [configuration pour Chromebook](../chromebook_setup/README.md). Le cloud IDE que vous avez choisi (PaizaCloud Cloud IDE ou AWS Cloud9) inclut un éditeur de code, et lorsque vous ouvrez un fichier dans votre IDE dans le menu fichier, vous utiliserez automatiquement l’éditeur. +> +> **Note** Vous l'avez probablement déjà fait au chapitre [Installation](../installation/README.md). Si c'est le cas, vous pouvez passer directement au prochain chapitre ! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/fr/code_editor/instructions.md b/fr/code_editor/instructions.md new file mode 100644 index 00000000000..288a4a15aeb --- /dev/null +++ b/fr/code_editor/instructions.md @@ -0,0 +1,37 @@ +Choisir un éditeur de texte parmi tous ceux qui sont disponibles est surtout une histoire de goûts personnels. La plupart des programmeurs·ses Python utilisent des IDE (Environnements de Développement Intégrés) complexes mais très puissants, comme PyCharm par exemple. Ce n'est pas forcément le meilleur choix pour débuter : ceux que nous vous recommandons sont tout aussi puissants, mais beaucoup plus simples à utiliser. + +Nos suggestions sont listées ci-dessous, mais n'hésitez pas à demander à vos coachs quelles sont leurs préférences - il sera plus facile d'obtenir de l'aide de leur part. + +## Visual Studio Code + +Visual Studio Code est éditeur de texte développé par Microsoft pour Windows, Linux et macOS. Il inclut le support du déboggage, l'utilisation de Git intégrée, le surlignage syntaxique, l'autocompletion intelligente du code, les snippets et la refactoring du code. + +[Télécharger](https://code.visualstudio.com/) + +## Gedit + +Gedit est un éditeur libre et gratuit disponible pour tout les systèmes d'exploitation. + +[Télécharger](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text est un éditeur très populaire avec une période d'évaluation gratuite et il est disponible pour tous les systèmes d'exploitation. + +[Télécharger](https://www.sublimetext.com/) + +## Atom + +Atom est un autre éditeur populaire. Il est gratuit, ouvert et disponible pour Windows, macOS et Linux. Atom est développé par [GitHub](https://github.com/). + +[Télécharger](https://atom.io/) + +## Pourquoi installer un éditeur de texte? + +Vous devez vous demander pourquoi on installe un éditeur de texte spécial plutôt que d'utiliser Word ou Notepad plus simplement. + +La première raison est que le code doit être en format **texte brute**, et le problème est que les éditeurs comme Word et Textedit ne produisent pas réellement du texte brute, mais du texte enrichi (avec des polices et de la mise en forme), en utilisant des formats personnalisés comme [ RTF (Rich Text Format) ](https://en.wikipedia.org/wiki/Rich_Text_Format). + +La seconde raison est que les éditeurs de code sont conçus spécialement pour l'édition de code. Ils fournissent donc des fonctionnalités très utiles comme la coloration du code en fonction du sens de celui ou automatiquement ajouter un guillemet fermant à chaque que vous ouvrez un guillemet. + +Nous verrons tout cela en pratique plus tard. Bientôt votre bon vieux éditeur de code deviendra l'un de vos outils favoris. :) diff --git a/fr/css/README.md b/fr/css/README.md new file mode 100755 index 00000000000..8e5c0ad8aa8 --- /dev/null +++ b/fr/css/README.md @@ -0,0 +1,330 @@ +# CSS - Rendez votre site joli ! + +Soyons honnêtes : notre blog est plutôt moche, non ? Un peu de CSS devrait nous permettre d'arranger ça ! + +## Qu'est-ce que le CSS ? + +Les feuilles de style (CSS : Cascading Style Sheets) sont un langage utilisé pour décrire l'apparence et la disposition d'un site écrit en langage de balisage (comme HTML). Considérez-le comme le maquillage de notre page web. ;) + +Mais on ne souhaite pas repartir de zéro. Une fois de plus, nous utiliserons quelque chose que les programmeurs ont publié gratuitement sur Internet. Réinventer la roue n'est pas amusant, n'est-ce pas ? + +## Utilisons Bootstrap ! + +Bootstrap est l'un des frameworks HTML/CSS les plus populaires pour développer de beaux sites web : https://getbootstrap.com/ + +Il a été créé par d'anciens développeurs de Twitter. Il est maintenant développé par des bénévoles aux quatre coins du monde ! + +## Installer Bootstrap + +Pour installer Bootstrap, ouvrez votre fichier `.html` dans l'éditeur de code et ajoutez cela à la section `` : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Cela n'ajoute pas de fichier à votre projet, mais crée seulement un lien vers des fichiers existant sur internet. Allez-y, ouvrez votre site web et rafraichissez la page. Et voilà ! + +![Figure 14.1](images/bootstrap1.png) + +C'est déjà un peu mieux ! + +## Les fichiers statiques dans Django + +Enfin, allons jeter un coup d'œil à ces **fichiers statiques** dont nous n'arrêtons pas de vous parler. Les fichiers statiques correspondent à tous vos CSS et vos images. Leur contenu ne dépend pas du contexte de la requête et sera le même pour tous les utilisateurs. + +### Où ranger les fichiers statiques dans Django ? + +Django sait déjà où trouver les fichiers statiques pour l'application "admin" intégrée. Maintenant, nous devons ajouter quelques fichiers statiques pour notre propre application, `blog`. + +Pour cela, nous allons créer un dossier appelé `static` à l'intérieur de notre appli blog : + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + + +Django va rechercher automatiquement tous les dossiers dits "statiques" à l'intérieur de vos dossiers d'appli. Ensuite, il sera en mesure d'utiliser leur contenu sous forme de fichiers statiques. + +## Votre premier fichier CSS ! + +Nous allons maintenant créer un fichier CSS afin de personnaliser votre page. Créez un nouveau dossier appelé `css` à l'intérieur de votre dossier `static`. Ensuite, créez un nouveau fichier appelé `blog.css` à l'intérieur du dossier `css`. Vous êtes prêt ? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Et c'est parti pour un peu de CSS ! Ouvrez le fichier `blog/static/css/blog.css` dans votre éditeur de texte. + +Nous n'irons pas trop loin dans la personnalisation et l'apprentissage du CSS ici. Il y a à la fin de cette page une recommandation pour un cours CSS gratuit si vous souhaitez en savoir plus. + +Que pourrions-nous faire rapidement ? Pourquoi ne pas changer la couleur de notre en-tête ? Pour indiquer la couleur que nous souhaitons utiliser, nous devons utiliser un code particulier. Ce code commence par un `#` suivi de 6 lettres (A-F) et chiffres (0-9). Par exemple, le code pour du bleu est `#0000FF`. Afin de trouver le code associé à la couleur de votre choix, vous pouvez consulter le site http://www.colorpicker.com/. Vous pouvez aussi utiliser des [couleurs prédéfinies](http://www.w3schools.com/colors/colors_names.asp), comme `red` ou `green`. + +Dans votre fichier `blog/static/css/blog.css`, ajoutez le code suivant : + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` est un sélecteur CSS. Cela signifie que nous allons appliquer nos styles à tout élément `a` qui se trouve dans un élément `h1` ; le sélecteur `h2 a` fait la même chose pour les éléments `h2`. Donc lorsque nous avons quelque chose comme `

lien

`, le style `h1 a` est appliqué. Dans notre cas, nous indiquons de changer sa couleur en `#C25100`, c'est à dire en orange foncé. Ou vous pouvez mettre votre propre couleur ici, mais assurez-vous qu’il contraste bien avec le fond blanc ! + +Un fichier CSS permet de déterminer le style des éléments présents dans un fichier HTML. La première façon pour identifier des éléments, c'est avec leur nom d'élément. Vous vous en souviendrez car ces noms proviennent des balises HTML. Exemple : `a`, `h1` et `body` sont tous des noms d'élément. Vous pouvez aussi identifier les éléments par leur attribut `class` ou `id`. La classe et l'identifiant sont des noms que vous choisissez vous-même. Les classes définissent des groupes d'éléments tandis que les identifiants pointent un élément spécifique. Par exemple, l'élément suivant peut être identifié par CSS à la fois par son nom `a`, sa classe `external_link`, ou son identifiant unique (id) `link_to_wiki_page` : + +```html + +``` + +Apprenez-en plus à propos des [Sélecteurs CSS sur W3Schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Nous devons aussi dire à notre modèle HTML que nous avons utilisé un peu de CSS. Ouvrez le fichier `blog/templates/blog/post_list.html` dans l'éditeur de code et ajoutez cette ligne au tout début : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +On vient tout juste de charger les fichiers statiques :). Entre les balises `` et ``, après les liens vers les fichiers CSS de Bootstrap, ajoutez cette ligne : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Le navigateur lit les fichiers dans l'ordre où ils sont donnés, donc nous devons nous assurer que c'est dans le bon endroit. Dans le cas contraire, le code dans notre fichier peut être écrasé par le code des fichiers Bootstrap. Nous venons simplement de dire à notre template où trouver notre fichier CSS. + +Maintenant, votre fichier doit ressembler à ceci : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Ok, on sauvegarde et on rafraîchit la page ! + +![Figure 14.2](images/color2.png) + +Bravo ! Peut-être que nous pourrions aérer un peu notre page web en augmentant la marge du côté gauche ? Essayons pour voir ! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Ajoutez ceci à votre CSS, enregistrez le fichier et regarder comment cela fonctionne ! + +![Figure 14.3](images/margin2.png) + +Et si nous changions aussi la police de caractères de notre entête ? Collez ceci dans le `` de votre fichier `blog/templates/blog/post_list.html` : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Comme précédemment, vérifiez l'ordre et placez le avant `blog/static/css/blog.css`. Cette ligne importera une police appelée *Lobster* à partir de Google Fonts (https://www.google.com/fonts). + +Retrouvez le bloc de règles `h1 a` (délimité par les accolades `{` `}`) dans le fichier css `blog/static/css/blog.css`. Ajoutez maintenant la ligne `font-family; 'Lobster',` dans les accolades et rafraîchissez la page : + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Figure 14.3](images/font.png) + +Super ! + +Comme mentionné ci-dessus, CSS a un concept de classe. Ce concept vous permet de nommer une partie de code HTML et d'y appliquer des styles, uniquement pour cette partie, sans affecter le reste. Cela peut être très utile ! Peut-être que vous avez deux divs qui sont en train de faire quelque chose de différent (comme votre en-tête et votre contenu). Une classe peut vous aider à leur donner un aspect différent. + +Vous pouvez maintenant nommer certaines parties du code HTML. Remplacez l'élément `header` qui contient votre en-tête avec ce qui suit : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+

Django Girls Blog

+
+
+``` + +Maintenant, ajoutez la classe `post` à votre `article` contenant votre blog post. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Nous allons maintenant ajouter des blocs de règles aux différents sélecteurs. Les sélecteurs qui commencent par `.` désignent des classes. De nombreux tutoriels et explications sur le CSS existent sur le Web, cela pourra vous aider qui à comprendre le code suivant. Pour le moment, copiez et collez-le dans votre fichier `blog/static/css/blog.css` : + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-default, +.btn-default:visited { + color: #C25100; + background: none; + border-color: #C25100; +} + +.btn-default:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Nous allons maintenant nous intéresser au code concernant les posts. Il va falloir remplacer le code le code suivant : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +se trouvant dans le fichier `blog/templates/blog/post_list.html` par : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Sauvegardez les fichiers modifiés et rafraîchissez votre page. + +![Figure 14.4](images/final.png) + +Woohoo ! Ça a l'air génial, non ? Intéressez-vous au code que nous venons juste de coller pour trouver quelles règles CSS sont appliquées aux sélecteurs HTML que nous avons nommés précédemment. Où feriez-vous le changement si l'on souhaite mettre la date en turquoise ? + +N'ayez pas peur de bricoler un peu le CSS et essayer de changer certaines choses. Jouer avec le CSS peut vous aider à comprendre comment et qui agit sur quoi. Si vous cassez quelque chose, ne vous inquiétez pas – vous pouvez toujours faire marche arrière ! + +Nous vous recommandons chaudement de suivre les cours en ligne "Basic HTML & HTML5" et "Basic CSS" sur [freeCodeCamp](https://learn.freecodecamp.org/). Ils vous aideront à en apprendre plus sur le sujet et à créer de magnifiques sites web avec HTML et CSS. + +Prêt pour le chapitre suivant ? :) \ No newline at end of file diff --git a/fr/css/images/bootstrap1.png b/fr/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/fr/css/images/bootstrap1.png differ diff --git a/fr/css/images/color2.png b/fr/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/fr/css/images/color2.png differ diff --git a/fr/css/images/final.png b/fr/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/fr/css/images/final.png differ diff --git a/fr/css/images/font.png b/fr/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/fr/css/images/font.png differ diff --git a/fr/css/images/margin2.png b/fr/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/fr/css/images/margin2.png differ diff --git a/fr/deploy/README.md b/fr/deploy/README.md new file mode 100755 index 00000000000..aec1afdd53d --- /dev/null +++ b/fr/deploy/README.md @@ -0,0 +1,250 @@ +# Déployer! + +> **Note** Le chapitre suivant peut-être un peu difficile à comprendre. Accrochez-vous et allez jusqu'au bout : le déploiement fait partie intégrale du processus de développement d'un site internet. Ce chapitre a été placé au milieu du tutoriel afin de permettre à votre coach de vous aider dans cette étape un peu compliquée qu'est la mise en ligne de votre site. Si jamais vous manquez de temps à la fin de la journée, ne vous inquiétez pas ! Une fois ce chapitre terminé, vous serez en mesure de finir le tutoriel chez vous :) + +Jusqu'à maintenant, votre site web est uniquement disponible sur votre ordinateur. Maintenant, vous allez apprendre à déployer! Déployer signifie mettre en ligne votre site pour que d'autres personnes puissent enfin voir votre app. :) + +Comme vous l'avez appris, un site web a besoin d'être installé sur un serveur. Il existe de nombreux fournisseurs de serveurs disponibles sur Internet, nous utiliserons [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere est gratuit pour les petites applications qui n'ont pas trop de visiteurs, donc ce sera certainement suffisant pour vous maintenant. + +Nous allons aussi utiliser les services [GitHub](https://www.github.com), ce qui nous permettra d'héberger notre code en ligne. Il existe d'autres entreprises qui proposent des services similaires. Cependant, presque tous⋅tes les développeurs·ses possèdent aujourd'hui un compte Github et, dans quelques instants, vous aussi ! + +Ces trois endroits sont importants pour vous. Votre ordinateur local est l'endroit où vous faites de développement et de test. Lorsque vous êtes heureux avec le résultat, vous sauvegarderez une copie de votre programme sur GitHub. Votre site sera sur PythonAnywhere et vous le mettrez à jour en y mettant une copie de votre nouveau code sur GitHub. + +# Git + +> **Note** Si vous avez déjà effectué [l'installation](../installation/README.md), il n'est pas nécessaire de la refaire : vous pouvez passer à la partie suivante et commencer à créer votre dépôt Git + +{% include "/deploy/install_git.md" %} + +## Démarrer un dépôt Git + +Git conserve toutes les modifications apportées à un ensemble de fichiers dans un "repository" (ou "dépôt"). Nous allons devoir en créer un pour notre projet. Ouvrez votre terminal et allez dans le répertoire `djangogirls`. Ensuite, tapez les commandes suivantes : + +> **Note** : n'oubliez pas de vérifier dans quel répertoire vous vous trouvez avant d'initialiser votre dépôt. Pour cela tapez la commande `pwd` (OSX/Linux) ou `cd` (Windows). Vous devriez vous trouver dans le dossier `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 + + +L'initialisation d'un dépôt git ne doit être faite qu'une seule fois par projet (et vous n'avez plus jamais besoin de re-saisir le nom d'utilisateur et adresse email). + +Git va surveiller les modifications faites à tous les fichiers et dossiers présents dans ce répertoire, mais il y a certains fichiers que nous voudrions qu'il ignore. Pour cela, nous allons créer un fichier appelé `.gitignore` dans le répertoire principal du projet. Ouvrez votre éditeur et créez un nouveau fichier en copiant le contenu suivant : + +{% filename %}.gitignore{% endfilename %} + + # Python + *.pyc + *~ + __pycache__ + + # Env + .env + myvenv/ + venv/ + + # Base de donnée + db.sqlite3 + + # Dossier "static" à la racine du projet + /static/ + + # macOS + ._* + .DS_Store + .fseventsd + .Spotlight-V100 + + # Windows + Thumbs.db* + ehthumbs*.db + [Dd]esktop.ini + $RECYCLE.BIN/ + + # Visual Studio + .vscode/ + .history/ + *.code-workspace + + Text + XPath: /pre[2]/code + + + +Enregistrez ce fichier sous le nom `.gitignore` dans votre répertoire principal "djangogirls". + +> **Attention** : le point au début du nom du fichier est important ! Si vous avez des difficultés à le faire (les Macs n'aiment pas que vous créiez des fichiers commençant par un point dans le Finder, par exemple), utilisez la fonction "Enregistrer sous" dans votre éditeur; ça marche toujours. N'ajoutez pas `.txt`, `.py`, ou d'autres extensions à la fin du nom. Git va reconnaitre le fichier seulement s'il porte le nom `.gitignore`. Linux et MacOS considèrent les fichiers commençant par `.` (comme `.gitignore`) comme étant cachés et la commande `ls` normale ne va pas montrer ces fichiers. Il faut utiliser `ls -a` pour voir le fichier `.gitignore`. +> +> **Remarque** un de fichiers que vous avez spécifié dans votre fichier `.gitignore` est `db.sqlite3`. Ce fichier est votre base de données locale, où tous les utilisateurs et les articles que vous avez créés sont stockés. Suivant les bonnes pratiques du développement web, nous allons utiliser des bases de données distinctes pour votre site de test local et votre site Web en ligne sur PythonAnywhere. La base de données sur PythonAnywhere pourrait être du type SQLite, comme votre version locale. Normalement on lui préfèrerait une base de données du type MySQL, car capable de gérer un plus grand nombre de visiteurs. Quoi qu’il en soit, le fait que votre base de données SQLite soit ignorée lors de l'archivage sur GitHub implique que tous les messages et le superutilisateurs que vous avez créé jusqu'à présent ne seront disponibles que localement. Vous devrez les créer de nouveau en production. Vous devriez penser à votre base de données locale comme un terrain de jeux où vous pouvez tester différentes choses et ne pas avoir peur de supprimer vos messages réels sur votre blog. + +C'est une bonne idée d'utiliser la commande `git status` avant `git add` ou dès que vous n'êtes plus sûr de ce qui a changé dans le projet. Cela vous évitera des surprises comme ajouter ou envoyer un mauvais fichier. La commande `git status` permet d'obtenir des informations sur tous les fichiers non-suivis/modifiés/ajoutés, l'état de la branche, et bien plus encore. La commande devrait renvoyer ceci: + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +Et pour finir, nous allons enregistrer nos modifications. Tapez ces commandes dans votre terminal: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Publier votre code sur GitHub + +Allez sur [GitHub.com](https://www.github.com) et créez-vous un nouveau compte gratuitement. (Si vous l'avez déjà fait lors de la préparation pour l’atelier, c’est très bien !) N’oubliez pas de mémoriser votre mot de passe (ajoutez-le à votre gestionnaire de mot de passe, si vous en utilisez un). + +Ensuite, créez un nouveau dépôt en lui donnant le nom "mon-nouveau-blog". Laissez la case "initialisation avec README" décochée, laissez l'option .gitignore vide (nous l'avons fait manuellement) et laissez la Licence en tant que Aucune. + +![](images/new_github_repo.png) + +> **Note** : dans le cadre de ce tutoriel, le nom `mon-nouveau-blog` est très important. Cependant, vous êtes libre de le changer mais, attention : à chaque fois que ce nom apparaîtra dans le tutoriel, vous allez devoir le remplacer par le nom que vous avez choisi. Il est probablement plus simple de garder le nom `mon-nouveau-blog`. + +Dans l'image suivante, vous verrez le URL de votre dépôt, que vous utiliserez dans certaines commandes qui suivent (ex. pour cloner le dépôt) : + +![](images/github_get_repo_url_screenshot.png) + +Nous avons maintenant besoin de relier nos deux dépôts ("hook" en anglais) : celui sur notre ordinateur et celui sur GitHub. + +Tapez les instructions suivantes dans votre console (remplacez `` avec le nom d'utilisateur de votre compte GitHub et sans les chevrons. Le URL doit correspondre exactement à l'URL que vous venez de voir) : + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Lorsque vous "poussez" sur GitHub, votre nom d’utilisateur ainsi que le mot de passe vous seront demandés (que ce soit dans la fenêtre de ligne de commande ou dans une fenêtre pop-up). Après avoir entré les informations d’identification, vous devriez voir quelque chose comme ceci : + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Votre code est maintenant sur GitHub. Allez jeter un coup d’œil ! Votre code est maintenant au même endroit que d'autres projets super cool : [Django](https://github.com/django/django), [le tutoriel Django Girls](https://github.com/DjangoGirls/tutorial) et les nombreux autres projets libres qui sont hébergés sur GitHub. :) + +# Mettre votre blog en ligne avec PythonAnywhere + +## Créez votre compte utilisateur sur PythonAnywhere + +> **Note** Vous avez peut être déjà créé un compte PythonAnyWhere au cours de la phase d'installation - si c'est le cas, inutile de le refaire. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Configurer votre site sur PythonAnywhere + +Allez sur le [Panneau de Contrôle de PythonAnywhere](https://www.pythonanywhere.com/) en cliquant sur le logo, et choisissez l'option de démarrer un terminal "Bash". C'est comme votre terminal à vous, mais chez PythonAnywhere. + +![La section "nouveau terminal" sur l'interface web de PythonAnywhere, avec un bouton pour "bash"](images/pythonanywhere_bash_console.png) + +> **Note** : PythonAnywhere utilise Linux. Si vous êtes sous Windows, la console sera un peu différente de celle de votre ordinateur. + +Pour déployer une application sur PythonAnywhere, vous devez y télécharger votre code depuis GitHub, puis configurer PythonAnywhere pour qu'il la reconnaisse et commence à la faire tourner en tant qu'application web. Cela peut se faire de façon manuelle, mais PythonAnywhere fourni un outil qui va tout faire pour vous. Commençons par l'installer: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip install --user pythonanywhere + + +Vous devriez voir quelque chose comme `Collecting pythonanywhere`, et au bout d'un moment une dernière ligne disant `Successfully installed (...) pythonanywhere-(...)`. + +Maintenant, nous exécutez l'assistant pour configurer automatiquement votre application à partir de GitHub. Tapez ce qui suit dans la console sur PythonAnywhere (n'oubliez pas d'utiliser votre nom d'utilisateur GitHub à la place de ``, afin que l'URL corresponde à celle du clone de GitHub) : + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.10 https://github.com//my-first-blog.git + + +En regardant la commande s'exécuter, vous devriez voir ce qui ce passe: + +- Téléchargement de votre code depuis GitHub +- Création d'un virtualenv chez PythonAnywhere, comme celui sur votre propre ordinateur +- Mise à jour de votre fichier de paramètres avec des paramètres de déploiement +- Mise en place d’une base de données sur PythonAnywhere en utilisant la commande `manage.py migrate` +- Mise en place de vos fichiers statiques (nous verrons ce que c'est plus tard) +- Et configuration de PythonAnywhere pour servir votre application web via son API + +Sur PythonAnywhere toutes ces étapes sont automatisées, mais ce sont les mêmes étapes que vous auriez à faire avec n'importe quel autre fournisseur de serveurs. + +La principale chose à remarquer maintenant est que votre base de donnée sur PythonAnywhere est complètement séparée de votre base de données sur votre propre ordinateur. Cela veut dire qu'elle peut contenir des messages différents et avoir des comptes administrateurs différents. Et donc, exactement comme on l'avait fait sur votre ordinateur, on doit initialiser le compte administrateur avec `createsuperuser`. PythonAnywhere a initialisé votre virtualenv pour vous automatiquement, donc la seule chose que vous avez à faire est d'exécuter: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Entrez les informations pour votre compte administrateur. Mieux vaut utiliser les mêmes que sur votre ordinateur pour éviter toute confusion, sauf si vous voulez utiliser un mot de passe plus sécurisé sur PythonAnywhere. + +Maintenant, si vous voulez, vous pouvez aussi jeter un œil à votre code sur PythonAnywhere en utilisant la commande `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 + + +Vous pouvez également accéder à la page "Fichiers" et naviguer à l'aide du navigateur de fichiers PythonAnywhere intégré. (Depuis la page Console, vous pouvez visiter d'autres pages PythonAnywhere en cliquant sur le bouton Menu en haut à droite. Une fois que vous vous trouvez dans une de ces pages, les liens vers les autres pages se trouve en haut.) + +## Vous êtes désormais sur Internet ! + +Votre site devrait maintenant être accessible sur Internet ! Cliquez sur l'onglet "Web" dans PythonAnywhere pour y obtenir un lien. Vous pouvez partagez ce lien avec qui vous voulez. :) + +> **Note** Ce tutoriel est conçu pour les débutants, et pendant le déploiement on a pris quelques raccourcis qui, d'un point de vue de la sécurité, ne sont pas idéaux. Quand vous voudrez aller plus loin dans ce projet, ou commencer un nouveau projet, vous devriez consulter la [Checklist de déploiement pour Django](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) pour obtenir des conseils sur comment sécuriser votre site. + +## Conseils en cas de bug + +Si vous constatez une erreur en exécutant le script `pa_autoconfigure_django.py`, voici quelques causes courantes : + +- Oubli de créer votre "jeton API" pour PythonAnywhere. +- Faire une erreur dans votre URL GitHub +- Si vous voyez un message d’erreur indiquant *« Could not find your settings.py »*, vous avez probablement oublié d'ajouter tous vos fichiers sur Git, et/ou vous ne les avez pas envoyé à GitHub. Regardez à nouveau la section Git ci-dessus +- Si vous avez précédemment créé un compte PythonAnywhere et avez rencontré une erreur avec collectstatic, vous avez probablement une version antérieure de SQLite (par ex : 3.8.2) sur votre compte. Dans ce cas, créez un nouveau compte et essayez les commandes présentes dans la section PythonAnywhere ci-dessus. + +Si vous constatez une erreur lorsque vous essayez de visiter votre site web, les **logs d'erreurs** devraient vous permettre de comprendre ce qui ne marche pas. Vous trouverez un lien vers les logs dans la page [Web](https://www.pythonanywhere.com/web_app_setup/) de PythonAnywhere. Regardez s’il y a des messages d’erreurs ; les plus récents seront en bas du fichier. + +Vous pourrez aussi trouver des astuces pour le débogage sur le site d'aide de[PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +Et n'oubliez pas, votre coach est là pour vous aider ! + +# Jetez un œil à votre site ! + +La page par défaut de votre site doit dire "Ça marche!", comme c'est le cas sur votre ordinateur local. Vous pouvez essayer d'accéder à l'interface d’administration en ajoutant `/admin/` à la fin de l'URL. Normalement, une page de login devrait s'afficher. Identifiez-vous avec votre nom d'utilisateur et mot de passe et vous verrez que vous pourrez créer de nouveaux messages sur le serveur. N'oubliez pas que les messages dans votre base de données locale n'ont pas été envoyés sur la version en ligne de votre blog. + +Une fois que vous avez créé des messages, vous pouvez revenir à votre configuration locale (pas PythonAnywhere). De là, vous devez travailler sur votre installation locale pour apporter des modifications. C'est la façon habituelle de procéder dans le développement web : faire des modifications localement, envoyer ces modifications sur GitHub, puis télécharger ces modifications vers votre serveur Web de production. Cela vous permet de faire des expériences sans endommager votre site web de production (celui sur Internet). Cool, non ? + +*Félicitations !* Le déploiement est l’une des parties les plus épineuses du développement web et il faut souvent plusieurs jours avant d'obtenir quelque chose de fonctionnel. Mais vous avez réussi à mettre votre site en ligne, dans le vrai Internet ! \ No newline at end of file diff --git a/fr/deploy/images/github_get_repo_url_screenshot.png b/fr/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/fr/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/fr/deploy/images/new_github_repo.png b/fr/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/fr/deploy/images/new_github_repo.png differ diff --git a/fr/deploy/images/pythonanywhere_account.png b/fr/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/fr/deploy/images/pythonanywhere_account.png differ diff --git a/fr/deploy/images/pythonanywhere_bash_console.png b/fr/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/fr/deploy/images/pythonanywhere_bash_console.png differ diff --git a/fr/deploy/images/pythonanywhere_beginner_account_button.png b/fr/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/fr/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/fr/deploy/images/pythonanywhere_create_api_token.png b/fr/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/fr/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/fr/deploy/install_git.md b/fr/deploy/install_git.md new file mode 100644 index 00000000000..200d6f7836c --- /dev/null +++ b/fr/deploy/install_git.md @@ -0,0 +1,52 @@ +Git est un " système de gestion de versions" utilisé par de nombreux développeurs. Ce logiciel permet de garder une trace des modifications apportées à chaque fichier afin que vous puissiez facilement revenir en arrière ou à une version spécifique. Un peu comme la fonction « suivi des modifications » dans les programmes de traitement de texte (par exemple, Microsoft Word ou LibreOffice Writer), mais beaucoup plus puissant. + +## Installer Git + + + +Vous pouvez télécharger Git sur [git-scm.com](https://git-scm.com/). Vous pouvez cliquer sur "suivant" pour toutes les étapes sauf deux : au moment de choisir l'éditeur, sélectionnez Nano ; à l'étape intitulée "Adjusting your PATH environment", sélectionnez "Use Git and optional Unix tools from the Windows Command Prompt" (l'option du bas). Les autres choix par défaut n'ont pas besoin d'être modifiés. Laissez cocher l'option "Checkout Windows-style, commit Unix-style line endings". + +N'oubliez pas de fermer puis relancer l'invite de commande ou la fenêtre Powershell une fois l'installation terminée. + + + +Téléchargez Git sur [git-scm.com](https://git-scm.com/) et suivez les instructions. + +> **Note** Si vous utilisez un OS X 10.6, 10.7 ou 10.8, vous devrez sans doute installer la version de git présente ici : [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/fr/deploy/signup_pythonanywhere.md b/fr/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..13999332854 --- /dev/null +++ b/fr/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere est un service qui permet de faire tourner des programmes en Python sur des serveurs "dans le cloud". Nous allons l'utiliser pour héberger notre site, en direct et sur Internet. + +Nous allons donc mettre le blog que nous sommes en train de construire sur PythonAnywhere. Pour commencer, créez un compte « Débutant » (beginner) sur PythonAnywhere (le niveau gratuit est très bien, vous n’avez pas besoin d’une carte de crédit). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![La page de login de PythonAnywhere contenant un bouton pour créer le compte gratuit pour 'Débutant'](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Note** Lorsque vous choisissez votre nom d'utilisateur, gardez à l'esprit que l'URL de votre blog prendra la forme `nomutilisateur.pythonanywhere.com`, alors choisissez un pseudonyme ou un nom adapté pour votre blog. Mémorisez votre mot de passe (ajoutez-le à votre gestionnaire de mot de passe, si vous en utilisez un). + +## Création d’un jeton API pour PythonAnywhere + +C'est quelque chose que vous n'aurez à faire qu'une seule fois. Lorsque vous serez inscrit à PythonAnywhere, vous vous retrouverez sur votre tableau de bord. Trouvez le lien en haut à droit de votre page "Compte": + +![Lien du compte en haut à droite sur la page](../deploy/images/pythonanywhere_account.png) + +sélectionnez l'onglet nommé "API token", et cliquez sur le bouton "Créer un nouveau jeton API". + +![L'onglet API sur la page Compte](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/fr/django/README.md b/fr/django/README.md new file mode 100755 index 00000000000..62674aa7890 --- /dev/null +++ b/fr/django/README.md @@ -0,0 +1,27 @@ +# Qu'est-ce que Django? + +Django (*/ˈdʒæŋɡoʊ/ jang-goh*) est un framework web gratuit et open-source écrit en Python. Un framework web est un ensemble de composants qui vous aide à développer des sites web plus rapidement et plus facilement. + +Lorsque vous créez un site web, vous avez souvent besoin de la même chose : une manière de gérer l'authentification de vos utilisateurs (créer un compte, se connecter, se déconnecter), une partie dédiée à la gestion de votre site, des formulaires, une manière de mettre en ligne des fichiers, etc. + +Heureusement pour vous, d'autres personnes ont réalisé depuis longtemps que les développeurs web font face aux mêmes problèmes lors de la construction d'un nouveau site, donc ils travaillent ensemble et créent un framework (Django étant un) qui vous donne des composants prêts à l'emploi. + +Les frameworks existent pour vous éviter d'avoir à réinventer la roue et aider à réduire les frais généraux lorsque vous construisez de nouveaux sites. + +## Pourquoi est-ce que vous auriez besoin d'un framework ? + +Pour comprendre ce qu'est exactement Django, nous devons regarder de plus près le serveur. La première chose est que le serveur doit savoir que vous voulez vous servir une page Web. + +Imaginez une boîte aux lettres (un port) dont l'arrivée de lettres (une requête) serait surveillée. C'est le travail qu'effectue le serveur. Le serveur Web lit la lettre et renvoie une page Web en réponse. Généralement, lorsque vous voulez envoyer quelque chose, vous avez besoin de contenu. Django est un outil qui va vous aider à créer ce contenu. + +## Que se passe-t-il quand quelqu'un demande un site web à votre serveur ? + +Lorsqu'une requête arrive sur un serveur web, elle est transmise à Django dont le premier travail va être de comprendre ce qui est demandé. Il s'occupe tout d'abord de l'adresse de page Web et essaie de savoir quoi faire. Ce travail est effectué par le routeur de Django, l'**urlresolver** (à savoir qu'une adresse web est appelé URL - Uniform Resource Locator - d'où le nom d'*urlresolver*). Ce n'est pas très intelligent - il faut renseigner une liste de modèles pour faire correspondre une URL. Django vérifie dans l'ordre les modèles, et si correspondance il y a, alors il transmet la requête à la fonction associée (appelé *vue*). + +Afin d'y voir un peu plus clair, imaginez un facteur transportant une lettre. Il descend la rue et vérifie à chaque maison si le numéro de celle-ci correspond à celui de la lettre. Si les deux numéros correspondent, il met la lettre dans la boîte aux lettres de cette maison. C'est à peu près comme cela que fonctionne l'urlresolver ! + +C'est dans la fonction de la *vue* que les choses se passent : nous allons pouvoir jeter un œil dans la base de données pour obtenir d'avantage d'informations. Par exemple, peut-être que l'utilisateur demande à changer quelque chose dans ces données ? Ce serait comme une lettre dont le contenu serait : "Merci de changer la description de mon emploi actuel". La *vue* va tout d'abord vérifier que l'utilisateur est bien autorisé à effectuer ce changement puis elle corrigera la description de l'emploi. Enfin, la *vue* générera une réponse de type "Travail terminé !" que Django pourra retourner à l'utilisateur. + +Ceci n'est qu'une description très simplifiée du processus. Vous n'avez pas besoin de connaître tous les détails techniques pour le moment : cette vue d'ensemble suffira largement. + +Au lieu de vous assommer avec des détails complexes, nous allons plutôt commencer à construire quelque chose avec Django et nous allons apprendre les choses importantes au fur et à mesure ! \ No newline at end of file diff --git a/fr/django_admin/README.md b/fr/django_admin/README.md new file mode 100755 index 00000000000..f952c9f1517 --- /dev/null +++ b/fr/django_admin/README.md @@ -0,0 +1,57 @@ +# Django admin + +Pour ajouter, modifier et supprimer les posts que nous venons de créer, nous allons utiliser l'interface Django admin. + +Ouvrons le fichier `blog/admin.py` dans l'éditeur de code et remplaçons son contenu par ceci : + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Comme vous pouvez le voir, nous importons le modèle « Post » que nous avons écrit dans le chapitre précédent. Afin que notre modèle soit visible dans l'interface d'administration, nous avons besoin d'enregistrer notre modèle à l'aide de `admin.site.register(Post)`. + +Voilà, il est temps de jeter un œil à notre modèle Post. N'oubliez pas d'exécuter `python manage.py runserver` dans votre console afin de lancer le serveur web. Retourner sur votre navigateur et taper l'adresse http://127.0.0.1:8000/admin/. Vous verrez une page de login qui ressemble à celle-ci : + +![Page de login](images/login_page2.png) + +Afin de vous connecter, vous allez devoir créer un *superuser*, c'est à dire un utilisateur qui contrôlera l'intégralité du site. Retournez à votre ligne de commande : tapez `python manage.py createsuperuser` puis appuyez sur entrée. + +> Conseil : pour pouvoir taper de nouvelles commandes pendant que le serveur tourne, ouvrez une nouvelle console et activez à nouveau votre virtualenv. La section **Démarrer le serveur web** du chapitre **Votre premier projet Django !** explique comment écrire de nouvelles commandes. + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Tapez votre nom d'utilisateur (en minuscules, sans espace), votre email et votre mot de passe. **Ne soyez pas surpris de ne pas voir le mot de passe quand vous le saisissez, c'est normal.** Saisissez le à l'aveugle et appuyez sur `Entrée` pour continuer. Vous devrez obtenir quelque chose comme ceci (où le nom d'utilisateur et le mail correspond à ce que vous avez saisi) : + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Retournez dans votre navigateur et connectez-vous en tant que superutilisateur grâce à l'utilisateur que vous venez de créer. Vous devriez accéder à l'interface d'administration de Django. + +![Django admin](images/django_admin3.png) + +Allons du côté des Posts et jouons un peu avec. Créez 5 ou 6 blog posts. Ne vous inquiétez pas trop du contenu, qui ne sera visible que depuis votre ordinateur. Vous pouvez copier-coller des morceaux du tutoriel pour aller plus vite. :) + +Assurez-vous quelques posts (mais pas tous) aient une date de publication. Cela sera utile plus tard. + +![Django admin](images/edit_post3.png) + +Si vous voulez en savoir plus sur l'interface d'administration de Django, n'hésitez pas à consulter la documentation du framework : https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +Cela peut être un bon moment pour prendre un café (ou un thé) ou quelque chose à manger pour vous redynamiser. Vous avez créé votre premier modèle Django - vous méritez une petite pause! \ No newline at end of file diff --git a/fr/django_admin/images/django_admin3.png b/fr/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/fr/django_admin/images/django_admin3.png differ diff --git a/fr/django_admin/images/edit_post3.png b/fr/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/fr/django_admin/images/edit_post3.png differ diff --git a/fr/django_admin/images/login_page2.png b/fr/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/fr/django_admin/images/login_page2.png differ diff --git a/fr/django_forms/README.md b/fr/django_forms/README.md new file mode 100755 index 00000000000..d323b2c9c98 --- /dev/null +++ b/fr/django_forms/README.md @@ -0,0 +1,479 @@ +# Formulaires Django + +La dernière chose que nous voulons faire sur notre site web, c'est créer une manière sympathique d'ajouter ou éditer des blog posts. L'interface d'administration (`/admin`) de Django est cool, mais elle est assez complexe à personnaliser et à rendre jolie. Les formulaires (`forms`) vont nous donner un pouvoir absolu sur notre interface : nous allons être capables de faire à peu près tout ce que nous pouvons imaginer ! + +Ce qui est pratique avec les formulaires Django, c'est que nous pouvons aussi bien en définir un à partir de rien ou créer un `ModelForm` qui va enregistrer le résultat du formulaire dans un modèle. + +C'est la seconde solution que nous allons utiliser pour créer un formulaire pour notre modèle `Post`. + +Comme toutes les choses importantes dans Django, les formulaires ont leur propre fichier : `forms.py`. + +Nous allons devoir créer un fichier avec ce nom dans notre dossier `blog`. + + blog + └── forms.py + + +Ouvrez maintenant ce fichier dans l'éditeur de code et tapez le code suivant : + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Tout d'abord, nous avons besoin d'importer les formulaires Django (`from django import forms`), puis notre modèle `Post` (`from .models import Post`). + +Comme vous l'avez probablement deviné, `PostForm` est le nom de notre formulaire. Nous avons besoin d'indiquer à Django que ce formulaire est un `ModelForm` (pour que Django fasse certaines choses automatiquement pour nous). Pour cela, nous utilisons `forms.ModelForm`. + +Ensuite, nous avons la `class Meta` qui nous permet de dire à Django quel modèle il doit utiliser pour créer ce formulaire (`model = Post`). + +Enfin, nous précisions quel⋅s sont le⋅s champ⋅s qui doivent figurer dans notre formulaire. Dans notre cas, nous souhaitons que seuls `title` et `text` apparaissent dans notre formulaire. Nous obtiendrons les autres données différemment : par exemple, on s'attend à ce que l'auteur (`author`) soit la personne actuellement connectée (c'est à dire vous !) et que la date de création `created_date` soit générée automatiquement lors de la création du post (cf code que nous avons écrit). + +Et voilà, c'est tout ! Tout ce qu'il nous reste à faire, c'est d'utiliser ce formulaire dans une *vue* et de l'afficher dans un template. + +Nous allons donc une nouvelle fois suivre le processus suivant et créer : un lien vers la page, une URL, une vue et un template. + +## Lien vers une page contenant le formulaire + +Avant d'ajouter le lien, nous avons besoin d'icônes que nous allons utiliser comme boutons pour le lien. Pour ce tutoriel, téléchargez [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) et enregistrez-le dans le dossier `blog/templates/blog/icons/` + +> Remarque : Pour télécharger l'image SVG, ouvrez le menu contextuel du lien (en cliquant avec le bouton droit de la souris) et sélectionnez "Enregistrer le lien sous". Dans la boîte de dialogue vous demandant où enregistrer le fichier, choisissez le répertoire `djangogirls` de votre projet Django, et à l'intérieur du sous-répertoire `blog/templates/blog/icons/`, et enregistrez le fichier à cet endroit. + +Il est temps d'ouvrir `blog/templates/blog/base.html` dans l'éditeur de code. Maintenant nous pouvons utiliser ce fichier d'icônes à l'intérieur du template de base comme suit. Dans l'élément `div` à l'intérieur de la section `header` , nous ajouterons un lien avant l'élément `h1`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Remarquez que notre nouvelle vue s'appelle `post_new`. L'icône [SVG](https://icons.getbootstrap.com/icons/file-earmark-plus/) est fournie par les [icônes Bootstrap](https://icons.getbootstrap.com/) et elle affichera une icône de page avec le signe plus. Nous utilisons une directive de modèle Django appelée `include`. Cela injectera le contenu du fichier dans le template Django. Le navigateur web sait comment gérer ce type de contenu sans aucun traitement supplémentaire. + +> Vous pouvez télécharger toutes les icônes Bootstrap [ici](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip). Décompressez le fichier et copiez tous les fichiers image SVG vers un nouveau dossier dans `blog/templates/blog/` intitulé `icons`. De cette façon, vous pouvez accéder à une icône comme `pencil-fill.svg` en référençant le chemin du fichier `blog/templates/blog/icons/pencil-fill.svg` + +Après avoir ajouté cette ligne, votre fichier HTML devrait maintenant ressembler à ceci : + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Normalement, après avoir sauvegardé et rechargé la page http://127.0.0.1:8000, vous devriez encore tomber sur l'erreur `NoReverseMatch`. Est-ce le cas ? Très bien ! + +## URL + +Ouvrez le fichier `blog/urls.py` dans l'éditeur de code et ajoutez cette ligne : + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +Votre fichier doit maintenant ressembler à ceci : + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Une fois la page rechargée, vous allez voir une `AttributeError`, ce qui est normal. Nous n'avons pas encore implémenté la vue `post_new`. Faisons-le maintenant. + +## La vue post_new + +Ouvrez maintenant le fichier `blog/views.py` dans l'éditeur de code et ajoutez les lignes suivantes avec celles du `from` qui existent déjà : + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +Puis dans la *vue* : + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Afin de pouvoir créer un nouveau formulaire `Post`, nous avons besoin d'appeler la fonction `PostForm()` et de la passer au template. Nous reviendrons modifier cette *vue* plus tard, mais pour l'instant, créons rapidement un template pour ce formulaire. + +## Template + +Nous avons à présent besoin de créer un fichier `post_edit.html` dans le dossier `blog/templates/blog` et de l'ouvrir dans l'éditeur de code. Afin que notre formulaire fonctionne, nous avons besoin de plusieurs choses : + +* Nous avons besoin d'afficher le formulaire. Pour cela, nous n'avons qu'à utiliser {% raw %}`{{ form.as_p }}`{% endraw %}. +* La ligne précédente va avoir besoin d'être entourée des balises HTML `...`. +* Nous avons besoin d'un bouton `Valider`. Nous allons le créer à l'aide d'un bouton HTML : ``. +* Enfin, nous devons ajouter {% raw %}`{% csrf_token %}`{% endraw %} juste après `
`. C'est très important car c'est ce qui va permettre de sécuriser votre formulaire ! Si vous oubliez ce détail, Django se plaindra lorsque vous essaierez de sauvegarder le formulaire: + +![CSFR Forbidden page](images/csrf2.png) + +Ok, voyons maintenant à quoi devrait ressembler le HTML contenu dans le fichier `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 }} + +
+{% endblock %} +``` + +Rafraîchissons la page ! Et voilà : le formulaire s'affiche ! + +![New form](images/new_form2.png) + +Mais attendez une minute! Lorsque vous taperez quelque chose dans les champs `title` et `text` et essayez de le sauvegarder, que se passera-t-il? + +Absolument rien ! Nous retombons sur la même page sauf qu'en plus, notre texte a disparu et aucun article ne semble avoir été créé. Que s'est-il passé ? + +La réponse est : rien ! Nous avons juste encore un peu de travail à accomplir. Retournons à notre *vue*. + +## Sauvegarder le contenu du formulaire + +Ouvrez à nouveau `blog/views.py` dans l'éditeur de code. Actuellement, `post_new` n'est composé que des lignes de code suivantes : + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Lorsque nous envoyons notre formulaire, nous revenons à la même vue. Cependant, nous récupérons les données dans `request`, et plus particulièrement dans `request.POST` (le nom "POST" n'a aucun lien avec nos "posts" de blog : il est lié au type de requête effectué à l'envoi des données). Vous rappelez-vous comment dans le fichier HTML, notre définition de la variable `
` avait la méthode `method="POST"`? Tous les champs du formulaire se trouvent maintenant dans `request.POST`. Veillez à ne pas renommer `POST` en quoi que ce soit d'autre : la seule autre valeur autorisée pour `method` est `GET`. Malheureusement, nous n'avons pas le temps de rentrer dans les détails aujourd'hui. + +Donc dans notre *vue* nous avons deux situations différentes à gérer : la première quand on accède à la page pour la première fois et nous voulons un formulaire vide, et la seconde quand on revient à la *vue* avec les données que l'on a saisies dans le formulaire. Pour gérer ces deux cas, nous allons utiliser une condition `if` (si) : + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Il faut maintenant remplir à l'endroit des pointillés `[...]`. Si `method` contient `POST` alors on veut construire le `PostForm` avec les données du formulaire, n'est-ce pas ? Nous allons le faire comme cela : + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +La prochaine étape est de vérifier que le formulaire a été rempli correctement (tous les champs obligatoires ont été remplis et aucune valeur incorrecte n'a été envoyée). Nous allons faire ça en utilisant `form.is_valid()`. + +Testons donc si notre formulaire est valide et, si c'est le cas, sauvegardons-le ! + +{% 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() +``` + +En gros, nous effectuons deux choses ici : nous sauvegardons le formulaire grâce à `form.save` et nous ajoutons un auteur. Rappelez vous, il n'y avait pas de champ `author` dans le `PostForm` mais nous avons obligatoirement besoin d'un auteur pour que le formulaire que nous avons créé soit valide. `commit=False` signifie que nous ne voulons pas encore enregistrer notre modèle `Post`. Nous voulons d'abord ajouter un auteur. La plupart du temps, vous utiliserez `form.save()` sans `commit=False`. Mais ici nous en avons besoin. `post.save()` sauvegardera les changements, c'est-à-dire l'ajout d'un auteur. Et voilà, un nouveau post de blog est créé ! + +Enfin, ce serait génial si nous pouvions tout de suite aller à la page `post_detail` du post de blog que nous venons de créer. Pour cela, nous avons besoin d'importer une dernière chose : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Ajoutez-le au tout début de votre fichier. Maintenant, nous allons ajouter la ligne qui signifie "aller à la page `post_detail` pour le nouveau post qui vient d'être créé": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` est le nom de la vue où nous voulons aller. Rappelez-vous : une *vue* a besoin d'une variable `pk`. Afin de le passer à la vue, nous utilisons `pk=post.pk`, où `post` désigne le blog post nouvellement créé ! + +Et si au lieu de parler, nous vous montrions à quoi ressemble maintenant notre *vue* ? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Voyons si ça marche. Allez à l'adresse http://127.0.0.1:8000/post/new/, ajoutez des valeurs dans les champs `title` et du `text`, sauvegardez ... et voilà ! Le nouveau post est bien créé et vous êtes redirigé vers la page `post_detail` ! + +Vous avez peut-être remarqué que nous avons choisi une date de publication avant de sauvegarder le post. Nous en aurons besoin lorsque nous créerons le *publish button* (bouton publier) dans **l'une des extensions du tutoriel Django Girls** (en anglais). + +Encore bravo ! + +> Comme nous avons récemment utilisé l'interface d'administration de Django, le système pense que nous sommes toujours connectés. Cependant, il y a plusieurs cas qui peuvent amener un utilisateur à être déconnecté : fermer le navigateur, redémarrer la base de données, etc. Si jamais vous obtenez des erreurs lors de la création d'un post qui disent que vous n'êtes pas connecté, retournez sur la page d'administration présente à l'adresse http://127.0.0.1:8000/admin et connectez vous à nouveau. Cependant, vous devinez bien que cette solution n'est pas suffisante à long terme. Afin de corriger ce problème, n'hésitez pas à faire la partie **Devoir : ajouter de la sécurité à son site internet !** qui est située juste après la partie principale du tutoriel. + +![Logged in error](images/post_create_error.png) + +## Validation de formulaire + +Maintenant, nous allons vous montrer à quel point les formulaires Django sont cools ! Un post de blog a besoin de champs `title` (titre) et `text` (texte). Dans notre modèle `Post`, nous n'avons pas signalé que ces champs n'étaient pas obligatoire (à l'inverse de `published_date`). Django s'attend donc à ce qu'ils soient remplis à chaque fois. + +Essayez de sauvegarder un formulaire sans mettre de `titre` ou de `texte`. Devinez ce qui va se passer ! + +![Form validation](images/form_validation2.png) + +Django va s'occuper de la validation : il va regarder si tous les champs de notre formulaire sont en adéquation avec notre modèle. C'est cool, non ? + +## Éditer un formulaire + +Maintenant, nous savons comment ajouter un nouveau post. Comment faire pour en modifier un qui existe déjà ? C'est très similaire à ce que nous venons de faire. Tout d'abord, faisons rapidement quelques choses importantes. (Si vous ne comprenez pas quelque chose, vous devriez demander à votre entraîneur ou regarder les chapitres précédents, car nous avons déjà traité toutes ces étapes.) + +Tout d'abord, enregistrons l'icône qui représente le bouton d'édition. Téléchargez [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) et enregistrez-le dans le dossier `blog/templates/blog/icons/`. + +Ouvrez `blog/templates/blog/post_detail.html` dans l'éditeur de code et ajoutez le code suivant dans l'élément `article`: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Votre template doit maintenant ressembler à ceci : + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +Ouvrez le fichier `blog/urls.py` dans l'éditeur de code et ajoutez cette ligne : + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Nous allons réutiliser le template de `blog/templates/blog/post_edit.html`. Il ne va donc nous manquer qu'une *vue*. + +Ouvrons `blog/views.py` dans l'éditeur de code et ajoutons à la toute fin du fichier : + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Vous ne trouvez pas que ça ressemble presque exactement à la vue de `post_new` ? Regardons un peu plus en détails. Tout d'abord, nous passons un paramètre `pk` supplémentaire. Ensuite, nous récupérons le modèle `Post` que nous souhaitons éditer à l'aide de `get_object_or_404(Post, pk=pk)`. Puis, lorsque nous créons un formulaire, nous passons ce post comme une `instance`, d'abord lorsque nous sauvegardons le formulaire… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +…Puis ensuite lorsque nous ouvrons le formulaire associé à ce post afin de l'éditer : + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Alors, voyons si ça marche ! Allons à la page `post_detail`. Un bouton d'édition devrait apparaître dans le coin supérieur droit de la page : + +![Edit button](images/edit_button2.png) + +Lorsque vous cliquez dessus, vous devez voir le formulaire du post de blog apparaître : + +![Edit form](images/edit_form2.png) + +N'hésitez pas à changer le titre ou le texte et à enregistrer les modifications! + +Bravo ! Votre application s'enrichit de plus en plus de fonctionnalités ! + +Si vous souhaitez en apprendre plus sur les formulaires Django, n'hésitez pas à consulter la documentation associée : https://docs.djangoproject.com/en/2.2/topics/forms/ + +## Sécurité + +C’est génial de pouvoir créer de nouveaux posts juste en cliquant sur un lien ! Mais maintenant, toute personne visitant votre site sera en mesure de créer un nouveau post, et ce n'est peut-être pas ce que vous voulez. Faisons en sorte que les boutons apparaissent pour vous mais pas pour les autres. + +Ouvrez `blog/templates/blog/base.html` dans l'éditeur de code, trouvez notre `div` `page-header` et la balise ancre que vous y avez mis plus tôt. Ça doit ressembler à ça : + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Nous allons y ajouter une autre balise `{% if %}` qui ne fera apparaitre le lien qu’aux utilisateurs⋅trices connecté⋅e⋅s avec les droits d'administration. C'est à dire pour le moment, seulement vous ! Changez la balise `` comme ceci : + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/file-earmark-plus.svg' %} + +{% endif %} +``` + +Ce `{% if %}` fait en sorte de n’envoyer le lien au navigateur que si l’utilisateur⋅trice demandant la page est connecté⋅e. Cela ne n'empêche pas complètement la création de nouveaux posts, mais c’est un bon début. Nous reviendrons sur les questions de sécurité dans les extensions du tutoriel. + +Rappelez-vous l'icône de modification que nous venons d'ajouter à notre page de détails? Nous souhaitons également ajouter les mêmes modifications, afin que les autres utilisateurs ne puissent pas modifier les publications existantes. + +Ouvrez le fichier `blog/templates/blog/post_detail.html` dans l'éditeur de code et trouvez la ligne suivante : + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +Changez-la en ceci: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +Parce vous êtes sans doute déjà connecté⋅e⋅s, vous ne verrez aucune différence si vous rafraîchissez la page. Mais si vous chargez la page dans un navigateur web différent ou dans une fenêtre en mode "navigation privée" ou "incognito", vous verrez que le lien ne s'affiche plus, et l’icône non plus ! + +## Encore un petit effort : déployons ! + +Nos modifications fonctionnent-elles sur PythonAnywhere ? Pour le savoir, déployons à nouveau ! + +* Tout d'abord, commitez votre nouveau code et pushez le à nouveau sur 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 pus + + +* Puis, dans la console bash de [PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}Ligne de commande PythonAnywhere{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(N’oubliez pas de remplacer `` avec votre propre sous-domaine PythonAnywhere, sans les chevrons.) + +* Enfin, allez sur ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (utilisez le bouton de menu en haut à droite de la console) et cliquez **Reload**. Actualisez votre blog https://subdomain.pythonanywhere.com pour voir les changements. + +Et normalement c'est tout ! Félicitations ! :) \ No newline at end of file diff --git a/fr/django_forms/images/csrf2.png b/fr/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/fr/django_forms/images/csrf2.png differ diff --git a/fr/django_forms/images/drafts.png b/fr/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/fr/django_forms/images/drafts.png differ diff --git a/fr/django_forms/images/edit_button2.png b/fr/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/fr/django_forms/images/edit_button2.png differ diff --git a/fr/django_forms/images/edit_form2.png b/fr/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/fr/django_forms/images/edit_form2.png differ diff --git a/fr/django_forms/images/form_validation2.png b/fr/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/fr/django_forms/images/form_validation2.png differ diff --git a/fr/django_forms/images/new_form2.png b/fr/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/fr/django_forms/images/new_form2.png differ diff --git a/fr/django_forms/images/post_create_error.png b/fr/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/fr/django_forms/images/post_create_error.png differ diff --git a/fr/django_installation/README.md b/fr/django_installation/README.md new file mode 100755 index 00000000000..9e0e85acc8a --- /dev/null +++ b/fr/django_installation/README.md @@ -0,0 +1,7 @@ +# Installation de Django + +> **Note** Si vous utilisez un Chromebook, passez ce chapitre mais prenez soin de suivre les instructions de [configuration pour Chromebook](../chromebook_setup/README.md). +> +> **Note **Si vous avez déjà effectué [l'Installation](../installation/README.md) vous devriez déjà avoir fait ce qui suit. Vous pouvez donc passer directement au chapitre suivant ! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/fr/django_installation/instructions.md b/fr/django_installation/instructions.md new file mode 100644 index 00000000000..f87d29b88d8 --- /dev/null +++ b/fr/django_installation/instructions.md @@ -0,0 +1,229 @@ +> Note : ce chapitre est en partie inspiré d'un autre tutoriel réalisé par les Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Ce chapitre est en partie inspiré du [tutoriel django-marcador](http://django-marcador.keimlink.de/) qui est sous licence Creative Commons Attribution-ShareAlike 4.0 International License. Le tutoriel django-marcador a été créé par Markus Zapke-Gründemann et al. + +## L'environnement virtuel + +Avant d'installer Django, nous allons vous faire installer un outil extrêmement utile qui vous aidera à maintenir votre environnement de développement propre. Nous vous recommandons fortement de ne pas sauter cette étape, même si elle n'est pas indispensable. En commençant avec la meilleure configuration possible vous éviterez beaucoup de problèmes par la suite ! + +Donc, commençons par créer un **environnement virtuel de programmation** (ou *virtualenv*). Chaque projet aura sa propre configuration en Python/Django grâce à virtualenv. Ce qui veut dire que si vous modifiez un site web, ça n'affectera pas les autres sites sur lesquels vous travaillez. Plutôt cool, non ? + +Tout ce dont vous avez besoin, c'est de trouver un dossier où vous voulez créer votre `virtualenv` ; vous pouvez choisir votre répertoire "home" par exemple. Sous Windows, le home ressemble à `C:\Utilisateurs\Nom` (où `Nom` est votre login). + +> **Note:** Sur Windows, assurez-vous que le chemin vers ce répertoire ne contienne pas d'accents ou autres caractères spéciaux; si c'est la cas, utilisez un répertoire différent, par exemple `C:\djangogirls`. + +Dans ce tutoriel, nous allons utiliser un nouveau dossier `djangogirls` que vous allez créer dans votre dossier home : + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Nous allons créer un virtualenv appelé `myvenv`. Pour cela, nous taperons une commande qui ressemblera à : + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Pour créer un nouveau `virtualenv`, vous devez ouvrir un terminal et exécuter `python -m venv myvenv`. Voici ce à quoi ça devrait ressembler: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Où `myvenv` est le nom de votre `virtualenv`. Vous pouvez choisir un autre nom mais attention : il doit être en minuscules, sans espaces et sans accents ou caractères spéciaux. C'est aussi une bonne idée de choisir un nom plutôt court, car vous aller souvent l'utiliser! + + + + + +Pour créer un `virtualenv` sous Linux ou macOS, tapez simplement la commande `python3 -m venv myvenv`. Ça ressemblera à ça : + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` est le nom de votre `virtualenv`. Vous pouvez choisir un autre nom, mais veillez à n'utiliser que des minuscules et à n'insérer ni espaces, ni caractères spéciaux. C'est aussi une bonne idée de choisir un nom plutôt court, car vous aller souvent l'utiliser! + +> **Note:** sur certaines versions de Debian/Ubuntu vous pouvez avoir l'erreur suivante: +> +> {% 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. +> +> +> Dans ce cas, suivez les instructions ci-dessus et installez le paquet `python9-venv`: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **Note:** Sur certaines version de Debian/Ubuntu, initialiser l’environnement virtuel de cette façon donne l'erreur suivante: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Pour résoudre ce problème, utilisez plutôt la commande `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **Note:** Si vous avez une erreur telle que : +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> alors exécutez plutôt : +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + + +## Travailler avec virtualenv + +Les commandes listées ci-dessus permettent de créer un dossier appelé `myvenv` (ou le nom que vous avez choisi) qui contient notre environnement virtuel. Pour faire simple, c'est un dossier composé lui-même d'autres dossiers et de fichiers. + + + +Démarrez votre environnement virtuel en exécutant : + +{% filename %}command-line{% endfilename %} + + C:\Utilisateurs\Nom\djangogirls> myvenv\Scripts\activate + + +> **Note:** sur Windows 10 vous pouvez avoir une erreur dans le PowerShell de Windows disant `execution of scripts is disabled on this system`. Dans ce cas ouvrez une autre console Windows PowerShell avec l'option "ouvrir en tant qu'administrateur". Puis essayer d'exécuter la commande suivante avant de démarrer votre environnement virtuel : +> +> {% 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 :** Sous Windows, pour les utilisateurs du très populaire éditeur de texte VS Code, qui comporte un terminal intégré basé sur Windows Powershell, si vous souhaitez conserver le terminal intégré, vous pouvez utiliser la commande suivante pour activer votre environnement virtuel : +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> L'avantage, c'est que vous n'aurez pas à constamment passer de l'éditeur aux lignes de commandes + + + + + +Démarrez votre environnement virtuel en exécutant : + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +N'oubliez pas de remplacer `myvenv` par le nom que vous avez choisi pour votre `virtualenv` (le cas échéant) ! + +> **NOTE :** il arrive parfois que `source` ne soit pas disponible. Dans ce cas, vous pouvez essayer ceci : +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Vous saurez que votre `virtualenv` est lancé quand le prompt de votre console est précédé de `(myvenv)`. + +Quand vous travaillez dans un environnement virtuel, la commande `python` fera automatiquement référence à la bonne version de Python. Vous pouvez donc utiliser `python` plutôt que `python3`. + +Ok, nous avons installé toutes les dépendances dont nous avions besoin. Nous allons enfin pouvoir installer Django ! + +## Installation de Django {#django} + +Maintenant que vous avez activé votre `virtualenv`, vous pouvez installer Django. + +Avant de faire cela, nous devons nous assurer que nous avons la dernière version de `pip`, le programme que nous allons utiliser pour installer Django: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Installer des paquets avec un fichier "requirements" + +Un fichier "requirement" maintient une liste des dépendances qui doivent être installées avec `pip install`: + +Tout d'abord, créez un fichier `requirements.txt` dans votre dossier `djangogirls`, en utilisant l'éditeur de texte que vous avez téléchargé précédemment. Pour ce faire, ouvrez un nouveau fichier dans l'éditeur et sauvegarde-le à l'intérieur du dossier `djangogirls/` en lui donnant le nom `requirements.txt`. Votre dossier ressemble maintenant à ceci : + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +Dans ce fichier `djangogirls/requirements.txt` vous devez ajouter ceci : + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Maintenant, exécutez `pip install -r requirements.txt` pour installer 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Si jamais vous obtenez des erreurs lorsque vous utilisez pip sous Windows, vérifiez si votre chemin d'accès contient des espaces, des accents ou des caractères spéciaux (ex : `C:\Utilisateurs\Nom d'Utilisateur\djangogirls`). Si c'est le cas, changez de dossier et essayez d'en créer un nouveau en prenant en compte le fait qu'il ne doit donc avoir ni accents, ni espaces, ni caractères spéciaux (ex : `C:\djangogirls`). Créez un nouvel environnement virtuel dans le nouveau répertoire, puis supprimez l'ancien et ré-essayez la commande précédente. (Déplacer ou couper/coller le répertoire de l'environnement virtuel ne marchera pas car virtualenv utilise des chemins absolus) + + + + + +> Votre terminal peut se figer quand vous essayez d'installer Django. Si cela arrive, utilisez cette commande au lieu de la précédente : +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Si vous obtenez une erreur lorsque vous utilisez pip sous Ubuntu 12.04, tapez la commande `python -m pip install -U --force-reinstall pip` pour réparer l'installation de pip dans votre virtualenv. + + + +Et voilà ! Vous êtes (enfin) prête pour créer votre première application Django ! \ No newline at end of file diff --git a/fr/django_models/README.md b/fr/django_models/README.md new file mode 100755 index 00000000000..ae4b2eaba7c --- /dev/null +++ b/fr/django_models/README.md @@ -0,0 +1,201 @@ +# Les modèles dans Django + +Maintenant, nous aimerions créer quelque chose qui permet stocker les articles de notre blog. Mais avant de pour pouvoir faire ça, nous allons tout d'abord devoir vous parler d'un truc qui s'appelle les `objets`. + +## Les objets + +Il existe un concept en programmation qu'on appelle la `programmation orientée objets`. L'idée, c'est de modéliser les choses et de définir comment elles interagissent entre elles plutôt que de tout voir comme une séquence d'instructions. + +Du coup, c'est quoi un objet ? C'est une collection de propriétés et d'actions. Ça a l'air bizarre dit comme ça. Un exemple devrait vous permettre d'y voir un peu plus clair. + +Si on veut modéliser un chat, nous allons créer un objet `Chat` qui a des propriétés comme `couleur`, `âge`, `humeur` (bonne humeur, mauvaise humeur, fatigué ;)) et `propriétaire` (ce qui pourrait être un objet `Personne`, ou, s'il s'agit d'un chat sauvage, cette propriété pourrait être simplement vide). + +Ensuite, nous pouvons donner des actions au `Chat` : `ronronner`, `gratter` ou `manger`. (Dans ce dernier cas, on donne au chat de la `NourriturePourChat`, ce qui peut être un objet séparé avec ses propres propriétés, comme le `goût`). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +L'idée qu'il faut retenir, c'est que l'on décrit les choses du monde réel avec des propriétés (appelées `propriétés des objets`) et des actions (appelées `méthodes`). + +Du coup, comment modéliser les articles de blog ? C'est bien gentil les chats, mais ce qui nous intéresse, ça reste de faire un blog ! + +Pour ça, il faut réponde à la question : qu'est-ce qu'un article de blog ? Quelles propriétés devrait-il avoir ? + +Pour commencer, notre blog post doit avoir du texte : il a bien du contenu et un titre, n'est-ce pas ? Et puis, ce serait bien de savoir aussi qui l'a écrit. On a donc besoin d'un auteur. Enfin, on aimerait aussi savoir quand l'article a été écrit et publié. + + Post + -------- + title + text + author + created_date + published_date + + +Quel genre d'actions pourrions-nous faire sur un article de blog ? Un bon début serait d'avoir une `méthode` qui permet de publier le post. + +On va donc avoir besoin d'une méthode `publish`. + +Voilà, nous avons une idée de ce que nous avons besoin. Allons modéliser tout ça dans Django! + +## Les modèles dans Django + +Maintenant que nous savons ce qu'est un objet, nous allons pouvoir créer un modèle Django pour notre post de blog. + +Un modèle Django est un type particulier d'objet : il est sauvegardé dans la `base de données`. Une base de données est une collection de données. C'est à cet endroit que l'on stocke toutes les informations au sujet des utilisateurs, des blog posts, etc. Pour stocker nos données, nous allons utiliser une base de données SQLite. C'est la base de données par défaut dans Django. Elle sera largement suffisante pour ce que nous voulons faire. + +Pour vous aider à visualiser ce qu'est une base de données, pensez à un tableur avec des colonnes (champs) et des lignes (données). + +### Créer une application + +Pour éviter le désordre, nous allons créer une application séparée à l'intérieur de notre projet. Prenez l'habitude de bien tout organiser dès le début. Afin de créer une application, nous avons besoin d'exécuter la commande suivante dans notre console (prenez garde à bien être dans le dossier `djangogirls` où se trouve le fichier `manage.py`) : + +{% filename %}macOS and Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Vous pouvez voir qu'un nouveau dossier `blog` a été créé et qu'il contient différents fichiers. Les dossiers et fichiers liés à votre projet doivent maintenant être organisés selon cette structure : + + djangogirls + ├── blog + │   ├── admin.py + │   ├── apps.py + │   ├── __init__.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + + +Après avoir créé une nouvelle application, vous devez dire à Django de l'utiliser. Nous faisons cela via le fichier `mysite/settings.py`. Ouvrez-le dans votre éditeur de code. Trouvez la section `INSTALLED_APPS` et ajoutez une ligne `'blog.apps.BlogConfig',` juste avant `]`. La section doit maintenant ressembler à ceci : + +{% 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.apps.BlogConfig', +] +``` + +### Créer un modèle de blog post + +Le fichier `blog/models.py` permet de définir les objets que nous appelons des `modèles`. C'est à cet endroit que nous allons définir ce que c'est qu'un un blog post. + +Ouvrez le fichier `blog/models.py` dans l'éditeur de code, supprimez tout ce qui s'y trouve et copiez-y le morceau de code suivant : + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Vérifiez que vous avez bien utilisé deux tirets bas (`_`) autour de `str`. C'est une convention fréquemment utilisée en Python qui porte même un petit nom en anglais : "dunder", pour "double-underscore". + +Ce gros morceau de code a l'air effrayant mais, ne vous inquiétez pas : nous allons vous expliquer ce que signifie chacune de ces lignes! + +Toutes les lignes qui commencent par `from` ou `import` sont des lignes qui permettent d'importer des morceaux d'autres fichiers. Concrètement, au lieu de recopier ou de copier-coller la même chose dans différents fichiers, nous pouvons tout simplement faire référence à certains morceaux d'autres fichiers à l'aide de `from ... import ...`. + +`class Post(models.Model):` - C'est cette ligne qui permet de définir notre modèle (ce qui est un `object`). + +- Le mot clef spécial `class` permet d'indiquer que nous sommes en train de définir un objet. +- `Post` est le nom de notre modèle. Vous pouvez lui donner un autre nom (mais vous ne pouvez pas utiliser des caractères spéciaux ou accentués et insérer des espaces). Le nom d'une classe commence toujours par une majuscule. +- `models.Model` signifie que Post est un modèle Django. Comme ça, Django sait qu'il doit l'enregistrer dans la base de données. + +Maintenant, nous allons pouvoir définir les propriétés dont nous parlions au début de ce chapitre : `title (titre)`, `text (texte)`, `created_date (date de création)`, `published_date (date de publication)` et `author (auteur)`. Pour cela, nous allons avoir besoin de définir le type de chaque champ (Est-ce que c'est du texte? Un nombre ? Une date ? Une relation à un autre objet, comme un objet utilisateur par exemple ?) + +- `models.CharField` - Cela nous permet de définir un champ texte avec un nombre limité de caractères. +- `models.TextField` - Cela nous permet de définir un champ text sans limite de caractères. Parfait pour le contenu d'un blog post, non ? +- `models.DateTimeField` - Définit que le champ en question est un horodatage (date et heure). +- `models.ForeignKey` - C'est un lien vers un autre modèle. + +Malheureusement, nous n'avons pas le temps de vous expliquer tous les bouts de code que nous allons manipuler dans ce tutoriel. Si vous voulez en savoir plus sur les modèles Django, n'hésitez pas à consulter la documentation officielle de Django (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field-types). + +Et sinon, c'est quoi `def publish(self):` ? Il s'agit de notre méthode `publish` dont nous parlions tout à l'heure. `def` signifie que nous créons une fonction/méthode qui porte le nom `publish`. Vous pouvez changer le nom de la méthode si vous le souhaitez. La règle de nommage est d'utiliser des minuscules et des tirets bas à la place des espaces. Par exemple, une méthode qui calcule le prix moyen d'un produit pourrait s'appeler `calcul_prix_moyen`. + +Les méthodes renvoient (`return`) souvent quelque chose. C'est le cas de la méthode `__str__`. Dans notre tutoriel, lorsque nous appellerons la méthode `__str__()`, nous allons obtenir du texte (**string**) avec un titre de Post. + +Notez également que les deux lignes `def publish(self) :` et `def __str__(self) :` sont mises en retrait à l’intérieur de notre classe. Parce que Python est sensible aux espaces, nous devons mettre en retrait (ou "indenter") nos méthodes à l'intérieur de la classe. Sinon, les méthodes ne sont pas considérées comme appartenantes à la classe, et vous pouvez obtenir un comportement inattendu. + +Si quelque chose ne vous parait pas clair au sujet des modèles, n'hésitez pas à demander à votre coach ! Cela peut être compliqué à comprendre la première fois, surtout lorsque l'on apprend les objets et les fonctions en même temps. Gardez espoir ! Avec le temps, tout cela vous paraitra de moins en moins magique et de plus en plus évident ! + +### Créer des tables pour votre modèle dans votre base de données + +La dernière étape pour cette section est d'ajouter notre nouveau modèle à notre base de données. Tout d'abord, nous devons signaler à Django que nous venons de créer notre modèle. (Nous venons de le terminer !). Allez sur votre terminal et tapez `python manage.py makemigrations blog`. Le résultat devrait ressembler à ça : + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Remarque :** N’oubliez pas de sauvegarder les fichiers que vous modifiez. Dans le cas contraire, votre ordinateur exécute la version précédente, ce qui pourrait vous donner des messages d’erreur inattendus. + +Django vient de nous préparer un fichier de migration que nous allons pouvoir appliquer dès maintenant à notre base de données. Pour cela, tapez `python manage.py migrate blog`. Normalement, vous devrez voir ceci s'afficher dans votre console : + +{% 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 + + +Youpi ! Notre modèle Post est maintenant intégré à la base de données. Ce serait cool de voir à quoi il ressemble réellement ! Pour ça, il va falloir attaquer la section suivante ! Au boulot ;)! \ No newline at end of file diff --git a/fr/django_orm/README.md b/fr/django_orm/README.md new file mode 100755 index 00000000000..89bb1a8927a --- /dev/null +++ b/fr/django_orm/README.md @@ -0,0 +1,221 @@ +# L'ORM Django et les QuerySets + +Dans ce chapitre, nous allons apprendre comment Django se connecte à la base de données et comment il y enregistre des choses. On respire un grand coup et on y va ! + +## Qu'est-ce qu'un QuerySet ? + +Un QuerySet est, par essence, une liste d'objets d'un modèle donné. C'est ce qui vous permet de lire, trier et organiser, des données présentes dans une base de données. + +Il est plus simple d'apprendre avec un exemple. Et si nous nous intéressions à celui-ci ? + +## Le shell Django + +Ouvrez la console de votre ordinateur (et non celle de PythonAnywhere) et tapez la commande suivante : + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Ceci devrait maintenant s'afficher dans votre console : + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Vous êtes maintenant dans la console interactive de Django. C'est comme celle de Python, mais avec toute la magie qu'apporte Django :). Les commandes Python sont aussi utilisables dans cette console. + +### Lister tous les objets + +Essayons tout d'abord d'afficher tous nos posts. Vous pouvez le faire à l'aide de cette commande : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Oups ! Voilà que ça nous renvoie une erreur qui nous dit qu'il n'existe pas de Post. En effet, nous avons oublié de commencer par un "import" ! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Nous importons le modèle `Post` depuis notre `blog.models`. Essayons à nouveau la commande précédente : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Cela nous permet d'obtenir une liste des posts que nous avons créés tout à l'heure ! Rappelez-vous : nous avions créé ces posts à l'aide de l'interface d'administration de Django. Cependant, nous aimerions maintenant créer de nouveaux posts à l'aide de python : comment allons-nous nous y prendre ? + +### Créer des objets + +Voici comment créer un nouveau objet Post dans la base de données : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Cependant, il nous manque un petit quelque chose : `me`. Nous avons besoin de lui passer une instance du modèle `User` en guise d'auteur (author). Comment faire ? + +Tout d'abord, il nous faut importer le modèle User : + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Avons-nous des utilisateurs dans notre base de données ? Voyons voir : + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Il s'agit du superutilisateur que nous avons créé tout à l'heure ! Sauvegardons une instance de cet utilisateur (modifie la ligne suivante avec ton nom d'utilisateur) : + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Comme vous pouvez le constater, nous avons maintenant obtenu (`get`) un utilisateur (`User`) avec un nom d’utilisateur `username` qui est égale à « ola ». Très bien ! + +Nous allons enfin pouvoir créer notre post : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Et voilà ! Vous aimeriez voir si ça a vraiment marché ? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Et voilà : un post de plus dans la liste ! + +### Ajouter plus de posts + +Amusez-vous à ajouter d'autres posts pour vous entrainer un peu. Essayez d'ajouter deux ou trois posts en plus puis passez à la partie suivante. + +### Filtrer les objets + +L'intérêt des QuerySets, c'est que l'on peut les filtrer. Disons que nous aimerions retrouver tous les posts écrits par l'utilisateur Ola. Pour cela, nous allons utiliser `filter` à la place de `all` dans `Post.objects.all()`. Les parenthèses vont nous servir à préciser quelles sont les conditions auxquelles un post de blog doit se conformer pour être retenu par notre queryset. Dans notre exemple, la condition est que `author` soit égal à `me`. La manière de le dire en Django c'est : `author=me`. Maintenant, votre bout de code doit ressembler à ceci : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +Et si nous voulions chercher les posts qui contiennent uniquement le mot "titre" ("title" en anglais) dans le champs `title`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Note** Il y a deux tirets bas (`_`) entre `title` et `contains`. L'ORM de Django utilise cette règle afin de séparer les noms de champ ("title") et les opérations ou les filtres ("contains"). Si vous n'utilisez qu'un seul tiret bas, vous allez obtenir une erreur du type : "FieldError: Cannot resolve keyword title_contains". + +Vous pouvez aussi obtenir une liste de tous les posts publiés. Pour cela, nous allons filtrer les posts qui possèdent une date de publication (`published_date`) dans le passé : + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Malheureusement, le post que nous avons créé dans la console Python n'est pas encore publié. Allons corriger ce problème ! Dans un premier temps, nous aimerions obtenir une instance du post que nous voulons publier : + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Ensuite, publions-le grâce à notre méthode `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Maintenant, essayez d'obtenir à nouveau la liste des posts publiés (appuyez trois fois sur la flèche du haut, puis `entrée`) : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Classer les objets + +Les QuerySets permettent aussi de trier la liste des objets. Essayons de les trier par le champs `created_date` : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +On peut aussi inverser l'ordre de tri en ajouter `-` au début : + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Requêtes complexes grâce au chaînage des méthodes + +Comme vous l'avez vu, quand on applique certaines méthodes à `Post.objects` on obtient un QuerySet en résultat. Les mêmes méthodes peuvent également être appliquées sur un QuerySet, ce qui ensuite donnera lieu à un nouveau QuerySet. Ainsi, vous pouvez combiner leur effet en les **enchaînant** l'une après l'autre : + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +C'est un outil très puissant qui va vous permettre d'écrire des requêtes complexes. + +Génial ! Vous êtes maintenant prête à passer à l'étape suivante ! Pour fermer le shell, tapez ceci: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/fr/django_start_project/README.md b/fr/django_start_project/README.md new file mode 100755 index 00000000000..e2c00b1c7de --- /dev/null +++ b/fr/django_start_project/README.md @@ -0,0 +1,260 @@ +# Votre premier projet Django ! + +> Une partie de ce chapitre s’inspire du tutoriel des Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Des morceaux de ce chapitre sont inspirés du [tutoriel django-marcador](http://django-marcador.keimlink.de/), disponible sous licence Creative Commons Attribution-ShareAlike 4.0 International. Le tutoriel django-marcador a été créé par Markus Zapke-Gründemann et al. + +Nous allons créer un petit blog ! + +La première étape consiste à démarrer un nouveau projet Django. En gros, cela veut dire que nous allons lancer quelques scripts fournis par Django qui vont créer un squelette de projet Django. Il s'agit de fichiers et de dossiers que nous utiliserons par la suite. + +Il y existe certains fichiers et dossiers dont les noms sont extrêmement importants pour Django. Il ne faut pas renommer les fichiers que nous sommes sur le point de créer. Ce n'est pas non plus une bonne idée de les déplacer. Django a besoin de maintenir une certaine structure pour retrouver les éléments importants. + +> N'oubliez pas de tout exécuter dans votre virtualenv. Si vous ne voyez pas le préfixe `(myvenv)` dans votre console, vous avez besoin d'activer votre virtualenv. Nous vous avons expliqué comment faire ça dans le chapitre **Installation de Django**, dans la partie **Travailler avec virtualenv**. Tapez `myvenv\Scripts\activate` dans votre console Windows ou `source myvenv/bin/activate` dans celle de Mac OS ou Linux afin d'activer votre virtualenv. + + + +Retournons à la création de notre premier projet. Tapez la commande suivant dans votre console MacOS ou Linux. **N'oubliez pas le point `.`à la fin !** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Le point `.` est très important : c'est lui qui permet de dire au script d'installer Django dans votre répertoire courant (le point `.` est une référence abrégée à celui-ci). +> +> **Note** : lorsque vous tapez la commande précédente dans votre console, vous ne devez recopier que la partie qui commence par `django-admin`. La partie `(myvenv) ~/djangogirls$` montrée ici n'est qu'un exemple pour vous rappeler de taper la commande dans votre console. + + + + + +Sur Windows, vous devez taper la commander suivante. ** (N'oubliez pas le point `.` à la fin) ** : + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Le point `.` est très important : c'est lui qui permet de dire au script d'installer Django dans votre répertoire courant (le point `.` est une référence abrégée à celui-ci). +> +> **Note** : lorsque vous tapez la commande précédente dans votre console, vous ne devez recopier que la partie qui commence par `django-admin.exe`. La partie `(myvenv) C:\Users\Name\djangogirls>` montrée ici n'est qu'un exemple pour vous rappeler de taper la commande dans votre console. + + + +`django-admin.py` est un script qui crée les dossiers et fichiers nécessaires pour vous. Vous devriez maintenant avoir une structure de dossier qui ressemble à celle-ci: + + djangogirls + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **Note** : dans votre structure de dossier, vous pourrez voir également le répertoire `myvenv` que nous avons créé avant. + +`manage.py` est un script qui aide à gérer ou maintenir le site. Entre autres, il permet notamment de lancer un serveur web sur notre ordinateur sans rien installer d'autre. + +Le fichier `settings.py` contient la configuration de votre site web. + +Vous vous souvenez de l'histoire du postier qui livre des lettres ? `urls.py` contient une liste de patterns d'urls utilisés par `urlresolver`. + +Ignorons les autres fichiers pour l'instant, nous n'allons pas avoir besoin d'y toucher. La seule chose à retenir est qu'il ne faut pas les supprimer par accident ! + +## Changer la configuration + +Apportons quelques changements à `mysite/settings.py`. Ouvrez le fichier avec l'éditeur de code que vous avez installé tout à l'heure. + +**Note** : Gardez à l’esprit que `settings.py` est un fichier ordinaire, comme les autres. Vous pouvez l’ouvrir depuis l’éditeur de code, en cliquant sur « file-> open » dans le menu. Cela devrait ouvrir la fenêtre habituelle de navigation, où vous allez pouvoir chercher votre fichier `settings.py` et le sélectionner. Autrement, vous pouvez naviguer jusqu’au dossier djangogirls sur votre bureau et faire un clic droit sur le nom du fichier. Sélectionnez ensuite votre éditeur de code dans la liste qui s'affiche. Sélectionner l’éditeur est important car vous pourriez avoir d’autres programmes installés qui peuvent ouvrir le fichier, mais qui ne vous permettraient pas de le modifier. + +Ça serait sympa d'avoir l'heure correcte sur notre site Web. Allez sur la [liste Wikipedia des fuseaux horaires](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) et copiez votre fuseau horaire (TZ) (par exemple `Europe/Berlin`). + +Dans `settings.py`, recherchez la ligne qui contient `TIME_ZONE` et modifiez-la pour choisir votre propre fuseau horaire. Par exemple : + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Un code de langue se compose de la langue, par exemple `en` pour l’anglais ou `de` pour l’allemand et du code du pays, p. ex. `de` pour l’Allemagne ou `ch` pour la Suisse. Si l’anglais n’est pas votre langue maternelle, vous pouvez ajouter votre code de langue afin que les boutons par défaut et les notifications de Django soient traduits. Vous auriez alors le bouton « Cancel » traduits dans la langue que vous avez définie. [Django est livré avec un grand nombre de traductions disponibles](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code). + +Si vous voulez changer la langue, modifiez le code de langue comme montré dans la ligne suivante : + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Nous allons avoir besoin aussi d'un chemin d’accès pour les fichiers statiques. (Nous allons découvrir les fichiers statiques et CSS plus tard dans le tutoriel) Allez à la *fin* du fichier et juste en dessous de `STATIC_URL`, ajoutez une nouvelle entrée `STATIC_ROOT` : + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Lorsque `DEBUG` a valeur `True` et `ALLOWED_HOSTS` est vide, les noms d'hôte acceptés sont `[« localhost », '127.0.0.1 », ' [ :: 1]']`. Notre nom d’hôte sur PythonAnywhere ne sera donc pas accepté une fois que notre application sera déployée. Pour éviter cela, nous allons changer le paramètre suivant : + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Note** : Si vous utilisez un Chromebook, ajoutez cette ligne à la fin de votre fichier settings.py : `MESSAGE_STORAGE = « django.contrib.messages.storage.session.SessionStorage »` +> +> Ajoutez `.amazonaws.com` à `ALLOWED_HOSTS` si vous utilisez cloud9 +> +> Si vous hébergez votre projet sur `Glitch.com`, nous devons protéger la clé secrète Django qui doit rester confidentielle (sinon, toute personne remixant votre projet pourrait la voir) : +> +> - Tout d'abord, nous allons créer une clé secrète aléatoire. Ouvrez à nouveau le terminal Glitch et tapez la commande suivante : +> +> {% filename %}Terminal{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> Ceci devrait afficher une longue chaîne de caractères aléatoire, parfaite à utiliser comme clé secrète pour votre tout nouveau site web Django. Nous allons maintenant coller cette clé dans un `.env` que Glitch ne vous montrera que si vous êtes propriétaire du site Web. +> +> - Créez un fichier `.env` à la racine de votre projet et ajoutez-y la propriété suivante : +> +> {% filename %}.env{% endfilename %} +> +> ```bash +> # Ici, à l'intérieur des apostrophes, vous pouvez copier et coller la clé aléatoire générée ci-dessus +> SECRET='3!0k#7ds5mp^-x$lqs2%le6v97h#@xopab&oj5y7d=hxe511jl' +> ``` +> +> - Puis mettez à jour le fichier de configuration de Django pour injecter cette valeur secrète et définir le nom du site web Django : +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - Et un peu plus loin, dans le même fichier, nous injectons le nom de votre nouveau site Glitch : +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> `PROJECT_DOMAIN` est générée automatiquement par Glitch. Elle contient le nom de votre projet. + +## Configuration de la base de données + +Il existe tout un tas de systèmes de gestion de bases de données qu'il est possible d'utiliser pour stocker les données de votre site. Nous allons utiliser celui par défaut : `sqlite3`. + +Il est déjà configuré dans cette partie de votre fichier `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Pour créer la base de donnée de notre blog, il faut lancer la commande suivante dans la console : `python manage.py migrate` (vous avez besoin d'être dans le dossier `djangogirls` qui contient le fichier `manage.py`). Si tout se passe bien, vous devriez voir quelque chose comme ça: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +Et voilà ! Il ne reste plus qu'à lancer le serveur et voir si notre site web fonctionne ! + +## Lancer le serveur web + +Pour cela, vous avez besoin d'être dans le dossier qui contient le fichier `manage.py` (le dossier `djangogirls`). Dans votre console, vous pouvez lancer le serveur en tapant `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Si vous avez un Chromebook, utilisez plutôt la commande suivante : + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +ou celle-ci si vous utilisez Glitch : + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +Si vous utilisez Windows et que vous obtenez l'erreur `UnicodeDecodeError`, tapez plutôt cette commande : + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Ensuite, vous allez vérifier que votre site fonctionne. Pour cela, ouvrez votre navigateur (Firefox, Chrome, Safari, Internet Explorer, ou n'importe quel autre), et entrez l'adresse suivante : + +{% filename %}navigateur{% endfilename %} + + http://127.0.0.1:8000/ + + +Si vous utilisez un Chromebook et Cloud9, cliquez plutôt sur l’URL dans la fenêtre pop-up qui devrait figurer dans le coin supérieur droit de la fenêtre de commande où le serveur web est en cours d’exécution. L'URL ressemblera à quelque chose comme : + +{% filename %}navigateur{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +ou sur Glitch : + + https://nom-de-votre-projet-glitch.glitch.me + + +Bravo ! Vous venez de créer votre premier site web, et de le lancer avec un serveur web ! C'est génial, non? + +![L'installation a fonctionné !](images/install_worked.png) + +Notez qu’une fenêtre de commande ne peut exécuter qu’une chose à la fois, et la fenêtre de commande que vous avez ouverte précédemment est en train d'exécuter le serveur web. Tant que le serveur web est en cours d’exécution et en attente de requêtes entrantes, le terminal acceptera du nouveau texte mais ne l'exécutera pas. + +> Nous avons vu le fonctionnement des serveurs web dans le chapitre **Comment fonctionne Internet**. + +Pour taper et executer des nouvelles commandes pendant que le serveur web est en fonction, ouvrez une nouvelle fenêtre dans votre terminal et activez votre virtualenv. Pour révoir comment ouvrir une nouvelle fenêtre, rendez-vous au chapitre [Introduction à la ligne de commande](../intro_to_command_line/README.md). Pour arrêter votre serveur web, retournez dans la fenêtre où il tourne et appuyez sur CTRL+C : gardez les boutons Control et C appuyés en même temps. (Sous Windows, vous devrez peut-être appuyer sur CTRL+Arrêt défil.) + +Prêtes pour la suite ? Il est temps de créer du contenu ! \ No newline at end of file diff --git a/fr/django_start_project/images/install_worked.png b/fr/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/fr/django_start_project/images/install_worked.png differ diff --git a/fr/django_templates/README.md b/fr/django_templates/README.md new file mode 100755 index 00000000000..8bb92d9e643 --- /dev/null +++ b/fr/django_templates/README.md @@ -0,0 +1,108 @@ +# Templates Django + +Il est temps d'afficher des données ! Pour nous aider, Django fournit des balises de gabarit (**template tags**) qui sont intégrées au framework. Pour le reste du tutoriel, nous utiliserons plutôt le mot template, bien plus répandu que sa traduction "gabarit". + +## Qu'est-ce que c'est que des balises de template ? + +En HTML, vous ne pouvez pas mettre directement du code Python car les navigateurs seraient incapables de le comprendre. Les navigateurs ne connaissent que le HTML. Nous vous avons signalé précédemment que HTML est du genre statique, alors que Python est bien plus dynamique. + +Les **Balises de template Django** nous permettent de transferer des choses ressemblant à du Python dans du HTML afin de nous permettre de construire des sites web plus rapidement. Cool, non ? + +## Template d'affichage de la liste des posts + +Dans le chapitre précédent, nous avons donné à notre template une liste de posts à l'aide de la variable `posts`. Nous allons maintenant les afficher en HTML. + +Afin d'afficher une variable dans un template Django, nous utiliserons des doubles accolades avec le nom de la variable à l'intérieur. Ça ressemble à ceci : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Essayez de faire la même chose avec votre template `blog/templates/blog/post_list.html`. Ouvrez-le avec votre éditeur et remplacez tout ce qui se trouve entre la seconde balise `
` jusqu'au troisième `
` avec la ligne `{{ posts }}`. Sauvegardez votre fichier et rafraichissez votre page pour voir le résultat : + +![Figure 13.1](images/step1.png) + +Comme vous pouvez le voir, tout ce que nous avons, c'est ceci : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Cela signifie que Django l'interprète comme une liste d'objets. Essayez de vous rappeler comment afficher des listes en Python. Si vous avez un trou de mémoire, allez voir dans le chapitre **Introduction à Python**. Vous avez trouvé ? Avec des boucles ! Dans un template Django, vous pouvez les écrire de la façon suivante : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Essayez ceci dans votre template. + +![Figure 13.2](images/step2.png) + +Ça marche ! Cependant, nous aimerions plutôt afficher les posts à la manière des posts statiques, comme lorsque nous les avions créés dans le chapitre **Introduction au HTML**. Vous pouvez mixer HTML et balises de template. Notre `body` ressemble maintenant à ceci : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Tout ce qui se situe entre `{% for %}` et `{% endfor %}` va être répété pour chaque objet présent dans la liste. Rafraichissez votre page :{% endraw %} + +![Figure 13.3](images/step3.png) + +Avez-vous remarqué que nous avons utilisé une notation légèrement différente cette fois-ci (`{{ post.title }}` ou `{{ post.text }}`) ? Nous accédons aux données associées à chaque champ défini dans notre modèle `Post`. De même, le `|linebreaksbr` nous permet de rediriger le texte des posts à travers un filtre qui convertit automatiquement les fins de lignes en paragraphes. + +## Une dernière chose + +Maintenant, ça serait bien de voir si votre site Web fonctionne toujours sur Internet. Nous allons essayer de le re-déployer sur PythonAnywhere. Voici un récapitulatif des étapes… + +* En premier lieu, envoyez votre code sur GitHub (push) + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modification des templates to afficher les posts contenus dans la base de données." + [...] + $ git push + + +* Ensuite, reconnectez-vous à [PythonAnywhere](https://www.pythonanywhere.com/consoles/) et allez sur la "**Bash console**" (ou démarrer-en une nouvelle), et lancez les commandes suivantes : + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(N’oubliez pas de remplacer `` avec votre propre nom de sous domaine sur PythonAnywhere, sans les chevrons.) + +* Pour finir, n'oubliez pas de recharger votre application web : onglet [Web](https://www.pythonanywhere.com/web_app_setup/) puis cliquez sur le bouton **Reload**. (Pour rejoindre les autres pages de PythonAnywhere à partir de la console, utilisez le bouton de menu dans le coin supérieur droit). Votre mise à jour devrait apparaître sur https://subdomain.pythonanywhere.com--Allez regarder dans le navigateur ! Si les posts sur PythonAnywhere ne correspondent pas à ceux qui apparaissent dans votre version locale du blog, ne vous inquiétez pas. Les deux bases de données, la locale et celle sur PythonAnywhere, ne sont pas synchronisées comme le reste des fichiers. + +Félicitations ! Maintenant, allez de l'avant et essayez d'ajouter un nouveau message dans votre administrateur Django (rappelez-vous d'ajouter publication_date!) Assurez-vous que vous êtes dans l'administrateur Django pour votre site pythonanywhere, https://subdomain.pythonanywhere.com/admin. Ensuite, rafraîchissez votre page pour voir si le message apparaît. + +Ça a marché ? Nous sommes super fière de vous ! Éloignez vous un peu de votre clavier maintenant : vous avez mérité de faire une pause. :) + +![Figure 13.4](images/donut.png) \ No newline at end of file diff --git a/fr/django_templates/images/donut.png b/fr/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/fr/django_templates/images/donut.png differ diff --git a/fr/django_templates/images/step1.png b/fr/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/fr/django_templates/images/step1.png differ diff --git a/fr/django_templates/images/step2.png b/fr/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/fr/django_templates/images/step2.png differ diff --git a/fr/django_templates/images/step3.png b/fr/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/fr/django_templates/images/step3.png differ diff --git a/fr/django_urls/README.md b/fr/django_urls/README.md new file mode 100755 index 00000000000..2acb1af708e --- /dev/null +++ b/fr/django_urls/README.md @@ -0,0 +1,103 @@ +# Les URL de Django + +Nous sommes sur le point de créer notre première page web : une page d'accueil pour votre blog ! Mais d'abord, commençons par en apprendre un peu plus sur les URL de Django. + +## Qu'est-ce qu'une URL ? + +Une URL est une adresse web. Vous pouvez voir une URL chaque fois que vous visitez un site web. Elle est visible dans la barre d'adresse de votre navigateur. (Oui ! `127.0.0.1:8000` est aussi une URL ! Et `https://djangogirls.org` est aussi une URL.) + +![URL](images/url.png) + +Chaque page internet a besoin de sa propre URL. C'est grâce à cela que votre application sait ce qu'elle doit afficher à un utilisateur qui ouvre cette URL. Dans Django, nous utilisons un outil appelé `URLconf` (Configuration d'URL). URLconf est un ensemble de modèles que Django va essayé de faire correspondre à l'URL demandée afin de trouver la vue adaptée. + +## Comment les URLs fonctionnent-elles dans Django ? + +Ouvrons le fichier `mysite/urls.py` dans notre éditeur de code et regardons à quoi il ressemble : + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Comme vous pouvez le voir ici, Django a déjà préparé quelque chose pour nous. + +Les lignes entre triples guillemets (`'''` or `"""`) sont appelées docstrings. Vous pouvez les écrire en haut d'un fichier, d'une classe ou d'une méthode pour décrire son fonctionnement. Elle ne seront pas exécutées par Python. + +L'URL admin, que vous avez abordé dans le chapitre précédent est déjà là : + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Cette ligne signifie que pour toutes les URL commençant par `admin/`, Django trouvera une *vue* correspondante. Dans cet exemple, nous incluons de nombreuses URL admin. Elles ne sont donc pas toutes contenues dans ce petit fichier. C'est plus lisible et plus propre. + +## Votre première URL Django ! + +Il est temps de créer notre première URL ! Nous voulons que 'http://127.0.0.1:8000/' soit la page d'accueil de notre blog et qu'elle affiche la liste des articles. + +Nous aimerions aussi garder notre fichier `mysite/urls.py` propre. Pour cela, nous allons importer les URLs de notre application `blog` dans notre fichier principal `mysite/urls.py`. + +Allez-y ! Ajoutez une ligne qui importera `blog.urls`. Vous devrez également modifier la ligne ` from django.urls...` car nous utiliseront la fonction `include`. Il vous faudra ajouter cet import à la ligne. + +Votre fichier `mysite/urls.py` devrait maintenant ressembler à ceci : + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django va maintenant rediriger tout ce qui arrive sur "http://127.0.0.1:8000/" vers `blog.urls` puis regardera dans ce fichier pour y trouver la suite des instructions à suivre. + +## blog.urls + +Créez un nouveau fichier vide nommé `urls.py` dans le répertoire `blog`, et ouvrez-le dans l'éditeur de code. Très bien ! Ajoutez ces deux premières lignes : + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Nous venons d'importer la fonction `path` de Django ainsi que toutes les `vues` liées à notre application `blog`. (Cependant, nous n'avons pas encore créé de vues ! Pas de problème : nous y viendrons dans une minute !) + +Après ça, nous pouvons ajouter notre premier modèle (pattern) d'URL: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Comme vous pouvez le voir, nous assignons une `vue` appelée `post_list` à l'URL racine. Ce modèle d’URL correspond à une chaîne vide et le résolveur d'URL de Django ignore le nom de domaine (par exemple, http://127.0.0.1:8000/), soit la première partie de l'URL. Ce pattern va donc indiquer à Django d'afficher la vue `views.post_list` à un utilisateur de votre site web qui se rendrait à l'adresse "http://127.0.0.1:8000/". + +La dernière partie, `name='post_list'`, est le nom de l'URL qui sera utilisée afin d'identifier la vue. Ce nom peut être le même que celui de la vue ou quelque chose de complètement différent. Plus tard dans ce tutoriel, nous allons utiliser les noms que nous avons donné à nos URLs. Il est donc important de donner un nom unique à chaque URL que nous créons. Pour vous faciliter la tâche, essayez de trouver des nom d'URLs simple à retenir. + +Si vous essayez d'aller sur http://127.0.0.1:8000/ maintenant, vous trouverez un message du style « page web non disponible ». C’est parce que le serveur (vous vous souvenez d'avoir tapé `runserver` ?) n'est plus en exécution. Jetez un oeil à la console pour savoir pourquoi. + +![Erreur](images/error1.png) + +Votre console affiche une erreur, mais ne vous inquiétez pas – c’est en fait très utile : elle vous dit qu’il n’existe aucun attribut « post_list » (**no attribute 'post_list'**). C’est le nom de la *vue* que Django essaie de trouver et d’utiliser, or nous ne l'avons pas encore créée. À ce stade, votre `/admin/` ne fonctionnera pas non plus. Pas de problème, on y vient. Si vous voyez un message d’erreur différent, essayez de redémarrer votre serveur web. Pour faire cela, dans la console qui exécute le serveur web, arrêtez-le en appuyant sur CTRL+C (les touches Control et C simultanément). Sous Windows, vous devrez peut-être appuyer sur Ctrl+Break. Vous devrez alors redémarrer le serveur web en exécutant la commande `python manage.py runserver`. + +> Si vous voulez en savoir plus au sujet de la configuration des URLs dans Django, vous pouvez aller consulter la documentation officielle du framework : https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/fr/django_urls/images/error1.png b/fr/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/fr/django_urls/images/error1.png differ diff --git a/fr/django_urls/images/url.png b/fr/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/fr/django_urls/images/url.png differ diff --git a/fr/django_views/README.md b/fr/django_views/README.md new file mode 100755 index 00000000000..530a34f1b35 --- /dev/null +++ b/fr/django_views/README.md @@ -0,0 +1,44 @@ +# Vues Django - C'est l'heure de créer ! + +Il est enfin temps de se débarrasser du bug que nous avons créé dans le chapitre précédent! :) + +C'est dans la *vue* que nous allons ranger toute la partie "logique" de notre application. C'est elle qui va se charger d'aller chercher les informations liées à notre `modèle `que nous venons de créer et de les passer à un `template`. Nous allons créer ce template dans le chapitre suivant. Concrètement, les vues ne sont que des fonctions Python un peu plus élaborées que celles que nous avons créées dans la partie **Introduction à Python**. + +Les vues sont placées dans le fichier `views.py`. Nous allons créer nos *vues* dans le fichier `blog/views.py`. + +## blog/views.py + +Ok, allons-y ! Ouvrons ce fichier dans notre éditeur de code pour voir ce qu'il contient : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Pas beaucoup de choses pour l'instant. + +N’oubliez pas que les lignes commençant par `#` sont des commentaires, ce qui signifie qu'elles ne sont pas exécutées par Python. + +Nous allons créer une *vue* comme l’indique le commentaire. Ajoutez la vue minimale suivante : + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Comme vous pouvez le voir, nous avons créé une fonction (`def`) appelée `post_list` qui prend une `request (requête)` et qui va `return (retourner)` la valeur donnée par une autre fonction `render` qui va assembler notre template `blog/post_list.html`. + +Sauvegardez votre fichier et allez à l'adresse http://127.0.0.1:8000/ pour voir ce qui s'affiche maintenant. + +Une autre erreur ! Voyons ce qu'elle nous dit : + +![Erreur](images/error.png) + +Cela indique que le serveur tourne, ce qui est bien, mais il y a quelque chose qui ne va pas, non ? Ne vous inquiétez pas, c’est juste une page d’erreur, il ne faut pas avoir peur d'elle ! Au contraire, tout comme les messages d’erreur dans la console, elle nous est très utile. Vous pouvez lire que *TemplateDoesNotExist*. Nous allons corriger ce bug et créer un modèle (template) dans le prochain chapitre ! + +> Pour en apprendre un peu plus sur les vues dans Django, consultez la documentation officielle : https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/fr/django_views/images/error.png b/fr/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/fr/django_views/images/error.png differ diff --git a/fr/domain/README.md b/fr/domain/README.md new file mode 100755 index 00000000000..ff70deddbb7 --- /dev/null +++ b/fr/domain/README.md @@ -0,0 +1,71 @@ +# Nom de domaine + +Heroku vous a donné un nom de domaine, mais il est long, difficile à retenir, et franchement moche... Ce serait quand même mieux d'avoir un nom de domaine plus court et plus facile à retenir, n'est-ce pas ? + +C'est ce que nous allons voir dans ce chapitre : comment acheter un nom de domaine et le faire pointer vers Heroku ! + +## Où enregistrer son nom de domaine ? + +Un nom de domaine coûte environ 15$ par an. Vous pouvez en trouver des plus ou moins cher : tout dépend de votre provider. Il existe de très nombreuses compagnies spécialisées dans l'enregistrement de nom de domaine : une simple recherche sur [Google][1] vous listera plusieurs centaines de possibilités. + + [1]: https://www.google.com/search?q=register%20domain + +Notre petit favori est [I want my name][2]. Ils revendiquent un "management de nom de domaine sans peine", ce qui est vraiment le cas. + + [2]: https://iwantmyname.com/ + +## Comment enregistrer mon nom de domaine sur IWantMyName ? + +Allez sur [iwantmyname][3] et tapez le nom de domaine que vous souhaiteriez enregistrer dans le champ de recherche. + + [3]: https://iwantmyname.com + +![][4] + + [4]: images/1.png + +Une liste des noms de domaines disponibles avec le nom que vous souhaiteriez va alors s'afficher. Comme vous pouvez le constater, un smiley joyeux indique que le nom de domaine est libre tandis qu'un smiley triste signifie qu'il est malheureusement déjà pris. + +![][5] + + [5]: images/2.png + +Nous avons décidé d'acheter `djangogirls.in` : + +![][6] + + [6]: images/3.png + +Allez dans votre panier et confirmez-le. Vous allez devoir vous créer un compte sur iwantmyname. Ensuite, vous allez pouvoir sortir votre carte bleue et acheter votre nom de domaine ! + +Une fois ces étapes franchies, cliquez sur `Domains` dans le menu et sélectionnez votre tout nouveau nom de domaine. Ensuite, trouvez et cliquez sur le lien `manage DNS records` : + +![][7] + + [7]: images/4.png + +Cherchez ce formulaire : + +![][8] + + [8]: images/5.png + +Remplissez le avec les informations suivantes : - Hostname: www - Type: CNAME - Value: votre nom de domaine chez Heroku (par exemple djangogirls.herokuapp.com) - TTL: 3600 + +![][9] + + [9]: images/6.png + +Cliquez sur le bouton "Add" puis le bouton "Save changes" en bas de la page. + +Il va falloir attendre quelques heures avant que votre nom de domaine fonctionne, soyez patient⋅e ! + +## Configurer un nom de domaine dans Heroku + +Vous allez avoir besoin de prévenir Heroku que vous souhaitez utiliser un nom de domaine perso. + +Pour cela, allez dans le [Dashboard d'Heroku][10], connectez-vous avec votre compte et choisissez votre application. Ensuite, allez dans la partie configuration (settings) de votre application et ajoutez votre nom de domaine dans la section `Domains`. N'oubliez pas d'enregistrer les modifications. + + [10]: https://dashboard.heroku.com/apps + +Et voilà, c'est tout ! \ No newline at end of file diff --git a/fr/dynamic_data_in_templates/README.md b/fr/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..4c25163a082 --- /dev/null +++ b/fr/dynamic_data_in_templates/README.md @@ -0,0 +1,84 @@ +# Données dynamiques dans les templates + +Nous avons différents morceaux en place : le modèle `Post` qui est définit dans le fichier `models.py`, la vue `post_list` dans `views.py` et nous venons de créer notre template. Mais comment allons-nous faire pour faire apparaître nos posts dans notre template HTML ? Car au final, n'est-ce pas le but que nous souhaiterions atteindre ? Nous aimerions prendre du contenu, en l’occurrence notre modèle sauvegardé dans notre base de données, et réussir à joliment l'afficher dans notre template. + +C'est à ça que servent les *vues* : connecter les modèles et les templates. Dans notre *vue* `post_list`, nous allons avoir besoin de prendre les modèles dont nous avons besoin et de les passer au template. C'est dans la *vue* que nous allons décider ce qui va s'afficher (quel modèle) dans un template. + +Ok, et sinon, on fait comment ? + +Nous allons avoir besoin d'ouvrir le fichier `blog/views.py` dans l'éditeur de code. Pour l'instant, la *vue* `post_list` ressemble à ceci : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Est-ce que vous vous souvenez de comment rajouter des morceaux de code écris dans d'autres fichiers ? Nous en avons parlé dans un chapitre précédent. Nous allons devoir importer notre modèle qui est défini dans le fichier `models.py`. Pour cela, nous allons ajouter la ligne `from .models import Post` de la façon suivante : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Le point avant `models` signifie *dossier courant* ou *application courante*. Les fichiers `views.py` et `models.py` sont dans le même répertoire. Cela signifie que nous pouvons utiliser `.` suivi par le nom du fichier (sans `.py`). Ensuite, nous importons le modèle (`Post`). + +Ok, et après ? Afin de pouvoir aller chercher les véritables posts de blog de notre modèle `Post`, nous avons besoin de quelque chose qui s'appelle un `QuerySet`. + +## QuerySet + +Normalement, ce mot doit vous évoquer quelque chose. Nous en avons un peu parlé dans la section [Django ORM (QuerySets)](../django_orm/README.md). + +Maintenant, nous allons nous intéresser à comment publier les post classés par date de publication (`published_date`). Ça tombe bien, on a déjà fait ça dans la section sur les QuerySets ! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Ouvrons donc le fichier `blog/views.py` dans l’éditeur de code et ajoutons le morceau de code suivant à la fonction `def post_list(request)`. N’oubliez pas d’ajouter d’abord `from django.utils import timezone`. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Pour afficher notre QuerySet sur la liste des publications de notre blog, il nous reste deux choses à faire: + +1. Passer les `posts` QuerySet dans le contexte du modèle, en changeant l'appel à la fonction `render` . Nous allons le faire maintenant. +2. Modifier le modèle pour afficher le QuerySet `posts` . Nous en parlerons dans un chapitre ultérieur. + +Veuillez noter que nous créons une *variable* pour notre QuerySet : `posts`. Considérez que c'est le nom de notre QuerySet. À partir de maintenant, nous allons pouvoir faire référence à notre QuerySet en utilisant ce nom. + +Dans la fonction `render`, nous avons un paramètre `request`, qui désigne tout ce que nous recevons d'un utilisateur par l'intermédiaire d'Internet, et un autre qui signale le fichier template (`'blog/post_list.html'`). Le dernier paramètre, `{}`, va nous permettre de glisser des informations que notre template va utiliser. Nous devons donner des noms à ces informations (nous allons rester sur `'posts'` pour le moment). :) Ça va ressembler à ça : `{'posts': posts}`. La partie située avant `:` est une chaine de caractères ; vous devez donc l'entourer de guillemets : `''`. + +Au final, notre fichier `blog/views.py` doit ressembler à ceci maintenant : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Et voilà, c'est bon ! Nous allons retourner du côté de notre template pour que notre QuerySet puisse s'afficher correctement ! + +Si vous voulez en savoir plus sur les QuerySets, n'hésitez pas à consulter la documentation officielle du framework : https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/fr/extend_your_application/README.md b/fr/extend_your_application/README.md new file mode 100755 index 00000000000..56e9c2d1b6a --- /dev/null +++ b/fr/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Finaliser votre application + +Nous avons déjà franchi toutes les étapes nécessaires à la création de notre site web : nous savons maintenant comment écrire un modèle, une URL, une vue et un template. Nous avons même réussi à rendre notre site web plus joli . + +C'est le moment de pratiquer tout ce que vous avez appris ! + +Tout d'abord, il faudrait que notre blog possède une page qui permet d'afficher un post, n'est-ce pas ? + +Nous avons déjà un modèle `Post`, nous n'avons donc pas besoin d'ajouter quoi que ce soit à `models.py`. + +## Créer un lien dans un template + +Nous allons tout d'abord ajouter un lien à l'intérieur du fichier `blog/templates/blog/post_list.html`. Ouvrez-le dans l’éditeur de code et voyez qu'il devrait ressembler à ceci : {% 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 %} +``` + +{% raw %}Nous aimerions pouvoir cliquer sur le titre du post et arriver sur une page avec le contenu de celui-ci. Pour cela, changeons `

{{ post.title }}

` pour qu'il pointe vers la page de contenu du post :{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}C'est le moment parfait pour expliquer ce mystérieux `{% url 'post_detail' pk=post.pk %}`. Vous vous souvenez peut-être que la notation `{% %}` nous permet d'utiliser les balises de template Django. Cette fois-ci, nous allons utiliser des balises qui vont s'occuper de créer des URLs à notre place !{% endraw %} + +La partie `post_detail` signifie que Django s'attend de trouver une URL en `blog/urls.py` avec nom = post_detail + +Et qu’en est-il de `pk=post.pk` ? `pk` est l’abréviation de clé primaire (« primary key » en anglais), qui est un identifiant unique pour chaque entrée dans une base de données. Chaque modèle Django a un champ qui sert de clé primaire, et peu importe son autre nom, il peut aussi être appelé par le nom « pk ». Comme nous n’avons pas spécifié de clé primaire dans notre modèle `Post`, Django en crée une pour nous (par défaut, un champ nommé « id » contenant un nombre qui augmente pour chaque entrée, c’est-à-dire 1, 2, 3, etc.) et l’ajoute comme champ à chacun de nos posts. Nous accédons à la clé primaire en écrivant `post.pk`, pareil que pour accéder aux autres champs (`title`, `author`, etc.) de notre objet `Post` ! + +Maintenant si nous jetons un coup d’œil à http://127.0.0.1:8000/, nous rencontrons une erreur. Ceci est prévisible, puisque nous n'avons ni d'URL ni de *view* pour `post_detail`. L'erreur ressemble à ceci : + +![Erreur NoReverseMatch](images/no_reverse_match2.png) + +## Créer une URL vers le contenu d'un post + +Allons créer notre URL dans le fichier `urls.py` pour notre *vue* `post_detail` ! + +Nous aimerions que le contenu de notre premier post s'affiche à cette **URL** : http://127.0.0.1:8000/post/1/ + +Allons créer une URL dans le fichier `blog/urls.py` qui dirigera Django vers une *vue* appelée `post_detail`. Cela nous permettra d'afficher l'intégralité d'un post de blog. Ouvrez le fichier `blog/urls.py` dans l’éditeur de code et ajoutez la ligne `path('post//', views.post_detail, name='post_detail'),` afin que le fichier ressemble à ceci : + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +La partie `post//` spécifie un modèle d’URL – allons voir plus dans le détail : + +- `post/` signifie que l’URL doit commencer par le mot **post** suivie d’un **/**. OK, pas très compliqué. +- ``– cette partie est plus délicate. Cela signifie que Django s’attend à une valeur entière (int), qu'en suite il transférera à une vue comme variable de nom `pk`. +- `/` – il nous faut un **/** à nouveau avant la fin de l’URL. + +Concrètement, cela signifie que si vous entrez `http://127.0.0.1:8000/post/5/` dans votre barre d'adresse, Django va comprendre que vous cherchez à atteindre une *vue* appelée `post_detail` et qu'il doit communiquer à cette *vue* que `pk` est égal à `5`. + +OK, nous avons ajouté un nouveau modèle d’URL à `blog/urls.py` ! Actualisons la page : http://127.0.0.1:8000/ Boom ! Le serveur a cessé de marcher à nouveau. Jetez un oeil sur la console – comme prévu, il y a encore une autre erreur ! + +![AttributeError](images/attribute_error2.png) + +Vous souvenez-vous de ce qu'il faut faire ensuite ? Il faut ajouter une vue ! + +## Ajouter une vue pour le contenu du post + +Cette fois-ci, nous allons donner un paramètre supplémentaire à notre *vue* : `pk`. Notre *vue* va avoir besoin de le récupérer, n'est ce pas ? Pour cela, nous allons définir une fonction : `def post_detail(request, pk):`. Notez que ce paramètre doit avoir exactement le même nom que celui que nous avons spécifié dans le fichier `urls` (`pk`). Notez aussi qu’oublier de mettre cette variable est incorrect et produira une erreur ! + +Maintenant, nous aimerions obtenir qu'un seul blog post. Pour cela, nous allons utiliser des QuerySets qui ressemblent à ceux-ci: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Cependant, il y a un petit problème dans cette ligne de code. Si aucun de nos `Posts` ne possèdent cette `primary key (clef primaire)` (`pk`), nous allons nous retrouver avec une super erreur bien cracra! + +![Erreur DoesNotExist](images/does_not_exist2.png) + +Dans l'idéal, nous aimerions pouvoir éviter ça! Encore une fois, Django nous offre l'outil parfait pour ça : `get_object_or_404`. Dans le cas où il n'existerait pas de `Post` avec le `pk` indiqué, une page d'erreur beaucoup plus sympathique s'affichera : c'est ce qu'on appelle une `erreur 404 : page non trouvée`. + +![Page non trouvée](images/404_2.png) + +La bonne nouvelle, c'est que vous pouvez créer vous-mêmes votre page `Page non trouvée` et en faire ce que vous voulez ! Reconnaissez que ce n'est pas le plus important pour le moment donc nous allons zapper cette partie ;). + +Ok, ajoutons notre *vue* à notre fichier `views.py`! + +Dans le fichier `blog/urls.py` nous avons crée un modèle d'URL `post_detail` qui fait référence à la vue `views.post_detail`. En conséquence, Django s'attend à qu'une fonction `post_detail` soit définie dans le fichier `blog/views.py`. + +Ouvrez maintenant le fichier `blog/views.py` dans l'éditeur de code et ajoutez la ligne suivante après les autres lignes du type `from` qui existent déjà : + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +A la fin du fichier nous ajoutons finalement notre *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}) +``` + +Hop, réactualisons la page http://127.0.0.1:8000/ + +![Vue post_list](images/post_list2.png) + +C'est bon, ça a marché ! Mais que ce passe-t-il lorsque nous cliquons sur un lien dans un titre de blog post ? + +![Erreur TemplateDoesNotExist](images/template_does_not_exist2.png) + +Oh non ! Encore une erreur ! Mais cette fois, vous savez quoi faire : nous avons besoin d'un template ! + +## Créer un template pour le contenu du post + +Nous allons créer un fichier `post_detail.html` dans le dossier `blog/templates/blog` et nous l'ouvrons ensuite avec notre éditeur de code. + +Entrez le code suivant : + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Une nouvelle fois, nous faisons hériter de `base.html`. Dans le `content` block, nous voulons afficher la date de publication d'un post (si elle existe), son titre et son texte. Mais vous souhaitez peut-être quelques éclaircissements avant, non? + +{% raw %}`{% if ... %} ... {% endif %}` est une balise de template que nous pouvons utiliser si nous voulons vérifier quelque chose. (Vous souvenez-vous de `if ... else ..` que nous avons appris dans le chapitre **Introduction à Python** ?) Dans ce cas spécifique, nous voulons vérifier que `published_date` existe.{% endraw %} + +Ok, vous pouvez maintenant actualiser votre page et voir si `TemplateDoesNotExist` a enfin disparu. + +![Page détaillée d'un post](images/post_detail2.png) + +Yay ! Ça marche! + +# C'est le moment de deployer ! + +Ce serait bien de mettre à jour la version de notre site sur PythonAnywhere. On s'accroche et on déploie encore une fois :) + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add . + $ git status + $ git commit -m "Ajout de la vue et du template de détail blog post ainsi que du CSS pour le site." + $ git push + + +Puis, dans la console bash de [PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(N’oubliez pas de remplacer `` avec votre propre sous-domaine PythonAnywhere, sans les chevrons.) + +## Mise à jour des fichiers statiques sur le serveur + +Des serveurs comme PythonAnywhere réservent un traitement particuliers aux "fichiers statiques" (par exemple les fichiers CSS), notamment afin de les charger plus rapidement. En conséquence, à chaque fois que nos fichiers CSS changent, nous devons executer une commande pour que le serveur les mette à jour. Cette commande s'appelle `collectstatic`. + +Démarrez en activant votre virtualenv, s'il n'est pas toujours actif (PythonAnywhere propose la commande `workon`, ce qui est l'équivalent de `source myenv/bin/activate` sur votre ordinateur) : + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +La commande `manage.py collectstatic` nous rappelle un peu `manage.py migrate`. Nous apportons des changements à notre code, puis nous disons à Django *d'appliquer* ces changements, que ce soit pour la gestion des fichiers statiques ou pour la structure de la base de données. + +Maintenant nous sommes prêtes à aller sur [« Web »](https://www.pythonanywhere.com/web_app_setup/) (depuis le menu en haut à droite de la console), appuyer sur **Reload** et voir les résultats à votre adresse https://sous-domaine.pythonanywhere.com. + +Normalement, ça devrait suffire ! Encore bravo! :) \ No newline at end of file diff --git a/fr/extend_your_application/images/404_2.png b/fr/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/fr/extend_your_application/images/404_2.png differ diff --git a/fr/extend_your_application/images/attribute_error2.png b/fr/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/fr/extend_your_application/images/attribute_error2.png differ diff --git a/fr/extend_your_application/images/does_not_exist2.png b/fr/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/fr/extend_your_application/images/does_not_exist2.png differ diff --git a/fr/extend_your_application/images/no_reverse_match2.png b/fr/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/fr/extend_your_application/images/no_reverse_match2.png differ diff --git a/fr/extend_your_application/images/post_detail2.png b/fr/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/fr/extend_your_application/images/post_detail2.png differ diff --git a/fr/extend_your_application/images/post_list2.png b/fr/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/fr/extend_your_application/images/post_list2.png differ diff --git a/fr/extend_your_application/images/template_does_not_exist2.png b/fr/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/fr/extend_your_application/images/template_does_not_exist2.png differ diff --git a/fr/how_the_internet_works/README.md b/fr/how_the_internet_works/README.md new file mode 100644 index 00000000000..214707e0954 --- /dev/null +++ b/fr/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Comment fonctionne Internet + +> Pour les lectrices autodidactes : ce chapitre est traité dans la vidéo [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Ce chapitre s’inspire de la conférence « Comment fonctionne Internet » de Jessica McKellar (http://web.mit.edu/jesstess/www/). + +Vous utilisez sûrement Internet tous les jours. Mais savez-vous ce qui ce passe vraiment quand vous tapez une adresse comme https://djangogirls.org dans votre navigateur et appuyez sur `Entrée`? + +La première chose que vous devez comprendre c’est qu’un site Web consiste en un tas de fichiers sauvegardés sur un disque dur -- tout comme vos films, musiques ou photos. Cependant, les sites web ont quelque chose d'unique : ils contiennent du code informatique appelé HTML. + +Si vous n'avez pas l'habitude de la programmation, il peut être difficile de comprendre HTML au début, mais vos navigateurs web (comme Chrome, Safari, Firefox, etc.) adorent ça. Les navigateurs web sont conçus pour comprendre ce code, pour suivre les instructions qu'il contient et présenter les fichiers de votre site web exactement comme vous voulez qu'ils soient présentés. + +Comme pour n'importe quel autre fichier, il faut stocker les fichiers HTML sur un disque dur quelque part. Pour Internet, on utilise des ordinateurs spéciaux, très puissants, appelés *serveurs*. Ils n'ont pas d'écran, de clavier ou de souris, car leur rôle est de stocker des données, et de les servir. C'est pour ça qu'on les appelle des *serveurs* : parce qu'ils sont là pour vous *servir* des données. + +Bon, d'accord. Mais vous avez envie de savoir à quoi Internet ressemble, n'est-ce-pas ? + +Nous vous avons fait un dessin ! Voilà à quoi ça ressemble : + +![Figure 1.1](images/internet_1.png) + +C'est le bazar, non ? En fait, c'est un réseau de machines connectées entre elles (les *serveurs* dont on parlait plus tôt). Des centaines de milliers de machines ! Des millions de kilomètres de câbles, partout dans le monde ! Vous pouvez aller voir une carte des câbles sous-marins (http://submarinecablemap.com/) pour voir à quel point le réseau est compliqué. Voici une capture d'écran du site : + +![Figure 1.2](images/internet_3.png) + +Fascinant, non ? Cependant, il n'est pas possible de tirer un câble entre chaque machine connectée à Internet. Du coup, pour atteindre une machine (par exemple, celle où https://djangogirls.org est sauvegardé), on doit faire passer une requête par plein d'autres machines. + +Ça ressemble ça : + +![Figure 1.3](images/internet_2.png) + +C'est un peu comme si, quand vous tapiez https://djangogirls.org, vous envoyiez une lettre qui dit "Chères Django Girls, je voudrais voir le site djangogirls.org. Pouvez-vous me l'envoyer ?" + +Votre lettre part vers le bureau de poste le plus proche. Ensuite, il file vers un autre, qui est plus proche de votre destinataire. Puis un autre, et encore un autre, jusqu'à sa destination. Une chose à retenir : si vous envoyez beaucoup de lettres (*data packets*) au même endroit, il se pourrait qu'elles transitent par des postes différentes (*routers*). Cela dépend de la manière dont elles sont distribuées à chaque bureau de poste. + +![Figure 1.4](images/internet_4.png) + +Cela fonctionne comme ça - vous envoyez des messages et attendez une réponse. Vous utilisez des octets de données à la place du papier et du crayon, mais l'idée est la même ! + +À la place des adresses postales (nom de rue, ville, code postal), nous utilisons des adresses IP. Votre ordinateur commence par demander au DNS (Domaine Name System) de traduire djangogirls.org en une adresse IP. Ça marche un peu comme un de ces vieux annuaires où l'on peut chercher le nom d'une personne et trouver son numéro de téléphone et son adresse. + +Quand vous envoyez une lettre, elle a besoin de certaines choses pour transiter correctement : une adresse, un timbre, etc. Vous devez aussi utiliser une langue que votre destinataire comprend. C'est la même chose pour les paquets de données que vous envoyez pour voir un site web. Vous utilisez un protocole appelé HTTP (Hypertext Tranfer Protocol). + +Donc, au final, pour avoir un site web il faut qu'il soit sur un *serveur* (c'est une machine). Lorsque le *serveur* reçoit une *requête/0> (dans une lettre), il envoie votre site Web (dans une autre lettre).

+ +Puisqu'on est dans un tutoriel sur Django, vous devez vous demander ce que Django fait. Quand vous envoyez une réponse, vous ne renvoyez pas toujours la même réponse à tout le monde. C'est bien mieux quand les lettres sont personnalisées, surtout quand elles s'adressent à quelqu'un qui vient de vous écrire, non ? Et bien Django vous aide à écrire les lettres personnalisées et intéressantes. :) + +Assez parlé, il est temps de commencer à créer des trucs ! \ No newline at end of file diff --git a/fr/how_the_internet_works/images/internet_1.png b/fr/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/fr/how_the_internet_works/images/internet_1.png differ diff --git a/fr/how_the_internet_works/images/internet_2.png b/fr/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/fr/how_the_internet_works/images/internet_2.png differ diff --git a/fr/how_the_internet_works/images/internet_3.png b/fr/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/fr/how_the_internet_works/images/internet_3.png differ diff --git a/fr/how_the_internet_works/images/internet_4.png b/fr/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/fr/how_the_internet_works/images/internet_4.png differ diff --git a/fr/html/README.md b/fr/html/README.md new file mode 100755 index 00000000000..e810b99b45e --- /dev/null +++ b/fr/html/README.md @@ -0,0 +1,227 @@ +# Introduction au HTML + +Vous vous demandez sûrement ce qu'est un template. + +Un template est un fichier que vous pouvez réutiliser afin de présenter des informations différentes sous un seul et même format. Par exemple, vous pourriez avoir envie d'utiliser un template pour écrire une lettre : bien que son contenu varie ou qu'elle puisse être adressée à des personnes différentes, sa forme reste la même. + +Le format d'un template Django est décrit grâce à un langage qui s'appelle HTML (c'est le même HTML que celui dont nous parlions dans le chapitre un, **Comment fonctionne l'Internet**). + +## Qu'est-ce que le HTML ? + +HTML est un code qui est interprété par votre navigateur (Chrome, Firefox ou Safari) et qui permet d'afficher une page web à l'utilisateur. + +L'abréviation HTML signifie « HyperText Markup Language ». **HyperText** signifie que c'est un type de texte qui supporte les hyperliens entre les pages. **Markup** signifie que nous avons pris un document et que nous avons balisé le code pour signifier (ici, au navigateur) comment il faut interpréter la page. Le code HTML est construit à l'aide de **balises**, chacune commençant par `<` et finissant par `>`. Ces balises représentent des **éléments** markup. + +## Votre premier template ! + +Créer un template signifie créer un fichier template. Et oui, encore des fichiers ! Vous aviez déjà probablement remarqué que tout tourne autour des fichiers. + +Les templates sont sauvegardés dans le dossier `blog/templates/blog`. Tout d'abord, créons un dossier appelé `templates` à l'intérieur du dossier de notre blog. Ensuite, créez un autre dossier appelé `blog` à l'intérieur de votre dossier templates : + + blog + └───templates + └───blog + + +Vous pourriez vous demander pourquoi nous avons besoin de deux dossiers portant tous les deux le nom `blog`. Comme vous le découvrirez plus tard, c'est une convention de nommage qui va nous faciliter la vie quand les choses vont commencer à devenir compliquées. + +Et maintenant, créez un fichier `post_list.html` (laisser le vide pour le moment) dans le dossier `templates/blog/blog`. + +Allons regarder à quoi ressemble notre site maintenant : http://127.0.0.1:8000/ + +> Si vous avez encore l'erreur `TemplateDoesNotExist`, essayez de redémarrer votre serveur. Allez sur votre ligne de commande et arrêtez votre server en appuyant simultanément sur Ctrl+C (les touches Control et C de votre clavier). Vous pouvez le relancer en tapant la commande `python manage.py runserver`. + +![Figure 11.1](images/step1.png) + +Et voilà, il n'y a plus d'erreurs ! Bravo :) Cependant, notre site ne peut rien faire d'autre pour le moment qu'afficher une page blanche. La faute à notre template que nous avons laissé vide. Allons corriger ça. + +Ouvrez le nouveau fichier dans l’éditeur de code et ajoutez le morceau suivant : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + +

Bonjour !

+

Ça marche !

+ + +``` + +Alors, à quoi ressemble notre site web maintenant ? Allons le découvrir : http://127.0.0.1:8000/ + +![Figure 11.2](images/step3.png) + +Ça marche ! Bon boulot! :) + +* La ligne `` n'est pas une balise HTML. Elle ne déclare que le type de document. Ici, elle informe le navigateur web que le type de document est [HTML5](https://html.spec.whatwg.org/#the-doctype). C'est toujours ainsi que débute un fichier HTML5. +* La balise la plus élémentaire, ``, figure toujours au début de n'importe quelle page web tandis que `` est toujours située à la fin. Comme vous pouvez le constater, l'intégralité du contenu de notre page web est située entre la balise de départ, ``, et la balise de fin, `` +* `

` est la balise pour les éléments de type paragraphe. `

` permet de fermer chaque paragraphe. + +## Head et Body + +Chaque page HTML est divisée en deux éléments : **head** (entête) et **body** (corps. + +* **head** est un élément qui contient des informations sur le document : son contenu ne s'affichera pas à l'écran. + +* **body** est un élément qui contient tout le reste. Son contenu s'affichera à l'écran et constituera notre page web. + +Nous utilisons `` pour transmettre la configuration de la page au navigateur tandis que `` l'informe sur le contenu de la page. + +Par exemple, vous pouvez donner un titre à votre page web en utilisant l'élément titre dans le `` : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Ola's blog + + +

Bonjour !

+

Ça marche !

+ + +``` + +Sauvegardez votre fichier et actualisez la page. + +![Figure 11.3](images/step4.png) + +Vous avez vu comment le navigateur a compris que « Le Blog d'Ola » est le titre de votre page ? Il a interprété `Le blog d'Ola` et a placé ce texte dans la barre de titre de votre navigateur (c'est ce titre qui va être aussi utilisé lorsque vous créez un marque-page, etc.). + +Vous avez aussi probablement remarqué que chaque balise ouvrante possède sa *balise fermante*, composée d'un `/`, est qu'elles *encadrent* les différents éléments. Cela signifie que vous ne pouvez pas fermer une balise si celles imbriquées à l'intérieur de celle-ci n'ont pas été fermées. + +Pensez à lorsque vous mettez des choses à l'intérieur de boîtes. Vous avez une grosse boîte, ``; à l'intérieur de celle-ci, on trouve une plus petite boîte, ``, qui contient elle-même d'autres petites boîtes, `

`. + +Essayez de vous rappeler de cet exemple lorsque vous utilisez les balises *fermantes* et que vous avez des éléments *imbriqués*. Si vous ne suivez pas ces règles, votre navigateur risque de ne pas être capable d'interpréter votre code correctement et votre page web sera mal affichée. + +## Personnaliser votre template + +Et si nous en profitions pour nous amuser un peu ? Essayons de personnaliser notre template ! Voici quelques balises que vous pouvez utiliser : + +* `

Titre 1

` pour vos titres les plus importants +* `

Titre 2

` pour les sous-titres +* `

Titre 3

` ... et ainsi de suite jusqu'à `
` +* `

Un paragraphe contenant du texte

` +* `texte` permet de mettre l'accent sur une partie du texte +* `texte` permet de mettre encore plus l'accent sur une partie de texte +* `
` permet d'insérer un saut de ligne (vous ne pouvez rien mettre à l'intérieur d'un élément br et il n'y a pas de balise fermante) +* `link` permet de créer un lien +* `
  • premier item
  • second item
` permet de créer des listes, comme celle que nous sommes en train de faire ! +* `
` permet de créer une section au sein de la page +* `` définit un ensemble de liens de navigation +* `
` spécifie du contenu indépendant et autonome +* `
` définit une section dans un document +* `
` spécifie un en-tête pour un document ou une section +* `
` spécifie le contenu principal d'un document +* `` définit du contenu en dehors du contenu dans lequel il est placé (comme une barre latérale) +* `
` définit un pied de page pour un document ou une section +* `` définit un instant spécifique (ou un horodatage) + +Voici un exemple d’un modèle complet, copiez et collez-le dans `blog/templates/blog/post_list.html` : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Blog Django Girls + + +
+

Blog Django Girls

+
+ +
+ +

Mon premier article

+

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.

+
+ +
+ +

Mon second article

+

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.

+
+ + +``` + +Nous avons créé ici une section `en-tête` et deux sections `article`. + +* Le premier élément `header` contient le titre de notre blog - c'est à la fois un titre et un lien +* Les deux éléments `article` contiennent nos articles de blog avec une date de publication dans un élément `time` un élément `h2` avec un titre de publication qui est cliquable et un élément `p` (paragraphe) pour le texte de notre blog. + +Ce qui nous donne : + +![Figure 11.4](images/step6.png) + +Yaaay ! Pour l'instant, notre template nous permet seulement d'afficher les **mêmes informations** alors que nous disions précédemment qu'il doit nous permettre d'afficher des informations **différentes** utilisant le **même format**. + +Ce qu'on aimerait pouvoir faire maintenant, c'est d'afficher les posts que nous avons créés précédemment dans l'interface d'administration de Django. Penchons-nous là dessus. + +## Une dernière chose : déployer ! + +Ne serait-il pas génial de pouvoir voir tous ces changements en ligne ? Hop, déployons à nouveau ! + +### Commiter et pusher votre code sur GitHub + +Tout d'abord, allons voir quels sont les fichiers qui ont changé depuis notre dernier déploiement (lancez ces commandes dans votre console locale et non celle de PythonAnywhere) : + +{% filename %}command-line{% endfilename %} + + $ git status + + +Assurez-vous d'être dans le dossier `djangogirls`. Voici la commande qui permet de dire à `git` d'inclure tout les changements qui ont eu lieu dans ce dossier : + +{% filename %}command-line{% endfilename %} + + $ git add . + + +Avant que nous puissions uploader nos fichiers, regardons ce que `git` à l'intention de faire (tous les fichiers que `git` va uploader vont apparaître en vert) : + +{% filename %}command-line{% endfilename %} + + $ git status + + +On y est presque : nous devons maintenant lui dire de sauvegarder ces changements dans son historique. Nous allons y ajouter un "message de commit" qui nous permettra de décrire ce qui a été changé. Vous pouvez mettre ce que vous voulez dans un message de commit. Généralement, il est préférable de mettre quelque chose d'utile qui vous permettra de vous souvenir plus tard de ce que vous avez fait. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Modification du HTML du site" + + +> **Note** Assurez-vous d'utiliser des guillemets doubles autour du message de commit. + +Une fois que nous avons fait cela, nous pouvons mettre en ligne (pusher) nos modifications sur GitHub : + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Puller les modifications sur PythonAnywhere et recharger son appli web + +* Allez sur la page des [consoles de PythonAnywhere](https://www.pythonanywhere.com/consoles/). Retournez dans votre **console Bash** ou ouvrez-en une nouvelle puis tapez la commande suivante : + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +N’oubliez pas de remplacer `` avec votre propre sous-domaine PythonAnywhere, sans les chevrons. Votre nom de sous-domaine est normalement votre nom d'utilisateur PythonAnywhere, mais dans certains cas, il peut être un peu différent (par exemple si votre nom d'utilisateur contient des lettres capitales). Donc, si cette commande ne fonctionne pas, utilisez la commande `ls` (lister fichiers) pour trouver votre sous-domaine/nom de dossier, puis `cd` jusque là. + +Maintenant, vous voyez votre code en train d'être téléchargé. Si vous voulez vérifier que le nouveau code est arrivé sur PythonAnywhere, vous pouvez aller sur la page **"Files"** et y retrouver les fichiers (vous pouvez naviguer dans les différentes pages de PythonAnywhere depuis le menu). + +* Pour finir, n'oubliez pas de recharger votre application web : onglet [Web](https://www.pythonanywhere.com/web_app_setup/) puis cliquez sur le bouton **Reload**. + +Retournez sur votre site en cliquant sur l'adresse en haut de la page : normalement, vous devriez voir la dernière version. Si ce n'est pas le cas, ce n'est pas grave : n'hésitez pas à demander de l'aider à votre coach. :) \ No newline at end of file diff --git a/fr/html/images/step1.png b/fr/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/fr/html/images/step1.png differ diff --git a/fr/html/images/step3.png b/fr/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/fr/html/images/step3.png differ diff --git a/fr/html/images/step4.png b/fr/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/fr/html/images/step4.png differ diff --git a/fr/html/images/step6.png b/fr/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/fr/html/images/step6.png differ diff --git a/fr/images/application.png b/fr/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/fr/images/application.png differ diff --git a/fr/installation/README.md b/fr/installation/README.md new file mode 100644 index 00000000000..5caee69178d --- /dev/null +++ b/fr/installation/README.md @@ -0,0 +1,69 @@ +# Si vous suivez ce tutoriel chez vous + +Si vous suivez ce tutoriel chez vous et non dans un [évènement Django Girls](https://djangogirls.org/events/), vous pouvez passer directement au chapitre [Comment fonctionne Internet](../how_the_internet_works/README.md). + +La raison est que toutes les informations nécessaires aux installations seront données au fur et à mesure dans les différents chapitres du tutoriel. Celle-ci est juste une page supplémentaire qui rassemble toutes les instructions d’installation en un seul endroit (ce qui est utile pour certains formats d’atelier). Vous pouvez choisir d’installer tout ce qui est sur cette page dès maintenant si vous le souhaitez. Cependant, si vous avez envie d'apprendre des choses avant d'installer plein de trucs sur votre ordinateur : passez ce chapitre et installez ce dont vous avez besoin au fil des chapitres. + +Bonne chance ! + +# Si vous participez à un atelier + +Si vous participez à un [événement Django Girls](https://djangogirls.org/events/) : + +* Dans certains cas un « party d’installation » a lieu avant l’atelier principal. Si vous vous trouvez à un party d’installation, cette page est pour vous ! Suivez les instructions ici pour installer tout ce dont vous avez besoin pour l’atelier. Demandez de l'aide aux coaches si nécessaire. Ensuite, pendant l'atelier vous pourrez ignorer les instructions d’installation que vous rencontrerez dans le tutoriel. +* Les organisateurs de votre atelier vous ont peut-être proposé de procéder aux installations chez vous. Si c'est le cas, cette page est pour vous ! Suivez les instructions ici, autant que vous le pouvez. Pendant l’atelier principal, quand vous arrivez à une étape nécessitant d'un logiciel que vous n'avez pas réussi à installer toute seule, vous pourrez demander à votre coach. +* Si votre atelier n’a pas de party d'installation (ou si vous l'avez raté), et si les organisateurs ne vous ont pas demandé d’essayer de tout installer en amont, ignorez cette page et allez directement au chapitre [Comment fonctionne Internet](../how_the_internet_works/README.md). Vous allez installer tout ce dont vous avez besoin au fur et à mesure que vous avancez dans le tutoriel. + +# Installation + +Dans ce tutoriel, vous allez apprendre comment créer un blog. Le tutoriel vous guidera à travers toute les étapes d'installation des différents logiciels, ansi que de création de comptes en ligne nécessaires. Cette page regroupe l’ensemble des instructions concernant installations et comptes en ligne en un seul endroit (ce qui est utile pour certains formats d’atelier). + + {% include "/chromebook_setup/instructions.md" %} + + + +# Brève introduction à la ligne de commande {#command-line} + +Dans les étapes ci-dessous vous allez rencontrer les noms « console », « terminal », « invite de commande » ou « ligne de commande ». Tous ces termes signifient la même chose : une fenêtre sur votre ordinateur où vous pouvez rentrer des commandes. Une fois que vous aurez démarré le tutoriel principal, vous apprendrez plus sur la ligne de commande. Pour l’instant, le plus important est que vous appreniez à ouvrir un terminal et que vous voyez à quoi cela ressemble : +{% include "/intro_to_command_line/open_instructions.md" %} + +# Installer Python {#python} + +{% include "/python_installation/instructions.md" %} + +# Installer un éditeur de code {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Mettre en place virtualenv et installer Django {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Installer Git {#git} + +{% include "/deploy/install_git.md" %} + +# Créer un compte GitHub {#github-account} + +Allez sur [GitHub.com](https://www.github.com) et créez un compte d’utilisateur gratuitement. N’oubliez pas votre mot de passe (ajoutez-le à votre gestionnaire de mots de passe, si vous utilisez un). + +# Créer un compte PythonAnywhere {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Commencer à lire + +Félicitations, vous avez tout installé et êtes prête ! Si vous avez toujours du temps avant l'atelier, il peut être utile de commencer à lire les premiers chapitres : + +* [Comment fonctionne Internet](../how_the_internet_works/README.md) + +* [Introduction à la ligne de commande](../intro_to_command_line/README.md) + +* [Introduction à Python](../python_introduction/README.md) + +* [Qu'est-ce que Django?](../django/README.md) + +# Profitez de l’atelier ! + +Lors de l’atelier, vous serez en mesure d'attaquer directement le chapitre [Votre premier projet Django !](../django_start_project/README.md) parce que vous aurez déjà couvert le matériel dans les chapitres précédents. diff --git a/fr/intro_to_command_line/README.md b/fr/intro_to_command_line/README.md new file mode 100755 index 00000000000..35ffffd6d99 --- /dev/null +++ b/fr/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Introduction à l'interface en ligne de commande + +> Pour les lectrices à la maison : ce chapitre est traité dans la vidéo [Votre nouvel ami : la ligne de commande](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +C'est un peu exaltant, non ? Dans quelques instants, vous allez écrire votre première ligne de code! :) + +**Commençons par vous présenter un nouvel ami : la ligne de commande !** + +Les étapes suivantes vont vous montrer comment utiliser la fenêtre noire que tous les bidouilleurs·euses utilisent. Elle est un peu effrayante à première vue, mais en fait, c'est tout simplement un programme qui attend qu'on lui donne des commandes. + +> **Note :** Il existe deux mots pour parler de dossier : dossier ou répertoire. Il se peut que nous utilisions les deux dans le tutoriel mais, pas de panique : ils signifient la même chose. + +## Qu'est-ce qu'une ligne de commande ? + +Cette fenêtre, qu'on appelle aussi **ligne de commande** ou **interface en ligne de commande**, est une application textuelle qui permet de voir et de manipuler des fichiers sur votre ordinateur. C'est un peu la même chose que l'Explorateur Windows ou Finder dans Mac, mais sans interface graphique. On l'appelle parfois aussi : *cmd*, *CLI*, *prompt*, *console* ou *terminal*. + +## Ouvrir l'interface en ligne de commande + +Pour commencer à expérimenter, nous avons d'abord besoin d'ouvrir notre interface en ligne de commande. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Invite de commande + +Vous devriez maintenant voir une fenêtre noire ou blanche qui attend vos commandes. + + + +Si vous êtes sous Mac ou Linux, vous verrez probablement un `$`, comme ça : + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +Si vous êtes sous Windows, vous verrez probablement un `>`, comme ça : + +{% filename %}command-line{% endfilename %} + + > + + +Jetez un coup d'œil à la section Linux ci-dessus : c'est à cela que la ligne de commande ressemblera une fois que vous serez sur PythonAnywhere. + + + +Chaque commande que vous taperez sera automatiquement précédée par un `$` ou `>` et une espace. Vous ne devez pas les rentrer vous-même, votre ordinateur le fera pour vous. :) + +> Petite remarque : il se peut que vous voyiez quelque chose comme `C:\Users\ola>` ou `Olas-MacBookAir:~ola$` avant le signe de prompt. Pas de problème : c'est parfaitement normal. + +La partie jusque et y compris le `$` ou le `>` est appelée *l’invite de commande*, ou *prompt* (en anglais) pour faire court. Elle vous invite à entrer une commande. + +Dans le tutoriel, lorsque nous voulons que vous tapiez une commande, nous allons inclure le `$` ou `>` et parfois d'autres information juste avant, à sa gauche. Ignorez cette partie à gauche et tapez uniquement la commande, qui commence après l’invite. + +## Votre première commande (YAY !) + +Commençons en tapant cette commande : + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +Puis appuyez sur la touche `entrée`. Voilà ce qui s'affiche chez moi : + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Comme vous pouvez le voir, l'ordinateur vient d'afficher votre nom d'utilisateur. Sympa, non ? ;) + +> Essayez de taper chaque commande sans copier-coller. Ça aide à les retenir ! + +## Les bases + +Les différents systèmes d'exploitation ont des commandes légèrement différentes, donc faites attention à suivre les instructions pour votre système d'exploitation. Allons-y ! + +### Dossier courant + +Ce serait pratique de savoir dans quel répertoire nous nous trouvons. Pour le savoir, tapez la commande suivante et appuyez sur `entrée` : + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Remarque : « pwd » veut dire « print working directory » (afficher le dossier courant). + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Note : « cd » signifie « changer répertoire ». Avec PowerShell vous pouvez utiliser pwd comme sur Linux ou Mac OSX. + + + +Vous verrez probablement quelque chose de similaire sur votre machine. Quand vous ouvrez une ligne de commande, vous démarrez habituellement dans le dossier personnel de votre utilisateur. + +* * * + +### En savoir plus sur une commande + +De nombreuses commandes que vous pouvez taper à l’invite de commande ont une aide intégrée que vous pouvez afficher et lire ! Par exemple, pour en savoir plus sur le répertoire actuel : + + + +macOS et Linux ont une commande `man`, qui donne des informations sur les commandes. Essayez `man pwd` et regardez ce qui s'affiche, ou ajoutez `man` devant une autre commande pour voir sa documentation. La sortie de `man` est normalement paginée. Utilisez la barre d’espace pour passer à la page suivante et `q` pour quitter l’aide. + + + + + +Ajouter un `/ ?` à la fin de la commande devrait également permettre d'afficher la page d’aide. Vous devrez peut-être faire défiler votre fenêtre de commande vers le haut pour tout voir. Essayez `cd / ?`. + + + +### Lister les fichiers et les dossiers + +Du coup, que pouvons-nous trouver dans ce dossier personnel ? Voyons voir : + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Bureau + Musique + Téléchargements + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + Directory of C:\Users\olasitarska + 05/08/2020 07:28 PM Applications + 05/08/2020 07:28 PM Bureau + 05/08/2020 07:28 PM Téléchargements + 05/08/2020 07:28 PM Musique + ... + + +> Remarque : Dans PowerShell, vous pouvez également utiliser "ls" comme sur Linux et macOS. + +* * * + +### Changer le dossier courant + +Maintenant, essayons d'aller sur notre Bureau : + + + +{% filename %}command-line{% endfilename %} + + $ cd Bureau + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Bureau + + +Notez que le nom du répertoire « Bureau » pourrait être traduit dans la langue de votre compte Linux. Si c'est le cas, vous devrez remplacer `Bureau` par sa traduction. Par exemple, `Schreibtisch` pour l’allemand ou <0>Desktop pour l'anglais. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Bureau + + + + +Vérifions que ça a bien changé : + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Bureau + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Bureau + + + + +Et voilà ! + +> Pro tip : si vous tapez `cd B` puis que vous appuyez sur la touche `tabulation`, la ligne de commande va automatiquement compléter le reste du nom. Cela va vous permettre d'aller plus vite et d'éviter des fautes de frappe. Si plusieurs dossiers commencent par un « B », appuyez sur la touche `tabulation` deux fois pour avoir une liste des options. + +* * * + +### Créer un dossier + +Que diriez-vous de créer un répertoire dédié aux exercices sur votre bureau ? Vous pouvez le faire de cette façon : + + + +{% filename %}command-line{% endfilename %} + + $ mkdir exercices + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir exercices + + + + +Cette petite commande crée un dossier nommé `exercices` sur votre bureau. Vous pouvez vérifier qu'il est bien là en regardant votre Bureau, ou en lançant la commande `ls` ou `dir` ! Essayez donc. :) + +> Pro tip : Si vous voulez éviter de taper les mêmes commandes plein de fois, essayez d'appuyer sur les touches `flèche haut` et `flèche bas` pour retrouver les dernières commandes que vous avez tapées. + +* * * + +### Exercice ! + +Un petit défi pour vous : dans votre nouveau dossier `exercices`, créez un dossier appelé `test`. (Pour ça, utilisez les commandes `cd` et `mkdir`.) + +#### Solutions : + + + +{% filename %}command-line{% endfilename %} + + $ cd exercices + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd exercices + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +Félicitations ! :) + +* * * + +### Nettoyage + +Supprimons tout ce qu'on vient de faire, histoire d'éviter de laisser du bazar. + +D'abord, revenons au Bureau : + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Grâce à `...` et la commande `cd`, vous pouvez aller directement dans le dossier parent de votre répertoire courant (c'est-à-dire le dossier qui contient le dossier dans lequel vous étiez). + +Vérifiez où vous êtes : + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Bureau + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Bureau + + + + +Maintenant, il est temps de supprimer le dossier `exercices` : + +> **Attention** : Supprimer des fichiers avec `del`, `rmdir` ou `rm` est irrévocable, ce qui veut dire que *les fichiers supprimés sont perdus à jamais* ! Du coup, faites très attention avec cette commande. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r exercices + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S exercices + exercices, Are you sure ? Y + + + + +Et voilà ! Pour être sure que le dossier a bien été supprimé, vérifions : + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Sortir + +C'est tout pour le moment ! Vous pouvez maintenant fermer la ligne de commande. Faisons-le à la manière des bidouilleurs⋅euses, d’accord ? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Cool, non ? :) + +## Résumé + +Voici un résumé de quelques commandes utiles : + +| Commande (Windows) | Commande (macOS / Linux) | Description | Exemple | +| ------------------ | ------------------------ | -------------------------------- | ------------------------------------------------- | +| exit | exit | ferme la fenêtre | **exit** | +| cd | cd | change le dossier courant | **cd test** | +| cd | pwd | montre le dossier courant | **cd** (Windows) ou **pwd** (macOS / Linux) | +| dir | ls | liste des fichiers/dossiers | **dir** | +| copy | cp | copie un fichier | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | déplace un fichier | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | crée un nouveau dossier | **mkdir testdirectory** | +| rmdir (or del) | rm | supprime un fichier | **del c:\test\test.txt** | +| rmdir /S | rm -r | supprime un répertoire | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | affiche l'aide pour une commande | **cd /?** (Windows) ou **man cd** (macOS / Linux) | + +Ce ne sont que quelques-unes des commandes que vous pouvez utiliser dans votre ligne de commande. Cette liste est suffisante pour réaliser ce tutoriel. + +Si vous êtes curieuse, [ss64.com](http://ss64.com) contient une référence complète de toutes les commandes pour tous les systèmes d'exploitation. + +## Vous êtes prête ? + +Plongeons dans Python ! \ No newline at end of file diff --git a/fr/intro_to_command_line/open_instructions.md b/fr/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..9478a39c7a6 --- /dev/null +++ b/fr/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +Une des procédures suivantes, selon votre version de Windows et votre clavier, devrait vous permettre d'ouvrir l'invite de commande (il est possible que vous deviez vous débrouiller un peu jusqu'à ce que vous trouvez la bonne) : + +- Allez dans le menu ou écran de démarrage et tapez "Invite de commande" dans l'outil de recherche. +- Cliquez sur le Menu démarrer→ Système Windows → Invite de commandes. +- Aller dans Menu démarrer → Tous les programmes → Accessoires → Invite de commandes. +- Allez sur l’écran de démarrage, passez votre souris dans le coin inférieur gauche de l’écran et cliquez sur la flèche qui s’affiche (sur un écran tactile, plutôt balayer du bas vers le haut de l’écran). La page Apps doit s’ouvrir. Cliquez sur invite de commandes dans la section Système Windows. +- Maintenez la touche Windows enfoncée et appuyez sur la touche « X » de votre clavier. Choisissez « Invite de commandes » dans le menu contextuel. +- Maintenez la touche Windows enfoncée et appuyez sur la touche « R » pour ouvrir une fenêtre « Exécuter ». Tapez « cmd », puis cliquez sur la touche OK. + +![Tapez "cmd" dans la fenêtre "Exécuter"](../python_installation/images/windows-plus-r.png) + +Plus loin dans ce tutoriel, vous aurez besoin de deux fenêtres ouvertes en même temps. Toutefois, sur certaines versions de Windows, si vous avez déjà une fenêtre de commande ouverte et que vous essayez d’en ouvrir une seconde utilisant la même méthode, vous serez renvoyées vers la fenêtre de commande que vous avez déjà ouvert. Essayez-le maintenant sur votre ordinateur pour voir ce qui se passe ! Si vous obtenez seulement une fenêtre de commande, essayez l’une des autres méthodes dans la liste ci-dessus. Au moins une d'entre elles devrait vous donner une nouvelle fenêtre de commande. + + + + + +Allez sur Applications → Utilitaires → Terminal. + + + + + +C’est probablement sous Applications → Accessoires → Terminal ou Applications → Système → Terminal, mais cela peut dépendre de votre système. Si toujours rien, vous pouvez demander à Google. :) + + diff --git a/fr/python_installation/README.md b/fr/python_installation/README.md new file mode 100755 index 00000000000..dd80800b48e --- /dev/null +++ b/fr/python_installation/README.md @@ -0,0 +1,15 @@ +# Commençons par Python + +On est parti ! + +Tout d'abord, laissez-nous vous en dire un peu plus sur Python. Python est un langage de programmation très populaire qui peut être utilisé pour créer des sites web, des jeux, des logiciels scientifiques, des graphiques et bien d'autres choses encore. + +Python a été créé à la fin des années 1980. l'objectif principal des créateurs du langage était de rendre ce langage de programmation lisible aussi bien par des humains que par des machines. C'est pourquoi il semble plus simple que les autres langages de programmation, mais ne vous inquiétez pas - Python est aussi extrêmement puissant ! + +# Installation de Python + +> **Note** Si vous utilisez un Chromebook, passez ce chapitre et prenez soin de suivre les instructions de [configuration pour Chromebook](../chromebook_setup/README.md). +> +> **Note **Si vous avez déjà effectué [l'Installation](../installation/README.md) vous devriez déjà avoir fait ce qui suit. Vous pouvez donc passer directement au chapitre suivant ! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/fr/python_installation/images/add_python_to_windows_path.png b/fr/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/fr/python_installation/images/add_python_to_windows_path.png differ diff --git a/fr/python_installation/images/python-installation-options.png b/fr/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/fr/python_installation/images/python-installation-options.png differ diff --git a/fr/python_installation/images/windows-plus-r.png b/fr/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/fr/python_installation/images/windows-plus-r.png differ diff --git a/fr/python_installation/instructions.md b/fr/python_installation/instructions.md new file mode 100644 index 00000000000..e93ce5efddd --- /dev/null +++ b/fr/python_installation/instructions.md @@ -0,0 +1,117 @@ +> Pour les lecteur·rices autodidactes (et qui n'ont pas de soucis avec l'anglais) : Ce chapitre est traité dans la vidéo [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Cette section repose sur un tutoriel de Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django est écrit en Python. Pour réaliser quelque chose en Django, il va nous falloir Python. Commençons par l'installer ! Pour suivre ce tutoriel, l'idéale est d'installer la dernière version de Python 3. Si vous avez une version antérieure, il va falloir la mettre à jour. Si vous avez déjà la version {{ book.py_min_version }} ou supérieure, ça devrait aller. + +Veuillez installer Python comme suit, même si vous avez déjà installé Anaconda sur votre ordinateur. + + + +Vérifiez d'abord si votre ordinateur exécute une version 32 bits ou une version 64 bits de Windows, en cherchant "Type du système" dans la page d'information système. Pour accéder à cette page, essayez l'une de ces méthodes : + +* Appuyez sur la touche Windows et la touche Pause/Attn en même temps +* Ouvrez votre panneau de configuration depuis le menu Windows, puis naviguez vers Système et sécurité, puis Système +* Appuyez sur la touche Windows, puis accédez à Paramètres > Système > A propos +* Recherchez dans le menu Démarrer Windows le raccourci "Informations système". Pour ce faire, cliquez sur le bouton Démarrer ou appuyez sur la touche Windows, puis commencez à taper `Informations système`. Des entrées correspondantes apparaîtrons dès que vous tapez. Vous pouvez sélectionner l'entrée une fois qu'elle apparaît. + +Vous pouvez télécharger Python pour Windows depuis le site web https://www.python.org/downloads/windows/. Cliquez sur le lien "Latest Python 3 Release - Python x.x.x". Si votre ordinateur exécute une version **64-bit** de Windows, téléchargez l'installateur exécutable **Windows x86-64 executable installer**. Sinon, téléchargez **Windows x86 executable installer**. Après avoir téléchargé l'installateur, vous devriez l'exécuter (double-cliquez dessus) et suivre les instructions. + +Une chose à surveiller : lors de l’installation, vous remarquerez une fenêtre marquée « Setup ». Assurez-vous de cocher la case "Add Python {{ book.py_version }} to PATH" ou "Add Python to your environment variables" et cliquez sur "Install Now", comme indiqué ici (cela peut s'afficher un peu différemment si vous installez une autre version): + +![N'oubliez pas d'ajouter Python à votre chemin (path)](../python_installation/images/python-installation-options.png) + +Une fois l’installation terminée, vous verrez une boîte de dialogue contenant un lien que vous pouvez suivre pour en savoir plus sur Python ou sur la version que vous avez installée. Fermez ou annulez cette boîte de dialogue -- vous en apprendrez plus dans ce tutoriel ! + +Note : Si vous utilisez une ancienne version de Windows (7, Vista, ou n'importe quelle version antérieure) et l'installateur Python {{ book.py_version }} échoue avec une erreur, alors installez toutes les mises à jour Windows et essayez d'installer Python à nouveau. Si vous avez toujours l'erreur, essayez d'installer la version {{ book.py_min_release }} de Python depuis [Python.org](https://www.python.org/downloads/windows/). + +> Django {{ book.django_version }} a besoin de Python {{ book.py_min_version }} ou plus récent, qui n'est pas pris pas en charge par Windows XP ou les versions précédentes. + + + + + +> **Note** Avant d'installer Python sur macOS, vous devriez vous assurer que vos paramètres Mac permettent d'installer des programmes qui ne proviennent pas de l'App Store. Allez dans Préférences Système (c'est dans le dossier Applications), cliquez sur "Sécurité & Confidentialité", puis sur l'onglet "Général". Si votre "Autoriser les applications téléchargées de:" est défini sur "Mac App Store", changez-le à "Mac App Store et développeurs identifiés". + +Vous devez aller sur le site https://www.python.org/downloads/ et télécharger l'installateur python: + +* Téléchargez le fichier *macOS installer*, +* Double-cliquez sur le fichier *python-{{ book.py_release }}-macos11.pkg* pour lancer l'installateur. + + + + + +Il est très probable que Python soit déjà installé sur votre machine. Afin de vérifier qu'il est bien installé (et surtout quelle version vous avez), ouvrez une console et tapez la commande suivante : + +{% filename %}ligne de commande{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +Si vous avez une version différente de Python installée, au moins {{ book.py_min_version }} (par exemple {{ book.py_min_release }}), vous n'avez pas besoin de mettre à jour Python. Si Python n'est pas installé, ou si vous voulez une version différente, vérifiez d'abord la distribution Linux que vous utilisez avec la commande suivante : + +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +Ensuite, selon le résultat, suivez l'un des guides d'installation sous cette section. + + + + + +Tapez cette commande dans votre terminal : + +{% filename %}ligne de commande{% endfilename %} + + $ sudo apt install python3 + + + + + + +Tapez cette commande dans votre terminal : + +{% filename %}ligne de commande{% endfilename %} + + $ sudo dnf install python3 + + +Si vous utilisez une ancienne version de Fedora, vous pourriez avoir une erreur disant que la commande `dnf` n'est pas trouvée. Dans ce cas, vous devez utiliser la commande `yum` à la place. + + + + + +Tapez cette commande dans votre terminal : + +{% filename %}ligne de commande{% endfilename %} + + $ sudo zypper install python3 + + + + +Vérifiez que l'installation s'est bien déroulée en ouvrant votre terminal et en lançant la commande `python3`: + +{% filename %}ligne de commande{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +La version affichée peut être différente de {{ book.py_release }} -- elle devrait correspondre à la version que vous avez installée. + +**NOTE:** Si vous êtes sur Windows et que vous obtenez un message d'erreur disant que `python3` n'a pas été trouvé, essayez d'utiliser `python` (sans `3`) et vérifiez si elle lance une version de Python {{ book.py_min_version }} ou ultérieure. Si cela ne fonctionne pas non plus, vous pouvez ouvrir une nouvelle ligne de commande et réessayer ; cela se produit si vous utilisez une fenêtre de ligne de commande datant d'avant l'installation de Python. + +* * * + +Si vous avez des questions ou si quelque chose ne fonctionne pas et que vous ne savez pas quoi faire : demandez de l'aide à votre coach ! Il arrive parfois que les choses ne se déroulent pas comme prévu et il est alors préférable de demander à quelqu'un qui a plus d'expérience. \ No newline at end of file diff --git a/fr/python_introduction/README.md b/fr/python_introduction/README.md new file mode 100755 index 00000000000..a6a8c3b52a2 --- /dev/null +++ b/fr/python_introduction/README.md @@ -0,0 +1,1072 @@ +{% set warning_icon = '' %} + +# Introduction à Python + +> Une partie de ce chapitre s’inspire du tutoriel des Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Allons écrire du code ! + +## Le prompt Python + +> Pour les lecteurs à la maison: cette partie est couverte dans la vidéo [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U) . + +Pour commencer à jouer avec Python, nous avons besoin d'ouvrir une *ligne de commande* sur votre ordinateur. Normalement, vous savez déjà comment le faire – vous l'avez appris dans le chapitre [Introduction à la ligne de commande](../intro_to_command_line/README.md). + +Dès que vous êtes prête, suivez les instructions suivantes. + +Afin d'ouvrir une console Python, tapez `python` sous Windows ou `python3` sous Mac OS/Linux et appuyez sur `entrée`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python {{ book.py_release }} (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Votre première commande Python ! + +Après avoir lancé la commande Python, votre prompt (ou invite de commandes) a changé en `>>>`. Cela signifie que maintenant, les seules commandes que nous pouvons taper sont des commandes appartenant au langage Python. Vous n'avez pas besoin de taper `>>>` - Python fait ça pour vous. + +Si vous voulez quitter la console Python, tapez `exit()` ou utilisez le raccourci `Ctrl + Z` pour Windows ou `Ctrl + D` pour Mac/Linux. Après ça, vous ne verrez plus le `>>>`. + +Pour l'instant, nous ne voulons pas quitter la console Python. Nous voulons en savoir plus. Commençons par écrire quelques operations mathématiques, comme `2 + 3` suivi par la touche `entrée`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Pas mal, non ? Vous avez vu comment la réponse a surgi ? Python s'y connait en math ! Vous pouvez essayer d’autres commandes comme : + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Pour effectuer un calcul exponentiel, disons 2 à la puissance 3, nous tapons : {% filename %}ligne de commande{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Amusez-vous un peu avec ça, et revenez ici après. :) + +Comme vous pouvez le constater, Python est une très bonne calculette. Comme vous vous en doutez, il est aussi capable de faire autre chose… + +## Chaines de caractères (Strings) + +Et si nous essayions avec votre nom ? Tapez votre prénom entre guillemets, comme cela : + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Vous venez de créer votre première chaîne de caractères ! C'est une suite de caractères qui peut être traitée par un ordinateur. Une chaine de caractères doit toujours commencer et terminer par le même caractère. Çela peut être un guillemet simple (`'`) ou un guillemet double (`"`), ça n'a pas d'importance. Cela permet à Python de savoir que tout ce qui se trouve à l'intérieur de ces guillemets est une chaîne de caractères. + +Il est possible d'assembler des chaines de caractères comme ceci : + +{% filename %}command-line{% endfilename %} + +```python +>>> "Salut " + "Ola" +'Salut Ola' +``` + +Vous pouvez aussi multiplier une chaîne de caractères par un nombre : + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Si vous avez besoin de mettre une apostrophe dans votre chaine de caractères, vous avez deux possibilités. + +Vous pouvez utiliser des guillemets doubles : + +{% filename %}command-line{% endfilename %} + +```python +>>> "J'aime la mousse au chocolat" +"J'aime la mousse au chocolat" +``` + +ou échapper l’apostrophe avec une barre oblique inversée (un backslash, `\`) : + +{% filename %}command-line{% endfilename %} + +```python +>>> 'J\'aime la mousse au chocolat' +"J'aime la mousse au chocolat" +``` + +Pas mal, non ? Pour voir votre nom en majuscules, tapez juste : + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Vous venez d'utiliser la **fonction** `upper` sur votre chaine de caractères! Une méthode (comme `upper()`) est un ensemble d'instructions que Python va effectuer sur un objet donné (`"Ola"`) lorsque vous l’appellerez. + +Si vous voulez savoir combien il y a de lettres dans votre nom, il y a une **fonction** pour ça ! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Vous avez peut-être remarqué que parfois, on appelle la fonction avec `.` en la plaçant après la chaine de caractères (comme `"Ola".upper()`) alors qu'à d'autres moment, on appelle d'abord la fonction puis la chaine de caractères entre parenthèses. Il s'avère que dans certains cas, les fonctions appartiennent à des objets (c'est le cas de `upper()`) et qu'elles ne peuvent être appliquées qu'à des chaines de caractères. Dans ce cas, on appelle la fonction une **méthode**. D'autres fois, les fonctions n’appartiennent à rien de particulier et peuvent être utilisées sur différents types d'objets (c'est le cas de `len()`). C'est pour ça que nous passons `"Ola"` comme argument à la fonction `len`. + +### Résumé + +OK, assez parlé de chaines de caractères. Jusque-là, nous avons découvert : + +- **le prompt** – taper des commandes (du code) dans le prompt Python donne des réponses dans Python +- **les nombres et les chaines de caractères** – dans Python, les nombres sont utilisés pour faire des calculs, et les chaines de caractères pour manipuler du texte +- **opérateurs** – comme `+` et `*`, ils combinent des valeurs pour en produire une nouvelle +- **les fonctions** – comme `upper()` et `len()` qui effectuent des actions sur les objets. + +Ce sont des bases présentes dans tous les langages de programmation existants. Prête pour quelque chose de plus compliqué ? Allons-y ! + +## Les erreurs + +Essayons quelque chose de nouveau. Pouvons-nous obtenir la longueur d’un nombre de la même façon que celle de notre nom ? Tapez `len(304023)` et appuyez sur `entrée` : + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Nous avons eu notre première erreur! L'icône {{ warning_icon }} est notre façon de vous alerter que le code que vous êtes sur le point d'exécuter ne fonctionnera pas comme prévu. Faire des erreurs (même intentionnellement) est une partie importante de l'apprentissage! + +L'erreur que nous venons d'avoir nous dit que les objets de type "int" (integers, ce qui signifie nombre entier) n'ont pas de longueur. Que pouvons-nous faire, du coup ? Pourquoi ne pas essayer d'écrire notre nombre comme une chaine de caractères ? Après tout, les chaînes de caractères ont bien une taille, non ? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Ça a marché ! Nous avons utilisé la fonction `str` à l'intérieur de la fonction `len`. La fonction `str()` convertit n'importe quoi en chaine de caractères. + +- La fonction `str` convertit des choses en **chaines de caractères** +- La fonction `int` convertit des choses en **entiers** + +> Important : il est possible de convertir des nombres en texte, mais il n'est pas toujours possible de convertir du texte en nombres. Parce que, bon, ça vaudrait quoi `int('salut')` ? + +## Variables + +Il existe un concept super important en programmation : les variables. Une variable, c'est juste un nom pour quelque chose que l'on aimerait utiliser plus tard. Les programmeurs⋅euses utilisent des variables pour stocker des données, rendre leur code plus lisible, et pour ne pas avoir à se rappeler de ce que sont les choses. + +Disons que nous aimerions créer une variable appelée `name` : + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Nous tapons name égale Ola. + +Vous avez peut-être remarqué que contrairement à tout à l'heure, le programme ne renvoie rien. Du coup, comment faire pour vérifier que la variable existe vraiment ? Tapez `name` et appuyez sur `entrée` : + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +Youpi ! Votre première variable ! :) Vous pouvez toujours changer ce à quoi elle fait référence : + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Vous pouvez aussi l'utiliser avec des fonctions : + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Génial, non ? Et bien sûr, les variables peuvent être n'importe quoi, y compris des nombres ! Essayez ça : + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Mais que ce passe-t-il si nous utilisons le mauvais nom ? Essayez de deviner ! C'est parti ! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Une erreur ! Comme vous pouvez le voir, Python a différents types d'erreurs, et celle-ci est une **NameError**. Python vous donne cette erreur quand vous essayez d'utiliser une variable qui n'a pas encore été définie. Si vous rencontrez cette erreur par la suite, vérifiez dans votre code que vous n'avez pas fait une faute de frappe dans une variable. + +Jouez un peu avec les variables et essayez de voir ce que vous pouvez en faire ! + +## La fonction print + +Essayez ça : + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Quand vous tapez `name`, l'interpréteur Python répond avec la *représentation* de la chaine de caractères associée à la variable "name", c'est à dire les lettres M-a-r-i-a, entourées par des guillemets simples. Quand vous dites `print(name)`, Python va "imprimer" le contenu de la variable sur l'écran, sans les guillemets, ce qui est plus sympa. + +Comme nous le verrons plus tard, `print()` est aussi utile lorsque l'on veut afficher des choses depuis l'intérieur de fonctions ou des choses sur plusieurs lignes. + +## Les listes + +En plus des chaines de caractères et des entiers, Python possède tout un tas d'autres types d'objets. Nous allons maintenant vous présenter un type appelé **list** (liste). Les listes sont exactement ce que vous pensez : des objets qui sont des listes d’autres objets. :) + +Allez-y, créez une liste : + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Oui, cette liste est vide. Pas très utile, non ? Créons maintenant une liste de numéros de loterie. Nous ne voulons pas nous répéter tout le temps, donc mettons-la dans une variable : + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Voilà, nous avons une liste ! Qu'est ce que nous pourrions en faire ? Commençons par voir combien de numéros de loterie il y a dans cette liste. Une idée de la fonction pour faire ça ? Vous la connaissez déjà ! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Hé oui ! `len()` peut aussi vous donner le nombre d'objets dans une liste. Pratique, non ? Peut-être qu'on peut aussi la trier : + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +Ça ne renvoie rien : cette fonction a juste changé l'ordre dans lequel les nombres apparaissent dans la liste. Affichons-la encore pour voir ce qu'il s'est passé : + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Comme vous pouvez le voir, les nombres de la liste sont maintenant triés du plus petit au plus grand. Bravo ! + +Pouvons-nous inverser cet ordre ? Essayons! + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Si vous voulez ajouter quelque chose à la liste, vous pouvez le faire en tapant cette commande : + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Si vous ne souhaitez afficher que le premier élément, vous pouvez le faire en utilisant des **indices**. Un indice est un nombre qui indique où se trouve un élément dans la liste. Les programmeurs⋅euses préfèrent compter à partir de 0 : le premier objet dans notre liste a donc pour indice 0, le suivant 1 et ainsi de suite. Essayez ça : + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Comme vous pouvez le voir, nous pouvons accéder à différents objets dans la liste en utilisant le nom de la liste suivi de l'indice de l'objet entre crochets. + +Pour supprimer quelque chose de votre liste, vous devrez utiliser les **indices** comme nous l'avons appris ci-dessus et la méthode `pop()` . Essayons l'exemple suivant : supprimez le premier élément de votre liste. + +{% 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] +``` + +Ça marche à merveille ! + +Jouons encore un peu avec les indices ! Essayez-en des nouveaux : 6, 7, 1000, -1, -6 ou -1000. Est-ce que vous arrivez à prévoir le résultat avant de taper la commande ? Est-ce que ses résultats vous paraissent logiques ? + +Vous pouvez trouver une liste complète des méthodes disponibles pour les listes dans ce chapitre de la documentation de Python : https://docs.python.org/3/tutorial/datastructures.html + +## Dictionnaires + +> Pour les lectrices autodidactes : cette partie est traitée dans la vidéo [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Un dictionnaire est un peu comme une liste. Cependant, nous utilisons des clefs plutôt que des indices numériques pour accéder aux valeurs. Une clef peut être n'importe quelle chaîne de caractères ou n'importe quel nombre. La syntaxe pour définir un dictionnaire vide est la suivante : + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Cela montre que vous venez de créer un dictionnaire vide. Hurray ! + +Maintenant, essayez d'écrire la commande suivante (et essayez aussi de remplacer le contenu par vos informations) : + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Avec cette commande, vous venez de créer une variable nommée `participant` avec trois paires clef–valeur : + +- La clef `name` pointe vers la valeur `'Ola'` (un objet `chaine de caractères`), +- `country` pointe vers `'Poland'` (une autre `chaine de caractères`), +- et `favorite_numbers` pointe vers `[7, 42, 92]` (une `liste` contenant trois nombres). + +Vous pouvez vérifier le contenu de chaque clef avec cette syntaxe : + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +Vous voyez, c'est un peu comme une liste; Cependant, vous n'avez pas besoin de vous souvenir de l'indice, juste de son nom. + +Que ce passe-t-il lorsque nous demandons à Python la valeur correspondant à une clef qui n'existe pas ? Pouvez-vous le deviner ? Essayons voir ! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Oh, une autre erreur ! Celle-ci est une **KeyError**. Python nous donne un coup de main et nous dit que la clef `'age'` n'existe pas dans le dictionnaire. + +Vous vous demandez peut-être quand est-ce qu'il faut utiliser un dictionnaire ou une liste ? C'est une bonne question. Réfléchissez-y un instant avant de regarder la réponse à la ligne suivante. + +- Vous avez besoin d'une suite ordonnée d'éléments ? Utilisez une liste. +- Vous avez besoin d'associer des valeurs à des clefs, de manière à pouvoir les retrouver efficacement (par clef) par la suite ? Utilisez un dictionnaire. + +Comme les listes, les dictionnaires sont *mutables*, ce qui signifie qu'ils peuvent être modifiés après leur création. Vous pouvez ajouter de nouvelles paires clé–valeur au dictionnaire après sa création, comme ceci : + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Comme pour les listes, la fonction `len()` permet d'obtenir le nombre de paires clef–valeur du dictionnaire. Essayez de taper la commande suivante : + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +J'espère que c'est compréhensible pour l'instant :) Prête pour s'amuser un peu plus avec les dictionnaires ? Passez à la ligne suivante pour voir des trucs géniaux. + +Vous pouvez utiliser la méthode `pop()` pour supprimer un élément du dictionnaire. Par exemple, si vous voulez supprimer l'entrée correspondant à la clé `« favorite_numbers »`, tapez la commande suivante : + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Comme vous pouvez le voir dans votre console, la paire clef–valeur correspondant à "favorite_numbers" a été supprimée. + +De même, vous pouvez changer la valeur associée à une clef déjà créée dans le dictionnaire. Tapez ceci : + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Voilà, la valeur de la clé `"country"` a été modifiée de `"Poland"` à `"Germany"`. :) Ce n'est pas cool ça ? Yep ! Un autre truc génial d'appris. + +### Résumé + +C'est super ! Vous savez plein de choses sur la programmation maintenant. Dans cette partie, vous avez appris : + +- **les erreurs** – vous savez maintenant comment lire et comprendre les erreurs qui apparaissent quand Python ne comprend pas l'une de vos commandes +- **les variables** – des noms pour les objets qui vous permettent de coder plus facilement et de rendre votre code plus lisible +- **les listes** – des listes d'objets stockés dans un ordre particulier +- **les dictionnaires** – des objets stockés sous forme de paires clef–valeur + +On continue ? :) + +## Comparer des choses + +> Pour les lectrices autodidactes : cette partie est traitée dans la vidéo [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Comparer des choses est très important en programmation. Quelle serait la chose la plus facile à comparer ? Les nombres, bien sûr ! Allons voir comment ça marche : + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +Nous avons donné à Python quelques nombres à comparer. Comme vous pouvez le voir, Python n'est pas seulement capable de comparer des nombres, mais il peut aussi comparer les valeurs des expressions mathématiques comme `2 * 2` avec le résultat d'une fonction comme le `2` renvoyé par `len([4, 5])`. Pas mal, non ? + +Vous vous demandez probablement pourquoi nous avons mis deux signes `==` côte à côte pour savoir si deux nombres étaient égaux ? On utilise déjà `=` pour assigner des valeurs aux variables. Du coup, il faut toujours, oui **toujours**, mettre deux `==` si vous voulez savoir si deux choses sont égales. Nous pouvons aussi dire que certaines choses ne sont pas égales à d'autres. Pour cela, nous utilisons le symbole `! =`, comme illustré dans l'exemple ci-dessus. + +Donnons encore un peu de boulot à Python : + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>` et `<` sont faciles, mais qu'est ce que `>=` et `<=` veulent dire ? Ils se lisent comment ça : + +- x `>` y veut dire : x est plus grand que y +- x `<` y signifie: x est inférieure à y +- x `< =` y signifie: x est inférieur ou égal à y +- x `>=` y veut dire : x est supérieur ou égal à y + +Super ! Un dernier ? Essayez ça : + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Vous pouvez donner à Python autant de nombres à comparer que vous le souhaitez et il vous donnera une réponse. Plutôt malin, non ? + +- **and** – si vous utilisez l'opérateur `and` (et), les deux comparaisons doivent être True (vraies) pour que la commande toute entière soit True +- **or** – si vous utilisez l'opérateur `or` (ou), il suffit qu'une des deux comparaisons soit True (vraie) pour que la commande toute entière soit True + +Vous connaissez l'expression "on ne compare pas les choux et les carottes" ? Essayons l'équivalent en Python : + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Comme vous le voyez, Python n'est pas capable de comparer un nombre (`int`) et une chaine de caractères (`str`). À la place, il nous montre une **TypeError** et nous dit que les deux types ne peuvent pas être comparés. + +## Booléen + +Vous venez d'apprendre un nouveau type d'objet en Python. Il s'appelle **Boolean**. + +Il n'y a que deux objets Booléens : + +- True (vrai) +- False (faux) + +Pour que Python comprenne qu'il s'agit d'un Boléen, il faut toujours l'écrire 'True' (première lettre en majuscule, les autres en minuscule). **true, TRUE, tRUE ne marchent pas -- seul True est correct.** (Et c'est aussi vrai pour False.) + +Les Booléens aussi peuvent être des variables ! Regardez : + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Vous pouvez aussi faire ça : + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Entraînez-vous et amusez-vous avec les Booleéns en essayant de lancer les commandes suivantes : + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Bravo ! Les Booléens sont l'une des fonctionnalités les plus cools en programmation et vous venez juste d'apprendre comment les utiliser ! + +# Sauvegardez tout ça ! + +> Pour les lectrices autodidactes : cette partie est traitée dans la vidéo [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Pour l'instant, nous avons écrit tout notre code Python directement dans l'interpréteur, ce qui nous limite à une ligne de code à la fois. Les programmes sont typiquement sauvegardés dans des fichiers et sont exécutés par **l'interpréteur** ou le **compilateur** de notre langage de programmation. Jusqu'à présent, nous avons lancé nos programmes une ligne à la fois dans **l'interprèteur** Python. Nous aurons besoin de plus d'une ligne de code pour les prochaines tâches, donc nous aurons rapidement besoin de : + +- Quitter l'interpréteur Python ; +- Ouvrir l'éditeur de code de notre choix ; +- Sauvegarder du code dans un nouveau fichier Python ; +- Le lancer ! + +Pour quitter l'interpréteur Python que nous sommes en train d'utiliser, il suffit de taper la fonction `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Cela vous ramènera dans la ligne de commande de votre système d'exploitation. + +Tout à l'heure, nous avions choisi un éditeur de code de la section [code editor](../code_editor/README.md). Nous allons maintenant ouvrir l'éditeur et écrire du code dans un nouveau fichier (ou, si vous utilisez un Chromebook, créez un nouveau fichier dans le cloud IDE et ouvrez le fichier, qui sera dans l'éditeur de code inclus) : + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Vous avez maintenant pas mal de connaissances en Python : n'hésitez pas à écrire du code avec ce que vous avez appris aujourd'hui ! + +Maintenant, nous devons sauvegarder le fichier et lui donner un nom descriptif. Appelons le fichier **python_intro.py** et sauvegardons-le sur votre bureau. Vous pouvez donner le nom que vous souhaitez à ce fichier mais il est important qu'il se termine par **.py**. L'extension **.py** permet de signaler à votre système d'exploitation que ce fichier est un **fichier exécutable Python** et que Python peut le lancer. + +> **Note :** Vous avez probablement constaté que votre code se pare de multiples couleurs : ça fait partie des choses qui rendent la programmation dans un éditeur de texte bien plus agréable ! Votre console Python n'avait pas cette fonctionnalité : tout était donc de la même couleur. Dans votre éditeur de texte, vous devriez voir que la fonction `print`, par exemple, n'a pas la même couleur d'une chaîne de caractères. C'est ce qu'on appelle « la coloration syntaxique ». C'est une fonctionnalité très utile lorsque l'on programme. La couleur des choses va vous permettre de détecter des problèmes : une chaine de caractères non fermée, une faute dans un mot (ce sera par exemple le cas dans la fonction `def` que vous verrez un peu plus tard). C'est ce genre de fonctionnalités qui font que vous aimerez rapidement programmer avec un éditeur de code. :) + +Une fois que le fichier est sauvegardé, vous pouvez le lancer ! En utilisant les compétences que vous avez apprises dans la section sur la ligne de commande, utilisez le terminal pour **changer le dossier courant** vers le bureau. + + + +Sur Mac, ça ressemblera à : + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Sur Linux, ce sera comme ça : + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(N'oubliez pas que le mot "Bureau" peut être traduit dans votre langue locale.) + + + + + +Dans l'invite de commande Windows, ce sera comme ceci : + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +Et sur Windows Powershell, ce sera comme ça : + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Si vous êtes coincées, demandez de l'aide. C'est exactement pour ça que les coaches sont là ! + +Maintenant, utilisez Python pour exécuter le code contenu dans votre fichier : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Note: sur Windows 'python3' n'est pas reconnu comme une commande. Au lieu de cela, utilisez 'python' pour exécuter le fichier : + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Super ! Vous venez de lancer votre premier programme python à partir d'un fichier. Cool non ? + +Et maintenant, passons à un autre outil essentiel de la programmation : + +## If … elif … else + +Quand on code, il y a plein de choses qui ne doivent être exécutées que dans certaines conditions. Pour cela, Python possède ce qu'on appelle l'instruction **if** (si). + +Remplacez le code dans votre fichier **python_intro.py** avec ceci : + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Si nous sauvegardons ce fichier et que nous l'exécutons, nous obtiendrons l'erreur suivante : + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python s'attend à ce que nous lui donnions des instructions sur ce qu'il faut exécuter lorsque la condition `3 > 2` est vraie (ou plutôt, `True`). Essayons de lui faire afficher "Ça marche !". Remplacez le code dans **python_intro.py** par ceci : + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('Ça marche !') +``` + +Avez-vous remarqué que nous avions décalé la ligne suivante de quatre espaces ? C'est ce que l'on appelle indenter. Nous avons besoin d'indenter pour que Python sache quel code exécuter si le résultat est vrai. Un seul espace suffirait, mais à peu près tous⋅tes les programmeurs⋅euses Python pensent que 4 espaces sont plus clairs. La touche de tabulation (Tab) devrait ajouter automatiquement 4 espaces, mais cela peut dépendre du paramétrage de votre éditeur de texte. Lorsque vous avez fait votre choix, ne le changez pas ! Si vous avez déjà indenté avec 4 espaces, faites de même dans le reste du fichier - sinon vous risquez de rencontrer des problèmes. + +Sauvegardez le fichier et relancez le : + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +Ça marche ! +``` + +Note: N'oubliez pas que sur Windows, 'python3' n'est pas reconnu comme une commande. À partir de maintenant, remplacez 'python3' par 'python' pour exécuter le fichier. + +### Et que se passe-t-il si une condition n’est pas vraie ? + +Dans les exemples précédents, Python a exécuté du code parce que celui-ci se trouvait sous une condition qui était vraie. Cependant, Python possède aussi des instructions `elif` (sinon si) et `else` (sinon) : + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 est effectivement plus grand que 2') +else: + print("5 n'est pas plus grand que 2") +``` + +Lorsque vous exécuterez le code, ceci s'affichera : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 est effectivement plus grand que 2 + + +Et si 2 était plus grand que 5, la seconde commande serait exécutée. Voyons comment `elif` fonctionne : + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +Exécutons le code : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +Que s'est-il passé ? `elif` vous permet d'ajouter d'autres conditions à exécuter si les précédentes échouent. + +Vous pouvez ajouter autant de `elif` que vous le souhaitez après le premier `if`. Voici un exemple : + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python va tester les différentes conditions puis il affichera ceci : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Parfait, je peux entendre tous les détails du morceau. + + +## Commentaires + +Les commentaires sont des lignes commençant par `#`. Vous pouvez écrire ce que vous voulez après le `#` et Python va l'ignorer. Les commentaires peuvent rendre votre code plus facile à comprendre pour d'autres personnes. + +Voyons à quoi cela ressemble : + +{% 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!") +``` + +Vous n'avez pas besoin d'écrire un commentaire pour chaque ligne de code, mais il est utile parfois d'expliquer pourquoi votre code fait une certaine chose, ou de fournir un résumé pour les parties les plus complexes. + +### Résumé + +Avec ces derniers exercices, vous avez appris : + +- **Comment comparer des choses** – en Python, vous pouvez comparer des choses avec `>`, `>=`, `==`, `<=`, `<` et avec les opérateurs `and`, `or` +- **Booléen** – un type d'objet qui n'a que deux valeurs possibles : `True` et `False` +- **Comment sauvegarder des fichiers** – stocker votre code dans des fichiers pour pouvoir écrire des programmes plus longs. +- **if … elif … else** – des instructions que vous permettent de n'exécuter du code que dans certaines conditions. +- **commentaires** – lignes que Python n'exécutera pas et qui vous permettent de documenter votre code. + +Il est temps d'attaquer la dernière partie de ce chapitre ! + +## Vos propres fonctions ! + +> Pour les lectrices autodidactes : cette partie est traitée dans la vidéo [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Vous vous souvenez des fonctions comme `len()` que vous pouvez exécuter en Python ? Et bien, bonne nouvelle : vous allez apprendre à écrire vos propres fonctions! + +Une fonction est un ensemble d'instructions que Python va exécuter. Chaque fonction en Python commence par le mot-clef `def`. On lui donne un nom, et elle peut avoir des paramètres. Essayons ! Remplacer le code de **python_intro.py** par ceci : + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Voilà, notre première fonction est prête ! + +Vous vous demandez peut-être pourquoi nous avons écrit le nom de la fonction à la fin du fichier. Quand nous écrivons `def hi():` et les lignes indentées qui suivent, nous écrivons les instructions disant ce que la fonction `hi` doit faire. Python va lire et mémoriser ces instructions, mais ne va pas exécuter la fonction tout de suite. Pour dire à Python que nous voulons exécuter la fonction, nous devons appeler la fonction avec `hi()`. Python lit le fichier et l’exécute de haut en bas, donc nous devons définir la fonction dans le fichier avant de l’appeler. + +Lançons notre code pour voir ce qui se passe : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +Note : si cela n'a pas fonctionné, ne paniquez pas ! Le message d'erreur vous aidera à comprendre pourquoi : + +- Si vous obtenez un `NameError`, cela est du probablement à une faute de frappe, donc vous devriez vérifier d'avoir utilisé le même nom lors de la création de la fonction avec `def hi():` et lors de l'appel avec `hi()`. +- Si vous obtenez un `IndentationError`, vérifiez que les deux `print` sont à la même distance du début de leur ligne: python veut que tout le code à l'intérieur de la fonction soit bien aligné. +- Si vous n'obtenez rien du tout, vérifiez que le `hi()` à la fin *n'est pas indenté*. Si c'est le cas, cette ligne est considérée par Python comme faisant partie de la fonction, et elle ne sera donc jamais exécutée. + +Construisons maintenant notre première fonction avec des paramètres. Dans l'exemple précédent, nous avions une fonction que disait "Hi there!" à la personne qui la lançait. Faisons une fonction identique, mais ajoutons un nom cette fois-ci : + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Comme vous le voyez, nous avons donné à notre fonction un paramètre appelé `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!') + +hi() +``` + +Rappelez-vous : la fonction `print` est indentée de quatre espaces dans le bloc `if`, car elle est exécutée uniquement quand la condition est remplie. Voyons comment ça marche : + +{% 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' + + +Oups, une erreur. Heureusement, Python nous donne un message d'erreur assez utile. Il nous dit que la fonction `hi()` (celle que nous avons définie) a besoin d'un argument (que nous avons appelé `name`). Nous avons oublié de passer cet argument lorsque nous avons appelé notre fonction. Corrigeons la dernière ligne du fichier : + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +Et exécutez votre code à nouveau : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +Et que se passe-t-il quand on change de nom ? + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +Exécutez votre code à nouveau : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +Maintenant, que pensez-vous qu'il se passera lorsque nous écrivrons un autre nom (ni Ola, ni Sonja) ? Faites un essai et regardez si vous avez raison. Ceci devrait s'afficher : + +{% filename %}command-line{% endfilename %} + + Hi anonymous! + + +Super, non ? Avec ça, vous n'avez pas besoin de répéter de lignes de code lorsque vous voulez changer le nom de la personne à saluer. C'est pour cette raison que nous avons besoin de fonctions : vous ne voulez pas avoir à répéter votre code ! + +Faisons quelque chose de plus intelligent – il existe bien plus que deux noms, et écrire une condition pour chacun d'entre eux serait difficile, non ? Remplacez le contenu de votre fichier avec les suivants : + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +Exécutons à nouveau notre code : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +Félicitations ! Vous venez juste d’apprendre à écrire des fonctions ! :) + +## Les boucles + +> Pour les lectrices autodidactes : cette partie est traitée dans la vidéo [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +C’est déjà la dernière partie. C’était rapide, non ? :) + +Les programmeurs⋅euses n'aiment pas devoir se répéter. L'essence de la programmation est d'automatiser les choses. Pour reprendre l'exemple précédent, nous aimerions pouvoir saluer automatiquement chaque personne. Pour cela, nous allons utiliser des boucles. + +Vous vous souvenez des listes ? Faisons une liste de filles : + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Nous voulons saluer chacune d'entre elles par son nom. Nous avons déjà la fonction `hi` pour faire ça, utilisons-la donc dans une boucle : + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +L'instruction `for` se comporte un peu comme `if`. Le code qui suit doit donc être indenté de quatre espaces. + +Voilà le code complet à mettre dans votre fichier : + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +Exécutez votre code : + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +Comme vous pouvez le constater, tout ce que vous mettez dans la déclaration `for` avec une indentation sera répété pour chaque élément de la liste `filles`. + +Vous pouvez aussi utiliser `for` sur des nombres grâce à la fonction `range`: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Cela va afficher : + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` est une fonction qui crée une liste de nombres qui se suivent (c'est vous qui définissez l’intervalle à l'aide de paramètres). + +Vous pouvez remarquer que le second de ces nombres n'est pas inclus dans la liste que Python nous donne (ce qui signifie que `range(1, 6)` compte de 1 à 5, mais n'inclue pas 6). Cela est du au fait que "range" est semi-ouvert, c'est-à-dire qu'il prend en compte la première valeur mais pas la dernière. + +## Résumé + +Et voilà ! **Vos assurez un max !** C'était un chapitre difficile, donc vous pouvez être fières de vous. De notre côté, nous sommes fières de vous, pour être parvenu-e si loin dans le cours. Bravo ! + +Pour accéder au tutoriel officiel et complet de Python, visitez https://docs.python.org/3/tutorial/. Cela vous donnera un accès plus exhaustif à l'étude du langage. A bientôt! :) + +N'hésitez pas à prendre une pause : étirez-vous, marchez un peu ou reposez-vous les yeux. Une fois que vous avez un peu rechargé vos batteries, vous pouvez attaquer le chapitre suivant :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/fr/python_introduction/images/cupcake.png b/fr/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/fr/python_introduction/images/cupcake.png differ diff --git a/fr/template_extending/README.md b/fr/template_extending/README.md new file mode 100755 index 00000000000..909b525e6df --- /dev/null +++ b/fr/template_extending/README.md @@ -0,0 +1,151 @@ +# Héritage de template + +Django vous réserve encore bien des surprises : une assez géniale est **l'héritage de template**. Qu'est ce que ça signifie ? C'est une fonctionnalité qui vous permet de réutiliser certains morceaux de HTML dans différentes pages de votre site web. + +Les modèles permettent d'utiliser les mêmes informations ou mises en page en plusieurs endroits. Vous n'avez pas à vous répéter dans chaque fichier. Et si vous voulez changer quelque chose, vous n'avez pas à le faire dans chaque modèle, mais juste un! + +## Créer un template de base + +Un template de base est le template le plus simple que vous pouvez faire hériter à chaque page de votre site web. + +Créons le fichier `base.html` dans le dossier `blog/templates/blog/` : + + blog + └───templates + └───blog + base.html + post_list.html + + +Ensuite, ouvrez ce fichier dans l'éditeur de code et collez-y tout ce qui se trouve dans le fichier `post_list.html`. Ça devrait ressembler à ça : + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Puis, dans le fichier `base.html`, remplacez tout ce qui se trouve dans `` (de `` à ``) par ceci : + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Vous pouvez remarquer qu'on vient de remplacer tout ce qui était entre `{% for post in posts %}` et `{% endfor %}` avec : {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Mais pourquoi? Vous venez de créer un `block` ! Vous avez utilisé la balise de modèle `{% block %}` pour créer une partie qui va contenir du HTML. Ce HTML viendra d'un autre modèle qui étendra ce modèle-ci (`base.html`). Nous vous expliquerons comment faire cela dans un instant. + +Enregistrez `base.html` et ouvrez votre `blog/templates/blog/post_list.html` à nouveau dans l'éditeur de code. {% raw %}Vous allez tout supprimer au-dessus de `{% for post in posts %}` et en dessous de `{% endfor %}`. Lorsque vous avez terminé, le fichier ressemblera à ceci :{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Nous voulons utiliser ceci dans le cadre de notre modèle pour tous les blocs 'content'. Il est temps d'ajouter ajouter des balises block à ce fichier ! + +{% raw %}Vous voulez que votre balise block corresponde à la balise dans votre fichier `base.html` . Vous voulez aussi qu'il inclue tout le code qui appartient à vos blocs de contenu. Pour faire cela, entourez tout le code de `{% block content %}` et `{% endblock %}`. Comme ceci :{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Seule une chose reste à faire. Nous devons connecter ces deux modèles ensemble. C'est ça, étendre des modèles ! Nous allons le faire en ajoutant une balise 'extends' au début du fichier. Comme cela : + +{% 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 %} +``` + +Et voilà ! Enregistrez le fichier et vérifiez que votre site fonctionne toujours correctement. :) + +> Si vous obtenez l'erreur `TemplateDoesNotExist`, cela signifie qu'il n'y a pas de fichier `blog/base.html` et que vous avez `runserver` en cours d'exécution dans la console. Arrêtez-le (en appuyant simultanément sur Ctrl+C, les touches Control et C de votre clavier) et relancez-le en tapant la commande `python manage.py runserver`. \ No newline at end of file diff --git a/fr/whats_next/README.md b/fr/whats_next/README.md new file mode 100755 index 00000000000..0437a65605c --- /dev/null +++ b/fr/whats_next/README.md @@ -0,0 +1,43 @@ +# Et maintenant ? + +Un immense bravo à vous ! **Vous êtes très déterminée**. Nous sommes fières ! <3 + +### Que faire maintenant ? + +Faites une pause et détendez-vous ! Vous venez d'accomplir quelque chose de conséquent. + +Ensuite, suivez Django Girls sur [Facebook](http://facebook.com/djangogirls) ou [Twitter](https://twitter.com/djangogirls) pour être au courant des nouvelles. + +### À la recherche de ressources supplémentaires ? + +Oui ! Il y a *énormément* de ressources en ligne pour apprendre toutes sortes de compétences de programmation. Il peut être assez difficile de s'orienter et aller plus loin, mais nous vous donnons des pistes pour démarrer. Quelle que soit la raison qui vous a menée à participer à Django Girls, et quels que soient les intérêts que vous avez développés en suivant le tutoriel, voici quelques ressources gratuites (ou des ressources avec de grands composants gratuits) que vous pouvez utiliser pour atteindre vos objectifs. + +#### Django + +- Notre autre livre, [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Tutoriel officiel de Django](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [Vidéos Getting Started With Django](http://www.gettingstartedwithdjango.com/) +- [La spécialisation Python de Coursera](https://www.coursera.org/specializations/django) – vous pouvez accéder gratuitement à certains cours et vous pouvez obtenir un certificat Coursera à la fin + +#### HTML, CSS et JavaScript + +- [Cours de développement web de la Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Cours Python de la Codecademy](https://www.codecademy.com/learn/learn-python) +- [Cours Python de Google](https://developers.google.com/edu/python/) +- Le livre [Learn Python The Hard Way](http://learnpythonthehardway.org/book/) – les premiers exercices sont gratuits +- [New Coder tutorials](http://newcoder.io/tutorials/) – c'est une série d'exemples pratiques illustrant comment Python peut vous servir +- [edX](https://www.edx.org/course?search_query=python) – vous pouvez accéder à la plupart des cours gratuitement, mais si vous voulez un certificat ou des crédits pour une qualification supérieure, cela coûtera de l'argent +- [La spécialisation Python de Coursera](https://www.coursera.org/specializations/python) – vous pouvez accéder gratuitement à certains cours et vous pouvez obtenir un certificat à la fin +- [Python for Everybody](https://www.py4e.com/) – une version gratuite et ouverte de la spécialisation de Coursera "Python for Everybody" + +#### Travailler avec les données + +- [Cours de science des données de la Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – vous pouvez accéder à la plupart des cours gratuitement, mais si vous voulez un certificat ou des crédits pour une qualification supérieure, cela coûtera de l'argent +- [Dataquest](https://www.dataquest.io/) – les 30 premières « missions » sont gratuites + +On a hâte de voir votre prochaine création ! \ No newline at end of file diff --git a/homework/README.md b/homework/README.md deleted file mode 100644 index aaeaa84e04b..00000000000 --- a/homework/README.md +++ /dev/null @@ -1,122 +0,0 @@ -# Homework: add more to your website! - -Yes, this is the last thing we will do in this tutorial. You have already learned a lot! Time to use this knowledge. - -## Page with list of unpublished posts - -Remember the chapter about querysets? We created a view `post_list` that displays only published blog posts (those with non-empty `published_date`). - -Time to do something similar, but for draft posts. - -Let's add a link in `mysite/templates/mysite/base.html` near the button for adding new posts (just above `

Django Girls Blog

` line!): - - - -Next: urls! In `blog/urls.py` we add: - - url(r'^drafts/$', views.post_draft_list, name='post_draft_list'), - -Time to create a view in `blog/views.py`: - - def post_draft_list(request): - posts = Post.objects.filter(published_date__isnull=True).order_by('created_date') - return render(request, 'blog/post_draft_list.html', {'posts': posts}) - -This line `Post.objects.filter(published_date__isnull=True).order_by('created_date')` makes sure we take only unpublished posts (`published_date__isnull=True`) and order them by `created_date` (`order_by('created_date')`). - -Ok, the last bit is of course a template! Create a file `blog/templates/blog/post_draft_list.html` and add the following: - - {% extends 'mysite/base.html' %} - - {% block content %} - {% for post in posts %} -
-

created: {{ post.created_date|date:'d-m-Y' }}

-

{{ post.title }}

-

{{ post.text|truncatechars:200 }}

-
- {% endfor %} - {% endblock %} - -It looks very similar to our `post_list.html`, right? - -Now when you go to `http://127.0.0.1:8000/drafts/` you will see the list of unpublished posts. - -Yay! Your first task is done! - -## Add publish button - -It would be nice to have a button on the blog post detail page that will immediately publish the post, right? - -Let's open `blog/template/blog/post_detail.html` and change these lines: - - {% if post.published_date %} - {{ post.published_date }} - {% endif %} - -into these: - - {% if post.published_date %} - {{ post.published_date }} - {% else %} - Publish - {% endif %} - -As you noticed, we added `{% else %}` line here. That means, that if the condition from `{% if post.published_date %}` is not fulfilled (so if there is no `published_date`), then we want to do the line `Publish`. Note that we are passing a `pk` variable in the `{% url %}`. - -Time to create a URL (in `blog/urls.py`): - - url(r'^post/(?P[0-9]+)/publish/$', views.post_publish, name='post_publish'), - -and finally, a *view* (as always, in `blog/views.py`): - - def post_publish(request, pk): - post = get_object_or_404(Post, pk=pk) - post.publish() - return redirect('blog.views.post_detail', pk=pk) - -Remember, when we created a `Post` model we wrote a method `publish`. It looked like this: - - def publish(self): - self.published_date = timezone.now() - self.save() - -Now we can finally use this! - -And once again after publishing the post we are immediately redirected to the `post_detail` page! - -![Publish button](images/publish2.png) - -Congratulations! You are almost there. The last step is adding a delete button! - -## Delete post - -Let's open `blog/templates/blog/post_detail.html` once again and add this line: - - - -just under a line with the edit button. - -Now we need a URL (`blog/urls.py`): - - url(r'^post/(?P[0-9]+)/remove/$', views.post_remove, name='post_remove'), - -Now, time for a view! Open `blog/views.py` and add this code: - - def post_remove(request, pk): - post = get_object_or_404(Post, pk=pk) - post.delete() - return redirect('blog.views.post_list') - -The only new thing is to actually delete a blog post. Every Django model can be deleted by `.delete()`. It is as simple as that! - -And this time, after deleting a post we want to go to the webpage with a list of posts, so we are using `redirect`. - -Let's test it! Go to the page with a post and try to delete it! - -![Delete button](images/delete3.png) - -Yes, this is the last thing! You completed this tutorial! You are awesome! - - - diff --git a/homework/images/delete3.png b/homework/images/delete3.png deleted file mode 100644 index 802ca70b19c..00000000000 Binary files a/homework/images/delete3.png and /dev/null differ diff --git a/homework/images/publish2.png b/homework/images/publish2.png deleted file mode 100644 index fa8642ef75e..00000000000 Binary files a/homework/images/publish2.png and /dev/null differ diff --git a/how_internet_works/README.md b/how_internet_works/README.md deleted file mode 100644 index 10d5e1548bc..00000000000 --- a/how_internet_works/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# How the Internet works - -*This chapter is inspired by a talk "How the Internet works" by Jessica McKellar (http://web.mit.edu/jesstess/www/).* - -We bet you use the Internet every day. But do you actually know what happens when you type an address like http://djangogirls.org into your browser and press 'Enter'? - -The first thing you need to understand is that a website is just 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. - -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. Web browsers are designed to understand this code, -follow its instructions and present all these files that your website is made of exactly the way you want them to be presented. - -As with every file, we need to store HTML files somewhere on a hard disk. For the Internet, we use special, powerful computers called *servers*. They don't have -a screen, mouse or a keyboard, because their main purpose is to store data and serve it. That's why they're called *servers* -- because they *serve* you data. - -Ok, but you want to know how the Internet looks like, right? - -We drew you a picture! It looks like this: - -![Figure 1.1](images/internet_1.png) - -Looks like a mess, right? In fact it is a network of connected machines (the above mentioned *servers*). Hundreds of thousands of machines! Many, many kilometers of cables around the world! You can visit a Submarine Cable Map website (http://submarinecablemap.com/) to see how complicated the net is. Here is a screenshot from the website: - -![Figure 1.2](images/internet_3.png) - -It is fascinating, isn't it? But obviously, 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 http://djangogirls.org is saved) we need to pass a request through many, many different machines. - -It looks like this: - -![Figure 1.3](images/internet_2.png) - -Imagine that when you type http://djangogirls.org, you send a letter that says: "Dear Django Girls, I want to see the djangogirls.org website. Send it to me, please!" - -Your letter goes to the post office closest to you. Then it goes to another that is a bit nearer to your addressee, then to another and another till it is delivered at its destination. The only unique thing is that if you send letters (*data packets*) frequently to the same place, each letter might go through totally different post offices (*routers*), depending on how they are distributed in each office. - -![Figure 1.4](images/internet_4.png) - -Yes, it is as simple as that. You send messages and you expect some response. Of course, instead of paper and pen you use bytes of data, but the idea is the same! - -Instead of addresses with a street name, city, zip code and country name, we use IP addresses. Your computer first asks the DNS (Domain Name System) to translate djangogirls.org into an IP address. It works a little bit like old-fashioned phonebooks where you could look for the name of the person you want to contact and find their phone number and address. - -When you send a letter, it needs to have certain features to be delivered correctly: an address, stamp etc. You also use a language that the receiver understands, right? The same is with *data packets* you send in order to see a website: you use a protocol called HTTP (Hypertext Transfer Protocol). - -So, basically, when you have a website you need to have a *server* (machine) where it lives. The *server* is waiting for any incoming *requests* (letters that ask the server to send your website) and it sends back your website (in another letter). - -Since this is a Django tutorial, you will ask what Django does. When you send a response, you don't always want to send the same thing to everybody. It is so much better if your letters are personalized, especially for the person that has just written to you, right? Django helps you with creating these personalized, interesting letters :). - -Enough talk, time to create! But first the boring part - installation! diff --git a/how_internet_works/images/internet_1.png b/how_internet_works/images/internet_1.png deleted file mode 100644 index 9c5bcf0b003..00000000000 Binary files a/how_internet_works/images/internet_1.png and /dev/null differ diff --git a/how_internet_works/images/internet_2.png b/how_internet_works/images/internet_2.png deleted file mode 100644 index dd5861f376f..00000000000 Binary files a/how_internet_works/images/internet_2.png and /dev/null differ diff --git a/how_internet_works/images/internet_3.png b/how_internet_works/images/internet_3.png deleted file mode 100644 index a23488e3f2f..00000000000 Binary files a/how_internet_works/images/internet_3.png and /dev/null differ diff --git a/how_internet_works/images/internet_4.png b/how_internet_works/images/internet_4.png deleted file mode 100644 index 05f1aed562f..00000000000 Binary files a/how_internet_works/images/internet_4.png and /dev/null differ diff --git a/html/README.md b/html/README.md deleted file mode 100644 index b6bb022d9d8..00000000000 --- a/html/README.md +++ /dev/null @@ -1,135 +0,0 @@ -# Introduction to HTML - -What's a template, you may ask? - -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. - -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__). - -## What is HTML? - -HTML is a simple code that is interpreted by your web browser - such as Chrome, Firefox or Safari - to display a webpage for user. - -HTML stands for "HyperText Markup Language." __HyperText__ means it's a type of text that supports hyperlinks between pages. __Markup__ means we have taken a document and marked it up with code to tell something (in this case, a browser) how to interpret the page. HTML code is built with __tags__, each one starting with `<`, and ends with `>`. These tags markup __elements__. - -## Your first template! - -Creating a template means creating a template file. Everything is a file, right? You have probably noticed this already. - -Templates are saved in `blog/templates/blog` directory. So first create a directory called `templates` inside your blog directory. Then create another directory called `blog` inside your templates directory: - - blog - └───templates - └───blog - -(You might wonder why we need two directories both called `blog` - as you will discover later, this is simply a useful naming convention that makes life easier when things start to get more complicated.) - -And now create a `post_list.html` file (just leave it blank for now) inside the `blog/templates/blog` directory. - -See how your website looks now: http://127.0.0.1:8000/ - -![Figure 11.1](images/step1.png) - -No error anymore! Congratulations :) However, your website is isn't actually publishing anything except an empty page, because your template is empty too. We need to fix that. - -Add the following to your template file: - - -

Hi there!

-

It works!

- - -So how does your website look now? Click to find out: http://127.0.0.1:8000/ - -![Figure 11.2](images/step3.png) - -It worked! Nice work there :) - -- The most basic tag, ``, is always the beginning of any webpage 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 - -## Head & body - -Each HTML page is also divided into two elements: __head__ and __body__. - -- __head__ is an element that contains information about the document that is not displayed on the screen. - -- __body__ is an element that contains everything else that is displayed as part of the web page. - -We use `` to tell the browser about the configuration of the page, and `` to tell it what's actually in the page. - -For example, you can put a webpage title element inside the ``, like this: - - - - Ola's blog - - -

Hi there!

-

It works!

- - - -Save a file and refresh your page. - -![Figure 11.3](images/step4.png) - -Notice how the browser has understood that "Ola's blog" is the title of your page? It has interpreted `Ola's blog` and placed the text in the title bar of your browser (it will also be used for bookmarks and so on). - -You will probably also have noticed that each opening tag is matched by a _closing tag_, with a `/`, and that elements are _nested_ (i.e. you can't close a particular tag until all the ones that were inside it have been closed too). - -It's like putting things into boxes. You have one big box, ``; inside it is ``, and that contains smaller boxes still: `

`. - -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. - -## Customize your template - -You can now have a little fun and try to customize your template! Here are a few useful tags for that: - -- `

A heading

` - for your most important heading -- `

A sub-heading

` for a heading at the next level -- `

A sub-sub-heading

` ... and so on, up to `
` -- `text` emphasizes your text -- `text` strongly emphasizes your text -- `
` goes to another line (you can't put anything inside br) -- `link` creates a link -- `
  • first item
  • second item
` makes a list, just like this one! -- `
` defines a section of the page - -Here's an example of a full template: - - - - Django Girls blog - - - - -
-

published: 14.06.2014, 12:14

-

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

-

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.

-
- - - -We've created three `div` sections here. - -- The first `div` element contains the title of our blogpost - it's a heading and a link -- Another two `div` elements contain our blogposts with a published date, `h2` with a post title that is clickable and two `p`s (paragraph) of text, one for the date and one for our blogpost. - -It gives us this effect: - -![Figure 11.4](images/step6.png) - -Yaaay! 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__. - -What we want really want to do is display real posts added in our Django admin - and that's where we're going next. diff --git a/html/images/step1.png b/html/images/step1.png deleted file mode 100644 index e9c2f1082d6..00000000000 Binary files a/html/images/step1.png and /dev/null differ diff --git a/html/images/step3.png b/html/images/step3.png deleted file mode 100644 index 811226fa3fc..00000000000 Binary files a/html/images/step3.png and /dev/null differ diff --git a/html/images/step4.png b/html/images/step4.png deleted file mode 100644 index bd6c1a044e0..00000000000 Binary files a/html/images/step4.png and /dev/null differ diff --git a/html/images/step6.png b/html/images/step6.png deleted file mode 100644 index e42a2fe5388..00000000000 Binary files a/html/images/step6.png and /dev/null differ diff --git a/hu/GLOSSARY.md b/hu/GLOSSARY.md new file mode 100644 index 00000000000..0b906ac1f3c --- /dev/null +++ b/hu/GLOSSARY.md @@ -0,0 +1,3 @@ +# kódszerkesztő + +A kódszerkesztő egy alkalmazás, amely segítségével elmentheted a kódodat, így később vissza tudsz térni hozzá. A [Kódszerkesztő fejezetből](./code_editor/README.md) tudhatod meg, hogyan juthatsz hozzá \ No newline at end of file diff --git a/hu/README.md b/hu/README.md new file mode 100644 index 00000000000..747acf69ced --- /dev/null +++ b/hu/README.md @@ -0,0 +1,51 @@ +# Django Girls Tutorial + +[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) + +> Ez az anyag Creative Commons Attribution-ShareAlike 4.0 International License jogvédelme alatt áll. A licenc megtekintéséhez látogass el ide: https://creativecommons.org/licenses/by-sa/4.0/ + +## Fordítás +A tutorial magyar fordítását egy csapat lelkes önkéntes készítette el: Czapári Dóri, Hanna Kollo, Erő Julcsi, Bónis Balázs, Kádár Szilvi, Szelle Erika, Téglássy Anna, Szabó Adrienn, Nádudvari György. Köszönjük nekik! <3 + +## Bevezetés + +Érezted már úgy hogy a világ egyre inkább a technológiáról szól, és te valahogy kimaradsz belőle? Gondolkoztál már azon, hogyan kell egy weblapot létrehozni, de soha nem volt elég erőd elkezdeni? Érezted úgy, hogy a szoftveres világ túl bonyolult ahhoz, hogy egyáltalán megpróbálj valamit létrehozni benne magadtól? + +Nos, jó hírünk van számodra! A programozás egyáltalán nem olyan nehéz, mint amilyennek tűnik, és mi megmutatjuk, hogy mennyire jó móka tud lenni. + +Ez a tutorial nem fog téged egy csapásra programozóvá változtatni. Ha profi akarsz lenni benne, hónapokat vagy akár éveket kell eltöltened tanulással és gyakorlással. De meg szeretnénk mutatni, hogy a programozás, illetve a weblapkészítés nem annyira bonyolult, mint amilyennek tűnik. Megpróbáljuk minél jobban elmagyarázni a különböző részleteket, hogy ne tűnjön annyira ijesztőnek a technológia. + +Reméljük, veled is annyira megszerettetjük a számítógépek világát, mint amennyire mi szeretjük! + +## Mit fogsz a tutorial alatt megtanulni? + +A tutorial befejezésével lesz egy egyszerű, működő webes alkalmazásod: a saját blogod. Megmutatjuk, hogyan kell a netre feltölteni, hogy mások is lássák az eredményt! + +Körülbelül így fog kinézni: + +![Figure 0.1][2] + + [2]: images/application.png + +> Ha egyedül dolgozol a tutorialon és nincs melletted coach, aki segíthetne, ha bármi probléma felmerül, használd a chatet, amit neked tartunk fenn: [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Megkértük a segítőinket és korábbi résztvevőket, hogy legyenek fent, ahogy idejük engedi, és segítsenek másoknak a tutorialban. Kérdezz tőlük bátran! + +Oké, [kezdjük az elejénél...][3] + + [3]: ./how_the_internet_works/README.md + +## A tutorialról és a közreműködésről + +Ezt a tutorialt a [DjangoGirls][4] tartja fenn. Ha bármilyen hibát találsz benne, vagy frissíteni szeretnéd, kérlek kövesd a [közreműködési útmutatót][5]. + + [4]: https://djangogirls.org/ + [5]: https://github.com/DjangoGirls/tutorial/blob/master/README.md + +## Szeretnél segíteni lefordítani a tutorialt más nyelvekre? + +A fordításokat jelenleg a crowdin.com platformon végezzük: + +https://crowdin.com/project/django-girls-tutorial + +Ha a te nyelved nem szerepel a crowdin listán, kérlek [hozz létre egy új issue-t][6], amely megjelöli a nyelvet, hogy hozzáadhassuk. + + [6]: https://github.com/DjangoGirls/tutorial/issues/new \ No newline at end of file diff --git a/hu/SUMMARY.md b/hu/SUMMARY.md new file mode 100644 index 00000000000..32bf04596b8 --- /dev/null +++ b/hu/SUMMARY.md @@ -0,0 +1,26 @@ +# Összefoglaló + +* [Bevezetés](README.md) +* [Installáció](installation/README.md) +* [Hogy működik az Internet?](how_the_internet_works/README.md) +* [Bevezetés a parancssor használatába](intro_to_command_line/README.md) +* [A Python telepítése](python_installation/README.md) +* [Kódszerkesztő (editor)](code_editor/README.md) +* [Bevezetés a Pythonba](python_introduction/README.md) +* [Mi a Django?](django/README.md) +* [Django telepítés](django_installation/README.md) +* [Az első Django projekted!](django_start_project/README.md) +* [Django modellek](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Deploy!](deploy/README.md) +* [Django url-ek](django_urls/README.md) +* [Django views - itt az ideje alkotni!](django_views/README.md) +* [Bevezetés a HTML-be](html/README.md) +* [Django ORM és QuerySet-ek](django_orm/README.md) +* [Dinamikus adatok a template-ben](dynamic_data_in_templates/README.md) +* [Django sablonok (template)](django_templates/README.md) +* [CSS - Tegyük széppé!](css/README.md) +* [Template-kiegészítés](template_extending/README.md) +* [Egészítsd ki az applikációdat](extend_your_application/README.md) +* [Django űrlapok](django_forms/README.md) +* [Következő lépések](whats_next/README.md) diff --git a/hu/code_editor/README.md b/hu/code_editor/README.md new file mode 100644 index 00000000000..dd6521f1a3b --- /dev/null +++ b/hu/code_editor/README.md @@ -0,0 +1,7 @@ +# Kódszerkesztő (editor) + +Nemsokára megírod a kód első sorát, itt az ideje letölteni egy kódszerkesztőt! + +> **Megjegyzés:** Lehet, hogy ezt már megtetted a Telepítés fejezet olvasása során - ha igen, ugorj előre a következő fejezetre! + +{% include "/code_editor/instructions.md" %} diff --git a/hu/code_editor/instructions.md b/hu/code_editor/instructions.md new file mode 100644 index 00000000000..3d89c4da800 --- /dev/null +++ b/hu/code_editor/instructions.md @@ -0,0 +1,31 @@ +Sokféle kódszerkesztő program létezik, és valójában ízlés kérdése, hogy ki melyiket választja. A legtöbb Python programozó bonyolult fejlesztői környezetet (IDE - Integrated Development Environment) használ, mint például a PyCharm. Egy kezdőnek viszont nem ezek a legmegfelelőbbek. A programok, amiket mi ajánlunk, hasonlóan hatékonyak, de használatuk sokkal egyszerűbb. + +Mi az alábbiakat javasoljuk, de nyugodtan kérj segítséget a coach-odtól, ő is könnyen tud tanácsot adni ez ügyben. + +## Gedit + +A Gedit egy open-source (nyílt forráskódú), ingyenes kódszerkesztő, az összes jelenlegi operációs rendszeren elérhető. + +[Letöltés](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +A Sublime Text egy nagyon népszerű editor, ingyenes próbaidővel. Könnyű telepíteni és használni, és minden operációs rendszeren elérhető. + +[Letöltés](https://www.sublimetext.com/) + +## Atom + +Az Atom egy teljesen új kódszerkesztő, amelyet a [GitHub](https://github.com/) hozott létre. Ingyenes, nyílt forráskódú, könnyen telepíthető és könnyen használható. Elérhető Windows-on, OSX-en és Linuxon. + +[Letöltés](https://atom.io/) + +## Miért telepítünk kódszerkesztőt? + +Most talán azon gondolkozol, miért telepítünk speciális kódszerkesztőt, ahelyett, hogy a Word vagy a Notepad alkalmazást használnánk. + +Az első ok az, hogy a kódot **egyszerű szövegként** kell szerkeszteni. Az általános (nem programozóknak szánt) szövegszerkesztőkkel, mint a Word és a Textedit, az a probléma, hogy nem egyszerű szöveges fájlt állítanak elő, hanem formázott dokumentumot (például [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format) formátumban), amelyben számít például a betűtípus, formázás, stb. + +A másodsorban ezek a programozáshoz tervezett szövegszerkesztők kifejezetten kódszerkesztésre szakosodtak, ami azt jelenti hogy különböző funkciókkal segítik a munkát, mint például a programkód részeinek, szavainak kiemelése annak jelentése alapján, vagy az automatikus kiegészítés. + +Ezt mind látni fogjuk a későbbiekben. Hamarosan úgy fogsz gondolni a jó öreg megbízható kódszerkesztődre, mint az egyik kedvenc eszközödre :) diff --git a/hu/css/README.md b/hu/css/README.md new file mode 100644 index 00000000000..e4134d6a43c --- /dev/null +++ b/hu/css/README.md @@ -0,0 +1,294 @@ +# CSS - csinosítsd ki! + +Egyelőre nem túl szép a blogunk, igaz? Itt az ideje, hogy kicsinosítsd! Erre a CSS-t fogjuk használni. + +## Mi a CSS? + +A CSS (Cascading Style Sheets) egy nyelv, amit a HTML-ben megírt weboldalak kinézetének leírására használunk. Vagyis mintha kisminkelnéd a weboldaladat ;). + +De nem akarjuk megint az alapoktól kezdeni, igaz? Itt is olyasmit fogunk felhasználni, amit más programozók már létrehoztak, és szabadon elérhetővé tettek az Interneten. Minek találnánk fel újra a spanyolviaszt? + +## Használjunk Bootstrapet! + +A Bootstrap az egyik legnépszerűbb HTML és CSS keretrendszer, amivel szép weboldalakat készíthetünk: https://getbootstrap.com/ + +Eredetileg a Twitternél dolgozó programozók készítették, de most önkéntesek fejlesztik szerte a világon. + +## Bootstrap telepítés + +Hogy telepítsd a Bootstrapet, add hozzá a következő a sorokat a `` részhez a `.html` fájlodban (`blog/templates/blog/post_list.html`): + +```html + + +``` + +Ezzel nem adsz hozzá új fájlokat a projektedhez, csak az Interneten létező fájlokra hivatkozol. Nyisd meg újra a weboldaladat, és frissítsd! Itt is van! + +![14.1 ábra][1] + + [1]: images/bootstrap1.png + +Már sokkal jobban néz ki! + +## Statikus fájlok a Django-ban + +Most nézzük meg kicsit közelebbről ezeket a "**statikus fájl**"-nak nevezett dolgokat. A CSS-ed és az összes képfájl statikus fájlnak számít -- ilyen minden, ami nem dinamikus, vagyis aminek a tartalma nem függ a kontextustól (magyarul a weboldal aktuális állapotától), és ezért minden felhasználó számára ugyanaz. + +### Hová pakoljuk a statikus fájlokat? + +Django már tudja, hol találja a statikus fájlokat a beépíttett "admin" alkalmazáshoz. Most csak annyit kell tennünk, hogy a saját, `blog` alkalmazásunkhoz hozzáadunk néhány statikus fájlt. + +Ehhez pedig létre kell hozunk egy "`static`" nevű könyvtárat a blog applikáción belül: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + + +A Django automatikusan megtalál minden "static" nevű mappát az alkalmazásaid könyvtárain belül, és képes lesz használni azok tartalmát statikus fájlokként. + +## Az első CSS fájlod! + +Írjunk egy CSS fájlt, hogy hozzáadd a saját stílusodat a weboldaladhoz. Hozz létre egy `css` nevű könyvtárat a `static` könyvtárban! Majd hozz létre egy új fájlt `blog.css` néven a `css` könyvtárban. Kész vagy? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Itt az ideje, hogy a CSS fájlunkba írjunk is valamit! Nyisd meg a `blog/static/css/blog.css` fájlt a kódszerkesztődben. + +Most nem fogunk túlságosan belemélyedni a CSS-be, mert nem bonyolult, és magadtól is meg tudod majd tanulni a workshop után. Ennek a fejezetnek a végén ajánlunk egy ingyenes kurzust, ahol többet tudhatsz meg a CSS-ről. + +De azért egy pár dolgot megmutatunk. Például megváltoztathatnánk a header színét? Hogy a számítógépek megértsék a színeket, speciális kódokat használnak. `#` jellel kezdődnek, majd 6 betű (A-F) és szám (0-9) következik. Színkódokat például itt találhatsz: http://www.colorpicker.com/. [Előre meghatározott színeket][3] is használhatsz, mint a `red` vagy a `green`. + + [3]: http://www.w3schools.com/cssref/css_colornames.asp + +A `blog/static/css/blog.css` fájlba írd bele a következő kódot: + +```css +h1 a { + color: #FCA205; +} +``` + +A `h1 a` egy CSS szelektor. Ez azt jelenti, hogy alkalmazzuk a stílusunkat minden olyan `a` elemre, ami egy `h1` elemen belül van (például, mikor valami ilyesmi van a kódban: `

link

`). Ebben az esetben azt mondjuk, hogy változtasd meg a kiválasztott elem színét `#FCA205`-re, ami narancssárgát jelent. Természetesen nyugodtan használd a saját színedet itt! + +A CSS fájlban mondjuk meg, hogy nézzenek ki a HTML fájl elemei. Az egyes elemek beazonosíthatók az elemek nevei alapján (pl. `a`, `h1`, `body`), és a `class` vagy az `id` attribútumaik alapján. A class és az id olyan nevek, amelyeket te adhatsz meg az elemeknek. A class attribútum elemek egy csoportjára vonatkozik, míg az id-val kifejezetetten egy elemet tudunk beazonosítani. A következő tag például beazonosítható akár az "`a`" tag névvel, az `external_link` class-szal vagy a `link_to_wiki_page` id-val: + +```html + +``` + +Olvass utána a [CSS szelektorokról a w3schools oldalán][4]. + + [4]: http://www.w3schools.com/cssref/css_selectors.asp + +Mindezek után közölnünk kell a HTML fájlunkkal is, hogy hozzáadtunk pár CSS-t. Nyisd meg a `blog/templates/blog/post_list.html` fájlt és add a következő sort a fájl legelejére: + +```html +{% load static %} +``` + +Itt csak betöltünk pár statikus fájlt :). Ezután a `` és a `` tagek közé, a Bootstrap CSS fájlok linkjei után (a böngésző olyan sorrendben olvassa az egyes fájlokat, amilyenben követik egymást, tehát a mi fájlunkban lévő kód lehet, hogy felülír pár kódot a Bootstrap fájlban), a következő sort add: + +```html + +``` + +Most megmondtuk a template-ünknek, hol találja a CSS fájlokat. + +Így kellene kinéznie a fájlodnak: + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + + +Oké, mentsd el a fájlt és frissítsd be az oldalt! + +![14.2 ábra][5] + + [5]: images/color2.png + +Szép munka! Lehet, hogy jó lenne adni egy kis "teret" a weboldalunknak és növelni a bal oldali margót. Próbáljuk meg! + +```css +body { + padding-left: 15px; +} +``` + +Írd hozzá a CSS fájlodhoz, mentsd el és lássuk, működik-e! + +![14.3 ábra][6] + + [6]: images/margin2.png + +Lehet, hogy testre szabhatnánk a betű stílusát a header-ünkben. A következő sort másold bele a ``-be a `blog/templates/blog/post_list.html` fájlon belül: + +```html + +``` + +Ez a sor beimportál egy *Lobster* nevű betűtípust a Google Fonts-ból (https://www.google.com/fonts). + +Most add hozzá a `font-family: 'Lobster';` sort a `blog/static/css/blog.css` fájlodban, a `h1 a` stílusát meghatározó blokkhoz (ez a `{` kapcsos zárójel `}` közötti kód) és frissítsd az oldalt: + +```css +h1 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![14.3 ábra][7] + + [7]: images/font.png + +Szuper! + +Ahogy fentebb említettük, a CSS-ben van egy "class" nevű fogalom, ami alapvetően azt teszi lehetővé, hogy elnevezd a HTML kódod egy részét és alkalmazz rajta egy stílust, csak ezen a részen, ami így nem befolyásolja a többit. Nagyon hasznos tud lenni, például amikor van két dived, amelyek nagyon különböző dolgokat csinálnak (akár a header-ed vagy a post-od), tehát nem akarod, hogy ugyanúgy nézzenek ki. + +Menj végig és nevezd el egy részét a HTML kódodnak. Adj egy `page-header` nevű class-t a `div`-edhez, amelyik a header-t tartalmazza, akárcsak így: + +```html +
+

Django Girls Blog

+
+``` + +És most adj egy `post` class-t a `div`-hez, ami a blog postokat tartalmazza. + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Most pedig adjunk stílusblokkokat a különböző szelektorokhoz. A `.` -tal kezdődő szelektorok classokra utalnak. Rengeteg szuper tutorial és magyarázat található a weben a CSS-ről, ami segít megérteni a következő kódot. Most csak másold ki és illeszd be a `blog/static/css/blog.css` fájlodba: + +```css +.page-header { + background-color: #ff9400; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + float: right; + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +Ezután jelöld ki a HTML kódot, ami a post-okat jeleníti meg egy class="post" attribútummal. Cseréld le ezt: + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +a `blog/templates/blog/post_list.html` fájlban ezzel: + +```html +
+
+
+ {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Mentsd el a fájlokat és frissítsd az oldalad. + +![14.4 ábra][8] + + [8]: images/final.png + +Nahát! Fantaszikus nem? A kódot, amit beillesztettünk, nem túl nehéz megérteni és a nagyja már csak átolvasva is érthető kell, hogy legyen. Mit változtatnál ahhoz, hogy a dátum türkízkék színű legyen? + +Ne félj kicsit megbuherálni ezt a CSS-t és megváltoztatni pár dolgot. Ha valamit elrontasz, ne aggódj, vissza tudod csinálni! + +Mindenesetre melegen ajánljuk ezt az ingyenes online [Codeacademy HTML & CSS kurzust][2], mint workshop utáni házi feladatot, hogy mindent tudj arról, hogyan tudod csinosabbá varázsolni a weboldaladat CSS-sel. + +Készen állsz a következő fejezetre?! :) diff --git a/hu/css/images/bootstrap1.png b/hu/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/hu/css/images/bootstrap1.png differ diff --git a/hu/css/images/color2.png b/hu/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/hu/css/images/color2.png differ diff --git a/hu/css/images/final.png b/hu/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/hu/css/images/final.png differ diff --git a/hu/css/images/font.png b/hu/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/hu/css/images/font.png differ diff --git a/hu/css/images/margin2.png b/hu/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/hu/css/images/margin2.png differ diff --git a/hu/deploy/README.md b/hu/deploy/README.md new file mode 100644 index 00000000000..4640eb3f49d --- /dev/null +++ b/hu/deploy/README.md @@ -0,0 +1,293 @@ +# Deploy! + +> **Megjegyzés** A következő fejezet néhol kissé bonyolult lehet. Tarts ki és vedd át az egész fejezetet; ugyanis most a webfejlesztés egy nagyon fontos része következik - az ún. deployment. Ez a fejezet a tutorial közepén található, így majd a mentorod is tud segíteni a trükkösebb részeknél, miközben a honlapodat online is elérhetővé teszed. Magát a tutorialt később egyedül is befejezheted, ha esetleg kifutnál az időből. + +Ezidáig a honlapod csak a saját számítógépeden volt elérhető - most tanuljuk meg, hogyan tegyük mások számára is elérhetővé! Ez az ún. deploying - az a tevékenység, amely során az alkalmazásodat közzé teszed az interneten, hogy mások is láthassák és használhassák azt :). + +Ahogyan azt már tudod, a honlapot egy szerveren kell elhelyezni. Több szerver szolgáltató is elérhető az interneten. Mi egy olyat fogunk használni, amit viszonylag egyszerű kezelni: [PythonAnywhere][1]. A PythonAnywhere ingyenes olyan kisebb alkalmazások számára, amelyeknek nincs sok látogatójuk, tehát a mi esetünkben ez pont megfelelő lesz. + + [1]: https://www.pythonanywhere.com/ + +A másik külső szolgáltatás, amit igénybe fogunk venni a [GitHub][2], ami egy ún. code hosting service (forráskód tárolására és megosztására alkalmas online tárhely). Vannak más hozzá hasonló szolgáltatók is, de szinte minden programozó ezt használja manapság, és nemsokára te is közéjük tartozhatsz! + + [2]: https://www.github.com + +Ez a három hely lesz fontos. A saját számítógéped lesz az a hely, ahol fejlesztesz és tesztelsz. Amikor elégedett vagy a módosításaiddal, felmásolod a programodat GitHub-ra. A website-od a PythonAnywhere-en lesz, és a GitHub-ról fogod frissíteni. + + +# Git + +> **Megjegyzés** Ha már követted a korábbi telepítési utasításokat, ezt a pontot átugorhatod és kezdheted kialakítani a saját Git csomagtáradat! + +{% include "/deploy/install_git.md" %} + +## Készítsünk Git repository-t + +A Git nyomon követi a változásokat az adott fájlokban egy ún. csomagtárban (repository vagy röviden "repo"). Nyissunk egy új repo-t a projektünknek. Nyisd fel a konzolt és futtasd le a következő parancsokat, a `djangogirls` mappában: + +> **Megjegyzés** Az alábbi parancsokkal ellenőrizheted a munkamappát (working directory, az éppen megnyitott mappa): `pwd` (OSX/Linux) vagy `cd` (Windows) mielőtt létrehoznád a repositoryt. A `djangogirls` mappában kell lenned. + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Your Name" + $ git config --global user.email you@example.com + + +A git csomagtár inicializálása olyasvalami, amit minden projekt esetében csak egyszer kell véghezvinni (így majd nem kell újra és újra megadni a felhasználónevet ill. jelszót). + +A Git ezután nyomon követ minden változást a fájlokban és mappákban ezen a mappán belül. De vannak bizonyos fájlok, amiket nem szeretnénk figyelembe venni. Ezt úgy tehetjük meg, hogy létrehozunk egy fájlt `.gitignore` névvel a gyökérkönyvtárban. Nyisd meg a szövegszerkesztőt és hozz létre egy új fájlt, amibe az alábbi sorok kerülnek: + +{% filename %}.gitignore{% endfilename %} +``` +*.pyc +*~ +__pycache__ +myvenv +db.sqlite3 +/static +.DS_Store +``` + + +Majd mentsd le `.gitignore` néven a "djangogirls" legfelsőbb mappájában. + +> **Megjegyzés** Nagyon fontos, hogy a fájl neve ponttal kezdődjön! Ha bármi gond adódna a fájl létrehozásánál (pl. Mac számítógépeken a Finder alapvetően nem engedi, hogy a fájlnév ponttal kezdődjön), akkor használd a "Save as" lehetőséget. + +> **Megjegyzés** A `.gitignore` file-ban megadott file-ok egyike a `db.sqlite3`. Ez a file a lokális adatbázisod, ez tárolja az összes blogposztodat. Nem akarjuk hozzáadni a repository-hoz, mert a PythonAnywhere-en lévő weboldal egy másik adatbázist fog használni. Az az adatbázis lehet SQLite, mint a fejlesztői gépeden, de többnyire egy MySQL nevűt fogsz használni, amely jóval több látogatót tud kiszolgálni mint az SQLite. Akármelyiket választod, azzal hogy az SQLite adatbázisod kihagyjuk a GitHub másolatból, az összes blogpost amelyet eddig létrehoztál csak lokálisan lesz elérhető, a publikus weboldalon újra létre kell majd ezeket hozni. Gondolj úgy a lokális adatbázisodra, mint egy játszótérrel, ahol kipróbálhatsz különböző dolgokat és nem kell attól tartanod, hogy valódi posztokat fogsz törölni a blogodról. + +Jó ötlet a `git status` parancs használata még a `git add` előtt, valamint ezen kívül még bármikor, ha tudni szeretnéd, hogy mi változott. Ez majd segít elkerülni olyan szituációkat, mint például rossz fájlok hozzáadása ill. feltöltése a csomagtárba. A `git status` parancs információt szolgáltat minden nem követett (not tracked) / megváltozott (modified) /feltöltésre felkészített fájlról (staged files) stb. A kimenet ehhez hasonló lesz: + + $ 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) + + +Végül mentsük le a változtatásokat. A konzolban futtasd le a következő parancsokat: + + $ 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 + + +## Forráskód feltöltése a GitHubra + +A böngészőben keresd fel a [GitHub.com][2] honlapot és regisztrálj be egy új "free user" fiókba. (Ha már beregisztráltál, ezt a pontot kihagyhatod) + +Ezután hozz létre egy új csomagtárat ("repót"), amit nevezz "my-first-blog"-nak. Hagyd az "initialise with a README" mezőt jelöletlenül, a .gitignore lehetőséget hagyd üresen (ezt manuálisan tettük), a "License" résznél maradjon a "None" opció. + +![][3] + + [3]: images/new_github_repo.png + +> **Megjegyzés** A `my-first-blog` név fontos -- választhattál volna más nevet is, de gyakran előfordul majd a későbbiekben is a parancsokban. Valószínűleg egyszerűbb lesz számodra is, ha a `my-first-blog` nevet használod. + +A következő oldalon látni fogod a repód url-jét (repo's clone url). Válaszd a "HTTPS" verziót, másold ki - mindjárt bemásoljuk a terminálba: + +![][4] + + [4]: images/github_get_repo_url_screenshot.png + +Most összekötjük a Git csomagtárat a számítógépeden a másik csomagtárral a GitHubon. + +A konzolba írd be a következőt (helyettesítsd a `` a saját felhasználóneveddel, amivel a GitHubon regisztráltál, de a kacsacsőrök nélkül): + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Add meg a GitHub felhasználónevedet és jelszódat, valami hasonlót kell hogy láss: + + 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. + + + + +A forráskódod most már fent van a GitHubon. Menj és nézd meg! Láthatod hogy jó társasága van - [Django][5], a [Django Girls Tutorial][6], és sok más szuper nyílt forráskódú szoftver forráskódja szintén a GitHubon található :) + + [5]: https://github.com/django/django + [6]: https://github.com/DjangoGirls/tutorial + +# Tegyük fel a blogot a PythonAnywhere-re + +> **Megjegyzés** Valószínűleg már létrehoztál egy PythonAnywhere fiókot korábban a telepítés során - ha így van, ezt nem kell újból megtenned. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Forráskód letöltése a PythonAnywhere-be + +Amikor bejelentkezel a PythonAnywhere-be, egyből a dashboard-on, vagy "Consoles" oldalon találod magad. Válaszd a "Bash" konzol indítása opciót -- ez a PythonAnywhere konzolja, ugyanolyan, mint a parancssor a gépeden. + +> **Megjegyzés** A PythonAnywhere Linux rendszeren alapszik, tehát ha Windows-ot használsz, a konzol egy kissé máshogy fog kinézni a te számítógépeden. + +Töltsük be a forráskódodat a GitHubról a PythonAnywhere-be egy "clone" létrehozásával. Írd be az alábbiakat a konzolba a PythonAnywhere-ben (ne felejtsd, hogy a `` helyébe a saját, GitHubon használt felhasználónevedet helyettesítsd be): + + $ git clone https://github.com//my-first-blog.git + + +Ez majd betölti a forráskódod másolatát a PythonAnywhere-be. Ellenőrizheted, ha beírod a konzolba, hogy `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 + + +### Virtuális környezet létrehozása a PythonAnywhere-en + +Ugyanúgy, ahogy a saját gépeden csináltad, a PythonAnywhere-en is létrehozhatsz virtualenvet. Írd be a Bash konzolba: + +{% filename %}PythonAnywhere parancssor{% endfilename %} +``` +$ cd my-first-blog + +$ virtualenv --python=python3.6 myvenv +Running virtualenv with interpreter /usr/bin/python3.6 +[...] +Installing setuptools, pip...done. + +$ source myvenv/bin/activate + +(myvenv) $ pip install django~=1.11.0 +Collecting django +[...] +Successfully installed django-1.11.3 +``` + + +> **Megjegyzés** A `pip install` lépés eltarthat pár percig. Légy türelmes! De ha több mint 5 percig tart, akkor valószínűleg valami nincs rendben. Kérdezd meg a coachodat! + + + +## Tegyük közzé a blogot a weben! + +Most már fent van a kódod a PythonAnywhere-en, kész a virtuális környezet, össze vannak gyűjtve a statikus fájlok, és az adatbázist is elkészítetted. Készen állsz, hogy webes alkalmazást csinálj belőle! + +Menj vissza a PythonAnywhere dashboardra (a logóra kattintva megteheted), majd kattints a **Web** tabra. Végül nyomd meg a **Add a new web app** gombot. + +Miután leokéztad a domainnevedet, válaszd a **manual configuration**-t (kézi konfiguráció - vigyázz, *ne* a "Django" opciót válaszd!) a párbeszédablakban. Aztán válaszd ki a **Python 3.4**-et, majd nyomd meg a Nextet. + +> **Megjegyzés** Fontos, hogy a "Manual configuration" lehetőséget válaszd, ne a "Django"-t. Túl menők vagyunk a PythonAnywhere-es Django setuphoz:) + +### Adatbázis létrehozása PythonAnywhere-en + +Van még valami, ami máshogy működik a saját gépeden és a szerveren: különböző adatbázist használnak. Így a felhasználói fiókok és a blogposztok különbözőek lehetnek a szerveren és a gépeden. + +A szerveren ugyanúgy tudod létrehozni az adatbázist, mint a saját gépeden, a `migrate` és `createsuperuser` parancsokkal: + + (mvenv) $ python manage.py migrate + Operations to perform: + [...] + Applying sessions.0001_initial... OK + + + (mvenv) $ python manage.py createsuperuser + + +### Virtuális környezet beállítása + +Most a PythonAnywhere config oldalára kerülsz, ahol különböző dolgokat állíthatsz be az appeddel kapcsolatban. Ha bármit meg szeretnél változtatni később, ide kell visszajönnöd. + +![][7] + + [7]: images/pythonanywhere_web_tab_virtualenv.png + +A "Virtualenv" részben kattints rá a piros szövegre: "Enter the path to a virtualenv", majd írd be: `/home//my-first-blog/myvenv/`. Kattints a kék dobozra a pipajellel, hogy elmentsd a path-t, mielőtt továbblépsz. + +> **Megjegyzés** Helyettesítsd be a saját felhasználóneved. Ha elrontasz valamit, a PythonAnywhere figyelmeztetni fog. + +### A WSGI fájl konfigurálása + +A Django a "WSGI protokollt" használja. Ez egy szabvány, ami a Python segítségével kiszolgált weboldalakra érvényes. A PythonAnywhere is támogatja ezt. Ahhoz, hogy a PythonAnywhere felismerje a Django blogunkat, egy WSGI konfigurációs fájlt kell szerkesztenünk. + +Kattints a "WSGI configuration file" linkre (a "Code" szekcióban az oldal tetejénél -- olyasmi neve lesz, hogy `/var/www/_pythonanywhere_com_wsgi.py`). Egy kódszerkesztőbe fogsz jutni. + +Törölj ki mindent, és cseréld ki valami ilyesmire: + +```python +import os +import sys + +path = '/home//my-first-blog' # itt a saját felhasználónevedet használd! +if path not in sys.path: + sys.path.append(path) + +os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' + +from django.core.wsgi import get_wsgi_application +from django.contrib.staticfiles.handlers import StaticFilesHandler +application = StaticFilesHandler(get_wsgi_application()) +``` + +> **Megjegyzés** Ne felejtsd el a saját felhasználóneveddel helyettesíteni a ``-et! +> **Megjegyzés** A negyedik sorban gondoskodunk arról, hogy Python megtalálja a programunkat. Fontos, hogy ez az elérési út helyes legyen, és különösen hogy ne legyenek benne fölösleges szóközök. Különben "ImportError" hibát fogsz találni a logfile-ban. + +Ennek a fájlnak az a dolga, hogy megmondja a PythonAnywhere-nek, hol lakik a webes alkalmazásunk, és mi annak a fájlnak a neve, ahol a Django beállításai vannak. + +A `StaticFilesHandler` a CSS-ünkről gondoskodik. Helyi fejlesztéskor a `runserver` parancs látja el ezt a feladatot. Kicsivel később behatóbban megismerkedünk a statikus file-okkal, amikor a weboldalunk CSS-ét szerkesztjük. + +Nyomd meg a **Save** (Mentés) gombot, majd menj vissza a **Web** fülre. + +Kész is vagyunk! Nyomd meg a nagy zöld **Reload** gombot, és máris meg fogod tudni nézni az alkalmazásodat. Az oldal tetején fogsz találni hozzá egy linket. + +## Tippek debuggoláshoz + +Ha hibát látsz, amikor megpróbálod meglátogatni az oldaladat, az első hely, ahol információt kaphatsz a debuggoláshoz, az **error log**. Ehhez a PythonAnywhere [Web tab][8]-ján találod meg a linket. Nézd meg, hogy van-e benne bármilyen hibaüzenet; a legfrissebbek lesznek alul. Gyakran előforduló problémák: + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +* Kihagytad valamelyik lépést a konzolban: a virtualenv létrehozását, aktiválását, a Django installálását a virtualenvben, a collectstatic lefuttatását, az adatbázis migrálását. + +* Valamit elrontottál a virtualenv path-ban a Web fülön -- általában egy piros hibaüzenet jelzi, ha valami gond van. + +* Valamit elrontottál a WSGI konfigurációs fájlban -- jól írtad be a my-first-blog könyvtárhoz vezető elérési útvonalat? + +* Ugyanazt a Python verziót választottad a virtualenved számára, mint az alkalmazásodhoz? Mindkettőnek a 3.4-esnek kell lennie. + +* A [PythonAnywhere wikiben is találsz néhány általános hibakeresési tippet][9]. + + [9]: https://www.pythonanywhere.com/wiki/DebuggingImportError + +És ne feledd, a coachod azért van, hogy segítsen! + +# Él a weboldalad! + +A honlapod alapértelmezett oldala a "Welcome to Django", ugyanúgy, mint a saját gépeden. Add hozzá az `/admin/`-t az URL végéhez, és az adminfelületre kerülsz. Jelentkezz be a felhasználóneveddel és a jelszavaddal, és látni fogod, hogy itt is tudsz új Postokat létrehozni. + +Ha már létrehoztál pár blogpostot, válts vissza a helyi gépedre (nem PythonAnywhere). Ezután a helyi gépeden érdemes dolgoznod. Ez gyakori munkafolyamat webfejlesztéskor - lokális fejlesztés, a változtatások feltöltése GitHub-ra, majd letöltése az éles webszerverre. Ez lehetővé teszi, hogy kisérletezz a éles webszervered elrontása nélkül. Vagány, mi? + +Megérdemelsz egy *HATALMAS* vállveregetést! A szerver deployment a webfejlesztés legbonyolultabb részei közé tartozik, és a fejlesztők gyakran napokat töltenek azzal, hogy mindent működésre bírjanak. De neked most komolyan van egy működő weboldalad, az Interneten, és nem is tartott sokáig megcsinálni! diff --git a/hu/deploy/images/github_get_repo_url_screenshot.png b/hu/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/hu/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/hu/deploy/images/new_github_repo.png b/hu/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/hu/deploy/images/new_github_repo.png differ diff --git a/hu/deploy/images/pythonanywhere_web_tab_virtualenv.png b/hu/deploy/images/pythonanywhere_web_tab_virtualenv.png new file mode 100644 index 00000000000..6069f6da831 Binary files /dev/null and b/hu/deploy/images/pythonanywhere_web_tab_virtualenv.png differ diff --git a/hu/deploy/install_git.md b/hu/deploy/install_git.md new file mode 100644 index 00000000000..a23bb46401e --- /dev/null +++ b/hu/deploy/install_git.md @@ -0,0 +1,59 @@ +A Git egy "version control system" (VCS, magyarul verziókezelő rendszer), amit sok programozó használ. Ez a szoftver nyomon követ minden változást a fájlokban, így a későbbiekben is visszatérhetünk egy bizonyos régebbi verzióhoz. Valamelyest hasonlít a "változások nyomon követése" funkcióhoz a Microsoft Wordben, de ez jóval hatékonyabb. + +## Git telepítése + + + +A Gitet innen töltheted le: [git-scm.com](https://git-scm.com/). Telepítése: csak kattints a "next" gombra egészen addig, amíg el nem érsz az ötödik lépésig - "Adjusting your PATH environment" címmel - itt válaszd ki a "Run Git and associated Unix tools from the Windows command-line" lehetőséget (keresd alul). Ezen kívül a többi maradhat az alapbeállításon. Checkout Windows-style, commit Unix-style line endings - ezek is maradhatnak így. + + + + + +Töltsd le a Git-tet az alábbi linken: [git-scm.com](https://git-scm.com/), majd kövesd az utasításokat. + +> **Megjegyzés** Ha OS X 10.6, 10.7, vagy 10.8-et használsz, Az ezen a linken elérhető verziót kell telepítened: [Git teleptő OS X Snow Leopard-ra](https://sourceforge.net/projects/git-osx-installer/files/git-2.3.5-intel-universal-snow-leopard.dmg/download) + + + + + +{% filename %}parancssor{% endfilename %} +```bash +$ sudo apt install git +``` + + + + + +{% filename %}parancssor{% endfilename %} +```bash +$ sudo yum install git +``` + + + + + +{% filename %}parancssor{% endfilename %} +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}parancssor{% endfilename %} +```bash +$ sudo zypper install git +``` + + diff --git a/hu/deploy/signup_pythonanywhere.md b/hu/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..283a3a92986 --- /dev/null +++ b/hu/deploy/signup_pythonanywhere.md @@ -0,0 +1,5 @@ +Most itt az ideje, hogy létrehozz magadnak egy ingyenes, "Kezdő" ("Beginner") fiókot a PythonAnywhere oldalon. + + * [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +> **Megjegyzés:** A blogod címe, vagyis URL-je `felhasználónév.pythonanywhere.com` lesz, vagyis érdemes a regisztrációkor felhasználónévnek vagy a saját becenevedet választani, vagy a blogod témájához kapcsolódó nevet. \ No newline at end of file diff --git a/hu/django/README.md b/hu/django/README.md new file mode 100644 index 00000000000..4daf57a971a --- /dev/null +++ b/hu/django/README.md @@ -0,0 +1,27 @@ +# Mi a Django? + +A Django egy webes alkalmazások készítésére használható, Pythonban írt, ingyenes, nyílt forráskódú keretrendszer (framework). A webes keretrendszerek különböző építőelemek gyűjteményei, segítségükkel könnyebben és gyorsabban tudunk weboldalakat fejleszteni. + +Amikor weboldalt készítesz, mindig hasonló elemekre lesz szükséged: meg kell oldanod a felhasználók azonosítását (regisztráció, be- és kijelentkezés), kell egy felület a honlap kezeléséhez, formok (kérdőívek), kell valami megoldás a fájlok feltöltésére, stb. + +Szerencsére mások már régen észrevették, hogy a webfejlesztők mindig hasonló problémákkal szembesülnek egy új oldal készítésekor, ezért közösen kifejlesztettek különböző keretrendszereket (ezek egyike a Django). Ezek a frameworkok használatra kész komponenseket tartalmaznak. + +A keretrendszerek megakadályozzák, hogy újra és újra fel kelljen találnod a spanyolviaszt, és sok időt megspórolnak a weboldalkészítésben. + +## Miért van szükséged keretrendszerre? + +Hogy megértsd, pontosan mire jó a Django, fontos, hogy jobban megismerd a szervereket. Az első dolog, amit egy szervernek tudnia kell az az, hogyha szeretnéd, hogy kiszolgáljon neked egy weboldalt. + +Képzelj el egy postaládát (port), amit folyamatosan figyelnek, hogy vannak-e beérkezett levelek (requestek). Ezt csinálja egy webszerver. A webszerver elolvassa a levelet, és választ (response) küld, amiben egy weboldal van. Azonban amikor küldeni szeretnél valamit, szükséged van tartalomra. A Django ennek a tartalomnak a megalkotásában segít. + +## Mi történik, amikor valaki lekérdez egy honlapot a szerveredtől? + +Amikor beérkezik egy kérés (request) a szerverre, a Django kapja meg, ami megpróbálja kitalálni, hogy pontosan mire irányul a kérés. Először a weboldal címét nézi meg, és megpróbál rájönni, hogy mit kell tenni. Ezt a részt a Django **urlresolver** része végzi (emlékezz vissza, hogy a weboldalak címét URL-nek - Uniform Resource Locatornak - hívják, vagyis az *urlresolver* névnek - kb. url-fordító - van értelme). Ez a dolog nem túl okos - csak fog egy csomó mintát (pattern), és megpróbálja hozzájuk illeszteni az URL-t. A Django felülről lefelé vizsgálja meg a mintákat, és ha az URL valamelyikkel megegyezik, továbbadja a requestet a megfelelő function-nek (függvénynek), amit *view*-nak hívunk). + +Képzelj el egy postást egy levéllel. Ahogy halad az utcán, minden házszámot megnéz, és összehasonlítja a levélen lévővel. Ha megegyezik, bedobja a levelet a postaládába. Így működik az urlresolver! + +A *view*, vagyis "nézet" rész az, ahol az érdekes dolgok történnek: itt nézhetünk bele adatbázisokba, hogy megkeressünk valamilyen információt. Talán a felhasználó meg szeretne változtatni valamilyen adatot? Mint egy levél, ami azt írja: "Kérlek, változtasd meg a munkám leírását." A *view* megnézi, hogy jogosult vagy-e erre a módosításra, aztán megváltoztatja a munka leírását, és visszaküld egy üzenetet: "Kész!". Aztán a *view* létrehoz egy választ, amit a Django elküld a felhasználó böngészőjének. + +Természetesen ez a leírást egy kicsit leegyszerűsítettünk, de még nem kell, hogy minden technikai részletet tudj. Elég, ha van egy általános elképzelésed. + +Most ahelyett, hogy túlságosan belemennénk a részletekbe, egyszerűen csak elkezdünk létrehozni valamit a Djangóval, és menet közben fogjuk megtanulni a fontos részeket! \ No newline at end of file diff --git a/hu/django_admin/README.md b/hu/django_admin/README.md new file mode 100644 index 00000000000..fb295d3f4f9 --- /dev/null +++ b/hu/django_admin/README.md @@ -0,0 +1,52 @@ +# Django admin + +Az előbb elkészítettük a bejegyzések modelljeit. Ahhoz, hogy létrehozhassuk, szerkeszthessük és törölhessük őket, a Django admint fogjuk használni. + +Nyisd meg a `blog/admin.py` fájlt, és cseréld ki a benne lévő kódot erre: + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Amint láthatod, importáljuk az előző fejezet végén definiált Post modellt, vagyis elérhetővé tesszük ebben a fájlban is. Hogy a modell látszódjon az admin oldalon, regisztrálnunk kell a `admin.site.register(Post)` sorral. + +Most nézzük meg, hogy néz ki a Post modell. Ne felejtsd el futtatni a `python manage.py runserver` parancsot a konzolban, hogy elindítsd a webszervert. Írd be a böngészőben a http://127.0.0.1:8000/admin/ címet. Egy ilyen login oldalt fogsz látni: + +![Login page][1] + + [1]: images/login_page2.png + +A bejelentkezéshez létre kell hoznod egy *superuser*-t - egy olyan felhasználót, akinek mindenhez van hozzáférése az oldalon. Menj vissza a parancssorba, és írd be a `python manage.py createsuperuser` parancsot, majd nyomj entert. + +> Ne felejtsd, hogy ahhoz hogy új parancsokat tudj lefuttatni, miközben a webszerver fut, új terminál ablakot kell nyitnod és abban aktiválnod a virtualenvet. Erről Az első Django projekted! fejezetben, a Webszerver elindítása szakaszban volt szó. + +A következő lépésekben meg kell adnod egy felhasználónevet (ne használj nagybetűket és szóközt), emailcímet és jelszót. Ne ijedj meg, ha nem látod a jelszót, amikor begépeled - ennek így kell lennie. Csak írd be, és nyomj `enter`t a folytatáshoz. Az outputnak így kell kinéznie (természetesen a felhasználónév és az email az lesz, amit te adtál meg): + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + Username: admin + Email address: admin@admin.com + Password: + Password (again): + Superuser created successfully. + + +Térj vissza a böngészőbe. Jelentkezz be a superuser adataival, amit az előbb adtál meg; ha minden jól megy, a Django admin dashboardra jutsz. + +![Django admin][2] + + [2]: images/django_admin3.png + +Nyisd meg a Posts részt, és kísérletezz vele egy kicsit. Hozz létre 5-6 blogposztot. Ne törődj a tartalommal - nyugodtan másolj be valami szöveget ebből a tutorialból, hogy időt spórolj :). + +Állíts be legalább két-három posztnak (de ne mindegyiknek!) egy publish date-et (megjelenési dátumot). Később jól fog jönni. + +![Django admin][3] + + [3]: images/edit_post3.png + +Ha szeretnél többet megtudni a Django adminról, a Django dokumentációban tudsz olvasni róla: https://docs.djangoproject.com/en/1.11/ref/contrib/admin/ + +Itt az ideje, hogy kávézz vagy teázz egyet, vagy egyél valamit, hogy új erőre kapj. Elkészítetted az első Django modelledet - megérdemelsz egy kis lazítást! \ No newline at end of file diff --git a/hu/django_admin/images/django_admin3.png b/hu/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/hu/django_admin/images/django_admin3.png differ diff --git a/hu/django_admin/images/edit_post3.png b/hu/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/hu/django_admin/images/edit_post3.png differ diff --git a/hu/django_admin/images/login_page2.png b/hu/django_admin/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/hu/django_admin/images/login_page2.png differ diff --git a/hu/django_forms/README.md b/hu/django_forms/README.md new file mode 100644 index 00000000000..865cbbb1e2d --- /dev/null +++ b/hu/django_forms/README.md @@ -0,0 +1,396 @@ +# Django űrlapok + +Utolsó lépésként azt fogjuk megcsinálni, hogy a blogposztokat ne csak az admin oldalon hozhassuk létre és szerkeszthessük. A Django `admin` menő, de elég nehéz személyre szabni, és nem is túl szép. A `form`ok (űrlapok) segítségével viszont majdnem mindent meg tudunk csinálni a felületünkön, amit csak szeretnénk! + +A Django formokban az a jó, hogy ha akarjuk, teljesen az alapoktól is megírhatjuk őket, de `ModelForm`-ot is létrehozhatunk, ami az űrlap eredményét a modellbe menti el. + +Pontosan ezt szeretnénk: egy űrlapot a `Post` modellünkhöz. + +Mint minden fontos résznek a Django-ban, a formoknak is megvan a maguk helye: a `forms.py` fájl. + +Hozz létre egy új fájlt ezzel a névvel a `blog` könyvtárban. + + blog + └── forms.py + + +Rendben, most nyisd meg, és írd bele a következő kódot: + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Először importálnunk kell a Django formjait (`from django import forms`), és persze a `Post` modellünket is (`from .models import Post`). + +Valószínűleg már sejted, hogy a `PostForm` az űrlapunk neve lesz. Meg kell mondanunk a Django-nak, hogy ez a form egy `ModelForm` (hogy egy kis Django varázslat kerüljön bele) - ezért a `forms.ModelForm` felelős. + +Aztán a `class Meta` következik, itt mondjuk meg a Django-nak, hogy melyik modellt kell használnia az űrlap elkészítéséhez (`model = Post`). + +Legvégül megadhatjuk, hogy melyik mezők kerüljenek bele az űrlapba. Mi csak a `title` (cím) és a `text` (szöveg) mezőket szeretnénk megjeleníteni - az `author` (szerző) az a felhasználó lesz, aki éppen be van jelentkezve (te magad!), és a `created_date`-et (létrehozás dátumát) automatikusan állítja be a Django, amikor elmented a posztot, emlékszel? + +Ennyi az egész! Most már csak az van hátra, hogy használjuk az űrlapot egy *view*-ban, és megjelenítsük egy template-ben. + +Tehát még egyszer: egy link az oldalhoz, egy URL, egy view és egy template. + +## Link az oldalhoz, ahol az űrlap van + +Itt az ideje, hogy megnyisd a `blog/templates/blog/base.html` fájlt. Itt hozzáadunk egy linket a `page-header` nevű `div`hez: + +```html + +``` + +Figyelem: az új nézetünket `post_new`-nak fogjuk hívni. A `"glyphicon glyphicon-plus"` class a bootstrap theme biztosítja, és egy pluszjelet fog megjeleníteni. + +Miután hozzáadtad ezt a sort, így fog kinézni a html fájlod: + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Ha elmented, és frissíted a http://127.0.0.1:8000 oldalt, az ismerős `NoReverseMatch` hibát kell látnod, igaz? + +## URL + +Nyisd meg a `blog/urls.py` fájlt, és add hozzá ezt a sort: + +```python + url(r'^post/new/$', views.post_new, name='post_new'), +``` + +Így fog kinézni a teljes kód: + +```python +from django.conf.urls import url +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'), +] +``` + +Ha frissíted az oldalt, egy `AttributeError`t fogsz látni, hiszen még nincs implementálva a `post_new` nevű view. Készítsük el most rögtön. + +## post_new nézet + +Nyisd meg a `blog/views.py` fájlt, és add hozzá a következő sorokat: + +```python +from .forms import PostForm +``` + +és a *view*t: + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Ahhoz, hogy egy új `Post` űrlapot kapjunk, meg kell hívnunk a `PostForm()`-ot, és továbbadni a template-nek. Még visszatérünk erre a *view*-ra, de előbb gyorsan készítsük egy sablont a formnak. + +## Template + +Létre kell hoznunk egy `post_edit.html` nevű fájlt a `blog/templates/blog` könyvtárban. Ahhoz, hogy működjön az űrlapunk, szükségünk van pár dologra: + +* meg kell jelenítenünk az űrlapot. Ezt egyszerűen megtehetjük a `{% raw %}{{ form.as_p }}{% endraw %}` kóddal. +* az előző sort be kell csomagolnunk egy HTML form tagbe: `...` +* szükségünk van egy `Save` (Mentés) gombra. Ezt egy HTML gombbal tudjuk létrehozni: `` +* és végül, a nyitó `
` tag után hozzá kell adnunk ezt: `{% raw %}{% csrf_token %}{% endraw %}`. Ez nagyon fontos, mert ettől lesznek biztonságosak az űrlapjaid! A Django panaszkodni fog, ha úgy próbálod elmenteni a formot, hogy kifelejtetted ezt a részt: + +![CSFR tiltott oldal][1] + + [1]: images/csrf2.png + +Rendben, nézzük, hogy néz ki a HTML kód a `post_edit.html`-ben: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +Itt az ideje, hogy frissítsd az oldalt! Juhú! Ott van az űrlapod! + +![Új űrlap][2] + + [2]: images/new_form2.png + +De várjunk csak egy percet! Ha begépelsz valamit a `title` és a `text` mezőbe, és megpróbálod elmenteni - mi történik? + +Semmi! Megint ugyanazon az oldalon vagyunk, és a szöveg eltűnt... és nem jött létre új bejegyzés. Mi romlott el? + +A válasz: semmi. Csak még egy kicsit dolgoznunk kell a *view*-n. + +## Űrlap mentése + +Nyisd meg újra a `blog/views.py` fájlt. Most mindössze ennyi van a `post_new` nézetben: + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Amikor beküldünk egy űrlapot, ugyanabba a nézetbe kerülünk vissza, de ilyenkor a `request`ben több adat van, mint korábban, egész pontosan a `request.POST`-ban (ennek az elnevezésnek nincs köze a blogban lévő "poszt"-hoz, ez annyit jelent, hogy éppen adatokat "posztolunk", vagyis küldünk). Emlékszel, hogy a HTML fájlban a `
` definíciójában szerepelt a `method="POST"` változó? Most az űrlap minden mezője bekerült a `request.POST`-ba. Semmiképp se nevezd át a `POST` (a `method` másik érvényes értéke a `GET` lenne, de most nincs idő elmagyarázni a különbséget). + +Tehát a *view*-ban két különböző esetet kell kezelnünk. Az első: amikor először kerülünk az oldalra, és egy üres űrlapot szeretnénk látni. A második: amikor visszajutunk a *view*-ba, azokkal az adatokkal, amiket épp az előbb gépeltünk be a formba. Ehhez egy feltételt kell hozzáadnunk (az `if`-et fogjuk használni). + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Itt az ideje, hogy kitöltsük a `[...]` részeket. Ha a `method` `POST`, akkor egy `PostForm`-ot szeretnénk létrehozni az űrlapban beküldött adatokból, igaz? Ezt így tehetjük meg: + +```python +form = PostForm(request.POST) +``` + +Nem nehéz! A következő, hogy ellenőrizzük, helyes-e az űrlap (minden kötelező mező ki lett-e töltve, és nem készülünk-e helytelen adatokat elmenteni). Ezt csinálja a `form.is_valid()`. + +Megnézzük, hogy érvényes-e a form, és ha igen, elmenthetjük! + +```python +if form.is_valid(): + post = form.save(commit=False) + post.author = request.user + post.published_date = timezone.now() + post.save() +``` + +Itt lényegében két dolog történik: elmentjük az űrlapot a `form.save` paranccsal, és hozzáadunk egy szerzőt (mivel nem volt `author` mező a `PostForm`-ban, viszont ez a mező kötelező!). A `commit=False` azt jelenti, hogy még nem mentjük el a `Post` modellt - előbb még hozzá akarunk adni egy szerzőt. Az idő nagy részében a `commit=False` nélkül fogod használni a `form.save()`-et, de most szükségünk van erre a részre. A `post.save()` megőrzi a változtatásokat (szerző hozzáadása), és létrehoz egy új blogposztot! + +Végül tök jó lenne, ha egyből a frissen elkészült bejegyzés `post_detail` oldalára jutnánk nem? Ehhez egy újabb importra van szükségünk: + +```python +from django.shortcuts import redirect +``` + +Ezt írd a fájlod elejére. És most megmondhatjuk a Django-nak: menj az új blogposzt `post_detail` oldalára. + +```python +return redirect('post_detail', pk=post.pk) +``` + +A `post_detail` a nézet neve, ahova most menni akarunk. Emlékszel, hogy ez a *view* egy `pk` változót kér? Ahhoz, hogy ezt megkapja, a `pk=post.pk` részt használjuk, ahol a `post` az új blogposztunkat jelenti! + +Rendben, elég sokat beszéltünk, de most már látni szeretnéd, hogy néz ki a teljes *view*, igaz? + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Nézzük meg, hogy működik-e. Menj a http://127.0.0.1:8000/post/new/ oldalra, adj hozzá egy `title`-t és egy `text`-et, mentsd el... és voilà! Az új poszt bekerült az adatbázisba, és át lettél irányítva a `post_detail` oldalra! + +Talán észrevetted, hogy a poszt elmentése előtt beállítjuk a közzététel dátumát. Később, a **Django Girls Tutorial: Extensions** részben egy *publish* gombot is készítünk. + +Ez nagyszerű! + +> Mivel nemrég használtuk a Django admin felületét, a rendszer most azt hiszi, hogy be vagyunk jelentkezve. Néhány esetben előfordul, hogy a rendszer kijelentkeztet minket (pl. ha bezárod a böngészőt vagy újraindítod az adatbázist). Ha azt veszed észre, hogy a hibaüzenetek arra utalnak, hogy nincs bejelentkezett felhasználó, menj az admin oldalra -http://127.0.0.1:8000/admin - és jelentkezz be újra. Ez ideiglenesen megoldja a problémát. Van egy hosszútávú megoldás is a **Házi feladat: tedd biztonságosabbá a weboldalad!** fejezetben a tutorial fő része után. + +![Bejelentkezési hiba][4] + + [4]: images/post_create_error.png + +## Form validáció + +Most megmutatjuk, mennyire menők a Django űrlapok. Egy blogposztnak kell, hogy legyen `title` és `text` mezője. A `Post` modellben nem jelentettük ki külön, hogy ezek a mezők nem kötelezőek (ellentétben a `published_date` mezővel), ezért a Django elvárja, hogy ki legyenek töltve. + +Próbáld meg elmenteni az űrlapot `title` vagy `text` nélkül. Találd ki, mi fog történni! + +![Form validáció][3] + + [3]: images/form_validation2.png + +A Django gondoskodik az összes mező ellenőrzéséről. Hát nem fantasztikus? + +## Űrlapok szerkesztése + +Most már tudod, hogyan tudsz új formot hozzáadni. De mi van, ha egy létező űrlapot szeretnél módosítani? Az eddigiekhez nagyon hasonlóan fog működni. Gyorsan készítsük néhány fontos dolgot (ha nem értesz valamit, kérdezd meg a coachodat, vagy nézz bele az előző fejezetekbe, hiszen ezeket a lépéseket már mind megcsináltad egyszer). + +Nyisd meg a `blog/templates/blog/post_detail.html` fájlt, és add hozzá ezt a sort: + +```python + +``` + +Így fog kinézni a template: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} + +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +A `blog/urls.py`-ban pedig erre a sorra lesz szükségünk: + +```python + url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'), +``` + +Itt újrahasznosíthatjuk a `blog/templates/blog/post_edit.html` sablont, szóval már csak egy *view* van hátra. + +Nyisd meg a `blog/views.py`-t, és add hozzá ezt a fájl végén: + +```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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Majdnem pont úgy néz ki, mint a `post_new` view, nem igaz? De nem teljesen. Először is átadunk egy extra `pk` paramétert az url-ekből. Aztán a `Post` modellt a `get_object_or_404(Post, pk=pk)` sorral kapjuk meg, és végül, amikor létrehozzuk a formot, ezt a posztot adjunk át `instance`-ként, amikor elmentjük: + +```python +form = PostForm(request.POST, instance=post) +``` + +és akkor is, amikor megnyitjuk az űrlapot, hogy szerkeszthessük a posztot: + +```python +form = PostForm(instance=post) +``` + +Oké, most teszteljük le, hogy működik-e! Menj a `post_detail` oldalra. Kell lennie egy szerkesztés gombnak a jobb felső sarokban: + +![Szerkesztés gomb][5] + + [5]: images/edit_button2.png + +Ha rákattintasz, megkapod az űrlapot a blogposzttal: + +![Űrlapok szerkesztése][6] + + [6]: images/edit_form2.png + +Változtasd meg a címet vagy a szöveget, és mentsd el! + +Gratulálunk! Az alkalmazásod egyre és egyre jobb! + +Ha szeretnél többet tudni a Django formokról, olvass róluk a dokumentációban: https://docs.djangoproject.com/en/1.11/topics/forms/ + +## Biztonság + +Nagyon jó, hogy az új blogposztok írásához csak egy linkre kell kattintani! Viszont most bárki létre tud hozni egy új bejegyzést, aki meglátogatja az oldaladat, és valószínűleg ezt nem szeretnéd. Csináljuk meg, hogy a gombot csak te lásd, és mások ne. + +A `blog/templates/blog/base.html`-ben keresd meg a `page-header` `div`et, és az anchor taget, amit korábban írtál bele. Így néz ki: + +```html + +``` + +Írunk még egy `{% if %}` taget, ami arra lesz jó, hogy csak azoknak az usereknek mutassa a linket, akik be vannak jelentkezve az adminba. Most ez csak te vagy! Változtasd meg a `` taget, hogy így nézzen ki: + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Az `{% if %}` miatt a link csak akkor küldődik át a böngészőbe, ha a felhasználó, aki lekérte az oldalt, be van jelentkezve. Ez nem akadályozza meg teljesen az új posztok létrehozását, de kezdésnek jó. A kiegészítő leckékben többet is tanulhatsz a biztonságról. + +Mivel valószínűleg be vagy jelentkezve, semmi változást nem fogsz látni, ha frissítesz. Viszont ha megnyitod az oldalt egy másik böngészőben, vagy egy inkognitóablakban, látni fogod, hogy a link nincs ott! + +## Még egy dolog: itt az ideje egy újabb deploynak! + +Nézzük meg, hogy működik-e ez az egész a PythonAnywhere-en. Itt az ideje egy újabb deploynak! + +* Először is commitold az új kódodat, és pushold GitHubra +``` +$ git status +$ git add --all . +$ git status +$ git commit -m "Added views to create/edit blog post inside the site." +$ git push +``` + +* Aztán írd be ezt a [PythonAnywhere Bash konzol][7]ba: + + [7]: https://www.pythonanywhere.com/consoles/ + + $ cd my-first-blog + $ source myvenv/bin/activate + (myvenv)$ git pull + [...] + (myvenv)$ python manage.py collectstatic + [...] + + +* Végül menj a [Web tab][8]-ra, és nyomj **Reload**ot. + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +Ennyi az egész. Gratulálunk :) diff --git a/hu/django_forms/images/csrf2.png b/hu/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/hu/django_forms/images/csrf2.png differ diff --git a/hu/django_forms/images/drafts.png b/hu/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/hu/django_forms/images/drafts.png differ diff --git a/hu/django_forms/images/edit_button2.png b/hu/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/hu/django_forms/images/edit_button2.png differ diff --git a/hu/django_forms/images/edit_form2.png b/hu/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/hu/django_forms/images/edit_form2.png differ diff --git a/hu/django_forms/images/form_validation2.png b/hu/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/hu/django_forms/images/form_validation2.png differ diff --git a/hu/django_forms/images/new_form2.png b/hu/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/hu/django_forms/images/new_form2.png differ diff --git a/hu/django_forms/images/post_create_error.png b/hu/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/hu/django_forms/images/post_create_error.png differ diff --git a/hu/django_installation/README.md b/hu/django_installation/README.md new file mode 100644 index 00000000000..e1f8f731196 --- /dev/null +++ b/hu/django_installation/README.md @@ -0,0 +1,5 @@ +# Django telepítés + +> **Megjegyzés** Ha elvégezted a legelső, Installáció című fejezetet, már túlvagy ezen - ugorj a következő fejezetre! + +{% include "/django_installation/instructions.md" %} diff --git a/hu/django_installation/instructions.md b/hu/django_installation/instructions.md new file mode 100644 index 00000000000..e0f6b13de91 --- /dev/null +++ b/hu/django_installation/instructions.md @@ -0,0 +1,192 @@ +> Ennek a fejezetnek egy része a Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) tutorialjain alapul. +> +> A fejezet részben a [django-marcador tutorial](http://django-marcador.keimlink.de/)-on alapszik, ami a Creative Commons Attribution-ShareAlike 4.0 International License jogvédelem alatt áll. A django-marcador tutorial jogvédelem alatt áll, Markus Zapke-Gründemann et al által. + +## Virtuális környezet + +Mielőtt feltelepítjük a Django-t, egy rettentő hasznos eszközt fogunk installálni, ami segít, hogy a kódolói környezetedet rendben tartsa a számítógépeden. Át lehet ugrani ezt a lépést, de nem ajánlott. Ha a lehető legjobb kiindulási helyzetből kezded a kódolást, sok bosszúságot megspórolhatsz magadnak a jövőben! + +Tehát először is hozzunk létre egy **virtuális környezetet** (virtual environment), amit *virtualenv*-nek is hívunk. A virtualenv projektenként különíti el a Python/Django környezetet. Ez azt jelenti, hogy ha megváltoztatsz valamit egy weboldalon, az nem lesz hatással a többi weboldalra, amit párhuzamosan fejlesztesz. Jó, igaz? + +Csak annyit kell tenned, hogy kiválasztasz egy könyvtárat, ahova a `virtualenv`et szeretnéd telepíteni, például a home könyvtárat. Windowson ez így nézhet ki: `C:\Users\Name` (ahol a `Name` a felhasználód neve). + +> __Megjegyzés__ Windows-on gondoskodj arról, hogy ez a könyvtár nem tartalmaz ékezetes vagy speciális karaktereket; ha a van ékezetes karakter a felhasználónevedben, használj egy másik könyvtárt, például `C:\djangogirls`. + +Ehhez a tutorialhoz egy új, `djangogirls` nevű mappát fogunk használni a home könyvtáradon belül: + + mkdir djangogirls + cd djangogirls + + +Most pedig létrehozunk egy `myvenv` nevű virtuális környezetet. A kód általánosan így néz ki: + + python3 -m venv myvenv + + + + +Ahhoz, hogy létrehozz egy új `virtualenv`-et, meg kell nyitni a konzolt (pár fejezettel ezelőtt tanultál róla - emlékszel?) és a ezt a parancsot kell lefuttatnod: `C:\Python35\python -m venv myvenv`. Ez fog történni: + + C:\Users\Name\djangogirls> C:\Python35\python -m venv myvenv + + +itt a `C:\Python35\python` azt a könyvtárat jelenti, ahova korábban a Pythont telepítetted, és a `myvenv` a `virtualenv`-ed neve. Bármi más nevet is használhatsz, de maradj a kisbetűs szavaknál, és ne használj szóközt, ékezeteket, vagy más speciális karaktereket. Jó ötlet rövid nevet adni - sokszor be kell majd gépelned! + + + + + +A `virtualenv` létrehozása Linux és macOS környezetben is csak annyiból áll, hogy a `python3 -m venv myvenv` parancsot futtatod. Így fog kinézni: + + ~/djangogirls$ python3 -m venv myvenv + + +A `myvenv` a`virtualenv`-ed neve. Más nevet is használhatsz, de maradj a kisbetűs szavaknál, és ne használj szóközt, ékezeteket, vagy más speciális karaktereket. Jó ötlet rövid nevet adni - sokszor be kell majd gépelned! + +> **MEGJEGYZÉS:** Debian/Ubuntu némelyik verziójánál az alábbi hibaüzenetet kaphatod: + +>{% filename %}parancssor{% 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. +>``` +> +> Ebben az esetben a fenti leírást követve telepítsd a `python3-venv` csomagot: +>{% filename %}parancssor{% endfilename %} +>``` +>$ sudo apt install python3-venv +>``` + +> **MEGJEGYZÉS:** A virtuális környezetet létrehozó parancs Ubuntu 14.04 alatt ezt a hibát adja: +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Hogy ezt elkerüld, használd a `virtualenv` parancsot. +> +> ~/djangogirls$ sudo apt install python-virtualenv +> ~/djangogirls$ virtualenv --python=python3.6 myvenv +> + +> **MEGJEGYZÉS:** Ha az alábbi hibaüzenetet kapod: + +>{% filename %}parancssor{% endfilename %} +>``` +>E: Unable to locate package python3-venv +>``` + +> Akkor az alábbit futtasd: +> +>{% filename %}parancssor{% endfilename %} +>``` +>sudo apt install python3.6-venv +>``` + + + +## Hogyan dolgozhatsz virtuális környezetben + +A fenti parancs létrehozott egy `myvenv` nevű (vagy bármi más név, amit választottál) könyvtárat, ami a virtuális környezetünket tartalmazza (ez tulajdonképpen csak egy csomó könyvtár és fájl). + + + +Így indíthatod el a virtuális környezetet: + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + +> __MEGJEGYZÉS:__ Windows 10-en lehet hogy egy hibaüzenetet kapsz Windows PowerShell-ben, amely szerint `execution of scripts is disabled on this system` (scriptek futtatása le van tiltva ezen a rendszeren). Ebben az esetben nyiss egy másik Windows PowerShell-t a "Run as Administrator" (adminisztrátorként futtatás) opcióval. Majd próbáld meg az alábbi parancsot beírni mielőtt elindítod a virtuális környezetedet: +> +>{% filename %}parancssor{% 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 +>``` + + + + + +Így indíthatod el a virtuális környezetet: + + ~/djangogirls$ source myvenv/bin/activate + + +Fontos, hogy `myvenv` helyett azt a neved írd be, amit a `virtualenv`-ednek választottál! + +> **MEGJEGYZÉS:** néha a `source` nem elérhető. Ebben az esetben próbáld meg ezt: +> +> ~/djangogirls$ . myvenv/bin/activate +> + +Onnan tudod, hogy a `virtualenv` elindult, hogy a konzolodban a prompt így néz ki: + + (myvenv) C:\Users\Name\djangogirls> + + +vagy: + + (myvenv) ~/djangogirls$ + + + +Figyeld meg, hogy megjelent a `(myvenv)` előtag! + +Ha virtuális környezetben dolgozol, a `python` parancs mindig a megfelelő Python verzióra fog mutatni, tehát nyugodtan használhatod a `python`-t `python3` helyett. + +Oké, most már minden feltétel teljesült. Végre installálhatjuk a Django-t! + +## A Django telepítése + +Most, hogy elindítottad a `virtualenv`-et, telepiteni tudod a Django-t. + +Mielőtt ezt megtennénk, meg kell győződnünk arról, hogy a `pip` legfrissebb verzióját használjuk, amelynek segítségével fogjuk tudni telepíteni a Django-t: + +{% filename %}parancssor{% endfilename %} +``` +(myvenv) ~$ python3 -m pip install --upgrade pip +``` + +Ezután futtasd ezt a parancsot a konzolban: `pip install django~=1.11` (figyelj oda, hogy egy tilde karaktert használunk, amelyet egy egyenlőségjel követ: `~=`). + +{% filename %}parancssor{% endfilename %} +``` +(myvenv) ~$ pip install django~=1.11.0 +Collecting django~=1.11.0 + Downloading Django-1.11.3-py2.py3-none-any.whl (6.8MB) +Installing collected packages: django +Successfully installed django-1.11.3 +``` + + + +> Ha hibát kapsz, amikor a pip-et hívod Windowson, nézd meg, hogy tartalmaz-e a projekted elérési útvonala szóközt, ékezetet, vagy speciális karaktereket (pl. `C:\Users\User Name\djangogirls`). Ha igen, használj helyette egy olyan könyvtárat, ahol nincsenek szóközök, ékezetek vagy speciális karakterek (javaslat: `C:\djangogirls`). Hozd létre az új könyvtárat, és abban egy új virtualenvet, majd töröld ki a régit és az új helyen próbáld futtatni az előző parancsot. (A virtualenv könyvtár áthelyezése nem fog működni, mert a virtualenv abszolút elérési utakat használ.) + + + + + +> A parancssorod "megfagyhat" miután telepíteni próbálod a Django-t. Ha ez történik, az előző parancs helyett próbáld meg ezt: +> +>{% filename %}parancssor{% endfilename %} +>``` +>C:\Users\Name\djangogirls> python -m pip install django~=1.11.0 +>``` + + + + + +> Ha Ubuntu 12.04 alatt hibát kapsz, amikor a pip-et próbálod hívni, futtasd a `python -m pip install -U --force-reinstall pip` parancsot, hogy megjavítsd a virtualenv-ben a pip feltelepített verzióját. + + + +Ennyi! Most pedig (végre) létrehozhatod a Django alkalmazásodat! diff --git a/hu/django_models/README.md b/hu/django_models/README.md new file mode 100644 index 00000000000..b9781b90814 --- /dev/null +++ b/hu/django_models/README.md @@ -0,0 +1,176 @@ +# Django modellek + +Most valami olyasmire van szükségünk, ami eltárolja az összes blogbejegyzést. De ahhoz, hogy létre tudjunk hozni ilyesmit, előbb egy kicsit beszélnünk kell az `objektumokról`. + +## Objektumok + +Létezik egy `objektumorientált programozás` nevű fogalom a programozáson belül. Ennek az az alapötlete, hogy ahelyett, hogy mindent utasítások unalmas sorozataként írnánk le, modellezhetjük is a dolgokat, és definiálhatjuk, hogyan lépnek kapcsolatba egymással. + +Tehát mi az az objektum? Tulajdonságok és tevékenységek gyűjteménye. Furán hangozhat, de mindjárt mutatunk egy példát. + +Ha egy macskát szeretnék modellezni, létrehozunk egy `Cat` (macska) objektumot, aminek van néhány tulajdonsága: `color` (szín), `age` (életkor), `mood` (kedv -például jó, rossz, álmos ;)), és `owner` (tulajdonos - aki egy `Person` (személy) objektum, és talán, ha kóbor macskáról van szó, ez a tulajdonság üres). + +Aztán a `Cat`-hez tartozik néhány tevékenység: `purr` (dorombolás), `scratch` (karmolás), vagy `feed` (evés - ahol a macskának adunk egy kis macskaeledelt, vagyis `CatFood`-ot, ami egy külön objektum, saját tulajdonságokkal, mint például `taste` (íz)). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + +Tehát az egésznek az az alapötlete, hogy a valós dolgokat kódban tulajdonságokkal (vagyis `object property`-kkel) és tevékenységekkel (vagyis `method`-okkal) írjuk le. + +Hogyan modellezzük a blogposztokat? Egy blogot szeretnénk fejleszteni, ugye? + +Erre a kérdésre keressük a választ: Mi egy blogposzt? Milyen tulajdonságai vannak? + +Nos, a bejegyzésünknek biztos van szövege, és címe, igaz? Azt is jó lenne tudni, hogy ki írta - vagyis szükségünk van egy szerzőre is. Végül tudni szeretnénk, mikor lett megírva és közzétéve a poszt. + + Post + -------- + title + text + author + created_date + published_date + + +Milyen dolgokat lehet csinálni egy blogbejegyzéssel? Jó lenne, ha lenne valamiféle `method`, ami közzéteszi a posztot, nem? + +Tehát szükségünk van egy `publish` methodra. + +Most, hogy tudjuk, mit szeretnénk elérni, kezdjük el modellezni Django-ban! + +## Django modell + +Most, hogy tudjuk, mik az objektumok, már el tudjuk készíteni a blogposzt Django modelljét. + +A Django-ban a modellek speciális objektumok - az `adatbázisban` vannak elmentve. Az adatbázis tulajdonképpen adatok gyűjteménye. Ez az a hely, ahol adatokat tárolhatsz a felhasználókról, a blogposztokról, stb. Mi egy SQLite adatbázist fogunk használni az adataink tárolásához. Ez az alapértelmezett Django adatbázis adapter -- ez egyelőre elég is lesz nekünk. + +Az adatbázisban lévő modellt úgy képzeld el, mint egy táblázatot (pl. az Excelben), ahol oszlopok (mezők) és sorok (adatok) vannak. + +### Készítsünk egy alkalmazást! + +Hogy minden szép rendben maradjon, most a projekten belül egy külön alkalmazást hozunk létre. Jó, ha már az elejétől fogva rendezetten tartjuk a dolgokat. Ahhoz, hogy létrehozzuk az alkalmazást, ezt a parancsot kell futtatnunk a parancssorban (a `djangogirls` könyvtárban, ahol a `manage.py` fájl van): + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +Azt fogod látni, hogy egy új `blog` könyvtár keletkezett, és már most van benne néhány fájl. Így kell kinézniük a könyvtáraknak és fájloknak a projekten belül: + + 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 + + +Miután létrejött az alkalmazás, meg kell mondanunk a Django-nak, hogy használja is azt. A `mysite/settings.py` tehetjük meg. Keresd meg az `INSTALLED_APPS` részt, és adj hozzá egy sort a `]` fölött, amiben ez áll: `'blog'`. Így kell kinéznie ennek a résznek: + +```python +INSTALLED_APPS = [ + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', + 'blog', +] +``` + +### Hozzuk létre a blogposzt modelljét + +A `Model` nevű objektumokat a `blog/models.py` fájlban definiáljuk - tehát itt fogjuk definiálni a blogposztunkat is. + +Nyisd meg a `blog/models.py`-t, törölj ki mindent, és ezt a kódot írd bele: + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Jól figyelj, hogy mindenképp két underscore (alulvonás) karaktert (`_`) használj a `str` mindkét oldalán. Ez a jelölés gyakran előfordul a Pythonban, és néha "dunder"-nek hívjuk (a "double underscore" - dupla alulvonás rövidítése). + +Ijesztőnek tűnik? Ne aggódj, mindjárt elmagyarázzuk, hogy mit jelentenek ezek a sorok. + +Azok a sorok, amik úgy kezdődnek, hogy `from` vagy `import`, más fájlokban lévő dolgokat adnak hozzá a fájlunkhoz. Ahelyett, hogy minden fájlba átmásolnánk ugyanazokat a dolgokat, beemelhetünk néhány dolgot a `from ... import ...` segítségével.. + +`class Post(models.Model):` - ez a sor definiálja a modellünket (ami egy `objektum`). + +* a `class` egy speciális kulcsszó, ami azt mutatja meg, hogy éppen egy objektumot definiálunk. +* a `Post` a modellünk neve. Más nevet is adhatnál neki (de kerüld el a speciális karaktereket - pl ékezetes karakterek - és a szóközt). Az osztályok (classok) nevét mindig nagybetűvel kezdjük. +* a `models.Model` azt jelenti, hogy a Post egy Django Model, így a Django tudni fogja, hogy el kell menteni az adatbázisba. + +Most pedig azokat a tulajdonságokat definiáljuk, amikről korábban beszéltünk:`title` (cím), `text` (szöveg), `created_date` (létrehozás dátuma), `published_date` (közzététel dátuma) és `author` (szerző). Ahhoz, hogy ezt megtehessük, mindegyik mezőnek meg kell határoznunk a típusát (Szöveg lesz benne? Egy szám? Dátum? Egy másik objektumhoz fog kapcsolni, például egy User-hez (felhasználó)?). + +* `models.CharField` - így definiálsz olyan szövegmezőt, ami meghatározott számú karaktert tartalmazhat. +* `models.TextField` - ez hosszú szövegekhez van, korlátozás nélkül. Pont jó egy blogbejegyzéshez, igaz? +* `models.DateTimeField` - ez dátumot és időt tartalmaz. +* `models.ForeignKey` - ez egy másik modellel való kapcsolatot jelent. + +Most nem magyarázzuk el nagyon részletesen a kódot, mert túl sok idő lenne. Ha szeretnél többet tudni a Model mezőkről, és hogy milyen más dolgokat lehet definiálni bennünk, olvashatsz róla a Django dokumentációban (https://docs.djangoproject.com/en/1.11/ref/models/fields/#field-types). + +És mi a helyzet a `def publish(self):` résszel? Ez pontosan az a `publish` (közzététel) method, amiről korábban beszéltünk. A `def` azt jelenti, hogy ez egy függvény (function) / method, és a `publish` ennek a methodnak a neve. Ha szeretnéd, megváltoztathatod a metódus nevét. Az a szabály, hogy csak kisbetűket használunk, és szóköz helyett underscore-t (alulvonás). Például egy olyan method neve, ami az átlagárat számolja ki, ez lehetne: `calculate_average_price`. + +A methodok gyakran `return`-ölnek (visszaadnak) valamit. Erre van is egy példa a `__str__` methodban. Ebben az esetben amikor meghívjuk a `__str__()`-t, egy szöveget kapunk vissza (**string**), ami a Post címe. + +Vedd észre azt is, hogy mind `def publish(self):` mind `def __str__(self):` indentálva van a class-on bellül. Python számára fontosak a szóközök, ezért a method-okat indentálni kell az osztályokon bellül. Ha ez elmarad, akkor a method nem az adott osztályhoz fog tartozni, és furcsán fog viselkedni a program. + +Ha valami még nem teljesen világos a modellekkel kapcsolatban, nyugodtan kérdezd meg a coachodat! Tudjuk, hogy bonyolult, főleg, ha egyszerre tanulsz az objektumokról és a függvényekről. De reméljük, már sokkal kevésbé tűnik varázslatnak az egész! + +### Készíts táblákat a modelleknek az adatbázisodban + +Az utolsó lépés, hogy hozzáadjuk az új modellünket az adatbázishoz. Először valahogy tudatnunk kell a Django-val, hogy változtattunk a modellünkön (vagyis most alkottuk meg!). Gépeld be, hogy `python manage.py makemigrations blog`. Ez fog történni: + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + 0001_initial.py: + - Create model Post + +**Megjegyzés** Ne felejtsd el elmenteni a módosított file-okat. Különben a számítógéped az előző változatot futtatja le, amely váratlan hibaüzeneteket eredményezhet. + +A Django létrehozott nekünk egy migrációs fájlt, amit most futtatni fogunk az adatbázison. Írd be, hogy `python manage.py migrate blog`, és ezt az outputot kell kapnod: + + (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 + + +Hurrá! Bekerült az adatbázisba a Post modellünk! Jó lenne látni is, nem igaz? A következő fejezetben kiderül, hogy néz ki! diff --git a/hu/django_orm/README.md b/hu/django_orm/README.md new file mode 100644 index 00000000000..6d7172ac15f --- /dev/null +++ b/hu/django_orm/README.md @@ -0,0 +1,158 @@ +# Django ORM és QuerySet-ek + +Ebben a fejezetben megtanulod, hogy hogyan kapcsolódik az adatbázishoz a Django, és hogyan tárol benne adatokat. Ugorjunk fejest! + +## Mi a QuerySet? + +A QuerySet lényegében egy lista, amely egy bizonyos Model objektumait tartalmazza. A QuerySetek segítségével tudsz adatot kinyerni az adatbázisból, szűrheted és sorba rendezheted. + +A legkönnyebb, ha példákon keresztül tanulod meg. Próbáljuk csak ki! + +## Django shell + +Nyisd meg a lokális konzolodat (nem a PythonAnywhere-ét), és gépeld be ezt a parancsot: + + (myvenv) ~/djangogirls$ python manage.py shell + + +Ezt fogod látni: + + (InteractiveConsole) + >>> + + +Most a Django interaktív konzoljában vagy. Olyasmi, mint a Python prompt, csak egy kis extra Django varázslattal :) Természetesen itt is használhatod az összes Python parancsot. + +### Az összes objektum + +Először is próbáljuk meg az összes posztot megjeleníteni. A következő paranccsal tudod megtenni: + + >>> Post.objects.all() + Traceback (most recent call last): + File "", line 1, in + NameError: name 'Post' is not defined + + +Hoppá, egy hiba! Azt mondja, hogy nincs olyan, hogy Post. Igaza van -- elfelejtettük importálni! + + >>> from blog.models import Post + + +Ez egyszerű: importáljuk a `Post` modellt a `blog.models`-ből. Próbáljuk meg újra megjeleníteni a Post-okat: + + >>> Post.objects.all() + , ]> + + +Egy lista a posztokból, amiket korábban megírtál! Ezeket még a Django admin felületén hoztad létre. Viszont ugyanezt meg tudod tenni a Python segítségével is. De vajon hogyan? + +### Objektum létrehozása + +Így hozhatsz létre egy új Post objektumot az adatbázisodban: + + >>> Post.objects.create(author=me, title='Sample title', text='Test') + + +De az egyik összetevő hiányzik: a `me`. Az `User` (felhasználó) modell egy instance-át kell megadnunk author-ként (szerző). Hogy tudjuk ezt megcsinálni? + +Először importáljuk az User modellt: + + >>> from django.contrib.auth.models import User + + +Milyen felhasználók vannak az adatbázisban? Próbáld meg ezt: + + >>> User.objects.all() + ]> + + +Ez a superuser, amit korábban hoztál létre! Most vegyük ennek a felhasználónak egy instance-ét: + + me = User.objects.get(username='ola') + + +Ahogy láthatod, most hozzájutottunk (`get`) egy `User`-hez, `username`-mel (felhasználónév), ami 'ola'-val egyenlő. Szuper! Természetesen itt a saját felhasználónevedet kell beírnod. + +Most pedig végre létrehozhatjuk a posztot: + + >>> Post.objects.create(author=me, title='Sample title', text='Test') + + +Hurrá! Meg akarod nézni, hogy működött-e? + + >>> Post.objects.all() + , , ]> + + +Ott is van, egy újabb poszt a listában! + +### Hozz létre még néhány posztot + +A móka kedvéért hozz létre még 2-3 posztot, hogy lásd, hogyan működik. Ha ez megvan, továbbléphetsz a következő részre. + +### Objektumok filterezése + +A QuerySet-ek egyik nagy előnye, hogy filterezhetjük (szűrhetjük) őket. Mondjuk le szeretnénk kérdezni az összes posztot, amit az ola User írt. Itt a `filter`-t fogjuk használni az `all` helyett a `Post.objects.all()`-ban. A zárójelek között megadhatjuk, hogy milyen feltétel(ek)nek kell teljesülnie ahhoz, hogy egy blogposzt bekerülhessen a querysetünkbe. Ebben az esetben az `author` (szerző) egyenlő `me`-vel (én). Ezt a Django-ban így írjuk le: `author=me`. Most így néz ki a kódunk: + + >>> Post.objects.filter(author=me) + , , , ]> + + + +És ha össze szeretnénk gyűjteni minden olyan posztot, aminek a `title` (cím) mezőjében szerepel a 'title' szó? + + >>> Post.objects.filter(title__contains='title') + , ]> + + +> **Note** A `title` és a `contains` (vagyis 'tartalmaz') között két underscore karakter (`_`) van. A Django ORM ezt a szintaxist használja arra, hogy elkülönítse a mezők neveit ("title") a műveletektől vagy filterektől ("contains"). Ha csak egy underscore-t használt, egy ilyen hibát fogsz kapni: "FieldError: Cannot resolve keyword title_contains" (kb "Mezőhiba: a title_contains kulcsszó nem található"). + +Megkaphatod az összes közzétett poszt listáját is. Ezt úgy tudod megtenni, hogy az összes poszt között szűrsz azokra, amiknél be van állítva múltbéli `published_date` (vagyis közzététel dátuma): + + >>> from django.utils import timezone + >>> Post.objects.filter(published_date__lte=timezone.now()) + [] + +Sajnos az a poszt, amit a Python konzolban hoztunk létre, még nem lett közzétéve. De ezen könnyen változtathatunk! Először is, hozzá kell férnünk a poszt instance-éhez, amit közzé szeretnénk tenni: + + >>> post = Post.objects.get(title="Sample title") + + +Aztán közzétesszük a `publish` methoddal! + + >>> post.publish() + + +Most próbáld meg újra lekérdezni a közzétett posztok listáját (nyomd meg háromszor a felfelé nyilat, és nyomj `enter`t): + + >>> Post.objects.filter(published_date__lte=timezone.now()) + ]> + + +### Objektumok sorbarendezése + +A QuerySetek segítségével sorba is rendezheted az objektumok listáját. Először próbáljuk meg a létrehozás dátuma (`created_date` mező) alapján rendezni őket: + + >>> Post.objects.order_by('created_date') + , , , ]> + + +Meg is fordíthatjuk a sorrendet, ha az elejére egy `-` jelet teszünk: + + >>> Post.objects.order_by('-created_date') + , , , ]> + + +### QuerySetek összefűzése + +A QuerySeteket kombinálhatod is, ha összefűződ őket (**chaining**): + + >>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') + + +Ez egy nagyon hatékony módszer, és a segítségével bonyolult query-ket írhatsz. + +Remek! Most már készen állsz a következő részre! Hogy kilépj a shellből, gépeld be ezt: + + >>> exit() + $ diff --git a/hu/django_start_project/README.md b/hu/django_start_project/README.md new file mode 100644 index 00000000000..88a969dc415 --- /dev/null +++ b/hu/django_start_project/README.md @@ -0,0 +1,151 @@ +# Az első Django projekted! + +> Ez a fejezet részben a Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) tutorial-jain alapszik. +> +> A fejezet néhány része a [django-marcador tutorial][1] alapján készült, ami a Creative Commons Attribution-ShareAlike 4.0 International License alatt áll. A django-marcador tutorial jogait, Markus Zapke-Gründemann és társai birtokolják. + + [1]: http://django-marcador.keimlink.de/ + +Most egy egyszerű blogot fogunk készíteni! + +Az első lépés, hogy indítsunk egy új Django projektet. Ez annyit jelent, hogy lefuttatunk néhány scriptet, amit a Django tartalmaz, ezzel létrehozzuk a projekt vázát. Ez tulajdonképpen néhány mappa és fájl, amit majd később fogunk használni. + +Néhány fájl és könyvtár neve nagyon fontos a Django-ban. A fájlokat, amiket most hozunk létre, ne nevezd át! Az áthelyezésük sem egy jó ötlet. Fontos, hogy megtartsunk egy bizonyos szerkezetet, ami segít a Django-nak, hogy megtalálja a fontos dolgokat. + +> Figyelem: mindent a virtualenv-ben futtass. Ha nem látod a `(myvenv)` előtagot a konzolodban, aktiválnod kell a virtuális környezetedet. Ezt a **Django telepítés** fejezetben írtuk le, a **Virtuális környezetben való fejlesztés** résznél. Windows környezetben a `myvenv\Scripts\activate` parancssal, Mac OS / Linux alatt a `source myvenv/bin/activate` paranccsal tudod megtenni. + +Ha Mac OS-t vagy Linuxot használsz, a következő parancsot kell futtatnod; **ne felejtsd el kitenni a pontot `.` a végén**: + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +Ha Windowst használsz: **ne felejtsd el kitenni a pontot `.` a végén**: + + (myvenv) C:\Users\Name\djangogirls> django-admin startproject mysite . + + +> A pont `.` nagyon fontos, mert ez mondja meg a scriptnek, hogy abba a könyvtárba telepítse a Django-t, ahol éppen vagy (a pont `.` egy rövidítése ennek). +> +> **Megjegyzés** Amikor begépeled a fenti parancsokat, csak azokat a részeket írd be, amik úgy kezdődnek, hogy `django-admin` vagy `django-admin.py`. A `(myvenv) ~/djangogirls$` és `(myvenv) C:\Users\Name\djangogirls>` csak példák a parancssorodra, amely azt várja, hogy parancsokat gépelj be neki. + +A `django-admin.py` egy script, ami könyvtárakat és fájlokat hoz létre neked. Most ilyen könyvtárszerkezetednek kell lennie: + + djangogirls + ├───manage.py + └───mysite + settings.py + urls.py + wsgi.py + __init__.py + + +> **Megjegyzés**: A könyvtárszerkezetedben a `venv` könyvtár is meg fog jelenni, amelyet nemrég hoztunk létre. + +A `manage.py` egy script, ami az oldal menedzselésében segít. Segítségével elindíthatsz egy webszervert a saját gépeden, anélkül, hogy bármit kellene installálnod, és más dolgokra is jó. + +A `settings.py` tartalmazza a weboldalat konfigurációját (beállításait),. + +Emlékszel, mit olvastál a postásról, aki azt próbálja kitalálni, hova vigye a levelet? Az `urls.py` fájl tartalmazza a mintákat, amiket az `urlresolver` használ. + +Most ne foglalkozzunk a többi fájllal, mert azokat nem fogjuk módosítani. Az egyetlen dolog, amit ne felejts el, hogy ne töröld ki őket véletlenül! + +## A beállítások megváltoztatása + +Változtassunk meg néhány dolgot a `mysite/settings.py` fájlban. Nyisd meg a fájlt a kódszerkesztővel, amit korábban telepítettél! + +Jó lenne, ha a weboldalunk a mi időzónánk szerinti időt mutatná. Nézd meg a [wikipedia időzóna listát][2], és másold ki az időzónádat (TZ, time zone). (például `Europe/Budapest` ) + + [2]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones + +Keresd meg a settings.py azt a sort, ami így keződik: `TIME_ZONE`, és írd át, hogy a saját időzónádat használja: + +```python + TIME_ZONE = 'Europe/Budapest' +``` + +Az "Europe/Budapest"-et változtasd meg kedved szerint. + +Szükségünk lesz még arra, hogy megadjuk a statikus fájlokhoz vezető elérési útvonalat (később mindent megtudhatsz a statikus fájlokról és a CSS-ről). Menj a fájl *végére*, és a `STATIC_URL` bejegyzés alatt adj hozzá egy következő bejegyzést `STATIC_ROOT` névvel: + +```python + STATIC_URL = '/static/' + STATIC_ROOT = BASE_DIR / 'static' +``` + +Amikor a DEBUG értéke True és az ALLOWED_HOSTS üres, a hosztnév alapértelmezetten ['localhost', '127.0.0.1', '[::1]']. Ez deploy után nem fog működni a PythonAnywhere-en, ezért változtassuk meg ezt a beállítást így: + +```python + ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +## Adatbázis létrehozása + +Sok különféle adatbázis-szoftver létezik, ami adatokat tud tárolni a weboldalakhoz. Mi az alapértelmezettet fogjuk használni, az `sqlite3`-ot. + +Ez már be van állítva a `mysite/settings.py` fájlodban: + +```python + DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } + } +``` + +Hogy létrehozz egy adatbázist a blogodhoz, futtasd le a következő parancsot a konzolban: `python manage.py migrate` (fontos, hogy a `djangogirls` könyvtárban legyél, ami tartalmazza a `manage.py` fájlt). Ha minden jól megy, valami ilyesmit kell látnod: + + (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 + + +Készen is vagyunk! Itt az ideje, hogy elindítsd a webszervert, és meglásd, hogy működik-e. + +## Webszerver elindítása + +Ehhez abban a könyvtárban kell lenned, ahol a `manage.py` fájl van (a `djangogirls` könyvtárban). A konzolban a következő paranccsal tudod elindítani a szervert: `python manage.py runserver`. + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Ha Windowst használsz, és `UnicodeDecodeError` hibaüzenetet kapsz, ezt a parancsot használd: + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Most nincs más dolgod, mint ellenőrizni, hogy fut-e a weboldalad. Nyisd meg a böngésződet (Firefox, Chrome, Safari, Internet Explorer, vagy bármi más, amit használsz), és írd be a következő címet: + + http://127.0.0.1:8000/ + + +Gratulálunk! Létrehoztad az első weboldaladat, és futtatad is egy webszerver segítségével! Hát nem fantasztikus? + +![It worked!][3] + + [3]: images/it_worked2.png + +A webszerver átvette az irányítást a parancssorod fölött, egészen addig, amíg le nem állítod. A terminálba tudsz gépelni, de nem fog lefuttatni új parancsokat. Ez azért van, mert a webszervernek folyamatosan kell futnia, hogy a beérkező lekérdezéseket (request-eket) fogadja. + +> Webszerverek működését a Hogy működik az Internet? fejezetben tekintettük át. + +Hogy újabb parancsokat írhass be, amíg fut a szerver, új terminálablakot kell nyitnod, és újraaktiválni a virtuális környezetedet. Hogy leállítsd a szervert, lépj vissza az ablakba, ahol fut, és nyomd meg a CTRL + C (Control és C billentyű egyszerre) billentyűkombinációt. (Windowson lehet, hogy a Ctrl+Break fog működni). + +Készen állsz a következő lépésre? Itt az ideje, hogy létrehozzunk némi tartalmat! diff --git a/hu/django_start_project/images/it_worked2.png b/hu/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/hu/django_start_project/images/it_worked2.png differ diff --git a/hu/django_templates/README.md b/hu/django_templates/README.md new file mode 100644 index 00000000000..d4407fe2a35 --- /dev/null +++ b/hu/django_templates/README.md @@ -0,0 +1,106 @@ +# Django sablonok (template) + +Itt az idő, hogy megjelenítsünk pár adatot! Ehhez Django felkínál nekünk pár beépített **template tag**-et számunkra. + +## Mik a template tag-ek? + +Mint látod, a HTML-ben nem tudsz Python kódot írni, mivel a böngészők nem értik, csak a HTML-t. Fontos tudni, hogy a HTML inkább statikus, míg Python inkább dinamikus. + +A **Django template tag-ek** lehetővé teszik, hogy Python-szerű dolgokat írjunk a HTML-be, ezáltal gyorsabban és könnyebben tudsz dinamikus weboldalt készíteni. Éljen! + +## Template a bejegyzések listájához + +Az előző fejezetben hozzáadtuk a template-hez a bejegyzéseink listáját a `post` változóban. Most meg fogjuk ezt jeleníteni a HTML-ben. + +Ahhoz, hogy kiírjunk egy változót a Django template-ben, dupla kapcsos zárójelet használunk, benne a változó nevével, mint itt: + +```html +{{ posts }} +``` + +Próbáld ki a `blog/templates/blog/post_list.html` template-ben. Cserélj ki mindent a második `
` -től a harmadikig a következővel: `{{ posts }}`. Mentsd el a fájlt és frissítsd az oldalt, hogy lásd az eredményt: + +![13.1 ábra][1] + + [1]: images/step1.png + +Ahogy látod, ez minden, amink van: + + , ]> + + +Ez azt jelenti, hogy a Django objektumok listájaként értelmezi. Emlékszel a **Bevezetés a Python-ba** című fejezetből, hogy hogyan jelenítünk meg listákat? Igen, for loop-okkal! Egy Django template-ben ezt így tudod megtenni: + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Próbáld ki a template-edben. + +![13.2 ábra][2] + + [2]: images/step2.png + +És működik! De azt akarjuk, hogy úgy jelenjen meg, mint a statikus bejegyzések, amit korábban készítettünk el a **Bevezetés a HTML-be** című fejezetben. A HTML-t és a template tageket használhatod együtt. A `body` így fog kinézni: + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %} Minden, amit a `{% for %}` és `{% endfor %}` közé írsz, a lista minden egyes elemére meg fog ismétlődni. Frissítsd az oldalt:{% endraw %} + +![13.3 ábra][3] + + [3]: images/step3.png + +Észrevetted, hogy most egy kicsit más megjelölést használtunk: `{{ post.title }}`? Az adatokat a `Post` modelben meghatározott mezők szerint érjük el. Emellett `|linebreaksbr` kíséri a szöveget, ezáltal egy filteren keresztül új bekezdéssé alakítja az újsor karaktereket. + +## Még valami + +Jó lenne látni, hogy a weblapod még mindig működik az Interneten, nem igaz? Telepítsük újra a PythonAnywhere-en. Itt a lépések összefoglalója... + +* Először tedd fel a kódot a GitHub-ra +``` +$ git status +[...] +$ git add --all . +$ git status +[...] +$ git commit -m "Modified templates to display posts from database." +[...] +$ git push +``` + +* Ezután a [PythonAnywhere][4]-en menj a **Bash console**-ba (vagy indíts újat), és futtasd le: + + [4]: https://www.pythonanywhere.com/consoles/ + +``` +$ cd my-first-blog +$ git pull +[...] +``` + +* Végül, a [Web][5] menüpontban klikkelj a **Reload**-ra. A frissítések ott vannak! Ha a blogposztok a PythonAnywhere oldaladon nem egyeznek a helyi gépeden lévő blogban lévőkkel, az nem probléma. Az adatbázisok a helyi gépeden és PythonAnywhere-en nem szinkronizálódnak a többi file-al együtt. + + [5]: https://www.pythonanywhere.com/web_app_setup/ + +Gratulálunk! Folytatásképp hozz létre új bejegyzéseket a Django adminban (ne felejts el published_date-t hozzáadni). Ellenőrizd, hogy a pythonanywhere oldalhoz tartozó admin oldalon https://yourname.pythonanywhere.com/admin vagy. Majd frissítsd az oldalt, hogy lásd, megjelentek-e. + +Olyan, mint a varázslat? Büszkék vagyunk Rád! Hagy ott egy kicsit a gépet, megérdemelsz egy kis szünetet. :) + +![13.4 ábra][6] + + [6]: images/donut.png diff --git a/hu/django_templates/images/donut.png b/hu/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/hu/django_templates/images/donut.png differ diff --git a/hu/django_templates/images/step1.png b/hu/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/hu/django_templates/images/step1.png differ diff --git a/hu/django_templates/images/step2.png b/hu/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/hu/django_templates/images/step2.png differ diff --git a/hu/django_templates/images/step3.png b/hu/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/hu/django_templates/images/step3.png differ diff --git a/hu/django_urls/README.md b/hu/django_urls/README.md new file mode 100644 index 00000000000..e43f4e1ec3f --- /dev/null +++ b/hu/django_urls/README.md @@ -0,0 +1,126 @@ +# Django url-ek + +Mindjárt elkészíted az első weblapodat: a blogod honlapját! De előbb tanuljunk egy kicsit a Django url-ekről. + +## Mi az URL? + +Az URL egyszerűen csak egy webes cím. Minden alkalommal látsz URL-eket, amikor meglátogatsz egy weboldalt - a böngésződ címsorában találodm meg (igen! a `127.0.0.1:8000` egy URL! És a `https://djangogirls.org` is egy URL): + +![Url][1] + + [1]: images/url.png + +Az interneten minden oldalnak szüksége van egy saját URL-re. Innen tudja az alkalmazásod, hogy mit mutasson a felhasználónak, aki megnyitott egy URL-t. A Django-ban egy `URLconf` nevű dolgot használunk (URL configuration, vagyis URL beállítások). Az URLConf egy csomó minta, amit a Django megpróbál összehasonlítani az URL-lel, amit kapott, és ez alapján találja meg a helyes view-t. + +## Hogy működnek az URL-ek a Django-ban? + +Nyisd meg a `mysite/urls.py` fájlt a kódszerkesztőben, és nézd meg: + +{% filename %}mysite/urls.py{% endfilename %} +```python +"""mysite URL Configuration + +[...] +""" +from django.conf.urls import url +from django.contrib import admin + +urlpatterns = [ + url(r'^admin/', admin.site.urls), +] +``` + +Amint láthatod, a Django már előre iderakott nekünk pár dolgot. + +A hármas idézőjelek (`'''` vagy `"""`) közötti sorok neve docstring (dokumentációs sztring) – Írhatsz ilyet egy file, osztály (class) vagy method elején, hogy leírhatsd hogy mit csinál. Python nem fogja lefuttatni ezeket a sorokat. + +Az admin URL, amit az előző fejezetben már meglátogattál, már itt van: + +```python + url(r'^admin/', include(admin.site.urls)), +``` + +Ez azt jelenti, hogy minden URL-nél, ami `admin/`-nal kezdődik, a Django meg fogja találni a hozzátartozó *view*-t. Ebben az esetben sok admin URL-t hozzáadunk, hogy ne kelljen az egészet ebbe a kis fájlba tömni - így olvashatóbb és letisztultabb. + +## Regex + +Kíváncsi vagy, hogyan párosítja össze a Django az URL-eket és a view-kat? Na, ez a rész trükkös. A Django `regex`-et használ (a "regular expressions", vagyis reguláris kifejezések rövidítése). A regexnek nagyon (nagyon!) sok szabálya van arra, hogy hogyan épít fel egy keresési mintázatot. Mivel a regex egy magasabb szintű téma, most nem megyünk bele a részletekbe. + +Ha szeretnéd megérteni, hogy hogyan hoztuk létre a mintákat, itt egy példa - csak néhány szabályra van szükségünk, hogy felépítsük a mintát, amit keresünk, például: + + ^ a szöveg eleje + $ a szöveg vége + \d számjegy + + ez azt jelzi, hogy az előző elem egynél többször ismétlődik + () ez a minta egy részét fogja össze + + +A Django minden mást, ami az url definícióban van, szó szerint fog értelmezni. + +Képzeld el, hogy van egy weboldalad ezzel a címmel: `http://www.mysite.com/post/12345/`, ahol a `12345/` a bejegyzésed száma. + +Minden egyes poszt számához új view-t írni nagyon idegesítő lenne. A reguláris kifejezésekkel létrehozhatunk egy mintát, ami megtalálja az URL-t, és kiszedi belőle a számot: `^post/(\d+)/$`. Nézzük meg lépésről lépésre, hogy mi történik itt: + +* A **^post/** azt mondja meg a Django-nak, hogy minden olyan url-t találjon meg, ami `post/`-tal kezdődik (rögtön ezután: `^`) +* A **(\d+)** azt jelenti, hogy ezután egy szám fog következni (egy vagy több számjegyű), és ezt a számot ki szeretnénk olvasni az URL-ből +* A **/** azt mondja meg a Django-nak, hogy utána még egy `/` karakternek kell következnie +* A **$** az URL végét jelzi, vagyis csak azok a stringeket fogja megfeleltetni a mintának, amik így végződnek: `/` + +## Az első Django URL-ed! + +Itt az ideje, hogy létrehozzuk az első URL-t! Azt szeretnénk, ha a 'http://127.0.0.1:8000/' lenne a blog kezdőoldala, és itt egy listát láthatnánk a blogbejegyzésekből. + +Fontos, hogy tisztán tartsuk a `mysite/urls.py` fájlt, ezért a `blog` alkalmazásból fogjuk importálni az url-eket. + +Rajta, add hozzá a sort, ami beimportálja `blog.urls`-t. Figyelmd meg, hogy az `include` függvényt használjuk, ezért hozzá **kell** adnod azt az import-ot a file első sorához. + +A `mysite/urls.py` fájlod most így néz ki: + +```python +from django.conf.urls import include, url +from django.contrib import admin + +urlpatterns = [ + url(r'^admin/', include(admin.site.urls)), + url(r'', include('blog.urls')), +] +``` + +Mostantól a Django mindent, ami a 'http://127.0.0.1:8000/'-re jön, átirányít a `blog.urls`-re, és ott fogja keresni a további tennivalókat. + +Amikor Pythonban írunk reguláris kifejezéseket, a stringek előtt mindig egy `r` áll. Ez egy hasznos tipp a Pythonnak, hogy a string tartalmazhat speciális karaktereket, de ezek a reguláris kifejezés alkotóelemei, és nem magának a Pythonnak szólnak. + +## blog.urls + +Hozz létre egy új, üres fájlt `blog/urls.py` néven. Nagyszerű! Most írd be az első két sort: + +```python +from django.conf.urls import url +from . import views +``` + +Itt csak annyi történik, hogy importáljuk a Django methodjait és az összes `view`nkat a `blog` alkalmazásból (még egyet sem írtunk meg, de mindjárt ezzel is foglalkozunk!) + +Ezután megírhatjuk az első URL mintát: + +```python +urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), +] +``` + +Amint láthatod, itt egy `post_list` nevű `view`t rendeltünk hozzá a `^$` URL-hez. Ez a regex a `^` karaktert (string kezdete) és az utána következő `$` karaktert (string vége) fogja keresni - vagyis csak az üres string felel meg neki. Ez így helyes, mert a Django URL resolverében a 'http://127.0.0.1:8000/' nem számít az URL részének. Ez a minta mondja meg a Django-nak, hogy ha valaki a 'http://127.0.0.1:8000/' címen lép be a weboldaladra, a `views.post_list` a helyes lépés. + +Az utolsó rész, `name='post_list'` az URL neve, amit a view azonosítására használunk. Ez lehet ugyanaz, mint a view neve, de lehet teljesen más is. A projekt későbbi részeiben ezeket az elnevezett URL-eket fogjuk használni, ezért fontos, hogy az app minden URL-jének nevet adjunk. Törekedj arra, hogy egyedi és könnyen megjegyezhető neveket adj. + +Minden világos? Nyisd meg a http://127.0.0.1:8000/ URL-t a böngésződben, hogy lásd az eredményt. + +![Hiba][2] + + [2]: images/error1.png + +Már nincs ott az "It works", igaz? Ne aggódj, ez csak egy hibaoldal, semmi félelmetes nincs benne! Tulajdonképpen nagyon is hasznos az ilyesmi: + +Azt olvashatod, hogy **no attribute 'post_list'**, vagyis "nincs post_list nevű attribútum". Eszedbe jut valami a *post_list*-ről? Így neveztük el a view-t! Ez azt jelenti, hogy minden a megfelelő helyen van, csak még nem hoztuk létre a *view*-t. Ne aggódj, mindjárt eljutunk odáig. + +> Ha többet szeretnél megtudni a Django URLconf-ról, nézz bele a hivatalos dokumentációba: https://docs.djangoproject.com/en/1.11/topics/http/urls/ \ No newline at end of file diff --git a/hu/django_urls/images/error1.png b/hu/django_urls/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/hu/django_urls/images/error1.png differ diff --git a/hu/django_urls/images/url.png b/hu/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/hu/django_urls/images/url.png differ diff --git a/hu/django_views/README.md b/hu/django_views/README.md new file mode 100644 index 00000000000..6592bc15bd5 --- /dev/null +++ b/hu/django_views/README.md @@ -0,0 +1,38 @@ +# Django views - itt az ideje alkotni! + +Eljött az idő, hogy megszabaduljunk a hibától, amit az előző fejezetben szereztünk :) + +A *nézet (view)* az a rész, ahova az applikációnk "logikáját" írjuk. Szükség lesz a nemrég elkészült `model`-ben megadott adatokra, amit majd továbbít a `template`-nek. A template-et majd a következő fejezetben hozzuk létre. A nézetek ugyanolyan Python metódusok, mint amiket a **Bevezetés a Python-ba** című fejezetben csináltunk, csak egy kicsit bonyolultabbak. + +A nézetek a `views.py` fájlban találhatók. A *view-kat* a `blog/views.py` fájlba fogjuk írni. + +## blog/views.py + +Ok, nyissuk ki ezt a fájlt és nézzük, mi van benne: + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Egyelőre nem túl sok minden. A legegyszerűbb *view* így néz ki. + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Mint látod, létrehoztunk egy `post_list` elnevezésű metódust (`def`), ami vesz egy `request`-et és `return`-öl (visszaad) egy `render` metódust, ami összeállítja a `blog/post_list.html` template-et. + +Mentsd el a fájlt, menj a http://127.0.0.1:8000/ címre és lássuk, mink van. + +Újabb hiba! Olvasd el, mi a helyzet: + +![Hiba][1] + + [1]: images/error.png + +Ez egyszerű: *TemplateDoesNotExist*. Javítsuk ki ezt a hibát, és hozzunk létre egy template-et a következő fejezetben! + +> Tanulj meg többet a Django nézetekről a hivatalos dokumentációból: https://docs.djangoproject.com/en/1.11/topics/http/views/ \ No newline at end of file diff --git a/hu/django_views/images/error.png b/hu/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/hu/django_views/images/error.png differ diff --git a/domain/README.md b/hu/domain/README.md similarity index 52% rename from domain/README.md rename to hu/domain/README.md index ba273120848..4357ae76e5f 100644 --- a/domain/README.md +++ b/hu/domain/README.md @@ -4,52 +4,68 @@ Heroku gave you a domain, but it's long, hard to remember, and ugly. It'd be awe In this chapter we will teach you how to buy a domain and direct it to Heroku! -## Where to register a domain? +## Hol tudsz domaint regisztrálni? -A typical domain costs around $15 a year. There are cheaper and more expensive options, depending on the provider. There are a lot of companies that you can buy a domain from: a simple [google search](https://www.google.com/search?q=register%20domain) give hundreds of options. +A typical domain costs around $15 a year. There are cheaper and more expensive options, depending on the provider. There are a lot of companies that you can buy a domain from: a simple [google search][1] will give hundreds of options. -Our favourite one is [I want my name](https://iwantmyname.com/). They advertise as "painless domain management" and it really is painless. + [1]: https://www.google.com/search?q=register%20domain + +Our favourite one is [I want my name][2]. They advertise as "painless domain management" and it really is painless. + + [2]: https://iwantmyname.com/ ## How to register domain in IWantMyName? -Go to [iwantmyname](http://iwantmyname.com) and type a domain you want to have in the search box. +Go to [iwantmyname][3] and type a domain you want to have in the search box. + + [3]: https://iwantmyname.com + +![][4] + + [4]: images/1.png -![](images/1.png) +You should now see a list of all available domains with the term you put in the search box. As you can see, a smiley face indicates that the domain is available for you to buy, and a sad face that it is already taken. -You should now see a list of all available domains with the term you put in the search box. As you can see, a smiley face indicate that the domain is available for you to buy, and a sad face that it is already taken. +![][5] -![](images/2.png) + [5]: images/2.png We've decided to buy `djangogirls.in`: -![](images/3.png) +![][6] + + [6]: images/3.png Go to checkout. You should now sign up for iwantmyname if you don't have an account yet. After that, provide your credit card info and buy a domain! After that, click `Domains` in the menu and choose your newly purchased domain. Then locate and click on the `manage DNS records` link: -![](images/4.png) +![][7] + + [7]: images/4.png Now you need to locate this form: -![](images/5.png) +![][8] + + [8]: images/5.png -And fill it in with the following details: -- Hostname: www -- Type: CNAME -- Value: your domain from Heroku (for example djangogirls.herokuapp.com) -- TTL: 3600 +And fill it in with the following details: - Hostname: www - Type: CNAME - Value: your domain from Heroku (for example djangogirls.herokuapp.com) - TTL: 3600 -![](images/6.png) +![][9] + + [9]: images/6.png Click the Add button and Save changes at the bottom. It can take up to a couple of hours for your domain to start working, so be patient! -## Configure domain in Heroku +## A domain beállítása Herokun You also need to tell Heroku that you want to use your custom domain. -Go to the [Heroku Dashboard](https://dashboard.heroku.com/apps), login to your Heroku account and choose your app. Then go into app Settings and add your domain in the `Domains` section and save your changes. +Go to the [Heroku Dashboard][10], login to your Heroku account and choose your app. Then go into app Settings and add your domain in the `Domains` section and save your changes. + + [10]: https://dashboard.heroku.com/apps -That's it! +That's it! \ No newline at end of file diff --git a/hu/dynamic_data_in_templates/README.md b/hu/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..97edb5a51f1 --- /dev/null +++ b/hu/dynamic_data_in_templates/README.md @@ -0,0 +1,74 @@ +# Dinamikus adatok a template-ben + +Az összetevőink különböző helyeken vannak: a `Post` modellt a `models.py`-ban definiáltuk, a `post_list` a `views.py`-ban van, és létrehoztunk egy sablont is. De mégis hogyan fogjuk megjeleníteni a bejegyzést a HTML sablonban? Mert pontosan ez az, amit szeretnénk: fogjuk a tartalmat (az adatbázisban elmentett modelleket) és szépen megjelenítjük a sablonunkban. + +Pont ez az, amit a *nézetek (views)* csinálnak: összekötik a modelleket a sablonokkal. A `post_list` *view*-ba kell berakni a modelleket, amiket meg akarunk jeleníteni, és továbbítani a sablonba. Tehát a *nézet*ben eldöntjük, hogy mi fog megjelenni a sablonban. + +OK, hogyan fogjuk ezt megvalósítani? + +Meg kell nyitni a `blog/views.py` fájlt. Eddig így nézett ki a `post_list` *view*: + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Emlékszel, amikor azt magyaráztuk, hogyan tudsz korábban megírt kódot beletenni más fájlokba? Most itt az alkalom, hogy beletegyük a modelt, amit a `models.py`-ba írtunk. A `from .models import Post` sort a következőképpen adjuk hozzá: + +```python +from django.shortcuts import render +from .models import Post +``` + +A pont a `from` után az *aktuális könyvtárt*, vagy az *aktuális applikációt* jelenti. Mivel a `views.py` és a `models.py` ugyanabban a könyvtárban vannak, elég annyit használnunk, hogy `.` és a fájl nevét (`.py` nélkül). Ezután importáljuk a model nevét.). + +De mi jön ezután? Ahhoz, hogy megkapjuk az aktuális blog bejegyzést a `Post` modelből, szükségünk lesz valamire, amit `QuerySet`-nek hívnak. + +## QuerySet + +Már ismerős lehet, hogy hogyan működik a QuerySet. A [Django ORM (QuerySets)][1] fejezetben már beszéltünk róla. + + [1]: ../django_orm/README.md + +Most azok a bejegyzések érdekelnek minket, amik publikálva vannak és a `published_date` szerint vannak sorba rendezve. Ezt már megtettük a QuerySets fejezetben! + + Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') + + +Most ezt a kódrészletet rakjuk a `blog/views.py` fájlba, hozzáadva a `def post_list(request)` function-hoz: + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Figyeld meg, hogy létrehozunk egy *változót* a QuerySethez: `posts`. Vedd úgy, hogy ez a QuerySet neve. Innentől kezdve erre a névre hivatkozva használjuk. + +Szintén fontos, hogy a kód a `timezone.now()` function-t tartalmazza, ehhez importálnunk kell a `timezone`-t. + +Az utolsó hiányzó rész, hogy továbbítsuk a `posts`-ot a sablonba (ezt a következő fejezetben kifejtjük). + +A `render` function-ban már van egy `request` paraméterünk (vagyis minden, ami a felhasználótól érkezik az interneten keresztül) és egy template file `'blog/post_list.html'`. Az utolsó paraméter, ami így néz ki: `{}`, egy olyan összetevő, amiben megadhatjuk azokat a dolgokat, amiket használni fogunk a template-ben. El kell neveznünk őket (egyelőre ragaszkodunk a `'posts'`-hoz :)). Így kell kinéznie: `{'posts': posts}`. Ne felejtsd el, hogy a `:` előtti rész egy string, ezt idézőjelbe kell tenned `''`. + +Végül a `blog/views.py` fájlnak így kell kinéznie: + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +És megvan! Itt az idő visszatérni a template-hez és megjeleníteni ezt a QuerySet-et! + +Ha utána szeretnél olvasni a QuerySet-nek, itt megteheted: https://docs.djangoproject.com/en/1.11/ref/models/querysets/ \ No newline at end of file diff --git a/hu/extend_your_application/README.md b/hu/extend_your_application/README.md new file mode 100644 index 00000000000..ffe6a9c5bfa --- /dev/null +++ b/hu/extend_your_application/README.md @@ -0,0 +1,198 @@ +# Egészítsd ki az applikációdat + +Most már teljesítettük az összes szükséges lépést a website-unk létrehozásához: tudjuk hogyan írjunk egy modelt, url-t, view-t és template-et. Azt is tudjuk, hogy hogyan csinosítsuk ki az oldalunkat. + +Itt az idő gyakorolni! + +Az első dolog, amire szükségünk van, nyilván egy oldal, ami megjelenít egy bejegyzést, ugye? + +Már van egy `Post` modellünk, úgyhogy nem kell hozzáadnunk semmit a `models.py`-hoz. + +## Template link a bejegyzés részleteihez + +Kezdjük azzal, hogy hozzáadunk egy linket a `blog/templates/blog/post_list.html` fájlhoz. Eddig így kell kinéznie: + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + + +{% raw %}Szükségünk van egy linkre a bejegyzések címei és a bejegyzések részletes oldala között. Cseréljük ki a `

{{ post.title }}

` sort úgy, hogy a bejegyzés részletes oldalára vezet: {% endraw %} + +```html +

{{ post.title }}

+``` + +{% raw %}Itt az ideje elmagyarázni a rejtélyes `{% url 'post_detail' pk=post.pk %}` részt. Ahogy gyaníthattad, a `{% %}` jelölés azt jelenti, hogy Django template tag-eket használunk. Ezúttal egy olyat, ami létrehoz egy URL-t nekünk!{% endraw %} + +A `blog.views.post_detail` egy elérési út a `post_detail` *view*-hez, amit létre akarunk hozni. Jegyezd meg: `blog` az applikációnk neve (a `blog` könyvtár), `views` a `views.py` nevéből van, és az utolsó rész - `post_detail` - a *nézet* neve. + +És a `pk=post.pk` rész? A `pk` a "primary key" (elsődleges kulcs) rövidítése, amely mindegyik bejegyzésnek egy egyedi neve az adatbázisban. Nem adtunk meg egy elsődleges kulcsot a `Post` modellünkben, ezért Django létre fog nekünk hozni egyet (alapértelmezetten egy számot fog használni, amely egyesével nő, pl. 1, 2, 3) és ezt egy `pk` nevű mezőben hozzáadja mindegyik posthoz. Az elsődleges kulcsot `post.pk`-al érhetjük el, ugyan úgy mint a többi mezőt (`title`, `author`, stb.) a `Post` objektumban! + +Most amikor a http://127.0.0.1:8000/ címre megyünk, lesz egy hibaüzenetünk (ahogy vártuk is, mivel nincsen sem URL, sem *view* a `post_detail`-hez). Így fog kinézni: + +![NoReverseMatch hiba][1] + + [1]: images/no_reverse_match2.png + +## URL a bejegyzés részleteihez + +Hozzunk létre egy URL-t a `urls.py`-ban a `post_detail` *view*-hoz! + +Az első bejegyzésünk részleteit a kövekező **URL** címen akarjuk megjeleníteni: http://127.0.0.1:8000/post/1/ + +Hozzunk létre egy URL-t a `blog/urls.py` fájlban, ami egy `post_detail` nevű *view*-ra mutat -- ez majd egy egész blogbejegyzést jelenít meg. Add hozzá a `url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'),` sort a `blog/urls.py` fájlhoz. Így kell kinéznie a fájlnak: + +```python +from django.conf.urls import url +from . import views + +urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), + url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'), +] +``` + +Ez a rész `^post/(?P[0-9]+)/$` elég ijesztően néz ki, de ne aggódj,elmagyarázzuk: +- `^`-vel kezdődik -- "eleje" - `post/` azt jelenti, hogy az eleje után az URL-nek tartalmaznia kell ezt: **post** és **/**. Eddig jó. +- `(?P[0-9]+)` - ez a rész trükkösebb. Ez azt jelenti, a Django fogja, amit ideraksz, és átirányítja egy nézethez egy `pk` nevű változóként. `[0-9]` azt közli, hogy ez csak egy számjegy lehet, betű nem (tehát minden 0 és 9 között). `+` azt jelenti, hogy egy vagy több számjegynek kell lennie. Tehát `http://127.0.0.1:8000/post//` nem érvényes, de `http://127.0.0.1:8000/post/1234567890/` teljesen jó! +- `/` - kell még egy **/** - `$` +- "vége"! + +Ez azt jelenti, hogy ha beírod a `http://127.0.0.1:8000/post/5/` címet a böngésződbe, akkor a Django megérti, hogy egy `post_detail` nevű 1>nézetet keresel, és közvetíti az információt, hogy a `pk` `5-tel` egyenlő annál a *nézetnél*. + +`pk` a `primary key` rövid változata. Ezt a kifejezést gyakran használják Django projektekben. De úgy nevezed el a változódat, ahogy akarod (ne feledd: kisbetűkkel és szóköz helyett `_` karakterrel!). Például `(?P[0-9]+)` esetén használhatunk `post_id` változót, amivel így nézne ki: `(?P[0-9]+)`. + +Ok, hozzáadtunk egy új URL-t a `blog/urls.py`-hoz! Frissítsük az oldalt: http://127.0.0.1:8000/ Boom! Már megint egy újabb hiba! Várható volt! + +![AttributeError][2] + + [2]: images/attribute_error2.png + +Emlékszel, mi a következő lépés? Hát persze: hozzáadni egy új nézetet! + +## Nézet a bejegyzés részleteihez + +Ezúttal adunk a *nézetünknek* egy extra paramétert: `pk`. A *nézetünknek* ezt meg kell kapnia, igaz? Úgyhogy a function-t úgy fogjuk meghatározni, hogy `def post_detail(request, pk):`. Jegyezd meg, hogy pontosan ugyanazt a nevet kell használnunk, amit az url-ben jelöltünk meg (`pk`). A változó kihagyása helytelen, és hibát fog eredményezni! + +Most egyetlen egy blogbejegyzést akarunk szerezni. Ehhez egy ilyen queryset-et használhatunk: + + Post.objects.get(pk=pk) + + +De ennél a kódnál van egy kis gond. Ha nincsen `Post` az adott `primary key`-vel (`pk`), akkor egy nagyon csúnya hibát kapunk! + +![DoesNotExist hiba][3] + + [3]: images/does_not_exist2.png + +Mi ezt nem akarjuk! De, természetesen a Django-nak van valamije, ami ezt megoldja nekünk: `get_object_or_404`. Abban az esetben, ha nincsen `Post` az adott `pk`-val, akkor egy sokkal szebb oldalt ad ki (`Page Not Found 404` oldalt). + +![Az oldal nem található][4] + + [4]: images/404_2.png + +A jó hír az, hogy elkészítheted a saját `Page not found` oldaladat, és olyan szépre alakíthatod, amilyenre akarod. De ez nem olyan fontos egyelőre, úgyhogy átugorhatjuk. + +Oké, itt az idő, hogy hozzáadjuk a *view*-t a `views.py` fájlunkhoz! + +Nyisd meg a `blog/views.py` fájlt és add hozzá a következő kódot: + + from django.shortcuts import render, get_object_or_404 + + +A többi `from` sor mellé. És a fájl alján hozzáadjuk a *view*-t: + + def post_detail(request, pk): + post = get_object_or_404(Post, pk=pk) + return render(request, 'blog/post_detail.html', {'post': post}) + + +Igen. Ideje frissíteni az oldalt: http://127.0.0.1:8000/ + +![Post list nézet][5] + + [5]: images/post_list2.png + +Sikerült! De mi történik, ha ráklikkelsz egy linkre a blog bejegyzés címében? + +![TemplateDoesNotExist hiba][6] + + [6]: images/template_does_not_exist2.png + +Jaj ne! Egy másik hiba! De már tudjuk, hogyan kezeljük, igaz? Létre kell hoznunk egy template-et! + +## Template a bejegyzés részleteihez + +Létrehozunk egy fájlt a `blog/templates/blog` könyvtárban, és elnevezzük: `post_detail.html`. + +Ez fog történni: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Itt megint a `base.html`-t bővítjük ki. A `content` blokkban meg szeretnénk jeleníteni a bejegyzés címét, szövegét és a megjelenési idejét (published_date) - ha van. De pár fontos dolgot tisztáznunk kell még, igaz? + +{% raw %}`{% if ... %} ... {% endif %}` egy template tag, amit akkor használni, amikor ellenőrizni akarunk valamit (emlékszel az `if ... else ..` részre a **Bevezetés a Python-ba** fejezetnél?). Ebben az esetben azt akarjuk leellenőrizni, hogy a bejegyzés `published_date` eleme nem üres.{% endraw %} + +Ok, most már frissíthetjük az oldalunkat és kiderül, hogy a `Page not found` eltűnt. + +![Post részletei oldal][7] + + [7]: images/post_detail2.png + +Juppi! Működik! + +## Még egy dolog: itt az ideje egy újabb deploynak! + +Jó lenne ellenőrizni, hogy még mindig működik-e a weboldalad a PythonAnywhere-en, igaz? Próbáld meg újra deployolni. + + $ 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 + + +* Aztán írd be ezt a [PythonAnywhere Bash konzol][8]ba: + + [8]: https://www.pythonanywhere.com/consoles/ + + $ cd my-first-blog + $ source myvenv/bin/activate + (myvenv)$ git pull + [...] + (myvenv)$ python manage.py collectstatic + [...] + + +* Végül menj a [Web tab][9]-ra, és nyomj **Reload**ot. + + [9]: https://www.pythonanywhere.com/web_app_setup/ + +Ennyi az egész. Gratulálunk :) diff --git a/hu/extend_your_application/images/404_2.png b/hu/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/hu/extend_your_application/images/404_2.png differ diff --git a/hu/extend_your_application/images/attribute_error2.png b/hu/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..33a3b36b1d3 Binary files /dev/null and b/hu/extend_your_application/images/attribute_error2.png differ diff --git a/hu/extend_your_application/images/does_not_exist2.png b/hu/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/hu/extend_your_application/images/does_not_exist2.png differ diff --git a/hu/extend_your_application/images/no_reverse_match2.png b/hu/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/hu/extend_your_application/images/no_reverse_match2.png differ diff --git a/hu/extend_your_application/images/post_detail2.png b/hu/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/hu/extend_your_application/images/post_detail2.png differ diff --git a/hu/extend_your_application/images/post_list2.png b/hu/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/hu/extend_your_application/images/post_list2.png differ diff --git a/hu/extend_your_application/images/template_does_not_exist2.png b/hu/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/hu/extend_your_application/images/template_does_not_exist2.png differ diff --git a/hu/how_the_internet_works/README.md b/hu/how_the_internet_works/README.md new file mode 100644 index 00000000000..d5d2fb2069f --- /dev/null +++ b/hu/how_the_internet_works/README.md @@ -0,0 +1,53 @@ +# Hogy működik az Internet? + +> Ez a fejezet Jessica McKellar "Hogy működik az Internet" (How the Internet works) című előadásán alapul (http://web.mit.edu/jesstess/www/). + +Biztosan minden nap internetezel. Tudod, igazából mi történik, mikor beírod a böngésződben, hogy https://djangogirls.org, és `enter`t nyomsz? + +Az első dolog, amit fontos megérteni, hogy egy weboldal nem más, mint egy csomó fájl egy merevlemezre mentve. Olyanok, mint a filmjeid, a zenéid, vagy a képeid. De van valami, ami a weboldalakat egyedivé teszi: a HTML nevű számítógépes kód. + +Ha nem igazán ismered a programozást, akkor nehéz lehet megértened először a HTML-t, de ne aggódj, a böngésződ (Chrome, Safari, Firefox, stb.) imádja. A webböngészőket úgy tervezték, hogy megértsék ezt a kódot, kövessék azt, ami abban van, és megjelenítsenek mindent pont úgy, ahogy szeretnéd. + +Mint minden fájlt, a HTML-t is merevlemezen kell tárolni. Az Internethez speciális, erős számítógépeket használunk, a *szervereket*. Ezekhez a gépekhez nem tartozik képernyő, egér vagy billentyűzet, mert a fő feladatuk az adatok tárolása és szolgáltatása. Ezért hívjuk őket *szervernek*, vagyis kiszolgálónak -- ők *szolgálják ki* neked az adatokat. + +Rendben, de hogy néz ki az Internet? + +Rajzoltunk neked egy képet! Így néz ki: + +![1.1 ábra][1] + + [1]: images/internet_1.png + +Elég zavaros, igaz? Valójában ez egymáshoz kapcsolódó gépek (az előbb emlegetett *szerverek*) hálózata. Több százezer gép! Rengeteg kilométernyi kábel körös-körül a világon! Nézd meg Submarine Cable Map weboldalt (http://submarinecablemap.com), és látni fogod milyen bonyolult a net. Itt egy kép az oldalról: + +![1.2 ábra][2] + + [2]: images/internet_3.png + +Lenyűgöző, igaz? Persze az képtelenség, hogy minden gép össze legyen kötve egymással, ami az Internethez csatlakozik. Ezért hogy elérhessünk egy gépet (például azt, ahol a https://djangogirls.org van elmentve), a kérésünket egy csomó különböző gépen át kell juttatni. + +Így néz ki: + +![1.3 ábra][3] + + [3]: images/internet_2.png + +Képzeld el úgy, hogy amikor beírod a https://djangogirls.org címet, egy levelet írsz: "Kedves Django Girls, szeretném megnézni a djangogirls.org oldalt. Kérlek, küldd el nekem!" + +Először a leveled a hozzád legközelebbi postára megy. Ezután továbbhalad egy olyan postára, ami már kicsit közelebb van a címzettedhez, és így tovább, míg el nem jut a céljához. Az egyetlen egyedi dolog, hogy ha több levelet (*adatcsomagot*) küldesz ugyanarra a helyre, azok valószínűleg teljesen már postákon (*routers*) mennek keresztül. Ez csak attól függ hogyan osztják el az egyes irodákban. + +![1.4 ábra][4] + + [4]: images/internet_4.png + +Ennyire egyszerű! Elküldöd a levelet, és várod a választ. Persze papír és toll helyett adatok byte-jait küldöd, de az ötlet ugyanaz! + +Utcanév, házszám, város és irányítószám helyett IP-címeket használunk. A számítógéped először megkéri a DNS-t (Domain Name System, tartománynévrendszer), hogy fordítsa le a djangogirls.org-ot egy IP címre. Körülbelül úgy működik, mint amikor a régi telefonkönyvekből kikerested valakinek a telefonszámát, és a címét. + +Amikor levelet küldesz, bizonyos dolgokra szükség van, hogy jó helyre szállítsák őket: kell lennie rajta címnek, bélyegnek, stb. Ráadásul olyan nyelven kell írnod, amit a címzett megért. Ugyanez vonatkozik az *adatcsomagokra*, amiket azért küldesz, mert meg szeretnél nézni egy weboldalt. A HTTP (Hypertext Transfer Protocol) protokollt használjuk erre. + +Szóval, amikor van egy weboldalad, akkor szükséged van egy *szerverre* (gép), ahol az oldal lakik. Amikor a *szerver* kap egy beérkező *kérést* (egy levélben), akkor egy válaszban visszaküldi a weboldaladat (egy másik levélben). + +Mivel ez egy Django útmutató, felmerülhet benned a kérdés, hogy a Django ebben a folyamatban milyen szerepet tölt be. Amikor küldesz egy választ, nem mindig pont ugyanazt küldöd mindenkinek. Sokkal jobb, ha a levelek személyesek, főleg, ha annak az embernek szólnak, akinek válaszolsz, nem igaz? A Django segít, hogy személyes és érdekes leveleket írhass :). + +De elég a beszédből, munkára fel! \ No newline at end of file diff --git a/hu/how_the_internet_works/images/internet_1.png b/hu/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/hu/how_the_internet_works/images/internet_1.png differ diff --git a/hu/how_the_internet_works/images/internet_2.png b/hu/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/hu/how_the_internet_works/images/internet_2.png differ diff --git a/hu/how_the_internet_works/images/internet_3.png b/hu/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/hu/how_the_internet_works/images/internet_3.png differ diff --git a/hu/how_the_internet_works/images/internet_4.png b/hu/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/hu/how_the_internet_works/images/internet_4.png differ diff --git a/hu/html/README.md b/hu/html/README.md new file mode 100644 index 00000000000..46211c0880c --- /dev/null +++ b/hu/html/README.md @@ -0,0 +1,207 @@ +# Bevezetés a HTML-be + +Mi az a template, kérdezhetnéd? + +A template egy fájl, amit újrahasznosíthatunk, hogy különböző információkat jeleníthessünk meg egységes formában - például, egy template-et használhatsz egy levél megírásakor, ahol ugyan a levelek tartalma eltérhet, és a címzettek is különbözőek lehetnek, de a formájuk azonos. + +A Django template formátumát egy nyelvvel írjuk le, amit HTML-nek hívunk (ez az a HTML, amit a **Hogy működik az Internet?** fejezetben már említettünk). + +## Mi a HTML? + +A HTML egy egyszerű kód, amit a böngésződ értelmez (pl.: Chrome, Firefox, vagy Safari), hogy weboldalakat jelenítsen meg a felhasználóknak. + +A HTML a "HyperText Markup Language" rövidítése. A **HyperText** egy olyan szöveg, amely támogatja a hiperhivatkozásokat oldalak között. A **Markup** azt jelenti, hogy egy dokumentumot kód segítségével jelölésekkel látunk el, hogy leírjuk (ebben az esetben a böngészőnek) hogyan értelmezhető a weboldal. A HTML kód **tagekből** épül fel, amelyek mindegyike `<` jellel kezdődik, és `>` jellel végződik. Ezek a tagek reprezentálják a jelölő **elemeket**. + +## Az első template-ed! + +Egy template elkészítése azt jelenti, hogy létrehozunk egy template fájlt. Minden dolog egy fájl, igaz? Valószínűleg már te is észrevetted ezt. + +A template-eket a `blog/templates/blog` mappába mentjük. Először hozd létre a `templates` könyvtárat a blog mappában. Ezután hozz létre egy `blog` mappát a templates mappádban: + + blog + └───templates + └───blog + + +(Meglepő lehet, hogy miért van szükség két `blog` nevű mappára - később majd rájössz, hogy ez egy hasznos elnevezési konvenció, ami megkönnyíti az életedet, amikor a dolgok bonyolulttá válnak.) + +Ezután hozd létre a `post_list.html` fájlt (egyelőre hagyd üresen) a `blog/templates/blog` mappában. + +Nézd meg, hogy néz ki most a weboldal: http://127.0.0.1:8000/ + +> Ha továbbra is a `TemplateDoesNotExists` hibát kapod, akkor próbáld újraindítani a szervert. Menj a parancssorba, állítsd meg a szervert a Ctrl+C megnyomásával (a Control és C gombot egyszerre nyomd meg), és indítsd el újra a `python manage.py runserver` paranccsal. + +![11.1 ábra][1] + + [1]: images/step1.png + +Nincs több hiba! Ügyes vagy :) Azonban a weboldalad csak egy üres oldalt jelenít meg, mivel a template is üres, amit készítettél. Ezt ki kell javítanunk. + +Add hozzá az alábbi sorokat a template fájlodhoz: + +```html + +

Hi there!

+

It works!

+ +``` + +Szóval, hogy néz ki most a weboldalad? Kattints és nézd meg: http://127.0.0.1:8000/ + +![11.2 ábra][2] + + [2]: images/step3.png + +Működik! Szép munka :) + +* A legalapvetőbb tag a ``, amely minden weboldal elejére kerül, míg a `` a végén szerepel. Láthatod, hogy a weboldal tartalma a kezdő `` tag, és a záró `` tag közé kerül +* A `

` tag a bekezdés (paragrafus) elem; `

` zárja a bekezdéseket + +## Head és body + +Minden HTML oldalt két elemre osztunk: **head** és **body**. + +* A **head** elem információkat tartalmaz a dokumentumról, amit nem jelenítünk meg a képernyőn. + +* A **body** elem tartalmaz minden mást, ami a weboldalon jelenik meg. + +A `` elemet használjuk arra, hogy az oldal konfigurációs beállításait megadjuk a böngészőnek, és a `` elemet arra, hogy leírjuk mi jelenjen meg az oldalon. + +Például a weboldal title elemét rakhatjuk a ``-be: + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Mentsd el a fájlt, és frissítsd az oldalt. + +![11.3 ábra][3] + + [3]: images/step4.png + +Észrevetted, hogyan ismerte fel a böngésző, hogy az "Ola's blog" az oldal címe? Értelmezte a `Ola's blog` kódot, és a szöveget a böngésző cím mezőjébe rakta (ezt fogja használja könyvjelzőnek is, és így tovább). + +Valószínűleg azt is észrevetted, hogy minden nyitó taghez tartozik egy *záró tag* egy `/` jellel, és ezek az elemek *egymásba ágyazhatóak* (azaz nem lehet bezárni egy adott taget mindaddig, míg a benne levők nincsenek lezárva). + +Ez éppen olyan mintha különböző dolgokat tennénk dobozokba. Van egy nagy dobozod, a ``; ebben benne van a ``, és ez egy újabb kisebb dobozt tartalmaz: `

`. + +Követned kell a *záró* tagekre, és az *egymásba ágyazható* elemekre vonatkozó szabályokat - ha nem teszed, a böngésző nem tudja majd értelmezni a kódodat megfelelően, és az oldalad hibásan jelenik majd meg. + +## Változtasd meg a template-edet + +Most szórakozásképpen próbáld módosítani a template-edet! Itt van néhány hasznos tag ehhez: + +* `

A heading

` - a legfontosabb címedhez +* `

A sub-heading

` cím a következő szintre +* `

A sub-sub-heading

` ... és így tovább, egészen `
`-ig +* `

Egy bekezdésnyi szöveg

` +* `text` dőlt szöveghez +* `text` a szöveg kiemeléséhez +* `
` új sor kezdéséhez (nem mindenhová rakhatsz br-t) +* `link` létrehoz egy linket +* `
  • first item
  • second item
` létrehoz egy listát, akárcsak ezt itt! +* `
` az oldal szakaszainak megadásához + +Itt a példa egy teljes template-re, másold be a `blog/templates/blog/post_list.html` file-ba: + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Három `div` elemet hoztunk létre. + +* Az első `div` tartalmazza a blogunk címét - ez egy cím, és egy link +* A másik két `div` elem a blog posztjainkat tárolja a publikálás dátumával - egy `h2` van benne a poszt címével, ami kattintható, emellett `p` bekezdések a dátumnak, és a szövegnek. + +Ennek kell megjelenni: + +![11.4 ábra][4] + + [4]: images/step6.png + +Yaaay! A template eddig pontosan **ugyanazt az infót** jeleníti meg - viszont korábban arról volt szó, hogy egy template-tel **különböző** információkat jeleníthetünk meg **azonos formában**. + +Amit igazából szeretnénk, hogy igazi posztokat jelenítünk meg, amiket a Django adminon adunk hozzá - nemsokára ezt is megnézzük. + +## Még egy dolog: deploy! + +Jó lenne lenne látni ezt az egészet élesben az interneten, ugye? Csináljunk egy újabb PythonAnywhere deploy-t: + +### Commit, és push a GitHub-ra + +Először nézzük meg, hogy milyen fájlok változtak a legutóbbi deploy óta (futtasd az alábbi parancsot a gépeden, ne PythonAnywhere-en): + + $ git status + + +A `djangogirls` mappában kell lenned, és a `git`-tel add hozzá az összes változtatást a könyvtáradon belül: + + $ git add --all . + + +> **Megjegyzés** `-a` (az "all" rövidítése) azt jelenti, hogy a `git` felismeri, ha fájlokat törölsz (alapból csak az új, és módosított fájlokat ismeri fel). Korábban már volt róla szó (a 3. fejezetben), hogy a `.` az aktuális mappát jelenti. + +Mielőtt továbbmegyünk ellenőrizzük, hogy a `git` mit szeretne feltölteni (zölddel jelennek meg azok a fájlok, amiket a `git` fel akar tölteni): + + $ git status + + +Már majdnem készen is vagyunk, de előtte el kell mentenünk a változtatásokat az előzményekbe. Egy "commit message"-et adunk meg, ahol leírjuk, hogy mit változtattunk. Akármit beírhatsz, de később hasznos lehet, ha valami olyat adsz meg, ami segít beazonosítani, hogy mit csináltál. + + $ git commit -m "Changed the HTML for the site." + + +> **Megjegyzés** Győződj meg róla, hogy idézőjelet használsz a commit üzenetnél. + +Miután ezzel megvagy, töltsd fel (push) a változtatásaidat GitHub-ra: + + $ git push + + +### Pullold az új kódot PythonAnywhere-re, és frissítsd az oldalt + +* Nyisd meg a [PythonAnywhere konzol oldalát][5] és menj a **Bash console**-odra (vagy indíts egy újat). Aztán futtasd ezt: + + [5]: https://www.pythonanywhere.com/consoles/ + + $ cd ~/my-first-blog + $ source myvenv/bin/activate + (myvenv)$ git pull + [...] + +A fájljaid már itt is vannak. Ha le akarod csekkolni, akkor menj át a **Files tab**-ra és nézd meg a kódodat PythonAnywhere-en. + +* Végül, kattints át a [Web tab][6]-ra, és nyomj egy **Reload**-ot a web alkalmazásodra. + + [6]: https://www.pythonanywhere.com/web_app_setup/ + +A frissítéseid kint vannak! Frissítsd az weboldalt a böngésződben, és a változtatások már látni fogod :) \ No newline at end of file diff --git a/hu/html/images/step1.png b/hu/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/hu/html/images/step1.png differ diff --git a/hu/html/images/step3.png b/hu/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/hu/html/images/step3.png differ diff --git a/hu/html/images/step4.png b/hu/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/hu/html/images/step4.png differ diff --git a/hu/html/images/step6.png b/hu/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/hu/html/images/step6.png differ diff --git a/hu/images/application.png b/hu/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/hu/images/application.png differ diff --git a/hu/installation/README.md b/hu/installation/README.md new file mode 100644 index 00000000000..a3802d348ce --- /dev/null +++ b/hu/installation/README.md @@ -0,0 +1,49 @@ +# Ha otthon csinálod a tutorialt + +Ha otthon csinálod a tutorialt, nem valamelyik [Django Girls eseményen](https://djangogirls.org/events/), át is ugorhatod ezt a fejezetet, és folytathatod a [Hogy működik az Internet?](../how_the_internet_works/README.md) fejezettel. + +Ez az oldal csak egy helyre gyűjti az installációk leírását, amikkel később úgyis találkozni fogsz a tutorial során. A Django Girls workshopok előtt mindig van egy installációs esemény, amikor mindent telepítünk, hogy a workshopon már ne kelljen ezzel bajlódni, ezért hasznos nekünk, hogy mindent megtalálunk egy helyen. + +Ha te is hasznosnak találod, nyugodtan elvégezheted ezt a fejezetet. De ha inkább fejest szeretnél ugrani a tanulásba, mielőtt egy csomó mindent telepítenél a gépedre, nyugodtan ugord át a fejezetet! Később úgyis elmagyarázzuk az összes telepítést. + +Sok szerencsét! + +# Installáció + +A workshopon egy blogot fogsz elkészíteni. Ehhez el kell végezned néhány telepítési feladatot, hogy a workshop napján már egyből elkezdhess kódolni. + +# A Python telepítése + +{% include "/python_installation/instructions.md" %} + +# Virtuális környezet létrehozása és a Django telepítése + +{% include "/django_installation/instructions.md" %} + +# Kódszerkesztő telepítése + +{% include "/code_editor/instructions.md" %} + +# A Git telepítése + +{% include "/deploy/install_git.md" %} + +# GitHub fiók létrehozása + +Menj a [GitHub.com](https://www.github.com) oldalra, és hozz létre egy új, ingyenes felhasználói fiókot. + +# PythonAnywhere felhasználó létrehozása + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Kezdheted az olvasást + +Gratulálunk, készen állsz a tutorialra! Ha van egy kis időd a workshop előtt, hasznos lehet, ha elolvasod az első néhány fejezetet: + + * [Hogy működik az Internet](../how_the_internet_works/README.md) + + * [Bevezetés a parancsssor használatába](../intro_to_command_line/README.md) + + * [Bevezetés a Pythonba](../python_introduction/README.md) + + * [Mi a Django?](../django/README.md) diff --git a/hu/intro_to_command_line/README.md b/hu/intro_to_command_line/README.md new file mode 100644 index 00000000000..897f37d45af --- /dev/null +++ b/hu/intro_to_command_line/README.md @@ -0,0 +1,413 @@ +# Bevezetés a parancssor használatába + +Ez nagyon izgalmas, igaz?! Pár percen belül megírod az első kódsorodat :) + +**Hadd mutassuk be neked az első új barátodat: a parancssort!** + +A következő lépésekben megmutatjuk neked, hogyan használd azt a fekete ablakot úgy, ahogy az összes hacker használja. Első ránézésre kissé ijesztőnek tűnhet, de valójában csak egy egyszerű parancsot vár tőled. + +> **Megjegyzés** A könyvben felváltva használjuk a 'könyvtár' és 'mappa' ('directory' és 'folder') szavakat, de ezek pont ugyanazt jelentik. + +## Mi az a parancssor? + +A **parancssor** (command line, vagy **command-line interface**) nevű ablak egy szöveges alapú alkalmazás, amit arra használhatsz, hogy fájlokat tekinthess meg, szerkeszthess, és különböző műveleteket végezhess rajtuk. Olyasmi, mint a Windows Explorer, vagy Mac gépeken a Finder, de a grafikus felület nélkül. Egyéb megnevezések a parancssorra: *konzol*, *terminál*, *cmd*, *CLI*, *prompt*. + +## A parancssor megnyitása + +Hogy belevághass a kísérletezésbe, először meg kell nyitnod a parancssort. + + + +Start menu → All Programs → Accessories → Command Prompt. + + + + + + +Launchpad → Other → Terminal. + + + + + +Valószínűleg itt találod meg: Applications → Accessories → Terminal, de ez a rendszeredtől függ. Ha nincs ott, csak keress rá a Google-n :) + + + +## Parancssor + +Egy fehér vagy fekete ablakot kell látnod, ami csak a te parancsaidra vár. + + + +Ha Mac-ed vagy Linux-od van, valószínűleg egy `$`-t kell látnod: + + $ + + + + + + +A Windows-on ez egy `>` jel: + + > + + + + +Minden sornak ezzel a jellel és az azt követő space-el kell kezdődnie, de ezt nem neked kell begépelned. A számítógéped megteszi helyetted :) + +> Csak egy gyors megjegyzés: így is kinézhet a parancssorod: `C:\Users\ola>` vagy `Olas-MacBook-Air:~ ola$`, és ez teljesen jó így. Ebben az útmutatóban csak próbáljuk a lehető leginkább leegyszerűsíteni. + +A sor elején lévő rész, a `$` vagy `>` karakterig (azt is beleértve) a *parancssori prompt* vagy röviden *prompt* a neve. Azt jelzi, hogy a számítógép a te utasításodra vár. + +A tutorial során, amikor egy parancsot kell beírnod, ki fogjuk írni a `$` vagy `>` karaktert, és olykor még bővebb promptot. Nyugodtan hagyd figyelmen kívül a baloldali részt, és csak a prompt után kezdődő parancsot gépeld be. + +## Az első parancsod (YAY!) + +Kezdjük valami egyszerűvel. Gépeld be ezt a parancsot: + + + +{% filename %}parancssor{% endfilename %} +``` +$ whoami +``` + + + + + + +{% filename %}parancssor{% endfilename %} +``` +> whoami +``` + + + + +Majd nyomj `enter`t. Ezt az eredményt kapod: + + $ whoami + olasitarska + + +Amint láthatod, a számítógéped az előbb kiírta a felhasználónevedet. Jó, mi?:) + +> Próbálj meg minden parancsot begépelni, ahelyett, hogy innen másolnád ki. Így többet fogsz megjegyezni! + +## Az alapok + +Minden operációs rendszer parancssora kissé különböző prancsokat igényel, ezért kérlek győzödj meg arról, hogy a te operációs rendszerednek megfelelő utasításokat követed. Próbáljuk ki, rendben? + +### A jelenlegi mappa + +Jó lenne tudni, hogy most hol vagyunk, nem? Nézzük. Írd be ezt a parancsot, és nyomj `enter`t: + + + +{% filename %}parancssor{% endfilename %} +``` +$ pwd +/Users/olasitarska +``` + +> Megjegyzés: a 'pwd' jelentése: 'print working directory' ('munkakönyvtár kiírása'). + + + + + + +{% filename %}parancssor{% endfilename %} +``` +> cd +C:\Users\olasitarska +``` +> Megjegyzés: a 'cd' jelentése: 'change directory' ('könyvtár váltása'). Ha PowerShell-t használsz, használhatod a pwd parancsot is, mint Linuxon vagy macOS-en. + + + + +Valószínűleg valami hasonlót fogsz látni a gépeden. Amikor megnyitod a parancssort, általában a felhasználó 'home' könyvtárába kerülsz. + +* * * + +### Fájlok és könyvtárak kilistázása + +És mi van benne? Szuper lenne kideríteni. Nézzük meg: + + + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + > 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 + ... + + + +* * * + +### Jelenlegi mappa megváltoztatása + +Most pedig lépjünk be a Desktop (vagy Asztal) mappába: + + + +{% filename %}parancssor{% endfilename %} +``` +$ cd Desktop +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> cd Desktop +``` + + + +Nézzük meg, hogy tényleg megváltozott-e: + + + +{% filename %}parancssor{% endfilename %} +``` +$ pwd +/Users/olasitarska/Desktop +``` + + + + +{% filename %}parancssor{% endfilename %} +``` +> cd +C:\Users\olasitarska\Desktop +``` + + +Itt is van! + +> PRO tipp: ha begépeled a `cd D`-t (vagy ha magyarul használod az operációs rendszeredet, és 'Asztal'-nak hívják a könyvtáradat, a `cd A`-t) és ezután megnyomod a <0>tab-ot, a parancssor automatikusan kiegészíti a nevet, lehetővé téve számodra a gyorsabb navigálást. Amennyiben több mappa is kezdődik ugyanazzal a betűvel, nyomd meg kétszer a `tab`-ot, hogy kilistázza a több opciót. + +* * * + +### Könyvtár létrehozása + +Mit szólnál, ha létrehoznánk egy gyakorló (practice) könyvtárat az asztalon? Így tudod megtenni: + + + +{% filename %}parancssor{% endfilename %} +``` +$ mkdir practice +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> mkdir practice +``` + + +Ez a parancs létre fog hozni egy `practice` nevű mappát az asztalodon. Ha megnézed az asztalt, meggyőződhetsz róla, hogy tényleg ott van-e, de a `ls` vagy `dir` paranccsal is megteheted! Próbáld ki :) + +> PRO tipp: Ha nem szeretnéd újra és újra ugyanazt a parancsot begépelni, próbáld meg a `felfele` és `lefele nyilakkal` behívni a legutóbb futtatott parancsokat. + +* * * + +### Feladat! + +Egy kis kihívás: hozz létre egy `test` nevű mappát a frissen elkészített `practice` könyvtáradban. Használd a `cd` és `mkdir` parancsokat. + +#### Megoldás: + + + +{% filename %}parancssor{% endfilename %} +``` +$ cd practice +$ mkdir test +$ ls +test +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> cd practice +> mkdir test +> dir +05/08/2014 07:28 PM test +``` + + + +Gratulálunk! :) + +* * * + +### Takarítás + +Nem szeretnénk káoszt hagyni magunk után, szóval töröljünk le mindent, amit eddig csináltunk. + +Először vissza kell mennünk az Asztal-ra: + + + +{% filename %}parancssor{% endfilename %} +``` +$ cd .. +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> cd .. +``` + + + +Ha a `cd` parancsot `..`-tal használod, a jelenlegi könyvtárból a parent (szülő) könyvtárba jutsz (ez az a mappa, ami tartalmazza azt a mappát, ahol éppen vagy). + +Ellenőrizzük le, hogy hol vagyunk: + + + +{% filename %}parancssor{% endfilename %} +``` +$ pwd +/Users/olasitarska/Desktop +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> cd +C:\Users\olasitarska\Desktop +``` + + +Most pedig itt az ideje, hogy kitöröljük a `practice` könyvtárat: + +> **Figyelem**: A fájlok törlése a `del`, `rmdir`, vagy a `rm` parancsokkal visszafordíthatatlan, tehát a *törölt fájlok örökre eltűnnek*! Legyél nagyon óvatos ezzel a paranccsal. + + + +{% filename %}parancssor{% endfilename %} +``` +$ rm -r practice +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> rmdir /S practice +practice, Are you sure ? Y +``` + + + +Kész! Ellenőrizzük le, hogy tényleg megtörtént-e: + + + +{% filename %}parancssor{% endfilename %} +``` +$ ls +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> dir +``` + + + +### Kilépés + +Ennyi volt! Most már biztonságosan kiléphetsz a parancssorból. Csináljuk hacker módra, jó?:) + + + +{% filename %}parancssor{% endfilename %} +``` +$ exit +``` + + + + + +{% filename %}parancssor{% endfilename %} +``` +> exit +``` + + + +Szuper, nem? :) + +## Összefoglaló + +Egy kis összefoglalás néhány hasznos parancsról: + +| Parancs (Windows) | Parancs (Mac OS/Linux) | Leírás | Példa | +| ----------------- | ---------------------- | ----------------------------- | ------------------------------------------------- | +| exit | exit | az ablak bezárása | **exit** | +| cd | cd | könyvtár megváltoztatása | **cd test** | +| dir | ls | könyvtárak/fájlok kilistázása | **dir** | +| copy | cp | fájl másolása | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | fájl mozgatása | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | új könyvtár létrehozása | **mkdir testdirectory** | +| del | rm | könyvtár/fájl törlése | **del c:\test\test.txt** | + +Ez csak néhány parancs, azok közül, amiket a parancssorban futtathatsz, de ma nem lesz szükséged ennél többre. + +Ha kíváncsi vagy, a [ss64.com][1] oldalon megtalálod az összes parancsot bármelyik operációs rendszerre. + + [1]: http://ss64.com + +## Kész vagy? + +Merüljünk el a Python-ban! \ No newline at end of file diff --git a/hu/python_installation/README.md b/hu/python_installation/README.md new file mode 100644 index 00000000000..8dc956f79b9 --- /dev/null +++ b/hu/python_installation/README.md @@ -0,0 +1,13 @@ +# Kezdjünk ismerkedni a Pythonnal + +Végre itt vagyunk! + +Először is hadd mondjuk el, hogy mi is a Python. A Python egy nagyon népszerű programnyelv, amit weboldalkészítéshez, játékokhoz, tudományos szoftverekhez, grafikához és még csomó minden másra használnak. + +A Pythont a 80-as évek végén alkották meg, és a fő cél az volt, hogy ne csak gépek, hanem emberek számára is olvasható legyen. Ezért néz ki sokkal egyszerűbbnek, mint más programnyelvek. Ez könnyebbé teszi a tanulást, de ne aggódj, a Python igencsak erőteljes nyelv! + +# A Python telepítése + +> **Megjegyzés** Ha már elvégezted az Installáció fejezetet, nem kell újra megtenned - ugorj a következő fejezetre! + +{% include "/python_installation/instructions.md" %} diff --git a/hu/python_installation/images/add_python_to_windows_path.png b/hu/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/hu/python_installation/images/add_python_to_windows_path.png differ diff --git a/hu/python_installation/instructions.md b/hu/python_installation/instructions.md new file mode 100644 index 00000000000..de7509b87b5 --- /dev/null +++ b/hu/python_installation/instructions.md @@ -0,0 +1,79 @@ +> Ez a fejezet a Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) tutorialján alapszik + +A Django Python nyelven íródott. Ahhoz, hogy bármit létrehozhassunk a Django-ban, szükségünk van a Pythonra is. Kezdjük a telepítésével! Azt szeretnénk, hogy a Python 3.6-es verziója legyen telepítve -- ha ennél korábbi verzióval rendelkezel, akkor frissítened kell. + + + +A Python-t az alábbi weboldalról tudod letölteni: https://www.python.org/downloads/release/python-343/. Az ***.msi** fájlt a letöltés után futtasd (dupla kattintás), és kövesd az utasításokat. Fontos, hogy emlékezz a path-ra (könyvtárra), ahova letöltötted. Később szükséged lesz rá! + +Egy fontos dolog, amire figyelj oda: a telepítővarázsló második képernyőjén ("Customize") görgess lejjebb, és válaszd ki az "Add python.exe to the Path" opciót, ahogy itt láthatod: + +![Ne felejtsd el hozzáadni a Pythont a Path-hoz](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Megjegyzés** Mielőtt telepítenéd a Pythont macOS-en, bizonyosodj meg arról hogy a Mac beállításaid megengedik olyan csomagok telepítését, amelyek nem az App Store-ból származnak. Nyisd meg a System Preferences ablakot (az Applications mappában), kattints a "Security & Privacy" gombra majd a "General" fülre. Ha az "Allow apps downloaded from:" beállítás "Mac App Store"-ra van állítva, állítsd át "Mac App Store and identified developers"-ra. + +Menj a https://www.python.org/downloads/release/python-343/ oldalra, és töltsd le a Python installert: + + * Töltsd le a *macOS 64-bit/32-bit installer* fájlt, + * Kattints duplán a *python-3.4.3-macosx10.6.pkg*-re, hogy futtasd a telepítőt. + + + + + +Nagyon valószínű, hogy a Python már telepítve van a gépedre. Ahhoz, hogy ezt leellenőrizd (illetve hogy megnézd, melyik verzió van a gépeden), nyisd meg a konzolt és írd be az alábbi parancsot: + + $ python3 --version + Python 3.4.3 + + +Ha még nincs Pythonod, vagy másik verziót szeretnél telepíteni, így teheted meg: + + + + + +Írd be az alábbi parancsot a konzolba: + + $ sudo apt install python3.4 + + + + + +Írd be az alábbi programot a konzolba: + + $ sudo dnf install python3.4 + + + + + +Írd be az alábbi programot a konzolba: + + $ sudo zypper install python3 + + + +Bizonyosodj meg arról, hogy sikeres volt a telepítés! Nyisd meg a *Terminált* és futtasd le a `python3` parancsot: + + $ python3 --version + Python 3.4.3 + + + +**Megjegyzés** Ha windows-t használsz és egy hibaüzenetet kapsz, mely szerint `python3` nem található, próbáld meg `python` néven (a `3` nélkül) és ellenőrizd hogy Python 3.6-e. + + +* * * + +Ha kétségeid vannak, vagy valami elromlott, és nem tudod, mit csinálj - csak kérdezd meg a coachodat! Néha a dolgok nem mennek teljesen simán, és jobb megkérdezni valakit, akinek több tapasztalata van a témában. diff --git a/hu/python_introduction/README.md b/hu/python_introduction/README.md new file mode 100644 index 00000000000..36966e6ca99 --- /dev/null +++ b/hu/python_introduction/README.md @@ -0,0 +1,843 @@ +# Bevezetés a Pythonba + +> Ez a fejezet részben a Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) tutorialjain alapszik. + +Írjunk egy kis kódot! + +## A Python parancssor + +Hogy elkezdhess a Pythonnal ismerkedni, szükséged lesz a *parancssorra*. Már tudod, hogyan kell -- megtanultad a [ Bevezetés a parancssor használatába][1] fejezetben. + + [1]: ../intro_to_command_line/README.md + +Ha kész vagy, kövesd az alábbi utasításokat. + +Egy Python konzolt szeretnénk megnyitni. Gépeld be a `python` parancsot Windowson, vagy a `python3` parancsot, ha Mac vagy Linux van a gépeden, és nyomj `enter`t. + + $ python3 + Python 3.4.3 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Az első Python parancsod! + +Miután futtattad a Python parancsot, a parancssor megváltozott: `>>>`. Ez azt jelenti, hogy mostantól csak a Python nyelv parancsait használhatjuk. Nem kell beírnod ezt: `>>>` - a Python megcsinálja helyetted. + +Ha bármikor szeretnél kilépni a Python konzolból, csak gépeld be, hogy `exit()`, vagy használd a `Ctrl + Z` billentyűkombinációt Windos-ra, vagy a `Ctrl + D`-t Mac-re/Linux-ra. Ezután már nem fogod látni a `>>>` jelet. + +Most épp nem szeretnénk kilépni a Python konzolból. Inkább többet szeretnénk tanulni róla. Kezdjünk valami nagyon egyszerűvel. Például kezdjünk valami matekkel, mint pl. `2 + 3` majd `enter`. + + >>> 2 + 3 + 5 + + +Szuper! Láttad, ahogy előugrott a válasz? A Python tud matekozni! Kipróbálhatsz más parancsokat is, mint például: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Szórakozz egy kicsit ezzel aztán gyere vissza ide :). + +Amint látod, a Python jó számológép. Ha kíváncsi vagy, mire jó még... + +## Stringek + +Mi a helyzet a neveddel? Gépeld be a neved időzéjelbe téve: + + >>> "Ola" + 'Ola' + + +Épp most hoztad létre az első stringedet! Ez egy karakter-sorozat amit a számítógép fel tud dolgozni. A string kezdetét és végét ugyanazzal a karakterrel jelöljük. Ez lehet szimpla (`'`) vagy dupla (`"`) idézőjel (nincs különbség!) Az idézőjelek mondják meg a Pythonnak, hogy ami köztük van, az egy string. + +A stringeket össze is lehet fűzni. Próbáld ki ezt: + + >>> "Hi there " + "Ola" + 'Hi there Ola' + + +Sokszorosítani is lehet őket: + + >>> "Ola" * 3 + 'OlaOlaOla' + + +Ha aposztrófot szeretnél a stringedbe tenni, kétféleképpen teheted meg. + +Idézőjel segítségével: + + >>> "Runnin' down the hill" + "Runnin' down the hill" + + +vagy pedig escape karakterrel (``) az aposztróf előtt: + + >>> 'Runnin\' down the hill' + "Runnin' down the hill" + + +Jó, mi? Ha nagybetűkkel szeretnéd látni a neved, csak gépeld be ezt: + + >>> "Ola".upper() + 'OLA' + + +Épp most használtad az `upper` **functiont** (függvényt) a stringeden! A függvény, (mint például az `upper()`), egy utasítássorozat, amit a Python végrehajt egy adott objektumon (`"Ola"`), amikor a függvényt meghívod. + +Ha szeretnéd tudni, hogy hány betűből áll a neved, arra is van függvény! + + >>> len("Ola") + 3 + + +Érdekel, miért van az, hogy néha a függvényeket úgy hívjuk meg, hogy a string után egy `.` jön, majd a függvény neve (mint például `"Ola".upper()`), máskor pedig előbb a függvény neve jön, aztán a string a zárójelben? Nos, ez azért van mert néha a függvények objektumokhoz tartoznak, mint az `upper()`, amit csak azokon az objektumokon hívhatunk meg. Ebben az esetben a függvényt **metódusnak** (method) nevezzük. Máskor a függvény nem tartozik egy bizonyos típusú objektumhoz, hanem többféle típusú objektumon is meg lehet hívni, mint például a `len()`. Ezért volt az hogy az `"Ola"`-t paraméterként adtuk át a `len` függvénynek. + +### Összefoglaló + +Oké, elég a stringekből. Tehát ezidáig a következőkről tanultál: + +* **a parancssor** - ha parancsokat (kódot) írunk be a Python parancssorba, a Python végrehajtja azokat +* **számok és stringek** - a Pythonban a számokat matematikai műveletekhez, a stringeket szöveg objektumokhoz használjuk +* **operátorok** - mint a + és a *, két értékből egy újat hoznak létre +* **függvények** - mint az upper() és a len(), objektumokon hajtanak végre műveleteket. + +Ezek volnának az alapjai minden programozási nyelvnek. Készen állsz valami bonyolultabbra? Rajta! + +## Hibák + +Nézzünk valami újat. Vajon megkaphatjuk-e egy szám hosszát ugyanúgy, mint a nevünk hosszát? Írd be, hogy `len(304023)`, majd üss `enter`-t: + + >>> len(304023) + Traceback (most recent call last): + File "", line 1, in + TypeError: object of type 'int' has no len() + + +Megkaptuk az első hibánkat! Azt mondja, az "int" típusú (integerek, egész számok) objektumoknak nincs hosszuk. Most akkor mit tehetünk? Talán leírhatjuk a számunkat stringként? A stringeknek van hosszuk, nem? + + >>> len(str(304023)) + 6 + + +Működött! Használtuk a `str` függvényt a `len` függvény belsejében. A `str()` függvény stringgé alakít egy tetszőleges típusú objektumot. + +* A `str` függvény **stringgé** alakítja a dolgokat +* Az `int` függvény **integerré** alakítja a dolgokat + +> Fontos: számokat (integereket) stringgé bármikor alakíthatunk, de stringet számmá nem feltétlenül - mégis mi lenne az `int('hello')` eredménye? + +## Változók + +A programozásban nagyon fontos a változó fogalma. A változó egy név egy objektumra, amit majd később újra felhasználhatunk. A programozók arra használják a változókat, hogy adatokat tároljanak velük, hogy a kódjukat olvashatóbbá tegyék, és hogy ne kelljen megjegyezniük mindenről, hogy micsoda. + +Tegyük fel, hogy létrehoztál egy változót, aminek a neve `name`: + + >>> name = "Ola" + + +Látod? Egyszerű! Csak ennyi: name egyenlő Ola. + +Amint láthatod, a program nem adott vissza semmilyen eredményt, az eddigiekkel ellentétben. Honnan tudjuk így, hogy a változó létrejött? Egyszerűen írd be, hogy `name`, majd üss `enter`-t: + + >>> name + 'Ola' + + +Juppííí! Az első változód :)! És bármikor megváltoztathatod, hogy mit tartalmaz: + + >>> name = "Sonja" + >>> name + 'Sonja' + + +És függvényekben is használhatod: + + >>> len(name) + 5 + + +Szuper, ugye? Természetesen a változók bármilyen értéket felvehetnek, például szám-értékeket is. Próbáld ki: + + >>> a = 4 + >>> b = 6 + >>> a * b + 24 + + +De mi van akkor, ha rossz nevet használunk? Kitalálod? Próbáljuk ki! + + >>> city = "Tokyo" + >>> ctiy + Traceback (most recent call last): + File "", line 1, in + NameError: name 'ctiy' is not defined + + +Egy hiba! Amint látod a Pythonban különböző típusú hibák vannak, ezt például úgy hívják hogy **NameError**. A Python ezt a hibát dobja, ha olyan változóra hivatkozol, ami nem volt még létrehozva. Ha majd találkozol ezzel a hibával, mindig ellenőrizd a kódod, hogy nem írtál-e el egy nevet. + +Játssz egy kicsit a változókkal, hogy lásd, mi mindenre vagy képes velük! + +## A print függvény + +Próbáld ki ezt: + + >>> name = 'Maria' + >>> name + 'Maria' + >>> print(name) + Maria + + +Amikor beírod, hogy `name`, a Python interpreter a "name" változó szöveges *reprezentációjával* tér vissza, ami a M-a-r-i-a betűkből áll, idézőjelek között. Amikor azt írod: `print(name)`, a Python "kinyomtatja" a változó tartalmát a képernyőre, idézőjelek nélkül, ami sokkal elegánsabb. + +Amint majd látni fogjuk, a `print()` hasznos lesz függvények belsejében is, vagy amikor több sorba szeretnénk nyomtatni. + +## Listák + +A stringek és az integerek mellett a Python még sok más típusú objektumot ismer. Most megmutatunk egy újat, amit úgy hívnak: **lista**. A lista olyan, amilyennek elképzeled: egy objektum, ami más objektumok listája :) + +Hozzunk létre egy listát: + + >>> [] + [] + + +Igen, ez egy üres lista. Nem túl hasznos, ugye? Most hozzunk létre egy listát a lottószámokkal. Nem akarjuk folyton ismételni magunkat, úgyhogy egyenesen egy változóba tesszük: + + >>> lottery = [3, 42, 12, 19, 30, 59] + + +Igen, van egy listánk! Mit lehet vele csinálni? Nézzük meg, hány lottószám van a listában. Van tipped, melyik függvényt fogjuk erre használni? Biztos tudod! + + >>> len(lottery) + 6 + + +Igen! A `len()` megadja, hogy hány objektum van a listában. Hasnzos, ugye? Most akkor rendezzük sorba a listát: + + >>> lottery.sort() + + +Ez nem ad vissza semmit, csak megváltoztatta a számok sorrendjét a listában. Írassuk ki a listát, hogy lássuk, mi történt: + + >>> print(lottery) + [3, 12, 19, 30, 42, 59] + + +Amint látod, a számok a listában most növekvő sorrendben vannak. Gratula! + +Esetleg szeretnéd fordított sorrendbe rendezni? Csináljuk meg! + + >>> lottery.reverse() + >>> print(lottery) + [59, 42, 30, 19, 12, 3] + + +Könnyű, ugye? Ha hozzá akarsz adni valamit a listához, a következő paranccsal teheted: + + >>> lottery.append(199) + >>> print(lottery) + [59, 42, 30, 19, 12, 3, 199] + + +Ha például csak az első számot akarod látni, arra használhatod az **indexelést**. Az index egy szám ami megmondja, hányadikként fordul elő egy elem a listában. A programozók szeretik 0-tól kezdeni a számolást, ezért a lista első eleme a 0-dik indexű helyen van, a következő az 1-nél és így tovább. Próbáld ki ezt: + + >>> print(lottery[0]) + 59 + >>> print(lottery[1]) + 42 + + +Amint látod, a listában előforduló különböző objektumokat elérhetjük a lista nevének, illetve az objektum indexének megjelölésével, ahol az indexet szögletes zárójelbe írjuk. + +Ahhoz, hogy valamit kitöröljünk a listából, szükségünk van az **index** fogalmára, amint azt az előbb tanultuk, valamint a `pop()` parancsra. Nézzünk egy példát hogy megerősítsük az eddig tanultakat; ki fogjuk törölni az első elemet a listánkból. + + >>> print(lottery) + [59, 42, 30, 19, 12, 3, 199] + >>> print(lottery[0]) + 59 + >>> lottery.pop(0) + >>> print(lottery) + [42, 30, 19, 12, 3, 199] + + +Működik, mint a varázslat! + +Szórakozásból próbálj elérni különböző indexű elemeket: 6, 7, 1000, -1, -6 vagy -1000. Meg tudod-e mondani az eredményt előre? Értelmes-e az eredmény? + +Ebben a Python dokumentációban megtalálod a listákra értelmezett összes metódust: https://docs.python.org/3/tutorial/datastructures.html + +## Szótárak + +A szótár (dictionary) hasonló a listához, de a szótár elemeit nem indexekkel hanem kulcsokkal (key) érjük el. A kulcs lehet bármilyen string vagy szám. Az üres szótár létrehozására szolgáló utasítás a következő: + + >>> {} + {} + + +Épp most definiáltál egy üres szótárat. Hurrá! + +Most pedig próbáld ki a következő parancsot (és próbáld meg használni a saját adataidat): + + >>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} + + +Ezzel a paranccsal létrehoztál egy szótár-változót aminek a neve `participant`, és ami tartalmaz három kulcs-érték (key-value) párt: + +* A `name` kulcs az `'Ola'` értékre mutat (ami egy `string` típusú objektum), +* `country` a `'Poland'`-ra mutat (szintén `string` típusú), +* és `favorite_numbers` a `[7, 42, 92]` objektumra mutat (ami egy `lista` benne három elemmel). + +Lekérdezheted az egyes kulcsokhoz tartozó értékeket a következő szintaxist használva: + + >>> print(participant['name']) + Ola + + +Látod, nagyon hasonlít a listákhoz. Csak épp nem kell indexeket megjegyezned - csupán neveket. + +Vajon mi történik, ha olyan kulcshoz tartozó értéket kérdezünk le a Pythontól, ami nem létezik? Nézzük meg! + + >>> participant['age'] + Traceback (most recent call last): + File "", line 1, in + KeyError: 'age' + + +Jéé, egy újabb hiba! Ezúttal **KeyError**. A Python segítőkész, és megmondja, hogy az `'age'` kulcsnál nem található érték a szótárban. + +Mikor használjunk szótárakat és mikor listákat? Nos, ez egy érdekes kérdés. Gondolkozz el egy kicsit, és próbáld meg magadtól kitalálni, mielőtt elolvasod az alábbi választ. + +* Csak elemek rendezett sorozatára van szükséged? Használj listát. +* Kulcs és érték párokra van szükséged, amiket majd le tudsz kérdezni hatékonyan (kulcs alapján)? Használj szótárat. + +A szótárak, ugyanúgy mint a listák, *módosíthatók*, ami azt jelenti, hogy az objektumot meg lehet változtatni létrehozás után. Hozzá lehet adni egy kulcs-érték párt a szótárhoz a létrehozása után, pl: + + >>> participant['favorite_language'] = 'Python' + + +Ugyanúgy, mint a listáknál, a `len()` metódus visszaadja a szótár hosszát, azaz a kulcs-érték párok számát. Rajta, próbáld ki a következő parancsot: + + >>> len(participant) + 4 + + +Remélem most már világos :) Készen állsz az újabb mókára a szótárakkal? Ugorj a következő sorhoz, és láss lenyűgöző dolgokat. + +Használd a `pop()` parancsot, hogy kitörölj egy elemet a szótárból. Mondjuk ki akarod törölni a `'favorite_numbers'` kulcsnál található elemet. Csak írd be a következőt: + + >>> participant.pop('favorite_numbers') + >>> participant + {'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} + + +Amint azt a kimenetből látod, a 'favorite_numbers' kulcshoz tartozó elem eltűnt a szótárból. + +Az előbbihez hasonlóan, meg is tudod változtatni egy kulcsnál a hozzá tartozó értéket a szótárban. Írd ezt: + + >>> participant['country'] = 'Germany' + >>> participant + {'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} + + +Amint látod, a `'country'` kulcsnál levő érték megváltozott `'Poland'`-ról `'Germany'`-ra. :) Izgalmas, ugye? Hurrá! Most ismét tanultál egy nagyszerű dolgot. + +### Összefoglaló + +Nagyszerű! Most már tudsz egy csomó mindent a programozásról. Ebben az utolsó részben a következőkről tanultál: + +* **hibák** - tudod, hogyan olvasd és értsd meg a hibákat, amiket a Python ad, amikor nem tudja értelmezni a parancsodat +* **változók** - nevek az objektumokhoz, hogy a kód könnyebben írható és könnyebben olvasható legyen +* **listák** - lista meghatározott sorrendben lévő objektumokból +* **szótárak** - objektumok, amiket kulcs-érték párokként tárolunk + +Felkészültél a következő részre? :) + +## Dolgok összehasonlítása + +A számítástechnikában nagyon fontos, hogy össze tudjunk hasonlítani dolgokat. Mik a legegyszerűbb dolgok, amiket össze tudunk hasonlítani? Hát a számok. Nézzük meg ez hogy működik: + + >>> 5 > 2 + True + >>> 3 < 1 + False + >>> 5 > 2 * 2 + True + >>> 1 == 1 + True + >>> 5 != 2 + True + + +Adtunk a Pythonnak néhány számot, hogy összehasonlítsa azokat. Amint látod, a Python nem csak számokat, de műveleti eredményeket is össze tud hasonlítani. Jó, ugye? + +Azon gondolkozol, miért kellett két egyenlőség jelet `==` tenni, amikor azt néztük, hogy két szám egyenlő-e? Az egyetlen `=` jelet arra használjuk, hogy a változóknak értéket adjunk. Mindig, de **mindig** két `==` jelet kell használni ha két dolog egyenlőségét akarod tesztelni. Azt is ki tudjuk fejezni, hogy két dolog nem egyenlő. Erre a `!=` szimbólumot használjuk, amint az alábbi példában is. + +Adj a Pythonnak két új parancsot: + + >>> 6 >= 12 / 2 + True + >>> 3 <= 2 + False + + +A `>` és a `<` egyszerűek, de vajon a `>=` és a `<=` mit jelentenek? Ezeket úgy kell olvasni, hogy: + +* x `>` y azt jelenti: x nagyobb, mint y +* x `<` y azt jelenti: x kisebb, mint y +* x `<=` y azt jelenti: x kisebb vagy egyenlő y-nal +* x `>=` y azt jelenti: x nagyobb vagy egyenlő y-nal + +Nagyszerű! Szeretnél még egy példát? Próbáld ki ezt: + + >>> 6 > 2 and 2 < 3 + True + >>> 3 > 2 and 2 < 1 + False + >>> 3 > 2 or 2 < 1 + True + + +Annyi összehasonlítást kombinálhatsz össze, amennyit csak akarsz, és a Python kiszámolja az eredményt. Okos, ugye? + +* **and** (azaz: és) - amikor az `and` operátort használod, a kifejezés mindkét oldalán igaz értéknek kell állnia ahhoz, hogy az eredmény igaz legyen +* **or** (azaz: vagy) - amikor az `or` operátort használod, elég csak az egyik oldalon igaz értéknek állnia ahhoz, hogy az eredmény igaz legyen + +Hallottad már azt a kifejezést hogy "almákat narancsokkal összehasonlítani"? Nézzük meg ennek a python-beli megfelelőjét: + + >>> 1 > 'django' + Traceback (most recent call last): + File "", line 1, in + TypeError: '>' not supported between instances of 'int' and 'str' + + +Láthatod, hogy ugyanúgy, mint a kifejezéseknél, a Python nem tudja összehasonlítani a számot (`int`) a stringgel (`str`). Ehelyett **TypeError** típusú hibát dob, azaz megmondja, hogy két különböző típust nem lehet egymással összehasonlítani. + +## Boolean (Logikai) + +Véletlenül épp megismerkedtél egy újabb Python típussal. Úgy hívják: **Boolean** -- és valószínűleg ez a legegyszerűbb típus ami létezik. + +Egy Boolean objektum két lehetséges értéket vehet fel: - Igaz - Hamis + +De ahhoz, hogy a Python megértse, pontosan így kell írni: 'True' (az első betű nagybetű, a többi kisbetű). **true, TRUE, tRUE mind nem jók -- csak az True helyes.** (És ugyanígy a 'False' esetében) + +A Booleanok is lehetnek változók! Nézd: + + >>> a = True + >>> a + True + + +Sőt, ezt is írhatod: + + >>> a = 2 > 5 + >>> a + False + + +Gyakorold egy kicsit és játssz a Booleanokkal, pl próbáld ki a következő parancsokat: + +* `True and True` +* `False and True` +* `True or 1 == 1` +* `1 != 2` + +Gratulálunk! A Booleanok a programozás egyik legmenőbb elemei, és te épp megtanultad használni őket! + +# Mentsd el! + +Egész mostanig a python interpreterbe írkáltuk a parancsokat, ami arra korlátoz minket hogy, egyszerre csak egy sort írjunk. A gyakorlatban a programokat fájlba mentjük, és utána futtatjuk a programnyelv **interpreter**-e vagy **compiler**-e révén. Mi mindeddig a Python **interpreter**-ével futtatuk a programjainkat, soronként. A következő feladatokhoz többsoros programokra is szükségünk lesz, úgyhogy gyorsan: + +* Lépjünk ki a Python interpreterből +* Nyissunk meg egy kódszerkesztőt +* Mensünk el benne valami kódot egy python fájlba +* És futtassuk! + +Ahhoz hogy kilépjünk a Python interpreterből, egyszerűen írjuk be, hogy `exit()`: + + >>> exit() + $ + + +Ezzel visszatértünk a parancssorba. + +Egy előző részben már kiválasztottuk a kedvenc [kódszerkesztő][2]nket. Most nyissuk meg az editort és az új üres fájlba írjuk bele: + + [2]: ../code_editor/README.md + +```python + print('Hello, Django girls!') +``` + +Mostanra már tapasztalt Python programozó lettél, úgyhogy írj valami kódot, amit ma tanultál. + +Most mentsük el a fájlt, és adjunk neki valami jellemző nevet. Nevezzünk **python_intro.py**-nak, és mentsük el a desktopra. Bárhogy nevezhetjük a fájlt, de a kiterjesztés fontos, hogy **.py** legyen. A **.py** kiterjesztés megmondja az operációs rendszerünknek, hogy **python futtatható programfájl**-lal van dolga. + +> **Megj.** Vegyük észre a kód editorok legnagyszerűbb tulajdonságát: a színeket! A Python konzolban minden egyszínű volt, most a `print` függvény más színű, mint a string. Ezt úgy hívják: "syntax highlighting" (szintaxis-kiemelés), és kódoláshoz nagyon hasznos. A kód színe mindenféle utalásokat hordoz magában, pl. egy lezáratlan string vagy egy elírás egy kulcsszó nevében (pl. a `def` a függvényeknél, amint látni fogjuk mindjárt). Ez az egyik oka annak, hogy kódszerkesztőt használuk :) + +Most hogy a fájl el van mentve, itt az ideje, hogy lefuttassuk. Felhaszálva a tudásodat a parancssoros részből, navigálj a terminálban a desktopra a **könyvtárváltás** parancs segítségével. + + + +Mac-en a parancs valahogy így néz ki: + +{% filename %}parancssor{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + +Linuxon így (A "Desktop" lehet, hogy le van fordítva a te nyelvedre): + +{% filename %}parancssor{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + + +Windowson így néz ki: + +{% filename %}parancssor{% endfilename %} +``` +> cd %HomePath%\Desktop +``` + + + + +Ha megakadtál volna, kérj nyugodtan segítséget. + +Most pedig futtasd le a Python kódot, így: + +{% filename %}parancssor{% endfilename %} +``` +$ python3 python_intro.py +Hello, Django girls! +``` + +Note: Windows-on 'python3' néven nem található parancs. Helyette használd a 'python' néven: + +{% filename %}parancssor{% endfilename %} +```python +> python python_intro.py +``` + +Rendben! Épp lefuttattad az első Python programodat fájlból. Jó érzés, ugye? + +Most akkor továbbmehetünk egy újabb kulcsfontosságú programozási elemre: + +## If...elif...else + +Sokszor előfordul a programozásban, hogy egyes kódrészleteknek csak akkor kell lefutniuk, ha bizonyos feltételek teljesülnek. Ezért vannak a Pythonban az **if statement**ek (if állítások). + +Cseréld ki a **python_intro.py** fájlban lévő kódot erre: + +```python + if 3 > 2: +``` + +Ha ezt elmented és lefuttatod, ezt a hibaüzenetet fogod látni: + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +A Python arra számít, hogy további utasításokat kap arra az esetre, ha a `3 > 2` teljesül, vagyis `True` lesz. Vegyük rá a Pythont, hogy kiírja: "It works!" ("Működik!"). Változtasd meg erre a **python_intro.py** fájlban lévő kódot: + +```python + if 3 > 2: + print('It works!') +``` + +Megfigyelted, hogy a következő sort 4 szóközzel indentáltuk? Erre azért van szükség, hogy a Python tudja, melyik kódrészletet kell lefuttatnia, ha a feltétel teljesül. Egy szóközt is használhatnál, de szinte az összes Python programozó 4 szóközt használ, hogy rendezetten nézzen ki a kód. Egy `tab` is 4 szóköznek számít. + +Mentsd el, és futtasd le még egyszer: + + $ python3 python_intro.py + It works! + +Note: Emlékezz arra, hogy Windows-on, 'python3' néven nem található parancs. Ha nálad is ez a helyzet, mostantól helyettesítsd 'python3'-t 'python'-al a file-ok futtatásához. + +### Mi történik, ha egy feltétel nem teljesül (vagyis nem True)? + +A korábbi példákban a kód csak akkor futott le, ha a feltétel teljesült. De a Pythonnak van `elif` és `else` statementje is: + +```python + if 5 > 2: + print('5 is indeed greater than 2') + else: + print('5 is not greater than 2') +``` + +Ha ezt lefuttatod, a következőt kapod: + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +Ha a 2 nagyobb lenne, mint az 5, a második parancs futott volna le. Egyszerű, igaz? Nézzük, hogy működik az `elif`: + +```python + name = 'Sonja' + if name == 'Ola': + print('Hey Ola!') + elif name == 'Sonja': + print('Hey Sonja!') + else: + print('Hey anonymous!') +``` + +lefuttatva: + + $ python3 python_intro.py + Hey Sonja! + + +Látod, mi történt itt? Az `elif` arra jó, hogy plusz feltételeket írhass a kódodba, ami akkor fut le, ha a korábbi feltételek nem teljesülnek. + +Az első `if` statement után annyi `elif` állítást írhatsz, amennyit csak akarsz. Például: + +```python + volume = 57 + if volume < 20: + print("It's kinda quiet.") + elif 20 <= volume < 40: + print("It's nice for background music") + elif 40 <= volume < 60: + print("Perfect, I can hear all the details") + elif 60 <= volume < 80: + print("Nice for parties") + elif 80 <= volume < 100: + print("A bit loud!") + else: + print("My ears are hurting! :(") +``` + +A Python sorban mindegyik feltételt megnézi, és kiírja: + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## Megjegyzések + +A megjegyzések olyan sorok amelyek `#`-el kezdődnek. Bármit beírhatsz a `#` után, és Python figyelmen kívül fogja hagyni. Megjegyzések segíthetnek abban hogy a kódod mások számára érthető legyen. + +Lássuk, hogyan néz ki: + +{% filename %}python_intro.py{% endfilename %} +```python +# Hangerő beállítása, ha túl hangos vagy túl halk +if volume < 20 or volume > 80: + volume = 50 + print("That's better!") +``` + +Nem kell minden sorhoz megjegyzést írnod, de nagyon hasznosak annak elmagyarázásához hogy miért csinál valamit a kódod, vagy hogy összefoglalót nyújtson amikor valami bonyolult feladatot végez. + +### Összefoglaló + +Az előző három feladatban ezekről tanultál: + +* __dolgok összehasonlítása__ - Pythonban a `>`, `>=`, `==`, `<=`, `<` jelekkel, és az `and`, `or` operátorokkal hasonlíthatsz össze dolgokat +* __Boolean__ - egy olyan fajta objektum, ami csak két értéket vehet fel: `True` vagy `False` +* __Fájlok elmentése__ - a kódot fájlokban is tárolhatod, így hosszabb programokat is lefuttathatsz. +* __if...elif...else__ - állítások, amik arra jók, hogy a kód csak bizonyos feltételek teljesülése esetén fusson le. +- __comments__ - sorok, amelyeket Python nem futtat le, amelyekkel dokumentálni tudod a kódodat. + +Elérkeztünk a fejezet utolsó részéhez! + +## A saját függvényeidhez! + +Emlékszel például a `len()` fügvényre, amit lefuttathatsz Pythonban? Jó hírünk van - most megtanulod, hogyan írhatsz saját függvényeket! + +A függvény utasítások sorozata, amit a Python lefuttat. Minden Python függvény a `def` kulcsszóval kezdődik, van neve, és lehetnek paraméterei. Kezdjük egy könnyűvel. Cseréld ki a **python_intro.py** kódját erre: + +```python + def hi(): + print('Hi there!') + print('How are you?') + + hi() +``` + +Oké, kész is az első függvény! + +Talán elgondolkodtál, miért írtuk a függvény nevét a fájl aljára. Erre azért van szükség, mert a Python felülről lefelé olvassa be és futtatja le a fájlt. Tehát ahhoz, hogy használni tudjuk a függvényünket, újra le kell írnunk a fájl alján. + +Futtassuk le, és nézzük meg, mi történik: + + $ python3 python_intro.py + Hi there! + How are you? + +Megjegyzés: ha nem működött, ne ess pánikba! A hibaüzenet segít kitalálni, hogy mi a baj: +- Ha `NameError`-t kapsz, valószinűleg valamit elgépeltél, ellenőrizd, hogy ugyan azt a nevet használtad amikor létrehoztad a függvényt `def hi():`-al és amikor meghívtad `hi()`-al. +- Ha `IndentationError` hibát kapsz, ellenőrizd, hogz mind a két `print` sor elején azonos mennyiségű üres hely (szóköz karakter) van: python számára a függvényen bellüli összes kódnak szépen illesztve kell lennie. +- Ha nincs egyáltalán semmilyen kimenet, ellenőrizd hogy az utolsó `hi()` *nincs* indentálva - ha így lenne, az a sor is a függvény része lesz és ezért soha nem fog lefutni. + +Most írjuk meg az első olyan függvényt, aminek vannak paraméterei. Az előző példát fogjuk használni - egy függvény, ami köszön annak, aki futtatja, de most nevet is adunk hozzá: + +```python + def hi(name): +``` + +Ahogy láthattad, a függvény most kapott egy paramétert, amit `name`-nek hívunk: + +```python + def hi(name): + if name == 'Ola': + print('Hi Ola!') + elif name == 'Sonja': + print('Hi Sonja!') + else: + print('Hi anonymous!') + + hi() +``` + +Fontos: a `print` függvény 4 szóközzel van indentálva az `if` statementen belül. Erre azért van szükség, hogy ez a függvény a feltétel teljesülése esetén fusson le. Nézzük, hogy működik: + + $ 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' + + +Hoppá, egy hiba. Szerencsére a Python elég hasznos hibaüzeneteket ad nekünk. Azt mondja, a `hi()` függvénynek (vagyis annak, amit az előbb definiáltunk) egy kötelező paramétere van (amit `name`-nek hívnak), és ezt elfelejtettük beadni, amikor meghívtuk a függvényt. Javítsuk ki a fájl alján: + +```python + hi("Ola") +``` + +És futtassuk le újra: + + $ python3 python_intro.py + Hi Ola! + + +És ha megváltoztatjuk a nevet? + +```python + hi("Sonja") +``` + +Futtasd le: + + $ python3 python_intro.py + Hi Sonja! + + +Mit gondolsz, mi fog történni, ha egy harmadik nevet írsz be? Próbáld ki, és nézd meg, jól gondoltad-e. Ezt kell kapnod: + + Hi anonymous! + + +Ez fantasztikus, nem? Így nem kell állandóan ismételned magad, ha meg szeretnéd változtatni az ember nevét, akinek a függvény köszön. Pont emiatt van szükségünk függvényekre - soha ne ismételd meg a kódodat! + +Most csináljunk valami okosabbat - több mint két név van a világon, és nehéz lenne mindegyikhez egy külön feltételt írni, nem? + +```python + def hi(name): + print('Hi ' + name + '!') + + hi("Rachel") +``` + +Most hívjuk meg a kódot: + + $ python3 python_intro.py + Hi Rachel! + + +Gratulálunk! Megtanultad, hogy kell függvényeket írni :) + +## Ciklusok (loopok) + +Ez már tényleg az utolsó rész. Gyors volt, nem igaz? :) + +A programozók nem szeretik ismételni magukat. A programozás arról szól, hogy dolgokat automatizáljunk, így nem kell minden alkalommal kézzel beírni mindenkinek a nevét, akit üdvözölni akarunk. Ilyenkor jönnek jól a ciklusok. + +Még emlékszel a listákra? Írjunk egy listát lányokból: + +```python + girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Mindegyiküket üdvözölni szeretnénk. Ehhez már megvan a `hi` függvényünk, tegyük bele egy loopba: + +```python + for name in girls: +``` + +A ```for``` statement hasonlóan működik, mint az ```if``` statement; mindkettő alatt 4 szóközzel kell indentálni a következő sort. + +Itt a teljes kód, ami a fájlban lesz: + +```python + def hi(name): + print('Hi ' + name + '!') + + girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] + for name in girls: + hi(name) + print('Next girl') +``` + +És amikor futtatjuk: + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +Amint láthattad, minden, amit indentálva a `for` statementbe tettél, megismétlődik a `girls` lista minden elemével. + +A `for`-t számokon is használhatod, a `range` függvénnyel: + + for i in range(1, 6): + print(i) + + +Ezt kapjuk: + + 1 + 2 + 3 + 4 + 5 + + +A `range` függvény létrehoz egy egymás után következő számokból álló listát (ezeket a számokat te adod meg paraméterként). + +Figyeld meg, hogy a két szám közül a második már nincs benne a listában, amit a Python visszaad (vagyis a `range(1, 6)` 1-től 5-ig számol, de nem tartalmazza a 6-ot). Ez azért van, mert a "range" félig nyitott, ez pedig azt jelenti, hogy az első értéket tartalmazza, de az utolsót már nem. + +## Összefoglaló + +Meg is vagyunk. **Szuper vagy!** Ez egy nehéz fejezet volt, büszke lehetsz magadra. Mi nagyon büszkék vagyunk rád, amiért idáig eljutottál! + +Most talán tarthatnál egy kis szünetet - nyújtózkodj, sétálj egy kicsit, pihentesd a szemeidet - mielőtt továbbmennénk a következő fejezetre. :) + +![Cupcake][3] + + [3]: images/cupcake.png diff --git a/hu/python_introduction/images/cupcake.png b/hu/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/hu/python_introduction/images/cupcake.png differ diff --git a/hu/template_extending/README.md b/hu/template_extending/README.md new file mode 100644 index 00000000000..1f4b3990c70 --- /dev/null +++ b/hu/template_extending/README.md @@ -0,0 +1,122 @@ +# Template-kiegészítés + +Egy másik szuper dolog, amit a Django tud, a **template extending**, vagyis template-kiegészítés. Mit jelent ez? Azt, hogy a HTML-ed egyes részeit több oldalon is fel tudod használni az alkalmazásodban. + +Így nem kell megismételned magad minden fájlban, ha ugyanazt az információt szeretnéd felhasználni, vagy ugyanolyan layout-ot tervezel. És ha meg szeretnél változtatni valamit, nem kell minden sablonban külön megtenned, csak egyszer! + +## Hozd létre az alap template-et + +A base (alap) template a legegyszerűbb sablon, amit az alkalmazásod összes oldalán kiegészítesz. + +Hozz létre egy `base.html` fájlt a `blog/templates/blog/`-ban: + + blog + └───templates + └───blog + base.html + post_list.html + + +Majd nyisd meg, és másolj át mindent a `post_list.html`-ből a `base.html`-be, így: + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Aztán a `base.html`-ben cseréld ki az egész ``-t (mindent a `` és a `` között) erre: + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +Lényegében a `{% for post in posts %}{% endfor %}` részt kicseréltük erre: + +```html +{% block content %} +{% endblock %} +``` + +Ez mit is jelent? Létrehoztál egy `block`-ot. Ez egy olyan template tag, amely segítségével HTML-t illeszthetsz be a blokkba más template-ekben, ezzel kiegészítve a `base.html`-t. Máris megmutatjuk, hogy működik. + +Most mentsd el, és nyisd meg újra a `blog/templates/blog/post_list.html`-t. Törölj ki mindent a body-n kívül, és a `
` részt is, hogy így nézzen ki a fájl: + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +És most add hozzá ezt a sort a fájl elejéhez: + + {% extends 'blog/base.html' %} + + +{% raw %}Ez azt jelenti, hogy most a `base.html` template-et egészítjük ki a `post_list.html`-ben. Már csak egy dolog van hátra: az előző sor kivételével rakj mindent `{% block content %}` és `{% endblock %}` közé. Így:{% endraw %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Ez az! Nézd meg, hogy még mindig működik-e a weboldalad :) + +> Ha `TemplateDoesNotExists` (a template nem létezik) hibát kapsz, ami azt mondja, nincs `blog/base.html` fájlod, és fut a `runserver` a konzolban, próbáld meg leállítani (Ctrl+C-vel, vagyis egyszerre nyomd meg a Control és a C billentyűt) és indítsd el újra a `python manage.py runserver` paranccsal. \ No newline at end of file diff --git a/hu/whats_next/README.md b/hu/whats_next/README.md new file mode 100644 index 00000000000..1ce0d03b72a --- /dev/null +++ b/hu/whats_next/README.md @@ -0,0 +1,40 @@ +# Következő lépések + +Gratulálj magadnak! **Szuper vagy**. Nagyon büszkék vagyunk rád! <3 + +### És most? + +Tarts egy kis szünetet, és pihenj. Valami egészen hatalmas dolgot csináltál. + +Aztán majd ne felejtsd el: + +* Követni a Django Girlst [Facebook][1]on vagy [Twitter][2]en, hogy mindenről értesülj + + [1]: http://facebook.com/djangogirls + [2]: https://twitter.com/djangogirls + +### Tudunk-e ajánlani bármilyen tananyagot? + +Igen! Először is nézd meg a másik könyvünket, a [Django Girls Tutorial: Extensions][3]-t. + + [3]: https://tutorial-extensions.djangogirls.org + +Később megpróbálkozhatsz a lenti listában lévő anyagokkal is. Ezeket mind nagyon ajánljuk! + +- [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.11/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 diff --git a/hy/GLOSSARY.md b/hy/GLOSSARY.md new file mode 100644 index 00000000000..800d5339124 --- /dev/null +++ b/hy/GLOSSARY.md @@ -0,0 +1,3 @@ +# code editor + +Code editor- ը ծրագիր է, որը թույլ է տալիս պահպանել ձեր կոդը, որպեսզի հետագայում կկարողանաք վերադառնալ դրան: Դուք կարող եք իմանալ, թե որտեղից կարելի է այն ձեռք բերել [ Code editor chapter ](./code_editor/README.md) \ No newline at end of file diff --git a/hy/README.md b/hy/README.md new file mode 100644 index 00000000000..86243645c21 --- /dev/null +++ b/hy/README.md @@ -0,0 +1,51 @@ +# Django Girls ձեռնարկը + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Այս աշխատանքը լիցենզավորված է Creative Commons Attribution-ShareAlike 4.0 միջազգային լիցենզիայով: Այս արտոնագրի պատճենը դիտելու համար այցելեք https://creativecommons.org/licenses/by-sa/4.0/ + +## Բարի գալուստ + +Բարի գալուստ Django Girls ձեռնարկը: Մենք ուրախ ենք ձեզ այստեղ տեսնել: :) Այս ձեռնարկի ընթացքում մենք ձեզ ճանապարհորդելու ենք վեբ տեխնոլոգիաների տակ, առաջարկելով ձեզ մի ակնարկ այն բոլոր կտորների մասին, որոնք անհրաժեշտ է միավորել, որպեսզի համացանցն աշխատի այնպես, ինչպես մենք գիտենք: + +Ինչպես բոլոր անհայտ բաների դեպքում, սա էլ կլինի արկածախնդրություն, բայց ոչ մի անհանգստություն, քանի որ դուք արդեն համարձակություն եք գործադրել այստեղ լինելու համար, լավ կլինեք: :) + +## Ներածություն + +Երբևէ զգացե՞լ եք, որ աշխարհն ավելի ու ավելի շատ է վերաբերում այն ​​տեխնոլոգիային, որի հետ (դեռ չեք կարող) առնչվել: Երբևէ մտածե՞լ եք, թե ինչպես ստեղծել կայք, բայց երբևէ բավարար շարժառիթ չի՞ ունեցել գործելու: Երբևէ մտածե՞լ եք, որ ծրագրակազմի աշխարհը չափազանց բարդ է ձեզ համար, որպեսզի փորձեք նույնիսկ ինքնուրույն ինչ-որ բան անել: + +Դե, մենք լավ լուր ունենք ձեզ համար: Ծրագրավորումն այնքան էլ դժվար չէ, որքան թվում է, և մենք ուզում ենք ցույց տալ, թե որքան զվարճալի կարող է լինել: + +Այս ձեռնարկը կախարդական կերպով չի վերածի ձեզ ծրագրավորողի: Եթե ​​ցանկանում եք դրանում լավ տիրապետել, ձեզ հարկավոր են ամիսներ կամ նույնիսկ տարիներ սովորել և պրակտիկայով զբաղվել: Բայց մենք ուզում ենք ձեզ ցույց տալ, որ կայքերի ծրագրավորումը կամ ստեղծումը այնքան էլ բարդ չէ, որքան թվում է: Մենք կփորձենք բացատրել տարբեր կտորներ և կտորներ, ինչպես կարող ենք, այնպես որ դուք ձեզ ահաբեկված չեք զգա տեխնոլոգիայից: + +Հուսով ենք, որ կկարողանանք այնպես անել, որ դուք սիրեք տեխնոլոգիան, ինչպես մեզ: + +## Ի՞նչ կսովորեք ձեռնարկի ընթացքում: + +Ձեռնարկն ավարտելուց հետո դուք կունենաք մի փոքր աշխատող վեբ հավելված ՝ ձեր սեփական բլոգը: Մենք ձեզ ցույց կտանք, թե ինչպես տեղադրել այն առցանց, այնպես որ մյուսները կտեսնեն ձեր աշխատանքը: + +Դա (քիչ թե շատ) այսպիսի տեսք կունենա. + +![Figure 0.1](images/application.png) + +> Եթե ​​ինքնուրույն աշխատում եք ձեռնարկի հետ և չունեք մարզիչ, որը կօգնի ձեզ ցանկացած խնդրի դեպքում, մենք ձեզ համար ունենք չաթ համակարգ ՝ [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg) ](https://gitter.im/DjangoGirls/tutorial): Մենք խնդրեցինք մեր մարզիչներին և նախորդ մասնակիցներին ժամանակ առ ժամանակ այնտեղ գտնվել և օգնել ուրիշներին ձեռնարկի միջոցով: Մի վախեցեք այնտեղ ձեր հարցը տալուց: + +Լավ, [ եկեք սկսենք ամենասկզբից… ](./how_the_internet_works/README.md) + +## Տանը ձեռնարկին հետեւելը + +Հիանալի է մասնակցել Django Girls սեմինարին, բայց մենք տեղյակ ենք, որ միշտ չէ, որ հնարավոր է մեկին մասնակցել: Ահա թե ինչու մենք ձեզ խրախուսում ենք փորձել հետեւել այս ձեռնարկին տանը: Ընթերցողների համար տանը մենք ներկայումս պատրաստում ենք տեսանյութեր, որոնք ավելի հեշտ կդարձնեն ձեռնարկին ինքնուրույն հետևելը: Դա դեռ ընթացքի մեջ է, բայց շուտով ավելի ու ավելի շատ բաներ լուսաբանվելու են [ Կոդավորումը աղջիկների համար ](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) YouTube ալիքում: + +Արդեն լուսաբանված յուրաքանչյուր գլխում կա մի հղում, որը մատնանշում է ճիշտ տեսանյութը: + +## Մասին և ներդրում + +Այս ձեռնարկը վարում է [ DjangoGirls ](https://djangogirls.org/) - ը: Եթե ​​սխալներ եք հայտնաբերել կամ ցանկանում եք թարմացնել ձեռնարկը, խնդրում ենք [ հետևել ներդրվող ուղեցույցներին ](https://github.com/DjangoGirls/tutorial/blob/master/README.md): + +## Կցանկանայի՞ք մեզ օգնել ձեռնարկը թարգմանել այլ լեզուներով: + +Ներկայումս թարգմանությունները պահվում են crowdin.com հարթակում ՝ + +https://crowdin.com/project/django-girls-tutorial + +Եթե ​​ձեր լեզուն նշված չէ [ crowdin- ի ](https://crowdin.com/) վրա, խնդրում ենք [ բացել նոր թողարկում ](https://github.com/DjangoGirls/tutorial/issues/new) ՝ տեղեկացնելով մեզ լեզվի մասին, որպեսզի կարողանանք ավելացնել այն: \ No newline at end of file diff --git a/hy/SUMMARY.md b/hy/SUMMARY.md new file mode 100644 index 00000000000..b95ca764cf9 --- /dev/null +++ b/hy/SUMMARY.md @@ -0,0 +1,35 @@ +# Ամփոփում + +* [Ներածություն](README.md) +* [Installation (Տեղադրում)](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) +* [Ինչպես է աշխատում ինտերնետը](how_the_internet_works/README.md) +* [ Command line-ի (Հրամանի տողի) ներածություն](intro_to_command_line/README.md) +* [Python- ի տեղադրում](python_installation/README.md) +* [Կոդի խմբագիր](code_editor/README.md) +* [Ներածություն Python- ին](python_introduction/README.md) +* [ Ի՞նչ է Django- ն:](django/README.md) +* [ Django- ի տեղադրում](django_installation/README.md) +* [Ձեր առաջին Django նախագիծը:](django_start_project/README.md) +* [Django մոդելներ](django_models/README.md) +* [ Django ադմին](django_admin/README.md) +* [Deploy!](deploy/README.md) +* [Django URLs](django_urls/README.md) +* [ Django views- Ստեղծագործելու ժամանակն է:](django_views/README.md) +* [ HTML- ի ներածություն](html/README.md) +* [ Django ORM (Querysets)](django_orm/README.md) +* [Դինամիկ տվյալներ կաղապարներում](dynamic_data_in_templates/README.md) +* [ Django templates (կաղապարներ)](django_templates/README.md) +* [ CSS - դարձրեք այն գեղեցիկ](css/README.md) +* [Template extending](template_extending/README.md) +* [ Ընդլայնել ձեր դիմումը](extend_your_application/README.md) +* [Django Forms](django_forms/README.md) +* [ Ի՞նչ է հաջորդը](whats_next/README.md) \ No newline at end of file diff --git a/hy/chromebook_setup/README.md b/hy/chromebook_setup/README.md new file mode 100644 index 00000000000..e3f529a8c5f --- /dev/null +++ b/hy/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook տեղադրում + +> ** Նշում ** Եթե դուք արդեն աշխատել եք [installation steps](../installation/README.md) (ներբեռնման), ապա այլևս կարիգ չկա դա կրկնել. կարող եք անմիջապես անցնել [Introduction to Python](../python_introduction/README.md) (Python- ի Ներածություն) բաժնին: + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/hy/chromebook_setup/instructions.md b/hy/chromebook_setup/instructions.md new file mode 100644 index 00000000000..8044c18601f --- /dev/null +++ b/hy/chromebook_setup/instructions.md @@ -0,0 +1,159 @@ +Եթե ​​Chromebook չեք օգտագործում, կարող եք անմիջապես անցնել այս բաժնի վրայով: Եթե ​​այո, ձեր տեղադրման փորձը մի փոքր այլ կլինի: Դուք կարող եք անտեսել այն տեղադրման հրահանգների մնացած հատվածը: + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Cloud IDE- ը գործիք է, որը Ձեզ տալիս է կոդերի խմբագրման և ինտերնետ համակարգչից օգտվելու հնարավորություն, որի վրա կարող ես տեղադրել, գրել և գործարկել ծրագրային ապահովումը: предоставляющий тебе редактор кода и доступ к компьютеру в интернете, на котором ты можешь установить, записать и выполнить программу. Այս դասընթացի շրջանակներում Cloud IDE-ին կօգտագործվի որպես Ձեր *տեղային գործիք *. Դուք աշխատելու եք տերմինալում (ինչպես և ձեր դասընկերները macOS- ում, Ubuntu- ում կամ Windows- ում), բայց ձեր տերմինալը միացված կլինելու այն համակարգչին, որը գտնվում է Նիդեռլանդներում կամ Գերմանիայում, որը cloud IDE- ը ստեղծել է հատուկ Ձեզ համար: Ահա ամպային IDE- ների ցուցումները (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com): Դուք կարող եք ընտրել ամպային IDE- ներից մեկը եւ հետեւեք IDE ամպի հրահանգին: + +#### PaizaCloud Cloud IDE + +1. Գնալ [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Ստեղծել account +3. Սեղմեք *New Server* և ընտրեք Django app +4. Սեղմեք Terminal կոճակը (պատուհանի ձախ կողմում) + +Այժմ դուք պետք է տեսնեք ինտերֆեյս՝ լուսանցքի նշումով և ձախ կողմում գտնվող կոճակներ: Կտտացրեք «Տերմինալ» կոճակին ՝ տերմինալի պատուհանը բացելու համար ՝ հետևյալ հաղորդագրությամբ. + +{% filename %}Terminal{% endfilename %} + + $ + + +PaizaCloud Cloud IDE- ի տերմինը պատրաստ է ձեր հրահանգներին: Կարող եք կրկնել կամ մեծացնել այդ պատուհանը, որպեսզի դա մի փոքր ավելի մեծ լինի: + +#### AWS Cloud9 + +Այժմ Cloud 9-ը պահանջում է, որ դուք գրանցվեք AWS համակարգով և մուտքագրեք կրեդիտ քարտի տվյալները: + +1. Ներբեռնեք Cloud 9-ը [ Chrome վեբ խանութից ](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Անցեք [c9.io](https://c9.io)էջին և կտտացրեք *Get started with AWS Cloud9* +3. Գրանցվել AWS հաշվի համար (պահանջվում է կրեդիտ քարտի տվյալները, բայց այն կարող եք օգտագործել անվճար) +4. AWS կառավարման վահանակում որոնման տողում մուտքագրեք * Cloud9 * և կտտացրեք այն +5. Cloud 9-ի կառավարման վահանակում կտտացրեք * Ստեղծել միջավայր * +6. Անվանեք այն django-girls +7. Պարամետրերը կազմելիս ընտրեք *Create a new instance for environment (EC2)* "Environment Type" -ի (շրջակա միջավայրի տեսակի) համար և * t2.micro * "Instance type"-ի (գործի տեսակի) համար: (այն պետք է թուլ տա "Free-tier eligible." (Ազատ օգտագործման իրավունք): Նախնական ծախսերի խնայողությունը կարգավորված է, և դուք կարող է պահպանել մյուս նախադրյալները: +8. Կտտացրեք * Next step * +9. Կտտացրեք * Create environment * + +Այժմ դուք պետք է տեսնեք ինտերֆեյս ՝ լուսանցքի նշումով, մեծ հիմնական պատուհան ՝ որոշակի տեքստով, իսկ ներքևի հատվածում փոքրիկ պատուհան, որն ունի նմանատիպ տեսք: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + + +Այս ստորին հատվածը ձեր տերմինալն է: Դուք կարող եք օգտագործել տերմինալը հրահանգներ ուղարկելու համար հեռավար Cloud 9 համակարգչին: Կարող եք փոփոխել այդ պատուհանի չափերը այն մի փոքր մեծացնելով: + +#### Glitch.com Cloud IDE + +1. Գնացեք [ Glitch.com ](https://glitch.com/) +2. Գրանցվեք հաշվի համար (https://glitch.com/signup) կամ օգտագործեք ձեր GitHub հաշիվը, եթե ունեք: (Տե՛ս GitHub- ի ցուցումները ստորև): +3. Սեղմեք * New Project (Նոր նախագիծ )* և ընտրեք * hello-webpage (բարև-կայք) * +4. Սեղմեք «Գործիքներ» ցանկի ցուցակի վրա (պատուհանի ներքևի ձախ կողմում), ապա «Տերմինալ» կոճակին ՝ տերմինալի ներդիրը բացելու համար ՝ այսպիսի հուշմամբ. + +{% filename %}Terminal{% endfilename %} + + app@name-of-your-glitch-project:~ + + +Glitch.com- ը որպես Cloud IDE օգտագործելիս անհրաժեշտ չէ վիրտուալ միջավայր ստեղծել: Փոխարենը, ձեռքով ստեղծեք հետևյալ ֆայլերը. + +{% 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 +``` + +Այս ֆայլերը ստեղծվելուց հետո անցեք Տերմինալ և կատարեք հետևյալ հրամանները ՝ ձեր առաջին Django նախագիծը ստեղծելու համար. + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +Որպեսզի մանրամասն սխալի հաղորդագրություններ տեսնեք, կարող եք ակտիվացնել Django debug/Django կարգաբերման տեղեկամատյանները ձեր Glitch հավելվածի համար: Պարզապես ավելացրեք հետևյալը `mysite/settings.py` ֆայլի վերջում: + +{% 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, + }, + }, +} +``` + +Սա կստեղծի ` debug.log ` ֆայլ, որը մանրամասնում է Django- ի գործողությունները և ցանկացած սխալ հաղորդագրություններ, որոնք կարող են ի հայտ գալ, շատ ավելի հեշտ դարձնելով դրանց շտկումը, եթե ձեր կայքը չի աշխատում: + +Glitch նախագծի նախնական վերագործարկումը պետք է ձախողվի: (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. + +### Virtual Environment + +(Virtual environment) Վիրտուալ միջավայրը (որը կոչվում է նաև virtualenv) նման է մեր անձնական տուփի. մենք կարող ենք ավելացնել օգտակար համակարգչային ծածկագիր (code) այն նախագծի համար, որի շուրջ մենք աշխատում ենք: Մենք օգտագործում ենք դրանք, որպեսզի պահպանենք տարբեր ծածկագրերի կոդերի մասնիկներ առանձին, այնպես որ դրանք չխառնվեն այլ նախագծերի հետ: + +Run: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(նշենք, որ վերջին տողի վրա մենք օգտագործում ենք ալիք, որին հաջորդում է հավասար նշանը ՝ ` ~ = `): + +### GitHub + +Ստեղծեք GitHub հաշիվ: + +### PythonAnywhere + +Django Girls ձեռնարկը ներառում է բաժին այն մասին, թե ինչ է կոչվում Տեղակայում/Deployment-ը որը ձեր նոր վեբ հավելվածն աշխատեցնող ծածկագիր ստանալու գործընթացն է և տեղափոխումն այն հանրությանը հասանելի համակարգիչ (կոչվում է սերվեր/server) և այլն մարդիկ կարող են տեսնել ձեր աշխատանքը: + +Այս բաժինը մի փոքր տարօրինակ է, երբ մեզ մոտ Chromebook է, քանի որ մենք արդեն օգտագործում ենք համակարգիչ, որը գտնվում է ինտերնետային տիրույթում (ի տարբերություն, ասենք, նոութբուքի): Այնուամենայնիվ, այն դեռ օգտակար է, քանի որ մենք կարող ենք մեր Cloud 9 -ի աշխատանքային տարածքը համարել որպես «ընթացքի մեջ»/"in progress" գտնվող աշխատանքների տիրույթ, իսկ Python Anywhere-ը ՝ պատրաստի աշխատանքները ցուցադրելու տիրույթ, քանի որ այն ավելի ամբողջական տեսք ունի: + +Այսպիսով, գրանցվեք Python Anywhere նոր հաշվի համար ՝ [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/hy/code_editor/README.md b/hy/code_editor/README.md new file mode 100644 index 00000000000..6c2d23cd2d7 --- /dev/null +++ b/hy/code_editor/README.md @@ -0,0 +1,11 @@ +# Code editor + +> Տնային ուսուցման համար. Այս գլուխն ընդգրկված է [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) video.(Python-ի և տեքստի խմբագրի ծրագրերի ներբեռնումը: + +Դուք պատրաստվում եք գրել ձեր առաջին ծածկագիրը (cod-ը), այնպես որ ժամանակն է ներբեռնել ծածկագրի խմբագիր: + +> **Հավելում** :Եթե Chromebook եք օգտագործում, բաց թողեք այս գլուխը և համոզվեք, որ հետևում եք [Chromebook Setup](../chromebook_setup/README.md) (Chromebook- ի կարգավորման) հրահանգներին: Ձեր ընտրած ամպի IDE- ն (PaizaCloud Cloud IDE կամ AWS Cloud9) պարունակում է կոդի խմբագիր, և երբ ձեր IDE- ում ֆայլ եք բացում File ընտրացանկից, դուք ավտոմատ կերպով օգտագործում եք խմբագիր: +> +> Նշում. գուցե դուք դա արել եք ավելի վաղ [Installation chapter](../installation/README.md) (տեղադրման գլխում). Եթե այո, ապա կարող եք անմիջապես անցնել հաջորդ գլխին: + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/hy/code_editor/instructions.md b/hy/code_editor/instructions.md new file mode 100644 index 00000000000..7fc915875d8 --- /dev/null +++ b/hy/code_editor/instructions.md @@ -0,0 +1,37 @@ +Կան շատ տարբեր խմբագիրներ, և դա հիմնականում կախված է անձնական նախասիրություններից: Շատ Python ծրագրավորողներ օգտագործում են բարդ, բայց միևնույն ժամանակ հզոր IDE֊ներ (Integrated Development Environments - Միասնական Նախագծման Միջավայր), ինչպիսն է օրինակ PyCharm֊ը։ Որպես սկսնակ, դա, հավանաբար, ավելի քիչ հարմար է, սակալյն մեր առաջարկությունները հավասարապես հզոր են, բայց շատ ավելի պարզ: + +Մեր առաջարկները ներկայացված են ստորև, բայց ազատորեն հարցրեք ձեր մարզչին, թե որոնք են իրենց նախընտրությունները. Նրանցից օգնություն ստանալն շատ ավելի հեշտ կլինի: + +## Visual Studio Code + +Visual Studio Code- ը նախատեսված է կոդերի խմբագրման համար: Այն ստեղծված՝է Microsoft- ի կողմից Windows- ի, Linux- ի և macOS- ի համար: Այն իր մեջ ներառում է վրիպազերծիչ, ներդրված Git կառավարում, շարահյուսության լուսաբանման, խելացի կոդի ինքնալրացման և կոդի վերափոխման գործիքներ: + +[Ներբեռնիր այն այստեղից](https://code.visualstudio.com/) + +## Gedit + +Gedit- ը բաց կոդով, անվճար խմբագիր է, որը հասանելի է բոլոր օպերացիոն համակարգերի համար: + +[Ներբեռնիր այն այստեղից](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text- ը շատ ճանաչված խմբագիր է `անվճար գնահատման փորձաշրջանով, և այն հասանելի է բոլոր օպերացիոն համակարգերի համար: + +[Ներբեռնիր այն այստեղից](https://www.sublimetext.com/) + +## Atom + +Atom- ը ևս մեկ սիրված խմբագիր է: Այն անվճար է, ազատ և բաց ծրագրային ապահովմամբ (բաց կոդով) և հասանելի է Windows- ի, macOS- ի և Linux- ի համար: Ատոմը մշակվում է [ GitHub ](https://github.com/) - ի կողմից: + +[Ներբեռնիր այն այստեղից](https://atom.io/) + +## Ինչու՞ է մեզ անհրաժեշտ կոդերի խմբագիր: + +Կարող եք հարցնել. Ինչու՞ տեղադրել կոդերի խմբագրման առանձին ծրագիր, երբ կարող ենք օգտագործել Word- ը կամ Notepad- ը: + +Առաջին պատճառն այն է, որ կոդը պետք է լինի ** պարզ տեքստ**, իսկ խնդիրը կապված Word- ի և Textedit- ի հետ այն է, որ նրանք չեն պահպանում կոդը այդ տեսքով, այլ օգտագործում են հարստացված տեքստեր (ներառելով տառատեսակը և ձևաչափը), ինչպիսիք են [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format): + +Երկրորդ պատճառն այն է, որ մասնագիտացված խմբագիրները տրամադրում են բազմաթիվ օգտակար ծրագրավորման առանձնահատկություններ, ինչպիսիք են գունային կոդով ծածկագրված ծածկագիրը `ըստ դրա նշանակության և ավտոմատ փակվող չակերտների: + +Հետագայում այդ ամենը գործի մեջ կտեսնենք: Շուտով դուք կսկսեք մտածել ձեր կոդերի խմբագրի մասին `որպես փորձված ու իսկական սիրված գործիք :) diff --git a/hy/css/README.md b/hy/css/README.md new file mode 100644 index 00000000000..921be5c7867 --- /dev/null +++ b/hy/css/README.md @@ -0,0 +1,331 @@ +# CSS - դարձրեք այն գեղեցիկ: + +Մեր բլոգը դեռ բավականին վատ տեսք ունի, այնպես չէ՞: Ժամանակն է այն ավելի գրավիչ դարձնել: Դրա համար մենք կօգտագործենք CSS: + +## Ի՞նչ է CSS- ը: + +Cascading Style Sheets (CSS-կասկադի ոճի թերթեր) դա լեզու է, որն օգտագործվում է նշագրման լեզվով գրված կայքի տեսքն ու ձևաչափումը նկարագրելու համար (ինչպես HTML-ն է): Համարեք սա որպես դիմահարդարում մեր կայքի համար :) + +Բայց մենք չենք ուզում զրոյից սկսել, այնպես չէ՞: Մենք կօգտագործենք այն ամենը, ինչ այլ ծրագրավորողներ տեղադրել են ինտերնետում անվճար: Նորից անվադող հորինելն այնքան էլ հետաքրքիր չէ :) + +## Եկեք օգտագործենք Bootstrap! + +Bootstrap- ը գեղեցիկ կայքեր մշակելու ամենատարածված HTML և CSS շրջանակներից մեկն է. Https://getbootstrap.com/ + +Այն գրվել է Twitter ծրագրավորողների կողմից, իսկ այժմ մշակվում է կամավորների կողմից ամբողջ աշխարհից: + +## Տեղադրեք Bootstrap- ը + +Bootstrap- ը տեղադրելու համար խմբագրում բացեք ` .html ` կոդը պարունակող ֆայլը և այս տողերն ավելացրեք `` վերնագրում. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +Սա ձեր ծրագրին ոչ մի ֆայլ չի ավելացնի: Այս կոդը պարզապես ցույց է տալիս, որ այդ ֆայլերը գոյություն ունեն ինտերնետում: Այսպիսով, բացեք կայքը և թարմացրեք էջը: Ահա՝ դուք կտեսնեք փոփոխությունները: + +![Պատկեր 14.1](images/bootstrap1.png) + +Արդեն ավելի գեղեցիկ տեսք ունի: + +## Ստատիկ ֆայլեր Django- ում + +Վերջապես, մենք ավելի մանրամասն կանդրադառնանք այն ամենին, ինչ կոչվում է **static files** (ստատիկ ֆայլեր): Ստատիկ ֆայլերը` բոլոր CSS ֆայլերը և պատկերներ են: Դրանց բովանդակությունը կախված չէ հարցման ենթատեքստից և արդյունքը նույնը կլինի յուրաքանչյուր օգտագործողի համար: + +### Որտե՞ղ տեղադրել ստատիկ ֆայլեր Django- ում: + +Django- ն արդեն գիտի, թե որտեղ կարելի է գտնել ստատիկ ֆայլերը «ադմինիստրատոր» ներդրված ծրագրի համար: Այժմ մենք պետք է ստատիկ ֆայլեր ավելացնենք մեր սեփական ծրագրում ՝ `blog` (բլոգ): + +Մենք դա կանենք ՝ ստեղծելով `static` folder (ստատիկ պանակ) մեր բլոգի հավելվածի ներսում: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Django- ն ձեր ծրագրի պանակների մեջ ավտոմատ կերպով կգտնի «ստատիկ» կոչվող ցանկացած պանակ: Այնուհետև դրանց բովանդակությունը կարող եք օգտագործել որպես ստատիկ ֆայլեր: + +## Ձեր առաջին CSS ֆայլը: + +Եկեք ստեղծենք CSS ֆայլ ՝ ձեր վեբ էջում ձեր սեփական ոճը ստեղծելու համար: Ստեղծեք նոր ` css ` պանակ `static` (ստատիկ) պանակի ներսում: Դրանից հետո ստեղծեք ` blog.css ` կոչվող նոր ֆայլ այս ` css ` պանակի ներսում: Պատրա՞ստ եք + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Ժամանակն է գրել CSS մի քանի տող: Ձեր կոդի խմբագրիչում բացեք `blog/static/css/blog.css` ֆայլը: + +Այս դասընթացում մենք չենք կենտրոնանալու CSS-ի ուսուցման մեջ: Էջի վերջում առաջարկվում են անվճար CSS դասընթացներ, եթե ցանկանում եք ինքնուրույն սովորել CSS: + +Բայց եկեք պարզապես մի փոքր ուսումնասիրենք: Գուցե՞ մենք կարող ենք փոխել մեր վերնագրերի գույները: Գույները հասկանալու համար համակարգիչները օգտագործում են հատուկ ծածկագրեր (կոդեր): Այս կոդերը սկսվում են ` # ` - ից, որին հաջորդում են 6 տառ (A – F) և թվեր (0–9): Օրինակ ՝ կապույտի կոդը `#0000FF` է: Շատ գույների գունային կոդերը կարող եք գտնել այստեղ ՝ http://www.colorpicker.com/: Կարող եք նաև օգտագործել [ կանխորոշված ​​գույներ ](http://www.w3schools.com/colors/colors_names.asp), ինչպիսիք են `red` և `green` (կարմիրը և կանաչը). + +Ձեր ` blog/static/css/blog.css ` ֆայլում պետք է ավելացնեք հետևյալ ծածկագիրը. + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +` h1 a ` - ը CSS ընտրող է: Սա նշանակում է, որ մենք օգտագործում ենք մեր ոճերը `a`տարրի ներսում գտնվող ցանկացած `h1` տարրի նկատմամբ; `h2 a` ընտրիչը նույնն է անում`h2`տարրերի համար: Այսպիսով, երբ մենք ունենք `

link

` պես մի բան, կկիրառվի `h1 a` ոճը: Այս դեպքում մենք հրահանգում ենք, որ այն փոխի իր գույնը և դարձնի `#C25100`, որը մուգ նարնջագույն է: Կամ կարող եք այստեղ տեղադրել ձեր սեփական գույնը, բայց համոզված լինելով, որ այն լավ հակադրություն ունի սպիտակ ֆոնի վրա: + +CSS ֆայլում մենք որոշում ենք HTML ֆայլի տարրերի ոճերը: Էլեմենտները նույնացնելու առաջին եղանակը դրանց անվանումներն են: Պետք է հիշել այս պիտակները (tag-երը) HTML- ից: ` a `, ` h1 `, և ` body ` սրանք բոլորը տարրերի անունների օրինակներ են: Մենք նաև տարրերը նույնացնում ենք ըստ հատկանիշի `class` կամ հատկանիշը `id`. Class և id-ը անուններ են, որոնք դուք ինքներդ եք վերագրում տարրերին: Դասերը (сlass) սահմանում են տարրերի խմբեր, իսկ նույնացուցիչները (id) մատնանշում են հատուկ տարրեր: Օրինակ, դուք կարող եք նույնականացնել հետևյալ տարրը ՝ օգտագործելով տարրի անունը + +```html + +``` + +CSS ընտրողների մասին ավելին կարող եք կարդալ այստեղ [CSS Selectors at w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Մենք նաև պետք է մեր HTML ձևանմուշին ասենք, որ մենք ավելացրել ենք CSS ոճեր: Կոդի խմբագրում բացեք `blog/templates/blog/post_list.html` ֆայլը և հենց սկզբում ավելացրեք այս տողը. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Մենք պարզապես ներբեռնում ենք ստատիկ ֆայլեր :) `` և `` միջև, Bootstrap CSS ֆայլեր ֆայլերից հետո, ավելացրեք այս տողը. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Բրաուզերը կարդում է ֆայլերը տրված հերթականությամբ, ուստի մենք պետք է համոզվենք, որ դրանք ճիշտ տեղում են: Հակառակ դեպքում, մեր ֆայլի կոդը կարող է գերակշռվել կոդով Bootstrap ֆայլերում: Մենք պարզապես պատմեցինք մեր ձևանմուշին (template), թե որտեղ է գտնվում մեր CSS ֆայլը: + +Ձեր ֆայլն այժմ պետք է ունենա այսպիսի տեսք. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Շատ լավ, պահեք ֆայլը և թարմացրեք կայքը: + +![Պատկեր 14.2](images/color2.png) + +Հիանալի աշխատանք: Գուցե մենք ցանկանում ենք մեր կայքին որոշակի տարածք և ձախ հատվածում լուսանցք ավելացնել: Եկեք փորձենք! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Ավելացրեք դա ձեր CSS- ին, պահեք ֆայլը և տեսեք, թե ինչպես է այն աշխատում: + +![Պատկեր 14.3](images/margin2.png) + +Միգուցե կարո՞ղ ենք հարմարեցնել մեր վերնագրի տառատեսակը: Տեղադրեք սա `` in `blog/templates/blog/post_list.html` ձեր ֆայլում: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Ինչպես նախկինում, ստուգեք հրահանգը և տեղադրեք `blog/static/css/blog.css` հղումը: Այս տողում Google Fonts- ից (https://www.google.com/fonts) ներմուծեք * Lobster * կոչվող տառատեսակը: + +Գտեք ` h1 a ` հայտարարագրի բլոկը (ամրագոտիների միջեւ ծածկագիրը ` {` և `} `) CSS ֆայլում ` blog/static/css/blog.css` Ձևավոր փակագծերի միջև ավելացրեք `font-family: 'Lobster';` տողը և թարմացրեք էջը. + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Պատկեր 14.3](images/font.png) + +Հիանալի է! + +Ինչպես նշվեց վերևում, CSS- ն ունի դասակարգման հասկացություն: Դրանք թույլ են տալիս անվանել HTML կոդի մի մաս և կիրառել ոճեր միայն այդ մասի վրա ՝ առանց այլ մասերի վրա ազդելու: Սա կարող է շատ օգտակար լինել: Գուցե դուք ունեք երկու բաժիններ, որոնք տարբեր դերեր ունեն (ինչպես օրինակ վերնագիրն և բուն հաղորդագրությունը): Դասակարգումը (Class) կարող է օգնել ձեզ տարբեր տեսքեր ստանալ: + +Առաջ անցնենք և անվանեք HTML կոդի որոշ մասեր: Փոխարինեք Ձեր վերնագիրը հետևյալով `header` : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+

Django Girls Blog

+
+
+``` + +Եվ հիմա ձեր ` post` ավելացրեք դասի ` article` բլոգի գրառում պարունակող: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Այժմ եկեք ավելացնենք բլոկի սահմանումները տարբեր ընտրողների համար: Selector-ները (ընտրողները), որոնք սկսվում են ` - ով: ` դասին հատուկ են: Համացանցում կան բազմաթիվ հիանալի հղումներ և բացատրություններ CSS- ի վերաբերյալ, որոնք կարող են օգնել ձեզ հասկանալ հետևյալ կոդը: Առայժմ, պատճենեք և տեղադրեք այն ձեր `blog/static/css/blog.css` ֆայլում. + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-default, +.btn-default:visited { + color: #C25100; + background: none; + border-color: #C25100; +} + +.btn-default:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Հետո, փոփոխեք հաղորդագրությունները ցուցադրող HTML կոդը: Փոխարինեք սարանով ՝ + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +`blog/templates/blog/post_list.html`-ում սրանով + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Պահեք այդ ֆայլերը և թարմացրեք ձեր կայքը: + +![Պատկեր 14.4](images/final.png) + +Օօօօ Հիանալի տեսք ունի, այնպես չէ՞ Նայեք մեր տեղադրած կոդին: Մենք դասակարգումներ (classes) ենք ավելացրել HTML- ին և օգտագործել դրանք CSS- ում: Որտե՞ղ կկատարեք փոփոխություն, եթե ցանկանում եք, որ ամսաթիվը փիրուզագույն լինի: + +Մի վախեցեք խճճվել CSS- ով `փորձեք փոխություններ անել: CSS- ով "խաղալը" կօգնի ձեզ հասկանալ, թե ինչ ֆունկցոնալություն ունեն տարբեր գործիքներ: Եթե ​​ինչ-որ բան փչացնում եք, մի անհանգստացեք. Միշտ կարող եք չեղարկել այն: + +Խորհուրդ ենք տալիս անցնել «Հիմնական HTML & HTML5» և «Հիմնական CSS» առցանց դասընթացներ [freeCodeCamp](https://learn.freecodecamp.org/): Դրանք կարող են օգնել ձեզ դարձնել ձեր կայքերը ավելի գեղեցիկ HTML և CSS- ին տիրապետելու միջոցով: + +Պատրա՞ստ եք հաջորդ գլխին: :) \ No newline at end of file diff --git a/hy/css/images/bootstrap1.png b/hy/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/hy/css/images/bootstrap1.png differ diff --git a/hy/css/images/color2.png b/hy/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/hy/css/images/color2.png differ diff --git a/hy/css/images/final.png b/hy/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/hy/css/images/final.png differ diff --git a/hy/css/images/font.png b/hy/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/hy/css/images/font.png differ diff --git a/hy/css/images/margin2.png b/hy/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/hy/css/images/margin2.png differ diff --git a/hy/deploy/README.md b/hy/deploy/README.md new file mode 100644 index 00000000000..3361881df0a --- /dev/null +++ b/hy/deploy/README.md @@ -0,0 +1,232 @@ +# Հրապարակում + +> **Նշում** Հաջորդ գլուխը, որոշ դեպքերում կարող է մի փոքր դժվար թվալ: Եղեք համառ և ավարտին հասցրեք այն, սերվերային կայքի տեղադրումը վեբ մշակման կարևոր մասն է: Այս գլուխը միտումնավոր տեղադրված է ձեռնարկի մեջտեղում, որպեսզի ձեր ուսուցիչը կարողանա օգնել ձեզ կայք թողարկելու բարդ գործընթացում: Այս կերպ Դուք կարող եք ինքնուրույն լրացնել բոլոր գլուխները, նույնիսկ եթե ժամանակը սուղ է: + +Մինչ այժմ ձեր կայքը հասանելի էր միայն ձեր համակարգչում: Այժմ դուք կսովորեք, թե ինչպես «տեղակայել/շահագործման հանձնել» ձեր կայքը: Տեղակայումը ձեր ծրագիրը ինտերնետում հրապարակելու գործընթացն է, որպեսզի մարդիկ վերջապես տեսնեն ձեր ստեղծած աշխատանքը: :) :) + +Ինչպես արդեն գիտեք, կայքը պետք է տեղակայված լինի սերվերի վրա: Ինտերնետում կան շատ սերվերների մատակարարներ, մենք կօգտագործենք [PythonAnywhere](https://www.pythonanywhere.com/) - ը: PythonAnywhere- ն անվճար է փոքր ծրագրերի համար, որոնք ունեն փոքր թվով այցելուներ, ինչը մեզ համար ավելի քան բավարար է: + +Մյուս արտաքին ծառայությունը, որը մենք կօգտագործենք, [ GitHub ](https://www.github.com) է, որը ծածկագրերի հոսթինգի (hosting-սպասարկման) ծառայություն է: Կան նաև այլ նմանատիպ ծառայություններ, բայց այսօր գրեթե յուրաքանչյուր ծրագրավորող ունի GitHub հաշիվ, և հիմա դուք նույնպես:: + +Այս երեք տեղերը ձեզ համար կարևոր կլինեն: Ձեր տեղական համակարգիչը կլինի այն վայրը, որտեղ դուք կկատարեք մշակում և փորձարկում: Երբ գոհ լինեք փոփոխություններից, ձեր ծրագրի պատճենը կտեղադրեք GitHub- ում: Ձեր կայքը կլինի PythonAnywhere- ում, և դուք այն կթարմացնեք ՝ GitHub-ից ձեր կոդի նոր օրինակը ստանալու միջոցով: + +# Git + +> ** Նշում ** Եթե դուք արդեն կատարել եք [installation steps](../installation/README.md), (տեղադրման քայլերը), ապա դա նորից անելու անհրաժեշտություն չկա. Կարող եք անցնել հաջորդ բաժին և սկսել ստեղծել ձեր Git պահոցը: + +{% include "/deploy/install_git.md" %} + +## Ստեղծեք մեր Git պահոցը: + +Git- ը հետևում է ֆայլերի որոշակի հավաքածուի փոփոխությանը, որը կոչվում է պահոց (կրճատ ՝ «repo»): Եկեք ստեղծենք մեկը մեր նախագծի համար: Բացեք վահանակ և գործարկեք այս հրամանները `djangogirls` գրացուցակում. + +> **Նշում** Նախքան պահեստի նախնականացումը սկսեք, ստուգեք ձեր ընթացիկ աշխատանքային գրացուցակը `օգտագործելով `pwd` (macOS/Linux) կամ `cd` (Windows) հրամաններ: Դուք պետք է լինեք ` djangogirls ` պանակում (folder): + +{% 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 + + +Յուրաքանչյուր նախագծի համար անհրաժեշտ է նախաձևակերպել git պահոցը (git repository)միայն մեկ անգամ (և այլևս ստիպված չեք լինի կրկին մուտքագրել ձեր` օգտվողի անունն ու էլ. Փոստի հասցեն): + +Git- ը հետևելու է տվյալ գրացուցակի բոլոր ֆայլերի և գրացուցակների փոփոխություններին, սակայն մենք գերադասում ենք անտեսել դրանցից մի քանիսը: Դա անելու համար մենք պետք է պահեստի բազային գրացուցակում ստեղծենք ` .gitignore ` կոչվող ֆայլ: Բացեք ձեր խմբագիրը և ստեղծեք նոր ֆայլ հետևյալ բովանդակությամբ. + +{% filename %}.gitignore{% endfilename %} + + # Python + *.pyc + *~ + __pycache__ + + # Env + .env + myvenv/ + venv/ + + # Database + db.sqlite3 + + # Static folder at project root + /static/ + + # macOS + ._* + + +Եվ այն պահպանեք որպես ` .gitignore ` "djangogirls" արմատային գրացուցակում: + +> ** Նշում ** Ֆայլի անվան սկզբում գտնվող կետը կարևոր է: Եթե ​​նման ֆայլեր ստեղծելու խնդիրներ ունեք (Mac- ը թույլ չի տա ձեզ, կետով սկսվող անունով ֆայլ ստեղծել օրինակ, Finder- ի միջոցով), ապա օգտագործեք "Save As" (-պահել որպես) կոճակը ձեր կոդի խմբագրի ընտրացանկում, դա հաստատ անվտանգ է: Եվ համոզվեք, որ ֆայլի անվանման մեջ չեք ավելացնում `.txt`, `.py` կամ որևէ այլ ընդլայնում - Git- ը դա կճանաչի միայն այն դեպքում, եթե անունը պարունակում է միայն `.gitignore`.: Այն ֆայլեր, որոնց անունները սկսվում են (օրինակ `.gitignore` ով) Linux- ը և MacOS-ը դրանք ընդունում են որպես թաքնված, և սովորական `ls` հրամանը ցույց չի տալիս այս ֆայլերը: Փոխարենը օգտագործեք `ls -a` հրամանը `.gitignore` ֆայլը տեսնելու համար: +> +> **Նշում** Ձեր `.gitignore` ֆայլում նշված ֆայլերից մեկը `db.sqlite3` է: Այս ֆայլը ձեր (local database) տեղական տվյալների շտեմարանն է, որտեղ պահվում են ձեր օգտվողների բոլոր գրառումները: Մենք հետևելու ենք վեբ ծրագրավորման ստանդարտ պրակտիկային, ինչը նշանակում է, որ մենք կօգտագործենք առանձին տվյալների բազաներ ձեր տեղական թեստային կայքի և PythonAnywhere- ում ձեր կենդանի կայքի համար: PythonAnywhere տվյալների բազան կարող է լինել SQLite, ճիշտ այնպես, ինչպես ձեր զարգացման սարքում, բայց սովորաբար դուք կօգտագործեք MySQL անունով շտեմարան, որը կարող է սպասարկել այցելուների շատ ավելի մեծ քանակության, քան SQLite- ը: Ամեն դեպքում, անտեսելով ձեր SQLite տվյալների շտեմարանը GitHub- ի համար, նշանակում է, որ մինչ այժմ ձեր ստեղծած բոլոր հաղորդագրություններն ու գերշահագործողները հասանելի կլինեն միայն տեղական մակարդակում, և արտադրության համար անհրաժեշտ է ստեղծել նորերը: Դուք պետք է ձեր տեղական տվյալների բազայի (local database-ի) մասին մտածեք որպես լավ խաղահրապարակ, որտեղ կարող եք փորձարկել տարբեր բաներ և չվախենալ, որ ձեր իրական գրառումները կջնջեք ձեր բլոգից: + +Լավ է օգտագործել `git status` (git կարգավիճակի) հրամանը նախքան`git add` (git ավելացնելը) կամ ցանկացած այլ պահ, երբ վստահ չեք, թե ինչն է փոխվել: Դա կօգնի Ձեզ զերծ մնալ տհաճ անակնկալներից, ինչպիսիք են սխալ ֆայլերի ավելացումը կամ կատարումը: `git status` (git կարգավիճակ) հրամանը վերադարձնում է տեղեկատվություն git- ում նախկինում չնկատված / փոփոխված / ներկայացված բոլոր ֆայլերի, ինչպես նաև մասնաճյուղի կարգավիճակի և այլնի մասին: Արդյունքը պետք է նման լինի հետևյալին. + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +Եվ վերջապես մենք կպահպանենք մեր փոփոխությունները: Անցեք վահանակին և մուտքագրեք այս հրամանները. + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Հրապարակեք ձեր կոդը GitHub- ում + +Անցեք [GitHub.com](https://www.github.com) կայք և գրանցվեք նոր անվճար օգտվողի հաշվի համար: (Եթե դա արդեն արել եք սեմինարի նախապատրաստական ​​փուլում, հիանալի է): Համոզվեք, որ հիշում եք ձեր գաղտնաբառը (ավելացրեք այն գաղտնաբառերի կառավարչին (password manager), եթե այն օգտագործում եք): + +Հաջորդը, ստեղծեք նոր պահեստ ` "my-first-blog" (իմ առաջին բլոգը) անունով: "initialize with a README" վանդակը պետք չէ ընտրել, բաց թողեք .gitignore- ը (այս ֆայլը ձեռքով կստեղծենք) և թողեք License որպես None: + +![](images/new_github_repo.png) + +> **Նշում** . `my-first-blog` (իմ առաջին բլոգ) պահեստի անվանումը շատ կարևոր է: Իհարկե կարող եք այլ անվանումով հանդես գալ, բայց այն բազմիցս հանդիպում է հրահանգներում, և ամեն անգամ ստիպված կլինեք փոխել այն ձեր սեփականով: Միգուցե ավելի հեշտ է պահպանել `my-first-blog` անվանումը: + +Հաջորդ էկրանին կտեսնեք ձեր ռեպոյի կլոնային URL- ը, որը դուք կօգտագործեք հետևյալ հրահանգների միջոցով: + +![](images/github_get_repo_url_screenshot.png) + +Այժմ մենք պետք է ձեր համակարգչում կապենք տեղական Git պահոցը GitHub- ի հետ: + +Մուտքագրեք հետևյալը ձեր վահանակի (console-ի) մեջ (փոխարինեք `` - ը ձեր GitHub հաշիվը ստեղծելիս մուտքագրած օգտանունով, բայց առանց անկյունային գծերի. իսկ URL-ը պետք է համապատասխանի ձեր տեսած կլոնային URL- ին): + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +GitHub մուտք գործելուց հետո ձեզանից կպահանջվի ձեր GitHub օգտվողի անունն ու գաղտնաբառը (կա՛մ հենց այնտեղ ՝ հրամանի տողի պատուհանում, կա՛մ ելնող պատուհանում), և հավատարմագրերը մուտքագրելուց հետո պետք է հայտնվի նման մի բան. + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Ձեր ծածկագիրն այժմ GitHub- ում է: Գնացեք կայք և ստուգեք այն: Այն կարող եք գտնել հիանալի ընկերություններում ինչպիսիք են՝ [Django](https://github.com/django/django), the [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial), և շատ այլ բաց կոդով ծրագրեր GitHub- ում: :) + +# PythonAnywhere- ում մեր բլոգի տեղադրումը + +## Գրանցվեք PythonAnywhere հաշվում + +> **Նշում** Եթե ավելի վաղ դուք արդեն գրանցվել եք PythonAnywhere հաշվում, ապա կարիգ չկա այն կրկնել: + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Մեր կայքի տեղադրումը PythonAnywhere- ում + +Վերադարձեք [PythonAnywhere Dashboard](https://www.pythonanywhere.com/) հիմնական ընտրացանկ ՝ կտտացրեք պատկերանշանին և ընտրեք "Bash" վահանակը (console) գործարկելու տարբերակը. Սա PythonAnywhere-ի command line-ի (հրամանի տողի) տարբերակն է, ինչպես ձեր համակարգչում: + +![PythonAnywhere վեբ տարբերակի 'New Console' (Նոր վահանակ) բաժնում ՝ օգտագործելով «Bash» կոճակը](images/pythonanywhere_bash_console.png) + +> **Հղում** PythonAnywhere- ը հիմնված է Linux- ի վրա, այնպես որ, եթե դուք օգտագործում եք Windows, ապա console-ը (վահանակը) մի փոքր այլ տեսք կունենա ձեր համակարգչի վրա: + +PythonAnywhere- ում վեբ հավելվածի տեղադրումը ենթադրում է GitHub- ից ձեր կոդի բեռնումը և PythonAnywhere-ի կարգավորումը `որպեսզի այն ճանաչի և գործարկի որպես վեբ ծրագիր: Դա ձեռքով անելու եղանակներ կան, բայց PythonAnywhere- ը տրամադրում է օգնող գործիք, որն ամեն ինչ կանի ձեր փոխարեն: Եկեք նախ տեղադրենք այն. + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip install --user pythonanywhere + + +Վահանակը պետք է տպի նման մի բան, ինչպիսին է `Collecting pythonanywhere` և վերջում `Successfully installed (...) pythonanywhere- (...)`. + +Այժմ մենք գործարկում ենք օգնականին ՝ GitHub-ից մեր հավելվածը ավտոմատ կերպով կարգավորելու համար: PythonAnyplace- ի վահանակի մեջ մուտքագրեք հետևյալ հրահանգը (մի մոռացեք օգտագործել ձեր GitHub օգտվողի անունը `` -ի փոխարեն, որպեսզի URL- ը համապատասխանի GitHub-ի կլոնավորված URL- ին): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.10 https://github.com//my-first-blog.git + + +Երբ տեսնեք, թե ինչպես է այն աշխատում, կարող եք հասկանալ, թե կոնկրետ ինչ է այն անում. + +- Ներբեռնեք ձեր կոդը GitHub- ից +- Virtualenv-ի ստեղծումը PythonAnyplace- ում `ճիշտ այնպես, ինչպես ձեր համակարգչում է +- Թարմացրեք ձեր settings file-ը (կարգավորումների ֆայլը) տեղակայման որոշ կարգավորումներում (deployment settings) +- Ստեղծեք տվյալների բազա PythonAnywhere-ում ՝ օգտագործելով այս `manage.py migrate` հրամանը +- Ձեր ստատիկ ֆայլերի (static files) կարգավորում (դրանց մասին մենք կիմանանք ավելի ուշ) +- Եվ կարգավորեք PythonAnywhere- ը `ձեր վեբ հավելվածը API- ի միջոցով սպասարկելու համար + +Այս բոլոր քայլերը ավտոմատացված են PythonAnywhere- ում, բայց դրանք այն նույն քայլերն են, որոնք պետք է կատարվեն սերվերի ցանկացած այլ մատակարարի հետ: + +Հիմնական բանը, որն այժմ պետք է նկատել, այն է, որ PythonAnywhere տվյալների բազան իրականում ամբողջովին տարանջատված է ձեր համակարգչի տվյալների բազայից: Սա նշանակում է, որ նրանք կարող են ունենալ տարբեր հաղորդագրություններ և ադմինիստրատորի հաշիվներ: Արդյունքում, ինչպես արդեն արեցինք մեր համակարգչում, մենք պետք է ադմինիստրատորի հաշիվը նախապատրաստենք `createsuperuser` - ով: PythonAnywhere- ը ավտոմատ կերպով կակտիվացնի ձեր virtualenv-ին, այնպես որ ձեզ հարկավոր է միայն գործարկել՝ + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Մուտքագրեք ադմինիստրատորի հաշվի (admin user) տեղեկատվությունը: Քանի դեռ չեք ցանկանում ձեր PythonAnywhere գաղտնաբառն ավելի ապահով դարձնել, ցանկալի է օգտագործել ձեր համակարգչում օգտագործածները, որպեսզի խառնաշփոթ չլինի, + +Այժմ, եթե ցանկանում եք, կարող եք նաև հայացք նետել ձեր կոդին PythonAnywhere- ում ՝ օգտագործելով `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 + + +Կարող եք նաև մտնել "Files" («Ֆայլեր») ներդիր էջ և շրջել ՝ օգտագործելով PythonAnywhere- ի ներկառուցված ֆայլերի զննիչը (built-in file browser): (Վահանակի էջից վերևի աջ անկյունում գտնվող ցանկի կոճակից կարող եք անցնել PythonAnywhere- ի այլ էջեր: Էջերից մեկում հայտնվելուց հետո, վերին մասում այլ էջերի հղումներ կան:) + +## Դու օնլայն եք: + +Ձեր կայքը այժմ հանրային ինտերնետում է: Անցեք PythonAnywhere- ի "Web" ներդիրին `ձեր կայքի հղումը ( link-ը) ստանալու համար: Կարող եք այն կիսել յուրաքանչյուրի հետ, ում ցանկանում եք: :) + +> **Նշում** Սա սկսնակների ձեռնարկ է, և մենք կայքը տեղակայելիս օգտագործել ենք մի քանի հնարքներ, որոնք անվտանգության տեսանկյունից իդեալական չեն: Եթե ​​որոշեք դրանով նախագիծ կառուցել կամ նորը սկսել, ապա պետք է ստուգեք [Django deployment checklist](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) -ը՝ (Django- ի տեղակայման ստուգաթերթը) ձեր կայքի անվտանգության վերաբերյալ որոշ խորհուրդների համար: + +## Վրիպազերծման խորհուրդներ + +Ահա մի քանի ընդհանուր պատճառներ, եթե ​​ `pa_autoconfigure_django.py` սկրիպտը գործարկելիս սխալ եք տեսնում + +- PythonAnywhere API նշան բանալի չի ստեղծվել ՝ մուտքն ապահովելու համար: +- GitHub պահոցի URL- ում սխալ է տեղի ունեցել +- Եթե ​​տեսնում եք սխալ *"Could not find your settings.py"* (Չկարողացա գտնել ձեր settings.py) հետևյալ բովանդակությամբ, դա հավանաբար այն պատճառով է, որ դուք ի վիճակի չէիք ձեր բոլոր ֆայլերը ավելացնել Git- ին և / կամ դրանք հաջողությամբ չկարողացաք բեռնել GitHub- ում: Եվս մեկ անգամ նայեք վերևում գտնվող Git հատվածին և ստուգեք հրահանգները: +- Եթե ​​նախկինում գրանցվել եք PythonAnywhere հաշվում և ունեցել եք ստատիկ սխալ, ապա, հավանաբար, ձեր հաշվի համար ունեք SQLite- ի հին տարբերակ (օրինակ ՝ 3.8.2): Այս դեպքում մուտք գործեք նոր հաշիվ և փորձեք վերևում գտնվող PythonAnywhere բաժնի հրահանգները: + +Եթե ​​ձեր կայք այցելելիս սխալ եք տեսնում, ապա տեղեկատվության կարգավորման համար, նախ նայիր **error log** (սխալների մատյանը): Դրա հղումը կարող եք գտնել PythonAnywhere ["Web" page](https://www.pythonanywhere.com/web_app_setup/) էջում: Տեսեք, արդյոք կան սխալի հաղորդագրություններ. վերջինները ներքևում են: + +Այնտեղ կարող եք տեսնել նաև [general debugging tips on the PythonAnywhere help site](http://help.pythonanywhere.com/pages/DebuggingImportError). (PythonAnywhere- ի օգնության կայքի ընդհանուր սխալների վերացման խորհուրդներ) + +Եվ հիշեք. Ձեր մարզիչը այստեղ է ՝ օգնելու: + +# Ստուգեք ձեր կայքը: + +Ձեր կայքի դեֆոլտ էջում պետք է գրվի "It worked!"-(Այն աշխատեց), ճիշտ այնպես, ինչպես դա անում է ձեր տեղական համակարգչում: Փորձեք URL- ի վերջում ավելացնել `/admin/` և դուք կտեղափոխվեք ադմինիստրատորի կայք: Մուտք գործեք ձեր օգտվողի անունով և գաղտնաբառով և կտեսնեք, որ կարող եք նոր գրառումներ ավելացնել սերվերում. Հիշեք, որ ձեր փորձարկման տվյալների բազայից գրառումները չեն ուղարկվի ձեր կենդանի բլոգ: + +Մի քանի գրառում ստեղծելուց հետո կարող եք վերադառնալ ձեր տեղական կարգավորմանը (ոչ PythonAnywhere): Այստեղ է, որ պետք է աշխատել փոփոխություններ ստեղծելու վրա: Սա վեբ մշակման ընդհանուր աշխատանքային գործընթաց է. Տեղական փոփոխություններ կատարեք, այդ փոփոխությունները վերբեռնեք GitHub- ում և մղեք իրական վեբ սերվերի վրա: Սա թույլ է տալիս աշխատել և փորձարկել `առանց ձեր կայքը խափանելու: Բավականին լավ է, այնպես չէ՞ + +Դուք արժանի եք գովասանքի: Սերվերների տեղակայումը վեբ մշակման ամենաբարդ փուլերից մեկն է, և դա իրականացնելը հաճախ տևում է մի քանի օր, մինչ դրանք կաշխատեն: Բայց դուք ստացաք կենդանի կայք ՝ իրական ինտերնետում: \ No newline at end of file diff --git a/hy/deploy/images/github_get_repo_url_screenshot.png b/hy/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/hy/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/hy/deploy/images/new_github_repo.png b/hy/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/hy/deploy/images/new_github_repo.png differ diff --git a/hy/deploy/images/pythonanywhere_account.png b/hy/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/hy/deploy/images/pythonanywhere_account.png differ diff --git a/hy/deploy/images/pythonanywhere_bash_console.png b/hy/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/hy/deploy/images/pythonanywhere_bash_console.png differ diff --git a/hy/deploy/images/pythonanywhere_beginner_account_button.png b/hy/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/hy/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/hy/deploy/images/pythonanywhere_create_api_token.png b/hy/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/hy/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/hy/deploy/install_git.md b/hy/deploy/install_git.md new file mode 100644 index 00000000000..b2863460a9c --- /dev/null +++ b/hy/deploy/install_git.md @@ -0,0 +1,52 @@ +Git- ը «տարբերակների կառավարման համակարգ է» ("version control system"), որն օգտագործվում է շատ ծրագրավորողների կողմից: Այս ծրագիրը վերահսկում է փոփոխությունները, որոնք տեղի են ունենում ֆայլերում, որպեսզի հետագայում կարողանաք վերականգնել ծածկագրի վիճակը ցանկալի ժամանակահատվածում: Մի փոքր նման է բառ մշակող ("track changes" )ծրագրերի գործառույթին (օրինակ ՝ Microsoft Word կամ LibreOffice Writer) բայց շատ ավելի հզոր: + +## Git-ի ներբեռնում + + + +Կարող ես ներբեռնել Git-ը այս հղումով [git-scm.com](https://git-scm.com/). "next" (հաջորդ) կարող եք ընտրել բոլոր քայլերին, բացառությամբ երկուսի. Քայլ որտեղ այն խնդրում է ընտրել ձեր խմբագրին (choose your editor), պետք է ընտրեք Nano- ն, իսկ «Ձեր PATH միջավայրի կարգավորումը»-("Adjusting your PATH environment") խորագրի ներքո ընտրեք "Use Git and optional Unix tools from the Windows Command Prompt"(«Օգտագործեք Git և ընտրովի Unix գործիքներ Windows հրամանի տողը»)(ներքևի տարբերակը): Մնացած բոլոր պարամետրերը կարող եք թողնել: "Checkout Windows-style, commit Unix-style line endings" տարբերակը լավ ընտրություն կլինի: + +Տեղադրումը հաջող ավարտելուց հետո մի մոռացեք վերսկսել հրամանի տողը կամ PowerShell- ը: + + + +Ներբեռնեք Git- ը [git-scm.com](https://git-scm.com/) կայքից և հետևեք հրահանգներին: + +> ** Նշում ** Եթե դուք օգտագործում եք OS X 10.6, 10.7 կամ 10.8, ապա պետք է ներբեռնեք git- ի այս տարբերակը ՝ [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/hy/deploy/signup_pythonanywhere.md b/hy/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..8fdbc043ab9 --- /dev/null +++ b/hy/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnyway- ը ծառայություն է Python կոդի «ամպի մեջ» ("in the cloud") սերվերների վրա աշխատելու համար: Մենք այն օգտագործում ենք ինտերնետում մեր կայքը տեղակայելու համար: + +Գրանցվեք PythonAnywhere հաշիվը որպես "Beginner" («Սկսնակ», անվճար տարբերակը բավարար է, կրեդիտ քարտ չի պահանջվում): + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![PythonAnywhere գրանցման էջում կա 'Beginner' (Սկսնակ) անվճար հաշիվ ստեղծելու կոճակ](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Նշում** . Օգտանուն ընտրելիս հիշեք, որ բլոգի URL-ը կունենա այսպիսի տեսք `yourusername.pythonanywhere.com`, այնպես որ ընտրեք կամ ձեր սեփական մականունը կամ բլոգի թեմային վերաբերող անուն: Նաև համոզվեք, որ կհիշեք ձեր գաղտնաբառը (ավելացրեք այն ձեր գաղտնաբառերի կառավարչին,եթե նման բան օգտագործում եք): + +## PythonAnywhere- ում API token-ի (նշանի) ստեղծում + +Սա մի բան է, որը դուք պետք է անեք միայն մեկ անգամ: Երբ գրանցվեք PythonAnywhere- ում, ձեզ կտեղափոխեն կառավարման վահանակ (dashboard): Գտեք ձեր "Account" (հաշիվ) էջի վերևի աջ մասի հղումը ՝ + +![Հաշվի հղումը գտնվում է էջի վերևի աջ հատվածում](../deploy/images/pythonanywhere_account.png) + +ապա ընտրեք "API token" անունով ներդիրը և սեղմեք "Create new API token". (ստեղծել նոր API նշան) կոճակը: + +![API token (API նշանի) ներդիրը Account page-ում (հաշվի էջում)](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/hy/django/README.md b/hy/django/README.md new file mode 100644 index 00000000000..087714c84f2 --- /dev/null +++ b/hy/django/README.md @@ -0,0 +1,27 @@ +# Ի՞նչ է Django- ն: + +Django- ն (/ˈdʒæŋɡoʊ/ *jang-goh*) Python- ում գրված անվճար և բաց կոդով վեբ հավելվածների շրջանակ է: Վեբ շրջանակը բաղադրիչների հավաքածու է, որոնք կօգնեն ձեզ արագ և հեշտ զարգացնել կայքերը: + +Երբ կայքեր եք մշակում, ձեզ անհրաժեշտ են նմանատիպ բաղադրիչներ ինչպիսիք են. օգտվողներին նույնականացնելու միջոցներ (մուտք, ելք, գրանցում), կայքի վահանակ, ձևաթղթեր, ֆայլեր վերբեռնելու գործիքներ և այլն: + +Բարեբախտաբար, այլ մարդիկ արդեն նկատել են որ վեբ մշակողները նման խնդիրներ են ունենում նոր կայք կառուցելիս, ուստի նրանք միավորվեցին և ստեղծեցին շրջանակներ (դրանցից մեկը Django- ն է), որոնք մեզ առաջարկում են պատրաստի ձևանմուշներ (components) օգտագործման համար: + +Երբ նոր կայք եք կառուցում շրջանակներ (Frameworks) օգնում են զարգացման գործընթացը հեշտացնել և նորից հեծանիվ չհորինել: + +## Ինչու՞ է ձեզ անհրաժեշտ շրջանակ: + +Հասկանալու համար, թե ինչի համար է մեզ հարկավոր Django- ն, մենք պետք է ավելի ուշադիր հետևենք սերվերներին: Նախ, սերվերը պետք է իմանա, որ դուք ցանկանում եք, որ այն ձեզ որպես վեբ էջ ծառայի: + +Պատկերացրեք փոստարկղ (նավահանգիստ), որը վերահսկվում է մուտքային նամակների (հարցումների) համար: Դա արվում է վեբ սերվերի( web server-ի) կողմից: Վեբ սերվերը (server) կարդում է էլ. Փոստը, այնուհետև ուղարկում է պատասխան վեբ էջի միջոցով: Բայց երբ ուզում ես ինչ-որ բան ուղարկել, պետք է այն որոշակի բովանդակություն ունենա: Իսկ Django- ն կօգնի ձեզ ստեղծել բովանդակություն (content): + +## Ի՞նչ է պատահում, երբ ինչ-որ մեկը վեբ կայք է խնդրում ձեր սերվերից: + +Երբ որևէ հարցումը է գալիս վեբ սերվերին, այն փոխանցվում է Django- ին, որը փորձում է պարզել, թե կոնկրետ ինչ է իրենից պահանջվում: Նախ այն վերցնում է ինտերնետային կայքի հասցեն և հետք փորձում հասկանալ, թե ինչ անել: Այս հատվածը իրականացնում է Django- ի ** urlresolver ** ը (նշենք, որ կայքի հասցեն կոչվում է URL - Uniform Resource Locator - այնպես որ * urlresolver * անունն իմաստ ունի): Այն շատ խելացի չէ. ուստի այն պարզապես վերցնում է օրինաչափությունների ցուցակ և փորձում համապատասխանեցնել URL- ի հետ: Django- ն վերևից ներքև ստուգում է օրինաչափությունները, և եթե ինչ-որ բան համընկնում է, ապա Django- ն հարցումը փոխանցում է համապատասխան գործառույթին (որը կոչվում է դիտում *view*): + +Պատկերացրեք նամակներով փոստատարի: Նա քայլում է փողոցով և ստուգում տան համարները նամակի վրա նշված հասցեի հետ: Եթե ​​դրանք համընկնում են, ապա նա նամակ է թողնում: Այսպես է աշխատում urlresolver- ը: + +Բայց ամենահետաքրքիր բաները տեղի են ունենում դիտման *view* գործառույթում. Օրինակ, մենք կարող ենք մուտք գործել տվյալների բազա՝ որոշ տեղեկություններ որոնելու համար: Միգուցե օգտագործողը խնդրե՞լ է փոխել որոշ տեղեկություններ: Օրինակ նամակը ասոմ է ՝ «Խնդրում եմ, փոխեք իմ աշխատանքի նկարագիրը»: *view* դիտման գործառույթը կարող է ստուգել, թե ​​արդյոք դուք դա անելու թույլտվություն ունեք, ապա թարմացրեք աշխատանքի նկարագրությունը և հետ ուղարկեք հաղորդագրություն."Done!" (Կատարված է) Դրանից հետո *view* առաջացնում է պատասխան, և Django- ն կարող է այն ուղարկել օգտվողի վեբ բրաուզերին: + +Վերոնշյալ նկարագրությունը մի փոքր պարզեցված է, բայց ձեզ հարկավոր չէ իմանալ բոլոր տեխնիկական «նրբությունները» հենց հիմա: Բավական է հասկանալ հիմնական գաղափարը: + +Այսպիսով, առանց մանրամասների մեջ շատ խորանալու, եկեք սկսենք ինչ-որ բան ստեղծեք Django- ի հետ և այդ ընթացքում կսովորենք բոլոր կարևոր առանձնահատկությունները: \ No newline at end of file diff --git a/hy/django_admin/README.md b/hy/django_admin/README.md new file mode 100644 index 00000000000..2ad3043c013 --- /dev/null +++ b/hy/django_admin/README.md @@ -0,0 +1,57 @@ +# Django ադմին + +Հենց նոր մոդելավորված գրառումները ավելացնելու, խմբագրելու և ջնջելու համար մենք կօգտագործենք Django ադմինիստրատորը: + +Բացեք `blog/admin.py` ֆայլը ծածկագրի խմբագրում և դրա բովանդակությունը փոխարինեք հետևյալով. + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Ինչպես տեսնում եք, մենք ներմուծել ենք (include-ներառել) Post-ի մոդելը, որը սահմանված էր նախորդ գլխում: Որպեսզի մեր մոդելը հասանելի լինի ադմինիստրատորի էջում, մենք պետք է այն գրանցենք ՝ օգտագործելով այս `admin.site.register(Post)` գրառումը: + +Լավ, ժամանակն է նայել մեր Post մոդելը: Հիշեք, որ վեբ սերվերը գործարկելու համար վահանակում գործարկեք այս `python manage.py runserver` հրամանը: Գնացեք ձեր browser (դիտարկիչ) և մուտքագրեք այս http://127.0.0.1:8000/admin/ հասցեն: Դուք կտեսնեք մուտքի թույլտվության էջ. + +![Մուտք էջ](images/login_page2.png) + +Մուտք գործելու համար հարկավոր է ստեղծել *superuser* ՝ օգտվողի հաշիվ, որն ամբողջությամբ վերահսկում է կայքը: Վերադարձեք հրամանի տող, մուտքագրեք `python manage.py createsuperuser` և սեղմեք Enter: + +> Հիշեք ՝ վեբ սերվերի գործարկման ընթացքում նոր հրամաններ գրելու համար բացեք նոր տերմինալային պատուհան և ակտիվացրեք ձեր վիրտուալ միջավայրը (virtualenv): Մենք վերանայեցինք, թե ինչպես գրել նոր հրամաններ ** Ձեր առաջին Django նախագիծը ** (Your first Django project)գլուխը, **Մեկնարկելով վեբ սերվերը** (Starting the web server) բաժնում: + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Երբ ձեզ հուշում են, մուտքագրեք ձեր օգտվողի անունը (փոքրատառով, առանց բացատներ), էլ. Փոստի հասցեն և գաղտնաբառը: ** Մի անհանգստացեք, որ չեք կարող տեսնել ձեր մուտքագրած գաղտնաբառը, դա բնական է ** Մուտքագրեք այն և սեղմեք `enter` շարունակելու համար: Արդյունքը պետք է ունենա այսպիսի տեսք (որտեղ օգտագործողի անունը և էլ. փոստը պետք է լինեն ձեր սեփականը). + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Վերադարձեք ձեր բրաուզեր (browser) և մուտք գործեք ձեր ընտրած օգտվողի անունով և գաղտնաբառով: Այնուհետև Դուք պետք է տեսնեք Django կառավարման վահանակ (Django admin dashboard): + +![Django ադմին](images/django_admin3.png) + +Գնացեք գրառումներ/ Posts բաժին և մի փոքր փորձարկեք այն: Ավելացրեք հինգ կամ վեց բլոգային գրառումներ (blog posts): Մի անհանգստացեք բովանդակության համար. Դուք այն տեսնում եք միայն ձեր տեղական համակարգչում. Դուք կարող եք պատճենել և տեղադրել տեքստը այս ձեռնարկից ՝ ժամանակ խնայելու համար: :) + +Համոզվեք, որ առնվազն երկու կամ երեք գրառում (բայց ոչ բոլորը) հրապարակման ամսաթիվ ունեն: Ապագայում դա կարող է օգտակար լինել: + +![Django ադմին](images/edit_post3.png) + +Եթե ​​ցանկանում եք ավելին իմանալ Django- ի ադմինիստրատորի մասին, տես պաշտոնական փաստաթղթերի այս բաժինը ՝ https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +Հավանաբար, ճիշտ ժամանակն է մեկ բաժակ սուրճով (կամ թեյով) ինքներդ ձեզ ոքևորելու և ձեր էներգիան լրացնելու համար ինչ-որ բան ուտելու համար: Դուք պարզապես ստեղծեցիք ձեր առաջին Django մոդելը և արժանի եք ընդմիջման: \ No newline at end of file diff --git a/hy/django_admin/images/django_admin3.png b/hy/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/hy/django_admin/images/django_admin3.png differ diff --git a/hy/django_admin/images/edit_post3.png b/hy/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/hy/django_admin/images/edit_post3.png differ diff --git a/hy/django_admin/images/login_page2.png b/hy/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/hy/django_admin/images/login_page2.png differ diff --git a/hy/django_forms/README.md b/hy/django_forms/README.md new file mode 100644 index 00000000000..0b22cb8ad61 --- /dev/null +++ b/hy/django_forms/README.md @@ -0,0 +1,481 @@ +# Django ֆորմաներ + +Վերջին բանը, որ մենք ուզում ենք անել մեր կայքում, բլոգի գրառումներն ավելացնելու և խմբագրելու հարմարավետ միջոց ստեղծելն է: Django- ի `admin` -ը (ադմինիստրատորը) հիանալի է, բայց դրա դիզայնը դժվար է փոխել: `forms` -ի հետ մենք բացարձակ վերահսկողություն կունենանք մեր ինտերֆեյսի վրա: Մենք կարող ենք իրագործել գրեթե այն ամենը, ինչ կարող ենք պատկերացնել: + +Django ձևերի (Django forms-ի) մեջ հաճելին այն է, որ մենք կարող ենք զրոյից ստեղծել նոր ձև, կամ օգտագործել `ModelForm`-ը ՝ ձևերի պարունակությունը մոդելում պահելու համար: + +Սա հենց այն է, ինչ մենք ուզում ենք անել. Մենք ձև կստեղծենք `Post` մոդելի համար: + +Ինչպես Django-ի յուրաքանչյուր կարեւոր մաս, ձևերը (forms) նույնպես ունեն իրենց սեփական ֆայլը . ` form.py `: + +Մենք պետք է այս անունով ֆայլ ստեղծենք `blog` գրացուցակում: + + blog + └── forms.py + + +Շատ լավ, եկեք բացենք այն կոդերի խմբագրում և մուտքագրենք հետևյալ կոդը. + +{% filename %}blog/forms.py{% endfilename %} + +```python +django ներմուծման ձևերից + +.models- ից ներմուծում են Post + +դասի PostForm (forms. ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) + + +``` + +Նախ մենք պետք է ներմուծենք Django ձևերը/Django forms (`from django import forms` /django ներմուծման ձևերից) և մեր `Post` մոդելը/model (` .models- ից ներմուծում ենք Post `): + +` PostForm ` - ը, ինչպես, հավանաբար, ենթադրում եք, մեր ձևի անունն է: Մենք պետք է Django- ին ասենք, որ այս ձևը ` ModelForm ` է (այնպես որ Django- ն ինչ-որ կախարդանք անի մեզ համար). դրա համար պատասխանատու է `forms.ModelForm` - ը: + +Հաջորդը, մենք ունենք ` class Meta `, որտեղ մենք սահմանում ենք (Django- ին), թե որ մոդելը կօգտագործվի այս ձևը ստեղծելու համար (` model = Post `): + +Վերջապես, մենք կարող ենք հստակեցնել, թե որ դաշտը (կամ դաշտերը) պետք է առկա լինեն մեր ֆորմայում: Այս սցենարում մենք ուզում ենք միայն ` title (վերնագիրը) ` և ` text(տեքստը) ` ցուցադրվեն. Հեղինակը պետք է լինի այն օգտվողը, ով մուտք է գործել իր օգտվողի անունով (այսինքն դու!) և ` created_date(ստեղծված_ ամսաթիվը) `պետք է ավտոմատ կերպով տեղադրվի գրառման ստեղծման ժամանակ (այսինքն ՝ կոդով), այնպես չէ՞: + +Եվ վերջ այսքանը! Մեզ մնում է միայն օգտագործել ձևը *view* և ցուցադրել այն template-ում(ձևանմուշում): + +Այսպիսով, մեկ անգամ ևս մենք կստեղծենք link(հղում) դեպի էջ, URL, դիտում և template (ձևանմուշ): + +## Link (Հղում) դեպի էջի ձևը + +Հղումը չավելացնելուց առաջ մեզ պետք են մի քանի պատկերակներ, որոնք կօգտագործվեն որպես հղման կոճակներ: Այս ձեռնարկի համար ներբեռնեք [ file-earmark-plus.svg ](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) և պահեք այն ` blog/templates/blog/icons/ ` թղթապանակում: + +> Նշում. SVG պատկերը ներբեռնելու համար բացեք համատեքստային ընտրացանկը հղման վրա (սովորաբար դրա վրա աջ կտտացնելով) և ընտրեք <> («Պահել հղումը որպես»): Պատուհանում հարցնելով, թե որտեղ պետք է ֆայլը պահպանել, անցեք ձեր Django նախագծի ` djangogirls ` գրացուցակը, իսկ դրա ներքո ՝ ` blog/templates/blog/icons/ ` ենթագրացուցակ, և ֆայլը այնտեղ պահեք: + +Codeամանակն է ծածկագրի խմբագրում բացել `blog/templates/blog/base.html`: Այժմ մենք կարող ենք օգտագործել այս պատկերակային ֆայլը բազային ձևանմուշի մեջ ՝ հետևյալ կերպ. ` div ` տարրում ` headrer ` բաժնում, մենք կավելացնենք հղում ` h1 ` տարրից առաջ. + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Նկատի ունեցեք, որ մենք ուզում ենք մեր նոր տեսակետը կոչել ` post_new `: [SVG icon](https://icons.getbootstrap.com/icons/file-earmark-plus/) տրամադրվում է [Bootstrap Icons ](https://icons.getbootstrap.com/) կողմից, և դրանում կցուցադրվի էջի պատկերակ `գումարած նշանով: Մենք օգտագործում ենք Django ձևանմուշի դիրեկտիվը, որը կոչվում է `include `: Սա ֆայլի պարունակությունը կներարկի Django ձևանմուշում: Վեբ զննարկիչը գիտի, թե ինչպես վարվել այս տեսակի բովանդակության հետ `առանց հետագա մշակման: + +> Bootstrap- ի բոլոր պատկերակները կարող եք ներբեռնել [ here](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip): Անջատեք ֆայլը և պատճենեք բոլոր SVG պատկերային ֆայլերը ` blog/templates/blog/ ` ներսում գտնվող նոր պանակի մեջ, որը կոչվում է ` icons `: Այդ կերպ Դուք կարող եք մուտք գործել ` pencil-fill.svg ` պես պատկերակ ՝ օգտագործելով ֆայլի ուղի `blog/templates/blog/icons/pencil-fill.svg ` + +Տողը խմբագրելուց հետո ձեր HTML ֆայլը այժմ պետք է ունենա այսպիսի տեսք. + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +http://127.0.0.1:8000 էջը փրկելուց և թարմացնելուց հետո կտեսնեք ծանոթ ` NoReverseMatch ` error(սխալ) : Այդպե՞ս է: Լավ + +## URL + +Կոդի խմբագրում բացում ենք ` blog/urls.py` և ավելացնում տող. + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +Եվ վերջնական ծածկագիրը կտեսնի այսպես. + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Կայքը թարմացնելուց հետո մենք տեսնում ենք ` AttributeError `, քանի որ իրականացված չենք ` post_new ` դիտումը: Եկեք ավելացնենք հենց հիմա: + +## post_new view + +բացեք ` բլոգը / views.py ` ֆայլը ծածկագրի խմբագրում և ավելացնել տողերի մնացած տողերի հետևյալ տողերը. + +{% filename %}blog/views.py{% endfilename %} + +```python +.forms- ից ներմուծում է PostForm +``` + +Եվ հետո մեր * տեսակետը *: + +{% filename%} blog/views.py {% endfilename%} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Նոր ` Post ` ձև ստեղծելու համար հարկավոր է զանգահարել ` PostForm () ` և փոխանցել այն ձևանմուշին: Մենք կվերադառնանք այս *view*, բայց առայժմ արագ եկեք ձևանմուշ ստեղծենք ձևի համար: + +## Կաղապար + +Մենք պետք է ` post_edit.html` գրացուցակում ` blog/templates/blog` ֆայլ ստեղծենք և բացենք այն կոդերի խմբագրում: Ձևը գործ դնելու համար մեզ մի քանի բան է պետք. + +* Մենք պետք է ցուցադրենք ձևը: Մենք կարող ենք դա անել (օրինակ) {% raw %}`{{ form.as_p }}`{% endraw %} - ով: +* Վերևի տողը պետք է փաթաթված լինի HTML ձևի տարրով. ` ... `: +* Մեզ պետք է ` Save` կոճակը: Մենք դա անում ենք HTML կոճակի միջոցով. ``: +* Եվ, վերջապես, `
` թեգը բացելուց անմիջապես հետո մենք պետք է ավելացնենք {% raw %} ` {% csrf_token %} ` {% endraw %}: Սա շատ կարևոր է, քանի որ դրանով ապահովվում են ձեր ձևերի անվտանգությունը: Եթե ​​մոռանաք այս բիթի մասին, Django- ն կբողոքարկի, երբ փորձեք պահպանել ձևը. + +![CSFR Forbidden page](images/csrf2.png) + +Լավ, այնպես որ եկեք տեսնենք, թե ինչպես պետք է HTML- ը ` 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 }} + +
+{% endblock %} +``` + +Թարմացնելու ժամանակն է: Այո Ձեր ձևը ցուցադրվում է: + +![New form](images/new_form2.png) + +Բայց սպասեք մի րոպե: Երբ ինչ-որ բան եք մուտքագրում ` title ` և ` title ` դաշտերում և փորձում եք այն պահպանել, ի՞նչ կլինի: + +Ոչինչ Մենք նորից նույն էջում ենք, և մեր տեքստը այլևս չկա ... և ոչ մի նոր գրառում չի ավելացվում: Այսպիսով, ի՞նչն է սխալ եղել: + +Պատասխանն է. Ոչինչ: Մենք պետք է մի փոքր ավելի շատ աշխատանք կատարենք մեր * view*: + +## Ձևը պահելը + +Մեկ անգամ եւս բացեք ` blog/views.py ` կոդը խմբագրիչի մեջ: Ներկայումս ` post_new ` տեսքում մենք ունենք միայն հետևյալը. + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Ձևը ներկայացնելիս մեզ հետ են բերում նույն տեսակետը, բայց այս անգամ մենք ունենք ևս մի քանի տվյալներ ` request` - ում, ավելի կոնկրետ ` request. POST ` (անվանումն ունի ոչ մի կապ չունի բլոգի "post"(«գրառման») հետ. դա կապ ունի այն փաստի հետ, որ մենք "psoting" («տեղադրում ենք») տվյալներ): Հիշո՞ւմ եք, թե ինչպես HTML ֆայլում մեր `
` սահմանումն ուներ փոփոխական ` method="POST" `: Ձևի բոլոր դաշտերն այժմ գտնվում են ` request.POST `: Դուք չպետք է վերանվանեք ` POST ` ը որևէ այլ բանի (` method ` միակ այլ վավեր արժեքը ` GET ` է, բայց մենք ժամանակ չունենք բացատրելու, թե ինչ տարբերություն է): + +Այսպիսով, մեր * view* մենք ունենք կարգավորման երկու առանձին իրավիճակ. Առաջին ՝ երբ մենք առաջին անգամ մուտք ենք գործում էջ և ուզում ենք դատարկ ձև, և երկրորդ, երբ վերադառնում ենք * view* բոլոր մուտքագրված ձևի տվյալներով: Այսպիսով, մենք պետք է պայման դնենք (դրա համար կօգտագործենք ` if `): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Լրացրեք կետերը ` [...] `: Եթե ​​` method` ` POST ` է, ապա մենք ուզում ենք կառուցել ` PostForm- ը ` ձևից ստացված տվյալներով, այնպես չէ՞: Մենք դա կանենք հետևյալ կերպ. + +{% filename%} blog/views.py{% endfilename%} + +```python +form = PostForm(request.POST) +``` + +Հաջորդ բանը `ստուգել, ​​թե արդյոք ձևը ճիշտ է (բոլոր պահանջվող դաշտերը դրված են և սխալ արժեքներ չեն ներկայացվել): Մենք դա անում ենք ` form.is_valid () ` - ի միջոցով: + +Մենք ստուգում ենք, արդյոք ձևը վավեր է, և եթե այո, ապա այն կարող ենք պահպանել: + +{% 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() +``` + +Ըստ էության, մենք այստեղ ունենք երկու բան. Մենք ձևը պահում ենք ` form.save ` և ավելացնում ենք հեղինակ. ` commit = False ` նշանակում է, որ մենք դեռ չենք ուզում պահպանել ` Post ` մոդելը. Մենք նախ ուզում ենք ավելացնել հեղինակին: Շատ ժամանակ դուք կօգտագործեք ` form.save () ` առանց ` commit = False `, բայց այս դեպքում մենք պետք է այն մատակարարենք: ` post.save () ` կպահպանի փոփոխությունները (ավելացնելով հեղինակին) և կստեղծվի բլոգում նոր գրառում: + +Վերջապես, զարմանալի կլիներ, եթե մենք կարողանայինք անմիջապես անցնել ` post_detail ` էջը մեր նորաստեղծ բլոգում տեղադրելու համար, այնպես չէ՞: Դա անելու համար մեզ անհրաժեշտ է ևս մեկ ներմուծում. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Ավելացրեք այն ձեր ֆայլի հենց սկզբում: Եվ հիմա մենք կարող ենք ասել. «Անցեք ` post_detail ` էջը նորաստեղծ գրառման համար». + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +` post_detail ` այն տեսքի անունն է, որին մենք ցանկանում ենք այցելել: Հիշո՞ւմ եք, որ այս * view* պահանջում է ` pk ` փոփոխական: Այն դիտումներին փոխանցելու համար մենք օգտագործում ենք ` pk = post.pk `, որտեղ ` post` նոր ստեղծվող բլոգային գրառում է: + +Լավ, մենք շատ ենք խոսել, բայց հավանաբար ուզում ենք տեսնել, թե ինչպիսին է այժմ * view * ճիշտ է: + +{% filename%} բլոգ /views.py {% endfilename%} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Տեսնենք ՝ կաշխատի՞: Անցեք http://127.0.0.1:8000/post/new/ էջին, ավելացրեք `վերնագիր` և `տեքստ`, պահեք այն… և voilà: Ավելացվեց բլոգի նոր գրառումը, և մենք վերահասցեագրվում ենք ` հաղորդագրության_մանրամասնություն ` էջ: + +Գուցե նկատած լինեիք, որ մենք տեղադրում ենք հրապարակման ամսաթիվը նախքան հաղորդագրությունը պահելը: Ավելի ուշ, մենք կներկայացնենք * հրապարակման կոճակ * ** Django Girls Tutorial- ում ՝ Extensions **: + +Դա հիանալի է! + +> Քանի որ մենք վերջերս օգտագործել ենք Django ադմինիստրատորի միջերեսը, համակարգը ներկայումս կարծում է, որ մենք դեռ մուտք ենք գործել: Կան մի քանի իրավիճակներ, որոնք կարող են հանգեցնել մեզ դուրս գալուն (զննարկիչը փակելը, DB- ն վերագործարկելը և այլն): Եթե ​​հաղորդագրություն ստեղծելիս հայտնաբերում եք, որ սխալներ եք գրանցում մուտք գործած օգտվողի բացակայության վերաբերյալ, ապա անցեք ադմինիստրատորի էջ http://127.0.0.1:8000/admin և կրկին մուտք գործեք: Դրանով խնդիրը ժամանակավորապես կկարգավորվի: ** Տնային առաջադրանք. Ձեզ սպասում է մշտական ​​շտկում ՝ հիմնական ձեռնարկից հետո անվտանգություն ավելացրեք ձեր կայքում: ** + +![Logged in error](images/post_create_error.png) + +## Ձևի վավերացում + +Այժմ մենք ձեզ ցույց կտանք, թե որքան զով են Django- ի ձևերը: Բլոգի գրառումը պետք է ունենա ` title ` և ` text ` դաշտեր: Մեր ` Post` մոդելում մենք չասացինք, որ այս դաշտերը (ի տարբերություն ` published_date `) չեն պահանջվում, ուստի Django- ն, ըստ նախնականի, ակնկալում է, որ դրանք կսահմանվեն: + +Փորձեք պահպանել ձևը առանց ` title ` և ` text `: Գուշակիր, թե ինչ կլինի: + +![Form validation](images/form_validation2.png) + +Django- ն հոգ է տանում հաստատելու, որ մեր ձևի բոլոր դաշտերը ճիշտ են: Հիանալի չէ՞: + +## Խմբագրել ձևը + +Այժմ մենք գիտենք, թե ինչպես ավելացնել նոր գրառում: Բայց ի՞նչ կլինի, եթե մենք ուզում ենք խմբագրել գոյություն ունեցողը: Սա շատ նման է մեր արածին: Եկեք արագ ստեղծենք մի քանի կարևոր բաներ: (Եթե ինչ-որ բան չեք հասկանում, պետք է հարցնեք ձեր մարզչին կամ նայեք նախորդ գլուխներին, քանի որ մենք արդեն ծածկել ենք այս բոլոր քայլերը): + +Նախ, եկեք պահենք պատկերակը, որը ներկայացնում է խմբագրման կոճակը: Ներբեռնեք [ pencil-fill.svg ](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) - ը և այն պահեք ` blog/templates/blog/icons/`: + +Կոդի խմբագրում բացեք `blog/templates/blog/post_detail.html` և `article` էլեմենտի մեջ ավելացրեք հետևյալ ծածկագիրը. + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +այնպես, որ ձևանմուշն այսպիսին լինի. + +{% filename%} բլոգ / ձևանմուշներ / բլոգ / post_detail.html {% endfilename%} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +Բացեք ` blog/urls.py ` ծածկագրի խմբագրում և ավելացրեք այս տողը. + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Մենք կրկին կօգտագործենք ` blog/templates/blog/post_edit.html ` ձևանմուշը, այնպես որ վերջին բացակայողը * view -է*: + +Եկեք բացենք ` blog/views.py` ծածկագրի խմբագրում և ավելացնենք սա ֆայլի հենց վերջում. + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Սա կարծես գրեթե նույնն է, ինչ մեր ` post_new ` տեսակետը: Բայց ոչ ամբողջությամբ: Մեկի համար մենք ` url- ից ` փոխանցում ենք լրացուցիչ ` pk ` պարամետր: Հաջորդը, մենք ստանում ենք ` Post ` մոդելը, որը ցանկանում ենք խմբագրել ` get_object_or_404(Post, pk=pk)`, իսկ հետո, երբ ձև ենք ստեղծում, այս գրառումն անցնում ենք որպես ` instance`, այնպես էլ, երբ ձևը պահում ենք + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +… Եվ երբ մենք այս գրառմամբ նոր բացեցինք ձևաթուղթ ՝ խմբագրելու համար. + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Լավ, եկեք փորձենք, արդյոք այն աշխատում է: Եկեք գնանք ` post_detail` էջին: Վերին աջ անկյունում պետք է լինի խմբագրման կոճակ. + +![Edit button](images/edit_button2.png) + +Երբ կտտացրեք այն, կտեսնեք ձևը մեր բլոգի գրառման հետ. + +![Edit form](images/edit_form2.png) + +Ազատորեն փոխեք վերնագիրը կամ տեքստը և պահպանեք փոփոխությունները: + +Շնորհավորում եմ Ձեր դիմումը ավելի ու ավելի ամբողջական է դառնում: + +Եթե ​​Django ձևերի վերաբերյալ ավելի շատ տեղեկատվության կարիք ունեք, պետք է կարդաք փաստաթղթերը. https://docs.djangoproject.com/hy/2.2/topics/forms/ + +## Անվտանգություն + +Հղումը կտտացնելով նոր հաղորդագրություններ ստեղծելու կարողությունը զարմանալի է: Բայց հենց հիմա, յուրաքանչյուր ոք, ով այցելում է ձեր կայք, կկարողանա նոր բլոգային գրառում կատարել, և դա, հավանաբար, ձեր ուզածը չէ: Եկեք այնպես անենք, որ կոճակը ցուցադրվի ձեզ համար, բայց ոչ ուրիշ մեկի: + +Բացեք ` blog/templates/blog/base.html` կոդերի խմբագրում, գտեք մեր ` div ` ` վերնագրի ներսում ` և խարիսխի տարրը, որը դուք ավելի վաղ այնտեղ եք տեղադրել , Այն պետք է ունենա այսպիսի տեսք. + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Մենք դրան կավելացնենք ևս ` {% if%} ` պիտակը, որը կստիպի հղումը ցույց տալ միայն այն ադմինիստրատոր մուտք գործած օգտվողների համար: Հենց հիմա, դու հենց դու ես: Փոխեք `` տարրը ՝ այսպիսի տեսք ունենալու համար. + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/file-earmark-plus.svg' %} + +{% endif %} +``` + +Սա ` {% if %} ` կհանգեցնի այն, որ հղումը կուղարկվի զննարկիչ, միայն եթե էջը հայցող օգտվողը մուտք է գործում: Սա ամբողջությամբ չի պաշտպանում նոր հաղորդագրությունների ստեղծումը, բայց դա լավ առաջին քայլ է: Մենք ավելի շատ անվտանգություն ենք ծածկելու ընդլայնման դասերին: + +Հիշո՞ւմ եք խմբագրման պատկերակը, որը մենք պարզապես ավելացրել ենք մեր մանրամասն էջին: Մենք ուզում ենք նաև նույն փոփոխությունն ավելացնել այնտեղ, այնպես որ այլ մարդիկ չեն կարողանա խմբագրել առկա հաղորդագրությունները: + +Բացեք ` blog/templates/blog/post_detail.html` կոդերի խմբագրում և գտեք այս տողը. + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +Փոխեք այն այստեղ ՝ + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +Քանի որ, ամենայն հավանականությամբ, մուտք եք գործել կայք, եթե թարմացնեք էջը, այլ բան չեք տեսնի: Էջը բեռնեք այլ զննարկչում կամ ինկոգնիտո պատուհանում (Windows Edge- ում կոչվում է «InPrivate»), և կտեսնեք, որ հղումը չի ցուցադրվում, և պատկերակը նույնպես չի ցուցադրվում: + +## Եվս մեկ բան. Տեղաբաշխեք ժամանակ: + +Տեսնենք, արդյոք այս ամենը աշխատում է PythonAnywhere- ում: Anotherամանակն է նոր տեղակայման: + +* Նախ, կատարեք ձեր նոր ծածկագիրը և սեղմեք այն դեպի 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 + + +* Հետո, [ PythonAnywhere Bash կոնսոլում ](https://www.pythonanywhere.com/consoles/) + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Մի մոռացեք փոխարինել `` ձեր իրական PythonAnywhere ենթադոմեյնով ՝ առանց անկյունային փակագծերի:) + +* Ի վերջո, անցեք [ "Web" page](https://www.pythonanywhere.com/web_app_setup/) (օգտագործեք մենյուի վերևի աջ մասում ընտրացանկի կոճակը) և սեղմեք ** Reload**: Թարմացրեք ձեր https://subdomain.pythonanywhere.com բլոգը ՝ փոփոխությունները տեսնելու համար: + +Եվ դա պետք է լինի դա: Շնորհավորանքներ :) \ No newline at end of file diff --git a/hy/django_forms/images/csrf2.png b/hy/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/hy/django_forms/images/csrf2.png differ diff --git a/hy/django_forms/images/drafts.png b/hy/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/hy/django_forms/images/drafts.png differ diff --git a/hy/django_forms/images/edit_button2.png b/hy/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/hy/django_forms/images/edit_button2.png differ diff --git a/hy/django_forms/images/edit_form2.png b/hy/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/hy/django_forms/images/edit_form2.png differ diff --git a/hy/django_forms/images/form_validation2.png b/hy/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/hy/django_forms/images/form_validation2.png differ diff --git a/hy/django_forms/images/new_form2.png b/hy/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/hy/django_forms/images/new_form2.png differ diff --git a/hy/django_forms/images/post_create_error.png b/hy/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/hy/django_forms/images/post_create_error.png differ diff --git a/hy/django_installation/README.md b/hy/django_installation/README.md new file mode 100644 index 00000000000..cf2e7794630 --- /dev/null +++ b/hy/django_installation/README.md @@ -0,0 +1,7 @@ +# Django- ի տեղադրում + +> **Նշում** Եթե Chromebook եք օգտագործում, բաց թողեք այս գլուխը և համոզվեք, որ հետևում եք [Chromebook Setup/Chromebook- ի կարգավորման](../chromebook_setup/README.md) ցուցումներին: +> +> **Նշում** Եթե դուք արդեն ավարտել եք տեղադրումը [installation steps](../installation/README.md) , կարող եք ուղղակիորեն անցնել հաջորդ գլխին: + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/hy/django_installation/instructions.md b/hy/django_installation/instructions.md new file mode 100644 index 00000000000..a8dac854ad6 --- /dev/null +++ b/hy/django_installation/instructions.md @@ -0,0 +1,230 @@ +> Այս բաժնի մի մասը հիմնված է Geek Girls Carrots- ի (https://github.com/ggcarrots/django-carrots) ձեռնարկների վրա: +> +> Այս բաժնի մի մասը հիմնված է [django-marcador- ի վրա ձեռնարկ](http://django-marcador.keimlink.de/) լիցենզավորված Creative Commons- ի ներքո Attribution-ShareAlike 4.0 միջազգային լիցենզիա: Django-marcador ձեռնարկի հեղինակային իրավունքի պաշտպանն են Markus Zapke-Gründemann et al. + +## Վիրտուալ միջավայր + +Նախքան Django- ն տեղադրելը, մենք ձեզ կառաջարկենք տեղադրել չափազանց օգտակար գործիք, որը կօգնի ձեր կոդավորման միջավայրը կոկիկ պահել ձեր համակարգչում: Հնարավոր է բաց թողնել այս քայլը, բայց խորհուրդ է տրվում իրականացնել: Հնարավոր լավագույն կարգավորումից սկսելը ապագայում ձեզ շատ դժվարություններ կփրկի: + +Այսպիսով, եկեք ստեղծենք ** վիրտուալ միջավայր/virtual environment** (կոչվում է նաև *virtualenv* ): Virtualenv- ը մեկուսացնելու է ձեր Python / Django- ի տեղադրումը ՝ ըստ նախագծի: Սա նշանակում է, որ որևէ փոփոխություն, որ կատարեք մեկ կայքում, չի ազդի որևէ այլ կայքի վրա, որը դուք նույնպես զարգացնում եք: Կոկիկ է, այնպես չէ՞: + +Դուք պետք է ընդամենը գտնեք գրացուցակ, որում ցանկանում եք ստեղծել `virtualenv`; ձեր տան գրացուցակը, օրինակ. Windows- ում այն ​​կարող է նման լինել `C:\Users\Name` (որտեղ ` Name ` - ը ձեր մուտքի անունն է): + +> ** ՆՇՈՒՄ. ** Windows- ում համոզվեք, որ այս գրացուցակը չի պարունակում շեշտադրված կամ հատուկ նիշեր. եթե ձեր օգտանունը պարունակում է ընդգծված նիշեր, օգտագործեք այլ գրացուցակ, օրինակ ՝ `C:\djangogirls`: + +Այս ձեռնարկի համար մենք կօգտագործենք նոր գրացուցակ ` djangogirls ` ձեր տան գրացուցակից. + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Մենք պատրաստելու ենք մի վիրտուալ անուն, որը կոչվում է ` myvenv `: Ընդհանուր հրամանը կլինի ձևաչափով/format. + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Նոր `virtualenv` ստեղծելու համար հարկավոր է բացել հրամանի տողը և գործարկել `python -m venv myvenv`: Դա կունենա այսպիսի տեսք. + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Որտեղ ` myvenv ` - ը ձեր `virtualenv` անունն է: Կարող եք օգտագործել ցանկացած այլ անուն, բայց հավատարիմ մնացեք փոքրատառերին և մի օգտագործեք բացատներ, շեշտադրումներ կամ հատուկ նիշեր: Լավ է նաև, որ անունը կարճ մնա. Դուք դեռ շատ կանդրադառնաք դրան: + + + + + +Մենք կարող ենք ստեղծել ` virtualenv ` ինչպես Linux- ի, այնպես էլ macOS- ի վրա ՝ գործարկելով `python3 -m venv myvenv`: Դա կունենա այսպիսի տեսք. + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +` myvenv ` - ը ձեր `virtualenv` անունն է: Կարող եք օգտագործել ցանկացած այլ անուն, բայց հավատարիմ մնացեք փոքրատառերին և բացատներ մի օգտագործեք: Լավ է նաև, որ անունը կարճ մնա. Դուք դեռ շատ կանդրադառնաք դրան: + +> ** ՆՇՈՒՄ. ** Debian / Ubuntu- ի որոշ տարբերակների վրա կարող եք ստանալ հետևյալ սխալը. +> +> {% filename %}command-line{% endfilename %} +> +> Վիրտուալ միջավայրը հաջողությամբ չի ստեղծվել, քանի որ ensurepip- ը հասանելի չէ: Debian / Ubuntu համակարգերում անհրաժեշտ է տեղադրել python3-venv փաթեթը ՝ օգտագործելով հետևյալ հրամանը: +> apt install python3-venv +> Հնարավոր է, որ ձեզ հարկավոր է օգտագործել sudo(սուդո) այդ հրահանգով: +> Python3-venv փաթեթը տեղադրելուց հետո վերստեղծեք ձեր virtual environment (վիրտուալ միջավայր)-ը: +> +> +> Այս դեպքում հետևեք վերը նշված հրահանգներին և տեղադրեք ` python3-venv ` փաթեթը. {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> ** ՆՇՈՒՄ. ** Debian / Ubuntu- ի որոշ տարբերակներում վիրտուալ միջավայր նախաձեռնելիս այն տալիս է հետևյալ սխալը. +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Այս խնդրը շրջանցելու համար օգտագործեք ` virtualenv ` հրամանը: +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **Նշում** Եթե նման սխալ եք ստանում +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> փոխարենը բաց թող +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + + +## Վիրտուալենվի/virtualenv-ի հետ աշխատանք + +Վերոնշյալ հրամանը կստեղծի ` myvenv ` գրացուցակ (կամ մեկ այլ ՝ ձեր ընտրած ցանկացած անուն), որը կպարունակի վիրտուալ միջավայր/ virtual environment (հիմնականում ֆայլերի և պանակների շարք): + + + +Սկսեք ձեր վիրտուալ միջավայրը/virtual environment-ը `գործարկելով. + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> ** Նշում. ** Windows 10-ի դեպքում Windows PowerShell- ում կարող է ստացվել սխալի հաղորդագրություն, որում ասվում է, որ `execution of scripts is disabled on this system/սցենարը անջատված է այս համակարգում` Այս դեպքում բացեք մեկ այլ Windows PowerShell «Գործարկեք որպես ադմինիստրատոր»/"Run as Administrator" տարբերակով: Դրանից հետո փորձեք մուտքագրել հետևյալ հրամանը ՝ նախքան ձեր վիրտուալ միջավայրի/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 +> + + + +> **Նշում** Հանրաճանաչ խմբագիր VS Code- ի օգտագործողների համար, որոնք գալիս են Windows PowerShell- ի վրա հիմնված ինտեգրված տերմինալ, եթե ցանկանում եք հավատարիմ մնալ ինտեգրված տերմինալին, կարող եք գործարկել հետևյալ հրահանգը ՝ ձեր վիրտուալ միջավայրն ակտիվացնելու համար. +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> Առավելությունն այն է, որ անհրաժեշտ չէ փոխություն անել խմբագրի պատուհանի և հրամանի տողի միջև: + + + + + +Սկսեք ձեր վիրտուալ միջավայրը/virtual environment-ը `գործարկելով. + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Մի մոռացեք ` myvenv ` -ը փոխարինել ձեր ընտրած ` virtualenv ` անունով: + +> **Նշում**երբեմն `source/աղբյուրը` կարող է անհասանելի լինել: Այդ դեպքում օգտագործեք հետևյալ մեթոդը. +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Դուք կհասկանաք, որ virtualenv- ն աշխատում է, երբ հրամանի տողում տեսնեք `(myvenv)` նախածանցը: + +Վիրտուալ միջավայրի հետ աշխատելիս ` python ` հրամանն ինքնաբերաբար կվերաբերվի լեզվի ճիշտ տարբերակին, այնպես որ ձեզ հարկավոր չէ օգտագործել ` python3 `: + +Հիանալի է, հիմա մենք բոլոր կարեւոր կախվածությունները կպահենք մեկ տեղում: Վերջապես, դուք կարող եք տեղադրել Django- ն: + +## Django- ի տեղադրում {#django} + +Այժմ, երբ ձեր `virtualenv`-ն աշխատում է, կարող եք տեղադրել Django- ն: + +Բայց մինչ այդ մենք պետք է համոզվենք, որ մենք ունենք `pip`- ի վերջին տարբերակը տեղադրված, դա այն ծրագիրն է, որը մենք կօգտագործենք Django- ն տեղադրելու համար. + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Փաթեթների տեղադրում պահանջներով + +Պահանջների ֆայլը/A requirements file պահում է կախվածության ցուցակը որը տեղադրվելու է օգտագործելով `pip install`: + +Սկզբից ` djangogirls/ ` թղթապանակի մեջ ստեղծեք ` requirements.txt ` ֆայլ ՝ օգտագործելով ավելի վաղ տեղադրած կոդերի խմբագրիչը: Դուք դա անում եք կոդի խմբագրում/code editor-ում նոր ֆայլ բացելով, այնուհետև պահպանելով այն որպես `requirements.txt/ պահանջներ` `djangogirls/` թղթապանակում: Ձեր թղթապանակն այսպիսի տեսք կունենա. + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +Հետևյալ կոդը ավելացրեք ձեր `djangogirls/requirements.txt` ֆայլում. + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Django- ն տեղադրելու համար այժմ մուտքագրեք `pip install -r requirements.txt`: + +{% 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Եթե ​​Windows- ում pip գործարկելիս սխալ եք ստացել, ստուգեք, որ նախագծի գրացուցակը չի պարունակում հեռավորություններ կամ հատուկ նիշեր (օրինակ, `C:\Users\User Name\djangogirls`): Եթե ​​սա է խնդիրը, ապա խնդրում ենք ձեր նախագիծը տեղափոխել մեկ այլ վայր, որի հասցեն չի պարունակի բացատներ և հատուկ նիշեր (խորհուրդ ենք տալիս ՝ `C:\djangogirls`): Նոր գրացուցակում ստեղծեք նոր virtualenv, այնուհետև ջնջեք հինը և կրկնեք վերը նշված հրահանգները: (Virtualenv գրացուցակի տեղափոխումը չի գործի, քանի որ virtualenv- ն օգտագործում է բացարձակ ուղիներ): + + + + + +> Հրամանի տողը կարող է սառեցնել Django- ն տեղադրելու փորձից հետո: Եթե ​​դա տեղի ունենա, ապա վերը նշված հրամանի փոխարեն օգտագործեք այս մեկը. +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Եթե ​​Ubuntu 12.04-ին pip զանգահարելիս սխալի եք հանդիպում, գործարկեք `python -m pip install -U --force-reinstall pip` ՝ վիրտուալում pip- ի տեղադրումն ամրագրելու համար: + + + +Վերջ Դուք այժմ (վերջապես) պատրաստ եք ստեղծել Django հավելված: \ No newline at end of file diff --git a/hy/django_models/README.md b/hy/django_models/README.md new file mode 100644 index 00000000000..4a3e17276f8 --- /dev/null +++ b/hy/django_models/README.md @@ -0,0 +1,203 @@ +# Django մոդելներ + +Մեզ ինչ-որ բան է պետք ՝ մեր բոլոր բլոգային գրառումները պահելու համար, դա հենց այն է ինչ մենք հիմա կստեղծենք: Բայց նախ եկեք խոսենք `objects/օբյեկտներ` կոչվող իրերի մասին: + +## Օbjects/Օբյեկտներ + +Ծրագրավորման մեջ կա մի հասկացություն, որը կոչվում է օբյեկտիվ կողմնորոշում(կամ օբյեկտի վրա հիմնված ծրագրավորում:): Գաղափարն այն է, որ հրահանգների ձանձրալի հաջորդականության փոխարեն, մենք մոդելավորում ենք իրերը և նկարագրում, թե ինչպես են դրանք փոխազդում միմյանց հետ: + +Այսպիսով, ինչ է օբյեկտը: Դա հատկությունների և գործողությունների հավաքածու է: Տարօրինակ է թվում, բայց մենք մի օրինակ կբերենք: + +Եթե ​​մենք ուզում ենք կատու մոդելավորել, ապա կստեղծենք `Cat/ կատու`t օբյեկտ, որն ունի որոշակի հատկություններ, օրինակ ՝ `color/գույն`, `age/տարիք` `mood/տրամադրություն ` ՝ (վատ, լավ, քնկոտ;)), `owner/սեփականատեր` (օրինակ ՝ մեկ այլ առարկա. Անձ կամ, եթե կատուն վայրի է, այս հատկությունը դատարկ կլինի): + +`Cat/Կատու` օբյեկտը կունենա որոշակի գործողությունների շարք. `purr/մլավել`, `scratch/ճանկռել`, կամ `feed/կերակրել` (որտեղ մենք կատուին տալիս ենք մի քանի `CatFood` (կատվի սնունդ), որը կարող է նաև լինել իր սեփական հատկություններով առանձին առարկա օրինակ `taste/համ` ): + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +Այսպիսով, հիմնականում գաղափարը՝ օբյեկտի նկարագրումն է կոդի մեջ՝ հատկություններով (կոչվում են `object properties/օբյեկտի հատկություններ`) և գործողություններով (կոչվում են `methods/մեթոդներ`): + +Այսպիսով, ինչպե՞ս ենք մոդելավորելու բլոգի հաղորդագրությունները: Մենք ուզում ենք բլոգ կառուցել, այնպես չէ՞: + +Մենք պետք է պատասխանենք այն հարցին. Ի՞նչ է բլոգի գրառումը: Ի՞նչ հատկություններ պետք է այն ունենա: + +Դե, հաստատ մեր բլոգային գրառմանը պետք է ինչ-որ տեքստ իր բովանդակությամբ և վերնագիրով, այնպես չէ՞: Լավ կլինի իմանալ նաև, թե ով է այն գրել, այնպես որ հեղինակը մեզ պետք է: Վերջապես, մենք պետք է իմանանք, թե երբ է ստեղծվել գրառումը և երբ է հրապարակվել: + + Post + -------- + title + text + author + created_date + published_date + + +Ի՞նչ բաներ կարող եք անել բլոգում գրառման միջոցով: Լավ կլիներ որ գրառումը հրապարակող ինչ-որ մեթոդ լիներ, ճի՞շտ է: + +Այսպիսով, մեզ հարկավոր է `publish/հրապարակման` մեթոդ: + +Դե, քանի որ մենք որոշել ենք, թե ինչ ենք ուզում ստանալ, եկեք սկսենք մոդելավորել այն Django- ում: + +## Django մոդել + +Իմանալով, թե ինչ է օբյեկտը, մենք կարող ենք ստեղծել Django մոդել մեր բլոգի գրառման համար: + +Django- ում մոդելը հատուկ տեսակի առարկա է. Այն պահվում է ` տվյալների բազայում/database`.: Տվյալների բազան/database-ը տարբեր տվյալների հավաքածու է: Սա այն վայրն է, որտեղ դուք կպահեք տեղեկատվություն օգտվողների, ձեր բլոգի հաղորդագրությունների և այլնի մասին: Մենք կօգտագործենք SQLite տվյալների բազա ՝ մեր տվյալները պահելու համար: Սա ներքին կարգավորման/default Django տվյալների շտեմարանն է. Այս փուլում նրա հնարավորությունները բավարար են մեր պահանջների համար: + +Դուք կարող եք տվյալների շտեմարանում մոդելի մասին մտածել որպես աղյուսակ ՝ սյունակներով (դաշտերով/columns (fields) և տողերով (տվյալներով)/rows (data): + +### Դիմումների ստեղծում + +Ամեն ինչ կոկիկ պահելու համար մենք մեր ծրագրի ներսում կստեղծենք առանձին ծրագիր: Շատ հաճելի է ամեն ինչ կազմակերպել հենց սկզբից: Ծրագիր / Application ստեղծելու համար մենք պետք է հրամանի տողում մուտքագրենք հետևյալ հրահանգը ( `djangogirls` գրացուցակից, որտեղ գտնվում է `manage.py` ֆայլը). + +{% filename %}macOS and Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Դուք կնկատեք, որ ստեղծվել է նոր `blog` գրացուցակ, որն այժմ պարունակում է մի շարք ֆայլեր: Այսպիսով, մեր նախագծում գրացուցակները և ֆայլերը պետք է ունենան այսպիսի տեսք. + + djangogirls + ├── blog + │ ├── admin.py + │ ├── apps.py + │ ├── __init__.py + │ ├── migrations + │ │ └── __init__.py + │ ├── models.py + │ ├── tests.py + │ └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │ ├── __init__.py + │ ├── settings.py + │ ├── urls.py + │ └── wsgi.py + ├── myvenv + │ └── ... + └── requirements.txt + + + +Դիմումը/application-ը ստեղծվելուց հետո մենք պետք է Django- ին ասենք, որ այն այժմ պետք է օգտագործի այն: Մենք դա անում ենք `mysite/settings.py` ֆայլում - բացեք այն ձեր կոդի խմբագրում/code editor: Մենք պետք է գտնենք `INSTALLED_APPS` և ավելացնենք `'blog.apps.BlogConfig',` պարունակող տող, հենց վերևում `]` : Այսպիսով, վերջնական արդյունքը պետք է ունենա այսպիսի տեսք. + +{% 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.apps.BlogConfig', +] +``` + +### Բլոգի գրառման մոդելի ստեղծում + +`blog/models.py` այս ֆայլում մենք բնութագրում ենք `Models/մոդելներ` կոչվող բոլոր օբյեկտները. Սա մի տեղ է, որտեղ մենք կսահմանենք մեր բլոգի գրառումը/blog post-երը: + +Բացեք `blog/models.py` այս ֆայլը կոդերի խմբագրում, ջնջեք ամբողջ տեքստը և փոխարենը տեղադրեք հետևյալ կոդը. + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Համոզվեք, որ `str` մեթոդի յուրաքանչյուր կողմում օգտագործեք երկու տակի գծիկ (`_`) : Այս կոնվենցիան հաճախ օգտագործվում է Python ծրագրավորման մեջ , և երբեմն կոչվում է "dunder" (կարճ ՝ «կրկնակի ընդգծում»/ "double-underscore"): + +Սարսափելի է թվում, ճի՞շտ է: Բայց մի անհանգստացեք. Մենք կբացատրենք, թե ինչ են նշանակում այս տողերը: + +Բոլոր տողերը, որոնք `from` կամ `import` են սկսվում, թույլ են տալիս մուտք գործել կոդ այլ ֆայլերից: Այսպիսով, բոլոր ֆայլերի միջև միևնույն կոդը պատճենելու և տեղադրելու փոխարեն, մենք կարող ենք այն հղել ՝ օգտագործելով `... + import ...`. + +`class Post(models.Model):` –այս տողը սահմանում է մեր մոդելը (դա `object/օբյեկտ`-ն է): + +- `class/դասը` հատուկ բանալիբառ է, որը ցույց է տալիս, որ մենք օբյեկտ ենք սահմանում: +- `Post` -ը մեր մոդելի անունն է: Ցանկության դեպքում մենք կարող ենք փոխել այն (բայց պետք է խուսափել հատուկ նիշերից և սպիտակ տարածությունից): Միշտ դասի անունը սկսեք մեծատառով: +- `models.Model` նշանակում է, որ Post օբյեկտը Django մոդել է, ուստի Django- ն գիտի, որ անհրաժեշտ է այն պահպանել տվյալների բազայում: + +Այժմ մենք սահմանում ենք այն հատկությունները, որոնց մասին մենք խոսում էինք ՝ `title/վերնագիրը`, `text/տեքստը`, `created_date/ստեղծման ամսաթիվը`, `published_date/հրապարակման ամսաթիվը` և `author/հեղինակ`. Դա անելու համար մենք պետք է պարզենք յուրաքանչյուր դաշտի տեսակը (արդյո՞ք այն տեքստային է): Թվայի՞ն Ամսաթի՞վ Կապը մեկ այլ օբյեկտի հետ, ինչպես օգտագործողը:) + +- `models.CharField` - այսպես մենք սահմանում. տեքստի դաշտ նիշերի քանակի սահմանափակումով: +- `models.TextField` -սա երկար տեքստի համար է ՝ առանց սահմանի: Իդեալական է թվում բլոգի գրառման բովանդակության համար, այնպես չէ՞: +- `models.DateTimeField` - սա ամսաթիվ և ժամ է: +- `models.ForeignKey` –սա հղում է դեպի այլ մոդել: + +Մենք չենք բացատրի կոդերի յուրաքանչյուր մասն այստեղ, քանի որ դա չափազանց շատ ժամանակ կպահանջի: Ստուգեք Django- ի պաշտոնական փաստաթղթերը. Եթե ցանկանում եք ավելին իմանալ մոդելի դաշտերի և տարբեր օբյեկտներ սահմանելու մասին, այս հղումը կարող է օգնել. (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field-types) : + +Ինչ կասե՞ք `def publish(self):` (def հրապարակելուն (ինքնուրույն): Սա հենց այն `publish/հրապարակման` եղանակն է, որի մասին նախկինում խոսում էինք: `def` նշանակում է, որ սա function/method-ֆունկցիա / մեթոդ է, և `publish`-ը մեթոդի անունն է: Ցանկության դեպքում կարող եք փոխել մեթոդի անվանումը: Անվանման կանոնն այն է, որ մենք բացատների փոխարեն օգտագործում ենք փոքրատառ և ստորին գծեր: Օրինակ, միջին գինը հաշվարկող մեթոդը կարելի է անվանել `calculate_average_price`: + +Մեթոդները հաճախ ինչ-որ բան են `վերադարձնում/ return` : Դրա մի օրինակ կա `__str__` մեթոդում: Այս սցենարում, երբ մենք զանգահարենք `__str__()`, մենք կստանանք գրության վերնագիր ունեցող տեքստ (**string/տող**): + +Նաև նկատեք, որ `def publish(self):` և `def __str__(self):` կտրված են մեր դասի ներսում: Քանի որ Python- ը զգայուն է սպիտակ տարածության նկատմամբ, մենք պետք է դասի մեջ ներմուծենք մեր մեթոդները: Հակառակ դեպքում, մեթոդները չեն պատկանի դասին, և դուք կարող եք ինչ-որ անսպասելի արդյունք ունենալ: + +Եթե ​​մոդելների հետ կապված ինչ-որ բան դեռ պարզ չէ, ազատորեն հարցրեք ձեր ուսուցչին: Մենք գիտենք, որ դա իսկապես բարդ է, հատկապես, երբ զուգահեռաբար ուսումնասիրում ես, թե ինչ են օբյեկտներն/objects ու գործառույթները/functions: Բայց հուսանք, որ այս ամենը քեզ հիմա մոգություն չի թվում: + +### Ստեղծեք աղյուսակներ ձեր տվյալների բազայում + +Վերջին քայլը տվյալների բազայում մեր նոր մոդելի ավելացումն է: Նախ, մենք պետք է տեղյակ պահենք Django- ին, որ մենք փոփոխություններ ենք մտցրել մեր մոդելի մեջ: (Մենք հենց նոր ստեղծեցինք այն) Գնացեք ձեր վահանակի պատուհանում և մուտքագրեք `python manage.py makemigrations blog`: Այն պետք է ունենա նման տեսք: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +** Նշում. ** Մի մոռացեք պահպանել ձեր խմբագրած ֆայլերը: Հակառակ դեպքում, ձեր համակարգիչը կգործարկի նախորդ տարբերակները, որը կարող է ձեզ անսպասելի սխալ հաղորդագրություններ հաղորդել: + +Django- ն մեզ համար տվյալների բազայի համար ստեղծեց միգրացիոն ֆայլ: Մուտքագրեք `python manage.py migrate blog` , արդյունքը պետք է լինի հետևյալը. + +{% 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 + + +Ուռա! Մեր Post մոդելը այժմ մեր տվյալների բազայում է: Ցանկալի կլիներ տեսնել դա, այնպես չէ՞: Անցեք հաջորդ գլխին ՝ տեսնելու, թե ձեր Post-ը ինչ տեսք ունի: \ No newline at end of file diff --git a/hy/django_orm/README.md b/hy/django_orm/README.md new file mode 100644 index 00000000000..e223fef2a4f --- /dev/null +++ b/hy/django_orm/README.md @@ -0,0 +1,221 @@ +# Django ORM և QuerySets + +Այս գլխում դուք կսովորեք, թե ինչպես է Django- ն միանում և պահում տեղեկատվությունը տվյալների բազայում: Եկեք սկսենք: + +## Ի՞նչ է QuerySet- ը: + +QuerySet- ը, ըստ էության, տվյալ Մոդելի օբյեկտների ցուցակն է: QuerySets- ը թույլ է տալիս կարդալ տվյալների բազան, զտել և փոխել դրանց կարգը: + +Օրինակով սովորելը ամենահեշտն է: Փորձենք սա, այնպես չէ՞: + +## Django shell + +Բացեք ձեր տեղական վահանակը (ոչ PythonAnywhere- ում) և մուտքագրեք այս հրամանը. + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Արդյունքն այսպիսին պետք է լինի. + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Դուք այժմ Django- ի ինտերակտիվ վահանակում եք: Դա ճիշտ է Python- ի հուշման նման, բայց ինչ-որ լրացուցիչ Django մոգությամբ: :) Այստեղ կարող եք օգտագործել Python- ի բոլոր հրամանները: + +### Բոլոր օբյեկտները + +Փորձենք նախ ցուցադրել մեր բոլոր հաղորդագրությունները: Դա կարող եք անել հետևյալ հրահանգով. + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Վայ Սխալ առաջացավ: Այն մեզ ասում է, որ Փոստ չկա: Եվ դա ճիշտ է. Մենք մոռացել ենք ներմուծել այն: + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Մենք ներմուծում ենք `Post` մոդելը `blog.models`-ից:Փորձենք կրկին ստանալ բլոգի բոլոր գրառումները. + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Սա ավելի վաղ ստեղծած հաղորդագրությունների ցուցակն է: Մենք ստեղծեցինք այս հաղորդագրությունները Django ադմինիստրատորի ինտերֆեյսի միջոցով: Բայց հիմա մենք ուզում ենք ստեղծել նոր հաղորդագրություններ Python- ի միջոցով, ինչպե՞ս դա անել: + +### Ստեղծել օբյեկտ + +Ահա, թե ինչպես եք դուք ստեղծում նոր Post օբյեկտ տվյալների բազայում/database. + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Բայց այստեղ մենք ունենք մեկ պակասող բաղադրիչ ՝ `me/ես`: Մենք պետք է որպես հեղինակ փոխանցենք `User/Օգտագործող` մոդելի օրինակ: Ինչպե՞ս դա անել: + +Եկեք նախ ներմուծենք Օգտագործողի մոդելը/User model. + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Ի՞նչ օգտվողներ ունենք մեր տվյալների բազայում/database: Փորձեք այս: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Սա նույն գերշահագործողն է/superuser, որը մենք ստեղծել ենք ավելի վաղ: Այժմ եկեք ստեղծենք օգտագործողի օրինակ (այս տողը հարմարեցրեք ձեր սեփական օգտվողի անվանմանը). + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Ինչպես տեսնում եք, մենք այժմ ստանում ենք `get` a `User` `username`/օգտագործող անունով, որը համարժեք է «ola»-ին: Կոկիկ! + +Այժմ մենք վերջապես կարող ենք ստեղծել մեր գրառումը. + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Ուռա! Ցանկանու՞մ եք ստուգել, ​​արդյո՞ք այն աշխատում է: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Ահա, ևս մեկ գրառում ցուցակում: + +### Ավելացրեք այլ հաղորդագրություններ + +Այժմ կարող եք մի փոքր զվարճանալ և ավելացնել նոր հաղորդագրություններ ՝ տեսնելու համար, թե ինչպես է դա աշխատում: Ավելացրեք ևս երկու-երեքը, ապա անցեք հաջորդ մասին: + +### Ֆիլտրեք օբյեկտները + +QuerySets- ի կարեւոր առանձնահատկությունը օբյեկտները զտելու հնարավորությունն է: Ասենք, որ ուզում ենք գտնել ola օգտվողի հեղինակած բոլոր գրառումնները: `Post.objects.all()` –ում `all/ամբողջի` փոխարեն մենք կօգտագործենք `filter/ֆիլտր ` : Փակագծերի մեջ մենք նշելու ենք այն պայմանները, որոնցով կկառուցվի գրառումների ընտրությունը: Մեր դեպքում պայմանն այն է, որ `author/հեղինակը` պետք է հավասար լինի `me/ինձ `: Django- ում այն կգրվի այսպես `author=me`: Մեր ծածկագիրն այժմ ունի այսպիսի տեսք. + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +Կամ գուցե `title/վերնագիր` դաշտում ուզում ենք տեսնել բոլոր գրառումները, որոնք պարունակում են «վերնագիր»/'title' բառը: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Նշում** որ `title/Վերնագրի` և `contains/պարունակության` միջև կա երկու ընդգծված նիշ (`_`): Django- ի ORM- ն այս կանոնն օգտագործում է դաշտերի անունները («վերնագիր»/"title") և գործողությունները կամ ֆիլտրերն առանձնացնելու համար («պարունակում է»/"contains"): Եթե ​​դուք օգտագործեք միայն մեկ ընդգծում, դուք կստանաք սխալ ՝ "FieldError: Cannot resolve keyword title_contains". + +Կարող եք նաև ստանալ բոլոր հրապարակված հաղորդագրությունների ցուցակը: Մենք դա անում ենք ՝ զտելով անցյալում տեղադրված `published_date/հրապարակված_ամսաթերթը` բոլոր հաղորդագրությունները: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Ցավոք, գրառումը, որը մենք ավելացրել ենք Python կոնսոլից, դեռ հրապարակված չէ: Բայց մենք կարող ենք դա փոխել: Նախ ընտրենք այն գրառումը, որը մենք ցանկանում ենք հրապարակել. + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Եվ այնուհետև հրապարակեք այն մեր `publish/հրապարակել ` եղանակով: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Այժմ կրկին փորձեք ստանալ հրապարակված հաղորդագրությունների ցուցակը (3 անգամ սեղմեք վեր սլաքը և ապա `enter`). + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Օբյեկտների կարգավորում + +QuerySets- ը թույլ է տալիս տեսակավորել օբյեկտները: Փորձենք տեսակավորել ըստ `created_date/ստեղծման_ամսաթիվ` դաշտի. + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Կարող ենք նաև հակադարձել հրամանը ՝ սկզբում ավելացնելով սա `-` + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Բարդ հարցումներ մեթոդի շղթայացման միջոցով + +Ինչպես տեսնում եք, `Post.objects` - ի որոշ մեթոդներ վերադարձնում են QuerySet- ը: Նույն մեթոդները կարելի է կրկին կանչել QuerySet- ում, և նրանք կվերադարձնեն նոր QuerySet: Այս կերպ Դուք կարող եք շղթայել դրանց ազդեցությունը ՝ դրանք միմյանց **chaining/կապակցելով**: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Սա իսկապես հզոր է և թույլ է տալիս գրել բավականին բարդ հարցումներ: + +Գերազանց է! Այժմ դուք պատրաստ եք հաջորդ մասի: Ինտերակտիվ վահանակը/shell փակելու համար մուտքագրեք ՝ + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/hy/django_start_project/README.md b/hy/django_start_project/README.md new file mode 100644 index 00000000000..42f1a697951 --- /dev/null +++ b/hy/django_start_project/README.md @@ -0,0 +1,260 @@ +# Ձեր առաջին Django նախագիծը: + +> Այս գլխի մի մասը հիմնված է Geek Girls Carrots- ի ձեռնարկների վրա (https://github.com/ggcarrots/django-carrots): +> +> Այս գլխի մասերը հիմնված են django-marcador ձեռնարկի վրա, որը լիցենզավորված է Creative Commons Attribution-ShareAlike 4.0 միջազգային լիցենզիայի կողմից: Django-marcador ձեռնարկի հեղինակային իրավունքները պաշտպանված են Markus Zapke-Gründemann- ի և այլոց կողմից: + +Մենք պատրաստվում ենք ստեղծել փոքրիկ բլոգ: + +Առաջին քայլը նոր Django նախագիծ սկսելն է: Ըստ էության, սա նշանակում է, որ մենք գործարկելու ենք մի քանի ստանդարտ սցենարներ Django բաշխումից, որոնք կստեղծեն նախագծի կմախք մեզ համար: Սա ընդամենը գրացուցակների և ֆայլերի մի խումբ է, որոնք մենք կօգտագործենք ավելի ուշ: + +Որոշ ֆայլերի և գրացուցակների անունները շատ կարևոր են Django- ի համար: Դուք չպետք է վերանվանեք այն ֆայլերը, որոնք մենք պատրաստվում ենք ստեղծել: Նրանց այլ տեղ տեղափոխելը նույնպես լավ գաղափար չէ: Django- ն պետք է որոշակի կառուցվածք պահպանի, որպեսզի կարողանա գտնել կարևոր բաներ: + +> Մի մոռացեք. Դուք պետք է գործադրեք բոլոր հրամանները virtualenv- ով: Եթե ​​հրամանի տողում չեք տեսնում `(myvenv)` նախածանցը, ապա ձեզ հարկավոր է ակտիվացնել virtualenv- ը: Մենք բացատրեցինք, թե ինչպես դա անել, **Django installation/Django տեղադրում** գլխի **Working with virtualenv/ Աշխատանք virtualenv-ի հետ ** բաժնում: Դա անելու համար մուտքագրեք `myvenv\Scripts\activate` Windows- ում կամ `source myvenv/bin/activate` Mac OS / Linux- ում: + + + +Mac OS- ի կամ Linux- ի վահանակի վրա գործարկեք հետևյալ հրամանը. **մի մոռացեք կետ ավելացնել ` ` at the end!/վերջում** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> `.` կետը կարևոր է, քանի որ այն ասում է, որ սցենարը Django- ն տեղադրի ձեր ընթացիկ գրացուցակում (որի համար `.` կետը կարճ հղում է): +> +> **Նշում** Վերը նշված հրամանը մուտքագրելիս հիշեք, որ դուք մուտքագրում եք միայն այն հատվածը, որը սկսվում է `django-admin` - ի կողմից: Այս `(myvenv) ~/djangogirls$` հատվածը, որը ցույց է տրված այստեղ, ուղղակի հուշման օրինակ է ՝ հետագա հրամանի մուտքագրման համար: + + + + + +Windows- ում պետք է գործարկել հետևյալ հրամանը: ** (Մի մոռացեք վերջում ավելացնել կետը) `. `) **: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> `.` կետը կարևոր է, քանի որ այն ասում է, որ սցենարը Django- ն տեղադրի ձեր ընթացիկ գրացուցակում (որի համար `.` կետը կարճ հղում է): +> +> ** Նշում ** Վերը նշված հրամանը մուտքագրելիս հիշեք, որ դուք մուտքագրում եք միայն այն մասը, որը սկսվում է `django-admin.exe` - ով: `(myvenv) C:\Users\Name\djangogirls>` սրանք ընդամենը տերմինալային արագ տողերի օրինակներ են ՝ հետագա հրամանի մուտքագրման համար: + + + +`django-admin.py` սա սցենար է, որը կստեղծի գրացուցակի անհրաժեշտ կառուցվածքը և ֆայլերը մեզ համար: Այժմ դուք պետք է ունենաք ծրագրի հետևյալ կառուցվածքը. + + djangogirls + ├── manage.py + ├── mysite + │ ├── __init__.py + │ ├── settings.py + │ ├── urls.py + │ └── wsgi.py + ├── myvenv + │ └── ... + └── requirements.txt + + +> **Նշում**. Գրացուցակի կառուցվածքում կտեսնեք նաև ձեր ` myvenv ` գրացուցակը, որը մենք ավելի վաղ ստեղծել էինք: + +`manage.py` սա սցենար է, որն օգնում է կառավարել կայքը: Դրանով մենք կկարողանանք վեբ սերվեր գործարկել ձեր համակարգչում ՝ առանց լրացուցիչ ծրագրեր տեղադրելու: + +` settings.py ` ֆայլը պարունակում է ձեր կայքի կարգավորումները: + +Հիշո՞ւմ եք փոստատարի հետ մեր անալոգիան, որը ստուգում է, թե որտեղ պետք է նամակ առաքել: ` urls.py ` ֆայլը պարունակում է ` urlresolver ` - ի կողմից օգտագործված օրինաչափությունների ցուցակ: + +Եկեք առայժմ մոռանանք մնացած ֆայլերի մասին , քանի որ դրանք չենք փոխելու: Միակ բանը, որ պետք է հիշել, դրանք պատահաբար չջնջելն է: + +## Փոխել կարգավորումները + +Եկեք որոշ փոփոխություններ կատարենք `mysite/settings.py` - ում: Բացեք ֆայլը ՝ ավելի վաղ տեղադրած կոդերի խմբագրիչի/code editor-ի միջոցով: + +**Նշում**. Հիշեք, որ `settings.py`- ը սովորական ֆայլ է, ինչպես ցանկացած այլ: Կարող եք այն բացել ձեր կոդերի խմբագրից `օգտագործելով "file -> open" /«ֆայլ-> բաց » գործողությունների ընտրացանկը: Սա ձեզ կտա սովորական պատուհանը, որում կարող եք անցնել ձեր `settings.py` ֆայլը և ընտրել այն: Այլապես, ֆայլը կարող եք բացել ՝ անցնելով ձեր աշխատասեղանի djangogirls պանակը և սեղմել աջ քլիք ֆայլի վրա: Ապա, ցուցակից ընտրեք ձեր կոդի խմբագիրը: Խմբագրի ընտրությունը կարևոր է, քանի որ կարող եք տեղադրել այլ ծրագրեր, որոնք կարող են բացել ֆայլը, բայց թույլ չեն տալիս խմբագրել այն: + +Լավ կլինի մեր կայքում ճիշտ ժամային գոտի սահմանել: Գնացեք [Wikipedia's list of time zones/Վիքիպեդիայի ժամային գոտիների ցուցակ](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) և պատճենեք ձեր համապատասխան ժամային գոտին (TZ) (օրինակ `Europe/Berlin`): + +`settings.py` ֆայլում գտեք `TIME_ZONE` պարունակող տողը և փոփոխեք այն ըստ ձեր ժամային գոտու: Օրինակ. + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Լեզվի կոդը կազմված է մի լեզվով, օրինակ ``en` անգլերենի համար կամ `de` գերմաներենի համար, և երկրի կոդ, ինչպիսիք են `de`- ն Գերմանիայի համար կամ `ch`-ն Շվեյցարիայի համար: Եթե ​​անգլերենը ձեր մայրենի լեզուն չէ, կարող եք լեզու ավելացնել ՝ սկզբնադիր կոճակները և ծանուցումները Django- ից ձեր մայրենի լեզվով փոխելու համար: Այսպիսով, դուք կունենաք "Cancel"/«Չեղարկել» կոճակը թարգմանված այն լեզվով, որը դուք ընտրել եք այստեղ: [Django comes with a lot of prepared translations/ Django- ն տրամադրում է բազմաթիվ թարգմանություններ:](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code): + +Եթե ​​այլ լեզվի կարիք ունեք, փոխեք լեզվի կոդը `փոխելով հետևյալ տողը. + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Անհրաժեշտ է նաև ավելացնել ուղի/path ստատիկ ֆայլերի/static files համար: (Ստատիկ ֆայլերի և CSS- ի մասին ամեն ինչ կիմանանք ավելի ուշ ձեռնարկի ընթացքում): Իջեք ֆայլի *end/վերջը* և անմիջապես `STATIC_URL` գրառման տակ, ավելացրեք նորը ՝ `STATIC_ROOT`. + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Երբ `DEBUG`- ը `True/ճիշտ է`ճիշտ է, և `ALLOWED_HOSTS`- ը սահմանված չէ, ընդունիչը գտնվում է ընդդեմ `['localhost', '127.0.0.1', '[::1]']` . Մեր դիմումը գործադրելուց հետո սա չի համապատասխանում PythonAnywhere-ում մեր hostname-ին (հյուրընկալող անունին ), այնպես որ մենք կփոխենք հետևյալ կարգավորումները: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> ** Նշում**. Եթե օգտագործում եք Chromebook, ավելացրեք այս տողը ձեր settings.py ֆայլի վերջում. `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Ինչպես նաև, ավելացրեք ` .amazonaws.com `-ը ` ALLOWED_HOSTS ` - ին, եթե օգտագործում եք cloud9 +> +> Եթե ​​դուք ընդունում եք ձեր նախագիծը ` Glitch.com ` կայքում, եկեք պաշտպանենք Django գաղտնի բանալին, որը անհրաժեշտ է մնացեք գաղտնի (հակառակ դեպքում ձեր նախագիծը վերամշակող ցանկացած անձ կարող է տեսնել այն). +> +> - Նախ, մենք պատրաստվում ենք ստեղծել պատահական գաղտնի բանալի: Կրկին բացեք Glitch տերմինալը և մուտքագրեք հետևյալ հրահանգը. +> +> {% filename %}command-line{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> Սա պետք է ցուցադրի երկար պատահական տող, որը կատարյալ է որպես գաղտնի բանալի ձեր Django բոլորովին նոր կայքի համար: Այս բանալին մենք այժմ կպցրենք ` .env ` ֆայլի մեջ, որը Glitch- ը ցույց կտա ձեզ միայն այն դեպքում, եթե դուք եք կայքի սեփականատերը: +> +> - Ձեր նախագծի հիմքում ստեղծեք ` .env ` ֆայլ և դրանում ավելացրեք հետևյալ հատկությունը. +> +> {% 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' +> ``` +> +> - Դրանից հետո թարմացրեք Django- ի կարգավորումների ֆայլը `այս գաղտնի արժեքը ներարկելու համար և տեղադրելով Django կայքի անունը` +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - Եվ նույն ֆայլում մի փոքր ներքև, մենք ներարկում ենք ձեր նոր Glitch կայքի անունը (website-ը). +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> ` PROJECT_DOMAIN ` արժեքն ինքնաբերաբար գեներացվում է Glitch- ի կողմից: Այն կհամապատասխանի ձեր ծրագրի անվանը: + +## Ստեղծեք տվյալների բազա + +Ծրագրակազմ կան տարբեր տվյալների բազաներ, որոնք կարող են պահել տվյալներ ձեր կայքի համար: Մենք կօգտագործենք սա ՝ `sqlite3`: + +Սա արդեն տեղադրված է ձեր ` mysite / settings.py ` ֆայլի այս մասում. + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Մեր բլոգի համար տվյալների շտեմարան ստեղծելու համար եկեք վահանակում գործարկենք հետևյալը.`python manage.py migrate` (մենք պետք է լինենք `djangogirls` գրացուցակում, որը պարունակում է `manage.py` ֆայլը) Եթե ​​ամեն բան լավ է, դուք պետք է տեսնեք նման մի բան. + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +Եվ մենք ավարտեցինք: Ժամանակն է սկսել վեբ սերվերը և տեսնել, թե արդյոք մեր կայքը գործում է: + +## Վեբ սերվերի գործարկում + +Դուք պետք է լինեք գրացուցակում, որտեղ գտնվում է `manage.py` ֆայլը (մեր դեպքում ՝ `djangogirls`): Վահանակում մենք կարող ենք սկսել վեբ սերվերը ՝ գործարկելով `python manage.py runserver`. + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Եթե ​​աշխատում եք Chromebook- ի վրա, ապա օգտագործեք այս հրահանգը. + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +կամ սա, եթե օգտագործում եք Glitch: + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +Եթե ​​դուք Windows- ում եք, և դա չի հաջողվում ` UnicodeDecodeError ` - ի հետ, փոխարենը օգտագործեք այս հրամանը. + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Այժմ դուք պետք է ստուգեք, արդյո՞ք ձեր կայքը գործում է: Բացեք ձեր բրաուզերը (Firefox, Chrome, Safari, Internet Explorer կամ այլ ինչ որ օգտագործում եք) և մուտքագրեք այս հասցեն. + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Եթե ​​օգտագործում եք Chromebook և Cloud9, փոխարենը կտտացրեք ելնող պատուհանի URL- ին, որը պետք է որ հայտնվեր հրամանի պատուհանի վերևի աջ անկյունում, որտեղ վեբ սերվերն է աշխատում: URL- ն այսպիսի տեսք կունենա. + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +or on Glitch: + + https://name-of-your-glitch-project.glitch.me + + +Շնորհավորում եմ Դուք պարզապես ստեղծել եք ձեր առաջին վեբ կայքը և այն վարում եք վեբ սերվերի միջոցով: Դա հիանալի, այնպես չէ՞: + +![Տեղադրեք աշխատանքը!](images/install_worked.png) + +Նկատի ունեցեք, որ հրամանի պատուհանը միանգամից կարող է գործարկել միայն մեկ բան, իսկ ավելի վաղ ձեր բացած հրամանի պատուհանը վեբ սերվերն է գործարկում: Քանի դեռ վեբ սերվերը աշխատում է և սպասում է լրացուցիչ մուտքային հարցումների, տերմինալը կընդունի նոր տեքստ, բայց չի կատարի նոր հրամաններ: + +> Մենք ստուգեցինք, թե ինչպես են աշխատում վեբ սերվերները ** Ինչպես է աշխատում ինտերնետը/How the Internet works ** գլխում: + +Վեբ սերվերի գործարկման ժամանակ լրացուցիչ հրամաններ մուտքագրելու համար բացեք նոր տերմինալի պատուհան և ակտիվացրեք ձեր virtualenv-ը. երկրորդ տերմինալի պատուհանը բացելու վերաբերյալ հրահանգները վերանայելու համար տե՛ս [Introduction to the command line/Հրամանի տողի ներածություն](../intro_to_command_line/README.md) բաժնում: Վեբ սերվերը դադարեցնելու համար վերադարձրեք այն պատուհանը, որում այն ​​աշխատում է, և միասին սեղմեք CTRL + C - Control և C ստեղները (Windows- ում գուցե ստիպված լինեք սեղմել Ctrl + Break): + +Պատրա՞ստ եք հաջորդ քայլին: Ժամանակն է ստեղծել որոշակի բովանդակություն: \ No newline at end of file diff --git a/hy/django_start_project/images/install_worked.png b/hy/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/hy/django_start_project/images/install_worked.png differ diff --git a/hy/django_templates/README.md b/hy/django_templates/README.md new file mode 100644 index 00000000000..f32c320a7ce --- /dev/null +++ b/hy/django_templates/README.md @@ -0,0 +1,108 @@ +# Django շաբլոններ + +Որոշ տվյալներ ցուցադրելու ժամանակն է: Դրա համար Django- ն մեզ տալիս է մի քանի օգտակար **template tags/ձևանմուշներ**: + +## Ի՞նչ են շաբլոնային պիտակները + +Ինչպես տեսնում եք, HTML- ում դուք իսկապես չեք կարող Python կոդ գրել, քանի որ բրաուզերները չեն հասկանում դա: Նրանք գիտեն միայն HTML: Մենք գիտենք, որ HTML- ը բավականին ստատիկ է, մինչդեռ Python- ը շատ ավելի դինամիկ է: + +**Django template tags/Django շաբլոնային պիտակները**-ը թույլ են տալիս մեզ Python-ը տեղափոխել HTML- ի մեջ, այնպես որ կարող եք ավելի արագ կառուցել դինամիկ կայքեր: Հիանալի է: + +## ցուցադրել հաղորդագրությունների ցուցակի ձևանմուշը + +Նախորդ գլխում մենք մեր ձևանմուշին/template-ին փոխանցեցինք հաղորդագրությունների ցանկը `posts/հաղորդագրությունների ` փոփոխականում: Այժմ այն ​​կներկայացնենք HTML- ով: + +Django ձևանմուշի/Django templates մեջ փոփոխական տեղադրելու համար հարկավոր է օգտագործել կրկնակի ձևավոր փակագծեր, որի ներսում փոփոխականի անունն է, ինչպես օրինակում. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Փորձեք սա ձեր ձևանմուշում/template `blog/templates/blog/post_list.html` : Բացեք այն կոդերի խմբագրում և փոխարինեք ամեն ինչ ՝ սկսած երկրորդ –ից`
` երրորդ-`
` - ով `{{ posts }}`. Պահեք ֆայլը և թարմացրեք էջը ՝ արդյունքները տեսնելու համար. + +![Նկար 13.1](images/step1.png) + +Ինչպես տեսնում եք, մենք ստացանք հետևյալ տողը. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Սա ցույց է տալիս, որ Django- ն փոփոխականը հասկանում էր որպես օբյեկտների ցուցակ: Հիշեք Python- ի **Introduction to Python** («Ներածությունից), թե ինչպես կարող ենք ցուցակներ ցուցադրել: Ճիշտ է, for հանգույցով: Django- ի ձևանմուշում դրանք կարող եք օգտագործել այսպես. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Փորձեք սա ձեր ձևանմուշում: + +![Նկար 13.2](images/step2.png) + +Այն աշխատում է! Բայց մենք ուզում ենք, որ դրանք հայտնվեն որպես ստատիկ գրառումներ, որոնք մենք ստեղծել ենք **Introduction to HTML/ «HTML Ներածություն» ** գլխում: Դուք կարող եք խառնել HTML և ձևանմուշի պիտակները: Մեր `body`-ի տարրը կունենա այսպիսի տեսք. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %} Այն ամենը, ինչ դնում եք `{% for %}` - ի և `{% endfor %}` - ի միջև, կկրկնվի ցուցակի յուրաքանչյուր կետի համար: Թարմացրեք էջը ՝ {% endraw %} + +![Նկար 13.3](images/step3.png) + +Նկատե՞լ եք, որ այս անգամ մենք մի փոքր այլ գրառում ենք օգտագործել (`{{ post.title }}` or `{{ post.text }}`)? Մենք մուտք ենք գործում տվյալների `Post` մոդելում սահմանված յուրաքանչյուր դաշտ: Նաև `|linebreaksbr` -ը տեքստը ֆիլտրում է զտիչի միջոցով ՝ տողերի ընդմիջումները/line-breaks/ պարբերությունների/paragraphs/ վերածելու համար: + +## Եվս մեկ բան + +Ժամանակն է մեկ անգամ ևս համոզվել, որ մեր կայքը կաշխատի հանրային ինտերնետում, այնպե՞ս չէ: Փորձենք կայքի նոր տարբերակը տեղակայել PythonAnywhere - ում: Ահա քայլերի ամփոփումը... + +* Նախ վերբեռնեք ձեր կոդը GitHub- ում + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Դրանից հետո անցեք [ PythonAnywhere ](https://www.pythonanywhere.com/consoles/), բացեք **Bash console** (կամ սկսեք նորը) և մուտքագրեք հրահանգը. + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(Հիշեք, որ `` - ը փոխարինեք ձեր PythonAnywhere օգտվողի անունով, առանց անկյունային փակագծերի:) + +* Վերջապես, անցեք ["Web" page/«Վեբ» էջ](https://www.pythonanywhere.com/web_app_setup/) և սեղմեք **Reload/Վերաբեռնում** ձեր վեբ հավելվածում: (Վահանակից PythonAnywhere- ի այլ էջեր հասնելու համար օգտագործեք վերևի աջ անկյունում գտնվող ընտրացանկի կոճակը): Ձեր թարմացումը պետք է հասանելի լինի https://subdomain.pythonanywhere.com- ստուգեք բրաուզերում: Եթե ​​PythonAnywhere կայքում բլոգի գրառումները չեն համընկնում տեղական սերվերում տեղակայված բլոգում հայտնվող գրառումների հետ, դա նորմալ է: Ձեր տեղական համակարգչի և PythonAnywhere- ի տվյալների բազան համապատասխանեցված չէ ձեր մնացած ֆայլերի հետ: + +Շնորհավորում ենք։ Այժմ շարունակեք և փորձեք նոր գրառում ավելացնել Django ադմինիստրատորին (չմեռանաք ավելացնել published_date!) Համոզվեք, որ դուք գտնվում եք Django ադմինիստրատորում ձեր pythonanywhere կայքի համար https://subdomain.pythonanywhere.com/admin: Դրանից հետո թարմացրեք ձեր էջը ՝ տեսնելու համար արդյոք գրառումը հայտնվում է այնտեղ: + +Զարմանալի՞ է աշխատում: Մենք հպարտ ենք ձեզանով: Մի փոքր հեռացեք համակարգչից. Դուք ընդմիջում եք վաստակել: + +![Նկար 13.4](images/donut.png) \ No newline at end of file diff --git a/hy/django_templates/images/donut.png b/hy/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/hy/django_templates/images/donut.png differ diff --git a/hy/django_templates/images/step1.png b/hy/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/hy/django_templates/images/step1.png differ diff --git a/hy/django_templates/images/step2.png b/hy/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/hy/django_templates/images/step2.png differ diff --git a/hy/django_templates/images/step3.png b/hy/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/hy/django_templates/images/step3.png differ diff --git a/hy/django_urls/README.md b/hy/django_urls/README.md new file mode 100644 index 00000000000..1235171fbb0 --- /dev/null +++ b/hy/django_urls/README.md @@ -0,0 +1,103 @@ +# Django URL- ներ + +Մենք պատրաստվում ենք ստեղծել մեր առաջին վեբ էջը. Ձեր բլոգի գլխավոր էջը: Բայց նախ եկեք մի փոքր սովորենք Django URL- ների մասին: + +## Ի՞նչ է URL-ը: + +URL- ը վեբ հասցե է: Դուք կարող եք տեսնել URL ՝ ամեն անգամ կայք այցելելիս. Այն տեսանելի է ձեր զննարկչի հասցեի տողում: Այո `127.0.0.1:8000` URL է: Եվ `https://djangogirls.org` նույնպես URL է: + +![URL](images/url.png) + +Ինտերնետում յուրաքանչյուր էջ իր սեփական URL- ի կարիքն ունի: Այս կերպ ձեր հավելվածը գիտի, թե ինչ պետք է ցույց տա այդ URL- ը բացող օգտվողին: Django- ում մենք օգտագործում ենք `URLconf` անունով մի բան (URL configuration/URL կազմաձևում): URLconf- ը օրինաչափությունների ամբողջություն է, որոնք Django- ն կփորձի համապատասխանել ստացված URL- ի հետ `դիտման համար ճիշտ մեթոդ ընտրելու համար: + +## Ինչպե՞ս են աշխատում URL- ները Django- ում: + +Եկեք բացենք `mysite/urls.py` ֆայլը ձեր ընտրած կոդի խմբագրում և տեսնենք, թե ինչ տեսք ունի այն. + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Ինչպես տեսնում եք, Django- ն այստեղ արդեն ինչ-որ բան է տեղադրել մեզ համար: + +Եռապատիկ չակերտների միջեւ տողերը(`'''` or `"""`) կոչվում են docstrings/փաստաթղթերի գծեր. դուք կարող եք դրանք գրել ֆայլի, դասի կամ մեթոդի վերևում `բացատրելու համար, թե ինչ է դա անում: Դրանք չեն գործարկվի Python- ի կողմից: + +Նախորդ գլխում այցելած ադմինիստրատորի URL- ն արդեն առկա է այստեղ ՝ + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Այս տողը նշանակում է, որ յուրաքանչյուր URL- ի համար, որը սկսվում է `admin/`, /ադմինիստրատորով Django- ն կգտնի համապատասխան *view* /տեսք: Այս դեպքում մենք ընդգրկում ենք մեծ թվով ադմինիստրատորի URL- ներ, որոնք հստակ գրված չեն այս փոքր ֆայլում. Սա շատ ավելի կոկիկ է և ավելի ընթեռնելի: + +## Ձեր առաջին Django URL- ը: + +Ժամանակն է ստեղծել ձեր առաջին URL- ը: Մենք ուզում ենք, որ «http://127.0.0.1:8000/» - ը լինի մեր բլոգի գլխավոր էջը `դրանում տեղադրված հաղորդագրությունների ցուցակով: + +Մենք նաև ուզում ենք մաքուր պահել ` mysite/urls.py ` ֆայլը, այնպես որ URL- ներ կներմուծենք մեր ` blog` ծրագրից հիմնական ` mysite/urls.py ` ֆայլ: + +Առաջ անցեք, տող ավելացրեք `blog.urls` - ը ներմուծելու համար: Նշենք, որ մենք այստեղ օգտագործում ենք `include/ներառման` գործառույթը/function, այնպես որ դուք ստիպված կլինեք այն ներմուծել `from django.urls…` տողում: + +Ձեր `mysite/urls.py` ֆայլը այժմ պետք է ունենա այսպիսի տեսք. + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django- ն այժմ «http://127.0.0.1:8000/» - ի բոլոր խնդրանքները կուղղորդի դեպի `blog.urls` և այնտեղ կփնտրի հետագա հրահանգները: + +## blog.urls + +`blog` գրացուցակում ստեղծեք նոր դատարկ ֆայլ `urls.py` անունով և բացեք այն ձեր կոդի խմբագրում: Շատ լավ! Ավելացրեք այս առաջին երկու տողերը. + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Այստեղ մենք ներմուծում ենք Django- ի `path` գործառույթը և մեր բոլոր `views/դիտումները ` `blog` հավելվածից: (Մենք դեռ դրանք չունենք, բայց մի րոպեից նրանք կհայտնվեն): + +Դրանից հետո մենք կարող ենք ավելացնել մեր առաջին URL նմուշը. + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Ինչպես տեսնում եք, մենք կապել ենք `post_list` անունով `view` -ն և արմատային url- ը: Այս URL- ի օրինակը համընկնում է դատարկ տողի հետ, և Django URL լուծիչը անտեսելու է տիրույթի անունը (այսինքն `http://127.0.0.1:8000/), որը նախածանցում է URL- ի ամբողջական ուղին: Այս օրինակը Django- ին կասի, որ ` views.post_list ` - ը ճիշտ տեղն է այցելելու, եթե ինչ-որ մեկը մուտք է գործում ձեր կայք «http://127.0.0.1:8000/» հասցեով: + +Վերջին մասը ՝`name='post_list'`, URL- ի անունն է, որն օգտագործվելու է դիտումը նույնացնելու համար: Դա կարող է նույնը լինել, ինչ view-ի անունն է, կամ կարող է լինել բոլորովին այլ բան: Ծրագրում մենք հետագայում կօգտագործենք անվանական URL- ներ, ուստի կարևոր է, որ դրանց անուններն այժմ ներառվեն ձեր դիմումի մեջ: Մեր URL- ների անունները յուրահատուկ և հեշտ հիշվող պետք է լինեն: + +Եթե ​​այժմ փորձեք այցելել http://127.0.0.1:8000/, ապա դուք պետք է տեսնեք այնպիսի հաղորդագրություն, որում ասվում է ՝ «ինտերնետային էջը հասանելի չէ»/'web page not available' : Դա այն պատճառով է, որ սերվերը (Հիշո՞ւմ եք մուտքագրեք `runserver`) այլևս չի աշխատում: Հայացք գցեք ձեր սերվերի վահանակի պատուհանից ՝ պարզելու պատճառը: + +![Սխալ](images/error1.png) + +Ձեր վահանակը սխալ է ցույց տալիս, բայց մի անհանգստացեք. Սա իրականում շատ օգտակար է. այն Ձեզ ասում են, որ **no attribute 'post_list'**("բացակայում է հատկությունը 'post_list'"-ում): Դա այն *view*-ի անունն է, որը Django- ն փորձում է գտնել և օգտագործել, բայց մենք այն դեռ չենք ստեղծել: Այս փուլում ձեր `/admin/`/ադմինիստրատորը նույնպես չի աշխատի: Մի անհանգստացեք. Մենք կհասնենք այնտեղ: Եթե ​​այլ սխալի հաղորդագրություն եք տեսնում, փորձեք վերագործարկել/restart ձեր վեբ սերվերը: Դա անելու համար վեբ սերվերը աշխատող վահանակի պատուհանում դադարեցրեք այն ՝ սեղմելով Ctrl + C (Control և C ստեղները միասին): Windows- ում գուցե ստիպված լինեք սեղմել Ctrl + Break: Ապա դուք պետք է վերագործարկեք վեբ սերվերը ՝ գործարկելով <`python manage.py runserver` հրամանը: + +> Եթե ​​ցանկանում եք ավելին իմանալ Django- ի ադմինիստրատորի մասին, տես պաշտոնական փաստաթղթերի այս բաժինը ՝ https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/hy/django_urls/images/error1.png b/hy/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/hy/django_urls/images/error1.png differ diff --git a/hy/django_urls/images/url.png b/hy/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/hy/django_urls/images/url.png differ diff --git a/hy/django_views/README.md b/hy/django_views/README.md new file mode 100644 index 00000000000..7658a117908 --- /dev/null +++ b/hy/django_views/README.md @@ -0,0 +1,44 @@ +# Django- ի դիտում. Ստեղծագործելու ժամանակն է: + +Ժամանակն է ազատվել այն սխալից, որի հետ մենք բախվեցինք վերջին գլխում: :) + +*view/տեսարանը * այն հատվածն է, որտեղ տեղադրում ենք մեր հավելվածի «տրամաբանությունը»: Այն տեղեկատվություն կխնդրի ձեր ստեղծած նախկին `model`-ից և կփոխանցի `template/ձևանմուշ`-ին: Հաջորդ գլխում շաբլոն/template կստեղծենք: Views/Դիտումները պարզապես Python գործառույթներ/ Python functions են, որոնք մի փոքր ավելի բարդ են, քան այն, ինչ մենք գրել ենք **Introduction to Python/Python- ի «Ներածություն»** գլխում: + +Դիտումները տեղակայված են ` views.py ` ֆայլում: Մենք կավելացնենք մեր *views/դիտումները * `blog/views.py`- ին: + +## blog/views.py + +Լավ, եկեք բացենք այս ֆայլը մեր կոդի խմբագրում/code editor և տեսնենք, թե ինչ կա այնտեղ: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Այստեղ դեռ շատ բան չկա: + +Հիշեք, որ ` # ` - ով սկսվող տողերը մեկնաբանություններ են. դա նշանակում է, որ այս տողերը չեն աշխատի Python- ում: + +Եկեք ստեղծենք *view/տեսակետ*, ինչպես հուշում է մեկնաբանությունը: Դրա տակ ավելացրեք հետևյալ նվազագույն տեսքը. + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Ինչպես տեսնում եք, մենք ստեղծել ենք `post_list` անունով մի (`def`) մեթոդ, որը `request/խնդրանք` -ը որպես փաստարկ է վերցնում և `return/վերադարձնում` է `render/մատուցման ` մեթոդի արդյունքը, որը հավաքելու է մեր `blog/post_list.html` էջի ձևանմուշը: + +Պահեք ֆայլը, անցեք այստեղ հղումով http://127.0.0.1:8000/ և տեսեք, թե ինչ ունենք: + +Եվս մեկ սխալ: Կարդացեք, թե ինչ է կատարվում հիմա ՝ + +![Սխալ](images/error.png) + +Սա ցույց է տալիս, որ սերվերը գոնե նորից է աշխատում, բայց նրա աշխատանքի ընթացքը դեռ սխալ է թվում, ճի՞շտ է: Մի անհանգստացեք, սա պարզապես սխալի էջ է, վախենալու ոչինչ չկա: Ինչպես և վահանակի սխալի հաղորդագրությունները, այս հաղորդագրությունները նույնպես օգտակար են: Կարող եք կարդալ, որ *TemplateDoesNotExist*: Եկեք շտկենք այս սխալը և ձևանմուշ/template ստեղծենք հաջորդ գլխում: + +> Իմացեք ավելին Django- ի տեսակետների/Django views-ի մասին `կարդալով պաշտոնական փաստաթղթերը. https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/hy/django_views/images/error.png b/hy/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/hy/django_views/images/error.png differ diff --git a/hy/dynamic_data_in_templates/README.md b/hy/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..74e76af4f3a --- /dev/null +++ b/hy/dynamic_data_in_templates/README.md @@ -0,0 +1,84 @@ +# Տվյալների դինամիկ փոփոխություն ձևանմուշներում + +Մենք ունենք տարբեր կտորներ. `Post` մոդելը սահմանվում է `models.py`- ում, մենք ունենք `post_list`- ը `views.py` - ում և ավելացնում է ձևանմուշը: Բայց ինչպե՞ս ցուցադրել գրառումները HTML էջի ձևանմուշում: Ի վերջո, սա հենց այն է, ինչին մենք ուզում ենք հասնել. Վերցնել որոշակի բովանդակություն (շտեմարանում պահվող մոդելներ) և ճշգրիտ ցուցադրել դրանք մեր ձևանմուշում/ template, այնպես չէ՞: + +Դրան են ծառայում դիտումները/*views* ՝ մոդելներն ու ձևանմուշները/models and templates/ միացնելու համար: `post_list` *view*-ում մենք պետք է վերցնենք այն մոդելները, որոնք մենք ցանկանում ենք ցուցադրել, և այնուհետև դրանք փոխանցել ձևանմուշին: *view*-ից մենք որոշում ենք, թե ինչ (մոդել) կցուցադրվի ձևանմուշում: + +Լավ, բա ինչպե՞ս ենք դրան հասնելու: + +Մենք պետք է բացենք `blog/views.py` ֆայլը կոդի խմբագրում/code editor: Այսպիսով, `post_list` *view* այսպիսի տեսք ունի. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Հիշո՞ւմ եք, մենք խոսեցինք այլ ֆայլերից կոդ ներառելու մասին: Այժմ մենք պետք է ներառենք մեր սահմանած մոդելը `models.py` ֆայլում: Մենք կավելացնենք տողը `from .models import Post` - ից հետևյալ կերպ. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Մոդելներից առաջ կետը/dot նշանակում է *current directory/ընթացիկ գրացուցակ * կամ *current application/ընթացիկ ծրագիր*: Թե `views.py`- ը, թե `models.py` - ին գտնվում են նույն գրացուցակում: Սա նշանակում է, որ մենք կարող ենք օգտագործել կետ `.` և ֆայլի անունը (առանց `.py`-ի): Դրանից հետո մենք ներմուծում ենք մոդելի անվանումը (`Post`): + +Բայց ի՞նչ է հաջորդը: `Post` մոդելից իրական գրառում ստանալու համար մեզ պետք է այսպես կոչված `QuerySet`: + +## QuerySet + +Դուք արդեն պետք է ծանոթ լինեք, թե ինչպես է աշխատում QuerySets- ը: Մենք դրա մասին խոսեցինք [Django ORM (QuerySets) գլխում ](../django_orm/README.md): + +Այսպիսով, հիմա մենք ուզում ենք հրապարակված բլոգային հաղորդագրություններ/ published blog posts ՝ տեսակավորված ըստ published_date- ի, ճիշտ է: Մենք դա արդեն արեցինք QuerySets գլխում: + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Այսպիսով, եկեք բացենք `blog/views.py` ֆայլը կոդի խմբագրում և ավելացնենք կոդի այս կտորը `def post_list(request)`, բայց մի մոռացեք ֆայլի սկզբում ավելացնել `from django.utils import timezone`. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Մնացել է ընդամենը երկու բան ՝ մեր QuerySet- ը բլոգի գրառումների ցուցակում ցուցադրելու համար. + +1. Փոխանցեք `posts` QuerySet-ը ձևանմուշի մեջ ՝ զանգը/call փոխելով `render` function-ի /մատուցման գործառույթի (մենք դա կանենք հենց հիմա): +2. Փոփոխեք ձևանմուշը ՝ QuerySet `posts`-ը ցուցադրելու համար: Մենք կանդրադառնանք դրան հաջորդ գլխում: + +Խնդրում ենք նկատի ունենալ, որ մենք QuerySet- ի համար *variable/փոփոխական* ենք ստեղծել. `posts/հաղորդագրություններ`: Դուք կարող եք դա համարել որպես անուն մեր QuerySet- ի համար: Այսուհետ մենք կարող ենք դրան անդրադառնալ այս անունով: + +`render/ռենդեր ` գործառույթում մենք արդեն ունենք `request/հարցման` պարամետրը (այսինքն `այն ամենը, ինչ մենք ստանում ենք օգտագործողից որպես խնդրանք ինտերնետի միջոցով) և ձևանմուշի ֆայլը` (`'blog/post_list.html'`): Վերջին պարամետրը, որն ունի այսպիսի տեսք `{}`, այն է, որտեղ մենք կարող ենք ավելացնել ձևանմուշ օգտագործելու ցանկացած բան: Սա այն վայրն է, որտեղ մենք կարող ենք ավելացնել որոշ բաներ, ձևանմուշի օգտագործման համար: Մենք պետք է նրանց անուններ տանք (մենք հիմա հավատարիմ կմնանք `'posts'/ հաղորդագրություններին` ) :) Դա պետք է ունենա այսպիսի տեսք. `{'posts': posts}`: Նկատի ունեցեք, որ մինչ `:` այս հատվածը լար է; հարկավոր է այն փակել չակերտներով. ` '' `: + +Այսպիսով, վերջապես, մեր `blog/views.py` ֆայլը պետք է ունենա այսպիսի տեսք. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Այսքանը: Հիմա ժամանակն է գնալ ձևանմուշ/template և ցուցադրել QuerySet- ը էջում: + +Ցանկանու՞մ եք մի փոքր ավելին իմանալ Django- ի QuerySets- ի մասին: Անցեք այս հղումով՝ https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/hy/extend_your_application/README.md b/hy/extend_your_application/README.md new file mode 100644 index 00000000000..3198751efd4 --- /dev/null +++ b/hy/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Ընդլայնել հավելվածը. + +Մենք արդեն ավարտել ենք մեր կայքի ստեղծման համար անհրաժեշտ բոլոր տարբեր քայլերը. Մենք գիտենք, թե ինչպես գրել մոդել, URL, դիտում և ձևանմուշ: Մենք նաև գիտենք, թե ինչպես կարելի է գեղեցիկ դարձնել մեր կայքը: + +Պրակտիկայի ժամանակն է: + +Բլոգում առաջին բանը, որ մեզ պետք է, հատուկ գրառումներ բացելու էջն է, այնպես չէ՞: + +Մենք դեռ ունենք `Post` մոդել, ուստի հարկավոր չէ որևէ լրացուցիչ կոդ ավելացնել մեր `models.py` ֆայլին: + +## Ստեղծեք ձևանմուշի հղում դեպի գրառման մանրամասներ + +Մենք կսկսենք այս `blog/templates/blog/post_list.html` ֆայլի ներսում հղում ավելացնելով: Բացեք այն ձեր կոդերի խմբագրում, և այժմ այն ​​պետք է ունենա այսպիսի տեսք. {% 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 %} +``` + +{% raw %} Մենք կցանկանայինք ցուցակում գրառման վերնագրից (post's title in the post list) հղում ունենալ գրառման մանրամասների (post's detail) էջին: Եկեք փոխենք `

{{ post.title }}

` այնպես, որ այն հղվի հաղորդագրության մանրամասն էջին ՝ {% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %} toամանակն է բացատրել խորհրդավոր `{% url 'post_detail' pk=post.pk %}`: Ինչպես կարող եք ենթադրել, այս `{% %}`նշումը նշանակում է, որ մենք օգտագործում ենք Django ձևանմուշի պիտակները/ Django template tags.: Այս անգամ մենք կօգտագործենք այն մեկը, որը մեզ համար URL կստեղծի: {% endraw %} + +` post_detail ` մասը նշանակում է, որ Django- ն սպասում է URL- ի`blog/urls.py` անունով = post_detail + +Իսկ ինչ վերաբերում է `pk=post.pk`- ին: `pk`- ն կարճ բանալին է, որը եզակի նույնացուցիչ է տվյալների բազայում յուրաքանչյուր գրառման համար: Յուրաքանչյուր Django մոդել ունի մի դաշտ, որը ծառայում է որպես իր հիմնական բանալի, և նրա ցանկացած այլ անուն կարող է նաև անվանվել «pk»: Քանի որ մենք չենք սահմանել հատուկ առաջնային բանալի մեր `Post` մոդելի մեջ, Django- ն կստեղծի մեկը մեզ համար (անխոս, դա կլինի մի թիվ, որը յուրաքանչյուր հաղորդագրության համար ավելանում է մեկով, ինչպես 1, 2, 3) և այն ավելացնում է ` pk ` անունով դաշտին ՝ մեր յուրաքանչյուր գրառման համար: Մենք մուտք ենք գործում հիմնական բանալին ՝ մուտքագրելով ` post.pk `, նույն կերպ, ինչպես մուտք ենք գործում այլ դաշտեր (`title/վերնագիր`, `author/հեղինակ`, etc.) մեր `Post/Հրապարակել ` օբյեկտ: + +Այժմ, երբ մենք գնանք http://127.0.0.1:8000/, մենք կունենանք սխալ (ինչպես սպասվում էր, քանի որ մենք դեռ URL կամ *view/դիտում* չունենք `post_detail`- ի համար): Դա նման տեսք կունենա: + +![NoReverseMatch error](images/no_reverse_match2.png) + +## Ստեղծեք URL ՝ post's detail/գրառման մանրամասներ էջի համար + +Եկեք `urls.py`- ում ստեղծենք URL մեր `post_detail` *view* համար: + +Մենք ուզում ենք, որ մեր առաջին հաղորդագրության մանրամասները ցուցադրվեն այս **URL** - ում ՝ http://127.0.0.1:8000/post/1/ + +Եկեք `blog/urls.py` ֆայլում URL կազմենք ՝ Django- ին ուղղելու համար `post_detail`, անունով *view/դիտումը*-ն , որը ցույց կտա բլոգի մի ամբողջ գրառում: Բացեք `blog/urls.py` ֆայլը կոդերի խմբագրում և ավելացրեք այս տողը (`path('post//', views.post_detail, name='post_detail'),`), որպեսզի ֆայլն այսպիսի տեսք ունենա. + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Այս `post//` մասը նշում է URL- ի օրինակը. Մենք ձեզ կբացատրենք ստորև. + +- `post/` /գրառում նշանակում է, որ URL- ը պետք է սկսվի **post** բառով, որին կհաջորդի **/**: Առայժմ ամեն բան կարգին է: +- `` - այս հատվածը ավելի բարդ է: Դա նշանակում է, որ Django- ն ակնկալում է ամբողջ թվային արժեք և այն կփոխանցի view-ին որպես `pk` կոչվող փոփոխական: +- `/` - ապա մեզ պետք է կրկին այս նշանը **/**, մինչև url- ի ավարտը: + +Սա նշանակում է, որ եթե ձեր բրաուզերում մուտքագրեք սա `http://127.0.0.1:8000/post/5/` , Django- ն պետք է հասկանա, որ ձեզ հարկավոր է *view*-ն որը կոչվող է ` post_detail `, և և փոխանցել այն տեղեկատվությունը, որը ` pk ` *հավասար է ` 5 ` այս <1>view*-ում: + +Լավ, մենք URL- ի նոր օրինակ ենք ավելացրել `blog/urls.py`-ում: Եկեք թարմացնենք էջը ՝ http://127.0.0.1:8000/ Boom! Սերվերը կրկին դադարեցրել է աշխատանքը: Հայացք գցեք կոնսոլին. Ինչպես և սպասվում էր, ևս մեկ սխալ կա: + +![AttributeError](images/attribute_error2.png) + +Հիշու՞մ եք, թե որն է հաջորդ քայլը: Դա view-ի/տեսակետ է ավելացնում: + +## Ավելացնել հաղորդագրության մանրամասն տեսք/post's detail view + +Այս անգամ մեր *view*-ին/ տեսակետին տրվում է լրացուցիչ պարամետր, `pk`. Մեր *view*-ն պետք է որսա, այնպես չէ՞: Այսպիսով, մենք մեր գործառույթը կսահմանենք որպես `def post_detail(request, pk):`. Նկատի ունեցեք, որ այս պարամետրը պետք է ունենա ճիշտ նույն անունը, ինչ որ մենք նշեցինք `urls` (`pk`) ներսում. Նկատի ունեցեք նաև, որ այս փոփոխականը բաց թողնելը սխալ է և կհանգեցնի սխալի: + +Այժմ մենք ուզում ենք ստանալ մեկ և միայն մեկ բլոգային հաղորդագրություն: Դա անելու համար մենք կարող ենք օգտագործել հարցաթերթիկներ, ինչպես հետևյալը. + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Բայց այս ծածկագիրը խնդիր ունի: Եթե ​​`primary key` (`pk`) -ում (տրված առաջնային բանալում) `Post`/գրառում չկա, մենք կունենանք շատ տգեղ սխալ: + +![DoesNotExist error](images/does_not_exist2.png) + +Մենք դա չենք ուզում: Բայց բարեբախտաբար, Django- ն շրջանցելու միջոց ունի, որը կկարգավորի դա մեզ համար. `get_object_or_404`: Այն դեպքում, երբ չկա `Post`/Հաղորդագրություն տրված ` pk ` -ի համար, մենք կստանանք շատ ավելի լավ էջ, որը կոչվում է `Page Not Found 404`/ Էջը չի գտնվել): + +![Page not found](images/404_2.png) + +Լավ նորությունն այն է, որ դուք իրականում կարող եք ստեղծել ձեր սեփական `Page not found` / չգտնված էջը/ և այն դարձնել այնքան գեղեցիկ, որքան ցանկանում եք: Բայց դա հիմա այդքան էլ կարևոր չէ, ուստի մենք այն բաց կթողնենք: + +Լավ, ժամանակն է մեր `views.py` ֆայլին *view* /դիտում ավելացնել: + +`blog/urls.py`- ում մենք ստեղծեցինք URL կանոն `post_detail` անունով, որը վերաբերում է `views.post_detail` կոչվող դիտմանը: Սա նշանակում է, որ Django- ն `blog/views.py`- ի ներսում `post_detail` անունով գործառույթ կսպասարկի ներկայացնելու համար: + +Ժամանակն է բացել `blog/views.py` ֆայլը կոդի խմբագրում և տողերի կողքին ավելացնել `from` հետևյալ տողերը. + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Եվ ֆայլի վերջում մենք կավելացնենք մեր *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}) +``` + +Այո Էջը թարմացնելու ժամանակն է ՝ http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +Աշխատում է! Ի՞նչ է պատահում, եթե փորձեք հետևել հաղորդագրության վերնագրի հղմանը: + +![TemplateDoesNotExist error](images/template_does_not_exist2.png) + +Օ ոչ! Եվս մեկ սխալ! Բայց մենք արդեն գիտենք, թե ինչպես վարվել դրա հետ, ճիշտ է: Մենք պետք է ձևանմուշ/template ավելացնենք: + +## Ստեղծեք ձևանմուշի հղում գրառման մանրամասների համար + +Մենք `blog/templates/blog`-ում կստեղծենք ֆայլ, որը կոչվում է `post_detail.html`, և կբացենք այն կոդերի խմբագրում: + +Մուտքագրեք հետևյալ ծածկագիրը. + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Կրկին մենք երկարացնում ենք `base.html`- ը: `content` (բովանդակություն) բլոկում մենք ցուցադրում ենք հրապարակման ամսաթիվը (եթե գոյություն ունի հրապարակված_ թվականը), վերնագիրն ու տեքստը: Բայց մենք պետք է քննարկենք մի քանի կարևոր բաներ, ճիշտ է՞: + +No translations matched your search {% raw %}`{% if ... %} ... {% endif %}` - ը ձևանմուշի պիտակ է, որը մենք կարող ենք օգտագործել, եթե ինչ-որ բան փորձելու կարիք ունենանք: (Հիշո՞ւմ եք եթե ... `if... կառուցվածքը Python- ի «Ներածություն» գլխից:) Այս բաժնում մենք ուզում ենք ստուգել, ​​թե արդյոք մեր գրառման published_date` -ն /հրապարակված_թվականը պարունակում է տվյալներ, թե ոչ:{% endraw %} + +Լավ, մենք կարող ենք թարմացնել մեր էջը և տեսնել, թե արդյո՞ք `TemplateDoesNotExist` - ը այլևս չկա: + +![Post detail page](images/post_detail2.png) + +Այո դա աշխատում է: + +# Տեղակայման ժամանակն է: + +Լավ կլինի ստուգել, ​​որ կայքը դեռ աշխատում է PythonAnywhere- ում, ճիշտ չէ՞: Եկեք նորից կատարենք տեղակայումը: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +Հետո, [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/)-ում: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Հիշեք, որ `` - ը փոխարինեք ձեր PythonAnywhere օգտվողի անունով, առանց չակերտների (անկյունային փակագծերի:) + +## Ստատիկ ֆայլերի թարմացվումը սերվերում + +Python- ի նման սերվերները ցանկացած այլ վայրում սիրում են ստեղծել «ստատիկ ֆայլեր» (օրինակ ՝ CSS ֆայլեր) Python ֆայլերից առանձին, քանի որ դրանք կարող են օպտիմալացնել, որպեսզի դրանք ավելի արագ բեռնվեն: Արդյունքում, ամեն անգամ, երբ մենք փոփոխություններ ենք կատարում մեր CSS ֆայլերում, մենք պետք է սերվերի վրա գործադրենք լրացուցիչ հրաման ՝ ասելու, որ դրանք թարմացնի: Հրամանը կոչվում է `collectstatic`: + +Սկսեք ակտիվացնելով ձեր virtualenv- ը, եթե այն արդեն ակտիվ չէ (PythonAnywhere- ը դրա համար օգտագործում է `workon` կոչվող հրամանը, սա նույնն է, ինչ `source myenv/bin/activate` հրամանը, որը դուք օգտագործում եք ձեր սեփական համակարգչում ): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +`manage.py collectstatic` հրամանը փոքր-ինչ նման է < `manage.py migrate`-ին: Մենք որոշ փոփոխություններ ենք կատարում մեր կոդի մեջ, այնուհետև ասում ենք, որ Django- ն *apply* / <0>կիրառի այդ փոփոխությունները սերվերում կամ տվյալների բազայում ստատիկ ֆայլերի հավաքածուի մեջ: + +Ամեն դեպքում, մենք այժմ պատրաստ ենք անցնել ["Web" page](https://www.pythonanywhere.com/web_app_setup/) / <0>«Վեբ» էջ (վահանակի վերևի աջ անկյունում գտնվող կոճակի ընտրացանկից) և կտտացնել **Reload** / <1>Վերաբեռնել, և այնուհետև անցնել այս հղումով https: // page subdomain.pythonanywhere.com արդյունքը տեսնելու համար: + +Այսքանը: Դու արեցիր դա! \ No newline at end of file diff --git a/hy/extend_your_application/images/404_2.png b/hy/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/hy/extend_your_application/images/404_2.png differ diff --git a/hy/extend_your_application/images/attribute_error2.png b/hy/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/hy/extend_your_application/images/attribute_error2.png differ diff --git a/hy/extend_your_application/images/does_not_exist2.png b/hy/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/hy/extend_your_application/images/does_not_exist2.png differ diff --git a/hy/extend_your_application/images/no_reverse_match2.png b/hy/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/hy/extend_your_application/images/no_reverse_match2.png differ diff --git a/hy/extend_your_application/images/post_detail2.png b/hy/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/hy/extend_your_application/images/post_detail2.png differ diff --git a/hy/extend_your_application/images/post_list2.png b/hy/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/hy/extend_your_application/images/post_list2.png differ diff --git a/hy/extend_your_application/images/template_does_not_exist2.png b/hy/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/hy/extend_your_application/images/template_does_not_exist2.png differ diff --git a/hy/how_the_internet_works/README.md b/hy/how_the_internet_works/README.md new file mode 100644 index 00000000000..9a9629bb60f --- /dev/null +++ b/hy/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Ինչպես է աշխատում ինտերնետը + +> Ընթերցողների համար տանը. Այս գլուխն ընդգրկված է [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc) տեսանյութում +> +> Այս գլուխը ներշնչված է Howեսիկա ՄաքՔելարի (http://web.mit.edu/jesstess/www/) "How the Internet works"(«Ինչպես է աշխատում ինտերնետը») զրույցից: + +Մենք գրազ ենք գալիս, որ դուք ամեն օր ինտերնետ եք օգտագործում: Բայց գիտե՞ք իրականում, թե ինչ է պատահում, երբ ձեր զննարկչի մեջ մուտքագրում եք https://djangogirls.org- ի նման հասցե և սեղմում ` enter `: + +Առաջին բանը, որ դուք պետք է հասկանաք, այն է, որ կայքը բաղկացած է կոշտ սկավառակի/ hard disk -ի վրա պահված մի շարք ֆայլերից, ինչպես ձեր ֆիլմերը, երաժշտությունը կամ նկարները: Այնուամենայնիվ, կա մեկ առանձնահատկություն, որը հատուկ է միայն կայքերին. Դրանք պարունակում են համակարգչային կոդ, որը կոչվում է HTML: + +Եթե ​​դուք ծանոթ չեք ծրագրավորմանը, սկզբում դժվար կլինի հասկանալ HTML- ը, բայց ձեր վեբ բրաուզերները (օրինակ ՝ Chrome, Safari, Firefox և այլն) սիրում են այն: Վեբ բրաուզերները նախատեսված են հասկանալու այս կոդը, հետևելու նրա հրահանգներին և ներկայացնելու այն ֆայլերը, որոնցից կազմված է ձեր կայքը, ճիշտ այնպես, ինչպես ցանկանում եք: + +Ինչպես ցանկացած ֆայլ, HTML ֆայլերը նույնպես պետք է պահենք ինչ-որ տեղ մեր կոշտ սկավառակի/hard disk-ի վրա: Ինտերնետի համար մենք օգտագործում ենք հատուկ հզոր համակարգիչներ, որոնք կոչվում են *servers/սերվերներ*: Նրանք չունեն էկրան, մկնիկ կամ ստեղնաշար, քանի որ նրանց հիմնական նպատակը տվյալների պահպանումն ու սպասարկումն է: Այդ պատճառով նրանց անվանում են *servers/սերվեր* , քանի որ դրանք ձեզ ծառայություն են *մատուցում*: + +Շատ լավ, բայց ուզում եք իմանալ, թե ինչ տեսք ունի ինտերնետը, ճի՞շտ է: + +Մենք նկարեցինք նկար ձեզ համար: Այն այսպիսի տեսք ունի. + +![Պատկեր 1.1](images/internet_1.png) + +Կարծես խառնաշփոթ է, չէ՞: Իրականում դա միացված մեքենաների ցանց է (վերոհիշյալ *servers/սերվերները*): Հարյուր հազարավոր մեքենաներ: Շատ ու շատ կիլոմետրեր ճոպաններ/cables ամբողջ աշխարհում: Կարող եք այցելել սուզանավերի մալուխային քարտեզի/Submarine Cable Map կայք (http://submarinecablemap.com/) ՝ տեսնելու, թե որքան բարդ է ցանցը: Ահա կայքի սքրինշոթը. + +![Պատկեր 1.2](images/internet_3.png) + +Դա զարմանալի է, այնպես չէ՞: Այնուամենայնիվ, հասկանալի է, որ հնարավոր չէ յուրաքանչյուր մեքենա մետաղալարով միացնել ինտերնետին: Այսպիսով, ցանկալի մեքենային հասնելու համար (օրինակ,մեկը https://djangogirls.org որտեղ պահպանվում է), մենք պետք է հարցումը փոխանցենք շատ այլ մեքենաների միջով: + +Այն պետք է ունենա նման տեսք: + +![Պատկեր 1.3](images/internet_2.png) + +Պատկերացրեք, որ երբ մուտքագրեք https://djangogirls.org, դուք նամակ եք ուղարկում, որում ասվում է. «Հարգելի Django Girls, ես ուզում եմ տեսնել djangogirls.org կայքը: Ուղարկեք այն ինձ, խնդրում եմ»: + +Ձեր նամակը գնում է ձեզ ամենամոտ փոստային բաժանմունք: Այնուհետև այն ուղարկվում է մեկ ուրիշին, որը մի փոքր ավելի մոտ է հասցեատիրոջը, իսկ հետո հաջորդին և այլն, մինչև այն հասցվի իր նպատակակետին: Միակ յուրահատկությունն այն է, որ շատ նամակներ (*data packets/տվյալների փաթեթներ *) մեկ հասցեով ուղարկելիս նրանցից յուրաքանչյուրը կարող է անցնել բոլորովին այլ փոստային բաժանմունքների (*routers/երթուղիչների*) միջով: Դա կախված է նրանից, թե ինչպես են դրանք բաշխվում յուրաքանչյուր գրասենյակում: + +![Պատկեր 1.4](images/internet_4.png) + +Ահա թե ինչպես է, այն աշխատում. Դուք հաղորդագրություններ եք ուղարկում և սպասում պատասխանի: Իհարկե, թղթի և գրիչի փոխարեն օգտագործվում են տվյալների բայթեր, բայց գաղափարը նույնն է: + +Փողոցի, քաղաքի, փոստային կոդի և երկրի անունների փոխարեն մենք օգտագործում ենք IP հասցեներ: Ձեր համակարգիչը նախ խնդրում է DNS- ին (Domain Name System/Դոմեյն անունների համակարգ) djangogirls.org- ը թարգմանել IP հասցեի: Սա գործում է հին հեռախոսների գրքերի նման, որտեղ դուք կարող եք փնտրել այն մարդու անունը, ում հետ ցանկանում եք կապվել, և գտնել նրա հեռախոսահամարը և հասցեն: + +Նամակ ուղարկելիս այն պետք է ունենա որոշակի բնութագրեր, որպեսզի այն ճիշտ առաքվի ՝ հասցե, կնիք և այլն: Դուք նաև օգտագործում եք լեզու, որը ստացողը հասկանում է, այնպես չէ՞: Նույնը վերաբերում է *data packets/տվյալների փաթեթներին*, որոնք դուք ուղարկում եք կայքը տեսնելու համար: Մենք օգտագործում ենք HTTP (Hypertext Transfer Protocol) կոչվող արձանագրություն: + +Հետեւաբար, հիմնականում, երբ կայք ունեք, պետք է ունենաք նաև սերվեր (մեքենա)/*server* (machine), որտեղ այն գտնվում է: Երբ *server/սերվերը* ստանում է մուտքային *request/հարցում* (նամակով), այն հետ է ուղարկում ձեր կայքը (մեկ այլ նամակով): + +Քանի որ սա Django ձեռնարկ է, կարող եք հարցնել, թե ինչ է անում Django- ն: Պատասխան ուղարկելիս միշտ չէ, որ ցանկանում եք նույն բանը ուղարկել բոլոր հասցեատերերին: Շատ ավելի լավ է, եթե ձեր նամակները անձնավորված լինեն, հատկապես այն մարդու համար, ով հենց նոր է գրել ձեզ, այնպես չէ՞: Django- ն օգնում է ձեզ ստեղծել այս անհատականացված, հետաքրքիր նամակները: :) + +Բավական է խոսելը ՝ ստեղծագործելու ժամանակն է: \ No newline at end of file diff --git a/hy/how_the_internet_works/images/internet_1.png b/hy/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/hy/how_the_internet_works/images/internet_1.png differ diff --git a/hy/how_the_internet_works/images/internet_2.png b/hy/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/hy/how_the_internet_works/images/internet_2.png differ diff --git a/hy/how_the_internet_works/images/internet_3.png b/hy/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/hy/how_the_internet_works/images/internet_3.png differ diff --git a/hy/how_the_internet_works/images/internet_4.png b/hy/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/hy/how_the_internet_works/images/internet_4.png differ diff --git a/hy/html/README.md b/hy/html/README.md new file mode 100644 index 00000000000..a6c7d8b77b2 --- /dev/null +++ b/hy/html/README.md @@ -0,0 +1,228 @@ +# HTML- ի ներածություն + +Կարո՞ղ եք հարցնել, թե ի՞նչ ձևանմուշ է: + +Կաղապարը ֆայլ է, որը մենք կարող ենք կրկին օգտագործել `տարբեր տեղեկատվություն կայուն ձևաչափով ներկայացնելու համար. Օրինակ, դուք կարող եք օգտագործել ձևանմուշ, որը կօգնի ձեզ նամակ գրել, քանի որ չնայած յուրաքանչյուր նամակ կարող է պարունակել տարբեր հաղորդագրություն և հասցեագրված լինել այլ անձի: , նրանք կկիսվեն նույն ձևաչափով: + +Django ձևանմուշի ձևաչափը նկարագրված է HTML կոչվող լեզվով (դա HTML- ն է, որը մենք նշել ենք առաջին գլխում ՝ ** How the Internet works (Ինչպես է աշխատում ինտերնետը) **): + +## Ի՞նչ է HTML- ը: + +HTML- ը ծածկագիր է, որը մեկնաբանվում է ձեր վեբ զննարկչի կողմից, ինչպիսիք են Chrome- ը, Firefox- ը կամ Safari- ն `օգտագործողի համար վեբ էջ ցուցադրելու համար: + +HTML- ը նշանակում է «HyperText Markup Language»: ** HyperText ** նշանակում է, որ դա տեքստի տեսակ է, որն աջակցում է էջերի միջև հիպերհղումները: ** Markup (Նշում) ** նշանակում է, որ մենք վերցրել ենք մի փաստաթուղթ և նշել այն կոդով, որպեսզի ինչ-որ բան ասենք (այս դեպքում ՝ զննարկիչ), թե ինչպես մեկնաբանել էջը: HTML կոդը կառուցված է ** tags (պիտակներով) **, յուրաքանչյուրը սկսվում է `<` - ով և ավարտվում `>` - ով: Այս tag-ները (պիտակները) ներկայացնում են markup (մակնշման) ** element-ներ(տարրեր) **: + +## Ձեր առաջին template-ը (ձևանմուշը): + +Կաղապար ստեղծել նշանակում է ձևանմուշի ֆայլ ստեղծել: Ամեն ինչ ֆայլ է, չէ՞: Դուք հավանաբար դա արդեն նկատել եք: + +Ձևանմուշները պահվում են ` blog/templates/blog` գրացուցակում: Այսպիսով, նախ ստեղծեք ` template-ներ (կաղապարներ) ` կոչվող գրացուցակ ձեր բլոգի գրացուցակի ներսում: Դրանից հետո ստեղծեք մեկ այլ գրացուցակ, որը կոչվում է ` blog` ձեր ձևանմուշների գրացուցակում. + + blog + └───templates + └───blog + + +(Կարող եք զարմանալ, թե ինչու են մեզ հարկավոր երկու գրացուցակներ, որոնք կոչվում են ` blog`, ինչպես կիմանաք ավելի ուշ, սա անվանակոչման օգտակար պայմանագիր է, որը կյանքն ավելի է հեշտացնում, երբ ամեն ինչ սկսում է բարդանալ: + +Եվ հիմա ստեղծեք ` post_list.html ` ֆայլ (պարզապես թողեք այն դատարկ) առայժմ `blog/templates/blog ` գրացուցակի ներսում: + +Տեսեք, թե ինչպես է ձեր կայքը այժմ նայում. Http://127.0.0.1:8000/ + +> Եթե ​​դեռ սխալ ունեք ` TemplateDoesNotExist ` - ը, փորձեք վերագործարկել ձեր սերվերը: Անցեք հրամանի տող, դադարեցրեք սերվերը ՝ Ctrl + C (Control և C ստեղները միասին) սեղմելով և այն նորից սկսեք ՝ գործարկելով ` python manage.py runserver ` command-ը (հրամանը): + +![Figure 11.1](images/step1.png) + +Այլևս ոչ մի սխալ: Շնորհավորում եմ :) Այնուամենայնիվ, ձեր կայքը իրականում ոչինչ չի հրապարակում, բացի դատարկ էջից, քանի որ ձեր ձևանմուշն էլ է դատարկ: Մենք պետք է դա շտկենք: + +Բացեք նոր ֆայլը ծածկագրի խմբագրում և ավելացրեք հետևյալը. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + +

Hi there!

+

It works!

+ + +``` + +Այսպիսով, ինչպես է ձեր կայքը այժմ նայում: Այցելեք այն ՝ պարզելու համար ՝ http://127.0.0.1:8000/ + +![Figure 11.2](images/step3.png) + +Դա աշխատեց. Հաճելի աշխատանք այնտեղ: :) + +* `` տողը HTML պիտակ չէ: Այն հայտարարում է միայն փաստաթղթի տեսակը: Այստեղ այն զննարկչին տեղեկացնում է, որ փաստաթղթի տեսակը [ HTML5 ](https://html.spec.whatwg.org/#the-doctype) է: Սա միշտ էլ ցանկացած HTML5 ֆայլի սկիզբ է: +* Ամենահիմնական թեգը ՝ ``, միշտ html բովանդակության սկիզբն է, և ` ` միշտ վերջը: Ինչպես տեսնում եք, կայքի ամբողջ բովանդակությունը անցնում է `` սկզբի և եզրափակիչ թեգի միջև`` +* `

` պիտակ է պարբերության տարրերի համար; `

` փակվում է յուրաքանչյուր պարբերություն + +## Գլուխը և մարմինը + +Յուրաքանչյուր HTML էջ բաժանվում է նաև երկու element-երի ** head ** և ** body ** + +* ** head-ը ** էլեմենտ է, որը պարունակում է տեղեկություններ էկրանին չներկայացվող փաստաթղթի մասին: + +* ** body-ին ** էլեմենտ է, որը պարունակում է այն ամենը, ինչ ցուցադրվում է որպես վեբ էջի մաս: + +Մենք օգտագործում ենք `` ՝ զննարկիչին էջի կազմաձևման մասին պատմելու համար, և `` ՝ պատմելու համար, թե իրականում որն է էջում: + +Օրինակ, `` - ի ներսում կարող եք տեղադրել վեբ էջի վերնագրի էլեմենտ, ինչպես հետևյալը. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Պահեք (save) ֆայլը և թարմացրեք ձեր էջը: + +![Figure 11.3](images/step4.png) + +Նկատեք, թե զննարկիչը ինչպե՞ս է հասկացել, որ "Ola's blog"( «Օլայի բլոգը») ձեր էջի վերնագիրն է: Այն մեկնաբանել է ` Օla's blog ` և տեքստը դրել ձեր զննարկչի վերնագրի տողում (այն կօգտագործվի նաև էջանիշների համար և այլն): + +Հավանաբար, դուք նաև նկատել եք, որ յուրաքանչյուր բացող պիտակ համընկնում է * closing tag (փակող պիտակ) * - ի հետ, ` / ` - ով, և որ էլեմենտ * nested (տեղադրված են) * (այսինքն ՝ կարող եք փակեք որոշակի tag (պիտակ), մինչև որ փակվեն բոլոր ներսում գտնվողները): + +Դա նման է իրերը տուփերի մեջ դնելուն: Դուք ունեք մեկ մեծ տուփ ՝ ` `; դրա ներսում կա ` `, և դա պարունակում է դեռ ավելի փոքր տուփեր. `

` + +Դուք պետք է պահպանեք պիտակների* closing (փակման) * և * nesting(բնադրման)* տարրերի այս կանոնները. Եթե դա չես անում, զննարկիչը չի կարողանա դրանք ճիշտ մեկնաբանել, և ձեր էջը կցուցադրվի սխալ + +## Անհատականացրեք ձեր ձևանմուշը + +Այժմ կարող եք մի փոքր զվարճանալ և փորձել հարմարեցնել ձեր ձևանմուշը: Ահա դրա համար մի քանի օգտակար tags (պիտակ): + +* `

A heading (Վերնագիր)

` ձեր ամենակարևոր վերնագրի համար +* `

sub-heading (ենթավերնագիր)

`Հաջորդ մակարդակի վերնագրի համար +* Նույնիսկ ավելի փոքր`

Ենթավերնագիր

`… և այլն, մինչև `
` +* ` +

Տեքստի մի պարբերություն

` +* ` տեքստը ` ընդգծում է ձեր տեքստը +* ` տեքստը ` խիստ ընդգծում է ձեր տեքստը +* `
` անցնում է մեկ այլ տողի (br- ի ներսում ոչինչ չես դնի, և փակիչ պիտակ չկա) +* ` link-ը (հղումը) ` ստեղծում է link-ը (հղումը) +* `
  • առաջին նյութը
  • երկրորդ կետը
` կազմում է ցուցակ, ինչպես այս մեկը: +* `
` սահմանում է էջի մի հատված +* `` սահմանում է նավիգացիոն հղումների շարք +* `
` սահմանում է անկախ, ինքնամփոփ բովանդակություն +* `
` փաստաթղթում բաժին է սահմանում +* `
` նշանակում է փաստաթղթի կամ բաժնի վերնագիր +* `
` սահմանում է փաստաթղթի հիմնական բովանդակությունը +* `` defines some content aside from the content it is placed in (like a sidebar) +* `
` սահմանում է փաստաթղթի կամ բաժնի տողատակ +* `` սահմանում է որոշակի ժամանակ (կամ տվյալների ժամանակը) + +Ահա ամբողջական ձևանմուշի օրինակ, պատճենեք և տեղադրեք այն ` blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Django Girls blog + + +
+

Django Girls Blog

+
+ +
+ +

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.

+
+ +
+ +

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.

+
+ + +``` + +Մենք այստեղ ստեղծել ենք մեկ ` header (վերնագիր) ` և երկու ` artcicle (հոդված) ` բաժիններ: + +* ` header (վերնագիր) ` տարրը պարունակում է մեր բլոգի վերնագիրը. Դա վերնագիր է և link +* ` article-ի (հոդվածի) ` երկու տարրերը պարունակում են մեր բլոգի հաղորդագրությունները հրապարակված ամսաթվով ` ժամանակ ` տարրում, ` h2 ` տարրը `գրառման վերնագրով, որը սեղմված է և ` p ` (paragraph/ պարբերություն) տարր `մեր բլոգի գրառման տեքստի համար: + +Դա մեզ տալիս է այս էֆեկտը. + +![Figure 11.4](images/step6.png) + +Սա շատ լավ է! Բայց մինչ այժմ մեր ձևանմուշը ցուցադրում է միայն ** նույն տեղեկատվությունը ** մինչդեռ ավելի վաղ մենք խոսում էինք ձևանմուշների մասին, որոնք թույլ էին տալիս մեզ ** տարբեր ** տեղեկատվություն ցուցադրել ** նույն ձևաչափով ** + +Այն, ինչ մենք իսկապես ուզում ենք անել, մեր Django ադմինիստրատորի մեջ ավելացված իրական հաղորդագրությունների ցուցադրումն է, և ահա թե ուր ենք գնալու: + +## Եվս մեկ բան. Տեղակայել: + +Լավ կլիներ այս ամենը տեսնել և ապրել ինտերնետում, այնպես չէ՞: Եկեք կատարենք մեկ այլ PythonAnywhere տեղակայում. + +### Commit (Պարտավորվել) և push (ուղարկել) ձեր կոդը դեպի GitHub + +Նախ և առաջ, եկեք տեսնենք, թե ինչ ֆայլեր են փոխվել վերջին անգամ տեղակայելուց հետո (գործադրեք այս հրամանները տեղական, այլ ոչ թե PythonAnywhere- ում). + +{% filename %}command-line{% endfilename %} + + $ git status + + +Համոզվեք, որ գտնվում եք ` djangogirls ` գրացուցակում, և եկեք ասենք, որ ` git ` ներառի այս փոփոխությունների բոլոր փոփոխությունները. + +{% filename %}command-line{% endfilename %} + + $ git add . + + +Բոլոր ֆայլերը վերբեռնելուց առաջ եկեք ստուգենք, թե ինչ է վերբեռնելու համար ` git ` (բոլոր ֆայլերը, որոնք կբեռնեն ` git `, այժմ պետք է հայտնվեն կանաչ գույնով). + +{% filename %}command-line{% endfilename %} + + $ git status + + +Մենք համարյա այնտեղ ենք, հիմա ժամանակն է ասել, որ փրկի իր պատմության այս փոփոխությունը: Մենք դրան տալու ենք "commit message" («պարտավորության հաղորդագրություն»), որտեղ նկարագրում ենք, թե ինչ ենք փոխել: Այս փուլում կարող եք մուտքագրել այն ամենը, ինչ կցանկանաք, բայց օգտակար է նկարագրական ինչ-որ բան մուտքագրել, որպեսզի հետագայում կարողանաք հիշել ձեր արածը: + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Changed the HTML for the site." + + +> ** Նշում ** Համոզվեք, որ կրկնակի գնանշումներ եք օգտագործում կատարած հաղորդագրության շուրջ: + +Դա անելուց հետո մենք մեր փոփոխությունները վերբեռնում ենք (մղում) մինչև GitHub: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Քաշեք ձեր նոր կոդը PythonAnywhere վայր և ներքաշեք ձեր վեբ ծրագիրը + +* Բացեք [ PythonAnywhere console page(վահանակների էջը) ](https://www.pythonanywhere.com/consoles/) և անցեք ձեր ** Bash console (Բաշ կոնսոլ) ** (կամ սկսեք նորը): Հետո run (սկի). + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Դուք պետք է փոխարինեք `` ձեր իրական PythonAnywhere ենթադոմեյն անունով ՝ առանց անկյունային փակագծերի ( < > ): Ձեր ենթատիրույթի անունը սովորաբար ձեր PythonAnywhere օգտագործողի անունն է, բայց որոշ դեպքերում այն ​​կարող է մի փոքր այլ լինել (օրինակ, եթե ձեր օգտագործողի անունը մեծատառեր է պարունակում): Այսպիսով, եթե այս հրամանը չի գործում, օգտագործեք ` ls ` list files(ցուցակի ֆայլեր) հրամանը ՝ գտնելու ձեր իրական ենթադոմեյնը / թղթապանակի անունը, ապա ` cd ` այնտեղ: + +Այժմ դիտեք ձեր կոդի ներբեռնումը: Եթե ​​ուզում եք ստուգել, ​​թե արդյոք այն տեղ է հասել, կարող եք անցնել ** "Files" («Ֆայլեր») էջը ** և ձեր կոդը դիտել PythonAnywhere- ում (վահանակի էջի ընտրացանկի կոճակից կարող եք հասնել PythonAnywhere- ի այլ էջերի): + +* Վերջապես, անցեք [ "Web" («Վեբ») էջ ](https://www.pythonanywhere.com/web_app_setup/) և սեղմեք ** Reload (Վերաբեռնում) ** ձեր վեբ հավելվածում: + +Ձեր թարմացումը պետք է ուղիղ եթերում լինի: Գնացեք և թարմացրեք ձեր կայքը զննարկչում: Փոփոխությունները պետք է տեսանելի լինեն: :) \ No newline at end of file diff --git a/hy/html/images/step1.png b/hy/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/hy/html/images/step1.png differ diff --git a/hy/html/images/step3.png b/hy/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/hy/html/images/step3.png differ diff --git a/hy/html/images/step4.png b/hy/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/hy/html/images/step4.png differ diff --git a/hy/html/images/step6.png b/hy/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/hy/html/images/step6.png differ diff --git a/hy/images/application.png b/hy/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/hy/images/application.png differ diff --git a/hy/installation/README.md b/hy/installation/README.md new file mode 100644 index 00000000000..b33b29d26bb --- /dev/null +++ b/hy/installation/README.md @@ -0,0 +1,69 @@ +# Եթե ​​ձեռնարկը տանը եք անում + +Եթե ​​դուք աշխատում եք ձեռնարկի վրա տանը, այլ ոչ թե [Django Girls- ի միջոցառումներից մեկում](https://djangogirls.org/events/), այժմ կարող եք ամբողջությամբ բաց թողնել այս գլուխը և անցնել անմիջապես [Ինչպես է աշխատում ինտերնետը](../how_the_internet_works/README.md) գլուխ + +Դա պայմանավորված է նրանով, որ մենք լուսաբանում ենք բաների տեղադրումը, քանի որ դրանք անհրաժեշտ են ձեռնարկի մեջ. Սա պարզապես լրացուցիչ էջ է, որը հավաքում է տեղադրման բոլոր հրահանգները մեկ տեղում (ինչը օգտակար է որոշ սեմինարների ձևաչափերի համար): Եթե ցանկանում եք, կարող եք ընտրել այն ամենը, ինչ կա այս էջում: Բայց եթե ցանկանում եք սկսել բաներ սովորել նախքան ձեր համակարգչում մի շարք իրեր տեղադրելը, բաց թողեք այս գլուխը և մենք ձեզ հետագայում կբացատրենք տեղադրման մասերը, երբ դրանք անհրաժեշտ լինեն: + +Հաջողություն! + +# Եթե ​​սեմինարի եք մասնակցում + +Եթե ​​մասնակցում եք [Django Girls- ի միջոցառումներից մեկին](https://djangogirls.org/events/): + +* Ձեր սեմինարը կարող է ունենալ «տեղադրման երեկույթ»: Եթե ​​դուք տեղադրման երեկույթի եք, այս էջը ձեզ համար է: Հետևեք այստեղ տրված հրահանգներին ՝ ստանալու այն ամենը, ինչ անհրաժեշտ սեմինարը տեղադրելու համար, և անհրաժեշտության դեպքում դիմեք մարզիչների օգնությունը: Այնուհետև հիմնական սեմինարում կարող եք բաց թողնել տեղադրման հրահանգները. Դուք կստանաք դրանք նաև հիմնական ձեռնարկում: +* Գուցե ձեր սեմինարի կազմակերպիչները խնդրել են ձեզ նախքան սեմինարը սկսելը, փորձել տանը ` ամեն ինչ տեղադրել ձեր համակարգչում: Եթե ​​ձեզանից խնդրեցին դա անել, այս էջը ձեզ համար է: Հնարավորինս լավ հետեւեք այստեղ տրված հրահանգներին: Այնուհետև հիմնական սեմինարում, երբ դուք ստանում եք հիմնական ձեռնարկի տեղադրման քայլերը, եթե չկարողացաք տեղադրել որոշ էլեմենտներ, ապա կարող եք օգնություն ստանալ ձեր մարզչից: +* Եթե ​​ձեր արհեստանոցը չի կազմակերպում «տեղադրման երեկույթ» (կամ դուք ի վիճակի չէիք ներկա գտնվել), և եթե կազմակերպիչները ձեզ չեն խնդրել տեղադրել ամեն ինչ նախքան ժամանելը. բաց թողեք այս էջը և անմիջապես անցեք [How the Internet works/ Ինտերնետի աշխատանք ](../how_the_internet_works/README.md) գլուխը: Ձեռնարկի միջոցով աշխատելու ընթացքում դուք կտեղադրեք այն ամենը, ինչ ձեզ հարկավոր է: + +# Installation (Տեղադրում) + +Այս ձեռնարկում դուք բլոգ կստեղծեք: Դա անելու համար ձեռնարկի ընթացքում ձեզ հանձնարարվելու է տարբեր ծրագրեր տեղադրել ձեր համակարգչում և անհրաժեշտության դեպքում կարգավորել որոշ առցանց հաշիվներ: Այս էջը պարունակում է տեղադրման և գրանցման բոլոր հրահանգները (ինչը օգտակար է սեմինարի որոշ ձևաչափերի համար): + + {% include "/chromebook_setup/instructions.md" %} + + + +# Հրամանի տողի/ command line հակիրճ նկարագրություն {#command-line} + +Ստորև նշված քայլերից շատերը վերաբերում են "console"-ին, «տերմինալին»/"terminal", «հրամանի պատուհանին»"command window" կամ «հրամանի տողին»/ "command line" . Սրանք բոլորը նույն բանն են նշանակում. Ձեր համակարգչի վրա պատուհան, որտեղ կարող եք մուտքագրել հրամաններ: Երբ հասնեք հիմնական ձեռնարկին, դուք ավելին կսովորեք հրամանի տողի մասին: Այժմ հիմնական բանը, որ դուք պետք է իմանաք, այն է, թե ինչպես բացել հրամանի պատուհան և ինչպիսի տեսք ունի այն: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Տեղադրեք Python- ը {#python} + +{% include "/python_installation/instructions.md" %} + +# Տեղադրեք կոդերի խմբագիր/code editor {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Կարգավորեք virtualenv- ը և տեղադրեք Django- ն {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Տեղադրեք Git- ը {#git} + +{% include "/deploy/install_git.md" %} + +# Ստեղծեք GitHub հաշիվ/GitHub account {#github-account} + +Գնացեք [GitHub.com](https://www.github.com) և գրանցվեք նոր անվճար հաշվի համար: Համոզվեք, որ կհիշեք ձեր գաղտնաբառը (եթե այն օգտագործում եք, ավելացրեք գաղտնաբառերի կառավարչին): + +# Ստեղծեք PythonAnywhere հաշիվ {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Սկսեք կարդալ + +Շնորհավորում եմ, ամեն ինչ պատրաստ է: Եթե ​​սեմինարին դեռ ազատ ժամանակ է մնացել, օգտակար կլինի կարդալ առաջին մի քանի գլուխները. + +* [Ինչպես է աշխատում ինտերնետը](../how_the_internet_works/README.md) + +* [ Command line-ի (Հրամանի տողի) ներածություն](../intro_to_command_line/README.md) + +* [ Python-ի ներածություն/ Introduction to Python](../python_introduction/README.md) + +* [Ի՞նչ է Django- ն](../django/README.md) + +# Վայելեք սեմինարը: + +Երբ սեմինարը սկսվի, դուք կկարողանաք անմիջապես անցնել [Your first Django project! /ձեր Առաջին Django նախագիծը](../django_start_project/README.md) գլխին: diff --git a/hy/intro_to_command_line/README.md b/hy/intro_to_command_line/README.md new file mode 100644 index 00000000000..6cd46c75e2e --- /dev/null +++ b/hy/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Հրամանի տողի ինտերֆեյսի /command-line interface ներածություն + +> Նրանց համար, ովքեր ձեռնարկն անցնում են տանը. Ձեր նոր ընկերը ՝ [հրամանի տողը/ Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8), խոսում է այս գլխի նյութի մասին: + +Ցնցող է, չէ՞:Մի քանի րոպեից դուք կգրեք ձեր առաջին տողի ծածկագիրը: :) + +**Թույլ տվեք ներկայացնել ձեր առաջին նոր ընկերոջը. Հրամանի տող/command line:** + +Հաջորդ քայլերը ցույց կտան, թե ինչպես օգտագործել այն սև պատուհանը, որն օգտագործում են բոլոր հակերները: Սկզբում դա կարող է թվալ մի փոքր վախեցնող, բայց իրականում դա պարզապես պատուհան է, որը սպասում է ձեզանից հրահանգների: + +> **Նշում** Խնդրում ենք նկատի ունենալ, որ այս ձեռնարկում մենք օգտագործում ենք «գրացուցակ/'directory'» և «թղթապանակ/'folder'» տերմինները փոխադարձաբար. Այս բառերը միևնույն բանն են նշանակում: + +## Ի՞նչ է հրամանի տողը/command line: + +Պատուհանը, որը սովորաբար անվանում են **Հրամանի տող/ command line** կամ **«Հրամանի տողի միջերես»/command-line interface (CLI)** , տեքստի վրա հիմնված ծրագիր է ՝ ձեր համակարգչի վրա ֆայլերը դիտելու, մշակելու և շահարկելու համար: Դա անում է նույնը, ինչ Explorer- ը Windows- ում կամ Finder- ը macOS- ում, բայց այն չունի գրաֆիկական ինտերֆեյս: Հրամանի տողի այլ անուններն են ՝ *cmd*, *CLI*, *prompt*, *console* կամ *terminal*: + +## Բացեք հրամանի տողի միջերեսը/command-line interface + +Որոշ փորձեր սկսելու համար նախ պետք է բացենք հրամանի տողի միջերեսը/command-line interface: + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Հուշում + +Այժմ դուք պետք է տեսնեք սպիտակ կամ սև պատուհան, որը սպասում է ձեր հրամաններին: + + + +Եթե ​​ունեք Mac կամ Linux, ամենայն հավանականությամբ տողի վերջում կտեսնեք այս `$` նշանը. + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +Windows- ում, հավանաբար, տեսնում եք այս `>` նշանը. + +{% filename %}command-line{% endfilename %} + + > + + +Մի փոքր վերևում կարող եք աչքի անցկացնել Linux- ի օգտագործողների հրահանգները. Մենք նման բան կտեսնենք, երբ հասնենք ձեռնարկի PythonAnyplace- ին: + + + +Յուրաքանչյուր հրամանին նախորդելու է `$` կամ `>` նշանը և տարածությունը/space: Բայց ձեզ հարկավոր չէ դրանք տպել: Համակարգիչը դա կանի ձեր փոխարեն :) + +> Մի փոքր հուշում. Նման մի բան կարող է գրվել հրամանի տողի կուրսորի դիմաց `C:\Users\ola>` կամ `Olas-MacBook-Air:~ ola$` և դա 100% -ով նորմալ է: + +Ցանկացած հատված, ներառյալ այս `$` կամ այս `>` նշանները, հավաքականորեն կոչվում է *command line prompt/հրամանի տող հուշում * կամ ուղղակի *prompt/հուշում* : Սովորաբար, այն պարունակում է այն թղթապանակի հասցեն, որի մեջ դուք այժմ գտնվում եք: Այն հուշում է ձեզ հրաման մուտքագրել պատուհանի մեջ: + +Հետագայում ձեռնարկում, յուրաքանչյուր հրամանից առաջ, որը դուք պետք է մուտքագրեք, մենք կգրենք `$` կամ `>` խորհրդանիշ: Երբեմն դրա ձախ կողմում կավելացնենք ևս մի քանի տեքստ: Անտեսեք ձախ կողմը և պարզապես մուտքագրեք հրահանգը. Այն սկսվում է հուշումից հետո: + +## Ձեր առաջին հրամանը (YAY!) + +Սկսենք մուտքագրել այս հրամանը. + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +Եվ ապա սեղմեք `enter`: Սա է մեր արդյունքը. + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Ինչպես տեսնում եք, համակարգիչը նոր է տպել ձեր օգտվողի անունը: Կոկիկ է, այնպես չէ՞: :) + +> Փորձեք մուտքագրել յուրաքանչյուր հրաման ձեռքով, այլ ոչ թե պատճենել և տեղադրել: Այսպիսով, դուք ավելի լավ կհիշեք: + +## Հիմունքներ + +Յուրաքանչյուր գործավար համակարգ ունի հրամանի տողի մի փոքր այլ հրամանների հավաքածու, այնպես որ համոզվեք, որ հետևում եք ձեր օպերացիոն համակարգի հրահանգներին: Փորձե՞նք սա: + +### Ընթացիկ գրացուցակ/Current directory + +Ցանկալի կլիներ իմանալ, թե որտեղ ենք մենք գտնվում, այնպես չէ՞: Եկեք տեսնենք: Մուտքագրեք այս հրամանը և սեղմեք `enter`. + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Նշում. «Pwd» նշանակում է «տպել աշխատանքային գրացուցակ»/'print working directory: + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Նշում. «Cd» նշանակում է «փոփոխել գրացուցակը»/'change directory': PowerShell- ի միջոցով դուք կարող եք օգտագործել pwd այնպես, ինչպես Linux- ում կամ macOS- ում: + + + +Նման բան, հավանաբար, ձեր համակարգչում կտեսնեք: Հրամանի տող/command line բացելիս սովորաբար գտնվում եք ընթացիկ օգտվողի տնային գրացուցակում/user's home directory: + +* * * + +### Իմացիր ավելին հրամանի/command մասին + +Հրամանի տողի շատ հրամաններ ներկառուցված օգնություն ունեն: Օրինակ ՝ ահա, թե ինչպես կարելի է ավելին իմանալ հրամանի մասին, որը ցույց է տալիս, թե որ թղթապանակում եք գտնվում ներկայումս. + + + +macOS- ը և Linux- ը ունեն `man` հրաման, որը ձեզ օգնում է հրամանների հարցում: Փորձեք `man pwd` -ը և տեսեք, թե ինչ է ասում, կամ `man` հրամանը այլ հրամանների առաջ դրեք, որպեսզի տեսնեք նրանց օգնությունը: Սովորաբար, `man`-ի էջերը ցուցադրվում են էջ առ էջ: Օգտագործեք space bar հաջորդ էջին անցնելու համար, և ` q ` - ը `օգնությունից դուրս գալու համար: + + + + + +Օգնություն ցուցադրելու համար գրեթե ցանկացած հրամանին կարող եք ավելացնել ` /? `: Գուցե հարկ լինի ոլորել ներքև ՝ ամբողջ Օգնությունը կարդալու համար: Փորձեք մուտքագրել `cd /?`: + + + +### Նշեք ֆայլերը և գրացուցակները/directories + +Այսպիսով ի՞նչ կա դրա մեջ: Լավ կլինի պարզել դա: Տեսնենք. + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% 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 + ... + + +> Նշում. PowerShell- ում կարող եք նաև օգտագործել «ls» - ը, ինչպես Linux- ում և macOS- ում: + +* * * + +### Փոխել ընթացիկ գրացուցակը/current directory + +Հիմա եկեք գնանք մեր աշխատասեղանի գրացուցակին/Desktop directory. + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Նկատի ունեցեք, որ գրացուցակի անունը «Desktop» կարող է թարգմանվել ձեր Linux հաշվի լեզվով: Եթե ​​դա այդպես է, դուք պետք է `Desktop` փոխարինեք թարգմանված անունով. օրինակ ՝ `Schreibtisch` գերմաներենի համար: + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Ստուգեք, արդյոք այն իսկապես փոխվել է. + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Ահա այն! + +> PRO հուշում. Եթե ձեր ստեղնաշարի վրա մուտքագրեք ` cd D ` և այնուհետև սեղմեք ` tab (էջանիշը/ներդիրը) `, command line (հրամանի տողը) ավտոմատ կերպով լրացնում է անվան մնացած մասը, որպեսզի կարողանաք ավելի արագ նավարկել Եթե ​​«D» - ով սկսվող մեկից ավելի պանակներ կան, երկու անգամ սեղմեք ` tab (ներդիրը )` ստեղնին `ընտրանքների ցուցակ ստանալու համար: + +* * * + +### Ստեղծեք գրացուցակ + +Ի՞նչ կասեք ձեր աշխատասեղանի վրա պրակտիկ գրացուցակ ստեղծելու մասին: Դուք կարող եք դա անել այս կերպ. + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Այս փոքրիկ հրահանգը կստեղծի ձեր աշխատասեղանի վրա `practice` անունով պանակ: Կարող եք ստուգել, ​​արդյոք այնտեղ կա ՝ նայելով ձեր աշխատասեղանին կամ գործարկելով `ls` կամ `dir` հրամանը: Փորձիր. :) + +> PRO հուշում. Եթե չեք ցանկանում անընդմեջ մուտքագրել նույն հրամանները, փորձեք սեղմել `վերին սլաքը/up arrow` և `ներքևի սլաքը/ down arrow` ձեր ստեղնաշարի վրա, որպեսզի շրջանցեք վերջերս օգտագործված հրամանները: + +* * * + +### Վարժություն + +Մի փոքր առաջադրանք. Նորաստեղծ `practice/պրակտիկայի` թղթապանակում ստեղծեք պանակ, որը կոչվում է `test`: (Օգտագործեք `cd` և `mkdir` հրահանգները): + +#### Լուծում. + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +Շնորհավորում ենք։ + +* * * + +### Մաքրել + +Մենք չենք ուզում խառնաշփոթ թողնել, ուստի եկեք ջնջենք այն ամենը, ինչ ստեղծել ենք մինչև այս պահը: + +Նախ, մենք պետք է վերադառնանք Desktop / աշխատասեղան. + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Օգտագործելով ` .. `-ի և ` cd ` - ի հրամանները միասին դուք կարող եք փոխել ընթացիկ գրացուցակը/current directory ծնող գրացուցակի/parent directory (այսինքն ՝ գրացուցակը, որը պարունակում է ձեր ընթացիկ գրացուցակը) + +Ստուգեք, թե որտեղ եք դուք ՝ + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Հիմա ժամանակն է ջնջել `practice` գրացուցակը. + +> ** Ուշադրություն **. `del`, `rmdir` կամ `rm`ֆայլերը ջնջելը անվերադարձ է, այսինքն ՝ *ջնջված ֆայլերը կվերանան ընդմիշտ*!: Այսպիսով, շատ զգույշ եղեք այս հրամանի հետ: + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Կատարած է! Համոզված լինելու համար, որ այն իրականում ջնջված է, եկեք ստուգենք այն. + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Ելք + +Առայժմ վերջ: Այժմ կարող եք ապահով կերպով փակել հրամանի տողը: Եկեք դա անենք հակերային եղանակով, լա՞վ: :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Հերիք է, հա՞: :) + +## Ամփոփում + +Ահա մի քանի օգտակար հրամանների ամփոփ նկարագրություն. + +| Command (Windows) | Command (Mac OS / Linux) | Description | Example | +| ----------------- | ------------------------ | -------------------------- | -------------------------------------------------- | +| exit | exit | close the window | **exit** | +| cd | cd | change directory | **cd test** | +| cd | pwd | show the current directory | **cd** (Windows) or **pwd** (Mac OS / Linux) | +| dir | ls | list directories/files | **dir** | +| copy | cp | copy file | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | move file | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | create a new directory | **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) | + +Սրանք ընդամենը հրամաններից մի քանիսն են, որոնք կարող եք գործարկել ձեր հրամանի տողում/command line, բայց այսօր դրանից ավելին չեք օգտագործելու: + +Եթե ​​ձեզ հետաքրքրում է, [ss64.com](http://ss64.com) - ը պարունակում է հրամանի ամբողջական հղում բոլոր օպերացիոն համակարգերի համար: + +## Պատրա՞ստ եք + +Եկեք խորասուզվենք Python- ի մեջ: \ No newline at end of file diff --git a/hy/intro_to_command_line/open_instructions.md b/hy/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..c7d883218f4 --- /dev/null +++ b/hy/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +Կախված Windows- ի ձեր տարբերակից և ստեղնաշարից, հետևյալներից որևէ մեկը պետք է հրամանի պատուհան բացի (գուցե մի քիչ փորձեր կատարեք, բայց բոլոր տարբերակները փորձելու կարիք չկա). + +- Գնացեք Սկսել /Start բաժին ընտրացանկից (կամ Start էկրանից), և որոնման տողում մուտքագրեք «Command Prompt»: +- Անցեք Սկսելու ցանկը/Start menu→Windows System → Command Prompt/ հրամանի տող: +- Անցեք Start menu /Սկսելու ցանկը → All Programs / Բոլոր ծրագրերը → Accessories/Աքսեսուարներ → Command Prompt /Հրամանի տող: +- Անցեք Start screen, ձեր մկնիկը տարեք էկրանի ստորին ձախ անկյունի վրա և կտտացրեք այնտեղ հայտնվող դեպի ներքև ուղված սլաքին: (Եթե ունեք սենսորային էկրան, մատը սահեցրեք ներքևից վերև): Հավելվածների էջը պետք է բացվի: Windows համակարգի բաժնում/Windows System section ընտրեք Command Prompt-ը/ հրամանի տողը: +- Ձեր ստեղնաշարի վրա սեղմած պահելով Windows ստեղնը սեղմեք X: Հայտնվող ընտրացանկում ընտրեք «Command Prompt/Հրամանի տող»-ը: +- Ձեր ստեղնաշարի վրա սեղմած պահելով Windows ստեղնը սեղմեք "R" ՝ Run պատուհանը վեր հանելու համար: Տողում մուտքագրեք "cmd" և կտտացրեք OK: + +![Մուտքագրեք "cmd" "Run" պատուհանում](../python_installation/images/windows-plus-r.png) + +Ավելի ուշ այս ձեռնարկի շրջանակներոըմ ձեզ հարկավոր է լինելու ունենալ միևնույն ժամանակ երկու բաց հրամանի պատուհան: Այնուամենայնիվ, Windows- ի որոշ տարբերակների դեպքում, եթե դուք արդեն ունեք մեկ բաց հրամանի պատուհան/command window և փորձում եք բացել երկրորդը նույն մեթոդով, այն ձեզ կուղարկի դեպի արդեն բացված հրամանի պատուհանը: Փորձեք դա ձեր համակարգչի վրա և տեսեք, թե ինչ է կատարվում: Եթե ​​միայն մեկ հրամանի պատուհան եք ստանում, փորձեք վերը նշված ցուցակի մյուս մեթոդներից որևէ մեկը: Դրանցից գոնե մեկը պետք է հանգեցնի նոր հրամանի պատուհանի բացմանը: + + + + + +Գնացեք Applications → Utilities/Կոմունալ ծառայություններ → Terminal /Տերմինալ: + + + + + +Հրամանի տողը, հավանաբար, թաքնված է հետևյալում ՝ Applications → Accessories → Terminal, or Applications → System → Terminal, բայց դա կարող է կախված լինել ձեր համակարգից: Եթե ​​չկարողանաք գտնել, Google- ը կօգնի: :) + + diff --git a/hy/python_installation/README.md b/hy/python_installation/README.md new file mode 100644 index 00000000000..34cd91728f5 --- /dev/null +++ b/hy/python_installation/README.md @@ -0,0 +1,15 @@ +# Եկեք սկսենք Python- ից + +Վերջապես մենք այստեղ ենք: + +Բայց նախ ասենք, թե ինչ է Python- ը: Python- ը շատ սիրված ծրագրավորման լեզու է, որը կարող է օգտագործվել կայքեր, խաղեր, գիտական ​​ծրագրեր, գրաֆիկա և շատ ավելին ստեղծելու համար: + +Python- ն առաջացել է 1980-ականների վերջին, և դրա հիմնական նպատակն է ընթեռնելի լինել մարդկանց կողմից (ոչ միայն մեքենաների): Ահա թե ինչու այն ավելի պարզ թվում, քան ծրագրավորման այլ լեզուները, բայց մի անհանգստացեք. Python-ը իսկապես հզոր է: + +# Python- ի տեղադրում + +> **Նշում** Եթե Chromebook եք օգտագործում, բաց թողեք այս գլուխը և համոզվեք, որ հետևում եք [Chromebook Setup/Chromebook- ի կարգավորման](../chromebook_setup/README.md) հրահանգներին: +> +> **Նշում** Եթե դուք արդեն ավարտել եք տեղադրումը, ապա այլևս դա անելու կարիք չկա. Դուք կարող եք անմիջապես անցնել հաջորդ գլխին: + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/hy/python_installation/images/python-installation-options.png b/hy/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/hy/python_installation/images/python-installation-options.png differ diff --git a/hy/python_installation/images/windows-plus-r.png b/hy/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/hy/python_installation/images/windows-plus-r.png differ diff --git a/hy/python_installation/instructions.md b/hy/python_installation/instructions.md new file mode 100644 index 00000000000..019e179c4fe --- /dev/null +++ b/hy/python_installation/instructions.md @@ -0,0 +1,118 @@ +> Ընթերցողների համար տանը. Այս գլուխն ընդգրկված է [ Installing Python & Code Editor ](https://www.youtube.com/watch?v=pVTaqzKZCdA) տեսանյութ: +> +> Այս բաժինը հիմնված է Geek Girls Carrots- ի ձեռնարկի վրա (https://github.com/ggcarrots/django-carrots) + +Django- ն գրված է Python- ում: Մեզ պետք է Python- ը, որպեսզի Django- ում ինչ-որ բան անի: Եկեք սկսենք տեղադրելով այն: Մենք ուզում ենք, որ դուք տեղադրեք Python 3-ի վերջին տարբերակը, այնպես որ, եթե ունեք ավելի վաղ տարբերակ, ապա ձեզ հարկավոր է արդիականացնել այն: Եթե ​​արդեն ունեք {{ book.py_min_version }} կամ ավելի բարձր տարբերակ, ապա լավ կլինի: + +Խնդրում ենք տեղադրել սովորական Python– ը հետևյալ կերպ, նույնիսկ այն ժամանակ, երբ ձեր համակարգչում տեղադրված է Anaconda: + + + +Նախ ստուգեք, արդյոք ձեր համակարգիչը 32-բիթանոց տարբերակ է կամ 64-բիթանոց Windows տարբերակ, Համակարգի տեղեկատվության էջի «Համակարգի տեսակ» տողում: Այս էջին հասնելու համար փորձեք այս մեթոդներից մեկը. + +* Միաժամանակ սեղմեք Windows կոճակը և Pause / Break կոճակը +* Բացեք ձեր կառավարման վահանակը Windows ընտրացանկից, ապա անցեք Համակարգ և & amp; Անվտանգություն, ապա ՝ Համակարգ +* Սեղմեք Windows կոճակը, ապա անցեք Settings > System > About (Կարգավորումներ> Համակարգ> Մեր մասին) +* Որոնեք Windows Start ընտրացանկում "System Information" («Համակարգի տեղեկատվություն») բաժնում: Դա անելու համար կտտացրեք Start կոճակին կամ սեղմեք Windows ստեղնը, ապա սկսեք մուտքագրել ` System Information `: Այն մուտքագրելուն պես կսկսի առաջարկություններ անել: Դուք կարող եք ընտրել առաջարկը, երբ այն հայտնվի: + +Python- ը Windows- ի համար կարող եք ներբեռնել https://www.python.org/downloads/windows/ կայքից: Կտտացրեք «Վերջին Python 3 թողարկում - Python x.x.x» հղմանը: Եթե ​​ձեր համակարգիչը աշխատում է Windows- ի ** 64-բիթանոց ** տարբերակով, ներբեռնեք ** Windows x86-64 գործարկվող տեղադրիչը **: Հակառակ դեպքում ներբեռնեք ** Windows x86 գործարկվող տեղադրիչը **: Տեղադրիչը ներբեռնելուց հետո դուք պետք է այն գործարկեք (կրկնակի սեղմեք դրա վրա) և հետևեք այնտեղ տրված հրահանգներին: + +Մի բան, որին պետք է զգույշ լինել. Տեղադրման ընթացքում դուք կնկատեք "Setup"(«Կարգավորում») նշվող պատուհանը: Համոզվեք, որ նշեք «Ավելացնել Python {{book.py_version}} - ը PATH» - ին կամ «Python ավելացնել ձեր միջավայրի փոփոխականներին» վանդակը և կտտացրեք «Տեղադրել հիմա» -ին, ինչպես ցույց է տրված այստեղ (կարող է մի փոքր այլ տեսք ունենալ, եթե տեղադրեք այլ տարբերակ): + +![ +Մի մոռացեք Python- ին ավելացնել Path- ին](../python_installation/images/python-installation-options.png) + +Տեղադրումն ավարտելուց հետո դուք կարող եք տեսնել երկխոսության տուփ հղումով, որին կարող եք հետևել Python- ի կամ ձեր տեղադրած տարբերակի մասին ավելին իմանալու համար: Փակեք կամ չեղարկեք այդ երկխոսությունը. Այս ձեռնարկում դուք ավելին կսովորեք: + +Նշում. Եթե օգտագործում եք Windows- ի (7, Vista կամ որևէ հին տարբերակ) ավելի հին տարբերակ, և Python- ի {{ book.py_version }} տեղադրիչը սխալմամբ ձախողվեց, ապա տեղադրեք բոլոր Windows Updates- ը և փորձեք նորից տեղադրել Python- ը: Եթե ​​դեռ սխալ ունեք, փորձեք տեղադրել Python տարբերակը {{ book.py_min_release }} [ Python.org ](https://www.python.org/downloads/windows/) կայքից: + +> Django- ին {{ book.django_version }} անհրաժեշտ է Python {{ book.django_version }} կամ ավելի մեծ, որը չի ապահովում Windows XP կամ ավելի վաղ տարբերակներ: + + + + + +> ** Նշում ** Նախքան Python- ը macOS- ում տեղադրելը, պետք է համոզվեք, որ ձեր Mac- ի կարգավորումները թույլ են տալիս տեղադրել փաթեթներ, որոնք App Store- ից չեն: Գնացեք համակարգի նախապատվություններ, կտտացրեք "Security & Privacy," , ապա "General" («Ընդհանուր»)ներդիրին: Եթե ​​ձեր «Allow apps downloaded from:» դրված է որպես «Mac App Store,», ապա այն փոխեք «Mac App Store and identified developers.»: + +Դուք պետք է գնաք https://www.python.org/downloads/ կայք և ներբեռնեք Python- ի վերջին տեղադրիչը. + +* Ներբեռնեք * macOS 64-բիթ / 32-բիթանոց տեղադրիչ * ֆայլը, +* Տեղադրիչը գործարկելու համար կրկնակի կտտացրեք * պիթոն - {{ book.py_release }} - macos11.pkg *: + + + + + +Շատ հավանական է, որ Python- ն արդեն տեղադրված է տուփից դուրս: Ստուգելու համար, արդյոք այն տեղադրված է (և որ տարբերակն է), բացեք վահանակ և մուտքագրեք հետևյալ հրահանգը. + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +Եթե ​​Python- ի այլ տարբերակ ունեք տեղադրված, առնվազն {{ book.py_min_version }} (օրինակ ՝ {{ book.py_min_release }}), ապա ձեզ հարկավոր չէ արդիականացնել: Եթե ​​Python- ը տեղադրված չէ, կամ եթե այլ տարբերակ եք ուզում, նախ ստուգեք, թե Linux- ի ո՞ր բաշխումն եք օգտագործում հետևյալ հրահանգով. + +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +Դրանից հետո, կախված արդյունքից, հետևեք այս բաժնի ներքևում տեղադրված հետևյալ ուղեցույցներից մեկին: + + + + + +Մուտքագրեք այս հրամանը ձեր վահանակի մեջ. + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Օգտագործեք այս հրամանը ձեր վահանակում. + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Եթե ​​Fedora- ի հին տարբերակներում եք, կարող է սխալվել, որ ` dnf ` հրամանը չի գտնվել: Այդ դեպքում փոխարենը պետք է օգտագործել ` yum `: + + + + + +Օգտագործեք այս հրամանը ձեր վահանակում. + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Հաստատեք, որ տեղադրումը հաջող է անցել ՝ հրամանի տող բացելով և գործարկելով ` python3 ` հրամանը. + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +Shownուցադրված տարբերակը կարող է տարբերվել {{ book.py_release }} - ից `այն պետք է համապատասխանի ձեր տեղադրած տարբերակին: + +**NOTE:** Եթե ​​Windows- ում եք և սխալ հաղորդագրություն եք ստանում, որ ` python3 ` չի գտնվել, փորձեք օգտագործել ` python ` (առանց ` 3 `) և ստուգեք եթե այն դեռ կարող է լինել Python- ի {{ book.py_min_version }} կամ ավելի բարձր տարբերակ: Եթե ​​դա նույնպես չի աշխատում, կարող եք բացել նոր հրամանի տող և նորից փորձել: դա տեղի է ունենում, եթե օգտագործում եք Python- ի տեղադրումից առաջ բացված հրամանի տողը: + +* * * + +Եթե ​​կասկածներ ունեք կամ ինչ-որ բան սխալ է տեղի ունեցել, և գաղափար չունեք հետագա անելիքների մասին, խնդրում ենք ձեր մարզչին հարցրեք: Երբեմն ամեն ինչ հարթ չի ընթանում, և ավելի լավ է օգնություն խնդրել ավելի մեծ փորձ ունեցող մեկից: \ No newline at end of file diff --git a/hy/python_introduction/README.md b/hy/python_introduction/README.md new file mode 100644 index 00000000000..4cada98e864 --- /dev/null +++ b/hy/python_introduction/README.md @@ -0,0 +1,1072 @@ +{% set warning_icon = '' %} + +# Ներածություն Python- ին + +> Այս գլխի մի մասը հիմնված է Geek Girls Carrots- ի (https://github.com/ggcarrots/django-carrots) ձեռնարկների վրա: + +Եկեք գրենք մի քանի ծրագրեր: + +## Python prompt (կահակալ) + +> Ընթերցողների համար տանը. Այս մասը ներառված է [ Python Basics: Integers, Strings, Lists, Variables and Errors (Python- ի հիմունքներ. Ամբողջ թվեր, տողեր, ցուցակներ, փոփոխականներ և սխալներ) ](https://www.youtube.com/watch?v=MO63L4s-20U) տեսանյութում: + +Python- ի հետ խաղալու համար մենք պետք է ձեր համակարգչում բացենք * command line (հրամանի տող)*: Դուք արդեն պետք է իմանաք, թե ինչպես դա անել. Դուք դա սովորել եք [ Intro to Command Line (Հրամանի տողի ներածություն) ](../intro_to_command_line/README.md) գլխում: + +Պատրաստ լինելուց հետո հետևեք ստորև ներկայացված հրահանգներին: + +Մենք ուզում ենք Python կոնսոլ բացել, այնպես որ Windows- ում մուտքագրեք ` python ` կամ Mac OS / Linux համակարգում ` python3 ` և սեղմեք ` enter `: + +{% filename %}command-line{% endfilename %} + + $ python3 + Python {{ book.py_release }} (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Ձեր առաջին Python command-ը (հրամանը): + +Python հրամանը գործարկելուց հետո հուշումը փոխվեց `>>>`. Մեզ համար սա նշանակում է, որ առայժմ մենք կարող ենք օգտագործել միայն Python լեզվով հրամաններ: Պետք չէ մուտքագրել `>>>` - Python- ը դա կանի ձեզ համար: + +Եթե ​​ցանկանում եք ցանկացած պահի դուրս գալ Python- ի վահանակից, մուտքագրեք ` ելք () ` կամ օգտագործեք դյուրանցում ` Ctrl + Z ` Windows- ի և ` Ctrl + D ` Mac / Linux- ի համար: Այդ դեպքում `>>>`այլևս չեք տեսնի: + +Առայժմ մենք չենք ցանկանում դուրս գալ Python կոնսոլից: Մենք ուզում ենք ավելին իմանալ դրա մասին: Եկեք սկսենք մուտքագրել մի քանի մաթեմատիկա, ինչպիսին է ` 2 + 3 ` և սեղմելով ` մուտքագրումը `: + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Հոյակապ. Տեսեք, թե ինչպես հայտնվեց պատասխանը: Python- ը գիտի մաթեմատիկա: Կարող եք փորձել այլ հրամաններ, ինչպիսիք են ՝ + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Էքսպոնենտալ հաշվարկ կատարելու համար ասենք 2 հզորության 3-ը ՝ մենք մուտքագրում ենք. {% filename %}command-line (հրամանի տող){% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Մի փոքր զվարճացեք դրանով, ապա վերադառնաք այստեղ :) + +Ինչպես տեսնում եք, Python- ը հիանալի հաշվիչ է: Եթե ​​մտածում եք, թե էլ ինչ կարող եք անել ... + +## Strings (տողեր) + +Ինչ վերաբերում է ձեր անունին: Մուտքագրեք ձեր անունը այսպիսի մեջբերումներում. + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Դուք այժմ ստեղծել եք ձեր առաջին string-ը (տողը): Դա նիշերի հաջորդականություն է, որը կարող է մշակվել համակարգչի կողմից: String-ը միշտ պետք է սկսվի և ավարտվի նույն նիշով: Սա կարող է լինել միայնակ (` '`) կամ կրկնակի (` "`) մեջբերումներ (տարբերություն չկա:) Գնանշումները Python- ին ասում են, որ իրենց մեջ եղածը string է: + +String-երը կարելի է միասին դնել: Փորձեք այս: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +Դուք կարող եք նաև բազմապատկել տողերը մի թվով. + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Եթե ​​ձեզ հարկավոր է ապոստերֆ դնել ձեր string-ի ներսում, ապա դա անելու երկու եղանակ ունեք: + +Օգտագործելով կրկնակի գնանշումներ. + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +կամ հետադարձ աղեղից խուսափելուց (`\`): + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Հետաքրքիր է, ոչ: Ձեր անունը մեծատառով տեսնելու համար մուտքագրեք ՝ + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Դուք հենց ձեր string-ի (տողի) վրա օգտագործեցիք ` upper(վերին) ` ** method(մեթոդը)**: Մեթոդը (ինչպիսին է ` upper() (վերին ()) `) հրահանգների հաջորդականությունն է, որը Python- ը պետք է կատարի տվյալ օբյեկտի վրա (` «Օլա» `), երբ այն զանգահարեք: + +Եթե ​​ուզում եք իմանալ ձեր անվան մեջ պարունակվող տառերի քանակը, դրա համար կա **function ( գործառույթ) **: + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Հետաքրքիր է, թե ինչու եք երբեմն function-ներ (ֆունկցիաներ) կանչում a `.` String-ի (տողի) վերջում (ինչպես ` "Ola".upper() `) և երբեմն նախ կանչում ես ֆունկցիա և string-ը դնում փակագծերում: Դե, որոշ դեպքերում function-ները (ֆունկցիաները) պատկանում են object-ների (օբյեկտների), ինչպես, օրինակ, ` վերին () `, որը կարող է կատարվել միայն տողերի վրա: Այս դեպքում մենք function (ֆունկցիան) անվանում ենք ** method (մեթոդ) **: Այլ ֆունկցիաներ, գործառույթները չեն պատկանում որևէ կոնկրետ բանի և կարող են օգտագործվել տարբեր տեսակի օբյեկտների վրա, ինչպես ` len () `: Այդ պատճառով մենք`"Ola"` որպես պարամետր ենք տալիս `len` գֆունկցիաին: + +### Ամփոփում + +Լավ, բավական է string-եր: Մինչ այժմ իմացել եք. + +- ** prompt-ը** - Python- ի մեջ հրահանգներ (code / կոդ) մուտքագրելը Python- ում տալիս է պատասխաններ +- **numbers and strings (թվերն ու տողերը) ** - Python- ի համարներում օգտագործվում են մաթեմատիկայի համար, իսկ string-երը `տեքստային object- ների (օբյեկտների) համար +- ** operators (օպերատորները) ** - ինչպիսիք են ` + ` և ` * `, միավորում են արժեքները ՝ նորը արտադրելու համար +- ** function-ներ ** - ինչպես ` upper() ` և ` len() `, գործողություններ կատարել օբյեկտների վրա: + +Սրանք յուրաքանչյուր սովորած ծրագրավորման լեզվի հիմունքներն են: Պատրա՞ստ եք ավելի դժվար բանի: + +## Errors (Սխալներ) + +Փորձենք մի նոր բան: Կարո՞ղ ենք համարի երկարությունը ստանալ նույն կերպ, ինչպես կարող էինք պարզել մեր անվան երկարությունը: Մուտքագրեք ` len(304023) ` և սեղմեք ` enter `: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Մենք ստացանք մեր առաջին սխալը: {{ warning_icon }} icon-ը (պատկերակը) ձեզ նախապատվություն տալու այն ձևն է, որ այն կոդը, որը պատրաստվում եք գործարկել, չի աշխատի ինչպես սպասվում էր: Սխալներ թույլ տալը (նույնիսկ դիտավորյալները) ուսման կարևոր մասն է: + +Այն ասում է, որ «int» տեսակի object-ները (օբյեկտները) (integers/ ամբողջ թվեր) երկարություն չունեն: Այսպիսով, ի՞նչ կարող ենք անել հիմա: Միգուցե կարո՞ղ ենք մեր թիվը գրել որպես string: String-երն ունեն length (երկարություն), չէ՞: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Դա աշխատեց! Մենք ` str ` գործառույթի ներսում օգտագործեցինք ` str() ` function-ը: ` str() ` ամեն ինչ վերածում է string-երի: + +- ` str ` function (ֆունկցիան) իրերը վերափոխում է ** string-երի ** +- ` int ` function (ֆունկցիան) իրերը վերափոխում է ** integers ** + +> Կարևոր. Մենք կարող ենք թվերը վերածել տեքստի, բայց պարտադիր չէ, որ տեքստը վերածենք թվերի. Ի՞նչ կլինի ամեն դեպքում `int('hello') `: + +## Variables (Փոփոխականներ) + +Mingրագրավորման կարևոր հայեցակարգը variable- ներն (փոփոխականներն) են: Varaible-ը (Փոփոխականը) ոչ այլ ինչ է, քան ինչ-որ բանի անուն, այնպես որ այն հետագայում կարող եք օգտագործել: ծրագրավորողներ օգտագործում են այս փոփոխականները տվյալներ պահելու, իրենց կոդերն ավելի ընթեռնելի դարձնելու համար և ստիպված չեն անընդհատ հիշել, թե ինչ բաներ են: + +Ասենք, որ ուզում ենք ստեղծել նոր variable (փոփոխական), որը կոչվում է ` name (անուն) `: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Մենք մուտքագրում ենք name-ը (անունը) հավասար է Ola: + +Ինչպես նկատել եք, ձեր ծրագիրը չի վերադարձրել այլ բան, ինչպես նախկինում էր: Այսպիսով, ինչպե՞ս իմանանք, որ variable-ն (փոփոխականն) իրականում գոյություն ունի: Մուտքագրեք ` name (անունը) ` և սեղմեք ` enter (մուտքագրեք) ` + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +Ձեր առաջին variable-ը փոփոխականը! :) Դուք միշտ կարող եք փոխել այն, ինչին վերաբերում է. + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Այն կարող եք օգտագործել նաև function-ներում. + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Հիանալի է, չէ՞: Այժմ variable-ները (փոփոխականները )կարող են լինել ցանկացած ՝ թվեր նույնպես: Փորձեք այս: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Բայց ի՞նչ կլինի, եթե մենք սխալ անուն օգտագործենք: Կարո՞ղ եք գուշակել, թե ինչ կլինի: Արի փորձենք! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Սխալ! Ինչպես տեսնում եք, Python- ն ունի տարբեր տեսակի սխալներ, և այս մեկը կոչվում է ** NameError **: Python- ը ձեզ կտա այս սխալը, եթե փորձեք օգտագործել դեռ չսահմանված variable (փոփոխական): Եթե ​​ավելի ուշ այս սխալի եք բախվել, ստուգեք ձեր կոդը ՝ ստուգելու համար, արդյոք սխալ եք մուտքագրել որևէ անուն: + +Մի փոքր խաղացեք սրա հետ և տեսեք, թե ինչ կարող եք անել: + +## Print function (Տպման գործառույթը) + +Փորձեք այս: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Երբ դուք պարզապես մուտքագրում եք ` name (անուն)`, Python- ի թարգմանիչը պատասխանում է 'name' variable (փոփոխական) string-ի (տող) * ներկայացմամբ* , որը M-a-r-i-a տառերն են, որոնք շրջապատված են մեկ չակերտով, ": Երբ ասում եք ` տպել (անունը) `, Python- ը "print"-կանի («կտպագրի») variable-ի պարունակությունը էկրանին ՝ առանց չակերտների, որը ավելի կոկիկ է: + +Ինչպես կտեսնենք ավելի ուշ, ` print () ` - ը օգտակար է նաև այն ժամանակ, երբ մենք ուզում ենք գործերը ներսից function-ներ տպել, կամ երբ ուզում ենք իրեր տպել բազմաթիվ տողերի վրա: + +## Lists (ցուցակները) + +String-երի և integer-ի (թվերի) հետ մեկտեղ Python- ն ունի ամենատարբեր տեսակի object-ներ (օբյեկտներ): Այժմ մենք պատրաստվում ենք ներկայացնել մեկը, որը կոչվում է ** list (ցուցակ) **: Ծուցակները հենց այն են, ինչ դուք կարծում եք. օբյեկտներ, որոնք այլ օբյեկտների ցուցակներ են: :) + +Գնացեք և ստեղծեք ցուցակ. + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Այո, այս ցուցակը դատարկ է: Շատ օգտակար չէ, չէ՞: Եկեք ստեղծենք վիճակախաղի համարների ցուցակ: Մենք չենք ուզում անընդհատ կրկնվել, այնպես որ այն նաև կդնենք փոփոխականի մեջ. + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Լավ, մենք ցուցակ ունենք: Ի՞նչ կարող ենք անել դրա հետ: Տեսնենք, թե վիճակախաղի քանի համար կա ցուցակում: Դուք գաղափար ունե՞ք, թե որ function (ֆունկցիան) պետք է օգտագործեք դրա համար: Դուք դա արդեն գիտեք: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Այո՛ ` len()` - ը կարող է ձեզ ցուցակում մի շարք օբյեկտներ տալ: Հարմար է, չէ՞: Միգուցե հիմա տեսակավորենք. + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +Սա ոչինչ չի վերադարձնում, պարզապես փոխեց ցուցակի թվերը հայտնվելու հերթականությունը: Եկեք նորից տպենք և տեսնենք, թե ինչ է տեղի ունեցել: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Ինչպես տեսնում եք, ձեր ցուցակի թվերն այժմ տեսակավորված են ամենացածրից բարձրագույն արժեքից: Շնորհավորանքներ + +Միգուցե մենք ուզում ենք հետ շրջե՞լ այդ կարգը: Արի անենք դա! + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Եթե ցանկանում եք ինչ-որ բան ավելացնել ձեր ցուցակին, կարող եք դա անել ՝ մուտքագրելով այս հրահանգը. + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Եթե ցանկանում եք ցույց տալ միայն առաջին համարը, ապա կարող եք դա անել ՝ օգտագործելով ** index (ինդեքսներ) **: Ինդեկսը այն թիվն է, որն ասում է, թե որտեղ է ցուցակում ինչ-որ իր տեղի ունենում: Ծրագրավորողները նախընտրում են սկսել հաշվել 0-ից, այնպես որ ձեր ցուցակում առաջին օբյեկտը 0 ինդեքսում է, հաջորդը 1-ի վրա և այլն: Փորձեք այս: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Ինչպես տեսնում եք, ձեր ցուցակում կարող եք մուտք գործել տարբեր օբյեկտներ ՝ օգտագործելով ցուցակի անվանումը և քառակուսի փակագծերի ներսում գտնվող օբյեկտի ցուցիչը: + +Ձեր ցուցակից ինչ-որ բան ջնջելու համար հարկավոր է օգտագործել ** indexes (ինդեքսները) **, ինչպես սովորեցինք վերևում և ` pop() (փոփ()) ` մեթոդը: Եկեք փորձենք մի օրինակ և ամրապնդենք նախկինում սովորածը. մենք կջնջենք մեր ցուցակի առաջին համարը: + +{% 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] +``` + +Դա հիանալի աշխատեց: + +Լրացուցիչ զվարճանքի համար փորձեք մի քանի այլ ցուցանիշներ. 6, 7, 1000, -1, -6 կամ -1000: Տեսեք, արդյոք կարող եք կանխատեսել արդյունքը ՝ նախքան հրամանը փորձելը: Արդյո՞ք արդյունքները իմաստ ունեն: + +Python- ի փաստաթղթավորման այս գլխում կարող եք գտնել ցուցակի բոլոր մատչելի մեթոդների ցուցակը. https://docs.python.org/3/tutorial/datastructures.html + +## Բառարաններ + +> Ընթերցողների համար տանը. Այս մասն ընդգրկված է [ Python Basics: Dictionaries (Python- ի հիմունքները: բառարաններ) ](https://www.youtube.com/watch?v=ZX1CVvZLE6c) տեսանյութում: + +Բառարանը նման է ցուցակին, բայց արժեքներին մուտք եք գործում թվային ցուցիչի փոխարեն ստեղ փնտրելով: Բանալին կարող է լինել ցանկացած string(տո) կամ համար: Դատարկ բառարան սահմանելու համար շարահյուսությունն է. + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Սա ցույց է տալիս, որ դուք պարզապես ստեղծել եք դատարկ բառարան: Ուռա! + +Այժմ փորձեք գրել հետևյալ հրահանգը (փորձեք փոխարինել նաև ձեր սեփական տեղեկությունները). + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Այս հրամանի միջոցով դուք պարզապես ստեղծեցիք ` participant (մասնակից) ` անունով փոփոխական `երեք առանցքային արժեքի զույգերով. + +- `name(անուն) ` ստեղնը մատնանշում է ` 'Ola' ` արժեքը (` string` օբյեկտ), +- ` country (երկիրը) ` մատնանշում է `'Poland' «Լեհաստան» ` (մեկ այլ ` string `) +- և ` favorite_numbers (սիրված_համարները) ` ցույց են տալիս ` [7, 42, 92] ` (` list (ցուցակ) `, որի մեջ կա երեք համար): + +Անհատական ստեղների բովանդակությունը կարող եք ստուգել այս syntax (շարահյուսությամբ). + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +Տեսեք, դա նման է ցուցակին: Բայց հարկավոր չէ հիշել ինդեքսը, պարզապես անունը: + +Ի՞նչ է պատահում, եթե Python- ից հարցնենք գոյություն չունեցող ստեղնաշարի արժեքը: Դուք կարող եք կռահել? Եկեք փորձենք և տեսնենք: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Տեսեք, մեկ այլ սխալ: Այս մեկը ** KeyError ** է: Python- ը օգտակար է և ասում է, որ `'age' («տարիքը») ` բանալին գոյություն չունի այս բառարանում: + +Ե՞րբ պետք է օգտագործեք բառարան կամ ցուցակ: Լավ, դա խորհելու լավ կետ է: Մտածեք պատասխանի մասին նախքան այն հաջորդ տողում դիտելը: + +- Ուղղակի պե՞տք է իրերի պատվիրված հաջորդականություն: Գնացեք ցուցակի համար: +- Ձեզ հարկավոր է արժեքները կապել բանալիների հետ, որպեսզի հետագայում դրանք արդյունավետ (բանալիներով) որոնեք: Օգտագործեք բառարան + +Բառարանները, ինչպես list-ները (ցուցակ)ները, * mutable (փոփոխական) են *, ինչը նշանակում է, որ դրանք կարող են փոփոխվել ստեղծվելուց հետո: Բառարանում կարող եք ավելացնել բանալի-արժեքի նոր զույգեր այն ստեղծվելուց հետո, ինչպես հետևյալը. + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Ծուցակների նման, բառարաններում օգտագործելով ` len () ` ֆունկցիան, վերադարձնում է բառարանում բանալի-արժեք զույգերի քանակը: Գնացեք և մուտքագրեք այս հրամանը. + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Հուսով եմ ՝ դա մինչ այժմ իմաստ ունի: :) Պատրա՞ստ եք բառարանների հետ զվարճանալու համար: Կարդացեք մի քանի զարմանալի բաների մասին: + +Կարող եք օգտագործել ` pop () ` method-(մեթոդ)ը ՝ բառարանում իրը ջնջելու համար: Ասեք, եթե ցանկանում եք ջնջել `'favorite_numebrs' «սիրված_համարները» ` բանալին համապատասխան գրառումը, մուտքագրեք հետևյալ հրամանը. + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Ինչպես տեսնում եք արդյունքից, 'favorite_numbers'(«սիրված_համարներ») ստեղնին համապատասխանող ստեղն-արժեք զույգը ջնջվել է: + +Բացի դրանից, դուք կարող եք նաև փոխել մի բառ, որը կապված է բառարանում արդեն իսկ ստեղծված բանալին: Մուտքագրեք սա ՝ + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Ինչպես տեսնում եք, `'country' («երկիր») ` ստեղնի արժեքը փոխվել է ` 'Poland' («Լեհաստան») ` - ից ` 'Germany' («Գերմանիա»)`: :) Հուզիչ? Ուռա! Դուք պարզապես սովորեցիք մեկ այլ զարմանալի բան: + +### Ամփոփում + +Հոյակապ. Դուք հիմա շատ բան գիտեք ծրագրավորման մասին: Այս վերջին մասում իմացաք. + +- ** errors (սխալներ) ** - Դուք այժմ գիտեք, թե ինչպես կարդալ և հասկանալ սխալները, որոնք հայտնվում են, եթե Python- ը չի հասկանում ձեր կողմից տրված հրամանը +- ** variables (փոփոխականներ) ** - օբյեկտների անուններ, որոնք թույլ են տալիս ավելի հեշտ ծածկագրել և ձեր կոդն ավելի ընթեռնելի դարձնել +- ** lists (ցուցակներ) ** - որոշակի հերթականությամբ պահված օբյեկտների ցուցակներ +- ** disctionaries (բառարաններ) ** - օբյեկտներ, որոնք պահվում են որպես ստեղն-արժեք զույգեր + +Հիասթափվա՞ծ եք հաջորդ մասի համար: :) + +## Համեմատեք իրերը + +> Ընթերցողների համար տանը. Այս մասն ընդգրկված է [ Python Basics: Comparisons (Համեմատություններ )](https://www.youtube.com/watch?v=7bzxqIKYgf4) տեսանյութում: + +Ծրագրավորման մեծ մասը ներառում է իրերի համեմատություն: Ո՞րն է համեմատության մեջ ամենահեշտ բանը: Թվե՛ր: Տեսնենք, թե ինչպես է դա գործում. + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +Մենք որոշ թվեր տվեցինք Python- ին `համեմատելու համար: Ինչպես տեսնում եք, Python- ը ոչ միայն կարող է համեմատել թվերը, այլ նաև կարող է համեմատել մաթեմատիկական արտահայտությունների արժեքները, ինչպիսիք են ` 2 * 2 ` և ֆունկցիայի արդյունքները, ինչպիսին է ` 2 ` վերադարձվածը ` len ([4, 5]) `: Հաճելի է, հա՞: + +Զարմանո՞ւմ եք, թե ինչու ենք իրար կողքի դնում երկու հավասար ` == ` նշաններ ՝ համեմատելու համար, եթե թվերը հավասար են: Մենք օգտագործում ենք մեկ ` = ` փոփոխականներին արժեքներ նշանակելու համար: Դուք միշտ, ** միշտ ** պետք է դնեք դրանցից երկուսը ՝ ` == ` - եթե ուզում եք ստուգել, արդյոք իրերը հավասար են միմյանց: Կարող ենք նաև փաստել, որ իրերն անհավասար են միմյանց համար: Դրա համար մենք օգտագործում ենք `!= ` խորհրդանիշը, ինչպես ցույց է տրված վերևում բերված օրինակում: + +Python- ին տվեք ևս երկու առաջադրանք. + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +Մենք տեսել ենք `>`և `<` բայց ի՞նչ են նշանակում `>=` և `<=`: Կարդացեք դրանք այսպես. + +- x `>` y նշանակում է ՝ x- ն y- ից մեծ է +- x `<` y նշանակում է `x- ը y- ից փոքր է +- x `<=` y նշանակում է `x- ը y- ից փոքր է +- x `>=` y նշանակում է. x- ը y- ից մեծ է կամ հավասար է դրան + +Հիանալի! ուզում ես մի հատ էլ անել? Փորձեք այս: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Կարող եք Python- ին տալ այնքան թվեր, որպեսզի համեմատես, որքան ուզում ես, և դա քեզ կպատասխանի: Բավականին խելացի, այդպես չէ՞: + +- ** and (և) ** - եթե օգտագործում եք ` and (և) ` օպերատորը, երկու համեմատություններն էլ պետք է լինեն Ճիշտ, որպեսզի ամբողջ հրամանը լինի Ճիշտ: +- ** or (կամ) ** - եթե օգտագործում եք ` or (կամ) ` օպերատոր, ապա համեմատություններից միայն մեկը պետք է լինի Ճիշտ, որպեսզի ամբողջ հրամանը լինի Ճիշտ + +Լսե՞լ եք «խնձորը նարինջի հետ համեմատելը» արտահայտության մասին: Փորձենք Python- ի համարժեքը. + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Այստեղ տեսնում եք, որ ինչպես արտահայտության մեջ, Python- ը ի վիճակի չէ համեմատել համարը (` int `) և տողը (` str `): Փոխարենը, այն ցույց է տալիս ** TypeError ** և մեզ ասում է, որ երկու տիպերը չեն կարող համեմատվել միասին: + +## Boolean + +Ի դեպ, դուք հենց նոր իմացաք Python- ի նոր տեսակի օբյեկտների մասին: Այն կոչվում է ** Boolean (Բուլյան) **: + +Boolean (Բուլյան) ընդամենը երկու օբյեկտ կա. + +- Ճիշտ +- Կեղծ + +Բայց որպեսզի Python- ը դա հասկանա, դուք պետք է այն միշտ գրեք որպես 'True' («Ճիշտ») (առաջին տառերը մեծատառով, մնացած տառերը փոքրատառերով): ** true, TRUE և tRUE չեն գործի. Միայն True- ն է ճիշտ: ** (Նույնը վերաբերում է նաև 'False' - ին): + +Booleans- ը նույնպես կարող է փոփոխական լինել: Տեսեք այստեղ ՝ + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Դուք կարող եք նաև դա անել այս կերպ. + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Պարապեք և զվարճացեք Booleans- ի հետ `փորձելով կատարել հետևյալ հրահանգները. + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Շնորհավորանքներ. Booleans- ը ծրագրավորման ամենաթեժ առանձնահատկություններից մեկն է, և դուք պարզապես սովորեցիք, թե ինչպես օգտագործել դրանք: + +# Պահպանել այն! + +> Ընթերցողների համար տանը. Այս մասը ներառված է [ Python Basics: Saving files and 'if' statement (Python- ի հիմունքներում. Ֆայլեր պահելը և «Եթե» հայտարարությունը) ](https://www.youtube.com/watch?v=dOAg6QVAxyk) տեսանյութում: + +Մինչ այժմ մենք թարգմանչի մեջ գրում էինք մեր պիթոնի բոլոր կոդերը, ինչը մեզ սահմանափակում է միանգամից մեկ տող կոդ մուտքագրելով: Նորմալ ծրագրերը պահվում են ֆայլերում և կատարվում են մեր ծրագրավորման լեզվի ** interpreter (թարգմանիչ) ** կամ ** compiler (կազմողի) ** կողմից: Մինչ այժմ մենք միանգամից տողեր ենք վարում մեր ծրագրերը Python- ի ** interpreter (թարգմանչի) ** մեջ: Հաջորդ մի քանի առաջադրանքների համար մեզ մեկից ավելի տող ծածկագիր է պետք, ուստի մեզ արագ անհրաժեշտ կլինի. + +- Ելք Python- ի թարգմանիչից +- Բացեք մեր ընտրած կոդերի խմբագրիչը +- Մի քանի կոդ պահեք պիթոնի նոր ֆայլում +- Սկսե՛ք (run the code) + +Մեզ համար օգտագործվող Python- ի interpreter (թարգմանիչից) դուրս գալու համար մուտքագրեք ` exit() (ելք())` ֆունկցիան + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Սա ձեզ կրկին կտեղադրի command-ի (հրամանի) տողի մեջ: + +Ավելի վաղ մենք [ code editor (կոդերի խմբագիր) ](../code_editor/README.md) բաժնից ընտրեցինք code editor (կոդի խմբագիր): Մենք հիմա պետք է բացենք editor-ը (խմբագիրը) և մի քանի կոդ գրենք նոր ֆայլի մեջ (կամ եթե օգտագործում եք Chromebook, ստեղծեք նոր ֆայլ ամպային IDE- ում և բացեք այն ֆայլ, որը կլինի ներառված ծածկագրերի խմբագրում). + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Ակնհայտ է, որ դուք այժմ Python- ի բավականին փորձառու մշակող եք, այնպես որ ազատորեն գրեք մի քանի կոդ, որոնք սովորել եք այսօր: + +Այժմ մենք պետք է պահենք ֆայլը և տալ այն նկարագրական անուն: Եկեք զանգահարենք ֆայլը ** python_intro.py ** և պահենք այն ձեր աշխատասեղանին: Մենք կարող ենք ֆայլը անվանել այն, ինչ ուզում ենք, բայց այստեղ կարևոր մասն այն է, որ ֆայլը վերջանա ** .py **: ** .py ** ընդլայնումը մեր օպերացիոն համակարգին ասում է, որ սա ** Python excutable file (գործարկվող ֆայլ) ** է, և Python- ը կարող է այն գործարկել: + +> ** Նշում ** Դուք պետք է նկատեք կոդերի խմբագիրների ամենաթեժ մեկը `գույները: Python կոնսոլում ամեն ինչ նույն գույնն էր. հիմա պետք է տեսնեք, որ ` print (տպել) ` function-ը (գործառույթը) string-ից տարբեր գույն է: Սա կոչվում է "syntax highlighting" («շարահյուսական լուսաբանում»), և դա իսկապես օգտակար հատկություն է կոդավորման ժամանակ: Իրերի գույնը ձեզ հուշումներ կտա, ինչպիսիք են չփակված string-երը կամ կարևոր բառի տառասխալը (ինչպես ֆունկցիաի ` def (անջատումը) `, որը կտեսնենք ստորև): Սա է պատճառը, որ մենք օգտագործում ենք code editor ( կոդերի խմբագիր): :) + +Ֆայլը պահված պահով ՝ այն գործարկելու ժամանակն է: Օգտագործելով command line (հրամանի տողի) բաժնում ձեր սովորած հմտությունները, օգտագործեք տերմինալը ** change directories (գրացուցակները փոխելու ) ** համար: + + + +Mac- ի վրա հրամանը նման կլինի հետևյալ կերպ. + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Linux- ում դա կլինի այսպես. + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Հիշեք, որ "Desktop" («աշխատասեղան») բառը կարող է թարգմանվել ձեր տեղական լեզվով): + + + + + +Windows- ի հրամանի տողում սա կլինի այսպես. + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +Եվ Windows Powershell- ում դա կլինի այսպես. + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Եթե խրվել եք, օգնություն խնդրեք: Դա հենց այն է, ինչի համար այստեղ են մարզիչները: + +Այժմ օգտագործեք Python- ը ֆայլի ծածկագիրը այսպիսի կատարելու համար. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Նշում. Windows- ում 'python3' («python3») - ը չի ճանաչվում որպես հրաման: Փոխարենը, ֆայլը կատարելու համար օգտագործեք 'python' («python»). + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Լավ! Դուք պարզապես գործարկել եք ձեր առաջին Python ծրագիրը, որը պահվել է ֆայլում: Ձեզ հիանալի՞ եք զգում: + +Այժմ կարող եք անցնել ծրագրավորման կարևոր գործիքի. + +## If … elif … else + +Կոդում պարունակվող շատ բաներ պետք է կատարվեն միայն տրված պայմանների բավարարման դեպքում: Այդ պատճառով Python- ն ունի **if statement (եթե հայտարարություններ) ** կոչվող մի բան: + +Փոխարինեք կոդը ձեր ** python_intro.py ** ֆայլում հետևյալով. + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Եթե մենք save/ փրկեինք և run / գործարկեինք սա, կտեսնեինք այսպիսի սխալ. + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python- ն ակնկալում է, որ մենք նրան հետագա հրահանգներ կտանք, որոնք կատարվում են, եթե`3 > 2` պարզվում է, որ ճիշտ է (կամ `True` այդ հարցի համար): Փորձենք Python- ին տպել"It works!" («Այն գործում է»): Փոխեք ձեր կոդը ձեր ** python_intro.py ** ֆայլում հետևյալով ՝ + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +Ուշադրություն դարձրեք, թե ինչպես ենք մենք մուտքագրել ծածկագրի հաջորդ տողը ըստ 4 տարածության: Մենք պետք է դա անենք, որպեսզի Python- ը իմանա, թե ինչ կոդ գործարկի, եթե արդյունքը ճիշտ է: Կարող եք մեկ տարածք անել, բայց Python- ի գրեթե բոլոր ծրագրավորողները կատարում են 4-ը, որպեսզի ամեն ինչ կոկիկ տեսք ունենա: Մեկ ներդիրը նույնպես կհամարվի 4 տարածություն, քանի դեռ ձեր տեքստի խմբագրիչը պատրաստ է դա անել: Երբ դու կատարեցիր քո ընտրությունը, մի փոխիր այն: Եթե դուք արդեն կտրել եք 4 տարածություն, ապա կատարեք ցանկացած ապագա խորացում նաև 4 տարածության հետ, հակառակ դեպքում կարող եք խնդիրներ առաջանալ: + +Պահպանեք այն և նորից run /մեկնարկեք. + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +Նշում. Հիշեք, որ Windows- ում «python3» - ը չի ճանաչվում որպես հրաման: Այսուհետ, ֆայլը կատարելու համար փոխարինեք «python3» - ը «python» - ով: + +### Ի՞նչ կլինի, եթե պայմանը True (ճիշտ) չէ: + +Նախորդ օրինակներում ծածկագիրը կատարվում էր միայն այն ժամանակ, երբ պայմանները True (ճշմարիտ) էին: Բայց Python- ը ունի նաև ` elif ` և ` else ` հայտարարություններ. + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Երբ սա գործարկվի, այն կտպագրվի ՝ + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +Եթե 2-ը 5-ից մեծ թիվ լիներ, ապա երկրորդ հրամանը կկատարվեր: Տեսնենք, թե ինչպես է աշխատում ` elif `: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +և սկսեց. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +Տեսեք, թե ինչ է տեղի ունեցել այնտեղ: `elif` Ձեզ հնարավորություն է տալիս ավելացնել լրացուցիչ պայմաններ, որոնք գործում են նախորդ պայմանների ձախողման դեպքում: + +Նախնական ` if (եթե) ` հայտարարությունից հետո կարող եք ավելացնել այնքան ` elif ` հայտարարություն, որքան ցանկանում եք: Օրինակ: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python- ն անցնում է յուրաքանչյուր թեստի հաջորդականությամբ և տպում. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## Comments + +Մեկնաբանությունները տողեր են, որոնք սկսվում են ` # ` - ով: ` # ` - ից հետո կարող եք գրել այն ամենը, ինչ ուզում եք, և Python- ը անտեսելու է այն: Մեկնաբանությունները կարող են հեշտացնել ձեր ծածկագիրը այլ մարդկանց համար: + +Տեսնենք, թե ինչպես է դա թվում. + +{% 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!") +``` + +Կոդի յուրաքանչյուր տողի համար անհրաժեշտ չէ մեկնաբանություն գրել, բայց դրանք օգտակար են բացատրելու համար, թե ինչու է ձեր կոդն ինչ-որ բան անում, կամ ամփոփում է ներկայացնում, երբ այն ինչ-որ բարդ բան է անում: + +### Ամփոփում + +Վերջին մի քանի վարժություններում, որոնց մասին իմացաք. + +- ** comparing things (իրերի համեմատություն)** - Python- ում դուք կարող եք համեմատել իրերը ՝ օգտագործելով`>`, `>=`, `==`, `<=`, `<` և ` և `, ` or (կամ) ` օպերատորները +- ** Boolean ** - օբյեկտի տեսակ, որը կարող է ունենալ միայն երկու արժեքներից մեկը ՝ ` Ture (Ճիշտ) ` կամ ` False (Սխալ)` +- ** Saving files (Ֆայլեր պահելը)** - ֆայլերում կոդ է պահվում, որպեսզի կարողանաք ավելի մեծ ծրագրեր իրականացնել: +- ** if… elif… other ** - հայտարարություններ, որոնք թույլ են տալիս կատարել կոդ միայն որոշակի պայմանների բավարարման դեպքում: +- ** comments (մեկնաբանություններ) ** - տողեր, որոնք Python- ը չի գործարկի, որոնք թույլ են տալիս փաստաթղթավորել ձեր կոդը + +Ժամանակն է այս գլխի վերջին մասի: + +## Ձեր սեփական functions (ֆունկցիաները): + +> Ընթերցողների համար տանը. Այս մասն ընդգրկված է [ Python Basics: Functions ](https://www.youtube.com/watch?v=5owr-6suOl0) տեսանյութում: + +Հիշո՞ւմ եք ` len() ` - ի նման գֆունկցիաներ, որոնք կարող եք կատարել Python- ում: Դե, լավ նորություն. Դուք կսովորեք, թե ինչպես գրել ձեր սեփական ֆունկցիաները հիմա: + +Ֆունկցիան հրահանգների հաջորդականություն է, որը Python- ը պետք է կատարի: Python- ում յուրաքանչյուր ֆունկցիան սկսվում է ` def ` հիմնաբառից, տրվում է անուն և կարող է ունենալ որոշ պարամետրեր: Եկեք փորձենք: Փոխարինեք կոդը ** python_intro.py ** - ում հետևյալով. + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Լավ, մեր առաջին ֆունկցիան պատրաստ է: + +Կարող եք զարմանալ, թե ինչու ենք ֆունկցիայի անունը գրել ֆայլի ներքևում: Երբ մենք գրում ենք ` def hi (): ` և հետևյալ խորշված տողերը, սա մենք ենք, որ հրահանգներ ենք գրում, թե ինչ պետք է անի ` hi () ` ֆունկցիան: Python- ը կկարդա և կհիշի այս հրահանգները, բայց ֆունկցիան դեռ չի գործարկի: Python- ին ասելու համար, որ մենք ուզում ենք ֆունկցիան գործարկել, մենք պետք է ֆունկցիան կանչենք ` hi () ` - ով: Python- ը կարդում է ֆայլը և կատարում այն վերից վար, այնպես որ մենք պետք է ֆայլում սահմանենք ֆունկցիան նախքան այն կանչելը: + +Եկեք վարենք սա հիմա և տեսնենք, թե ինչ է տեղի ունենում. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +Նշում. Եթե չի հաջողվել, մի խուճապի մատնվեք: Արդյունքը կօգնի ձեզ հասկանալ, թե ինչու. + +- Եթե դուք ստանում եք ` NameError` դա, հավանաբար, նշանակում է, որ դուք սխալ եք մուտքագրել ինչ-որ բան, ուստի պետք է ստուգեք, որ նույն անունն օգտագործել եք ` def hi (): ` ֆունկցիան ստեղծելիս և այն ` hi () ` - ով զանգահարելիս , +- Եթե դուք ստանում եք ` IndentationError `, տողի սկզբում ստուգեք, որ ` print (տպագիր) ` տողերն էլ ունենան նույն սպիտակ տարածությունը. +- Եթե ընդհանրապես ելք չկա, ստուգեք, որ վերջին ` hi() ` * տրոհված չէ * - եթե այդպես է, այդ տողը նույնպես կդառնա գործառույթի մաս: Այն երբեք չի սկսվի: + +Եկեք կառուցենք մեր առաջին գործառույթը պարամետրերով: Մենք կփոխենք նախորդ օրինակը ՝ ֆունկցիան , որն ասում է "hi" («ողջույն») այն աշխատող անձին ՝ անունով. + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Ինչպես տեսնում եք, մենք հիմա մեր ֆունկցիան տվեցինք մի պարամետր, որը կոչեցինք `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!') + +hi() +``` + +Հիշիր `print (տպել) ` գործառույթը կտրված է չորս տարածության մեջ `if (եթե) ` հայտարարության մեջ: Դա պայմանավորված է նրանով, որ ֆունկցիան աշխատում է պայմանը բավարարելիս: Տեսնենք, թե ինչպես է այն աշխատում այժմ. + +{% 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' + + +Սխալ: Բարեբախտաբար, Python- ը մեզ տալիս է օգտակար սխալի հաղորդագրություն: Այն մեզ ասում է, որ ` hi () ` ֆունկցիան (այն, ինչ մենք սահմանեցինք) ունի մեկ պահանջվող փաստարկ (կոչվում է ` name (անուն) `) և որ մենք մոռացանք փոխանցել այն գործառույթը ակտիվացնելիս Եկեք ֆիքսենք այն ֆայլի ներքևում. + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +Եվ նորից գործարկեք այն. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +Իսկ եթե անունը փոխե՞նք: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +Եվ run/գործարկեք այն. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +Հիմա ի՞նչ եք կարծում, ի՞նչ կլինի, եթե այնտեղ մեկ այլ անուն գրեք: (Ոչ Ola/Օլան կամ Sonja/Սոնյան): Փորձեք և տեսեք, արդյոք ճիշտ եք: Այն պետք է տպագրի սա ՝ + +{% filename %}command-line{% endfilename %} + + Ողջույն անանուն: + + +Սա հիանալի է, չէ՞: Այս կերպ ձեզ հարկավոր չէ կրկնել ամեն անգամ, երբ ցանկանում եք փոխել այն անձի անունը, որը պետք է ողջունի ֆունկցիան: Եվ հենց այդ պատճառով մեզ ֆունկցիաներ են պետք. Դուք երբեք չեք ցանկանում կրկնել ձեր ծածկագիրը: + +Եկեք ավելի խելացի բան անենք. Անուններն ավելի շատ են, քան երկուսը, և յուրաքանչյուրի համար պայման գրելը դժվար կլինի, չէ՞: Ձեր ֆայլի պարունակությունը փոխարինեք հետևյալով. + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +կեք հիմա զանգահարենք ծածկագիրը. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +Շնորհավորում եմ Դուք պարզապես իմացաք, թե ինչպես գրել ֆունկցիաներ: :) + +## Loops ( Օղակներ ) + +> Ընթերցողների համար տանը. Այս մասը ընդգրկված է [ Python Basics: For Loop ](https://www.youtube.com/watch?v=aEA6Rc86HF0) տեսանյութում: + +Սա արդեն վերջին մասն է: Դա արագ էր, չէ՞: :) + +Ծրագրավորողների չեն սիրում կրկնել իրենց: Ծրագրավորում բոլոր մասին, automating բաներ, այնպես որ, մենք չենք ուզում, որպեսզի ողջունելու յուրաքանչյուր անձին իրենց անունով ձեռքով, ճիշտ է? Դա այն վայրն է, որտեղ օղակները հարմար են: + +Դեռ հիշու՞մ եք ցուցակները: Եկեք կատարենք աղջիկների ցուցակ. + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Մենք ուզում ենք նրանց բոլորին ողջունել իրենց անունով: Դա անելու համար մենք ունենք ` hi ` function, ուստի եկեք օգտագործենք այն loop-ի (օղակի) մեջ. + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +` for ` հայտարարությունը իրեն նույն կերպ է վերաբերվում ` if ` հայտարարությանը; Այս երկուսից էլ ներքևի ծածկագիրը պետք է փորված լինի չորս տարածության մեջ: + +Ահա ամբողջական կոդը, որը կլինի ֆայլում. + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +Եվ երբ մենք այն run/վարում ենք. + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +Ինչպես տեսնում եք, այն ամենը, ինչ դնում եք ` for (համար) ` հայտարարության ներդիրով, կկրկնվի ` girls (աղջիկների)` ցուցակի յուրաքանչյուր տարր: + +Դուք կարող եք նաեւ օգտագործել `for (համար) ` է թվերի օգտագործելով ` range (հեռահար) ` ֆունկցիան: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Որը կտպագրի. + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +` range (միջակայքը) ` ֆունկցիան է, որը ստեղծում է թվերի ցուցակը մեկը մյուսին հաջորդող (այս թվերը տրամադրվում են ձեր կողմից որպես պարամետրեր): + +Նկատի ունեցեք, որ այս երկու թվերից երկրորդը ներառված չէ Python- ի կողմից թողարկվող ցուցակում (նկատի ունի ` range(1, 6) ` հաշվում է 1-ից 5-ը, բայց չի ներառում 6 թիվը): Դա այն պատճառով է, որ "range"-ը («միջակայքը») կիսաբաց է, և դրանով մենք նկատի ունենք, որ այն ներառում է առաջին արժեքը, բայց ոչ վերջինը: + +## Ամփոփում + +Վերջ ** Դուք լիովին ռոք եք անում: ** Սա բարդ գլուխ էր, այնպես որ դուք պետք է հպարտանաք ինքներդ ձեզնով: Մենք անկասկած հպարտ ենք ձեզանով, որ հասել եք մինչ այժմ: + +Python- ի պաշտոնական և ամբողջական ձեռնարկի համար այցելեք https://docs.python.org/3/tutorial/: Սա ձեզ լեզվի ավելի մանրակրկիտ և ամբողջական ուսումնասիրություն կտա: Ողջույն :) + +Կարող եք համառոտ մեկ այլ բան անել ՝ ձգվել, մի փոքր շրջել, հանգստանալ ձեր աչքերով ՝ նախքան հաջորդ գլուխ անցնելը: :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/hy/python_introduction/images/cupcake.png b/hy/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/hy/python_introduction/images/cupcake.png differ diff --git a/hy/template_extending/README.md b/hy/template_extending/README.md new file mode 100644 index 00000000000..6f6584aeeba --- /dev/null +++ b/hy/template_extending/README.md @@ -0,0 +1,151 @@ +# Ձևանմուշի ընդլայնում/Template extending + +Django- ի մեկ այլ օգտակար բան **template extending/ձևանմուշի ընդլայնումն է ** : Ինչ է դա նշանակում? Ձեր կայքի տարբեր էջերիի համար կարող եք օգտագործել HTML- ի նույն մասերը: + +Ձևանմուշներն/Templates օգնում են, երբ ուզում եք նույն տեղեկատվությունը կամ դասավորությունը օգտագործել մեկից ավելի վայրերում: Յուրաքանչյուր ֆայլում հարկավոր չէ կրկնել: Եվ եթե ուզում եք ինչ-որ բան փոխել, ապա հարկավոր չէ դա անել յուրաքանչյուր ձևանմուշում, այլ միայն մեկում: + +## Ստեղծեք բազային ձևանմուշ/ base template + +Բազային ձևանմուշը/base template ամենահիմնական ձևանմուշն է, որը դուք տարածում եք ձեր կայքի յուրաքանչյուր էջում: + +Եկեք ստեղծենք `base.html` ֆայլ `blog/templates/blog/`-ում: + + blog + └───templates + └───blog + base.html + post_list.html + + +Դրանից հետո բացեք այն կոդերի խմբագրում և պատճենեք ամեն ինչ ՝ `post_list.html` - ից `base.html` ֆայլը, ինչպես սա: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Դրանից հետո `base.html`- ում փոխարինեք ձեր ամբողջ `` -ը (ամեն ինչ `` և ` ` - ի միջև) հետևյալով. + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw%} Ինչպես նկատեցիք, մենք փոխարինեցինք ամեն ինչ ՝ սկսած `{% for post in posts %}`-ը, `{% endfor %}` - ով փոխարինելով ՝ {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Բայց ինչու՞ Դուք հենց նոր `block/բլոկ` ստեղծեցիք: Դուք օգտագործեցիք `{% block %}` ձևանմուշի պիտակը ՝ տարածք ստեղծելու համար, որտեղ կտեղադրվի HTML-ը : Այդ HTML- ը կգա մեկ այլ ձևանմուշից, որը տարածում է այս ձևանմուշը (`base.html`): Մենք ձեզ ցույց կտանք, թե ինչպես դա անել մեկ վայրկյանում: + +Այժմ պահպանեք `base.html`- ը և նորից բացեք ձեր `blog/templates/blog/post_list.html` կոդերի խմբագրում: {% raw %}Դուք պատրաստվում եք հեռացնել ամեն ինչ, որը գտնվում է `{% for post in posts %}`-ից վերևում, և `{% endfor %}`-ից ներքևում: Ավարտելուց հետո ֆայլն այսպիսի տեսք կունենա.{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Մենք ուզում ենք սա օգտագործել որպես մեր ձևանմուշի մի մաս ՝ բովանդակության բոլոր բլոկների համար: Ժամանակն է այս ֆայլին ավելացնել բլոկի պիտակները/block tags: + +{% raw %} Դուք ցանկանում եք, որ ձեր բլոկի թեգը համընկնի `base.html` ֆայլի պիտակի/ tag-ի հետ: Դուք նաև ցանկանում եք ներառել ամբողջ ծածկագիրը, որը պատկանում է բովանդակության բլոկներին/content blocks: Դա անելու համար ամեն ինչ տեղադրեք{% block content %} - ի և {% endblock %} - ի միջև: Սրա նման. {% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Մնում է միայն մեկ բան. Մենք պետք է այս երկու ձևանմուշները միացնենք միմյանց: Սա այն է, ինչ կոչվում է «ձևանմուշի ընդլայնում/extending templates»: Մենք դա կանենք ՝ ֆայլի սկզբին ընդլայնման պիտակ/ extends tag ավելացնելով: Սրա նման: + +{% 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 %} +``` + +Վերջ Պահեք ֆայլը և ստուգեք, արդյոք ձեր կայքը դեռ պատշաճ կերպով աշխատում է: :) + +> Եթե `TemplateDoesNotExist` սխալ եք ստանում, դա նշանակում է, որ `blog/base.html` ֆայլը բացակայում է, և դուք ունեք `runserver` վահանակում: Փորձեք դադարեցնել այն (միաժամանակ սեղմելով Ctrl + C - Control և C ստեղները) և վերագործարկեք սերվերը `python manage.py runserver` հրամանի միջոցով: \ No newline at end of file diff --git a/hy/whats_next/README.md b/hy/whats_next/README.md new file mode 100644 index 00000000000..a17cb8f59c3 --- /dev/null +++ b/hy/whats_next/README.md @@ -0,0 +1,43 @@ +# Ի՞նչ է հաջորդը + +Շնորհավորիր քեզ: ** Դուք հիանալի եք **: Մենք շատ հպարտ ենք <3 + +### Ի՞նչ անել հիմա: + +Ընդմիջեք և հանգստացեք: Դուք պարզապես հոյակապ աշխատանք եք ավարտել: + +Հետևեք Django Girls- ին [Facebook](http://facebook.com/djangogirls)- ում և [Twitter](https://twitter.com/djangogirls) - ում `նորությունների մասին տեղեկացված լինելու համար: + +### Կարո՞ղ եք առաջարկել ուսման լրացուցիչ ռեսուրսներ: + +Այո: Բոլոր տեսակի ծրագրավորման լեզուները սովորելու համար կան * բազմաթիվ * առցանց ռեսուրսներ. Հնարավոր է դժվար թվալ ընտրությունը, թե որ կողմ շարժվել հաջորդ փուլերում, բայց մենք կօգնենք ձեզ դա հասկանալ: Ինչպիսին էլ որ լինեին ձեր հետաքրքրությունները նախքան Django Girls- ին միանալը, և ինչ հետաքրքրություններ էլ որ դուք զարգացրել եք ամբողջ դասընթացի ժամանակ, ահա մի քանի անվճար ռեսուրսներ (կամ ռեսուրսներ ՝ շատ անվճար բաղադրիչներով), որոնք կարող եք օգտագործել ձեր նպատակներին հասնելու համար: + +#### Django + +- Մեր մեկ այլ գիրք ՝ [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Django- ի պաշտոնական ձեռնարկը](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [Սկսենք Django- ի վիդեո դասերից](http://www.gettingstartedwithdjango.com/) +- [ Django- ն բոլորի համար մասնագիտացման համար ](https://www.coursera.org/specializations/django) - որոշ տեսադասախոսություններ կարող են անվճար աուդիտի ենթարկվել, և այս դասընթացները անցնելով կարող եք վաստակել Coursera սերտիֆիկատ: + +#### HTML, CSS և JavaScript + +- [Codecademy- ի վեբ զարգացման դասընթաց](https://www.codecademy.com/learn/paths/web-development) +- [ freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Codecademy-ի Python դասընթացը](https://www.codecademy.com/learn/learn-python) +- [ Google- ի Python դասընթաց](https://developers.google.com/edu/python/) +- [ Learn Python The Hard Way book (Իմացեք Python The Hard Way գիրքը) ](http://learnpythonthehardway.org/book/) - նախնական վարժություններն անվճար են +- [ New Coder tutorials (Կոդերի նոր ձեռնարկներ) ](http://newcoder.io/tutorials/) - սա մի շարք գործնական օրինակներ է, թե ինչպես կարող եք օգտագործել Python- ը +- [ edX ](https://www.edx.org/course?search_query=python) - Դուք կարող եք ստուգել դասընթացների մեծ մասը անվճար, բայց եթե ցանկանում եք բարձրագույն կրթության որակավորման վկայագիր կամ կրեդիտներ, ապա դա կարժենա գումար: +- [ Coursera's Python specialization (Coursera- ի Python մասնագիտացումը) ](https://www.coursera.org/specializations/python) - որոշ վիդեո դասախոսություններ կարող են անվճար աուդիտի ենթարկվել, և դուք կարող եք վաստակել Coursera սերտիֆիկատ ՝ անցնելով այս դասընթացները +- [ Python for Everybody (Python բոլորի համար) ](https://www.py4e.com/) - Coursera Python- ի բոլորի համար անվճար և բաց տարբերակ մասնագիտացման համար + +#### Տվյալների հետ աշխատելը + +- [Codecademy-ի տվյալների գիտության դասընթաց](https://www.codecademy.com/learn/paths/data-science) +- [ edX ](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) - Դուք կարող եք ստուգել դասընթացների մեծ մասը անվճար, բայց եթե ցանկանում եք բարձրագույն կրթության որակավորման վկայագիր կամ կրեդիտներ, ապա դա կարժենա գումար: +- [ Dataquest (Տվյալների հարցում) ](https://www.dataquest.io/) - առաջին 30 «առաքելությունները» անվճար են + +Մենք անհամբեր սպասում ենք ՝ տեսնելու, թե հետո ինչ եք կառուցում: \ No newline at end of file diff --git a/images/application.png b/images/application.png deleted file mode 100644 index 6dcba6202c7..00000000000 Binary files a/images/application.png and /dev/null differ diff --git a/intro_to_command_line/README.md b/intro_to_command_line/README.md deleted file mode 100644 index 078a4c730f1..00000000000 --- a/intro_to_command_line/README.md +++ /dev/null @@ -1,77 +0,0 @@ -# Introduction to Command Line - - -## Introduction -The following steps will show you how to use the black window all hackers use. It might look a bit scary at first, but really, it is just a prompt, waiting for commands from you. - -The window, which is usually called the *command line*, is a text-based application for viewing, handling and manipulating files on your computer (much like e.g. Windows Explorer or Finder on Mac, but without the graphical interface). Other names for the command line are: *cmd*, *prompt*, *console* or *terminal*. - -Each operating system has a slightly different set of commands for the command line. Here is a summary of some useful commands: - -| Command (Windows) | Command (Mac OS / Linux) | Description | Example| -| ------------- |-----------|-------------| -----| -| exit | exit | close the window | **exit** | -| cd | cd | change directory | **cd test** | -| dir | ls |list directories/files | **dir** | -| copy | cp | copy file | **copy c:\test\test.txt c:\windows\test.txt** | -| move | mv | move file | **move c:\test\test.txt c:\windows\test.txt** | -| mkdir | mkdir | create a new directory | **mkdir testdirectory** | -|del | rm | delete a directory/file | **del c:\test\test.txt** - - -These are just a very few of the commands you can run in your command line. To learn more about them, check out the **Further Information** section below. - -[ss64.com](http://ss64.com) contains a complete reference of commands for all operating systems. - -## Useful shortcuts - -* **Up arrow** - rerun previous commands. You can avoid typing the same commands again and again by using the up arrow key to cycle through recently used commands. - - -* **Tab key** - the tab key autocompletes directory and file names. For example, if you type `dir t` and then use `TAB`, the command line will try to match this to existing files in your current directory and autocomplete the name for you. Meaning, if your directory contains a file called `test.txt`, typing `dir t` and `TAB` will autocomplete to `dir test.txt`. - - -## Further information on some of the above commands - -* **exit** - closes your command prompt. This makes sense, right? No need to explain too much... - - -* **cd** - allows you to go to another directory. To use it to go to a directory contained within your current directory, type `cd subdirectory` (where you replace subdirectory with the name of the directory you want to go to) and press enter. - -**For example:** let's say you are in a directory called `c:\test` with three sub-directories: `documents`, `photos` and `music`. - - c - └───test - documents - photos - music - -To go from `test` to the `documents` subdirectory, simply type `cd documents` and press enter. You are now in `c:\test\A`. - -To move back to the `c:\test` directory (or generally, to move 'up' one level), type `cd ..` (`cd` followed by two full stops). - - -* **dir** (Windows) / **ls** (others) - lists files and directories located in your current directory. If you type `dir` or `ls`, respectively, you will see the contents of the directory you're currently in. -Note that for some commands you can use the `*` (asterisk) symbol, which stands for *all* and is often called a *wildcard*. With this in mind, try typing `dir *.txt` for Windows or `ls *.txt` for other OS to only list files that end with `.txt`. - - -* **copy** (Windows) / **cp** (others) - allows you to copy files from one location to another. To use this command, type `copy sourcefile targetfile` (where sourcefile is the name/path of the file you want to copy, and targetfile is the name you want to give to the copy you are creating). - -**For example**: if you have the file `c:\test\test.txt` and you would like to create a copy at `c:\windows\test.txt`, type: - - copy c:\test\test.txt c:\windows\test.txt - - -* **move** (Windows) / **mv** (others) - allows you to move files from one location to another. The syntax you use is the same as for the `copy`/`cp` command. - - -* **mkdir** - allows you to create a new directory. For example, `mkdir temp` creates a new directory called `temp` in the current directory. - - -* **del** (Windows) / **rm** (others) - allows you to delete the specified file. For example, `del test.txt` deletes the `test.txt` file from the current directory. **!!!ATTENTION!!!** Deleting files using `del` or `rm` is irrecoverable, meaning _deleted files will be gone forever_! So, be very careful with this command. - - - - - - diff --git a/it/GLOSSARY.md b/it/GLOSSARY.md new file mode 100644 index 00000000000..5ebfa17670a --- /dev/null +++ b/it/GLOSSARY.md @@ -0,0 +1,3 @@ +# editor di codice + +L'editor di codice è un'applicazione che ti permette di salvare il tuo codice e di potervi tornare in seguito. Puoi capire come procurartene uno nel [capitolo Editor di codice](./code_editor/README.md) \ No newline at end of file diff --git a/it/README.md b/it/README.md new file mode 100644 index 00000000000..bbeb397c717 --- /dev/null +++ b/it/README.md @@ -0,0 +1,51 @@ +# Il tutorial di Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Questo lavoro è concesso sotto la licenza Creative Commons Attribuzione-ShareAlike 4.0 internazionale. Per visualizzare una copia di questa licenza, visita https://creativecommons.org/licenses/by-sa/4.0/ + +## Benvenuta + +Benvenuta al tutorial Django Girls! Siamo felici di vederti qui. :) In questo tutorial, vi porteremo in un viaggio nella sfera delle tecnologie web, offrendovi uno sguardo di tutti i bit e pezzi che hanno bisogno di stare insieme per far funzionare il web così come lo conosciamo. + +Come per tutte le cose sconosciute, questa sarà un'avventura - ma non preoccupatevi, dal momento che hai già avuto il coraggio di arrivare fino a qui, andrà tutto bene :) + +## Introduzione + +Hai mai avuto l'impressione che il mondo stia diventando sempre più tecnologico e di essere per così dire (temporaneamente) rimasta indietro? Ti sei mai chiesta come creare un sito web ma non hai mai avuto abbastanza motivazione per iniziare? Hai mai pensato che il mondo del software è troppo complicato per te persino per provare a fare qualcosa per conto tuo? + +Beh, abbiamo buone notizie per te! La programmazione non è così complicata come sembra e vogliamo dimostrarti quanto può essere divertente. + +Questo tutorial non ti trasformerà magicamente in una programmatrice. Se vuoi diventare brava, ci vorranno mesi o addirittura anni di apprendimento e pratica. Ma ti vogliamo dimostrare che scrivere programmi o creare siti web non è complicato come sembra. Proveremo a spiegarti diversi argomenti come meglio possiamo, in modo che non ti senta più intimidita dalla tecnologia. + +Speriamo di riuscire a farti amare la tecnologia come la amiamo noi! + +## Cosa imparerai durante questo tutorial? + +Una volta terminato il tutorial, avrai creato una piccola applicazione web funzionante: il tuo blog personale. Ti mostreremo come metterlo online, in modo che gli altri possano vedere il tuo lavoro! + +Assomiglierà (più o meno) a questo: + +![Figure 0.1](images/application.png) + +> Se lavori da sola al tutorial e non hai un insegnante che ti possa aiutare nel caso avessi qualche problema, abbiamo una chat per te: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Abbiamo chiesto ai nostri coach e a coloro che hanno già partecipato di visitare la chat di tanto in tanto per aiutare gli altri con il tutorial! Non aver paura di fare domande! + +OK, [cominciamo dall'inizio...](./how_the_internet_works/README.md) + +## Seguire il tutorial da casa + +È fantastico prendere parte a un workshop Django Girls, ma siamo consapevoli che non sempre è possibile essere presenti a un workshop. Questo è il motivo per cui ti invitiamo a provare a seguire il tutorial da casa. Per chi ci segue da casa, stiamo preparando alcuni video che renderanno più facile seguire il tutorial da sole. È un progetto ancora in corso, ma col tempo gli argomenti trattati sul nostro canale YouTube [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) saranno sempre di più. + +In ogni capitolo già trattato, c'è un link che punta al video corrispondente. + +## Informazioni e contribuzioni + +Questo tutorial è mantenuto da [DjangoGirls](https://djangogirls.org/). Se trovi errori o se vuoi aggiornare questo tutorial, [segui le linee guida per i collaboratori](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Vuoi aiutarci a tradurre il tutorial in altre lingue? + +Attualmente le traduzioni vengono svolte sulla piattaforma crowdin.com all'indirizzo: + +https://crowdin.com/project/django-girls-tutorial + +Se la tua lingua non è elencata su [crowdin](https://crowdin.com/), puoi [aprire una nuova istanza](https://github.com/DjangoGirls/tutorial/issues/new) segnalando la tua lingua, in modo che possiamo aggiungerla. \ No newline at end of file diff --git a/it/SUMMARY.md b/it/SUMMARY.md new file mode 100644 index 00000000000..3dc4d708974 --- /dev/null +++ b/it/SUMMARY.md @@ -0,0 +1,35 @@ +# Indice + +* [Introduzione](README.md) +* [Installazione](installation/README.md) + * [Riga di Comando](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [L'editor di codice](installation/README.md#code-editor) + * [Ambiente virtuale](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) +* [Installazione (chromebook)](chromebook_setup/README.md) +* [Come funziona Internet](how_the_internet_works/README.md) +* [Introduzione alla command line](intro_to_command_line/README.md) +* [Istallazione di Python](python_installation/README.md) +* [L'editor di codice](code_editor/README.md) +* [Introduzione a Python](python_introduction/README.md) +* [Che cos'è Django?](django/README.md) +* [Installazione di Django](django_installation/README.md) +* [Il tuo primo progetto Django!](django_start_project/README.md) +* [I modelli di Django](django_models/README.md) +* [L'admin di Django](django_admin/README.md) +* [Deploy!](deploy/README.md) +* [Django URL](django_urls/README.md) +* [Le views di Django – è l'ora di creare!](django_views/README.md) +* [Introduzione all'HTML](html/README.md) +* [ORM di Django (Querysets)](django_orm/README.md) +* [I dati dinamici nei template](dynamic_data_in_templates/README.md) +* [I template di Django](django_templates/README.md) +* [CSS - rendilo più carino](css/README.md) +* [Estendere il template](template_extending/README.md) +* [Estendi la tua applicazione](extend_your_application/README.md) +* [I Form Django](django_forms/README.md) +* [E dopo?](whats_next/README.md) \ No newline at end of file diff --git a/it/chromebook_setup/README.md b/it/chromebook_setup/README.md new file mode 100644 index 00000000000..4e4076369f1 --- /dev/null +++ b/it/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Configurazione del Chromebook + +> **Nota** Se hai già completato il processo di installazione, non è necessario rifare tutto e puoi passare direttamente a [Introduzione a Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/it/chromebook_setup/instructions.md b/it/chromebook_setup/instructions.md new file mode 100644 index 00000000000..0ae49f31e45 --- /dev/null +++ b/it/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +Puoi [saltare questa sezione](http://tutorial.djangogirls.org/en/installation/#install-python) se non utilizzi un Chromebook. L'installazione su Chromebook segue una procedura un po' diversa. Il resto delle istruzioni di installazione può essere ignorato. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Cloud IDE è uno strumento che mette a disposizione un editor di codice e l'accesso ad un computer virtuale su cui installare, scrivere ed eseguire il software. In questo tutorial, Cloud IDE avrà la funzione di un *computer locale*. Digiterai i comandi sull'interfaccia di un terminale, come le tue compagne di corso che utilizzano macOS, Ubuntu o Windows, ma il tuo terminale sarà connesso a un computer remoto che Cloud IDE ha creato per te. Puoi trovare di seguito le istruzioni per i Cloud IDE (PaizaCloud IDE, AWS Cloud9, Glitch.com). Puoi selezionare uno dei Cloud IDE e seguire le relative istruzioni. + +#### PaizaCloud Cloud IDE + +1. Vai su [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Crea un account +3. Clicca su *Nuovo server* oppure <0>New Server e scegli l'app Django +4. Seleziona il pulsante Terminal (sul lato sinistro della pagina) + +Ora dovresti vedere un'interfaccia con una barra laterale e dei pulsanti sulla sinistra. Fai click sul pulante "Terminal" per aprire la finestra del terminale con il prompt, così: + +{% filename %}Terminal{% endfilename %} + + $ + + +Il terminale su PaizaCloud Cloud IDE è pronto a ricevere istruzioni. Puoi ridimensionare la finestra o renderla un po' più più grande. + +#### AWS Cloud9 + +Attualmente Cloud 9 richiede la registrazione con AWS e l'inserimento delle informazioni sulla carta di credito. + +1. Installa Cloud9 dal [Chrome web store](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Vai su [c9.io](https://c9.io) e clicca *Inizia con AWS Cloud9* +3. Registra un account AWS (richiede informazioni sulla carta di credito, ma puoi usarlo gratuitamente) +4. Nella Dashboard di AWS, inserisci *Cloud9* nella barra di ricerca e facci click +5. Nel cruscotto Cloud 9, clicca su *Crea ambiente* +6. Chiamalo *django-girls* +7. Durante la configurazione delle impostazioni, selezionare *Creare una nuova istanza per l'ambiente (EC2)* per "Tipo di Ambiente" e *t2.micro* "Tipo di Istanza" (dovrebbe essere "Free-tier."). L'impostazione di default per il risparmio dei costi va bene e puoi mantenere le altre impostazioni predefinite. +8. Clicca *Passo Successivo* +9. Fai click su *Create Environment* + +Ora dovresti vedere un'interfaccia con una barra laterale, una grossa finestra principale con del testo, ed una piccola finestra in basso che sembra questa: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +Questa finestra in basso è il tuo terminale. Puoi usare il terminale per inviare istruzioni al computer remoto Cloud9. Puoi cambiare le dimensioni della finestra e renderla più grande. + +#### Glitch.com + +1. Vai su [Glitch.com](https://glitch.com/) +2. Crea un account (https://glitch.com/signup) o, se lo possiedi, usa il tuo account GitHub (di seguito puoi trovare le istruzioni su GitHub). +3. Seleziona *New Project* e scegli *hello-webpage* +4. Seleziona l'elenco a discesa "Strumenti" (Tools, nella sezione della pagina in basso a sinistra), poi premi sul pulsante Terminale (Terminal) per aprire una scheda terminale con un prompt come il seguente: + +{% filename %}Terminal{% endfilename %} + + app@name-of-your-glitch-project:~ + + +Quando utilizzi Glitch.com come il tuo Cloud IDE, non è necessario creare un ambiente virtuale. Puoi invece creare manualmente i seguenti file: + +{% 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 +``` + +Una volta creati i file, vai al Terminale ed esegui i comandi seguenti per creare il tuo primo progetto Django: + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +Per poter vedere dettagliatamente i messaggi di errore, puoi attivare i log di debug di Django per la tua applicazione Glitch. Aggiungi semplicemente questa dicitura alla fine del file `mysite/settings.py`. + +{% 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, + }, + }, +} +``` + +Questo procedimento creerà un file `debug.log` con i dettagli sulle operazioni effettuate da Django e su eventuali messaggi di errore che potrebbero apparire, rendendone più semplice la correzione se il tuo sito web non funzionasse. + +Il riavvio iniziale del progetto Glitch potrebbe fallire. (Se selezioni il pulsante a discesa in alto `Show` e poi `In a New Window`, riceverai il messaggio di errore `DisallowedHost`) Non devi preoccupartene in questa fase, il tutorial lo correggerà non appena aggiorni le impostazioni del tuo progetto di Django nel file `mysite/settings.py`. + +### Ambiente virtuale + +Un ambiente virtuale (virtual environment, spesso abbreviato in virtualenv) è una specie di scatola privata in cui si può inserire un codice informatico per un progetto su cui si sta lavorando. Si usa per mantenere separati i numerosi pezzi di codice dei vari progetti, in modo da non creare confusione tra i progetti stessi. + +Esegui: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(N.B. nell'ultima riga abbiamo usato una tilde seguita dal segno uguale: `~=`). + +### GitHub + +Crea un account [GitHub](https://github.com). + +### PythonAnywhere + +Il tutorial di Django Girls include una sezione su ciò che viene definito Deployment, ovvero il processo durante il quale si estrae il codice che alimenta la tua nuova applicazione web e lo si sposta su un computer accessibile al pubblico (chiamato server), in modo che altre persone possano vedere il tuo lavoro. + +Questa parte del tutorial è un po' insolita se lo si segue su un Chromebook, siccome stiamo usando un computer che è già su internet (al contrario di un laptop, per esempio). È comunque utile, se consideriamo il nostro Cloud 9 come uno spazio per il nostro lavoro "in corso" e Python Anywhere come uno spazio per mostrare il nostro materiale quando è più completo. + +Quindi, registra il tuo nuovo account Python Anywhere su [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/it/code_editor/README.md b/it/code_editor/README.md new file mode 100644 index 00000000000..13c4af12926 --- /dev/null +++ b/it/code_editor/README.md @@ -0,0 +1,11 @@ +# L'editor di codice + +> Per i lettori a casa: questo capitolo è trattato nel video [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +Stai per scrivere la tua prima riga di codice, per cui è il momento di scaricare il tuo editor! + +> **Nota** Se utilizzi un Chromebook, salta questo capitolo e segui le istruzioni in [Configurazione di Chromebook](../chromebook_setup/README.md). L'IDE cloud che sceglierai (PaizaCloud Cloud IDE o AWS Cloud9) include un editor di codice, e quando aprirai un file nel tuo IDE dal menu File, utilizzerai automaticamente l'editor. +> +> **Nota** Potresti aver già effettuato questo passaggio nel capitolo sull'installazione. Se così fosse, puoi passare al prossimo capitolo! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/it/code_editor/instructions.md b/it/code_editor/instructions.md new file mode 100644 index 00000000000..60c63fd4415 --- /dev/null +++ b/it/code_editor/instructions.md @@ -0,0 +1,37 @@ +Ci sono moltissimi editor diversi e la scelta dipende in gran parte dalle proprie preferenze. La maggior parte dei programmatori Python usa IDE (in inglese Integrated Development Environments, ambienti di sviluppo integrati) complessi ma estremamente potenti, come PyCharm. Tuttavia questo non è l'editor più appropriato per una principiante; quelli che ti suggeriremo noi sono ugualmente potenti, ma molto più semplici. + +Qui di seguito te ne consigliamo alcuni, ma puoi chiedere al tuo coach quali editor preferisce - in modo che possa aiutarti più facilmente. + +## Codice Studio Visual + +Visual Studio Code è un editor di codice sorgente sviluppato da Microsoft per Windows, Linux e macOS. Include il supporto per il debug, il controllo Git incorporato, l'evidenziazione della sintassi, il completamento intelligente del codice, gli snippet e il refactoring del codice. + +[Scaricalo qui](https://code.visualstudio.com/) + +## Gedit + +Gedit è un editor open-source e gratuito, disponibile per tutti i sistemi operativi. + +[Scaricalo qui](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text è tra gli editor più utilizzati. Ha un periodo di prova gratuito ed è disponibile per tutti i sistemi operativi. + +[Scaricalo qui](https://www.sublimetext.com/) + +## Atom + +Atom è un altro editor molto diffuso. È gratuito, open-source e disponibile per Windows, macOS e Linux. Atom è sviluppato da [GitHub](https://github.com/). + +[Scaricalo qui](https://atom.io/) + +## Perché installare un editor di codice? + +Forse ti stai chiedendo per quale motivo installiamo questo editor di codice, invece di usare un'applicazione come Word o Blocco Note. + +La prima ragione è che il codice deve essere **testo semplice**, e programmi come Word e Textedit non producono questo tipo di testo, ma testo formattato (con font e formattazione), codificato in formati come l'[RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +La seconda ragione è che gli editor sono specializzati nel modificare codice, e quindi mettono a disposizione utili funzionalità come l'evidenziazione della sintassi con colori legati al suo significato, o la chiusura automatica di parentesi e virgolette. + +Vedremo tutto ciò più avanti. Presto, il tuo fidato editor di testo diventerà uno dei tuoi strumenti preferiti. :) diff --git a/it/css/README.md b/it/css/README.md new file mode 100644 index 00000000000..e5be23e1df1 --- /dev/null +++ b/it/css/README.md @@ -0,0 +1,330 @@ +# CSS - rendilo carino! + +Il nostro blog sembra ancora bruttino, vero? È arrivato il momento di abbellirlo! Per fare ciò useremo i CSS. + +## Che cosa sono i CSS? + +I CSS (Cascading Style Sheet, fogli di stile a cascata) servono a descrivere l'aspetto e la formattazione di un sito web scritto in un linguaggio di Markup (come l'HTML). Vedilo come il make-up per la nostra pagina web. ;) + +Ma non vogliamo iniziare di nuovo dalle basi, vero? Ancora una volta, useremo qualcosa che i programmatori hanno rilasciato su internet gratuitamente. Reinventare la ruota non è divertente, come saprai. + +## Usiamo Bootstrap! + +Bootstrap è uno dei framework HTML e CSS più poplari per sviluppare bellissimi siti web: https:/getbootstrap.com/ + +È stato scritto dai programmatori che lavoravano per Twitter. Adesso è sviluppato da volontari provenienti da tutto il mondo! + +## Installare Bootstrap + +Per installare Bootstrap, apri il tuo file `.html` nell'editor di codice e aggiungi la riga seguente alla sezione ``: + +{% filename %}blog/templates/blog/post_list{% endfilename %} + +```html + +``` + +Queste righe non aggiungono nessun file al tuo progetto. Puntano solo ad altri file già esistenti siu Internet. Quindi avanti, apri il tuo sito e ricarica la pagina. Ecco qua! + +![Figura 14.1](images/bootstrap1.png) + +Sembra già più carino! + +## File statici in Django + +Infine, daremo uno sguardo più approfondito a quelli che abbiamo chiamato **file statici**. I file statici sono tutti i tuoi CSS e le tue immagini. Il loro contenuto non dipende dal contesto richiesto e sarà lo stesso per tutti gli utenti. + +### Dove mettere i file statici in Django + +Django sa già dove trovare file statici per l'app integrata "admin". Ora dobbiamo aggiungere alcuni file statici per la nostra app, `blog`. + +Lo facciamo creando una cartella denominata `static` all'interno dela nostra app blog: + + djangogirls + ├── blog + |     ├── migrations + |     ├── static + |     └── templates + └── mysite + + +Django trova automaticamente ogni cartella chiamata ''static'' all'interno di qualsiasi cartella della tua app. Quindi potrà usarne il contenuto come file statici. + +## Il tuo primo file CSS! + +Creiamo un file CSS, per aggiungere uno stile alla tua pagina web. Crea una nuova cartella dal nome `css` all'interno della tua cartella `static`. Poi, crea un nuovo file all'interno della tua cartella `css` e chiamalo `blog.css`. Fatto? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +È il giunto il momento di scrivere un po' di CSS! Apri il file `static/css/blog.css` nel tuo editor di codice. + +Non approfondiremo l'apprendimento dei CSS in questa sede. Se vuoi saperne di più, in fondo a questa pagina ti consigliamo un corso gratuito. + +Facciamo comunque un esempio. Vogliamo cambiare il colore del nostro header? Per decifrare i colori, i computer usano dei codici speciali. Questi codici iniziano con `#` seguiti da 6 lettere (A–F) e numeri (0–9). Per esempio, questo è il codice per il blu `#0000FF`. Puoi trovare i codici per molti colori qui: http://www.colorpicker.com/. Puoi anche usare [colori predefiniti](http://www.w3schools.com/colors/colors_names.asp) come ad esempio `red` e `green`. + +Aggiungi il seguente codice nel tuo file `static/css/blog.css`: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` è un esempio di selettore CSS. Significa che stiamo applicando i nostri fogli di stile ad ogni elemento `a` all'interno di un elemento `h1`; il selettore `h2 a` si comporta allo stesso modo con gli elementi `h2`. Quindi quando si ha qualcosa come `

link

`, lo stile `h1 a` verrà applicato. In questo caso stiamo impostando il colore `#C25100`, che corrisponde all'arancione scuro. Puoi inserire il colore che preferisci, ma assicurati che ci sia un buon contrasto con lo sfondo bianco! + +In un file CSS definiamo lo stile degli elementi presenti nel file HTML. Il primo modo per identificare gli elementi è attraverso il loro nome. Potresti ricordarli come tags dalla sezione sull'HTML. Cose come `a`, `h1` e `body` sono tutti esempi di nomi di elementi. Possiamo identificare anche con l'attributo `class` o l'attributo `id`. Class e id sono i nomi che assegni agli elementi. Le classi definiscono gruppi di elementi mentre gli id indicano uno specifico elemento. Per esempio, potresti identificare il seguente elemento utilizzando il nome dell'elemento `a`, la classe `external_link`, o l'ID`link_to_wiki_page`: + +```html + +``` + +Puoi leggere di più su i [Selettori CSS su w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Inoltre dobbiamo dire al nostro template HTML che abbiamo aggiunto del codice CSS. Apri il file `blog/templates/blog/post_list.html` nell'editor di codice e aggiungi questa riga all'inizio: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Qui stiamo semplicemente caricando file statici. :) Tra i tag `` e ``, dopo il link ai file CSS di Bootstrap, aggiungi la riga seguente: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Il browser legge i file nell'ordine in cui sono messi, quindi dobbiamo essere sicuri che sia nel posto giusto. Altrimenti il codice del nostro file potrebbe essere sovrascritto dal codice dei file di Bootstrap. Stiamo dicendo al nostro template dove trovare i nostri file CSS. + +Il tuo file dovrebbe avere questo aspetto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +OK, salviamo il file e ricarichiamo la pagina web! + +![Figura 14.2](images/color2.png) + +Ben fatto! Adesso potremmo dare un po' più d'aria alla nostra pagina web e aumentare il margine nella parte sinistra. Proviamo! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Aggiungi queste righe al tuo CSS, salva il file e guarda il risultato! + +![Figura 14.3](images/margin2.png) + +Potremmo anche personalizzare lo stile calligrafico nel nostro header. Incolla quanto segue all'interno del tag `` che si trova nel file `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Come prima, controlla l'ordine e la posizione prima del link a `blog/static/css/blog.css`. Questa riga di codice importerà un carattere chiamato *Lobster* da Google Fonts (https://www.google.com/fonts). + +Trova il blocco `h1 a` (il codice tra parentesi `{` e `}`) nel file CSS `blog/static/css/blog.css`. Ora aggiungi la riga `font-family: 'Lobster';` tra le parentesi e ricarica la pagina: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Figura 14.3](images/font.png) + +Grandioso! + +Come già detto in precedenza, CSS possiede il concetto di classi. Questo ti permette identificare una parte del codice HTML e applicare lo stile solo su quella parte, senza modificare le altre. Questo è utilissimo! Potresti avere due div che hanno qualcosa di differente (come il tuo header e il tuo post). Una classe ti aiuta a renderli differenti. + +Vai avanti e chiama alcune parti del codice HTML. Sostituisci l'`intestazione` che contiene l'intestazione con quanto segue: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+

Django Girls Blog

+
+
+``` + +E ora aggiungi una classe `post` al tuo `articolo` che contiene un post del blog. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Ora aggiungiamo dei blocchi di codice ai nostri nuovi selettori. I selettori che iniziano con `.` indicano una classe. Sul Web ci sono diversi ottimi tutorial e spiegazioni sui CSS che possono aiutarti a capire il codice che stiamo per scrivere. Per ora, copia e incolla quanto segue nel tuo file `blog/static/css/blog.css`: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-default, +.btn-default:visited { + color: #C25100; + background: none; + border-color: #C25100; +} + +.btn-default:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Ora aggiungi all'esterno del codice HTML riguardante i posts all'interno del blog alcuni elementi con definizione di classi. Sostituisci questo: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +nel file `blog/templates/blog/post_list.html` con quanto segue: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Salva entrambi i file e ricarica la pagina web. + +![Figura 14.4](images/final.png) + +Woohoo! È fantastico, vero? Guarda il codice che abbiamo appena incollato, per trovare i punti dove abbiamo aggiunto le classi nell'HTML usate nel CSS. Dove dovremmo modificare se volessimo la data in azzurro? + +Non aver paura di fare qualche esperimento con i CSS, prova a fare qualche modifica. Giocare con i CSS può aiutarti a capire cosa fanno le varie cose. Se fai qualche errore, non preoccuparti - puoi sempre tornare indietro! + +Consigliamo vivamente di seguire i corsi online gratuiti di "Basic HTML & HTML 5" e "Basic CSS" su [freeCodeCamp](https://learn.freecodecamp.org/). Possono aiutarti ad imparare tutto sul creare siti web più carini in HTML e CSS. + +Pronta per il prossimo capitolo?! :) \ No newline at end of file diff --git a/it/css/images/bootstrap1.png b/it/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/it/css/images/bootstrap1.png differ diff --git a/it/css/images/color2.png b/it/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/it/css/images/color2.png differ diff --git a/it/css/images/final.png b/it/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/it/css/images/final.png differ diff --git a/it/css/images/font.png b/it/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/it/css/images/font.png differ diff --git a/it/css/images/margin2.png b/it/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/it/css/images/margin2.png differ diff --git a/it/deploy/README.md b/it/deploy/README.md new file mode 100644 index 00000000000..3a2a7374401 --- /dev/null +++ b/it/deploy/README.md @@ -0,0 +1,246 @@ +# Pubblica Online! + +> **Nota** Il seguente capitolo può essere un po' difficile da fare fino in fondo. Non mollare e cerca di portarlo a termine; la pubblicazione online è una parte importante nel processo di costruzione di un sito web. Questo capitolo è collocato a metà del tutorial in modo che il tuo coach ti possa aiutare con il processo leggermente più complicato di messa online del sito. Questo significa che puoi ancora finire il tutorial per conto tuo se sei a corto di tempo. + +Fino ad ora il tuo sito web è stato presente solo sul tuo computer. Adesso imparerai come implementarlo! L'implementazione è il processo di pubblicazione online del tuo progetto in modo tale che sia visibile anche da altre persone. :) + +Come abbiamo imparato, un sito Web deve trovarsi su un server. Ci sono molti server provider disponibili su Internet, noi useremo [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere è gratuito per le piccole applicazioni che non hanno troppi visitatori, sarà quindi perfetto per te al momento. + +L'altro servizio esterno che useremo è [GitHub](https://www.github.com), che è un servizio di hosting di codice. Ne esistono altri, ma oggigiorno quasi tutti i programmatori hanno un account GitHub e ora lo avrai anche tu! + +Questi tre servizi saranno importantissimi per te. Userai il tuo computer locale per sviluppare e fare test. Quando sarai soddisfatto delle modifiche, caricherai una copia del tuo programma su GitHub. Il tuo sito Web sarà su PythonAnywhere e lo aggiornerai con una nuova copia del codice da GitHub. + +# Git + +> **Nota** Se hai già terminato il processo di installazione, non é necessario eseguire nuovamente questa operazione. Puoi passare alla sezione successiva e iniziare a creare il tuo repository Git. + +{% include "/deploy/install_git.md" %} + +## Inizializzare un repository Git + +Git tiene traccia delle modifiche a un particolare insieme di file in quello che è chiamato repository di codice (o "repo" in breve). Iniziamone uno per il nostro progetto. Apri la console ed esegui questi comandi nella directory `djangogirls`: + +> **Nota** Controlla la tua cartella di lavoro corrente con a`pwd`(macOS/Linux) o`cd` (Windows) comando prima di inizziare il repository. Dovresti essere nella cartella `djangogirls`. + +{% filename %}comando-linea{% 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 + + +L'inizializzazione del repository git é qualcosa che dobbiamo fare una sola volta per progetto (e non dovrai piú reinserire il nome utente e l'indirizzo email). + +Git memorizzerà le modifiche a tutti i file e le cartelle in questa directory, ma ci sono alcuni file che vogliamo ignorare. Si fa creando un file chiamato `.gitignore` nella directory di base. Apri il tuo editor e crea un nuovo file con questo contenuto: + +{% filename %}.gitignore{% endfilename %} + + # 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 + + +E salvalo come `.gitignore` all'interno della cartella "djangogirls". + +> **Nota** Il punto all'inizio del nome del file è importante! Se hai difficoltá a crearlo (per esempio, Mac non piacere creare file che iniziano con un punto attraverso il Finder), usa la funzione "salva con nome" nell'editor, é a prova di proiettile. E assicurati di non aggiungere `.txt`, `.py`, o qualsiasi altra estensione al nome del file -- sarà riconosciuto da Git solo se il nome è `.gitignore`. Linux e MacOS trattano i file con un nome che inizia con `.` (come `.gitignore`) come nascosti ed il comando `Is` normale non mostrerà questi file. Invece usa `Is - a` per vedere il file `.gitignore`. +> +> **Nota** Uno dei file che hai specificato nel tuo file `.ginignore` è `db.sqlite3`. Questo file è il tuo database locale, in cui sono archiviati i post e gli utenti. Seguiremo le pratiche standard di programmazione web, ovvero useremo due diversi database: uno per il sito con cui effettuarai i test locali, e uno per il sito online su PythonAnywhere. Come database PythonAnywhere potresti usare SQLite, ma ne userai più spesso uno che si chiama MySQL, che può gestire molti più vsitatori di SQLite. In entrambi i casi, ignorando il database SQLite per la copia di GitHub, vuol dire che tutti i post che hai creato finora saranno solo disponibili localmente, ma li aggiungeremo nuovamente in produzione. Dovresti pensare al database locale come un parco giochi dove si possono provare cose diverse e senza avere paura di eliminare i tuoi messaggi reali dal tuo blog. + +È una buona idea usare il comando `git status` prima di `git add` oppure ogni volta che non sei sicuro di cosa sia cambiato. Questo aiuterà ad evitare eventuali brutte sorprese, come file sbagliati che vengono aggiunti o a cui viene fatto il commit. Il comando `git status` restituisce informazioni riguardanti qualsiasi file non tracciato/modificato/in staging, lo stato del branch e molto altro. L'output dovrebbe essere simile a quanto segue: + +{% filename %}command-line{% endfilename %} + + $ git status + On branch master + + Initial commit + + 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) + + +E finalmente salviamo le nostre modifiche. vai alla tua console ed esegui questi comandi: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Pubblica il tuo codice su GitHub + +Vai su [GitHub.com](https://www.github.com) e crea un nuovo account gratuito. (Se lo hai già fatto nella preparazione al workshop, benissimo!) Assicurati di ricordare la tua password (aggiungila al tuo password manager, se ne usi uno). + +Quindi, crea un nuovo repository con il il nome "my-first-blog". Lascia deselezionata la casella di controllo "initialise with a README", lascia vuota l'opzione .gitignore (lo abbiamo già fatto manualmente) e lascia License su None. + +![](images/new_github_repo.png) + +> **Nota** Il nome `my-first-blog` è importante -- potresti sceglierne un altro, ma il nome verrà ripetuto un sacco di volte nelle istruzioni qui sotto, e dovresti sostituirlo ogni volta. Probabilmente è più facile mantenere il nome `my-first-blog`. + +Sulla prossima schermata, ti sarà mostrato il tuo clone URL ricopiato, che userai in alcuni dei comandi che seguono: + +![](images/github_get_repo_url_screenshot.png) + +Ora dobbiamo collegare il repository Git sul tuo computer a quello su GitHub. + +Digita quanto segue sulla tua console (sostituisci `` con il nome utente che hai inserito quando hai creato l'account GitHub, ma senza le parentesi angolari -- l'URL dovrebbe coincidere con L'URL clone che hai appena visto): + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Quando si spinge su GitHub, ti verrà chiesto il tuo nome utente e password GitHub (o nella finestra di comando o in una finestra pop-up), e dopo aver inserito le credenziali si dovrebbe vedere qualcosa di simile a questo: + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Adesso Il tuo codice è su GitHub. Guarda! Lo troverai in buona compagnia - [Django](https://github.com/django/django), il [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial) e molti grandi progetti di software open source caricano il proprio codice su GitHub. :) + +# Configurare il nostro blog su PythonAnywhere + +## Crea un account PythonAnywhere + +> **Nota** Potresti aver già creato un account PythonAnywhere prima, durante la fase di installazione - in questo caso, non c'è bisogno di crearlo di nuovo. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Configurare il nostro sito su PythonAnywhere + +Torna alla [PythonAnywhere Dashboard](https://www.pythonanywhere.com/) principale cliccando sul logo e scegli l'opzione per avviare una console "Bash” - questa è la versione PythonAnywhere di una riga di comando, proprio come quella sul tuo computer. + +![La sezione 'Nuova Console' sull'interfaccia web PythonAnywhere, con un pulsante per 'bash'](images/pythonanywhere_bash_console.png) + +> **Nota** PythonAnywhere si basa su Linux, quindi se sei su Windows, la console apparirà un po' diversa da quella del tuo computer. + +Per implementare un'applicazione web su PythonAnywhere devi prendere il codice da GitHub, e configurare PythonAnywhere in modo che lo riconosca come un'applicazione web. Puoi farlo manualmente, ma PythonAnywhere ti fornisce uno strumento che farà tutto il lavoro al posto tuo. Prima di tutto installiamolo: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip install --user pythonanywhere + + +Ora dovresti leggere: `Collecting pythonanywhere` e un'eventuale riga finale che dice `Successfully installed (...) pythonanywhere- (...)`. + +Ora eseguiamo l'helper per configurare automaticamente la nostra applicazione da GitHub. Digita quanto segue nella console su PythonAnywhere (non dimenticare di usare il tuo nome utente di GitHub al posto di ``) in modo che l'URL corrisponda all'URL clone di GitHub: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.10 https://github.com//my-first-blog.git + + +Guardando l'esecuzione, potrai vedere cosa sta facendo: + +- Scaricare il tuo codice da GitHub +- Creare un virtualenv su PythonAnywhere, come quello sul tuo computer +- Aggiornare il file di impostazioni con alcune impostazioni di implementazione +- Configurare un database su PythonAnywhere utilizzando il comando `manage.py migrate` +- Configurare i tuoi file statici (di cui parlaremo più avanti) +- E configurare PythonAnywhere per servire la tua app web tramite la sua API + +Su PythonAnywhere tutti questi passaggi sono automatizzati, ma sono gli stessi passaggi che dovresti effettuare con qualsiasi altro server provider. + +La cosa principale da notare ora è che il tuo database su PythonAnywhere è completamente separato dal database sul tuo computer, e quindi può avere post e account di amministrazione differenti. Di conseguenza, come abbiamo fatto sul computer, dobbiamo inizializzare l'account di amministrazione con `createsuperuser`. PythonAnywhere ha attivato automaticamente il tuo virtualenv, quindi ora devi solo eseguire il codice seguente: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Inserisci i dettagli per l'utente di amministrazione. È meglio utilizzare gli stessi che stai usando sul computer per evitare confusione, a meno che non desideri rendere la password su PythonAnywhere più sicura. + +Ora, se vuoi, puoi anche dare un'occhiata al tuo codice su PythonAnywhere utilizzando `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 + + +Puoi anche andare alla pagina "File" e navigare in uso del browser di file integrato di PythonAnywhere. (Dalla pagina Console, puoi raggiungere altre pagine PythonAnywhere dal pulsante menu nell'angolo in alto a destra. Una volta che sei su una delle pagine, ci sono link agli altri vicini all'alto.) + +## Ora sei online! + +Ora il tuo sito dovrebbe essere stato pubblicato online! Clicca sulla pagina PythonAnywhere per ottenere un link. Puoi condividerlo con chiunque tu voglia :) + +> **Nota** Questo è un tutorial per principianti, e nel distribuire questo sito abbiamo preso alcune scorciatoie che non sono ideali dal punto di vista della sicurezza. Se e quando decidi di usare questo progetto in produzione, oppure di avviare un nuovo progetto, dovresti controllare la [Django deployment checklist](https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/) per alcuni consigli di sicurezza del tuo sito. + +## Suggerimenti per il debug + +Se si osserva un errore durante l'esecuzione dello script `pa_autoconfigure_django.py`, ecco alcune cause comuni: + +- Dimenticare di creare il tuo token API PythonAnywhere. +- Errore nel tuo URL GitHub +- Se vedi un errore dicendo * "Non è stato possibile trovare le impostazioni.py"*, probabilmente perché non è riuscito ad aggiungere tutti i file a Git e/o non li hai spinti fino a GitHub con successo. Dai un altro sguardo alla sezione Git qui sopra +- Se ti sei registrato in precedenza con un account su PythonAnywhere e hai avuto un errore con il comando collectstatic, probabilmente, il tuo account ha una versione un po' vecchia di SQLite (es. 3..2). In tal caso, registrati per un nuovo account e prova i comandi nella sezione PythonAnywhere qui sopra. + +Se vedi un errore quando provi a visitare il tuo sito, il primo posto dove cercare qualche info per il debugging è nel tuo **error log**. Troverai un link nella [ scheda Web](https://www.pythonanywhere.com/web_app_setup/) di PythonAnywhere. Vedi se ci sono messaggi di errore lì; i più recenti sono alla fine. + +Ci sono alcuni [consigli generali per il debugging sulla wiki di PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +E ricorda, il tuo coach è qui per aiutarti! + +# Scopri il tuo Elenco di Vita! + +La pagina predefinita per il tuo sito dovrebbe dire "Welcome to Django", esattamente come sul tuo Pc locale. Prova ad aggiungere `/admin/` alla fine della URL, e verrai portata al sito di amministrazione. Accedi con il nome utente e la password, e vedrai che puoi aggiungere nuovi post sul server -- ricorda che i post del database di test locale non sono stati inviati al tuo blog live. + +Una volta che hai creato un paio di post, puoi tornare indietro alla copia locale (non PythonAnywhere). Da qui in poi, lavori sulla tua copia locale per fare le modifiche. Si tratta di un flusso di lavoro comune nello sviluppo Web (apportare modifiche localmente, inviare quei cambiamenti su GitHub, aggiornare le tue modifiche sul server Web. Questo consente di lavorare e fare esperimenti senza rompere il tuo sito Web. Bello, vero? + +Dà a te stessa un' *ENORME* pacca sulla schiena! Il deploy dei server è tra le parti più complicate dello sviluppo web e di solito le persone ci impiegano svariati giorni prima di farli funzionare. Ma hai pubblicato il tuo sito su Internet senza sforzo! \ No newline at end of file diff --git a/it/deploy/images/github_get_repo_url_screenshot.png b/it/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/it/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/it/deploy/images/new_github_repo.png b/it/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/it/deploy/images/new_github_repo.png differ diff --git a/it/deploy/images/pythonanywhere_account.png b/it/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/it/deploy/images/pythonanywhere_account.png differ diff --git a/it/deploy/images/pythonanywhere_bash_console.png b/it/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/it/deploy/images/pythonanywhere_bash_console.png differ diff --git a/it/deploy/images/pythonanywhere_beginner_account_button.png b/it/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/it/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/it/deploy/images/pythonanywhere_create_api_token.png b/it/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/it/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/it/deploy/install_git.md b/it/deploy/install_git.md new file mode 100644 index 00000000000..f0d8884287c --- /dev/null +++ b/it/deploy/install_git.md @@ -0,0 +1,52 @@ +Git è un "sistema di controllo versione" utilizzato da molti programmatori. Questo software può tracciare le modifiche ai file nel corso del tempo, così da poter ripristinare successivamente una specifica versione. Un po' come la funzione "revisioni" nei programmi di elaborazione di testi (come Microsoft Word o LibreOffice), ma molto più potente. + +## Installare Git + + + +È possibile scaricare Git da [git-scm.com](https://git-scm.com/). Puoi saltare tutti i passaggi tranne due: nel passaggio dove ti chiede di scegliere l'editor, dovrai selezionare Nano, e nel passaggio "Regolazione della variabile di ambiente PATH", seleziona "Esegui Git e gli strumenti Unix opzionali dal prompt dei comandi di Windows" (l'opzione in basso). A parte questo, i valori predefiniti vanno bene. 'Checkout Windows-style' e 'commit Unix-style line endings' vanno bene. + +Non dimenticare di riavviare il prompt dei comandi o la powershell dopo che l'installazione è terminata con successo. + + + +Scarica Git da [git-scm.com](https://git-scm.com/) e segui le istruzioni. + +> **Nota** Se stai usando OS X 10.6, 10.7 o 10.8, dovrai installare la versione di Git da qui: [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/it/deploy/signup_pythonanywhere.md b/it/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..4ba19117885 --- /dev/null +++ b/it/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere è un servizio che permette di eseguire il codice Python sui server "nel cloud". Lo useremo per ospitare il nostro sito, live e su Internet. + +Caricheremo il blog che stiamo realizzando su PythonAnywhere. Crea un account "beginner" su PythonAnywhere (l'account gratuito va benissimo, non ti serve una carta di credito). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Nella pagina di iscrizione di PythonAnywhere c'è il tasto per creare un account 'Principiante' gratuito](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Nota** Quando scegli il tuo nome utente, tieni presente che l'URL del tuo blog assumerá la forma` tuonomeutente.pythonanywhere.com`, quindi scegli il tuo soprannome o un nome che riguardi l'argomento del blog. Inoltre, assicurati di ricordare la tua password (aggiungilo al tuo password manager, se ne usi uno). + +## Creazione di un token API PythonAnywhere + +Dovrai compiere questo passaggio solo una volta. Dopo aver creato un account su PythonAnywhere, verrai indirizzata alla tua dashboard. Trova il link in alto a destra nella pagina "Account": + +![Link account in alto a destra sulla pagina](../deploy/images/pythonanywhere_account.png) + +quindi seleziona la scheda chiamata "API token", e premi il pulsante che dice "Crea nuovo token API". + +![La scheda token API nella pagina Account](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/it/django/README.md b/it/django/README.md new file mode 100644 index 00000000000..d9af20a3413 --- /dev/null +++ b/it/django/README.md @@ -0,0 +1,27 @@ +# Che cos'è Django? + +Django (/ˈdʒæŋɡoʊ/ *jang-goh*) è un framework per applicazioni web gratuito e open source, scritto in Python. Un web framework è un insieme di componenti che ti aiuta a sviluppare siti web più velocemente e facilmente. + +Per costruire un sito web ci vogliono sempre componenti molto simili: il sistema per gestire l'autenticazione dell'utente (registrazione, accesso, logout), il pannello di amministrazione del sito, il sistema per caricare i file, ecc. + +Non sei la prima e non sarai l'ultima persona ad affrontare questi problemi: altri programmatori prima di te li hanno affrontati e risolti, tanto spesso e tanto ripetitivamente da aver distillato varie *web framework* (Django è una delle tante) che mettono a disposizione tutti gli elementi necessari, pronti per l'uso. + +La funzione dei *framework* è evitare di dover reinventare l'acqua calda, e risparmiar tempo nel mettere in piedi un nuovo progetto. + +## Perché ho bisogno di un framework? + +Per capire bene cosa è Django, a cosa serve davvero, diamo uno sguardo più da vicino ai server. Tanto per incominciare, bisogna che il server sappia che gli si sta chiedendo qualcosa, per esempio una pagina web. + +Immagina una cassetta delle lettere (port), che venga continuamente tenuta d'occhio, nel caso arrivino lettere (request). Questo è ciò che fa un server: tiene d'occhio un *port* e sbriga le *request* in arrivo. Un server web legge il contenuto della richiesta ed invia una risposta, sotto forma di pagina web. Ma quando vuoi inviare qualcosa, hai bisogno di avere qualche contenuto. E Django è ciò che ti aiuta a creare questo contenuto. + +## Cosa succede quando qualcuno richiede un sito Web dal tuo server? + +Quando una richiesta arriva ad un server web, questi lo passa a Django, che la interpreta, per capire cosa si stia richiedendo precisamente. Django esamina prima di tutto l'indirizzo della pagina web richiesta, e decide come proseguire. Di questa parte si occupa lo **urlresolver** di Django, (nota che un indirizzo di una pagina web si chiama URL, che sta per Localizzatore Uniforme di Risorse, cosa che spiega il nome *urlresolver*). Questo urlresolver non è nulla di trascendentale, non fa che raccogliere una serie di schemi e prova a trovare la corrispondenza per lo URL. Django passa in rassegna gli schemi disponibili, ed al primo che si adatti, passa la richiesta alla funzione associata (che si chiama *view*). + +Immagina un postino con una lettera. Sta camminando per la strada e controlla ogni numero civico mettendolo a confronto con quello sulla lettera. Se corrisponde, mette lì la lettera. Questo è il modo in cui l'urlresolver funziona! + +Nella funzione *view*, è lì che avviene il vero lavoro: per esempio cercare in una base dati l'informazione richiesta. Forse l'utente ha richiesto di cambiare qualcosa all'interno dei suoi dati? Come se una lettera (la richiesta) dicesse: "aggiorna la descrizione del mio lavoro". La *view* verifica se hai autorizzazione a farlo, se sì, accetta il valore ricevuto come nuova descrizione, lo invia al database, e se il database le risponde "ok", la *view* costruisce la risposta alla richiesta iniziale, in modo che Django la possa servire al navigatore web dell'utente. + +La descrizione precedente è un tantinello semplificata, ma non c'è ancora bisogno di entrare nei dettagli tecnici. Serve bene per farsi un'idea corretta della interazione. + +A questo punto, lasciamo perdere i dettagli, che c'è tempo per impararli, e iniziamo piuttosto ad usare Django per costruire qualcosa. Strada facendo impareremo quello che manca, poco per volta. \ No newline at end of file diff --git a/it/django_admin/README.md b/it/django_admin/README.md new file mode 100644 index 00000000000..aebd21f7712 --- /dev/null +++ b/it/django_admin/README.md @@ -0,0 +1,57 @@ +# L'interfaccia admin di Django + +Per aggiungere, modificare ed eliminare le pubblicazioni che abbiamo appena modellato, useremo l'amministratore di Django. + +Apriamo `blog/admin.py` nell'editore testi e cambiamo il contenuto così: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Come puoi vedere, stiamo importando (include) il modello di Post che abbiamo definito nel capitolo precedente. Per far si che il nostro modello sia visibile nella pagina di admin, dobbiamo registrare questo modello con `admin.site.register(Post)`. + +OK, è tempo di guardare il nostro Post. Ricorda di eseguire `python manage.py runserver` nella console per avviare il web server. Vai al tuo browser e digita l'indirizzo http://127.0.0.1:8000/admin/. Vedrai una pagina login simile a questa: + +![Login page](images/login_page2.png) + +Per accedere, devi creare un *superuser* - un utente che ha pieno controllo di tutto quello che c'è sul sito. Torna alla riga di comando, digita `python manage.py createsuperuser`, e premi invio. + +> Ricorda, per eseguire comandi lasciando in esecuzione il server web, apri una nuova finestra di terminale e attiva il tuo virtualenv. Abbiamo presentato come scrivere nuovi comandi nel capitolo **Il tuo primo progetto Django!**, nella sezione **Avvio del server web**. + +{% filename %}macOS o Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Quando te lo richiede, digita il tuo username (minuscole, senza spazi), il indirizzo email, e la password che vorrai utilizzare. **Non allarmarti se non vedi la password mentre scrivi, così funziona.** Digitala, premi `enter`, e continua. Il risultato dovrebbe assomigliare a questo (dove il nome utente e l'email saranno quelli che hai inserito): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Torna al navigatore web. Fai log in con le credenziali di superuser che hai appena definito, dovresti vedere il pannello di amministrazione di Django. + +![Django admin](images/django_admin3.png) + +Vai su Posts e giocaci un po', per capire come funziona. Aggiungi cinque o sei post. Non preoccuparti del contenuto — questo è visibile solo a te sul tuo computer personale — puoi fare copia-incolla di parti di questo tutorial per far presto. :) + +Fa in modo di avere per lo meno un paio di post (non tutti però) con data di pubblicazione. Ci tornerà utile poi. + +![Django admin](images/edit_post3.png) + +Se vuoi sapere di più su Django admin, puoi controllare la documentazione ufficiale di Django: https://docs.djangoproject.com/en/2.2/ref/contrib/admin/ + +Arrivati a questo punto, wow, mi sembra proprio il caso di prendersi un buon caffè ri-energizzante, una frutta (o magari una camomilla). Hai appena creato il tuo primo modello Django — ti meriti una pausa! diff --git a/it/django_admin/images/django_admin3.png b/it/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/it/django_admin/images/django_admin3.png differ diff --git a/it/django_admin/images/edit_post3.png b/it/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/it/django_admin/images/edit_post3.png differ diff --git a/it/django_admin/images/login_page2.png b/it/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/it/django_admin/images/login_page2.png differ diff --git a/it/django_forms/README.md b/it/django_forms/README.md new file mode 100644 index 00000000000..86240bbb18a --- /dev/null +++ b/it/django_forms/README.md @@ -0,0 +1,479 @@ +# Form Django + +Infine vogliamo creare un bel modo per poter aggiungere e cambiare in nostri blog posts. Django `admin` è bello, ma è alquanto difficile da personalizzare e rendere carino. Con `forms` avremo il controllo totale sulla nostra interfaccia - possiamo fare praticamente tutto quello ce vogliamo! + +La bella cosa dei Django forms è che possiamo sia inventare un nuovo form da zero che creare un `ModelForm` che salverà il risultato del form sul nostro modello. + +Questo è esattamente quello che stiamo per fare: stiamo per creare un form per il nostro modello dei `Post`. + +Come ogni parte importante di Django, i forms hanno il proprio file: `forms.py`. + +Dobbiamo creare un file con questo nome all'interno della cartella `blog`. + + blog + └── forms.py + + +Ok, apriamolo nell'editor di codice e digitiamo quanto segue: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + +    class Meta: +        model = Post +        fields = ('title', 'text',) +``` + +Dobbiamo importare prima di tutto i Django Forms (`from django import forms`) e, ovviamente, il nostro `Post` model (`from .models import Post`). + +`PostForm`, come probabilmente hai intuito, è nome del nostro form. Dobbiamo ora dire a Django che questa form é una `ModelForm` (così Django farà qualche magia per noi)- `forms.ModelForm` è il comando per farlo. + +Successivamente, abbiamo `class Meta`, con cui diciamo a Django quale model utilizzare per creare questo form (`model = Post`). + +Finalmente, possiamo indicare uno o più campi che il nostro form deve avere. In questo caso vogliamo che solamente `title` e `text` siano visibili -`author` è la persona attualmente connessa (tu!) e `created_date` dovrebbe generarsi da sola ogni volta che creiamo un post (cioè nel nostro programma), giusto? + +E questo è tutto! Tutto quello che dobbiamo fare ora é usare il form nella nostra *view* e visualizzarlo nel template. + +Quindi creeremo di nuovo un link alla pagina, un URL, una view e un template. + +## Link ad una pagina usando il form + +Prima di aggiungere il link, abbiamo bisogno di alcune icone da usare come pulsanti per il link. Per questo tutorial, scarica [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) e salvalo nella cartella `blog/templates/blog/icons/` + +> Nota: Per scaricare l'immagine SVG, aprire il menu contestuale sul link (di solito facendo clic destro su di essa) e selezionare "Salva collegamento come". Nella finestra di dialogo che ti chiede dove salvare il file, vai alla directory `djangogirls` del tuo progetto Django, e all'interno di questo fino alla sottodirectory `blog/templates/blog/icons/`, e salvare il file lì. + +È ora di aprire `blog/templates/blog/base.html` nell'editor di codice. Ora possiamo usare questo file di icone all'interno del modello di base come segue. Nell'elemento `div` all'interno della sezione `header` , aggiungeremo un link prima dell'elemento `h1`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Nota che vogliamo chiamare la nostra nuova view `post_new`. L'[icona SVG](https://icons.getbootstrap.com/icons/file-earmark-plus/) è fornita dal [Bootstrap Icons](https://icons.getbootstrap.com/) e mostrerà un'icona di pagina con il segno 'più'. Utilizziamo una direttiva sui modelli Django chiamata `include`. Questo immetterà il contenuto del file nel modello Django. Il browser web sa come gestire questo tipo di contenuto senza ulteriori elaborazioni. + +> Puoi scaricare tutte le icone di Bootstrap [qui](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip). Scompattare il file e copiare tutti i file immagine SVG in una nuova cartella all'interno `blog/templates/blog/` chiamata `icone`. In questo modo è possibile accedere a un'icona come `pencil-fill.svg` utilizzando il percorso del file `blog/templates/blog/icons/pencil-fill.svg` + +Dopo aver modificato la riga, il file HTML dovrebbe ora assomigliare a questo: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Dopo aver salvato e aggiornato la pagina http://127.0.0.1:8000 vedrai un errore che già conosci: `NoReverseMatch`. Lo vedi? Bene! + +## URL + +Apriamo `blog/urls.py` nell'editor di codice e aggiungiamo: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +E il codice finale sarà così: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Dopo aver aggiornato il sito, vedremo un `AttributeError` dal momento che non abbiamo la view `post_new` implementata. Aggiungiamolo, adesso. + +## post_new view + +È ora di aprire i `blog/views. y` file nell'editor di codice e aggiungere le seguenti righe con il resto delle `da` righe: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +E poi la nostra *view*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): +    form = PostForm() +    return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Per creare un nuovo modulo `Post`, dobbiamo richiamare `PostForm()` e passarlo nel nostro modello. Torneremo sulla *view* in seguito, ma per ora creiamo velocemente un modello per il modulo. + +## Template + +Dobbiamo creare un file `post_edit. tml` nella directory `blog/templates/blog` , e aprilo nell'editor di codice. Per far si che un modulo funzioni, abbiamo bisogno di diverse cose: + +* Dobbiamo visualizzare il form. Possiamo farlo con (ad esempio) {% raw %}`{{ form.as_p }}`{% endraw %}. +* La riga sopra deve essere racchiuso con un elemento di forma HTML: `...`. +* Ci serve un `Save` pulsante. Possiamo fare Ciò con HTML button: ``. +* E infine, subito dopo l'apertura `
` abbiamo bisogno di aggiungere {% raw %}`{% csrf_token %}`{% endraw %}. Questo passaggio è molto importante dal momento che rende il nostro form sicuro! Se dimentichi di questo bit, Django si lamenterà quando tenterai di salvare il modulo: + +![CSFR Forbidden page](images/csrf2.png) + +OK, quindi vediamo come dovrebbe apparire l'HTML in `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 }} + +
+{% endblock %} +``` + +Aggiorna la pagina! Yay! Il tuo modulo è visualizzato! + +![Nuovo Modulo](images/new_form2.png) + +Ma, aspetta un momento! Se provi a scrivere qualcosa nei campi`titolo` e `testo` e cerchi di salvare ciò che hai scritto- che cosa succede? + +Nulla! Siamo ancora una volta nella stessa pagina e il nostro testo è andato perduto… e nessun nuovo post è stato aggiunto. Quindi cosa è andato storto? + +La risposta è: nulla. Dobbiamo solo fare un po' di lavoro in più nella nostra *view*. + +## Salvare il form + +Apri ancora una volta `blog/views.py`. Attualmente tutto quello che abbiamo nella view `post_new` è: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): +    form = PostForm() +    return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Quando inviamo il form, veniamo riportati alla stessa view, ma questa volta abbiamo più dati in `request`, in particolare in `request.POST` (il nome non ha nulla a che vedere con un blog "post", bensì con l'inglese "posting", ovvero inviare, in questo caso dati). Ricordate come nel file HTML, la nostra definizione `
` aveva la variabile `method="POST"`? Tutti i campi dal modulo sono ora in `request.POST`. Non è necessario rinominare `POST` in nessuna altra maniera (l'unico altro valore valido per `method` è `GET`, ma al momento non abbiamo abbastanza tempo per spiegare la differenza). + +Quindi, nella nostra *view* abbiamo due situazioni separate da gestire: prima, quando accediamo la pagina per la prima volta e vogliamo un modulo vuoto, e poi, quando torniamo alla *view* con tutti i dati del modulo che abbiamo appena digitato. Per cui dobbiamo aggiungere una condizione(useremo `if`): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": +    [...] +else: +    form = PostForm() +``` + +È ora di riempire i punti `[...]`. Se `metodo` è `POST` allora vogliamo costruire il `PostForm` con dati dal modulo, giusto? Lo faremo come segue: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +La cosa successiva è controllare se il modulo è corretto (tutti i campi obbligatori sono impostati e non sono stati inviati valori errati). Lo facciamo con `form.is_valid()`. + +Verifichiamo se il modulo è valido e se è così, possiamo salvarlo! + +{% 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() +``` + +In pratica, ci sono due cose da fare: salviamo il modulo con `form.save` e aggiungiamo un autore(dal momento che non c'era nessun campo autore `author` nel modulo `PostForm` e questo campo non può essere lasciato bianco). `commit=False` significa che non vogliamo ancora salvare il modello `Post` - vogliamo aggiungere prima l'autore. La maggior parte del tempo userai `form.save()` senza `commit=False`, ma in questo caso dobbiamo fornirlo. `post.save()` manterrà le modifiche (aggiungendo l'autore) ed un nuovo post del blog è stato creato! + +Infine, sarebbe fantastico se potessimo andare immediatamente alla pagina `post_detail` per il nostro post appena creato, giusto? Per fare questo abbiamo bisogno di un'altra importazione: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Aggiungilo all'inizio del tuo file. E ora possiamo dire: "vai alla pagina `post_detail` per il post appena creato": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` è il nome della view su cui vogliamo andare. Ti ricordi che questa *view* ha bisogno della variabile `pk`? Per passare alle views, usiamo `pk=post.pk`, dove `post` è il post appena creato! + +OK, abbiamo parlato molto, ma probabilmente vogliamo vedere come appare l'intera *view* ora, giusto? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Vediamo se funziona. Vai alla pagina http://127.0.0.1:8000/post/new/, aggiungi un `titolo` e `testo`, salvalo… e voilà! Il nuovo post è stato aggiunto e siamo reindirizzati alla pagina `post_detail`! + +Potresti aver notato che stiamo impostando la data di pubblicazione prima di salvare il post. Più tardi, introdurremo un *pulsante pubblcia* nel **Django Girls Tutorial: Estensioni**. + +Fantastico! + +> Poiché abbiamo recentemente utilizzato l'interfaccia di admin di Django, il sistema attualmente ritiene che siamo ancora loggati. Ci sono alcune situazioni che potrebbero portarci a disconnetterci (chiusura del browser, riavvio del DB, ecc.). Se, quando si crea un post, si scopre che si stanno ricevendo errori in riferimento alla mancanza di un utente loggato, vai alla pagina admin http://127.0.0.1:8000/admin e accedi di nuovo. Questo risolverà temporaneamente il problema. C'è una correzione permanente che ti aspetta nella sezione degli esercizi extra alla fine del tutorial principale **Compiti: aggiungi sicurezza al tuo sito web!**. + +![Registrato con un errore](images/post_create_error.png) + +## Validazione del form + +E adesso ti dimostreremo quanto siano belli i moduli di Django. Un post del blog deve avere dei campi per il `titolo` ed il `testo`. Nel nostro modello `Post` non abbiamo detto che questi campi (contrariamente a `published_date`) non sono richiesti, quindi Django, di default, si aspetta che siano impostati. + +Prova a salvare il modulo senza `titolo` e `testo`. Indovina cosa accadrà! + +![Convalida del modulo](images/form_validation2.png) + +Django si incarica di verificare che tutti i campi nel nostro modulo siano corretti. Non è fantastico? + +## Form di modifica + +Ora sappiamo come aggiungere un nuovo post. Ma cosa succede se ne vogliamo cambiarne uno esistente? E' molto simile a quanto abbiamo appena fatto. Creiamo rapidamente alcune cose importanti. (Se non capisci qualcosa, dovresti chiedere al tuo coach o guardare i capitoli precedenti, poiché abbiamo già affrontato tutti questi passi.) + +Innanzitutto, salviamo l'icona che rappresenta il pulsante di modifica. Scarica [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) e salvalo nella posizione `blog/templates/blog/icons/`. + +Apri `blog/templates/blog/post_detail.html` nell'editor di codice e aggiungi il seguente codice all'interno dell'elemento `article`: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +così che il modello sarà così: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +Apri `blog/urls.py` nell'editor del codice e aggiungi questa riga: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Riutilizzeremo il modello `blog/templates/blog/post_edit.html`, quindi l'ultima cosa che manca è una *view*. + +Apriamo `blog/views.py` nell'editor del codice e aggiungiamolo alla fine del file: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Questo sembra quasi esattamente la view `post_new`, giusto? Ma non del tutto. Per una, passiamo un parametro `pk` extra da `urls`. Successivamente, otteniamo il modello `Post` che vogliamo modificare con `get_object_or_404(Post, pk=pk)` e poi, quando creiamo un modulo, passiamo questo post come `istanza`, sia quando salviamo il modulo… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +…e quando abbiamo appena aperto un modulo con questo post per modificare: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +OK, vedi se funziona! Vai alla pagina `post_detail` . Dovrebbe esserci un pulsante di modifica nell'angolo in alto a destra: + +![Pulsante modifica](images/edit_button2.png) + +Quando ci clicchi, vedrai il modulo con i nostri post del blog: + +![Modificare il modulo](images/edit_form2.png) + +Sentiti libero di cambiare il titolo o il testo e salvare le modifiche! + +Complimenti! La tua application è sempre più completa! + +Se necessiti di altre informazioni sui moduli di Django, dovresti leggere la documentazione: https://docs.djangoproject.com/en/2.2/topics/forms/ + +## Sicurezza + +Riuscire a creare nuovi post semplicemente cliccando su un link è bellissimo! Ma in questo momento chiunque visiti il tuo sito potrà creare un nuovo post sul blog, e probabilmente non è qualcosa che vuoi. Facciamo spuntare il bottone solo per te e non per gli altri. + +Apri `blog/template/blog/base.html` nell'editor del codice, trova il nostro `div` all'interno dell'`intestazione` e il tag di ancoraggio che hai inserito in precedenza. Dovrebbe essere così: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Aggiungeremo un altro tag `{% if %}` , che farà apparire il link solo per gli utenti che hanno effettuato l'accesso nell'admin. In questo momento, è solo voi! Cambia l'elemento `` per farlo assomigliare a questo: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/file-earmark-plus.svg' %} + +{% endif %} +``` + +Questo `{% if %}` causerà l'invio del link al browser solo se l'utente che richiede la pagina è loggato. Questo non protegge completamente la creazione di nuovi post, ma è un buon primo passo. Ci occuperemo di più sicurezza nelle lezioni di estensione. + +Ricordi l'icona modifica che abbiamo aggiunto sulla nostra pagina di dettaglio? Vogliamo faro la stessa cosa qui, così le altre persone non potranno editare i post esistenti. + +Apri `blog/templates/blog/post_detail.html` nell'editor del codice e trova questa riga: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +Cambialo in questo: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +Siccome probabilmente sei loggata, se ricarichi la pagina non vedrai differenze. Carica la pagina in un browser diverso o in una finestra incognita (chiamata "InPrivate" in Windows Edge), tuttavia, e vedrai che il link non viene mostrato in alto, e l'icona non viene visualizzata! + +## Ultima cosa: ora di fare il deploy! + +Vediamo se funziona su PythonAnywhere. È l'ora di ripartire! + +* Prima di tutto, esegui il tuo nuovo codice e push fino a 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 + + +* Poi, in una [console PythonAnywhere Bash](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Ricordati di sostituire `` con il sottodominio di PythonAnywhere, senza le parentesi angolo.) + +* Infine, salta alla pagina [ "Web" ](https://www.pythonanywhere.com/web_app_setup/) (usa il pulsante menu in alto a destra della console) e premi **Ricarica**. Aggiorna il tuo blog https://subdomain.pythonanywhere.com per vedere le modifiche. + +Ecco fatto! Congratulazioni! \ No newline at end of file diff --git a/it/django_forms/images/csrf2.png b/it/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/it/django_forms/images/csrf2.png differ diff --git a/it/django_forms/images/drafts.png b/it/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/it/django_forms/images/drafts.png differ diff --git a/it/django_forms/images/edit_button2.png b/it/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/it/django_forms/images/edit_button2.png differ diff --git a/it/django_forms/images/edit_form2.png b/it/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/it/django_forms/images/edit_form2.png differ diff --git a/it/django_forms/images/form_validation2.png b/it/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/it/django_forms/images/form_validation2.png differ diff --git a/it/django_forms/images/new_form2.png b/it/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/it/django_forms/images/new_form2.png differ diff --git a/it/django_forms/images/post_create_error.png b/it/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/it/django_forms/images/post_create_error.png differ diff --git a/it/django_installation/README.md b/it/django_installation/README.md new file mode 100644 index 00000000000..d8e3b0195a0 --- /dev/null +++ b/it/django_installation/README.md @@ -0,0 +1,7 @@ +# Installazione di Django + +> **Nota** Se utilizzi un Chromebook, salta questo capitolo e segui le istruzioni in [Configurazione di Chromebook](../chromebook_setup/README.md). +> +> Se hai terminato il processo di installazione, questo passaggio l'hai già completato e puoi passare direttamente al capitolo successivo! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/it/django_installation/instructions.md b/it/django_installation/instructions.md new file mode 100644 index 00000000000..f91aa502a02 --- /dev/null +++ b/it/django_installation/instructions.md @@ -0,0 +1,229 @@ +> Parte di questa sezione è basata sul tutorial delle Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Una parte di questo capitolo di basa sul [django-marcador tutorial](http://django-marcador.keimlink.de/), con licenza Creative Commons Attribution-ShareAlike 4.0 International License. Il tutorial di django-marcador è protetto da copyright di Markus Zapke-Gründemann et al. + +## Ambiente virtuale + +Prima di installare Django, ti vogliamo far installare uno strumento estremamente utile per tenere in ordine l'ambiente in cui programmerai sul tuo computer. Potresti saltare questo passaggio, ma è caldamente consigliato soffermarsi. Se inizi con la migliore configurazione possibile, ti risparmierai un sacco di problemi per il futuro! + +Per cui, creiamo ora un **ambiente virtuale** (chiamato anche un *virtualenv*). Virtualenv isolerà la tua configurazione di Python/Django in base ai diversi progetti. Questo significa che qualunque modifica farai su un sito non avrà alcun effetto su tutti gli altri che stai sviluppando. Chiaro ora? + +Tutto quello che devi fare è trovare una cartella in cui vuoi creare il `virtualenv`; la tua home directory, ad esempio. Su Windows potrebbe apparire come `C:\Users\Name` (dove `Name` è il nome del tuo login). + +> **Nota:** Su Windows, assicurati che la cartella non contenga caratteri accentati o speciali; se il tuo username contiene cartteri accentati, usa una cartella diversa, ad esempio `C:\djangogirls`. + +Per questo tutorial useremo una nuova directory `djangogirls` dalla tua home directory: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Ora creeremo un virtualenv dal nome `myvenv`. Questo è il formato del comando generale: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Per creare un nuovo `virtualenv` devi aprire il prompt dei comandi ed eseguire `python -m venv myvenv`. Apparirà così: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Qui `myvenv` è il nome del tuo `virtualenv`. Puoi utilizzare qualsiasi altro nome, ma attieniti a utilizzare le minuscole, a non usare spazi, accenti o caratteri speciali. Inoltre è meglio scegliere un nome breve, dato che dovrai digitarlo molte volte! + + + + + +Possiamo creare un `virtualenv` sia su Linux che su macOS eseguendo `python3 -m myvenv`. Apparirà così: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` è il nome del tuo `virtualenv`. Puoi usare qualsiasi altro nome, ma utilizza solo minuscole e niente spazi. Inoltre è meglio scegliere un nome breve, in quanto dovrai digitarlo molte volte! + +> **NOTA:** Su alcune versioni di Debian/Ubuntu potresti vedere il seguente errore: +> +> {% 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 questo caso, segui le istruzioni sopra e installa il pacchetto `python3-venv`: {% filename %}riga di comando{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **NOTA:** In alcune versioni di Debian/Ubuntu che iniziano l'ambiente virtuale come questo attualmente dà il seguente errore: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Per aggirare il problema utilizza, invece del precedente, il comando `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **NOTA:** Se ottieni un errore come +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> allora esegui: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + + +## Lavorare con virtualenv + +Il comando sopra specificato, creerà una cartella dal nome `myenv` (o col nome che hai scelto) che contiene il tuo virtual environment (ovvero un mucchio di files e cartelle). + + + +Avvia il tuo virtualenv digitando: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **NOTA:** su Windows 10 potresti ottenere un errore in Windows PowerShell che dice `l'esecuzione degli script è disabilitata su questo sistema`. In questo caso, apri un'altra Windows PowerShell con l'opzione "Esegui come amministratore". Quindi prova a digitare il seguente comando prima di iniziare il tuo ambiente virtuale: +> +> {% 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 +> + + + +> **NOTA:** Per gli utenti del popolare editor VS Code, che ha un terminale integrato basato su una powershell Windows, se vuoi rimanere con il terminale integrato, puoi eseguire il seguente comando per attivare il tuo ambiente virtuale: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> Il vantaggio è che non devi passare tra le finestre dell'editor e le finestre della linea di comando + + + + + +Avvia il tuo virtualenv digitando: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Ricordati di sostituire `myvenv` con il nome del `virtualenv` che hai scelto! + +> **Nota:** a volte il comando `source` potrebbe non essere disponibile. In quel caso prova ad usare questo: +> +> {% filename %}command-line{% endfilename %} +> +> $ myvenv/bin/activate +> + + + +Sarai certo di aver avviato il `virtualenv` quando vedrai che il prompt nella tua console inizia con `(myvenv)`. + +Quando si lavora all'interno di un ambiente virtuale, `python` farà automaticamente riferimento alla versione corretta da utilizzare. Per cui puoi digitare `python` invece che `python3`. + +OK, abbiamo tutte le dipendenze importanti pronte. Finalmente possiamo installare Django! + +## Installare Django {#django} + +Ora che hai avviato il tuo `virtualenv`, puoi installare Django. + +Prima però dobbiamo assicurarci di avere la versione più recente di `pip`, il software che useremo per installare Django: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Installazione di pacchetti con requisiti + +Un file di requisiti mantiene un elenco di dipendenze da installare utilizzando `pip install`: + +Crea un file `requirements.txt` all'interno della cartella `djangogirls/` utilizzando l'editor di codice che hai installato prima. Lo fai aprendo un nuovo file nell'editor di codice e quindi salvarlo come `requirements.txt` nella cartella `djangogirls/` . La tua cartella assomiglierà a questo: + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +Nel tuo file `djangogirls/requirements.txt` aggiungi il testo seguente: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Ora, esegui `pip install -r requirements.txt` per installare 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Se si verifica un errore durante la chiamata pip sulla piattaforma Windows, si prega di controllare se il tuo nome del progetto contiene spazi, accenti o caratteri speciali (ad esempio, `C:\Utenti\Nome utente\djangogirls`). Se lo fa, si prega di considerare l'utilizzo di un altro luogo senza spazi, accenti o caratteri speciali (suggerimento: `C:\djangogirls`). Crea un nuovo virtualenv nella nuova cartella, quindi cancellane uno vecchio e riprova il comando sopra. (Spostare la directory virtualenv non funzionerà perché virtualenv utilizza percorsi assoluti.) + + + + + +> La tua linea di comando potrebbe congelare dopo aver provato ad installare Django. Se ciò accade, invece del comando sopra utilizzato: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Se ottieni un errore quando esegui il comando pip su Ubuntu 12.04, prova ad eseguire `python -m pip install -U --force-reinstall pip` per risolvere il problema. + + + +Questo è tutto! Sei (finalmente) pronto/a a creare un'applicazione Django! \ No newline at end of file diff --git a/it/django_models/README.md b/it/django_models/README.md new file mode 100644 index 00000000000..fb96a3b7fb4 --- /dev/null +++ b/it/django_models/README.md @@ -0,0 +1,201 @@ +# I modelli di Django + +Vogliamo creare un qualcosa che raccoglierà tutti i post del nostro blog. Per farlo, però, dobbiamo prima introdurre i cosiddetti `oggetti`. + +## Oggetti + +Esiste un concetto nella programmazione che è quello di `programmazione orientata agli oggetti`. L'idea di base è che invece di scrivere una noiosa sequenza di istruzioni di programmazione, possiamo modellare le cose e decidere come devono interagire l'una con l'altra. + +Quindi cos'è un oggetto? È un insieme di proprietà ed azioni. Suona strano, ma ti faremo un esempio. + +Se vogliamo il modello di un gatto creeremo un oggetto `Gatto` che possiede alcune proprietà come: `colore`, `età`, `umore` (come buono, cattivo, assonnato ;) ) e `padrone` (che è un oggetto `Persona` oppure, nel caso di un gatto randagio, la proprietà sarà vuota). + +Quindi il `Gatto` possiede anche alcune azioni: `fare_le_fusa`, `graffiare` e `alimentare` (in quest'ultimo caso, daremo al gatto del `CiboPerGatti`, che sarà un altro oggetto con le sue proprietà, come `gusto`). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +Quindi in pratica l'idea è quella di descrivere cose vere in codice con delle proprietà (chiamate `proprietà di oggetti`) e azioni (chiamate `metodi`). + +Quindi come faremo a modellare i post del blog? vogliamo costruire un blog, giusto? + +Dobbiamo rispondere alla domanda: cos'è un post? Quali proprietà dovrebbe avere? + +Beh, sicuramente il nostro post ha bisogno di qualche testo con il suo contenuto ed un titolo, vero? Sarebbe bello sapere anche chi l'ha scritto - quindi abbiamo bisogno di un autore. Infine, vogliamo sapere quando il post è stato creato e pubblicato. + + Post + -------- + titolo + testo + autore + data_creazione + data_pubblicazione + + +Che tipo di cose si potrebbero fare con un post? Sarebbe bello avere qualche `metodo` che pubblica il post, vero? + +Quindi avremo bisogno di un metodo `pubblicare`. + +Dal momento che sappiamo già cosa vogliamo ottenere, iniziamo a modellarlo in Django! + +## Modello Django + +Sapendo cos'è un oggetto, possiamo creare un modello Django per il nostro post. + +Un modello in Django è uno speciale tipo di oggetto - è salvato nel `database`. Un database è un insieme di dati. È un posto in cui archivierai informazioni sui tuoi utenti, sui tuoi post, ecc. Useremo un database SQLite per archiviare i nostri dati. Questo è l'adattatore Django di database predefinito -- ci basterà per adesso. + +Puoi pensare ad un modello nel database come ad un foglio elettronico con colonne (campi) e righe (dati). + +### Creazione di un'applicazione + +Per mantenere tutto ordinato, creeremo un'applicazione diversa all'interno del nostro progetto. E' molto bello avere tutto organizzato fin dall'inizio. Per creare un'applicazione abbiamo bisogno di eseguire il seguente comando nella console (dalla cartella `djangogirls` dove si trova il file `manage.py`): + +{% filename %}macOS o Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Noterai che si è creata una nuova cartella `blog` e che ora contiene alcuni file. Le nostre cartelle ed i nostri file nel nostro progetto si dovrebbero vedere così: + + djangogirls + ├── blog + │   ├── admin.py + │   ├── apps.py + │   ├── __init__.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + + +Dopo aver creato un'applicazione dobbiamo dire a Django che dovrebbe utilizzarla. Lo facciamo nel file `mysite/settings.py` -- aprilo nell'editor di codice. Dobbiamo scoprire `INSTALLED_APPS` ed aggiunge una riga contenente `'blog.apps.BlogConfig',` proprio sopra `]`. Il progetto dovrebbe assomigliare a questo: + +{% 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.apps.BlogConfig', +] +``` + +### Creazione di un modello blog post + +Nel file `blog/models.py` definiamo tutti gli oggetti chiamati `Models` - Questo è il posto dove definiremo il nostro blog post. + +Apriamo `blog/models.py`, cancella tutto quello che è lì e scrivi un codice come questo: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Assicurati di aver usato 2 underscore (`_`) da entrambi i lati di `str`. Questa convenzione viene utilizzata spesso in Python e a volte li chiamiamo anche "dunder" (abbreviazione di "doppio carattere di sottolineatura"). + +Sembra spaventoso, vero? ma non ti preoccupare, ti spiegheremo cosa significano queste righe! + +Tutte le righe che iniziano con `from` oppure con `import` sono righe che aggiungono alcuni pezzi da altri file. Quindi invece di copiare e incollare le stesse cose in ogni file, possiamo includere alcune parti con `from ... importa ...`. + +`class Post(models.Model):` - questa riga definisce il nostro modello (è un `oggetto`). + +- `class` è una parola chiave speciale che indica che stiamo definendo un oggetto. +- `Post` è il nome del nostro modello. Possiamo dargli un nome diverso (ma dobbiamo evitare caratteri speciali e spazi). Inizia sempre il nome di una classe con un lettera maiuscola. +- `models.Model` significa che il Post è un modello Django, quindi Django sa che dovrebbe essere salvato nel database. + +Ora definiamo le proprietà di cui stavamo parlando: `titolo`, `testo`, `data_creazione`, `data_pubblicazione` e `autore`. Per fare ciò dobbiamo definire un tipo per ogni campo (è un testo? Un numero? Una data? Una relazione con un altro oggetto, come User?) + +- `models.CharField` - così si definisce un testo con un numero limitato di lettere. +- `models.TextField` - questo è il codice per definire un testo senza un limite. Sembra l'ideale per i contenuti di un post, vero? +- `models.DateTimeField` - questo per la data ed l'ora. +- `models.ForeignKey` - questo è un link a un altro modello. + +Non spiegheremo ogni pezzo di codice perchè ci vorrebbre troppo tempo. Dovresti dare un'occhiata alla documentazione di Django se vuoi sapere di più sui campi del Modello e come definire le cose oltre che da quelli descritti sopra (https://docs.djangoproject.com/en/2.2/ref/models/fields/#field-types). + +Che dire di `def publish(self):`? È esattamente il metodo `pubblicare` di cui stavamo parlando prima. `def` significa che questa è una funzione/metodo e `publish` è il nome del metodo. Puoi modificare il nome del metodo, se vuoi. La regola per la denominazione è usare lettere minuscole e caratteri di sottolineatura al posto degli spazi. Per esempio, un metodo che calcola il prezzo medio potrebbe essere chiamato `calculate_average_price`. + +I metodi spesso `restituiscono` qualcosa. C'è un esempio nel metodo `__str__`. In questo caso, quando chiamiamo `__str__()` otterremo un testo (**stringa**) con il titolo del Post. + +Nota anche che entrambe `def publish(self):` e `def __str__(self):` sono indentate all'interno della classe. Poiché Python è sensibile agli spazi, dobbiamo indentare i nostri metodi dentro alla classe. Altrimenti i metodi non apparterranno alla classe e potresti ottenere qualche comportamento inaspettato. + +Se c'è qualcosa di poco chiaro sui modelli, sentiti libera/o di chiedere al tuo coach! Sappiamo che è complicato, soprattutto quando impari cosa sono gli oggetti e le funzioni allo stesso tempo. Ma speriamo che sembri un po' meno magico per te per adesso! + +### Crea tabelle per i modelli nel tuo database + +L'ultimo passo è quello di aggiungere un nuovo modello al nostro database. Prima dobbiamo far sapere a Django che ci sono alcuni cambiamenti nel nostro modello (l'abbiamo appena creato. (Vai alla finestra della tua console e digita `python manage.py makemigrations blog`. Il risultato somiglierà a questo: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Nota:** Ricorda di salvare i file che modifica. Altrimenti, il computer eseguirà la versione precedente che potrebbe fornirti messaggi di errore inattesi. + +Django ci ha preparato un file di migrazione che dobbiamo applicare nel nostro database. Digita `python manage.py migrate blog` e l'output dovrebbe essere: + +{% 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 + + +Evviva! Il nostro modello Post ora è nel database! Sarebbe bello poterlo vedere, vero? Vai al prossimo capitolo per vedere com'è il tuo Post! \ No newline at end of file diff --git a/it/django_orm/README.md b/it/django_orm/README.md new file mode 100644 index 00000000000..c08695fcc90 --- /dev/null +++ b/it/django_orm/README.md @@ -0,0 +1,221 @@ +# Django ORM e QuerySets + +In questo capitolo imparerai come Django si collega al database e archivia i dati al suo interno. Tuffiamoci! + +## Cos'è un QuerySet? + +Un QuerySet è in sostanza una lista di oggetti di un Model. Ti permettono di leggere i dati dal database, filtrarli e ordinarli. + +È più facile impararlo con un esempio. Proviamo, ti va? + +## La shell di Django + +Apri la tua console locale (non su PythonAnywhere) e digita questo comando: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +L'effetto dovrebbe essere come questo: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Ora ti trovi nella consolle interattiva di Django. E' come il prompt di python ma con un po' di magia di Django in più :). Qui puoi anche utilizzare tutti i comandi Python, ovviamente. + +### Tutti gli oggetti + +Proviamo a rendere visibili tutti i nostri post prima. Puoi farlo con il seguente comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Ops! È comparso un errore. Ci dice che non c'è nessun Post. È corretto -- ci siamo dimenticati di importarlo! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +È semplice: importiamo il modello `Post` da `blog.models`. Proviamo a rendere di nuovo visibili tutti i post: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +È la lista dei post che abbiamo creato prima! Li abbiamo creati utilizzando l'interfaccia di amministrazione di Django. Se volessimo crearne uno con Python, come dovremmo fare? + +### Creare oggetti + +Così si crea un nuovo oggetto Post nel database: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Ma manca un ingrediente qui: `me`. Dobbiamo passare un'istanza del modello `User` come un autore. Come si fa? + +Importiamo il modello User prima: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Quali utenti abbiamo nel nostro database? Prova questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Questo è il superutente che abbiamo creato prima! Ora riceviamo un'istanza dell'utente (regolare questa linea per utilizzare il tuo nome utente): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Come puoi vedere, ora `riceviamo` un `Utente` con un `username` che equivale a 'ola'. Vicino! + +Adesso possiamo finalmente creare il nostro post: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Evviva! Vuoi controllare se funziona? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Eccolo, un altro post nell'elenco! + +### Aggiungi altri post + +Ora puoi divertirti un po' ed aggiungere altri post per vedere come funziona. Aggiungi altri 2 o 3 e vai alla prossima parte. + +### Filtrare gli oggeti + +Larga parte parte dei QuerySets consiste nell'abilità di filtrarli. Diciamo che vogliamo trovare tutti i post il cui autore è ola. Useremo `filter` invece di `all` in `Post.objects.all()`. Nelle parentesi andremo ad inserire tutte le condizioni che un Post deve avere per essere nel nostro queryset. Nella nostra situazione è `autore` che è uguale a `me`. Il modo di scriverlo in Django è `autore=me`. Ora il nostro pezzo di codice ha questo aspetto: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +O magari vogliamo vedere tutti i post che contengono la parola 'titolo' nel campo `titolo`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Nota** ci sono due caratteri di sottolineatura (`_`) tra `titolo` e `contains`. L'ORM di Django usa questa regola per separare i nomi dei field ("title") dalle operazioni e dai filtri ("contains"). Se usi solo un carattere di sottolineatura, otterrai un errore come "FieldError: non è possibile risolvere la parola chiave title_contains". + +Puoi anche ottenere una lista di tutti i post pubblicati. Lo facciamo filtrando tutti i post che hanno una `published_date` impostata in passato: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Purtroppo, il post che abbiamo aggiunto dalla console Python non è ancora pubblicato. Possiamo modificarlo! In primo luogo ottenere un'istanza di un post che vogliamo pubblicare: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Ora pubblicalo con il nostro metodo `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Ora cerca di ottenere di nuovo l'elenco dei post pubblicati (premere il pulsante di freccia in su 3 volte e premere `invio`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Ordinare gli oggetti + +I QuerySet ti permettono anche di ordinare le liste di oggetti. Proviamo a ordinarli in base al campo `created_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Possiamo anche invertire l'ordine aggiungendo `-` all'inizio: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Query complesse attraverso la catena di metodo + +Come hai visto, alcuni metodi su `Post.objects` restituiscono un QuerySet. Gli stessi metodi possono a loro volta essere chiamati su un QuerySet, e poi restituiranno un nuovo QuerySet. Puoi anche combinare QuerySets ** concatenandole** insieme: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +È davvero potente e ti permette di scrivere query piuttosto complesse. + +Fantastico! Ora sei pronta per la prossima parte! Per chiudere la shell, digita questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/it/django_start_project/README.md b/it/django_start_project/README.md new file mode 100644 index 00000000000..b8481f0c665 --- /dev/null +++ b/it/django_start_project/README.md @@ -0,0 +1,260 @@ +# Il tuo primo progetto Django! + +> Parte di questo capitolo è tratto dal tutorial delle Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Parti di questo capitolo si basano sul [django-marcador tutorial](http://django-marcador.keimlink.de/) con licenza Creative Commons Attributions-ShareAlike 4.0 International License. Il tutorial di django-marcador è protetto da copyright di Markus Zapke-Gründemann et al. + +Creeremo un piccolo blog! + +Il primo passo è quello di iniziare un nuovo progetto di Django. Fondamentalmente, questo significa che eseguiremo alcuni script forniti da Django che creerà per noi lo scheletro di un progetto Django. Si tratta solo di un insieme di directory e file che verranno utilizzati dopo. + +I nomi di alcuni file e cartelle sono molto importanti per Django. Non dovresti modificare i nomi dei file che stiamo per creare. Neanche spostarli in un altro posto è una buona idea. Django deve mantenere una determinata struttura per essere in grado di trovare le cose importanti. + +> Ricordati di eseguire tutto nel virtualenv. Se non vedi il prefisso `(myvenv)` nella tua console, devi attivare il tuo virtualenv. Abbiamo spiegato come farlo nel capitolo **installazione Django** nella parte **Lavorando con virtualenv**. Digitando `myvenv\Scripts\activate` su Windows oppure `source myvenv/bin/activate` su Mac OS / Linux farà questo per te. + + + +Dovresti eseguire il seguente comando nella tua console MacmacOS o Linux; **non dimenticarti di aggiungere il punto `.` alla fine! ** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Il punto `.` è cruciale perché dice allo script d'installare Django nell'attuale directory (quindi il punto `.` è un riferimento di abbreviazione). +> +> **Nota** Quando digiti i comandi sopra, ricorda che si digita soltanto la parte che inizia con django-admin oppure ``. Le parti mostrate qui come (myvenv) ~/djangogirls$ e `(myvenv) C:\Users\Name\djangogirls` sono solo esempi del prompt che starà invitando il tuo input sulla tua command line. + + + + + +Dovresti eseguire nella tua console MacOS o Linux il seguente comando; **non dimenticarti di aggiungere il punto `.` alla fine **: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Il punto `.` è cruciale perché dice allo script d'installare Django nell'attuale directory (quindi il punto `.` è un riferimento di abbreviazione). +> +> **Nota** Quando digiti i comandi sopra, ricorda che si digita soltanto la parte che inizia con django-admin oppure ``. Le parti mostrate qui come (myvenv) ~/djangogirls$ e `(myvenv) C:\Users\Name\djangogirls` sono solo esempi del prompt che starà invitando il tuo input sulla tua command line. + + + +`django-admin.py` è uno script che creerà le cartelle ed i file per te. Adesso dovresti avere una struttura di directory simile a questa: + + djangogirls + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **Nota**: nella struttura della directory, vedrai anche la tua cartella `myvenv` che abbiamo creato prima. + +`manage.py` è uno script che aiuta a gestire il sito. Usandolo saremo in grado di avviare un web server sul nostro computer senza dover istallare nient'altro, tra l'altro. + +Il file `settings.py` contiene la configurazione del tuo sito web. + +Ricordi quando abbiamo parlato di un postino che controlla dove rilasciare la lettera? il file `urls.py` contiene una lista di schemi usati da `urlresolver`. + +Ignoriamo gli altri file per ora dal momento che non li modificheremo. L'unica cosa da ricordare è di non cancellarli per sbaglio! + +## Modificare le impostazioni + +Facciamo qualche cambiamento in `mysite/settings.py`. Apri il file usando il code editor che hai istallato prima. + +**Nota**: Ricorda che `settings.py` è un file regolare, come qualsiasi altro. Puoi aprirlo all'interno dell'editor di codice, utilizzando le azioni di menu "file -> apri". Questo dovrebbe portarti la finestra abituale in cui puoi navigare nel file `settings.py` e selezionarlo. In alternativa, puoi aprire il file navigando nella cartella djangogirls sul tuo desktop e facendo clic destro su di esso. Quindi, seleziona l'editor di codice dall'elenco. La selezione dell'editor è importante perché potresti avere altri programmi installati che possono aprire il file ma non ti permetterà di modificarlo. + +Sarebbe bello avere l'ora corretta sul nostro sito Web. Vai alla lista delle zone orarie [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) e copia la tua zona di tempo (TZ) (ad esempio. `Europa/Berlino`). + +In settings.py, trova la riga che contiene `TIME_ZONE` e modificala per scegliere il tuo fuso orario: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Berlin' +``` + +Un codice lingua è costituito dalla lingua, ad esempio`en` per l'inglese o `de` per il tedesco e il codice del paese, ad esempio`de` per la Germania o `ch` per la Svizzera. Se l'inglese non è la tua lingua nativa, puoi aggiungere questo per cambiare i pulsanti e le notifiche predefinite da Django per essere nella tua lingua. Quindi, il pulsante "Annulla" verrebbe tradotto nella lingua che hai definito qui. [Django arriva con molte traduzioni preparate](https://docs.djangoproject.com/en/2.2/ref/settings/#language-code). + +Se vuoi una lingua diversa, cambia il codice lingua modificando la seguente riga: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Dovremo anche aggiungere un percorso per i file statici. (Più tardi scopriremo tutti i file statici e CSS nel tutorial.) Vai alla *end* del file, e appena sotto la voce `STATIC_URL` aggiungi un nuovo nome chiamato `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Quando `DEBUG` è `Vero` e `ALLOWED_HOSTS` è vuoto, l'host è convalidato contro `['localhost', '127.0.0.1', '[::1]']`. Questo non abbina il nostro hostname su PythonAnywhere dopo aver distribuito la nostra applicazione in modo da modificare le seguenti impostazioni: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Nota**: se stai usando un Chromebook, aggiungi questa linea nella parte inferiore del file settings.py: `MESSAGE_STORAGE = 'django.contrib.storage.session.SessionStorage'` +> +> Aggiunge anche `.amazonaws.com` a `ALLOWED_HOSTS` se stai usando cloud9 +> +> Se stai presentando il tuo progetto su `Glitch.com`, bisogna proteggere la chiave segreta di Django, che deve rimanere confidenziale (altrimenti chiunque faccia un remix del tuo progetto potrebbe vederla): +> +> - Prima di tutto, si crea una chiave segreta casuale. Apri nuovamente il terminale Glitch e digita il comando seguente: +> +> {% filename %}command-line{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> Il comando dovrebbe mostrare una lunga stringa casuale, perfetta da usare come chiave segreta per il tuo nuovo sito web Django. Si incolla poi questa chiave in un file `.env` che Glitch mostrerà solamente se sei il proprietario del sito web. +> +> - Crea un file `.env` alla base del tuo progetto e aggiungi al suo interno la proprietà seguente: +> +> {% filename %}.env{% endfilename %} +> +> ```bash +> # Qui, all'interno delle virgolette, puoi tagliare e incollare la chiave casuale generata precedentemente +> SECRET='3!0k#7ds5mp^-x$lqs2%le6v97h#@xopab&oj5y7d=hxe511jl' +> ``` +> +> - Aggiorna poi il file delle impostazioni di Django per inserire questo valore segreto e impostare il nome del sito web: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - Poco più avanti nello stesso file, inserisci il nome del tuo nuovo sito web Glitch: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> Il valore `PROJECT_DOMAIN` è generato automaticamente da Glitch. Corrisponderà al nome del tuo progetto. + +## Imposta un database + +Ci sono un sacco di software di database diversi che possono immagazzinare dati per il tuo sito. Noi useremo quello di default, `sqlite3`. + +È già impostato in questa parte del file `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Per creare un database per il nostro blog, eseguiamo questo nella console: `python manage.py migrate` (abbiamo bisogno di essere nella directory `djangogirls` che contiene il file `manage.py`). Se funziona, dovresti vedere qualcosa di simile: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +E abbiamo finito! Tempo di avviare il server web e vedere se il nostro sito Web funziona! + +## Avvio del server web + +Devi essere nella directory che contiene il file di `manage.py` (la directory `djangogirls`). Nella console, possiamo avviare il server web eseguendo `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Se invece stai usando un Chromebook, digita questo comando: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +o questo se stai usando Glitch: + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +Se usi Windows e il comando `UnicodeDecodeError` non funziona, puoi usare questo: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Ora devi solo controllare se il tuo sito web è in esecuzione. Apri il tuo browser (Firefox, Chrome, Safari, Internet Explorer o quello che utilizzi di solito) e inserisci questo indirizzo: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Se stai utilizzando un Chromebook e Cloud9, seleziona invece l'URL nella finestra a comparsa che dovrebbe apparire nell'angolo in alto a destra della finestra di comando dove il server web è in esecuzione. L'URL sarà simile a questo: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +oppure su Glitch: + + https://name-of-your-glitch-project.glitch.me + + +Congratulazioni! Hai appena creato il tuo primo sito web e lo hai avviato usando un server web! Non è fantastico? + +![Installazione completata!](images/install_worked.png) + +N.B. Una finestra di comando può eseguire solo una cosa alla volta e la finestra di comando che hai aperto in precedenza sta eseguendo il server web. Finché il server web è in esecuzione e in attesa di ulteriori richieste in arrivo, il terminale ammetterà del testo nuovo, ma non eseguirà nuovi comandi. + +> Abbiamo esaminato come funzionano i server web nel capitolo **Come funziona il capitolo** . + +Per digitare ulteriori comandi mentre il server web è in esecuzione, puoi aprire una nuova finestra terminale e attivare il tuo virtualenv (per rivedere le istruzioni su come aprire una seconda finestra terminale, vedi [Introduction to the command line](../intro_to_command_line/README.md)). Per arrestare il server web, devi tornare alla finestra dove è in esecuzione e premere CTRL+C - ovvero i tasti Control e C insieme (su Windows potresti dover premere Ctrl+Break). + +Sei pronto per il prossimo passaggio? È ora di creare un po' di contenuti! \ No newline at end of file diff --git a/it/django_start_project/images/install_worked.png b/it/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/it/django_start_project/images/install_worked.png differ diff --git a/it/django_templates/README.md b/it/django_templates/README.md new file mode 100644 index 00000000000..ae8a2beed24 --- /dev/null +++ b/it/django_templates/README.md @@ -0,0 +1,108 @@ +# I templates di Django + +È l'ora di visualizzare alcuni dati! Django ci dà alcuni **template tags** già pronti per farlo. + +## Cosa sono i template tags? + +In HTML non puoi scrivere codice Python, perché i browser non lo capiscono. Essi conoscono solo l'HTML. Noi sappiamo che l'HTML è piuttosto statico, mentre Python è molto più dinamico. + +I **Django template tags** ci permettono di trasferire le cose simili a Python in HTML, in modo che tu possa costruire siti web in modo più veloce e facile. Accidenti! + +## Mostra il template con la lista di post + +Nel capitolo precedente abbiamo dato al nostro template una lista di posts nella variabile `posts`. Adesso lo mostreremo nell'HTML. + +Per stampare una variabile nel template Django, usiamo doppie parentesi graffe con il nome della variabile all'interno, così: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Prova ad inserirlo nel tuo template `blog/templates/blog/post_list.html`. Sostituisci tutto dal secondo `
` al terzo `
` con `{{ posts }}`. Salva il file e aggiorna la pagina per vedere i risultati: + +![Figura 13.1](images/step1.png) + +Come vedi, quello che abbiamo è: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Significa che Django lo vede come una lista di oggetti. Ricordi dalla **Introduzione a Python** come possiamo rendere visibili le liste? Sì, con for loops! In un template Django si fanno così: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +    {{ post }} +{% endfor %} +``` + +Prova ad inserirlo nel tuo template. + +![Figura 13.2](images/step2.png) + +Funziona! Ma noi vogliamo che vengano mostrate come i post statici che abbiamo creato prima nel capitolo **Introduzione ad HTML**. Puoi mischiare i tag HTML con quelli di template. Il nostro `body` avrà questo aspetto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Tutto quello che hai messo tra `{% for %}` e `{% endfor %}` Sarà ripetuto per ciascun oggetto della lista. Aggiorna la tua pagina:{% endraw %} + +![Figura 13.3](images/step3.png) + +Ti sei accorto che abbiamo utilizzato una notazione leggermente diversa questa volta `{{ post.title }}` oppure `{{ post.text }}`)? Stiamo introducendo i dati in ciascuno dei campi definiti nel nostro modello `Post`. Inoltre il comando `|linebreaks` introduce un filtro che traduce gli accapo (la pressione del tasto "invio" sulla tastiera) nel loro equivalente in HTML. + +## Un' ultima cosa + +Sarebbe bello vedere se il tuo sito funziona ancora su Internet, giusto? Proviamo a fare il deploy su PythonAnywhere di nuovo. Ecco un riepilogo dei passaggi... + +* Prima di tutto, fai il push del tuo codice verso Github + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Poi, ritorna su [PythonAnywhere](https://www.pythonanywhere.com/consoles/) e vai alla tua **console di Bash** (o iniziane una nuova) ed esegui: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Ricordati di sostituire `` con il sottodominio di PythonAnywhere, senza le parentesi angolo.) + +* Infine, fai un salto alla [scheda Web](https://www.pythonanywhere.com/web_app_setup/) e premi **Reload** sulla tua web app. (Per raggiungere altre pagine PythonAnywhere dalla console, usa il pulsante menu nell'angolo in alto a destra.) Il tuo aggiornamento dovrebbe essere attivo su https://subdomain.pythonanywhere.com -- scoprilo nel browser! Se i post che hai sul computer non combaciano con quelli presenti su PythonAnywhere, va tutto bene. Il database su PythonAnywhere e quello sul tuo computer sono diversi a differenza degli altri file. + +Congratulazioni! Andiamo avanti e proviamo ad aggiungere nuovi post nel tuo admin di Django (ricordati di aggiungere published_date!). Assicurati di essere nell'admin del tuo sito su pythonanywhere, https://subdomain.pythonanywhere.com/admin. Quindi aggiorna la pagina per vedere se i post sono comparsi. + +Funziona come un incantesimo? Ne siamo fieri! Staccati dal computer per un po', ti sei guadagnato/a una pausa. :) + +![Figura 13.4](images/donut.png) \ No newline at end of file diff --git a/it/django_templates/images/donut.png b/it/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/it/django_templates/images/donut.png differ diff --git a/it/django_templates/images/step1.png b/it/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/it/django_templates/images/step1.png differ diff --git a/it/django_templates/images/step2.png b/it/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/it/django_templates/images/step2.png differ diff --git a/it/django_templates/images/step3.png b/it/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/it/django_templates/images/step3.png differ diff --git a/it/django_urls/README.md b/it/django_urls/README.md new file mode 100644 index 00000000000..626a37d85b0 --- /dev/null +++ b/it/django_urls/README.md @@ -0,0 +1,103 @@ +# Django URL + +Stiamo per costruire la nostra pagina web: una homepage per il tuo blog! Ma prima, impariamo un po' di più sulle url di Django. + +## Che cos'è un URL? + +Una URL è semplicemente un indirizzo web. Puoi vedere una URL ogni volta che visiti un sito web - si vede nella barra degli indirizzi del tuo browser. (sì. (Ma certo che sì! `127.0.0.1:8000` is a URL! Anche `https://djangogirls.org` è una URL.) + +![URL](images/url.png) + +Ogni pagina internet ha bisogno della sua URL. In questo modo la tua applicazione sa cosa deve mostrare a un utente che visita una URL. In Django usiamo qualcosa chiamato `URLconf` ( configurazione dell'URL). URLconf è un insieme di modelli che Django cercherà di far corrispondere con l'URL ricevuta per trovare la view giusta. + +## Come funzionano le URL in Django? + +Apriamo il file `mysite/urls.py` nel code editor che hai scelto e vediamo com'è: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import path, include +from django.urls import admin + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Come puoi vedere, Django ha già predisposto qualcosa per noi in questo file. + +Le line tra un triplo apice (`'''` o `"""`) sono chiamate docstrings - puoi scriverle all'inizio di file, classi o metodi per descrivere cosa fanno. Verranno ignorati da Python. + +L'admin URL , che hai visto nel capitolo precedente è già qui: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Questo significa che per ogni URL che comincia con `admin/` Django troverà la corrispondente *view*. In questo caso stiamo includendo un sacco di admin URL così che non sia tutto imballato in questo piccolo file - è più leggibile e più pulito. + +## Il tuo primo URL Django! + +E' ora di creare la tua prima URL. Vogliamo usare http://127.0.0.1:8000/ come homepage per il nostro blog e visualizzare il nostro elenco di post. + +Vogliamo anche mantenere il file di `mysite/urls.py` pulito, quindi importeremo le url dalla nostra applicazione `blog` sul file principale `mysite/urls.py`. + +Vai avanti, aggiungi una linea che importerà `blog.urls`. Dovrai anche cambiare la riga `da django.urls…` perché stiamo usando la funzione `include` qui, quindi dovrai aggiungere questa importazione alla riga. + +Il tuo file `mysite/urls.py` ora dovrebbe avere questo aspetto: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Ora Django reindirizzerà tutto ciò che viene da 'http://127.0.0.1:8000/' verso `blog.urls` e cercherà qui ulteriori istruzioni. + +## blog.urls + +Crea un nuovo file vuoto chiamato `urls.py` nella cartella `blog` e aprilo nell'editor di codice. Tutto a destra! Aggiungi queste prime due righe: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Qui abbiamo importato la funzione `url` di Django e tutte le nostre `views` dalla applicazione `blog` (Non abbiamo ancora nulla, ma ci arriveremo fra un minuto!) + +Dopo di che, possiamo aggiungere il nostro primo modello di URL: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Come vedi, stiamo assegnando una `view` nominata `post_list` alla URL `^$`. Questo modello dell'URL corrisponderà ad una stringa vuota ed al risolutore URL di Django ignorerà il nome del dominio (es., http://127.0.0.1:8000/) che prefissa il percorso URL completo. Questo schema dirà a Django che `views.post_list` è il posto giusto dove andare se qualcuno entra nel tuo sito all'indirizzo 'http://127.0.0.1:8000/'. + +L'ultima parte `name='post_list'` è il nome dell'URL che verrà usata per identificare la view. Può avere lo stesso del nome della view, ma può anche essere qualcosa di completamente diverso. Useremo le URL rinominate successivamente nel progetto quindi è importante dare un nome a ciascuna URL nell'app. Inoltre dovremmo cercare di mantenere i nomi delle URL unici e facili da ricordare. + +Se provi a guardare adesso http://127.0.0.1:8000/, troverai un qualche tipo di messaggio come 'pagina non disponibile'. Questo perché il server (ricordi quando hai digitato `runserver`?) non è più attivo. Per capirne il motivo dai un occhiata alla console del tuo server. + +![Errore](images/error1.png) + +La tua console sta mostrando un errore, ma non preoccuparti – è davvero molto utile: ti dice che c'è **nessun attributo 'post_list'**. È il nome della *view* che Django prova a cercare e usare, ma non l'abbiamo ancora creata. In questa fase, anche il tuo `/admin/` non funzionerà. Non ti preoccupare, ci arriveremo. Se vedi un altro messaggio di errore, prova a riavviare il server web. Per farlo, nella finestra della console che esegue il server web, interrompilo premendo Ctrl+C (i tasti Control e C insieme). Su Windows, potresti dover premere Ctrl+Break. Poi devi riavviare il server web eseguendo un comando `python manage.py runserver`. + +> Se vuoi sapere di più su URLconfs di Django, guarda alla documentazione ufficiale: https://docs.djangoproject.com/en/2.2/topics/http/urls/ \ No newline at end of file diff --git a/it/django_urls/images/error1.png b/it/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/it/django_urls/images/error1.png differ diff --git a/it/django_urls/images/url.png b/it/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/it/django_urls/images/url.png differ diff --git a/it/django_views/README.md b/it/django_views/README.md new file mode 100644 index 00000000000..0f76223f653 --- /dev/null +++ b/it/django_views/README.md @@ -0,0 +1,44 @@ +# Le viste di Django – è arrivata l'ora di creare! + +E' ora di liberarsi di quel bug che abbiamo creato nel capitolo precedente! :) + +Una *view* è un posto dove viene messa la "logica" della nostra applicazione. Essa richiederà informazioni dal `modello` che hai creato prima e lo passerà ad un `template`. Creeremo un template nel prossimo capitolo. Le views sono solo metodi di Python un po' più complicati di quelli che abbiamo descritto nel capitolo **Introduzione a Python**. + +Le views vengono collocate nel file `views.py`. Noi aggiungeremo le nostre *views* nel file `blog/views.py`. + +## blog/views.py + +OK, apriamo questo file e scopriamo cosa c'è dentro: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Crea le tue views qui. +``` + +Non c'è altro qui. + +Ricorda che le linee che iniziano con `#` sono commenti – questo significa che queste linee non saranno gestite da Python. + +Creiamo una *vista* come suggerisce il commento. Aggiungi la seguente vista minima qui sotto: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Come puoi vedere, abbiamo creato una funzione (`def`) chiamata `post_list` che prende `request` e restituisce `return` una funzione `render` che renderizza (mette insieme) il nostro template `blog/post_list.html`. + +Salva il file, vai su http://127.0.0.1:8000/ e guarda cosa abbiamo ottenuto. + +Un altro errore! Leggi cosa sta succedendo adesso: + +![Errore](images/error.png) + +Questo mostra che almeno il server è ancora attivo, ma ancora non sembra corretto, vero? Non preoccuparti, è solo una pagina di errore, nulla di cui aver paura! Come l messaggi di errore nella console, sono davvero utili. Puoi leggere il *TemplateDoesNotExist*. Correggiamo questo bug e creiamo un template nel capitolo successivo! + +> Scopri di più sulle visualizzazioni di Django leggendo la documentazione ufficiale: https://docs.djangoproject.com/en/2.2/topics/http/views/ \ No newline at end of file diff --git a/it/django_views/images/error.png b/it/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/it/django_views/images/error.png differ diff --git a/it/dynamic_data_in_templates/README.md b/it/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..91f554eb781 --- /dev/null +++ b/it/dynamic_data_in_templates/README.md @@ -0,0 +1,84 @@ +# I dati dinamici nei templates + +Abbiamo diversi pezzi: il modello `Post` è definito in `models.py`, abbiamo `post_list` nel file `views.py` ed abbiamo aggiunto il template. Ma come faremo a far comparire i nostri post nel nostro template HTML? Perché è quello che vogliamo: prendere qualche contenuto (modelli salvati nel database) e farlo vedere in modo carino nel nostro template, giusto? + +Questo è esattamente quello che le *views* dovrebbero fare: collegare i modelli ed i template. Nella nostra `post_list` *view* avremo bisogno di prendere i modelli che vogliamo far vedere e passarli nel template. Nella *view* decidiamo cosa (modello) renderemo visibile nel template. + +OK, quindi come facciamo a farlo? + +Dobbiamo aprire il nostro `blog/views.py`. Per ora `post_list` *view* si vede così: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): +    return render(request, 'blog/post_list.html', {}) +``` + +Ricordi quando abbiamo parlato di includere codice scritto in diversi file? Ora è il momento di includere il model che abbiamo scritto in `models.py`. Aggiungeremo questa riga `from .models import Post` così: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Il punto prima di `models` significa *directory attuale* oppure *applicazione attuale*. Sia `views.py` che `models.py` sono nella stessa cartella. Questo significa che possiamo usare `.` seguito dal nome del file (senza `.py`). Allora importiamo il nome del modello (`Post`). + +Cos'altro bisogna fare? Per poter prendere i post del blog dal modello`Post` ci serve una cosa chiamata `QuerySet`. + +## QuerySet + +Dovresti già sapere come funziona QuerySet. Ne abbiamo parlato nel capitolo [Django ORM (QuerySets) ](../django_orm/README.md). + +Quindi ora vogliamo i post del blog che sono pubblicati ordinati per `published_date`, giusto? Lo abbiamo già fatto nel capitolo sulle QuerySet! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Quindi, apriamo il file `blog/views.py` nell'editor del codice, e aggiungiamo questo codice alla funzione `def post_list(request)` -- ma non dimenticare di aggiungere prima `da django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Per mostrare il nostro QuerySet sull'elenco dei post del nostro blog, ci sono rimaste due cose da fare: + +1. Passare il QuerySet dei `post` al contesto del modello, modificando la chiamata della funzione di `render`: Lo faremo adesso. +2. Modifica il modello per visualizzare il QuerySet dei `post`. Copriremo ciò in un capitolo successivo. + +Nota che abbiamo creato una *variabile* per il nostro QuerySet: `posts`. Vedila come il nome del nostro QuerySet. Da qui in avanti possiamo riferirci ad esso con questo nome. + +Nella funzione `render` abbiamo già un parametro con `request` (quindi tutto quello che riceviamo dal nostro utente via internet) e un file template `'blog/post_list.html'`). Nell'ultimo parametro, che è simile a questo: `{}` possiamo aggiungere cose che il template possa utilizzare. Dobbiamo dargli un nome (ci atterremo a `'posts'` per il momento). :) Si vede così: `{'posts': posts}`. Ti preghiamo di notare che la parte prima di `:` è una stringa; devi metterla tra virgolette. + +Finalmente il nostro file `blog/views.py` dovrebbe essere così: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +E' tutto! Ora di tornare al nostro template e rendere visibile questo QuerySet! + +Vuoi leggere un poco di più su QuerySets in Django? Dovresti guardare qui: https://docs.djangoproject.com/en/2.2/ref/models/querysets/ \ No newline at end of file diff --git a/it/extend_your_application/README.md b/it/extend_your_application/README.md new file mode 100644 index 00000000000..fd4e75ba793 --- /dev/null +++ b/it/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Estendi la tua applicazione + +Abbiamo già completato tutti i passaggi differenti necessari per la creazione del nostro sito web: sappiamo come scrivere un modello, un URL, una vista ed un modello. Sappiamo anche come rendere carino il nostro sito web. + +Ora di far pratica! + +La prima cosa di cui abbiamo bisogno nel nostro blog è, ovviamente, una pagina per rendere visibile un post, vero? + +Abbiamo già un modello dei `Post`, quindi non abbiamo bisogno di aggiungere niente in `models.py`. + +## Creare un link di template verso la pagina di dettaglio di un post + +Cominceremo aggiungendo un link all'interno del file `blog/templates/blog/post_list.html`. Per ora dovrebbe avere questo aspetto: Aprilo nell'editor di codice, e finora dovrebbe sembrare così: {% filename %}blog/template/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}Vogliamo creare un link che dal titolo di un post facente parte dell'elenco di articoli porti alla pagina di dettaglio. Cambiamo `

{{ post.title }}

` così che linki alla pagina di dettaglio del post:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}È arrivata l'ora di spiegare il misterioso `{% url 'post_detail' pk=post.pk %}`. Come avrai capito, il simbolo `{% %}` significa che stiamo usando i tag del template di Django. Questa volta ne useremo uno che creerà una URL per noi!{% endraw %} + +La parte `post_detail` significa che Django si aspetta un URL in `blog/urls.py` con nome=post_detail + +E come si può parlare di `pk=post.pk`? `pk` è breve per il tasto principale, che è un identificatore unico per ogni registro in un database. Ogni modello di Django ha un campo che serve come tasto principale, e qualsiasi altro nome ha, è anche referenziabile come "pk". Poiché non abbiamo specificato un tasto principale nel nostro modello `Post`, Django ne crea uno per noi (di default, un campo nominato "id" che mantiene un numero che aumenta per ogni registro, es. 1, 2, 3) e lo aggiunge come un campo per ognuno dei nostri post. Accediamo al tasto principale scrivendo `post.pk`, allo stesso modo in cui accediamo agli altri campi (`titolo`, `autore`, etc.) nel nostro oggetto del `Post`! + +Adesso quando andremo all'indirizzo: http://127.0.0.1:8000/ avremo un errore (come sapevamo, dal momento che non abbiamo una URL oppure una *view* per `post_detail`). Avrà questo aspetto: + +![Errore: nessuna corrispondenza inversa](images/no_reverse_match2.png) + +## Crea una URL per i dettagli di un post + +Creiamo una URL in `urls.py` per il nostro `post_detail` *view*! + +Vogliamo che il nostro primo post venga visualizzato a questo **URL **: http://127.0.0.1:8000/post/1/ + +Facciamo sì che l'URL nel file `blog/urls.py` punti Django ad una *view* chiamata `post_detail`, che mostrerà un intero post. Apri il file `blog/urls.py` nell'editor del codice e aggiungi la riga `path('post//', view.post_detail, name='post_detail'),` così che il file assomiglia a questo: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Questa parte `post//` specifica un modello URL – lo spiegheremo per te: + +- `post/` significa che l'URL deve iniziare con la parola **post** seguita da **/**. Fin qui tutto bene. +- `` – questa parte è più difficile. Significa che Django si aspetta un valore intero e lo trasferirà in una vista come variabile chiamata `pk`. +- `/` – abbiamo bisogno di un **/** di nuovo prima di completare l'URL. + +Ciò significa che se digiti `http://127.0.0.1:8000/post/5/` nel tuo browser, Django capirà che stai cercando una *view* chiamata `post_detail` e trasferirà l'informazione che `pk` è uguale a `5` a quella *view*. + +Ok, abbiamo aggiunto un nuovo pattern URL in `blog/urls.py`! Prova ad aggiornare la pagina: http://127.0.0.1:8000/ Boom! Il server ha smesso di funzionare di nuovo. Diamo un occhiata alla console - come previsto, c'è una altro errore! + +![Errore Attributo](images/attribute_error2.png) + +Ti ricordi di quale è il prossimo passo? Ma certo: aggiungere una view! + +## Aggiungi una view del post + +Questa volta alla nostra *view* viene data un altro parametro `pk`. La nostra *view* deve prenderlo, vero? Quindi definiremo la nostra funzione come `def post_detail(request, pk):`. Nota che questo parametro deve avere lo stesso esatto nome di quello specificato in `urls` (`pk`). Nota anche che omettere questa variabile è scorretto e risulterà in un errore! + +Ora, noi vogliamo ottenere un' unico post. Per farlo possiamo utilizzare le queryset così: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Ma questo codice presenta un problema. Se non c'è `Post` con `primary key` (`pk`) otterremo un errore bruttissimo! + +![Errore: non esiste](images/does_not_exist2.png) + +Noi non lo vogliamo! Ma, senza dubbio, Django ha qualcosa che si occuperà del problema per noi: `get_object_or_404`. Nel caso in cui non ci sia `Post` con la data `pk` mostrerà una pagina molto più carina (chiamata `Page Not Found 404`. + +![Pagina non trovata](images/404_2.png) + +La buona notizia è che in realtà puoi creare la tua pagina `Page not found` modificarla come vuoi e darle un bell'aspetto. Ma non è importantissimo in questo momento, quindi salteremo questa parte. + +Ok, è arrivata l'ora di aggiungere una *view* al nostro file `views.py`! + +In `blog/urls.py` abbiamo creato una regola URL chiamata `post_detail` che si riferisce a una vista chiamata `views.post_detail`. Ciò significa che Django si aspetta una funzione di visualizzazione chiamata `post_detail` all'interno di `blog/views.py`. + +Apri il file `blog/views.py` e aggiungi quanto segue con il resto delle importazioni `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +E alla fine del file aggiungeremo la nostra *vista*: + +{% 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}) +``` + +Sì. È ora di aggiornare la pagina: http://127.0.0.1:8000/ + +![Visualizzazione elenco post](images/post_list2.png) + +Ha funzionato! Ma cosa succede se clicchi su un link nel titolo del post? + +![Errore: il template non esiste](images/template_does_not_exist2.png) + +Oh no! Un altro errore! Ma sappiamo già come occuparcene, giusto? Dobbiamo aggiungere un template! + +## Crea un template per il post detail + +Creeremo un file in `blog/templates/blog` chiamato `post_detail.html`. + +Inserisci il codice seguente: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Stiamo estendendo ancora una volta il template di base. `base.html`. Nel blocco `content` vogliamo mostrare una published_date del post (se esiste), un titolo ed il testo. Ma dovremmo discutere di alcune cose importanti, vero? + +{% raw %}`{% if ... %}... {% endif %}` è un tag di template che possiamo utilizzare quando vogliamo controllare qualcosa (ricordi if. (Ricorda `se... altro ...` da **Introduzione al capitolo Python** ?) In questo scenario vogliamo controllare se il post `published_date` non è vuoto.{% endraw %} + +Ok, possiamo aggiornare la nostra pagina e vedere se `TemplateDoesNotExist` non c'è più. + +![Pagina di dettaglio del post](images/post_detail2.png) + +Si! Ha funzionato! + +# Tempo di Deploy! + +Sarebbe bello vedere se il tuo sito web funziona ancora su PythonAnywhere, giusto? Proviamo a fare nuovamente il deploy. + +{% filename %}command-line{% endfilename %} + + $ 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 + + +Poi, in una [console PythonAnywhere Bash](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Ricordati di sostituire `` con il sottodominio di PythonAnywhere, senza le parentesi angolo.) + +## Aggiornamento file statici sul server + +Server come PythonAnywhere amano trattare "file statici" (come file CSS) in modo diverso dai file Python, perché possono ottimizzare per essere caricati più velocemente. Di conseguenza, ogni volta che modifichiamo i nostri file CSS, dobbiamo eseguire un comando extra sul server per dirlo per aggiornarli. Il comando è chiamato `colleziona`. + +Inizia attivando il tuo virtualenv se non è ancora attivo da prima (PythonAnywhere utilizza un comando chiamato `workon` per farlo, è proprio come il comando `sorgente myenv/bin/activate` che usi sul tuo computer): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +Il comando `manage.py collectstatic` è un po' come `manage.py migrate`. Facciamo alcune modifiche al nostro codice, e poi diciamo a Django a *applica* queste modifiche, sia alla collezione di file statici del server, sia al database. + +In ogni caso, siamo pronti a salire sulla pagina [ "Web"](https://www.pythonanywhere.com/web_app_setup/) (dal pulsante menu in alto a destra della console) e colpire **Ricarica**, e poi guarda la pagina https://subdomain.pythonanywhere.com per vedere il risultato. + +Ecco fatto! Congratulazioni! \ No newline at end of file diff --git a/it/extend_your_application/images/404_2.png b/it/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/it/extend_your_application/images/404_2.png differ diff --git a/it/extend_your_application/images/attribute_error2.png b/it/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/it/extend_your_application/images/attribute_error2.png differ diff --git a/it/extend_your_application/images/does_not_exist2.png b/it/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/it/extend_your_application/images/does_not_exist2.png differ diff --git a/it/extend_your_application/images/no_reverse_match2.png b/it/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/it/extend_your_application/images/no_reverse_match2.png differ diff --git a/it/extend_your_application/images/post_detail2.png b/it/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/it/extend_your_application/images/post_detail2.png differ diff --git a/it/extend_your_application/images/post_list2.png b/it/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/it/extend_your_application/images/post_list2.png differ diff --git a/it/extend_your_application/images/template_does_not_exist2.png b/it/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/it/extend_your_application/images/template_does_not_exist2.png differ diff --git a/it/how_the_internet_works/README.md b/it/how_the_internet_works/README.md new file mode 100644 index 00000000000..1669588aca9 --- /dev/null +++ b/it/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Come funziona Internet + +> Per le lettrici a casa: questo capitolo viene trattato nel video [Come funziona Internet](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Questo capitolo trae ispirazione dal discorso di Jessica McKellar "Come funziona Internet" (http://web.mit.edu/jesstess/www/). + +Scommettiamo che usi Internet tutti i giorni. Ma sai davvero cosa succede quando digiti un indirizzo come https://djangogirls.org nel tuo browser e premi `invio`? + +La prima cosa da capire è che un sito è è composto da un gruppo di file salvati su un hard disk. Tuttavia, c'è una caratteristica tipica dei siti web: includono un codice chiamato HTML. + +Se non hai familiarità con la programmazione, può essere difficile da cogliere HTML all'inizio, ma i tuoi web browser (come Chrome, Safari, Firefox, ecc) lo adorano. I browser sono progettati per capire questo codice, seguire le sue istruzioni e presentare questi file che costituiscono il tuo sito web esattamente nel modo desiderato. + +Come per tutti i file, dobbiamo archiviare i file HTML da qualche parte su un hard disk. Per l'Internet, utilizziamo computer speciali e potenti chiamati *servers*. Non hanno uno schermo, un mouse o una tastiera, perché il loro unico proposito è quello di archiviare i dati e fornirli. Per questo vengono chiamati *server* -- perché *servono* i tuoi dati. + +Ok, ma tu vuoi sapere com'è Internet, vero? + +Abbiamo creato un'immagine! Ecco: + +![Figura 1.1](images/internet_1.png) + +Sembra complicato, vero? Infatti è una rete di macchine collegate (i *server* di cui parlavamo prima). Centinaia di migliaia di macchine! Molti, molti chilometri di cavi in tutto il mondo! Puoi visitare un sito di Submarine Cable Map (http://submarinecablemap.com) per vedere quanto è complicata la rete. Ecco uno screenshot dal sito web: + +![Figura 1.2](images/internet_3.png) + +E' affascinante, non è vero? Ma ovviamente, non è possibile avere un cavo fra ogni macchina collegata ad Internet. Quindi, per raggiungere una macchina (per esempio quella in cui è salvato https://djangogirls.org) dobbiamo far passare una richiesta attraverso a molte, molte macchine diverse. + +Assomiglia a questo: + +![Figura 1.3](images/internet_2.png) + +Immagina che quando digiti https://djangogirls.org invii una lettera che dice: "Caro Django Girls, voglio vedere il sito djangogirls.org. inviamelo, per favore!" + +La tua lettera arriva nell'ufficio postale più vicino a te. Dopo di che va in un altro ufficio postale, che è un po' più vicino al tuo destinatario, poi in un altro ed in un altro ancora finché viene consegnato a destinazione. L'unica cosa è che se invii molte lettere (*pacchi di dati*) allo stesso posto, potrebbero attraversare uffici postali totalmente diversi (*routers*). Questo dipende da come vengono distribuiti presso ogni ufficio. + +![Figura 1.4](images/internet_4.png) + +Funziona così - invii un messaggio e aspetti una risposta. Solo che al posto di carta e penna usi byte di dati, ma il concetto è lo stesso! + +Al posto di indirizzi fisici, ovvero del nome della via, della città, del Cap, e del nome del Paese, usiamo indirizzi IP. Il tuo computer prima chiede il DNS (Domain Name System) per tradurre djangogirls.org in un indirizzo IP. Funziona un po' come i vecchi elenchi telefonici, dove puoi cercare il nome della persona che vuoi contattare e trovare il numero telefonico e l'indirizzo. + +Quando invii una lettera, deve avere determinate caratteristiche per essere consegnata correttamente: un indirizzo, un timbro, ecc. Inoltre utilizzi un linguaggio che il destinatario è in grado di capire, vero? Lo stesso vale per i *pacchi di dati* che invii per vedere un sito Web. Usiamo un protocollo chiamato HTTP (Hypertext Transfer Protocol). + +Quindi, praticamente, quando hai un sito, devi avere un *server* (macchina) dove archiviarlo. Quando il *server* riceve una *richiesta* (in una lettera), restituisce il tuo sito (in un'altra lettera). + +Dal momento che questo è il tutorial di Django, ti starai chiedendo che cosa fa Django. Quando invii una risposta, non vuoi inviare la stessa cosa a tutti. E' molto meglio se le tue lettere son personalizzate, soprattutto per la persona che ti ha appena scritto, giusto? Django ti aiuta con la creazione di queste interessanti lettere personalizzate. :) + +Basta parlare, è arrivata l'ora di creare! \ No newline at end of file diff --git a/it/how_the_internet_works/images/internet_1.png b/it/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/it/how_the_internet_works/images/internet_1.png differ diff --git a/it/how_the_internet_works/images/internet_2.png b/it/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/it/how_the_internet_works/images/internet_2.png differ diff --git a/it/how_the_internet_works/images/internet_3.png b/it/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/it/how_the_internet_works/images/internet_3.png differ diff --git a/it/how_the_internet_works/images/internet_4.png b/it/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/it/how_the_internet_works/images/internet_4.png differ diff --git a/it/html/README.md b/it/html/README.md new file mode 100644 index 00000000000..8a413a18f81 --- /dev/null +++ b/it/html/README.md @@ -0,0 +1,227 @@ +# Introduzione all'HTML + +Ti potresti chiedere, cos'è un template? + +Un template è un file che possiamo riutilizzare per presentare informazioni diverse in un formato consistente - per esempio, potresti utilizzare un template per aiutarti a scrivere una lettera, perché anche se ciascuna lettera potrebbe contenere un messaggio diverso ed essere a sua volta indirizzata ad una persona diversa, condivideranno lo stesso formato. + +Un template Django viene descritto in un linguaggio chiamato HTML (è lo stesso HTML che abbiamo menzionato nel primo capitolo **Come funziona l'Internet**). + +## Cos'è l'HTML? + +HTML è un semplice codice che viene interpretato dal tuo browser - come Chrome, Firefox o Safari - per rendere un sito web visibile all'utente. + +HTML sta per "HyperText Markup Language". **HyperText** significa che è un tipo di testo che supporta i collegamenti ipertestuali tra le pagine. **Markup** significa che abbiamo preso un documento e l'abbiamo contrassegnato con il codice per dire a qualcosa (in questo caso, un browser) come interpretare la pagina. Il codice HTML è costruito con **tags**, ognuno inizia con `<` e finisce con `>`. Questi tag rappresentano gli **elementi** di markup. + +## Il tuo primo template! + +Creare un template significa creare un file template. Tutto è un file, vero? Probabilmente l'hai già notato. + +I template vengono salvati in una cartella `blog/templates/blog`. Quindi prima crea una directory chiamata `templates` nella directory del tuo blog. Quindi crea un'altra directory chiamata `blog` all'interno della tua directory templates: + + blog + └───templates + └───blog + + +(Ti chiederai perché abbiamo bisogno di due directory chiamate entrambe `blog` - come scoprirai più tardi, si tratta semplicemente di una denominazione convenzionale che serve rendere la vita più facile.) + +E ora crea un file `post_list.html` nella directory `blog/templates/blog` (lascialo in bianco per adesso). + +Guarda che aspetto ha il tuo sito adesso: http://127.0.0.1:8000/ + +> Se hai ancora l'errore `TemplateDoesNotExist`, prova a riavviare il tuo server. Vai nella command line, arresta il server premendo Ctrl+C ( I tasti Control e C insieme) e riavvialo utilizzando il comando `python manage.py runserver`. + +![Figura 11.1](images/step1.png) + +L'errore dovrebbe essere stato corretto! Congratulazioni :) Tuttavia, il tuo sito in realtà non sta pubblicando niente eccetto una pagina vuota, perché anche il tuo template è vuoto. Bisogna sistemarlo. + +Apri il nuovo file nell'editor di codice e aggiungi quanto segue: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + +

Hi there!

+

It works!

+ + +``` + +Quindi come appare il tuo sito ora? clicca per scoprirlo: http://127.0.0.1:8000/ + +![Figura 11.2](images/step3.png) + +Ha funzionato! Ottimo lavoro! :) + +* La riga `` non è un tag HTML. Dichiara solo il tipo di documento. Qui, informa il browser che il tipo di documento è [HTML5](https://html.spec.whatwg.org/#the-doctype). Questo è sempre l'inizio di qualsiasi file HTML5. +* Il tag più semplice, ``, è sempre l'inizio del contenuto html e `` è sempre la fine. Come puoi vedere, l'intero contenuto del sito va tra il tag iniziale `` ed il tag conclusivo `` +* `

` è un tag per gli elementi paragrafo; `

` conclude ogni paragrafo + +## Testa e corpo + +Ciascuna pagina HTML è a sua volta divisa in due elementi: **head** e **body**. + +* **head** è un elemento che contiene informazioni sul documento non visibili sullo schermo. + +* **body** è l'elemento che contiene tutto ciò che invece viene visualizzato come parte della pagina web. + +Utilizziamo `` per dire al browser come interpretare la configurazione della pagina, e `` per dirgli in realtà cosa c'è nella pagina. + +Per esempio, puoi mettere un elemento di titolo all'interno di ``, così: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Salva il file e aggiorna la tua pagina. + +![Figura 11.3](images/step4.png) + +Hai notato come il browser ha capito che "Il blog di Ola" è il titolo della tua pagina? Ha interpretato `Il blog di Ola` ed ha messo il testo nella barra del titolo sul tuo browser (sarà anche utilizzato per i segnalibri e così via). + +Probabilmente hai anche notato che ogni tag di apertura è abbinato ad un *tag di chiusura*, con un `/`, e che gli elementi sono *annidati* (i.e. non puoi chiudere un tag particolare fino a quando tutti quelli che erano al suo interno sono stati chiusi a loro volta). + +È come mettere le cose in delle scatole. Hai una grossa scatola, ``; al suo interno c'è ``, che contiene scatole ancora più piccole: `

`. + +Devi seguire queste regole di tag *di chiusura*, e di elementi *annidati* - se non lo fai, il browser potrebbe non essere in grado di interpretarli correttamente e la tua pagina verrà visualizzata incorrettamente. + +## Personalizza il tuo template + +Ora puoi divertirti un po' e provare a personalizzare il tuo template! Qua ci sono un po' di tag utili per quello: + +* `

A heading

` - per la tua intestazione più importante +* `

A sub-heading

` - per un titolo di livello inferiore +* `

A sub-sub-heading

` ... e così via, fino a `
` +* `

A paragraph of text

` +* `text` enfatizza il tuo testo +* `text` enfatizza fortemente il tuo testo +* `
` va in un'altra riga (puoi mettere qualsiasi cosa dentro br) +* `link` crea un link +* `
  • primo elemento
  • secondo elemento
` fa una lista, proprio come questa qui! +* `
` definisce una sezione della pagina +* `` definisce un insieme di collegamenti di navigazione +* `
` specifica il contenuto autonomo e indipendente +* `
` definisce una sezione in un documento +* `
` specifica un'intestazione per un documento o una sezione +* `
` specifica il contenuto principale di un documento +* `` definisce alcuni contenuti a parte il contenuto in cui è inserito (come una barra laterale) +* `
` definisce un piè di pagina per un documento o sezione +* `` definisce un'ora (o datetime) specifica + +Ecco un esempio di modello completo, copia e incolla in `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Django Girls blog + + +
+

Django Girls Blog

+
+ +
+ +

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.

+
+ +
+ +

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.

+
+ + +``` + +Abbiamo creato una sezione `intestazione` e due `articolo` sezione qui. + +* L'elemento `intestazione` contiene il titolo del nostro blog – è un'intestazione e un link +* I due elementi `articolo` contengono i nostri post sul blog con una data pubblicata in un elemento `ora` , un elemento `h2` con un titolo post cliccabile e un elemento `p` (paragrafo) per il testo del nostro post sul blog. + +Ci dà questo effetto: + +![Figura 11.4](images/step6.png) + +Yaaay! Ma fino adesso, il nostro template mostra esattamente **la stessa informazione** - mentre prima stavamo dicendo che i template ci permettono di mostrare **diverse** informazioni nello **stesso formato**. + +Quello che vogliamo è visualizzare i veri post aggiunti nel nel nostro Django admin - è quello che faremo adesso. + +## Un'ultima cosa: il deploy! + +Sarebbe bello vedere tutto questo live su Internet, giusto? Facciamo un altro deploy su PythonAnywhere: + +### Committa e pubblica il tuo codice su GitHub + +Prima di tutto, vediamo quali file sono cambiati dall'ultimo deploy (esegui questi comandi localmente, non su PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Assicurati di essere nella directory `djangogirls` e diciamo a `git` di includere tutte le modifiche in questa directory: + +{% filename %}command-line{% endfilename %} + + $ git add . + + +Prima di caricare tutti i file, proviamo a controllare cosa caricherà `git` (tutti i file che caricherà `git` ora appariranno in verde): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Ci siamo quasi, ora è il momento di dirgli di salvare questa modifica nella cronologia. Gli daremo un "messaggio di commit" dove descriviamo ciò che abbiamo modificato. Puoi digitare tutto quello che vuoi a questo punto, sarebbe utile scrivere qualcosa di descrittivo in modo da ricordare in futuro cos'hai fatto. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Ho cambiato l'HTML per questo sito." + + +> **Nota** Assicurati di usare doppie virgolette prima e dopo il "messaggio di commit". + +Quando hai finito, caricheremo (push) le nostre modifiche su Github: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Scarica il tuo nuovo codice su PythonAnywhere, e ricarica la tua web app + +* Apri la [pagina Console PythonAnywhere](https://www.pythonanywhere.com/consoles/) e vai alla tua **Bash console** (o iniziane una nuova). Quindi, esegui: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Ricordati di sostituire `` con il sottodominio di PythonAnywhere, senza le parentesi angolo. Il tuo nome di sottodominio è normalmente il tuo nome utente PythonAnywhere, ma in alcuni casi potrebbe essere un po' diverso (come se il tuo nome utente contiene lettere capitali). Quindi, se questo comando non funziona, usa il comando `ls` (files list) per trovare il tuo nome di sottodominio/cartella reale e poi `cd` su di esso. + +Ora guarda il tuo codice scaricato. Se vuoi controllare che sia arrivato, puoi saltare alla pagina **"Files** e visualizzare il tuo codice su PythonAnywhere (puoi raggiungere altre pagine PythonAnywhere dal pulsante menu sulla pagina della console). + +* Infine, fai un salto alla [scheda Web](https://www.pythonanywhere.com/web_app_setup/) e premi **Reload** sulla tua web app. + +Il tuo aggiornamento dovrebbe essere applicato! Vai avanti ed aggiorna il tuo sito nel brower. Le modifiche dovrebbero essere visibili. :) \ No newline at end of file diff --git a/it/html/images/step1.png b/it/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/it/html/images/step1.png differ diff --git a/it/html/images/step3.png b/it/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/it/html/images/step3.png differ diff --git a/it/html/images/step4.png b/it/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/it/html/images/step4.png differ diff --git a/it/html/images/step6.png b/it/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/it/html/images/step6.png differ diff --git a/it/images/application.png b/it/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/it/images/application.png differ diff --git a/it/installation/README.md b/it/installation/README.md new file mode 100644 index 00000000000..20d759417ed --- /dev/null +++ b/it/installation/README.md @@ -0,0 +1,69 @@ +# Se stai seguendo il tutorial a casa + +Se stai seguendo il tutorial a casa, e non durante uno degli [eventi Django Girls](https://djangogirls.org/events/), puoi saltare completamente questo capitolo e andare direttamente al capitolo [Come funziona Internet](../how_the_internet_works/README.md). + +Questo perché nel tutorial spieghiamo come installare i programmi passo passo -- questa è una pagina aggiuntiva che raccoglie tutte le istruzioni di installazione (e che può tornare utile in alcuni workshop). Se vuoi puoi decidere di installare subito il materiale che trovi in questa pagina. Ma se vuoi imparare alcune nozioni prima di installare queste cose sul tuo computer, salta questo capitolo e ti spiegheremo come fare le installazioni più tardi, quando sarà necessario. + +Buona fortuna! + +# Se stai partecipando a un workshop + +Se stai partecipando a uno degli [eventi Django Girls](https://djangogirls.org/events/): + +* Il tuo workshop potrebbe avere un "party di installazione" prima del workshop principale. Se sei in un party di installazione, questa pagina è per te! Segui le istruzioni qui per ottenere tutto quello che serve per il workshop installato, con l'aiuto degli autobus se necessario. Poi al workshop principale, sarai in grado di saltare le istruzioni di installazione che incontrerai nel tutorial principale quando li avrai ricevuti. +* Gli organizzatori del tuo workshop potrebbero aver chiesto di provare a casa per installare tutto sul tuo computer prima dell'inizio del workshop. Se ti è stato chiesto di farlo, questa pagina è per te! Segui le istruzioni qui, il meglio possibile. Poi al workshop principale, quando si arriva a un passo di installazione nel tutorial principale, se non si è riusciti a installare quel pezzo, si può ottenere aiuto dal tuo coach. +* Se il tuo workshop non ha un gruppo di installazione (o non hai potuto partecipare), e se gli organizzatori non ti hanno chiesto di provare a installare tutto prima di arrivare, salta questa pagina e vai direttamente al capitolo [Come funziona Internet](../how_the_internet_works/README.md) . Installerai tutto ciò di cui hai bisogno quando lavori il tutorial. + +# Installazione + +In questo tutorial costruirai un blog. Per farlo, mentre vai nel tutorial, sarai informato su come installare vari software sul tuo computer e impostare alcuni account online come sono necessari. Questa pagina raccoglie tutte le istruzioni di installazione e iscrizione in un unico luogo (che è utile per alcuni formati di workshop). + + {% include "/chromebook_setup/instructions.md" %} + + + +# Breve introduzione alla linea di comando {#command-line} + +Molti dei passaggi qui sotto fanno riferimento alla "console", "terminal", "finestra di comando", o "linea di comando" - tutto questo significa la stessa cosa: una finestra sul tuo computer dove puoi inserire comandi. Quando arriverai al tutorial principale, imparerai di più sulla linea di comando. Per ora, la cosa principale che devi sapere è come aprire una finestra di comando e come sembra: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Installa Python {#python} + +{% include "/python_installation/instructions.md" %} + +# Installa un editor del codice {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Imposta virtualenv e installa Django {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Installa Git {#git} + +{% include "/deploy/install_git.md" %} + +# Crea un profilo di GitHub {#github-account} + +Vai su [GitHub.com](https://www.github.com) e crea un nuovo account gratuito. Assicurati di ricordare la tua password (aggiungila al tuo password manager, se ne usi uno). + +# Crea un profilo di PythonAnywhere {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Inizia la lettura + +Congratulazioni, sei pronta a partire! Se hai del tempo prima del workshop sarebbe magnifico se leggessi qualche capitolo iniziale: + +* [Come funziona Internet](../how_the_internet_works/README.md) + +* [Introduzione alla riga di comando](../intro_to_command_line/README.md) + +* [Introduzione a Python](../python_introduction/README.md) + +* [Che cos'è Django?](../django/README.md) + +# Divertiti al workshop! + +Quando inizierà il workshop, potrai andare direttamente a [il tuo primo progetto Django!](../django_start_project/README.md) dato che hai già coperto il materiale dei capitoli precedenti. diff --git a/it/intro_to_command_line/README.md b/it/intro_to_command_line/README.md new file mode 100644 index 00000000000..8ad96b96d7c --- /dev/null +++ b/it/intro_to_command_line/README.md @@ -0,0 +1,437 @@ +# Introduzione all'interfaccia a riga di comando + +> Messaggio per i lettori: questo capitolo si trova nel video [Your new friend: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +Non è grandioso? avete appena scritto la vostra prima linea di codice in pochi minuti! :) + +**Ti presentiamo il tuo primo nuovo amico: la riga di comando!** + +I prossimi passaggi ti mostreranno come utilizzare quella 'finestra nera' che tutti gli hacker utilizzano. Ti potrà sembrare un po' allarmante all'inizio, ma è solamente un prompt in attesa dei tuoi comandi. + +> **Nota**: si prega di notare che in questo libro useremo il termine "directory" e "cartella" in maniera intercambiabile, ma sono la medesima cosa. + +## Cos'è la riga di comando? + +La finestra solitamente chiamata **riga di comando** o **interfaccia della riga di comando**, è un'applicazione basata su testo che ti permette di visualizzare, gestire e modificare i file sul tuo computer. È simile a Windows Explorer o Finder su Mac, ma senza interfaccia grafica. Altri nomi della riga di comando sono: *cmd*, *CLI*, *prompt*, *console* o *terminal*. + +## Aprire l'interfaccia della riga di comando + +Per cominciare a sperimentare, dobbiamo prima aprire la nostra interfaccia della riga di comando. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Prompt + +Dovreste vedere ora una finestra nera o bianca in attesa dei vostri comandi. + + + +Se state utilizzando un Mac o Linux, vedrete probabilmente un`$` come questo: + +{% filename %}riga di comando{% endfilename %} + + $ + + + + + + +Su Windows, probebilmente vedrete un`>` come questo: + +{% filename %}riga di comando{% endfilename %} + + > + + +Dai un'occhiata alla sezione Linux appena sopra -- vedrai qualcosa di più come quando arriverai a PythonAnywhere più tardi nel tutorial. + + + +Ogni comando sarà prepesso da un `$` o `>` e uno spazio, ma non dovresti digitarlo. Il tuo computer lo farà per te. :) + +> Solo una piccola nota: nel tuo caso ci dovrebbe essere qualcosa come `C:\Users\ola>` oppure `Olas-MacBook-Air:~ ola$` prima del segno di prompt. È corretto al 100%. + +La parte fino al `$` o al `>` inclusi, si chiama *prompt della linea di comando* o semplicemente *prompt*. Ti richiede di inserire qualcosa. + +Nel tutorial quando vorremo che tu scriva un comando, includeremo `$` o `>` e occasionalmente qualcosa in più a sinistra. Puoi ignorare la parte a sinistra e inserire solo il comando dopo il prompt. + +## Il tuo primo comando (YAY!) + +Iniziamo digitando questo comando: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +Premi `invio`. Questo è il nostro risultato: + +{% filename %}command-line{% endfilename %} + + $ whoami olasitarska + + +Come puoi vedere, il computer ha appena stampato il tuo nome utente. Bello, eh? :) + +> Prova a digitare ogni comando, non copiare ed incollare. Ti ricorderai di più in questo modo! + +## Nozioni di base + +Ogni sistema operativo ha un insieme di comandi leggermente diverso per la command line, per cui assicurati di seguire le istruzioni per il tuo sistema operativo. Proviamo questo, ti va? + +### Cartella corrente + +Sarebbe bello sapere dove ci troviamo ora, giusto?Vediamo. Digita questo comando e premi Invio: + + + +{% filename %}command-line{% endfilename %} + + $ pwd/utenti/olasitarska + + +> Nota: 'pwd' sta per 'stampa directory di lavoro'. + + + + + +{% filename %}command-line{% endfilename %} + + > cd C:\Users\olasitarska + + +> Nota: 'cd' sta per 'modifica cartella'. Con la shell può usare pwd come su Linux o macOS. + + + +Probabilmente vedrai qualcosa di simile sul tuo computer. Quando apri la command-line normalmente inizi sulla tua directory home. + +* * * + +### Guida Utente + +Molti comandi che puoi digitare al comando richiesto hanno un aiuto integrato che puoi visualizzare e leggere! Per esempio, per saperne di più sul comando della directory corrente: + + + +macOS e Linux hanno un comando `man` che ti dà aiuto sui comandi. Prova `man pwd` e vedi cosa dice, o mette `man` prima di altri comandi per vedere il loro aiuto. L'output di `man` è normalmente paginato. Usa la barra di spazio per passare alla pagina successiva, e `q` per smettere di guardare l'aiuto. + + + + + +Aggiungere un suffisso `/?` alla maggior parte dei comandi stamparà la pagina di aiuto. Potresti dover scorrere la finestra di comando per vederlo tutto. Prova `cd /?`. + + + +### Elenco di file e cartelle + +Cosa c'è dentro? Sarebbe bello scoprirlo. Vediamo come: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% 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 + + +> Nota: In PowerShell è anche possibile utilizzare 'ls' come su Linux e macOS. + +* * * + +### Cambiare cartella corrente + +Ora, andiamo nella nostra directory Desktop: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Nota che il nome della directory "Desktop" potrebbe essere tradotto nella lingua del tuo account Linux. Se così è, dovrai sostituire `Desktop` con il nome tradotto; per esempio, `Schreibtisch` per il tedesco. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Controlla ora se ti sei veramente spostato/a: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Ecco fatto! + +> Suggerimento PRO:se digiti `cd D` e poi premi `tab` sulla tastiera, la command-line completerà automaticamente il resto del nome per cui puoi navigare più velocemente. Se c'è più di una cartella che comincia con "D", premi `tab` due volte per ottenere la lista con tutte le opzioni. + +* * * + +### Creare una directory + +Che ne dici di creare una directory di pratica sul tuo desktop? Puoi farlo in questo modo: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Questo breve comando creerà una cartella con il nome `practice` sul tuo desktop. Puoi controllare se è lì semplicemente guardando sul tuo desktop oppure eseguendo un commando `ls` oppure `dir`! Provalo. :) + +> Suggerimento PRO: se non vuoi digitare lo stesso comando tutte le volte, prova a premere ` freccia in su ` e `freccia in giù` sulla tua tastiera per scorrere tutti i comandi che hai usato fin ora. + +* * * + +### Esercizio! + +Piccola sfida per te: nella tua directory appena creata `practice` crea una directory chiamata `test`. usa i comandi `cd` e `mkdir`.) + +#### Soluzione: + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}riga di comando{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +Congratulazioni! + +* * * + +### Facciamo ordine + +Non vogliamo lasciare un pasticcio, per cui rimuoviamo tutto quello che abbiamo fatto fino a questo punto. + +Per prima cosa dobbiamo tornare al Desktop: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Usando `..` con il comando `cd` cambierai la tua directory attuale alla directory padre (si tratta della cartella che contiene la tua directory attuale). + +Controlla dove ti trovi ora: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Adesso è l'ora di cancellare la directory `practice`: + +> **Attenzione**: cancellare un file usando `del`, `rmdir` o `rm` è irreversibile, *i file cancellati andranno perduti per sempre*! Per cui sii molto prudente nell'utilizzare questi comandi. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Fatto! Per essere sicuri che sia stato effettivamente cancellato, controlliamo: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Uscire dalla command line + +Questo è tutto per ora! puoi tranquillamente chiudere la tua command line. facciamolo alla maniera degli hacker, va bene? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Figo, eh? :) + +## Indice + +Questo è un riepilogo di alcuni comandi utili: + +| Comandi(Windows) | Comandi (Mac OS / Linux) | Descrizione | Esempio | +| ---------------- | ------------------------- | ------------------------------- | ------------------------------------------------- | +| esci | uscire dalla command line | chiudi la finestra | **uscire dalla command line** | +| cd | cd | cambiare directory | **cd test** | +| cd | pwd | Cambiare cartella corrente | **cd** (Windows) o **pwd** (Mac OS / Linux) | +| dir | ls | elenco directory/file | **dir** | +| copia | cp | copia un file | **copy c:\test\test.txt c:\windows\test.txt** | +| sposta | mv | spostare un file | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | creare una nuova directory | **mkdir testdirectory** | +| rmdir (or del) | rm | Eliminare un file | **del c:\test\test.txt** | +| rmdir /S | rm -r | Seleziona una cartella | **mkdir testdirectory** | +| [CMD]/? | man [CMD] | Ottieni un aiuto per un comando | **cd** (Windows) o **pwd** (Mac OS / Linux) | + +Questi sono solo alcuni dei comandi che puoi eseguire sulla tua command line, ma non ne userai altri oltre a quelli spiegati oggi. + +Se sei curioso/a, [ss64.com](http://ss64.com) contiene una guida completa ai comandi per tutti i sistemi operativi. + +## Fatto? + +Tuffiamoci in Python! \ No newline at end of file diff --git a/it/intro_to_command_line/open_instructions.md b/it/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..ba8021da133 --- /dev/null +++ b/it/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +A seconda della versione di Windows utilizzata e della propria tastiera, una delle azioni seguenti dovrebbe aprire una finestra di comando (probabilmente sarà necessario fare più prove, ma non è necessario provare tutti i suggerimenti proposti): + +- Andare al menù Start o alla schermata Start e digitare "Prompt dei comandi" nella barra di ricerca. +- Andare al menù Start-->Sistema Windows-->Prompt dei Comandi. +- Andare a menù Start-->Tutti i Programmi-->Accessori-->Prompt dei Comandi. +- Andare alla schermata Start, spostare il mouse nell'angolo in basso a sinistra dello schermo e cliccare sulla freccia in basso che comparirà (per i dispositivi touch screen, scorrere verso l'alto dal fondo dello schermo). La pagina App dovrebbe aprirsi. Cliccare su Prompt dei Comandi nella sezione Sistema Windows. +- Tenere premuto il tasto Windows e cliccare "X". Scegliere "Prompt dei Comandi" dal menù popup. +- Tenere premuto il tasto Windows e premere "R" per aprire la finestra "Esegui". Digitare "cmd" nella casella di testo e premere OK. + +![Type "cmd" in the "Run" window](../python_installation/images/windows-plus-r.png) + +Più avanti in questo tutorial, dovrete avere due finestre di comando aperte contemporaneamente. In ogni caso, in alcune versioni di Windows, se già si ha una finestra di comando aperta e si cerca di aprirne un'altra con lo stesso metodo, vi mostrerà la finestra di comando già aperta. Provate adesso sul vostro computer e vedete cosa accade! Se si riesce ad aprire solo una finestra di comando, provare un altro dei metodi sopra indicati. Almeno uno permetterà l'apertura di una nuova finestra di comando. + + + + + +Andare ad Launchpad → Altro → Terminal. + + + + + +Probabilmente si troverà in Applicazioni--> Funzionalità--> Terminal, ma dipende dal sistema operativo. Nel caso in cui non si trovasse, provare a fare una ricerca Google. :) + + diff --git a/it/python_installation/README.md b/it/python_installation/README.md new file mode 100644 index 00000000000..4fc467a6976 --- /dev/null +++ b/it/python_installation/README.md @@ -0,0 +1,15 @@ +# Iniziamo con Python + +Finalmente siamo qui! + +Ma prima, permettici di introdurre brevemente cos'è Python. Python è un linguaggio di programmazione molto popolare che può essere utilizzato per creare siti web, giochi, sofware scientifici, graffici e molto, molto altro. + +Python è stato creato alla fine degli anni '80 ed il suo obiettivo principale è quello di essere leggibile dalle persone (e non solo dalle macchine!). Per questo motivo sembra più semplice di altri linguaggi di programmazione, ma non preoccuparti -- Python è anche molto potente! + +# Installazione di Python + +> **Nota** Se utilizzi un Chromebook, salta questo capitolo e segui le istruzioni in [Configurazione di Chromebook](../chromebook_setup/README.md). +> +> Se hai terminato il processo di installazione, questo passaggio lo hai già completato e puoi passare direttamente al capitolo successivo! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/it/python_installation/images/add_python_to_windows_path.png b/it/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/it/python_installation/images/add_python_to_windows_path.png differ diff --git a/it/python_installation/images/python-installation-options.png b/it/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/it/python_installation/images/python-installation-options.png differ diff --git a/it/python_installation/images/windows-plus-r.png b/it/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/it/python_installation/images/windows-plus-r.png differ diff --git a/it/python_installation/instructions.md b/it/python_installation/instructions.md new file mode 100644 index 00000000000..3937c630e90 --- /dev/null +++ b/it/python_installation/instructions.md @@ -0,0 +1,117 @@ +> Per le lettrici a casa: questo capitolo è trattato nel video [Installazione di Python & Editor di codice](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Questa sezione è basata sul tutorial delle Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django è scritto in Python. Python ci serve per fare qualunque cosa in Django. Iniziamo con l'installazione! Dovresti installare la versione più recente di Python 3, quindi se hai una versione precendente dovrai aggiornarla. Se possiedi già la versione {{ book.py_min_version }} o una versione successiva non servono aggiornamenti. + +Installa Python normale come segue, anche quando hai Anaconda installato sul tuo computer. + + + +Prima verifica se il computer sta eseguendo una versione a 32 bit o una versione a 64 bit di Windows, sulla linea "Tipo di sistema" della pagina Info di sistema. Per raggiungere questa pagina, prova uno di questi metodi: + +* Premi il tasto Windows e Pausa/Break contemporaneamente +* Apri il tuo Pannello di Controllo dal menu Windows, quindi naviga nel sistema & Sicurezza, quindi sistema +* Premi il pulsante Windows, quindi vai su Impostazioni > Sistema > Informazioni +* Cerca "System Information" nel menu Start di Windows. Per fare ciò, clicca sul pulsante Start o premi il tasto Windows, poi inizia a digitare `System Information`. Inizierà a dare suggerimenti non appena digiterai. Puoi selezionare la voce una volta che compare. + +Puoi scaricare Python per Windows dal sito web https://www.python.org/downloads/windows/. Clicca sul link "Ultimo Python 3 - Python x.x.x". Se il tuo computer sta eseguendo una versione **64-bit** di Windows, scarica il file **Windows x86-64 di installer eseguibile**. Altrimenti, scarica il file **Windows x86 eseguibile installer**. Dopo aver scaricato il file *.msi, lo dovresti eseguire (cliccaci sopra due volte) e segui le istruzioni. + +Una cosa per cui guardare: durante l'installazione, si noti una finestra contrassegnata "Setup". Assicurati di selezionare la casellina "Add Python {{ book.py_version }} to PATH" o 'Aggiungi Python alle tue variabili ambientali" e clicca su "installa ora", come mostrato qui (potrebbe risultare leggermente diverso se stai installando una versione differente): + +![Non dimenticare di aggiungere Python al Path](../python_installation/images/python-installation-options.png) + +Quando l'installazione è completata, potresti vedere una finestra di dialogo con un link che puoi seguire per saperne di più su Python o sulla versione installata. Chiudi o annulla questa finestra -- imparerai molto di più in questo tutorial! + +Nota: Se si utilizza una versione precedente di Windows (7, Vista, o qualsiasi versione precedente) e l'installatore di Python {{ book.py_version }} non funziona per un errore, installare tutti gli aggiornamenti di Windows e provare a installare nuovamente Python. Se l'errore si ripresenta, prova ad installare la versione di Python {{ book.py_min_release }} da [Python.org](https://www.python.org/downloads/windows/). + +> Django {{ book.django_version }} ha bisogno di Python {{ book.py_min_version }} o maggiore, che non supporta Windows XP o versioni precedenti. + + + + + +> **Nota** Prima di installare Python su macOS, devi fare in modo/ verificare che le impostazioni Mac consentano l'installazione di pacchetti che non sono presenti nell'App Store. Vai alle Preferenze di sistema (è nella cartella Applicazioni), clicca "Sicurezza & Privacy," e poi la scheda "Generale". Se il tuo "Consenti le app scaricate da:" è impostato su "Mac App Store", cambialo in "Mac App Store e sviluppatori identificati". + +Devi andare sul sito https://www.python.org/downloads/ e scaricare il programma di installazione di Python più recente: + +* Scarica Python {{ book.py_release }} +* Fare doppio clic su *python-{{ book.py_release }}-macos11.pkg* per eseguire l'installer. + + + + + +È molto probabile che tu abbia già installato Python fuori dalla scatola. Per verificare se è installata (e quale versione è), aprire una console e digitare il seguente comando: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +Se hai una versione diversa di Python installata, almeno {{ book.py_min_version }} (es. {{ book.py_min_release }}), allora non devi aggiornare. Se non hai Python installato, o se vuoi una versione diversa, controlla prima quale distribuzione Linux stai usando con il seguente comando: + +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +In seguito, a seconda del risultato, segui una delle seguenti guide di installazione sotto questa sezione. + + + + + +Digita questo comando nella tua console: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Usa questo comando nella tua console: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Se sei nelle vecchie versioni Fedora potresti ottenere un errore che il comando `dnf` non è stato trovato. In questo caso, devi utilizzare `yum` invece. + + + + + +Usa questo comando nella tua console: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Verifica che l'installazione si sia conclusa correttamente aprendo l'applicazione *Terminal* ed eseguendo il comando `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +La versione mostrata può essere diversa da {{ book.py_release }} -- dovrebbe corrispondere alla versione installata. + +**NOTA:** Se sei su Windows e ricevi un messaggio di errore che dice che `python3` non è stato trovato, prova ad utilizzare `python` (senza `3`), controlla sia la versione di Python che è {{ book.py_min_version }} o superiore. Se anche questo non funziona, puoi aprire un nuovo prompt dei comandi e riprovare; questo accade se usi un prompt dei comandi aperto da prima dell'installazione di Python. + +* * * + +Se hai dubbi o se qualcosa è andato storto e non hai idea di cosa fare dopo - chiedi al tuo coach! A volte le cose non vanno come dovrebbero ed è meglio chiedere aiuto a qualcuno con più esperienza. \ No newline at end of file diff --git a/it/python_introduction/README.md b/it/python_introduction/README.md new file mode 100644 index 00000000000..224f55d4992 --- /dev/null +++ b/it/python_introduction/README.md @@ -0,0 +1,1072 @@ +{% set warning_icon = '' %} + +# Introduzione a Python + +> Parte di questo capitolo è tratto dal tutorial delle Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Scriviamo un po' di codice! + +## La linea di comando di Python + +> Per chi ci segue da casa: questa parte si trova nel video [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +Per iniziare a giocare con Python, devi avviare sul tuo computer una *linea di comando*. Dovresti già sapere come farlo – l'hai imparato nel capitolo [Introduzione alla riga di comando](../intro_to_command_line/README.md). + +Una volta pronta, segui le istruzioni riportate di seguito. + +Vogliamo aprire una console Python, quindi digita `python` su Windows o `python3` su Mac OS/Linux e premi `invio`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python {{ book.py_release }} (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Il tuo primo comando Python! + +Dopo aver eseguito il comando Python, il prompt è cambiato in `>>>`. Questo ci informa che ora dovremo utilizzare comandi propri del linguaggio Python. Non devi digitare `>>>` - Python lo farà per te. + +Se ad un certo punto vuoi uscire dalla console di Python, digita `exit()` oppure usa la scorciatoia `Ctrl + Z` per Windows e `Ctrl + D` per Mac/Linux. Dopo non vedrai più `>>>`. + +Per il momento, non vogliamo uscire dalla console di Python. Vogliamo saperne di più. Iniziamo digitando qualche espressione matematica, come `2 + 3` e premiamo `invio`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Bello! Hai visto come le risposte spuntano fuori? Python conosce la matematica! Prova altri comandi come: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Per eseguire un calcolo esponenziale, per esempio 2 elevato alla potenza 3, digitiamo: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Giochicchia un po' con Python, e poi torna a leggere qui. :) + +Come puoi vedere, Python è una buona calcolatrice. Ora ti starai sicuramente chiedendo cos'altro è capace di fare… + +## Stringhe + +Che ne dici di scrivere il tuo nome? Digitalo tra virgolette così: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Hai appena creato la tua prima stringa! Una stringa è una sequenza di caratteri che possono essere elaborati da un computer. La stringa deve sempre iniziare e finire con lo stesso carattere. Che può essere una virgoletta semplice (`'`) o doppia (`"`) (non c'è differenza!) Le virgolette dicono a Python che il contenuto al loro interno è una stringa. + +Le stringhe possono essere legate assieme. Prova questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> " Ciao " + "Ola" +'Ciao Ola' +``` + +Puoi anche moltiplicare le stringhe con un numero: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Se devi mettere un apostrofo nella tua stringa, hai due modi per farlo. + +Utilizzando le virgolette doppie: + +{% filename %}command-line{% endfilename %} + +```python +>>> "L'ape Maja va" +"L'ape Maja va" +``` + +o facendo l'escape dell'apostrofo (cioè evitando che concluda la stringa) con una barra rovesciata (`\`): + +{% filename %}command-line{% endfilename %} + +```python +>>> 'L\'ape Maja va' +"L'ape Maja va" +``` + +Bello, eh? Per vedere il tuo nome in maiuscolo, digita: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Hai appena applicato il **metodo** `upper` sulla tua stringa! Un metodo (come `upper()`) è una sequenza di istruzioni che Python deve compiere su un oggetto dato (la stringa `"Ola"`) nel momento in cui viene applicato. + +Se vuoi sapere il numero di lettere nel tuo nome, per questo c'è una **funzione**! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Ti stai chiedendo la differenza fra il chiamare una funzione con un `.` alla fine di una stringa (come `"Ola".upper()`) ed il chiamare prima la funzione e poi mettere la stringa tra parentesi? Beh, ci sono funzioni che appartengono ad oggetti, come `upper()`, che può essere eseguita solo su stringhe. In questo caso, chiamiamo la funzione **metodo**. Altre volte, le funzioni non appartengono a niente di specifico e possono essere utilizzate su diversi tipi di oggetti, proprio come `len()`. Ecco perché stiamo passando `"Ola"` come parametro alla funzione `len`. + +### Indice + +OK, basta con le stringhe. Ecco fino ad ora quanto hai imparato: + +- Il **prompt** -- Digitare i comandi (codice) nel prompt di Python restituisce risposte in Python +- **Numeri e stringhe** -- In Python i numeri vengono utilizzati per la matematica e le stringhe per oggetti testuali +- Gli **operatori** -- come `+` e `*`, combinano più valori per produrne uno nuovo +- **funzioni** -- come `upper()` e `len()`, eseguono azioni su oggetti. + +Fin qui le basi del linguaggio di programmazione che stiamo imparando. Pronta per qualcosa di più complicato? Scommetto di sì! + +## Errori + +Proviamo una cosa diversa. Possiamo ottenere la lunghezza di un numero nella stessa forma in cui abbiamo potuto scoprire la lunghezza del nostro nome? Digita `len(304023)` e premi `Invio`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Abbiamo ottenuto il nostro primo errore! L'icona {{ warning_icon }} è il nostro modo per suggerirti che il codice che stai per eseguire non funzionerà come ti aspetti. Fare errori (anche intenzionali) è un elemento importante dell'apprendimento! + +Il testo dice che gli oggetti di tipo "int" (interi, numeri interi) non hanno lunghezza. Quindi cosa possiamo fare ora? Forse possiamo scrivere il nostro numero come stringa? Le stringhe hanno una lunghezza, giusto? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Ha funzionato! Abbiamo utilizzato la funzione `str` all'interno della funzione `len`. `str()` converte tutto in stringhe. + +- La funzione `str` converte le cose in **stringhe** +- La funzione `int` converte le cose in **numeri interi** + +> Importante: possiamo convertire i numeri in testo, ma non possiamo convertire il testo in numeri - cosa potrebbe essere `int('hello')`? + +## Variabili + +Un concetto importante nella programmazione è quello delle variabili. Una variabile non è altro che un nome per qualcosa, così puoi usarla più tardi. I programmatori usano le variabili per memorizzare dati, rendere il loro codice più leggibile in modo da non dover continuare a ricordare le cose. + +Diciamo che vogliamo creare una nuova variabile chiamata `nome`: + +{% filename %}command-line{% endfilename %} + +```python +>>> nome = "Ola" +``` + +Praticamente, poniamo il valore della variabile nome uguale alla stringa "Ola". + +Come hai notato, il tuo programma non ha dato nessun risultato come ha fatto prima. Allora come facciamo a sapere che la variabile esiste veramente? semplicemente digita `nome` e premi `Invio`: + +{% filename %}command-line{% endfilename %} + +```python +>>> nome +'Ola' +``` + +Urrà! La tua prima variabile! :) E puoi anche cambiare il valore a cui essa si riferisce: + +{% filename %}command-line{% endfilename %} + +```python +>>> nome = "Sonja" +>>> nome +'Sonja' +``` + +La puoi utilizzare anche nelle funzioni: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(nome) +5 +``` + +Fantastico, vero? Naturalmente, le variabili possono essere qualsiasi cosa, così come i numeri! Prova questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Ma cosa succede se utilizziamo il nome sbagliato? Riesci a immaginare cosa succederebbe? Proviamo! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Un errore! Come puoi vedere, Python ha diversi tipi di errori e questo qui si chiama **NameError**. Python ti darà questo errore se provi ad utilizzare una variabile che non è stata ancora definita. Se incontri questo errore più tardi, controlla il tuo codice per vedere se hai digitato in modo errato i nomi. + +Giocaci per un po' e vedi cosa puoi fare! + +## La funzione print + +Prova questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> nome = 'Maria' +>>> nome +'Maria' +>>> print(name) +Maria +``` + +Quando digiti `name`, l'interprete di Python risponde con una stringa *rappresentazione* della variabile 'nome', che contiene le lettere M-a-r-i-a, circondate da singole virgolette, ''. Quando dici `print(nome)`, Python "stamperà" i contenuti della variabile sullo schermo, senza le virgolette, che è più pulito. + +Come vedremo dopo, `print()` è anche utile quando vogliamo stampare le cose dall'interno delle funzioni, oppure quando vogliamo stampare le cose in molteplici righe. + +## Liste + +Oltre alle stringhe ed ai numeri interi, Python ha tanti tipi di oggetti. Ora ne introdurremo uno chiamato **lista**. Le liste sono fatte proprio come immagini: sono oggetti che sono liste di altri oggetti. :) + +Vai avanti e crea una lista: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Sì, questa lista è vuota. Abbastanza inutile, vero? Creiamo una lista di numeri della lotteria. Non vogliamo ripetere la sequenza ogni volta, quindi metteremo anche la lista in una variabile: + +{% filename %}command-line{% endfilename %} + +```python +>>> lotteria = [3, 42, 12, 19, 30, 59] +``` + +Bene, abbiamo una lista! Cosa possiamo farne? Vediamo quanti numeri della lotteria contiene. Quale funzione potresti utilizzare per questo compito? Lo hai già imparato! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lotteria) +8 +``` + +Si! `len()` può darti il numero di oggetti in una lista. Utile, vero? Forse abbiamo risolto: + +{% filename %}command-line{% endfilename %} + +```python +>>> lotteria.sort() +``` + +Questo comando non dà nessun risultato, ha semplicemente cambiato l'ordine in cui i numeri appaiono nella lista. Stampiamo di nuovo la lista per vedere cosa è successo: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lotteria) +[3, 12, 19, 30, 42, 59] +``` + +Come puoi vedere, adesso i numeri nella tua lista sono ordinati dal valore più basso a quello più alto. Congratulazioni! + +Vogliamo invertire quell'ordine? Facciamolo! + +{% filename %}command-line{% endfilename %} + +```python +>>> lotteria.reverse() +>>> print(lotteria) +[59, 42, 30, 19, 12, 3] +``` + +Facile, vero? Se vuoi aggiungere qualcosa alla tua lista, puoi farlo digitando questo comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> lotteria.append(199) +>>> print(lotteria) +[59, 42, 30, 19, 12, 3, 199] +``` + +Se vuoi mostrare solo il primo numero, puoi farlo usando gli **indici**. L'indice è il numero che dice la posizione esatta dell'elemento all'interno di una lista. I programmatori preferiscono iniziare a contare da 0, quindi il primo oggetto nella lista è all'indice 0, il successivo all'1, e così via. Prova questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lotteria[0]) +59 +>>> print(lotteria[1]) +42 +``` + +Come puoi vedere, puoi accedere a diversi oggetti nella tua lista usando il nome della lista e l'indice dell'oggetto all'interno delle parentesi quadre. + +Per eliminare qualcosa dalla lista dovrai usare gli **indici** come abbiamo visto sopra, e il metodo `pop()`. Proviamo a fare un esercizio per rafforzare quanto abbiamo imparato prima; elimineremo il primo numero della lista. + +{% 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] +``` + +Ha funzionato a meraviglia! + +Prova altri indici: 6, 7, 1000, -1, -6 o -1000. Prova a prevedere il risultato ancora prima di eseguire il comando. Hanno senso i risultati? + +Per saperne di più su i metodi disponibili per le liste puoi consultare questo capitolo della documentazione Python: https://docs.python.org/3/tutorial/datastructures.html + +## Dizionari + +> Per chi ci segue da casa: questa parte si trova nel video [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Un dizionario (dictionary) è simile a una lista, ma accedi ai valori cercando una chiave invece di un indice. Una chiave può essere qualsiasi stringa o numero. La sintassi per definire un dizionario vuoto è: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Questo dimostra che hai appena creato un dizionario vuoto. Evviva! + +Ora, prova a scrivere il seguente comando (prova a sostituirlo con le tue informazioni): + +{% filename %}command-line{% endfilename %} + +```python +>>> partecipante = {'nome': 'Ola', 'paese': 'Polonia', 'numeri_preferiti': [7, 42, 92]} +``` + +Con questo comando hai appena creato una variabile chiamata `partecipante` con tre coppie di chiavi-valori: + +- La chiave `nome` va a indicare il valore `'Ola'` (un oggetto `stringa`), +- `paese` indica `'Polonia'` (un'altra `stringa`), +- e `numeri_preferiti` indica `[7, 42, 92]` (una `lista` con tre numeri al suo interno). + +Puoi controllare il contenuto di chiavi individuali con questa sintassi: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(partecipante['nome']) +Ola +``` + +Vedi, assomiglia ad una lista. Ma non devi ricordare l'indice - solo il nome. + +Cosa succede se chiediamo a Python il valore di una chiave che non esiste? Riesci a indovinarlo? Proviamo! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> partecipante['età'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'età' +``` + +Guarda, un altro errore! Questo qua è un **KeyError**. Python è utile e ti dice che la chiave `'età'` non esiste in questo dizionario. + +Quando usare un dizionario o una lista? Bella domanda. Prova a formulare una soluzione mentalmente prima di vedere la risposta nella prossima riga. + +- Ha bisogno di una sequenza ordinata di elementi? Fai una lista. +- Hai bisogno di associare i valori alle chiavi, così che potrai cercarle agilmente (per chiave) dopo? Usa un dizionario. + +I dizionari, come le liste, sono *mutable*, significa che possono essere cambiati dopo che sono stati creati. Si possono aggiugere nuove coppie chiave/valore ad un dizionario dopo averlo creato: + +{% filename %}command-line{% endfilename %} + +```python +>>> partecipante['linguaggio_preferito'] = 'Python' +``` + +Come le liste, usando la funzione `len()` sui dizionari restituisce il numero di coppie chiave-valore nel dizionario. Vai avanti e digita questo comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(partecipante) +4 +``` + +Spero che abbia senso per te. :) Pronta per divertirti con i dizionari? Vai alla prossima riga per realizzare altre cose fantastiche. + +Puoi usare il comando `del` per cancellare un elemento nella directory. Se vuoi cancellare la voce che corrisponde al tasto `'numeri_preferiti'`, digita il seguente comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Come puoi vedere dall'output, la coppia chiave-valore corrispondente alla chiave 'numeri_preferiti' è stato cancellata. + +Puoi anche cambiare un valore associato ad una chiave già creata nel dizionario. Digita: + +{% filename %}command-line{% endfilename %} + +```python +>>> partecipante['paese'] = 'Germania' +>>> partecipante +{'paese': 'Germania', 'linguaggio_preferito': 'Python', 'nome': 'Ola'} +``` + +Come puoi vedere, il valore della chiave `'paese'` è stato cambiato da `'Polonia'` a `'Germania'`. :) Eccitante, vero? Evviva! Hai già imparato un'altra cosa fantastica. + +### Indice + +Fantastico! ora sai molto sulla programmazione. In questa ultima parte hai imparato: + +- **errori** - ora sai come leggere e capire gli errori che appaiono se Python non comprende un comando che gli hai dato +- **variabili** - nomi per oggetti. Ti permettono di scrivere codice più semplice e di renderlo più leggibile +- **liste** - liste di oggetti archiviati in un ordine particolare +- **dizionari** - oggetti archiviati come coppie di chiave-valore + +Sei emozionato/a per la prossima parte? :) + +## Confrontare le cose + +> Per i lettori da casa: questa parte si trova nel video [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Larga parte della programmazione include il confrontare le cose. Qual è la cosa più semplice da confrontare? I numeri, senza dubbio. Vediamo come funziona: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +Abbiamo dato a Python dei numeri da confrontare. Come puoi vedere, non solo Python può confrontare i numeri, ma può anche confrontare i valori delle espressioni matematiche come `2 * 2` e i risultati delle funzioni come `2` restituiti da `len([4, 5])`. "Bello, eh?" + +Ti sei chiesta perché abbiamo messo due simboli di uguale `==` uno vicino all'altro per confrontare i numeri? Usiamo un singolo `=` per assegnare valori alle variabili. Sempre, **sempre** devi mettere due `==` se vuoi controllare se le cose sono uguali. Possiamo affermare anche che le cose sono diverse tra di loro. Per dirlo, usiamo il simbolo `!=`, come mostrato nell'esempio sopra. + +Dai a Python altri due compiti: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>` e `<` sono facili, ma cosa significano `>=` e `<=`? Leggili così: + +- x `>` y significa: x è maggiore di y +- x `<` y significa: x è minore di y +- x `<=` y significa: x è minore o uguale a y +- x `>=` y significa: x è maggiore o uguale a y + +Fantastico! Vuoi farne due o tre? prova questo: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Puoi dare a Python tutti i numeri da confrontare che vuoi, ti darà sempre una risposta! Molto intelligente, vero? + +- **and** - se usi l'operatore `e`, entrambe le cose confrontate devono essere True in modo tale che l'intero comando sia True +- **or** - se usi l'operatore `o`, solo una delle cose messe a confronto deve essere True in modo tale che l'intero comando sia True + +Hai sentito parlare dell'espressione "comparare mele e arance"? Proviamo l'equivalente in Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Dall'espressione puoi capire che Python non è in grado di mettere a confronto un numero (`int`) e una stringa (`str`). Ci mostra invece un **TypeError** e ci dice che i due tipi non possono essere messi a confronto. + +## Booleano + +Tra parentesi, hai appena appreso di un nuovo tipo di oggetto in Python. Si chiama **Boolean**. + +Ci sono solo due oggetti Boolean:-True-False + +- Vero +- Falso + +Ma perché Python possa capirlo, bisogna sempre scrivere True (prima lettera maiuscola, le altre minuscole). **true, TRUE, tRUE non funzionano -- solo True è corretto.** (Lo stesso vale per False, ovviamente.) + +I Boolean possono anche essere variabili! Guarda qui: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Lo puoi fare anche in questa forma: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Esercitati e divertiti con i valori booleani provando a eseguire i seguenti comandi: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Congratulazioni! I valori Booleani sono tra le cose più interessanti della programmazione e tu hai appena imparato ad utilizzarli! + +# Salvalo! + +> Per i lettori da casa: questa parte si trova nel video [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Fino ad ora abbiamo scritto tutto il nostro codice Python nell'interprete, il ché ci limita ad una riga di codice alla volta. I programmi vengono salvati in file ed eseguiti dall'**interpreter** del nostro linguaggio di programmazione o dal **compiler**. Fino ad ora abbiamo eseguito i nostri programmi una riga per volta nell' **interprete** di Python. Avremo bisogno di più di una riga di codice per i prossimi compiti, quindi dovremo fare queste cose velocemente: + +- Uscire dall'interprete di Python +- Aprire l'editor di codice che abbiamo scelto +- Salvare un po' di codice in un file python +- Eseguirlo! + +Per uscire dall'interprete di Python che abbiamo utilizzato, digita la funzione `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Questo ti immetterà nel prompt dei comandi. + +Prima abbiamo scelto un editor di codice dalla sezione [editor di codice](../code_editor/README.md) . Dobbiamo aprire l'editor ora e scrivere un codice in un nuovo file (o se stai usando un Chromebook, creare un nuovo file nell'IDE cloud e aprire il file, che sarà incluso nell'editor di codice): + +{% filename %}editor{% endfilename %} + +```python +print('Ciao, Django girls!') +``` + +Ovviamente a questo punto sei una programmatrice Python senior, quindi sentiti libera di scrivere un po' del codice che hai imparato oggi. + +Ora dobbiamo salvare il file e dargli un nome descrittivo. Chiama il file **python_intro.py** e salvalo sulla tua scrivania. Puoi chiamare il file come vuoi, ma è importante assicurarsi che finisca con **.py**. L'estensione **.py** dice al Sistema Operativo che questo è un **file eseguibile python** e che Python può eseguirlo. + +> **Nota** Dovresti notare una delle cose più belle degli editori di codice: i colori! Nella console Python ogni cosa era dello stesso colore, mentre ora dovresti visualizzare la funzione `print` di un colore differente rispetto alla stringa che la segue. Questa viene chiamata "sintassi evidenziata", ed è veramente utile quando si scrive codice. Il colore serve come suggerimento, ad esempio per una stringa che non è chiusa, o un errore di digitazione di una keyword (come la `def` per le funzioni, che vedremo più avanti). Questo è uno dei motivi per cui usiamo un editor di codice. :) + +E' ora di eseguire il file! Usando le nozioni che hai imparato nella sezione command line, usa il terminal per **cambiare cartella** alla scrivania. + + + +Su un Mac, il comando sarà più o meno così: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Su Linux, sarà così: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Ricorda che la parola "Desktop" potrebbe essere tradotta nella tua lingua.) + + + + + +Nel prompt dei comandi di Windows, sarà così: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +E su windows, sara come questo: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Se sei bloccato, chiedi aiuto. Ecco esattamente per che cosa sono qui gli autobus! + +Ora usa Python per eseguire il codice nel file: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ciao, Django girls! + + +Nota: su Windows 'python3' non è riconosciuto come comando. Al contrario, usa 'python' per eseguire il file: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Perfetto! Hai appena eseguito il tuo primo programma Python salvato su un file. Grande, no? + +Ora puoi continuare con uno strumento essenziale nella programmazione: + +## If … elif … else + +Molte cose dovrebbero essere eseguite soltanto quando si incontrano certe condizioni. E' per questo che Python ha gli **if statements**. + +Sostituisci il codice nel file **python_intro.py** con questo: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Se salviamo questo codice e lo eseguiamo, incontriamo un errore come questo: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python si aspetta che gli vengano fornite ulteriori istruzioni che saranno eseguite se la condizione `3 > 2` risulterà vera (o `True` se vogliamo). Proviamo a fare in modo che Python stampi "Funziona!". Modifica il tuo codice nel tuo file **python_intro.py** con questo: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +Vedi come abbiamo indentato la riga successiva usando 4 spazi? Si deve fare così in modo tale che Python sappia quale codice eseguire se il risultato è True. Puoi mettere uno spazio, ma la maggior parte dei programmatori di Python ne mettono 4 per rendere le cose più ordinate. Una singola scheda conterrà anche 4 spazi finché l'editor di testo è impostato per farlo. Quando hai fatto la tua scelta, non cambiarla! Se hai già indicizzato con 4 spazi, crea qualsiasi rientro futuro con 4 spazi - altrimenti potresti incorrere in problemi. + +Salvalo ed eseguilo di nuovo: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +Funziona! +``` + +Nota: Ricorda che su Windows, 'python3' non è riconosciuto come comando. Da ora in poi, sostituisci 'python3' con 'python' per eseguire il file. + +### E se una condizione non è Vera? + +In esempi precedenti, il codice è stato eseguito solo quando le condizioni erano True. Ma Python ha anche gli `elif` e `else` statements: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 è infatti maggiore di 2') +else: + print('5 non è maggiore di 2') +``` + +Quando viene lanciato, mostrerà: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 è infatti maggiore di 2 + + +Se 2 fosse più grande di 5, allora andrebbe in esecuzione il secondo comando. Facile, vero? Andiamo a vedere come funziona `elif`: + +{% filename %}python_intro.py{% endfilename %} + +```python +nome = 'Sonja' +if nome == 'Ola': + print('Hey Ola!') +elif nome == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonimo!') +``` + +ed eseguito: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +Hai visto cosa è successo? `elif` ti consente di aggiungere condizioni supplementari che verranno eseguite se nessuna delle condizioni precedenti viene soddisfatta. + +Allo statement iniziale `if` puoi far seguire tutti gli statement `elif` che vuoi. Per esempio: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python esegue ogni singolo test in sequenza e scrive: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfetto, posso apprezzare ogni dettaglio + + +## Commenti + +I commenti sono linee che iniziano con `#`. Puoi scrivere tutto ciò che vuoi dopo `#` e Python lo ignorerà. I commenti possono rendere il tuo codice più facile da capire per gli altri. + +Vediamo come funziona + +{% 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!") +``` + +Non devi scrivere un commento per ogni riga di codice, ma sono utili per spiegare perché il tuo codice sta facendo qualcosa, o fornire un riepilogo quando sta facendo qualcosa di complesso. + +### Indice + +Nei tre esercizi precedenti hai imparato: + +- come **confrontare le cose** - in Python puoi mettere a confronto le cose usando `>`, `>=`, `==`, `<=`, `<` e gli operatori `e`, `o` +- i **Boolean** - una tipologia di oggetto che può avere solo uno di questi due valori: `True` o `False` +- come **Salvare file** - archiviare codice nei file in modo da poter eseguire programmi più lunghi. +- **if...elif...else** - affermazioni che ti permettono di eseguire codice solo quando vengono incontrate certe condizioni. +- **commenti** - linee che Python non verrà eseguito che ti permettono di documentare il tuo codice + +E' ora dell'ultima parte del capitolo! + +## Le funzioni personalizzate! + +> Per i lettori da casa: questa parte si trova nel video [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Ti ricordi quelle funzioni che puoi eseguire in Python come `len()`? Beh, buone notizie, ora imparerai a scrivere delle funzioni tutte tue! + +Una funzione è una sequenza di istruzioni che Python dovrebbe eseguire. Ogni funzione in Python inizia con la parola chiave `def`, viene assegnato un nome e può avere alcuni parametri. Diamo un colpo. Sostituisci il codice nel file **python_intro.py** con il seguente: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ciao(): + print('Ciao!') + print('Come stai?') + +ciao() +``` + +Okay, la nostra prima funzione è pronta! + +Ti starai chiedendo perché abbiamo scritto il nome della funzione alla fine del file. Quando scriviamo `def hi():` e le seguenti linee indentate, questi siamo noi che scriviamo le istruzioni per cosa dovrebbe fare la funzione `hi()`. Python leggerà e ricorderà queste istruzioni, ma ancora non eseguirà la funzione. Per dire a Python che vogliamo eseguire la funzione, dobbiamo chiamare la funzione con `hi()`. Python legge il file e lo esegue dall'alto verso il basso, così che dobbiamo definire la funzione nel file prima di chiamarla. + +Eseguiamolo e vediamo cosa succede: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ciao! + Come stai? + + +Nota: se non ha funzionato, non panicare! L'output ti aiuterà a capire perché: + +- Se ottieni un `NameError`, questo probabilmente significa che hai digitato qualcosa di sbagliato, quindi dovresti controllare che tu abbia usato lo stesso nome quando crei la funzione con `def hi():` e quando lo chiamate con `hi()`. +- Se ottieni un `IndentaionError`, controlla che entrambe le linee `print` abbiano lo stesso spazio bianco all'inizio di una linea: python vuole che tutto il codice all'interno della funzione sia allineato in modo adeguato. +- Se non c'è nessun output, controlla che l'ultima `hi()` *non sia indentato* se è così, questa linea diventerà parte della funzione, e non verrà mai eseguita. + +E' stato facile! Costruiamo la nostra prima funzione con parametri. Useremo l'esempio precedente - una funzione che dice 'ciao' alla persona che lo esegue - aggiungendo il nome: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ciao(nome): +``` + +Come puoi vedere, abbiamo dato alla nostra funzione un parametro chiamato `nome`: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ciao(nome): + if nome == 'Ola': + print('Ciao Ola!') + elif nome == 'Sonja': + print('Ciao Sonja!') + else: + print('Ciao anonimo!') + +ciao() +``` + +Ricorda: La funzione `print` è rientrata di 4 spazi rispetto allo statement `if`. Infatti, la funzione viene eseguita quando la condizione viene soddisfatta. Vediamo ora come funziona: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + Traceback (most recent call last): + File "python_intro.py", line 10, in + hi() + TypeError: ciao() missing 1 required positional argument: 'nome' + + +Ops, un errore. Fortunatamente, Python ci fornisce un messaggio di errore che ci può servire. Ci dice che la funzione `ciao()` (quella che abbiamo definito) ha un argomento richiesto (chiamato `nome`) e che ci siamo dimenticati di metterlo quando abbiamo chiamato la funzione. Sistemiamolo alla fine del file: + +{% filename %}python_intro.py{% endfilename %} + +```python +ciao("Ola") +``` + +Ed eseguiamo di nuovo: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ciao Ola! + + +E se cambiamo il nome? + +{% filename %}python_intro.py{% endfilename %} + +```python +ciao("Sonja") +``` + +Ed eseguilo: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ciao Sonja! + + +Ora, cosa pensi che succederà se scrivi un altro nome? (non Ola o Sonja) Provaci e vedi se la tua ipotesi è giusta. Dovrebbe stampare questo: + +{% filename %}command-line{% endfilename %} + + Ciao anonimo! + + +Fantastico, vero? In questo modo non devi ripetere tutto ogni volta che vuoi modificare il nome della persona che la funzione dovrebbe salutare. Ed è esattamente per questo che abbiamo bisogno delle funzioni - non vuoi ripetere il tuo codice! + +Facciamo qualcosa di più intelligente – ci sono più nomi di due, e scrivere una condizione per ciascuno sarebbe difficile, giusto? Sostituisci il contenuto del tuo file con i seguenti: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ciao(nome): + print('Ciao ' + nome + '!') + +ciao("Rachel") +``` + +Ora chiamiamo il codice: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ciao Rachel! + + +Complimenti! Hai appena imparato a scrivere le funzioni! :) + +## Loop + +> Per i lettori da casa: questa parte si trova nel video [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +È l'ultima parte. Abbiamo fatto in fretta, vero? :) + +I programmatori non amano ripetere ciò che scrivono. La programmazione mira a automatizzare le cose, non vorremo mica salutare ognuno col suo nome manualmente? Ecco un caso in cui i loop ci tornano comodi. + +Ti ricordi ancora delle liste? Facciamo una lista di ragazze: + +{% filename %}python_intro.py{% endfilename %} + +```python +ragazze = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'Tu'] +``` + +Vogliamo salutare tutte loro per nome. Abbiamo la funzione `ciao` per farlo, quindi usiamola in loop: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +Lo statement ~~~ for~~~ si comporta in modo simile allo statement ~~~ if~~~; il codice sottostante deve essere rientrato di quattro spazi. + +Qua c'è l'intero codice che sarà nel file: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ciao(nome): + print('Ciao ' + nome + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'Tu'] +for name in girls: + ciao(name) + print('Prossima ragazza') +``` + +E quando lo eseguiamo: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ciao Rachel! + Prossima ragazza + Ciao Monica! + Prossima ragazza + Ciao Phoebe! + Prossima ragazza + Ciao Ola! + Prossima ragazza + Ciao You! + Prossima ragazza + + +Come puoi vedere, tutto quello che metti all'interno di un `for` statement con una spaziatura si ripeterà per ogni elemento della lista `girls`. + +Puoi anche utilizzare `for` su numeri usando la funzione `range`: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Che stamperà: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` è una funzione che crea una lista di numeri che si seguono uno dopo l'altro (questi numeri vengono forniti da te come parametri). + +Nota che il secondo di questi due numeri non è incluso nella lista prodotta da Python ( ciò significa che `range(1, 6)` conta da 1 a 5, ma non include il numero 6). Questo perché "range" è mezzo-aperto e con ciò intendiamo che include il primo valore, man non l'ultimo. + +## Indice + +È tutto. **Sei grande!** Questo capitolo non era affatto facile, puoi essere orgogliosa di te stessa. Noi siamo fierissimi di te per avercela fatta fino a qui! + +Per il tutorial ufficiale e completo di python visita https://docs.python.org/3/tutorial/. Questo ti darà uno studio più completo e completo della lingua. Saluti! :) + +Potresti desiderare di fare brevemente qualcos'altro - stiracchiati, fai due passi, riposa gli occhi - prima di continuare con il prossimo capitolo. :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/it/python_introduction/images/cupcake.png b/it/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/it/python_introduction/images/cupcake.png differ diff --git a/it/template_extending/README.md b/it/template_extending/README.md new file mode 100644 index 00000000000..5e06e2be4fd --- /dev/null +++ b/it/template_extending/README.md @@ -0,0 +1,151 @@ +# Estendere il template + +Un'altra cosa bella di Django è l'**estensione del template**. Cosa significa? Significa che puoi usare le stesse parti del tuo HTML per pagine diverse del tuo sito. + +I template ti aiutano quando vuoi usare le stesse informazioni o gli stessi layout in pagine diverse. Non devi ripetere lo stesso codice in ogni file. E se vuoi cambiare qualcosa, non lo devi fare in ogni template, ma solo in uno! + +## Creare un template di base + +Un template di base è il template più semplice. Lo puoi estendere ad ogni pagina del tuo sito. + +Creiamo un file `base.html` in `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +Poi aprilo nell'editor di codice e copia tutto da `post_list.html` al file `base.html`, in questo modo: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Poi nel `base.html`, rimpiazza tutto il tuo `` (tutto quello che si trova tra `` e ``) con questo: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Potresti aver notato che questo sostituisce tutto da `{% for post in posts %}` a `{% endfor %}` con: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Perchè? Hai appena creato un blocco! Hai appena usato un template tag `{% block %}` per creare un area che che avrà dell'HTML all'interno. Questo codice HTML verrà da altri template che estenderanno questo (`base.html`). Ti mostreremo come farlo tra un attimo. + +Ora salva `base.html` e apri di nuovo il tuo `blog/templates/blog/post_list.html` nell'editor di codice. {% raw %}Rimuovi tutto quello che c'è prima di `{% for post in posts %}` e dopo `{% endfor %}`. Quando hai finito, il file apparirà così:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Vogliamo usare questa parte del nostro template per ogni blocco per i contenuti. Aggiungiamo un tag block in questo file! + +{% raw %}Dobbiamo fare in modo che il tuo tag block combaci con quello nel tuo file`base.html`. Dobbiamo anche includere tutto il codice del blocco dei contenuti. Per farlo, metti tutto tra `{% block content %}` e `{% endblock %}`. Come questo:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Un'ultima cosa. Dobbiamo collegare questi due template. È questo che vuol dire estendere i template! Lo faremo aggiungendo un tag extends all'inizio del file. Così: + +{% 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 %} +``` + +Ecco fatto! Salva il file e controlla se il tuo sito web funziona ancora correttamente. :) + +> Se ottieni l'errore `TemplateDoesNotExist`, significa che non c'è nessun file `blog/base.html` e `runserver` è in esecuzione nella console. Prova ad arrestarlo (premendo Ctrl+C, i tasti Control e C insieme) e riavvialo utilizzando il comando `python manage.py runserver`. \ No newline at end of file diff --git a/it/whats_next/README.md b/it/whats_next/README.md new file mode 100644 index 00000000000..4dcb13c2e48 --- /dev/null +++ b/it/whats_next/README.md @@ -0,0 +1,43 @@ +# Quali sono le prospettive? + +Complimenti! **Sei veramente incredibile**. Siamo orgogliosi! <3 + +### E ora cosa si fa? + +Per prima cosa: Pausa, Relax! Hai veramente appena fatto passi da gigante. + +Dopodichè, assicurati di seguire Django Girls in [ Facebook ](http://facebook.com/djangogirls) o [ Twitter](https://twitter.com/djangogirls) per restare aggiornata. + +### Mi puoi consigliare ulteriori risorse? + +Ma certo che sì! C'è una quantità *enorme* a dir poco, di risorse online per imparare i vari aspetti della programmazione — da farti perdere l'orientamento, tanto da impedirti di decidere in che direzione andare. Le Django Girls ti hanno preparato una selezione. Qualunque fosse il tuo interesse prima di iniziare questo tutorial, e qualunque sia l'interesse che questo tutorial ha maggiormente stimolato in te, qui ci sono un paio di risorse libere (o risorse con buona parte libera) per tornare ad orientarti, ed andare nella direzione che t'interessa. + +#### Django + +- Il nostro altro libro, [Django Girls Tutorial: Estensioni](https://tutorial-extensions.djangogirls.org/) +- [Il tutorial ufficiale di Django's](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) +- [Le lezioni video su come incominciare con Django](http://www.gettingstartedwithdjango.com/) +- [Django for Everybody Specialization](https://www.coursera.org/specializations/django) – alcune lezioni a video possono essere viste gratuitamente e, seguendoli, puoi ottenere un Certificato Coursera + +#### HTML, CSS e JavaScript + +- [Corso di sviluppo web di Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Corso Python di Codecademy](https://www.codecademy.com/learn/learn-python) +- [Corso Python di Google](https://developers.google.com/edu/python/) +- [Libro: Impara Python The Hard Way](http://learnpythonthehardway.org/book/) – gli esercizi iniziali sono gratuiti +- [Nuovi tutorial di Coder](http://newcoder.io/tutorials/) – Questo è una serie di esempi pratici di come utilizzare Python +- [edX](https://www.edx.org/course?search_query=python) – puoi controllare la maggior parte dei corsi gratuiti, ma se si desidera un certificato o crediti verso una qualifica di istruzione superiore, allora questo costerà denaro +- [specializzazione Python di questa persona](https://www.coursera.org/specializations/python) – alcune lezioni video possono essere revisionate gratuitamente e puoi ottenere un certificato di Coursera seguendo questi corsi +- [Python per tutti](https://www.py4e.com/) - una versione libera e aperta del Coursera Python per la specializzazione di tutti i corpi + +#### Lavorare con i dati + +- [Corso di informatica di Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – puoi controllare la maggior parte dei corsi gratuiti, ma se si desidera un certificato o crediti verso una qualifica di istruzione superiore, allora questo costerà denaro +- [Dataquest](https://www.dataquest.io/) – le prime 30 "missioni" sono gratuite + +Non possiamo aspettare di vedere cosa costruirai in seguito! \ No newline at end of file diff --git a/ja/GLOSSARY.md b/ja/GLOSSARY.md new file mode 100644 index 00000000000..591c8c621e7 --- /dev/null +++ b/ja/GLOSSARY.md @@ -0,0 +1,3 @@ +# コードエディタ + +コードエディタはコードを保存して後から戻ってこれるようにできるアプリケーションです。 [コードエディタの章](./code_editor/README.md)で、どこから入手できるか知ることができます。 \ No newline at end of file diff --git a/ja/README.md b/ja/README.md new file mode 100644 index 00000000000..165147d1c7e --- /dev/null +++ b/ja/README.md @@ -0,0 +1,51 @@ +# Django Girls のチュートリアル + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> これは、Creative Commons Attribution-ShareAlike 4.0 International License のライセンスの下で提供しています。ライセンスについてはこちらをご確認ください。 https://creativecommons.org/licenses/by-sa/4.0/ + +## ウェルカム！ + +Django Girlsのチュートリアルにようこそ！ お会いできて嬉しいです :) このチュートリアルでは、ウェブテクノロジーの中身を見て回る旅へあなたをお連れします。私たちが知っているようにウェブを動かすのに必要なものすべてを垣間見ることができるでしょう。 + +知らないことを学ぶことは冒険のようなものです - でも心配はいりません。あなたはすでに勇気を出してここにいらっしゃるのですから、きっとうまくいくでしょう :) + +## はじめに + +世界のますます色々なところに自分が（まだ）知らないテクノロジーが使われていると感じたことはありませんか？ ウェブサイトはどうやって作るのだろうと興味をもちつつ、先延ばしにしていませんか？ ソフトウェアの世界は複雑すぎて一人でなにかに取り組むことはできないと考えたことはありませんか？ + +そんなあなたに朗報です！プログラミングはそれほど難しくありませんよ。楽しみかたをお教えします！！ + +このチュートリアルは、魔法のようにあなたをプログラマーに変身させるものではありません。 上手くなりたかったら、何ヶ月あるいは何年もの勉強と練習を積まなければいけません。 しかし、プログラミングやウェブサイトを作成することは、あなたが思っているほど複雑ではないことを、このチュートリアルをとおして示したいと思います。 テクノロジーをコワイと感じないように、できるだけ細かく説明していきますね。 + +あなたがテクノロジーやプログラミングを楽しんでくれると嬉しいです！！ + +## チュートリアルでは何を知ることができる？ + +このチュートリアルを終わらせれば、実際に動作する、自分の小さなウェブアプリを1つ動かせるようになります。私たちは、アプリをインターネット上で動かす方法を教えます。インターネット上で動くようになれば、あなたが作ったアプリを世界中の誰でも見られるようになります！ + +このようなサイトができあがります！: + +![図 0.1](images/application.png) + +> もしあなたがこのチュートリアルを１人ですすめていて、質問できるコーチが周りにいない時は、ここにチャットを用意しています：[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) これまでにワークショップに参加したことがある方やコーチの皆さんが、このチャットで助けてくれることでしょう。 心配せずに、質問をなげかけてみてくださいね！ + +それでは、[さっそく最初からやってみよう！](./how_the_internet_works/README.md) + +## 自分の家でチュートリアルを進める + +Django Girlsのワークショップに参加することはすばらしいことです。でも、いつも参加できるとは限らないですよね。 でしたら、ご自宅でこのチュートリアルに取り組むことをおすすめします。 ご自宅で取り組まれる方向けに、チュートリアルを一人で進めやすくする動画の準備を進めています。 動画の準備は進行中ですが、YouTubeチャンネル [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) ですぐにますます多くのことがカバーされるでしょう。 + +動画がすでに準備された章には、動画へのリンクがあります。 + +## コントリビューションについて + +このチュートリアルは、[DjangoGirls](https://djangogirls.org/) がメンテナンスしています。 ミスを見つけたりチュートリアルを更新したくなった時は、[コントリビューション・ガイドライン](https://github.com/DjangoGirls/tutorial/blob/master/README.md)を読んでください。 + +## チュートリアルの翻訳をしたい方へ + +現在、翻訳は crowdin.com の次のプロジェクトで管理されています。 + +https://crowdin.com/project/django-girls-tutorial + +あなたが翻訳したい言語が [crowdin](https://crowdin.com/) にない時は、[新しい issue を立て](https://github.com/DjangoGirls/tutorial/issues/new)て、追加したい言語を私たちに教えてください。 \ No newline at end of file diff --git a/ja/SUMMARY.md b/ja/SUMMARY.md new file mode 100644 index 00000000000..8a92ce208be --- /dev/null +++ b/ja/SUMMARY.md @@ -0,0 +1,35 @@ +# 概要 + +* [はじめに](README.md) +* [インストール](installation/README.md) + * [コマンドライン](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [コードエディタ](installation/README.md#code-editor) + * [仮想環境](installation/README.md#virtualenv) + * [Django](installation/README.md#django) + * [Git](installation/README.md#git) + * [GitHub](installation/README.md#github) + * [PythonAnywhere](installation/README.md#pythonanywhere) +* [Chromebookのセットアップ](chromebook_setup/README.md) +* [インターネットのしくみ](how_the_internet_works/README.md) +* [コマンドラインを使ってみよう](intro_to_command_line/README.md) +* [Pythonのインストール](python_installation/README.md) +* [コードエディタ](code_editor/README.md) +* [Python入門](python_introduction/README.md) +* [Djangoってなに？](django/README.md) +* [Djangoのインストール](django_installation/README.md) +* [プロジェクトを作成しよう！](django_start_project/README.md) +* [Djangoモデル](django_models/README.md) +* [ログインページを作ろう（Django admin）](django_admin/README.md) +* [デプロイ！](deploy/README.md) +* [Django URL](django_urls/README.md) +* [Djangoビュー](django_views/README.md) +* [HTML 入門](html/README.md) +* [Django ORM（クエリセット）](django_orm/README.md) +* [テンプレート内の動的データ](dynamic_data_in_templates/README.md) +* [Djangoテンプレート](django_templates/README.md) +* [CSSでカワイくしよう](css/README.md) +* [テンプレートを拡張しよう](template_extending/README.md) +* [アプリケーションを拡張しよう](extend_your_application/README.md) +* [Djangoフォーム](django_forms/README.md) +* [次のステップは？](whats_next/README.md) \ No newline at end of file diff --git a/ja/chromebook_setup/README.md b/ja/chromebook_setup/README.md new file mode 100644 index 00000000000..ff6832e668e --- /dev/null +++ b/ja/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook のセットアップ + +> **注意**既にインストール手順を実行している場合は、これをやり直す必要はありません。すぐにスキップして[ Python入門](../python_introduction/README.md)へ進んでください。 + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/ja/chromebook_setup/instructions.md b/ja/chromebook_setup/instructions.md new file mode 100644 index 00000000000..0cec44e70f1 --- /dev/null +++ b/ja/chromebook_setup/instructions.md @@ -0,0 +1,73 @@ +Chromebookを使わない場合は、このセクションを飛ばして、[Pythonのインストール](http://tutorial.djangogirls.org/en/installation/#install-python) に進んでください。 もし利用している場合は、普通のインストールの作業とは少し異なります。 インストール手順の残りの部分は無視できます。 + +### クラウドIDE (PaizaCloud Cloud IDE, AWS Cloud9) + +クラウドIDEはコードエディタと、インターネットにつながって動作し、ソフトウェアをインストールしたり、書いたり、実行したりできるコンピュータへのアクセスを提供するツールです。 チュートリアルを通して、クラウドIDEはまるであなたの*ローカルマシン*のように動作するでしょう。 みんながmacOSやUbuntuやWindowsでやるのと同じようにターミナルからコマンドを実行できますが、そのターミナルはクラウドIDEが準備したどこかのコンピュータに接続されています。 さて、いろいろなクラウドIDE（PaizaCloud Cloud IDE, AWS Cloud9）について見ていきましょう。 クラウドIDEのうちどれかを選んで、指示に従ってください。 + +#### PaizaCloud Cloud IDE + +1. [PaizaCloud Cloud IDE](https://paiza.cloud/) へ移動します。 +2. アカウントを登録します。 +3. *新規サーバ作成* をクリックして、Djangoを選択してください。 +4. （ウィンドウの左側にある）「ターミナル」をクリックします。 + +左側にサイドバーといくつかボタンのある画面が見えていると思います。 「ターミナル」ボタンをクリックして、下記のようなプロンプトが表示されたターミナルウィンドウを開いてください： + +{% filename %}Terminal{% endfilename %} + + $ + + +これでPaizaCloud Cloud IDEのターミナルは準備できました。 ウィンドウを大きくしたいときは、サイズを変えたり最大化したりできますよ。 + +#### AWS Cloud9 + +現在、Cloud 9 はAWSのアカウント作成とクレジットカード情報の登録が必須になっています。 + +1. [Chrome ウェブストア](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)から、Cloud 9 をインストールしてください。 +2. [c9.io](https://c9.io)に行って、*AWS Cloud9をはじめる* をクリックしてください。 +3. AWSアカウントを作成してください。（クレジットカード情報の登録が必要ですが、このチュートリアルは無料利用枠で進めることができます。） +4. AWSのダッシュボードを開き、検索ボックスで *Cloud9* と入力し選択してください。 +5. Cloud9のダッシュボードで、*Create environment (環境の作成)* を選択します。 +6. 名前は *django-girls* としておきましょう。 +7. ”Configure settings (設定の構成)”のステップでは、”Environment Type (環境タイプ)”に *Create a new instance for environment (EC2) (新しいインスタンスを作成する (EC2))* を、”Instance type (インスタンスタイプ)”に *t2.micro* を選択します（"Free-tier eligible (無料利用枠で利用できる)" と書かれているはずです）。 ”Cost-saving setting (コスト削減の設定)”はデフォルトの選択のままにします。その他の設定もデフォルトにしておきましょう。 +8. *Next step (次のステップ)* を選択します。 +9. *Create environment (環境の作成)* を選択します。 + +サイドバー、文章が書かれた大きなメインウィンドウ、そして下部にはこのような小さなウィンドウが表示されています： + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +この下の部分が、あなたのターミナルです。このターミナルから、遠くにあるCloud 9のコンピュータに指示を送ることができます。ウィンドウのサイズを変更して少し大きくすることもできます。 + +### 仮想環境 + +仮想環境 (virtualenvとも呼ばれます) は、取り組んでいるプロジェクト用に、便利なコードを詰め込んでおけるプライベートボックスのようなものです。 様々なプロジェクトの様々なコードがプロジェクト間で混ざってしまわないように、仮想環境を使います。 + +以下を1行ずつ実行してください： + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +（最後の行は`~=`とチルダに続けてイコール記号をつけることに注意してください） + +### GitHub + +[GitHub](https://github.com)アカウントを作成してください。 + +### PythonAnywhere + +Django Girls チュートリアルには、デプロイと呼ばれるセクションが含まれています。これはあなたの新しいWebアプリケーションの原動力となるコードを取得して、それを公にアクセス可能なコンピュータ（サーバーと呼ばれます）に移動するプロセスです。これにより、あなたの作ったものを他の人が見られるようになります。 + +Chromebookでチュートリアルを行うとき、（例えばラップトップとは対照的に）インターネットに接続されているコンピュータをすでに使用しているので、この作業は少し変な感じがします。 しかし、Cloud 9のワークスペースを「開発中」の場所、PythonAnywhere をより完成したものを披露する場所として考えると役に立ちます。 + +したがって、[www.pythonanywhere.com](https://www.pythonanywhere.com) へ行って、PythonAnywhereの新規アカウントを作成してください。 \ No newline at end of file diff --git a/ja/code_editor/README.md b/ja/code_editor/README.md new file mode 100644 index 00000000000..39a5576f1c2 --- /dev/null +++ b/ja/code_editor/README.md @@ -0,0 +1,11 @@ +# コードエディタ + +> 家で１人でこのチャプターに挑戦している方へ：このチャプターは、動画（英語）もあるので参考にしてください。 [Your new friend: Command Line](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) + +まさにこれから、はじめてのコードを書いていきます。コードエディタをダウンロードしましょう！ + +> **補足：** Chromebookを使っている方は、このチャプターは飛ばして、 [Chromebookのセットアップ](../chromebook_setup/README.md) の説明に従ってください。 あなたが選んだクラウドIDE（PaizaCloud Cloud IDE もしくは AWS Cloud9）にはコードエディタが含まれています。IDEのファイルメニューからファイルを開くと、自動的にエディタが使用できます。 +> +> **注意** インストールの章で、コードエディタのインストールを前もって済ませた人もいるかもしれません。もしそうなら、飛ばして次の章に進んでください！ + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/ja/code_editor/instructions.md b/ja/code_editor/instructions.md new file mode 100644 index 00000000000..7f961410224 --- /dev/null +++ b/ja/code_editor/instructions.md @@ -0,0 +1,37 @@ +本当にたくさんのエディタがありますが、どれを使うかは、結局は、ほとんど個人の好みの問題です。 ほとんどのPythonプログラマは、PyCharmなど、複雑ですが非常に強力なIDE（統合開発環境）というものを使っています。 しかし、初心者にとってはIDEはそれほど適していないかもしれないので、同じくらい強力で、もっとシンプルなものをオススメします。 + +オススメのエディタは下記に挙げますが、気軽にコーチに質問して好みや特徴ををきいてみてください。 + +## Visual Studio Code + +Visual Studio Codeは、マイクロソフトがWindowsとLinuxとmacOS向けに開発したソースコードエディタです。 デバッグのサポート、組み込まれたGit操作、シンタックスハイライト、かしこいコード補完、スニペット、リファクタリングなど多くの機能があります。 + +[ダウンロード](https://code.visualstudio.com/) + +## Gedit + +Gedit は、オープンソースの無料エディタで、全てのOSで利用可能です。 + +[ダウンロード](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text はとても人気のあるエディタで、無料の試用期間があります。全てのOSに対応しています。　 + +[ダウンロード](https://www.sublimetext.com/) + +## Atom + +Atomも人気のあるエディタで、無料でオープンソース、そしてWindows、macOS、Linuxで利用可能です。Atomは[GitHub](https://github.com/)が開発しています。 + +[ダウンロード](https://atom.io/) + +## なんでコードエディタをインストールするの？ + +なぜWordやNotepadのようなものを使わず、特別なコードエディタをインストールする必要があるのかな、と思うかもしれません。 + +まずひとつ目の理由として、コードは**プレーンテキスト**という、何の装飾もない文字列でないといけません。問題は、WordやTexteditのようなプログラムが生成するのは、実は、プレーンテキストではないということなんです。WordやTexteditは、[RTF（リッチテキストフォーマット）](https://en.wikipedia.org/wiki/Rich_Text_Format)などのような独自の形式を使って、リッチテキスト（フォントや書式を持った文字列）を生成します。 + +2つ目の理由は、コードエディタは、コードを編集することに特化しているので、コードを意味によって色づけして強調したり、引用符を自動的に閉じたりするような、便利な機能があります。 + +あとで使ってみて、こういった機能が全てわかるようになります。すぐに、信頼できる使い慣れたコードエディタが、お気に入りのツールになると思いますよ^^ diff --git a/ja/css/README.md b/ja/css/README.md new file mode 100644 index 00000000000..34dfdf55505 --- /dev/null +++ b/ja/css/README.md @@ -0,0 +1,305 @@ +# CSSでカワイくしよう! + +ブログは作ったものの、まだなんかダサいですよね。かわいくしましょう！　そのためにはCSSを使います。 + +## CSSとは？ + +Cascading Style Sheets (CSS)とは、HTMLなどのマークアップ言語で書かれたWebサイトの見た目や書式を記述するための言語です。私達のWebページをメイクアップするものとして使います。 + +でも、またゼロから作りたくないですよね。プログラマーたちがすでに作って無料で公開しているツールを使いましょう。わざわざイチから作り直す必要はないですからね。 + +## Bootstrapを使いましょう！ + +Bootstrap は美しいWebサイトを開発するためのHTMLとCSSのフレームワークとしてとても有名です: http://getbootstrap.com/ + +これは、もともとTwitterのプログラマーが作成したもので、今は、世界中の有志のボランティアで開発されています。 + +## Bootstrapのインストール + +Bootstrap をインストールするため、`.html` ファイル (blog/templates/blog/post_list.html) をコードエディタで開き `` の中にこれを追加しましょう: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +これは、あなたのプロジェクトにファイルを追加しているわけではありません。インターネット上にあるファイルを指しているだけです。では、Webサイトを開いてページを再読み込みしてください。 + +![図 14.1](images/bootstrap1.png) + +これだけでずいぶん見た目が良くなりましたね！ + +## Djangoの静的ファイル + +最後に、**静的ファイル**と呼ばれるものを詳しく見ていきましょう。 静的ファイルとは、CSSファイルや画像ファイルといった、動的な変更が発生しないファイルのことです。 そのため、これらのファイルはリクエストに依存せず、どのユーザに対しても中身は同じになります。 + +### 静的ファイルはプロジェクトのどこに置けばいいの？ + +Djangoは、ビルトインの "admin" アプリにより、静的ファイルをどこで探せばいいのかわかっています。私たちがやることは、`blog` アプリのための静的ファイルを追加することだけです。 + +そのために、blogアプリの中に `static` というフォルダを作ります。 + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Djangoは、全てのアプリのフォルダ内の "static" と名づけられた全てのフォルダを自動的に探して、その中身を静的ファイルとして使えるようにします。 + +## 最初のCSSファイル！ + +CSSファイルを作って、Webサイトにあなたのスタイルを設定していきましょう。 `static` ディレクトリの中に `css` というディレクトリを作成しましょう。 そして、その `css` ディレクトリの中に `blog.css` という新規ファイルを作ります。 準備OK？ + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +ついにCSSを書くときが来ました！　コードエディタで `blog/static/css/blog.css` ファイルを開きましょう。 + +ここではCSSのカスタマイズや学習方法については詳しく説明しません。さらに知りたい場合は、このページの最後に無料のCSSの学習コースを紹介していますので、そちらを参考にしてください。 + +ただ、せめて少しはここでやってみましょう。 ヘッダーの色を変えてみるのもいいかもしれませんね。 色を理解するために、コンピュータは特殊なコードを使います。 コードは、`#` で始まり、6種類のアルファベット（A-F）や数字（0-9）が続きます。 たとえば、青色のコードは `#0000FF` です。 カラーコードのサンプルはこのサイト http://www.colorpicker.com/ で確認できます。 `red` や `green` といった[定義済みの色](http://www.w3schools.com/colors/colors_names.asp)を利用することもできます. + +`blog/static/css/blog.css` ファイルに、次のコードを追加しましょう。 + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` はCSSセレクタと呼ばれるものです。 これは、`h1`要素内の`a`要素にスタイルを適用していることを意味します。 `h2 a`セレクタは、`h2`要素に対して同じことを行います。 よって `

link

`となっているとき、 `h1 a` スタイルが適用されます。 この場合、その要素を `#C25100` に、つまり濃いオレンジ色にしようとしています。 あるいは、あなたの好きな色を設定することができますが、それが白い背景に対して良いコントラストを持つことを確認しましょう！ + +CSSファイルには、HTMLファイルの各要素のスタイルを指定していきます。 まずは要素名でもって、その要素を識別します。 HTMLのタグ名は覚えがあるでしょう。 例えば `a`, `h1`, `body` などが要素名の例です。 また、`class` 属性や、`id` 属性によって要素を識別することができます。 classやidは、あなたが自分で要素につけることができる名前です。 classは要素のグループを定義して、idは特定の要素を指定します。 例えば、次のタグは、タグ名 `a`、class名 `external_link`、id名 ` link_to_wiki_page`、どれを使ってもCSSによって識別されます。 + +```html + +``` + +CSSセレクタについては[CSS Selectors in w3schools](http://www.w3schools.com/cssref/css_selectors.asp)を見てください。 + +さて、CSSを追加したことをHTMLテンプレートに教えないといけません。`blog/templates/blog/post_list.html` を開いて、先頭にこの行を追加しましょう： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +これで、このテンプレートに静的ファイルを読み込むことができました^^。そして、`` と `` の中にあるBootstrap CSSファイルのリンクの下に、この行を追加しましょう： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +ブラウザは上から書いた順番でファイルを読み込むので、記述する箇所はよく確かめる必要があります。 順番が逆になると、私たちが書いたファイルがBootstrapのファイルに上書きされてしまうかもしれません。 これで、テンプレートにCSSファイルがある場所を教えました。 + +ファイルは次のようになっているはずです： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +保存して、サイトを更新してください。 + +![図 14.2](images/color2.png) + +素晴らしいですね！あとは、左サイドの余白幅を少し広げて、余裕を持たせてあげたらもっと良くなると思いませんか？やってみましょう！ + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +これをCSSに追加して、保存してください。どのように変化したか、さぁ見てみましょう！ + +![図 14.3](images/margin2.png) + +ヘッダーのフォントを変えてみませんか？ファイル `blog/templates/blog/post_list.html` の `` タグの中に次の一行を貼り付けましょう。 + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +まずは、このリンクが `blog/static/css/blog.css` より前にあることを確かめましょう。この１行は *Lobster* というフォントをGoogle Fonts (https://www.google.com/fonts) から読み込むということを意味しています。 + +`blog/static/css/blog.css` ファイルの中の、 `h1 a` という宣言ブロックを見つけてください（コードは `{` と `}` で囲まれています）。 そして、そのカッコの中に `font-family: 'Lobster';` と１行追加して、webサイトを更新してみましょう： + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![図 14.3](images/font.png) + +素晴らしいです！ + +前述のように、CSSはクラスの概念を持っています。 それにより、HTMLコードの一部に名前を指定し、他の部分に影響を与えずにこの部分にだけスタイルを適用することができます。 なんて便利なんでしょう！ 例えば、２つのdiv要素（ヘッダーと記事など）があったとして、これらのそれぞれに違うスタイルを適用することができます。 クラスを利用すると、違う見た目にできるのです。 + +先に進んで、HTMLコードの一部に名前をつけましょう。ヘッダーを含む`div` 要素に、`page-header` というクラス名をつけましょう： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +さらにブログ投稿を含む `div` 要素に `post` というクラス名をつけましょう。 + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +そして、さまざまなセレクタに宣言ブロックを追加します。 `.` で始まるセレクタはクラスに関連します。 Web上にはCSSに関する多くのチュートリアルがあり、それらは以下に示すコードを理解する手助けになるはずです。 今のところは、`blog/static/css/blog.css` のファイルに以下の内容をコピー＆ペーストしましょう： + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #C25100; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, .post h2 a:visited { + color: #000000; +} +``` + +では、投稿を表示しているHTMLコードをクラス宣言で囲みましょう。 `blog/templates/blog/post_list.html` 中のこの部分を + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +これで置き換えて下さい： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +ファイルを保存してWebサイトを更新してみましょう。 + +![図 14.4](images/final.png) + +やったー！ ほら凄いでしょ？ 貼り付けたコードを見て、HTMLにクラスを追加した場所やそのクラスがCSSの中で使われている場所を探してみましょう。 日付の色をターコイズブルーにするには、どこを変更すればいいでしょうか？ + +CSSをいじって表示が壊れることを恐れないで、どんどん変更を加えてみてください。 CSSで遊んでみることで、何がどうなっているかを理解できてきます。 たとえ何かを壊してしまっても、心配しないで！すぐに元に戻すことができます。 + +[freeCodeCamp](https://learn.freecodecamp.org/)で無料のオンラインコース「Basic HTML & HTML5」と「Basic CSS」を受講することをおすすめします。 これらで学ぶと、HTMLとCSSであなたのWebサイトをよりカワイくできるでしょう。 + +さて、次の章にいく準備はできましたか？^皿^ \ No newline at end of file diff --git a/ja/css/images/bootstrap1.png b/ja/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/ja/css/images/bootstrap1.png differ diff --git a/ja/css/images/color2.png b/ja/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/ja/css/images/color2.png differ diff --git a/ja/css/images/final.png b/ja/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/ja/css/images/final.png differ diff --git a/ja/css/images/font.png b/ja/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/ja/css/images/font.png differ diff --git a/ja/css/images/margin2.png b/ja/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/ja/css/images/margin2.png differ diff --git a/ja/deploy/README.md b/ja/deploy/README.md new file mode 100644 index 00000000000..9a28af415e4 --- /dev/null +++ b/ja/deploy/README.md @@ -0,0 +1,222 @@ +# デプロイ！ + +> **補足** このチャプターはちょっと難しいことが沢山書かれています。 頑張って最後までやりきってください。デプロイはウェブサイトを開発するプロセスの上で、とても重要な部分ですが、つまずきやすいポイントも多く含まれています。 チュートリアルの途中にこのチャプターを入れています。そういったつまずきやすい箇所はメンターに質問して、あなたが作っているウェブサイトをオンラインでみれるようにしてください。 言い換えれば、もし時間切れでワークショップ内でチュートリアルを終わらせることができなかったとしても、この後のチュートリアルはきっと自分で終わらせることができるでしょう。 + +今のところ、あなたが作ったサイトは、あなたのコンピューターでしかみることができません。 ここでは、デプロイの方法を学びましょう！ デプロイとは、あなたが作っているアプリケーションをインターネットで公開することです。あなた以外の人もウェブサイトを見ることができるようになりますよ. :) + +これまでに学んだとおり、ウェブサイトはサーバーに置かれています。 インターネットで利用できる多くのサーバー プロバイダーがありますが、私達は [PythonAnywhere](https://www.pythonanywhere.com/) を使用します。 PythonAnywhere は、多くの人がアクセスするものではない小さいアプリケーションを無料で公開できますので今のあなたには最適でしょう。 + +使用するその他の外部サービスは [GitHub](https://www.github.com)、コードのホスティング サービスです。 他にも色々ありますが、ほとんどのプログラマはGitHubのアカウントを持っています。そしてあなたも今そうなります。 + +これら3つの場所が重要になります。 ローカルコンピューターは、開発およびテストを行う場所になります。 変更に満足したら、GitHub上にプログラムのコピーを配置します。 あなたのウェブサイトはPythonAnywhereで公開され、GitHub からコードの新しいコピーを取得することによって更新されます。 + +# Git + +> **注：**もし、すでにインストールしていた場合は再度行う必要はありません。次のセクションに進んであなたのGitリポジトリを作り始められます。 + +{% include "/deploy/install_git.md" %} + +## Gitリポジトリを始める + +Gitはコードリポジトリ（または略して「リポジトリ」）というものの中に置かれる特定のファイルへの変更を追跡します。 私たちのプロジェクトを開始しましょう。 あなたのコンソールを開き、`djangogirls` ディレクトリでこれらのコマンドを実行します。 + +> **備考：**リポジトリを初期化する前に `pwd` (OSX/Linux) または `cd` (Windows) コマンドで現在の作業ディレクトリを確認してください。 `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 + + +gitリポジトリを初期化することは、プロジェクトごとに1回だけ行う必要があります（ユーザー名と電子メールをもう一度入力する必要はありません）。 + +Git はこのディレクトリ内のすべてのファイルとフォルダの変更を追跡しますが、無視してほしいいくつかのファイルがあります。 ベースディレクトリ内で `.gitignore` という名前のファイルを作成することによってこれを行います。 あなたのエディターを開き、次の内容で新しいファイルを作成します。 + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + /.vscode + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +これを "djangogirls" フォルダ内に `.gitignore` という名前で保存します。 + +> **備考：**ファイル名の先頭のドットは重要です! もしそのファイルを作るのが難しいなら、（Macをお使いの方はFinderからドット（ . ）で始まるファイルを作れません。）そういう時はエディタでSave Asから作成すれば問題ありません。 `.txt`や `.py`などの拡張子をファイル名に入れないように気をつけてください。 ファイル名が`.gitignore`でないとGitに認識されません。 +> +> **備考：** `.gitignore`ファイルで指定したファイルの1つが`db.sqlite3`です。 そのファイルはローカルデータベースで、すべてのユーザーと投稿が保存されます。 私達は標準的なウェブプログラミングの慣習に従います。つまり、ローカルのテストサイトとPythonAnywhere上の本番のウェブサイトでデータベースを分けるということです。 PythonAnywhereのデータベースは開発用のマシンと同じようにSQLiteにすることができますが、通常はMySQLというSQLiteよりもたくさんのサイト訪問者に対処できるデータベースを使用します。 どちらの方法でも、GitHubのコードのコピーではSQLiteデータベースを無視することで、これまでに作成したすべての投稿と管理者はそのままローカルで利用できますが、本番環境（ブログを公開するPythonAnywhereのことです）ではそれらを再び作成する必要があります。 ローカルデータベースは本当のブログ投稿をブログから削除してしまうことを心配せずに、さまざまなことをテストできるよい遊び場として考えるといいでしょう。 + +`git add` コマンドを実行する前や、どのような変更を加えたか定かでない時は、 `git status` コマンドを使用する事をおすすめします。 これは間違ったファイルを追加またはコミットなど思いもかけない事を止めるために役立ちます。 `git status` コマンドは、あらゆる追跡されていない/変更されている/ステージされている（untracked/modifed/staged）ファイルや、ブランチの状態などさまざまな情報を返します。 出力は次のようになります。 + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +最後に、変更内容を保存します。コンソールに移動し、これらのコマンドを実行します。 + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## GitHubにコードをプッシュする + +[GitHub.com](https://www.github.com)にアクセスし、Sign upをクリックして無料の新規アカウントを作成してください。 （ワークショップの前にすでに作成していたら、それは素晴らしいです!） あなたのパスワードを忘れないようにしてください（使っていたら、パスワードマネージャーに入れておいてください） + +そして、新しいリポジトリに "my-first-blog"の名前で新しいリポジトリを作成します。 "READMEで初期化する"チェックボックスをオフのままにし、.gitignoreオプションを空白にして（手動で行っています）、ライセンスをNoneのままにしておきます。 + +![](images/new_github_repo.png) + +> **注** `my-first-blog`という名前は重要です。何か他のものを選択することもできますが、以下の手順では何度も繰り返す必要があります。他の名前を選択した場合は、 毎回それを置き換えてください。 できれば、`my-first-blog` の名前にしておきましょう。 + +次の画面では、リポジトリをクローンするためのURLが表示されます。これはこの後のコマンドで利用します。 + +![](images/github_get_repo_url_screenshot.png) + +そして自分のコンピューター上のGitリポジトリをGitHub上のGitリポジトリに結びつけてあげる必要があります。 + +コンソールに次のように入力します（``をGitHubアカウントの作成時に入力したユーザー名に置き換えます。山カッコ<>を残さないでください。このURLはさっき見たクローンURLと一致する必要があります）。 + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +GitHubにプッシュするとき、GitHubのユーザー名とパスワードを聞かれます（コマンドライン上かポップアップウィンドウにて）。認証情報を入力したらこんな風に表示されます。 + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +あなたのコードは今GitHub上にあります。 見に行きましょう！ [ Django ](https://github.com/django/django)や[ Django Girls Tutorial ](https://github.com/DjangoGirls/tutorial)、その他たくさんの素晴らしいオープンソースソフトウェアプロジェクトもGitHubでコードをホストしています。 :) + +# PythonAnywhereでブログを設定する + +## PythonAnywhere アカウントにサインアップする + +> **備考：**あなたがすでにPythonAnywhereのアカウントを以前に作成しインストールの手順をふんでいたら、再びそれを行う必要はありません。 + +{% include "/deploy/signup_pythonanywhere.md" %} + +## PythonAnywhere でサイトを設定する + +ロゴをクリックしてメインの[PythonAnywhere Dashboard](https://www.pythonanywhere.com/)に戻り、「Bash」コンソールを起動するボタンをクリックします。これはPythonAnywhereバージョンのコマンドラインで、ちょうどあなたのコンピューターのコマンドラインと同じようなものです。 + +![PythonAnywhereのウェブインターフェースの「New Console」、「bash」ボタン](images/pythonanywhere_bash_console.png) + +> **備考：**PythonAnywhere は Linuxベースなので、Windowsを使っている場合は、コンソールがあなたのものと少し違って見えるでしょう。 + +PythonAnywhereにWebアプリケーションをデプロイするには、コードをGitHubからプルし、PythonAnywhereがそれを認識してWebアプリケーションのサーバを動かし始めるように設定する必要があります。 それを手動で行う方法もありますが、PythonAnywhereはそれをすべて行うヘルパーツールを提供しています。 まず、インストールしてみましょう。 + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +`Collecting pythonanywhere` のようなメッセージがいくつか出力され、最終的に`Successfully installed (...) pythonanywhere- (...)`という行で終わると思います。 + +GitHub からアプリを自動的に構成するためのヘルパーを実行します。 PythonAnywhereのコンソールに次のように入力します（GitHubからクローンするときのURLと一致するように、``の代わりにご自身のGitHubユーザー名を使用することを忘れないでください）： + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py --python=3.6 https://github.com//my-first-blog.git + + +実行しているところを見れば、何をしているのかわかるでしょう。 + +- GitHubからコードをダウンロードする +- ちょうどあなたのPC上でやったように、PythonAnywhere上に仮想環境 を作成する +- 一部のデプロイメント設定で設定ファイルを更新する +- `manage.py migrate`コマンドを使ってPythonAnywhere上のデータベースをセットアップする +- 静的ファイルの設定（これについては後で学習します） +- APIを通じてPythonAnywhereがあなたのWebアプリケーションを提供するように設定する + +PythonAnywhereではこれらすべてのステップは自動化されていますが、他のサーバープロバイダーでは同じ手順を自分で実行しなければなりません。 + +今注目すべき重要な点は、PythonAnywhere上のデータベースが、自分のPC上のデータベースとはまったく別物であることです。つまり、異なる投稿と管理者アカウントを持つことができます。 その結果、自分のコンピュータで行ったように、`createsuperuser`で管理者アカウントを初期化する必要があります。 PythonAnywhereがあなたの代わりに仮想環境を自動的に起動したので、あなたがする必要があるのは以下の通りです： + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +管理者の詳細を入力します。 PythonAnywhere上のパスワードをより安全にしたい場合を除き、混乱を避けるために自分のコンピュータで使用しているのと同じものを使用することをお勧めします。 + +PythonAnywhereのコードを`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 + + +また、Filesページに移動し、PythonAnywhereに組み込まれているファイルブラウザを使用して閲覧することもできます。 (ConsoleページからPythonAnywhereの他のページには、右上のメニューボタンからいけます。 一度いずれかのページに移動したら、他ページへのリンクは上部にあります。) + +## 動いています！ + +あなたのサイトは現在、インターネット上で動作しているはずです！ PythonAnywhereのWebページをクリックしてリンクを取得します。 あなたはあなたが望む誰とでもこれを共有することができます:) + +> **注** これは初心者向けのチュートリアルです。このサイトをデプロイする際にはセキュリティの観点からは理想的ではない、いくつかのショートカットをしました。 もしこのプロジェクトを利用すると決めたり、新しいプロジェクトを開始する場合は、あなたのサイトを安全にするいくつかのヒントについて、[Djangoデプロイチェックリスト](https://docs.djangoproject.com/ja/5.1/howto/deployment/checklist/)を注意深く読んでください。 + +## デバッギングのヒント + +`pa_autoconfigure_django.py`スクリプトの実行中にエラーが表示された場合は、次のような原因が考えられます。 + +- PythonAnywhere APIトークンの作成を忘れている +- あなたのGitHubのURLを間違えている +- *Could not find your settings.py*というエラーが表示された場合は、おそらくGitにすべてのファイルを追加できていなかったか、 GitHubにうまくプッシュできていなかった。 この場合はGitセクションをもう一度見てください +- PythonAnywhereのアカウントを以前に作成していてcollectstaticでエラーが起きたとしたら、あなたのアカウントで古いバージョンのSQLite（例えば、3.8.2）を使っている可能性があります。 その場合、新しいアカウントを作成して、上記のPythonAnywhereのセクションに記載しているコマンドを実行してください。 + +サイトにアクセスしようとするとエラーが表示された場合、最初にデバッグ情報を探す場所は**エラーログ**です。 PythonAnywhereの[ Webページ](https://www.pythonanywhere.com/web_app_setup/)には、エラーログへのリンクがあります。 そこにエラーメッセージがあるかどうかを確認してください。 最新のものは一番下にあります。 + +[ PythonAnywhereヘルプサイトの一般的なデバッグのヒント](http://help.pythonanywhere.com/pages/DebuggingImportError)もあります。 + +つまづいた時は、コーチに助けを求めましょう。 + +# あなたのサイトをチェック！ + +サイトのデフォルトページでは、ローカルコンピュータと同じように「It worked！」と表示されます。 URLの最後に`/admin/`を追加すると、管理サイトに移動します。 ユーザー名とパスワードでログインしたら、Postsへのリンクからサーバーに新規投稿を追加できることがわかるでしょう。ローカルのテスト用データベースの投稿は本番環境のブログに送られていないことも忘れないてくださいね。 + +いくつかの投稿を作成したら、ローカル環境（PythonAnywhereではなく）に戻ることができます。 ここから、変更を加えるためにはあなたのローカル環境で作業する必要があります。 これがWeb開発の一般的なワークフローです。ローカルで変更し、それらの変更をGitHubにプッシュし、それからその変更を公開しているWebサーバーにプルしてきます。 これにより、公開しているWebサイトを壊すことなく作業したり試したりできます。 とってもクールでしょ？ + +自分を*すっごく*褒めてあげてください！ サーバーのデプロイはWeb開発の最も難しい部分の1つで、ちゃんと動くようになるまで数日かかることもよくあります。 しかし、あなたは実際のインターネット上で、あなたのサイトを動かす事ができました！ diff --git a/ja/deploy/images/github_get_repo_url_screenshot.png b/ja/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/ja/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/ja/deploy/images/new_github_repo.png b/ja/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/ja/deploy/images/new_github_repo.png differ diff --git a/ja/deploy/images/pythonanywhere_account.png b/ja/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/ja/deploy/images/pythonanywhere_account.png differ diff --git a/ja/deploy/images/pythonanywhere_bash_console.png b/ja/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..458b43f5d0d Binary files /dev/null and b/ja/deploy/images/pythonanywhere_bash_console.png differ diff --git a/ja/deploy/images/pythonanywhere_beginner_account_button.png b/ja/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/ja/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/ja/deploy/images/pythonanywhere_create_api_token.png b/ja/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..6e617d0a53e Binary files /dev/null and b/ja/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/ja/deploy/install_git.md b/ja/deploy/install_git.md new file mode 100644 index 00000000000..95089ffcc3a --- /dev/null +++ b/ja/deploy/install_git.md @@ -0,0 +1,52 @@ +Gitはたくさんのプログラマが利用する「バージョン管理システム」です。 このソフトウェアは、特定のバージョンを後で呼び出すことができるように、時間の経過とともにファイルへの変更を追跡することができます。 ワードプロセッサープログラム (例えば、Microsoft WordやLibreOffice Writer）の「変更履歴」機能をより強力にしたようなものです。 + +## Gitのインストール + + + +[git-scm.com](https://git-scm.com/) からGitをダウンロードすることができます。 2つのステップを除いて「次へ」を押して進んで大丈夫です。エディタを選ぶステップでは、Nanoを選んでください。「PATH環境を調整する(Adjusting your PATH environment)」というステップでは、「Use Git and optional Unix tools from the Windows Command Prompt（WindowsコマンドプロンプトからGitとオプションのUnixツールを使用する）」（一番下の選択肢）を選択します。 それ以外はデフォルトの設定値で構いません。 改行コードの変換(Configuring the line ending conversions)については、「Checkout Windows-style, commit Unix-style line endings」の選択で大丈夫です。 + +インストールが正常に終了した後、コマンドプロンプトまたはPowerShellを再起動することを忘れないでください。 + + + +[git-scm.com](https://git-scm.com/) からGitをダウンロードし、指示に従ってください。 + +> **注** OS X 10.6,10.7、または10.8を実行している場合は、ここからgitのバージョンをインストールする必要があります: [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/ja/deploy/signup_pythonanywhere.md b/ja/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..06f0a3ce5a3 --- /dev/null +++ b/ja/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhereはクラウド上のサーバーでPythonのコードを走らせるためのサービスです。私たちのサイトをホスティングして、インターネット上で動かし続けるために使います。 + +今までの章で作ったブログをPythonAnywhere上にホスティングします。PythonAnywhereの「Beginner」アカウントを作成しましょう(アカウントは無料枠で大丈夫です。クレジットカードは必要ありません)。 + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![PythonAnywhereの登録ページ。無料の「Beginner」アカウントを作るためのボタンがあります。](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **注意** ユーザー名をつけるとき、ユーザー名が `yourusername.pythonanywhere.com` というようにブログのURLに反映されることに注意しましょう。なので、あなたのニックネームかブログの名前をユーザー名とするようにしてください。 パスワードは忘れないようにしてください。(パスワードマネージャーを使っているなら覚えさせておくのも良いでしょう。) + +## PythonAnywhere APIトークンの作成 + +トークンは一度だけ作ればよいです。PythonAnywhereの登録が終わるとダッシュボード画面に移動します。「Account」ページへのリンクはページ右上のバーの中にあります。 + +![ページ右上にあるAccountページへのリンク](../deploy/images/pythonanywhere_account.png) + +「Account」ページに移動したら、「API Token」というタブを選んで、「Create new API token」のボタンを押してください。 + +![Accountページの「API Token」のタブ](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/ja/django/README.md b/ja/django/README.md new file mode 100644 index 00000000000..23550b7b2bf --- /dev/null +++ b/ja/django/README.md @@ -0,0 +1,27 @@ +# Djangoってなに？ + +Django (/ˈdʒæŋɡoʊ/ *jang-goh* ジャンゴ と読みます) は無料でオープンソースとして公開されているPythonを使用したWebアプリケーションフレームワークです。 Web フレームワークは、素早く、簡単にウェブサイトを開発するのに役立つコンポーネントの一式が含まれています。 + +ほら、Webサイトを構築する時、同じような構造が毎回必要になってきますよね。ユーザー認証（サインアップ、サインイン、サインアウト）、管理者用の画面、フォーム、ファイルのアップロードなど。 + +開発者たちはサイトを構築する度に同じ問題を抱えたため、みんなで力を合わせてフレームワークを開発しました。（Djangoはフレームワークのひとつです。）幸運なことに、私たちは、開発に必要な要素がすでに含まれているフレームワークを使って開発することができます。 + +フレームワークを使うことで、私たちは開発をイチから作り直して車輪の再発明をすることを避けられます。また、新しいサイトを構築する際にかかる最初の準備に必要なコストを軽減します。 + +## なぜフレームワークを必要とするか。 + +Djangoを本当に理解するために、サーバーの役割についてもう少し考えてみましょう。サーバーにWebページを配信してもらうようにするには、サーバーにその設定をする必要があります。 + +手紙が届くポストを想像してください。手紙はユーザからWebサーバーに送られるリクエストのことで、ポストはWebサーバーのポートのことです。 Webサーバーが行っています。 Webサーバーはこのポストを監視して、手紙が届くとそれを読み、Webページから返事を送ります。 返事を送ろうとする時、コンテンツが必要ですね。 Djangoは、あなたがそのコンテンツを作る手助けをするものです。 + +## 誰かがあなたのWEB サイトにリクエストを要求したときどうなりますか。 + +Webサーバーにリクエストがあると、Djangoに伝えられ、リクエストの内容を把握しようとします。 まずWebページのアドレスを調べ、リクエストに対して何をするか決めます。 これは、Djangoの**urlresolver**が行います。（WebサイトのアドレスはURLと呼ばれます。 Uniform Resource Locator の略です。-resolverとは「解決するもの」という意味ですので、*urlresolver* というのはうなずけますよね。)。 パターンのリストを受け取って、URLに一致するものを探します。あまり賢いとはいえません。 Djangoは上から下にURLパターンを順に調べていきます。そこで何かがマッチすると、Djangoは*ビュー*と呼ばれる関数にリクエストを送ります。 + +郵便配達員を思い浮かべてください。 配達員は、通りを歩き、ひとつひとつの家の番地と、手紙に書かれている番地を見比べて行きます。 マッチする番地があったら、手紙をそこに置いていきます。 urlresolverも同じ仕組みです。 + +*ビュー*関数では、面白いことが行われます。私たちは、データベースに情報を探しにいきます。 時に、ユーザーがデータを変更するよう求めてきますよね？ 例えば、「私の仕事内容を変えて下さい」といった手紙のように。*ビュー*は、まずあなたにその権限があるか確認します。次に、仕事内容を書き換えて、「完了しました！」というメッセージをあなたに送り返します。そして、*ビュー*が反応を返して、DjangoがユーザーのWebブラウザに情報を送ります。 + +上記の説明は、多少簡略化して説明しています。しかし、今ここでは、技術的なことを完璧に理解する必要はありません。概念が分かれば十分です。 + +これ以上詳細について深く説明するより、きっと、Djangoを使って実際に手を動かして作ってみる方がいいでしょう。重要な事はすべてその過程で学べますよ！ \ No newline at end of file diff --git a/ja/django_admin/README.md b/ja/django_admin/README.md new file mode 100644 index 00000000000..2af2c8e756e --- /dev/null +++ b/ja/django_admin/README.md @@ -0,0 +1,57 @@ +# Django admin + +今作成したポストを追加、編集、削除するのにDjango adminを使います。 + +`blog/admin.py`ファイルをエディタで開いて、内容をこのように変えて下さい： + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +見て分かる通り、前回定義したPostモデルをimportしています。 モデルをAdminページ（管理画面）上で見えるようにするため、`admin.site.register(Post)`でモデルを登録する必要があります。 + +ではPostモデルを見てみましょう。 Web サーバーを実行するコンソールで `python manage.py runserver` を実行してください。 ブラウザに行って http://127.0.0.1:8000/admin/ とアドレスバーにタイプします。 こんなログインページが出ますね。 + +![ログインページ](images/login_page2.png) + +ログインするには、*superuser *（サイトの全てを管理するユーザー）を作る必要があります。 コマンドラインに戻り、`python manage.py createsuperuser` と入力し、enter キーを押します。 + +> Webサーバーを実行しているときに新しいコマンドを入力したい場合は、新しいターミナルウィンドウを開き、仮想環境（virtualenv）を有効にすることを思い出してください。 **プロジェクトを作成しよう！**の**ウェブサーバを起動する**セクションでどうやって新しいコマンドを書くかというのを見直しました。 + +{% filename %}macOS または Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +プロンプトが表示されたら、ユーザー名 (小文字、スペースなし)、電子メール アドレス、およびパスワードを入力します。 **タイプしてる間パスワードは見えなくても大丈夫、それが正常です。**タイプして`Enter`を押して続けましょう。 そうすればこのように見えるはずです。（ユーザーネームとパスワードは今あなたがタイプしたものです。） + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +ブラウザに戻ってsuperuserでログインすると、Django admin ダッシュボードが見えるでしょう。 + +![Django admin](images/django_admin3.png) + +Postsをクリックして移動し、少し試してみましょう。 5つか6つほど記事を追加してみることにします。 内容は気にしなくて大丈夫です。ローカルコンピュータで、あなただけに見える記事ですので。また、時間を節約するため、このチュートリアルからテキストをコピー&ペーストしても構いません。 :) + +少なくとも 2 つまたは 3 つの記事 (すべてではない) は公開日がセットされているようにしてください。後ほど役に立ちます。 + +![Django admin](images/edit_post3.png) + +Django adminについてもっと知りたいときは、Djangoのドキュメントを見るとよいでしょう。https://docs.djangoproject.com/ja/5.1/ref/contrib/admin/ + +ここでそろそろコーヒー（または紅茶）か何か食べるものを摂って自分を元気づけるのにいいタイミングでしょう。最初のDjangoモデルを作ったのだから、少し休みをとっていいところです！ diff --git a/ja/django_admin/images/django_admin3.png b/ja/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/ja/django_admin/images/django_admin3.png differ diff --git a/ja/django_admin/images/edit_post3.png b/ja/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/ja/django_admin/images/edit_post3.png differ diff --git a/ja/django_admin/images/login_page2.png b/ja/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/ja/django_admin/images/login_page2.png differ diff --git a/ja/django_forms/README.md b/ja/django_forms/README.md new file mode 100644 index 00000000000..30c46581768 --- /dev/null +++ b/ja/django_forms/README.md @@ -0,0 +1,449 @@ +# Djangoフォーム + +私たちのWebサイトで最終的にやりたいことは、記事を追加したり編集したりするためのよい方法を作ることです。 `Django admin`はかなりいいですが、カスタマイズしたりかわいくいい感じにするのはちょっと大変です。 `フォーム` によってインターフェイスを完璧にコントロールできるようになります。想像するほとんど全てのことができます！ + +Djangoフォームのよいところは、フォームをゼロから定義できたり、フォームの結果をモデルに保存できる`ModelForm`を作れたりするところです。 + +これはまさに私たちがやりたいことです：`Post`モデルのためのフォームを作ります。 + +Djangoの他の重要なパーツと同様に、フォームは自身のファイルがあります: `forms.py` + +これは`blog`ディレクトリの下にforms.pyの名前で作る必要があります。 + + blog + └── forms.py + + +このファイルをエディタで開き、次のコードを入力してください。 + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +最初にDjangoのformsをインポート（`from django import forms`）し、`Post`モデルもインポート（`from .models import Post`）する必要があります。 + +`PostForm`とは何かと思うかもしれませんが、これはフォームの名前です。 このフォームが `ModelForm` の一種だとDjangoに伝える必要があります (Djangoが私たちのためにいくつか魔法をかけられるように)。`forms.ModelForm`がその役割を果たします。 + +次に`class Meta`ですが、ここでDjangoにフォームを作るときにどのモデルを使えばいいか (`model = Post`) を伝えます。 + +最後にフォームのフィールドに何を置くか書きます。 ここでは、私たちは`title`（タイトル）と `text`（本文）のみをフォームで使用します。 `author` は現在ログインしている人（あなた）です。 `created_date` は（コードによって）自動的に記事を書いた日時が設定されます。 + +ひとまずこれでおしまいです！あとはフォームを*ビュー*で使い、それをテンプレート内に表示しさえすればいいです。 + +もう一度、ページへのリンク、URL、ビューとテンプレートを作ります。 + +## フォームにおけるページへのリンク + +`blog/templates/blog/base.html` をエディタで開きましょう。`page-header` と名付けた `div` 中に次のリンクを追加します： + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +新しいビュー` post_new `を呼び出すことに注意してください。 ` "glyphicon glyphicon-plus" `クラスは、使用しているBootstrapテーマによって提供され、プラス記号を表示します。 + +行を追加すると、このような html ファイルになります。 + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +ファイルを保存して、ページ http://127.0.0.1:8000 をリロードすると見覚えのある `NoReverseMatch` エラーが表示されると思います。実際にそうなってますか？いいですね！ + +## URL + +`blog/urls.py`をエディタで開き、次の行を追加します。 + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +すると最終的なコードは次のようになります: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +サイトをリロードした後、`AttributeError`が出ます。`post_new`ビューの実装がないからです。ファイルに追加してみましょう。 + +## post_new ビュー + +`blog/views.py`をエディタで開き、`from`の行の後に次の内容を追加してみましょう。 + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +その後に*ビュー*を追加します。 + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +`Post`フォームを新しく作るには、`PostForm()`を呼び出し、それをテンプレートに渡す必要があります。 あとでこの *ビュー* に戻ってきますが、今はフォームのためのテンプレートをすぐに作ってしまいましょう。 + +## テンプレート + +`blog/templates/blog`ディレクトリに`post_edit.html`ファイルを作り、エディタで開きましょう。フォームを動かすにはいくつかやることがあります。 + +* フォームを表示する必要があります。 私たちは（例えば）{% raw %}`{{ form.as_p }}`{% endraw %} でこれを行うことができます。 +* 上記の行は HTMLのformタグでラップする必要があります：`...` +* `Save` ボタンが必要です。これをHTMLのbuttonタグで行います：`` +* 最後に`
` タグの開始直後に、 `{% raw %}{% csrf_token %}{% endraw %}`を追加する必要があります。 フォームをセキュアにするためこれは非常に重要です！ これを忘れると、Djangoはフォームを保存しようとすると文句を言うでしょう： + +![CSFR 禁止のページ](images/csrf2.png) + +では、`post_edit.html` のHTMLがどのようになるか見てみましょう: + +{% filename %}blog/templates/blog/post_edit.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +更新をしてみましょう。やった！フォームが表示されます。 + +![New form](images/new_form2.png) + +ちょっと待ってみて下さい。`title` と `text` フィールドに何か入力して保存するとどうなりますか？ + +何も起きません！もう一度同じページに戻りテキストはどこかに行ってしまいました… そして新しい投稿は追加されていません。何がいけなかったのでしょうか？ + +答えは: 何も間違ってない、です。*ビュー* でもう少し作業を行う必要があります. + +## フォームを保存する + +`blog/views.py` をもう一度エディタで開きます。現在の `post_new` ビューはこうなっています。 + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +フォームを送信したとき、同じビューに戻されていましたが、このとき`request`、もっと詳しくいうと `request.POST` にデータが追加されています (このPOSTという名前はブログ投稿 "post" とは関係ありません。このデータは送られてきたもの、というコトと関係しています) 。 HTMLファイルの `
` タグで、`method="POST"` という変数があったのを覚えていますか？ これによってフォームのすべてのフィールドは今 `request.POST` にあります。 `POST` という名前を何か別のものに変えることはできません (他に唯一の有効な `method` の値は `GET` ですが、その違いを説明する時間がありません) 。 + +私たちの *ビュー* では、扱わなくてはならない２つの別々のシチュエーションがあります: １つ目は、最初にページにアクセスしてきた時で空白のフォームが必要な場合。２つ目はすべてのフォームデータが入力された状態で*ビュー*に戻ってくる場合です。 したがって条件分岐を追加する必要があります（そのために`if`を使います）： + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +ドット `[...]` の部分を埋めていきましょう。 `method`が`POST`の場合、フォームのデータを使って`PostForm`を構築します。 私たちはそれを次のようにします： + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +次にフォームの値が正しいかどうかをチェックします（すべての必須フィールドが設定され、不正な値が送信されないこと）。 `form.is_valid()` で行います。 + +フォームをチェックして、フォームの値が有効であれば保存できます。 + +{% 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() +``` + +基本的にここでは2つのことを行います。まず `form.save` でフォームを保存することと author を追加することです (`PostForm` 内に `author` フィールドがありませんし、このフィールドは必須です) 。 `commit=False` は `Post` モデルをまだ保存しないという意味です。保存前に author を追加したいので。 ほとんどの場合、`commit=False`なしで`form.save()`を使用しますが、この場合はそれを指定する必要があります。 `post.save()`は変更を保存し（作成者を追加しつつ）、新しいブログ投稿が作成されます！ + +最後に、新しく作成された記事の `post_detail` ページを表示できれば良いですよね? そのために次のインポートを追加します: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +ファイルの先頭に追加します。これで新しく作成されたポストの `post_detail` ページに移動する処理を書けます。 + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` は移動したいビューの名前です。 この *ビュー* では `pk` 変数が必須であることを覚えていますか? ビューにそれを渡すため、`pk=post.pk`を使います。この `post` は新しく作られたブログポストです！ + +ふー、たくさんのことを話してきましたが、そろそろ *ビュー* の全体がどんな感じか見てみたい頃じゃないでしょうか？ + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +では動作確認してみましょう。 http://127.0.0.1:8000/post/new/ に行き、 `title` と `text` を追加し、保存すると…… じゃじゃーん！ 新しいブログ記事が追加され、post_detail にリダイレクトされます！ + +ブログ記事を保存する前に公開日をセットしていることに気づいたかもしれません。後ほど、**Django Girls Tutorial: Extensions**にて *公開ボタン* を導入します。 + +素晴らしい！ + +> 最近までDjango adminを使ってきたので、システム上で今まだログイン状態かと思います。 いくつかの状況ではログアウト状態になることがあります(ブラウザを閉じる、DBを再起動するなど..)。 投稿を作成するときに、ログインユーザーがわからないというエラーが発生した場合は、管理ページhttp://127.0.0.1:8000/admin にアクセスして再度ログインしてください。 その問題は一時的に解決します。 メインチュートリアルの後 **Homework: add security to your website!** の章に恒久的な対策がありますので宿題として取り組んでみてください。 + +![ログインエラー](images/post_create_error.png) + +## フォームのバリデーション(検証) + +ここではDjangoのフォームのクールなところを紹介します。 ブログのポストは `title` と `text` のフィールドが必要です。 `Post` モデルではこれらのフィールドがなくてもよいとは書いておらず (`published_date` とは対照的に)、Djangoはその場合、それらのフィールドには何らかの値が設定されることを期待します。 + +`title` と `text` を入力せずに保存してみましょう。何が起こるでしょうか? + +![フォームのバリデーション(検証)](images/form_validation2.png) + +Djangoはフォームのすべてのフィールドが正しいことを検証してくれます。気が利くでしょう? + +## フォームの編集 + +今、私たちは新しいフォームを追加する方法を知っています。 しかし既存のデータを編集するためはどうすれば良いのでしょうか? それは先ほど行ったことと非常に似ています。 すぐにいくつかの重要なものを作成してみましょう。 （もしわからない場合、コーチに尋ねるか、もしくはすでに手順をカバーしているので、前の章を見てください） + +`blog/templates/blog/post_detail.html` をエディタで開いて次の行を追加します + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +テンプレートは次のようになります: + +{% 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 %} +``` + +`blog/urls.py`をエディタで開き、次の行を追加します。 + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +テンプレート `blog/templates/blog/post_edit.html` を再利用します。そして残るは*ビュー*です。 + +`blog/views.py` をエディタで開いて次の内容をファイルの最後に追加します： + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +`post_new` とほとんど同じに見えますか? しかし完全に同じではありません。 まず `urls` から追加の `pk` パラメータを渡します。 次に編集したい`Post` モデルを `get_object_or_404(Post, pk=pk)` で取得し、フォームを作るときは以下の2つのケースのようにそのポストを`instance（インスタンス）`として渡します。フォームを保存するときは… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +…このポストを編集するためにただフォームを開く場合は: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +よし、ちゃんと動くか試してみましょう！`post_detail` ページにいきましょう。そこの右上に [編集] ボタンがあるはずです： + +![編集ボタン](images/edit_button2.png) + +クリックするとブログ記事のフォームが表示されると思います： + +![編集フォーム](images/edit_form2.png) + +あとはお気軽にタイトルやテキストを変更して保存してください！ + +おめでとう！アプリケーションが完成しました。 + +Djangoのフォームについてもっと知りたい場合、Djangoのドキュメントを読んでください。https://docs.djangoproject.com/ja/5.1/topics/forms/ + +## セキュリティ + +リンクをクリックするだけで新しい投稿を作成できることは素晴らしいことです！ しかし、今、あなたのサイトにアクセスした人は誰でも新しいブログ投稿を作成することができます。それはおそらくあなたが望むものではありません。 ボタンはあなたのためには表示されますが、他の人には表示されないようにしましょう。 + +`blog/templates/blog/base.html` をエディタで開き、`page-header` と名付けた `div` とそこに以前に入力したアンカータグを見つけます。 これは次のようになっています。 + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +これに`{% if %}`タグを追加し、管理者でログインしているユーザーのみにリンクを表示します。 今は、あなただけです！ `` タグを以下のように変更します： + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +この`{% if %}`は、ページをリクエストしているユーザーがログインしている場合にのみ、リンクがブラウザに送信されるようにします。 これは新しい投稿の作成を完全に保護するものではありませんが、それは良い第一歩です。 私たちは拡張レッスンでより多くのセキュリティをカバーします。 + +詳細ページに追加した編集アイコンを覚えていますか？ 他の人が既存の投稿を編集できないように、同じ変更を追加したいと思います。 + +`blog/templates/blog/post_detail.html` をエディタで開いて次の行を見つけてください： + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +以下のように変更してください： + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +あなたはログインしている可能性が高いので、ページを更新しても、何も変わらないかもしれません。 ただし、別のブラウザやシークレットウィンドウ（Windows Edgeでは「InPrivate」と呼ばれます）でページを読み込むと、リンクが表示されず、アイコンも表示されないでしょう！ + +## もう一つ: デプロイの時間です! + +ではPythonAnywhere上で動作するかを確認しましょう。再度デプロイします。 + +* まず、Githubにあなたの新しく書いたコードをCommitして、Pushしてみましょう。 + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* それから、[PythonAnywhereのbashコンソール](https://www.pythonanywhere.com/consoles/)で： + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(``の部分を、自分の実際のPythonAnywhereのサブドメイン名に山カッコをはずして置き換えることを忘れずに) + +* 最後に、[Webページ](https://www.pythonanywhere.com/web_app_setup/) に飛んで（コンソールの右上のメニューボタンを使ってもいいですね）それから **Reload** を押しましょう。 変更を見るためにあなたのブログ https://subdomain.pythonanywhere.com を再読み込みしましょう。 + +うまくいってるはずです！おめでとう :) diff --git a/ja/django_forms/images/csrf2.png b/ja/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/ja/django_forms/images/csrf2.png differ diff --git a/ja/django_forms/images/drafts.png b/ja/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/ja/django_forms/images/drafts.png differ diff --git a/ja/django_forms/images/edit_button2.png b/ja/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/ja/django_forms/images/edit_button2.png differ diff --git a/ja/django_forms/images/edit_form2.png b/ja/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/ja/django_forms/images/edit_form2.png differ diff --git a/ja/django_forms/images/form_validation2.png b/ja/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/ja/django_forms/images/form_validation2.png differ diff --git a/ja/django_forms/images/new_form2.png b/ja/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/ja/django_forms/images/new_form2.png differ diff --git a/ja/django_forms/images/post_create_error.png b/ja/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/ja/django_forms/images/post_create_error.png differ diff --git a/ja/django_installation/README.md b/ja/django_installation/README.md new file mode 100644 index 00000000000..d4eef511648 --- /dev/null +++ b/ja/django_installation/README.md @@ -0,0 +1,7 @@ +# Djangoのインストール + +> **補足：**　Chromebookを使っている方は、このチャプターは飛ばして、 [Chromebook Setup](../chromebook_setup/README.md) の説明に従ってセットアップしてください。 +> +> **補足：**インストールのチャプターで既にインストール済みの方は、このチャプターは飛ばして次に進みましょう。 + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/ja/django_installation/instructions.md b/ja/django_installation/instructions.md new file mode 100644 index 00000000000..ae37c63a423 --- /dev/null +++ b/ja/django_installation/instructions.md @@ -0,0 +1,230 @@ +> このチャプターの一部はGeek Girls Carrots (https://github.com/ggcarrots/django-carrots) のチュートリアルに基づいています。 +> +> このチャプターの一部はCreative Commons Attribution-ShareAlike 4.0 International License のライセンスによる[django-marcador tutorial](http://django-marcador.keimlink.de/)に基づいています. このdjango-marcador tutorialはMarkus Zapke-Gründemann らが著作権を保有しています。 + +## 仮想環境 + +Django をインストールする前に、あなたのコーディング環境を、きれいにしておく便利な道具をインストールしてもらいます。 このステップをとばすこともできますが、しかし、このステップをとばすことは全くお勧めしません。 可能な限りベストなセットアップで始めることは将来のたくさんのトラブルからあなたを救うはずですから！ + +さあ、**仮想環境（virtual environment )**(*virtualenv*とも呼ばれています）を作成してみましょう。 仮想環境（virtual environment）ではプロジェクト単位であなたのPython/Djangoのセットアップを他から隔離します。 これは、あなたがひとつのウェブサイトにおこなったどんな変更も、あなたが開発している他のサイトに影響を及ぼさないということです。 便利でしょ？ + +あなたがしなければならないのは、あなたが`仮想環境（virtual environment）`を作成したいディレクトリを見つけることです（たとえばホームディレクトリなどです）。 Windowsでは、ホームディレクトリは、`C:\Users\Name`と書かれているかもしれません (`Name`はあなたのログインネームです)。 + +> **補足：**　Windowsの方は、ディレクトリ名に特殊文字やアクセント記号を含まないよう気をつけてください。もし、ユーザー名が特殊文字を含む場合は、`C:\djangogirls` のようなディレクトリを作成してください。 + +このチュートリアルのために、ホームディレクトリに新しいディレクトリ`djangogirls`を作成します。 + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +`myvenv`という仮想環境（virtual environment）を作成します。一般的なコマンドは以下のようになります： + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +新しい`virtualenv`を作成するために、コマンドプロンプトを開き（コマンドプロンプトについては何章か前にお話ししましたね。覚えてますか？）、`python -m venv myvenv`を実行して下さい。たとえばこのように入力します： + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +`myvenv` というところが、あなたの`virtualenv（仮想環境）` の名前です。 どんな名前でも使うことができますが、必ず小文字で表記し、スペース・アクセント記号・特殊文字は入れないでください。 短い名前にしておくのもいいアイデアですーあなたはこの名前を何度も参照しますから！ + + + + + +LinuxやmacOSで`virtualenv`を作るときは、`python3 -m venv myvenv`と実行するだけです。 たとえばこんな感じです： + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` は、あなたの `仮想環境(virtualenvironment)` の名前です。 どんな名前でも使うことができますが、必ず小文字で表記し、スペースは入れないでください。 短い名前にしておくのもいいアイデアですーあなたはこの名前を何度も参照しますから！ + +> **補足：**DebianやUbuntuのバージョンによっては、以下のエラーが出ることがあります。 +> +> {% 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. +> +> +> この場合、エラー内の指示にしたがって、`python3-venv`のパッケージをインストールしましょう。 {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **補足：**DebianやUbuntuのバージョンによっては、この仮想環境を実行すると、次のようなエラーがでます。 +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> +> このエラーを回避するために、代わりに`virtualenv`コマンドを使います。 +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **補足：**もし以下のようなエラーがでたら、 +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> 代わりに次のコマンドを実行してください。 +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## 仮想環境の操作 + +上に示したコマンドは仮想環境（基本的には一連のディレクトリとファイル）を含む`myvenv` という名前（あるいはあなたが選んだ名前）のディレクトリを生成します。次に我々がしたいのは、仮想環境を起動することです。 + + + +実行して、仮想環境を起動します。 + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls > myvenv\Scripts\activate + + +> **補足：**Windows 10では、`execution of scripts is disabled on this system`というエラーがWindows PowerShellに出ることがあります。 その場合は、Windows PowerShellを「管理者として開く」で、管理者権限で新しくウィンドウを開いてください。 そして、仮想環境を起動する前に、以下のコマンドを入力してください。 +> +> {% 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 +> + + + +> **補足：** 人気のあるエディタであるVS Codeを使っている方は、VS CodeはWindows Powershellベースの統合ターミナルが一緒になっているので、統合ターミナルを使う場合、仮想環境を有効にするために下記のコマンドを実行してください： +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> エディタのウィンドウとコマンドラインのウィンドウを行き来する必要がなくなるのが利点です。 + + + + + +実行して、仮想環境を起動します。 + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +`myvenv` のところを、あなたが選んだ `仮想環境(virtualenv)` の名前に置き換えることを忘れないで下さいね！ + +> **備考:** `source` ではできない場合もあります。その場合は、代わりに以下のように入力してみてください： +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +コンソールでプロンプトの行頭に `(myvenv)` が付いたら、`仮想環境(virtualenv)` を起動しています。 + +仮想環境の中で作業しているとき、`python` コマンドは自動的に正しいバージョンのPythonを参照するので、`python3` コマンドの代わりに `python` コマンドを使うことができます。 + +OK、これで依存関係の準備はすべて整いました。いよいよDjangoのインストールです！ + +## Djangoのインストール {#django} + +今 `virtualenv` を起動したので、Djangoをインストールすることができます。 + +その前に、最新バージョンの `pip` がインストールされていることを確認すべきです。pipはDjangoのインストールに使うソフトウェアです。 + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### requirementsファイルによってパッケージをインストールする + +requirementsファイルは `pip install` でインストールする依存関係の一覧が記載されているファイルです： + +インストールしたエディタを使って、最初に `requirements.txt` ファイルを `djangogirls/` フォルダの中に作ります。 エディタで新しいファイルを開いて、`djangogirls/` フォルダ内に `requirements.txt` という名前で保存してください。 ディレクトリはこんな感じになっているはずです： + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +`djangogirls/requirements.txt` ファイル中に以下のテキストを追加します： + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +そして、`pip install -r requirements.txt` を実行して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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Windowsでpipを実行してエラーが起きた場合は、あなたのプロジェクトのパス名がスペースかアクセント記号か特殊文字を含んでいないか確認して下さい （例 `C:\Users\User Name\djangogirls`）。 もし含んでいる場合は、スペース・アクセント記号・特殊文字を含まない別の場所（`C:\djangogirls`をオススメします）でディレクトリを作成することを検討してみてください。 新しいディレクトリに新しい仮想環境を作成してから、古いディレクトリを削除して、上記のコマンドを試してください。 （仮想環境には絶対パスが使われているので、仮想環境のディレクトリを移動させてもうまくいきません。） + + + + + +> Djangoをインストールしようとした後でコマンドラインがフリーズして動かなくなってしまうことがあります。その時は、以下のコマンドを代わりに入力してみてください。 +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Ubuntu 12.04でpipを実行してエラーが起きた場合は、仮想環境内にpipを再インストールするために `python -m pip install -U --force-reinstall pip` を実行して下さい。 + + + +以上です！あなたは（ついに）Djangoアプリケーションを作成する準備が整いました！ \ No newline at end of file diff --git a/ja/django_models/README.md b/ja/django_models/README.md new file mode 100644 index 00000000000..7ed19e0177d --- /dev/null +++ b/ja/django_models/README.md @@ -0,0 +1,201 @@ +# Djangoモデル + +さて、ブログの中のポストを格納するものが欲しいですよね。そのために `オブジェクト` についてちょっとお話しします。 + +## オブジェクト + +プログラミングには `オブジェクト指向プログラミング` という概念があります。 それは、退屈なプログラムを繰り返し書く代わりにモデルになるものを作って、それが他とどう作用するかを定義するという考え方です。 + +じゃあオブジェクトって何なの？って思いますよね。オブジェクトは状態（プロパティ）と命令（アクション）の塊です。ピンと来ないでしょうから例を挙げましょう。 + +猫をモデルにしたいときは、`猫(Cat)` オブジェクトを作ります。そのプロパティは、`色(color)` 、`年齢(age)` 、`機嫌(mood)`（いい、悪い、眠い）、`飼い主(owner)`（ `人(Person)` オブジェクトですね、捨て猫ならそのプロパティは空白）です。 + +`猫` のアクションは、`喉を鳴らす(purr)` 、`引っ掻く(scratch)` 、`餌を食べる(feed)`（ `キャットフード(CatFood)` などで、それはまた `味(taste)` というプロパティを持つ別のオブジェクトになるでしょう。） + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +つまり、オブジェクト指向とは実際の物を、プロパティ（ `オブジェクト・プロパティ` と呼びます）と命令（ `メソッド` と呼びます）を持つコードで表現するという考え方です。 + +ではブログポストはどういうモデルになるでしょうか。ブログが作りたいんですよね？ + +それにはブログポストとは何か、それはどんなプロパティがあるかという問いに答えなければなりません。 + +まず確実なのはブログポストにはコンテンツとタイトルが必要ですね。 それからそれを書いた人が分かるといいでしょう。 最後に、ポストをいつ作成、公開したかも分かるといいですね。 + + Post + -------- + title + text + author + created_date + published_date + + +ではブログポストがどうなればいいですか？ポストが公開されるといいですよね？ + +なので `publish` メソッドが必要です。 + +達成したいことが分かったので、Djangoでモデリングの開始です！ + +## Djangoモデル + +オブジェクトが何か分かったので、ブログポストのDjangoモデルを作りましょう。 + +Djangoのモデルは特別なオブジェクトで、`データベース` に格納されます。 データベースはデータの集まりです。 ここにユーザーやブログポストの情報を格納します。 データを格納するのにSQLiteデータベースを使います。 これはDjangoのデフォルトのデータベースで、今はこれで十分です。 + +データベースの中のモデルは、列（フィールド）と行（データ）があるスプレッドシートと思ってもらっても結構です。 + +### 新しいアプリケーションの作成 + +全部をきちんと整理しておくため、プロジェクトの中に別のアプリケーションを作ります。 初めから全てを整理しておくのはとっても良いことです。 アプリケーションを作るために、次のコマンドをコンソールの中で走らせましょう。（`manage.py` ファイルがある `djangogirls` ディレクトリでコマンドをタイプしてくださいね） + +{% filename %}macOS and Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +新しく `blog` ディレクトリが作られて、今沢山のファイルがそこに入っているのに気がついたでしょう。ディレクトリとファイルはこんな風に見えるはずです： + + djangogirls + ├── blog + │   ├── admin.py + │   ├── apps.py + │   ├── __init__.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + + +アプリケーションを作ったら、Djangoにそれを使うように伝えないといけません。 それは `mysite/settings.py` でします。エディタでこれを開いてください。 `INSTALLED_APPS` を見つけて `]` の上に `'blog.apps.BlogConfig',` という一行を追加します。 そうすると、最終的には以下のようになりますね。 + +{% 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.apps.BlogConfig', +] +``` + +### ブログポストモデルの作成 + +`blog/models.py` ファイルで `Model` と呼ばれるオブジェクトを全て定義します。これがブログポストを定義する場所です。 + +`blog/models.py` をエディタで開いて中身を全部削除し、下のコードを書きましょう。 + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> `str` の両側に2つのアンダースコア（ `_` ）がちゃんと入っているか確認しましょう。 これはPythonでよく使われて、"ダンダー"（ダブルアンダースコア）と呼ばれます。 + +難しそうでしょ？でも大丈夫！ちゃんと説明しますから。 + +`from` とか `import` で始まる行は全部、他のファイルから何かをちょこっとずつ追加する行です。 なので色んなファイルから必要な部分をコピペする代わりに `from ... import ...` で必要部分を入れることができます。 + +`class Post(models.Model):` – この行が今回のモデルを定義します (これが `オブジェクト` です)。 + +- classはオブジェクトを定義してますよ、ということを示すキーワードです。 +- `Post` はモデルの名前で、他の名前をつけることもできます（が、特殊文字と空白は避けなければいけません）。モデルの名前は大文字で始めます。 +- `models.Model` はポストがDjango Modelだという意味で、Djangoが、これはデータベースに保存すべきものだと分かるようにしています。 + +さて今度はプロパティを定義しましょう：`title`、`text`、`created_date`、`published_date`、それに `author` ですね。 それにはまずフィールドのタイプを決めなければいけません。（テキスト？ 数値？ 日付？ 他のオブジェクト、例えばユーザーとの関係？） + +- `models.CharField` – 文字数が制限されたテキストを定義するフィールド +- `models.TextField` – これは制限無しの長いテキスト用です。ブログポストのコンテンツに理想的なフィールドでしょ？ +- `models.DateTimeField` – 日付と時間のフィールド +- `models.ForeignKey` – これは他のモデルへのリンク + +コードの細かいところまでは説明し出すと時間がかかるので、ここではしませんが、 モデルのフィールドや上記以外の定義のやり方について知りたい方は是非Djangoドキュメントを見てみて下さい。 (https://docs.djangoproject.com/ja/5.1/ref/models/fields/#field-types) + +`def publish(self):` は何かと言うと、 これこそが先程お話ししたブログを公開するメソッドそのものです。 `def` は、これはファンクション（関数）/メソッドという意味です。`publish` はメソッドの名前で、 変えることもできます。 メソッドの名前に使っていいのは、英小文字とアンダースコアで、アンダースコアはスペースの代わりに使います。 （例えば、平均価格を計算するメソッドは `calculate_average_price` っていう名前にします） + +メソッドは通常何かを `return` します。 一つの例が `__str__` メソッドにあります。 このシナリオでは、`__str__()` を呼ぶと、ポストのタイトルのテキスト（**string**）が返ってきます。 + +`def publish(self):` と `def __str__(self):` の両方が class キーワードに続く行でインデントされているのに気づきましたか？ Pythonにモデルのメソッドだと伝えるために、class キーワードに続く行ではメソッドをインデントしましょう。 そうしないと、メソッドはモデルのものではなくなり、思ってもみない振る舞いをするでしょう。 + +もしモデルがまだはっきりつかめないようだったら、気軽にコーチに聞いて下さい！ 特にオブジェクトとファンクションを同時に習ったときはとても複雑なのはよく分かってますから。 でも前ほど魔法みたいじゃないといいですけど！ + +### データベースにモデルのためのテーブルを作成する + +最後のステップは新しいモデルをデータベースに追加することです。 まず、モデルに少し変更があったこと（今作ったこと）をDjangoに知らせましょう。 コンソールで `python manage.py makemigrations blog` とタイプします。 こんな感じですね。 + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**メモ：**編集したファイルを忘れずに保存してくださいね。保存しないと、コンピュータが以前のパージョンのファイルを実行してしまい、思ってもみないエラーメッセージに出くわすかもしれません。 + +Djangoが作ってくれた移行ファイルを私たちがデータベースに追加すれば完了です。`python manage.py migrate blog` とタイプするとこうなるでしょう。 + +{% 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 + + +やった～！ポストモデルがデータベースに入りました。どうなったか見たいでしょ？次へ進みましょう！ diff --git a/ja/django_orm/README.md b/ja/django_orm/README.md new file mode 100644 index 00000000000..7eb762f9740 --- /dev/null +++ b/ja/django_orm/README.md @@ -0,0 +1,221 @@ +# DjangoのORMとクエリセット + +この章では、Djangoのデータベース接続方法と、データの格納について学びます。やってみましょう！ + +## クエリセットとは？ + +クエリセットが何かと言うと、モデルのオブジェクトのリストのことです。クエリセットを使って、データベースからデータを読み込んだり、抽出したり、並べ替えたりできます。 + +実際に動かしてみるのが一番わかりやすいので、試してみましょう。 + +## Django shell + +コンソール画面を開いて（PythonAnywhereのコンソールではないですよ）、次のコマンドを入力してみましょう。 + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +次のような表示に切り替わるでしょう。 + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +今、Djangoのインタラクティブコンソールが起動しています。Pythonプロンプトのようにだけ見えますが、ちゃんとDjangoも動いています :) このコンソール画面では、Pythonのコマンドは何でも使えます。 + +### すべてのオブジェクト + +最初に、ポストデータを全部表示させてみましょう。次のコマンドで、ポストのデータを全部表示させることが出来ます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +ごめんなさい、エラーになってしまいましたね。Postがないというエラーです。その通りなんです。最初にインポートをしなくてはならないのに、忘れていました。 + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +こんな風に書くだけで、`blog.models` から `Post` モデルをインポート出来ます。それでは、もう一度試してみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +さっきDjangoの管理画面から作ったポストのリストが表示されました。だけど、次はこのコンソール画面から、新たにポストを作ってみたいですよね。それはどうすればいいのでしょうか。 + +### オブジェクトの作成 + +データベースに、新しいPostを作成するには、次のようにします。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +いい感じなのですが、1つだけマズイことをしているんです。author に `me` を渡していますが、これは `User` モデルのインスタンスでないといけませんよね。それは、どうやればいいと思います？ + +そうです、さっきと同じです。Userモデルも先にインポートしておきましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +どんなユーザが、データベースに登録されてましたっけ？覗いてみましょうか。 + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +作成しておいたスーパーユーザがいますね。このユーザを取り出してみましょう（この行をご自身で作ったスーパーユーザのユーザ名に変更して取り出してくださいね）。 + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +ola という `ユーザ名` の `User` モデルのインスタンスを、`取り出せ` たでしょう？よかった！ + +さあ、遂にコンソール画面から、最初のポストを作成出来ますね。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +どうでしょうか？ちゃんと出来ているか、確認しておきましょうね。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +出来ていますね！リストに新しいポストが1つ追加されています。 + +### さらに投稿を追加しましょう + +楽しくなってきたでしょう？理解を深めるためにもう少しポストを作っておきましょう。2〜3個記事を追加したら、次に進みましょう。 + +### オブジェクトの抽出 + +クエリセットの大部分は、抽出機能だと言えるでしょう。 ユーザolaさんのポストを全部確認してみましょうか。 全部のポストを取り出すのではなく、olaさんのポストだけを取り出したい場合は、`Post.objects.all()` の `all` を `filter` に変更します。 取り出されるブログポストが満たす条件を、カッコ()の中に指定します。 今回の例では、`author` が `me` と等しいという条件です。 Djangoでの表し方は、`author=me` となります。 このようになりますね。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +もしかすると `title` フィールドに title という単語が含まれているポストだけを取り出したくなるかもしれませんね。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Note** `title` と `contains` の間に、アンダーバー (`_`) が2個続いていますが、 これはDjangoのORMの構文です。フィールド名のtitleと、照合タイプのcontainsを、2つのアンダーバーで連結させています。 もしアンダーバーが1個だけだと、title_contains というフィールド名だと判断されてしまい、エラーになります。("FieldError: Cannot resolve keyword title_contains") + +また、公開済みの全ポストを取り出すことも出来ます。それには、`published_date` が現在以前の全ポストを取り出します。 + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +そうでした、残念なことに、コンソールから追加したポストはまだ公開されていませんね。じゃあ、ポストを公開してみるとしましょう。まず公開するポストを決めましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +そして、`publish` メソッドを呼び出します。 + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +じゃあ、もう一度公開済みのポストを取り出しましょう。(上方向キーを3回押せば、さっきのコマンドを呼び出せるでしょう。コマンドを表示出来たら、`Enter` キーを押してみましょう) + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### オブジェクトの並び替え + +クエリセットは、オブジェクトのリストの並べ替えもやってくれます。試しに `created_date` フィールドで並べ替えてみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +逆順、つまり新しく追加した順に並べ替えることも出来ます。それには、`-`（ハイフン）を使います。 + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### メソッドチェーンによる複雑なクエリ + +ご覧のように、`Post.objects`の一部のメソッドはクエリセットを返します。 逆に同じメソッドをクエリセットについて呼び出すこともでき、そうすると新しいクエリセットが返ります。 よって、**つなげる**ことで、メソッドの返すクエリセットを組み合わせることができます： + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +クエリセットをつなげるのは本当に強力です。つなげていくことでとても複雑なクエリも書くことが出来ます。 + +いいですね！次の章への準備は万端ですね！このプロンプトを閉じるには、以下のようにします。 + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/ja/django_start_project/README.md b/ja/django_start_project/README.md new file mode 100644 index 00000000000..6bd176747bc --- /dev/null +++ b/ja/django_start_project/README.md @@ -0,0 +1,207 @@ +# プロジェクトを作成しよう！ + +> このチャプターの一部はGeek Girls Carrotsのチュートリアルをもとにしています。(https://github.com/ggcarrots/django-carrots) +> +> このチャプターの一部は Creative Commons Attribution-ShareAlike 4.0 International License のライセンスによる [django-marcador tutorial](http://django-marcador.keimlink.de/) をもとにしています。 この django-marcador tutorial は Markus Zapke-Gründemann たちが著作権を保有しています。 + +ここからは、小さなブログを作っていきますよ！ + +最初のステップは、Djangoのプロジェクトを新しく作成します。 基本的に、Djangoのスクリプトを実行しDjangoプロジェクトの骨格を作ります。 スクリプトは、これから使う沢山のファイルやディレクトリを自動生成します。 + +Djangoでは、ファイルやディレクトリの名前がとても重要です。 作成されたファイルの名前は変えるべきではありません。 ファイルを移動させるのもいいアイディアとはいえません。 Djangoでは、重要なファイルを決められたファイル構成で作成しておくことが必要です。 + +> virtualenv（仮想環境）を実行しているでしょうか。 もしコンソールのプロンプトの前に `(myvenv)` という文字が表示されていない時は、virtualenv が実行されていないので、有効にする必要があります。 **Djangoのインストール** のチャプターの **仮想環境の操作** のパートで、仮想環境を実行する方法について説明しました。 Windowsでは、`myvenv\Scripts\activate`、MacOS や Linux では、 `source myvenv/bin/activate` というコマンドを入力すると有効にできます。 + + + +MacOS や Linux の場合は、コンソールで以下のコマンドを実行します。**最後のピリオド(ドット) `.` を忘れないようにしてください！** + +{% filename %}コマンドライン{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> コマンドの最後にピリオド `.` を入力したことを確認してくださいね。このピリオドは、現在の作業ディレクトリに Django をインストールするということを示しています (ピリオド `.` は、現在のディレクトリを表す省略表記です)。 +> +> **メモ:** 上記のコマンドを入力するときは、`django-admin` で始まる部分のみを入力することを忘れないでください。 ここに書いた `(myvenv) ~/djangogirls$` の部分は、コマンドライン上で入力を受け付けることを示しているプロンプトの一例なので、人によって違うかもしれません。 + + + + + +Windows の場合は、以下のコマンドを実行しないといけません。**(最後にピリオド (ドット) `.` を書いてください)** + +{% filename %}コマンドライン{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> コマンドの最後にピリオド (.) があることを確認してくださいね。これば、現在の作業ディレクトリにDjangoをインストールするということを示すので、とても重要なのです。(ピリオドは簡略表記です). +> +> **メモ:** 上記のコマンドを入力するときは、`django-admin` で始まる部分のみを入力することを忘れないでください。 ここに書いた `(myvenv) ~/djangogirls$` の部分は、コマンドライン上で入力を受け付けることを示しているプロンプトの一例なので、人によって違うかもしれません。 + + + +django-admin.py は、必要なディレクトリとファイルを作成するスクリプトです。次のようなファイル構造が作成されましたね。: + + djangogirls + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **注**：ディレクトリ構造には、以前作成した`myvenv`ディレクトリもあります。 + +`manage.py`はサイトの管理に役立つスクリプトです。 それを使用して、他のものをインストールすることなく、私たちのコンピュータ上でWebサーバーを起動することができます。 + +`settings.py`ファイルには、ウェブサイトの設定が含まれています。 + +手紙を送付する場所を確認する郵便業者について話した事を覚えていますか？ `urls.py`ファイルには、`urlresolver`（Djangoがビューを見つける仕組みです。Django URLのチャプターで説明します）で使用されるパターンのリストが含まれています。 + +私たちが変更しない他のファイルを今は無視しましょう。 覚えておくべき唯一の事は、間違えてそれらを削除しないことです！ + +## 設定変更 + +`mysite/settings.py`にいくつか変更を加えましょう。 前にインストールしたコードエディタを使用してファイルを開きます。 + +**注**：`settings.py`は他のものと同じように通常のファイルであることに注意してください。 「ファイルを開く」メニューを使用して、コードエディタ内から開くことができます。 これにより、`settings.py`ファイルに移動して選択できる通常のウィンドウが表示されます。 あるいは、デスクトップのdjangogirlsフォルダに移動して右クリックしてファイルを開くこともできます。 次に、リストからコードエディタを選択します。 インストールされた他のプログラムでは、ファイルを開けても編集できないかもしれないので、エディタの選択は重要です。 + +私たちのWebサイトが正しい時間で動くといいでしょう。 [Wikipediaのタイムゾーンのリスト](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)に移動して、関連するタイムゾーン (TZ) をコピーします (例：`Asia/Tokyo`)。 + +`settings.py` の中から `TIME_ZONE` と書かれた行を探してください。この行はタイムゾーンを表しているので、自分が住んでいるタイムゾーンに合わせて修正しましょう。たとえば、次のように書きます。 + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Asia/Tokyo' +``` + +言語コードは、言語（例えば、英語の場合は`en`、ドイツ語の場合は`de`のように表します）と、国コード（例えば、ドイツの場合は`de`、スイスの場合は`ch`のように表します）からできています。 あなたの母国語が英語でない場合、これを追加すると、Djangoのデフォルトのボタンや通知が設定した言語に変更されます。 ですのでたとえば「Cancel」ボタンがここで定義した言語に翻訳されます。 [Djangoは多くの言語に対応しています。](https://docs.djangoproject.com/ja/5.1/ref/settings/#language-code) + +別の言語を使用する場合は、次の行を変更して言語コードを変更します。 + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'ja' +``` + +静的ファイルのパスも追加する必要があります。 （静的ファイルとCSSについては、後ほどチュートリアルで説明します）。ファイルの*一番下*に移動し、`STATIC_URL`の下に `STATIC_ROOT`を追加します。： + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +`DEBUG` が `True` に設定されていて、`ALLOWED_HOSTS` が空のリストの時は、自動的に `['localhost', '127.0.0.1', '[::1]']` という3つのホストに対してチェックが行われます。 このままの設定では、これから私たちがデプロイして使う PythonAnywhere のホストネームが含まれていません。ですから、次のように設定を変更します。 + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **メモ**: Chromebook を使っている人は、次の1行を settings.py ファイルの最後に追加してください。 `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> cloud9を使っている人は、 `ALLOWED_HOSTS` に、`.amazonaws.com` を追加しましょう。 + +## データベースをセットアップする + +あなたのサイトのデータを保管することができるデータベース・ソフトウェアには、たくさんの種類があります。今は、Django がデフォルトで使う `sqlite3` というデータベースを使うことにします。 + +この設定はすでに `mysite/settings.py` ファイルの中に次のように書かれています。 + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +ブログのデータベースを作成するには、コンソールで次のコードを実行してみましょう： `python manage.py migrate` (`manage.py`ファイルのある`djangogirls`ディレクトリにいる必要があります) 。 うまくいったら次のように表示されるでしょう： + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +終わったら、 Webサーバーを起動し、私たちのWebサイトが動作しているかどうかを確認する時間です。 + +## ウェブサーバを起動する + +コマンドラインやコマンドプロンプトで`manage.py`ファイルを含むディレクトリ（`djangogirls`ディレクトリ）に移動してください。 `python manage.py runserver`を実行してWebサーバーを起動できます。 + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Chromebookを使用している場合は、代わりに次のコマンドを使用します。 + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Windows上で、`UnicodeDecodeError`で失敗した場合は、代わりに次のコマンドを使用します。 + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Webサイトが動いていることを確認してください。ブラウザで以下のアドレスを開いてみましょう。（Firefox, Chrome, Safari, Internet Explorerなど、好きなブラウザを使って大丈夫です） + +{% filename %}ブラウザ{% endfilename %} + + http://127.0.0.1:8000/ + + +Chromebook と Cloud9 を利用している場合は、Webサーバーが起動しているコマンド画面の右上に現れるポップアップウィンドウの中のURLをクリックしましょう。 URLはこんな感じになっていると思います。 + +{% filename %}ブラウザ{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +おめでとう！ たった今、あなたは最初のウェブサイトを作って、それをWebサーバーの上で起動しました！ 素晴らしいですね！ + +![インストールできました！](images/install_worked.png) + +コマンド画面は、一度に一つのコマンドしか実行できません。先程開いたコマンド画面では、Webサーバーが今動いています。 Webサーバーが動いている間、次のリクエストを待っています。このコマンドラインに新しいテキストを書いても、新しいコマンドとして実行しません。 + +> Webサーバーの仕組みについては、「インターネットの仕組み」の章を参照してください。 + +Webサーバーを動かしながら、新たにコマンドを入力したい場合は、新しいコマンドプロンプトのウィンドウを開いて、仮想環境を起動してから入力しましょう。2つ目のウィンドウを開く方法が分からなくなったら、[コマンドラインを使ってみよう](../intro_to_command_line/README.md)の章に戻ってやり方を確認しましょう。 Webサーバーを停止するには、実行中のウィンドウに戻り、CTRL + C - ControlキーとCキーを同時に押します（WindowsではCtrl + Breakキーを押す必要があります）。 + +次のステップに進む準備はできましたか？ 今度は実際にコンテンツを作り始めましょう！ diff --git a/ja/django_start_project/images/install_worked.png b/ja/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/ja/django_start_project/images/install_worked.png differ diff --git a/ja/django_templates/README.md b/ja/django_templates/README.md new file mode 100644 index 00000000000..3cfe2ed7e36 --- /dev/null +++ b/ja/django_templates/README.md @@ -0,0 +1,108 @@ +# Djangoテンプレート + +何かデータを表示しましょう！Djangoはそれをビルトインの **テンプレートタグ** で実現できます。 + +## テンプレートタグとは？ + +HTML中で本当はPythonのコードを書くことはできません。なぜならブラウザが理解できないからです。ブラウザはHTMLだけ分かります。HTMLはどちらかというと静的で、それに対してPythonはもっとずっと動的なことを私たちは知っています。 + +**Djangoテンプレートタグ** はHTMLにPyhtonのようなコードを埋め込むことができて、動的なウェブサイトがより早く簡単に作れます! + +## ブログ一覧テンプレートの表示 + +前の章で、`posts` 変数でテンプレートに記事のリストを渡しました。今からHTMLで表示をしてみましょう。 + +Djangoテンプレートで変数を表示するためには、次のように変数の名前を二重中括弧で括ります。 + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +これを `blog/templates/blog/post_list.html` テンプレートでやってみましょう。 エディタでこのファイルを開き、2つめの `
` から3つめの `
` までをまるごと `{{ posts }}` に置き換えて下さい。 ファイルを保存してページをリロードすると： + +![図 13.1](images/step1.png) + +見たとおり、このようになります。 + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Djangoはposts変数をオブジェクトのリストと認識します。 **Python入門**でどうやってリストを表示できたか覚えていますか？ ループを使ってリストを表示しましたよね。 Djangoテンプレートではこう書きます： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +これをブログのテンプレートで使ってみましょう。 + +![図 13.2](images/step2.png) + +動きましたね。 しかし、本当は**HTML入門**で作った静的な記事のように表示してほしいところです。 そこで、HTMLとテンプレートタグを混ぜてみましょう。 `body` タグの中を次のように書いてください： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}`{% for %}` と `{% endfor %}` の間に書いたものはリスト中の各オブジェクトの分だけ繰り返されます。ページをリロードしてみましょう。{% endraw %} + +![図 13.3](images/step3.png) + +post変数がさっきと違って、`{{ post.title }}` や `{{ post.text }}` になっていることに気づきましたか？ `Post` モデルで定義したそれぞれのフィールドにアクセスしています。 `|linebreaksbr` はpostのテキスト中の改行を段落に変換するフィルタに通すという意味です。 + +## もう一つ... + +今の時点でのウェブサイトを公開して見てみませんか？もう一度PythonAnywhereでデプロイしてみましょう。デプロイのステップをおさらいします。 + +* まず、GithubにあなたのコードをPushしましょう + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* そしたら、[PythonAnywhere](https://www.pythonanywhere.com/consoles/)に戻って、**Bashコンソール**（か、新しいコンソール）に入って、次のようにコマンドを打ちましょう： + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +（忘れずに `` を自分のPythonAnywhereのサブドメイン名に置き換えましょう、<> は不要です。） + +* 最後にPythonAnywhereの[「Web」ページ](https://www.pythonanywhere.com/web_app_setup/)を開いて、アプリを**リロード**（Reload）します。 （コンソールからPythonAnywhereの他のページにアクセスするには、右上のメニューボタンを使います。）更新された内容が、 https://subdomain.pythonanywhere.com に反映されているはずです。ブラウザで確認してみましょう！ PythonAnywhereサイトで表示されるブログの記事が、あなたのパソコンの中のローカルサーバーのものと違っていても大丈夫です。 ローカルコンピュータにあるデータベースと、PythonAnywhere上のデータベースは同期していません。 + +頑張りましたね！ さぁ、ここまでできたら、Django 管理画面から新しい投稿を追加してみましょう。（published_date 公開日の設定を忘れずに！）投稿を追加する時、PythonAnywhereのサイトの管理画面（）であることを確認してください 。できたら、リロードして投稿したものが表示されるか見てみましょう。 + +うまく動きましたか？ここまでよく頑張りましたね！少しパソコンから離れて、休憩をとりましょう。^_^ + +![図 13.4](images/donut.png) diff --git a/ja/django_templates/images/donut.png b/ja/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/ja/django_templates/images/donut.png differ diff --git a/ja/django_templates/images/step1.png b/ja/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/ja/django_templates/images/step1.png differ diff --git a/ja/django_templates/images/step2.png b/ja/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/ja/django_templates/images/step2.png differ diff --git a/ja/django_templates/images/step3.png b/ja/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/ja/django_templates/images/step3.png differ diff --git a/ja/django_urls/README.md b/ja/django_urls/README.md new file mode 100644 index 00000000000..5b91eb35257 --- /dev/null +++ b/ja/django_urls/README.md @@ -0,0 +1,103 @@ +# Django URL + +もうすぐ最初のWebページ、あなたのブログのホームページを作るところです！でも最初に、ちょっとだけDjangoのURLについて学びましょう。 + +## URLとは？ + +URLはWeb上のアドレスです。 サイトのURLは、ブラウザのアドレスバーで見ることができます。 （そう、 `127.0.0.1:8000` や `http://djangogirls.com` がURLです。） + +![URL](images/url.png) + +インターネット上のすべてのページには、独自のURLが必要です。 それによって、これから作るアプリケーションが、URLを指定してアクセスしてきたユーザに、何を見せたらいいのかわかるのです。 Djangoでは `URLconf`（URL設定）と呼ばれるものを使います。 URLconfはパターンの集まりで、適切なビューを見つけるために、DjangoがリクエストされたURLと照合するものです。 + +## DjangoでURLはどのように機能する？ + +`mysite/urls.py` を開いて、中身をみてみると： + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +ご覧のとおり、Djangoは既にこのようなものを置いてくれています。 + +三重クオート（ `'''` や `"""` ）で囲まれた行は、docstringとよばれるコメント行です。ファイル、クラス、またはメソッドの先頭に記述して、それが何をするかを説明するのに用います。 これはPythonによって実行されない行です。 + +前の章で訪れたadminのURLについてはすでに書いてありますね。 + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +`admin/` で始まる全てのURLについて、Djangoが返すべき*ビュー*をこの行で指定しています。 今回の場合、adminで始まるURLをたくさん作ることになりますが、その全てをこの小さいファイルに書くようなことはしません。この方がきれいで読みやすいですし。 + +## あなたの初めてDjango URL! + +さあ最初のURLを作りましょう！'http://127.0.0.1:8000/' をブログの入口ページにして、投稿したブログポストのリストを表示するようにしたいと思います。 + +`mysite/urls.py` ファイルは簡潔なままにしておきたいので、`mysite/urls.py` では`blog` アプリからURLをインポートするだけにしましょう。 + +まず、`blog.urls` をインポートする行を追加しましょう。 ここで、`include`関数を使いたいので、`from django.urls…`の行を変更し、そのインポートを追加する必要があります。 + +`mysite/urls.py` ファイルはこのようになります： + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +これでDjangoは'http://127.0.0.1:8000/' に来たリクエストは `blog.urls` へリダイレクトするようになり、それ以降はそちらを参照するようになります。 + +## blogのURL + +`blog` ディレクトリの下に、新しく `urls.py` という空のファイルを作って、コードエディタで開いて下さい。そして最初の2行を以下のように書きます： + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +これはDjangoの `path` 関数と、`blog` アプリの全ての `ビュー`（といっても、今は一つもありません。すぐに作りますけど！）をインポートするという意味です。 + +その後、最初のURLパターンを追加します。 + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +見てのとおり、`post_list` という名前の `ビュー` をルートURLに割り当てています。 このURLパターンは空の文字列に一致します。Djangoはビューを見つけるとき、URLのパス(path)の前にくっつくドメイン名（つまり、http://127.0.0.1:8000/ の部分）を無視します。 このパターンは誰かがあなたのWebサイトの 'http://127.0.0.1:8000/' というアドレスにアクセスしてきたら `views.post_list` が正しい行き先だということをDjangoに伝えます。 + +最後の `name='post_list'` は、ビューを識別するために使われるURL の名前です。 これはビューと同じ名前にすることもできますが、全然別の名前にすることもできます。 プロジェクトでは名前づけされたURLを後で使うことになるので、アプリのそれぞれのURLに名前をつけておくのは重要です。また、URLの名前はユニークで覚えやすいものにしておきましょう。 + +もし今 http://127.0.0.1:8000/ にアクセスしたら、'web page not available' のようなメッセージが出るでしょう。 これはサーバー（ `runserver` ってタイプしたのを覚えていますか？）が動いていないからです。 なぜこうなったのかを知るためにサーバーのコンソール画面を見てみましょう。 + +![エラー](images/error1.png) + +エラーが表示されていますね。でも心配しないで。これはむしろ、結構便利なものなんですよ：ここでは、**'post_list' という属性(attribute)がない**ことを知らせてくれています。 これは *ビュー* の名前で、Djangoが探して使おうとしましたが、私たちはこれをまだ作っていませんでした。 現時点では、`/admin/` も動作していないと思います。 心配しなくて大丈夫です。ちゃんとできますから。 別のエラーメッセージが表示された場合は、Webサーバーを再起動してみてください。 これを行うには、Webサーバーを実行しているコンソールウィンドウで、Ctrl + C（CtrlキーとCキーを同時に押す）で停止します。 Windowsの場合、Ctrl + Breakかもしれません。 その後、`python manage.py runserver`を実行してWebサーバーを再起動します。 + +> Django URLconfについてもっと知りたい場合は、公式のドキュメントを見て下さい。 https://docs.djangoproject.com/ja/5.1/topics/http/urls/ diff --git a/ja/django_urls/images/error1.png b/ja/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/ja/django_urls/images/error1.png differ diff --git a/ja/django_urls/images/url.png b/ja/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/ja/django_urls/images/url.png differ diff --git a/ja/django_views/README.md b/ja/django_views/README.md new file mode 100644 index 00000000000..9964ded5667 --- /dev/null +++ b/ja/django_views/README.md @@ -0,0 +1,44 @@ +# Djangoビュー – 今こそ作りましょう！ + +それでは前の章の続きをやりましょう。確かビューの作成がまだだったので、エラーになっていましたね！:) + +*ビュー* はアプリのロジックを書いていくところです。 ビューは、以前あなたが作った `モデル` に情報を要求し、それを `テンプレート` に渡します。 テンプレートは、次の章で作ります。 ビューはただのPythonの関数です。**Python入門**の章で書いたものよりもちょっと複雑なだけですよ。 + +ビューは、`views.py` に記述します。私たちの場合 `blog/views.py` に書くことになります。 + +## blog/views.py + +では、早速 blog/views.py をコードエディタで開いて何があるか見てみましょう： + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +まだ何もないですね。 + +`#` で始まる行は、コメントです。この行に書いたものはPythonは無視します。 + +それでは、次のようなちょっとした *ビュー* を作ってみましょう。 + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +見てのとおり、`post_list` という関数（`def` から始まる部分のことです）を作りました。これは `request` を引数に取ります。`blog/post_list.html` テンプレートを（色々なものを合わせて）組み立てる `render` という関数を呼び出して得た値を `return` しています。 + +ファイルを保存したら、どんな風に表示されるか、ブラウザで http://127.0.0.1:8000/ を確認してみましょう。 + +今度は別のエラーになりましたね。なんと書いてあるでしょうか。 + +![エラー](images/error.png) + +サーバーは実行されていることはわかるのですが、正しく表示されないのはなぜでしょう？ 心配しないで！ただのエラーページです！ コンソールでのエラーメッセージと同じように、これは実際にかなり便利です。 *TemplateDoesNotExist* と書いてありますね。 それでは次の章でテンプレートを作って、エラーを解決しましょう！ + +> Djangoのビューについてもっと知りたいのなら、公式ドキュメントをぜひ読んでみてください。 https://docs.djangoproject.com/ja/5.1/topics/http/views/ diff --git a/ja/django_views/images/error.png b/ja/django_views/images/error.png new file mode 100644 index 00000000000..2ef613c8a5d Binary files /dev/null and b/ja/django_views/images/error.png differ diff --git a/ja/dynamic_data_in_templates/README.md b/ja/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..931797e2031 --- /dev/null +++ b/ja/dynamic_data_in_templates/README.md @@ -0,0 +1,81 @@ +# テンプレート内の動的データ + +ポスト内容を保存する為の Post モデルは、 models.py に定義しました。ポストの一覧を表示する post_list は views.py にあり、そこにテンプレートも加わりました。 これらを準備しましたが、実際のところ、ポストをどうやってHTMLファイルに出力すればいいのでしょうか？ 大まかなイメージとしては、データベースに保存された記事を取り出して、テンプレートのHTMLファイルの中に行儀よく並べれば良さそうですね。 + +正確には、*ビュー *が モデルとテンプレートの橋渡しをしてくれます。 私達が作業している `post_list ` *ビュー *の場合、表示したいデータを取り出して、テンプレートファイルに渡すことになります。 どのモデルのデータを、どのテンプレートに表示させるかを、 *ビュー*に 記述します。 + +それでは、実際にやってみましょう。 + +まず`blog/views.py`をエディタで開きます。今のところ `post_list`*ビュー* は、以下のようになっているでしょう。 + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +少し前に、別のファイルに用意したコードをどうやってインクルードするか説明したのですけれど、覚えていますか？ それでは `models.py` のモデルを、インクルードしてみましょう。 `from .models import Post` という行を追加してみます。 + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +`models` の前にあるドットは *カレントディレクトリ* 、もしくは *カレントアプリケーション *のことです。 ` views.py `と `models.py `は、同じディレクトリに置いてあります。 だから、こんな風に`.`とファイル名だけを使って、簡単に記述することが出来るのです。（ファイル名の拡張子`.py `は必要ないです） そして、モデルの名前を指定してインポートします(この場合のモデルは `Post `ですね)。 + +さて、次にすべきことは、実際に `Post `モデルからブログの記事を取り出すことですが、それには `クエリセット `が必要です。 + +## クエリセット + +もう、クエリセットの働きについては、知っていますよね。[Django ORM（クエリセット）](../django_orm/README.md) チャプター で勉強しました。 + +公開したブログ記事を `published_date `で並べ替えをしたいですね。これも、クエリセットの章でやったので、大丈夫ですね？ + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +それでは `blog/views.py`をエディタで開いて、このコードを`def post_list(request)`で始まる関数の中に加えましょう。`from django.utils import timezone`をまず追加するのを忘れないでくださいね。 + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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 `で参照できることに、注意しましょう。この 変数 posts を使って、クエリセットのデータにアクセスします。これから先 posts というと、このクエリセットのことです。 + +`render `関数では、既にパラメータとして `request `とテンプレートファイル `'blog/post_list.html' `が渡されています。リクエストというのは、インターネットを介してユーザから受け取った全ての情報が詰まったものです。最後のパラメータに注目してください。 ` {} `こんな風に書かれていますね。この中に指定した情報を、テンプレートが表示してくれます。{} の中に引数を記述する時は、名前と値をセットにしなくてはなりません。 表示させたいのはクエリセットのデータなので、 `posts` を指定しましょう。 :) `{'posts': posts}`という具合に、記述します。 注意して欲しいのは、シングルクォートです。 `:`（コロン） で区切られた、前の方の posts は、 シングルクォート で囲まれて、 'posts' になっていますよね。こちらが名前で、後ろの方の posts は値、クエリセットのことです。 + +最終的に `blog/views.py `は、以下の様になるはずです。 + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +どうでしたか？次は、このクエリセットをテンプレートで表示させるところを、やってみましょう。 + +Djangoのクエリセットについて、もっと知りたければこちらも読んでみてくださいね。 https://docs.djangoproject.com/ja/5.1/ref/models/querysets/ diff --git a/ja/extend_your_application/README.md b/ja/extend_your_application/README.md new file mode 100644 index 00000000000..b650243e077 --- /dev/null +++ b/ja/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# アプリケーションを拡張しよう + +もうウェブサイトを作るのに必要な全ての章は終わりました。モデル、URL、ビュー、テンプレートの書き方はわかっていますし、またウェブサイトを素敵にするやり方もわかります。 + +さあ練習しましょう！ + +ブログに最初に必要なものはおそらく、記事を表示するページですよね。 + +もう`Post`モデルが入っていますから、`models.py`は追加する必要はありません + +## 投稿の詳細へのテンプレートリンクを作成する + +`blog/templates/blog/post_list.html`ファイルにリンクを追加していきましょう。 コードエディタで開いたら、次のようになっていますよね： {% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}投稿リストの投稿のタイトルから投稿の詳細ページへのリンクを作りたいです。 投稿の詳細ページにリンクするように`

{{ post.title }}

`を変更しましょう。{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}不思議な` {％ url 'post_detail' pk = post.pk ％}`を説明します。 気づいたかもしれませんが、`{% %}`という表記はDjangoのテンプレートタグを使用していることを意味しています。 今私たちはこれをURLを作るために使います！{% endraw %} + +`post_detail`の部分は、Djangoが`blog/urls.py`に書かれた name=post_detail のURLを待ち受けることを表しています。 + +そして`pk=post.pk`についてはどうでしょうか？ `pk`はプライマリキーの略で、データベースの各レコードのユニークな名前です。 `Post`モデルでプライマリキーを指定しなかったので、Djangoは私たちのために1つのキーを作成し（デフォルトでは、各レコードごとに1ずつ増える数字で、たとえば1、2、3です）、各投稿に`pk`というフィールド名で追加します。 `Post`オブジェクトの他のフィールド（`title`、`author`など）にアクセスするのと同じ方法で、`post.pk`と書くことによってプライマリキーにアクセスします！ + +さて、私たちが http://127.0.0.1:8000/ に行くとエラーが出ます（知っての通り、URLも`post_detail`の*ビュー*もまだ作っていないので）。 このようになります： + +![NoReverseMatch error](images/no_reverse_match2.png) + +## 投稿の詳細へのURLを作成する + +`post_detail` *ビュー*用に`urls.py`にURLを作成しましょう！ + +最初の投稿の詳細がこの**URL**で表示されるようにします：http://127.0.0.1:8000/post/1/ + +投稿の内容を表示する`post_detail`という*ビュー*をDjangoに示すように、`blog/urls.py`ファイルでURLを作りましょう。 `blog/urls.py`をエディタで開いて、`path('post//', views.post_detail, name='post_detail'),`という行を追加しましょう。ファイルは次のようになるでしょう。 + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +`post//` の部分はURLパターンを指定しています。それについて説明しましょう: + +- `post/` はURLが **post** に続けて **/** で始まることを意味します。ここまでは順調ですね。 +- `` – この部分はトリッキーです。これはDjangoは整数の値を期待し、その値が`pk`という名前の変数でビューに渡されることを意味しています。 +- `/` – それからURLの最後に再び **/** が必要です。 + +つまり、ブラウザに`http://127.0.0.1:8000/post/5/`を入力すると、Djangoは`post_detail`という*ビュー*を探していると理解します。そして`pk`が`5`という情報をその*ビュー*に転送します。 + +よし、私たちは `blog/urls.py` に新しい URL パターンを追加しました！ ページを更新しましょう：http://127.0.0.1:8000/ ドーン！ サーバーが再び実行を停止しました。 コンソールを見てください - 予想通り、もう一つのエラーがあります！ + +![AttributeError](images/attribute_error2.png) + +あなたは次のステップが何であるか覚えていますか？ ビューを追加する！ですね。 + +## 投稿の詳細ビューを追加する + +今回は*ビュー*に追加のパラメータ`pk`が与えられます。 私たちの*ビュー*はそれを受け取る必要がありますね？ そこで関数を`def post_detail(request, pk):`として定義します。 `urls`で指定した名前（`pk`）とまったく同じ名前を使用する必要があることに注意してください。 この変数を省略するのは正しくないのでエラーになってしまいます！ + +今、私たちは1つだけブログ投稿を取得したいと考えています。 これを行うには、次のようなクエリセットが使用できます。 + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +しかし、このコードには問題があります。 与えられた`プライマリキー`（`pk`）を持つ`Post`が存在しない場合、とてもダサいエラーが発生します。 + +![DoesNotExist error](images/does_not_exist2.png) + +私たちはそれを望んでいません！ しかし幸運にもDjangoにはそれを処理するものがあります：`get_object_or_404` です。 与えられた`pk`の`Post`がない場合、前よりもっとよい `Page Not Found 404` ページが表示されます。 + +![Page not found](images/404_2.png) + +いい知らせとして実際には自分の`Page not found`ページを作って自分の好きなようにきれいにすることができます。しかしそれは今すごく重要ではないので、私たちはそれをスキップします。 + +よし、今こそ*ビュー*を`views.py`ファイルに追加するときです！ + +`blog/urls.py`では`views.post_detail`というビューを参照する`post_detail`という名前のURLルールを作成しました。 これは、Djangoが`blog/views.py`内の`post_detail`というビュー関数を待っていることを意味します。 + +`blog/views.py`をコードエディタで開き、他の`from`行の近くに次のコードを追加する必要があります。 + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +ファイルの最後に*ビュー*を追加します： + +{% 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}) +``` + +ページを更新してみましょう：http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +出来ましたね！ しかし、ブログ投稿のタイトルのリンクをクリックするとどうなりますか？ + +![TemplateDoesNotExist error](images/template_does_not_exist2.png) + +あらいやだ！ 別のエラー！ しかし、私たちはすでにそれに対処する方法をすでに知っていますね。 そう！テンプレートを追加する必要があります！ + +## 投稿の詳細へのテンプレートリンクを作成する + +`blog/templates/blog`に`post_detail.html`というファイルを作成し、コードエディタで開きます。 + +こんな感じですね。 + +{% 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 %} +``` + +もう一度`base.html`を拡張します。 `content`ブロックでは、投稿の公開日（存在する場合）、タイトル、およびテキストを表示します。 ここで重要なポイントについて見てみます。 + +{% raw %}`{% if ... %} ... {％endif％}`は、何かをチェックしたいときに使用できるテンプレートタグです。 (`if ... else...`を**Python入門**のチャプターでやったのを覚えていますか？) この場合、投稿の`published_date`（公開日）が空でないかを確認します。{% endraw %} + +これで、ページを更新して`TemplateDoesNotExist`がもうなくなったかどうか確認できます。 + +![Post detail page](images/post_detail2.png) + +イェーイ！うまくできていますね！ + +# デプロイの時間です！ + +あなたのウェブサイトがまだPythonAnywhere上で動くとしたらいいでしょう？またデプロイしてみましょう。 + +{% 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 + + +それから、[PythonAnywhere Bash コンソール](https://www.pythonanywhere.com/consoles/)で： + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +（``の部分を、自分の実際のPythonAnywhereのサブドメイン名に山カッコをはずして置き換えることを忘れずに。） + +## サーバー上の静的ファイルの更新 + +PythonAnywhereのようなサーバは、（CSSファイルのような）「静的ファイル」をPythonファイルとは違って扱うのが好きです。なぜなら、それらが高速に読み込まれるように最適化できるからです。 その結果、CSSファイルを変更するたびに、サーバー上で追加のコマンドを実行して、更新するように指示する必要があります。 コマンドは`collectstatic`です。 + +もし仮想環境（virtualenv）が有効になっていなければ有効化するところから始めましょう (PythonAnywhereではこれを行うために`workon`というコマンドを使用します。これはあなたが自身のコンピュータで使用している`source myenv/bin/activate`コマンドと同じようなものです) 。 + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +`manage.py collectstatic`コマンドは、`manage.py migrate`のようなものです。 私たちはコードをいくつか変更してから、Djangoにサーバの静的ファイルのコレクションまたはデータベースに変更を*適用*するよう指示します。 + +いずれにしても、[「Web」ページ](https://www.pythonanywhere.com/web_app_setup/)を（コンソールの右上のメニューボタンから）開き、**Reload**をクリックする準備ができました。そうしたらhttps://subdomain.pythonanywhere.comを見て結果を確認しましょう。 + +うまくいってるはずです！おめでとう :) \ No newline at end of file diff --git a/ja/extend_your_application/images/404_2.png b/ja/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/ja/extend_your_application/images/404_2.png differ diff --git a/ja/extend_your_application/images/attribute_error2.png b/ja/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/ja/extend_your_application/images/attribute_error2.png differ diff --git a/ja/extend_your_application/images/does_not_exist2.png b/ja/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/ja/extend_your_application/images/does_not_exist2.png differ diff --git a/ja/extend_your_application/images/no_reverse_match2.png b/ja/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/ja/extend_your_application/images/no_reverse_match2.png differ diff --git a/ja/extend_your_application/images/post_detail2.png b/ja/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/ja/extend_your_application/images/post_detail2.png differ diff --git a/ja/extend_your_application/images/post_list2.png b/ja/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/ja/extend_your_application/images/post_list2.png differ diff --git a/ja/extend_your_application/images/template_does_not_exist2.png b/ja/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/ja/extend_your_application/images/template_does_not_exist2.png differ diff --git a/ja/how_the_internet_works/README.md b/ja/how_the_internet_works/README.md new file mode 100644 index 00000000000..b11bce7f017 --- /dev/null +++ b/ja/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# インターネットのしくみ + +> 家で１人でこのチャプターに挑戦している方へ：このチャプターは、動画（英語）もあるので参考にしてください。 [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc) +> +> この章は、ジェシカ・マッケラー（http://web.mit.edu/jesstess/www/ ）による「インターネットの仕組み」を参照しています。 + +私達は、毎日インターネットを使っています。でも、ブラウザのアドレス欄に https://djangogirls.org のようなアドレスを入力して `Enter` キーを押すと何が起こるか、あなたは実際に知っていますか？ + +まず最初に理解する必要があるのは、Webサイトはハードディスクに保存されたたくさんのファイル（ちょうどあなたの動画や音楽、画像のデータのようなファイル）からできているということです。 ただし、Webサイトに固有の部分が1つあります。HTMLと呼ばれるコンピューター向けコードが含まれていることです。 + +プログラミングに慣れていない場合、最初はHTMLを把握するのは難しいかもしれませんが、Webブラウザ（Chrome、Safari、Firefoxなど）とHTMLコードは親和性があります。 Webブラウザはこのコードがわかるようになっていて、コードの指示に従います。そして、あなたのウェブサイトのファイルをあなたが望む方法で表示するのです。 + +あなたのパソコンへファイルを保存するのと同じで、私達はHTMLをハードディスクに保存する必要があります。 インターネットの場合、*サーバー* と呼ばれるパワフルなコンピュータを使い、そのハードディスクに保存します。 サーバーの主な目的は、データを保存したり、データを供給したりすることなので、サーバーは画面やマウス、キーボードを持っていません。 サーバーはデータを供給する（*サーブ* する）役割を持っているので、*サーバー* と呼ばれるのです。 + +はい、では、どのようにインターネットが見えるかを知りたいですよね？ + +私たちは絵を描いてみました。 + +![図 1.1](images/internet_1.png) + +上記の絵は混乱しているように見えますよね？ 接続されたマシン（*サーバー*）のネットワークは実際こんな感じです。 数十万台のマシン！ 世界中はりめぐらされたケーブル！ Submarine Cable MapのWebサイト (http://submarinecablemap.com) にアクセスすれば、ネットの複雑さを知ることができます。 ここにウェブサイトからのスクリーンショットがあります： + +![図 1.2](images/internet_3.png) + +すばらしいですね。 でも、インターネットに接続されているすべてのマシンとマシンの間にワイヤを置くことは不可能です。 したがって、マシン（例えば http://djangogirls.org が保存されているマシン）に到達するためには、多くの異なるマシンを介してリクエストを渡す必要があります。 + +こんな感じですね。 + +![図 1.3](images/internet_2.png) + +あなたが http://djangogirls.org と入力すると、「親愛なるDjango Girlsへ。私はdjangogirls.orgのWebサイトが見たいです。それを私に送ってください」とリクエスト（手紙）を送ることになります。 + +あなたの手紙（リクエスト）は、まずあなたの一番近くの郵便局にいきますよね。 そしてそこから、もう少し宛先に近い別の郵便局に行き、またそこからもう少し近い郵便局に行って・・そしてあなたの目的地まで届きます。 特別なことが一つあります。同じ宛先に多くの手紙（*データパケット*）を送ると、まったく別の郵便局（*ルーター*）を通過して届く可能性があるということです。 届くまでの道順は、郵便局ごとの配送方法次第です。 + +![図 1.4](images/internet_4.png) + +このように動作しています。あなたはメッセージを送信し、何らかの応答を期待します。 紙とペンではなく、データのバイトを使用しますが、アイデアは同じです！ + +市町村名、郵便番号、国名の住所の代わりに、IPアドレスを使用します。 お使いのコンピュータは、まず djangogirls.org をIPアドレスに変換するようにDNS（Domain Name System）に依頼します。 あなたが連絡したい人の名前を探し、電話番号と住所を見つけることができる昔ながらの電話帳のようなものです。 + +手紙を送るときには、住所、切手など、正しく配送される特定の機能が必要ですよね。 また、受信者が理解できる言語も使用している必要がありますよね？ Webサイトを表示するために送信する *データパケット* についても同様です。 HTTP（Hypertext Transfer Protocol）というプロトコルを使用します。（プロトコルとは正しく配送されるための機能や、使う言語などについての取り決めのことです） + +だから、基本的に、あなたがWebサイトを持つなら、*サーバー*（マシン）が必要です。 *サーバー* は *リクエスト* を（手紙で）受け取ると、Webサイトを（別の手紙で）返します。 + +これはDjangoチュートリアルですから、Djangoが何をしているのか知りたいでしょう？ あなたが返事を返す時、 いつもみんなに同じ返事を返したいわけではなく、 リクエストを送った人それぞれにパーソナライズされた返事を返した方がよいこともありますよね？ Djangoはパーソナライズされた面白い手紙を作るのに役立ちます。 :) + +インターネットの話は以上です！さあ、いよいよあなたのブログサイトを作成する時間です！ \ No newline at end of file diff --git a/ja/how_the_internet_works/images/internet_1.png b/ja/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/ja/how_the_internet_works/images/internet_1.png differ diff --git a/ja/how_the_internet_works/images/internet_2.png b/ja/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/ja/how_the_internet_works/images/internet_2.png differ diff --git a/ja/how_the_internet_works/images/internet_3.png b/ja/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/ja/how_the_internet_works/images/internet_3.png differ diff --git a/ja/how_the_internet_works/images/internet_4.png b/ja/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/ja/how_the_internet_works/images/internet_4.png differ diff --git a/ja/html/README.md b/ja/html/README.md new file mode 100644 index 00000000000..474f452a69d --- /dev/null +++ b/ja/html/README.md @@ -0,0 +1,217 @@ +# HTML 入門 + +テンプレートとは何でしょうか？ + +テンプレートは、異なる情報を統一された形式で示すために繰り返し使われるファイルです。例えば、テンプレートは手紙を書く際に役立ちます。それぞれの手紙のメッセージは様々で、宛先も別々かもしれませんが、どの手紙も同じフォーマットを共有できるのです。 + +Djangoのテンプレートのフォーマットは、HTMLと呼ばれる言語 (最初のチャプター**「インターネットのしくみ」**で触れたHTMLのことです) で書かれています。 + +## HTMLとは？ + +HTMLは、ChromeやFirefox、Safariなどのウェブブラウザで解読され、利用者にウェブページを表示するためのコードです。 + +HTMLは、「HyperText Markup Language」の頭文字を取ったものです。 **HyperText**はWebページ間を結びつけるハイパーリンクをサポートするテキスト形式という意味です。 **Markup**とは、一つの書類について、コードで修飾を付けて、何かに(この場合、ブラウザに) どう解釈するかを伝えることを意味します。 HTMLコードは、 `<`で始まり、 `>`で終わる**タグ**で構成されています。 これらのタグが、markup修飾の**要素**なのです。 + +## 最初のテンプレート + +テンプレートを作るとは、テンプレートのファイルを作ることです。すべてはファイルですよね。皆さんは、たぶん、このことに、もう気づいていると思います。 + +テンプレートは、`blog/templates/blog`ディレクトリに保存されています。 それでは、最初に、自分のblogディレクトリの中に`templates`という名前のディレクトリを作成してください。 次に、自分のtemplatesディレクトリの中に`blog`という名前のディレクトリを作ります。 + + blog + └───templates + └───blog + + +（なぜ、両方とも`blog`という名前の付いたディレクトリを2つ作成する必要があるのか不思議に思う人もいるかもしれません。あとで分かると思いますが、簡単に言うと、これは、もっと複雑なことをやろうとした時に、それが楽にできるようにしてくれる便利な命名法なのです。） + +それでは、`blog/templates/blog`ディレクトリの中に、`post_list.html`ファイル(とりあえず何も書かれていないファイルにしておきます)を作成しましょう。 + +あなたのウェブサイトを見てみてください: http://127.0.0.1:8000/ + +> もし、`TemplateDoesNotExist`が引き続き表示されるようなら、自分のサーバーを再起動してみてください。 コマンドラインから、Ctrl+C(ControlとCのキーを同時に)を押してサーバーを止め、`python manage.py runserver`コマンドを動かして再度サーバーを動かします。 + +![図 11.1](images/step1.png) + +もうエラーはありませんか！おめでとうございます:)。しかし、あなたのウェブサイトは実際には空白のページ以外は何も表示していないでしょう。テンプレートも空白だからです。それを直していく必要があります。 + +この新しく作ったファイルをコードエディタで開いて、次の内容を書き加えます。 + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Hi there!

+

It works!

+ + +``` + +さあ、あなたのウェブサイトはどう見えるでしょうか？以下を開いて確認してみましょう: http://127.0.0.1:8000/ + +![図 11.2](images/step3.png) + +うまく動いています！よくできました:) + +* どんなウェブページでも、最も基本的なタグである``から始まり、そして常に、``で終わります。 みなさん見てとれるように、ウェブサイトの全てのコンテンツは、開始タグの``と閉じタグ``の間にあります。 +* `

`は、段落要素のためのタグです; `

` でそれぞれの段落を閉じます。 + +## HeadとBody + +それぞれのHTMLページは**head**と**body**という要素によって2つにわけられています. + +* **head**は文書についての情報を含む要素で、画面には表示されません。 + +* **body**はWebページの一部として表示されるすべてを含む要素です。 + +``でページの設定をブラウザに伝え、``でページの内容を伝えます。 + +例えば、ウェブページのタイトル要素は``の中に書きます。こんな感じですね。 + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +ファイルを保存し、ページを更新してください。 + +![図 11.3](images/step4.png) + +ブラウザは、どうやって、"Ola's blog"があなたのウェブサイトのタイトルだと理解したのか分かりましたか？ ブラウザは、`Ola's blog`の意味を解釈して、あなたのブラウザのタイトルバーに文を配置したのです(この文はブックマークなどにも利用されます)。 + +各々の開始タグは*閉じタグ*とセットで、閉じタグには`/`が付いていて、タグの要素は*入れ子*になっていることに気がついたことと思います(つまり、ある特定のタグを閉じるには、その中にある全てのタグも閉じられていないとだめなのです)。 + +箱の中にものを詰め込むのと同じですね。 大きな箱、 ``があります; その中に``があり、さらにもっと小さな`

`が入っているのです。 + +こうした*閉じ*タグと、*入れ子*のルールを守らなくてはいけません - そうしないと、ブラウザはタグを適切に解釈することができず、あなたのウェブページが正しく表示されなくなるのです。 + +## テンプレートのカスタマイズ + +それでは、ちょっぴり楽しくテンプレートを作り変えてみましょう！次のようないくつか便利なタグがあります。 + +* `

ヘッダー

` 最も重要性の高い見出し +* `

サブのヘッダー

` その次のレベルの見出し +* `

サブのサブのヘッダー

`... など`
`まで +* `

文章の段落

` +* `文章`で文章を強調する +* `文章`でさらに文章を強調する +* `
`は改行(brタグの中には何も書いてはいけません。閉じタグも無しです) +* `リンク` はリンクを生成します +* `
  • 第１の項目
  • 第２の項目
` でリストを作成する、こんな感じに！ +* `
`はページ内のセクションを定義 + +いろんな要素をまとめたテンプレートの例がこれです。コピーして`blog/templates/blog/post_list.html`に貼り付けてみましょう: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

My first post

+

Aenean eu leo quam. こんにちは！ よろしくお願いします！

+
+ +
+

公開日: 2014/06/14, 12:14

+

2番目の投稿

+

こんにちは！ よろしくお願いします！

+
+ + +``` + +ここで3つの `div` セクションを作成しました。 + +* 最初の `div` 要素には、私たちのブログのタイトルが含まれています。見出しとリンクです。 +* その他の２つの`div`要素には、このブログにポストされた記事が公開日とともに記載されています。`h2`はクリック可能な記事のタイトルです。２つの`p`(段落) は、１つが日付で、１つがブログにポストされた記事です。 + +その結果、次のような結果が得られます。 + +![図 11.4](images/step6.png) + +いぇーい！ ところが今のところ、私たちのテンプレートは、常に完全に**同じ情報**だけしか表示できません。一方で、以前は、テンプレートを使えば、**異なる**情報を**同じ形式**で表示できるようになるとお伝えしていたのですが。 + +本当にやりたいことは、Djangoのadminに追加された本物の記事を表示することです。そして、それが次にやるべきことなのです。 + +## もう一つ: デプロイしましょう！ + +ここまでやったことを公開して、インターネットで動かしてみると楽しいですよね。PythonAnywhereでデプロイしてみましょう。 + +### Githubに自分のコードをPushしてみよう + +まずは、最後に実行したときから、どのファイルを変更したか見てみましょう(以下のコマンドを、PythonAnywhereではなく、自分のパソコンで実行してください。)。 + +{% filename %}command-line{% endfilename %} + + $ git status + + +`djangogirls` ディレクトリにいることを確認して、 `git` に対してこのディレクトリ内の変更を全て反映させるよう指示してください: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + + +> **ノート** `--all` をつけると、 `git` は、ファイルを削除したかどうかも判定します (これがない初期設定の状態では、新しいファイルと変更されたファイルしか認識しません)。 `.` が、今いるディレクトリを表すということも思い出してくださいね(第３章にありました)。 + +全てのファイルをアップロードする前に、`git`が何をアップロードするのかチェックしておきましょう(`git`がアップロードする全ファイルは緑で表示されます): + +{% filename %}command-line{% endfilename %} + + $ git status + + +ほぼ完了です。どこを変更したかを履歴に保存するよう指示してみましょう。 何を変更したのか説明するコミットメッセージを残しましょう。 この時、どんな内容を好みで打ち込んでも構いませんが、何をしたかを具体的に書き込んでおけば、将来、作業内容を思い出す助けになるでしょう。 + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Changed the HTML for the site." + + +> **ノート** コミットメッセージは二重クォート記号で囲みましょう。 + +ここまで終われば、GitHubに変更部分をアップロード(push) しましょう。 + +{% filename %}command-line{% endfilename %} + + $ git push + + +### 新しいコードをPythonAnywhereにpullして、自分のウェブアプリを再度実行させる + +* [PythonAnywhereのコンソールページ](https://www.pythonanywhere.com/consoles/)を開き、**Bash コンソール**に移動してください (または新たなBash コンソールを開始してください)。それから次を実行してください。 + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +``を、山カッコ<>をつけずに、実際のPythonAnywhereのサブドメイン名に置き換える必要があります。 通常、サブドメイン名はPythonAnywhereユーザー名ですが、場合によっては多少異なることがあります（ユーザー名に大文字が含まれている場合など）。 このコマンドが機能しない場合は、`ls`（ファイルを一覧にする）コマンドを使用して、実際のサブドメイン名とフォルダ名を見つけ、そこに `cd` します。 + +では、自分のコードがダウンロードされたことを確認しましょう。 それをチェックしたい場合は、**「Files」ページ** に移動して、自分のコードをPythonAnywhereの中で見てみましょう（コンソールページのメニューボタンからPythonAnywhereの他のページにアクセスできます）。 + +* 最後に、[「Web」ページ](https://www.pythonanywhere.com/web_app_setup/)へ移動して、自分のアプリの**Reload**ボタンをクリックします。 + +あなたのアプリが更新され、動いています！ウェブサイトを開いて、再読込してみましょう。どう変わったのか、見えるはずです。:) \ No newline at end of file diff --git a/ja/html/images/step1.png b/ja/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/ja/html/images/step1.png differ diff --git a/ja/html/images/step3.png b/ja/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/ja/html/images/step3.png differ diff --git a/ja/html/images/step4.png b/ja/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/ja/html/images/step4.png differ diff --git a/ja/html/images/step6.png b/ja/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/ja/html/images/step6.png differ diff --git a/ja/images/application.png b/ja/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/ja/images/application.png differ diff --git a/ja/installation/README.md b/ja/installation/README.md new file mode 100644 index 00000000000..73a2aacf06f --- /dev/null +++ b/ja/installation/README.md @@ -0,0 +1,69 @@ +# 家でチュートリアルに挑戦する方へ + +[Django Girls のイベント](https://djangogirls.org/events/)ではなく、あなたが一人家でこのチュートリアルに挑戦しているのであれば、このチャプターは無視して次のチャプター [インターネットのしくみ](../how_the_internet_works/README.md) に進みましょう。 + +このチャプターがある理由は、チュートリアルで必要なもののインストールについてカバーしているからです。これは、インストール手順のすべてを一ヶ所にまとめた追加のページです（ワークショップのやり方によっては、このページは役に立ちます）。 ご希望であれば、このページにあるすべてのものを今すぐインストールすることができます。 ただ、いろんなものをパソコンにインストールする前に、一体それらが何なのかを学びたい方は、このチャプターを飛ばしてください。これ以降のページでそれらが必要になったときに、インストールの手順やその説明を行っています。 + +がんばってね！ + +# ワークショップに参加している方へ + +[Django Girlsのイベント](https://djangogirls.org/events/)の参加者のみなさん： + +* ワークショップDayの前に「インストールパーティ」が開催される場合があります。 あなたがインストールパーティに参加しているなら、このページをご参照ください！ 必要ならコーチの助けを借りて、このチャプターに書いてあるとおりに、ワークショップに必要なすべてのものをインストールしてみましょう。 ワークショップDayでは、以降のチュートリアルの中に出てくるインストールに関連する部分を飛ばすことができます。 +* ワークショップの主催者が、ワークショップ前に自宅であらかじめすべてをパソコンにインストールしてみるようにお願いしているかもしれません。 もしそのように言われていたのなら、このページをご参照ください！ できる限り、このチャプターに書いてあるようにやってみましょう。 その後メインのワークショップで、チュートリアルを進めて何かをインストールする箇所が出てきたときに、もしあなたができていなかったとしたら、コーチの助けを借りましょう。 +* インストールパーティが開催されない場合（またはあなたが参加できなかった場合）、そして主催者が事前のインストールをお願いしていない場合、このページは飛ばして、[インターネットのしくみ](../how_the_internet_works/README.md)のチャプターに進みましょう。 チュートリアルを進めながら、必要なものをすべてインストールします。 + +# インストール + +このチュートリアルではブログを作成します。 そのために、チュートリアルを進める中で必要に応じて、さまざまなソフトウェアをコンピュータにインストールする方法や、いくつかのオンラインアカウントを設定する方法について教わります。 このページでは、インストールとアカウント作成の手順すべてを一ヶ所にまとめています（ワークショップのやり方によっては、このページは役に立ちます）。 + + +{% include "/chromebook_setup/instructions.md" %} + + +# コマンドラインの簡単な紹介 {#command-line} + +以下の手順の多くに、「コンソール」、「ターミナル」、「コマンドウィンドウ」、「コマンドライン」という言葉が出てきます。これらはすべて同じものを意味します。コマンドを入力できる、コンピュータのウィンドウです。 メインのチュートリアルに進むと、コマンドラインについてさらに学ぶことができます。 今は、コマンドウィンドウの開き方と、それがどのように見えるかを覚えましょう： +{% include "/intro_to_command_line/open_instructions.md" %} + +# Pythonのインストール {#python} + +{% include "/python_installation/instructions.md" %} + +# コードエディタのインストール {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# 仮想環境のセットアップとDjangoのインストール {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Gitのインストール {#git} + +{% include "/deploy/install_git.md" %} + +# GitHubのアカウント作成 {#github} + +[GitHub.com](https://www.github.com)へ行って、新しく無料のユーザーアカウントを登録しましょう。パスワードを忘れないようにしてください（もしパスワードマネージャーを使っているなら、追加しましょう）。 + +# PythonAnywhereのアカウント作成 {#pythonanywhere} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# 読んでみよう + +お疲れ様でした！これで準備が整いました。ワークショップが始まるまでに時間があれば、最初のチャプターいくつかを読んでおくとよいでしょう。 + +* [インターネットのしくみ](../how_the_internet_works/README.md) + +* [コマンドラインを使ってみよう](../intro_to_command_line/README.md) + +* [Python入門](../python_introduction/README.md) + +* [Djangoってなに？](../django/README.md) + +# ワークショップを楽しんでください！ + +ここまでで最初の数チャプターの内容を扱ってきたので、ワークショップでは、[プロジェクトを作成しよう！](../django_start_project/README.md)のチャプターからはじめてください。 diff --git a/ja/intro_to_command_line/README.md b/ja/intro_to_command_line/README.md new file mode 100644 index 00000000000..2976a972f5f --- /dev/null +++ b/ja/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# コマンドラインを使ってみよう + +> 家で１人でこのチャプターに挑戦している方へ：このチャプターは、動画（英語）もあるので参考にしてください。 [Your new friend: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8) + +さぁ、これから最初のコードを書いていきますよ。楽しんでいきましょう！:) + +**最初にお友達になるのはコレです。: コマンドライン!** + +プログラマーが黒い画面に向かっている光景を見たことがありますか？ここからは、その黒い画面を触ってみます。最初はちょっとコワイと思うかもしれませんが、そんなことはありません。プロンプトと呼ばれるものがあなたの命令（コマンド）を待っています。 + +> **備考：** このチュートリアルでは、”ディレクトリ”や"フォルダ"という用語が出てきますが、同じ意味です。 + +## コマンドラインって何？ + +さて、**コマンドライン** あるいは **コマンドライン インターフェイス**と呼ばれるこの画面は、キーボードで入力したテキストで命令を出してコンピューターと直接対話するように、ファイルを見たり、変更したりするものです。 グラフィカル・インターフェイスではないだけで、WindowsのエクスプローラやMacのFinderと同じ役割です。 このコマンドラインは、 *cmd*や*CLI*、*プロンプト*、*コンソール*、*ターミナル*と呼ばれることもあります。 + +## コマンドラインインタフェースを開く + +では、実際にコマンドラインを開いて、触ってみることとしましょう。 + +{% include "/intro_to_command_line/open_instructions.md" %} + +## プロンプト + +おそらく今、真っ白または真っ黒な画面が開かれていることでしょう。この画面はあなたの命令（コマンド）を待っています。 + + + +MacあるいはLinuxの方は、次のように `$` という記号が表示されていることでしょう。 + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +Windowsの方は、 `>` という記号が表示されていることでしょう。 + +{% filename %}command-line{% endfilename %} + + > + + +上の Linux のセクションを見てください。このチュートリアルの後ろにある PythonAnywhere を扱うところで、似たような表示を見ることになります。 + + + +各コマンドの先頭には、`$` あるいは `>` とスペース1つがつきます。コンピューターが表示してくれるので、自分で入力する必要はありません。:) + +> ちょっと補足です。お手元では `C:\Users\ola>` や `Olas-MacBook-Air:~ ola$` のようにプロンプト記号の前に表示があると思いますが、これは間違いではありません。 + +`$` や `>` と書かれているところまでは、 *コマンドラインプロンプト* あるいは略して*プロンプト*と呼ばれます。プロンプトの意味は「促す」で、あなたが何か入力することを促しています。 + +このチュートリアルでは、コマンドを入力してほしい時は、 `$` や `>` を含めて示しています（たまにこれらの左にも文字がきます）。 $ や > から左側は無視して、コマンドのみを入力してください。コマンドはプロンプトのあとに続きます。 + +## 最初のコマンド (イェイ！) + +次のようにコマンドを入力してみましょう: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +そして最後に`Enterキー`を押してください。このような結果が返ってきます。 + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +ご覧のとおり、コンピューターがあなたのユーザー名を表示してくれましたね。面白いでしょ？ :) + +> コピー＆ペーストではなく、コマンドを入力して試してみてください。そのうち自然と覚えられるようになりますからね！ + +## 基本 + +OSによってコマンドが若干違います。あなたのコンピューターのOS向けの説明に従って、以下は進めていってくださいね。次にいってみましょう。 + +### カレントディレクトリ（現在のディレクトリ） + +今どこのディレクトリにいるか（どのフォルダで作業をしているか）、知りたいですよね？では、このようにキーボードから入力し、`Enterキー`を押してください。 + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> 補足: 'pwd' は'print working directory'の略で、現在いる作業ディレクトリを表示することを意味します。 + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> 補足: 'cd' は、'change directory'の略で、ディレクトリを変えることを意味します。PowerShellを使うと、LinuxやmacOSのようにpwdコマンドを使えます。 + + + +おそらく、あなたのマシン上でも似たような表示がされたのではないでしょうか。コマンドラインを起動すると、通常はユーザーのホームディレクトリがカレントディレクトリになります。 + +* * * + +### コマンドについてもっと知る + +コマンドプロンプトに入力するコマンドの多くには、表示して読むことができるヘルプ機能が備わっています！例として、カレントディレクトリを表示するコマンドについてみてみましょう: + + + +macOS と Linux には、`man` コマンドがあり、それはコマンドのヘルプを提供します。 `man pwd` を試してみましょう。他のコマンドも、コマンドの前に `man` と書き、ヘルプを見てみましょう。 `man` の出力は、通常はページ単位で表示されます。 次のページに移動するにはスペースキーを使います。 ヘルプを見るのをやめるには `qキー` を押します。 + + + + + +ほとんどのコマンドでは、コマンドの後ろに `/?` をつけて実行するとヘルプページが出力されます。すべての出力を見るには、コマンドラインを上にスクロールする必要があるかもしれません。`cd /?` を試してみましょう。 + + + +### ファイルとディレクトリの一覧 + +では、カレントディレクトリの中には何があるのでしょうか？表示させてみましょう。 + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > 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 + ... + + +> 補足：PowerSellでは、Linux や macOS同様にlsコマンドが使えます。 + +* * * + +### カレントディレクトリの変更 + +次に、デスクトップ(Desktop)というディレクトリに移動してみましょう。 + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Desktop というディレクトリ名は、使用しているLinuxアカウントの言語に翻訳されているかもしれません。 その場合は、 `Desktop` を翻訳された名前に置き換えてください; たとえば、ドイツ語なら `Schreibtisch` です。 + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +本当に変更されたかどうか確認してみてください： + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +できていますね！ + +> プロのコツ: `cd D` と入力して、キーボードの`Tabキー`を押してください。すると、Dに続く残りの部分が自動的に補完されるので、より早く入力することができます。 もし、Dから始まるディレクトリ名が他にもあれば、`Tabキー`を2度押すと候補の一覧が表示されます。 + +* * * + +### ディレクトリの作成 + +それでは、practice ディレクトリをデスクトップに作成してみましょう。 + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +この短いコマンドで、デスクトップに `practice` という名前のディレクトリが作成されました。 デスクトップを見るとディレクトリが作成されていることを確認できます。あるいは、先ほど学んだコマンド `ls` や `dir` を使っても確認できます。 やってみてください。 :) + +> プロのコツ: 同じコマンドを何度も入力したくない時は、キーボードの上下矢印キー `↑`、`↓` を押せば、最近使用したコマンドが現れます。内容を修正したい場合には，左右矢印キー←，→を利用して修正したい位置にカーソルを移動させることができますよ。 + +* * * + +### 練習！ + +練習をしてみましょう。先ほど作成した `practice` ディレクトリの中に、`test` という名前のディレクトリを作成してください。(使うコマンドは、`cd` と `mkdir` ですよ) + +#### 解答: + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + + + + +おめでとうございます！よくできました！ :) + +* * * + +### 片付け + +練習で作ったものをそのまま置いておくと邪魔になりますね。練習がおわったら、削除しましょう。 + +はじめに、作業するディレクトリをデスクトップに戻しましょう。 + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +`cd` の後にある `..` で、カレントディレクトリを親ディレクトリに変更します。(今作業しているディレクトリのひとつ上のディレクトリに移動するということですね。) + +現在の作業ディレクトリを確認しておきましょう: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +では、`practice` ディレクトリを削除しましょう: + +> **注意**: `del` や `rmdir `、`rm` コマンドを使って削除したファイルは元に戻せません。*完全に消えてしまいます*！ これらのコマンドを使う時は、よく気をつけてくださいね。 + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +できました！本当に削除されたか、確認してみましょう: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### 終了 + +今回はここまでです。それではコマンドラインを終了しましょう。かっこいいやり方で終了したいですよね? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +かっこいいでしょう? :) + +## まとめ + +役立つコマンドをいくつかまとめておきます。 + +| コマンド (Windows) | コマンド (Mac OS / Linux) | 説明 | 例 | +| -------------- | --------------------- | ----------------- | ---------------------------------------------------- | +| exit | exit | ウインドウを閉じる | **exit** | +| cd | cd | ディレクトリを変更 | **cd test** | +| cd | pwd | 現在のディレクトリを表示 | **cd** (Windows) あるいは **pwd** (Mac OS / Linux) | +| dir | ls | ディレクトリ/ファイルの一覧を表示 | **dir** | +| copy | cp | ファイルのコピー | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | ファイルを移動 | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | 新しいディレクトリを作成 | **mkdir testdirectory** | +| rmdir (or del) | rm | ファイルを削除 | **del c:\test\test.txt** | +| rmdir /S | rm -r | ディレクトリを削除 | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | コマンドのヘルプを表示 | **cd /?** (Windows) あるいは **man cd** (Mac OS / Linux) | + +ここで勉強したのはコマンドのほんの一部でしたが、このワークショップで使うコマンドはこれだけです。 + +もっと勉強したい方は、[ss64.com](http://ss64.com) に各OSのコマンド一覧があります。ご参考までに。 + +## 準備OK？ + +よし、次はPythonを勉強していきましょう！ \ No newline at end of file diff --git a/ja/intro_to_command_line/open_instructions.md b/ja/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..53e38a8d243 --- /dev/null +++ b/ja/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +使用しているWindowsのバージョンとキーボードによりますが、以下のいずれかの方法でコマンドラインを開けるはずです(いくつか試す必要があるかもしれませんが、これらの方法のすべてを試す必要はありません): + +- [スタートメニュー] あるいはスタート画面の検索ボックスに「コマンドプロンプト」と入力しましょう。 +- [スタートメニュー] → [Windows システムツール] → [コマンドプロンプト] を選択しましょう。 +- [スタートメニュー] → [すべてのプログラム] → [アクセサリ] → [コマンドプロンプト] を選択しましょう。 +- スタート画面を開き、画面の左下隅にマウスをかざすと下矢印が表示されるのでクリックします（タッチパネルの場合は、代わりに画面の下から上に向かってフリックしましょう）。 アプリのページが見えるはずです。 [Windows システムツール] から [コマンドプロンプト] をクリックしましょう。 +- キーボードの [Windows キー] を押しながら [X キー] を押します。 ポップアップメニューが表示されるので [コマンドプロンプト] を選択しましょう。 +- [Windows キー] を押しながら [R キー] を押すと [ファイル名を指定して実行] というウィンドウが立ち上がります。 「cmd」と入力して [OK] をクリックしましょう。 + +!["ファイル名を指定して実行" ウィンドウで "cmd" と入力](../python_installation/images/windows-plus-r.png) + +このチュートリアルの後ろの方では、同時に2つのコマンドラインを開く場面があります。 しかし、Windowsのいくつかのバージョンでは、コマンドラインをすでに1つ開いている状態で2つ目を同じ方法で開こうとした場合、すでに開いている1つ目のコマンドラインが参照されてしまうことがあります。 自分のコンピュータ上で試してみて何が起こるか見てみましょう！ コマンドラインが一つしか開かない場合は、上のリストにある他の方法を試してみてください。 上にあるいずれかの方法で新しいコマンドラインを開けるはずです。 + + + + + +[アプリケーション] → [ユーティリティ] → [ターミナル] を選択しましょう。 + + + + + +使用しているシステムによりますが、[アプリケーション] → [アクセサリ] の下、あるいは [アプリケーション] → [システム] の下に [ターミナル] があるでしょう。 もしそこに見当たらない場合は、Googleで検索してみましょう。 :) + + diff --git a/ja/python_installation/README.md b/ja/python_installation/README.md new file mode 100644 index 00000000000..46832893a41 --- /dev/null +++ b/ja/python_installation/README.md @@ -0,0 +1,15 @@ +# Pythonをはじめよう + +ついにここまで来ましたね！ + +まずは、最初にPythonとは何かお話させて下さい。Pythonはとても人気のあるプログラミング言語です。Webサイトや、ゲーム、サイエンス、グラッフィックス、などなど、たくさんの場面で使われています。 + +Pythonは1980年代の終わりに、人間が読みやすい（機械だけでなく）言語を目的に開発されました。 だから、他の言語に比べて、Pythonはとてもシンプルで、勉強しやすいのです。でもご心配なく、Pythonはとってもパワフルな言語ですから！ + +# Pythonのインストール + +> **注意：**Chromebookをお使いの場合、このチャプターは飛ばして、[Chromebookのセットアップ](../chromebook_setup/README.md)の章をすすめてください。 +> +> **注意：**すでにインストール手順を実行している場合は、これをもう一度行う必要はありません。次の章に進んでください。 + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/ja/python_installation/images/add_python_to_windows_path.png b/ja/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/ja/python_installation/images/add_python_to_windows_path.png differ diff --git a/ja/python_installation/images/python-installation-options.png b/ja/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/ja/python_installation/images/python-installation-options.png differ diff --git a/ja/python_installation/images/windows-plus-r.png b/ja/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/ja/python_installation/images/windows-plus-r.png differ diff --git a/ja/python_installation/instructions.md b/ja/python_installation/instructions.md new file mode 100644 index 00000000000..cdea1ccb916 --- /dev/null +++ b/ja/python_installation/instructions.md @@ -0,0 +1,121 @@ +> 家で１人でこのチャプターに挑戦している方へ：この章は、動画（英語）もあるので参考にしてください。 [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA) +> +> このセクションはGeek Girls Carrots (https://github.com/ggcarrots/django-carrots) のチュートリアルをベースに作成しました。 + +DjangoはPythonで書かれています。 Djangoを使うにはPythonが必要です。 では、インストールするところから始めましょう！ 最新のPython３をインストールしてください。それ以前のPythonがインストールされていたら、アップグレードする必要があります。 3.4以降のバージョンであれば問題ありません。 + +下に書いたとおりのやり方で、Pythonをインストールしてください。すでにAnacondaが入っていても以下のとおりにインストールしてください。 + + + +まず、今使っているWindowsが32-bit版か64-bit版か確認しましょう。システム情報の”システムの種類”を確認してください。これを見る方法はいくつかあるので、次のうち１つをやってみましょう： + +* WindowsキーとPause/Breakキーを同時に押します。 +* Windowsのスタートからコントロールパネルを開き、”システムとセキュリティ”、”システム”と順にクリックします。 +* Windowsロゴをクリック、設定 > システム > バージョン情報 とクリックしていきましょう。 + +https://www.python.org/downloads/windows/ からWindows版のPythonをダウンロードできます。 "Latest Python 3 Release - Python x.x.x" というリンクをクリックします。 あなたのWindowsが**64-bit版**なら、**Windows x86-64 executable installer**をダウンロードしてください。 そうでなければ**Windows x86 executable installer**をダウンロードしてください。 インストーラーがダウンロードできたら、ダブルクリックして実行し、指示に従ってください。 + +インストールの途中で、「Setup」というタイトルのウィンドウがでてきたら注意してください。 下にあるとおり、「Add Python 3.6 to PATH」か「Add Python to your environment variables」をチェックしてから「Install Now」をクリックしてください (バージョンが違うと表示が違うこともあります)。 + +![Pythonのパスを通すのを忘れないようにしてください。](../python_installation/images/python-installation-options.png) + +インストールが終わったら、ダイアログボックスが出てきます。ボックス内のリンクを開くと、Pythonやインストールしたバージョンを説明したページに行けます。 ダイアログは閉じてしまいましょう。Pythonの使い方はこのチュートリアルでたっぷり勉強します！ + +注意: あなたのWindowsがWindows7、Windows Vistaや、それ以前のバージョンの場合で、Python 3.6.x のインストールがエラーがでて失敗する場合は、下のどちらかのやり方を試してください。 + +1. Windows Updateを実行してすべての更新ファイルを入れてから、Pythonを入れ直す +2. [古いバージョンのPython](https://www.python.org/downloads/windows/)をインストールしてみる。例えば[3.4.6](https://www.python.org/downloads/release/python-346/)。 + +古いバージョンのPythonをインストールした場合、インストール画面は上のものと違うことがあります。 下にスクロールして「Add python.exe to Path」の左のボタンをクリックして「Will be installed on local hard drive（ローカルハードドライブにインストールされます）」を選択してください + +![古いバージョンでも、Pythonのパスを通してください。](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **注意**：macOSにPythonをインストールする前に、Macの設定でApp Store以外のパッケージをインストールできるようにする必要があります。 「システム環境設定」（「アプリケーション」フォルダ内）に移動し、「セキュリティとプライバシー」、「一般」タブの順にクリックします。 「ダウンロードしたアプリを許可する」が「Mac App Store」に設定されている場合は、「Mac App Storeと識別された開発者」に変更します。 + +https://www.python.org/downloads/release/python-361/ からPythonインストーラーをダウンロードします。 + +* *macOS 64-bit/32-bit installer* というファイルをダウンロードします。 +* ダウンロードできたら *python-3.6.1-macosx10.6.pkg* をダブルクリックして実行します。 + + + + + +すでにPythonがインストールされているかもしれません。インストールされているか、そしてどのバージョンが入っているか確かめるには、コンソールを開いて下のコマンドを入力してください。 + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.5 + + +表示されたバージョンが違っても、3.4.0以降(例えば 3.6.0など)であれば、アップグレードの必要はありません。 Pythonがインストールされていなかったり、違うバージョンをインストールしたい場合は、下のコマンドを実行して、まずパソコンのLinuxディストリビューションがなにか確かめてください。 + +{% filename %}command-line{% endfilename %} + + $ grep ^NAME= /etc/os-release + + +表示されたディストリビューション名に従って、以下のインストール方法の1つを実行してください。 + + + + + +下のコマンドをコンソールに入力します。 + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +下のコマンドをコンソールに入力します。 + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Fedoraのバージョンが古い場合、 `dnf` コマンドが見つからないというエラーが出るかもしれません。そんなときは代わりに `yum` コマンドを使ってください。 + + + + + +下のコマンドをコンソールに入力します。 + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +インストールがうまくいったか確認するために、コマンドプロンプトを開いて `python3` と打ち込んでください。 + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +バージョンはあなたがインストールしたものが表示されます。なのでPython 3.6.1 と表示されないかもしれません。 + +**注意:** Windowsで `python3` を実行して、コマンドが見つからないとエラーが出た場合、代わりに `python` (`3` をコマンドに入れていません) を使ってみてください。そして、3.4.0以降のPythonのバージョンが表示されるか確認してください。 どちらのコマンドもうまく動かない場合は、新しいコマンドプロンプトを開いて同じことを試してください。Pythonのインストール前にコマンドプロンプトを使っていて、それが開きっぱなしだとこういうことが起きます。 + +* * * + +わからないことがあったり、うまくいかなくて次にどうしたらいいかわからなかったりするときは、コーチに質問してください! うまくいかないこともあります。そういうときは、経験豊富な人に聞くといいですよ。 \ No newline at end of file diff --git a/ja/python_introduction/README.md b/ja/python_introduction/README.md new file mode 100644 index 00000000000..e3319290a6c --- /dev/null +++ b/ja/python_introduction/README.md @@ -0,0 +1,1070 @@ +{% set warning_icon = '' %} + +# Python入門 + +> このチャプターの一部はGeek Girls Carrotsのチュートリアルをもとにしています。(https://github.com/ggcarrots/django-carrots) + +さあ、コードを書いてみましょう！ + +## Pythonプロンプト + +> 家で１人でこのパートに挑戦している方へ：このパートと続くパートは、動画（英語）もあるので参考にしてください。 [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U) + +Pythonであそぶために、*コマンドライン* を開きましょう。 やり方は、チャプター [コマンドラインを使ってみよう](../intro_to_command_line/README.md) で学びましたね。 + +準備ができたら、次の指示に従ってやってみましょう。 + +Pythonコンソールを開きましょう。Windowsなら `python` 、Mac OSやLinuxなら `python3` とタイプして `Enter` キーを押してください。 + +{% filename %}command-line{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## 最初のPythonコマンド！ + +Pythonのコマンドが走ると、プロンプト記号が `>>>` に変わりました。 これは、今Pythonの言語を実行できますという意味です。 `>>>` はタイプしなくていいですよ – Pythonがあなたの代わりにやってくれます。 + +Pythonコンソールを終了したい時は、`exit()` とタイプするか、ショートカット `Ctrl + Z`（Windows）、`Ctrl + D`（Mac/Linux）を使ってください。 そうするともう `>>>` は出なくなります。 + +けど、今はまだコンソールを終了しないで、もっと動かして学びましょう。簡単な計算からはじめましょう。`2 + 3` とタイプして、`Enter` キーを押してください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +できました！答えがでてきましたね。Pythonは計算ができます。他にも、次のようなコマンドを試してみましょう。 + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +2の3乗のような指数の計算は、次のようにタイプします。{% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +ちょっとの間楽しんであそんでみたら、またココに戻ってきてくださいね。:) + +お分かりのとおり、Pythonはステキな計算機ですね。他になにができるんだろう…と思ったら、次にいってみましょう。 + +## 文字列 + +あなたのお名前を次のようにクォーテーションをつけてタイプしてください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +はじめてのString（文字列）が完成です！ Stringとは、文字の集合のことです。 シングルクォーテーション (`'`) あるいは、ダブルクォーテーション (`"`) で囲います。 最初と最後は同じ記号にしてください。 クォーテーションの中が文字列であることを意味しています。 + +複数の文字列を結合することもできます。次のように試してみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +文字列を繰り返すためには、演算子を使って繰り返し回数を指定することもできます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +アポストロフィーを文字列の中に含めたい場合は、２通りの方法があります。 + +まずは、ダブルクォーテーションを使う方法です。 + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +あるいは、バックスラッシュ (``) を使う方法もあります。 + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +できましたか？次に、あなたの名前を大文字に変えてみましょう。次のように記述してください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +ここで `upper` **関数 (function)** を使うことができましたね！ 関数 ( `upper()` など) は、呼び出したオブジェクト ( `"Ola"` のことです) に対してどのような手順でどのような処理をするかをひとまとめにしたものです。 + +あなたの名前の文字数を知りたいときは、その **関数 (function)** もあります！ + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +どうして、文字列の後に `.` をつけて関数を呼び出したり ( `"Ola".upper()` のように)、あるいは、先に関数を呼び出してかっこの中に文字列をいれているのか、と疑問に思ったかもしれません。 そうですね。時に、オブジェクトに結びついた関数というのがあります。例えば、`upper()` は、文字列にのみ実行される関数です。 私たちはこれを **メソッド (method)** と呼びます。 それとは別に、特定のオブジェクトに関連せず、異なるタイプのオブジェクトに対して実行できる関数があります。例えば `len()` ですね。 `len` 関数の引数として `"Ola"` をかっこの中にいれているのです。 + +### まとめ + +文字列はだいじょうぶですね。ここまでに学んだことをまとめましょう。 + +- **プロンプト** – Pythonプロンプトにコマンド（コード）を入力すると、答えがかえってきます。 +- **数値と文字列** – 数値は計算に、文字列はテキストに使われます。 +- **演算子** – 例えば `+` や `*` のように、値を計算して新しい値を返します。 +- **関数** – `upper()` や `len()` のようにオブジェクトに対して行う機能のことです。 + +すべてのプログラミング言語に共通する基礎になります。 もう少し難易度の高いものに挑戦してみましょう。準備はいいですか？ + +## エラー + +さて、新しいことをやってみましょう。あなたの名前の文字数を数えたように、数字の文字数は数えられるでしょうか？ `len(304023)` と記述して、`Enter` キーを押してみましょう。 + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +はじめてのエラーがでました！ {{ warning_icon }} アイコンのついたコードは思ったように動かないコードです。 （今回はチュートリアルで用意されていましたが）思ったように動かないことは学ぶ上で大事です！ + +オブジェクトタイプ"int" (integers, 数値) は文字数がありませんと言っています。では、どうすればよいでしょうか？この数字を文字列として扱えれば、文字数を数えられるはずですよね？ + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +うまく行きました！ `str` 関数を `len` のかっこの中に記述しました。`str()` はその中身を文字列に変換します。 + +- `str` 関数は、**文字列** に変換します。 +- `int` 関数は、文字列や数値を **整数** に変換します。 + +> 重要！: 数字は文字列にすることはできますが、全ての文字が数字に変換できるわけではありません。 例えば `int('hello')` は数字にはなりませんよね？ + +## 変数 + +変数（variables）は、プログラミングの重要なコンセプトです。 後で使うためにつける単なる名札ではありません。 プログラマーは変数を使ってデータを保管したり、 コードを読みやすくして、後でそれが何だったか覚えておかなくてもいいようにします。 + +変数 `name` を新しくつくってみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +name イコール（=）"Ola" とタイプします。 + +見てのとおり、プログラムは、なにも返してくれませんね。では、変数がきちんとあるか、どうやって確かめたらいいのでしょうか？ `name` とタイプして、`Enter` キーを押してください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +やりました！あなたのはじめての変数ができましたね！代入する値を変えることもできます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +変数には関数も使えます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +素晴らしいですね！変数は、数値にも使えますよ。 + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +もしも、間違えた変数名を使ってしまったら、どうなるでしょうか？予想できますか？やってみましょう！ + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +エラーになりました！ 前回とは違うエラータイプです。**NameError** という、初めてみるエラータイプですね。 作成されていない変数を使った時は、Pythonがエラーを教えてくれます。 もし、このエラーに出くわしたら、記述したコードにタイプミスがないか確認してください。 + +ちょっと遊んで、何ができるか試してみてくださいね！ + +## print 関数 + +次に挑戦してみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +単に `name` とタイプした時は、Pythonインタプリタが、変数'name'の文字列*表現（representation）*を返します。ここでは、シングルクォーテーション（''）に囲まれた M-a-r-i-aという文字の集まりです。 しかし、`print(name)`と記述した時は、Pythonは変数の中身を出力します。クォーテーションはありません。 + +これからさらに詳しくみていきますが、`print()` は、関数から出力をする時や、複数行の出力を行うときにも便利です。 + +## リスト + +数値と文字列の他にも、すべてのオブジェクトタイプを勉強しておきましょう。 今から**list** というものを紹介していきます。 リストは、その名のとおり、オブジェクトの並びをもつものですね。 :) + +まずはリストを作りましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +はい、このリストは空っぽです。使いにくいですよね。では、くじ引きの番号のリストを作りましょう。 この番号を何度も繰り返し書きたくはないから、同時に変数に代入してしまいましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +よし、これでリストができました！このリストで何をしましょうか？では、くじ引きの番号がいくつあるか、数えてみましょう。何の関数を使えばいいか、予想できますか？すでに知っていますよね！ + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +そうです！`len()` がリストにあるオブジェクトの数を取得できます。便利ですね。では、くじ引きの番号をソートしてみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +これは何も返してきません。これはリストに表示される番号を、順番に並べ替えただけです。再度出力して、確かめてみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +ご覧のとおり、小さい順に並び替えられましたね。おめでとう！ + +逆順に並び替えてみたくなりましたか？やってみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +リストに何かを追加したいときは、次のようにコマンドを記述してください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +最初の数字だけを出力したいときは、**インデックス(index)** を使って指定することができます。 インデックスは、アイテムがリストのどこにあるかを指す番号です。 リストの先頭の要素から順に「０」、次に「１」と割り当てられています。 次のとおり試してみてください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +このように、リスト名と要素のインデックスを [] に記述することで、指定した要素を取り出すことができます。 + +リストから要素を消すには、これまで学んできたインデックスと `pop()` メソッドを使います。 例で試してみましょう。リストの最初の要素を削除しています。 + +{% 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] +``` + +お見事！ + +他のインデックスも試して遊んでみてください。例えば、 6, 7, 1000, -1, -6, -1000 などをインデックスに指定するとどうなるでしょうか。コマンドを実行する前に予測してみましょう。結果はどうですか？ + +ご参考に、こちらのドキュメントにリストメソッドがすべて記されています。 https://docs.python.org/3/tutorial/datastructures.html + +## 辞書（ディクショナリ） + +> 家で１人でこのパートに挑戦している方へ：このパートは、動画（英語）もあるので参考にしてください。 [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c) + +辞書(ディクショナリ)について確認しましょう。リストに似ていますが、インデックスのかわりにキーと呼ばれる識別子で値を参照します。キーは文字列も数値も使えます。ディクショナリは次のように `{}` 括弧で囲んで作成します。 + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +これで中身が空っぽのディクショナリができましたね。やったね！ + +では、つぎのコマンドを記述してみましょう。 (あなた自身の情報に値をおきかえてみてもいいですよ） + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +このコマンドで、`participant` という名前の変数をつくって、３つのキーと値をもつ要素を作成しました。 + +- キー `name` が指す値は `'Ola'` (`string` オブジェクト) +- キー `country` が指す値は `'Poland'` (`string` オブジェクト) +- キー `favorite_numbers` が指す値はリスト `[7, 42, 92]` (数字を3つ持つ`list`) + +次のように書くと各キーの値を確認できます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +リストに似ていますね。しかし、ディクショナリでは、インデックスを覚えておく必要がなく、キーの名前でいいのです。 + +もし存在しないキーを参照しようとすると、どうなるでしょうか？予想できますか？実際にやってみましょう！ + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +またエラーです。今回は **KeyError** というエラーが出ました。Pythonは、このディクショナリにキー `'age'` は存在しませんよ、と教えてくれています。 + +ディクショナリとリストはどう使い分ければよいのでしょうか？そうですね、これはゆっくり考えてみるべきポイントですね！この後の行を読むまえに、答えを考えてみてください。 + +- 必要なのは、順序付けられた一連のアイテムですか？　リストを使いましょう。 +- キーに対応する値が必要？キーから値を参照する？　ディクショナリを使いましょう。 + +ディクショナリやリストは、作ったあとに変更できるオブジェクトです。これを *mutable* と呼びます。次のように、ディクショナリを作ったあとで、新しいキーと値を追加することができます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +リストと同様に、`len()` 関数をディクショナリに使ってみましょう。ディクショナリでは、キーと値のペアの数を返します。コマンドを入力してやってみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +お分かり頂けたでしょうか。 :) では、ディクショナリを使ってもう少し練習してみましょう。準備ができたら、次の行にいってみましょう。 + +ディクショナリの要素を削除する時は、`pop()` メソッドを使います。 例えば、 キー `'favorite_numbers'` の要素を削除するには、次のように記述してください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +このように、`'favorite_numbers'` のキーと値が削除されます。 + +同様に、次のように記述することで、すでにあるキーの値を変更することができます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +これで、キー `'country'` の値は、`'Poland'` から `'Germany'` に変わりました。面白くなってきましたか？その調子です！ + +### まとめ + +素晴らしいです！これで、あなたはプログラミングについて沢山のことを学びました。ここまでのところをまとめましょう。 + +- **エラー** – あなたのコマンドをPythonが理解できない時にエラーが表示されます。 +- **変数** – コードを簡単にまた読みやすくするために、文字や数値などのオブジェクトにつける名札。 +- **リスト** – 複数の値（要素）が順に並んでいるもの。 +- **ディクショナリ** – キーと値のペアの集合です。 + +次に進む準備はいいですか？ :) + +## 比較 + +> 家で１人でこのパートに挑戦している方へ：このパートは、動画（英語）もあるので参考にしてください。[Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4) + +比較することは、プログラミングの醍醐味の１つです。簡単に比較できるものといえば、何でしょうか？そうです、数字ですね。さっそくやってみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Pythonにいくつか比較する数字をあたえてみました。数字を比較するだけでなく、演算式の答えも比較することができます。便利でしょ？ + +２つの数字がイコールであるかどうかを比べる時に、イコールの記号が２つ `==` 並んでいます。 Pythonを記述する時、イコール１つ `=`は、変数に値を代入するときに使います。 ですので、値同士が等しいかどうか比較するときは、必ず **必ず** イコール記号２つ `==` を記述してください。 等しくないことを比較するときは、 上記の例のように `!=` と記述します。 + +次の２つはどうでしょうか。 + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>` と `<` は簡単でしたね。`>=` と `<=` はどうでしょうか？それぞれの意味は、次のとおりです。 + +- x `>` y : x は y より大きい +- x `<` y : x は y より小さい +- x `<=` y : x は y 以下 +- x `>=` y : x は y 以上 + +すばらしい! もう少しやってみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +複数の数値を比較して複雑になっても、その答えを出してくれます。とても賢いですね。 + +- **and** – `and` の左辺と右辺が共にTrueの場合のみ、True。 +- **or** – `or` の左辺あるいは右辺の少なくとも１つがTrueの時、True。 + +"comparing apples to oranges"という英語の表現を聞いたことはありますか？文字通り訳すと「リンゴとオレンジを比較する」となり、「比較にならないものを比較する」という意味です。Pythonでも同じようなことをやってみましょう。 + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Pythonは、数値(`int`)と文字列(`str`)の比較はできません。 **TypeError** とエラーが表示され、２つのオブジェクトタイプが比較できないことを教えてくれています。 + +## ブール型（Boolean） + +偶然にも、**ブール型 (Boolean)** というあたらしいオブジェクトタイプを学びました。 + +ブール型は、たった２つの値を持ちます。 + +- True +- False + +Pythonを記述するときは、Trueの最初は大文字のT、残りは小文字です。 **true, TRUE, tRUE は間違いです。– True と記述してください** （False についても同様です。） + +ブール型は、次のように変数に代入することもできます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +このようなこともできます。 + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +ブール型を使って、練習して遊んでみましょう。次のコマンドを試してみてください。 + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +おめでとうございます！ブール型を理解することは、プログラミングでとても大事です。ここまでできましたね！ + +# 保存しよう！ + +> 家で１人でこのパートに挑戦している方へ：このパートと続くパートは、動画（英語）もあるので参考にしてください。[Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk) + +ここまでインタプリタでPythonのコードをかいてきました。つまり、コードを１行ずつしか書くことができませんでした。 普通のプログラムはファイルに保存され、**インタプリタ** あるいは **コンパイラ** でプログラミング言語を処理して実行します。 ここまで、私たちはプログラムを１行ごとにPython **インタプリタ** で実行してきました。 ここからは、１行以上のコードを実行していきましょう。次のような流れになります。 + +- Pythonインタプリタを終了します。 +- お好きなエディタを起動します。 +- Pythonファイルとしてコードを保存します。 +- 実行します！ + +これまで使っていたPythonインタプリタを終了しましょう。`exit()` 関数を入力してください。 + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +これで、コマンドプロンプトに戻りました。 + +前に、[コードエディタ](../code_editor/README.md)セクションからエディタを選択しました。 ここでエディタを開いて、新しいファイルにコードを書き込んでみましょう（Chromebookを使用している場合は、Cloud IDEで新しいファイルを作成し、そのファイルを開きます。ファイルをcloud IDEに含まれたコードエディタで開いています）。 + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +あなたは、すでにベテランのPython開発者です。今日学んだコードを自由に書いてみてください。 + +コードを書いたら、わかりやすい名前をつけて保存しましょう。 **python_intro.py** と名前をつけて、デスクトップに保存してください。 ファイル名は何でもかまいません。ここで重要なことは、拡張子を **.py** とすることです。 コンピュータにこのファイルは **Pythonで実行するファイルです** とおしえます。 + +> **メモ** コードエディタでは色に注目しましょう！これはとてもクールです。 Pythonコンソールでは、すべての文字は同じ色です。エディタでは、`print` 関数は文字列とは違う色がつきます。 これは「シンタックスハイライト」と呼ばれています。エディタは構文（シンタックス）を強調（ハイライト）します。コードを書くとき、これはとても役に立ちます。 色のおかげで、文字列の最後のクォーテーションの書き忘れや、キーワードの名前（この後学ぶ関数の `def` など）のタイポに気づくことができます。 これが私たちがコードエディタを使う理由の１つです. :) + +ファイルを保存したら、実行してみましょう！コマンドラインのセクションで学んだことを思い出して、ターミナルの **ディレクトリを変更** して、デスクトップにしましょう。 + + + +Macでは、コマンドは次のようになります。 + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Linuxでは、次のようになります。 + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +（「Desktop」という単語はあなたの地域の言語に翻訳される場合があります。） + + + + + +Windowsのコマンドプロンプトでは、次のようになります。 + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +WindowsのPowerShellでは、次のようになります。 + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +うまくできない時は、質問してください。まさにそのためにコーチがここにいるんです！ + +ではPythonを使用して、ファイル内のコードを次のように実行します。 + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +注：Windowsでは「python3」はコマンドとして認識されません。代わりに「python」を使ってファイルを実行します。 + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +できました！ファイルに保存された初めてのPythonプログラムを実行できたのです。すばらしいですね。 + +では、ここからプログラミングに不可欠なツールを学んでいきましょう。 + +## If … elif … else + +ある条件が成立するときにだけコードを実行したいということがよくあります。そのためにPythonでは **if文** を用います。 + +**python_intro.py** ファイルのコードを次のように書き換えてください。 + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +もしこれを保存して実行すると、次のようなエラーが出ます。 + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +`3 > 2` という条件が成立する（ `True` となりますね）時に実行される処理を、まだ記述していませんね。 では、Python に “It works!” と出力してもらいましょう。 **python_intro.py** ファイルの中身を、次のとおりに書き換えてください。 + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('It works!') +``` + +2行目をスペース4つでインデント（字下げ）していることに気が付きましたか？ 条件が成り立つ時にどのコードを実行するかPythonが分かるように、インデントする必要があります。 スペース1つでもできますが、Pythonプログラマーはほぼ全員スペース4つとしています。 エディタの設定により、タブ1つもスペース4つと同じになります。 タブかスペースか決めたら、変えないようにしましょう。 例えばスペース4つでインデントしたら、この後もスペース4つでインデントするようにしましょう。インデントにスペースとタブを混ぜてしまうと問題が発生してしまうことがあります。 + +保存して、もう一度実行してみましょう。 + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +It works! +``` + +注：Windowsでは「python3」はコマンドとして認識されないことを思い出してください。これから先、ファイルを実行するときは「python3」の代わりに「python」とタイプしてくださいね。 + +### 条件がTrueじゃないときは？ + +前述の例では、if文の条件が True の時だけコードが実行されました。Pythonは、`elif` や `else` といった記述もできます。 + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +これを実行した場合、次のように出力されます。 + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +もし2が5より大きかったら、4行目のコマンドが実行されます。では、`elif` はどうなるのでしょうか？ + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +実行すると... + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hey Sonja! + + +どうなったかわかりましたか？ `elif` を使って、前に書いた条件が成立しない場合に実行される条件を追加することができます。 + +最初の `if` の後に、好きなだけ `elif` を追加することができます。例えば... + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Pythonは上から順番に各条件をテストして実行し、次のように出力します。 + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfect, I can hear all the details + + +## コメント + +コメントは `#` で始まる行です。`#` の後にはなんでも書くことができ、Pythonはそれを無視します。コメントを書いたコードは、ほかの人にとってもわかりやすくなります。 + +実際にはこのようになります。 + +{% filename %}python_intro.py{% endfilename %} + +```python +# ボリュームが大きすぎたり小さすぎたりしたら変更する +if volume < 20 or volume > 80: + volume = 50 + print("That's better!") +``` + +コードのすべての行にコメントを書く必要はありません。コメントには、コードの中である処理をする理由や、複雑なコードの動きのまとめを書くと役に立ちます。 + +### まとめ + +これらの練習を通して、学んだことは... + +- **比較** – 比較に用いる `>`, `>=`, `==`, `<=`, `<` そして`and`, `or` といった演算子があります。 +- **ブール型** – `True` と `False` 2つの値のみを持ちます。 +- **ファイルの保存** – コードはファイルに保存することで、大きなプログラムも実行できます。 +- **if … elif … else** – 条件分岐することで、特定の条件によって処理を分けて実行することができます。 +- **コメント** – あなたがコードについて記述できる行。Pythonは実行しません。 + +では、いよいよこのチャプターの最後のパートです！ + +## 自作の関数！ + +> 家で１人でこのパートに挑戦している方へ：このパートは、動画（英語）もあるので参考にしてください。[Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0) + +Pythonでは `len()` のように関数が実行できるのを覚えていますか？ ここでは、自分で関数を作る方法を学びます。 + +関数は、Pythonが実行する一連の命令をひとまとめにしたものです。 Pythonでは、関数は `def` というキーワードからはじまり、名前をつけ、引数を含むことができます。 やってみましょう。 **python_intro.py** の中身を下記のコードに置き換えてください。 + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +よし！あなたの最初の関数を実行する準備ができましたね！ + +ここであなたは、最後の行になぜ関数の名前を書いたのだろう、と疑問に感じたかもしれません。 これは、Pythonがファイルを読み、上から下へ実行していくからです。 なので、関数を使用するには、一番下に再度書く必要があります。 + +では実行して、どうなるか見てみましょう。 + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi there! + How are you? + + +注：思ったように動かなくても慌てないで！画面の出力は動かない理由をつかむのに役立ちます。 + +- `NameError` が出ている場合、おそらく何かミスタイプがあります。同じ名前を使っているかチェックしましょう。関数を定義するときは `def hi():` としていますか？関数を実行するときは `hi()` としていますか？ +- `IndentationError` が出ている場合、`print` 関数の2行が同じ数のスペースでインデントされているかチェックしましょう。関数の中のコードは同じ数のスベースでインデントされているとPythonは考えます。 +- 画面に何も表示されていない場合、最後の `hi()` がインデントされて *いない* かチェックしましょう - もしインデントされていたら、関数の一部になってしまっています。関数が呼び出されていません。 + +次に引数をつかった関数を作ってみましょう。先ほどの例を変更し、人の名前を呼んで 'hi' と挨拶をする関数にしてみます。 + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +ご覧のように、関数に `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!') + +hi() +``` + +要確認：`print` 関数は、` if `文の中で4つのスペースでインデントします。 これは、条件が満たされたときに関数が実行されるためです。 では、どのように動くか見てみましょう。 + +{% 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' + + +おっと、エラーがでてしまいました。 ラッキーなことに、Pythonがかなり役に立つエラーメッセージを表示してくれています。 定義した関数 `hi()` は、`name` という引数が必要ですが、関数を呼び出す時に引数を忘れてしまっているということがわかります。 最後の行を修正しましょう。 + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +実行してください。 + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Ola! + + +では、名前を変えてみたらどうなりますか？ + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +実行してください。 + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Sonja! + + +では、OlaやSonja以外の名前に変えた時、どうなるかわかりますか？やってみて、予測が正しいか確認して下さい。このように出力されます。 + +{% filename %}command-line{% endfilename %} + + Hi anonymous! + + +すごいでしょ？ 挨拶をする人の名前を変えるたびに繰り返しコードを書く必要がなくなりました。 これが関数を作る理由です。何度も繰り返してコードを書きたくないですよね！ + +もっとスマートにしてみましょう。名前が2つよりも多いと、それぞれの名前に対して条件を書くのは大変じゃないですか？ファイルの内容を下記のように書き換えてください。 + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +では、実行してみましょう: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + + +おめでとうございます！関数の書き方を学びましたね！:) + +## ループ + +> 家で１人でこのパートに挑戦している方へ：このパートは、動画（英語）もあるので参考にしてください。[Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) + +さぁ、もう最後のパートですよ。あっという間ですね。 :) + +先ほどお話ししたとおり、プログラマーはめんどくさがりで、同じことを繰り返すのは好きではありません。プログラミングの目的は、物事を自動化することです。名前を呼んで挨拶をする関数をすべての人に対して手で呼び出したくないですよね？こういう時にループが便利です。 + +リストを覚えていますか？女の子の名前をリストにしてみましょう: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +名前を呼んで、全員にあいさつをしてみましょう。` hi `関数が使えますね。ループの中で使いましょう: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +この `for` 文は `if` 文に似ています。これらの下に書くコードは、4つのスペースでインデントする必要があります。 + +ファイルに書かれるコードはこのようになります: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +実行してみましょう: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +ご覧のとおり、`girls` リストのすべての要素に対して、`for` 文の中にインデントして書いたことが繰り返されています。 + +`range` 関数を使うことで、`for` 文を数値について使うこともできます。 + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +これを実行すると、次のように出力されます: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` 関数は、連続する数値を要素とするリストを作ります。引数に指定した開始の数値から終了の数値までのリストです。 + +2つ目の引数（終了の数値）は、リストに含まれないことに注意してください（`range(1, 6)`は1から5がカウントされますが、6は含まれません）。 開始に指定した数値は含まれて、終了に指定した値は含まれないのです。 + +## まとめ + +以上です！**おめでとう！頑張りました！** これは簡単ではなかったと思います。自分を褒めてあげてくださいね。ここまで進めることができたのは、本当にすごいことです！ + +公式の完全なPythonチュートリアルは https://docs.python.org/ja/3/tutorial/ にあります。これを見れば、Pythonについてより綿密で完全な学習ができるでしょう。ばんざい！:) + +次のチャプターに進む前に、ストレッチしたり、お散歩したり、目を休ませたりして、少しの間リフレッシュしてくださいね。 :) + +![カップケーキ](images/cupcake.png) \ No newline at end of file diff --git a/ja/python_introduction/images/cupcake.png b/ja/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/ja/python_introduction/images/cupcake.png differ diff --git a/ja/template_extending/README.md b/ja/template_extending/README.md new file mode 100644 index 00000000000..ab993f155cc --- /dev/null +++ b/ja/template_extending/README.md @@ -0,0 +1,147 @@ +# テンプレートを拡張しよう + +Djangoのまた別の素敵なところは**テンプレート拡張**です。これは何を意味するのでしょうか？それはHTMLの共通部分をウェブサイトの異なるページで使えるということです。 + +テンプレートは同じ情報やレイアウトを複数の場所で利用したいときに役立ちます。 各ファイル内で繰り返す必要はありません。 さらにもし何か変更したい場合、各テンプレートを変更する必要はなく、1回変更すればいいだけです！ + +## 基本テンプレートを作成する + +基本テンプレートはあなたのウェブサイトの各ページを拡張するための最も基本的なテンプレートです。 + +`blog/templates/blog/`以下に`base.html`ファイルを作ってみましょう。 + + blog + └───templates + └───blog + base.html + post_list.html + + +それからエディタで開いて、以下のように`post_list.html`から`base.html`ファイルにすべてコピーしましょう。 + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +それから`base.html`内の``全体(``と``の間のすべて)を次で置き換えます。 + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}`{% for post in posts %}` から `{% endfor %}` が以下のように置き換えられたことに気づいたでしょうか。 {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +でも何のために？ あなたはただ`block`を作っただけです！ `{% block %}` テンプレートタグを、これからHTMLを挿入しようとする場所に使いました。 そのHTMLはこのテンプレート (`base.html`) を拡張した別のテンプレートからやってきます。 どうやって行うかはすぐに示します。 + +`base.html`を保存し、もう一度`blog/templates/blog/post_list.html`をエディタで開きます。 {% raw %} `{% for post in posts %}` の上と `{% endfor %}` の下すべてを削除しましょう。 それが終わったら以下のようになっていると思います。{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +これをcontentブロックに対応するテンプレートのパーツとして使いたいです。このファイルにblockタグを追加する時です！ + +{% raw %}追加するblockタグは `base.html` ファイル中のタグにマッチしてほしいですよね。 また、blockタグにはcontentブロックに属するすべてのコードを含めたいですよね。 そうするには、すべてを `{% block content %}` と `{% endblock %}` の間に入れてあげればよいです。 このように:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +あとやることは一つだけです。これら二つのテンプレートをくっつけてあげる必要があります。これがテンプレートを拡張するということのすべてです！そうするにはこのファイルの先頭にextendsタグを追加します。次のように： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +以上です！ファイルを保存して、ウェブサイトがまだちゃんと動いているか確認しましょう。:) + +> もし `TemplateDoesNotExist` というエラーが出ていたら、 `blog/base.html` ファイルがないという意味で、コンソールで `runserver` が実行されたままになっていると思います。 これを止め(Ctrl+C - ControlとCのキーを同時押し)、それから `python manage.py runserver`コマンドを入力して再度サーバーを動かしてみてください。 \ No newline at end of file diff --git a/ja/whats_next/README.md b/ja/whats_next/README.md new file mode 100644 index 00000000000..3f0244cf496 --- /dev/null +++ b/ja/whats_next/README.md @@ -0,0 +1,42 @@ +# 次のステップは？ + +おめでとうございます。**素晴らしいです。**よくやりました！ <3 + +### 今何をする？ + +休憩してリラックスしてください！本当に大きなことを成し遂げました。 + +休んだ後は、[Facebook](http://facebook.com/djangogirls)や[Twitter](https://twitter.com/djangogirls)でDjango Girlsをぜひフォローしてくださいね。最新の情報を入手できます。 + +### さらにオススメの資料はありますか？ + +あります！ 様々なプログラミングスキルを学ぶためのオンラインリソースが、*たくさん*あります。沢山ありすぎて何を次にやろうか迷うかもしれませんので、お勧めを示しておきます。 Django Girlsのチュートリアルを始める時にどんな興味を持っていたとしても、あるいは、チュートリアルを終えた今どんな興味があるとしても、あなたが行きたいところへ行くために使える無料の（あるいは、無料で多くのことを学べる）リソースを示します。 + +#### Django + +- このチュートリアルの続きである[Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Django 公式チュートリアル](https://docs.djangoproject.com/ja/5.1/intro/tutorial01/) +- [Getting Started With Django 動画レッスン](http://www.gettingstartedwithdjango.com/) + +#### HTML, CSS ならびに JavaScript + +- [Codecademyのweb開発コース](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [CodecademyのPythonコース](https://www.codecademy.com/learn/learn-python) +- [GoogleのPythonコース](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) – 最初のエクササイズは無料です。 +- [New Coder tutorials](http://newcoder.io/tutorials/) – Pythonの使い方について様々な実用的な例があります。 +- [edX](https://www.edx.org/course?search_query=python) – ほとんどのコースを無料で視聴できますが、高等教育資格に向けた修了証書や単位が欲しい場合、お金がかかります。 +- [CourseraのPython専門講座](https://www.coursera.org/specializations/python) – オンライン動画の講義の一部を無料で見ることができ、コースを受講し終わるとCoursera修了証を取得することができます。 +- [Python for Everybody](https://www.py4e.com/) – CourseraのPython専門講座の無料かつ開放されたバージョンです。 + +#### データ操作 + +- [Codecademyのデータサイエンスコース](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – ほとんどのコースを無料で視聴できますが、高等教育資格に向けた修了証書や単位が欲しい場合、お金がかかります。 +- [Dataquest](https://www.dataquest.io/) – はじめの30 "ミッション" が無料です。 + +あなたが次になにを作るか、楽しみにしています！ diff --git a/ko/GLOSSARY.md b/ko/GLOSSARY.md new file mode 100755 index 00000000000..e549ec65d06 --- /dev/null +++ b/ko/GLOSSARY.md @@ -0,0 +1,3 @@ +# 코드 에디터 + +코드 에디터는 코드를 저장하고 불러올 수 있는 프로그램입니다. 자세한 내용은 [코드 에디터](./code_editor/README.md) 장에서 다룹니다. diff --git a/ko/README.md b/ko/README.md new file mode 100755 index 00000000000..ad189a8814e --- /dev/null +++ b/ko/README.md @@ -0,0 +1,68 @@ +# 장고걸스 튜토리얼 (Django Girls Tutorial) + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> 이 튜토리얼은 Creative Commons Attribution-ShareAlike 4.0 International 저작권을 준수합니다. +> 라이센스 전문은 https://creativecommons.org/licenses/by-sa/4.0 에서 확인하세요. + +## 번역 + +이 튜토리얼은 열정적인 장고걸스 코치들과 자원봉사자들의 수고로 번역되었습니다. + +> 번역 업데이트 및 번역자 +> +> - 1차 : 2015. 10. 1. + [이수진](https://github.com/sujinleeme), 함기훈, [박제권](http://jinto.pe.kr/), 조혜선, [정광윤](https://twitter.com/initialkommit), 임정훈, 문지영, 김휘경, 송석리, 여형석, 심혜민 + +> - 2차 : 2016. 6. 3. + [이수진](https://github.com/sujinleeme) + +> - 3차 : 2017. 5. 19. + [이수진](https://github.com/sujinleeme) + +> - 4차 : 2018. 1. 23. + [데이비드 정](https://github.com/jeo19) + +> - 5차 : 2019. 2. 5. + [이재열](https://github.com/malkoG), [정수민](https://github.com/soomin-jeong) + +## 환영합니다 + +장고걸스 튜토리얼에 오신 여러분들을 환영합니다! 이 곳에서 만나게 되어 기뻐요 :) 여러분을 웹 테크놀로지의 여정으로 초대하여 함께 조금씩 맛보면서 웹이 어떻게 작동하는지 알 수 있도록 도와드릴 거예요. + +아직 발견하지 못한 것을 알아가야 하는 꽤 도전적인 모험이 될 것이지만, 지금 이 튜토리얼을 보는 여러분들은 용기를 가지고 있기 때문에, 끝까지 잘 해낼 거라 믿어요. :) + +## 들어가며 + +점점 기술이 중요해지는 세상에 살고 있지만, 나와는 (아직) 관련이 없다고 생각한 적이 있나요? 그동안 웹 사이트를 어떻게 만드는지 궁금했지만, 막상 시작하기 어려웠나요? 소프트웨어 세상이 복잡해보여 혼자서 직접 만들기엔 엄두가 나지 않았나요? + +그런 여러분들에게 반가운 소식이 있습니다! 프로그래밍은 생각만큼 어려운 것이 아니랍니다. 우리는 여러분들에게 프로그래밍이 얼마나 재미있는 것인지 알려드리고 싶어요. + +이 튜토리얼을 읽는다고 여러분이 마법처럼 프로그래머가 되는 것은 아니에요. 프로그래밍에 능숙해지려면 몇 달, 혹은 몇 년은 공부하고 수련해야 합니다. 그러나 프로그래밍이나 웹 사이트 제작은 생각만큼 복잡하지 않다는 것을 보여드리고 싶어요. 이 튜토리얼을 읽는 여러분들이 겁먹지 않도록, 차근차근 친절하게 설명해 드릴 거예요. + +우리가 그랬듯이 여러분들도 프로그래밍을 사랑할 수 있게 되길 바랍니다! + +## 튜토리얼에서 무엇을 배우게 되나요? + +이 튜토리얼을 끝내면 간단한 기능을 갖춘 나만의 블로그 사이트를 완성할 수 있어요. 온라인에 웹사이트를 올리는 방법도 배울 거예요. 다른 사람들도 여러분의 작품을 보게 될 거랍니다! + +우리는 앞으로 아래와 같은 웹 사이트를 만들어 볼 거예요. + +![Figure 0.1](images/application.png) + +> 만약 집에서 혼자 튜토리얼을 따라하고 있거나, 문제가 생겼을 때 도움받을 선생님이 없다면 이 곳에서 질문하세요 : [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). 우리의 코치들과 워크샵 참가자들이 여러분들을 도와줄 거예요! 어떤 질문이든 주저하지 말고 물어보세요! + +자, [이제 그럼 어서 시작해볼까요.](./how_the_internet_works/README.md) + +## 집에서 튜토리얼 따라하기 + +장고걸스 워크샵에서 모든 분들을 만나뵙고 싶지만, 워크샵에 참석하기 어려운 분들이 있다는 것을 알고 있어요. 그래서 워크샵에 참석하지 못하는 분들은 집에서 튜토리얼을 따라해보실 것을 권장합니다. 혼자서도 집에서 튜토리얼을 보며 학습하실 수 있도록 비디오 동영상을 만들고 있어요. [Coding is for girls 유투브 채널](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A)에서 보실 수 있고, 앞으로 더 많은 영상들을 보여드릴 예정입니다. + +## 튜토리얼 참여하기 + +이 튜토리얼은 [DjangoGirls](https://djangogirls.org/)에서 지속적으로 관리하고 있습니다. 오류를 발견하거나 튜토리얼 내용을 업데이트하고 싶다면 [참여 방법](https://github.com/DjangoGirls/tutorial/blob/master/README.md)을 참고하세요. + +## 튜토리얼 번역 참여하기 + +장고걸스 튜토리얼은 crowdin.com에서 전세계 언어로 번역되고 있습니다 [https://crowdin.com/project/django-girls-tutorial](https://crowdin.com/project/django-girls-tutorial) +여러분이 사용하는 언어가 없다면, [github 이슈](https://github.com/DjangoGirls/tutorial/issues/new)에 등록하셔서 저희에게 알려주세요. diff --git a/ko/SUMMARY.md b/ko/SUMMARY.md new file mode 100755 index 00000000000..09abc9c4e19 --- /dev/null +++ b/ko/SUMMARY.md @@ -0,0 +1,27 @@ +# 목차 + +* [들어가며](README.md) +* [설치하기](installation/README.md) +* [설치하기 (chromebook)](chromebook_setup/README.md) +* [인터넷은 어떻게 작동할까요](how_the_internet_works/README.md) +* [Command Line 시작하기](intro_to_command_line/README.md) +* [Python 설치하기](python_installation/README.md) +* [코드 에디터](code_editor/README.md) +* [Python 시작하기](python_introduction/README.md) +* [Django란 무엇인가요](django/README.md) +* [Django 설치하기](django_installation/README.md) +* [나의 첫 번째 Django 프로젝트!](django_start_project/README.md) +* [Django 모델](django_models/README.md) +* [Django 관리자](django_admin/README.md) +* [배포하기!](deploy/README.md) +* [Django urls](django_urls/README.md) +* [Django 뷰 만들기](django_views/README.md) +* [HTML 시작하기](html/README.md) +* [Django ORM(Querysets)](django_orm/README.md) +* [템플릿 동적 데이터](dynamic_data_in_templates/README.md) +* [Django 템플릿](django_templates/README.md) +* [CSS - 예쁘게 만들기](css/README.md) +* [템플릿 확장하기](template_extending/README.md) +* [애플리케이션 확장하기](extend_your_application/README.md) +* [Django 폼](django_forms/README.md) +* [더 나아가기](whats_next/README.md) diff --git a/ko/chromebook_setup/README.md b/ko/chromebook_setup/README.md new file mode 100755 index 00000000000..c13a8150fe1 --- /dev/null +++ b/ko/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# 크롬북에서 설치하기 + +> **Note** 설치 과정을 모두 마친 분들은 이 부분을 할 필요가 없습니다. [Python 시작하기](../python_introduction/README.md) 장으로 바로 넘어가세요. + +{% include "/chromebook_setup/instructions.md" %} diff --git a/ko/chromebook_setup/instructions.md b/ko/chromebook_setup/instructions.md new file mode 100755 index 00000000000..41784eca435 --- /dev/null +++ b/ko/chromebook_setup/instructions.md @@ -0,0 +1,59 @@ +크롬북 미사용자는 이번 장을 건너뛰고 [파이썬 설치하기](http://tutorial.djangogirls.org/ko/installation/#install-python) 장으로 넘어가세요. + +### Cloud 9 + +Cloud 9는 소프트웨어를 설치, 작성 및 실행할 수 있는 인터넷이 실행되는 컴퓨터에 대한 접근과 코드 에디터를 제공하는 도구입니다. 튜토리얼 실습하는 동안 Cloud 9은 _로컬 머신_ 이라 생각하면 됩니다. macOS, 우분투, 윈도우 사용자 처럼 터미널에서 명령어를 입력할 수 있지만, Cloud 9가 설정된 다른 곳에서 실행 중인 컴퓨터의 터미널에 연결됩니다. + +1. [크롬 웹 스토어](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp)에서 Cloud 9를 설치하세요. +2. [c9.io](https://c9.io)에 접속하세요. +3. 새 계정을 만드세요. +4. _Create a New Workspace_ 를 클릭하세요. +5. _django-girls_ 라고 쓰세요. +6. _Blank_(오렌지색 로고가있는 맨 아래 줄 오른쪽에서 두 번째)를 선택하세요. + +이제 메인 창 아래쪽에 다음과 같은 작은 창이 보일 거에요. : + +{% filename %}Cloud 9{% endfilename %} +``` +yourusername:~/workspace $ +``` + +이 하단 부분이 명령어를 입력할 Cloud9 _터미널_입니다. 창 크기를 조금 크게 조절할 수도 있어요. + +### 가상환경 + +가상환경(virtual environment, 줄여서 virtualenv)은 작업하고 있는 프로젝트의 코드를 넣을 수 있는 일종의 전용 상자와 같아요. 가상환경을 사용해 서로 다른 프로젝트마다 코드가 섞이지 않도록 유지할 수 있습니다. + +Cloud 9 터미널에서 아래 명령어를 따라 입력하세요. : + +{% filename %}Cloud 9{% endfilename %} +``` +sudo apt install python3.6-venv +``` + +작동하지 않다면, 코치에게 도움을 구하세요. + +그리고, 실행해보세요. : + +{% filename %}Cloud 9{% endfilename %} +``` +mkdir djangogirls +cd djangogirls +python3.6 -mvenv myvenv +source myvenv/bin/activate +pip install django~=1.11.0 +``` + +(마지막 줄에는 물결표 뒤에 등호(~=) 기호를 사용합니다) + +### GitHub + +[GitHub](https://github.com) 계정을 만드세요. + +### PythonAnywhere + +장고걸스 튜토리얼 중 배포하기 장에서 웹 애플리케이션을 구동하는 코드를 공개적으로 액세스 가능한 컴퓨터(서버라고 합니다)로 옮겨, 다른 사람들이 웹 사이트를 볼 수 있도록 실습할 거에요. + +크롬북은 이미 인터넷에 연결된 컴퓨터(노트북과는 반대)이기 때문에 배포하기 장을 따라하면서 조금 이상하다고 생각할 수 있는데요. cloud 9을 현재 "개발 진행 중"인 공간으로 생각하면서 실습한 후, 맨 마지막에 PythonAnywhere에서 결과물을 배포한다고 생각하면 도움이 될 거에요. + +[www.pythonanywhere.com](https://www.pythonanywhere.com) 에서 새 계정을 만드세요. diff --git a/ko/code_editor/README.md b/ko/code_editor/README.md new file mode 100755 index 00000000000..0c143a4da39 --- /dev/null +++ b/ko/code_editor/README.md @@ -0,0 +1,11 @@ +# 코드 에디터 + +> **Note** 집에서 학습하시는 분들은 [파이썬 및 코드 에디터 설치하기](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) 영상을 보세요. + +이제 곧 코드를 작성할 예정이니, 코드 에디터를 설치할 차례입니다! + +> **Note** 크롬북 사용자는 이번 장을 건너뛰고 [크롬북에서 설치하기](../chromebook_setup/README.md) 장으로 넘어가세요. + +> **Note** 설치하기 장에 있는 내용을 모두 마쳤다면 다음 장으로 넘어가도 됩니다! + +{% include "/code_editor/instructions.md" %} diff --git a/ko/code_editor/instructions.md b/ko/code_editor/instructions.md new file mode 100755 index 00000000000..2a8c05278fd --- /dev/null +++ b/ko/code_editor/instructions.md @@ -0,0 +1,32 @@ +코드 에디터는 종류가 많고 다양해 자신의 취향에 따라 선택할 수 있어요. 대부분의 파이썬 프로그래머는 PyCharm과 같이 복잡하지만 강력한 IDE(통합개발환경: Integrated Development Environments)를 이용합니다. 하지만 초보자에게 적합하지 않을 수 있어요. 간단하지만 강력한 기능을 갖춘 에디터 프로그램을 아래 추천합니다. + +이 중 내가 사용하고 싶은 것을 선택해 사용해도 되지만, 여러분의 코치가 어떤 프로그램을 사용하는지 물어보세요. 같은 프로그램을 사용하면 도움받기 수월해질 거에요. + +## Visual Studio Code +Visual Studio Code는 마이크로소프트가 윈도우, 리눅스, 맥OS를 위해 개발한 소스 코드 에디터입니다. 디버깅, 내장 Git 컨트롤,문법 하이라이팅, 지능형 코드 완성, 스니펫, 코드 리팩토링등 지원을 포함하고 있습니다. + +[이 곳에서 다운받을 수 있어요.](https://code.visualstudio.com/) + +## Gedit +Gedit는 모든 운영체제에서 사용 가능한 무료 오픈소스에요. + +[다운받기](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text +Sublime Text는 가장 널리 알려진 프로그램으로 무료로 사용할 수 있어요. 설치와 사용이 편리하고 모든 운영체제에서 쓸 수 있어요. + +[다운받기](https://www.sublimetext.com/) + +## Atom +Atom은 [GitHub](https://github.com/)에서 만든 에디터예요. 무료로 제공되는 오픈소스이며, 설치나 사용이 쉬워요. 윈도우, 맥OS, 리눅스에서 쓸 수 있어요. + +[다운받기](https://atom.io/) + +## 왜 코드 에디터를 설치해야 하나요? +워드나 노트패드가 있는데도, 굳이 코드 에디터 소프트웨어를 설치해야 하는 이유가 궁금할 거에요. + +첫 번째로 코드는 **일반 텍스트**여야 하는데, 워드나 텍스트에딧(Textedit)과 같은 프로그램에서는 일반 텍스트가 아닌 [RTF(Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format)와 같은 사용자 서식을 쓴 리치 텍스트(폰트와 서식이 있는 텍스트)가 생성되기 때문입니다. + +두 번째는 코드 에디터 프로그램은 개발에 유용한 여러 기능을 제공하기 때문입니다. 대표적인 예로, 코드를 해석해 문법을 하이라이팅해주는 기능이라든가 큰따옴표("")를 자동으로 닫아주는 기능이지요. + +앞으로 코드 에디터가 어떻게 작동하는지 알아볼 거에요. 곧 여러분은 내가 사용하는 코드 에디터를 제일 좋아하게 될 거랍니다. diff --git a/ko/css/README.md b/ko/css/README.md new file mode 100755 index 00000000000..8628970b19f --- /dev/null +++ b/ko/css/README.md @@ -0,0 +1,302 @@ +# CSS - 예쁘게 만들기 + +아직 우리가 만든 블로그가 예쁘지 않죠? 이제 눈에 보기 좋게 예쁘게 만들어 볼 시간이에요. CSS를 사용해 만들어볼 거에요. + + +## CSS는 무엇인가요? + +CSS(Cascading Style Sheets)는 HTML와 같이 마크업언어(Markup Language)로 작성된 웹사이트의 외관을 꾸미기 위해 사용되는 언어입니다. 웹사이트에 메이크업을 해볼까요. ;) + +아무것도 없는 상태에서 시작하기 어렵겠죠? 개발자들이 만든 오픈 소스 코드를 사용해 만들어 볼 거에요. 이미 있는 바퀴를 다시 발명하는 것은 재미가 없잖아요. + + +## 부트스트랩을 사용해봐요! + +부트스트랩(Bootstrap)은 유명한 HTML과 CSS프레임워크로 예쁜 웹사이트를 만들 수 있습니다. : https://getbootstrap.com/ + +트위터 개발자들이 부트스트랩을 만들었고, 전 세계 자원봉사자들이 지속적으로 참여해 발전시키고 있어요! + + +## 부트스트랩 설치하기 + +부트스트랩을 설치하려면, `.html`파일 내 ``에 이 링크를 넣어야 합니다. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +이 링크는 프로젝트에 새 파일을 추가하는 게 아니에요. 인터넷에 있는 파일을 연결하는 거죠. 이제 웹사이트를 열어 새로고침 버튼을 눌러보세요. 짠! + +![Figure 14.1](images/bootstrap1.png) + +어때요, 보기 좋아졌죠! + + +## 정적 파일 + +마지막으로 __정적 파일(static files)__ 을 다뤄볼 거에요. 정적 파일은 CSS와 이미지 파일에 해당합니다. 이 컨텐츠는 요청 내용에 따라 바뀌는 것이 아니기 때문에 모든 사용자들이 동일한 내용을 볼 수 있어요. + + +### 정적 파일은 어디에 넣어야 하나요 + +서버에서 `collectstatic`를 실행할 때 처럼, 장고는 "admin"앱에서 정적 파일을 어디서 찾아야하는지 이미 알고 있어요. 이제 "blog"앱에 정적파일을 추가하면 됩니다. + +"blog"앱 안에 `static`라는 새 폴더를 만드세요. : + +``` + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite +``` + +장고는 app 폴더 안에 있는 `static`폴더를 자동으로 찾을 수 있어요. 이 컨텐츠를 정적 파일로 사용하게 되는 것입니다. + + +## 나의 첫 번째 CSS 파일! + +CSS파일을 만들어 나만의 스타일을 가진 웹페이지를 만들어봐요. `static`디렉토리 안에 `css`라고 새로운 디렉토리를 만드세요. 그리고 `css`디렉토리 안에 `blog.css`라는 파일을 만드세요. 준비되셨나요? + +``` + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css +``` + +CSS를 쓸 차례예요! 코드 에디터에서 `blog/static/css/blog.css`파일을 열어보세요. + +CSS는 꽤 쉽고 워크샵 후에도 스스로 배울 수 있기 때문에 CSS에 대해 깊이 살펴보지는 않을 거에요. 이 장 맨 마지막 부분에 추천하는 무료 사이트가 있습니다. + +하지만 조금이라도 해보자구요. 제목 색상을 바꿔볼까요? 컴퓨터는 특별한 코드를 사용해 색상을 나타내요. `#`으로 시작해 알파벳(A-F)와 숫자(0-9) 중 6개를 조합해 헥사코드(hexacode)로 나타냅니다. 이 곳에서 원하는 색상 코드를 찾을 수 있어요. [https://www.colorpicker.com/](https://www.colorpicker.com/) 또는 `빨간색(red)` 또는 `녹색(green)` 등 [미리 명시된 색상](http://www.w3schools.com/colors/colors_names.asp)을 사용할 수 있어요. + +`blog/static/css/blog.css` 파일에 아래 코드를 추가하세요. : + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +h1 a { + color: #FCA205; +} +``` + +`h1 a`는 CSS 셀렉터(Selector)라고 합니다. `h1`요소 안에 어떠한 `a`요소를 넣어 스타일을 적용 할 수 있다는 거죠. 예를 들어 `

link

` 라면, 오렌지색 `#FCA205`으로 바꿀 수 있어요. 물론, 내가 원하는 다른 색상을 지정할 수 있어요! + +CSS 파일에서는 HTML 파일에 있는 각 요소들에 스타일을 정의할 수 있어요. 요소를 식별하는 첫 번째 방법은 요소 이름을 사용하는 것입니다. HTML 섹션에서 태그로 기억할 수 있습니다. `a`,`h1`,`body`와 같은 것은 모두 요소 이름의 예입니다. 또 `class` 속성이나 `id` 속성에 의해 요소를 식별합니다. 클래스와 ID는 요소에 직접 부여한 이름이에요. 클래스는 요소 그룹을 정의하고 ID는 특정 요소를 가리킵니다. 아래 코드와 같이 태그 이름은 `a`, 클래스는 `external_link` 또는 ID는 `link_to_wiki_page`로 사용하여 태그를 통해 요소를 식별할 수 있습니다. + +```html + +``` + +W3Schools에서 [CSS 선택자](https://www.w3schools.com/cssref/css_selectors.asp)에 대해 읽어보시길 바랍니다. + +이제 CSS를 HTML에 추가해봅시다. `blog/templates/blog/post_list.html` 파일을 열고 맨 처음 줄에 이 라인을 추가하세요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% load static %} +``` + +여기에서 정적 파일을 로딩하는 거에요. :) +다음 ``와 `` 사이에 부트스트랩 CSS파일 링크 다음에 아래 코드를 추가하세요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` + +브라우저는 주어진 순서대로 파일을 읽으므로 파일이 올바른 위치에 있는지 확인해야합니다. 그렇지 않으면 파일 코드가 부트 스트랩 파일의 코드를 무시할 수 있습니다. +이제까지 CSS파일이 있는 템플릿에 대해 알아보았어요. + +코드는 아래와 같아야 해요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +자, 이제 파일을 저장하고 새로고침을 해보세요! + +![Figure 14.2](images/color2.png) + +잘했어요! 웹사이트 왼쪽 여백을 좀더 주고 싶지 않나요? 한번 해봐요! + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +body { + padding-left: 15px; +} +``` + +이 코드를 CSS에 붙여넣고, 파일을 저장하고 어떻게 바뀌었는지 확인해봐요! + +![Figure 14.3](images/margin2.png) + +제목 폰트를 바꾸고 싶나요? `blog/templates/blog/post_list.html` 파일 내 ``부분에 아래 코드를 붙여넣기 해보세요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` + +`blog/static/css/blog.css` 파일 내 넣은 코드의 순서와 위치를 다시 확인해보세요. 이 라인은 Google 글꼴 (https://www.google.com/fonts)에서 * Lobster* 라는 글꼴을 가져온 것을 말해요. + +그리고 CSS파일  `blog/static/css/blog.css` 에서`h1 a` 선언 블록 (중괄호`{`와`}`) 사이의 코드를 찾으세요. `font-family : 'Lobster';` 를 중괄호 사이에 추가하고 페이지를 새로고침 합니다. + + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +h1 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![Figure 14.3](images/font.png) + +잘했어요! + +앞서 말했듯이, CSS는 클래스 개념을 가지고 있어요. 클래스는 HTML의 코드 일부에 이름을 붙이고 그 부분만 특정 스타일을 적용할 수 있게 해줍니다. 각기 다른 div를 (예를 들어 하나는 제목에 있고 하나는 글 본문에 있는 경우) 구분할 때 정말 유용해요. HTML 코드의 일부 이름을 지정하십시오. + +제목이 포함된 `div`에 `page-header`라는 클래스명을 붙여보세요. : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+

Django Girls Blog

+
``` + +그리고 블로그 게시글을 나타내는 `div`에 `post`라고 클래스명을 붙여보세요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +이제 여러 선택자들을 추가해봅시다. 클래스 선택자는 `.`으로 시작합니다. 인터넷에 많은 CSS 튜토리얼과 설명 가이드가 있으니 찾아보면 도움이 될 거에요. 이제 `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; +} + +.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; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +자, 다음은 글을 보여주는 HTML 코드를 post라는 클래스 명을 선언해 div로 감싸세요. 이렇게 바꾸면 됩니다. : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` +`blog/templates/blog/post_list.html` 파일 안에 아래 코드를 넣으세요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +파일을 저장하고 웹 사이트를 새로고침하세요. + +![Figure 14.4](images/final.png) + +방금 붙여 넣은 코드를보고 HTML에 클래스를 추가하고 CSS에서 사용했던 곳을 찾아보세요. 날짜를 초록색으로 바꾸려면 어느 부분을 수정하면 될까요? + +CSS를 바꿔보는 것을 두려워하지 마세요. CSS를 가지고 놀다보면 어떻게 작동되는지 좀더 이해할 수 있을 거에요. 망가뜨렸더라도 괜찮아요. 언제든지 되돌릴 수 있으니까요! + +무료 온라인 [Codecademy HTML & CSS 코스](https://www.codecademy.com/tracks/web)를 수강해보는 것을 추천합니다. CSS로 웹 사이트를 더 아름답게 만드는 방법을 배울 수 있어요. + +다음 장을 읽을 준비가 되셨나요?! :) diff --git a/ko/css/images/bootstrap1.png b/ko/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/ko/css/images/bootstrap1.png differ diff --git a/ko/css/images/color2.png b/ko/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/ko/css/images/color2.png differ diff --git a/ko/css/images/final.png b/ko/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/ko/css/images/final.png differ diff --git a/ko/css/images/font.png b/ko/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/ko/css/images/font.png differ diff --git a/ko/css/images/images/bootstrap1.png b/ko/css/images/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/ko/css/images/images/bootstrap1.png differ diff --git a/ko/css/images/images/color2.png b/ko/css/images/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/ko/css/images/images/color2.png differ diff --git a/ko/css/images/images/final.png b/ko/css/images/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/ko/css/images/images/final.png differ diff --git a/ko/css/images/images/font.png b/ko/css/images/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/ko/css/images/images/font.png differ diff --git a/ko/css/images/images/margin2.png b/ko/css/images/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/ko/css/images/images/margin2.png differ diff --git a/ko/css/images/margin2.png b/ko/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/ko/css/images/margin2.png differ diff --git a/ko/deploy/README.md b/ko/deploy/README.md new file mode 100755 index 00000000000..d85c65a0519 --- /dev/null +++ b/ko/deploy/README.md @@ -0,0 +1,294 @@ +# 배포하기! + +> **Note** 이번 장은 조금 따라 하기 어려울 수도 있습니다. 하지만 끝까지 따라와 주세요. 배포는 웹 사이트 개발의 가장 중요한 부분이에요. 튜토리얼 중간에 배포 내용이 있는 이유는 코치가 웹사이트를 온라인으로 배포하는 까다로운 과정을 도와줄 수 있기 때문이에요. 시간이 부족하면 혼자서 해볼 수 있을 겁니다. + +지금까지는 웹사이트를 내 컴퓨터에서만 볼 수 있었어요. 지금부터 웹사이트를 배포방법을 배워봅시다! 배포(deployment)는 애플리케이션을 인터넷에 올려놓아 다른 사람들도 볼 수 있게 해주는 것 말해요. :) + +앞에서 배웠듯이, 웹사이트는 서버라는 곳에 들어갑니다. 인터넷 상에 서버를 제공하는 업체들은 참 많습니다. 우리는 이 중에 비교적 배포 과정이 간단한 [PythonAnywhere](https://www.pythonanywhere.com/)을 사용할 거에요. PythonAnywhere는 방문자가 아주 많지 않은 소규모 애플리케이션을 위한 무료 서비스를 제공하고 있습니다. 지금 우리가 만드는 웹사이트도 해당됩니다. + +우리가 사용할 다른 외부 서비스는 [GitHub](https://github.com/)이라는 코드 호스팅 서비스입니다. 요즘에는 모든 프로그래머들은 GitHub 계정을 가지고 있으니, 여러분도 GitHub 계정을 만들어봐요! + +로컬컴퓨터, GitHub, Pythonanywhere 이 세 곳은 모두 중요해요. 로컬 컴퓨터는 개발 및 테스트를 수행하는 곳이 될 것입니다. 개발이 완료되면 프로그램 복사본을 GitHub에 저장합니다. 웹사이트는 PythonAnywhere에 있고 GitHub에서 코드 사본을 업데이트할 거에요. + +# Git 설치하기 +> **Note** 이미 설치가 완료되었다면, 다시 할 필요가 없어요. 다음 장으로 넘어가서 Git 저장소를 만드는 것부터 시작하세요. + +{% include "/deploy/install_git.md" %} + +## Git 저장소 만들기 + +Git은 코드 저장소(repository: 줄여서 "repo"라고 합니다)에 특정한 파일들 집합의 변화를 추적하여 관리합니다. 이제 프로젝트를 시작해 볼까요? 콘솔 창을 열고 `djangogirls` 디렉터리에서 아래 명령어들을 실행하세요. + +> **Note** 저장소를 초기화하기 전에 여러분의 현재 작업 디렉터리가 어디인지 꼭 확인하세요. 맥OS나 Linux라면 `pwd` 명령으로, 윈도우라면 `cd` 명령어를 실행하면 알 수 있을 거예요. 반드시 `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 +``` + +git 저장소 초기화는 프로젝트를 시작할 때 딱 한 번만 필요합니다. (username과 email 등록 명령은 계속 적용되기 때문에 이 계정에서는 다시 입력할 필요가 없습니다) + +git은 이 디렉터리에 모든 파일과 폴더들의 변경 점을 추적할 것인데, 특정 파일들을 무시(ignore)하여 추적하지 않게 할 수 있습니다. 기본 디렉터리에 `.gitignore`라는 파일을 만들면 됩니다. 에디터를 열어 아래 내용을 넣어주세요. : + +{% filename %}.gitignore{% endfilename %} +``` +*.pyc +*~ +__pycache__ +myvenv +db.sqlite3 +/static +.DS_Store +``` + +그리고 `djangogirls` 폴더의 맨 위에다 `.gitignore` 라는 파일로 저장하세요. + +> **Note** 파일명 앞에 마침표로 시작하는 것이 중요합니다! 만약 파일을 만드는 것이 어렵다면 (예를 들어 맥은 파인더에서 마침표로 시작하는 파일을 생성하는 걸 좋아하지 않아요) `다른 이름으로 저장(Save As)` 기능을 사용하세요. + +> **Note** `.gitignore` 파일에 있는 `db.sqlite3`이라는 파일은 모든 게시물이 저장된 로컬 데이터베이스입니다. PythonAnywhere는 다른 데이터베이스를 사용하기 때문에 저장소에 추가될 필요가 없습니다. 다른 데이터베이스로는 SQLite로도 사용하지만 보통은 SQLite보다 훨씬 많은 방문자를 보유한 웹사이트일 경우 MySQL을 사용합니다. GitHub 저장소에 SQLite 데이터베이스를 제외하고 저장하면, 지금까지 작성한 모든 게시물을 로컬에서만 사용할 수 있으므로 실제 운영하는 프로덕션 환경에서는 다시 새 데이터베이스를 추가해야합니다. 로컬 데이터베이스는 데이터가 삭제돼도 괜찮은 테스트 공간으로만 사용하세요. + +`git add`하기 전이나 변경된 것이 있는지 잘 모를 때마다 `git status`명령어를 사용하는 것은 좋은 방법이에요. 잘못된 파일이 추가되거나 커밋된 경우, 이를 복구할 수 있습니다. `git status`명령은 미추적/수정된/스테이지된 파일, 브랜치 상태와 그 외 많은 정보를 보여줍니다. 실행하면 아래와 비슷하게 나타날 거에요. + + +{% filename %}command-line{% endfilename %} +``` +$ 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) +``` + +자 이제 우리가 만든 코드들을 저장소에 넣어봅시다. 콘솔 창에 가서 다음 명령어를 실행하세요. + +{% filename %}command-line{% endfilename %} +``` +$ 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 + ``` + +## GitHub에 코드 배포하기 + +[GitHub.com](https://github.com/)에서 새 무료 계정을 만드세요. (워크샵 전에 미리 가입했다면 더 좋죠!) + +그 다음 새 저장소(new repository)를 "my-first-blog"라는 이름으로 생성하세요. "README 파일과 초기화 하기(initialize with a README)" 체크박스는 체크안 한 상태로 두세요. .gitignore 옵션도 비어있는 상태(위에서 만들었죠?)로 두세요. 라이센스도 비워두세요. + + + +> **Note** 저장소 이름 `my-first-blog`는 중요합니다. - 물론 내가 원하는 이름으로 바꿀 수 있지만, 매번 변경해서 사용해야 하니 정말 불편할 거에요. 되도록 `my-first-blog`라는 저장소 이름을 그대로 사용하는 것을 권장합니다. + +다음 화면에서 저장소 복제 URL(repo's clon URL)을 볼 수 있을 거예요. "HTTPS" 버전을 선택해서 그 주소를 복사하세요. 그리고 터미널에다 붙여넣으세요. + + + +이제 내 컴퓨터의 Git 저장소를 GitHub에 있는 저장소로 연결해야합니다. + +콘솔에 다음과 같이 입력하세요. (``에 꺽쇠괄호(<>)를 떼고 내 GitHub 사용자이름을 입력하세요) + +{% filename %}command-line{% endfilename %} +``` +$ git remote add origin https://github.com//my-first-blog.git +$ git push -u origin master +``` + +아래와 같은 화면이 나오면 GitHub 사용자이름과 암호를 입력하세요. : + +{% filename %}command-line{% endfilename %} +``` +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. +``` + + + + +이제 여러분의 코드가 gitHub에 저장됐어요! 가서 확인해보세요! [Django](https://github.com/django/django), [장고걸스 튜토리얼](https://github.com/DjangoGirls/tutorial)뿐만 아니라 수많은 훌륭한 오픈소스 소프트웨어 프로젝트들이 gitHub에서 호스팅하고 있어요. 방금 여러분이 한 것처럼 말이죠. :) + + +# PythonAnywhere에 블로그 설정하기 + +> **Note** 설치하기 장에서 PythonAnywhere 계정을 만들었다면 이 부분을 건너뛰세요. + +{% include "/deploy/signup_pythonanywhere.md" %} + + +## GitHub에서 PythonAnywhere로 코드 가져오기 + +PythonAnywhere에 가입하면 대시보드 또는 "콘솔(Consoles)" 페이지를 볼 수 있을 거예요. "배시(Bash)" 콘솔로 시작하는 옵션을 선택하세요. - PythonAnywhere 버전의 콘솔로 PC에 있는 커맨드라인 같은 것으로 생각해도 됩니다. + +> **Note** PythonAnywhere는 리눅스 기반으로 윈도우의 커맨드라인 창과 조금 다르게 보일 수 있어요. + +gitHub에 있는 코드를 끌어와 저장소를 "복제"해 PythonAnywhere로 탑재해 볼게요. PythonAnywhere 콘솔에 다음과 같이 입력하세요. (``대신 내 GitHub 사용자 이름을 입력하는 것을 잊지 마세요) : + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ git clone https://github.com//my-first-blog.git +``` + +PythonAnywhere에 코드 복사본을 올릴 거에요. `tree my-first-blog` 명령어를 입력해 확인해보세요. : + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ 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 +``` + +### PythonAnywhere에서 가상환경(virtualenv) 생성하기 + +PythonAnywhere에서도 내 컴퓨터에 있는 것과 같이 작동할 수 있게 가상환경(virtualenv)을 생성할 수 있어요. 배시 콘솔(Bash console)에 다음과 같이 입력하세요. : + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd my-first-blog + +$ virtualenv --python=python3.6 myvenv +Running virtualenv with interpreter /usr/bin/python3.6 +[...] +Installing setuptools, pip...done. + +$ source myvenv/bin/activate + +(myvenv) $ pip install django~=2.0 +Collecting django +[...] +Successfully installed django-2.0.6 +``` + +> **Note** `pip install`은 설치가 될 때까지 인내심이 조금 필요해요. 하지만 몇 분 안에 완료될 거니 조금만 기다려보세요. 만약 5분 이상 시간이 지났다면, 무엇인가 잘못된 거니 코치에게 물어보세요. + + + +### PythonAnywhere에서 데이터베이스 생성하기 + +컴퓨터와 서버가 다른 점이 또 하나 있어요. 바로 다른 데이터베이스를 사용한다는 점이에요. 그래서 사용자 계정과 글은 서버와 여러분의 컴퓨터와 다를 수 있어요. + +지난번 내 컴퓨터에서 했던 것과 같이 서버에서도 데이터베이스를 초기화 할 거예요. `migrate`와 `createsuperuser`를 사용하세요. : + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +(mvenv) $ python manage.py migrate +Operations to perform: +[...] + Applying sessions.0001_initial... OK +(mvenv) $ python manage.py createsuperuser +``` + +## web app으로 블로그 배포하기 + +이제 코드는 PythonAnywhere에 있고 우리의 가상환경(virtualenv)도 준비가 되었으며, 정적 파일들도 모여 있고, 데이터베이스도 초기화되었네요. 이제 우리는 웹 앱으로 배포할 준비가 되었어요. + +로고를 클릭해 PythonAnywhere 대시보드로 와서 **Web**을 클릭하고 **Add a new web app**를 선택하세요. + +도메인 이름을 확정한 후, 대화창에 **수동설정(manual configuration)** ("Django"옵션이 *아니에요*) 을 클릭하세요. 다음, **Python 3.6**을 선택하고 다음(Next)을 클릭하면 마법사가 종료됩니다. + +> **Note** "Django"가 아니라 꼭 "수동설정(Manual configuration)"을 선택하세요. 기본 PythonAnywhere Django 설정을 위해서는 이렇게 하는 것이 더 좋아요. ;-) + +### 가상환경(virtualenv) 설정하기 + +PythonAnywhere 설정 화면으로 이동할 거에요. 서버 앱에 변경사항이 있을 때 이 설정 화면으로 들어가야 합니다. + + + +"가상환경(Virtualenv)" 섹션에서 `가상환경 경로를 입력해주세요(Enter the path to a virtualenv)`라고 쓰여 있는 빨간색 글자를 클릭하고 `/home//my-first-blog/myvenv/` 라고 입력합니다. 이동 경로 저장을 하려면 파란색 박스에 체크 표시를 하고 클릭하세요. + +> **Note** PythonAnywhere 사용자 이름을 변경하세요. 실수하면 PythonAnywhere는 경고 메시지를 보여줄 거에요. + + +### WSGI 파일 설정하기 + +장고는 "WSGI 프로토콜(WSGI protocol"을 사용해 작동합니다. 이 프로토콜은 파이썬을 이용한 웹사이트를 서비스하기 위한 표준으로 PythonAnywhere에서도 지원합니다. WSGI 설정을 파일을 수정해 우리가 만든 장고 블로그를 PythonAnywhere에서 인식하게 해봅시다. + +"WSGI 설정 파일(WSGI configuration file)" 링크(페이지 상단에 있는 "코드(Code)" 섹션 내 `/var/www/_pythonanywhere_com_wsgi.py`부분)를 클릭하면 에디터를 볼 수 있을 것입니다. + +모든 내용을 삭제하고 아래 내용을 넣으세요. : + +{% filename %}<your-username>_pythonanywhere_com_wsgi.py{% endfilename %} +```python +import os +import sys + +path = '/home//my-first-blog' # PythonAnywhere 계정으로 바꾸세요. +if path not in sys.path: + sys.path.append(path) + +os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' + +from django.core.wsgi import get_wsgi_application +from django.contrib.staticfiles.handlers import StaticFilesHandler +application = StaticFilesHandler(get_wsgi_application()) +``` + +> **Note** ``을 PythonAnywhere 사용자 이름으로 바꾸는 것을 잊지 마세요. +> **Note** 4번째 라인은 파이썬이 어디서나 응용 프로그램을 찾는 방법을 알고 있는지 확인합니다. 경로명은 공백없이 정확하게 작성해야합니다. 그렇지 않으면 "ImportError"라는 오류 로그가 발생합니다. + +이 파일은 PythonAnywhere에게 웹 애플리케이션의 위치와 Django 설정 파일명을 알려주는 역할을 합니다. + +`StaticFilesHandler`는 CSS를 다루기 위한 것입니다. `runserver` 명령으로 로컬 개발 중에 자동으로 처리됩니다. 튜토리얼의 뒷부분에서 CSS를 작성할 때 정적 파일에 대해 좀 더 알아볼 것입니다. + +**저장(Save)**을 누르고 **웹(Web)** 탭을 누릅니다. + +다 되었어요! 큰 녹색 **다시 불러오기(Reload)** 버튼을 누르면 여러분은 여러분의 애플리케이션을 볼 수 있을 거예요. 여러분은 페이지 최상단에 가는 링크를 발견할 수 있을 거예요. + +## 디버깅 팁 + +본인의 사이트에 접속할 때 오류가 보이면, 제일 먼저 **error log(오류 로그)**에서 디버깅 정보를 찾아보세요. PythonAnywhere [Web tab](https://www.pythonanywhere.com/web_app_setup/)에서 이 링크를 찾을 수 있어요. 여기서 오류 메시지가 있는지 확인하세요. 대부분의 가장 최근의 오류 메시지는 맨 하단에 있어요. 일반적으로 많이 일어나는 문제들은 아래와 같습니다.: + +* virtualenv를 생성하고 활성화할 때, Django를 설치할 때, Collestac을 돌릴 때, 데이터베이스를 설치할 때 같은 각 단계를 위한 콘솔 작업을 할 때 한 단계를 빼먹는 경우 + +* web tab에서 virtualenv 경로를 쓸 때 오타가 났을 때 - 이런 경우 빨간 작은 에러 메시지가 뜰 것입니다. + +* WSGI 설정 파일에 실수가 있을 때 -- my-first-blog-folder 폴더의 경로를 올바르게 입력했었나요? + +* Web app에서 그랬듯이 virtualenv에도 같은 파이썬 버전을 선택했나요? 둘 다 모두 3.4 버전이어야 해요 위키에서 [일반적인 디버깅 팁](https://www.pythonanywhere.com/wiki/DebuggingImportError)을 확인할 수 있어요. + +* 만약 `Invalid HTTP_HOST header: . You may need to add to ALLOWED_HOSTS.` 라는 오류메세지가 나온다면 `/mysite/settings.py`의 마지막 줄에 `ALLOWED_HOSTS = ['localhost', '127.0.0.1', '[::1]', '.pythonanywhere.com']` 를 추가 한 뒤에 다시 **Web** 탭에서 `Reload + +Git은 [git-scm.com](https://git-scm.com/)에서 내려받을 수 있습니다. 설치는 쉽답니다. 딱 한 단계만 빼고 기본 설정대로 `다음 다음 다음`을 계속 눌러주면 쉽게 설치할 수 있어요. 다섯 번째 `PATH 환경 설정(Adjusting your PATH environment)`화면에서 주의하세요. `윈도우 커맨드라인에서 Git과 유닉스 도구를 사용(Use Git and optional Unix tools from the Windows Command Prompt)`을 선택하세요. 나머지는 모두 기본 설정대로 해도 됩니다. `윈도우 스타일로 체크아웃, 유닉스 스타일로 라인엔딩 커밋하기(Checkout Windows-style, commit Unix-style line endings)`를 체크하는 것도 좋습니다. + + + + + +[git-scm.com](https://git-scm.com/)에서 다운받아 설치하세요. + +> **Note** OS X 10.6, 10.7 또는 10.8을 사용하는 경우 다음 링크에서 git 버전을 설치해야합니다. : [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 +``` + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo zypper install git +``` + + diff --git a/ko/deploy/signup_pythonanywhere.md b/ko/deploy/signup_pythonanywhere.md new file mode 100755 index 00000000000..df39388e762 --- /dev/null +++ b/ko/deploy/signup_pythonanywhere.md @@ -0,0 +1,5 @@ +PythonAnywhere에서 무료 계정인 "초보자(Beginner)"로 회원가입 하세요. + + * [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +> **Note** 사용자 이름을 정할 때 블로그 주소의 일부가 되는 것을 기억하세요. 예를 들어 사용자이름이 `yourusername`이면 URL은 `yourusername.pythonanywhere.com`이 된답니다. diff --git a/ko/django/README.md b/ko/django/README.md new file mode 100755 index 00000000000..4aba1128e7f --- /dev/null +++ b/ko/django/README.md @@ -0,0 +1,25 @@ +# 장고란 무엇인가요? + +Django(*/dʒæŋɡoʊ/ jang-goh/쟁고/장고*)는 파이썬으로 만들어진 무료 오픈소스 웹 애플리케이션 프레임워크(web application framework)입니다. 쉽고 빠르게 웹사이트를 개발할 수 있도록 돕는 구성요소로 이루어진 웹 프레임워크랍니다. + +웹사이트를 구축할 때, 비슷한 유형의 요소들이 항상 필요합니다. 회원가입, 로그인, 로그아웃과 같이 사용자 인증을 다루는 방법이나 웹사이트의 관리자 패널, 폼, 파일 업로드와 같은 것들 말이지요. + +그런데 정말 다행이게도, 오래전에 어떤 웹 개발자들이 새로운 웹 사이트를 개발할 때 서로 비슷한 문제들에 직면한다는 것을 깨달았습니다. 그래서 팀을 조직했고요. 바로 사용할 수 있는 구성요소들을 갖춘 여러 프레임워크를 만들었답니다. 장고도 그중에 하나인 거죠. 다시 발명해야 하는 문제로부터 해방감을 주고요. 새로운 웹사이트를 개발할 때 뒤따르는 간접비용의 부담을 덜어준답니다. + +## 왜 프레임워크가 필요한가요? + +장고라는 것이 실제로 무엇을 위한 것인지 이해하기 위해서는 서버에 대해서 자세히 살펴볼 필요가 있어요. 먼저 서버가 여러분에게 웹 페이지를 제공하길 원하는지 알아야 해요. + +편지(request, 요청)가 도착했는지 확인해주는 메일박스(port, 포트)가 있다고 상상해보세요. 이 것은 웹 서버가 해주는 일이에요. 웹 서버는 받은 편지를 읽고 웹 페이지와 함께 답장을 준답니다. 그런데 무언가를 주고 싶을 때는 그 안에 내용이 있어야 하죠. 장고는 그 특정 콘텐츠를 만들 수 있는 역할을 합니다. + +## 누군가가 서버에 웹 사이트를 요청하면 어떤 일이 벌어질까요? + +웹 서버에 요청이 오면 장고로 전달됩니다. 장고 **urlresolver**는 웹 페이지의 주소를 가져와 무엇을 할지 확인합니다.(*urlresolver*는 웹 사이트 주소인 URL(Uniform Resource Locator)를 통해 이해합니다). 이 urlreslover는 그리 똑똑하지 않습니다. 패턴 목록을 가져와 URL과 맞는지 처음부터 하나씩 대조해 식별합니다. 만약 일치하는 패턴이있으면, 장고는 해당 요청을 관련된 함수(*view*)에 넘겨줍니다 + +집배원을 생각해보세요. 집배원은 거리를 걸으며 집집이 편지와 대조해서 주소와 번지를 확인합니다. 주소와 번지가 일치하면 그곳에 편지를 배달합니다. *urlresolver*가 바로 집배원과 같은 역할을 합니다. + +모든 재미난 일들은 *view* 함수에서 처리됩니다: 특정 정보를 데이터베이스에서 찾을 수 있습니다. 그런데 만약 사용자가 데이터를 바꿔달라고 수정을 요청한다면 어떻게 될까요? "제 직업에 대한 설명을 바꿔주세요."와 같은 편지를 받았다고 생각해봅시다. *view*함수는 수정할 수 있는 권한이 있는지 확인하고 나서, 직업에 대한 설명을 수정해 다시 답장을 주겠지요. "완료했습니다!" 라고요. 그러고 나서 *view*는 답장을 생성하여, 장고는 그 답장을 그 사용자의 웹 브라우저에 보내주는 역할을 합니다. + +물론 지금까지의 설명은 아주 간단히 설명한 것에 불과해요. 하지만 모든 기술적인 부분까지 자세히 알 필요가 없답니다. 이 정도 아는 것만으로도 충분하답니다. + +좀 더 자세히 아는 것보다, 지금부터는 장고를 이용해 간단한 것부터 만들어봐요. 그렇게 하면서 중요한 모든 것들을 하나씩 배워나가도록 해요. diff --git a/ko/django_admin/README.md b/ko/django_admin/README.md new file mode 100755 index 00000000000..641223c2a3a --- /dev/null +++ b/ko/django_admin/README.md @@ -0,0 +1,52 @@ +# 장고 관리자 + +관리자 화면을 한국어로 변경하길 원할 경우 'settings.py'중 `LANGUAGE_CODE = 'en-us'`를 `LANGUAGE_CODE = 'ko'`로 바꾸세요. + +방금 막 모델링 한 글들을 장고 관리자에서 추가하거나 수정, 삭제할 수 있어요. + +이제 `blog/admin.py` 파일을 열어서 내용을 다음과 같이 바꾸세요. + + +{% filename %}blog/admin.py{% endfilename %} +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +코드에서 알 수 있듯이 앞 장에서 정의했던 `Post`모델을 가져오고(import) 있어요. 관리자 페이지에서 만든 모델을 보려면 `admin.site.register(Post)`로 모델을 등록해야 해요. + +자, 이제 `Post`모델을 볼까요? 웹 서버를 실행하려면 콘솔 창에서 `python manage.py runserver`를 실행하는걸 잊지 마세요. 브라우저를 열고 주소창에 http://127.0.0.1:8000/admin/ 을 입력하면 아래와 같은 로그인 페이지를 볼 수 있어요. + +![Login page](images/login_page2.png) + +로그인하기 위해서는, 모든 권한을 가지는 *슈퍼 사용자(superuser)*를 생성해야 해요. 커맨드라인으로 돌아가서 `python manage.py createsuperuser`을 입력하고 엔터를 누르세요. + +> 새 터미널 창을 열고 virtualenv를 활성화 시켜 웹 서버를 실행시키고 난 후 명령어를 입력해야합니다. 나의 첫 번째 Django 프로젝트! 장의 웹 서버 시작하기섹션에서 명령어를 입력하는 방법을 배웠어요, + +메시지가 나타나면 사용자 이름 (소문자, 공백 없이), 이메일 주소 및 암호를 입력합니다. password를 입력할 때 화면에 글자가 보이지 않는다고 해도 걱정하지 마세요. 원래 password는 화면에 보이지 않습니다. 작성한 후에 `enter`를 누르세요. 실행화면은 아래와 같을 거예요. (슈퍼 사용자로 사용할 username 과 email 주소는 본인 계정을 사용하세요) : + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py createsuperuser +Username: admin +Email address: admin@admin.com +Password: +Password (again): +Superuser created successfully. +``` + +브라우저로 돌아와서 장고 관리자 페이지에서 슈퍼 사용자로 로그인한 후 대시보드를 확인하세요. + +![Django admin](images/django_admin3.png) + +게시글로 가서 이것저것 시도해보세요. 5~6개 블로그 포스트를 올려보세요. 안에 내용은 걱정하지 마세요. 튜토리얼에 있는 텍스트를 그냥 복사붙여넣기를 할 수 있으니까요. + +최소한 2, 3개의 글에 게시 날짜가 있는지 확인하세요. (모두 볼 필요는 없어요) 이건 나중에 도움이 될 거에요. + +![Django admin](images/edit_post3.png) + +장고 관리자에 대해서 좀 더 알고 싶다면 장고 공식 문서를 읽어보세요 : https://docs.djangoproject.com/en/2.0/ref/contrib/admin/ + +자, 우리는 내 첫 번째 장고 모델을 만들었어요! 잠깐 쉴 시간이 필요해요. 열심히 했으니 재충전을 위해 커피 한 잔(또는 차 한 잔) 또는 뭔가 먹고 돌아오세요. diff --git a/ko/django_admin/images/django_admin3.png b/ko/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/ko/django_admin/images/django_admin3.png differ diff --git a/ko/django_admin/images/edit_post3.png b/ko/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/ko/django_admin/images/edit_post3.png differ diff --git a/ko/django_admin/images/images/django_admin3.png b/ko/django_admin/images/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/ko/django_admin/images/images/django_admin3.png differ diff --git a/ko/django_admin/images/images/edit_post3.png b/ko/django_admin/images/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/ko/django_admin/images/images/edit_post3.png differ diff --git a/ko/django_admin/images/images/login_page2.png b/ko/django_admin/images/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/ko/django_admin/images/images/login_page2.png differ diff --git a/ko/django_admin/images/login_page2.png b/ko/django_admin/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/ko/django_admin/images/login_page2.png differ diff --git a/ko/django_forms/README.md b/ko/django_forms/README.md new file mode 100755 index 00000000000..897afc37750 --- /dev/null +++ b/ko/django_forms/README.md @@ -0,0 +1,428 @@ +# 장고 폼 + +한 가지만 더 하면 웹사이트가 완성됩니다. 바로 블로그 글을 추가하거나 수정하는 멋진 기능을 추가하는 것이죠. 장고의 `관리자` 기능도 충분히 멋있기는 하지만, 좀 더 입맛에 맞게 바꾸고 예쁘게 꾸미기에는 좀 한계가 있습니다. `폼(양식, forms)`으로 강력한 인터페이스를 만들 수 있어요. - 우리가 상상할 수 있는 거의 모든 것을 할 수 있거든요! + +장고 폼이 정말 멋진 것은 아무런 준비 없이도 양식을 만들 수 있고, `ModelForm`을 생성해 자동으로 모델에 결과물을 저장할 수 있다는 거예요. + +이 기능이 지금 우리가 할 내용이에요. 폼을 하나 만들어서 `Post` 모델에 적용해봅시다. + +장고의 모든 중요한 부분과 마찬가지로, 폼도 폼만의 `forms.py`.라는 파일을 만들어요. + +우리는 이 이름으로 `blog` 디렉토리 안에 파일을 만들 거에요. + +``` +blog + └── forms.py +``` + +좋아요. 이제 이 파일을 열고 아래 코드를 작성하세요. : + +{% filename %}blog/forms.py{% endfilename %} +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + + +위 코드를 보면 첫 번째로 forms model을 import 해야 하고 (`from django import forms`), 그다음으로 `Post` model도 import 해야 합니다. (`from .models import Post`). + +`PostForm` 은 이미 다들 예상 하셨듯이 우리가 만들 폼의 이름이에요. 그리고 장고에 이 폼이 `ModelForm`이라는 것을 알려줘야해요. (그러면 장고가 뭔가 마술을 부릴 거에요) - `forms.ModelForm`은 ModelForm이라는 것을 알려주는 구문이에요. + +자, 이제 다음으로 `class Meta`가 나오는데요, 이 구문은 이 폼을 만들기 위해서 어떤 model이 쓰여야 하는지 장고에 알려주는 구문입니다. (`model = Post`). + +마지막으로, 이 폼에 필드를 넣으면 완성되겠죠. 이번 폼에서는 `title`과 `text`만 보여지게 해 봅시다. - `author`는 현재 로그인 하고 있는 사람이 될 것이고 (바로 당신이요!) 그리고 `created_date`는 글이 등록되는 시간이 될 것입니다. (예를 들어, 코드 상에서요), 됐죠? + +마쳤습니다! 이제 *뷰* 에서 이 폼을 사용해 템플릿에서 보여주기만 하면 되네요. + +다음에는 링크, URL, 뷰 그리고 템플릿을 만들 거에요. + +## 폼과 페이지 링크 + +`blog/templates/blog/base.html` 파일을 열어봅시다. `page-header` 라는 `div` class에 링크를 하나 추가할 거에요. + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +``` + +이 새로운 뷰는 `post_new`입니다. 부트스트랩 테마에 있는 `glyphicon glyphicon-plus` 클래스로 더하기 기호가 보이게 되는데요. + +위 구문을 추가하고 나면, 이제 html 파일이 아래처럼 보일 거예요. + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +페이지를 저장하고 나서 http://127.0.0.1:8000 페이지를 새로고침 해보면, `NoReverseMatch`이라는 에러가 나타나죠? + +## URL + +이제 `blog/urls.py`를 열고 아래 구문을 추가하겠습니다. + +{% filename %}blog/urls.py{% endfilename %} +```python +path('post/new', views.post_new, name='post_new'), +``` + +전체 코드는 아래와 같을 거예요. + +{% filename %}blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +브라우저에 사이트를 다시 불러오면 `AttributeError`가 보이게 됩니다. 왜냐하면, 아직 `post_new`뷰를 구현하지 않았기 때문이죠. 이제 하나 더 추가해봅시다. + +## `post_new` view + +`blog/views.py`파일을 열어서 `from`줄에 아래와 같은 코드를 추가합니다. + +{% filename %}blog/views.py{% endfilename %} +```python +from .forms import PostForm +``` + +그리고 *view*에 추가합니다. + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +새 `Post` 폼을 추가하기 위해 `PostForm()` 함수를 호출하도록 하여 템플릿에 넘깁니다. 곧 *view* 로 다시 돌아와서 이 작업을 하겠지만, 지금 당장은 폼을 위한 템플릿을 먼저 빨리 만들어보도록 할게요. + +## 템플릿 + +이번에는 `blog/templates/blog` 디렉터리 안에 `post_edit.html` 파일을 생성해 폼이 작동할 수 있게 만들 거에요. + +- 먼저 폼이 보여야 합니다. 그 예로, `{% raw %}{{ form.as_p }}{% endraw %}`로 간단히 만들 수 있어요…. +- 위 코드를 HTML 태그로 폼을 감싸세요. `...` +- `Save` 버튼이 필요합니다. 이것은 HTML 버튼으로 만들 수 있어요: `` +- 마지막으로 `
`을 열어 `{% raw %}{% csrf_token %}{% endraw %}`를 추가하세요. 이 작업은 폼 보안을 위해 중요하답니다! 이 작업을 빼먹고 저장하면 장고는 이렇게 불평할 거에요. + +![CSFR Forbidden page](images/csrf2.png) + +네, 이제 `post_edit.html` 파일의 HTML을 확인해볼게요. + +{% filename %}blog/templates/blog/post_edit.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +다 작성했으면 화면을 다시 불러옵시다. 폼이 이렇게 나타났나요! + +![New form](images/new_form2.png) + +잠깐만요! `title`과 `text`필드에 아무거나 입력하고 저장해보세요. 어떻게 됐나요? + +글이 사라졌어요! 한번 더 해봐도 내가 입력한 글들은 어디론가로 사라지고는 새 글이 추가되지 않아요. 뭐가 잘못된 걸까요? + +여러분이 잘못한 게 없답니다. 단지 *view* 추가 작업이 필요할 뿐이에요. + +## 폼 저장하기 + +`blog/views.py`를 다시 여세요. 지금 여러분이 보고 있는 `post_new`뷰는 아래와 같을 거에요. + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +폼을 제출할 때, 같은 뷰를 불러옵니다. 이때 `request`에는 우리가 입력했던 데이터들을 가지고 있는데, `request.POST`가 이 데이터를 가지고 있습니다. (`POST`는 글 데이터를 "등록하는(posting)"하는 것을 의미합니다. 블로그 "글"을 의미하는 "post"와 관련이 없어요) HTML에서 `
`정의에 `method="POST"`라는 속성이 있던 것이 기억나나요? 이렇게 POST로 넘겨진 폼 필드의 값들은 이제 `request.POST`에 저장됩니다. `POST`로 된 값을 다른 거로 바꾸면 안 돼요. `method` 속성의 값으로 넣을 수 있는 유효한 값 중에 `GET`같은 것도 있지만, post와 어떤 차이점이 있는지 등에 대해서 다루기에는 너무 길어질 것 같아 생략할게요) + +이제 *view* 에서 두 상황으로 나누어 처리해볼게요. +* 첫 번째: 처음 페이지에 접속했을 때입니다. 당연히 우리가 새 글을 쓸 수 있게 폼이 비어있어야겠죠. +* 두 번째: 폼에 입력된 데이터를 *view* 페이지로 가지고 올 때입니다. 여기서 조건문을 추가시켜야 해요. (`if`를 사용하세요) + +{% filename %}blog/views.py{% endfilename %} +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +이제 생략된 `[...]`부분에 코드를 추가해봅시다. 만약 `method`가 `POST`라면, 폼에서 받은 데이터를 `PostForm`으로 넘겨줘야겠죠? 이렇게 작성하면 됩니다. + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(request.POST) +``` + +참 쉽죠! 다음에는 폼에 들어있는 값들이 올바른지를 확인해야합니다.(모든 필드에는 값이 있어야하고 잘못된 값이 있다면 저장하면 되지 않아야해요) 이를 위해 `form.is_valid()`을 사용할거에요. + +폼에 입력된 값이 올바른지 확인한 다음, 저장되는거죠! + +{% 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() +``` + +일반적으로 이 작업을 두 단계로 나눌 수 있어요. `form.save()`로 폼을 저장하는 작업과 작성자를 추가하는 작업입니다. (`PostForm`에는 `작성자(author)` 필드가 없지만, 필드 값이 필요하죠!) `commit=False`란 넘겨진 데이터를 바로 `Post` 모델에 저장하지는 말라는 뜻입니다. 왜냐하면, 작성자를 추가한 다음 저장해야 하니까요. 대부분의 경우에는 `commit=False`를 쓰지 않고 바로 `form.save()`를 사용해서 저장해요. 다만 여기서는 작성자 정보를 추가하고 저장해야 하므로 `commit=False`를 사용하는 거예요. `post.save()`는 변경사항(작성자 정보를 포함)을 유지할 것이고 새 블로그 글이 만들어질 거에요! + +끝으로, 새 블로그 글을 작성한 다음에 `post_detail`페이지로 이동할 수 있으면 좋겠죠? 이 작업을 하려면 한 가지를 더 불러와야 해요. + +```python +from django.shortcuts import redirect +``` + +위 코드를 여러분의 파일 맨 위에 추가하세요. 그리고 새로 작성한 글을 볼 수 있도록 `post_detail`페이지로 가라고 수정합시다. + +{% filename %}blog/views.py{% endfilename %} +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail`은 우리가 이동해야 할 뷰의 이름이에요 *post_detail 뷰* 는 `pk`변수가 필요한 거 기억하고 있겠죠? `pk=post.pk`를 사용해서 뷰에게 값을 넘겨줄 거에요. 여기서 `post`는 새로 생성한 블로그 글이에요. + +잘했어요. 너무 설명이 길어졌네요. 이제 *view* 전체 코드를 확인할게요. + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +잘 작동하는지 확인해보세요. http://127.0.0.1:8000/post/new/ 페이지로 접속해서 `title`과 `text`를 입력하고, 저장하세요…. 그리고…. 짜잔!!! 새로운 블로그 글이 추가되고 `post_detail`페이지가 나타났어요! + +블로그 글을 저장하기 전에 게시일을 설정하고 싶을 거에요. 추후 __장고걸스 튜토리얼__ 중 게시글 추가하기 버튼 만들기에서 확인할 수 있어요. + +모두 잘해냈어요! + +> 장고 관리자 인터페이스처럼 로그인된 상태라고 생각해봅시다. 하지만 사용자가 로그아웃되는 상황이 발생하기도 하죠. (브라우저가 닫히거나, DB가 재시작된다든가 등) 만약 로그인되지 않은 상태에서 새 글을 저장한다면, 사용자가 로그인되어있지 않아 누가 글을 작성하였는지 알 수 없어요. 그래서 글을 저장할 때 오류가 발생하고, 로그인시키도록 [http://127.0.0.1:8000/admin](http://127.0.0.1:8000/admin) 관리자 페이지가 나타나게 될 거에요. 이 문제는 금방 해결할 수 있어요. 튜토리얼을 마친 후 장고걸스 심화 튜토리얼 - 보안 추가하기 장에서 실습할 수 있어요. + +![Logged in error](images/post_create_error.png) + + +## 폼 검증하기 + +장고 폼이 얼마나 멋진지 알아볼 차례에요. 블로그 글은 `title`과 `text`필드가 반드시 있어야 해요. 우리가 만든 `Post`모델에서는 이 필드 값들이 필요 없다고 했지만(`published_date`는 제외하고) 장고는 모두 기본값으로 설정되어 있다고 생각합니다. + +`title`과 `text`없이 폼을 저장해보세요. 어떻게 될지 생각해보세요! + +![Form validation](images/form_validation2.png) + +장고는 모든 필드의 값이 올바른지 검증할 수 있답니다. 정말 멋지죠? + + +## 폼 수정하기 + +지금까지 새 폼을 추가하는 방법에 대해 배웠어요. 하지만 이미 있던 글을 수정하려면 어떻게 해야 할까요? 이것도 앞서 했던 것과 매우 비슷해요. 빨리해보도록 합시다! (만약 이해하지 못하는 부분이 있다면, 여러분의 코치에게 이전 장의 내용에 관해서 물어보고 차례대로 하나씩 해결해 나가야 합니다) + +`blog/templates/blog/post_detail.html`파일을 열어 아래 내용을 추가하세요. + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html + +``` + +이제 템플릿이 아래와 같이 보일 거에요. + +{% 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 %} +``` + +`blog/urls.py`에 다음 코드를 추가합니다. + +{% filename %}blog/urls.py{% endfilename %} +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +우리는 `blog/templates/blog/post_edit.html` 템플릿을 재사용할 거에요. 마지막으로 할 일은 *view* 를 만드는 것입니다. + +`blog/views.py`파일을 열어서 파일 맨 밑에 코드를 추가해봅시다. + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + + +음…. 코드가 `post_new`와 거의 비슷해 보이지 않나요? 하지만 완전히 같지는 않아요. +* 첫 번째: url로부터 추가로 `pk` 매개변수를 받아서 처리합니다. +* 두 번째: `get_object_or_404(Post, pk=pk)`를 호출하여 수정하고자 하는 글의 `Post` 모델 `인스턴스(instance)`로 가져옵니다. (`pk`로 원하는 글을 찾습니다) 이렇게 가져온 데이터를 폼을 만들 때와(글을 수정할 때 폼에 이전에 입력했던 데이터가 있어야 하겠죠?) 폼을 저장할 때 사용하게 됩니다. + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(request.POST, instance=post) +``` + +그리고 폼에 아래와 같이 수정하세요. + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(instance=post) +``` + +잘했어요. 이제 잘 작동하는지 확인해보세요! `post_detail`페이지로 가보세요. 우측 상단에 수정 버튼이 있어야 합니다. + +![Edit button](images/edit_button2.png) + +수정 버튼을 누르면 우리가 쓴 블로그 글이 들어가 있는 폼을 볼 수 있을 거에요. + +![Edit form](images/edit_form2.png) + +자유롭게 제목과 텍스트를 수정하고 저장해보세요! + +축하합니다! 여러분의 어플리케이션이 점점 더 완벽해지고 있어요! + +장고 폼에 대해 자세한 정보가 필요하다면 공식 문서를 읽어보세요. : +https://docs.djangoproject.com/en/2.0/topics/forms/ + +## 보안 + +링크를 클릭해 새로운 포스트가 나오게 만드는 것은 멋진 일이에요! 지금은 웹사이트를 방문하는 누구든지 글을 쓸 수 있지만, 그렇게 하고 싶지 않을 수 있어요. 나에게만 보이고 다른 사람에게는 보이지 않는 버튼을 만들어 볼게요. + +`blog/templates/blog/base.html` 파일에서, `page-header` `div`를 찾아 아래와 같이 작성된 앵커 태그(Anchor Tag)를 찾습니다. + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +``` + +여기에 `{% if %}`태그를 추가해 관리자로 로그인한 유저들만 링크가 보일 수 있게 만들 거에요. 그게, 바로 여러분이죠! ``태그를 아래와 같이 변경하세요. + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +이 `{% if %}`는 브라우저에 페이지를 요청 하는 사용자가 로그인 하는 경우 링크가 발생됩니다. 이는 새 게시글을 완전히 보호해주는 것은 아니지만, 바람직한 방법입니다. 이 부분은 장고걸스 심화 튜토리얼에서 좀더 자세히 다룰거에요. + +세부 페이지에 있는 수정 아이콘이 기억나죠? 이번에도 동일하게 다른 사람들이 게시글을 수정하지 못하게 할 거에요. + +`blog/templates/blog/post_detail.html`파일을 열어 아래와 같이 작성된 라인을 찾아주세요. + +```html + +``` +이렇게 바꾸세요. + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html +{% if user.is_authenticated %} + +{% endif %} +``` +로그인했기 때문에, 페이지 새로고침을 해도 아무것도 표시되지 않을 거에요. 새로운 브라우저 또는 시크릿 창을 실행해 보세요. 링크와 아이콘이 보이지 않게 되었어요! + +## 한 가지만 더: 배포하세요! + +모든 작업을 끝마쳤으면 PythonAnywhere로 배포해야죠! + +* 제일 먼저 코드를 커밋하고 GitHub로 푸시합니다. + +{% filename %}command-line{% endfilename %} +``` +$ git status +$ git add --all . +$ git status +$ git commit -m "Added views to create/edit blog post inside the site." +$ git push +``` + +* 그 다음 [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/)을 여세요. : + +{% filename %}command-line{% endfilename %} +``` +$ cd my-first-blog +$ git pull +[...] +``` + +* 마지막으로 [Web tab](https://www.pythonanywhere.com/web_app_setup/)에서 **Reload**를 누르세요. + +이제 배포가 완료 되었어요. 잘 작동되는지 확인하세요! 축하합니다. :) diff --git a/ko/django_forms/images/csrf2.png b/ko/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/ko/django_forms/images/csrf2.png differ diff --git a/ko/django_forms/images/drafts.png b/ko/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/ko/django_forms/images/drafts.png differ diff --git a/ko/django_forms/images/edit_button2.png b/ko/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/ko/django_forms/images/edit_button2.png differ diff --git a/ko/django_forms/images/edit_form2.png b/ko/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/ko/django_forms/images/edit_form2.png differ diff --git a/ko/django_forms/images/form_validation2.png b/ko/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/ko/django_forms/images/form_validation2.png differ diff --git a/ko/django_forms/images/images/csrf2.png b/ko/django_forms/images/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/ko/django_forms/images/images/csrf2.png differ diff --git a/ko/django_forms/images/images/drafts.png b/ko/django_forms/images/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/ko/django_forms/images/images/drafts.png differ diff --git a/ko/django_forms/images/images/edit_button2.png b/ko/django_forms/images/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/ko/django_forms/images/images/edit_button2.png differ diff --git a/ko/django_forms/images/images/edit_form2.png b/ko/django_forms/images/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/ko/django_forms/images/images/edit_form2.png differ diff --git a/ko/django_forms/images/images/form_validation2.png b/ko/django_forms/images/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/ko/django_forms/images/images/form_validation2.png differ diff --git a/ko/django_forms/images/images/new_form2.png b/ko/django_forms/images/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/ko/django_forms/images/images/new_form2.png differ diff --git a/ko/django_forms/images/images/post_create_error.png b/ko/django_forms/images/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/ko/django_forms/images/images/post_create_error.png differ diff --git a/ko/django_forms/images/new_form2.png b/ko/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/ko/django_forms/images/new_form2.png differ diff --git a/ko/django_forms/images/post_create_error.png b/ko/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/ko/django_forms/images/post_create_error.png differ diff --git a/ko/django_installation/README.md b/ko/django_installation/README.md new file mode 100755 index 00000000000..561cfbba876 --- /dev/null +++ b/ko/django_installation/README.md @@ -0,0 +1,8 @@ +# 장고 설치하기 + +> **Note** 크롬북 사용자는 이번 장을 건너뛰고, [크롬북에서 설치하기](../chromebook_setup/README.md) 장으로 가세요. + + +> **Note** 이미 설치를 끝냈다면 다음 장으로 넘어세요! + +{% include "/django_installation/instructions.md" %} diff --git a/ko/django_installation/instructions.md b/ko/django_installation/instructions.md new file mode 100755 index 00000000000..935f6dd8d4d --- /dev/null +++ b/ko/django_installation/instructions.md @@ -0,0 +1,187 @@ +> **Note** 이 장의 일부는 Geek Girls Carrots (http://django.carrots.pl/)의 튜토리얼을 기초로 작성되었습니다. + +> **Note** 이 장의 일부는 Creative Commons Attribution-ShareAlike 4.0 International License에 준수하여 [django-marcador 튜토리얼](https://github.com/ggcarrots/django-carrots)를 기초로 작성되었습니다. django-marcador 튜토리얼 저작권은 Markus Zapke-Gründemann et al이 소유하고 있습니다. + +## 가상환경(Virtual environment) + +장고 설치 전, 개발 환경을 깔끔하게 관리하는 데 큰 도움이 되는 도구를 설치해보겠습니다. 이 단계를 건너뛸 수 있지만, 한번 직접 해보는 것을 추천합니다. 제대로 설치해야 나중에 문제가 발생하지 않거든요! + +자, 이제부터 **가상환경(Virtual environment)**(*줄여서 virtualenv*라고 해요)을 만들어보겠습니다. Virtualenv는 프로젝트 기초 전부를 Python/Django와 분리해줍니다. 다시 말해 웹사이트가 변경되어도 개발 중인 것에 영향을 미치지 않는다는 것입니다. 어때요, 깔끔하죠? + +`virtualenv`를 만드는 데 필요한 것은 생성할 곳을 정하는 것뿐입니다. 예를 들면, home 디렉토리와 같은 곳이면 적당합니다. 윈도우 환경에서는 `C:\Users\Name`일 거에요. (`Name`이라는 것은 윈도우에 로그인할 때 사용한 아이디를 말합니다) + +> **Note** 윈도우에서 디렉토리 파일명에 악센트 또는 특수 문자가 포함되지 않도록 주의하세요. 사용자 이름에 악센트 부호가있는 문자가 들어 있으면 다른 디렉토리를 사용하세요. (예: `C:\djangogirls`) + +이 튜토리얼에서는 home 디렉토리 아래 `djangogirls`라는 디렉토리를 새로 만들어 사용하도록 할게요. + +{% filename %}command-line{% endfilename %} +``` +$ mkdir djangogirls +$ cd djangogirls +``` + +이제 `myenv` 라는 이름의 가상환경을 만들어 볼게요. 아래와 같은 형식의 명령을 실행하세요. + +{% filename %}command-line{% endfilename %} +``` +$ python3 -m venv myvenv +``` + + + +`virtualenv`를 생성하려면 콘솔 창을 열고, (이전 장에서 얘기했는데, 기억나죠?) 그리고 `C:\Python35\python -m venv myvenv`를 실행하세요. 아마도 화면에 이렇게 보일 거에요. : + +{% filename %}command-line{% endfilename %} +``` +C:\Users\Name\djangogirls> C:\Python35\python -m venv myvenv +``` +여기서 `C:\Python35\python`은 이전에 파이썬을 설치 한 디렉토리이고 `myvenv`는`virtualenv`의 이름입니다. 다른 이름을 사용해도 되지만 알파벳 소문자를 사용하고 공백, 악센트 또는 특수 문자는 사용하지 마세요. 가상환경 이름을 짧게 쓰는 것도 좋은 생각입니다. 자주 입력해야 하니까요. + + + + + +리눅스와 맥에서 `virtualenv`를 생성하려면 간단하게 `python3 -m venv myvenv`를 입력하면 됩니다. 화면에 이렇게 나타날 거에요. : + +{% filename %}command-line{% endfilename %} +``` +$ python3 -m venv myvenv +``` + +여기서 `myvenv` 는 `가상환경`의 이름이에요. 이름은 마음대로 정할 수 있지만, 소문자여야 하고 공백은 없어야 해요. 이름은 짧게 만드는 게 좋아요. 자주 입력해야 하니까요. + +> **Note** Debian/Ubuntu에서 아래와 같은 오류가 발생할 수 있습니다. : + +{% 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. +``` + +이 경우, 위의 지시에 따라 `python3-venv` 패키지를 설치하세요. : +{% filename %}command-line{% endfilename %} +``` +$ sudo apt install python3-venv +``` + +> **Note** Debian/Ubuntu의 일부 버전에서 이와 같이 가상 환경을 초기화하면 현재 다음과 같은 오류가 발생합니다. : +{% filename %}command-line{% endfilename %} +``` +Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +``` + +이 문제를 해결하려면 `virtualenv` 명령를 사용하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ sudo apt install python-virtualenv +$ virtualenv --python=python3.6 myvenv +``` + +> **Note** 아래와 같은 오류가 발생한다면 + +{% filename %}command-line{% endfilename %} +``` +E: Unable to locate package python3-venv +``` + +이 명령어를 실행하세요. : + +{% filename %}command-line{% endfilename %} +``` +sudo apt install python3.6-venv +``` + + + +## 가상환경 사용하기 + +앞의 명령을 사용하면 `myvenv`라는 디렉토리가 만들어져요. (이름을 변경하면 그 이름의 디레토리가 만들어집니다) 그리고 그 디렉토리에 우리가 사용할 가상환경이 들어있어요. (디렉토리와 파일들이 있어요) + + + +아래 명령어를 입력해 가상환경을 실행하세요. : + +{% filename %}command-line{% endfilename %} +``` +C:\Users\Name\djangogirls> myvenv\Scripts\activate +``` + +> **Note** Windows 10 사용할 경우, Windows PowerShell에서 '이 스크립트는 이 시스템에서 실행되지 않습니다.'라는 오류 메시지가 표시 될 수 있습니다. 이 경우 "관리자 권한으로 실행"옵션을 사용하여 다른 Windows PowerShell을 엽니다. 그런 다음 가상 환경을 시작하기 전에 다음 명령을 입력하세요. + +{% 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 +``` + + + + + +아래 명령어를 입력해 가상환경을 실행하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ source myvenv/bin/activate +``` + +`myvenv`를 여러분이 선택한 `virtualenv` 이름으로 바꾸는 것을 잊지 마세요! + +> **Note** 가끔씩 `source`가 사용할 수 없을 수도 있습니다. 이 경우에는 아래와 같이 입력하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ . myvenv/bin/activate +``` + + + +콘솔의 프롬프트 앞에`(myvenv)`접두어가 붙어있다면 `virtualenv`가 시작되었음을 알 수 있어요. + +가상환경에서 작업 할 때,`python`은 자동으로 올바른 버전을 참조하므로 `python3` 대신`python`를 사용할 수 있습니다. + +의존성 설치를 모두 마쳤으니, 지금부터 장고를 설치할 수 있습니다! + +## 장고 설치하기 + +`virtualenv`를 실행하기 전, 장고를 설치합시다. + +그전에 장고를 설치하는 데 필요한 `pip`이 최신 버전인지 확인합니다. : + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~$ python3 -m pip install --upgrade pip +``` +그런 다음 `pip install django~=2.0.0`(Django를 설치하려면 물결표 뒤에 등호 :`~=`)를 입력해 장고를 설치하세요. + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~$ pip install django~=2.0.0 +Collecting Django~=2.0.6 + Downloading Django-2.0.6-py3-none-any.whl (7.1MB) +Installing collected packages: Django +Successfully installed Django-2.0.6 +``` + + + +> **Note** Windows에서 pip를 사용할 때 오류가 발생하면, 프로젝트 경로 이름(예: `C:\Users\User Name\djangogirls`)에 공백, 액센트 또는 특수 문자가 포함되어 있는지 확인하세요. 그렇다면 공백, 악센트 또는 특수 문자가 없는 다른 경로를 사용하세요. (제안: `C:\djangogirls`). 새 디렉토리에 새 virtualenv를 만든 다음, 이전 가상 디렉토리를 삭제하고 위의 명령을 다시 시도하세요. virtualenv는 절대 경로를 사용하기 때문에 virtualenv 폴더를 이동해도 작동하지 않습니다. + + + + + +> Windows에서 pip를 사용할 때 오류가 발생하면, 프로젝트 경로 이름(예: `C:\Users\User Name\djangogirls`)에 공백, 액센트 또는 특수 문자가 포함되어 있는지 확인하세요. 그렇다면 공백, 악센트 또는 특수 문자가 없는 다른 경로를 사용하세요. (제안: `C:\djangogirls`). 새 디렉토리에 새 virtualenv를 만든 다음, 이전 가상 디렉토리를 삭제하고 위의 명령을 다시 시도하세요. virtualenv는 절대 경로를 사용하기 때문에 virtualenv 폴더를 이동해도 작동하지 않습니다. + + + + + +> Ubuntu 12.04에서 pip를 사용하다 오류가 발생해 virtualenv에 pip를 재설치하려면 `python -m pip install -U --force-reinstall pip`를 실행하세요. + + +여기까지 입니다! 이제 정말 장고 애플리케이션을 생성해봅시다! diff --git a/ko/django_models/README.md b/ko/django_models/README.md new file mode 100755 index 00000000000..3a0a5ec59d2 --- /dev/null +++ b/ko/django_models/README.md @@ -0,0 +1,188 @@ +# 장고 모델 + +이번에는 블로그 내 모든 포스트를 저장하는 부분을 만들 거에요. 먼저 우리는 `객체(object)`에 대해서 조금 알고 있어야 해요. + +## 객체(Object) + +프로그래밍 개발 방법 중에는 `객체 지향 프로그래밍(object oriented programming)`이라 부르는 개념이 있어요. 이 개발 방법은 프로그램이 어떻게 작동해야 하는지 모든 것을 하나하나 지시하는 것 대신, 모델을 만들어 그 모델이 어떤 역할을 가지고 어떻게 행동해야 하는지 정의하여 서로 알아서 상호작용할 수 있도록 만드는 것입니다. + +그렇다면 객체란 무엇일까요? 객체란 속성과 행동을 모아놓은 것이라 할 수 있어요. 객체란 개념이 낯설게 느껴지지만, 예를 들어보면 별것 아님을 알게 될 거에요. + +예를 들어 `고양이(Cat)`라는 객체를 모델링 한다고 해볼게요. 이 고양이는 여러 속성을 가지고 있어요: `색깔`, `나이`, `분위기`(착한, 나쁜, 졸려 하는), `주인`(주인이 `사람`일 수도 있지만, 길고양이면 주인이 없으니 속성이 빈 값이 될 수 있어요) 등이 될 수 있겠지요. + +또 `고양이는` 특정 행동을 할 수 있어요: `야옹야옹하기`, `긁기`, 또는 `먹기` 등이 있겠네요. (`맛`과, 고양이에게 `고양이 먹이`는 행동하는 객체가 달라요). + + 고양이 + -------- + 색깔 + 나이 + 분위기 + 주인 + 야옹야옹하기() + 긁기() + 먹기(음식) + + 고양이먹이 + -------- + 맛 + +기본적으로 객체지향설계 개념은 현실에 존재하는 것을 속성과 행위로 나타내는 것입니다. 여기서 속성은 `객체 속성(properties)`, 행위는 `메서드(methods)`로 구현됩니다. + +그렇다면 블로그 글을 모델로 만들 수 있을까요? 우리는 블로그를 만들고 싶잖아요, 그렇죠? + +우리는 다음 질문에 답할 수 있어야 해요: 블로그 글이란 무엇일까? 어떤 속성들을 가져야 할까? + +블로그는 제목과 내용이 필요하죠? 그리고 누가 썼는지도 알 수 있게 작성자(author)도 추가하면 좋을 것 같아요. 마지막으로, 그 글이 작성된 날짜와 게시된 날짜도 알면 좋겠어요. + + Post(게시글) + -------- + title(제목) + text(내용) + author(글쓴이) + created_date(작성일) + published_date(게시일) + +블로그 글로 할 수 있는 것은 어떤 것들이 있을까요? 글을 출판하는 `메서드(method)`가 있으면 좋겠죠? + +그래서 우리는 `publish`메서드도 만들어야 합니다. + +이제 무엇을 만들어야 하는지 이미 알았으니, 장고에서 모델을 만들어 봅시다! + +## 장고 모델 + +객체(object)가 어떻게 구성되어야 하는지 이전에 살펴봤으니, 이번에는 블로그 글을 위한 장고 모델을 만들어봅시다. + +장고 안의 모델은 객체의 특별한 종류입니다. 이 모델을 저장하면 그 내용이 `데이터베이스`에 저장되는 것이 특별한 점이죠. 데이터베이스란 데이터의 집합입니다. 데이터들이 모여 있는 곳이지요. 이곳에 사용자에 대한 정보나 여러분의 블로그 글 등등이 저장되어 있습니다. 우리는 데이터를 저장하기 위해서 여러 가지 데이터베이스를 입맛에 맞게 고를 수 있는데요, 여기서는 SQLite 데이터베이스를 사용하겠습니다. 'sqlite 데이터베이스는 기본 장고 데이터베이스 어댑터입니다.'라는 것까지만 알고 있어도 충분해요. 어댑터가 무엇인지를 알려면 내용이 너무 길어지니 일단 여기까지만 알고 계세요. + +쉽게 말해 데이터베이스 안의 모델이란 엑셀 스프레드시트와 같다고 말할 수 있어요. 엑셀 스프레드시트를 보면 열(필드)와 행(데이터)로 구성되어 있죠? 모델도 마찬가지입니다. + +### 어플리케이션 만들기 + +잘 정돈된 상태에서 시작하기 위해, 프로젝트 내부에 별도의 애플리케이션을 만들어볼 거에요. 처음부터 모든 것이 잘 준비되어있다면 훌륭하죠. 애플리케이션을 만들기 위해 콘솔 창(`djangogirls` 디렉토리에서 `manage.py` 파일)에서 아래 명령어를 실행하세요. + +{% filename %}command-line{% endfilename %} + +``` +(myvenv) ~/djangogirls$ python manage.py startapp blog +``` + +이제 `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 +``` + +애플리케이션을 생성한 후 장고에 사용해야 한다고 알려줘야 합니다. 이 역할을 하는 파일이 `mysite/settings.py`입니다. 이 파일 안에서 `INSTALLED_APPS`를 열어, `)`바로 위에 `'blog'`를 추가하세요. 최종 결과물은 아래와 다음과 같을 거예요. : + +{% 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', +] +``` + +### 블로그 글 모델 만들기 + +모든 `Model` 객체는 `blog/models.py` 파일에 선언하여 모델을 만듭니다. 이 파일에 우리의 블로그 글 모델도 정의할 거에요. + +`blog/models.py` 파일을 열어서 안에 모든 내용을 삭제한 후 아래 코드를 추가하세요. + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> `str`양 옆에 언더스코어(`_`) 를 두 개씩 넣었는지 다시 확인하세요. 파이썬에서 자주 사용되는데, "던더(dunder; 더블-언더스코어의 준말)"라고도 불려요. + +으음…. 코드가 좀 무서워졌죠? 걱정 마세요. 줄마다 어떤 의미인지 설명해드릴 거에요. + +`from` 또는 `import`로 시작하는 부분은 다른 파일에 있는 것을 추가하라는 뜻입니다. 다시 말해, 매번 다른 파일에 있는 것을 복사&붙여넣기로 해야 하는 작업을 `from`이 대신 불러와 주는 거죠. + +`class Post(models.Model):`는 모델을 정의하는 코드입니다. (모델은 `객체(object)`라고 했죠?) + +- `class`는 특별한 키워드로, 객체를 정의한다는 것을 알려줍니다. +- `Post`는 모델의 이름입니다. (특수문자와 공백 제외한다면) 다른 이름을 붙일 수도 있습니다. 항상 클래스 이름의 첫 글자는 대문자로 써야 합니다. +- `models`은 Post가 장고 모델임을 의미합니다. 이 코드 때문에 장고는 Post가 데이터베이스에 저장되어야 한다고 알게 됩니다. + +이제 속성을 정의하는 것에 대해서 이야기해 볼게요. `title`, `text`, `created_date`, `published_date`, `author`에 대해서 말할 거에요. 속성을 정의하기 위해, 필드마다 어떤 종류의 데이터 타입을 가지는지를 정해야 해요. 여기서 데이터 타입에는 텍스트, 숫자, 날짜, 사용자 같은 다른 객체 참조 등이 있습니다. + +- `models.CharField` - 글자 수가 제한된 텍스트를 정의할 때 사용합니다. 글 제목같이 짧은 문자열 정보를 저장할 때 사용합니다. +- `models.TextField` - 글자 수에 제한이 없는 긴 텍스트를 위한 속성입니다. 블로그 콘텐츠를 담기 좋겠죠? +- `models.DateTimeField` - 날짜와 시간을 의미합니다. +- `models.ForeignKey` - 다른 모델에 대한 링크를 의미합니다. + +시간 관계상 모든 코드를 하나하나 다 설명하지는 않을 거예요. 대신 모델의 필드와 정의하는 방법에 궁금하다면 장고 공식 문서를 꼭 읽어보길 바랍니다. : https://docs.djangoproject.com/en/2.0/ref/models/fields/#field-types) + +`def publish(self):`는 무슨 뜻일까요? 이것이 바로 앞서 말했던 `publish`라는 메서드(method) 입니다. `def`는 이것이 함수/메서드라는 뜻이고, `publish`는 메서드의 이름입니다. 원한다면 메서드 이름을 변경할 수도 있어요. 이름을 붙일 때는 공백 대신, 소문자와 언더스코어를 사용해야 합니다. 예를 들어, 평균 가격을 계산하는 메서드는 `calculate_average_price`라고 부를 수 있겠네요. + +메서드는 자주 무언가를 되돌려주죠. (`return`) 그 예로 `__str__` 메서드를 봅시다. 이 시나리오대로라면, `__str__`를 호출하면 Post 모델의 제목 텍스트(**string**)를 얻게 될 거에요. + +아직 모델에 대해서 잘 모르는 부분이 있다면, 코치에게 자유롭게 물어보세요! 지금 배운 내용이 너무 복잡하게 느껴질 수 있어요. 객체와 함수를 배운 적이 없는 분들이 한꺼번에 배우게 된다면 특히 그렇겠죠. 그래도 해 볼 만한 마법이라고 생각했으면 좋겠어요! + +### 데이터베이스에 모델을 위한 테이블 만들기 + +이 장의 마지막 단계입니다. 이제 데이터베이스에 우리의 새 모델, Post 모델을 추가할 거에요. 먼저 우리는 장고 모델에 (우리가 방금 만든!) 몇 가지 변화가 생겼다는 걸 알게 해줘야 합니다. `python manage.py makemigrations blog` 를 입력해 보세요. 아마도 화면에 이렇게 보이겠죠? + +{% filename %}command-line{% endfilename %} + +``` +(myvenv) ~/djangogirls$ python manage.py makemigrations blog +Migrations for 'blog': + blog/migrations/0001_initial.py: + - Create model Post +``` + +장고는 데이터베이스에 지금 반영할 수 있도록 마이그레이션 파일(migration file)이라는 것을 준비해 두었답니다. 이제 `python manage.py migrate blog` 명령을 실행해, 실제 데이터베이스에 모델 추가를 반영하겠습니다. : + +{% 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 +``` + +만세! 드디어 글 모델이 데이터베이스에 저장되었습니다. 너무 멋있지 않나요? 빨리 다음 장으로 넘어가서 블로그 글을 확인하러 가요! diff --git a/ko/django_orm/README.md b/ko/django_orm/README.md new file mode 100755 index 00000000000..cb7d5d9c5ae --- /dev/null +++ b/ko/django_orm/README.md @@ -0,0 +1,200 @@ +# 장고 ORM과 쿼리셋(QuerySets) + +이번 장에서는 장고를 데이터베이스에 연결, 데이터를 저장하는 방법에 대해서 알아볼 거에요. 함께 시작해봅시다! + +## 쿼리셋이란 무엇인가요? + +핵심만 말하자면, 쿼리셋(QuerySet)은 전달받은 모델의 객체 목록입니다. 쿼리셋은 데이터베이스로부터 데이터를 읽고, 필터를 걸거나 정렬을 할 수 있습니다. + +가장 쉽게 배우는 방법은 예제로 배우는 것이죠. 함께 해볼까요? + +## 장고 쉘(shell) + +PythonAnywhere가 아닌 로컬 콘솔에서 아래 명령을 입력하세요. + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py shell +``` + +실행하면 아래처럼 나올 거에요. + +{% filename %}command-line{% endfilename %} +```python +(InteractiveConsole) +>>> +``` + +여러분은 이제 장고 인터랙티브 콘솔(interactive console)로 들어왔습니다. 파이썬 프롬프트와 비슷하지만, 장고만의 마법을 부릴 수 있는 곳이기도 하지요. 물론 파이썬의 모든 명령어를 여기서 사용할 수 있습니다. + +### 모든 객체 조회하기 + +자, 이제 먼저 입력했던 모든 글들을 출력하겠습니다. 아래와 같이 입력하세요. : + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +이런! 에러가 나타났어요. 글이 없다고 하네요. 이럴수가... 그런데 이렇게 나오는 것이 맞는 거랍니다. 이 글을 먼저 불러오는 것(import)을 잊었네요! + +{% filename %}command-line{% endfilename %} +```python +>>> from blog.models import Post +``` + +간단합니다. 우리는 `Post`모델을 `blog.models`에서 불러왔어요. 이제 모든 글을 출력해봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +, ]> +``` + +게시된 글 목록이 나타났네요! 장고 관리자 인터페이스로 만들었던 것들이에요. 그런데 파이썬으로 새 글을 포스팅하려면, 어떻게 해야 할까요? + +### 객체 생성하기 + +데이터베이스에 새 글 객체를 저장하는 방법에 대해 알아봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +하지만 여기에 뭔가 빼먹은 것이 하나 있어요. `me`(나)를 빼먹었네요. 작성자로서 `User`(사용자) 모델의 인스턴스를 가져와 전달해줘야 합니다. 어떻게 해야 할까요? + +먼저 User 모델을 불러옵니다. : + +{% filename %}command-line{% endfilename %} +```python +>>> from django.contrib.auth.models import User +``` + +데이터베이스에서 user는 어떤 일을 할까요? 함께 알아봅시다. : + +{% filename %}command-line{% endfilename %} +```python +>>> User.objects.all() +]> +``` + +슈퍼유저로 등록했었던 그 사용자군요! 이제 이 사용자의 인스턴스(instance)를 가져와 봅시다. : + +{% filename %}command-line{% endfilename %} +```python +>>> me = User.objects.get(username='ola') +``` + +보았듯이 `사용자이름(username)`이 'ola'인 `User` 인스턴스를 받아왔어요. 사용자 이름을 바꿨다면, 바뀐 이름을 넣어줘야겠죠. + +드디어 우리 게시물을 만들었네요 : + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +만세! 그런데 제대로 작동했는지 확인해봐야죠? + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +, , ]> +``` + +보세요, 목록에 게시글 하나가 더 늘었네요! + +### 글 더 추가하기 + +점점 재밌어질 거에요. 몇 개 글을 더 추가해서 잘 작동하는지 확인하세요. 2-3개 정도만 더 추가해보고 다음 내용으로 넘어갈게요. + +### 필터링하기 + +쿼리셋의 중요한 기능은 데이터를 필터링하는 거예요. 예를 들어, 우리는 ola라는 사용자가 작성한 모든 글을 찾고 싶다고 해볼게요. 이런 경우 `Post.objects.all()`에서 `all`대신, `filter`를 사용합니다. 쿼리셋 안에 있는 괄호 안에 원하는 조건을 넣어줄 거예요. 지금 이 경우에는 `작성자(author)`가 `나(me)`인 조건을 넣어야겠죠. 이걸 장고로 표현한다면 `author=me`가 됩니다. 이제 이 조건이 반영된 코드를 볼까요. + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(author=me) +[, , , ] +``` + +모든 글들 중, `제목(title)`에 'title'이라는 글자가 들어간 글들만을 뽑아내서 보고 싶다면요? + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(title__contains='title') +[, ] +``` + +> **Note** `title`와 `contains` 사이에 있는 밑줄(`_`)이 2개(`__`)입니다. 장고 ORM은 필드 이름("title")과 연산자과 필터("contains")를 밑줄 2개를 사용해 구분합니다. 밑줄 1개만 입력한다면, `FieldError: Cannot resolve keyword title_contains`라는 오류가 뜰 거예요. + +게시글 목록을 볼 수 있어요. `게시일(published_date)`로 과거에 작성한 글을 필터링하면 목록을 불러올 수 있어요. + +{% filename %}command-line{% endfilename %} +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) +[] +``` +안타깝게도, 파이썬 콘솔에서 추가한 게시물은 아직 보이지 않네요. 하지만 바꿀 수 있어요! 먼저 게시하려는 게시물의 인스턴스를 얻어야 해요. + +{% filename %}command-line{% endfilename %} +```python +>>> post = Post.objects.get(title="Sample title") +``` + +그리고 `publish`메서드를 사용해서 게시합시다! + +{% filename %}command-line{% endfilename %} +```python +>>> post.publish() +``` + +이제 (위쪽 화살표 버튼 3번을 누르고 `enter`를 눌러) 다시 게시된 글의 목록을 가져와 봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +[] +``` + +### 정렬하기 + +퀘리셋은 객체 목록을 정렬할 수 있어요. 이제 `created_date`필드를 정렬해봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.order_by('created_date') +[, , , ] +``` + +`-`을 맨 앞에 붙여주면 내림차순 정렬도 가능해요. + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.order_by('-created_date') +[, , , ] +``` + +### 쿼리셋 연결하기 + +쿼리셋들을 함께 **연결(chaining)**할 수 있어요. + +{% filename %}command-line{% endfilename %} +``` +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +이 방법은 정말 강력해 복잡한 쿼리도 작성할 수 있게 해준답니다. + +좋아요! 이제 다음 내용으로 넘어갈 때로군요! 다음 명령을 입력해, 쉘을 종료하세요. : + +{% filename %}command-line{% endfilename %} +```python +>>> exit() +$ +``` diff --git a/ko/django_start_project/README.md b/ko/django_start_project/README.md new file mode 100755 index 00000000000..c09d642c460 --- /dev/null +++ b/ko/django_start_project/README.md @@ -0,0 +1,188 @@ +# 나의 첫 번째 장고 프로젝트! + +> **Note** 이 장의 일부는 Geek Girls Carrots (http://django.carrots.pl/)의 튜토리얼을 기초로 작성되었습니다. + + +> **Note** 이 장의 일부는 Creative Commons Attribution-ShareAlike 4.0 International License에 준수하여 [django-marcador 튜토리얼](https://github.com/ggcarrots/django-carrots)를 기초로 작성되었습니다. django-marcador 튜토리얼 저작권은 Markus Zapke-Gründemann et al이 소유하고 있습니다. + +아주 간단한 블로그 사이트를 만들어 볼 거예요! + +첫 단계는 장고 프로젝트를 시작하는 거예요. 다시 말해 장고의 기본 골격을 만들어주는 스크립트를 실행할 거예요. 이 디렉토리와 파일 묶음은 나중에 사용할 것입니다. + +장고에서는 디렉토리와 파일명이 매우 중요하답니다. 파일명을 마음대로 변경해서도 안되고 다른 곳으로 옮겨도 안됩니다. 장고는 중요한 것들을 찾을 수 있게 특정한 구조를 유지해야 합니다. + +> 모든 작업은 가상환경(virtualenv) 안에서 해야 하는 것을 꼭 기억하세요. 현재 콘솔 창에서 접두어로 `(myvenv)`가 안 보인다면 먼저 virtualenv를 활성화해야 합니다. **Django 설치하기** 장에서 **virtualenv 작동법**에 대해 배웠어요. 윈도우에서는 `myvenv\Scripts\activate`를 타이핑하고, 맥 OS과 리눅스에서는 `source myvenv/bin/activate`을 입력하세요. + + + +맥 OS과 리눅스 콘솔에서는 다음과 같이 명령을 실행해야해요. **명령어 끝에 `.`(점, 마침표)을 입력하는 것을 잊지마세요.** : + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ django-admin startproject mysite . +``` + + +> 점 `.`은 현재 디렉토리에 장고를 설치하라고 스크립트에 알려주기 때문에 중요해요. (축약된 표시입니다) +> +> **Note** 위 명령을 입력할 때 `django-admin`로 시작하는 부분만 입력하세요. 여기에 보이는 `(myvenv) ~/djangogirls$`부분은 커맨드 라인에 입력을 가져오게 하는 메세지(프롬트프 prompt)입니다. + + + + + +윈도우에서도 **명령 끝에 `.`(점)을 입력하는 것을 잊지마세요** : + +{% filename %}command-line{% endfilename %} +``` +(myvenv) C:\Users\Name\djangogirls> django-admin.py startproject mysite . +``` + +> 점 `.`은 현재 디렉토리에 장고를 설치하라고 스크립트에 알려주기 때문에 중요해요. (축약된 표시입니다) +> +> **Note** 위 명령을 입력할 때 `django-admin.py`로 시작하는 부분만 입력하세요. 여기에 보이는 `(myvenv) C:\Users\Name\djangogirls>`부분은 커맨드 라인에 입력을 가져오게 하는 메세지(프롬프트 prompt)입니다. + + + +`django-admin.py`은 스크립트로 디렉토리와 파일들을 생성합니다. 스크립트 실행 후에는 아래와 같이 새로 만들어진 디렉토리 구조를 볼 수 있을 거예요. + + djangogirls + ├───manage.py +    └───mysite +            settings.py + urls.py + wsgi.py + __init__.py + + +`manage.py`는 스크립트인데, 사이트 관리를 도와주는 역할을 합니다. 이 스크립트로 다른 설치 작업 없이, 컴퓨터에서 웹 서버를 시작할 수 있습니다. + +`settings.py`는 웹사이트 설정이 있는 파일입니다. + +앞에 우편배달부는 어느 곳으로 편지를 배달해야 하는지 판단해야 한다고 말했던 것을 기억하고 있나요? `urls.py`파일은 `urlresolver`가 사용하는 패턴 목록을 포함하고 있습니다. + +지금 그 파일들을 수정하지 않을 거니 무시하세요. 실수로 파일을 지우지 않게 조심하세요! + +## 설정 변경 + +`mysite/settings.py`을 조금 고쳐 볼게요. 설치한 코드 에디터를 열어 파일을 열어주세요. + +웹사이트에 정확한 현재 시간을 넣으면 좋겠죠. [위키피디아 타임존 리스트][2]에 가서 해당 시간대(타임존)를 복사하세요. (예: `Asia/Seoul`) + + [2]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones + +Settings.py에서 `TIME_ZONE`있는 줄을 찾으세요. 그리고 이를 해당 시간대로 변경하세요. + +{% filename %}mysite/settings.py{% endfilename %} +```python + TIME_ZONE = 'Asia/Seoul' +``` + +다음으로 정적파일 경로를 추가할 거에요. (정적 파일은 튜토리얼 후반부에서 CSS와 함께 다룰 거에요) 파일의 *끝(end)*으로 내려가서, `STATIC_URL`항목 바로 아래에 `STATIC_ROOT`을 추가하세요. + +{% filename %}mysite/settings.py{% endfilename %} +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +`DEBUG`가`True`이고 `ALLOWED_HOSTS`가 비어 있으면, 호스트는 `['localhost', '127.0.0.1', '[::1]']`에 대해서 유효합니다. 애플리케이션을 배포할 때 PythonAnywhere의 호스트 이름과 일치하지 않으므로 다음 설정을 아래와 같이 변경해줘야 합니다. : + +{% filename %}mysite/settings.py{% endfilename %} +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Note** 크롬북 사용자는, `settings.py` 맨 마지막 줄에 아래 코드를 추가하세요. : +> `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` + +## 데이터베이스 설정하기 + +사이트 내 데이터를 저장하기 위한 많은 다양한 데이터베이스 소프트웨어들이 있습니다. 그중에서 우리는 `sqlite3`을 사용할 거예요. + +이미 `mysite/settings.py`파일 안에 설치가 되어있어요. + +{% filename %}mysite/settings.py{% endfilename %} +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +블로그에 데이터베이스를 생성하기 위해서 콘솔 창에서 아래 코드를 실행하세요. : `python manage.py migrate` (이 명령을 실행하기 위해서는 `djangogirls`디렉터리 안에 있는 `manage.py`가 필요합니다) + +잘 작동되면, 아래와 같은 내용이 나옵니다. + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py migrate +Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions +Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK +``` + +잘했어요! 이제 웹 서버를 시작해 웹 사이트가 잘 작동하는지 확인해봐요! + +프로젝트 디렉토리(`djangogirls`)에 `manage.py`파일이 있어야 합니다. 콘솔에서는 `python manage.py runserver`명령을 실행해, 웹 서버를 바로 시작할 수 있습니다. + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py runserver +``` + +크롬북 사용자는 아래 명령어를 입력하세요. : + +{% filename %}Cloud 9{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8000 +``` + +윈도우에서 `UnicodeDecodeError`오류가 난다면 아래 명령을 대신 써보세요. : + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py runserver 0:8000 +``` + +웹 사이트가 모두 잘 작동하는지 확인해봐요. 사용하는 브라우저(파이어폭스, 크롬, 사파리, 인터넷 익스플로어 등 여러분의 원하는 대로)를 열어서 주소를 입력하세요. + +{% filename %}browser{% endfilename %} +``` +http://127.0.0.1:8000/ +``` + +크롬북 사용자는 항상 테스트 서버를 통해 접근해야 합니다.: + +{% filename %}browser{% endfilename %} +``` +https://django-girls-.c9users.io +``` + +축하해요! 여러분은 방금 웹 서버를 활용한 첫 웹사이트를 만들었어요! 정말 멋지죠? + +![It worked!](images/it_worked2.png) + +웹 서버가 실행되는 동안 추가 명령을 입력 할 수있는 새로운 명령어 프롬프트가 표시되지 않습니다. 새 텍스트를 터미널에서 입력할 수 있지만 명령은 실행되지 않습니다. 웹 서버가 들어오는 요청을 수신 대기하기 위해 지속적으로 실행하고 있기 때문이에요. + +> 인터넷은 어떻게 작동될까요 장에서 웹 서버에 대해 배웠었어요. + + +웹 서버가 실행되는 동안 추가 명령을 입력하려면 새 터미널 창을 열고 virtualenv를 활성화하세요. 웹 서버를 중지하려면 실행중인 창으로 다시 전환하고 CTRL + C - Control+C 키를 함께 누르세요. (윈도우에서는 Ctrl + Break를 눌러야 할 수도 있습니다) + +다음 단계로 넘어갈 준비가 되셨나요? 새로운 것을 또 배워볼까요! diff --git a/ko/django_start_project/images/images/it_worked2.png b/ko/django_start_project/images/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/ko/django_start_project/images/images/it_worked2.png differ diff --git a/ko/django_start_project/images/it_worked2.png b/ko/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/ko/django_start_project/images/it_worked2.png differ diff --git a/ko/django_templates/README.md b/ko/django_templates/README.md new file mode 100755 index 00000000000..1d81a9ecdef --- /dev/null +++ b/ko/django_templates/README.md @@ -0,0 +1,104 @@ +# 장고 템플릿 + +이제 데이터를 보여줄 차례에요! 이를 위해 장고는 내장된 __템플릿 태그(template tags)__ 라는 유용한 기능을 제공합니다. + +## 템플릿 태그는 무엇인가요? + +HTML에 여러분은 파이썬 코드를 바로 넣을 수 없어요. 브라우져는 파이썬 코드를 이해할 수 없기 때문이에요요 브라우저는 HTML만을 알고 있어요. 알다시피 HTML는 정적이지만, 파이썬은 동적입니다. + +**템플릿 태그**는 파이썬을 HTML로 바꿔주어, 빠르고 쉽게 동적인 웹 사이트를 만들 수 있게 도와주어요. 야호! + +## post 목록 템플릿 보여주기 + +이전 장에서 글 목록이 들어있는 `posts` 변수를 템플릿에 넘겨주었습니다. 이제 넘겨진 `posts`변수를 받아 HTML에 나타나도록 해볼 차례예요. + +장고 템플릿 안에 있는 값을 출력하려면, 변수 이름 안에 중괄호를 넣어 표시해야 합니다. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{{ posts }} +``` + +`blog/templates/blog/post_list.html` 템플릿에서 하세요. 두 번째 `
`에서 세 번째 `
`까지를 `{{ posts }}`로 바꾸세요. 파일을 저장하고 페이지를 새로고침하면 이렇게 보입니다. + +![Figure 13.1](images/step1.png) + +아래와 같이 만들었어요 : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +[, ] +``` + +이는 장고가 `{{ posts }}`를 객체 목록으로 이해하고 처리했다는 것을 의미해요. **Python 시작하기** 장에서 어떻게 목록을 보여줬는지 기억하고 있나요? 맞아요, `for loop`을 이용해서죠! 장고 템플릿에서는 이렇게 써야 합니다. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +여러분의 템플릿 파일에 적용해 보세요. + +![Figure 13.2](images/step2.png) + +잘 작동하네요! 그런데 디자인이 별로죠. 앞에서 **HTML 시작하기** 했던 정적 블로그 게시글들이 보이게 만들면 참 좋을텐데 말이에요. HTML과 템플릿 태그를 섞어 사용하면 멋있게 만들 수 있어요. `body`를 아래와 같이 수정하세요. + + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}`{% for %}` 와 `{% endfor %}`사이에 넣은 모든 것은 목록의 모든 객체를 반복하게 됩니다. 페이지를 새로고침 해보세요.{% endraw %} + +![Figure 13.3](images/step3.png) + +`{{ post.title }}`라던가 `{{ post.text }}`같이 이전과 다른 표기법을 사용한 것을 눈치채셨나요? `Post`모델에서 정의한 각 필드의 데이터에 접근하기 위해 이 표기법을 사용합니다. 또한 `|linebreaksbr`같이 파이프 문자(|)도 사용해요. 이건 블로그 글 텍스트에서 행이 바뀌면 문단으로 변환하도록 하라는 의미입니다. 행바뀜을 문단으로 변환하는 필터를 적용한다는 표현을 쓰기도 합니다. + +## 한 가지 더 + +나 혼자만 웹 사이트를 보는 게 아니라 다른 사람들도 인터넷으로 볼 수 있으면 참 좋겠죠? 이제 PythonAnywhere에 다시 여러분이 만든 블로그를 배포해봅시다. 아래에 각 단계별로 요약했어요. + +* 제일 먼저, GitHub에 여러분의 코드를 git의 push를 사용해서 넣으세요. + +{% filename %}command-line{% endfilename %} +``` +$ git status +[...] +$ git add --all . +$ git status +[...] +$ git commit -m "Modified templates to display posts from database." +[...] +$ git push +``` + +* 다음 [PythonAnywhere](https://www.pythonanywhere.com/consoles/)로 돌아와 **Bash console**로 가서(또는 이미 닫았다면 새 콘솔창을 여세요), 다음 명령어를 실행하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ cd my-first-blog +$ git pull +[...] +``` + +* 마지막으로 [Web tab](https://www.pythonanywhere.com/web_app_setup/)에서 **Reload**를 누르세요. 업데이트 내용이 보여야 해요! PythonAnywhere 사이트의 블로그 게시물이 로컬 서버에 호스팅 된 블로그에 나타나는 게시물과 일치하지 않는 것이 정상입니다. 로컬 컴퓨터와 PythonAnywhere의 데이터베이스는 동기화되지 않습니다. + +축하합니다! 이제 장고 관리자 페이지로 가서 새 블로그 글을 추가하고(게시일을 추가하는 것을 잊지 마세요!) https://yourname.pythonanywhere.com/admin 로 가야하는 것을 잊지마세요. 새로고침하면 새 글이 보일 거에요. + +잘 작동하니까 멋지죠? 잘 해낸 여러분들이 참 자랑스러워요! 잠시 쉬고 오세요. :) + +![Figure 13.4](images/donut.png) + diff --git a/ko/django_templates/images/donut.png b/ko/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/ko/django_templates/images/donut.png differ diff --git a/ko/django_templates/images/images/donut.png b/ko/django_templates/images/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/ko/django_templates/images/images/donut.png differ diff --git a/ko/django_templates/images/images/step1.png b/ko/django_templates/images/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/ko/django_templates/images/images/step1.png differ diff --git a/ko/django_templates/images/images/step2.png b/ko/django_templates/images/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/ko/django_templates/images/images/step2.png differ diff --git a/ko/django_templates/images/images/step3.png b/ko/django_templates/images/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/ko/django_templates/images/images/step3.png differ diff --git a/ko/django_templates/images/step1.png b/ko/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/ko/django_templates/images/step1.png differ diff --git a/ko/django_templates/images/step2.png b/ko/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/ko/django_templates/images/step2.png differ diff --git a/ko/django_templates/images/step3.png b/ko/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/ko/django_templates/images/step3.png differ diff --git a/ko/django_urls/README.md b/ko/django_urls/README.md new file mode 100755 index 00000000000..680ae59c152 --- /dev/null +++ b/ko/django_urls/README.md @@ -0,0 +1,98 @@ +# 장고 urls + +첫 웹 페이지를 만들어 봅시다. 블로그 홈페이지요! 먼저 장고 url에 대해서 조금 배워보기로 합시다. + +## URL이란 무엇인가요? + +URL은 웹 주소랍니다. 웹 사이트를 방문할 때마다 브라우저의 주소창에 URL을 볼 수 있죠. 맞아요! `127.0.0.1:8000`이 바로 URL이에요. `https://djangogirls.org/`도 URL이랍니다. + +![Url](images/url.png) + +인터넷의 모든 페이지는 고유한 URL을 가지고 있어야 해요. 애플리케이션은 사용자가 URL을 입력하면 어떤 내용을 보여줘야 하는지 알고 있어요. 장고는 `URLconf (URL configuration)`를 사용합니다. `URLconf`는 장고에서 URL과 일치하는 뷰를 찾기 위한 패턴들의 집합입니다. + +## 장고 URL은 어떻게 작동할까요? + +코드 에디터에서 `mysite/urls.py`파일을 열면 아래 내용이 보일 거에요. + +{% filename %}mysite/urls.py{% endfilename %} +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +장고가 이미 어떤 내용을 넣어 두었네요. + +세 개의 따옴표들(`"""`, `'''`) 사이에 있는 줄들은 독스트링(docstring)입니다. 독스트링은 파일 제일 첫 부분, 클래스 또는 메서드 윗 부분에 작성해, 이들이 어떤 일을 수행하는지 알려줍니다. 파이썬은 이 부분을 실행하지 않을 거에요. + +이전 장에서 봤던 관리자 URL도 여기에 이미 있어요. + +{% filename %}mysite/urls.py{% endfilename %} +```python + path('admin/', admin.site.urls), +``` + +장고는 `admin/`로 시작하는 모든 URL을 *view*와 대조해 찾아냅니다. 무수히 많은 URL이 `admin URL`에 포함될 수 있어 일일이 모두 쓸 수 없답니다. 그래서 정규표현식을 사용합니다. + +## 나의 첫 번째 Django url! + +첫 번째 URL을 만들어 봅시다! 'http://127.0.0.1:8000/' 주소를 블로그 홈 페이지로 지정하고 여기에 글 목록을 보여줄 거에요. + +또한 `mysite/urls.py`파일을 깨끗한 상태로 유지하기 위해, `blog` 애플리케이션에서 메인 `mysite/urls.py`파일로 url들을 가져올 거에요. + +먼저 `blog.urls`를 가져오는 행을 추가해 봅시다. `blog.urls`를 가져오려면, `include` 함수가 필요합니다. `from django.urls ` 행을 찾아 `import` 뒤에 `include` 함수를 추가하세요. + +이제 `mysite/urls.py` 파일은 아래처럼 보일 거에요. + +{% filename %}mysite/urls.py{% endfilename %} +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +지금 장고는 http://127.0.0.1:8000/ 로 들어오는 모든 접속 요청을 `blog.urls`로 전송해 추가 명령을 찾을 거예요. + +## blog.urls + +`blog/urls.py`이라는 새 파일을 생성하세요. 좋아요! 이제 아래 두 줄을 추가하세요. + +{% filename %}blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views +``` + +여기서 장고 함수인 `path`와 `blog` 애플리케이션에서 사용할 모든 `views`를 가져왔어요. (물론 아직 뷰를 만들기 전이지만 일 분 내로 만들거에요!) + +그 다음, 첫 번째 URL 패턴을 추가하세요. + +{% filename %}blog/urls.py{% endfilename %} +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +이제 `post_list`라는 `view`가 루트 URL에 할당되었습니다. 이 URL 패턴은 빈 문자열에 매칭이 되며, 장고 URL 확인자(resolver)는 전체 URL 경로에서 접두어(prefix)에 포함되는 도메인 이름(i.e. http://127.0.0.1:8000/)을 무시하고 받아들입니다. 이 패턴은 장고에게 누군가 웹사이트에 'http://127.0.0.1:8000/' 주소로 들어왔을 때 `views.post_list`를 보여주라고 말해줍니다. + +마지막 부분인 `name='post_list'`는 URL에 이름을 붙인 것으로 뷰를 식별합니다. 뷰의 이름과 같을 수도 완전히 다를 수도 있습니다. 이름을 붙인 URL은 프로젝트의 후반에 사용할 거예요. 그러니 앱의 각 URL마다 이름 짓는 것은 중요합니다. URL에 고유한 이름을 붙여, 외우고 부르기 쉽게 만들어야 해요. + +http://127.0.0.1:8000/ 접속했는데 '웹 페이지를 사용할 수 없음(web page not available)'이라는 메시지가 표시되었나요?. 이는 서버(`runserver`라고 입력하는 것을 기억 하는가?)가 실행되지 않았기 때문이에요. 에러가 발생한 이유를 찾으려면 서버 콘솔 창을 보세요. +![Error](images/error1.png) + +콘솔에서 에러가 발생했네요. 하지만 걱정하지 마세요. 에러는 해결할 방법을 알려준답니다. : **no attribute 'post_list'** 라는 메시지가 보일거에요. 이 메시지는 장고가 찾고 사용하고자 하는 _뷰_가 아직 없다는 거에요. 이 단계에서 `/admin/`도 접속되지 않을 거에요. 앞으로 고쳐볼 테니 걱정하지 마세요. 혹시 여러분이 다른 에러 메시지를 보게 된다면, 웹 서버를 껐다 다시 켜보세요. 커맨드라인(혹은 콘솔)으로 가서 `Ctrl + C`를 눌러 웹 서버를 중단하면 됩니다. 다시 `python manage.py runserver` 명령어를 실행해 서버를 다시 시작하세요. + +> 장고 URL 설정에 대해 더 알고 싶다면 장고 공식 문서를 읽어보세요. : +https://docs.djangoproject.com/en/2.0/topics/http/urls/ diff --git a/ko/django_urls/images/error1.png b/ko/django_urls/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/ko/django_urls/images/error1.png differ diff --git a/ko/django_urls/images/images/error1.png b/ko/django_urls/images/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/ko/django_urls/images/images/error1.png differ diff --git a/ko/django_urls/images/images/url.png b/ko/django_urls/images/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/ko/django_urls/images/images/url.png differ diff --git a/ko/django_urls/images/url.png b/ko/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/ko/django_urls/images/url.png differ diff --git a/ko/django_views/README.md b/ko/django_views/README.md new file mode 100755 index 00000000000..2d8450bff08 --- /dev/null +++ b/ko/django_views/README.md @@ -0,0 +1,40 @@ +# 장고 뷰 만들기 + +지난 장에서 만들었던 버그를 잡을 시간이 왔어요! :) + +뷰(*view*) 는 애플리케이션의 "로직"을 넣는 곳이에요. 뷰는 이전 장에서 만들었던 `모델`에서 필요한 정보를 받아와서 `템플릿`에 전달하는 역할을 합니다. 다음 장에서 템플릿을 만들어 볼 거에요. 뷰는 __Python 시작하기__ 장에서 했던 것보다 어려워보이지만, 파이썬 함수일 뿐이에요. + +뷰는 `views.py` 파일 안에 있습니다. 우리는 *views*를 `blog/views.py`파일 안에 추가할 거에요. + +## blog/views.py + +좋아요. 이제 이 파일을 열고 안에 있는 내용을 살펴봅시다: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render + +# Create your views here. +``` + +별 내용이 없네요. 간단한 *view*를 만들어봅시다. + +{% filename %}blog/views.py{% endfilename %} +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +방금 `post_list`라는 함수(`def`)를 만들었습니다. 이 함수는 `요청(request)`을 넘겨받아 `render`메서드를 호출합니다. 이 함수는 `render` 메서드를 호출하여 받은(return) `blog/post_list.html`템플릿을 보여줍니다. + + +파일을 저장하고, http://127.0.0.1:8000/ 로 접속해 확인해보세요. + +에러가 발생했네요! 아래 내용을 읽어보세요. + +![Error](images/error.png) + +*TemplateDoesNotExist*는 쉽게 해결할 수 있습니다. 잘 따라왔다면 방금 에러가 보이는게 맞아요. 다음 장에서 버그를 해결하기 위해 템플릿 파일을 만들 거에요! + +> 장고 뷰에 대해 더 알고 싶다면 장고 공식 문서를 읽어보세요. : https://docs.djangoproject.com/en/2.0/topics/http/views/ + diff --git a/ko/django_views/images/error.png b/ko/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/ko/django_views/images/error.png differ diff --git a/ko/django_views/images/images/error.png b/ko/django_views/images/images/error.png new file mode 100644 index 00000000000..2ef613c8a5d Binary files /dev/null and b/ko/django_views/images/images/error.png differ diff --git a/ko/dynamic_data_in_templates/README.md b/ko/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..c6a50165b4c --- /dev/null +++ b/ko/dynamic_data_in_templates/README.md @@ -0,0 +1,78 @@ +# 템플릿 동적 데이터 + +블로그 글은 각각 다른 장소에 조각조각 나눠져있어요. `Post`모델은 `models.py`파일에, `post_list`모델은 `views.py`파일에 있어요. 그리고 앞으로 템플릿도 추가해야 합니다. HTML 템플릿에서 글 목록을 어떻게 보여줄까요? 이번 장에서는 콘텐츠(데이터베이스 안에 저장되어 있는 모델)를 가져와 템플릿에 넣어 보여주는 것을 해볼 거에요. + +*뷰(view)*는 모델과 템플릿을 연결하는 역할을 합니다. `post_list`를 *뷰*에서 보여주고 이를 템플릿에 전달하기 위해서는, 모델을 가져와야 합니다. 일반적으로 *뷰*가 템플릿에서 모델을 선택하도록 만들어야 합니다. + +자, 모두 준비됐나요? + +`blog/views.py`파일을 열어봅시다. `post_list` *뷰* 내용을 봅시다. + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +다른 파일에 있는 코드를 가져오는 방법, 기억나나요? `models.py`파일에 정의된 모델을 가져올 거에요. `from .models import Post`을 추가하세요. + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from .models import Post +``` + +`from` 다음에 있는 마침표(.)는 현재 *디렉토리* 또는 *애플리케이션*을 의미합니다. 동일한 디렉터리 내 `views.py`, `models.py`파일이 있기 때문에 `. 파일명` (`.py`확장자를 붙이지 않아도)으로 내용을 가져올 수 있습니다. 이제 `Post`모델을 불러봅시다. + +`Post`모델에서 블로그 글을 가져오기 위해서는 `쿼리셋(QuerySet)`이 필요합니다. + +## 쿼리셋(QuerySet) + +여러분은 이미 쿼리셋에 익숙해야 해요. 자세한 내용은 [Django ORM과 QuerySets](../django_orm/README.md) 장에서 다루었어요. + +자, 블로그 글 목록을 살펴봅시다. 글 목록을 게시일 `published_date`기준으로 정렬해볼까요? 이미 Django ORM과 QuerySets 장에서 해본 내용이에요. + +{% filename %}blog/views.py{% endfilename %} +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +다음으로 `blog/views.py`파일 내 `def post_list(request)`함수에 아래 코드 내용을 넣어봅시다. 제일 먼저 `timezone` 모듈을 불러와야하니 `from django.utils import timezone`를 추가하는 것을 잊지 마세요. + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from django.utils import timezone +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` QuerySet을 템플릿 컨텍스트에 전달하는 것입니다. 걱정하지 마세요. 맨 마지막에 이 부분을 다룰 거에요. + +우리는 `posts`라는 *변수*를 만들고 있다는 것을 기억하세요. 이 변수는 퀴리셋의 이름입니다. + +다음 장에서 `posts`쿼리셋을 템플릿에 보내는 방법을 배울 거에요. + +`render`함수에는 매개변수 `request`(사용자가 요청하는 모든 것)와 'blog/post_list.html' 템플릿이 있습니다. `{}`이 보일 텐데, 이곳에 템플릿을 사용하기 위해 매개변수를 추가할 거에요. (이 매개변수를`'posts'`라고 할거에요)`{'posts': posts}`이렇게 작성할거에요. `:`이전에 문자열이 와야하고, 작은 따옴표`''`를 양쪽에 붙이는 것을 잊지 마세요. + +이제 `blog/views.py`코드는 아래 코드처럼 보일 겁니다. + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +여기까지에요! 템플릿 파일로 돌아가 쿼리셋을 보이게 만들어 봅시다. + +쿼리셋에 대해 더 알고 싶다면 장고 공식 문서를 읽어보세요. : +https://docs.djangoproject.com/en/2.0/ref/models/querysets/ diff --git a/ko/extend_your_application/README.md b/ko/extend_your_application/README.md new file mode 100755 index 00000000000..6e8ae2790e3 --- /dev/null +++ b/ko/extend_your_application/README.md @@ -0,0 +1,188 @@ +{% set warning_icon = '' %} + +# 프로그램 애플리케이션 확장하기 + +지금까지 웹 사이트 제작 단계를 모두 마쳤어요. 모델, url, 뷰와 템플릿을 만드는 방법을 알게 되었고요. 웹 사이트를 예쁘게 꾸미는 방법도 알게 되었어요. + +이제 또 실습해봅시다! + +블로그 게시글이 각 페이지마다 보이게 만들어 봅시다. + +이미 앞에서 `Post`모델을 만들었으니 `models.py`에 새로 추가할 내용은 없어요. + +## Post에 템플릿 링크 만들기 + +`blog/templates/blog/post_list.html`파일에 링크를 추가하는 것부터 시작합시다. 아래와 같이 보일 거에요. : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %} `post`제목 목록이 보이고 해당 링크를 클릭하면, `post`상세 페이지로 이동하게 만들어 볼 거에요. `

{{ post.title }}

`부분을 수정해 봅시다. {% endraw %} + +{% filename %}{{warning_icon}}blog/templates/blog/post_list.html{% endfilename %} +```html +

{{ post.title }}

+``` + +{% raw %}`{% url 'post_detail' pk=post.pk %}`을 설명할 때가 왔군요! `{% %}`는 장고 템플릿 태그을 말합니다. URL를 생성해 사용해봅시다.{% endraw %} + +`blog.views.post_detail`는 `post_detail` *뷰* 경로입니다. `blog`는 응용프로그램(디렉터리 `blog`)의 이름인 것을 꼭 기억하세요. `views`는 `views.py`파일명이에요. 마지막 부분 `post_detail`는 *view* 이름입니다. + +`pk = post.pk`이란 무엇일까요? `pk`는 데이터베이스의 각 레코드를 식별하는 기본키(Prmiary Key)의 줄임말 입니다. Post 모델에서 기본키를 지정하지 않았기 때문에 장고는 `pk`라는 필드를 추가해 새로운 블로그 게시물이 추가될 때마다 그 값이 1,2,3 등으로 증가하게 됩니다. Post 객체의 다른 필드 (제목, 작성자 등)에 액세스하는 것과 같은 방식으로 post.pk를 작성하여 기본 키에 액세스합니다 `post.pk`를 써서 기본키에 접근할 수 있고 같은 방법으로 `Post`객체내 다른 필드(`title`, `author`)에도 접근할 수 있습니다! + +이제 http://127.0.0.1:8000/ 를 열어보세요. 아마 오류 메세지가 나올 거에요. (아직 `post_detail` *뷰*를 만들지 않아 오류가 나는 거에요) 이런 화면이 보일 거에요. : + +![NoReverseMatch error](images/no_reverse_match2.png) + +## Post 상세 페이지 URL 만들기 + +`post_detail`*뷰*가 보이게 `urls.py`에 URL를 만들어 봅시다! + +첫 게시물의 상세 페이지 **URL**이 http://127.0.0.1:8000/post/1/가 되게 만들 거에요. + +`blog/urls.py`파일에 URL을 만들어, 장고가 `post_detail` *뷰*로 보내, 게시글이 보일 수 있게 해봅시다. `path('post//', views.post_detail, name='post_detail')`코드를 `blog/urls.py`파일에 추가하면 아래와 같이 보일 거에요. + +{% filename %}{{warning_icon}}blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +여기서 `post//`는 URL 패턴을 나타내요. 하나씩 차근차근 알아볼 거에요. + - `post/`란 URL이 **post** 문자를 포함해야 한다는 것을 말합니다. 아직 할 만하죠? + - ``는 조금 까다롭습니다. 장고는 정수 값을 기대하고 이를 `pk`라는 변수로 뷰로 전송하는 것을 말합니다. + - `/`은 다음에 **/** 가 한 번 더 와야 한다는 의미입니다. + +브라우저에 `http://127.0.0.1:8000/post/5/`라고 입력하면, 장고는 `post_detail` *뷰*를 찾아 매개변수 `pk`가 `5`인 값을 찾아 *뷰*로 전달합니다. + +좋아요, 새로운 URL 패턴을 `blog/urls.py`에 추가했어요! 페이지를 새로고침 하세요. http://127.0.0.1:8000/ 쾅! 또 에러가 났어요! 예상했던 대로에요! + +![AttributeError](images/attribute_error2.png) + +다음 단계는 무엇일까요? 그렇죠. 뷰를 추가해야죠! + +## Post 상세 페이지 내 뷰 추가하기 + +*뷰*에 매개변수 `pk`를 추가해봅시다. *뷰*가 `pk`를 식별해야겠죠? 그래서 함수를 `def post_detail(request, pk):`라고 정의합니다. urls(`pk`)과 동일하게 이름을 사용해야 합니다. 변수가 생략되면 오류가 날 거예요! + +블로그 게시글 한 개만 보려면, 아래와 같이 쿼리셋(queryset)을 작성해야해요. + +{% filename %}{{warning_icon}}blog/views.py{% endfilename %} +```python +Post.objects.get(pk=pk) +``` + +하지만 이 코드에는 문제가 있어요. 만약 해당 `primary key(pk)`의 `Post`를 찾지 못하면 오류가 나올 거에요! + +![DoesNotExist error](images/does_not_exist2.png) + +우리가 원하는게 아니죠! 장고에는 이를 해결하기 위해 `get_object_or_404`라는 특별한 기능을 제공해요. `pk`에 해당하는 `Post`가 없을 경우, 멋진 페이지(`페이지 찾을 수 없음 404 : Page Not Found 404)`를 보여줄 거에요. + +![Page not found](images/404_2.png) + +나중에 `페이지 찾을 수 없음(Page not found)`페이지를 예쁘게 만들 수 있어요. 지금 당장 중요한 것이 아니니 이 부분은 생략할게요. + +좋아요. 이제 `views.py`파일에 새로운 *뷰*를 추가합시다! + +`blog/urls.py`파일에서 `views.post_detail`라는 뷰를 `post_detail`이라 이름을 붙이도록 URL 법칙을 만들었어요. 이는 장고가 `post_detail`이라는 이름을 해석할 때, `blog/views.py`파일 내부의 `post_detail`이라는 뷰 함수로 이해하도록 해줍니다. + +`blog/views.py`파일을 열고, `from`으로 시작하는 행에서 다음과 같이 코드를 추가해주세요. : + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render, get_object_or_404 +``` + +그리고, 파일 마지막 부분에 *뷰*를 추가하세요. + +{% 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}) +``` + +그리고 브라우저를 새로고침 하세요. http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +잘 작동하네요! 그런데 블로그 제목 링크를 클릭하면 어떻게 되나요? + +![TemplateDoesNotExist error](images/template_does_not_exist2.png) + +이런! 또 에러가 나왔네요! 하지만 이제 어떻게 해야하는지 알고 있죠? 드디어 템플릿을 추가할 차례에요! + +## Post 상세 페이지 템플릿 만들기 + +`blog/templates/blog` 디렉터리 안에 `post_detail.html`라는 새 파일을 생성하고 아래와 같이 코드를 작성하세요. + +{% 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 %} +``` + +다시 한 번 `base.html`을 확장한 거에요. `content`블록에서 블로그 글의 게시일, 제목과 내용을 보이게 만들었어요. + +{% raw %} 가장 중요한 부분은 `{% if ... %} ... {% endif %}`라는 템플릿 태그인데, 내용이 있는지 확인할 때 사용합니다. (`if ... else ..`구문은 __Python 시작하기__ 장에서 배웠어요) `post`의 `게시일(published_date)`이 있는지, 없는지를 확인하는 거에요. {% endraw %} + +페이지를 새로고침하면 `페이지 찾을 수 없음(Page not found)` 페이지가 없어졌어요. + +![Post detail page](images/post_detail2.png) + +야호! 잘 되네요! + +## 한 가지만 더 합시다. 배포하세요! + +PythonAnywhere에도 웹사이트가 잘 작동하는지 봐야겠죠? 다시 한 번 배포합시다. + +{% 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 +``` +* 그 다음 [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/)을 여세요. + +{% filename %}command-line{% endfilename %} +``` +$ cd my-first-blog +$ git pull +[...] +``` + +* 마지막으로 [Web tab](https://www.pythonanywhere.com/web_app_setup/)에서 **Reload(다시 불러오기)** 를 누르세요. + +배포를 마쳤습니다. 잘 작동되는지 확인해 보세요! 축하합니다. diff --git a/ko/extend_your_application/images/404_2.png b/ko/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/ko/extend_your_application/images/404_2.png differ diff --git a/ko/extend_your_application/images/attribute_error2.png b/ko/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..33a3b36b1d3 Binary files /dev/null and b/ko/extend_your_application/images/attribute_error2.png differ diff --git a/ko/extend_your_application/images/does_not_exist2.png b/ko/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/ko/extend_your_application/images/does_not_exist2.png differ diff --git a/ko/extend_your_application/images/no_reverse_match2.png b/ko/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/ko/extend_your_application/images/no_reverse_match2.png differ diff --git a/ko/extend_your_application/images/post_detail2.png b/ko/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/ko/extend_your_application/images/post_detail2.png differ diff --git a/ko/extend_your_application/images/post_list2.png b/ko/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/ko/extend_your_application/images/post_list2.png differ diff --git a/ko/extend_your_application/images/template_does_not_exist2.png b/ko/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/ko/extend_your_application/images/template_does_not_exist2.png differ diff --git a/ko/how_the_internet_works/README.md b/ko/how_the_internet_works/README.md new file mode 100755 index 00000000000..fd57199cf07 --- /dev/null +++ b/ko/how_the_internet_works/README.md @@ -0,0 +1,45 @@ +# 인터넷은 어떻게 작동할까요 + +> **Note** 이번 장은 Jessica McKellar의 글 ["How the internet works"](http://web.mit.edu/jesstess/www/)을 기초로 작성되었습니다. + +우리는 매일 인터넷을 사용합니다. 그러나 브라우저 주소창에 [http://djangogirls.org](http://djangogirls.org)를 입력하고 `엔터`키를 누르면 어떤 일이 일어나는지 알고 있나요? + +웹 사이트란 동영상, 음악, 사진 파일처럼 하드 디스크에 저장된 파일묶음과 같습니다. 웹 사이트가 일반 파일과 다른 점은 HTML이라는 프로그래밍 코드가 들어있다는 것이에요. + +프로그래밍에 익숙하지 않은 분이라면, HTML을 이해하기 어려울 수도 있어요. 하지만 브라우저들(크롬, 사파리, 파이어폭스)은 HTML을 사랑한답니다. 웹 브라우저는 코드를 이해하고 지시에 따라 정확하게 구현되도록 설계되었어요. + +다른 파일처럼 HTML도 하드 디스크 어딘가에 저장해야 합니다. 인터넷에선 *서버*라는 특별하고 강력한 컴퓨터를 사용합니다. 데이터를 저장하고 제공하는 것이 주된 목적이기 때문에 모니터나 마우스, 키보드가 필요 없지요. 데이터를 *제공(serve)*하는 일을 하므로 *서버(server)*라고 부릅니다. + +인터넷은 어떻게 생겼을지 궁금하죠? + +여러분들의 이해를 돕기 위해 그림을 그려봤어요! + +![Figure 1.1](images/internet_1.png) + +조금 지저분해 보이죠? 사실 인터넷은 수 많은 기계들이 연결된(앞서 얘기한 *서버* 라는) 하나의 네트워크랍니다. 수백, 수천 대의 기계들이요! 긴, 아주 긴 케이블들이 지구 전체를 둘러싸고 있답니다! 해저 케이블 지도 사이트 (http://submarinecablemap.com/) 에 가보면 케이블이 얼마나 복잡하게 연결되어있는지 알 수 있어요. 아래 사진은 웹사이트에서 가져온 스크린 샷입니다. + +![Figure 1.2](images/internet_3.png) + +멋지지 않나요? 그러나 인터넷에 연결된 모든 기계 전부 연결하는 것은 불가능한 일입니다. 그래서 특정한 기계(예를 들어 https://djangogirls.org 가 저장되었다면)에 도달하기 위해서는 수없이 많은 다른 기계들을 통과해야 한답니다. + +그림으로 보면 다음과 같습니다. + +![Figure 1.3](images/internet_2.png) + +주소창에 https://djangogirls.org 을 입력하는 건, "사랑하는 장고걸스 여러분, 저는 장고걸스 웹사이트를 보고 싶어요. 저에게 그 웹 사이트를 보여주세요!"라고 편지를 써서 보내는 것과 같아요. + +이 편지는 나와 가장 가까이에 있는 동네 우체국으로 갑니다. 받을 사람에게 가까운 다른 우체국으로, 다른 우체국으로 전달되어 주소지에 최종 도착하게 됩니다. 특별한 점은 같은 장소에서 많은 양의 편지(*데이터 패킷*)을 보내면, 각기 다른 우체국(*라우터*)를 통해 전달된다는 것입니다. 또 우체국마다 전달되는 방법이 다르지요. + +![Figure 1.4](images/internet_4.png) + +맞아요, 간단해요. 메시지를 보내고 답장을 기다리는 거죠. 물론 종이랑 펜 대신 몇 바이트의 데이터를 사용하는 것이지만, 기본 개념은 같답니다! + +그리고 도로명과 도시 이름, 우편번호를 쓰는 대신 IP주소라는 것을 써야 해요. 컴퓨터는 먼저 DNS(도메인 주소 시스템)에 djangogirls.org IP주소가 무엇인지 물어봅니다. 전화주소록에서 연락하고 싶은 대상의 이름을 찾아 전화번호와 주소를 찾아내는 방법과 비슷하지요. + +편지를 보낼 때 규칙을 지켜야 제대로 배달되어요. 주소가 적혀있어야 하고, 우표가 있어야 해요. 수령인이 읽을 수 있는 언어로 작성되어야 하고요. 이처럼 *데이터 패킷*에도 같이 적용되어야 웹사이트를 볼 수 있습니다. 우리는 HTTP(Hypertext Transfer Protocol: 하이퍼텍스트 전송 프로토콜)라는 프로토콜을 사용합니다. + +이처럼 기본적으로 웹 사이트를 만들려면 그 웹 사이트가 동작할 *서버*(기계)가 필요합니다. *서버*에서 *요청*(편지)을 받으면, 다시 웹 사이트(다른 편지)로 되돌려줍니다. + +장고걸스 튜토리얼을 시작할 때부터, 장고가 무슨 일을 하는지 궁금하셨죠? 답장 전송 시 모든 사람이 같은 내용을 받는 것이 아니라, 받는 사람마다 각각 다른 답장을 보내면 더 좋지 않을까요? 이처럼 장고는 각 사용자에게 맞춤형 편지를 보낼 수 있게 도와준답니다. :) + +이제 수다는 그만하고, 정말 뭔가 만들어 보자고요! diff --git a/ko/how_the_internet_works/images/internet_1.png b/ko/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/ko/how_the_internet_works/images/internet_1.png differ diff --git a/ko/how_the_internet_works/images/internet_2.png b/ko/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/ko/how_the_internet_works/images/internet_2.png differ diff --git a/ko/how_the_internet_works/images/internet_3.png b/ko/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/ko/how_the_internet_works/images/internet_3.png differ diff --git a/ko/how_the_internet_works/images/internet_4.png b/ko/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..aeb95a91164 Binary files /dev/null and b/ko/how_the_internet_works/images/internet_4.png differ diff --git a/ko/html/README.md b/ko/html/README.md new file mode 100755 index 00000000000..d5c61a1bcfe --- /dev/null +++ b/ko/html/README.md @@ -0,0 +1,209 @@ +# HTML 시작하기 + +템플릿은 어떤 일을 하는지 궁금했죠? + +템플릿이란 서로 다른 정보를 일정한 형태로 표시하기 위해 재사용 가능한 파일을 말해요. 예를 들면 편지에도 같은 템플릿을 사용할 수 있어요. 편지의 내용이나 수신인 주소는 달라져도 같은 디자인, 레이아웃을 사용하는 때도 있으니까요. + +장고 템플릿 양식은 HTML을 사용합니다. (HTML은 인터넷은 어떻게 작동할까요에서 들어본 내용이죠) + +## HTML이란 무엇일까요? + +HTML은 크롬이나 파이어폭스, 사파리 같은 웹 브라우저가 해석할 수 있는 간단한 코드예요. 사용자에게 웹 페이지를 표시할 때 사용합니다. + +HTML은 "HyperText Markup Language"의 줄임말로, __하이퍼텍스트(HyperText)__ 는 페이지 간 하이퍼링크가 포함된 텍스트라는 뜻입니다. **마크업(Markup)** 이란 누군가(브라우저)가 문서를 해석하도록 표시(mark)를 했다는 뜻이에요. HTML은 **태그(tag)** 들로 이루어져 있어요. 태그는 `<(여는 태그)` 로 시작하고 `>(닫는 태그)`로 끝나는데, 이는 마크업 **요소(elements)** 를 말합니다. + +## 첫 번째 템플릿! + +템플릿은 곧 템플릿 파일을 만든다는 뜻이에요. 템플릿 파일에 모든 내용이 저장되겠죠? 이미 알고 있을 것 같아요. + +템플릿은 `blog/templates/blog`디렉토리에 저장됩니다. 먼저 `blog`디렉터리 안에 하위 디렉터리인 `templates`을 생성하세요. 그리고 `template`디렉토리 내 `blog`라는 하위 디렉토리를 생성하세요. + +``` +blog +└───templates + └───blog +``` + +(왜 똑같은 `blog`디렉토리를 하나 더 만들어야하는지 궁금할 거에요. 나중에 알게 되겠지만, 나중에 폴더 구조가 복잡해 질 때 좀더 쉽게 찾기 위해 사용하는 관습적인 방법이랍니다) + +다음 `blog/templates/blog`디렉토리 안에 `post_list.html`이라는 새 파일(현재는 빈 파일)을 만드세요. + +그리고 웹 사이트를 확인해보세요. http://127.0.0.1:8000/ + +> `TemplateDoesNotExists`에러가 보인다면, 웹 서버를 다시 시작하세요. 커맨드라인(혹은 콘솔)으로 가서 `Ctrl + C`를 눌러 웹 서버를 중단합니다. 다시 `python manage.py runserver`명령을 실행해 서버를 재시작합니다. + +![Figure 11.1](images/step1.png) + +이제 에러가 사라졌어요! 축하합니다. 하지만 웹 사이트에 아무것도 보이지 않네요. 이제 하나씩 고쳐나가 봅시다. + +`post_list.html`템플릿 파일에 아래 내용을 넣어주세요. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +

Hi there!

+

It works!

+ +``` + +웹 사이트가 어떻게 보이나요? 확인해보세요. http://127.0.0.1:8000/ + +![Figure 11.2](images/step3.png) + +잘 작동하네요! 잘 했습니다. + +* 모든 웹 페이지는 ``로 시작해 ``로 마칩니다. 가장 기본적인 태그이지요. 모든 내용은 시작 태그 ``과 닫는 태그인`` 사이에 넣어야합니다. +* `

`는 문단 태그입니다. 문단의 끝 역시 `

`로 닫습니다. + +## Head & body + +각 HTML 페이지는 두 가지 요소, **head**와 **body**로 구분됩니다. + +*  **head** 는 문서 정보를 가지고 있지만, 웹 페이지에서 보이지 않는 정보들을 담는 영역입니다. + +*  **body** 란 웹 페이지에 직접적으로 보이는 내용이 들어갑니다. 웹 페이지의 내용은 모두 이 body태그안에 들어갑니다. + +``는 브라우저에 페이지에 대한 설정들을 알려주고, ``는 실제 페이지에 보여줄 내용을 알려줍니다. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +파일을 저장하고 페이지를 새로고침 하세요. + +![Figure 11.3](images/step4.png) + +브라우저는 어떻게 "Ola's blog"를 웹 페이지의 제목으로 이해했을까요? 바로 브라우저가 `Ola's blog`를 해석해 브라우저 제목 표시줄에 내용을 반영한 것입니다. (해당 페이지를 북마크를 할 때도 동일합니다) + +태그는 `/`로*태그 마침*하고 여러 태그를 *중첩(nested)*해서 사용할 수 있습니다. (모든 태그를 꼭 닫아줘야합니다) + +태그는 상자에 뭔가 집어넣는 것과 같아요. ``라고 하는 큰 상자가 있다면, 상자 안에는 `` 상자가 있고, 또 그 상자 안에는 `

`라는 더 작은 상자가 있는 것과 같아요. + +*태그 마침*과 *중첩*의 규칙을 잘 따라야 해요. 그렇지 않으면, 브라우저가 해석할 수 없어 페이지가 원하는 모습으로 나오지 않게 됩니다. + +## 맞춤형 템플릿 만들기 + +앞으로 좀 더 재밌어질 거에요. 나만의 템플릿을 만들어 볼 거에요! 아래 태그들을 짚고 넘어가세요. + +* `

A heading

` - 큰 제목 +* `

A sub-heading

` - 중 제목 +* `

A sub-sub-heading

` - 소 제목... `
`레벨까지 사용할 수 있습니다. +* `text` - 텍스트 기울기 (Italic) +* `text` - 텍스트를 두껍게(Bold) +* `
` - 줄바꿈 (br은 스스로 닫히는 태그로 속성을 사용할 수 없습니다) +* `link` - 하이퍼링크 걸기 +* `
  • first item
  • second item
`- 목록 만들기 +* `
` - 페이지 섹션 + +아래 템플릿 예제가 있습니다. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +이 템플릿에는 세 개의 `div` 섹션이 있습니다. + +* 첫 번째 `div`는 블로그 제목을 가지고 있어요. 머리말과 링크이지요. +* 나머지 두 `div`는 블로그 게시일과 `h2`로 된 블로그 제목과 링크를가 있습니다. 두 `p(문단)`의 하나는 날짜를, 다른 하나는 블로그를 가리키죠. + +태그로 웹 페이지 화면이 아래와 같이 바뀝니다. + +![Figure 11.4](images/step6.png) + +야호! 이전 템플릿은 **동일한 내용** 만을 보여줬어요. 이처럼 템플릿은 **같은 양식** 을 사용하지만, **다른** 정보들을 보여줄 때 사용됩니다. + +장고 관리자에서 추가한 글을 보여주는 방법은 곧 알아볼 거에요. + +## 하나 더: 배포하기! + +방금 고친 내용을 인터넷에서도 봐야겠죠? PythonAnywhere으로도 배포해 봅시다. + +### GitHub에 코드를 커밋, 푸시하세요! + +제일 먼저, 마지막 배포 이후 수정된 파일을 확인해 봅시다. (PythonAnywhere가 아닌 로컬에서 실행하세요) + +{% filename %}command-line{% endfilename %} +``` +$ git status +``` + +`djangogirls` 디렉터리에서 `git`에게 현재 폴더에 있는 모든 변경 내용을 포함시키라고 말해봅시다. + +{% filename %}command-line{% endfilename %} +``` +$ git add --all . +``` + +> **Note** `-A` ("all"의 축약어)는 `git`이 삭제한 파일을 인식합니다. (기본적으로, 새로 추가하거나 변경한 파일만 인식합니다) `.`가 현재 디렉터리라는 것을 기억하고 있죠? (3장에서 언급한 내용이에요) + +파일 업로드 전, `git`으로 업로드 할 파일들을 확인해봅시다. (`git`에서 업로드 할 모든 파일들은 녹색으로 표시됩니다) + +{% filename %}command-line{% endfilename %} +``` +$ git status +``` + +거의 다 왔습니다. 이제 github 저장소에 변경 사항을 히스토리에 저장할 단계예요. `커밋 메시지(commit message)`를 입력해, 수정 변경된 내용을 알려줄 거에요. 메시지 내용은 아무거나 적어도 되지만, 나중에 작업 내용을 기억할 수 있도록 설명 내용을 간단히 입력하는 것이 좋습니다. + +{% filename %}command-line{% endfilename %} +``` +$ git commit -m "Changed the HTML for the site." +``` + +> **Note** 커밋 메시지를 쌍따옴표(")로 감싸주세요. + +완성되면, github으로 업로드(푸쉬) 하세요. + +{% filename %}command-line{% endfilename %} +``` +$ git push +``` + + +### PythonAnywhere에서 새 코드를 가져와, 웹 앱을 다시 불러옵니다. + +* [PythonAnywhere 콘솔 페이지](https://www.pythonanywhere.com/consoles/)를 열고 **배시 콘솔** (또는 새로운 창)에서 아래와 같이 명령어를 입력합니다. + +{% filename %}command-line{% endfilename %} +``` +$ cd ~/my-first-blog +$ git pull +[...] +``` + +코드가 다운되고 있죠? 다 되었는지 확인하고 싶으면 **파일 탭(Files tab)**에 가서 내 코드가 PythonAnywhere에 있는지 확인합니다. + +* 마지막으로 [Web tab](https://www.pythonanywhere.com/web_app_setup/)으로 가서 웹 앱을 **다시 불러오기(Reload)**를 하세요. + +인터넷에도 업데이트 되었어요! 브라우저를 새로고침하면 변경된 내용을 확인할 수 있어요. 변경한 내용이 보일 거에요. :) diff --git a/ko/html/images/step1.png b/ko/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/ko/html/images/step1.png differ diff --git a/ko/html/images/step3.png b/ko/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/ko/html/images/step3.png differ diff --git a/ko/html/images/step4.png b/ko/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/ko/html/images/step4.png differ diff --git a/ko/html/images/step6.png b/ko/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/ko/html/images/step6.png differ diff --git a/ko/images/application.png b/ko/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/ko/images/application.png differ diff --git a/ko/installation/README.md b/ko/installation/README.md new file mode 100755 index 00000000000..52cd67e4252 --- /dev/null +++ b/ko/installation/README.md @@ -0,0 +1,49 @@ +# 집에서 튜토리얼을 보시는 분들에게 + +[장고걸스 워크샵](http://djangogirls.org/events/)이 아닌 집에서 튜토리얼을 학습하는 분들은 이 장을 건너뛰고 [인터넷은 어떻게 작동할까요](../how_the_internet_works/README.md)부터 읽으세요. + +이번 장에는 설치와 관련된 모든 내용을 모두 모았습니다. 장고걸스 워크샵은 행사 전날, '설치의 밤'에서 모든 프로그램을 설치하고 개발환경을 준비하는 시간이 준비되어 있습니다. 워크샵 중간에 설치 문제로 진행에 어려움을 겪지 않게 하기 위해서지요. + +컴퓨터에 먼저 모든 설치를 끝내고 내용을 따라가도 좋고, 설치 부분을 건너뛰고 먼저 학습을 시작해도 됩니다. 튜토리얼 뒷부분에서도 설치 방법에 대해 다룹니다. + +모두 행운을 빌어요! + +# 설치하기 + +우리는 워크숍 하루 동안 나만의 블로그를 완성해 볼거에요. 워크숍 사전에 모든 설치가 완벽하게 끝냈다면, 온종일 코딩할 준비가 된 거랍니다. + + +{% include "/chromebook_setup/instructions.md" %} + + +# Python 설치하기 +{% include "/python_installation/instructions.md" %} + +# virtualenv 환경 설정 및 Django 설치하기 +{% include "/django_installation/instructions.md" %} + +# 코드 에디터 설치하기 +{% include "/code_editor/instructions.md" %} + +# Git 설치하기 +{% include "/deploy/install_git.md" %} + +# GitHub 계정 만들기 +[GitHub.com](http://www.github.com)에서 무료 사용자 계정으로 회원가입을 하세요. + +# PythonAnywhere 계정 만들기 +{% include "/deploy/signup_pythonanywhere.md" %} + +# 읽어보기 + +축하합니다. 드디어 코딩을 시작할 준비가 되었답니다! 워크숍 전에 튜토리얼의 앞 부분을 미리 읽어보세요. + +* [인터넷은 어떻게 작동할까요](../how_the_internet_works/README.md) +* [Command line 시작하기](../intro_to_command_line/README.md) +* [Python 시작하기](../python_introduction/README.md) +* [Django란 무엇인가요](../django/README.md) + + +# 워크샵 즐기기! +워크샵을 시작하면, 앞 부분의 내용을 모두 읽었다는 가정 하에 바로 [나의 첫 번째 장고 프로젝트!](../django_start_project/README.md) 장부터 할 수 있게 준비해주세요. diff --git a/ko/intro_to_command_line/README.md b/ko/intro_to_command_line/README.md new file mode 100755 index 00000000000..71a3220215c --- /dev/null +++ b/ko/intro_to_command_line/README.md @@ -0,0 +1,302 @@ +# 커맨드 라인 시작하기 + +> **Note** 집에서 학습하시는 분들은 ['내 친구 커맨드 라인를 소개합니다'](https://www.youtube.com/watch?v=jvZLWhkzX-8) 영상을 보세요. + +벌써부터 기대되지 않나요? 바로 일 분안에 여러분도 코딩 할 수 있어요! + +**여러분에게 첫 번째 친구를 소개합니다. 바로, 커맨드 라인(command line) 입니다!** + +해커들이 사용하는 까만 윈도우 창을 어떻게 사용하는지 보여드릴 거에요. 처음에는 이 검은색 창이 무서워 보일 수도 있지만, 명령어를 기다리는 아이일 뿐이에요. + +> **Note** 이 설명서에서 '디렉토리(directory)'와 '폴더(folder)' 모두 같은 뜻입니다. + +## 커맨드 라인은 무엇일까요? + +**커맨드 라인(command line)**은 **커맨드-라인 인터페이스(command-line interface)**, *cmd*, *CLI*, *프롬프트(prompt)*, *콘솔(console)*, *터미널(terminal)* 라고도 불리는 텍스트 기반 응용 프로그램으로 파일 보기, 처리, 조작이 가능합니다. 윈도우 익스플로러나 맥OS의 파인더와 비슷합니다. 하지만 그래픽 인터페이스는 없어요. + +## 커맨드 라인 열기 + +커맨드 라인을 열어 몇 가지 실습해봅시다. + +### 윈도우 + +시작메뉴로 가서 → 모든 프로그램 → 보조프로그램 → 명령 프롬프트. + +### macOS + +응용 프로그램 → 유틸리티 → 터미널. + +### 리눅스 + +프로그램 → 보조 프로그램 → 터미널을 실행하면 될 거에요. 하지만 시스템에 따라 다를 수도 있으니 구글에서 찾아보세요. + +## 프롬프트(prompt) + +이제 까만 배경이나 하얀 배경의 윈도우가 뭔가를 지시해주길 기다리고 있을 거에요. + +맥이나 리눅스의 경우, 이런 `$` 기호가 보일 거예요 : + + $ + + +윈도우의 경우, 이런 `>` 기호가 보일 거에요 : + + > + + +각 명령어는 접두어로 위와 같은 기호와 공백 한 칸이 붙습니다. 하지만 여러분이 입력할 필요는 없어요. 컴퓨터가 대신 해줄 거예요 :) + +> 잠깐만요 : 상황에 따라 프롬트 기호 앞에 `C:\Users\ola>` 혹은 `Olas-MacBook-Air:~ ola$` 같은 것이 보일 수 있는데, 문제가 있는 것이 아니라 아주 잘 동작하는 거랍니다. 이 튜토리얼에서는 간략히 작성한 거에요. + +## 나의 첫 번째 명령 (야호!) + +쉬운 것 부터 시작할게요. 아래 명령어를 입력해 보세요 : + + $ whoami + + +또는 + + > whoami + + +그리고 `enter`를 누르세요. 다음과 같이 보일 거에요 : + + $ whoami + olasitarska + + +컴퓨터는 사용자 이름을 스크린에 보여줍니다. 이거 좀 괜찮죠? :) + +> 복사 붙여넣기 하지 말고, 직접 입력해 보세요. 더 잘 외워질 거예요! + +## 기본 명령어 + +각각의 운영체제에 따라, 명령어들이 조금씩 다를 수도 있으니까, 여러분의 운영체제에 해당하는 설명을 따라주세요. 그럼 같이 해볼까요? + +### 현재 디렉터리 + +현재 어느 디렉터리에 있는지 확인하려면 아래 명령어를 입력하고 `enter`를 눌러보세요. + +맥 : + + $ pwd + /Users/olasitarska + + +윈도우 : + + > cd + C:\Users\olasitarska + + +위와 비슷한 결과가 출력되었을 거예요. 커맨드라인을 열면, 항상 `Home` 디렉터리에서 시작합니다. + +> Note: 'pwd' 는 'print working directory'의 줄임말이에요. + +* * * + +### 파일과 디렉터리 목록 보기 + +디렉토리에 어떤 것이 있는지 확인하려면 이렇게 입력하세요. + +맥 : + + $ ls + Applications + Desktop + Downloads + Music + ... + + +윈도우 : + + > 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 + ... + + +* * * + +### 현재 디렉터리 변경 + +자, 바탕화면 디렉터리로 가볼까요 : + +맥 : + + $ cd Desktop + + +윈도우 : + + > cd Desktop + + +변경되었는지 확인합시다. + +맥 : + + $ pwd + /Users/olasitarska/Desktop + + +윈도우 : + + > cd + C:\Users\olasitarska\Desktop + + +맞군요! + +> 전문가 팁 : `cd D`까지 입력하고 `tab`(탭) 키를 누르면, 커맨드 라인이 자동으로 나머지 부분을 완성해주어, 입력하는 시간을 절약할 수 있어요. "D"로 시작하는 폴더가 2개 이상일 경우, `tab`(탭) 키를 두 번 누르면, 해당하는 폴더들을 모두 보여줍니다. + +* * * + +### 새 디렉터리 생성하기 + +바탕 화면에 `practice` 디렉터리를 만들어 볼까요? 이렇게 하면 됩니다. +(되도록 폴더명은 한국어 대신 영어로 작성하는 것이 좋아요 - 장고걸스서울) + +맥 : + + $ mkdir practice + + +윈도우 : + + > mkdir practice + + +이 간단한 명령어로, 바탕화면에 `practice`폴더를 만듭니다. 바탕화면에서 직접 보거나, 명령어 `ls` 혹은 `dir`을 실행해서 확인할 수 있어요! 한 번 해보세요. + +> 전문가 팁 : 같은 명령어를 여러 번 반복해 입력하고 싶지 않다면, 키보드 `위 화살표`와 `아래 화살표`를 누르세요. 최근 사용한 명령어들을 볼 수 있어요. + +* * * + +### 연습문제! + +연습 과제를 드릴게요. 새로 만든 `practice`디렉터리 안에 `test` 라는 이름의 디렉터리를 만들어 보세요. 명령어 `cd`와 `mkdir`을 사용하세요. + +#### 답 : + +맥 : + + $ cd practice + $ mkdir test + $ ls + test + + +윈도우: + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + + +축하합니다 :) + +* * * + +### 정리 + +지금까지 연습한 내용을 모두 지워봅시다! + +우선, 바탕화면으로 돌아가야해요. + +맥 : + + $ cd .. + + +윈도우 : + + > cd .. + + +`..`과 `cd` 명령은 현재 디렉터리에서 부모 디렉터리(현재 디렉터리 레벨보다 상위인)로 보내줄겁니다. + +현재 위치를 확인해 보세요. + +맥 : + + $ pwd + /Users/olasitarska/Desktop + + +윈도우 : + + > cd + C:\Users\olasitarska\Desktop + + +이제 `practice` 디렉터리를 삭제해봐요. + +> **Note**: `del`, `rmdir`, `rm`을 사용하여 파일을 지우면, 재복구가 불가능합니다. *지워진 파일들을 영원히 사라지게 됩니다!* 그러니, 이 명령어들은 꼭 주의해서 사용하세요. + +맥 : + + $ rm -r practice + + +윈도우 : + + > rmdir /S practice + practice, Are you sure ? Y + + +완료되었습니다! 완전히 삭제되었는지 확인해 보세요. + +맥 : + + $ ls + + +윈도우 : + + > dir + + +### 종료 + +여기까지 입니다! 이제 커맨드 라인을 닫으세요. 해커 스타일로 해볼까요, 괜찮죠?:) + +맥 : + + $ exit + + +윈도우 : + + > exit + + +멋지지 않나요? :) + +## 요약 + +아래 유용한 명령어를 모았습니다. + +| 명령어(윈도우) | 명령어(맥 OS/리눅스) | 설명 | 예시 | +| -------- | ------------- | ------------------- | ------------------------------------------------- | +| exit | exit | 창을 닫는다 | **exit** | +| cd | cd | 디렉터리를 변경한다 | **cd test** | +| dir | ls | 디렉터리 혹은 파일 목록을 보여준다 | **dir** | +| copy | cp | 파일을 복사한다 | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | 파일을 이동한다 | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | 새 디렉터리를 만든다 | **mkdir testdirectory** | +| del | rm | 디렉터리 혹은 파일을 지운다 | **del c:\test\test.txt** | + +지금까지 커맨드 라인 명령어 일부를 알아보았어요. 이 정도만 알고 있어도 코딩하는데 문제가 없습니다. + +더 알고 싶다면, [ss64.com](http://ss64.com)에서 각 운영체제별로 정리된 명령어 모음을 볼 수 있어요. + +## 준비되셨나요? + +이제 파이썬의 세계로 빠져봅시다! diff --git a/ko/python_installation/README.md b/ko/python_installation/README.md new file mode 100755 index 00000000000..75bcb86b438 --- /dev/null +++ b/ko/python_installation/README.md @@ -0,0 +1,18 @@ +# 파이썬 시작하기 + +잘 오셨습니다! + +제일 먼저 파이썬(Python)에 대해 설명할게요. 파이썬은 아주 인기있는 프로그래밍 언어로, 웹 사이트는 물론 게임, 과학용 소프트웨어, 그래픽 소프트웨어 등 다양한 것을 만들 수 있답니다. + +파이썬은 1980년대 후반에 프로그래밍 언어를 기계 뿐만 아니라 인간도 읽을 수 있도록 만들고자 탄생한 언어입니다. 파이썬이 다른 프로그래밍 언어보다 훨씬 간단하게 보이고, 배우기도 쉬운 이유도 그 때문이죠. 하지만 파이썬은 아주 강력한 기능을 가진 프로그래밍 언어랍니다. + +# 파이썬 설치하기 + +> **Note** 크롬북 사용자는 이번 장을 건너뛰고,  [크롬북에서 설치하기](../chromebook_setup/README.md) 장으로 넘어가세요. + + +> **Note** 설치를 마친 분은 다음 장으로 넘어가세요! + + +{% include "/python_installation/instructions.md" %} + diff --git a/ko/python_installation/images/add_python_to_windows_path.png b/ko/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..d9bc40e7403 Binary files /dev/null and b/ko/python_installation/images/add_python_to_windows_path.png differ diff --git a/ko/python_installation/images/python-installation-options.png b/ko/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..e4ed9e985e4 Binary files /dev/null and b/ko/python_installation/images/python-installation-options.png differ diff --git a/ko/python_installation/images/windows-plus-r.png b/ko/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/ko/python_installation/images/windows-plus-r.png differ diff --git a/ko/python_installation/instructions.md b/ko/python_installation/instructions.md new file mode 100755 index 00000000000..91f156d660f --- /dev/null +++ b/ko/python_installation/instructions.md @@ -0,0 +1,106 @@ + +> **Note** 집에서 학습하시는 분들은 [파이썬 & 코드에디터 설치하기](https://www.youtube.com/watch?v=pVTaqzKZCdA) 영상을 보세요. + + +> **Note** 이 장은 Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 튜토리얼을 기초로 작성되었습니다. + +장고는 파이썬 언어로 작성됐습니다. 파이썬이 있어야 장고를 할 수 있어요. 우선 설치부터 해볼까요! 우리는 파이썬 3.6를 사용할 거예요. 이보다 낮은 버전이 설치되었다면, 버전 업그레이드 하세요. + + + +사용 중인 컴퓨터 윈도우 운영체제가 32비트인지 64비트인지 확인하려면 https://support.microsoft.com/en-au/kb/827218 에서 확인하세요. 윈도우 용 파이썬은 https://www.python.org/downloads/windows/ 웹 사이트에서 다운로드 할 수 있습니다. "Latest Python 3 Release - Python x.x.x"링크를 클릭하세요. **64 비트** 버전의 Windows인 경우 **Windows x86-64 executable installer**를 다운로드하세요. 이외에는 **Windows x86 executable installer**을 다운로드하세요. 설치 프로그램을 다운로드 한 후에 실행(더블 클릭)하고 지시 사항을 따르세요. + +> **Note** 설치하는 동안 "Setup(설치하기)"이라고 표시된 창이 나타납니다. 다음과 같이 "Add Python 3.6 to PATH(python3.6를 경로에 추가)"체크 박스를 체크하고 "Install Now(지금 설치하기)"를 클릭하세요. + +![Don't forget to add Python to the Path](../python_installation/images/python-installation-options.png) + +다음 단계에서는 윈도우 명령 프롬프트를 사용할 거에요 (윈도우 명령어도 알려드릴 거에요. 지금은 일부 명령을 입력해야하는 경우 시작 메뉴 → 모든 프로그램 → 보조 프로그램 → 명령 프롬프트로 이동하세요. Windows 키를 누르고 "실행"창이 팝업 될 때까지 "R"키를 누르면 됩니다. 명령어를 입력하려면 "cmd"를 입력하고 "실행"창에서 엔터키를 누르세요. (윈도우 최신 버전에서는 "명령 프롬프트"가 메뉴에 없을 수 있어 검색해 실행하면 됩니다) + +![Type "cmd" in the "Run" window](../python_installation/images/windows-plus-r.png) + +> **Note** 윈도우 이전 버전(윈도우7, Vista 등)에서 파이썬 3.6.x 설치오류가 생기면, 다음과 같이 해보세요. + +1. 모든 윈도우 업데이트 후 파이썬 3.6를 다시 설치합니다. +2. 또는 [파이썬 이전 버전](https://www.python.org/downloads/windows/)을 설치합니다. + +버전이 낮은 파이썬 설치 시, 설치 화면이 위에 표시된 것과 약간 다르게 보일 수 있습니다. "Add Python 3.6. to PATH"를 보려면 아래로 스크롤 한 다음 왼쪽의 버튼을 클릭하고 "Will be installed on local hard drive(로컬 하드 드라이브에 설치)"를 선택하세요. + +![Add Python to the Path, older versions](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Note** macOS에서는 파이썬 설치하기 전, Mac 설정에서 App Store가 아닌 패키지를 설치할 수 있도록 설정해야합니다. 시스템 환경 설정 (응용 프로그램 폴더에 있음)으로 이동하여 "보안 및 개인 정보"를 클릭 한 다음 "일반"탭을 클릭하세요. "다운로드 한 응용 프로그램 허용"이 "Mac App Store"로 설정된 경우 "Mac App Store 및 확인된 개발자"로 변경하세요. + +웹 사이트로 가서 파이썬 설치 파일을 다운 받으세요. : https://www.python.org/downloads/release/python-351/ + +* *macOS 64-bit/32-bit installer* 파일을 다운받습니다. +* *python-3.6.1-macosx10.6.pkg*을 더블클릭해 설치합니다. + + + + + +이미 파이썬이 설치되었을 겁니다. 설치된 버전을 확인하려면 콘솔을 열고 다음 명령을 입력하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python 3.6.1 +``` + +3.6.0 버전과 같이 '마이크로 버전'의 파이썬이 설치되어있는 경우 업그레이드 할 필요가 없습니다. 다른 버전의 파이썬을 설치하고 싶으면 아래와 같이하면 됩니다. : + + + + + + +콘솔에 아래 명령어를 입력하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ sudo apt install python3.6 +``` + + + + + +콘솔에 아래 명령어를 입력하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ sudo dnf install python3 +``` + + + + + +콘솔에 아래 명령어를 입력하세요. : + +{% filename %}command-line{% endfilename %} +``` +$ sudo zypper install python3 +``` + + + +설치가 성공적으로 마쳤는지 확인하려면, *터미널* 을 열고 `python3` 명령어를 입력해보세요. + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python 3.6.1 +``` + +> **Note** 윈도우에서 `python3`명령어를 입력한 후 에러 메세지가 나온다면 `python`(`3`을 빼고)이라 입력해보고 파이썬 3.6버전인지 체크해보세요. + +설치 도중 문제가 생기거나 잘되지 않으면 코치들에게 도움을 요청하세요! 가끔은 경험이 많은 분들에게 도움을 받는 것이 더 좋을 수 있습니다. diff --git a/ko/python_introduction/README.md b/ko/python_introduction/README.md new file mode 100755 index 00000000000..b998cae833b --- /dev/null +++ b/ko/python_introduction/README.md @@ -0,0 +1,989 @@ +{% set warning_icon = '' %} + +# 파이썬 시작하기 + +> **Note** 이 장의 일부는 [Geek Girls Carrots 튜토리얼](https://github.com/ggcarrots/django-carrots)을 기초로 작성되었습니다. + + +자, 지금부터 코딩 한번 해볼까요? + +## 파이썬 프롬프트(Python prompt) + +> **Note** 집에서 학습하시는 분은 [파이썬 기초: 숫자, 문자열, 리스트, 변수, 에러](https://www.youtube.com/watch?v=MO63L4s-20U) 영상을 보세요. + +파이썬과 놀아보려면 *커맨드 라인* 창을 켜야합니다. [Command Line 시작하기](../intro_to_command_line/README.md) 장에서 어떻게 하는지 배웠어요. + +준비되었다면, 아래 내용을 잘 따라오세요. + +파이썬 콘솔을 실행하기 위해, 윈도우에서는 `python`을 입력하고, 맥OS나 리눅스라면 `python3`를 입력하고 `엔터`를 입력하세요. + +{% filename %}command-line{% endfilename %} +``` +$ python3 +Python 3.6.1 (...) +Type "help", "copyright", "credits" or "license" for more information. +>>> +``` + +## 첫 번째 파이썬 명령어! + +파이썬을 실행시키면 프롬프트가 `>>>`로 바뀝니다. 이제부터는 파이썬 언어 명령어만 사용할 수 있다는 뜻이예요. `>>>`를 입력할 필요 없어요. 파이썬이 대신해 줄 테니까요. + +파이썬 콘솔에서 나가려면 `exit()`을 입력하거나, 윈도우에서는 `Ctrl + Z`를, 맥이나 리눅스에서는 `Ctrl + D`를 입력하면 됩니다. 그러면 `>>>` 는 사라질 거에요. + +물론 지금 파이썬 콘솔을 종료할 필요가 없답니다. 아직 파이썬 콘솔에 대해 좀 더 배워야 하니까요. 아주 간단한 사칙연산부터 해봅시다. `2 + 3`을 입력하고 `엔터`를 쳐보세요. + +{% filename %}command-line{% endfilename %} +```python +>>> 2 + 3 +5 +``` + +잘했어요! 값이 출력되었나요? 파이썬은 수학을 할 줄 알아요. 다른 사칙연산도 입력해보세요. + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +2의 3승과 같이 지수 계산을 위해서는 아래와 같이 입력하세요. + +{% filename %}command-line{% endfilename %} +```python +>>> 2 ** 3 +8 +``` + +조금 놀아보고 다시 여기로 돌아와주세요. :) + +이처럼 파이썬은 훌륭한 계산기랍니다. 이외에도 할 수 있는 것들이 많아요! + +## 문자열(String) + +이름을 써봅시다. 따옴표(")를 양쪽에 감싸서 입력해보세요. + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola" +'Ola' +``` + +처음으로 문자열을 만들었군요! 문자열은 컴퓨터가 처리할 수 있는 연속된 문자를 말해요. 문자열은 반드시 시작과 끝이 문자여야 하고, 양쪽을 작은따옴표(`'`) 나 큰따옴표(`"`)로 감싸야 해요. (차이점은 없어요) 이 따옴표는 파이썬에게 안에 문자열이 들어있다고 알려줍니다. + +문자열은 줄줄이 사탕처럼 연결될 수 있어요. 이렇게요. + +{% filename %}command-line{% endfilename %} +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +문자열과 숫자를 함께 곱할 수도 있어요. + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +문자열 안에 작은따옴표를 넣고 싶다면, 두 가지 방법이 있어요. + +큰따옴표("")를 사용하는 방법과 + +{% filename %}command-line{% endfilename %} +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +백슬래시(`\`)를 이용하는 방법이예요. + +{% filename %}command-line{% endfilename %} +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola".upper() +'OLA' +``` + +방금 문자열에 `upper`이라는 __메소드(method)__를 사용했어요! 메소드는(`upper()`같은 것)는 파이썬이 객체(`"Ola"`같은)를 대상으로 수행할 수 있는 일련의 명령을 말해요. + +총 글자 수를 알고 싶을 때, `len()` __함수(function)__을 사용해요. + +{% filename %}command-line{% endfilename %} +```python +>>> len("Ola") +3 +``` + +왜 어떤 함수는 문자열 뒤에 `.`를 붙이고, (`"Ola".upper()`처럼), 또 어떤 함수는 뒤에 문자열이 들어간 괄호(`len("Ola")처럼`)를 붙이는지 궁금하셨죠? ` upper()`같은 함수는 문자열만 쓸 수 있는 함수로, **메서드(method)**라고 합니다. 반면에 `len()`과 같은 함수는 문자열이나 숫자 등 여러 객체를 사용할 수 있어요. 그래서 `len()`함수에 `"Ola"`를 매개변수(parameter)로 준 거예요. + +### 요약하기 + +자, 문자열은 충분히 다루었어요. 지금까지 우리가 공부한 내용을 정리해봅시다. + +* **프롬프트(the prompt)** - 명령어(코드)를 파이썬 프롬프트에 입력하면 파이썬이 응답합니다. +* **숫자와 문자열(numbers and strings)** - 사칙연산을 할 때는 숫자를 사용하고 글을 다룰 때는 문자열을 사용합니다. +* **연산자(operators)** - `+` 나 `*`같은 연산자를 사용합니다. +* **함수(functions)** - 객체에 `upper()`나 `len()`처럼 명령을 수행합니다. + +지금까지 가장 기본적인 프로그래밍 문법을 살펴보았어요. 더 어려운 부분으로 넘어가도 괜찮겠죠? + +## 오류 + +새로운 것을 배워봅시다. 총 글자 수도 알아냈듯이 숫자 수도 알 수 있을까요? `len(304023)`을 입력하고 `엔터`를 입력하세요. + +{% filename %}{{warning_icon}}command-line{% endfilename %} +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +첫 번째 에러가 나타났어요! 여기서 {{warning_icon}} 아이콘은 `이 코드는 여러분이 예상하는 대로 실행되지 않을 것입니다.`를 의미합니다. (의도적으로 만들어낸 것이라도) 실수도 배움의 중요한 과정 중 하나랍니다! + +"int"(정수)객체는 길이가 없기 때문이지요. 이제 어떻게 할 수 있을까요? 숫자(number)를 문자열(String)로 바꿔 쓸 수 있지 않을까요? 문자열은 길이를 갖고 있으니까요, 그렇죠? + +{% filename %}command-line{% endfilename %} +```python +>>> len(str(304023)) +6 +``` + +잘 되네요! 앞에서 우리는 `len()`함수 내부에 `str()`함수를 사용했어요. `str()`함수는 모든 대상을 문자열로 변환한답니다. + +* `str()`함수는 대상을 **문자열**로 변환합니다 +* `int()`함수는 대상을 **정수**로 변환합니다. + +> 중요 : 숫자는 텍스트로 변환되지만, 반대로 텍스트는 숫자로 변환될 수 없습니다. - 그렇다면 `int('hello')`는 가능할까요? + +## 변수 + +변수는 프로그래밍에서 중요한 개념입니다. 변수란 여러 번 사용될 수 있게 이름을 붙인 거랍니다. 작성한 코드를 다 기억할 필요없이 코드를 읽기 쉽게 하기 위해 사용하지요. 프로그래머들은 변수를 사용해 데이터를 저장합니다. + +`name`이라는 새로운 변수를 만들어 보세요. + +{% filename %}command-line{% endfilename %} +```python +>>> name = "Ola" +``` + +봤죠? 간단해요. 매우 쉬워요! "이름은 올라와 같다"라고 쓰는 거에요. + +여러분도 알겠지만, 프로그램은 이전에 수행한 내용을 보여주지 않아요. 그렇다면 변수값을 알려면 어떻게 해야할까요? `name`를 입력하고 `엔터`를 입력하세요. + +{% filename %}command-line{% endfilename %} +```python +>>> name +'Ola' +``` + +야호! `name`은 여러분이 만든 첫 변수랍니다! :) 언제든지 변수값을 바꿀 수 있어요. + +{% filename %}command-line{% endfilename %} +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +또 함수 안에 변수명을 사용할 수 있습니다. + +{% filename %}command-line{% endfilename %} +```python +>>> len(name) +5 +``` + +멋지죠? 물론 변수는 무엇이든지 담을 수 있으니, 당연히 숫자도 가능하죠! 해봅시다. : + +{% filename %}command-line{% endfilename %} +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +그런데 만약 잘못된 변수명을 입력하면 어떻게 나올까요? + +{% filename %}{{warning_icon}}command-line{% endfilename %} +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +에러가 나타났네요! 보다시피, 파이썬에는 많은 종류의 오류들이 있습니다. **NameError**는 그 중 하나입니다. 파이썬은 아직 정의하지 않은 변수를 사용하면 이 오류를 보여줍니다. 나중에도 **NameError**라는 오류를 보게 된다면, 이름에 오타가 있는지 확인해야겠죠. + +조금 더 변수와 놀아봅시다. 그리고 어떤 것들을 할 수 있는지 살펴보아요! + + +## print() 함수 + +아래와 코드를 따라 입력해보세요. : + +{% filename %}command-line{% endfilename %} +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +`name`을 쳤을 때, 파이썬 해석기는 'name' 변수의 문자열 *표현(representation)*으로 응답하는데, 그 모양은 작은따옴표('')로 둘러싸인 M-a-r-i-a 문자입니다. `print(name)`라고 치면, 파이썬은 화면에 따옴표없이 더 깔끔한 화면을 보여(`print`)줍니다. + +나중에 차차 알게 될 거지만, `print()`는 함수 안에 있는 내용을 출력할 때, 여러 내용들을 확인하고 싶을 때 유용하게 사용됩니다. + + +## 리스트(List) + +문자열과 정수 외에도 객체를 정렬할 수 있는 여러 방법들이 있습니다. **리스트**라고 불리는 아이에 대해 알아봅시다. 리스트란 서로 다른 객체들을 일렬로 나열한 것이라고 생각하시면 됩니다. + +아래와 같이 리스트를 만듭시다. : + +{% filename %}command-line{% endfilename %} +```python +>>> [] +[] +``` + +리스트가 비어있네요. 별로 유용해 보이지 않죠? 이제 로또 번호 목록을 만들어 봅시다. 매번 직접 우리가 반복하기는 귀찮으니, 리스트에 변수를 넣어봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +좋아요, 리스트를 만들었어요! 이제 무엇을 할 수 있을까요? 리스트 안에 들어간 로또 번호는 몇 개인지 알려면 어떻게 해야할까요? `len()`함수를 사용할 수 있겠죠? 이미 앞에서 해봤어요! + +{% filename %}command-line{% endfilename %} +```python +>>> len(lottery) +6 +``` + +네! `len()`함수는 리스트 안에 있는 객체의 수를 알려줍니다. 유용하죠? 이제 정렬을 해봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> lottery.sort() +``` + +숫자를 오름차순으로 정렬했지만 출력값이 보이지 않네요. 어떻게 변했는지 리스트를 출력해 확인해봅시다. : + +{% filename %}command-line{% endfilename %} +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +리스트 안에 있는 숫자들은 오름차순으로 정렬되었어요. 잘했습니다! + +이번에는 내림차순으로 정렬해볼까요? + +{% filename %}command-line{% endfilename %} +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +참 쉽죠? 여러분이 리스트에 새로운 값을 추가하고 싶다면 이렇게 해보세요. : + +{% filename %}command-line{% endfilename %} +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +첫 번째 숫자 하나만 보여주고 싶다면, **인덱스(indexes)**를 사용하세요. 인덱스는 리스트 내 아이템 위치를 나타내는 숫자입니다. 프로그래머는 0부터 세는 것을 선호합니다. 따라서 리스트에 있는 첫 번째 객체는 인덱스 0부터 시작하고, 그 다음은 1, 그 다음은 2.. 순번대로 번호를 매길 수 있습니다. `.[index숫자]`를 입력해볼까요. + +{% filename %}command-line{% endfilename %} +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +이렇게 리스트 이름과 대괄호`([])`안 객체의 인덱스를 사용해서, 리스트 안에 있는 다른 객체로도 접근이 가능합니다. + +리스트 내 아이템을 지우려면 인덱스와 함께 `pop()`메소드를 사용하면 됩니다. 아래 예제 코드를 따라하면서 배운 내용을 다시 기억해봅시다. 리스트에 맨 처음 있는 객체를 삭제해봅시다. + +{% 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] +``` + +마법 같지 않나요! + +재미로 몇 번 더 여러 인덱스를 테스트해보세요: 6, 7, 1000, -1, -6, -1000 등이요. 결과값을 보기 전에 미리 정답을 유추해보세요. 생각했던 정답이 나왔나요? + +이번 장에서 배운 리스트 메서드와 관련된 모든 내용은 파이썬 공식 문서에서 있습니다. :https://docs.python.org/3/tutorial/datastructures.html + +## 딕셔너리(Dictionary) + +> 집에서 학습하시는 분들은 [파이썬 기초: 딕셔너리(Dictionaries)](https://www.youtube.com/watch?v=ZX1CVvZLE6c) 영상을 보세요. + +딕셔너리는 리스트와 유사하지만, 인덱스가 아닌 키(key)로 값을 찾습니다. 키는 문자열이든, 숫자든지 상관없습니다. 빈 딕셔너리를 만드는 문법은 아래와 같습니다. + +{% filename %}command-line{% endfilename %} +```python +>>> {} +{} +``` + +방금 비어있는 딕셔너리를 하나 만들었답니다. 만세! + +자, 이제 아래 명령어를 따라 작성해 봅시다. (딕셔너리 안에 있는 값은 마음대로 수정해도 됩니다) + +{% filename %}command-line{% endfilename %} +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + + +위 명령어로 `paticipant`라는 새 변수를 만들었습니다. 이 변수 안에는 3개의 키-값 쌍이 들어있어요. + +* 키(key) 는 `name`이고, 값(value) 는 `'Ola'`를 가리킵니다. (`string`입니다) +* 키 `country`의 값은 `'Poland'`입니다. (또 다른 `string`입니다) +* 그리고 키 `favorite_numbers`는 `[7, 42, 92]`를 가리킵니다. (`list`에 숫자 세 개가 있습니다) + +아래와 같은 문법으로 개별 키의 값에 접근할 수 있습니다. + +{% filename %}command-line{% endfilename %} +```python +>>> print(participant['name']) +Ola +``` + +리스트와 조금 비슷해보이지만 인덱스가 아닌, 이름을 사용해 값을 찾는다는 것을 기억하세요. + +만약 파이썬에 키(key)에 대응하는 값이 없다면 어떻게 될까요? 그럼 테스트 해봅시다! + +{% filename %}{{warning_icon}}command-line{% endfilename %} +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +보세요, **KeyError**에러가 났습니다. 파이썬은 친절하게 `'age'`키가 딕셔너리에 존재하지 않는다고 알려주네요. + +그렇다면 언제 딕셔너리를 쓰고, 언제 리스트를 사용해야할까요? 이를 위한 판단 기준은 다음과 같습니다. + +* 리스트 : 아이템 정렬이 필요할 때 +* 딕셔너리 : 키(key)과 값(value)이 서로 연관되어 있거나, 효과적으로 (키를 사용해서) 어떤 값을 찾을 때 + +딕셔너리는 리스트와 유사하지만, *변경(mutable)*할 수 있습니다. 딕셔너리가 만들어진 후에도, 그 값을 마음대로 변경할 수 있다는 뜻이지요. 키/값을 나중에 추가할 수 있답니다. + + {% filename %}command-line{% endfilename %} +```python +>>> participant['favorite_language'] = 'Python' +``` + +리스트처럼 딕셔너리도 `len()`메서드를 사용하여 키-값 쌍의 수를 리턴합니다. 한 번 커맨드라인에서 확인합시다. + +{% filename %}command-line{% endfilename %} +```python +>>> len(participant) +4 +``` + +다들 이해를 잘 하고 있으리라 믿어요 :) 딕셔너리로 좀 더 재미있는 것을 해볼까요? + +`pop()`메소드로 딕셔너리에 있는 아이템을 삭제해봅시다. 아래 예제를 따라서 `'favorite_numbers'` 키를 삭제해봅시다. + +{% filename %}command-line{% endfilename %} +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +'favorite_numbers' 에 해당하는 키-값 쌍이 삭제되었네요. + +키에 해당하는 값도 변경할 수 있습니다. 이렇게 해보세요. : + +{% filename %}command-line{% endfilename %} +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +`'country'` 키에 해당하는 값이 `'Poland'`에서 `'Germany'`로 변경되었네요. :) 재미있죠? 야호! 또 굉장한 것을 배웠네요. + +### 요약 + +훌륭하네요! 이제 모두가 프로그래밍에 대해서 많은 것을 알게 되었어요. 지금까지 우리가 배운 내용을 정리해볼까요. + +* **에러** - 파이썬이 작성된 명령어를 이해하지 못할 때 에러가 발생합니다. +* **변수** - 객체에 적절한 이름을 붙여 코드를 가독성 좋게 작성할 수 있습니다. +* **리스트** - 특정한 순서로 정렬된 객체들이 저장된 목록입니다. +* **딕셔너리** - 키(key)-값(value) 쌍으로 이루어진 객체들이 저장됩니다. + +다음 내용이 기대되나요? :) + +## 비교하기 + +> 집에서 학습하시는 분들은 [파이썬 기초: 비교연산자(Comparisons)](https://www.youtube.com/watch?v=ZX1CVvZLE6c) 영상을 보세요. + +비교는 프로그래밍에서 매우 중요한 부분이에요. 비교를 할 때, 제일 쉬운 방법은 무엇일까요? 바로 숫자입니다. 어떻게 하는지 알아볼게요. : + +{% filename %}command-line{% endfilename %} +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +파이썬이 두 숫자를 비교했네요. 파이썬은 메서드 결과도 비교 가능합니다. 멋지죠? + +두 숫자를 비교할 때 왜 등호 부호 `==`를 사용하는지 궁금했죠? 변수에 값을 넣을 때 등호 기호`=` 하나만 사용했기 때문에, 두 대상이 같은지 서로 비교하기 위해서는 **항상** 두 개의 등호 기호 `==`를 사용해야 합니다. 마찬가지로 서로 다른 대상일 경우에는 `!=` 기호를 사용합니다. + +두 번 더 테스트 해볼게요. : + +{% filename %}command-line{% endfilename %} +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + + +`>`와 `<`는 알겠는데, 그렇다면 `>=`와 `<=`는 무슨 뜻일까요? 아래 내용을 읽어보세요. : + +- x `>` y : x는 y보다 크다 +- x `<` y : x는 y보다 작다 +- x `<=` y : x가 y보다 작거나 같다 +- x `>=` y : x가 y보다 크거나 같다 + +잘했어요! 좀 더 해볼까요? + +{% filename %}command-line{% endfilename %} +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +파이썬은 얼마든지 원하는 만큼 숫자를 비교할 수 있고 답을 알려줄 거랍니다! 똑똑한 녀석이죠? + +- **and** - `and` 연산자는, 두 값 모두 참(`True`)일 경우에만 결과가 참(`True`)이 됩니다. +- **or** - `or` 연산자는, 둘 중 하나만 참(`True`)일 경우에 결과가 참(`True`)이 됩니다. + +"사과를 오렌지에 비교하기"라는 말을 들어본 적이 있나요? 파이썬에게 시켜봅시다. + +{% filename %}{{warning_icon}}command-line{% endfilename %} +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +이처럼 파이썬은 숫자(`int`)와 문자열(`str`)을 비교할 수 없어요. 대신 **TypeError**를 보여줘 두 타입이 서로 비교 대상이 아니라는 것을 알려줍니다. + +## Boolean(불리언) + +방금 전 파이썬의 새로운 객체 종류를 배웠는데요. 바로 **Boolean**입니다. 이번 장에서 가장 쉬운 내용이에요. + +불리언의 객체 두가지 입니다. +- True(참) +- False(거짓) + +파이썬은 항상`True`라고 써야 이해합니다. 첫 글자가 대문자고 나머지는 소문자여야만, Boolean으로 이해합니다. **true, TRUE, tRUE는 모두 틀린 표현이에요. -- `True`만 올바른 표현입니다.** (`False`도 마찬가지입니다) + +불리언을 변수로 사용할 수도 있습니다! 아래 코드를 실행해보세요. + +{% filename %}command-line{% endfilename %} +```python +>>> a = True +>>> a +True +``` + +또 이런 방법으로도 쓸 수 있습니다. + +{% filename %}command-line{% endfilename %} +```python +>>> a = 2 > 5 +>>> a +False +``` + +아래 명령어를 실행해보면서 불리언을 가지고 놀아보세요. + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +축하합니다! 불리언은 프로그래밍에 있어서 가장 멋진 기능 중 하나에요. 여러분은 불리언을 앞으로 어떻게 사용해야 하는지 방금 배웠답니다! + +# 코드 저장하기! + +> **Note** 집에서 학습하는 분들은 [파이썬 기초: 파일 저장 및 "If" 조건문](https://www.youtube.com/watch?v=dOAg6QVAxyk) 영상을 보세요. + + +지금까지 우리는 인터프리터(interpreter)에서 파이썬 코드를 입력해 왔어요. 한 번에 코드 한 줄만 입력할 수 있었어요. 일반적으로 프로그램은 파일로 저장되어 프로그래밍 언어 **인터프리터(interpreter)** 또는 **컴파일러(complier)**로 실행됩니다. 지금까지 우리는 파이썬 **인터프리터**에서 한 줄씩 코드를 입력해 프로그램을 실행시켰어요. 이제 앞으로는 한 줄 이상 더 많은 코드를 작성해 실행해 볼 거에요. 빨리 해볼게요. + +* 파이썬 인터프리터를 종료하세요. +* 선택한 코드 에디터를 실행하세요. +* 코드를 새 파이썬 파일로 저장하세요. +* 실행하세요! + +사용했던 파이썬 인터프리터를 종료하려면, `exit()`함수를 입력하세요. + +{% filename %}command-line{% endfilename %} +```python +>>> exit() +$ +``` + +그러면 커맨드 프롬프트(또는 콘솔)가 초기화됩니다. + +앞서 우리는 [코드 에디터](../code_editor/README.md) 장에서 사용할 에디터를 정했습니다. 이제 에디터를 실행해 코드를 작성하고 새 파일로 저장합니다. + +{% filename %}editor{% endfilename %} +```python +print('Hello, Django girls!') +``` + +당연히 여러분은 숙련된 파이썬 개발자에요. 지금 배운 코드를 자유롭게 작성해보세요. + +이제 파일명과 함께 저장해야합니다. 파일명을 ** python_intro.py **이라고 붙이고 데스크탑에 저장해 봅시다. 파일명은 마음대로 써도 되지만 파일 확장자는 __.py__ 로 끝나야합니다. **.py**파일 확장자로 운영체제에게 **파이썬 실행 파일**이니 파이썬을 실행하라고 지시합니다. + + +> **Note** 코드 에디터의 멋진 기능을 알고 있어야 해요. 파이썬 콘솔에서는 모든 코드가 같은 색이였지만, 코드 에디터에는 `print()`함수와 문자열이 다른 색상으로 구분되었어요. 이를 `문법 하이라이팅(syntax highlighting)`하는데, 코딩할 때 필요한 기능입니다. 색상로 구분을 파악할 수 있고 오류도 확인할 수 있어요. 예를 들어, 문자열이 제대로 닫히지 않았다던가, 특정 키워드(함수에서 사용하는 `def`)를 사용할 때, 다른 색상으로 구분되기 때문에 쉽게 파악이 가능합니다. 그래서 코드 에디터를 사용하는 거랍니다. :) + +파일을 저장했다면, 커맨드라인 장에서 배웠던 것을 써먹어야죠! 터미널에서 데스크탑(또는 Desktop, 바탕화면)으로 **디렉토리 변경**을 해보세요. + + + +맥OS : + +{% filename %}command-line{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + +리눅스 : +{% filename %}command-line{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + + +윈도우 : + +{% filename %}command-line{% endfilename %} +``` +> cd %HomePath%\Desktop +``` + + +따라하다 어려움이 있다면, 코치에게 도움을 요청하세요. + +파일 내 코드를 실행하기 위해 파이썬을 불러봅시다. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hello, Django girls! +``` + +> **Note** 윈도우에서 'python3' 명령어를 인식하지 못하면 'python'라고 입력하세요. + + +잘했어요! 드디어 파이썬 프로그램이 저장된 파일을 실행했어요. 뿌듯하죠? + +다음으로 프로그래밍의 필수 도구를 배울 차례에요. + +## If...elif...else + +대부분의 코드는 조건문을 만났을 때 실행됩니다. 파이썬은 **if**문을 사용합니다. + +**python_intro.py** 파일을 다음과 같이 수정하세요. + +{% filename %}python_intro.py{% endfilename %} +```python +if 3 > 2: +``` + +저장하고 실행하면 아래와 같은 에러가 보일 거에요. + +{% filename %}{{warning_icon}}command-line{% endfilename %} +``` +$ python3 python_intro.py +File "python_intro.py", line 2 + ^ +SyntaxError: unexpected EOF while parsing +``` + +파이썬은 조건문 `3 > 2`가 참인 경우(또는 값이 `True`인 경우)에 어떻게 할 것인지 물어보네요. 이 경우에 파이썬이 "It works!"를 출력하게 해봅시다. **python_intro.py** 파일을 아래와 같이 수정하세요. + +{% filename %}python_intro.py{% endfilename %} +```python +if 3 > 2: + print('It works!') +``` + +두 번째 줄에 들여쓰기 된 코드에 스페이스 4칸을 준 게 보이나요? 조건의 결과(`3 > 2`) 가 참일 경우에, 실행할 코드에 들여쓰기를 해줘야 합니다. 물론 스페이스 한 칸만 띄울 수 있지만, 거의 모든 파이썬 프로그래머들은 코드를 정갈하게 작성하기 위해 4칸을 사용해요. `탭(tab)`한 번은 들여쓰기 4칸과 같습니다. + +이제 저장하고 실행해보세요. + +{% filename %}command-line{% endfilename %} +```python +$ python3 python_intro.py +It works! +``` + +### 조건이 참(True) 이 아니라면 어떻게 되나요? + +앞 예제에서 조건이 참(`True`)인 경우에만 실행되게 만들었어요. 하지만 파이썬은 `elif`문과 `else`문도 사용할 수 있습니다. + +{% filename %}python_intro.py{% endfilename %} +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +실행하면 다음과 같이 출력됩니다. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +5 is indeed greater than 2 +``` + +만약 2가 5보다 크다면 두번째 명령이 실행됩니다. 참 쉽죠? 이제 `elif`가 어떻게 작동하는지 봅시다. + +{% filename %}python_intro.py{% endfilename %} +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +그리고 실행해보세요. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hey Sonja! +``` + +어떻게 됐나요? `elif`문은 맨 처음 조건이 아닐 경우 그 다음 조건을 처리하게 해줍니다. + +`if` 문을 쓴 다음에 원하는 만큼 `elif` 문을 계속 추가할 수 있어요. 이렇게요. + +{% filename %}python_intro.py{% endfilename %} +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +파이썬이 각 테스트를 순서대로 실행하고 출력합니다: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Perfect, I can hear all the details +``` +## 주석(Comments) + +주석은 `#`으로 시작하는 줄입니다. 파이썬은 `#`의 내용을 무시합니다. 주석은 코드를 읽는 다른 사람들이 보다 쉽게 이해할 수 있도록 작성합니다. + +아래 예제를 보세요. : + +{% filename %}python_intro.py{% endfilename %} +```python +# volume 값을 바꿔보세요 +if volume < 20 or volume > 80: + volume = 50 + print("That's better!") +``` + +모든 라인마다 주석을 작성할 필요는 없지만, 코드의 역할과 복잡한 수행 내용을 정리 요약할 때 사용됩니다. + +### 요약 + +지금까지 배운 내용을 정리해봅시다. + +- **비교하기** - 파이썬에서 `>`, `>=`, `==`, `<=`, `<` 그리고 `and`, `or` 연산자를 사용해 비교합니다. +- **불리언(Boolean)** -두 둘 중 하나의 값만 가질 수 있는 객체입니다. `True` 또는 `False` +- **파일 저장하기** - 복잡한 프로그램을 실행할 수 있도록 코드를 파일로 저장합니다. +- **`if`...`elif`...`else`** - 조건문을 작성해 특정 조건이 주어졌을 때만 코드가 실행되도록 만듭니다. + +드디어 이번 장의 마지막 부분입니다! + +## 나만의 함수 만들기! + +> **Note** 집에서 학습하는 분들은 [파이썬 기초: 함수](https://www.youtube.com/watch?v=5owr-6suOl0) 영상을 보세요. + +앞에서 했던 `len()`와 같은 함수를 사용했었죠? 지금부터는 직접 함수를 만드는 법을 배울 거에요! + +함수는 파이썬이 명령어의 나열이에요. 파이썬의 각 함수는 `def`로 시작하고, 이름을 붙일 수 있고, 여러 매개변수를 가질 수 있어요. 쉬운 것부터 시작할게요. **python_intro.py** 파일을 열어 코드를 다음과 같이 고치세요. + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +우리가 만든 첫 번째 함수네요! + +파일 맨 밑에 왜 함수의 이름을 적었는지 궁금할 거에요. 왜냐하면 파이썬은 파일을 위에서 아래로 읽어 실행하기 때문이에요. 함수를 사용하기 위해서는 하단에 다시 적어야 합니다. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi there! +How are you? +``` + +> **Note** 동작하지 않더라도 당황하지 마십시오! 에러 메세지와 출력값은 원인을 파악하고 해결할 수 있게 도와줍니다. +- `NameError`에러는 잘못 입력한 내용이 있을 때 발생합니다. `def hi () :`로 함수를 생성 할 때와`hi ()`로 호출 할 때 같은 이름을 사용했는지 확인하세요. +- `IndentationError`에러가 나오면, `print` 라인 둘 다 라인의 시작 부분에 같은 공백을 가지고 있는지 확인하세요. 파이썬은 함수 안의 모든 코드가 깔끔하게 정렬되어야합니다. +- 출력값이 보이지 않는다면 마지막 `hi()`가 *들여쓰기가 되었는지* 를 확인하세요. - 들여쓰기가 된 행은 함수의 일부가 되기 떄문에 실행되지 않습니다. + + +다음으로 매개 변수와 함께 첫 번째 함수를 만들어 볼게요. 전에 사용했던 예제를 다시 사용할 거에요. 함수를 실행하면, 이름을 부르고 'hi'를 말하게요. + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): +``` + +함수에 매개변수인 `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!') + +hi() +``` + +> **Note**: `if`문 안의 `print()`함수는 4칸을 들여쓰기 했습니다. 조건문에 해당하는 경우에만 실행되게 만들기 위해서에요. 이제 어떻게 되는지 보세요. + +{% 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' +``` + +이런, 에러가 나왔네요. 다행히도, 파이썬 에러는 유용한 오류 메세지를 보여준답니다. 에러 메시지를 보면 함수 `hi()`가 한 개의 인자값(`name`) 을 필요로 하는데, 그 함수를 호출할 때 빼먹고 실행했다는 것을 알려주고 있어요. 이제 아래와 같이 코드를 수정해봅시다. + +{% filename %}python_intro.py{% endfilename %} +```python +hi("Ola") +``` + +그리고 다시 실행해보세요. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Ola! +``` + +이름을 바꿔볼까요? + +{% filename %}python_intro.py{% endfilename %} +```python +hi("Sonja") +``` + +그리고 실행하세요. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Sonja! +``` + + +이제 다른 이름(Ola와 Sonja가 아닌)을 넣는다면 어떻게 될까요? 아래처럼 나오게 만들어보세요. : + +{% filename %}command-line{% endfilename %} +``` +Hi anonymous! +``` + +어때요, 정말 굉장하지 않나요? 이로써 인사 함수가 호출될 때마다, 매번 사람 이름을 반복할 필요가 없어요. 그래서 함수가 필요답니다. 매번 똑같은 코드를 반복해 작성하지 않아도 돼요! + +좀 더 똑똑하게 만들어 볼게요. 2명 이상 이름이 있는 경우, 모든 이름마다 조건문을 추가하는 건 꽤 귀찮은 일이 될거에요. 그렇죠? + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +이제 코드를 실행해 봅시다. : + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Rachel! +``` + +축하합니다! 우리는 이제 함수를 만들 수 있게 되었어요! :) + +## 반복하기 + +> 집에서 학습하는 분들은 [파이썬 기초: For 문](https://www.youtube.com/watch?v=aEA6Rc86HF0) 영상을 보세요. + +이제 마지막 부분입니다. 금방 했죠? :) + +프로그래머는 반복되는 일을 하는 것을 좋아하지 않아요. 프로그래밍은 모든 것을 자동화하는 것입니다. 모든 사람의 이름을 일일이 입력해서 hi 라는 메세지를 출력하게 만들고 싶지 않겠죠. 반복문을 사용하면 이를 해결할 수 있습니다. + +리스트를 기억하고 있죠? 아래 girls 리스트를 보세요. + +{% filename %}python_intro.py{% endfilename %} +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +우리는 여자 아이들 이름을 불러 인사를 하고 싶어요. 우리는 이미 `hi` 함수를 만들었으니 반복문을 사용해봅시다. :) + +{% filename %}python_intro.py{% endfilename %} +```python +for name in girls: +``` + +```for```과 ```if```문의 다음 줄은 4칸 들여쓰기를 해야합니다. + +아래 완성된 코드입니다. + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +실행하면 다음과 같습니다. + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Rachel! +Next girl +Hi Monica! +Next girl +Hi Phoebe! +Next girl +Hi Ola! +Next girl +Hi You! +Next girl +``` + + +`girls` 리스트의 요소마다 여러분이 `for`문 안에 들여쓰기를 한 모든 코드들이 반복됩니다. + +`for`문에 `range()` 함수로 숫자범위를 지정해 사용할 수 있어요. + +{% filename %}python_intro.py{% endfilename %} +```python +for i in range(1, 6): + print(i) +``` + +이렇게 출력됩니다. + +{% filename %}command-line{% endfilename %} +``` +1 +2 +3 +4 +5 +``` + +`range()`는 매개변수로 넘겨진 숫자부터 시작하는 숫자 리스트를 만들어주는 함수입니다. + +두 숫자 중 두 번째(마지막)숫자는 리스트에 포함되지 않는다는 것을 기억하세요. (즉 `range(1, 6)`는 1부터 5까지 카운트 하며 숫자 6은 리스트에 포함되지 않습니다) "range()"는 반만 열려 있기 때문에, 첫번째 숫자는 포함되지만 마지막 숫자는 포함되지 않아요. + +## 요약 + +이제 다 끝났어요. **모두 정말 대단해요!** 지금까지 어려운 내용을 잘 따라온 여러분들이 정말 자랑스러워요! + +다음 장으로 가기전에 잠시 쉬는 시간을 가져도 좋아요. 스트레칭을 하던가, 잠깐 산책을 하던가, 눈을 쉬게 한다던가 말이죠. :) + +![Cupcake](images/cupcake.png) diff --git a/ko/python_introduction/images/cupcake.png b/ko/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/ko/python_introduction/images/cupcake.png differ diff --git a/ko/template_extending/README.md b/ko/template_extending/README.md new file mode 100755 index 00000000000..d0f1e844b78 --- /dev/null +++ b/ko/template_extending/README.md @@ -0,0 +1,144 @@ +# 템플릿 확장하기 + +장고의 또 다른 멋진 기능은 __템플릿 확장(template extending)__ 입니다. 무슨 뜻일까요? 바로 여러분의 웹사이트 안의 서로 다른 페이지에서 HTML의 일부를 동일하게 재사용 할 수 있다는 뜻이에요. + +이 방법을 사용하면 동일한 정보/레이아웃을 사용하고자 할 때, 모든 파일마다 같은 내용을 반복해서 입력 할 필요가 없게 됩니다. 또 뭔가 수정할 부분이 생겼을 때, 각각 모든 파일을 수정할 필요 없이 딱 한번만 수정하면 된답니다! + +## 기본 템플릿 생성하기 + +기본 템플릿은 웹사이트 내 모든 페이지에 확장되어 사용되는 가장 기본적인 템플릿입니다. + +`blog/templates/blog/`에 `base.html` 파일을 만들어 봅시다. : + + blog + └───templates + └───blog + base.html + post_list.html + + +그 다음 파일을 열어 `post_list.html`에 있는 모든 내용을 `base.html`에 아래 내용을 복사해 붙여넣습니다. + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +그 다음 `base.html`에서 `` (``와 `` 사이에 있는 모든 내용)의 모든 내용을 아래와 같이 바꿉니다. : + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}`{% for post in posts %}{% endfor %}` 사이에 있는 모든 내용을 바꿨습니다.: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% block content %} +{% endblock %} +``` + +이 코드는 무엇을 의미일까요? 우리는 `block`을 만든 거에요! 템플릿 태그 `{% block %}`으로 HTML 내에 들어갈 수 있는 공간을 만들었어요. `base.html`을 확장해 다른 템플릿에도 가져다 쓸 수 있게 한 거죠. 어떻게 동작하는지 보여 드릴게요. + +이제 `base.html`을 파일을 저장을 하고, `blog/templates/blog/post_list.html` 파일을 다시 엽니다. +{% raw %}`{% for post in posts %}`부터 `{% endfor %}`까지만 남기고 나머지는 전부 지우세요. 그럼 아래와 같이 될 겁니다. :{% endraw %} + + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +우리는 이 코드를 모든 컨텐츠 블록에 대한 템플릿의 일부로 쓸 거에요. +이 파일에 블록 태그를 추가해봅시다! + +{% raw %}블록 태그가 `base.html`파일의 태그와 일치해야겠죠. 또 콘텐츠 블록에 속한 모든 코드를 포함하게 만들어야 할 거에요. 이를 위해서 `{% block content %}`와 `{% endblock %}`사이에 모든 코드를 넣으세요. 이렇게 말이죠. : {% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +한 가지만 남았습니다. 이 두 템플릿을 연결해야해요. 지금까지 실습한 내용이 바로 확장 템플릿의 전부입니다! 확장 태그를 파일 맨 처음에 추가합니다. 아래와 같이요. : + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +다 되었어요! 여러분의 웹사이트가 잘 작동하는지 확인해보세요. :) + +> 만약 `TemplateDoesNotExists(템플릿파일이 존재하지 않습니다)`라는 에러 메세지가 난다면 `blog/base.html`파일이 없이 콘솔에서 `runserver`가 작동되고 있는 경우입니다. 이런 경우, (Ctrl+C)를 눌러서 멈춘 후 `python manage.py runserver`명령어로 다시 서버를 실행하세요. diff --git a/ko/whats_next/README.md b/ko/whats_next/README.md new file mode 100755 index 00000000000..3abfa722ad2 --- /dev/null +++ b/ko/whats_next/README.md @@ -0,0 +1,26 @@ +# 더 나아가기 +튜토리얼을 마친 나에게 자신에게 축하한다고 말해보세요! __여러분 모두 정말 멋지게 해냈어요__. 모두 자랑스럽습니다! <3 + +모두 축하합니다! **정말 멋져요!** 여러분들이 자랑스러워요! ^___^ + +### 이제 무엇을 해야하나요? + +잠시 휴식을 가지고 여유를 가지세요. 여러분은 이제 막 정말 큰 일 마쳤으니까요. + +그리고 장고걸스 [페이스북](http://facebook.com/djangogirls)와 [트위터](https://twitter.com/djangogirls)를 팔로우하셔서 최신 소식을 구독하세요. + + +### 앞으로 해 볼 만한 자료를 추천해주실래요? + +그럼요! [장고걸스: 심화튜토리얼(Django Girls Tutorial: Extensions)](https://tutorial-extensions.djangogirls.org)을 읽어보세요. + +나중에 아래 추천 리스트를 참고해 공부해보세요. 모두 강력 추천하는 자료입니다! +- [Django's official tutorial](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) +- [New Coder tutorials](http://newcoder.io/tutorials/) +- [Code Academy Python course](https://www.codecademy.com/en/tracks/python) +- [Code Academy HTML & CSS course](https://www.codecademy.com/tracks/web) +- [Django Carrots tutorial](https://github.com/ggcarrots/django-carrots) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) +- [Getting Started With Django video lessons](http://www.gettingstartedwithdjango.com/) +- [Two Scoops of Django: Best Practices for Django 1.8 book](https://twoscoopspress.com/products/two-scoops-of-django-1-8) +- [Hello Web App: Learn How to Build a Web App](https://hellowebapp.com/) diff --git a/optional_postgresql_installation/README.md b/optional_postgresql_installation/README.md deleted file mode 100644 index 7fd5ff6252d..00000000000 --- a/optional_postgresql_installation/README.md +++ /dev/null @@ -1,138 +0,0 @@ -# PostgreSQL installation - -> Part of this chapter is based on tutorials by Geek Girls Carrots (http://django.carrots.pl/). - -> Parts of this chapter is based on the [django-marcador -tutorial](http://django-marcador.keimlink.de/) licensed under Creative Commons -Attribution-ShareAlike 4.0 International License. The django-marcador tutorial -is copyrighted by Markus Zapke-Gründemann et al. - - -## Windows - -The easiest way to install Postgres on Windows is using a program you can find here: http://www.enterprisedb.com/products-services-training/pgdownload#windows - -Choose the newest version available for your operating system. Download the installer, run it and then follow the instructions available here: http://www.postgresqltutorial.com/install-postgresql/. Take note of the installation directory as you will need it in the next step (typically, it's `C:\Program Files\PostgreSQL\9.3`). - -## Mac OS X - -The easiest way is to download the free [Postgres.app](http://postgresapp.com/) and install it like any other application on your operating system. - -Download it, drag to the Applications directory and run by double clicking. That's it! - -You'll also have to add the Postgres command line tools to your `PATH` variable, what is described [here](http://postgresapp.com/documentation/cli-tools.html). - -## Linux - -Installation steps vary from distribution to distribution. Below are the commands for Ubuntu and Fedora, but if you're using a different distro [take a look at the PostgreSQL documentation](https://wiki.postgresql.org/wiki/Detailed_installation_guides#General_Linux). - -### Ubuntu - -Run the following command: - - sudo apt-get install postgresql postgresql-contrib - -### Fedora - -Run the following command: - - sudo yum install postgresql93-server - -# Create database - -Next up, we need to create our first database, and a user that can access that database. PostgreSQL lets you create as many databases and users as you like, so if you're running more than one site you should create a database for each one. - -## Windows - -If you're using Windows, there's a couple more steps we need to complete. For now it's not important for you to understand the configuration we're doing here, but feel free to ask your coach if you're curious as to what's going on. - -1. Open the Command Prompt (Start menu → All Programs → Accessories → Command Prompt) -2. Run the following by typing it in and hitting return: `setx PATH "%PATH%;C:\Program Files\PostgreSQL\9.3\bin"`. You can paste things into the Command Prompt by right clicking and selecting `Paste`. Make sure that the path is the same one you noted during installation with `\bin` added at the end. You should see the message `SUCCESS: Specified value was saved.`. -3. Close and then reopen the Command Prompt. - -## Create the database - -First, let's launch the Postgres console by running `psql`. Remember how to launch the console? ->On Mac OS X you can do this by launching the `Terminal` application (it's in Applications → Utilities). On Linux, it's probably under Applications → Accessories → Terminal. On Windows you need to go to Start menu → All Programs → Accessories → Command Prompt. Furthermore, on Windows, `psql` might require logging in using the username and password you chose during installation. If `psql` is asking you for a password and doesn't seem to work, try `psql -U -W` first and enter the password later. - - $ psql - psql (9.3.4) - Type "help" for help. - # - -Our `$` now changed into `#`, which means that we're now sending commands to PostgreSQL. Let's create a user: - - # CREATE USER name; - CREATE ROLE - -Replace `name` with your own name. You shouldn't use accented letters or whitespace (e.g. `bożena maria` is invalid - you need to convert it into `bozena_maria`). - -Now it's time to create a database for your Django project: - - # CREATE DATABASE djangogirls OWNER name; - CREATE DATABASE - -Remember to replace `name` with the name you've chosen (e.g. `bozena_maria`). - -Great - that's databases all sorted! - -# Updating settings - -Find this part in your `mysite/settings.py` file: - - DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), - } - } - -And replace it with this: - - DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.postgresql_psycopg2', - 'NAME': 'djangogirls', - 'USER': 'yourname', - 'PASSWORD': '', - 'HOST': 'localhost', - 'PORT': '', - } - } - -Remeber to change `yourname` to the name of the database that you created earlier in this chapter. - -# Installing PostgreSQL package for Python - -First, install Heroku Toolbelt from https://toolbelt.heroku.com/ While we will need this mostly for deploying your site later on, it also includes Git, which might come in handy already. - -Next up, we need to install a package which lets Python talk to PostgreSQL - this is called `psycopg2`. The installation instructions differ slightly between Windows and Linux/OS X. - -## Windows - -For Windows, download the pre-built file from http://www.stickpeople.com/projects/python/win-psycopg/ - -Make sure you get the one corresponding to your Python version (3.4 should be the last line) and to the correct architecture (32 bit in the left column or 64 bit in the right column). - -Rename the downloaded file and move it so that it's now available at `C:\psycopg2.exe`. - -Once that's done, enter the following command in the terminal (make sure your `virtualenv` is activated): - - easy_install C:\psycopg2.exe - -## Linux and OS X - -Run the following in your console: - - (myvenv) ~/djangogirls$ pip install psycopg2 - -If that goes well, you'll see something like this - - Downloading/unpacking psycopg2 - Installing collected packages: psycopg2 - Successfully installed psycopg2 - Cleaning up... - ---- - -Once that's completed, run `python -c "import psycopg2"`. If you get no errors, everything's installed successfully. diff --git a/package.json b/package.json index 4ef415aefc2..bb2205baf92 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,23 @@ { - "name": "djangogirls-tutorial", - "version": "0.0.1", - "description": "", - "repository": { - "type": "git", - "url": "https://github.com/DjangoGirls/tutorial.git" + "name": "tutorial", + "version": "1.0.0", + "description": "The Django Girls tutorial", + "main": "index.js", + "dependencies": {}, + "devDependencies": { + "gitbook-plugin-codeblock-label": "*", + "gitbook-plugin-collapsible-menu": "*", + "gitbook-plugin-ga": "^2.0.0", + "gitbook-plugin-github": "2.0.0", + "gitbook-plugin-heading-anchors": "^1.0.3", + "gitbook-plugin-language-picker": "*", + "gitbook-plugin-richquotes": "0.0.9", + "gitbook-plugin-sectionx-ex": "*", + "gitbook-plugin-sidebar-ads": "^1.0.0", + "honkit": "^3.4.0" }, - "author": "Ola Sitarska ", - "dependencies": { - "gitbook-plugin-anchors": "^0.3.0", - "gitbook-plugin-ga": "^0.1.0", - "gitbook-plugin-richquotes": "0.0.3" - } + "scripts": {}, + "keywords": [], + "author": "Django Girls", + "license": "CC-BY-SA-4.0" } diff --git a/pl/GLOSSARY.md b/pl/GLOSSARY.md new file mode 100755 index 00000000000..6c00cc9d71c --- /dev/null +++ b/pl/GLOSSARY.md @@ -0,0 +1,3 @@ +# Edytor kodu + +Edytor kodu to taka aplikacja, która pozwala Ci zapisać kod, byś mogła do niego wrócić w dowolnym, późniejszym momencie. Możesz się dowiedzieć skąd go ściągnąć z [rozdziału o edytorach kodu](./code_editor/README.md). \ No newline at end of file diff --git a/pl/README.md b/pl/README.md new file mode 100755 index 00000000000..b61e3af7186 --- /dev/null +++ b/pl/README.md @@ -0,0 +1,51 @@ +# Kurs Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Niniejsza praca jest licencjonowana zgodnie z Creative Commons Attribution-ShareAlike License 4.0 International. Aby zobaczyć kopię niniejszej licencji, odwiedź http://creativecommons.org/licenses/by-sa/4.0/ + +## Witaj + +Witaj w tutorialu Django Girls! Super Cię widzieć! :) W tym tutorialu odbędziemy podróż po technologiach internetowych, oferując Tobie podgląd na wszystkie części składowe, które połączone razem tworzą sieć taką, jaką ją znamy. + +Jak ze wszystkim, co jest nieznane, będzie to naprawdę niezła przygoda - ale nie przejmuj się! Skoro już się tutaj znalazłaś, to dalej już będzie tylko z górki! :) + +## Wprowadzenie + +Czy kiedykolwiek czułaś, że wokół jest coraz więcej nowych technologii, a Ty zostajesz w tyle? Zastanawiałaś się kiedyś, jak zrobić stronę internetową, ale nie miałaś motywacji, by zacząć? Czy zdarzyło Ci się pomyśleć, że świat programowania jest dla Ciebie zbyt skomplikowany? + +No więc mamy dla Ciebie dobre nowiny! Programowanie nie jest tak trudne, jak się wydaje, a my chcemy Ci pokazać, że może być też niezłą zabawą. + +Ten kurs nie zamieni Cię w zawodową programistkę. Jeżeli chcesz być w tym naprawdę dobra, musisz spędzić miesiące lub nawet lata na nauce i ćwiczeniach. Ale chciałybyśmy Ci pokazać, że programowanie i pisanie stron internetowych nie jest tak trudne, jak mogłoby się wydawać. Spróbujemy wyjaśnić to i owo najprościej i najlepiej jak tylko potrafimy, abyś nie czuła się przytłoczona nową technologią. + +Mamy nadzieję sprawić, że pokochasz to tak jak my! + +## Czego nauczysz się w trakcie kursu? + +Jak skończysz tutorial, będziesz miała małą działającą aplikację webową: Twój blog. Pokażemy Ci, jak umieścić ją online tak, by inni mogli zobaczyć Twoją pracę! + +Będzie to wyglądać mniej więcej tak: + +![Rysunek 0.1](images/application.png) + +> Jeżeli przerabiasz tutorial samodzielnie i nie masz w pobliżu osoby, która pomogłaby Ci w razie problemów, zapraszamy na czat: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Ustaliliśmy z naszymi mentorami oraz poprzednimi uczestniczkami, że od czasu do czasu będą się tam pojawiać i udzielać pomocy z tutorialem! Nie bój się pytać! + +Ok, [zacznijmy od początku...](./how_the_internet_works/README.md) + +## Przerabiasz tutorial w domu? + +Udział w warsztatach Django Girls to niesamowite doświadczenie, ale zdajemy sobie sprawę, że nie zawsze jest to możliwe. Z tego powodu zachęcamy Ciebie, byś spróbowała przerobić tutorial w domu. Dla czytelniczek w domu, jesteśmy właśnie w trakcie przygotowywania materiałów wideo, które ułatwią samodzielne podążanie za tutorialem. Na chwilę obecną nie posiadamy wideo do wszystkich rozdziałów, ale dzień po dniu, rozdział po rozdziale kolejne materiały będą się pojawiać na kanale [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) na YouTubie. + +W każdym rozdziale, który posiada materiał wideo, udostępniamy link, który do niego prowadzi. + +## Jak możesz pomóc? + +Kurs jest prowadzony przez [DjangoGirls](https://djangogirls.org/). Jeżeli znajdziesz jakiś błąd lub chcesz dodać coś nowego, zapoznaj się proszę z [tymi informacjami](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Chciałabyś pomóc nam tłumaczyć tutorial na inne języki? + +Obecnie przechowujemy wersje językowe na platformie Crowdin.com: + +https://crowdin.com/project/django-girls-tutorial + +Jeżeli twój język nie jest wylistowany na [Crowdinie](https://crowdin.com/), [zgłoś nowe issue](https://github.com/DjangoGirls/tutorial/issues/new), dzięki któremu poinformujesz nas, by dodać język. \ No newline at end of file diff --git a/pl/SUMMARY.md b/pl/SUMMARY.md new file mode 100755 index 00000000000..f65c37e6c03 --- /dev/null +++ b/pl/SUMMARY.md @@ -0,0 +1,27 @@ +# Podsumowanie + +* [Wprowadzenie](README.md) +* [Instalacja](installation/README.md) +* [Instalacja (chromebook)](chromebook_setup/README.md) +* [Jak działa internet?](how_the_internet_works/README.md) +* [Wprowadzenie do wiersza polecenia](intro_to_command_line/README.md) +* [Instalowanie Pythona](python_installation/README.md) +* [Edytor tekstu](code_editor/README.md) +* [Wprowadzenie do Pythona](python_introduction/README.md) +* [Czym jest Django?](django/README.md) +* [Instalowanie Django](django_installation/README.md) +* [Twój pierwszy projekt w Django!](django_start_project/README.md) +* [Modele w Django](django_models/README.md) +* [Administracja Django (admin)](django_admin/README.md) +* [Wdrażanie!](deploy/README.md) +* [Adresy URL w Django](django_urls/README.md) +* [Widoki Django - czas zacząć tworzyć!](django_views/README.md) +* [Wprowadzenie do HTML-a](html/README.md) +* [Django ORM (QuerySet)](django_orm/README.md) +* [Dane dynamiczne w szablonach Django](dynamic_data_in_templates/README.md) +* [Szablony Django](django_templates/README.md) +* [CSS - upiększ to](css/README.md) +* [Rozbudowa szablonów](template_extending/README.md) +* [Rozbudowa aplikacji](extend_your_application/README.md) +* [Formularze Django](django_forms/README.md) +* [Co dalej?](whats_next/README.md) \ No newline at end of file diff --git a/pl/chromebook_setup/README.md b/pl/chromebook_setup/README.md new file mode 100644 index 00000000000..e55849392ab --- /dev/null +++ b/pl/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Instalacja na Chromebooku + +> **Uwaga**! Jeżeli wykonałaś już kroki instalacyjne, nie musisz tego robić ponownie - możesz przejść od razu do [Wprowadzenie do Pythona](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/pl/chromebook_setup/instructions.md b/pl/chromebook_setup/instructions.md new file mode 100644 index 00000000000..b4899ab1369 --- /dev/null +++ b/pl/chromebook_setup/instructions.md @@ -0,0 +1,75 @@ +Możesz [pominąć tę sekcję](http://tutorial.djangogirls.org/en/installation/#install-python), jeżeli nie używasz Chromebooka. W przeciwnym wypadku, proces instalacji będzie wyglądał nieco inaczej. Możesz zignorować pozostałe elementy instrukcji dotyczące instalacji. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9) + +Cloud IDE jest narzędziem, które pełni funkcję edytora kodu oraz umożliwia dostęp do komputera uruchomionego w internecie, gdzie możesz instalować, pisać oraz uruchamiać programy. Na czas trwania tutoriala Cloud IDE będzie działać jako *komputer lokalny*. Będziesz mogła uruchamiać komendy w terminalu, tak jak inne osoby korzystające z systemu macOS, Ubuntu czy Windows, z tym że Twój terminal będzie podłączony do komputera, który ustawi dla Ciebie Cloud IDE. Oto instrukcje dotyczące różnych Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9). Możesz wybrać jedno z poniższych Cloud IDE i postępować zgodnie z instrukcją. + +#### PaizaCloud Cloud IDE + +1. Przejdź do [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Załóż konto +3. Kliknij przycisk *New Server* +4. Kliknij przycisk "Terminal" (po lewej stronie okna) + +Teraz powinnaś zobaczyć interfejs z bocznym paskiem i przyciski po lewej stronie. Kliknij przycisk "Terminal", aby otworzyć okno terminala ze znakiem zachęty takim jak ten: + +{% filename %}Terminal{% endfilename %} + + $ + + +Terminal PaizaCloud Cloud ID jest gotowy na Twoje instrukcje. Możesz zmienić rozmiar tego okna i powiększyć je, aby było troszkę większe. + +#### AWS Cloud9 + +1. Przejdź do [AWS Cloud9](https://aws.amazon.com/cloud9/) +2. Załóż konto +3. Kliknij *Create Environment* + +Teraz powinnaś zobaczyć interfejs z bocznym paskiem, duże główne okno z tekstem i małe okno na dole, które wygląda następująco: + +{% filename %}bash{% endfilename %} + + twojanazwaużytkownika:~/workspace $ + + +Dolny obszar jest Twoim terminalem. Możesz użyć go do wysyłania instrukcji do zdalnego komputera Cloud 9. Możesz zmienić rozmiar tego okna, aby je trochę powiększyć. + +### Środowisko wirtualne + +Środowisko wirtualne (Virtual Environment - zwane także virtualenv) jest jak skrzynka, do której możemy wstawić użyteczny program komputerowy dla projektu, nad którym pracujemy. Używamy go, aby oddzielić od siebie różne części kodu potrzebne nam w różnych projektach, przez co nie mieszają się one pomiędzy nimi. + +W swoim terminalu na dole ekranu Cloud 9 wykonaj następujące polecenie: + +{% filename %}Cloud 9{% endfilename %} + + sudo apt update + sudo apt install python3.6-venv + + +Jeżeli polecenie cały czas nie chce zadziałać, poproś o pomoc swojego mentora. + +Następnie uruchom: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(zauważ, że w ostatniej linii użyłyśmy tyldy, za którą następuje znak równości: ~=). + +### GitHub + +Załóż konto na [GitHubie](https://github.com). + +### PythonAnywhere + +Tutorial Django Girls zawiera sekcję dotycząca wdrożenia, tzn. procesu przenoszenia kodu programu, który odpowiada za działanie naszej nowej aplikacji internetowej na publicznie dostępny komputer (zwany serwerem) w taki sposób, by inne osoby były w stanie zobaczyć Twoje dzieło. + +Ta część może wydać się lekko niezrozumiała, gdy przechodzimy tutorial na Chromebooku, skoro w trakcie tutoriala używamy komputera, który już jest w internecie (w odróżnieniu od chociażby naszego laptopa). Jednak może ona być cały czas przydatna, byśmy traktowały nasze konto w Cloud9 jako miejsce, w którym postępuje nasza praca oraz PythonAnywhere jako miejsce, gdzie możemy pokazać światu nasze dzieło, gdy tylko będzie ono bardziej dokończone. + +Dlatego właśnie załóż nowe konto w PythonAnywhere pod adresem [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/pl/code_editor/README.md b/pl/code_editor/README.md new file mode 100755 index 00000000000..c57f2363bdd --- /dev/null +++ b/pl/code_editor/README.md @@ -0,0 +1,11 @@ +# Edytor kodu + +> Dla czytelniczek w domu: ten rozdział jest również omówiony w wideo [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +Zaraz napiszesz swoją pierwszą linijkę kodu, więc najwyższy czas zainstalować edytor kodu! + +> **Uwaga** Jeśli używasz już Chromebooka, pomiń ten rozdział i upewnij się, że postąpiłaś zgodnie z instrukcją [Instalacja Chromebooka](../chromebook_setup/README.md). Cloud IDE, które wybrałaś (PaizaCloud Cloud IDE or AWS Cloud9) zawiera edytor kodu, więc kiedy otworzysz plik z menu w swoim IDE, automatycznie zostanie on otworzony w edytorze. +> +> **Uwaga** Jeśli zrobiłaś to już wcześniej w rozdziale 'Instalacja' - możesz przejść od razu do następnego rozdziału! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/pl/code_editor/instructions.md b/pl/code_editor/instructions.md new file mode 100755 index 00000000000..1ba04365d62 --- /dev/null +++ b/pl/code_editor/instructions.md @@ -0,0 +1,31 @@ +Istnieje wiele programów tego typu, jednak który wybrać? To nie takie proste, bo wybór zależy w dużej mierze od tego, czego oczekujesz od swojego edytora. Większość programistów Pythona używa bardzo skomplikowanych i niezwykle bogatych w różne funkcjonalności IDE (z ang. Integrated Development Environments - zintegrowane środowisko deweloperskie), takich jak: PyCharm. Jako osoba początkująca nie potrzebujesz jednak aż tak skomplikowanego edytora. Wystarczy coś prostszego, ale nadal dostatecznie użytecznego. + +Nasze propozycje prezentujemy poniżej, ale w razie czego spytaj o sugestie swojego mentora - będzie on w stanie wybrać coś zgodnego z Twoimi preferencjami. + +## Gedit + +Gedit to open source'owy i darmowy edytor dostępny dla wszystkich systemów operacyjnych. Czasami nie jest jednak zbyt prosty w zainstalowaniu. + +[Pobierz tutaj](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text jest bardzo popularnym edytorem z bezpłatnym okresem testowania i jest dostępny dla wszystkich systemów operacyjnych. + +[Pobierz tutaj](https://www.sublimetext.com/) + +## Atom + +Atom jest kolejnym popularnym edytorem. Jest darmowy, open-source'owy i dostępny dla systemów Windows, macOS i Linux. + +[Pobierz tutaj](https://atom.io/) + +## Dlaczego instalujemy edytor kodu? + +Może się zastanawiasz dlaczego instalujemy specjalny edytor kodu zamiast używać Notatnika albo Notepada. + +Podstawowym powodem jest to, że kod musi być **zwykłym, niesformatowanym tekstem**, co powoduje że nie możemy tutaj użyć programów takich jak Word czy Textedit, ponieważ produkują one nie zwykły tekst, tylko tekst sformatowany (z informacją odnośnie użytej czcionki, sposobu formatowania), używając specjalnych formatów danych, jak na przykład [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +Drugim powodem jest specjalizacja edytorów kodu - dzięki temu mogą one dostarczać bardzo użytecznych funkcjonalności, jak kolorowanie składni zgodnie z jej przeznaczeniem lub automatyczne zamykanie cudzysłowów zamiast Ciebie. + +Za chwilę przetestujemy wybrany edytor w akcji. Nim się obejrzysz, będziesz uważać swój edytor tekstu jako jedno z ulubionych narzędzi. :) diff --git a/pl/css/README.md b/pl/css/README.md new file mode 100755 index 00000000000..6a2468b7d15 --- /dev/null +++ b/pl/css/README.md @@ -0,0 +1,305 @@ +# CSS - upiększ to! + +Nasz blog nadal wygląda dość surowo, prawda? Czas, aby to zmienić! Użyjemy do tego CSS. + +## Czym jest CSS? + +Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język używany do określania wyglądu i formatowania strony internetowej napisanej w języku znaczników (np. HTML). Traktuj go jak make-up dla naszej strony. ;) + +Ale nie chcemy zaczynać od nowa, prawda? Raz jeszcze będziemy używać czegoś, co programiści opublikowali w Internecie za darmo. Odkrywanie Ameryki na nowo nie jest zabawne. + +## Użyjmy biblioteki Bootstrap! + +Bootstrap jest jednym z najpopularniejszych frameworków HTML i CSS do budowania pięknych stron: https://getbootstrap.com/ + +Został stworzony przez programistów, którzy pracowali dla Twittera. Obecnie jest rozwijany przez kontrybutorów z całego świata! + +## Zainstaluj Bootstrapa + +Aby zainstalować Bootstrap, otwórz plik `.html` w edytorze kodu i dodaj do sekcji ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +Akurat to nie doda żadnych nowych plików do Twojego projektu. Te dwie linijki wskazują na pliki, które istnieją w Internecie. Sprawdź sama, otwórz swoją stronę w przeglądarce internetowej, odśwież zawartość. No i proszę! + +![Rysunek 14.1](images/bootstrap1.png) + +Od razu wygląda lepiej, prawda? + +## Pliki statyczne w Django + +Przyjrzymy się teraz bliżej temu, co nazwałyśmy **plikami statycznymi**. Pliki statyczne to wszystkie twoje arkusze styli oraz pliki z obrazkami. Ich zawartość nie zależy od kontekstu żądania i będzie taka sama dla każdego użytkownika. + +### Gdzie umieścić pliki statyczne w Django? + +Django wie, gdzie szukać plików statycznych dla wbudowanej aplikacji "admin". Teraz musimy jeszcze dodać jakieś pliki statyczne do naszej własnej aplikacji `blog`. + +Wystarczy, że w naszej aplikacji stworzymy nowy folder i nazwiemy go `static`: + + djangogirls + ├── blog + |     ├── migrations + |     ├── static + |     └── templates + └── mysite + + +Django automatycznie wyszuka każdy folder nazwany "static" w środku każdego folderu aplikacji. Zawartość tych katalogów będzie uznawana za pliki statyczne. + +## Twój pierwszy arkusz CSS! + +Stwórzmy teraz plik CSS, aby dodać nasze własne style do naszej strony WWW. Stwórz katalog o nazwie `css` w środku folderu `static`. Następnie utwórz nowy plik o nazwie `blog.css` w katalogu `css`. Gotowa? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Czas, by napisać trochę styli CSS! Otwórz `blog/static/css/blog.css` w Twoim edytorze kodu. + +Nie będziemy zbytnio zagłębiać się w dostosowywanie i uczenie się o CSS w tym miejscu. Jeśli chcesz dowiedzieć się więcej, istnieje rekomendacja dotycząca darmowego kursu CSS na końcu tej strony. + +Jednak nauczmy się chociaż troszkę. Może mogłybyśmy zmienić kolor naszych nagłówków? Do rozpoznawania kolorów komputery używają specjalnych kodów. Kody te zaczynają się od znaku `#`, po którym następuje 6 liter (A-F) lub cyfr (0-9). Na przykład kod dla koloru niebieskiego to `#0000FF`. Kody dla wielu kolorów możesz znaleźć na stronie: http://www.colorpicker.com/. Możesz również użyć uprzednio [zdefiniowanych kolorów](http://www.w3schools.com/colors/colors_names.asp), takich jak `red` (czerwony) czy `green ` (zielony). + +Do `blog/static/css/blog.css` powinnaś dodać następujący kod: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` to selektor CSS. Oznacza to, że zastosujemy nasze style do każdego elementu `a` znajdującego się w elemencie `h1`; selektor `h2 a` czyni to samo dla elementów `h2`. Czyli gdy mamy coś takiego jak `

link

`, styl `h1 a`, styl zostanie użyty. W tym przypadku nadajemy mu kolor `#C25100`, czyli ciemnopomarańczowy. Możesz też tutaj wstawić swój własny kolor, ale pamiętaj, by odpowiednio kontrastował z białym tłem! + +W pliku CSS ustalamy styl dla elementów znajdujących się w pliku HTML. Pierwszą metodą rozpoznawania elementu jest jego nazwa. Możesz pamiętać te tagi z rozdziału o HTML. Takie rzeczy jak `a`, `h1` i `body` to wszystko przykłady nazw elementów. Elementy rozpoznajemy również po atrybutach `class` lub `id`. Nazwę klasy lub id ustalasz sama dowolnie. Ta sama nazwa klasy może być przypisana do wielu elementów, ale id musi być unikalne dla całego kodu HTML. Dla przykładu, możesz zidentyfikować następujący tag używając nazwy tagu `a`, klasy `external_link` lub po jego id `link_to_wiki_page`: + +```html + +``` + +Więcej dowiesz się o [selektorach CSS z w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Musimy też powiedzieć naszemu szablonowi HTML, że dodałyśmy trochę styli CSS. Otwórz plik `blog/templates/blog/post_list.html` i dodaj tę linię na jego początku: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Tutaj ładujemy pliki statyczne :) Pomiędzy tagami `` oraz ``, po liniach linkujących do plików CSS Bootstrapa, dodaj tę linię: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Przeglądarka czyta pliki w takiej kolejności, w jakiej zostały jej podane, więc musimy się upewnić, że linię dodałyśmy w odpowiednim miejscu. Inaczej kod w naszym pliku może zostać nadpisany przez pliki Bootstrapa. Właśnie pokazaliśmy naszemu szablonowi, gdzie znajduje się nasz plik CSS. + +Twój plik powinien teraz wyglądać tak: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Ok, teraz zapisz plik i odśwież stronę! + +![Rysunek 14.2](images/color2.png) + +Super! Niezła robota. Może damy teraz naszej stronie trochę przestrzeni i zwiększymy margines po lewej stronie? Spróbujmy! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Dodaj powyższe do swoich stylów CSS, zapisz plik i zobacz, jak to zadziałało! + +![Rysunek 14.3](images/margin2.png) + +Może zmienimy też rodzaj czcionki w naszym nagłówku? Wklej to do sekcji `` w pliku `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Tak jak wcześniej, sprawdź kolejność i umieść tę linię przed linkiem do `blog/static/css/blog/css`. Podana linia zaimportuje czcionkę pod nazwą *Lobster* z usługi Google Fonts (https://www.google.com/fonts). + +Znajdź blok deklaracji dla `h1 a` (to jest kod pomiędzy nawiasami `{` i `}`) w pliku CSS `blog/static/css/blog.css`. Dodaj do niego linię `font-family: 'Lobster';` pomiędzy nawiasami, po czym odśwież stronę: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Rysunek 14.3](images/font.png) + +Wspaniale! + +Jak napisałyśmy powyżej, w CSS istnieje koncepcja klas. Pozwalają one nazwać część naszego kodu HTML i aplikować style tylko do tej części, omijając wpływ tych stylów na inne części. To może być super użyteczne! Może masz dwa divy, które odpowiadają za coś innego (jak nasz header lub post). Klasa pomoże nam, gdy będziemy chciały, by wyglądały one inaczej. + +Śmiało! Nazwijmy kilka części Twojego kodu HTML. Dodaj klasę nazwaną `page-header` do Twojego `div` który zawiera nagłówek: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +Teraz dodaj klasę `post` do Twojego `div` zawierającego post bloga: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +A teraz dodamy bloki deklaracji do selektorów. Selektory zaczynające się od `.` odnoszą się do klas. W Internecie jest wiele wspaniałych tutoriali dotyczących CSS, które pomogą Tobie zrozumieć następujący kod. Na razie skopiuj i wklej do `blog/static/css/blog.css` poniższy kod: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #C25100; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, .post h1 a:visited { + color: #000000; +} +``` + +Teraz otocz kod HTML wyświetlający posty deklaracjami klas. Zamień to: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +w pliku `blog/templates/blog/post_list.html` na to: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Zapisz te pliki i odśwież swoją stronę. + +![Rysunek 14.4](images/final.png) + +Woohoo! Wygląda to niesamowicie, prawda? Sprawdź w kodzie, który przed chwilą wkleiłyśmy i poszukaj miejsc, w których dodałyśmy klasy w HTML oraz użyłyśmy ich w CSS. Gdzie dokonałabyś zmiany, gdybyś chciała, by data była w kolorze turkusowym? + +Nie bój się trochę pomajstrować w CSS próbując zmienić niektóre rzeczy. Zabawa z CSS pozwoli Ci lepiej zrozumieć, co robią różne rzeczy. Niczym się nie przejmuj, jeżeli coś zepsujesz - zawsze przecież można cofnąć zmiany! + +Naprawdę zalecamy wzięcie udziału w darmowym kursie online [Codeacademy HTML & CSS](https://www.codecademy.com/tracks/web). Pomoże on Tobie nauczyć się wszystkiego, czego potrzebujesz, by upiększyć twoje strony za pomocą CSS. + +Gotowa na następny rozdział?! :) \ No newline at end of file diff --git a/pl/css/images/bootstrap1.png b/pl/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/pl/css/images/bootstrap1.png differ diff --git a/pl/css/images/color2.png b/pl/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/pl/css/images/color2.png differ diff --git a/pl/css/images/final.png b/pl/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/pl/css/images/final.png differ diff --git a/pl/css/images/font.png b/pl/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/pl/css/images/font.png differ diff --git a/pl/css/images/margin2.png b/pl/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/pl/css/images/margin2.png differ diff --git a/pl/deploy/README.md b/pl/deploy/README.md new file mode 100755 index 00000000000..fbbd0b5d69d --- /dev/null +++ b/pl/deploy/README.md @@ -0,0 +1,220 @@ +# Wdrażanie! + +> **Uwaga:** Niniejszy rozdział może być miejscami dość trudny. Bądź dzielna i przestudiuj go do końca; wdrażanie jest ważną częścią pracy nad stroną. Celowo umieściłyśmy go tutaj, aby Twój mentor był w stanie pomóc Ci przejść przez skomplikowany proces opublikowania Twojej strony w sieci. Oznacza to, że możesz wciąż ukończyć tutorial samodzielnie, jeśli zabraknie Ci czasu. + +Do teraz twoja strona była dostępna tylko na twoim komputerze. Właśnie teraz nauczymy się, jak ją wdrożyć! Wdrożenie to inaczej opublikowanie Twojej aplikacji w internecie, dzięki czemu możesz w końcu pokazać ją innym ludziom. :) + +Jak już wiesz, strona internetowa musi znajdować się na jakimś serwerze. W internecie działa wielu dostawców serwerów. Skorzystamy z usług [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere jest darmowy dla małych aplikacji, które nie przyciągają zbyt wielu odwiedzających. Z pewnością jest wystarczający dla Ciebie. + +Drugą zewnętrzną usługą, jakiej będziemy używać jest [GitHub](https://www.github.com), który przechowuje kod. Istnieją inne usługi, ale w dzisiejszych czasach prawie wszyscy programiści mają konto na GitHubie - i Ty dzisiaj do nich dołączysz! + +Te trzy miejsca będą dla Ciebie bardzo ważne. Twój lokalny komputer będzie miejscem, w którym będziesz rozwijać i testować swoją aplikację. Kiedy będziesz zadowolona ze swoich zmian, kod swojego programu umieścisz na GitHubie. Twoja strona za to będzie dostępna na PythonAnywhere i wszystkie zmiany będziesz tam ściągał ze swojej kopii kodu na GitHubie. + +# Git + +> **Uwaga** Jeżeli wykonałaś już wszystkie kroki instalacji, nie ma potrzeby ich powtarzać - możesz przeskoczyć do następnej sekcji i zacząć tworzyć repozytorium w Gicie. + +{% include "/deploy/install_git.md" %} + +## Tworzenie repozytorium Git + +Git śledzi zmiany dokonywane w zbiorze plików w czymś, co nazywamy repozytorium kodu (albo po prostu "repo", żeby było krócej). Stwórzmy takie repozytorium dla naszego projektu. Otwórz konsolę w katalogu `djangogirls` i wpisz następujące polecenia: + +> **Uwaga** Sprawdź bieżący katalog roboczy za pomocą polecenia `pwd` (macOS/Linux) lub `cd` (Windows) przed inicjalizacją repozytorium. Powinnaś się znajdować w katalogu `djangogirls`. + +{% filename %}command-line{% endfilename %} + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Twoja Nazwa Uzytkownika" + $ git config --global user.email ty@adres.pl + + +Inicjalizacja repozytorium gita jest jednorazowym zadaniem dla każdego projektu (nie będzie więcej potrzeby, byś ponownie podawał nazwę użytkownika i email). + +Git będzie śledzić zmiany we wszyskich plikach i folderach w tym katalogu, ale zwróć uwagę, że znajdują się w nim pewne pliki, których zmiany chcemy ignorować. By to zrobić, musimy utworzyć w tym katalogu plik, który nazwiemy `.gitignore`. Otwórz swój edytor kodu i utwórz nowy plik o następującej treści: + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +I zapisz go jako `.gitignore` w katalogu "djangogirls". + +> **Uwaga** Ta kropka na początku nazwy pliku jest ważna! Jeżeli masz problem podczas tworzenia tego pliku (MacOS ma na przykład problem z tworzeniem plików zaczynających się od kropki za pomocą Findera), to spróbuj użyć polecenia "Zapisz jako" w swoim edytorze, to akurat jest niezawodne. I upewnij się, że nie dodałaś .txt, .py lub jakiegokolwiek innego rozszerzenia do nazwy pliku. Zostanie on rozpoznany przez Gita tylko wtedy, gdy jego nazwą jest po prostu .gitignore. +> +> **Uwaga** Jednym z plików, który wyszczególniliśmy w `.gitignore` to `db.sqlite3`. Ten plik to Twoja lokalna baza danych, w której przechowywani są wszyscy Twoi użytkownicy i posty. Będziemy podążać za standardem praktyki programowania webowego, co oznacza, że będziemy używać oddzielnych baz danych dla naszej lokalnej strony testowej oraz produkcyjnej witryny na PythonAnywhere. Bazą danych dla PythonAnywhere może być SQLite, tak jak na Twojej lokalnej maszynie. Najczęściej natomiast będziesz korzystać z bazy MySQL, która potrafi poradzić sobie z dużo większą ilością odwiedzających niż SQLite. W każdym razie, zignorowanie Twojej bazy SQLite w kopii dla GitHuba oznacza, że wszystkie posty i użytkownicy, których do tej pory stworzyłaś, będą dostępne jedynie lokalnie i będziemy musiały dodać ich ponownie na środowisku produkcyjnym. Powinnaś myśleć o swojej lokalnej bazie danych jako o dobrym placu zabaw, na którym możesz testować różne rzeczy nie bojąc się, że skasujesz prawdziwe artykuły ze swojego bloga. + +Dobrym nawykiem jest wpisywanie polecenia `git status` zanim wpiszesz `git add` albo gdy nie jesteś pewna co się zmieniło. Pozwala ono zabezpieczyć się przed niespodziankami takimi, jak chociażby dodanie lub skomitowanie błędnego pliku. Polecenie `git status` zwraca informację o wszystkich nieśledzonych/zmienionych/zaplanowanych do najbliższego commita plików, statusie brancha i wiele innych. Wynik powinien wyglądać podobnie do następującego: + +{% filename %}command-line{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +I na końcu zapisujemy zmiany. Przejdź do konsoli i wykonaj poniższe polecenia: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Przesyłanie kodu do GitHuba + +Wejdź na stronę [GitHub.com](https://www.github.com) i załóż darmowe konto użytkownika. (Jeśli zrobiłaś to na warsztatach przygotowawczych to świetnie). Zapamiętaj hasło do swojego konta (dodaj je do swojego menedżera haseł, jeśli go używasz). + +Następnie utwórz nowe repozytorium i nadaj mu nazwę "my-first-blog" (ang. "mój-pierwszy-blog"). Pozostaw niezaznaczone pole wyboru "initialize with README", pozostaw opcję .gitignore pustą (zrobiłyśmy to ręcznie) i pozostaw licencję jako None. + +![](images/new_github_repo.png) + +> **Uwaga** Nazwa `my-first-blog` jest ważna - mogłabyś wybrać jakąś inną, ale będziemy tej nazwy używać wiele razy i za każdym razem musiałabyś pamiętać, żeby zastępować "my-first-blog" swoją wybraną nazwą. Z tego powodu najłatwiej będzie jak użyjesz nazwy `my-first-blog`. + +Na następnym obrazku zostanie wyświetlony Twój URL do klonowania repozytorium, którego będziesz używać w niektórych poleceniach. + +![](images/github_get_repo_url_screenshot.png) + +Teraz musimy podpiąć repozytorium Git na komputerze do tego na GitHubie. + +Wpisz następujące polecenie do konsoli (zamień na swoją nazwę użytkownika, którą podałaś przy tworzeniu konta na GitHubie. Nie zapomnij o usunięciu nawiasów ("<" i ">"), ten URL powinien pasować do URL-a klonującego Twoje repozytorium. + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Po wykonaniu komendy push na GitHuba zostaniesz zapytana o swoją nazwę użytkownika i hasło (albo bezpośrednio w wierszu poleceń w oknie terminala albo w wyskakującym okienku). Po poprawnym wpisaniu użytkownika i hasła powinnaś zobaczyć coś takiego: + +{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +Twój kod jest teraz na GitHubie. Możesz to sprawdzić! Znajdujesz się teraz w wyśmienitym towarzystwie - [Django](https://github.com/django/django), [kurs Django Girls](https://github.com/DjangoGirls/tutorial) i wiele innych świetnych projektów open-source trzyma swój kod na GitHubie! :) + +# Wdrażanie bloga na PythonAnywhere + +## Zakładanie konta na PythonAnywhere + +> **Uwaga** Możliwe, że już wcześniej utworzyłaś konto na PythonAnywhere, jeśli przeszłaś przez wszystkie kroki w rozdziale instalacyjnym - nie ma potrzeby, byś robiła to drugi raz. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Konfigurowanie naszej strony w PythonAnywhere + +Wróć do głównego panelu [PythonAnywhere Dashboard](https://www.pythonanywhere.com/), klikając logo i wybierz opcję uruchomienia konsoli "Bash" - jest to wersja wiersza polecenia PythonAnywhere, podobnie jak na Twoim komputerze. + +![Sekcja 'New Console' na stronie PythonAnywhere z przyciskiem 'bash'](images/pythonanywhere_bash_console.png) + +> **Uwaga** PythonAnywhere jest oparty na Linuksie, więc jeśli pracujesz na Windowsie, to konsola będzie wyglądać trochę inaczej, niż na Twoim komputerze. + +Wdrożenie aplikacji internetowej w PythonAnywhere polega na ściągnięciu kodu z GitHuba, a następnie skonfigurowaniu PythonAnywhere w celu rozpoznania go i rozpoczęciu wyświetlania go jako aplikacji internetowej. Istnieją manualne sposoby robienia tego, ale PythonAnywhere zapewnia narzędzie pomocnicze, które zrobi to wszystko za Ciebie. W pierwszej kolejności zainstalujmy: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +To powinno wydrukować rzeczy takie jak `Collecting pythonanywhere`, a skończyć się na linii z napisem `Successfully installed (...) pythonanywhere- (...)`. + +Teraz uruchamiamy pomocnika, aby automatycznie skonfigurować naszą aplikację z GitHubem. Wpisz następujące polecenie do konsoli w PythonAnywhere (nie zapomnij zamienić na Twoją nazwę użytkownika GitHub, tak by Twój URL pasował do klonowanego URL-a z GitHuba). + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pa_autoconfigure_django.py https://github.com//my-first-blog.git + + +Jeżeli patrzysz na proces, będziesz mogła zobaczyć: + +- Pobieranie kodu z GitHuba +- Tworzenie środowiska wirtualnego na PythonAnywhere, podobnie jak na Twoim komputerze. +- Aktualizowanie pliku ustawień z niektórych ustawień wdrażania +- Konfigurowanie bazy danych w PythonAnywhere za pomocą polecenia `manage.py migrate` +- Konfigurowanie plików statycznych (dowiemy się o nich później) +- I konfigurowanie PythonAnywhere do obsługi aplikacji internetowej za pomocą interfejsu API + +W PythonAnywhere wszystkie te kroki są zautomatyzowane, ale są to te same kroki, które trzeba wykonać z dowolnym innym dostawcą serwera. + +Najważniejszym w tej chwili jest to, aby zapamiętać, że baza danych w PythonAnywhere jest całkowicie oddzielona od bazy danych na Twoim komputerze, co oznacza, że może mieć inne posty i konta administracyjne. W rezultacie, tak jak zrobiłyśmy to wcześniej na własnym komputerze, musimy zainicjować konto administratora za pomocą `createsuperuser`. PythonAnywhere automatycznie aktywował dla Ciebie Twojego virtualenva, więc jedyne, co musisz zrobić, to uruchomić: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Wpisz szczegóły dla konta swojego administratora. Najlepiej używać tych samych, których używasz na swoim komputerze, aby uniknąć nieporozumień, chyba że chcesz, aby hasło w PythonAnywhere było bezpieczniejsze. + +Teraz, jeśli chcesz, możesz również rzucić okiem na swój kod w PythonAnywhere używając `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 static + templates views.py + + +Możesz także przejść do zakładki "Pliki" i poruszać się za pomocą wbudowanej przeglądarki plików w PythonAnywhere. (Ze strony konsoli możesz przejść do innych stron PythonAnywhere za pomocą przycisku menu w prawym górnym rogu. Po przejściu na jedną ze stron, w pobliżu góry zobaczysz linki do innych.) + +## Jesteś na żywo! + +Twoja strona powinna teraz być dostępna w publicznym internecie! Przejdź do zakładki "Sieć" PythonAnywhere, aby uzyskać link do niej. Możesz podzielić się tym, z kimkolwiek chcesz! :) + +> **Uwaga:** Jest to poradnik dla początkujących, a podczas wdrażania tej witryny użyłyśmy kilka skrótów, które nie są idealnym rozwiązaniem z punktu widzenia bezpieczeństwa. Jeśli zdecydujesz się zbudować ten projekt lub rozpocząć nowy, powinnaś przejrzeć [Django deployment checklist](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/), aby uzyskać jakieś wskazówki dotyczące zabezpieczania witryny. + +## Porady dotyczące debugowania + +Jeśli widzisz błąd podczas uruchamiania skryptu `pa_autoconfigure_django.py`, oto kilka typowych przyczyn: + +- Zapominasz utworzyć Twój PythonAnywhere API token. +- Robisz błąd w GitHub URL +- Jeśli zobaczysz komunikat o błędzie *"Could not find your settings.py"*, prawdopodobnie nie udało Ci się dodać wszystkich plików do Git, i / lub nie przekazałeś ich do pomyślnie do GitHuba. Jeszcze raz spójrz na sekcję Git powyżej + +Jeśli odwiedzając swoją stronę zobaczysz błąd, to pierwszym miejscem, w którym powinnaś poszukać informacji o tym, co się stało, jest Twój **dziennik błędów** (ang. "error log"). Znajdziesz do niego link na stronie [Web](https://www.pythonanywhere.com/web_app_setup/) w PythonAnywhere. Sprawdź, czy znajdują się tam jakieś komunikaty o błędach - te najświeższe znajdują się na samym dole. + +Są tam też dostępne [generalne porady odnośnie debugowania na stronie pomocy PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +I pamiętaj, Twój mentor jest tutaj, by Ci pomóc! + +# Sprawdź swoją stronę! + +Domyślna strona Twojej witryny powinna brzmieć "It worked!", tak jak na Twoim lokalnym komputerze. Spróbuj dodać `/admin/` na koniec swojego adresu URL - powinnaś się przenieść do panelu admina. Zaloguj się za pomocą nazwy użytkownika i hasła. Zobaczysz, że możesz dodać nowy Post na serwerze - pamiętaj, posty z Twojej lokalnej, testowej bazy danych nie będą wysyłane na Twojego produkcyjnego bloga. + +Po utworzeniu kilku postów możesz wrócić do konfiguracji lokalnej (nie PythonAnywhere). Od teraz powinnaś pracować na swoim lokalnym komputerze, jeżeli będziesz chciała dokonać zmian na stronie. To częsty sposób pracy w rozwijaniu stron WWW - wprowadzaj zmiany lokalnie, wypychaj je na GitHuba i zaciągaj na swój internetowy serwer WWW. Pozwala to na pracę i eksperymentowanie bez obawy, że zepsujesz działającą stronę. Całkiem nieźle, co nie? + +*Przybij piątkę!* Wdrożenia strony na serwery są jednym z najtrudniejszych elementów tworzenia stron internetowych i często ludzie potrzebują kilku dni, zanim wszystko zacznie poprawnie działać. Ale Tobie udało się wdrożyć swoją stronę, jest ona w prawdziwym internecie! diff --git a/pl/deploy/images/github_get_repo_url_screenshot.png b/pl/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/pl/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/pl/deploy/images/new_github_repo.png b/pl/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/pl/deploy/images/new_github_repo.png differ diff --git a/pl/deploy/images/pythonanywhere_account.png b/pl/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/pl/deploy/images/pythonanywhere_account.png differ diff --git a/pl/deploy/images/pythonanywhere_bash_console.png b/pl/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..458b43f5d0d Binary files /dev/null and b/pl/deploy/images/pythonanywhere_bash_console.png differ diff --git a/pl/deploy/images/pythonanywhere_beginner_account_button.png b/pl/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/pl/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/pl/deploy/images/pythonanywhere_create_api_token.png b/pl/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..6e617d0a53e Binary files /dev/null and b/pl/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/pl/deploy/install_git.md b/pl/deploy/install_git.md new file mode 100755 index 00000000000..f1344062121 --- /dev/null +++ b/pl/deploy/install_git.md @@ -0,0 +1,52 @@ +Git jest "systemem kontroli wersji", którego używa wielu programistów. Program ten śledzi zmiany w plikach na przestrzeni czasu, dzięki czemu możesz później przywracać wybrane wersje tych plików. Trochę jak funkcja "Śledź zmiany" w programach do edytowania tekstu (np. programu Microsoft Word lub LibreOffice Writer), ale jest o wiele potężniejsza. + +## Instalacja Gita + + + +Możesz ściągnąć Gita z [git-scm.com](https://git-scm.com/). Naciśnij "next" na wszystkich krokach z wyjątkiem dwóch: w kroku, w którym prosi o wybranie edytora, powinnaś wybrać Nano, a w kroku zatytułowanym "Adjusting your PATH environment" wybrać "Use Git and optional Unix tools from the Windows Command Prompt" (dolna opcja). Poza tym domyślne ustawienia są w porządku. Upewnij się jeszcze, że w kroku "Configuring the line ending conversions" wybrana jest opcja "Checkout Windows-style, commit Unix-style line endings". + +Nie zapomnij zrestartować wiersza polecenia lub Powershell po instalacji zakończonej sukcesem. + + + +Ściągnij Gita z [git-scm.com](https://git-scm.com/) i postępuj zgodnie z instrukcją. + +> **Uwaga**Jeżeli działasz na OS X 10.6, 10.7 lub 10.8, będziesz musiała zainstalować wersję gita dostępną tutaj: [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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +sudo zypper install git +``` + + \ No newline at end of file diff --git a/pl/deploy/signup_pythonanywhere.md b/pl/deploy/signup_pythonanywhere.md new file mode 100755 index 00000000000..b73dca9e266 --- /dev/null +++ b/pl/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere jest platformą do uruchamiania kodu Pythona w chmurze. Będziemy go używać do hostowania naszej strony na żywo w internecie. + +Utwórz konto dla "Beginner" na PythonAnywhere (darmowy poziom jest dobry, nie potrzebujesz do niego karty kredytowej). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Strona rejestracji PythonAnywhere z przyciskiem, aby utworzyć bezpłatne konto "Beginner".](../deploy/images/pythonanywhere_beginner_account_button.png) + +> ** Uwaga!** Wybierając tutaj swoją nazwę użytkownika, należy pamiętać, że adres URL bloga będzie miał postać `twojanazwa.pythonanywhere.com`, więc wybierz swój własny nick lub nazwę tego, o czym będzie blog. Pamiętaj, aby zapamiętać hasło (dodaj je do menedżera haseł, jeśli go używasz). + +## Tworzenie tokenu PythonAnywhere API + +Tę operację będziesz musiała wykonać tylko raz. Kiedy już zakończysz tworzenie konta na PythonAnywhere, zostaniesz przeniesiona do strony nawigacyjnej. Znajdź u góry na prawo link do Twojego konta (ang. Account). + +![Link do konta na górze strony.](../deploy/images/pythonanywhere_account.png) + +a następnie wybierz zakładkę o nazwie "API Token" i wciśnij przycisk, który utworzy nowy token API (ang. "Create new API token"). + +![Zakładka z tokenem API w koncie użytkownika.](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/pl/django/README.md b/pl/django/README.md new file mode 100755 index 00000000000..ebf1180f23d --- /dev/null +++ b/pl/django/README.md @@ -0,0 +1,27 @@ +# Czym jest Django? + +Django (czytaj: dżango) to darmowy i open-source'owy framework do tworzenia aplikacji webowych, napisany w Pythonie. To taki zbiór narzędzi, dzięki którym tworzenie stron internetowych jest szybsze i łatwiejsze. + +Gdy budujesz stronę internetową, często potrzebujesz tych samych rzeczy: uwierzytelnić użytkowników (rejestracja, logowanie, wylogowywanie), panel zarządzania stroną, formularzy, sposobu przesyłania plików itd. + +Na szczęście pewni programiści już kiedyś zauważyli, że wszyscy web developerzy stają przed takimi samymi problemami i stworzyli frameworki (Django jest jednym z nich), które dostarczają nam gotowych do użycia komponentów. + +Frameworki istnieją, by oszczędzić Ci wyważania otwartych drzwi i ułatwić Ci proces tworzenia nowej strony. + +## Dlaczego potrzebujesz frameworka? + +By zrozumieć do czego naprawdę służy Django, musimy lepiej przyjrzeć się serwerom. Pierwszą rzeczą, którą musi wiedzieć serwer, jest to, że chcesz, żeby wyświetlił Ci stronę. + +Wyobraź sobie skrzynkę pocztową (port), która monitorowana jest pod kątem przychodzących listów (żądań). To właśnie rola serwera WWW. Serwer czyta listę (żądanie), a następnie odsyła odpowiedź przy użyciu strony internetowej. Ale gdy chcesz coś wysłać, musisz mieć jakąś treść. A Django jest właśnie tym, co pomoże Ci stworzyć tę treść. + +## Co się dzieje, gdy ktoś chce otworzyć stronę z Twojego serwera? + +Kiedy serwer otrzymuje żądanie, przekazuje je dalej do Django, aby ten ustalił, czego właściwie ono dotyczy. Django sprawdza najpierw adres strony i decyduje, co zrobić dalej. Ta część jest wykonywana przez obecny w Django mechanizm rozpoznawania adresów (ang. **urlresolver** - zwróć uwagę, że adres strony to inaczej adres URL, czyli angielska nazwa tego modułu nie jest przypadkowa). Nie jest on zbyt inteligentny - pobiera listę wzorców i próbuje dopasować adres URL. Django sprawdza wzorce od góry do dołu i jeśli uda się znaleźć pasującą regułę, przekazuje żądanie do odpowiedniej funkcji (zwanej *widokiem*). + +Wyobraź sobie listonosza niosącego list. Idzie ulicą i porównuje każdy numer domu z adresem na kopercie. List zostawia w skrzynce tego domu, którego adres pasuje. Tak samo działa urlresolver! + +W funkcji *widoku* dzieje się wszystko to, co najciekawsze: tutaj możemy połączyć się z bazą danych i wyszukać potrzebne nam informacje. Może użytkownik poprosił o zmianę danych? To tak, jakbyś wysłała list o treści "proszę o zmianę opisu mojego stanowiska pracy". *Widok* może sprawdzić, czy masz takie uprawnienia, a następnie dokona zmiany opisu i odeśle odpowiedź "Zrobione!". Wówczas *widok*generuje odpowiedź, a Django wysyła ją do przeglądarki użytkownika. + +Powyższy opis jest nieco uproszczony, ale znajomość niuansów technicznych nie jest Ci na razie potrzebna. Wystarczy, że zrozumiesz ogólną zasadę działania. + +Dlatego nie będziemy się zbyt mocno zagłębiać w szczegóły i zacznijmy budować coś w Django. Wszystkich potrzebnych rzeczy nauczymy się po drodze! \ No newline at end of file diff --git a/pl/django_admin/README.md b/pl/django_admin/README.md new file mode 100755 index 00000000000..6d0703074c5 --- /dev/null +++ b/pl/django_admin/README.md @@ -0,0 +1,57 @@ +# Administracja Django (admin) + +W celu dodawania, edycji czy usuwania artykułów, dla których model przed chwilą stworzyłyśmy, użyjemy admina Django. + +Otwórzmy plik `blog/admin.py` w edytorze kodu i zamieńmy jego zawartość na: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Jak widać, importujemy (dołączamy) model Post, który zdefiniowałyśmy w poprzednim rozdziale. Aby nasz model był widoczny w panelu admina, musimy go zarejestrować za pomocą polecenia `admin.site.register(Post)`. + +OK, czas rzucić okiem na nasz model Post. Pamiętaj, by wpisać `python manage.py runserver` w wierszu polecenia, by uruchomić serwer. Przejdź do przeglądarki i wpisz adres http://127.0.0.1:8000/admin/. Zobaczysz stronę logowania podobną do tej: + +![Strona logowania](images/login_page2.png) + +Aby móc się zalogować, musisz utworzyć konto administratora (*superuser*) - czyli użytkownika, który posiada nieograniczony dostęp do całej strony. Wróć do wiersza polecenia, wpisz `python manage.py createsuperuser` i wciśnij enter. + +> Pamietaj - aby móc wprowadzić nowe polecenie podczas pracy web serwera, otwórz nowy terminal i aktywuj virtualenv. Przyjrzałyśmy się, jak wpisywać nowe komendy w rozdziale **Twój pierwszy projekt w Django!**, w sekcji **Uruchamianie serwera www**. + +{% filename %}macOS or Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Po wyświetleniu komunikatu, wpisz swoją nazwę użytkownika (małymi literami, bez spacji), adres e-mail i hasło. ** Nie martw się, że nie widzisz hasła, które wpisujesz - tak powinno być.** Wpisz je i naciśnij klawisz `Enter`, aby kontynuować. Dane wyjściowe powinny wyglądać tak (gdzie nazwa użytkownika i adres e-mail powinny być Twoje): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Wróć do przeglądarki. Zaloguj się za pomocą danych logowania administratora, które wybrałaś; powinnaś zobaczyć panel administracyjny Django. + +![Admin Django](images/django_admin3.png) + +Przejdź do sekcji Posts i poeksperymentuj trochę. Dodaj pięć czy sześć wpisów do bloga. Nie martw się zawartością - widoczna ona jest tylko na Twoim komputerze - możesz skopiować i wkleić fragment tekstu z tego tutoriala, aby zaoszczędzić czas. :) + +Upewnij się, że co najmniej dwa lub trzy posty (ale nie wszystkie) mają ustawioną datę publikacji. Będzie to pomocne później. + +![Admin Django](images/edit_post3.png) + +Jeśli chcesz dowiedzieć się więcej o panelu admina Django, powinnaś sprawdzić dokumentację Django: https://docs.djangoproject.com/en/2.0/ref/contrib/admin/ + +Jest to prawdopodobnie dobry moment, aby wziąć kawę (lub herbatę) lub coś do jedzenia, aby ponownie naładować się energią. Stworzyłaś swój pierwszy model Django - zasługujesz na małą przerwę! \ No newline at end of file diff --git a/pl/django_admin/images/django_admin3.png b/pl/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/pl/django_admin/images/django_admin3.png differ diff --git a/pl/django_admin/images/edit_post3.png b/pl/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/pl/django_admin/images/edit_post3.png differ diff --git a/pl/django_admin/images/login_page2.png b/pl/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/pl/django_admin/images/login_page2.png differ diff --git a/pl/django_forms/README.md b/pl/django_forms/README.md new file mode 100755 index 00000000000..e6ed0cb04bb --- /dev/null +++ b/pl/django_forms/README.md @@ -0,0 +1,449 @@ +# Formularze Django + +Ostatnią rzeczą, jaką potrzebujemy dla naszej strony, jest stworzenie przyjemnego sposobu dodawania i edytowania wpisów na blog. Panel administracyjny (Django `admin`) jest fajny, ale raczej ciężko się go dostosowuje do niestandardowych potrzeb i ciężko poprawić jego wygląd. Z formularzami (`forms`) mamy absolutną władzę nad naszym interfejsem - możemy zbudować niemal wszystko, co nam przyjdzie do głowy! + +Sympatyczną cechą formularzy Django jest to, że możemy je budować samodzielnie od zera lub posłużyć się formularzem modelu (`ModelForm`), który zapisze dane wynikowe w danym modelu. + +To właśnie zamierzamy zrobić: zbudujemy formularz dla naszego modelu `Post`. + +Jak każda istotna część Django, formularze mają swój własny plik: `forms.py`. + +Stwórzmy plik o takiej nazwie w katalogu `blog`. + + blog + └── forms.py + + +Dobrze, a teraz otwórzmy edytor kodu i wprowadźmy następujący kod: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Musimy najpierw zaimportować formularze Django (`from django import forms`) oraz nasz model `Post` (`from .models import Post`). + +`PostForm`, jak zapewne podejrzewasz, to nazwa naszego formularza. Musimy poinformować Django, że ten formularz jest formularzem modelu (`ModelForm`), dzięki czemu Django wyręczy nas w pewnych czynnościach - właśnie za to odpowiada `forms.ModelForm`. + +Dalej mamy `class Meta`, gdzie przekazujemy Django informację o tym, jaki model powinien być wykorzystany do stworzenia tego formularza (`model = Post`). + +I wreszcie możemy wskazać, które pole (lub pola) powinny pojawić się w naszym formularzu. W tym przypadku chcemy udostępnić tylko pola `title` (tytuł) i `text` (treść wpisu) - pole autora, czyli `author` powinno zawierać aktualnie zalogowanego użytkownika (Ciebie!), zaś data stworzenia wpisu (`created_date`) powinna być ustawiana automatycznie, gdy stworzymy wpis (czyli za pomocą kodu) - zgadza się? + +I to wszystko! Jedyne, co potrzebujemy teraz zrobić, to użyć naszego formularza wewnątrz *widoku* i wyświetlić go w szablonie. + +Oto co za chwilę stworzymy: link do strony, adres URL, widok i szablon. + +## Odnośnik do strony z formularzem + +Czas otworzyć plik `blog/templates/blog/base.html` w edytorze kodu. Dodajmy wiersz w `div` o nazwie `page-header`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Zauważ, że chcemy odwołać się do naszego nowego widoku `post_new`. Klasa `"glyphicon glyphicon-plus"` jest dostarczana przez motyw z bootstrapa, którego używamy i wyświetli nam znak plus. + +Po dodaniu powyższej linii Twój plik HTML powinien wyglądać następująco: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Po zapisaniu i odświeżeniu strony http://127.0.0.1:8000 zobaczyłaś znajomo wyglądający błąd `NoReverseMatch`, zgadza się? OK! + +## Adres URL + +Otwieramy plik `blog/urls.py` w edytorze kodu i dodajemy wiersz: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new', views.post_new, name='post_new'), +``` + +Ostatecznie kod będzie wyglądał tak: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + 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 odświeżeniu strony zobaczymy błąd `AttributeError`, ponieważ nie mamy jeszcze zaimplementowanego widoku `post_new`. Dodajmy go teraz. + +## Widok post_new + +Czas otworzyć plik `blog/views.py` w edytorze kodu i dodać poniższe linijki obok innych wierszy z `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +No i nasz *widok*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Aby stworzyć nowy formularz dla modelu `Post`, musimy wywołać funkcję `PostForm()` i przekazać ją do szablonu. Do tego *widoku* jeszcze wrócimy, ale póki co, stwórzmy szybko szablon dla formularza. + +## Szablon + +Musimy utworzyć plik `post_edit.html` w katalogu `blog/templates/blog` i otowrzyć go w edytorze kodu. Aby nasz formularz zadziałał, niezbędnych jest kilka rzeczy: + +* Musimy wyświetlić formularz. Możemy to zrobić np. za pomocą polecenia {% raw %}`{{ form.as_p }}`{% endraw %}. +* Powyższa linijka musi znajdować się wewnątrz znacznika formularza HTML: <`form method="POST">...`. +* Potrzebny nam przycisk `Zapisz`. Tworzymy go jako przycisk w HTML: ``. +* I na koniec jeszcze, zaraz po znaczniku otwierającym `
`musimy dodać {% raw %}`{% csrf_token %}`{% endraw %}. To bardzo ważne, gdyż ta linijka sprawia, że Twoje formularze są bezpieczne! Jeśli o tym zapomnisz i spróbujesz zapisać formularz, Django nie pozostawi tego bez komentarza: + +![Strona CSRF Forbidden](images/csrf2.png) + +OK. Podsumujmy, jak powinien wyglądać kod HTML w pliku `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 }} + +
+{% endblock %} +``` + +Czas odświeżyć stronę! Hura! Twój formularz został wyświetlony! + +![Nowy formularz](images/new_form2.png) + +Ale zaraz, zaraz! Co się stanie, gdy wpiszesz coś w pola z `tytułem` i `treścią`, a następnie spróbujesz to zapisać? + +Nic! Znów jesteśmy na tej samej stronie, a nasza treść zniknęła... a nowego wpisu nie ma. Co poszło źle? + +Odpowiedź brzmi: nic. Mamy coś jeszcze do zrobienia w naszym *widoku*. + +## Zapisujemy formularz + +Otwórz jeszcze raz plik `blog/views.py`. w edytorze kodu. W tym momencie wszystko, co mamy w widoku `post_new` to: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Gdy prześlemy formularz, wracamy do tego samego widoku, ale tym razem mamy nieco więcej danych w zapytaniu (zmiennej `request`) - a dokładnie w `request.POST` (Nazwa POST nie ma nic wspólnego z naszymi blogowymi postami. POST wzięło się od angielskiego czasownika "post", który oznacza wysłać, nadać). Pamiętasz, że w pliku HTML nasza definicja `
` zawierała atrybut `method="POST"`? Wszystkie pola z formularza znajdują się teraz w `request.POST`. Nie zmieniaj nazwy `POST` na cokolwiek innego (inną prawidłową wartością dla `method` jest `GET`, ale nie mamy czasu na omawianie różnic). + +A więc w naszym *widoku* mamy dwie oddzielne sytuacje do obsłużenia. Pierwsza: gdy wchodzimy na stronę po raz pierwszy i chcemy pusty formularz. Druga: gdy ponownie znajdziemy się w *widoku* wraz ze wszystkimi danymi wpisanymi przez nas w formularzu. Czyli musimy dodać wyrażenie warunkowe (użyjemy do tego `if`): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +To jest czas na uzupełnienie kropek `[...]`. Jeżeli zmienna `method` jest równa `POST`, to chcemy zbudować formularz `PostForm` z danymi z formularza, zgadza się? Możemy zrobić to następująco: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Następnie sprawdźmy, czy formularz jest wypełniony poprawnie (wszystkie wymagane pola są uzupełnione i żadna nieprawidłowa wartość nie zostanie zapisana). Użyjmy do tego `form.is_valid()`. + +Sprawdzamy, czy formularz jest wypełniony poprawnie. Jeśli tak, możemy go zapisać! + +{% 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() +``` + +Tak właściwie robimy teraz dwie rzeczy: zapisujemy formularz przy pomocy `form.save` oraz dodajemy autora (jako że nasz `PostForm` nie zawierał pola `author`, a jest ono wymagane). `commit=False` sygnalizuje, że jeszcze nie chcemy zapisywać modelu `Post` - najpierw chcemy dodać autora. Przez większość czasu będziesz używała `form.save()` bez `commit=False`, ale w tym przypadku musimy zrobić to w ten sposób. `post.save()` zachowa zmiany (razem z dodanym autorem) i nasz nowy wpis na blogu jest gotowy! + +Ostatecznie, byłoby wspaniale, gdybyśmy mogły przejść od razu na stronę `post_detail` i zobaczyć nasz nowy wpis, prawda? Aby to było możliwe, potrzebujemy jeszcze jednego importu: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Dodaj go na samym początku pliku. I teraz możemy powiedzieć: "przejdź na stronę `post_detail`, żeby zobaczyć nowo utworzony wpis": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` to nazwa widoku, do którego chcemy przejść. Pamiętasz, że ten *widok* potrzebuje zmiennej `pk`? Aby ją przekazać do widoków stosujemy `pk=post.pk`, gdzie `post` jest nowo utworzonym wpisem! + +No dobrze, pogadałyśmy sobie, to może teraz zobaczymy, jak wygląda cały nasz *widok*, co? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Zobaczmy, czy zadziała. Przejdź na stronę http://127.0.0.1:8000/post/new/, dodaj `tytuł` i `tekst`, zapisz... i voilà! Nowy wpis został dodany, a my zostałyśmy przekierowane na stronę `post_detail`! + +Zapewne dostrzegłaś, że ustalamy datę publikacji przed zapisaniem postu. Później wprowadzimy przycisk publikacji *publish* w kursie **Django Girls: Rozszerzenia**. + +Wspaniale! + +> Jako że niedawno używałyśmy interfejsu admina Django, system w tym momencie jest przekonany, że jesteśmy zalogowane. Niektóre sytuacje mogą doprowadzić do tego, że zostaniemy wylogowane (np. zamknięcie przeglądarki czy restart bazy danych, itd.). Jeżeli zauważysz, że przy tworzeniu wpisu pojawia się błąd związany z brakiem zalogowanego użytkownika, przejdź na stronę stronę panelu admina http://127.0.0.1:8000/admin i zaloguj się jeszcze raz. Na pewien czas problem się rozwiąże. W rozdziale **Praca domowa: zabezpiecz swoją stronę!** - zaraz po głównym kursie - czeka na Ciebie permanentne rozwiązanie tego problemu. + +![Błąd logowania użytkownika](images/post_create_error.png) + +## Walidacja formularza + +Teraz pokażemy Ci, jak fajne potrafią być formularze w Django. Wpis na blogu potrzebuje uzupełnionych pól `title` i `text`. W naszym modelu `Post` nie powiedzieliśmy (z wyjątkiem `published_date`), że te pola nie są wymagane, więc Django domyślnie uważa, że muszą zostać wypełnione. + +Spróbuj zapisać formularz bez uzupełnionych pól `title` i `text`. Zgadnij, co się stanie? + +![Walidacja formularza](images/form_validation2.png) + +Django dba o walidację pól w naszym formularzu, upewniając się, czy są uzupełnione poprawnie. Prawda, że niesamowite? + +## Edycja formularza + +Teraz już wiemy, jak dodać nowy formularz. Ale co w przypadku, gdy zapragniemy zmienić już istniejący? Proces jest bardzo podobny do tego, który przeszłyśmy przed chwilą. Stwórzmy szybko kilka ważnych rzeczy. (jeżeli masz problem ze zrozumieniem czegoś, zapytaj osobę prowadzącą kurs lub przejrzyj poprzednie rozdziały, gdyż wszystkie kroki mamy już omówione.) + +Otwórz `blog/templates/blog/post_detail.html` w edytorze kodu i dodaj poniższą linijkę + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +dzięki czemu nasz szablon będzie wyglądał tak: + +{% 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 %} +``` + +Otwieramy plik `blog/urls.py` w edytorze kodu dodajemy wiersz: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Wykorzystamy jeszcze raz szablon `blog/templates/blog/post_edit.html`, więc ostatnią rzeczą, której nam brakuje, jest *widok*. + +Otwórz `blog/views.py` w edytorze kodu i dodaj poniższy kod na samym końcu tego pliku: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +To wygląda prawie tak samo, jak nasz widok `post_new`, nieprawdaż? Ale nie do końca. Po pierwsze: przekazujemy dodatkowy parametr `pk` z urls. Dalej - pobieramy model wpisu `Post` do edycji za pomocą `get_object_or_404(Post, pk=pk)`. Gdy tworzymy formularz, przekazujemy ten wpis pod zmienną `instance` zarówno w trakcie zapisywania formularza… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +…jak i zaraz po otwarciu formularza z wpisem do edycji: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +OK. Przetestujmy, jak to działa! Przejdź na stronę `post_detail`. W górnym prawym rogu powinnaś znaleźć przycisk edycji: + +![Przycisk edycji](images/edit_button2.png) + +Po kliknęciu w niego zobaczysz formularz z naszym wpisem: + +![Edycja formularza](images/edit_form2.png) + +Zmodyfikuj jego tytuł lub treść wedle uznania, a następnie zapisz zmiany! + +Gratulacje! Twoja aplikacja staje się coraz bardziej kompletna! + +Jeżeli potrzebujesz więcej informacji o formularzach Django, zajrzyj do dokumentacji: https://docs.djangoproject.com/en/2.0/topics/forms/ + +## Bezpieczeństwo + +Super, że możemy tworzyć posty klikając w link! Jest niestety jeden problem - aktualnie każdy, kto odwiedzi Twoją stronę, może stworzyć nowy post. Zróbmy tak, aby przycisk był widoczny tylko dla Ciebie i nikogo innego. + +Otwórzmy `blog/templates/blog/base.html` w edytorze kodu, znajdźmy nasz `page-header` `div` i zalinkujmy tag, który umieściłyśmy tam wcześniej. Powinien wyglądać tak: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Dodamy kolejny tag `{% if %}`, który sprawi, że link będzie widoczny tylko dla użytkowników zalogowanych jako admin. W tej grupie na razie jesteś tylko Ty! Zmień `` tag, by wyglądał w ten sposób: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Ten `{% if %}` spowoduje, że link zostanie wysłany do przeglądarki tylko wtedy, kiedy użytkownik chcący wyświetlić tę stronę jest zalogowany. To nie chroni tworzenia wpisów w 100%, ale jest to dobry pierwszy krok. Zagadnieniu bezpieczeństwa poświęcimy więcej miejsca w rozszerzeniu do tego kursu. + +Pamiętasz ikonkę edycji, która przed chwilą dodałyśmy do naszej strony szczegółów? Chcemy też dodać tę samą zmianę tutaj tak, by inne osoby nie były w stanie edytować istniejących postów. + +Otwórzmy `blog/templates/blog/post_detail.html` w edytorze kodu i dodajmy poniższą linijkę: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Zamień ją na: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Ponieważ jesteś najprawdopodobniej zalogowana, jeżeli odświeżysz stronę, nie zobaczysz żadnej zmiany. Podejrzyj stronę w innej przeglądarce lub chociaż w trybie incognito (nazywanym "InPrivate" w Windows Edge) i zobaczysz, że ten link i ikonka się nie pojawiają! + +## Jeszcze jedno: czas na wdrożenie! + +Dobrze byłoby wiedzieć, że nasza witryna nadal działa na PythonAnywhere, prawda? + +* Po pierwsze zapiszmy nasze zmiany i wyślijmy je na GitHuba: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* Potem, w konsoli [PythonAnywhere Bash](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Pamiętaj by podmienić `` na Twoją właściwą nazwę użytkownika PythonAnywhere, bez nawiasów ostrokątnych). + +* Nareszcie przeskakujemy do do ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (użyj przycisku menu w prawym górnym rogu konsoli) i naciśnij **Reload**. Odśwież swój blog https://yourname.pythonanywhere.com, aby zobaczyć zmiany. + +I to już wszystko! Gratulacje :) \ No newline at end of file diff --git a/pl/django_forms/images/csrf2.png b/pl/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/pl/django_forms/images/csrf2.png differ diff --git a/pl/django_forms/images/drafts.png b/pl/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/pl/django_forms/images/drafts.png differ diff --git a/pl/django_forms/images/edit_button2.png b/pl/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/pl/django_forms/images/edit_button2.png differ diff --git a/pl/django_forms/images/edit_form2.png b/pl/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/pl/django_forms/images/edit_form2.png differ diff --git a/pl/django_forms/images/form_validation2.png b/pl/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/pl/django_forms/images/form_validation2.png differ diff --git a/pl/django_forms/images/new_form2.png b/pl/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/pl/django_forms/images/new_form2.png differ diff --git a/pl/django_forms/images/post_create_error.png b/pl/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/pl/django_forms/images/post_create_error.png differ diff --git a/pl/django_installation/README.md b/pl/django_installation/README.md new file mode 100644 index 00000000000..b68fba400f9 --- /dev/null +++ b/pl/django_installation/README.md @@ -0,0 +1,7 @@ +# Instalowanie Django + +> **Uwaga** Jeśli używasz już Chromebooka, pomiń ten rozdział i upewnij się, że postąpiłeś zgodnie z instrukcją [Instalowanie Chromebook](../chromebook_setup/README.md). +> +> **Uwaga** Jeśli wykonałaś krok Instalacja, to masz już wszystko zrobione - możesz przejść od razu do następnego kroku! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/pl/django_installation/instructions.md b/pl/django_installation/instructions.md new file mode 100755 index 00000000000..4d6a90399e3 --- /dev/null +++ b/pl/django_installation/instructions.md @@ -0,0 +1,218 @@ +> Fragmenty tego rozdziału napisane są w oparciu o kurs Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Fragmenty tego rozdziału są oparte o tutorial [django-marcador](http://django-marcador.keimlink.de/) na licencji Creative Commons Attribution-ShareAlike 4.0 International. Tutorial django-marcador jest chroniony prawami autorskimi przez Markusa Zapke-Gründemanna i in. + +## Środowisko wirtualne + +Zanim zainstalujemy Django, zapoznamy się z niezwykle użytecznym narzędziem, które pomoże utrzymać porządek poczas pracy z kodem na Twoim komputerze. Można ten krok pominąć, ale zachęcamy, żebyś tego nie robiła. Dobrze jest zacząć z możliwie najlepszą konfiguracją, gdyż zaoszczędzi Ci to wielu problemów w przyszłości! + +Stwórzmy zatem **środowisko wirtualne** (zwane też *virtualenv*). Jego zadaniem jest oddzielenie środowiska Pythona/Django dla każdego projektu z osobna. Oznacza to, że zmiany dokonane w obrębie jednej aplikacji nie wpłyną na działanie innych, nad którymi pracujesz. Sprytne, prawda? + +Jedyne, co potrzebujesz zrobić, to wybrać katalog, w którym chcesz utworzyć `virtualenv`; na przykład Twój katalog domowy. Na Windowsie może on wyglądać jak `C:\Users\Name` (gdzie `Name` jest twoim loginem). + +> **UWAGA:** W Windowsie upewnij się, że katalog ten nie zawiera znaków akcentowanych lub specjalnych; Jeśli Twoja nazwa użytkownika zawiera znaki akcentowane, użyj innego katalogu, na przykład `C:\djangogirls`. + +Na potrzeby kursu będziemy tworzyć nowy katalog `djangogirls` w Twoim katalogu domowym: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Stwórzmy nowe środowisko wirtualne o nazwie `myvenv`. Polecenie ma następujący format: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Aby utworzyć nowego `virtualenv`'a, musisz otworzyć okno wiersza polecenia i wykonać polecenie `python -m venv myvenv`. Będzie to wyglądać tak: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Gdzie `myvenv` to nazwa Twojego `virtualenv`'a. Nazwa może być dowolna, ale lepiej używać tylko małych liter, bez spacji i polskich znaków. Dobrze jest też trzymać się krótkich nazw - będziesz do nich często wracała! + + + + + +Możemy stworzyć `virtualenv`'a w Linuksie i macOS poprzez użycie jedynie polecenia `python3 -m venv myvenv`. Przyjmie ono następującą postać: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` to nazwa Twojego `virtualenv`'a. Nazwa środowiska może być dowolna, ale lepiej używać tylko małych liter, bez spacji i polskich znaków. Dobrze jest też trzymać się krótkich nazw - będziesz do nich często wracała! + +> **UWAGA:** W niektórych wersjach Debiana/Ubuntu może pojawić się następujący komunikat o błędzie: +> +> {% 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. +> +> +> W tym przypadku, wykonaj powyższe instrukcje i zainstaluj pakiet `python3-venv`: {% filename %}command-line{% endfilename %} +> +> sudo apt install python3-venv +> +> +> **UWAGA:** W niektórych wersjach Debiana/Ubuntu inicjowanie środowiska wirtualnego w ten sposób daje obecnie następujący błąd: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Aby uniknąć tego problemu, użyj polecenia `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **UWAGA:** Jeśli wystąpi błąd taki jak +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> to zamiast tego wykonaj: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## Praca z virtualenv + +Powyższa instrukcja utworzy katalog o nazwie `myvenv` (albo o nazwie, którą wybrałaś) zawierający nasze środowisko wirtualne (czyli w zasadzie zbiór katalogów i plików). + + + +Uruchom wirtualne środowisko za pomocą polecenia: + +{% filename %}command-line{% endfilename %} + + C:\Użytkownicy\Nazwa\djangogirls> myvenv\Scripts\activate + + +> **Uwaga:** W systemie Windows 10 możesz otrzymać błąd w programie Windows PowerShell, który mówi, `wykonywanie skryptów jest wyłączone w tym systemie`. W tym przypadku, otwórz inny Windows PowerShell z opcją "Uruchom jako Administrator". Następnie spróbuj, wpisując następujące polecenie przed rozpoczęciem środowiska wirtualnego: +> +> {% 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 +> + + + + + +Uruchom wirtualne środowisko za pomocą polecenia: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Nie zapomnij zastąpić `myvenv` nazwą, którą wybrałaś dla Twojego `virtualenv`! + +> **UWAGA:** może się zdarzyć, że polecenie `source` nie będzie dostępne. W takim przypadku spróbuj użyć poniższego: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +O tym, że Twój `virtualenv` jest uruchomiony, dowiesz się, gdy zobaczysz w swojej konsoli prompt poprzedzony przedrostkiem `(myvenv)`. + +W trakcie pracy ze środowiskiem wirtualnym `python` będzie automatycznie odnosił się do właściwej wersji, dzięki czemu możesz używać polecenia `python` zamiast `python3`. + +Świetnie, wszystkie potrzebne elementy są już gotowe. Nareszcie możemy zainstalować Django! + +## Instalowanie Django + +Teraz, gdy Twój `virtualenv` jest już uruchomiony, możesz zainstalować Django. + +Zanim jednak to zrobimy, powinniśmy się upewnić, że mamy najnowszą wersję `pip`, oprogramowania, które używamy do zainstalowania Django: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python3 -m pip install --upgrade pip + + +### Instalacja pakietów z pliku wymagań + +Plik wymagań zawiera listę zależności, które zainstalujemy za pomocą polecenia `pip install`: + +Najpierw stwórz plik `requirements.txt` wewnątrz katalogu `djangogirls/` używając edytora kodu, który wcześniej zainstalowałaś. Aby to zrobić, otwórz nowy plik w edytorze kodu, a następnie zapisz go jako ` requirements.txt ` w folderze ` djangogirls / . Twój katalog będzie wyglądał następująco:

+ +
djangogirls
+└───requirements.txt
+`
+ +W swoim pliku `djangogirls/requirements.txt` powinnaś dodać następujący tekst: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Teraz możesz uruchomić `pip install -r requirements.txt`, aby zainstalować 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Jeżeli w trakcie wywoływania polecenia pip w Windows otrzymasz błąd, sprawdź czy ścieżka Twojego projektu nie zawiera spacji, kresek lub znaków specjalnych (np. `C:\Users\User Name\djangogirls`). Jeżeli tak, sugerujemy przeniesienie projektu do innego katalogu bez spacji, kresek i znaków specjalnych (propnujemy `C:\djangogirls`). Utwórz nowy virtualenv w nowym katalogu, następnie usuń stary i spróbuj ponownie wykonać powyższe polecenie. (Przenoszenie katalogu virtualenv nie będzie działać ponieważ virtualenv używa ścieżek bezwzględnych.) + + + + + +> Twoja linia poleceń może się zamrozić po próbie zainstalowania Django. Jeśli tak się stanie, zamiast powyższego polecenia użyj: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Jeśli po użyciu polecenia pip w Ubuntu 12.04 otrzymasz błąd, użyj polecenia `python -m pip install -U --force-reinstall pip`, aby naprawić instalacją pip'a w środowisku wirtualnym. + + + +To wszystko! Teraz (nareszcie) jesteś gotowa do stworzenia aplikacji w Django! \ No newline at end of file diff --git a/pl/django_models/README.md b/pl/django_models/README.md new file mode 100755 index 00000000000..77de34376cc --- /dev/null +++ b/pl/django_models/README.md @@ -0,0 +1,201 @@ +# Modele w Django + +Teraz zajmiemy się tworzeniem czegoś, co będzie przechowywało wszystkie wpisy na naszym blogu. Ale zanim przystąpimy do tego, musimy poświęcić chwilę na przyjrzenie się tworom zwanym `obiektami`. + +## Obiekty + +W programowaniu istnieje pojęcie `programowania zorientowanego obiektowego`. Chodzi o to, że zamiast wpisywania nudnych sekwencji poleceń, możemy tworzyć modele różnych rzeczy i definiować w jaki sposób wchodzą ze sobą w interakcję. + +Zatem czym są obiekty? To po prostu zbiór pewnych właściwości i czynności. Owszem, brzmi dziwnie, ale przyjrzyjmy się temu na przykładzie. + +Jeśli chcemy stworzyć model kota, stworzymy obiekt o nazwie `Kot` posiadający jakieś właściwości, np. `kolor`, `wiek`, `nastrój` (np. dobry, zły, senny ;)), i `właściciel` (czyli obiekt typu `Osoba` lub pozostawimy tę właściwość pustą, wtedy mamy bezpańskiego kota). + +Nasz `Kot` ma określone czynności: `mrucz`, `podrap`, `jedz` (i w tym przypadku przekażemy kotu oddzielny obiekt o nazwie `KociPrzysmak` ze swoimi własnymi właściwościami, np. `smak`). + + Kot + -------- + kolor + wiek + nastroj + wlasciciel + mrucz() + podrap() + jedz(koci_przysmak) + + + KociPrzysmak + -------- + smak + + +Czyli w zasadzie chodzi o to, że opisujemy prawdziwe rzeczy w kodzie za pomocą właściwości (zwanych `właściwościami obiektu`) oraz czynności (zwanych `metodami`). + +W takim razie jak będzie wyglądał model naszego postu na blogu? Chcemy zbudować blog, zgadza się? + +Musimy sobie odpowiedzieć na pytanie: Czym jest post na blogu? Jakie powinien mieć właściwości? + +Na pewno musi zawierać zawartość tekstową oraz tytuł, prawda? Fajnie byłoby też wiedzieć, kto go napisał - czyli potrzebujemy autora. No i chcemy także znać daty, kiedy wpis został utworzony i opublikowany. + + Post + -------- + title + text + author + created_date + published_date + + +Co możemy zrobić z wpisem na blogu? Przydałaby nam się jakaś `metoda`, która opublikuje nasz wpis, zgadza się? + +Tak więc będziemy potrzebować metody `publish`. + +Skoro już wiemy, co chcemy osiągnąć, pora zacząć tworzyć model w Django! + +## Model w Django + +Wiedząc, czym jest obiekt, możemy stworzyć model Django odpowiadający naszemu wpisowi na blogu. + +Model w Django jest specjalnym rodzajem obiektu - jest zapisywany w `bazie danych`. Baza danych jest zbiorem informacji. Miejscem, w którym przechowujemy informacje o użytkownikach, Twoje wpisy na blogu, itd. Do zapisania naszych danych użyjemy bazy SQLite. Jest to domyślny moduł bazy danych w Django - na nasze potrzeby w zupełności wystarczy. + +Możesz sobie wyobrazić model w bazie danych jako arkusz kalkulacyjny z kolumnami (polami) oraz wierszami (danymi). + +### Tworzenie aplikacji + +Aby utrzymać wszystko w ładzie, stworzymy osobną aplikację wewnątrz naszego projektu. Przyjemnie jest mieć wszystko uporządkowane od samego początku. Aby stworzyć aplikację, musimy wykonać następujące polecenie w konsoli (z poziomu katalogu `djangogirls`, tam gdzie znajduje się plik `manage.py`): + +{% filename %}macOS and Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Zauważysz, że nowy katalog `blog` został utworzony i zawiera kilka plików. Katalogi i pliki w naszym projekcie powinny wyglądać tak: + + djangogirls + ├── blog + │   ├── __init__.py + │   ├── admin.py + │   ├── apps.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + | ├── urls.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + └── requirements.txt + + +Po stworzeniu aplikacji, musimy dać znać Django, że powinien jej używać. Robimy to w pliku `mysite/settings.py` - otwórz go w swoim edytorze kodu. Musimy odnaleźć nagłówek `INSTALLED_APPS` i dodać wiersz o treści `'blog',` tuż przed nawiasem zamykającym `]`. Czyli efekt końcowy powinien wyglądać tak: + +{% 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', +] +``` + +### Tworzymy model wpisu na blogu + +W pliku `blog/models.py` definiujemy wszystkie obiekty zwane `Models` - jest to miejsce, w którym będziemy definiować nasz wpis na blogu. + +Otwórz plik `blog/models.py` w swoim edytorze kodu, usuń z niego całą zawartość i wpisz taki kod: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Upewnij się, że używasz dwóch znaków podkreślenia (`_`) po obu stronach `str`. W Pythonie używa się ich bardzo często i czasem nazywa się je "dunder" (skrót od angielskiej nazwy: "double-underscore"). + +Wygląda przerażająco, prawda? Ale nie martw się - będziemy tłumaczyć, co te linijki znaczą! + +Wszystkie wiersze zaczynające się od `from` lub `import` są wierszami dodającymi jakieś elementy z innych plików. Czyli zamiast kopiowania i wklejania tych samych treści w każdym pliku, możemy po prostu zawrzeć ich fragmenty za pomocą `from... import ...`. + +`class Post(models.Model):` - ta linijka definiuje nasz model (jest on obiektem, czyli `object`). + +- `class` to specjalne słowo kluczowe, które sygnalizuje, że tworzymy obiekt. +- `Post` to nazwa naszego modelu. Możemy nadać mu inną nazwę (bez polskich liter, znaków specjalnych i spacji). Zawsze zaczynaj nazwę modelu wielką literą. +- `models.Model` oznacza, że nasz obiekt Post jest modelem Django. W ten sposób Django wie, że powinien go przechowywać w bazie danych. + +Teraz dodamy właściwości, o których wspomniałyśmy już wcześniej: `title` (tytuł), `text` (treść wpisu), `created_date` (data utworzenia), `published_date` (data publikacji) oraz `author` (autor). Do tego celu potrzebujemy określić typ każdego pola (Czy to jest tekst? Liczba? Data? Odwołanie do innego obiektu, np. użytkownika?) + +- `models.CharField` - tak definiujemy tekst z ograniczoną liczbą znaków. +- `models.TextField` - a to nadaje się do dłuższych tekstów bez ograniczeń w ilości znaków. Dla treści wpisu będzie idealne, prawda? +- `models.DateTimeField` - to jest data i godzina. +- `models.ForeignKey` - to jest odnośnik do innego modelu. + +Nie będziemy tutaj wyjaśniać drobiazgowo każdego elementu kodu, gdyż zajęłoby to zbyt dużo czasu. Zajrzyj do dokumentacji Django, jeżeli chcesz dowiedzieć się więcej o polach modelu oraz jak definiować rzeczy inne niż opisane powyżej (https://docs.djangoproject.com/en/2.0/ref/models/fields/#field-types). + +A co to takiego `def publish(self):`? To jest dokładnie metoda publikująca wpis (`publish`), o której wspominaliśmy wcześniej. Wyraz `def` oznacza, że mamy do czynienia z funkcją/metodą, a `publish` to nazwa metody. Możesz zmienić nazwę metody, jeśli chcesz. Zasadą jest, że używamy małych liter oraz znaków podkreślenia zamiast spacji. Na przykład metodę, która oblicza średnią cenę, można nazwać `calculate_average_price`. + +Bardzo często metody coś zwracają (ang. `return`). Przykład tego znajdziesz w metodzie `__str__`. W tym przypadku wywołując metodę `__str__()` otrzymamy tekst (**string**) zawierający tytuł wpisu. + +Również należy zauważyć, że zarówno `def publish(self):` i `def __str__(self):` są wcięte wewnątrz naszej klasy. Ponieważ Python jest wrażliwy na odstępy, musimy wciąć nasze metody wewnątrz klasy. W przeciwnym razie metody nie będą należeć do klasy i można uzyskać nieoczekiwane zachowanie. + +Jeśli coś nie jest jeszcze jasne w modelach, nie wahaj się zapytać swojego mentora! Zdajemy sobie sprawę, że jest to dość skomplikowane, zwłaszcza gdy poznajesz obiekty i funkcje w tym samym czasie. Mimo wszystko mamy nadzieję, że teraz wygląda nieco mniej magicznie! + +### Tworzymy tabele dla modeli w bazie danych + +Został nam ostatni krok, a mianowicie dodanie naszego nowego modelu do bazy danych. Najpierw musimy poinformować Django, że mamy pewne zmiany w naszym modelu. (Właśnie go utworzyłyśmy!) Przejdź do okna konsoli i wpisz `python manage.py makemigrations blog`. Będzie to wyglądać tak: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Uwaga:** Pamiętaj, aby zapisać pliki, które edytujesz. W przeciwnym razie Twój komputer wykona poprzednią wersję, która może dać Tobie nieoczekiwane komunikaty o błędach. + +Django przygotował dla nas plik z migracjami, które musimy zastosować teraz do naszej bazy danych. Wpisz `python manage.py migrate blog`, a wynik powinien wyglądać następująco: + +{% 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 + + +Hurra! Nasz model wpisu znajduje się teraz w naszej bazie danych! Byłoby miło to zobaczyć, prawda? Przejdź do następnego rozdziału, aby zobaczyć, jak wygląda nasz wpis! \ No newline at end of file diff --git a/pl/django_orm/README.md b/pl/django_orm/README.md new file mode 100755 index 00000000000..0cbf3d52c9c --- /dev/null +++ b/pl/django_orm/README.md @@ -0,0 +1,221 @@ +# ORM i obiekty QuerySet w Django + +Z tego rozdziału dowiesz się, w jaki sposób Django łączy się z bazą danych i gromadzi w niej informacje. Do dzieła! + +## Czym jest QuerySet? + +Najprościej mówiąc, QuerySet jest listą obiektów danego Modelu. Za jego pomocą możesz odczytywać informacje z bazy danych, jak również je filtrować i układać w określonej kolejności. + +Najłatwiej uczyć się na przykładach. To co, spróbujemy? + +## Konsola Django + +Otwórz swoją lokalną konsolę Django (nie na PythonAnywhere) i wpisz następujące polecenie: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Efekt powinien wyglądać tak: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Jesteś teraz w interaktywnej konsoli Django. Przypomina ona nieco wiersz polecenia Pythona, z odrobiną dodatkowej magii Django. :) Możesz także używać w niej wszystkich poleceń Pythona. + +### Wszystkie obiekty + +Na początek spróbujmy wyświetlić wszystkie nasze wpisy. Zrób to następującym poleceniem: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Ups! Wyskoczył błąd. Mówi on nam, że nie istnieje coś takiego jak 'Post'. Oczywiście -- zapomniałyśmy go wcześniej zaimportować! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Importujemy model `Post` z `blog.models`. Spróbujmy jeszcze raz wyświetlić wszystkie wpisy: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Pojawiła się lista wpisów, które dodałyśmy wcześniej! Utworzyłyśmy je przy pomocy panelu administracyjnego Django. Teraz jednak chciałybyśmy dodać nowy wpis używając Pythona. Jak to zrobimy? + +### Tworzenie obiektu + +W taki sposób tworzymy nowy obiekt Post w bazie danych: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Ale brakuje nam jednego składnika: `me`. Musimy przekazać instancję modelu `User` jako autora. Jak to zrobić? + +Najpierw zaimportujmy model User: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Jakich użytkowników mamy w bazie danych? Spróbuj tak: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +To konto administratora, które stworzyłyśmy wcześniej! Teraz uzyskajmy dostęp do naszej instancji użytkownika (podmień poniższą linię, by zawierała nazwę Twojego użytkownika): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Jak widzisz, za pomocą polecenia `get` pobrałyśmy z bazy obiekt użytkownika (`User`) z właściwością `username` o wartości 'ola'. Elegancko! + +Teraz możemy wreszcie stworzyć nasz post: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Hura! Chciałabyś sprawdzić, czy się udało? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Jest! Kolejny post na liście! + +### Dodajemy więcej wpisów + +Możesz teraz trochę się zabawić i dodać więcej postów, aby zobaczyć, jak to działa. Dodaj dwa lub trzy kolejne, a następnie przejdź do następnej części. + +### Filtrowanie obiektów + +Niezmiernie istotną cechą QuerySetów jest możliwość ich filtrowania. Dajmy na to, że chciałybyśmy znaleźć wszystkie wpisy dodane przez użytkowniczkę (User) o nazwie ola. Skorzystamy z metody `filter` zamiast `all` w `Post.objects.all()`. W nawiasach podajemy, jaki warunek bądź warunki muszą spełniać posty na blogu, aby znaleźć się w naszym zapytaniu. W naszej sytuacji chcemy, by `author` (autor) odpowiadał zmiennej `me`. W Django zapisujemy to tak: `author=me`. Teraz nasz kawałek kodu wygląda mniej-więcej tak: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +A może chcemy zobaczyć wszystkie posty, które zawierają słowo "tytuł" w polu `title`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Uwaga:** Pomiędzy `title` a `contains` znajdują się dwa znaki podkreślenia (`_`). ORM w Django używa takiej składni, aby oddzielić nazwy pól ("title") od operacji lub filtrów ("contains"). Jeśli użyjesz tylko jednego, zobaczysz błąd o treści "FieldError: Cannot resolve keyword title_contains". + +Możemy także wyświetlić listę wszystkich opublikowanych wpisów. W tym celu odfiltrujmy wszystkie wpisy, które mają ustawioną datę publikacji (`published_date`) na taką, która już minęła: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Niestety, post dodany przez nas z konsoli Pythona nie został jeszcze opublikowany. Ale możemy to zmienić! Zacznij od pobrania wpisu, który chcesz opublikować: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +A następnie opublikuj go za pomocą metody `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Teraz spróbujmy jeszcze raz wyświetlić listę opublikowanych wpisów (wciśnij trzykrotnie klawisz ze strzałką do góry, a następnie zatwierdź klawiszem `Enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Kolejność obiektów + +QuerySety umożliwiają również porządkowanie list obiektów według określonej kolejności. Spróbujmy uporządkować je według daty utworzenia, czyli zawartości pola `created_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Możemy także odwrócić kolejność poprzez dodanie `-` na początku: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Łączenie QuerySetów + +Jak widziałyśmy, niektóre metody `Post.objects` zwracają nam QuerySet. Te same metody z kolei również mogą być wywoływane na QuerySetcie, co zwróci nam nowy QuerySet. W związku z tym można połączyć ich efekt poprzez **złączenie** ich razem: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +To naprawdę potężne narzędzie, które pozwala na pisanie bardzo złożonych zapytań. + +Doskonale! Jesteś teraz gotowa na następną część! Zamknij konsolę poleceniem: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/pl/django_start_project/README.md b/pl/django_start_project/README.md new file mode 100755 index 00000000000..52b2dda274b --- /dev/null +++ b/pl/django_start_project/README.md @@ -0,0 +1,205 @@ +# Twój pierwszy projekt w Django! + +> Fragment tego rozdziału opiera się o tutoriale Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Fragmenty tego rozdziału są oparte o [tutorial django-marcador](http://django-marcador.keimlink.de/) na licencji Creative Commons Attribution-ShareAlike International 4.0. Tutorial django-marcador jest chroniony prawami autorskimi przez Markusa Zapke-Gründemanna i in. + +Mamy zamiar stworzyć prosty blog! + +Pierwszy krok, który trzeba wykonać, to utworzenie nowego projektu Django. To oznacza, że skorzystamy z dostarczonych przez Django skryptów, które utworzą za nas szkielet projektu Django. Ten szkielet to zbiór katalogów i plików, których będziemy używać później. + +Nazwy niektórych plików i katalogów są bardzo ważne dla Django. Nie powinnaś zmieniać nazw plików, które zostaną utworzone. Przenoszenie ich w inne miejsce też nie jest dobrym pomysłem. Django wymaga zachowania pewnej struktury, by móc szybko znaleźć potrzebne rzeczy. + +> Pamiętaj, aby uruchamiać wszystko w virtualenvie. Jeśli nie widzisz prefiksu `(myvenv)` w konsoli, to znaczy że musisz uruchomić swój virtualenv. Wyjaśniłyśmy, jak to zrobić w rozdziale **Instalacja Django** w części **Praca z virtualenv**. Wystarczy wpisać `myvenv\Scripts\activate` w systemie Windows lub `source myvenv/bin/activate`, jeśli używasz macOS lub Linux. + + + +Dla systemów MacmacOS lub Linux, wpisz teraz do swojej konsoli następującą komendę. **Nie zapomnij dodać kropki `.` na końcu!** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Kropka `.` ma kluczowe znaczenie, ponieważ dzięki niej skrypt wie, że ma zainstalować Django w bieżącym katalogu (kropka `.` to taka skrócona nazwa bieżącego katalogu). +> +> **Uwaga** Kiedy będziesz przepisywać komedy, które zamieściliśmy wyżej, pamiętaj, że przepisujesz tylko tę część, która zaczyna się od `django-admin`. `(myvenv) ~/djangogirls$` są tutaj tylko po to, by pokazać Ci przykład wiersza polecenia i tego, jak będzie on wyglądał, gdy będziesz wpisywać polecenia. + + + + + +Dla systemu Windows wpisz teraz do swojej konsoli następującą komendę. **Nie zapomnij dodać kropki `.` na końcu**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Kropka `.` ma kluczowe znaczenie, ponieważ dzięki niej skrypt wie, że ma zainstalować Django w bieżącym katalogu (kropka `.` to taka skrócona nazwa bieżącego katalogu). +> +> **Uwaga** Kiedy będziesz przepisywać komedy, które zamieściliśmy wyżej, pamiętaj, że przepisujesz tylko tę część, która zaczyna się od `django-admin.exe`. `(myvenv) C:\Users\Name\djangogirls>` są tutaj tylko po to, by pokazać Ci przykład znaku zachęty wiersza polecenia, który będzie Ciebie zapraszał, byś wpisała komendę. + + + +`django-admin.py` jest skryptem, który utworzy katalogi i pliki za Ciebie. Powinnaś mieć teraz strukturę katalogów podobną do tej: + + djangogirls + ├───manage.py + ├───mysite + │ settings.py + │ urls.py + │ wsgi.py + │ __init__.py + └───requirements.txt + + +> **Uwaga**: w strukturze katalogów, możesz zobaczyć również katalog `myvenv`, który stworzyłyśmy wcześniej. + +`manage.py` jest skryptem ułatwiającym zarządzanie witryną. Za jego pomocą, oprócz wielu innych rzeczy, możemy uruchomić serwer na naszym komputerze bez potrzeby instalowania czegokolwiek. + +Plik `settings.py` zawiera konfigurację naszej strony. + +Pamiętasz, jak rozmawiałyśmy o listonoszu sprawdzającym gdzie dostarczyć list? Plik `urls.py` zawiera wzorce używane przez `urlresolver'a`. + +Na razie zapomnijmy o innych plikach - nie będziemy ich modyfikować. Jedyne, o czym musisz pamiętać, to żeby ich niechcący nie skasować! + +## Modyfikowanie ustawień + +Wprowadźmy parę zmian w pliku `mysite/settings.py`. Otwórz go za pomocą edytora kodu, który zainstalowałaś wcześniej. + +**Uwaga**: należy pamiętać, że `settings.py` jest zwykłym plikiem, jak każdy inny. Otworzysz go w edytorze kodu, przy użyciu menu "plik-> Otwórz". Powinnaś otrzymać zwykłe okno, w którym możesz przejść do pliku `settings.py` i zaznaczyć go. Możesz również otworzyć plik, przechodząc do folderu djangogirls na pulpicie, klikając na niego prawym przyciskiem myszy. Następnie wybierz edytor kodu z listy. Wybór edytora jest ważny, ponieważ możesz mieć zainstalowane inne programy, które mogą otworzyć plik, ale nie pozwolą Ci go edytować. + +Fajnie byłoby posługiwać się na naszej stronie właściwą strefą czasową. Przejdź do [listy stref czasowych w Wikipedii](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) i skopiuj właściwą strefę czasową (TZ) (np. `Europe/Warsaw`). + +W pliku `settings.py` znajdź linijkę, w której jest napisane `TIME_ZONE` i zmień ją wybierając swoją strefę czasową. Przykład: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Warsaw' +``` + +Kod języka składa się z języka, np. ` en ` dla języka angielskiego lub ` de ` dla języka niemieckiego i kodu kraju, np. ` de ` dla Niemiec lub ` ch ` dla Szwajcarii. Jeżeli angielski nie jest Twoim językiem ojczystym, możesz dodać tę wartość, aby domyślne przyciski i powiadomienia od Django będą w Twoim języku. Tak więc przycisk "Anuluj" zostałby przetłumaczony na język, który tu zdefiniowałaś. [Django jest wyposażone w mnóstwo przygotowanych tłumaczeń](https://docs.djangoproject.com/en/2.0/ref/settings/#language-code). + +Jeżeli chcesz używać innego języka, zmień jego kod, modyfikując następujący wiersz: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'pl-pl' +``` + +Musimy także dodać ścieżkę do plików statycznych. (Dowiemy się więcej o plikach statycznych i CSS w dalszej części kursu). Przejdź do samego *końca* pliku i pod linijką zawierającą `STATIC_URL` dodaj nową zmienną `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Gdy ` DEBUG ` jest ` True ` i ` ALLOWED_HOSTS ` jest puste, host jest sprawdzany pod kątem ` ['localhost', '127.0.0.1', '[::1]']`. To nie będzie pasować do naszej nazwy hosta w PythonAnywhere po wdrożeniu naszej aplikacji, więc zmienimy następujące ustawienie: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> ** Uwaga **: jeśli używasz Chromebooka, dodaj ten wiersz u dołu pliku settings.py: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Dodaj również `.c9users.io` do `ALLOWED_HOSTS`, jeżeli używasz cloud9 + +## Inicjalizacja bazy danych + +Istnieje duży wybór baz danych, w których możemy trzymać dane naszej strony. My użyjemy bazy domyślnej, czyli `sqlite3`. + +Została ona już ustawiona w tej części pliku `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Aby utworzyć bazę danych dla naszego bloga, wykonajmy następujące polecenie w konsoli: `python manage.py migrate` (musimy być w katalogu `djangogirls`, tam gdzie znajduje się plik `manage.py`). Gdy to się uda, powinnaś zobaczyć coś takiego jak poniżej: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +I to wszystko! Czas uruchomić serwer i zobaczyć, czy nasza strona działa! + +## Uruchamianie serwera WWW + +Musisz znajdować się w katalogu zawierającym plik `manage.py` (katalog `djangogirls`). W konsoli możemy uruchomić serwer za pomocą polecenia `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Jeżeli korzystasz z Chromebooka, wykorzystaj komendę poniżej: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Jeśli pracujesz na Windowsie i zobaczysz w tym momencie `UnicodeDecodeError`, użyj następującej komendy: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Teraz sprawdź, czy Twoja strona działa. Otwórz przeglądarkę (Firefox, Chrome, Safari, Internet Explorer lub jakąkolwiek inną) i wprowadź ten adres: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Jeśli używasz Chromebooka i Cloud9, kliknij adres URL w wyskakującym okienku, które powinno pojawić się w prawym górnym rogu okna poleceń, w którym działa serwer WWW. Adres URL powinien wygladąć tak: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +Gratulacje! Właśnie stworzyłaś swoją pierwszą stronę i uruchomiłaś ją za pomocą serwera! Prawda, że wspaniale? + +![Install worked!](images/install_worked.png) + +Kiedy serwer internetowy jest uruchomiony, nie możesz zobaczyć nowego wiersza polecenia do wprowadzania dodatkowych poleceń. Terminal przyjmie nowy tekst, ale nie wykona nowego polecenia. Dzieje się tak dlatego, że serwer internetowy ciągle działa oraz oczekuje nowych żądań. + +> Sprawdziliśmy, jak działają serwery internetowe w rozdziale **"Jak działa Internet"**. + +Aby wpisać dodatkowe polecenia podczas działania serwera WWW, otwórz nowe okno terminala i aktywuj swoje wirtualne środowisko (virtualenv) - aby przejrzeć instrukcje dotyczące otwierania drugiego okna terminala, patrz [Wprowadzenie do wiersza poleceń](../intro_to_command_line/README.md). Aby zatrzymać serwer, wróć do okienka, w którym został on uruchomiony i wciśnij CTRL+C - klawisze Control i C jednocześnie (jeśli używasz systemu Windows to możesz też spróbować skrótu Ctrl+Break). + +Gotowa na następny krok? Czas stworzyć treść! \ No newline at end of file diff --git a/pl/django_start_project/images/install_worked.png b/pl/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/pl/django_start_project/images/install_worked.png differ diff --git a/pl/django_templates/README.md b/pl/django_templates/README.md new file mode 100755 index 00000000000..cf29c520d39 --- /dev/null +++ b/pl/django_templates/README.md @@ -0,0 +1,108 @@ +# Szablony Django + +Pora wyświetlić jakieś dane! Django udostępnia nam do tego celu przydatny zbiór wbudowanych **znaczników szablonu** (ang. template tags). + +## Co to są znaczniki szablonu? + +W HTML-u nie można tak naprawdę napisać kodu Pythona, ponieważ przeglądarki go nie rozumieją. Znają tylko HTML. Wiemy, że HTML jest raczej statyczny, a Python jest znacznie bardziej dynamiczny. + +**Znaczniki szablonów Django** pozwalają przesyłać obiekty podobne do Pythona do HTML, dzięki czemu możesz budować dynamiczne strony internetowe szybciej. Super! + +## Wyświetlamy szablon listy wpisów + +W poprzednim rozdziale przekazaliśmy listę postów w zmiennej `posts` do naszego szablonu. Teraz wyświetlmy ją w HTML. + +Aby wyświetlić zmienną w szablonie Django, używamy podwójnych nawiasów klamrowych z nazwą zmiennej w środku, w taki sposób: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Spróbuj tak zrobić w szablonie` blog/templates/blog/post_list.html`. Otwórz to w edytorze kodu i zastąp wszystko od drugiego `
` do trzeciego `
` wierszem `{{ posts }}`. Zapisz plik i odśwież stronę, by zobaczyć rezultat: + +![Rysunek 13.1](images/step1.png) + +Jak widzisz, dostaliśmy tylko tyle: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Oznacza to tyle, że Django rozumie to jako listę obiektów. Pamiętasz z rozdziału **Wprowadzenie do Pythona**, jak możemy wyświetlić zawartość listy? Tak, za pomocą pętli for! W szablonie Django używamy ich w ten sposób: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Wypróbuj tego w swoim szablonie. + +![Rysunek 13.2](images/step2.png) + +Działa! Ale chcemy, aby posty były wyświetlane jak statyczne posty, które stworzyliśmy wcześniej w rozdziale ** Wprowadzenie do HTMLa**. Możliwe jest łączenie znaczników szablonu z kodem HTML. Nasza sekcja `body` będzie wyglądać tak: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Wszystko, co zawrzesz pomiędzy `{% for %}` a `{% endfor %}` zostanie powtórzone dla każdego obiektu z listy. Odśwież swoją stronę:{% endraw %} + +![Rysunek 13.3](images/step3.png) + +Zapewne zauważyłaś, że tym razem użyłyśmy nieco innej składni: (`{{ post.title }}` lub `{{ post.text }}`)? W ten sposób uzyskujemy dostęp do danych zawartych w poszczególnych polach naszego modelu `Post`. Z kolei `|linebreaksbr` przepuszcza wpisy przez filtr, który zamienia znaczniki nowej linii na akapity. + +## Jeszcze jedno + +Dobrze byłoby sprawdzić, czy twoja strona wciąż będzie działała w publicznym Internecie, prawda? Spróbujmy ponownie wdrożyć w PythonAnywhere. Oto podsumowanie kroków… + +* Najpierw zapisz swój kod na GitHubie + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Teraz zaloguj się ponownie na [PythonAnywhere](https://www.pythonanywhere.com/consoles/) i przejdź do konsoli **Bash** (albo uruchom nową) i wpisz: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(pamiętaj, by podmienić `` na Twoją właściwą nazwę użytkownika PythonAnywhere, bez ostrych nawiasów) + +* Na koniec przeskocz do strony [Web](https://www.pythonanywhere.com/web_app_setup/) i naciśnij **Reload**. Aby dotrzeć do innych stron PythonAnywhere przez konsolę, użyj przycisku menu w prawym górnym rogu. Twoja zaktualizowana aplikacja powinna być już dostępna pod adresem https://subdomain.pythonanywhere.com - sprawdź to w swojej przeglądarce! Jeśli posty na blogu w witrynie PythonAnywhere nie są takie same jak posty znajdujące się na lokalnym serwerze, jest to OK. Bazy danych na komputerze lokalnym i PythonAnywhere nie synchronizują się z resztą plików. + +Gratulacje! Teraz śmiało, spróbuj dodać nowy post w panelu administracyjnym Django (pamiętaj, aby dodać datę publikacji (published_date)). Upewnij się, że jesteś w zalogowana jako administrator w Django dla Twojej witryny PythonAnywhere, https://subdomain.pythonanywhere.com/admin. Następnie odśwież stronę, aby zobaczyć, czy post się pojawił. + +Poszło jak z płatka? Jesteśmy dumne! Odejdź na chwilkę od komputera - zasłużyłaś na przerwę! :) + +![Rysunek 13.4](images/donut.png) \ No newline at end of file diff --git a/pl/django_templates/images/donut.png b/pl/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/pl/django_templates/images/donut.png differ diff --git a/pl/django_templates/images/step1.png b/pl/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/pl/django_templates/images/step1.png differ diff --git a/pl/django_templates/images/step2.png b/pl/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/pl/django_templates/images/step2.png differ diff --git a/pl/django_templates/images/step3.png b/pl/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/pl/django_templates/images/step3.png differ diff --git a/pl/django_urls/README.md b/pl/django_urls/README.md new file mode 100755 index 00000000000..f43938fc7e4 --- /dev/null +++ b/pl/django_urls/README.md @@ -0,0 +1,103 @@ +# URL-e Django + +Zaczynamy budować naszą pierwszą stronę internetową: będzie to miejsce dla twojego bloga! Ale zanim zaczniemy, nauczmy się trochę na temat URL-i w Django. + +## Czym jest URL? + +Adres URL to adres w internecie. Możesz zobaczyć URL-a za każdym razem, gdy odwiedzasz stronę internetową - jest on widoczny w pasku adresu przeglądarki internetowej. (Tak! `127.0.0.1:8000` jest adresem URL! Też `https://djangogirls.org` jest adresem URL.) + +![Adres URL](images/url.png) + +Każda strona w internecie potrzebuje własnego adresu URL. W ten sposób aplikacja wie, co wyświetlić użytkownikowi, który otworzy dany URL. W Django używamy tak zwanego `URLconf` (konfiguracji URL). URLconf to zestaw wzorców, które Django spróbuje dopasować do żądanego adresu URL, aby znaleźć poprawny widok. + +## Jak działają adresy URL w Django? + +Otwórzmy plik `mysite/urls.py` i przyjrzyjmy się jego treści: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Jak zauważyłaś, Django coś nam już tu umieścił. + +Linie między potrójnymi cudzysłowami (` '''` lub `""" `) nazywa się docstrings - możesz zapisać je na górze pliku, klasy lub metody, aby opisać, co robi. Nie będą one uruchamiane przez Pythona. + +Adres URL panelu administracyjnego, który odwiedzałaś w poprzednim rozdziale, jest już tutaj dodany: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +To znaczy, że dla każdego adresu zaczynającego się od `admin/` Django spróbuje dopasować odpowiedni *widok*. W tym przypadku używamy wielu adresów URL panelu administracyjnego, dlatego nie wypisujemy ich wszystkich w tym jednym małym pliku - tak jest czytelniej i bardziej estetycznie. + +## Twój pierwszy adres URL w Django! + +Czas utworzyć nasz pierwszy adres URL! Chcemy, aby adres 'http://127.0.0.1:8000/' był stroną główną naszego bloga i wyświetlał listę wpisów. + +Zależy nam również, aby zachować porządek w pliku `mysite/urls.py`, dlatego zaimportujemy URL-e z naszej aplikacji `blog` do głównego pliku `mysite/urls.py`. + +Śmiało, dodaj linię, która spowoduje zaimportowanie `blog.urls`. Będziesz musiała także zmienić pierwszy wiersz ` from django.urls...`, ponieważ użyjemy tutaj funkcji `include`, którą musimy najpierw zaimportować. + +Twój plik `mysite/urls.py` powinien teraz wyglądać tak: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django przekieruje wszystkie reguły z adresu 'http://127.0.0.1:8000/' do `blog.urls` i tam będzie szukał dalszych wskazówek. + +## blog.urls + +Stwórz nowy pusty plik o nazwie `urls.py` w katalogu `blog` i otwórz go w Twoim edytorze. Dokładnie tak! Dodaj te pierwsze dwie linie: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Tutaj importujemy funkcje `path` Django i wszystkie nasze widoki (`views`) z aplikacji `blog`. (Nie mamy jeszcze żadnych, ale do tego dojdziemy za chwilę!) + +Potem możemy dodać nasz pierwszy wzorzec adresu URL: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Jak widzisz, teraz przyporządkowujemy widok (`view`) o nazwie `post_list` do strony głównej. Ten wzorzec URL zostanie dopasowany do pustego ciągu znaków, a Django zignoruje nazwę domeny (np. http://127.0.0.1:8000/), która poprzedza pełną ścieżkę URL. Ten wzorzec będzie wskazówką dla Django, że `views.post_list` jest właściwym miejscem dla każdego, kto wejdzie na stronę poprzez adres 'http://127.0.0.1:8000/'. + +Ostatnia część, `name='post_list` jest nazwą URL, która będzie używana do zidentyfikowania widoku. Nazwa może być taka sama jak nazwa widoku albo kompletnie inna. W projekcie będziemy później używać nazw URL, więc ważne jest nazwanie każdego URL-a w aplikacji. Powinnyśmy również starać się używać nazw URL unikalnych i prostych do zapamiętania. + +Jeśli teraz spróbujesz odwiedzić stronę http://127.0.0.1:8000/, zobaczysz komunikat "niedostępna strona internetowa". Wynika to z faktu, że serwer (pamiętałaś o wpisaniu ` runserver`?) nie jest już uruchomiony. Spójrz na okno konsoli serwera, aby dowiedzieć się, dlaczego. + +![Błąd](images/error1.png) + +Twoja konsola pokazuje błąd, ale nie martw się - w rzeczywistości jest to całkiem użyteczne: mówi Ci, że** brak atrybutu 'post_list'**. To jest nazwa widoku (*view*), którą Django próbuje znaleźć i użyć, ale jeszcze go nie utworzyłyśmy. Na tym etapie Twój `/admin/ ` również nie będzie działać. Nie martw się, zajmiemy się tym. Jeżeli pojawiła Ci się wiadomość o innym błędzie, spróbuj zrestartować swój serwer. Aby to zrobić, przejdź do wiersza polecenia w którym uruchomiony jest serwer strony, zatrzymaj serwer wciskając Ctrl+C (klawisze Control i C równocześnie), a następnie uruchom go jeszcze raz poleceniem `python manage.py runserver`. + +> Jeśli chciałabyś dowiedzieć się więcej na temat konfiguracji URL w Django, zajrzyj do oficjalnej dokumentacji: https://docs.djangoproject.com/en/2.0/topics/http/urls/ \ No newline at end of file diff --git a/pl/django_urls/images/error1.png b/pl/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/pl/django_urls/images/error1.png differ diff --git a/pl/django_urls/images/url.png b/pl/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/pl/django_urls/images/url.png differ diff --git a/pl/django_views/README.md b/pl/django_views/README.md new file mode 100755 index 00000000000..5a12f76f8cf --- /dev/null +++ b/pl/django_views/README.md @@ -0,0 +1,44 @@ +# Widoki Django - czas zacząć tworzyć! + +Czas uporać się z błędem, który pozostawiłyśmy po poprzednim rozdziale! :) + +*Widok* jest miejscem, w którym umieszczamy "logikę" naszej aplikacji. Pobierze on informacje od modelu, który wcześniej utworzyłaś, a następnie przekaże je do szablonu (`template`). Nauczymy się tworzyć szablony w następnym rozdziale. Widoki to po prostu funkcje w Django, tylko nieco bardziej skomplikowane niż te, którymi zajmowałyśmy się w rozdziale **Wprowadzenie do Pythona**. + +Widoki (ang. views) są przechowywane w pliku `views.py`. Dodajmy *views* do naszego pliku `blog/views.py`. + +## blog/views.py + +OK, otwórzmy ten plik w naszym edytorze i zobaczmy, co siedzi w środku: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Nie ma tu jeszcze zbyt wiele rzeczy. + +Pamiętaj, że linie zaczynające się od `#` to komentarze - oznacza to, że te linie nie będą uruchamiane przez Pythona. + +Utwórzmy *view* zgodnie z sugestią komentarza. Najprostszy widok może wyglądać tak: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Jak widać, stworzyłyśmy funkcję (`def`) nazwaną `post_list`, która pobiera `request` i zwraca `return` wartość uzyskaną dzięki wywołaniu innej funkcji `render`, która wyrenderuje (złoży w całość) nasz szablon `blog/post_list.html`. + +Zapisz plik, przejdź do http://127.0.0.1:8000/ i zobacz co mamy. + +Znowu błąd! Przeczytaj, o co chodzi tym razem: + +![Błąd](images/error.png) + +Przynajmniej pokazuje, że serwer jest uruchomiony ponownie, ale nadal nie wygląda dobrze, prawda? Nie martw się, to po prostu błąd strony, nic strasznego! Podobnie jak komunikaty o błędach w konsoli, są one całkiem przydatne. Możesz przeczytać, że *TemplateDoesNotExist*. Naprawmy ten błąd i stwórzmy szablon - ale to już w następnym rozdziale! + +> Więcej na temat widoków Django dowiesz się czytając oficjalną dokumentację: https://docs.djangoproject.com/en/2.0/topics/http/views/ \ No newline at end of file diff --git a/pl/django_views/images/error.png b/pl/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/pl/django_views/images/error.png differ diff --git a/pl/dynamic_data_in_templates/README.md b/pl/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..cd75e0a1040 --- /dev/null +++ b/pl/dynamic_data_in_templates/README.md @@ -0,0 +1,81 @@ +# Dane dynamiczne w szablonach Django + +Sporo rzeczy jest już na swoim miejscu: model `Post` jest zdefiniowany w `models.py`, w `views.py` mamy `post_list`, szablon też już gotowy. Ale jak to zrobić, aby nasze wpisy pojawiały się w szablonie HTML? Bo właśnie to chcemy zrobić - pobrać trochę treści (modele zapisane w bazie danych) i ładnie je wyświetlić w naszym szablonie, prawda? + +Dokładnie do tego przydadzą nam się *widoki*: do połączenia modeli i szablonów między sobą. W naszym widoku (*view*) `post_list` musimy pobrać modele do wyświetlenia i przekazać je do szablonu. W widoku *view* decydujemy, jaki (model) zostanie wyświetlony w szablonie. + +OK, więc jak to osiągniemy? + +Musimy otworzyć nasz plik `blog/views.py` w naszym edytorze kodu. Jak dotąd *widok* `post_list` wygląda następująco: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Pamiętasz, jak rozmawiałyśmy o dołączaniu kodu zapisanego w odrębnych plikach? Teraz jest moment, w którym musimy uwzględnić model, który napisałyśmy w `models.py`. Dodajmy wiersz `from .models import Post` w ten sposób: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Kropka przed modelami `models` oznacza *bieżący katalog * lub *bieżącą aplikację*. `views.py` i `models.py` znajdują się w tym samym katalogu. Oznacza to, że możemy użyć `.` i nazwy pliku (bez `.py`). Następnie importujemy nazwę modelu (`Post`). + +Ale co dalej? Aby pobrać aktualne posty na blogu z modelu `Post`, potrzebujemy czegoś, co nazywa się `QuerySet`. + +## QuerySet + +Powinnaś być już zaznajomiona z zasadą działania obiektów typu QuerySet. Rozmawiałyśmy o tym w rozdziale [ORM Django (obiekty QuerySets)](../django_orm/README.md). + +Więc teraz chcemy opublikować posty na blogu posortowane według daty publikacji (`published_date`), prawda? Zrobiłyśmy to już w rozdziale QuerySets! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Teraz otwórz plik `blog/views.py` w edytorze kodu i umieść ten fragment kodu dodając go do funkcji `def post_list (request)`, ale nie zapomnij najpierw dodać `from django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Ostatnią częścią, której nam brakuje, jest przekazanie QuerySetu `posts` do szablonu. Nie martw się - omówimy sposób wyświetlania go w późniejszym rozdziale. + +Zauważ, że tworzymy *zmienną* dla naszego QuerySetu: `posts`. Potraktuj ją jako nazwę naszego QuerySetu. Od tej pory będziemy odnosić się do niej tylko za pomocą tej nazwy. + +W funkcji `render` mamy jeden parametr `request` (wszystko, co otrzymujemy od użytkownika za pośrednictwem Internetu) i inny podający plik szablonu (`'blog/post_list.html'`). Ostatni parametr, który wygląda tak: `{}` jest miejscem, w którym możemy dodać parę rzeczy do wykorzystania w szablonie. Musimy nadać im nazwy (ale póki co będziemy trzymać się nazwy `'posts'`). :) Powinno to wyglądać tak: `{'posts': posts}`. Zwróć uwagę, że ta część przed `:` jest stringiem; powinnaś wziąć ją w cudzysłów:`'`. + +Zatem ostatecznie nasz plik `blog/views.py` powinien wyglądać następująco: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +I to wszystko! Czas, żebyśmy wróciły do naszego szablonu i wyświetliły ten QuerySet! + +Jeżeli chciałabyś poczytać trochę więcej na temat QuerySetów w Django, powinnaś rzucić okiem tutaj: https://docs.djangoproject.com/en/2.0/ref/models/querysets/ \ No newline at end of file diff --git a/pl/extend_your_application/README.md b/pl/extend_your_application/README.md new file mode 100755 index 00000000000..c142ac94954 --- /dev/null +++ b/pl/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Rozbudowa aplikacji + +Przeszłyśmy już wszystkie kroki niezbędne do uruchomienia naszej strony: wiemy, jak opisać nasze modele, widoki, adresy URL i szablony. Umiemy również sprawić, aby nasza strona wyglądała ładniej. + +Czas na odrobinę praktyki! + +Pierwszą rzeczą, której nasz blog potrzebuje, to strona wyświetlająca pojedynczy wpis, nieprawdaż? + +Mamy już model `Post`, więc nie musimy już dodawać niczego do `models.py`. + +## Tworzenie szablonu odnośnika do detali wpisu na blogu + +Zaczniemy od dodania linku wewnątrz pliku `blog/templates/blog/post_list.html`. Otwórz go w edytorze kodu. Do tej pory plik powinien wyglądać tak: {% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}Chcemy, aby tytuł wpisu był linkiem prowadzącym do strony ze szczegółami wpisu. Zmieńmy `

{{ post.title }}

`, aby zawierał link do strony szczegółów wpisu:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Czas wyjaśnić, co oznacza tajemnicze `{% url 'post_detail' pk=post.pk %}`. Jak można podejrzewać, zapis `{% %}` oznacza, że używamy tagów szablonu Django. Tym razem używamy takiego, który generuje dla nas adres URL!{% endraw %} + +Fragment `post_detail` oznacza, że Django będzie oczekiwał URL w `blog/urls.py` o nazwie name=post_detail + +A co z `pk=post.pk`? `pk` jest skrótem od primary key (ang. klucz podstawowy), który jest unikalną nazwą dla każdego rekordu bazy danych. Ponieważ nie ustaliłyśmy, czym jest klucz podstawowy w naszym modelu `Post`, Django stworzyło taki klucz dla nas (standardowo jest to liczba, która rośnie o jeden przy każdym kolejnym rekordzie, np. 1, 2, 3) i dodało go jako pole pod nazwą `pk` do każdego naszego posta. Możemy dostać się do klucza podstawowego przez wpisanie `post.pk`, tak samo jak otrzymujemy dostęp do innych pól (`title`, `author`, itd.) w naszym obiekcie `Post`! + +Teraz, gdy wejdziemy na adres http://127.0.0.1:8000/, ujrzymy błąd (co było do przewidzenia, bo nie mamy jeszcze ustawionego adresu URL ani widoku *view* dla `post_detail`). Będzie to wyglądać tak: + +![Błąd NoReverseMatch](images/no_reverse_match2.png) + +## Utwórzmy URL dla poszczególnego wpisu + +Dodajmy adres URL w pliku `urls.py` dla naszego *widoku (ang.view)* `post_detail`! + +Chcemy, aby nasz wpis i wszystkie informacje o nim, były widoczne pod tym adresem **URL**: http://127.0.0.1:8000/post/1/ + +W pliku `blog/urls.py` stwórzmy adres URL wskazujący na *widok* o nazwie `post_detail`, który wyświetli nam cały wpis. Otwórz plik `blog/urls.py` w edytorze i dodaj wiersz: `path('post//', views.post_detail, name='post_detail'),` tak, żeby otrzymać: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Część `post//` określa wzorzec URL - wytłumaczymy Tobie, co to jest: + +- `post/` oznacza, że adres URL powinien zaczynać się od słowa **post**, po którym nastąpi **/**. Jak na razie idzie dobrze. +- `` - ta część jest trudniejsza. Oznacza ona, że Django spodziewa się liczby całkowitej i przekaże jej wartość do widoku jako zmienną `pk`. +- `/` - i znów potrzebujemy **/**, zanim zakończymy wzorzec URL. + +To oznacza, że gdy wpiszesz w przeglądarce adres `http://127.0.0.1:8000/post/5/`, Django zrozumie, że potrzebujesz *widoku* zwanego `post_detail` i przekaże informację, że `pk` jest równe `5` temu *widokowi*. + +OK, dodałyśmy nowy wzorzec URL do `blog/urls.py`! Odświeżmy stronę: http://127.0.0.1:8000/ Boom! Serwer znów przestał działać. Spójrz w konsolę - jak oczekiwałyśmy, zdarzył się tam kolejny błąd! + +![AttributeError](images/attribute_error2.png) + +Pamiętasz, jaki jest następny krok? Dodanie widoku! + +## Dodajmy widok dla poszczególnego wpisu + +Tym razem nasz *widok* otrzymuje dodatkowy parametr `pk`. Nasz *widok* musi go "złapać", zgadza się? A więc zdefiniujmy funkcję tak: `def post_detail(request, pk):`. Zwróć uwagę, że musimy użyć dokładnie tej samej nazwy jak ta, której użyłyśmy w urls (`pk`). Pominięcie tej zmiennej jest niepoprawne i spowoduje błąd! + +Teraz chcemy wyświetlić jeden i tylko jeden wpis na blogu. Aby to zrobić, możemy użyć querysetów w następujący sposób: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Ale ten kod ma problem. Jeśli nie istnieje żaden wpis (`Post`) z podanym `kluczem podstawowym` (`pk`), to otrzymamy przepaskudny błąd! + +![Błąd DoesNotExist](images/does_not_exist2.png) + +Tak nie może być! Ale Django ma dla nas coś, co rozwiąże ten problem za nas: `get_object_or_404`. W sytuacji, gdy nie istnieje żaden wpis (`Post`) z przekazaną wartością `pk`, wyświetli znacznie przyjemniejszą stronę zwaną `Page Not Found 404` albo stroną błędu 404 - informującą, że dana strona nie została znaleziona. + +![Nie znaleziono strony](images/404_2.png) + +Dobra wiadomość - możesz stworzyć własną stronę błędu 404 (`Page not found`) i upiększyć ją tak, jak tylko Ci się podoba. Ale teraz nie jest to super ważne, więc na razie pominiemy ten temat. + +OK, czas dodać nasz *widok* do naszego pliku `views.py`! + +W `blog/urls.py` stworzyłyśmy regułę URL, którą nazwałyśmy `post_detail` i która odnosi się do widoku `views.post_detail`. Oznacza to że Django będzie oczekiwało funkcji widoku o nazwie `post_detail` w pliku `blog/views.py`. + +Otwórzmy `blog/views.py` w edytorze kodu i dodajmy poniższy kod zaraz obok pozostałych wierszy `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Oraz na końcu tego pliku dodać nasz *widok*: + +{% 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}) +``` + +Tak, to czas na odświeżenie strony: http://127.0.0.1:8000/ + +![Widok listy wpisów](images/post_list2.png) + +Działa! Ale co się stanie, gdy klikniesz na link w tytule wpisu? + +![Błąd TemplateDoesNotExist](images/template_does_not_exist2.png) + +O nie! Kolejny błąd! Ale wiemy już, jak sobie z nim poradzić, prawda? Musimy dodać szablon! + +## Stwórzmy szablon dla poszczególnego wpisu + +Stwórzmy teraz plik o nazwie `post_detail.html` w folderze `blog/templates/blog` i otwórzmy go w edytorze. + +Będzie to wyglądać tak: + +{% 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 %} +``` + +Po raz kolejny rozszerzamy `base.html`. W bloku `content` chcemy wyświetlić datę opublikowania wpisu (o ile istnieje), tytuł oraz treść. Ale powinnyśmy omówić kilka ważnych rzeczy, prawda? + +{% raw %}`{% if ... %} ... {% endif %}` jest tagiem szablonu, którego możemy użyć, gdy chcemy coś sprawdzić. (Pamiętasz `if ... else ..` z rozdziału **Wprowadzenie do Pythona**?) W tym wypadku chcemy sprawdzić czy `published_date` posta nie jest pusta.{% endraw %} + +OK, możemy teraz odświeżyć naszą stronę i sprawdzić, czy `TemplateDoesNotExist` już zniknął. + +![Strona ze szczegółami wpisu](images/post_detail2.png) + +Hura! Działa! + +# Czas na wdrożenie! + +Dobrze byłoby sprawdzić, czy Twoja strona dalej będzie dobrze działać na PythonAnywhere, prawda? Spróbuj ją ponownie wdrożyć. + +{% 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 + + +Następnie w konsoli [PythonAnywhere Bash console](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Pamiętaj, by podmienić `` na Twoją właściwą nazwę użytkownika PythonAnywhere, bez ostrych nawiasów). + +## Aktualizacja plików statycznych na serwerze + +Serwery takie jak PythonAnywhere lubią traktować "pliki statyczne" (takie jak pliki CSS) inaczej niż pliki Pythona, ponieważ dzięki temu mogą one je optymalizować, dzięki czemu strona ładuje się szybciej. W wyniku tego, ilekroć wprowadzamy zmiany do naszych plików CSS, musimy uruchomić dodatkowe polecenie na serwerze, by wiedział o konieczności ich aktualizacji. Komenda nazywa się `collectstatic`. + +Zacznij od aktywacji swojego virtualenva, jeżeli nie jest on jeszcze aktywny (PythonAnywhere używa polecenia `workon` w celu aktywacji, dokładnie tak jak komenda `source myenv/bin/activate`, której używasz na swoim komputerze): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +Komenda `manage.py collectstatic` jest trochę podobna do `manage.py migrate`. Wcześniej dokonałyśmy jakichś zmian w naszym kodzie, a teraz informujemy Django, by *zastosował* te zmiany, albo w kolekcji plików statycznych na serwerze albo w bazie danych. + +W każdym razie, jesteśmy już gotowe do przejścia na stronę ["Web"](https://www.pythonanywhere.com/web_app_setup/) (klikając w menu umieszczonym w prawym górnym rogu). Następnie kliknij **Reload** i spójrz na stronę https://subdomain.pythonanywhere.com, aby zobaczyć rezultat. + +I to już wszystko! Gratulacje :) \ No newline at end of file diff --git a/pl/extend_your_application/images/404_2.png b/pl/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/pl/extend_your_application/images/404_2.png differ diff --git a/pl/extend_your_application/images/attribute_error2.png b/pl/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/pl/extend_your_application/images/attribute_error2.png differ diff --git a/pl/extend_your_application/images/does_not_exist2.png b/pl/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/pl/extend_your_application/images/does_not_exist2.png differ diff --git a/pl/extend_your_application/images/no_reverse_match2.png b/pl/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/pl/extend_your_application/images/no_reverse_match2.png differ diff --git a/pl/extend_your_application/images/post_detail2.png b/pl/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/pl/extend_your_application/images/post_detail2.png differ diff --git a/pl/extend_your_application/images/post_list2.png b/pl/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/pl/extend_your_application/images/post_list2.png differ diff --git a/pl/extend_your_application/images/template_does_not_exist2.png b/pl/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/pl/extend_your_application/images/template_does_not_exist2.png differ diff --git a/pl/how_the_internet_works/README.md b/pl/how_the_internet_works/README.md new file mode 100755 index 00000000000..f89572eaaae --- /dev/null +++ b/pl/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Jak działa internet? + +> Dla czytelniczek w domu: ten rozdział jest również omówiony w wideo [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Niniejszy rozdział został zainspirowany prelekcją "Jak działa internet" Jessiki McKellar (http://web.mit.edu/jesstess/www/). + +Możemy się założyć, że używasz go każdego dnia. Ale czy naprawdę wiesz, co się dzieje, gdy wpisujesz w przeglądarce adres https://djangogirls.org i wciskasz `enter`? + +Aby zrozumieć, jak działa internet, powinnaś najpierw dowiedzieć się, czym tak naprawdę jest strona internetowa - a jest ona zbiorem plików zapisanych na dysku twardym. Tak samo jak Twoje zdjęcia, muzyka czy filmy. Aczkolwiek strony internetowe różnią się od nich tym, że zawierają kod komputerowy zwany HTML. + +Jeśli nie miałaś wcześniej do czynienia z programowaniem, może być Ci na początku trudno zrozumieć HTML, ale przeglądarki internetowe (takie jak Chrome, Safari, Firefox itd.) uwielbiają go. Zostały one zaprojektowane po to, by czytać ten kod, przetwarzać go i postępować zgodnie z jego instrukcjami. Prezentują pliki, z których składa się Twoja strona - by wyglądała dokładnie tak jak Ty chcesz. + +Tak jak w przypadku każdego innego pliku, musimy umiejscowić pliki HTML na dysku twardym. Do przechowywania plików HTML używamy specjalnych, potężnych komputerów zwanych *serwerami (ang. servers)*. Serwery nie posiadają monitorów, myszy ani klawiatur, ponieważ ich głownym celem jest przechowywanie danych i serwowanie ich. Dlatego są one nazywane *serwerami* -- ponieważ służą do *serwowania* danych. + +Ok, ale pewnie chciałabyś wiedzieć, jak wygląda internet? + +Narysowaliśmy Ci schemat Internetu! Wygląda tak: + +![Rysunek 1.1](images/internet_1.png) + +Wygląda dość chaotycznie, prawda? W rzeczywistości jest to sieć połączonych między sobą maszyn (wspomnianych wyżej *serwerów*). Setki tysięcy maszyn! Wiele, wiele kilometrów kabli na całym świecie! Możesz wejść na stronę Submarine Cable Map (http://submarinecablemap.com) i sama zobaczyć, jak skomplikowana jest ta sieć. Oto zrzut ekranu ze strony internetowej: + +![Rysunek 1.2](images/internet_3.png) + +To fascynujące, prawda? Ale niemożliwe jest stworzenie bezpośredniego połączenia kablowego między każdym komputerem w internecie. Więc aby dostać się do maszyny dostępnej w internecie (na przykład tej, na której zapisane jest https://djangogirls.org), potrzebujemy wykonać zapytanie przechodzące przez wiele, wiele różnych maszyn. + +Wygląda to tak: + +![Rysunek 1.3](images/internet_2.png) + +Wyobraź sobie, że po wpisaniu https://djangogirls.org, wysyłasz list o treści: "Drogie Django Girls, chcę zobaczyć stronę djangogirls.org. Wyślijcie ją do mnie, proszę! " + +List trafia do urzędu pocztowego najbliżej Ciebie. Potem idzie do drugiego urzędu, który znajduje się trochę bliżej Twojego adresata. Potem do kolejnego, kolejnego, kolejnego, aż w końcu zostanie doręczony do miejsca przeznaczenia. Ciekawa rzecz - jeśli wyślesz wiele listów (*pakietów danych*) do tego samego adresata, mogą przejść przez zupełnie inne urzędy pocztowe (*routery*). To zależy od tego w jaki sposób zostaną rozdzielone w każdym urzędzie. + +![Rysunek 1.4](images/internet_4.png) + +Właśnie tak to działa - wysyłasz wiadomości i oczekujesz jakiejś odpowiedzi. Zamiast papieru i długopisu używasz bitów danych, ale koncepcja jest dokładnie taka sama! + +Zamiast adresów z nazwą ulicy, miastem, kodem pocztowym oraz nazwą kraju, używa się adresów IP. Twój komputer najpierw pyta serwera DNS (system nazw domenowych, ang. DNS - Domain Name System) o przetłumaczenie djangogirls.org na adres IP. Działa to podobnie do dawnych książek telefonicznych, w których mogłaś poszukać adresu czy numeru po nazwisku osoby, z którą chciałaś się skontaktować. + +Listy muszą spełniać konkretne warunki, żeby zostały poprawnie doręczone: muszą posiadać adres, znaczek itd. Muszą być też napisane językiem zrozumiałym dla odbiorcy. To samo dotyczy *pakietów danych*, które wysyłasz, by zobaczyć jakąś stronę. Używany jest protokół HTTP (Hypertext Transfer Protocol). + +Tak więc, ogólnie rzecz ujmując, jeśli chcesz mieć swoją stronę internetową musisz mieć *serwer* (komputer), gdzie będzie ona funkcjonować. Gdy *serwer* odbiera przychodzące *żądania* (Twój list), wysyła Ci w odpowiedzi Twoją stronę (kolejny list). + +Zapytasz pewnie co robi Django, skoro masz przed sobą tutorial Django? Kiedy odpowiadasz na żądanie, nie chcesz, aby każdy dostawał tę samą odpowiedź, prawda? Zdecydowanie lepiej jest, jeśli listy są spersonalizowane i skierowane do konkretnej osoby, do tej, która napisała do Ciebie. Django pomaga Ci w tworzeniu tych spersonalizowanych, interesujących listów. :) + +Wystarczy teorii, zabieramy się za tworzenie! \ No newline at end of file diff --git a/pl/how_the_internet_works/images/internet_1.png b/pl/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/pl/how_the_internet_works/images/internet_1.png differ diff --git a/pl/how_the_internet_works/images/internet_2.png b/pl/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/pl/how_the_internet_works/images/internet_2.png differ diff --git a/pl/how_the_internet_works/images/internet_3.png b/pl/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/pl/how_the_internet_works/images/internet_3.png differ diff --git a/pl/how_the_internet_works/images/internet_4.png b/pl/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/pl/how_the_internet_works/images/internet_4.png differ diff --git a/pl/html/README.md b/pl/html/README.md new file mode 100755 index 00000000000..56c296a4a7c --- /dev/null +++ b/pl/html/README.md @@ -0,0 +1,217 @@ +# Wprowadzenie do HTML-a + +Zastanawiasz się, czym jest szablon? + +Szablon to plik, którego używamy do prezentacji informacji w zwięzłej formie. Używając analogii - do pisania listów również możesz użyć szablonu. Każdy list ma inną treść i adres, ale każdy z nich ma taką samą strukturę. + +Format szablonów Django wykorzystuje język HTML (ten sam, o którym wspominaliśmy w rozdziale **Jak działa internet**). + +## Co to jest HTML? + +HTML to prosty kod interpretowany przez Twoją przeglarkę - taką jak Chrome, Firefox czy Safari - w celu wyświetlenia strony dla użytkownika. + +HTML to skrót od "HyperText Markup Language". **HyperText** oznacza, że jest to tekst, który wspiera hyperlinki - czyli po prostu linki między stronami. **Markup** oznacza, że używamy tego kodu w dokumencie, żeby przekazać komuś informacje (w naszym przypadku przeglądarce), jak zinterpretować daną stronę. Kod HTML składa się ze **znaczników ** (tagów), a każdy z nich zaczyna się od `<` i kończy na`>`. Za pomocą znaczników oznaczamy **elementy**. + +## Twój pierwszy szablon! + +Stworzenie szablonu oznacza stworzenie pliku z szablonem. Bo przecież wszystko jest plikiem, zgadza się? Zapewne zdążyłaś to zauważyć. + +Szablony są zapisywane w katalogu `blog/templates/blog`. Zacznij więc od stworzenia katalogu `templates` wewnątrz Twojego katalogu bloga. Następnie stwórz kolejny katalog o nazwie `blog` wewnątrz katalogu na szablony: + + blog + └───templates + └───blog + + +(Być może zastanawiasz się, dlaczego tworzymy dwa katalogi o nazwie `blog` - jak się niebawem dowiesz, to użyteczna konwencja nazewnictwa. Ułatwia życie, gdy sprawy stają się bardziej skomplikowane.) + +A teraz stwórz plik `post_list.html` (na razie niech będzie pusty) wewnątrz katalogu `blog/templates/blog`. + +Popatrz, jak Twoja strona wygląda teraz: http://127.0.0.1:8000/ + +> Jeżeli nadal otrzymujesz błąd `TemplateDoesNotExist`, spróbuj uruchomić serwer ponownie. Przejdź do wiersza polecenia, zatrzymaj serwer wciskając Ctrl+C (klawisze Control i C równocześnie), a następnie uruchom go jeszcze raz poleceniem `python manage.py runserver`. + +![Rysunek 11.1](images/step1.png) + +Nie ma błędu! Gratulacje! :) Niestety, twoja aplikacja nie wyświetla niczego poza pustą stroną, ponieważ Twój szablon również jest pusty. Naprawmy to. + +Otwórz Twój nowy plik w edytorze kodu i dodaj poniższe: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Hi there!

+

It works!

+ + +``` + +I jak twoja strona wygląda teraz? Odwiedź stronę http://127.0.0.1:8000/, żeby się dowiedzieć. + +![Rysunek 11.2](images/step3.png) + +Zadziałało! Dobra robota :) + +* Najbardziej podstawowy znacznik, ``, jest zawsze na początku każdej strony internetowej, zaś `` jest zawsze na końcu. Jak widzisz, cała zawartość strony zawiera się pomiędzy znacznikiem otwierającym `` i zamykającym `` +* `

` jest znacznikiem akapitów; `

` zamyka każdy akapit + +## Head i body + +Każda strona HTML jest podzielona na dwie części: **head** i **body**. + +* **head** jest elementem zawierającym informacje o dokumencie, które nie są wyświetlane na ekranie. + +* **body** zawiera wszystkie pozostałe elementy, które są częścią strony internetowej widoczną na ekranie. + +Używamy znacznika ``, aby poinformować przeglądarkę o konfiguracji strony oraz `` do przekazania informacji o tym, co właściwie znajduje się na stronie. + +Przykładowo, element tytułu strony możesz umieścić wewnątrz ``, o tak: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Zapisz plik i odśwież swoją stronę. + +![Rysunek 11.3](images/step4.png) + +Zauważyłaś, że przeglądarka zrozumiała, że "Ola's blog" jest tytułem Twojej strony? Zinterpretowała ona `Ola's blog` i umieściła tekst w pasku tytułu twojej przeglądarki (będzie on również używany m.in. w zakładkach). + +Zapewne zauważyłaś także, że każdy znacznik otwierający posiada *znacznik zamykający*, z `/`, a także to, że elementy są *zagnieżdżane * (czyli nie możesz zamknąć danego znacznika zanim nie zostaną zamknięte znaczniki znajdujące się wewnątrz niego). + +To trochę jak wkładanie rzeczy do pudełek. Masz jedno wielkie pudło, ``; wewnątrz niego znajduje się ``, a w środku tegoż są kolejne mniejsze pudełka: `

`. + +Musisz przestrzegać zasad *zamykania* znaczników i *zagnieżdżania* elementów - przeciwnym razie przeglądarka może mieć problem z ich poprawnym zinterpretowaniem i Twoja strona będzie wyświetlać się niepoprawnie. + +## Dostosowywanie szablonu + +Teraz nieco się pobawmy i spróbujmy dostosować nasz szablon! Oto kilka znaczników, które nam się do tego przydadzą: + +* `

Tytuł

` dla twojego najbardziej znaczącego nagłówka +* `

Podtytuł

` dla nagłówka niższego poziomu +* `

pod-podtytuł

` … i tak dalej aż do `
` +* `

akapit tekstu

` +* `tekst` dodaje wyróżnienie twojego tekstu +* `text` jeszcze mocniej wyróżnia twój tekst +* `
` to przejście do nowej linii (wewnątrz br nie wstawiamy niczego i nie ma też znacznika zamykającego) +* `link` tworzy link +* `
  • pierwsza pozycja
  • druga pozycja
` tworzy listę, taką samą jak ta! +* `
` tworzy sekcję na stronie + +Tutaj możesz zobaczyć przykład pełnego szablonu, skopiuj i wklej go do `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Stworzyliśmy tutaj trzy sekcje `div`. + +* Pierwszy `div` zawiera w sobie tytuł naszego bloga - jest to nagłówek i link +* Kolejne dwa elementy `div` zawierają nasze wpisy wraz z opublikowaną datą, `h2` z klikalnym tytułem wpisu oraz dwa elementy `p` (akapity) z tekstem, jeden z datą i drugi z treścią naszego wpisu. + +Daje nam to taki efekt: + +![Rysunek 11.4](images/step6.png) + +Hura! Ale jak do tej pory, nasz szablon wyświetla dokładnie **tę samą treść**. Tymczasem wspominałyśmy wcześniej, że szablony umożliwiają nam wyświetlenie **różnych** treści w **takim samym formacie**. + +Chcemy wyświetlić prawdziwe wpisy dodane w naszym panelu admina Django - i tym się teraz zajmiemy. + +## Jeszcze jedna rzecz: wdrożenie na serwer! + +Byłoby fajnie, gdybyśmy mogli to wszystko zobaczyć "na żywo" w Internecie, a nie tylko u siebie w komputerze. Czas na wdrożenie na serwer PythonAnywhere: + +### Zapisz zmiany w historii i wrzuć swój kod na GitHuba + +Po pierwsze, zobaczmy, jakie pliki zostały zmienione od ostatniej aktualizacji (wpisz następujące polecenie lokalnie w wierszu polecenia, nie na PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Upewnij się, że jesteś w folderze `djangogirls` i powiedz `git`owi aby dodał wszystkie zmiany z aktualnego folderu: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + + +> **Uwaga:** `--all` (czyli "wszystko") oznacza, że `git` weźmie pod uwagę pliki, które usunęłaś (domyślnie rozpoznaje zmiany tylko w nowych lub już istniejących plikach). Pamiętaj również (vide rozdział 3), że `.` oznacza aktualny katalog. + +Zanim prześlemy wszystkie pliki, sprawdźmy, co faktycznie `git` zamierza przesłać (wszystkie pliki, które `git` prześle do repozytorium, powinny być zaznaczone na zielono): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Już blisko do końca. Teraz czas poprosić gita, aby zapisał te zmiany w historii. Dodamy za moment informację o zmianach (ang. "commit message"), gdzie opiszemy, co zostało zmienione. Możesz w tym miejscu wpisać cokolwiek zechcesz, ale warto jednak wpisać kilka słów opisujących, co robiłaś. W ten sposób łatwiej Ci będzie w przyszłości przypomnieć sobie, czego dotyczyły zapisane zmiany. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Zmieniony kod HTML na stronie." + + +> **Uwaga:** Nie zapomnij umieścić informacji o zmianach w cudzysłowie (" "). + +Jak już wszystko to zrobimy, możemy wysłać (push) nasze zmiany na Githuba: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Prześlij nową wersję kodu do PythonAnywhere i ponownie załaduj swoją stronę + +* Otwórz [stronę konsoli na PythonAnywhere](https://www.pythonanywhere.com/consoles/) i przejdź do swojej **Bash console** (czyli po polsku "konsoli Bash") albo otwórz nową. Wpisz do niej: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Pamiętaj by podmienić `` na Twoją właściwą nazwę użytkownika PythonAnywhere, bez ostrych nawiasów. Twoja nazwa poddomeny jest zwykle Twoją nazwą użytkownika PythonAnywhere, ale w niektórych przypadkach może być nieco inna (np. jeśli Twoja nazwa użytkownika zawiera wielkie litery). Więc jeśli to polecenie nie działa, należy użyć polecenia `ls` (lista plików), aby znaleźć rzeczywistą subdomenę/nazwę folderu, a następnie `cd`, aby tam przejść. + +Widzisz, jak ściąga się Twój kod. Jeśli chcesz sprawdzić, czy zmiany zostały ściągnięte, możesz przejść do strony **"Files"** i sprawdzić swój kod na PythonAnywhere (możesz przejść do innych stron na PythonAnywhere korzystając z menu na stronie konsoli). + +* Na koniec przejdź do strony ["Web"](https://www.pythonanywhere.com/web_app_setup/) i naciśnij **Reload**. + +I to powinno wystarczyć! Możesz śmiało odświeżyć swoją stronę w przeglądarce! Zmiany powinny być widoczne. :) \ No newline at end of file diff --git a/pl/html/images/step1.png b/pl/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/pl/html/images/step1.png differ diff --git a/pl/html/images/step3.png b/pl/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/pl/html/images/step3.png differ diff --git a/pl/html/images/step4.png b/pl/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/pl/html/images/step4.png differ diff --git a/pl/html/images/step6.png b/pl/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/pl/html/images/step6.png differ diff --git a/pl/images/application.png b/pl/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/pl/images/application.png differ diff --git a/pl/installation/README.md b/pl/installation/README.md new file mode 100755 index 00000000000..b61a0054c5b --- /dev/null +++ b/pl/installation/README.md @@ -0,0 +1,69 @@ +# Jeśli robisz ten kurs w domu + +Jeśli robisz ten kurs w domu, a nie w trakcie jednego z [warsztatów Django Girls](https://djangogirls.org/events/), możesz pominąć ten rozdział i przejść od razu do [Jak działa internet?](../how_the_internet_works/README.md). + +Dzieje się tak, ponieważ zajmujemy się instalowaniem rzeczy, które są potrzebne w tutorialu - jest to tylko dodatkowa strona, która gromadzi wszystkie instrukcje dotyczące instalacji w jednym miejscu (co jest przydatne w niektórych formach warsztatów). Jeśli chcesz, możesz teraz zainstalować wszystko, co jest na tej stronie. Ale jeśli wolisz zacząć naukę już teraz bez instalowania kilku nowych rzeczy na swoim komputerze, pomiń ten rozdział. Wszystko wytłumaczymy później, kiedy będzie to potrzebne. + +Powodzenia! + +# Jeśli uczestniczysz w warsztatach: + +Jeśli uczestniczysz w wydarzeniu Django Girls: + +* Twój warsztat może mieć "część instalacyjną" przed głównym warsztatem. Jeśli jesteś w części instalacyjnej, to ta strona jest dla Ciebie! Postępuj zgodnie z instrukcjami, aby uzyskać wszystko, czego potrzebujesz do warsztatów. W razie potrzeby poproś o pomoc mentorów. Na warsztatach będziesz mogła pominąć tutoriale instalacji, które już wykonałaś. +* Organizatorzy warsztatów mogą Cię prosić, abyś w domu spróbowała zainstalować wszystkie potrzebne rzeczy na komputerze przed rozpoczęciem warsztatów. Jeśli zostałaś poproszona, aby to zrobić, ta strona jest dla Ciebie! Postępuj zgodnie z instrukcjami umieszczonymi tutaj, najlepiej jak potrafisz! Następnie, podczas głównego warsztatu, gdy dojdziesz do etapu instalacji w głównym samouczku, jeśli nie możesz go zainstalować, możesz uzyskać pomoc od swojego mentora. +* Jeśli na Twoich warsztatach nie ma części instalacyjnej (lub nie mogłaś wziąć w niej udziału) i jeśli organizatorzy nie prosili Cię o zainstalowanie wszystkiego przed Twoim przyjazdem, pomiń tę stronę i przejdź bezpośrednio do rozdziału [ Jak działa internet?](../how_the_internet_works/README.md). Podczas pracy nad tutorialem będziesz instalować wszystko, czego potrzebujesz. + +# Instalacja + +Na tych warsztatach będziesz budować blog. W tym celu, podczas przechodzenia przez tutorial, zostaniesz poinstruowana, jak zainstalować na Twoim komputerze różnego rodzaju oprogramowanie i jak skonfigurować kilka kont online, które będą Ci potrzebne. Ta strona zbiera wszystkie instrukcje dotyczące instalacji i rejestracji w jednym miejscu (co jest przydatne w niektórych formach warsztatów). + + {% include "/chromebook_setup/instructions.md" %} + + + +# Krótkie wprowadzenie do wiersza polecenia + +Wiele z poniższych kroków odnosi się do "konsoli", "terminala", "wiersza poleceń" lub "linii poleceń" - wszystkie one oznaczają to samo: okno na komputerze, w którym można wprowadzać polecenia. Gdy dojdziesz do głównego tutoriala, dowiesz się więcej o wierszu polecenia. Na razie najważniejszą rzeczą jaką musisz wiedzieć to to, jak otworzyć okno wiersza polecenia i jak ono wygląda: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Zainstaluj Pythona + +{% include "/python_installation/instructions.md" %} + +# Zainstaluj edytor kodu + +{% include "/code_editor/instructions.md" %} + +# Utwórz środowisko wirtualne i zainstaluj Django + +{% include "/django_installation/instructions.md" %} + +# Zainstaluj Gita + +{% include "/deploy/install_git.md" %} + +# Utwórz konto na GitHubie + +Przejdź do strony [ GitHub.com ](https://www.github.com) i zarejestruj nowe, bezpłatne konto użytkownika. Pamiętaj, aby zapamiętać swoje hasło (dodaj je do swojego menedżera haseł, jeśli go używasz). + +# Utwórz konto na PythonAnywhere + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Zacznij czytać + +Gratulacje, jesteś gotowa, by zacząć pracę! Jeśli masz trochę czasu przed warsztatami, możesz przeczytać początkowe rozdziały: + +* [Jak działa internet?](../how_the_internet_works/README.md) + +* [Wprowadzenie do wiersza polecenia](../intro_to_command_line/README.md) + +* [Wprowadzenie do Pythona](../python_introduction/README.md) + +* [Czym jest Django?](../django/README.md) + +# Ciesz się warsztatami! + +Kiedy zaczniesz warsztaty, będziesz mogła przejść od razu do rozdziału [Twój pierwszy projekt w Django!](../django_start_project/README.md), ponieważ już przebrnęłaś przez materiał z wcześniejszych rozdziałów. diff --git a/pl/intro_to_command_line/README.md b/pl/intro_to_command_line/README.md new file mode 100755 index 00000000000..b8f51fa6d12 --- /dev/null +++ b/pl/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Wprowadzenie do interfejsu wiersza polecenia + +> Dla czytelniczek w domu: ten rozdział jest również omówiony w wideo [Your new friend: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +Za chwilę napiszesz swoją pierwszą linijkę kodu. Jesteś już podekscytowana? :) + +**Pozwól, że przedstawimy Ci, Twojego pierwszego przyjaciela: wiersz polecenia!** + +Następujące kroki pokażą Ci, jak wykorzystać tajemnicze czarne okno, które używają wszyscy hakerzy. Na początku może to wyglądać nieco przerażająco ale tak naprawdę to tylko zachęta do wpisywania komend. + +> **Uwaga** Podczas tego kursu będziemy używać terminów "katalog" i "folder" zamiennie, ponieważ oznaczają one tę samą rzecz. + +## Czym jest wiersz polecenia? + +Okno zwane **wierszem polecenia** lub **interfejsem wiersza polecenia** jest aplikacją tekstową służącą do przeglądania, obsługi i operowania plikami na Twoim komputerze. Podobnie jak np. Eksplorator Windows lub Finder na Macu, ale bez interfejsu graficznego. Inne nazwy dla wiersza polecenia to *cmd*, *CLI*, *prompt*, *konsola* lub *terminal*. + +## Uruchamiamy interfejs wiersza polecenia + +Aby zacząć nasze eksperymenty, musimy najpierw otworzyć nasz wiersz polecenia. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Znak zachęty + +Teraz powinnaś zobaczyć białe lub czarne okno, które czeka na Twoje polecenia. + + + +Jeżeli używasz Maca lub Linuksa, powinnaś zobaczyć `$`, tak jak poniżej: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +W systemie Windows ujrzysz znak `>`, o tak: + +{% filename %}command-line{% endfilename %} + + > + + +Spójrz na powyższą sekcję Linux -- Zobaczysz coś więcej, gdy dojdziesz do dalszej części tutoriala. + + + +Każda komenda będzie poprzedzona przez `$` lub `>` i jedną spację, czego nie powinnaś wpisywać. Twój komputer zrobi to za Ciebie. :) + +> Jedna mała uwaga: w Twoim przypadku prompt może być poprzedzony czymś jeszcze, np. `C:\Users\ola>` lub `Olas-MacBook-Air:~ ola$` i jest to w 100% poprawne. + +Część do znaku `$` lub `>` razem z nim nazywana jest *znakiem zachęty wiersza polecenia* lub skrótowo *znakiem zachęty (promptem)*. Jego celem jest zachęcić Ciebie do wpisania jakiegoś polecenia. + +W tutorialu, jeżeli będziemy chciały, byś wpisała komendę, umieścimy przed nią również `$` lub `>`, a czasami nawet resztę znaku zachęty. Możesz śmiało zignorować lewą część i wpisać komendę zaczynającą się za promptem. + +## Twoja pierwsza komenda! + +Zacznijmy od wpisania następującego polecenia: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +A następnie wciśnij `enter`. Oto rezultat: + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Jak widzisz, komputer właśnie wyświetlił Twoją nazwę użytkownika. Prawda, że sprytne? :) + +> Staraj się zawsze przepisywać polecenia zamiast je kopiować i wklejać. W ten sposób zapamiętasz więcej! + +## Podstawy + +Każdy system operacyjny ma nieco inny zestaw komend dostępnych w wierszu polecenia, zatem postępuj według instrukcji odpowiadających Twojemu systemowi operacyjnemu. To co, spróbujemy? + +### Bieżący katalog + +Miło byłoby dowiedzieć się, gdzie teraz jesteśmy, co? No to sprawdźmy. Wpisz poniższe polecenie i wciśnij `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Uwaga: 'pwd' pochodzi od angielskiego skrótu 'print working directory', czyli wyświetl katalog roboczy - ten, w którym się aktualnie znajdujemy. + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Uwaga: 'cd' pochodzi od 'change directory' (po polsku 'zmień katalog'). W PowerShell możesz używać pwd dokładnie tak samo jak w Linuksie lub macOS. + + + +Prawdopodobnie ujrzysz coś podobnego na swoim komputerze. Kiedy otwierasz wiersz polecenia, zwykle jest on uruchamiany w folderze głównym Twojego konta użytkownika. + +* * * + +### Dowiedz się więcej o komendach + +Wiele poleceń, które można wpisać w wierszu polecenia ma wbudowane funkcje pomocy, które można wyświetlić i przeczytać! Na przykład, aby dowiedzieć się więcej na temat polecenia cd: + + + +macOS i Linux posiada polecenie `man`, które wyświetla Ci pomoc dla danego polecenia. Spróbuj `man pwd` i zobacz, co mówi lub umieścić `man` przed innim poleceniem, aby zobaczyć jego pomoc. Wynikiem `man` jest normalna strona. Użyj spacji, aby przejść do następnej strony i `q`, aby zakończyć. + + + + + +Dodawanie przyrostka`/?` do większości poleceń powoduje, że zostają wyświetlone strony pomocy. Konieczne może być przewinięcie okna polecenia, aby zobaczyć wszystkie informacje. Spróbuj `cd /?`. + + + +### Lista plików i folderów + +Co znajduje się w środku? Fajnie byłoby się tego dowiedzieć. Sprawdźmy: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > 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 + ... + + +> Uwaga: W PowerShell możesz również używać 'ls' tak jak w Linuksie lub macOS. + +* * * + +### Zmiana katalogu bieżącego + +Przejdźmy teraz do naszego folderu Pulpit: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Zapamiętaj, że katalog "Desktop" może być przetłumaczony na język Twojego systemu Linux. W takim przypadku, musisz wymienić `Desktop` na przetłumaczoną nazwę; na przykład dla niemieckiego tłumaczenia `Schreibtisch`. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Sprawdźmy, czy coś się faktycznie zmieniło: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Tak, to tutaj! + +> PRO tip: gdy wpiszesz `cd D` i wciśniesz przycisk `Tab` na klawiaturze, wiersz polecenia automatycznie uzupełni resztę nazwy, dzięki czemu będziesz mogła nawigować szybciej. Jeżeli istnieje więcej niż jeden folder o nazwie zaczynającej się na "D", wciśnij `Tab` dwukrotnie, aby wyświetlić listę możliwości. + +* * * + +### Tworzenie folderu + +Co powiesz na stworzenie folderu "cwiczenie" na swoim pulpicie? Zrób to w ten sposób: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir cwiczenie + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir cwiczenie + + + + +To niepozorne polecenie doda do Twojego pulpitu folder o nazwie `cwiczenie`. Możesz sprawdzić, czy na pewno został tam dodany - spójrz na swój pulpit albo uruchom polecenie `ls` lub `dir`! Spróbuj. :) + +> PRO tip: Jeżeli nie chcesz w kółko wpisywać tych samych poleceń, wciśnij na klawiaturze klawisz ze `strzałką w górę` i `strzałką w dół` aby przewinąć listę poprzednio użytych poleceń. + +* * * + +### Ćwiczenie! + +Małe wyzwanie dla Ciebie: wewnątrz świeżo utworzonego katalogu `cwiczenie` stwórz katalog o nazwie `test`. Użyj poleceń `cd` i `mkdir` + +#### Rozwiązanie: + + + +{% filename %}command-line{% endfilename %} + + $ cd excercise + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd excercise + > mkdir test + > dir + 05/08/2014 07:28 PM test + + + + +Gratulacje! :) + +* * * + +### Sprzątanie + +Nie chcemy zostawić bałaganu, a zatem wyrzućmy wszystko, co do tej pory zrobiłyśmy. + +Najpierw musimy wrócić do Pulpitu: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Wykonanie `cd` wraz z `..` przeniesie Cię do katalogu nadrzędnego (czyli tego, w którym znajduje się Twój aktualny katalog). + +Sprawdź, gdzie jesteś: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Teraz czas usunąć katalog `cwiczenie`: + +> **Uwaga**: Usuwanie plików za pomocą `del`, `rmdir` lub `rm` jest nieodwracalne. To znaczy, że *Twoje pliki zostaną bezpowrotnie utracone*! Tak więc bądź ostrożna z tymi poleceniami. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r cwiczenie + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S cwiczenie + cwiczenie, Are you sure ? Y + + + + +Gotowe! Dla pewności, że został on naprawdę usunięty, sprawdźmy to: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Wyjście + +To na razie tyle! Możesz teraz spokojnie zamknąć wiersz polecenia. To co, zrobimy to jak prawdziwy haker? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Fajnie, nie? :) + +## Podsumowanie + +Oto podsumowanie przydatnych poleceń: + +| Polecenie (Windows) | Polecenie (Mac OS / Linux) | Opis | Przykład | +| ------------------- | -------------------------- | ----------------------------------- | --------------------------------------------------- | +| wyjście | wyjście | zamknięcie okna | **wyjście** | +| cd | cd | zmiana katalogu | **cd test** | +| cd | pwd | pokazywane bieżącego katalogu | **cd** (Windows) lub **pwd** (Mac OS / Linux) | +| dir | ls | lista katalogów/plików | **dir** | +| copy | cp | kopiowanie pliku | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | przenoszenie pliku | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | tworzenie nowego katalogu | **mkdir testdirectory** | +| rmdir (lub del) | rm | usuwanie pliku | **del c:\test\test.txt** | +| rmdir /S | rm -r | usuwanie katalogu | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | uzyskiwanie pomocy na temat komendy | **cd /?** (Windows) lub **man cd** (Mac OS / Linux) | + +To tylko garstka wszystkich poleceń, z których możesz skorzystać w wierszu polecenia, ale dzisiaj nie będziesz potrzebowała niczego więcej. + +Jeżeli temat Cię zainteresował, to [ss64.com](http://ss64.com) zawiera kompletny spis poleceń dla wszystkich systemów operacyjnych. + +## Gotowa? + +No to poznajmy Pythona! \ No newline at end of file diff --git a/pl/intro_to_command_line/open_instructions.md b/pl/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..67737f0c882 --- /dev/null +++ b/pl/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +W zależności od wersji systemu Windows i klawiatury, jedna z poniższych instrukcji powinna otworzyć okno poleceń (być może trzeba trochę poeksperymentować, ale nie musisz wypróbowywać wszystkich tych sugestii): + +- Przejdź do menu Start lub ekranu i wpisz "Command Prompt" w polu wyszukiwania. +- Idź do Start menu → Windows System → Command Prompt. +- Idź do Start menu → All Programs → Accessories → Command Prompt. +- Idź do początkowego ekranu, najedź myszą w lewym dolnym rogu ekranu i kliknij strzałkę w dół, która się pojawi (na ekranie dotykowym przesuń palcem od dołu ekranu). Strona aplikacji powinna się otworzyć. Kliknij w Command Prompt (wiersz polecenia) w sekcji System Windows. +- Przytrzymaj specjalny klawisz Windows na klawiaturze i naciśnij klawisz "X". Wybierz "Command Prompt" (wiersz poleceń) z wyskakującego menu. +- Przytrzymaj klawisz Windows i naciśnij klawisz "R", aby uzyskać okno "Run"('Uruchom"). Wpisz "cmd" w polu i kliknij przycisk OK. + +![Wpisz "cmd" w oknie "Uruchom""](../python_installation/images/windows-plus-r.png) + +W dalszej części tego tutoriala konieczne będzie otwarcie dwóch okien poleceń jednocześnie. Jednak w niektórych wersjach systemu Windows, jeśli masz już otwarte jedno okno poleceń i spróbujesz otworzyć drugie przy użyciu tej samej metody, zamiast tego wyświetli Ci się okno poleceń, które otworzyłaś jako pierwsze. Spróbuj teraz na swoim komputerze i zobacz, co się stanie! Jeśli masz tylko jedno okno poleceń, wypróbuj jedną z innych metod z powyższej listy. Przynajmniej jedna z nich powinna spowodować otwarcie nowego okna poleceń. + + + + + +Przejdź do Launchpad → Other → Terminal. + + + + + +Prawdopodobnie jest to w Applications → Accessories → Terminal, or Applications → System → Terminal, ale może to zależeć od systemu. Jeśli tego tu nie ma, możesz spróbować z wyszukiwarką Google. :) + + diff --git a/pl/python_installation/README.md b/pl/python_installation/README.md new file mode 100755 index 00000000000..d4671cd98dd --- /dev/null +++ b/pl/python_installation/README.md @@ -0,0 +1,15 @@ +# Poznajmy Pythona + +Nareszcie tutaj! + +Ale najpierw porozmawiajmy o tym, czym jest Python. Python jest niezwykle popularnym językiem programowania, który może służyć do tworzenia stron internetowych, gier, oprogramowania naukowego, grafiki i wielu, wielu innych rzeczy. + +Początki Pythona sięgają późnych lat 80., a jego głównym założeniem jest czytelność, dzięki której kod jest łatwy do zrozumienia przez ludzi (a nie tylko przez komputery!). Właśnie z tego powodu wygląda on prościej niż inne języki programowania, ale nie martw się - Python jest jednocześnie naprawdę potężny! + +# Instalowanie Pythona + +> **Uwaga** Jeśli używasz już Chromebook, pomiń ten rozdział i upewnij się, że postąpiłeś zgodnie z instrukcją [Instalowanie Chromebook](../chromebook_setup/README.md). +> +> **Uwaga** Jeśli zrobiłaś to już wcześniej w rozdziale 'Instalacja', nie ma potrzeby instalować Pythona po raz drugi - przejdź od razu do następnego rozdziału! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/pl/python_installation/images/add_python_to_windows_path.png b/pl/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/pl/python_installation/images/add_python_to_windows_path.png differ diff --git a/pl/python_installation/images/python-installation-options.png b/pl/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/pl/python_installation/images/python-installation-options.png differ diff --git a/pl/python_installation/images/windows-plus-r.png b/pl/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/pl/python_installation/images/windows-plus-r.png differ diff --git a/pl/python_installation/instructions.md b/pl/python_installation/instructions.md new file mode 100755 index 00000000000..bef67ac7411 --- /dev/null +++ b/pl/python_installation/instructions.md @@ -0,0 +1,112 @@ +> Dla czytelniczek w domu: ten rozdział jest również omówiony w wideo [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Niniejszy podrozdział powstał w oparciu o kurs Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Framework Django został napisany w Pythonie. Potrzebujemy Pythona, żeby móc zrobić cokolwiek w Django. Zacznijmy zatem od zainstalowania go! Chcemy zainstalować Pythona 3.6, więc jeżeli posiadasz jakąkolwiek wcześniejszą wersję, będziesz musiała ją uaktualnić. Jeśli masz już w wersji 3.4 lub nowszej, powinno być dobrze. + + + +Najpierw sprawdź, czy na komputerze działa 32- lub 64-bitowa wersja systemu Windows, w linijce "Typ systemu" w oknie o informacjach o systemie. Aby przejść do tego okna, wypróbuj jedną z następujących metod: + +* Wciśnij klawisz Windows i klawisz Pause/Break w tym samym czasie +* Otwórz panel sterowania z menu systemu Windows, a następnie przejdź do Zabezpieczenia Systemu, a następnie System +* Wciśnij przycisk Windows, a następnie przejdź do Settings>System>About + +Możesz ściągnąć Pythona dla Windowsa ze strony https://www.python.org/downloads/windows/. Kliknij w link "Latest Python 3 Release - Python x.x.x". Jeżeli Twój komputer pracuje na **64-bitowej** wersji Windowsa, ściągnij **Windows x86-64 executable installer**. W innym wypadku ściągnij **Windows x86 executable installer**. Po ściągnięciu instalatora, powinnaś go uruchomić (klikając dwukrotnie w niego) i postępować według wyświetlanych instrukcji. + +Jedna rzecz, na którą trzeba uważać: podczas instalacji zauważysz okno zaznaczone jako "Setup". Upewnij się, że zaznaczyłaś opcję "Add Python 3.6 to PATH" lub ''Add Python to your environment variables" i kliknęłaś "Install Now", jak pokazano tutaj (może to wyglądać trochę inaczej, jeśli instalujesz inną wersję). + +![Nie zapomnij dodać Pythona do ścieżki systemowej (ang. Path)](../python_installation/images/python-installation-options.png) + +Kiedy instalacja się zakończy, możesz zobaczyć okienko dialogowe z linkiem, który możesz śledzić, aby dowiedzieć się więcej o Pythonie lub wersji, którą zainstalowałaś. Zamknij lub anuluj to okienko - nauczysz się więcej w tym tutorialu! + +Uwaga: jeżeli używasz starszej wersji Windowsa (7, Vista lub jakikolwiek starszy) i podczas instalacji Python 3.6.x dostaniesz błąd, możesz: + +1. zainstalować wszystkie uaktualnienia systemu Windows i spróbować instalacji Pythona 3.6 jeszcze raz; lub +2. zainstalować [starszą wersję Pythona](https://www.python.org/downloads/windows/), np. [3.4.6](https://www.python.org/downloads/release/python-346/). + +Jeżeli zainstalujesz starszą wersję Pythona, ekrany instalatora mogą wyglądać nieznacznie inaczej niż pokazane wyżej. Upewnij się, że przewinęłaś do "Add python.ext to Path", kliknęłaś przycisk po lewej i wybrałaś "Will be installed on local hard drive": + +![Dodawanie Pythona do zmiennej Path, starsze wersje](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Uwaga** Zanim zainstalujesz Pythona na macOS, musisz się upewnić, że ustawienia twojego Maca pozwolą na instalację pakietów, które nie pochodzą z App Store'a. Przejdź do Preferencji systemowych (znajdziesz je w folderze Aplikacje), kliknij "Ochrona i prywatność" i przejdź do zakładki "Ogólne". Jeżeli w "Dopuszczaj aplikacje pobrane z:" jest ustawione na "App Store", zmień to na "App Store i od zidentyfikowanych deweloperów". + +Przejdź na stronę https://www.python.org/downloads/release/python-361/ i pobierz instalator Pythona: + +* Pobierz plik o nazwie *macOS 64-bit/32-bit installer*, +* Kliknij dwukrotnie na *python-3.6.1-macosx10.6.pkg*, by uruchomić instalator. + + + + + +Jest bardzo prawdopodobne, że masz już zainstalowanego Pythona wraz z systemem. Aby się upewnić (a także sprawdzić jego wersję) otwórz konsolę i wpisz następujące polecenie: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Jeżeli masz zainstalowaną inną 'mikrowersję' Pythona, np. 3.6.0, to nie ma potrzeby, byś dokonywała aktualizacji. Jeżeli nie masz zainstalowanego Pythona lub chciałabyś zainstalować go w innej wersji, skorzystaj z jednego z poniższych sposobów: + + + + + +Wpisz w konsoli poniższe polecenie: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Użyj następującego polecenia w konsoli: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Jeżeli używasz starszej wersji Fedory, możesz dostać wiadomość o błędzie, że polecenie `dnf` nie zostało znalezione. W takim wypadku zamiast tego użyj polecenia `yum`. + + + + + +Użyj następującego polecenia w konsoli: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Sprawdź, czy instalacja zakończyła się pomyślnie - otwórz wiersz polecenia i uruchom polecenie `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Pokazana wersja może różnić się od 3.6.1 - powinna pasować do wersji, którą zainstalowałeś. + +**Uwaga:** jeżeli pracujesz na Windowsie i dostajesz wiadomość o błędzie, że `python3` nie został znaleziony, spróbuj użyć `python` (bez `3`) oraz sprawdź, czy być może w taki sposób uruchomisz Pythona 3.4. + +* * * + +W razie jakichkolwiek wątpliwości albo jeśli coś poszło nie tak i nie wiesz, co dalej robić, zapytaj mentora lub osobę prowadzącą kurs! Czasami nie wszystko idzie tak, jak powinno i najlepszym wyjściem z sytuacji jest poprosić o pomoc kogoś bardziej doświadczonego. \ No newline at end of file diff --git a/pl/python_introduction/README.md b/pl/python_introduction/README.md new file mode 100755 index 00000000000..7eeb2648552 --- /dev/null +++ b/pl/python_introduction/README.md @@ -0,0 +1,1070 @@ +{% set warning_icon = '' %} + +# Wprowadzenie do Pythona + +> Fragmenty tego rozdziału oparte są na tutorialu Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Napiszmy jakiś kod! + +## Wiersz polecenia Pythona + +> Dla czytelniczek w domu: tę część uwzględnia wideo [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +Aby rozpocząć zabawę z Pythonem, musisz otworzyć jego *wiersz polecenia* na swoim komputerze. Powinnaś już wiedzieć, jak to zrobić - nauczyłyśmy się tego w rozdziale [Wprowadzenie do interfejsu wiersza polecenia](../intro_to_command_line/README.md). + +Gdy już będziesz gotowa, postępuj według instrukcji poniżej. + +Chcemy otworzyć konsolę Pythona. Wpisz `python`, jeśli pracujesz na Windowsie, lub `python3`, jeśli pracujesz na MacOS/Linuxie i wciśnij `enter`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## Twoje pierwsze polecenie w Pythonie! + +Po uruchomieniu Pythona wiersz polecenia wygląda tak: `>>>`. Jest to sygnał dla nas, że od tego momentu możemy używać wyłącznie instrukcji języka Python. Nie musisz wpisywać `>>>` - Python zrobi to za Ciebie. + +Jeśli w którymkolwiek momencie zechcesz wyjść z konsoli Pythona, wpisz polecenie `exit()` albo użyj kombinacji klawiszy `Ctrl + Z` w Windows lub `Ctrl + D` w Macu/Linuksie. Wtedy już nie będziesz więcej widzieć `>>>`. + +Teraz jeszcze nie chcemy wyjść z konsoli Pythona. Chcemy się jeszcze kilku rzeczy nauczyć. Zacznijmy od wpisania działania matematycznego, np. `2 + 3` i naciśnięcia `entera`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Nieźle! Widzisz, jak pojawiła się odpowiedź? Python zna się na matematyce! Powinnaś spróbować innych działań, np.: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +By wykonać potęgowanie, powiedzmy podnieść 2 do potęgi 3, musimy wpisać: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Pobaw się tym przez chwilę, a potem wróć tutaj. :) + +Ja widzisz, Python jest świetnym kalkulatorem. Jeżeli zastanawiasz się, co możesz z nim jeszcze zrobić… + +## Tekstowy typ danych (string) + +A jakby tak wpisać swoje własne imię? Wpisz swoje imię używając cudzysłowów, w ten sposób: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Właśnie stworzyłaś swój pierwszy string! Jest to ciąg znaków, który może być przetwarzany przez komputer. String musi zawsze zaczynać się i kończyć tym samym znakiem. Może to być apostrof (`'`) lub cudzysłów (`"`) - nie ma różnicy! Sygnalizują one Pythonowi, że wszystko, co znajduje się pomiędzy nimi, jest stringiem. + +Stringi mogą być łączone. Spróbuj tak: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Czesc " + "Ola" +'Czesc Ola' +``` + +Da się również mnożyć stringi za pomocą liczb: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Jeśli chciałabyś użyć apostrofu wewnątrz stringu, możesz to zrobić na dwa sposoby. + +Za pomocą cudzysłowu: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +lub poprzedzając apostrof odwróconym ukośnikiem (``): + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Fajnie, co? Możesz także wyświetlić swoje imię wielkimi literami. Wpisz: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Właśnie użyłaś **metody** `upper` na swoim stringu! Metoda (jak `upper()`) to sekwencja instrukcji, które Python wykonuje na podanym obiekcie (`"Ola"`) jak tylko ją wywołasz. + +Jeżeli chcesz poznać liczbę liter, którą zawiera twoje imię, istnieje **funkcja** również do tego! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Zastanawiasz się, dlaczego czasami wywołujemy funkcję z `.` na końcu stringu (jak tutaj: `"Ola".upper()`), a czasami najpierw wywołujemy funkcję, a dopiero potem umieszczamy string w nawiasach? Ano, w niektórych przypadkach funkcje są związane z obiektami. Tak jak `upper()`, która może być użyta wyłącznie na stringach. Taką funkcję nazywamy wówczas **metodą**. Są również funkcje, które nie są powiązane z niczym konkretnym i mogą być używane na różnych typach obiektów, jak na przykład `len()`. Dlatego przekazujemy `"Ola"` jako parametr dla funkcji `len`. + +### Podsumowanie + +OK, wystarczy już stringów. Jak dotąd nauczyłaś się o: + +- **wiersz polecenia** - wpisywanie komend (kodu) w wierszu polecenia Pythona powoduje, że Python zwraca wyniki +- **liczby i stringi** - w Pythonie liczb używamy do działań matematycznych, a stringów do obiektów tekstowych +- **operatory** - takie jak `+` i `*`, łączą wartości produkując nowe +- ** funkcje** - takie jak `upper()` i `len()`, wykonują działania na obiektach. + +Są to podstawy każdego języka programowania, jakiego przyjdzie Ci się uczyć. Gotowa na coś trudniejszego? Mamy nadzieję, że tak! + +## Błędy + +Spróbujmy czegoś nowego. Czy możemy sprawdzić długość liczby w taki sam sposób, jak długość naszego imienia? Wpisz `len(304023)` i wciśnij `enter`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Dostałyśmy nasz pierwszy błąd! Ikona {{ warning_icon }} to sposób, w jaki będziemy Ciebie informować, że kod, który zaraz wykonasz, nie powinien zadziałać poprawnie. Popełnianie błędów (nawet intencjonalnie) to ważna część nauki! + +Komunikat mówi nam, że obiekty typu "int" (liczby całkowite, ang. integer) nie mają długości. Zatem co możemy zrobić? Może mogłybyśmy przekazać naszą liczbę jako string? Stringi mają ustaloną długość, zgadza się? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Działa! Użyłyśmy funkcji `str` wewnątrz funkcji `len`. Funkcja `str()` konwertuje wszystko do postaci stringów. + +- Funkcja `str` przekształca wartości na **stringi** +- Funkcja `int` przekształca wartości na **liczby** + +> Ważne: możemy zamienić liczby na tekst, ale nie zawsze możemy zamienić tekst na liczby - czym w ogóle powinien być wynik działania `int('hello')`? + +## Zmienne + +Ważnym zagadnieniem w programowaniu są zmienne. Zmienna to nic innego jak nazwa nadana jakiejś wartości, którą potem możemy się posługiwać. Programiści używają zmiennych do przechowywania danych, dzięki czemu ich kod jest bardziej czytelny i nie muszą każdorazowo zastanawiać się, co jest czym. + +Przypuśćmy, że chcemy stworzyć nową zmienną zwaną `imie`: + +{% filename %}command-line{% endfilename %} + +```python +>>> imie = "Ola" +``` + +Napisałyśmy własnie, że imie równa się Ola. + +Jak już zauważyłaś, Twój program nie wyświetlił niczego tak, jak to robił wcześniej. Zatem skąd wiemy, że zmienna faktycznie istnieje? Wpisz `imie` i wciśnij `enter`: + +{% filename %}command-line{% endfilename %} + +```python +>>> imie +'Ola' +``` + +Jupi! Twoja pierwsza zmienna! :) Zawsze możesz zmienić, do czego się ona odnosi: + +{% filename %}command-line{% endfilename %} + +```python +>>> imie = "Sonja" +>>> imie +'Sonja' +``` + +Możesz także używać jej w funkcjach: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(imie) +5 +``` + +Super, co? Zmienne mogą być czymkolwiek - liczbami również! Spróbuj: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Ale co by było, gdybyśmy użyły złej nazwy? Masz pomysł, co mogłoby się stać? Sprawdźmy! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> miasto = "Tokyo" +>>> masto +Traceback (most recent call last): + File "", line 1, in +NameError: name 'masto' is not defined +``` + +Błąd! Jak widzisz, Python ma różne rodzaje błędów, a ten nosi nazwę **NameError**. Python zwróci Ci taki błąd, gdy będziesz próbowała używać nazwy, która nie została jeszcze utworzona. Gdybyś w przyszłości natrafiła na niego, sprawdź w swoim kodzie czy nie popełniłaś literówek w nazwach zmiennych. + +Poświęć chwilę czasu na zabawę i przekonaj się, co możesz z tym zrobić! + +## Funkcja print + +Spróbuj tego: + +{% filename %}command-line{% endfilename %} + +```python +>>> imie = 'Maria' +>>> imie +'Maria' +>>> print(imie) +Maria +``` + +Kiedy wpisujesz po prostu `imie`, interpreter Pythona zwraca *odwzorowanie* stringa będącego wartością zmiennej 'imie', czyli litery M-a-r-i-a zamknięte w pojedynczym cudzysłowie''. Natomiast gdy napiszesz `print(imie)`, Python wypisze zawartość zmiennej na ekran, bez żadnego cudzysłowu, co wygląda lepiej. + +Jak się później przekonamy, `print()` jest szczególnie użyteczny, gdy chcemy wypisać coś z wnętrza funkcji lub gdy zechcemy wypisać wartości w kilku wierszach. + +## Listy + +Oprócz stringów i liczb całkowitych, Python dysponuje szeregiem różnych typów obiektów. Teraz zapoznamy się z typem zwanym **listą**. Listy są dokładnie tym, co myślisz: obiektami, które są listami innych obiektów. :) + +Śmiało, stwórzmy listę: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Tak, lista jest pusta. Niespecjalnie przydatne, co? Stwórzmy listę numerów totolotka. Nie chcemy się powtarzać za każdym razem, więc tutaj również posłużymy się zmienną: + +{% filename %}command-line{% endfilename %} + +```python +>>> wyniki = [3, 42, 12, 19, 30, 59] +``` + +Dobrze, mamy listę! Co możemy z nią zrobić? Zobaczmy ile liczb znajduje się w tej liście. Masz pomysł, jakiej funkcji powinnaś użyć? Już z niej korzystałaś! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(wyniki) +6 +``` + +Tak! `len()` może zwrócić Ci liczbę obiektów zawartych w liście. Prawda że przydatne? To może teraz posortujmy listę: + +{% filename %}command-line{% endfilename %} + +```python +>>> wyniki.sort() +``` + +Polecenie to niczego nie zwraca, po prostu zmieniło kolejność liczb zawartych w liście. Wypiszmy jej zawartość jeszcze raz i zobaczmy co się stało: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(wyniki) +[3, 12, 19, 30, 42, 59] +``` + +Jak widzisz, liczby na liście są teraz uporządkowane według wartości od najniższej do najwyższej. Gratulacje! + +A gdybyśmy zapragnęły odwrócić kolejność? Zróbmy to! + +{% filename %}command-line{% endfilename %} + +```python +>>> wyniki.reverse() +>>> print(wyniki) +[59, 42, 30, 19, 12, 3] +``` + +Jeżeli chcesz dodać coś do swojej listy, możesz to zrobić wpisując polecenie: + +{% filename %}command-line{% endfilename %} + +```python +>>> wyniki.append(199) +>>> print(wyniki) +[59, 42, 30, 19, 12, 3, 199] +``` + +Jeśli chcesz wyświetlić tylko pierwszą liczbę, możesz to uczynić używając **indeksów**. Indeks jest numerem mówiącym nam, w którym miejscu listy znajduje się dany element. Programiści zaczynają liczenie od zera, zatem pierwszy element Twojej listy znajduje się w miejscu oznaczonym indeksem 0, następny z indeksem 1, i tak dalej. Spróbuj tego: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(wyniki[0]) +59 +>>> print(wyniki[1]) +42 +``` + +Jak widzisz, możesz uzyskać dostęp do każdego z elementów Twojej listy za pomocą jej nazwy oraz numeru indeksu wewnątrz nawiasów kwadratowych. + +By skasować coś z twojej listy, musisz użyć **indeksów**, których nauczyłyśmy się powyżej i metody `pop()`. Spróbujmy zobaczyć, jak to działa na przykładzie i powtórzmy sobie to, czego się nauczyłyśmy wyżej. Usuńmy pierwszy element z naszej listy. + +{% filename %}command-line{% endfilename %} + +```python +>>> print(wyniki) +[59, 42, 30, 19, 12, 3, 199] +>>> print(wyniki[0]) +59 +>>> wyniki.pop(0) +59 +>>> print(wyniki) +[42, 30, 19, 12, 3, 199] +``` + +Wszystko zadziałało zgodnie z planem! + +Żeby było zabawniej, sprawdź inne indeksy: 6, 7, 1000, -1, -6 czy -1000. Sprawdż, czy jesteś w stanie przewidzieć rezultat przed użyciem instrukcji. Czy otrzymane rezultaty mają sens? + +Wykaz wszystkich metod dostępnych dla list znajdziesz w odpowiednim rozdziale dokumentacji Pythona: https://docs.python.org/3/tutorial/datastructures.html + +## Słowniki + +> Dla czytelniczek w domu: ten rozdział jest również omówiony w wideo [Installing Python Code Editor](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Słownik przypomina nieco listę, jednak różni się tym, że dostęp do wartości uzyskujemy za pomocą klucza, a nie liczbowego indeksu. Kluczem może być dowolny ciąg znaków lub liczba. Pusty słownik tworzymy tak: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +To pokazuje, że właśnie stworzyłaś pusty słownik. Hura! + +A teraz spróbuj wpisać poniższą instrukcję (spróbuj użyć własnych danych): + +{% filename %}command-line{% endfilename %} + +```python +>>> uczestniczka = {'imie' : 'Ola', 'kraj' : 'Polska', 'ulubione_liczby' : [7, 42, 92]} +``` + +Za pomocą tej instrukcji stworzyłaś właśnie zmienną o nazwie `uczestniczka` zawierającą trzy pary klucz-wartość: + +- Klucz `imie` wskazuje na wartość `'Ola'` (obiekt typu `string`), +- `kraj` wskazuje na wartość `'Polska'` (kolejny `string`), +- zaś `ulubione_liczby` odnoszą się do `[7, 42, 92]` (obiekt typu `list` zawierający trzy liczby). + +Za pomocą poniższej składni możesz sprawdzać wartości poszczególnych kluczy: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(uczestniczka['imie']) +Ola +``` + +Widzisz, zupełnie jak w liście. Ale nie trzeba pamiętać numeru indeksu, wystarczy nazwa klucza. + +A co się stanie, gdy poprosimy Pythona o wartość klucza, który nie istnieje? Masz pomysł? Spróbujmy tak zrobić i zobaczmy efekt! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> uczestniczka['wiek'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'wiek' +``` + +Spójrz, kolejny błąd! Tym razem **KeyError**. Python próbuje Ci pomóc i wskazuje, że klucz `'wiek'` nie istnieje w tym słowniku. + +Kiedy powinniśmy używać słownika, a kiedy listy? To bardzo dobre pytanie! Zastanów się nad rozwiązaniem, zanim spojrzysz na odpowiedź poniżej. + +- Potrzebujesz ułożyć elementy w określonej kolejności? Wybierz listę. +- Potrzebujesz powiązać wartości z kluczami, żeby mieć później łatwiejszy dostęp do nich (używając klucza)? Użyj słownika. + +Słowniki, podobnie jak listy, są *mutowalne*, co oznacza, że po ich utworzeniu można je nadal zmieniać. Możesz dodać do stworzonego już słownika nowe pary klucz-wartość, w taki sposób: + +{% filename %}command-line{% endfilename %} + +```python +>>> uczestniczka['ulubiony_jezyk'] = 'Python' +``` + +Podobnie jak w przypadku list, metoda `len()` zwraca liczbę par klucz-wartość w danym słowniku. Śmiało, wpisz polecenie: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(uczestniczka) +4 +``` + +Mam nadzieję, że jak dotąd jest to zrozumiałe. :) Gotowa na dalszą zabawę ze słownikami? W następnej linijce czeka nas jeszcze więcej niesamowitości. + +Za pomocą polecenia `pop()` możesz usunąć element ze słownika. Założmy, że chciałabyś usunąć wpis oznaczony kluczem `'ulubione_liczby'`. Wpisz następującą instrukcję: + +{% filename %}command-line{% endfilename %} + +```python +>>> uczestniczka.pop('ulubione_liczby') +[7, 42, 92] +>>> uczestniczka +{'kraj': 'Polska', 'ulubiony_jezyk': 'Python', 'imie': 'Ola'} +``` + +Jak widać z wyświetlonego rezultatu, para klucz-wartość odpowiadająca kluczowi 'ulubione_liczby' została usunięta. + +Ponadto możesz także zmienić wartość odpowiadającą kluczowi, który już istnieje w słowniku. Napisz: + +{% filename %}command-line{% endfilename %} + +```python +>>> uczestniczka['kraj'] = 'Niemcy' +>>> uczestniczka +{'kraj': 'Niemcy', 'ulubiony_jezyk': 'Python', 'imie': 'Ola'} +``` + +Jak widać, wartość klucza `'kraj'` została zmieniona z `'Polska'` na `'Niemcy'`. :) Ekscytujące? Hura! Właśnie nauczyłaś się kolejnej niesamowitej rzeczy. + +### Podsumowanie + +Doskonale! Wiesz już sporo o programowaniu. W tej części nauczyłaś się o: + +- **błędach** - umiesz już czytać ze zrozumieniem błędy pojawiające się, gdy Python nie rozumie polecenia, które mu wydałaś +- **zmiennych** - nazwach dla obiektów, dzięki którym programuje się łatwiej, a Twój kod jest czytelniejszy +- **listach** - listach obiektów uporządkowanych w określonej kolejności +- **słownikach** - zbiorach obiektów przechowywanych w postaci par klucz-wartość + +Gotowa na następną część? :) + +## Porównywanie rzeczy + +> Dla czytelniczek w domu: tę część uwzględnia wideo [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Istotną częścią programowania jest porównywanie różnych rzeczy. Co najłatwiej porównać? Liczby! Zobaczmy, jak to działa: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Dałyśmy Pythonowi różne liczby do porównania. Jak widać, potrafi on nie tylko porównywać liczby, ale również wyniki działań. Fajnie, nie? + +Zastanawiasz się, dlaczego stawiamy dwa znaki równości `==` obok siebie, gdy sprawdzamy, czy liczby są równe? Pojedynczego znaku równości `=` używamy do nadawania wartości zmiennym. Zawsze, ale to **zawsze** musisz używać dwóch znaków równości `==`, gdy chcesz sprawdzić, czy dane elementy są równe. Możemy również stwierdzić, że dwie rzeczy nie są sobie równe. Aby to zrobić, używamy symbolu `!=`, tak jak to zostało pokazane na przykładzie powyżej. + +Użyjmy Pythona do wykonania dwóch innych zadań: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>` i `<` są zrozumiałe, ale co oznaczają `>=` i `<=`? Czytamy je w ten sposób: + +- x `>` y oznacza: x jest większe od y +- x `<` y oznacza: x jest mniejsze od y +- x `<=` y oznacza: x jest mniejsze lub równe y +- x `>=` y oznacza: x jest większe lub równe y + +Świetnie! A chcesz zrobić coś jeszcze? Spróbuj tak: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Możesz przekazać Pythonowi tyle liczb, ile Ci się podoba, a on zawsze zwróci Ci wynik! Prawda, że sprytne? + +- **and** - gdy używasz operatora `and`, oba porównania muszą być prawdziwe (True), żeby całe wyrażenie było prawdziwe +- **or** - gdy używasz operatora `or`, tylko jedno z obu porównań musi być prawdziwe, aby całe wyrażenie było prawdziwe + +Znasz powiedzenie "porównywać jabłka z gruszkami"? Zobaczmy, jak działa jego odpowiednik w Pythonie: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Widać, że podobnie jak w powiedzeniu, Python nie jest w stanie porównać liczby (`int`) ze stringiem (`str`). Zamiast tego zwraca nam **TypeError** i mówi nam, że te dwa typy nie mogą być porównywane ze sobą. + +## Obiekt logiczny (Boolean) + +Przypadkiem się właśnie dowiedziałaś o istnieniu innego typu obiektów w Pythonie. Nazywa się on **Boolean**. + +Są tylko dwa obiekty logiczne: + +- True - prawda +- False - fałsz + +Jednak żeby Python mógł to zrozumieć, powinnaś zawsze zapisywać je tak: True (pierwsza litera wielka, reszta to małe litery). **true, TRUE, tRUE nie zadziałają -- tylko True jest poprawne.** (to samo dotyczy False.) + +Wartości logiczne mogą także być zmiennymi! Zobacz tutaj: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Możesz też zrobić tak: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Poćwicz i pobaw się wartościami logicznymi wpisując następujące instrukcje: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Gratulacje! Wartości logiczne są jedną z najfajniejszych możliwości w programaniu, a Ty właśnie nauczyłaś się ich używać! + +# Zapisujemy! + +> Dla czytelniczek w domu: tę część uwzględnia wideo [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Do tej pory pisałyśmy cały nasz kod Pythona w interpreterze, co zmusza nas do pisania linijka po linijce. Prawdziwe programy są zapisywane w plikach i uruchamiane przez **interpreter** lub **kompilator** naszego języka programowania. Dotąd uruchamiałyśmy nasze programy w **interpreterze** Pythona, wprowadzając za każdym razem najwyżej jedną linijkę kodu. Ale w następnych zadaniach będziemy potrzebowały dodać więcej niż jeden wiersz kodu, więc musimy szybko: + +- wyjść z interpretera Pythona +- otworzyć wybrany przez nas edytor kodu +- Zapisać kod do nowego pliku Pythona +- Uruchomić go! + +Aby wyjść z używanego przez nas interpretera Pythona, użyj funkcji `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +W ten sposób znajdziesz się z powrotem w wierszu polecenia. + +Wcześniej wybrałyśmy Edytor kodu z sekcji [Edytor kodu](../code_editor/README.md). Otwórzmy teraz edytor i napiszmy trochę kodu wewnątrz nowego pliku (lub jeśli używasz Chromebooka, stwórz nowy plik w chmurze IDE i otwórz plik, który będzie zawarty w edytorze kodu): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Oczywiście jesteś już całkiem kompetentną programistką Pythona, więc śmiało - dodaj tam więcej kodu, który poznałaś wcześniej. + +Teraz musimy zapisać plik i nadać mu wymowną nazwę. Nazwijmy go **python_intro.py** i zapiszmy na Pulpicie. Możemy nazwać plik jak tylko nam się podoba, ale jedna rzecz jest istotna: na końcu nazwy musi być **.py**. Rozszerzenie **.py** informuje nasz komputer, że to jest **plik wykonywalny Pythona** i Python może go uruchomić. + +> **Uwaga** Powinnaś zauważyć jedną z najfajniejszych rzeczy, jeśli chodzi o edytor kodu: kolory! Gdy pisałaś w konsoli Pythona, wszystko miało ten sam kolor. Teraz powinnaś zobaczyć, że funkcja `print` jest innego koloru niż string. Nazywa się to "podświetlanie składni" i jest naprawdę użyteczne podczas kodowania. Kolor wyrazów w edytorze będzie dla Ciebie wskazówką, np. łatwo rozpoznasz dzięki temu niezamknięty string albo literówkę w słowie kluczowym (tak jak `def` w funkcji). To jeden z powodów, dla których używamy edytora kodu. :) + +Mamy już zapisany plik, a więc czas go uruchomić! Wykorzystując wiadomości poznane w sekcji poświęconej wierszowi polecenia, użyj terminala, aby **zmienić aktualny katalog** na katalog Pulpitu. + + + +Na Macu polecenie będzie wyglądać mniej-więcej tak: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +W Linuksie będzie tak (słowo "Desktop" może zostać przetłumaczone na polski jako "Pulpit"): + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Pamiętaj, że słowo "Desktop" może zostać przetłumaczone na polski jako "Pulpit"): + + + + + +W wierszu polecenia w systemie Windows będzie tak: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +A w Windows Powershell będzie tak: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Jeżeli utknęłaś, poproś o pomoc. To właśnie od tego są mentorzy! + +Teraz użyj Pythona do uruchomienia kodu z pliku w następujący sposób: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Uwaga: w Windowsie 'python3' nie będzie rozpoznawany jako polecenie. W takim wypadku użyj 'python' by wykonać ten plik: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Super! Właśnie uruchomiłaś z pliku swój pierwszy program w Pythonie. Wspaniałe uczucie, co? + +Teraz możemy przejść do niezwykle istotnego narzędzia w programowaniu: + +## If… elif… else + +Dużo różnych rzeczy w kodzie powinno być uruchamiane tylko wtedy, kiedy zostaną spełnione określone warunki. Dlatego Python posiada coś, co nazywa się **instrukcjami warunkowymi**. + +Zastąp kod w pliku **python_intro.py** następującym: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Gdybyśmy to teraz zapisały i uruchomiły, pojawiłby się błąd podobny do poniższego: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python oczekuje od nas dalszych instrukcji, które mają zostać wykonane w przypadku, gdy warunek `3 > 2` okaże się prawdziwy (czyli przyjmie wartość `True`). Sprawmy, żeby Python wypisał na ekranie "To działa!". Zmień kod w pliku **python_intro.py** na poniższy: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('To działa!') +``` + +Zauważyłaś, że w kolejnym wierszu nasz kod posiada wcięcie 4 spacji? Musimy tak robić, aby Python wiedział, co ma uruchomić, gdy warunek jest prawdziwy. Możesz używać jednej spacji, ale prawie każdy programista Pythona stosuje 4 spacje, aby kod wyglądał czytelniej. Pojedynczy tabulator również będzie liczył się jako 4 spacje, o ile Twój edytor tekstu został w taki sposób skonfigurowany. Jeżeli dokonałaś już wyboru, nie zmieniaj go! Jeżeli używasz już 4 spacji jako wcięć, wszystkie przyszłe wcięcia wykonuj też za pomocą 4 spacji - inaczej możesz wpaść w kłopoty. + +Zapisz plik i uruchom go jeszcze raz: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +To dziala! +``` + +Uwaga: pamiętaj, na Windowsie 'python3' nie jest rozpoznawane jako polecenie. Od tego momentu zamieniaj 'python3' na 'python' by wykonać plik. + +### A co jeśli warunek nie jest prawdziwy? + +W poprzednich przykładach kod był wykonywany wtedy, gdy warunki okazywały się prawdziwe (True). Ale Python posiada również wyrażenia `elif` i `else`: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 jest jednak większe od 2') +else: + print('5 nie jest większe od 2') +``` + +Po uruchomieniu wyświetli się: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 jest jednak większe od 2 + + +Gdyby 2 było większą liczbą niż 5, wtedy zostałaby wykonana druga instrukcja. Zobaczmy, jak działa `elif`: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Hej Ola!') +elif name == 'Sonja': + print('Hej Sonja!') +else: + print('Hej anonimie!') +``` + +i uruchommy go: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hej Sonja! + + +Widzisz co się tutaj wydarzyło? `elif` pozwala Ci na dodanie dodatkowego warunku, jeśli poprzedni warunek nie został spełniony. + +Po początkowej instrukcji `if` możesz dodać tyle instrukcji `elif`, ile tylko Ci się podoba. Na przykład: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python zbada każdy warunek i wyświetli: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + "Perfect, I can hear all the details" + + +## Komentarze + +Komentarze to linie zaczynające się od `#`. Możesz napisać cokolwiek będziesz chciała za `#`, a Python to zignoruje. Komentarze mogą spowodować, że Twój kod będzie łatwiejszy do zrozumienia przez innych. + +Zobaczmy, jak to wygląda: + +{% 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!") +``` + +Nie musisz pisać komentarza dla każdej linijki kodu, ale pamiętaj, że są one pomocne, by wytłumaczyć, czemu program coś robi lub by dodać podsumowanie, gdy program robi coś skomplikowanego. + +### Podsumowanie + +W ostatnich kilku ćwiczeniach nauczyłaś się: + +- **porównywać rzeczy** - w Pythonie do porównywania rzeczy możesz używać operatorów `>`, `>=`, `==`, `<=`, `<` oraz `and`, `or` +- **Boolean** - typ obiektu, który może przyjmować jedną z dwóch wartości: `True` (prawda) lub `False` (fałsz) +- **zapisywać pliki** - przechowywać kod w plikach, co pozwala nam uruchamiać bardziej rozbudowane programy. +- **if...elif...else** - wyrażenia, które pozwalają Ci uruchamiać kod tylko wtedy, gdy zostaną spełnione określone warunki. +- **komentarze** - linie, których Python nie wykona, a które pozwalają Ci dokumentować kod programu + +Czas na ostatnią część tego rozdziału! + +## Twoje własne funkcje! + +> Dla czytelniczek w domu: tę część uwzględnia wideo [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Pamiętasz funkcje takie jak `len()`, które możesz uruchamiać w Pythonie? Dobra wiadomość: teraz nauczysz się pisać swoje własne funkcje! + +Funkcja jest zestawem poleceń, które Python ma wykonać. Każda funkcja w Pythonie zaczyna się słowem kluczowym `def`, posiada nazwę i może przyjmować parametry. Spróbujmy! Zastąp kod w pliku **python_intro.py** następującym: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Hej!') + print('Jak się masz?') + +hi() +``` + +OK, nasza pierwsza funkcja gotowa! + +Być może zastanawiasz się, czemu napisałyśmy nazwę funkcji na końcu pliku. Zrobiłyśmy tak, ponieważ Python odczytuje plik i wykonuje go od góry do dołu. Zatem w celu użycia naszej funkcji, musimy ponownie wpisać ją na dole. + +Uruchommy to teraz i sprawdźmy, co się stanie: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hej! + Jak się masz? + + +Uwaga: Jeżeli to nie zadziała, nie panikuj! Wynik działania pozwoli Ci ustalić dlaczego: + +- Jeżeli dostajesz `NameError`, znaczy to że prawdopodobnie niepoprawnie coś wpisałaś, więc powinnaś sprawdzić czy użyłaś tej samej nazwy tworząc funkcję w `def hi():` oraz gdy ją wykonujesz w `hi()`. +- Jeżeli dostajesz `IndentationError`, sprawdź czy obydwie linie z `print` mają tę samą liczbę spacji/tabów na początku linii: Python wymaga, by kod wewnątrz funkcji był odpowiednio wcięty. +- Jeżeli nie ma żadnego wyniku działania, sprawdź czy ostanie `hi()` *nie* jest przypadkiem wcięte - jeżeli jest, to ta linia stała się również częścią funkcji i nigdy nie zostanie wykonana. + +Zbudujmy naszą pierwszą funkcję z parametrami. Posłużymy się wcześniejszym przykładem - funkcją, która wita każdego, kto ją uruchomi, wraz z imieniem: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(imie): +``` + +Jak widać, teraz nasza funkcja przyjmuje parametr, który nazwałyśmy `imie`: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(imie): + if imie == 'Ola': + print('Hej Ola!') + elif imie == 'Sonja': + print('Hej Sonja!') + else: + print('Hej nieznajoma!') + +hi() +``` + +Pamiętaj: musiałyśmy dodać cztery dodatkowe spacje (razem osiem) przed funkcją `print`, ponieważ `if` musi dostać informację o tym, co powinno się wydarzyć, gdy warunek zostanie spełniony. Zobaczmy teraz, jak to działa: + +{% 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: 'imie' + + +Ups, błąd. Na szczęście Python zwrócił nam dość przydatny komunikat. Mówi nam, że funkcja `hi()` (ta, którą stworzyłyśmy) posiada jeden wymagany argument (zwany `imie`) i że zapomniałyśmy go przekazać przy wywoływaniu funkcji. Naprawmy to na końcu naszego pliku: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +I wykonajmy ponownie: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hej Ola! + + +A gdybyśmy zmieniły imię? + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +I wykonajmy: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hej Sonja! + + +A jak myślisz - co się stanie, jak wprowadzimy tam inne imię (jeszcze inne niż Ola i Sonja)? Spróbuj i przekonaj się, czy miałaś rację. Powinno się wyświetlić coś takiego: + +{% filename %}command-line{% endfilename %} + + Hej nieznajoma! + + +Prawda, że fajnie? W ten sposób nie musisz powtarzać się za każdym razem, gdy zechcesz zmienić imię osoby, która ma zostać powitana. To właśnie dlatego funkcje są nam potrzebne - żeby nie powtarzać kodu! + +Zróbmy coś mądrzejszego - mamy więcej niż dwa imiona, a podanie warunku dla każdego byłoby trudne, prawda? Zastąp zawartość pliku następującym kodem: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(imie): + print('Hej ' + imie + '!') + +hi("Rachel") +``` + +Teraz wywołajmy ten kod: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hej Rachel! + + +Gratulacje! Właśnie nauczyłaś się pisać funkcje! :) + +## Pętle + +> Dla czytelniczek w domu: tę część uwzględnia wideo [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +To już ostatnia część. Prawda, że szybko poszło? :) + +Jak już wspomniałyśmy, programiści są leniwi i nie lubią się powtarzać. W programowaniu chodzi o automatyzowanie różnych rzeczy, więc nie chcemy witać ręcznie każdej osoby po imieniu, prawda? I tu właśnie przydają nam się pętle. + +Pamiętasz jeszcze listy? Zróbmy listę dziewczyn: + +{% filename %}python_intro.py{% endfilename %} + +```python +dziewczyny = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'Ty'] +``` + +Chcemy powitać po imieniu każdą z nich. Mamy do tego funkcję `hi`, zatem użyjmy jej wewnątrz pętli: + +{% filename %}python_intro.py{% endfilename %} + +```python +for imie in dziewczyny: +``` + +Wyrażenie `for` zachowuje się podobnie jak `if`, a więc kod pod nimi musi być wcięty 4 spacjami. + +Oto kompletny kod, który umieścimy w pliku: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(imie): + print('Witaj ' + imie + '!') + +dziewczyny = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'Ty'] +for imie in dziewczyny: + hi(imie) + print('Kolejna dziewczyna') +``` + +A gdy go uruchomimy: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hej Rachel! + Kolejna dziewczyna + Hej Monica! + Kolejna dziewczyna + Hej Phoebe! + Kolejna dziewczyna + Hej Ola! + Kolejna dziewczyna + Hej Ty! + Kolejna dziewczyna + + +Jak widzisz, cokolwiek umieścisz wewnątrz wyrażenia `for` wraz z wcięciem - zostanie powtórzone dla każdego elementu listy `dziewczyny`. + +Możesz także użyć `for` na liczbach, używając metody `range`: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Co wypisze nam na ekranie: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` jest funkcją, która tworzy listę liczb jedna po drugiej (liczby te podajesz jako parametry). + +Zwróć uwagę, że druga z tych liczb nie jest częścią listy stworzonej przez Pythona (to znaczy, że `range(1, 6)` liczy od 1 do 5, ale nie zawiera liczby 6). Dzieje się tak, bo "range" ma przedział jednostronnie otwarty, co oznacza, że zawiera pierwszą wartość z przedziału, ale nie zawiera ostatniej. + +## Podsumowanie + +To już wszystko. **Wspaniale Ci idzie!** To nie było wcale takie łatwe, możesz zatem być z siebie dumna. My zdecydowanie jesteśmy z Ciebie dumne, że dotarłaś do tego miejsca! + +Oficjalny, kompletny tutorial Pythona znajdziesz pod adresem https://docs.python.org/3/tutorial/. Pozwoli on Tobie poznać język kompletnie i dogłębnie. Powodzenia! :) + +Jak myślisz, może czas na małą przerwę? Rozciągnij się, rozprostuj nogi, daj odpocząć oczom zanim przejdziesz do kolejnego rozdziału. :) + +![Babeczka](images/cupcake.png) \ No newline at end of file diff --git a/pl/python_introduction/images/cupcake.png b/pl/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/pl/python_introduction/images/cupcake.png differ diff --git a/pl/template_extending/README.md b/pl/template_extending/README.md new file mode 100755 index 00000000000..5f57a77aa93 --- /dev/null +++ b/pl/template_extending/README.md @@ -0,0 +1,147 @@ +# Rozbudowa szablonów + +Kolejną fajną rzeczą, którą Django daje Ci do dyspozycji, jest możliwość **rozszerzania szablonów**. Co to oznacza? To znaczy, że możesz używać tych samych części Twojego kodu HTML na różnych stronach Twojej aplikacji. + +Szablony pomagają, gdy chcesz użyć te same informacje lub ten sam kod w wielu miejscach. W takim wypadku nie musisz się powtarzać w każdym pliku. I jak będziesz chciała zmienić cokolwiek, nie będziesz musiała tego zrobić w każdym szablonie, wystarczy tylko w jednym! + +## Tworzenie szablonu bazowego + +Szablon bazowy to najbardziej podstawowy szablon, który możesz rozszerzać na każdej stronie twojej aplikacji. + +Stwórzmy plik `base.html` w `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +Następnie otwórz ten plik w edytorze kodu i skopiuj całą zawartość pliku `post_list.html` do pliku `base.html`, w taki sposób: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Następnie, w `base.html`, zamień całą zawartość `` (wszystko, co znajduje się pomiędzy `` a ``) na to: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Mogłaś zauważyć, że zamieniło to wszystko od `{% for post in posts %}` do `{% endfor %}` na: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Ale czemu? Właśnie stworzyłaś `block`! Użyłaś znacznika szablonu `{% block %}` by zaznaczyć obszar, w który zostanie wstawiony HTML. Ten HTML będzie pochodził z innego szablonu, który rozszerza ten szablon (`base.html`). Za chwilę pokażemy Ci, jak to się robi. + +Teraz zapisz `base.html` i otwórz ponownie w edytorze swój `blog/templates/blog/post_list.html`. {% raw %}Usuniemy teraz wszystko powyżej `{% for post in posts %}` i poniżej `{% endfor %}`. Jak to zrobisz, plik będzie wyglądać tak:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Będziemy chciały użyć tych kliku linii jako części szablonu dla wszystkich bloków treści. Najwyższy czas dodać znaczniki block w tym pliku! + +{% raw %}Musimy zrobić to tak, by nasz znacznik block zgadzał się ze znacznikiem w pliku `base.html`. Chcesz też by zawierał on cały kod, który należy do twoich bloków treści. By to osiągnąć, umieść wszystko pomiędzy `{% block content %}` i `{% endblock %}`. O tak:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Została jeszcze jedna rzecz. Musimy połączyć te dwa szablony razem. To właśnie na tym polega rozszerzaniem szablonów! Dokonamy tego dodając tag extend na początku nasze pliku. Właśnie tak: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +To wszystko! Zapisz plik i sprawdź, czy Twoja strona nadal działa poprawnie. :) + +> Jeżeli dostaniesz błąd `TemplateDoesNotExist`, oznacza to, że nie ma jesze pliku `blog/base.html` i jednocześnie w konsoli działa uruchomiony `runserver`. Spróbuj go zatrzymać (wciskając Ctrl+C - czy razem klawisze Control i C) i uruchomić ponownie przy użyciu polecenia `python manage.py runserver`. \ No newline at end of file diff --git a/pl/whats_next/README.md b/pl/whats_next/README.md new file mode 100755 index 00000000000..5ef9cc794d0 --- /dev/null +++ b/pl/whats_next/README.md @@ -0,0 +1,42 @@ +# Co dalej? + +Możesz z siebie być dumna! **Jesteś absolutnie świetna**. Jesteśmy takie dumne! <3 + +### Co teraz? + +Zrób sobie przerwę i zrelaksuj się. Odwaliłaś kawał dobrej roboty! + +Potem, upewnij się, że śledzisz Django Girls na [Facebooku](http://facebook.com/djangogirls) i [Twitterze](https://twitter.com/djangogirls) by być na bieżąco. + +### Czy możesz polecić kolejne materiały? + +Tak! Jest *wiele* materiałów online do nauki dowolnych umiejętności programistycznych - może to być całkiem zniechęcające, gdy trzeba wybrać spośród wielu stron. My wybrałyśmy te najciekawsze. Niezależnie od tego, czym interesowałaś się, zanim przybyłaś na Django Girls i niezależnie od tego, co zainteresowało Cię podczas przechodzenia tutoriala, oto kilka darmowych zasobów (lub zasobów z dużymi darmowymi komponentami), których możesz używać, aby się podszkolić. + +#### Django + +- Nasza inna książka, [Django Girls Tutorial: Extensions ](https://tutorial-extensions.djangogirls.org/) +- [Oficjalny tutorial Django](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) +- [Wideolekcje Getting Started with Django](http://www.gettingstartedwithdjango.com/) + +#### HTML, CSS i JavaScript + +- [Kurs programowania webowego na Codeacademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Kurs Pythona na Codeacademy](https://www.codecademy.com/learn/learn-python) +- [Kurs Pythona od Google'a](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) - wstępne ćwiczenia są bezpłatne +- [New Coder tutorials](http://newcoder.io/tutorials/)-jest wiele praktycznych przykładów, jak można użyć Pythona +- [edX](https://www.edx.org/course?search_query=python) - możesz sprawdzić większość kursów za darmo, lecz jeśli chciałabyś otrzymać certyfikat lub zdobyć punkty zwiększające Twoje kwalifikacje, to może to trochę kosztować +- [Coursera's Python specialization](https://www.coursera.org/specializations/python) - niektóre wykłady wideo są dostępne za darmo i możesz uzyskać Certyfikat Kursanta, przechodząc przez niego +- [Python for Everybody](https://www.py4e.com/) - wolna i otwarta wersja Coursera Pythona dla każdej specjalizacji + +#### Praca z danymi + +- [Kurs data science na Codeacademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) - możesz sprawdzić większość kursów za darmo, lecz jeśli chciałabyś otrzymać certyfikat lub zdobyć punkty zwiększające Twoje kwalifikacje, to może to trochę kosztować +- [Dataquest](https://www.dataquest.io/) – pierwszych 30 "misji" jest darmowych + +Nie możemy się doczekać, aby zobaczyć, co zbudujesz następnym razem! \ No newline at end of file diff --git a/pt/GLOSSARY.md b/pt/GLOSSARY.md new file mode 100644 index 00000000000..5f8b3e897a6 --- /dev/null +++ b/pt/GLOSSARY.md @@ -0,0 +1,3 @@ +# editor de código + +O editor de código é uma aplicação que lhe permite salvar seu código de tal forma que você possa editá-lo mais tarde. Você aprende a escolher e de onde baixar um no [capítulo Editor de Código](./code_editor/README.md) \ No newline at end of file diff --git a/pt/README.md b/pt/README.md new file mode 100755 index 00000000000..e3fd6e9f2bd --- /dev/null +++ b/pt/README.md @@ -0,0 +1,51 @@ +# Tutorial Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Este trabalho é licenciado sob a licença Creative Commons Attribution-ShareAlike 4.0. Para ver uma cópia desta licença, visite https://creativecommons.org/licenses/by-sa/4.0/ + +## Bem-vinda + +Bem-vinda ao Tutorial Django Girls! Estamos felizes em vê-la aqui :) Neste tutorial, vamos levá-la em uma viagem por baixo do capô das tecnologias web, oferecendo-lhe um vislumbre de todos os bits e peças que precisam se unir para fazer a web funcionar tal como a conhecemos. + +Como todas as coisas desconhecidas, isto vai ser uma aventura - mas não se preocupe! Já que você teve coragem para estar aqui, você vai ficar bem :) + +## Introdução + +Você já sentiu como se o mundo fosse cada vez mais tecnológico e que de alguma forma você ficou pra trás? Você já imaginou como seria criar um website, mas nunca teve motivação suficiente para começar? Você já pensou que o mundo do software é complicado demais até mesmo para você tentar fazer alguma coisa sozinha? + +Bem, nós temos boas notícias! Programação não é tão difícil quanto parece, e nós queremos te mostrar o quão divertido pode ser. + +Este tutorial não irá te transformar magicamente em uma programadora. Se você quer ser boa nisso, precisa de meses ou até mesmo anos de treino e prática. Mas nós queremos te mostrar que a programação e a criação de websites não são tão complicadas quanto parecem. Nós tentaremos explicar as diferentes etapas tão bem quanto pudermos, de forma que você não se sinta intimidada pela tecnologia. + +Nós esperamos conseguir fazer você amar a tecnologia tanto quanto nós amamos! + +## O que você vai aprender durante o tutorial? + +Quando terminar o tutorial, você terá uma pequena aplicação web funcional: seu próprio blog. Nós vamos mostrar como colocá-lo online para que outras pessoas vejam seu trabalho! + +Ele se parecerá (mais ou menos) com isso: + +![Figura 0.1](images/application.png) + +> Se você seguir o tutorial por conta própria e não tiver uma monitora para ajudar, podemos de ajudar a resolver qualquer problema por esse chat: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Nós pedimos às nossas monitoras e participantes anteriores para acessarem o chat de tempos em tempos para ajudar outras pessoas com o tutorial! Não tenha medo de fazer sua pergunta! + +OK, [vamos começar pelo começo...](./how_the_internet_works/README.md) + +## Seguindo o tutorial em casa + +É incrível participar de um workshop de Django Girls, mas estamos conscientes de que isso nem sempre é possível. É por isso que encorajamos você a tentar seguir este tutorial em casa. Para leitores em casa, estamos atualmente preparando vídeos que facilitarão seguir o tutorial por conta própria. Ainda é um trabalho em andamento, mas mais e mais coisas serão abordadas em breve no canal do YouTube [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed). + +Em cada capítulo que já abordamos, há um link que aponta para o vídeo correspondente. + +## Sobre o tutorial e contribuições + +Este tutorial é mantido por [DjangoGirls](https://djangogirls.org/). Se você encontrar quaisquer erros ou quiser atualizar o tutorial, por favor, [siga as orientações de contribuição](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Você gostaria de nos ajudar a traduzir este tutorial para outros idiomas? + +No momento, traduções estão sendo mantidas na plataforma crowdin.com em: + +https://crowdin.com/project/django-girls-tutorial + +Se o seu idioma não está listado no [crowdin](https://crowdin.com/), por favor [abra uma requisição](https://github.com/DjangoGirls/tutorial/issues/new) informando-nos do idioma para que possamos adicioná-lo. \ No newline at end of file diff --git a/pt/SUMMARY.md b/pt/SUMMARY.md new file mode 100755 index 00000000000..94bdc0a284e --- /dev/null +++ b/pt/SUMMARY.md @@ -0,0 +1,27 @@ +# Sumário + +* [Introdução](README.md) +* [Instalação](installation/README.md) +* [Configuração do Chromebook](chromebook_setup/README.md) +* [Como a Internet funciona](how_the_internet_works/README.md) +* [Introdução à linha de comando](intro_to_command_line/README.md) +* [Instalação do Python](python_installation/README.md) +* [Editor de Código](code_editor/README.md) +* [Introdução ao Python](python_introduction/README.md) +* [O que é Django?](django/README.md) +* [Instalação do Django](django_installation/README.md) +* [Seu primeiro projeto Django!](django_start_project/README.md) +* [Modelos do Django](django_models/README.md) +* [Django Admin](django_admin/README.md) +* [Deploy!](deploy/README.md) +* [URLs](django_urls/README.md) +* [Django views - hora de criar!](django_views/README.md) +* [Introdução ao HTML](html/README.md) +* [QuerySets e ORM do Django](django_orm/README.md) +* [Dados dinâmicos em templates](dynamic_data_in_templates/README.md) +* [Templates do Django](django_templates/README.md) +* [CSS - Deixe tudo mais bonito!](css/README.md) +* [Estendendo os templates](template_extending/README.md) +* [Amplie sua aplicação](extend_your_application/README.md) +* [Formulários do Django](django_forms/README.md) +* [O que vem agora?](whats_next/README.md) \ No newline at end of file diff --git a/pt/chromebook_setup/README.md b/pt/chromebook_setup/README.md new file mode 100644 index 00000000000..4ae645158dc --- /dev/null +++ b/pt/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Configuração do Chromebook + +> **Observação:** Se você já realizou os passos da Instalação, não precisa fazer isso de novo - pode pular direto para a [Introdução ao Python](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/pt/chromebook_setup/instructions.md b/pt/chromebook_setup/instructions.md new file mode 100644 index 00000000000..97b1fb54c14 --- /dev/null +++ b/pt/chromebook_setup/instructions.md @@ -0,0 +1,75 @@ +Você pode [pular este capítulo](http://tutorial.djangogirls.org/en/installation/#install-python) se não estiver usando um Chromebook. Caso esteja, sua experiência de instalação será um pouco diferente. Você pode ignorar o restante das instruções de instalação. + +### IDE na (PaizaCloud Cloud IDE, AWS Cloud9) + +O IDE na nuvem é uma ferramenta que fornece um editor de código e acesso a um computador em execução na Internet, onde você pode instalar, gravar e executar software. Pela duração desse tutorial, o IDE na nuvem funcionará como sua * máquina local *. Você ainda estará executando comandos em uma interface de terminal (ou prompt de comando), como suas colegas de oficina no macOS, Ubuntu ou Windows, mas seu prompt estará conectado a um computador remoto configurado pelo Cloud 9. Estas são as instruções para IDEs na nuvem (PaizaCloud Cloud IDE, AWS Cloud9). Você pode escolher uma das IDEs na nuvem e seguir as instruções. + +#### IDE na Nuvem PaizaCloud + +1. Vá para *PaizaCloud Cloud IDE * +2. Registre-se +3. Clique em *New Server* +4. Clique no botão Terminal (no lado esquerdo da janela) + +Agora você deve ver uma interface com uma barra lateral, botões no canto esquerdo. Clique no botão "Terminal" para abrir a janela de terminal com prompt desta maneira: + +{% filename %}Terminal{% endfilename %} + + $ + + +O terminal na IDE na nuvem PaizaCloud está pronto para suas instruções. Você pode ajustar o tamanho ou maximizar a janela para torná-la um pouco maior. + +#### AWS Cloud9 + +1. Vá para [AWS Cloud9](https://aws.amazon.com/cloud9/) +2. Registre-se +3. Clique em *Create Environment* + +Agora, a sua tela deve exibir uma interface com uma barra lateral, uma grande janela principal com algum texto e uma pequena janela na parte inferior, semelhante a isto: + +{% filename %}bash{% endfilename %} + + seunomedeusuário:~/workspace $ + + +Essa janela na parte inferior é o seu terminal. Você pode usá-la para enviar instruções para o computador remoto Cloud 9. Se preferir, você pode redimensioná-la para que fique um pouco maior. + +### Ambiente Virtual + +Um ambiente virtual (também chamado de virtualenv) é como uma caixa privada em que podemos colocar código de computador útil para um projeto em que estejamos trabalhando. Nós os utilizamos para manter separados uns dos outros os vários pedaços de código que queremos utilizar em nossos diferentes projetos para que eles não se misturem. + +No seu terminal, na parte de baixo da interface do Cloud 9, execute o seguinte: + +{% filename %}Cloud 9{% endfilename %} + + sudo apt update + sudo apt install python3.6-venv + + +Se não funcionar, peça ajuda à sua monitora. + +Em seguida, execute: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(note que na última linha, utilizamos um til seguido de um sinal de igual: `~=`). + +### GitHub + +Crie uma conta no [GitHub](https://github.com). + +### PythonAnywhere + +O tutorial do Django Girls inclui uma seção que chamamos de Deploy (ou "implantação", em Português), que é o processo de mover o código que alimenta a sua nova aplicação web para um computador de acesso público (chamado de servidor) para que outras pessoas possam ver o seu trabalho. + +Esta parte é um pouco estranha quando o tutorial é feito num Chromebook por que já estamos usando um computador que está na Internet (ao contrário de, digamos, um laptop). No entanto, ainda é útil, já que podemos pensar no ambiente do Cloud 9 como um lugar pra nosso trabalho em andamento e no Python Anywhere, como um lugar para mostrar nosso trabalho conforme ele vai ficando mais completo. + +Assim, crie uma nova conta Python Anywhere em *www.pythonanywhere.com*. \ No newline at end of file diff --git a/pt/code_editor/README.md b/pt/code_editor/README.md new file mode 100644 index 00000000000..08cbddf2351 --- /dev/null +++ b/pt/code_editor/README.md @@ -0,0 +1,11 @@ +# Editor de Código + +> Para leitoras em casa: esse capítulo é abordado no vídeo [Instalando Python & Editor de Código](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +Você está prestes a escrever sua primeira linha de código, então é hora de baixar um editor de código! + +> **Observação:** se você estiver usando um Chromebook, pule este capitulo e certifique-se de seguir as instruções em [Chromebook Setup](../chromebook_setup/README.md). A IDE na nuvem que escolher (PaizaCloud Cloud IDE ou AWS Cloud9) inclui um editor de código, e quando abrir um arquivo na IDE a partir do menu Arquivos, você estará automaticamente usando este editor de código. +> +> **Observação:** Você talvez já tenha feito isso no capítulo de Instalação - se for o caso, pode pular direto para o próximo capítulo! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/pt/code_editor/instructions.md b/pt/code_editor/instructions.md new file mode 100755 index 00000000000..862ee641787 --- /dev/null +++ b/pt/code_editor/instructions.md @@ -0,0 +1,37 @@ +Existem muitos editores de código diferentes e escolher um trata-se essencialmente de preferência pessoal. A maioria dos programadores de Python usa os complexos, mas extremamente poderosos IDEs (Integrated Development Environments, ou, em português, Ambientes de Desenvolvimento Integrado), tais como o PyCharm. Para um iniciante, entretanto, estas IDEs não são muito adequadas; nossas recomendações são igualmente poderosas, mas bem mais simples. + +Nossas sugestões estão logo abaixo, mas sinta-se livre para perguntar à sua monitora quais são suas preferências - será mais fácil escolher com a ajuda dela. + +## Visual Studio Code + +O Visual Studio Code é um editor de código desenvolvido pela Microsoft para Windows, Linux e macOS. Inclui suporte para depuração, controle Git incorporado, destaque de sintaxe, conclusão de código inteligente, snippets e reação de código. + +[Baixe-o aqui](https://code.visualstudio.com/download) + +## Gedit + +Gedit é um editor open-source, gratuito, disponível para todos os sistemas operacionais. + +[Baixe-o aqui](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +O Sublime Text é um editor muito popular. Ele tem um período de avaliação gratuito e está disponível para vários sistemas operacionais. + +[Baixe-o aqui](https://www.sublimetext.com/) + +## Atom + +Atom é outro editor popular. É gratuito, aberto e disponível para Windows, macOS e Linux. Atom é desenvolvido por [GitHub](https://github.com/). + +[Baixe-o aqui](https://atom.io/) + +## Por que estamos instalando um editor de código? + +Você deve estar se perguntando porque estamos instalando esse software editor de código específico ao invés de usar algo como Word ou Bloco de Notas. + +A primeira razão é que o código precisa estar em **texto puro, sem formatação**, e programas como o Word e o Textedit não produzem texto puro de fato. Eles produzem texto rico (com fontes e formatação), usando formatos personalizados, como [RTF](https://en.wikipedia.org/wiki/Rich_Text_Format) (Rich Text Format, ou Formato de Texto Rico, em português). + +A segunda razão é que editores de código são especializados em edição de código, então eles possuem funcionalidades úteis, como destacar o código com cores de acordo com seu significado ou fechar aspas automaticamente. + +Veremos tudo isso em ação mais pra frente. Logo, logo, seu bom e velho editor de código será uma de suas ferramentas preferidas. :) diff --git a/pt/css/README.md b/pt/css/README.md new file mode 100755 index 00000000000..083d623b866 --- /dev/null +++ b/pt/css/README.md @@ -0,0 +1,305 @@ +# CSS - deixe tudo mais bonito! + +Nosso blog ainda está um pouco feio, né? Está na hora de deixar ele mais bonitinho! Para isso, nós usaremos o CSS. + +## O que é CSS? + +Cascading Style Sheets (CSS - Folhas de Estilo em Cascata, em português) é uma linguagem utilizada para descrever o visual e a formatação de um website escrito numa linguagem de marcação (como HTML). Considere como uma maquiagem para a nossa página web. :) + +Mas não queremos começar do zero de novo, né? Mais uma vez, usaremos algo que outros programadores lançaram na Internet de graça. Você sabe, reinventar a roda não é divertido. + +## Vamos usar o Bootstrap! + +Bootstrap é um dos frameworks de HTML e CSS mais populares para desenvolver websites mais bonitinhos: https://getbootstrap.com/ + +Foi escrito por programadores que já trabalharam no Twitter e agora é desenvolvido por voluntários de todo o mundo! + +## Instalar o Bootstrap + +Para instalar o Bootstrap, abra o arquivo `.html` no seu editor de código e adicione o trecho abaixo à seção ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +``` + +Isso não adiciona nenhum arquivo ao seu projeto, apenas aponta para arquivos que existem na Internet. Então vá em frente, abra seu website e atualize a página. Aqui está! + +![Figura 14.1](images/bootstrap1.png) + +Já está mais bonita! + +## Arquivos estáticos no Django + +Finalmente, vamos dar uma olhada mais de perto nessas coisas que chamamos de **arquivos estáticos**. Arquivos estáticos são todos os seus CSS e imagens. Seu conteúdo não depende do contexto de requisição e será o mesmo para todos os usuários. + +### Onde colocar os arquivos estáticos para o Django + +O Django já sabe onde encontrar os arquivos estáticos para o app "admin" pré-instalado. Agora só precisamos adicionar alguns arquivos estáticos para o nosso próprio app, `blog`. + +Fazemos isso criando uma pasta chamada `static` dentro da aplicação blog: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + + +O Django vai encontrar automaticamente quaisquer pastas chamadas "static" dentro de todas as pastas dos seus apps. Então ele será capaz de usar seu conteúdo como arquivos estáticos. + +## Seu primeiro arquivo CSS! + +Vamos criar um arquivo CSS agora, para adicionar seu próprio estilo à sua página web. Crie um novo diretório chamado `css` dentro de seu diretório `static`. Em seguida, crie um novo arquivo chamado `blog.css` dentro do diretório `css`. Pronta? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Hora de escrever um pouco de CSS! Abra o arquivo `blog/static/css/blog.css` no seu editor de código. + +Nós não vamos nos aprofundar muito no aprendizado do CSS aqui. No final desta página há uma recomendação para um curso gratuito de CSS se você quiser aprender mais. + +Mas vamos fazer pelo menos um pouco. Vamos mudar a cor do nosso cabeçalho? Para entender as cores, os computadores usam códigos especiais. Esses códigos começam com `#` e são seguidos de 6 letras (A-F) e números (0-9). Por exemplo, o código para o azul é `#0000FF`. Você pode encontrar os códigos de diversas cores aqui: http://www.colorpicker.com/. Você pode também usar [cores predefinidas](http://www.w3schools.com/colors/colors_names.asp), como `red` e `green`. + +Em seu arquivo `blog/static/css/blog.css`, adicione o seguinte código: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` é um seletor CSS. Isto significa que estamos aplicando nossos estilos a qualquer elemento `um` dentro de um elemento `h1`; o seletor `h2 a` faz a mesma coisa com elementos `h2`. Então quando tivermos algo como um `

link

`, o estilo `h1 a` será aplicado. Neste caso, estamos dizendo para mudar sua cor para `#C25100`, que é um laranja escuro. Ou você pode colocar sua própria cor, mas certifique-se de que ela tenha um bom contraste com um fundo branco! + +Em um arquivo CSS, nós determinamos estilos para elementos do arquivo HTML. A primeira maneira de identificar elementos é usando seus nomes. Você pode se lembrar desses nomes porque são a mesma coisa que as tags da seção HTML. `a`, `h1` e `body` são exemplos de nomes de elementos. Também identificamos elementos pelo atributo `class` ou pelo atributo `id`. Class e id são nomes que você mesma dá ao elemento. Classes definem grupos de elementos e ids apontam para elementos específicos. Por exemplo, a tag a seguir pode ser identificada usando a tag de nome `a`, a classe `external_link` ou o id de `link_to_wiki_page`: + +```html + +``` + +Você pode ler mais sobre [Seletores CSS no w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Nós também precisamos dizer ao nosso template HTML que adicionamos algum CSS. Abra o arquivo `blog/templates/blog/post_list.html` no editor de código e adicione esta linha bem no começo dele: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Estamos apenas carregando arquivos estáticos aqui. :) Adicione a seguinte linha entre as tags `` e `` e depois dos links para os arquivos CSS do Bootstrap: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +O navegador lê os arquivos na ordem em que são apresentados, então precisamos ter certeza de que eles estão no lugar certo. Do contrário, o código no nosso arquivo poderia ser sobrescrito pelo código dos arquivos do Bootstrap. Acabamos de dizer ao nosso template onde está o nosso arquivo CSS. + +Agora, seu arquivo deve estar assim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +OK, salve o arquivo e atualize o site! + +![Figura 14.2](images/color2.png) + +Bom trabalho! Que tal a gente dar um pouco de espaço ao nosso site e aumentar a margem do lado esquerdo? Vamos tentar! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Adicione isto ao seu CSS, salve o arquivo e veja como funciona! + +![Figura 14.3](images/margin2.png) + +E que tal customizar a fonte no nosso cabeçalho? Cole o seguinte na seção `` do arquivo `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Assim como antes, cheque a ordem e a posição antes do link para `blog/static/css/blog.css`. Esta linha importará do Google Fonts (https://www.google.com/fonts) uma fonte chamada *Lobster*. + +Encontre o bloco de declaração `h1 a` (o código entre chaves `{` e `}`) no arquivo CSS `blog/static/css/blog.css`. Agora, adicione a linha `font-family: 'Lobster';` entre as chaves e atualize a página: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Figura 14.3](images/font.png) + +Incrível! + +Como mencionado acima, o CSS tem um conceito de classes. Essas classes permitem que você nomeie uma parte do código HTML e aplique estilos apenas a esta parte sem afetar nenhuma outra. Isto pode ser super útil! Talvez você tenha duas divs que estão fazendo coisas diferentes (como o seu cabeçalho e seu post). Uma classe pode ajudá-la a diferenciá-los. + +Vá em frente e o nomeie algumas partes do código HTML. Adicione uma classe chamada `page-header` para o `div` que contém o cabeçalho, assim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +E agora, adicione uma classe `post` em sua `div` que contém um post de blog. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

publicado: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Agora, adicionaremos blocos de declaração a seletores diferentes. Seletores começando com `.` se referem às classes. Existem vários tutoriais e explicações excelentes sobre CSS na Web que podem te ajudar a entender melhor o código a seguir. Por enquanto, copie e cole esse código em seu arquivo `mysite/static/css/blog.css`: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #C25100; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, .post h2 a:visited { + color: #000000; +} +``` + +Agora inclua declarações de classes no código HTML que exibe os posts. No arquivo blog/templates/blog/post_list. html, substitua isto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +por isto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Salve esses arquivos e atualize seu site. + +![Figura 14.4](images/final.png) + +Uau! Está lindo, né? Olhe para o código que acabamos de colar para encontrar os locais onde adicionamos classes no HTML e as usamos no CSS. Onde você faria uma mudança se você quisesse a data na cor turquesa? + +Não tenha medo de mexer um pouco com esse CSS e tentar mudar algumas coisas. Brincar com o CSS pode ajudá-la a entender o que diferentes coisas estão fazendo. Se quebrar algo, não se preocupe - você sempre pode desfazer! + +Nós realmente recomendamos fazer este curso gratuito on-line: [Curso de HTML & CSS do Codeacademy](https://www.codecademy.com/tracks/web). Isso pode ajudá-la a aprender tudo sobre como deixar seus sites mais bonito com CSS. + +Pronta para o próximo capítulo?! :) \ No newline at end of file diff --git a/pt/css/images/bootstrap1.png b/pt/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/pt/css/images/bootstrap1.png differ diff --git a/pt/css/images/color2.png b/pt/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/pt/css/images/color2.png differ diff --git a/pt/css/images/final.png b/pt/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/pt/css/images/final.png differ diff --git a/pt/css/images/font.png b/pt/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/pt/css/images/font.png differ diff --git a/pt/css/images/margin2.png b/pt/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/pt/css/images/margin2.png differ diff --git a/pt/deploy/README.md b/pt/deploy/README.md new file mode 100755 index 00000000000..f7143d87e74 --- /dev/null +++ b/pt/deploy/README.md @@ -0,0 +1,220 @@ +# Deploy! + +> **Observação:** Pode ser um pouco difícil chegar ao final desse capítulo. Persista e termine-o; o deploy é uma parte importante do processo de desenvolvimento de um website. Colocar o seu site no ar é um pouco mais complicado, então esse capítulo está no meio do tutorial para que sua monitora possa lhe ajudar nessa tarefa. Isto significa que você pode terminar o tutorial por conta própria se o tempo acabar. + +Até agora, seu site só estava disponível no seu computador. Agora você aprenderá como implantá-lo (fazer o 'deploy')! O deploy é o processo de publicação da sua aplicação na Internet de forma que as pessoas possam, finalmente, vê-la. :) + +Como você aprendeu, um website precisa estar em um servidor. Existem vários provedores de servidores na internet, nós vamos usar o [PythonAnywhere](https://www.pythonanywhere.com/). O PythonAnywhere é gratuito para pequenas aplicações que não recebem muitos visitantes, então vai ser suficiente para você por enquanto. + +O outro serviço externo que usaremos é [GitHub](https://www.github.com), que é um serviço de hospedagem de código. Existem outros, mas atualmente quase todos os programadores possuem uma conta no GitHub e agora, você também terá a sua! + +Estes três lugares serão importantes para você. Seu computador local é o lugar onde você fará o desenvolvimento e testes. Quando estiver satisfeita com as mudanças, você colocará uma cópia de seu programa no GitHub. Seu site estará na PythonAnywhere e você irá atualizá-lo ao subir uma nova cópia do seu código para o GitHub. + +# Git + +> **Observação:** Se você já fez os passos de instalação, não precisa fazer novamente - você pode pular para a próxima seção e comece a criar seu repositório Git. + +{% include "/deploy/install_git.md" %} + +## Começando o seu repositório no Git + +O Git controla as alterações em um determinado conjunto de arquivos no que chamamos de repositório de código (ou "repo"). Vamos criar um para o nosso projeto. Abra o seu console e execute esses comandos no diretório `djangogirls`: + +> **Observação:** Verifique o seu diretório atual com um `pwd` (OSX/Linux) ou o comando `cd` (Windows) antes de inicializar o repositório. Você deve estar na pasta `djangogirls`. + +{% filename %}command-line{% endfilename %} + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Seu Nome" + $ git config --global user.email voce@exemplo.com + + +Só é necessário iniciar o repositório Git uma vez por projeto (e você não vai precisar preencher seu nome de usuário e e-mail nunca mais). + +O Git irá controlar as alterações em todos os arquivos e pastas neste diretório, mas existem alguns arquivos que queremos que ele ignore. Fazemos isso através da criação de um arquivo chamado `.gitignore` no diretório base. Abra seu editor e crie um novo arquivo com o seguinte conteúdo: + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +E salve-o como `.gitignore` na pasta "djangogirls". + +> **Observação:** O ponto no início do nome do arquivo é importante! Se você estiver tendo alguma dificuldade em criá-lo (Macs, por exemplo, não gostam quando você tenta criar arquivos que começam com um ponto por meio do Finder), use a função "Salvar Como..." no seu editor; não tem como errar. E certifique-se de não adicionar *.txt *, *.py *, ou qualquer outra extensão ao nome do arquivo - ele só será reconhecido pelo Git se o nome for apenas *.gitignore *. +> +> **Observação:** Um dos arquivos especificados no seu `.gitignore` é o `db.sqlite3`. Este arquivo é o seu banco de dados local, onde todos os seus posts ficarão guardados. Seguiremos a prática padrão de programação na web, o que significa que usaremos bancos de dados separados para o seu site de teste local e seu site ao vivo no PythonAnywhere. Esse banco poderia ser SQLite, como na sua máquina de desenvolvimento, mas normalmente você utilizará um chamado MySQL, que consegue lidar com bem mais visitantes ao site do que o SQLite. De qualquer forma, ignorando o seu banco de dados SQLite para a cópia do GitHub, todos os posts criados até agora vão estar disponíveis apenas no seu ambiente local, e você vai ter que criá-los novamente em produção. Pense no seu banco de dados local como um bom parque de diversões onde você pode testar coisas diferentes e não ter medo de apagar os posts reais do seu blog. + +É uma boa idéia usar um comando `git status` antes de `git add` ou sempre que você não tiver certeza do que mudou. Isso evitará quaisquer surpresas, como os arquivos errados serem adicionados ou "commitados". O comando `git status` mostra informações sobre arquivos que não estão sendo controlados, arquivos que foram modificados ou preparados (staged), o status do branch, e muito mais. A saída do comando deve ser parecida com o seguinte: + +{% filename %}linha de comando{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +E finalmente salvamos nossas alterações. Vá para o seu console e execute estes comandos: + +{% filename %}linha de comando{% endfilename %} + + $ 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 + + +## Subindo o seu código para o GitHub + +Vá para [GitHub.com](https://www.github.com) e cadastre uma conta de usuário. (Se você já fez isso em preparação para a oficina, ótimo!) Certifique-se de lembrar da sua senha (adicione-a ao seu gerenciador de senhas, se usar um). + +Em seguida, crie um novo repositório chamado "my-first-blog". Deixe a caixa "Initialize with a README" desmarcada, deixe a opção do .gitignore em branco (nós já fizemos isso manualmente) e deixe a licença como "None". + +![](images/new_github_repo.png) + +> **Observação:** O nome `my-first-blog` é importante - você poderia escolher qualquer outra coisa, mas ele vai aparecer várias vezes nas instruções abaixo, e você teria que substituir todas as vezes. É mais fácil simplesmente manter o nome `my-first-blog`. + +Na próxima tela, você verá a URL de clonagem do seu repositório, que utilizará em alguns dos comandos a seguir: + +![](images/github_get_repo_url_screenshot.png) + +Agora precisamos conectar o repositório Git no seu computador com o que existe no GitHub. + +Digite o seguinte no seu terminal (substitua `` pelo nome de usuário que você escolheu quando criou sua conta no GitHub, mas sem os sinais de menor e maior): + +{% filename %}linha de comando{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Quando você enviar para o GitHub, seu nome de usuário e senha do GitHub serão solicitados (na própria janela de linha de comando ou em uma janela pop-up), e depois de inserir suas credenciais, você deverá ver algo assim: + +{% filename %}linha de comando{% 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] master -> master + Branch master set up to track remote branch master from origin. + + + + +O seu código agora está no GitHub. Vai lá ver! Você perceberá que ele esta em ótima companhia - o [Django](https://github.com/django/django), o [Tutorial Django Girls](https://github.com/DjangoGirls/tutorial) e vários outros incríveis projetos open source também hospedam seu código no GitHub. :) + +# Configurando o seu blog no PythonAnywhere + +## Crie uma conta no PythonAnywhere + +> **Observação:** Você talvez já tenha criado uma conta no PythonAnywhere durante os passos de instalação. Nesse caso, não precisa criar outra. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Configurando o seu site no PythonAnywhere + +Navegue para a [Dashboard do PythonAnywhere](https://www.pythonanywhere.com/) clicando no logo e escolha a opção de iniciar um console "Bash" -- essa é a versão do PythonAnywhere da linha de comando, igual à que existe no seu computador. + +![A seção 'New Console' na interface web do PythonAnywhere, com o botão para abrir o 'bash'](images/pythonanywhere_bash_console.png) + +> **Observação:** O PythonAnywhere é baseado em Linux, então se você estiver no Windows, o console terá uma cara um pouco diferente do que aparece no seu computador. + +Fazer o deploy de uma aplicação web no PythonAnywhere envolve baixar o seu código do GitHub e configurar o PythonAnywhere para reconhecê-lo e começar a servi-lo como uma aplicacão web. Existem formas manuais de fazer isso, mas o PythonAnywhere fornece uma ferramenta que vai fazer tudo pra você. Vamos instalar ela primeiro: + +{% filename %}linha de comando do PythonAnywhere{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +Isso deve mostrar na tela coisas como `Collecting pythonanywhere`, e depois de algum tempo finalizar com uma linha dizendo `Successfully installed (...) pythonanywhere (...)`. + +Agora vamos executar a ferramenta para configurar a nossa aplicação a partir do GitHub automaticamente. Digite os seguintes comandos no console do PythonAnywhere (não se esqueça de usar o seu nome de usuário do GitHub ao invés de ``): + +{% filename %}linha de comando do PythonAnywhere{% endfilename %} + + $ pa_autoconfigure_django.py https://github.com//my-first-blog.git + + +Enquanto assiste a execução da ferramenta, você pode ver o que ela está fazendo: + +- Baixando o seu código do GitHub; +- Criando um virtualenv no PythonAnywhere, igual ao que existe no seu computador +- Atualizando o seu arquivo de configuração com algumas configurações sobre o deploy; +- Criando um banco de dados no PythonAnywhere usando o comando `manage.py migrate`; +- Criando os seus arquivos estáticos (nós aprenderemos sobre eles mais tarde) +- E configurando o PythonAnywhere para servir a sua web app através da sua API. + +No PythonAnywhere, todos esses passos são automatizados, mas são os mesmos que você executaria ao utilizar qualquer outro provedor. + +Agora, é importante notar que o seu banco de dados no PythonAnywhere é completamente separado do banco de dados no seu computador — isso significa que eles têm posts e contas de admin diferentes. Por causa disso, da mesma forma que fizemos nos nossos computadores, precisamos iniciar a conta de admin com o comando *createsuperuser*. O PythonAnywhere já ativou o seu virtualenv automaticamente, então tudo o que você precisa fazer é executar o comando: + +{% filename %}linha de comando do PythonAnywhere{% endfilename %} + + (ola.pythonanywhere.com) $ python manage.py createsuperuser + + +Digite as informações sobre a sua conta de admin. É mais fácil usar as mesmos que usou no seu computador pra evitar qualquer confusão, a menos que você queira criar uma senha mais segura para a conta no PythonAnywhere. + +Agora, se quiser, você pode dar uma olhada no seu código no PythonAnywhere usando `ls`: + +{% filename %}linha de comando do PythonAnywhere{% 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 + + +Você também pode visitar a aba "Files" e dar uma olhada usando o gerenciador de arquivos do PythonAnywhere. (Da página do console, você pode navegar para outras páginas do PythonAnywhere utilizando o botão menu no canto superior direito. Quando você estiver em uma dessas páginas, outros links serão exibidos perto do topo.) + +## Estamos no ar! + +Agora, seu site deve estar no ar! Clique na aba "Web" do PythonAnywhere para pegar o link dele. Você pode compartilhar esse link com quem quiser :) + +> **Observação:** Este é um tutorial para iniciantes e ao fazer o deploy do site desta forma, nós tomamos alguns atalhos que não são ideais do ponto de vista de segurança. Se e quando você decidir continuar trabalhando nesse projeto ou começar um novo, você deve revisar a [checklist de implantação do Django](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/) para pegar algumas dicas de como tornar seu site seguro. + +## Dicas de debugging + +Se você vir um erro ao rodar o script `pa_autoconfigure_django.py`, aqui vão algumas causas comuns: + +- Esquecer de criar um token de API do PythonAnywhere. +- Digitar a URL do seu GitHub incorretamente. +- Se você vir um erro dizendo *"Could not find your settings.py"* (settings.py não encontrado), você provavelmente não adicionou todos os seus arquivos ao Git e/ou você não fez o push deles para o GitHub. Dê uma revisada na sessão sobre Git acima + +Se você vir um erro ao visitar o seu site, o primeiro lugar para procurar informações sobre ele é o **log de erros**. Você vai encontrar um link para o log na aba [Web](https://www.pythonanywhere.com/web_app_setup/) do PythonAnywhere. Verifique se há alguma mensagem de erro no log; as mais recentes estarão no final. + +Há também algumas [dicas de debugging no site de ajuda da PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +E lembre-se, a sua monitora está aí pra ajudar! + +# Visite o seu site! + +A página padrão no seu site deverá dizer "It worked!" ("Funcionou!"), igual ao seu ambiente local. Adicione `/admin` ao final da URL e você será levada ao site de administração. Faça o login com o nome de usuário e a senha, e você verá que pode adicionar novas postagens no servidor -- lembre-se de que as postagens do banco de dados de teste local não foram enviadas para o seu blog no ar. + +Depois de criar alguns posts, você pode voltar para o seu ambiente local (não o PythonAnywhere). Daqui pra frente você deve trabalhar no seu ambiente local para fazer alterações. Este workflow é comum no desenvolvimento web – fazer alteracões locais, subir essas alteracões pro GitHub, e baixar essas alterações para o seu servidor web de produção. Isto permite que você desenvolva e experimente sem quebrar o seu site que está no ar. Bem legal, né? + +Você merece *MUITOS* parabéns! Deploys em servidores são uma das partes mais complicadas do desenvolvimento web e não é incomum levar vários dias até conseguir fazer com que isso funcione. Mas você já tem seu site publicado na internet! \ No newline at end of file diff --git a/pt/deploy/images/github_get_repo_url_screenshot.png b/pt/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/pt/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/pt/deploy/images/new_github_repo.png b/pt/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/pt/deploy/images/new_github_repo.png differ diff --git a/pt/deploy/images/pythonanywhere_account.png b/pt/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/pt/deploy/images/pythonanywhere_account.png differ diff --git a/pt/deploy/images/pythonanywhere_bash_console.png b/pt/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..458b43f5d0d Binary files /dev/null and b/pt/deploy/images/pythonanywhere_bash_console.png differ diff --git a/pt/deploy/images/pythonanywhere_beginner_account_button.png b/pt/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/pt/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/pt/deploy/images/pythonanywhere_create_api_token.png b/pt/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..6e617d0a53e Binary files /dev/null and b/pt/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/pt/deploy/install_git.md b/pt/deploy/install_git.md new file mode 100644 index 00000000000..17adb503794 --- /dev/null +++ b/pt/deploy/install_git.md @@ -0,0 +1,52 @@ +O Git é um "sistema de controle de versão" usado por muitos programadores. Este software pode acompanhar mudanças em arquivos ao longo do tempo para que você possa recuperar versões específicas mais tarde. É parecido com o recurso "Controlar Alterações" dos processadores de texto (e.x Microsoft Word ou Libre Writer), mas muito mais poderoso. + +## Instalando o Git + + + +Você pode baixar o Git em [git-scm.com](https://git-scm.com/). Você pode clicar "próximo" em todas as etapas seguintes, exceto em duas delas: na etapa onde se pede para que escolha o seu editor, você deve escolher Nano, e na etapa "Ajustando o seu ambiente PATH", escolha "Usar Git e ferramentas opcionais Unix para Prompt de comando Windows" (a opção de baixo). Fora isso, as configurações padrão estão ótimas. "Checkout Windows-style, commit Unix-style line endings" está bom. + +Não se esqueça de reiniciar o prompt de comando ou o PowerShell depois que a instalação terminar com sucesso. + + + +Baixe o Git em [git-scm.com](https://git-scm.com/) e siga as instruções. + +> **Observação:** Se estiver rodando o OS X 10.6, 10.7, ou 10.8, você precisará instalar essa versão do git: [Instalado Git para o 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 +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/pt/deploy/signup_pythonanywhere.md b/pt/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..64c2a821bf5 --- /dev/null +++ b/pt/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere é um serviço para execução de código Python em servidores "na nuvem". Nós vamos utilizá-lo para hospedar nosso site e deixá-lo no ar na internet. + +Vamos hospedar o blog que estamos construindo no PythonAnywhere. Cadastre uma conta "Begginer" (de iniciante) no PythonAnywhere (o pacote gratuito é suficiente, você não precisa de um cartão de crédito). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Página do PythonAnywhere mostrando o botão para criar a conta "Beginner" (iniciante)](../deploy/images/pythonanywhere_beginner_account_button.png) + +> ** Observação ** Quando escolher seu nome de usuário no PythonAnywhere, lembre que a URL do blog será `seunomedeusuário.pythonanywhere.com `, então use algo como o seu apelido ou um nome que descreva o assunto do blog. Além disso, certifique-se de lembrar sua senha (adicione-a ao seu gerenciador de senhas, se você usar um). + +## Criando um token de API do PythonAnywhere + +Você só precisará fazer isso uma vez. Depois de se registrar no PythonAnywhere, você será levada ao seu painel de controle. Encontre o link para a página de "Account" (conta, em português) próximo ao topo no lado direito: + +![Link para a conta no topo direito na página](../deploy/images/pythonanywhere_account.png) + +em seguida, selecione a guia chamada "API Token" e aperte o botão que diz "Create new API token" (criar novo token API"). + +![Aba de token da API na página da conta](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/pt/django/README.md b/pt/django/README.md new file mode 100755 index 00000000000..d1253c5e18a --- /dev/null +++ b/pt/django/README.md @@ -0,0 +1,27 @@ +# O que é Django? + +Django (/ˈdʒæŋɡoʊ/ *jang-goh*) é um framework para aplicações web gratuito e de código aberto, escrito em Python. Um web framework é um conjunto de componentes que ajuda você a desenvolver sites de forma mais rápida e fácil. + +Quando você está construindo um site, sempre precisa de um conjunto similar de componentes: uma maneira de lidar com a autenticação do usuário (inscrever-se, fazer login, fazer logout), um painel de gerenciamento para o seu site, formulários, uma forma de upload de arquivos, etc. + +Felizmente, outras pessoas perceberam muito tempo atrás que desenvolvedores web enfrentam problemas similares quando estão construindo um novo site, então elas se juntaram e criaram frameworks (Django é um deles) que te dão componentes já prontos para usar. + +Frameworks existem para evitar que você tenha que reinventar a roda e para ajudar a aliviar parte do trabalho extra quando você está construindo um novo site. + +## Por que você precisa de um framework? + +Para entender para quê o Django de fato serve, precisamos olhar os servidores mais de perto. Primeiramente, o servidor precisa saber que você quer que ele te sirva uma página web. + +Imagine uma caixa de correio (porta) que monitora cartas recebidas (requisição). Isso é feito por um servidor web. O servidor web lê a carta e então envia a resposta com uma página web. Mas quando quer enviar alguma coisa, você precisa ter um conteúdo. O Django vai te ajudar a criar esse conteúdo. + +## O que acontece quando alguém solicita um site do seu servidor? + +Quando uma requisição chega a um servidor web, ela é passada para o Django, que tenta entender o que está sendo requisitado de fato. Primeiro, ele pega um endereço de página web e tenta descobrir o que fazer. Isso parte é feito pelo **urlresolver** do Django (note que um endereço de website é chamado de URL - Uniform Resource Locator -- Localizador de Recursos Uniforme, em tradução livre --, então o nome *urlresolver* faz sentido). Ele não é muito inteligente - ele pega uma lista de padrões e tenta achar em qual deles a URL se encaixa. O Django checa os padrões de cima pra baixo, e se algum se encaixa, ele passa a requisição para a função associada (que é chamada de *view*). + +Imagine uma funcionária dos Correios com uma carta. Ela está andando pela rua e compara cada número de casa com o que está na carta. Se os números forem correspondentes, ela entrega a carta lá. É assim que funciona o urlresolver! + +Todas as coisas interessantes são feitas dentro da função *view*: podemos dar uma olhada no banco de dados para procurar algumas informações. O usuário solicitou alguma mudança nos dados? Como uma carta dizendo "Por favor mude a descrição do meu emprego." A *view* pode checar se você tem permissão para fazer isso, e então atualizar a descrição do emprego e enviar de volta a mensagem: "Pronto!" Então a *view* gera uma resposta e o Django pode enviá-la para o navegador web do usuário. + +A descrição acima é um pouco simplificada, mas você não precisa saber todos os detalhes técnicos ainda. Uma ideia geral já é o suficiente. + +Então, ao invés de mergulharmos fundo nos detalhes, vamos começar criando algo com o Django e ir aprendendo as partes importantes durante o caminho! \ No newline at end of file diff --git a/pt/django_admin/README.md b/pt/django_admin/README.md new file mode 100755 index 00000000000..41606b38d1b --- /dev/null +++ b/pt/django_admin/README.md @@ -0,0 +1,57 @@ +# Django Admin + +Para adicionar, editar e deletar os posts que acabamos de modelar, nós usaremos o admin do Django. + +Vamos abrir o arquivo `blog/admin.py` no editor de código e substituir o conteúdo pelo seguinte: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Como você pode ver, nós importamos (incluímos) o modelo Post definido no capítulo anterior. Para tornar nosso modelo visível na página de administração, precisamos registrá-lo com `admin.site.register(Post)`. + +OK, hora de olhar para o nosso modelo de Post. Lembre-se de executar `python manage.py runserver` no console para iniciar o servidor web. Vá para o seu navegador e digite o endereço http://127.0.0.1:8000/admin/. Você verá uma página de login como essa: + +![Página de login](images/login_page2.png) + +Para fazer login, você precisa criar um *superusuário (superuser)* - uma conta de usuário que pode controlar tudo no site. Volte à linha de comando, digite `python manage.py createsuperuser` e aperte Enter. + +> Lembre-se: para escrever novos comandos enquanto o servidor web estiver rodando, abra uma nova janela do terminal e ative seu virtualenv. Nós revisamos como escrever novos comandos no capítulo **Seu primeiro projeto Django!**, na seção **Iniciando o servidor web**. + +{% filename %}macOS ou Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Quando for solicitado, insira seu nome de usuário (letras minúsculas, sem espaços), e-mail e senha. **Não se preocupe por não conseguir ver a senha que está digitando - é assim mesmo.** Digite a senha e aperte a tecla `enter` para continuar. A saída deve parecer com isso (onde o nome de usuário e o email devem ser os seus): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Volte ao seu navegador. Faça login com as credenciais de superusuário que você escolheu; você deverá ver o painel de controle de administração do Django. + +![Django Admin](images/django_admin3.png) + +Vá para as postagens e experimente um pouco com elas. Adicione cinco ou seis postagens. Não se preocupe com o conteúdo -- ele só é visível para você no seu computador local -- você pode copiar e colar algum texto deste tutorial para economizar tempo. :) + +Certifique-se de que pelo menos duas ou três postagens (mas não todas) têm a data de publicação definida. Isso será útil depois. + +![Django admin](images/edit_post3.png) + +Se você quiser saber mais sobre o Django admin, confira a documentação do Django: https://docs.djangoproject.com/en/2.0/ref/contrib/admin/ + +Esse provavelmente é um bom momento para pegar um café (ou chá) ou algo para comer para recuperar as energias. Você criou seu primeiro modelo em Django e merece uma pausa! \ No newline at end of file diff --git a/pt/django_admin/images/django_admin3.png b/pt/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/pt/django_admin/images/django_admin3.png differ diff --git a/pt/django_admin/images/edit_post3.png b/pt/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/pt/django_admin/images/edit_post3.png differ diff --git a/pt/django_admin/images/login_page2.png b/pt/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/pt/django_admin/images/login_page2.png differ diff --git a/pt/django_forms/README.md b/pt/django_forms/README.md new file mode 100755 index 00000000000..54caf1b1ce0 --- /dev/null +++ b/pt/django_forms/README.md @@ -0,0 +1,449 @@ +# Formulários do Django + +Por último, queremos uma forma legal de adicionar e editar as postagens do nosso blog. A `ferramenta de administração` do Django é legal, mas é um pouco difícil de personalizar e de deixar mais bonita. Com `formulários`, temos poder absoluto sobre nossa interface - podemos fazer quase tudo que pudermos imaginar! + +Uma coisa legal do Django é que podemos tanto criar um formulário do zero, como criar um `ModelForm` que salva o resultado do formulário em um determinado modelo. + +É exatamente isso que queremos fazer: criar um formulário para o nosso modelo `Post`. + +Assim como todas as partes importantes do Django, forms têm seu próprio arquivo: `forms.py`. + +Precisamos criar um arquivo com este nome dentro da pasta `blog`. + + blog + └── forms.py + + +Agora vamos abri-lo no editor de código e digitar o seguinte: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Primeiro, precisamos importar o módulo de formulários do Django (*from django import forms*) e, obviamente, o nosso modelo *Post* (*from .models import Post*). + +`PostForm`, como você já deve suspeitar, é o nome do nosso formulário. Precisamos dizer ao Django que esse form é um `ModelForm` (pro Django fazer algumas mágicas para nós) – `forms.ModelForm` é o responsável por essa parte. + +Em seguida, temos a `class Meta` em que dizemos ao Django qual modelo deverá ser usado para criar este formulário (`model = Post`). + +Por fim, podemos dizer quais campos devem entrar no nosso formulário. Neste cenário, queremos que apenas o `title` e o `text` sejam expostos -- `author` deve ser a pessoa que está logada no sistema (nesse caso, você!) e `created_date` deve ser configurado automaticamente quando criamos um post (no código), correto? + +E é isso! Tudo o que precisamos fazer agora é usar o formulário em uma *view* e mostrá-lo em um template. + +Novamente, criaremos um link para a página, uma URL, uma view e um template. + +## Link para a página com o formulário + +É hora de abrir *blog/templates/blog/base.html*. Nós iremos adicionar um link em *div* nomeado *page-header*: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Note que queremos chamar nossa nova view de `post_new`. A classe `"glyphicon glyphicon-plus"` é fornecida pelo tema (bootstrap) que estamos usando, e nos mostrará um sinal de mais. + +Depois de adicionar essa linha, o seu HTML vai ficar assim: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Depois de salvar e recarregar a página *http://127.0.0.1:8000* você verá um erro familiar `NoReverseMatch` certo? É isso! + +## URL + +Vamos abrir o arquivo *blog/urls.py* e escrever: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +O código final deve se parecer com isso: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Após recarregar a página, veremos um `AttributeError` por que não temos a view `post_new` implementada. Vamos adicioná-la agora. + +## View post_new + +Hora de abrir o arquivo *blog/views.py* e adicionar o seguinte às linhas *from*: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +E então a nossa *view*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Para criar um novo formulario `Post`, devemos chamar `PostForm()` e passá-lo para o template. Voltaremos a esta *view* depois, mas por enquanto, vamos criar um template para o formulário. + +## Template + +Precisamos criar um arquivo *post_edit.html* na pasta *blog/templates/blog*. Para fazer o formulário funcionar, precisamos de várias coisas: + +* Temos que exibir o formulário. Podemos fazer isso com (por exemplo) {% raw %}`{{ form.as_p }}`{% endraw %}. +* A linha acima precisa estar dentro de uma tag HTML form: `...`. +* Precisamos de um botão `Salvar`. Fazemos isso com um botão HTML: ``. +* E finalmente, depois de abrir a tag `
`, precisamos adicionar {% raw %}`{% csrf_token %}`{% endraw %}. Isso é muito importante, pois é isso que torna o nosso formulário seguro! Se você esquecer esta parte, o Django vai reclamar quando você tentar salvar o formulário: + +![CSFR Página proibida](images/csrf2.png) + +Legal, então vamos ver como ficou o HTML `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 }} + +
+{% endblock %} +``` + +Hora de atualizar! Uhuu! Seu formulário apareceu! + +![Novo formulário](images/new_form2.png) + +Mas espere um minuto! O que vai acontecer quando você digitar alguma coisa nos campos `title` e `text` e tentar salvar? + +Nada! Estamos novamente na mesma página e nosso texto sumiu... e nenhum post foi adicionado. Então o que deu errado? + +A resposta é: nada. Precisamos trabalhar um pouco mais na nossa *view*. + +## Salvando o formulário + +Abra *blog/views.py* no editor de código mais uma vez. No momento, tudo que temos na view *post_new* é: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Quando enviamos o formulário, somos trazidas de volta à mesma view, mas desta vez temos mais alguns dados no `request`, especificamente em `request.POST` (o nome não tem nada a ver com "post" de blog; tem a ver com o fato que estamos "postando" dados). Lembra que no arquivo HTML, nossa definição de `form` incluiu a variável `method="POST"`? Todos os campos vindos do "form" estarão disponíveis agora em `request.POST`. Não renomeie `POST` para nada diferente disso (o único outro valor válido para `method` é `GET`, mas não temos tempo para explicar a diferença). + +Então em nossa *view* temos duas situações diferentes com as quais lidar: primeiro, quando acessamos a página pela primeira vez e queremos um formulário em branco e segundo, quando voltamos para a *view* com todos os dados do formulário que acabamos de digitar. Desse modo, precisamos adicionar uma condição (usaremos `if` para isso): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +É hora de preencher os pontos `[...]`. Se `method` é `POST`, queremos construir o `PostForm` com dados do formulário, certo? Faremos assim: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +O próximo passo é checar se o formulário está correto (todos os campos requeridos estão prontos e valores incorretos não serão salvos). Fazemos isso com `form.is_valid()`. + +Verificamos se o formulário é válido e se estiver tudo certo, podemos salvá-lo! + +{% 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() +``` + +Basicamente, temos duas coisas aqui: salvamos o formulário com `form.save` e adicionamos um autor (já que houve um campo `author` em `PostForm`, e este campo é obrigatório). `commit=False` significa que não queremos salvar o modelo de `Post` ainda - queremos adicionar o autor primeiro. Na maioria das vezes você irá usar `form.save()`, sem `commit=False`, mas neste caso, precisamos fazer isso. `post.save()` vai preservar as alterações (adicionando o autor) e é criado um novo post no blog! + +Finalmente, seria fantástico se pudéssemos ir à página `post_detail`, direto para o nosso recém-criado post no blog, né? Para fazer isso, precisaremos de mais uma importação: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Adicione isso logo no início do seu arquivo. Agora podemos dizer: "vá para a página `post_detail` para o post recém-criado": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` é o nome da visualização (view) à qual queremos ir. Lembra que essa *view* exige uma variável `pk`? Para passar isso para as `views`, usamos `pk=post.pk`, em que post é o recém-criado post do blog! + +Ok, nós falamos muito, e agora queremos ver a cara da *view* completa, né? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Vamos ver se funciona. Vá para a página http://127.0.0.1:8000/post/new/, adicione um `title` e o `text`, salve... e pronto! O novo post do blog é adicionado e somos redirecionadas à página de `post_detail`! + +Você deve ter percebido que estamos estabelecendo a data de publicação antes de salvar o post. Mais tarde, vamos introduzir um botão de *Publicar* em **Django Girls Tutorial: Extensões**. + +Isso é incrível! + +> Como recentemente usamos a interface de administração do Django, o sistema entende que estamos logadas. Existem algumas situações que poderiam nos desligar do sistema (fechar o navegador, reiniciar banco de dados etc.). Se ao criar um post você receber erros que se referem à ausência de um usuário logado, vá até a página de admin http://127.0.0.1:8000/admin e faça login novamente. Isso vai resolver o problema temporariamente. Há um ajuste permanente esperando por você em **lição de casa: adicionar segurança ao seu site!**, um capítulo posterior ao tutorial principal. + +![Erro de usuário logado](images/post_create_error.png) + +## Validação de formulários + +Agora, mostraremos como os fórmularios do Django são legais. O post do blog precisa ter os campos `title` e `text`. Em nosso modelo `Post` não dissemos (em oposição a `published_date`) que esses campos são opcionais, então o Django, por padrão, espera que sejam definidos. + +Tente salvar o formulário sem `title` e `text`. Adivinhe o que vai acontecer! + +![Validação de formulários](images/form_validation2.png) + +Django está confirmando que todos os campos de nosso formulário estão corretos. Não é incrível? + +## Editando o formulário + +Agora sabemos como adicionar um novo formulário. Mas e se quisermos editar um que já existe? É muito parecido com o que acabamos de fazer. Vamos criar algumas coisas importantes rapidinho. (Se você não entender alguma coisa, pergunte para a sua monitora ou veja os capítulos anteriores -- já cobrimos todas essas etapas anteriormente.) + +Abra *blog/templates/blog/post_detail.html* e adicione esta linha + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +agora, o template estará parecido com: + +{% 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 %} +``` + +Abra o arquivo *blog/urls.py* no editor de código e digite: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Vamos reutilizar o template `blog/templates/blog/post_edit.html`, então a última coisa que falta é uma *view*. + +Vamos abrir *blog/views.py* no editor de código e adicionar o seguinte ao final do arquivo: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Isso é quase igual à nossa view de `post_new`, né? Mas não inteiramente. Primeira coisa: passamos um parâmetro extra `pk` a partir da url. Em seguida, pegamos o modelo `Post` que queremos editar com `get_object_or_404 (Post, pk=pk)` e então, quando criamos um formulário, passamos este post como uma `instância` tanto quando salvamos o formulário… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +... como quando apenas abrimos um formulário para editar esse post: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Ok, vamos testar para ver se funciona! Vamos para a página `post_detail`. Deve haver um botão editar no canto superior direito: + +![Botão editar](images/edit_button2.png) + +Quando você clicar nesse botão, verá o formulário com a nossa postagem: + +![Editando o formulário](images/edit_form2.png) + +Sinta-se livre para mudar o título ou o texto e salvar as alterações! + +Parabéns! Sua aplicação está ficando cada vez mais completa! + +Se precisar de mais informações sobre formulários do Django, leia a documentação: https://docs.djangoproject.com/en/2.0/topics/forms/ + +## Segurança + +Poder criar novos posts apenas clicando em um link é ótimo! Mas nesse momento, qualquer um que visitar nosso site poderá criar um novo post, e você isso provavelmente não quer isso. Vamos fazer com que o botão apareça apenas para você e para mais ninguém. + +Em `blog/templates/blog/base.html`, procure nossa `div` `page-header` e a tag de link que você colocou mais cedo. Deve se parecer com: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Vamos incluir outra tag `{% if %}` que irá apresentar o link somente para os usuários que estiverem logados como admin. No momento, é apenas você! Mude a tag `` para que fique assim: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Este `{% if %}` fará com que o link seja enviado ao navegador se o usuário que requisitou a página estiver logado. Isso não protege o blog completamente da criação de um novo post, mas é um bom começo. Vamos falar mais sobre segurança nas próximas lições. + +Lembra do ícone Editar que acabamos de adicionar à nossa página de detalhes? Queremos fazer a mesma coisa com ele para que outras pessoas não possam editar as mensagens já existentes. + +Abra `blog/templates/blog/post_detail.html` e encontre esta linha: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Altere-a para: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Você provavelmente está logada, então se atualizar a página, não verá nada de diferente. Carregue a página em um navegador novo ou em uma janela anônima (chamada "InPrivate" no Windows Edge), e então você verá que o link não aparece, e o ícone também não! + +## Mais uma coisa: hora de implantar! + +Vamos ver se tudo isso funciona no PythonAnywhere. Hora de fazer outro deploy! + +* Primeiro, faça o commit do seu novo código e dê o comando push para colocá-lo no Github: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push + + +* Então, em um [console Bash do PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Lembre de substituir `` pelo seu subdomínio PythonAnywhere, sem os símbolos < e >.) + +* Finalmente, vá para a [página "Web"](https://www.pythonanywhere.com/web_app_setup/) (use o botão de menu no canto superior direito do console) e pressione **Recarregar**. Atualize seu blog https://subdominio.pythonanywhere.com para ver as mudanças. + +E deve ser isso! Parabéns :) \ No newline at end of file diff --git a/pt/django_forms/images/csrf2.png b/pt/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/pt/django_forms/images/csrf2.png differ diff --git a/pt/django_forms/images/drafts.png b/pt/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/pt/django_forms/images/drafts.png differ diff --git a/pt/django_forms/images/edit_button2.png b/pt/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/pt/django_forms/images/edit_button2.png differ diff --git a/pt/django_forms/images/edit_form2.png b/pt/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/pt/django_forms/images/edit_form2.png differ diff --git a/pt/django_forms/images/form_validation2.png b/pt/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/pt/django_forms/images/form_validation2.png differ diff --git a/pt/django_forms/images/new_form2.png b/pt/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/pt/django_forms/images/new_form2.png differ diff --git a/pt/django_forms/images/post_create_error.png b/pt/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/pt/django_forms/images/post_create_error.png differ diff --git a/pt/django_installation/README.md b/pt/django_installation/README.md new file mode 100755 index 00000000000..8c58074b145 --- /dev/null +++ b/pt/django_installation/README.md @@ -0,0 +1,7 @@ +# Instalação do Django + +> **Observação:** Se você está usando um Chromebook, pule este capítulo e certifique-se de seguir as instruções para [ Configuração do Chromebook](../chromebook_setup/README.md). +> +> **Observação:** Se você já seguiu o passo a passo da instalação, pode ignorar essa seção - vá direto para o próximo capítulo! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/pt/django_installation/instructions.md b/pt/django_installation/instructions.md new file mode 100644 index 00000000000..6fba8429b47 --- /dev/null +++ b/pt/django_installation/instructions.md @@ -0,0 +1,225 @@ +> Esta seção baseia-se em tutoriais da Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Parte deste capítulo é baseada em [tutorial django-marcador](http://django-marcador.keimlink.de/) licenciado sob Creative Commons Attribution-ShareAlike 4.0 International License. O tutorial do django-marcador é protegido por direitos autorais por Markus Zapke-Gründemann et al. + +## Ambiente virtual + +Antes de instalar o Django, vamos instalar uma ferramenta muito útil para ajudar a manter o ambiente de trabalho no nosso computador organizado. Você pode pular esse passo, mas ele é altamente recomendado. Começar com a melhor instalação possível poupará você de muito trabalho no futuro! + +Vamos criar um **ambiente virtual** (também chamado um *virtualenv*). O virtualenv isolará seu código Python/Django em um ambiente organizado por projetos. Isso significa que as alterações que você fizer em um website não afetarão os outros projetos que você estiver desenvolvendo ao mesmo tempo. Legal, né? + +Tudo o que você precisa fazer é encontrar o diretório em que você quer criar o `virtualenv`; seu diretório Home, por exemplo. No Windows, pode aparecer como `C:\Users\Name` (onde `Nome` é seu usuário de login). + +> ** Observação:** No Windows, certifique-se de que esse diretório não contém palavras acentuadas ou caracteres especias; se o seu usuário contém caracteres acentuados, use um diretório diferente, por exemplo: ` C:\djangogirls`. + +Para este tutorial, usaremos um novo diretório `djangogirls` no seu diretório home: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Vamos fazer um virtualenv chamado `meuenv`. O formato geral desse comando é: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Para criar um novo `virtualenv`, você deve abrir o terminal e executar `python -m venv myvenv`. Deve ficar assim: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Onde `myvenv` é o nome do seu `virtualenv`. Você pode usar qualquer outro nome, mas sempre use minúsculas e não use espaços, acentos ou caracteres especiais. Também é uma boa ideia manter o nome curto - você irá referenciá-lo muitas vezes! + + + + + +Podemos criar um `virtualenv` no Linux ou no macOS executando `python3 -m venv myvenv`. Deve ficar assim: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` é o nome do seu `virtualenv`. Você pode usar qualquer outro nome, mas use sempre letras minúsculas e não use espaços entre as palavras. Também é uma boa ideia manter o nome curto pois você vai escrevê-lo muitas vezes! + +> **Observação:** Em algumas versões do Debian/Ubuntu, você pode receber o seguinte erro: +> +> {% 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. +> +> +> Caso você receba esse erro, siga as instruções acima e instale o pacote `python3-venv`: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **Observação:** Em algumas versões do Debian/Ubuntu, iniciar o ambiente virtual com este comando gera o seguinte erro: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Para contornar esse problema, use o comando `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **Oservação:** Se você obtiver um erro como +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> no lugar do comando mostrado acima, execute esse: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## Trabalhando com o virtualenv + +O comando acima criará um diretório chamado `myvenv` (ou qualquer que seja o nome que você escolheu) que contém o nosso ambiente virtual (basicamente um conjunto de diretórios e arquivos). + + + +Inicie o seu ambiente virtual executando: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **Observação:** no Windows 10, você pode obter um erro no Windows PowerShell que diz `execution of scripts is disabled on this system`. Neste caso, abra uma outra janela do Windows PowerShell com a opção de "Executar como Administrador". Assim, execute o comando abaixo antes de iniciar o seu ambiente virtual: +> +> {% 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 +> + +> **NOTA:** Para usuários do editor popular Código VS, que vem com um terminal baseado em janelas, se você deseja manter-se com o terminal integrado, você pode executar o seguinte comando para ativar seu ambiente virtual: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> A vantagem é que você não precisa alternar entre janelas do editor e janelas de linha de comando + + + + + +Inicie o seu ambiente virtual executando: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Lembre-se de substituir `myvenv` pelo nome que você escolheu para o `virtualenv`! + +> **Observação:** às vezes `source` pode não estar disponível. Nesses casos, tente fazer isso: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Você vai saber que tem um `virtualenv` funcionando quando vir que a linha de comando no seu console tem o prefixo `(myvenv)`. + +Ao trabalhar em de um ambiente virtual, o comando `python` irá automaticamente se referir à versão correta para que você possa digitar `python` em vez de `python3`. + +Pronto, já temos todas as dependências importantes no lugar. Finalmente podemos instalar o Django! + +## Instalando o Django + +Agora que você tem seu `virtualenv` ativo, pode instalar o Django. + +Antes de fazer isto, devemos garantir que temos instalada a última versão do `pip`, que é o software que usamos para instalar o Django: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Instalando pacotes com requisitos + +O arquivo "requirements.txt" guarda as depenências que serão instaladas utilizando o `pip install`: + +Primeiro, crie um arquivo `requirements.txt` dentro da sua pasta `djangogirls/` usando o editor de código que você instalou mais cedo. Para fazer isso, abra um novo arquivo no editor e salve-o como `requirements.txt` na pasta `djangogirls`. O seu diretório vai parecer com isso: + + djangogirls + └───requirements.txt + + +E adicione o seguinte texto ao arquivo `djangogirls/requirements.txt`: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Agora, execute `pip install -r requirements.txt` para instalar o 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Se você receber um erro ao chamar o pip na plataforma Windows, verifique se o caminho do projeto contém espaços, acentos ou caracteres especiais (exemplo, `C:\Users\User Name\djangogirls`). Se sim, considere movê-lo para outro lugar sem espaços, acentos ou caracteres especiais (sugestão: `C:\djangogirls`). Crie um novo virtualenv no diretório recém-criado, exclua o mais velho e tente novamente executar o comando acima. (Mover o diretório de virtualenv não vai funcionar pois o virtualenv usa caminhos absolutos.) + + + + + +> Sua linha de comando pode congelar depois de você tentar instalar o Django. Neste caso, ao invés do comando acima, use: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Se você receber um erro ao chamar pip no Ubuntu 12.04, por favor execute `python -m pip install -U --force-reinstal pip` para corrigir a instalação de pip no virtualenv. + + + +É isto! Você agora (finalmente) está pronta para criar uma aplicação Django! \ No newline at end of file diff --git a/pt/django_models/README.md b/pt/django_models/README.md new file mode 100755 index 00000000000..92472447de2 --- /dev/null +++ b/pt/django_models/README.md @@ -0,0 +1,199 @@ +# Modelos do Django + +Queremos criar algo que armazene todos os posts em nosso blog. Mas para fazer isto, temos que falar um pouco sobre `objects`. + +## Objetos + +Existe um conceito em programação chamado `programação orientada a objetos`. A ideia é que ao invés de escrever tudo como uma sequência entediante de instruções de programação, possamos modelar as coisas e definir como elas interagem umas com as outras. + +Então o que é um objeto? É uma coleção de propriedades e ações. Isto pode parecer estranho, mas vamos mostrar um exemplo. + +Se quisermos modelar um gato, podemos criar um objeto `Gato` que possui propriedades como `cor`, `idade`, `humor` (como bom, mal ou sonolento ;)), e `dono` (que seria atribuído a um objeto de `Pessoa` – ou talvez, no caso de um gato de rua, essa propriedade seja vazia). + +`Gato` também realiza algumas ações: `ronronar`, `arranhar` ou `alimentar`-se (em que podemos dar ao gato alguma `ComidaDeGato`, que poderia ser um objeto separado com propriedades como `sabor`). + + Gato + -------- + cor + idade + temperamento + dono + ronronar() + arranhar() + alimentar(comida_de_gato) + + + ComidaDeGato + ------------ + sabor + + +A ideia básica é descrever coisas reais em código a partir de suas propriedades (chamadas de `atributos`) e ações (chamadas de `métodos`). + +Como vamos modelar as postagens do blog, então? Queremos construir um blog, certo? + +Para isto, precisamos responder as questões: O que é um post de blog? Que propriedades (atributos) ele deve ter? + +Bem, com certeza uma postagem precisa de um texto com seu conteúdo e um título, certo? Também seria legal saber quem a escreveu – então precisamos de um autor. Finalmente, queremos saber quando a postagem foi criada e publicada. Para ficar chique, vamos fazer em inglês. + + Post + -------- + title + text + author + created_date + published_date + + +Que tipo de ações podem ser feitas com uma postagem? Seria legal ter um `método` que publique a postagem, não é mesmo? + +Então, nós precisaremos de um método para publicar (`publish`). + +Como já sabemos o que queremos alcançar, podemos começar a modelar em Django! + +## Modelos do Django + +Sabendo o que um objeto é, criamos um modelo no Django para a postagem do blog. + +Um modelo no Django é um tipo especial de objeto -- ele é salvo em um `banco de dados`. Um banco de dados é uma coleção de dados. Ele é um local em que você vai salvar dados sobre usuários, suas postagens, etc. Usaremos um banco de dados chamado SQLite para armazenar as nossas informações. Este é o banco de dados padrão do Django -- e ele será suficiente neste primeiro momento. + +Você pode pensar em um modelo de banco de dados como uma planilha com colunas (campos) e linhas (dados). + +### Criando uma aplicação + +Para manter tudo arrumado, vamos criar uma aplicação separada dentro do nosso projeto. É muito bom ter tudo organizado desde o início. Para criar uma aplicação, precisamos executar o seguinte comando no prompt (a partir do diretório `djangogirls` onde está o arquivo `manage.py`): + +{% filename %}macOS and Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Você vai notar que um novo diretório `blog` foi criado e que ele contém vários arquivos. Algo como a lista abaixo: + + djangogirls + ├── blog + │   ├── __init__.py + │   ├── admin.py + │   ├── apps.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + | ├── urls.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + └── requirements.txt + + +Depois de criar uma aplicação, também precisamos dizer ao Django que ele deve usá-la. Fazemos isso no arquivo `mysite/settings.py` -- abra-o no seu editor de código. Precisamos encontrar o `INSTALLED_APPS` e adicionar uma linha com `'blog',` logo acima do `]`. O resultado final ficará assim: + +{% 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', +] +``` + +### Criando um modelo de postagem para o nosso blog + +No arquivo `blog/models.py` definimos todos os objetos chamados `Modelos` -- este é um lugar em que vamos definir nossa postagem do blog. + +Vamos abrir `blog/models.py` no editor de código, apagar tudo dele e escrever o seguinte código: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Certifique-se de que usou dois caracteres de sublinhado (`_`) em cada lado de `str`. Esta convenção é utilizada frequentemente em Python e, muitas vezes, a chamamos de "dunder" (vem da expressão em inglês "double-underscore" - sublinhado duplo em português). + +Parece assustador, né? Mas não se preocupe, vamos explicar o que essas linhas significam! + +Todas as linhas começando com `from` ou `import` são linhas que adicionam pedaços de outros arquivos. Então ao invés de copiar e colar as mesmas coisas em cada arquivo, podemos incluir algumas partes com `from... import ...`. + +`class Post(models.Model):` - esta linha define o nosso modelo (é um `objeto`). + +- `class` é uma palavra-chave especial que indica que estamos definindo um objeto. +- `Post` é o nome do nosso modelo. Nós podemos dar um nome diferente (mas precisamos evitar caracteres especiais e espaços em branco). Sempre inicie o nome de uma classe com uma letra em maiúsculo. +- `models.Model` significa que o Post é um modelo de Django, então o Django sabe que ele deve ser salvo no banco de dados. + +Agora definiremos as propriedades comentadas acima: `title`, `text`, `created_date`, `published_date` e `author`. Para fazer isso, é necessário definir um tipo para cada campo (É um texto? Um número? Uma data? Uma relação com outro objeto, por exemplo, um usuário?) + +- `models.CharField` - é assim que definimos um texto com um número limitado de caracteres. +- `models.TextField` - este campo é para textos sem um limite fixo. Parece ideal para o conteúdo de um blog, né? +- `models.DateTimeField` - este é uma data e hora. +- `models.ForeignKey` - este é um link para outro modelo. + +Nós não explicaremos cada pedaço de código aqui pois isso levaria muito tempo. Você deve dar uma olhada na documentação do Django se quiser saber mais sobre campos de modelos e como definir outras coisas além das descritas acima (https://docs.djangoproject.com/en/2.0/ref/models/fields/#field-types). + +E `def publish(self):`? Esse é justamente o método `publish` de que falamos anteriormente. `def` significa que se trata de uma função/método e que `publish` é seu nome. Você pode mudar o nome do método, se quiser. A regra para nomes é sempre usar letras minúsculas e no lugar dos espaços em branco, usar o caractere sublinhado (_). Por exemplo, um método que calcula o preço médio poderia se chamar `calculate_average_price` (do inglês, calcular_preco_medio). + +Métodos muitas vezes retornam (`return`) algo. Um exemplo disto é o método `__str__`. Neste caso, quando chamarmos `__str__()`, obteremos um texto (**string**) com o título do Post. + +Lembre-se também de que tanto `def publish(self):` quanto `def __str__(self):` são endentados para dentro da classe. E porque Python é sensível a espaços em branco, precisamos endentar todos os nossos métodos para dentro da classe. Caso contrário, os métodos não pertencerão à classe e você poderá obter um comportamento inesperado. + +Se algo ainda não está claro sobre modelos, sinta-se livre para perguntar para sua monitora! Sabemos que é complicado, especialmente porque você está aprendendo o que são objetos e funções ao mesmo tempo. Mas esperamos que isto se pareça um pouco menos com mágica agora! + +### Criando tabelas para nossos modelos no banco de dados + +O último passo é adicionar nosso novo modelo ao banco de dados. Primeiramente, precisamos fazer com que o Django entenda que fizemos algumas alterações nos nossos modelos. (Acabamos de criar um modelo de Post!) Vá para o console e digite `python manage.py makemigrations blog`. Deve ficar assim: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Observação:** Lembre-se de salvar os arquivos que você editar. Caso contrário, o computador executará uma versão antiga que pode gerar mensagens de erro inesperadas. + +O Django preparou um arquivo de migração que precisamos aplicar ao nosso banco de dados. Digite `python manage.py migrate blog` e a saída deve ser: + +{% 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 + + +Uhuu! Nosso modelo Post já está no banco de dados! Seria legal vê-lo, né? Vá para o próximo capítulo para descobrir como nosso Post se parece! \ No newline at end of file diff --git a/pt/django_orm/README.md b/pt/django_orm/README.md new file mode 100755 index 00000000000..b6ba8d76d66 --- /dev/null +++ b/pt/django_orm/README.md @@ -0,0 +1,221 @@ +# QuerySets e ORM do Django + +Neste capítulo você vai aprender como o Django se conecta ao banco de dados e como ele armazena dados. Vamos nessa! + +## O que é um QuerySet? + +Um QuerySet (conjunto de busca) é, em essência, uma lista de objetos de um dado modelo. QuerySet permite que você leia os dados a partir de uma base de dados, filtre e ordene. + +É mais fácil aprender usando exemplos. Vamos lá? + +## O Shell do Django + +Abra o seu terminal (não o PythonAnywhere) e digite o seguinte comando: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +O resultado deve ser: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Agora você está no console interativo do Django. Ele é como o prompt do Python, só que com umas mágicas adicionais ;). Você pode usar todos os comandos do Python aqui também, é claro. + +### Todos os objetos + +Primeiro, vamos tentar mostrar todas as nossas postagens. Podemos fazer isso com o seguinte comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Oops! Um erro apareceu. Ele nos diz que não existe algo chamado Post. É verdade -- nós esquecemos de importá-lo antes! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Mas isso é simples: basta importar o modelo `Post` de dentro do `blog.models`. Vamos tentar mostrar todas as postagens novamente: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +É uma lista dos posts que criamos mais cedo! Nós criamos estes posts utilizando a interface do Django admin. No entanto, agora queremos criar novos posts utilizando Python. Como fazemos isso? + +### Criando um objeto + +É assim que se cria um objeto Post no banco de dados: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Mas aqui temos um ingrediente faltando: `me`. Precisamos passar uma instância do modelo `User` como autor. Como fazemos isso? + +Primeiro vamos importar o modelo User: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Quais usuários temos no nosso banco de dados? Experimente isso: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Este é o superusuário que criamos anteriormente! Vamos pegar uma instância do usuário agora (ajuste esta linha para usar seu próprio nome de usuário): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Como você pode ver, agora `obtém` um `Usuário` com um `nome de usuário` que é igual a 'ola'. Arrumado! + +Agora finalmente podemos criar nosso post: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Uhuu! Quer ver se funcionou? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +É isso aí, mais um post na lista! + +### Adicionando mais postagens + +Agora você pode se divertir um pouco e adicionar algumas postagens para ver como funciona. Adicione mais uns 2 ou 3 posts pelo Python e siga para a próxima parte. + +### Filtrando objetos + +Um recurso importante dos QuerySets é a possibilidade de filtrá-los. Digamos que queremos encontrar todos as postagens escritas pela usuária ola. Para isto, usamos `filter` ao invés de `all` em `Post.objects.all()`. Entre parênteses, indicamos quais condições precisam ser atendidas por um post para que ele entre no nosso queryset. No nosso caso, a condição é: `author` é igual a `me`. A maneira de escrever isso no Django é: `author=me`. Agora o nosso trecho de código ficará assim: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +E se quisermos ver todos os posts que contenham a palavra 'title' no campo `title`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Observação:** Existem dois caracteres de sublinhado (`_`) entre `title` e `contains`. O ORM do Django utiliza esta sintaxe para separar nomes de campo ("title") e operações ou filtros (como "contains"). Se você usar apenas um sublinhado, obterá um erro como "FieldError: Cannot resolve keyword title_contains". + +Você também pode obter uma lista de todos os posts publicados. Fazemos isso filtrando todos os posts com uma `published_date` definida no passado: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Infelizmente, o post que nós criamos pelo console do Python não está publicado ainda. Podemos mudar isso! Primeiro, busque a instância do post que queremos publicar: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Então vamos publicá-lo com o nosso método `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Agora, busque novamente a lista de posts publicados (aperte a seta para cima algumas vezes e pressione `enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Ordenando objetos + +Um QuerySet também nos permite ordenar a lista de objetos. Vamos tentar ordenar as postagens pelo campo `created_date`: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Também podemos inverter a ordem adicionando `-` no início: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Consultas Complexas com Encadeamento de Métodos + +Como você viu, alguns métodos em `Post.objects` retornam um QuerySet. Esses mesmos métodos podem, por sua vez, ser invocados num QuerySet, o que resultará num novo QuerySet. Dessa forma, você pode combinar seus efeitos **encadeando-los** juntos: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Isso é muito poderoso e nos permite criar consultas bastante complexas. + +Legal! Você já está pronta para a próxima parte! Para fechar o terminal, digite: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/pt/django_start_project/README.md b/pt/django_start_project/README.md new file mode 100755 index 00000000000..a78c3cad7b6 --- /dev/null +++ b/pt/django_start_project/README.md @@ -0,0 +1,205 @@ +# Seu primeiro projeto Django! + +> Parte deste capítulo é baseada nos tutoriais da Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Parte deste capítulo é baseado no [django-marcador tutorial](http://django-marcador.keimlink.de/) licenciado sobre Creative Commons Attribution-ShareAlike 4.0 International License. O tutorial do django-marcador é protegido por direitos autorais por Markus Zapke-Gründemann et al. + +Nós vamos criar um blog simples! + +O primeiro passo é iniciar um novo projeto Django. Basicamente, isso significa que devemos rodar alguns scripts providos pelo Django que vão criar um esqueleto de projeto Django para nós. O resultado é um conjunto de diretórios e arquivos que nós iremos utilizar e modificar mais tarde. + +Os nomes de alguns arquivos e diretórios são muito importantes para o Django. Você não deve renomear os arquivos que estamos prestes a criar. Mover para um lugar diferente também não é uma boa idéia. O Django precisa manter uma certa estrutura para conseguir encontrar algumas coisas importantes. + +> Lembre-se de rodar tudo no virtualenv. Se você não vê um prefixo `(myvenv)` em seu console, é necessário ativar o virtualenv. Nós explicamos como fazer isso no capítulo **Instalação do Django** na parte **Ambiente Virtual**. Digitar `myvenv\Scripts\activate` no Windows ou `source myvenv/bin/activate` no Mac OS / Linux fará isso para você. + + + +No MacOS ou no console do Linux, rode o comando abaixo (**não esqueça de adicionar o ponto `.` no final):

+ +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> O ponto `.` é crucial por que ele diz para o script instalar o Django no diretório atual (o ponto `.` é um atalho para referenciar este diretório). +> +> **Observação:** Quando digitar o comando acima, lembre-se de digitar apenas a parte que começa em `django-admin`. A parte `(myvenv) ~/djangogirls$` apresentada aqui é apenas um exemplo do que pode aparecer no seu terminal quando você digitar seus comandos. + + + + + +No Windows, rode o seguinte comando (**não esqueça de adicionar o ponto `.` no final!**): + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> O ponto `.` é crucial por que ele diz para o script instalar o Django no diretório atual (o ponto `.` é um atalho para referenciar este diretório). +> +> **Observação:** Quando digitar o comando acima, lembre-se de digitar apenas a parte que começa em `django-admin.exe`. A parte `(myvenv) C:\Users\Name\djangogirls>` apresentada aqui é apenas um exemplo do que pode aparecer no seu terminal quando você digitar seus comandos. + + + +`django-admin` é um script que criará os diretórios e arquivos para você. Agora, você deve ter uma estrutura de diretório parecida com isso: + + djangogirls + ├───manage.py + ├───mysite + │ settings.py + │ urls.py + │ wsgi.py + │ __init__.py + └───requirements.txt + + +> **Observação:** em sua estrutura de diretórios, você também verá o o diretório do virtualenv, `myvenv`, que criamos antes. + +`manage.py` é um script que ajuda com a gestão do site. Com ele, podemos iniciar um servidor de web no nosso computador sem instalar nada, entre outras coisas. + +O arquivo `settings.py` contém a configuração do seu site. + +Lembra de quando falamos sobre um carteiro verificando onde entregar uma carta? O arquivo `urls.py` contém uma lista dos padrões usados por `urlresolver`. + +Vamos ignorar os outros arquivos por enquanto pois não vamos modificá-los. Só precisamos lembrar de não excluí-los por acidentalmente! + +## Mudando as configurações + +Vamos fazer algumas alterações no `mysite/settings.py`. Abra o arquivo usando o editor de código que você instalou anteriormente. + +**Observação:** Lembre-se de que o `settings.py` é um arquivo comum, como qualquer outro. Você pode abri-lo de dentro do editor de código usando as ações de menu "Arquivo-> Abrir". Assim, você deve encontrá-lo na janela usual para selecionar arquivos e abri-lo. Ou então, é possível abrir o arquivo navegando até o diretório do djangogirls e abrindo o arquivo com o botão direito. Uma vez clicado, selecione o seu editor de código preferido da lista. Selecionar o editor apropriado é importante uma vez que você pode ter outros programas instalados que podem abrir o arquivo, mas não editá-lo. + +Para começar, seria bom ter a hora correta no nosso site. Para isto, você configurar o fuso horário correto de onde está. Se você estiver no Brasil, é bem provável que o fuso horário seja `America/Sao_Paulo` (aqui conhecido como horário de Brasília). Caso queira saber mais, vá para [Wikipedia's list of time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) e copie e cole o fuso horário correspondende à sua localização. + +Em `settings.py`, localize a linha que contém `TIME_ZONE` e modifique para escolher seu próprio fuso horário: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'America/Sao_Paulo' +``` + +Um código de idioma se refere à língua, por exemplo, `en` para inglês ou `pt` para português e o código do país, por exemplo, `br` para Brasil ou `pt` para a Portugal. Já que o inglês provavelmente não é sua língua nativa, você pode pode adicionar um novo código de país para deixar os botões padrão e notificações de Django em seu idioma. Assim, você teria por exemplo um botão "Cancel" traduzido para a língua da sua escolha (ex: "Cancelar" em português). O [Django vem com um monte de traduções já preparadas](https://docs.djangoproject.com/en/2.0/ref/settings/#language-code). + +Se você quiser um idioma diferente do inglês, especifique o código de idioma alterando a seguinte linha: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'pt-BR' +``` + +Também precisamos adicionar o caminho para os arquivos estáticos. (Discutiremos tudo sobre arquivos estáticos e CSS mais adiante no tutorial.) Vá até o *final* do arquivo e, logo abaixo da linha com `STATIC_URL`, adicione uma nova variável chamada `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Quando `DEBUG` for `True` e `ALLOWED_HOSTS` estiver vazia, o domínio do site será validado como `['localhost', '127.0.0.1', '[::1]']`. Isso não corresponderá ao nosso domínio no PythonAnywhere quando implantarmos a nossa aplicação, então vamos mudamos a seguinte configuração: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Observação:** Se você estiver utilizando um Chromebook, adicione esta linha ao final do arquivo settings.py: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Também inclua `.c9users.io` à lista de `ALLOWED_HOSTS` se você estiver utilizando o cloud9 + +## Configurando um banco de dados + +Existem vários software de banco de dados diferentes que podem armazenar dados para o seu site. Nós vamos usar o padrão do Django, o `sqlite3`. + +Isto já está configurado nesta parte do seu arquivo `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Para criar um banco de dados para o nosso blog, vamos executar o seguinte comando no console. Digite: `python manage.py migrate` (precisamos estar no diretório que contém o arquivo `manage.py` `djangogirls`). Se isso der certo, você deve ver algo assim: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +Pronto! Hora de iniciar o servidor web e ver se nosso site está funcionando! + +## Iniciando o servidor web + +Você precisa estar no diretório que contém o arquivo `manage.py` (o diretório `djangogirls`). No console, nós podemos iniciar o servidor web executando o `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Se você usa um Chromebook, execute este comando: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Se você estiver no Windows e o comando falhar com `UnicodeDecodeError`, use o comando alternativo: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Agora você precisa checar se o o seu site está funcionando. Abra o seu navegador (Firefox, Chrome, Safari, Internet Explorer ou qualquer outro que você usa) e coloque esse endereço: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Se você esta usando um Chromebook e o Cloud9, em vez disso clique no URL na janela "pop-up" que deve ter aparecido no canto superior direito da janela de comando onde o servidor está funcionando. A URL vai ser algo como: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +Parabéns! Você criou seu primeiro site e o executou usando um servidor web! Não é impressionante? + +![Instalação funcionou!](images/install_worked.png) + +Note que a janela de comando só pode rodar uma coisa de cada vez, e a janela de comando que você abriu anteriormente já está rodando o servidor. Enquanto o servidor web estiver executando e esperando por solicitações de entrada, o terminal vai aceitar o novo testo mas não executará novos comandos. + +> Nós revisamos como servidores web funcionam no capítulo **Como a Internet funciona**. + +Para digitar comandos adicionais enquanto o servidor está rodando, abra uma nova janela de terminal e ative seu ambiente virtual, para revisar as instruções de como abrir uma segunda janela de terminal, veja [Introdução à linha de comando](../intro_to_command_line/README.md). Para interromper o seu servidor, volte para a janela onde ele está rodando e pressione CTRL+C -- botões Control e C juntos (no Windows; tente Ctrl+Break se o primeiro não funcionar). + +Pronta para o próximo passo? Está na hora de criar conteúdo! \ No newline at end of file diff --git a/pt/django_start_project/images/install_worked.png b/pt/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/pt/django_start_project/images/install_worked.png differ diff --git a/pt/django_templates/README.md b/pt/django_templates/README.md new file mode 100755 index 00000000000..3fd9d73f18c --- /dev/null +++ b/pt/django_templates/README.md @@ -0,0 +1,108 @@ +# Templates do Django + +Hora de exibir dados! O Django já vem com algumas **tags de template** que são úteis pra isso. + +## O que são tags de template? + +Sabe, em HTML não podemos incluir código Python porque os browsers só entendem HTML. Sabemos que o HTML é bem estático, enquanto o Python é muito mais dinâmico. + +**Tags de template Django** nos permitem transformar código similar a Python em código HTML para que você possa construir sites dinâmicos mais rápido e mais facilmente. Legal! + +## Templates para lista de posts + +No capítulo anterior, fornecemos para o nosso template uma lista de postagens e a variável posts. Agora vamos exibi-las em HTML. + +Pra mostrar uma variável em um template do Django, usamos chaves duplas com o nome da variável, assim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Tente fazer isso no seu template `blog/templates/blog/post_list.html`. Abra-o no editor de código e substitua tudo desde o segundo `
` até o terceiro `
` com `{{ posts }}`. Salve o arquivo e atualize a página para ver o resultado: + +![Figura 13.1](images/step1.png) + +Como você pode ver, obtivemos apenas: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Isto significa que o Django entende essa variável como uma lista de objetos. Em **Introdução ao Python** aprendemos como exibir listas, lembra? Sim, com laços "for"! Em um template do Django você pode criá-los assim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Tente fazer isso no seu template. + +![Figura 13.2](images/step2.png) + +Funciona! Mas nós queremos que eles sejam exibidos como os posts estáticos que criamos anteriormente no capítulo de **Introdução a HTML**. Nós podemos misturar HTML com tags de template. O conteúdo da tag `body` ficará assim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Tudo o que você colocar entre `{% for %}` e `{% endfor %}` será repetido para cada objeto na lista. Atualize a página:{% endraw %} + +![Figura 13.3](images/step3.png) + +Você notou que dessa vez nós usamos uma notação um pouco diferente (`{{ post.title }}` ou `{{ post.text }}`)? Estamos acessando os dados em cada um dos campos que definimos no modelo do `Post`. Além disso, `|linebreaks` está passando o texto do post por um filtro, convertendo quebras de linha em parágrafos. + +## Mais uma coisa + +Seria bom ver se seu site ainda funciona na internet, né? Vamos tentar implantar a PythonAnywhere novamente. Aqui está um resumo dos passos… + +* Primeiro, envie seu código para o Github + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Em seguida, faça login em [PythonAnywhere](https://www.pythonanywhere.com/consoles/) e vá para seu **console de Bash** (ou comece um novo) e execute: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(Lembre-se de substituir `` pelo seu subdomínio PythonAnywhere, mas sem os colchetes angulares, ou seja, sem < e >). + +* Finalmente, pule para a aba ["Web" page](https://www.pythonanywhere.com/web_app_setup/) e aperte **Reload** em sua aplicação. (Para acessar outras páginas do PythonAnywhere a partir do console, utilize o botão do menu na parte superior direita). A sua atualização deve estar ativa em https://subdomain.pythonanywhere.com - confira pelo navegador! Tudo bem se as postagens em seu site PythonAnywhere não coincidirem com as postagens que aparecem no blog hospedado no seu servidor local. Os bancos de dados em seu computador local e no Python Anywhere não sincronizam com o resto de seus arquivos. + +Parabéns! Agora vá em frente e tente adicionar um novo post no seu administrador Django (lembre-se de adicionar published_data!). Assegure-se que você está no administrador Django do seu site pythonanywhere, https://subdomain.pythonanywhere.com/admin. E então, recarregue a página para verificar se o seu post é mostrado. + +Funciona? Estamos orgulhosas! Saia do seu computador um pouquinho - você merece um descanso. :3 + +![Figura 13.4](images/donut.png) \ No newline at end of file diff --git a/pt/django_templates/images/donut.png b/pt/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/pt/django_templates/images/donut.png differ diff --git a/pt/django_templates/images/step1.png b/pt/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/pt/django_templates/images/step1.png differ diff --git a/pt/django_templates/images/step2.png b/pt/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/pt/django_templates/images/step2.png differ diff --git a/pt/django_templates/images/step3.png b/pt/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/pt/django_templates/images/step3.png differ diff --git a/pt/django_urls/README.md b/pt/django_urls/README.md new file mode 100755 index 00000000000..39e13e6d146 --- /dev/null +++ b/pt/django_urls/README.md @@ -0,0 +1,103 @@ +# URLs + +Estamos prestes a construir nossa primeira página Web: uma página inicial para o seu blog! Mas primeiro, vamos aprender um pouco mais sobre as URLs do Django. + +## O que é uma URL? + +Uma URL é um endereço da web. Você pode ver uma URL toda vez que você visita um website - ela aparece na barra de endereços do seu navegador. (Sim! `127.0.0.1:8000` é uma URL! E `https://djangogirls.org` também é uma URL.) + +![URL](images/url.png) + +Cada página na Internet precisa de sua própria URL. Desta forma, sua aplicação sabe o que deve mostrar a um usuário que abre uma URL. Em Django, usamos algo chamado `URLconf` (configuração de URLs). URLconf é um conjunto de padrões que o Django vai usar para comparar com a URL recebida para encontrar a resposta correta. + +## Como funcionam as URLs em Django? + +Abra o arquivo `mysite/urls.py` no seu editor de código preferido e veja o que aparece: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Como você pode ver, o Django já colocou alguma coisa aqui para nós. + +Linhas entre aspas triplas (`'''` ou `"""`) são chamadas de docstrings -- você pode escrevê-las no topo de um arquivo, classe ou método para descrever o que ele faz. Elas não serão executadas pelo Python. + +A URL do admin, que você visitou no capítulo anterior, já está aqui: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Isso significa que para cada URL que começa com `admin/`, o Django irá encontrar uma *view* correspondente. Neste caso nós estamos incluindo várias URLs de admin de uma vez a partir de uma lista criada pelo próprio Django em <0>admin.site.urls. Desta forma, não temos que repetir todas URLs no nosso modesto arquivo -- é mais legível e mais limpo. + +## Sua primeira URL no Django! + +É hora de criar nossa primeira URL! Queremos que http://127.0.0.1:8000 / seja a página inicial do nosso blog e exiba uma lista de posts. + +Também queremos manter o arquivo de `mysite/urls.py` limpo, e portanto importaremos as URLS da nossa aplicação `blog` no arquivo principal `mysite/urls.py`. + +Vá em frente, adicione uma linha que importará `blog.urls` Você também irá precisar alterar a linha `from django.urls...` porque nós estamos utilizando a função `include` aqui, então você precisará adicionar aquele import para a linha. + +O seu arquivo `mysite/urls.py` deve agora se parecer com isto: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +O Django agora irá redirecionar tudo o que entra em 'http://127.0.0.1:8000 /'para `blog.urls` e procurar por novas instruções lá. + +## blog.urls + +Crie um novo arquivo vazio chamado `urls.py` no diretório `blog`. É fácil! Basta adicionar essas duas linhas: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Aqui, estamos importando do Django a função `url` e todas as nossas `views` do aplicativo `blog`. (Não temos nenhuma ainda, mas chegaremos a isso em um minuto!) + +Depois disso podemos adicionar nosso primeiro padrão de URLs: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Como você pode ver, estamos agora atribuindo uma `view` chamada `post_list` à URL raiz. Este padrão de URL corresponde a uma sequência de caracteres vazia, e o resolvedor de URLs do Django irá ignorar o nome de domínio (ou seja, http://127.0.0.1:8000 /) que antecede o caminho completo da URL. Este padrão dirá ao Django que `views.post_list` é o lugar correto aonde ir se alguém entra em seu site pelo endereço 'http://127.0.0.1:8000 /'. + +A última parte, `name='post_list'`, é o nome da URL que será usado para identificar a view. Pode ser o mesmo nome da view, mas também pode ser algo completamente diferente. Nós vamos usar URLs nomeadas mais à frente, então é importante nomearmos agora todas as URLs de nossa aplicação. Também devemos fazer com que os nomes das URLs sejam únicos e fáceis de lembrar. + +Se você tentar visitar http://127.0.0.1:8000 / agora, vai encontrar alguma mensagem do tipo 'página web não disponível'. Isso ocorre porque o servidor (lembre-se de digitar `runserver`?) não está mais funcionando. Dê uma olhada na sua janela de console do servidor para descobrir o porquê. + +![Erro](images/error1.png) + +Seu console está mostrando um erro, mas não se preocupe -- este erro é bastante útil: ele está dizendo que não existe nenhum atributo **post_list** no módulo de views. Esse é o nome da *view* que Django está tentando encontrar e usar, mas ainda não a criamos. Por enquanto, seu `/admin/` também não funcionará. Mas não se preocupe, nós chegaremos lá. Se você vir uma mensagem de erro diferente, tente reiniciar seu servidor da web. Entre na linha de comando, interrompa o servidor pressionando Ctrl+C (Control seguido da tecla C, juntas) e reinicie-o rodando `python manage.py runserver`. + +> Se você quer saber mais sobre a configuração de URLs no Django, veja a documentação oficial: https://docs.djangoproject.com/en/2.0/topics/http/urls/ \ No newline at end of file diff --git a/pt/django_urls/images/error1.png b/pt/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/pt/django_urls/images/error1.png differ diff --git a/pt/django_urls/images/url.png b/pt/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/pt/django_urls/images/url.png differ diff --git a/pt/django_views/README.md b/pt/django_views/README.md new file mode 100755 index 00000000000..c5ef7b5f467 --- /dev/null +++ b/pt/django_views/README.md @@ -0,0 +1,44 @@ +# Django views -- hora de criar! + +É hora de resolver o bug que criamos no capítulo anterior! :) + +Uma *view* é o lugar onde nós colocamos a "lógica" da nossa aplicação. Ela vai extrair informações do `model` que você criou e entregá-las a um `template`. Nós vamos criar um template no próximo capítulo. Views são apenas funções Python um pouco mais complicadas do que aquelas que criamos no capítulo **Introdução ao Python**. + +As views são colocadas no arquivo `views.py`. Nós vamos adicionar nossas *views* ao arquivo `blog/views.py`. + +## blog/views.py + +OK, vamos abrir o arquivo e ver o que tem nele: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Ainda não tem muita coisa aqui. + +Lembre-se de que as linhas começando com `#` são comentários -- isto significa que elas não serão executadas pelo Python. + +Vamos criar uma *view* (como o comentário em inglês acima sugere). Vamos criar uma view simples agora: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Como você pode ver, nós criamos uma função (`def`) chamada `post_list` que leva a `solicitação` e irá `retornar` o valor que recebe ao chamar outra função `render` que irá renderizar (montar) nosso modelo `blog/post_list.html`. + +Salve o arquivo e abra a página http://127.0.0.1:8000/ para ver o que acontece. + +Outro erro! Veja o que está acontecendo agora: + +![Erro](images/error.png) + +O erro mostra que o servidor pelo menos está sendo executado, mas ainda não parece certo, né? Não se preocupe, é apenas uma página de erro: nada a temer! Como as mensagens de erro no console, estas também são muito úteis. Você pode ler *TemplateDoesNotExist*, que significa "template não existe", em inglês. Vamos corrigir este bug e criar um modelo no próximo capítulo! + +> Aprenda mais sobre as views do Django lendo a documentação oficial: https://docs.djangoproject.com/en/2.0/topics/http/views/ \ No newline at end of file diff --git a/pt/django_views/images/error.png b/pt/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/pt/django_views/images/error.png differ diff --git a/pt/domain/README.md b/pt/domain/README.md new file mode 100755 index 00000000000..23248d0a4f4 --- /dev/null +++ b/pt/domain/README.md @@ -0,0 +1,76 @@ +# Domínio + +PythonAnywhere te deu um domínio gratuito, mas talvez você não queira ter ". pythonanywhere.com" no final da URL do seu blog. Talvez você queira que o endereço seja algo como "www.fotos-infinitas-de-gatinhos.org" ou "www.pecas-de-maquinas-a-vapor-em-3D.com" ou "www.colecionando-antiguidades.com" ou "www.unicornioz-mutantez.net" ou qualquer outro nome que você quiser. + +Aqui vamos falar um pouco sobre onde obter um domínio e como ligá-lo a seu aplicativo da web em PythonAnywhere. No entanto, você deve saber que a maioria dos domínios custam dinheiro e PythonAnywere também cobra uma taxa mensal para usar seu próprio nome de domínio -- não é muito dinheiro, no total, mas isso provavelmente é algo que você só quer fazer se estiver realmente comprometida! + +## Onde registrar um domínio? + +Um domínio normal custa mais ou menos 15 dólares por ano. Existem domínios mais caros e mais baratos dependendo do provedor. Existem uma série de empresas das quais você pode comprar um domínio: uma simples [pesquisa no google][1] pode listar uma série delas. + + [1]: https://www.google.com/search?q=register%20domain + +O nosso favorito é o [I want my name][2] (eu quero meu nome). Eles anunciam seu serviço como "gestão de domínio indolor", e ele, realmente, é indolor. + + [2]: https://iwantmyname.com/ + +Você também pode obter domínios gratuitamente. [dot.tk][3] é um lugar para obter um, mas você deve estar ciente de que domínios grátis às vezes parecem muito baratos -- se seu site vai ser para uma profissional de negócios, você deve pensar em pagar por um domínio "correto" que termina em `.com`. + + [3]: http://www.dot.tk + +## Como apontar seu domínio no PythonAnywhere + +Se você passou por *iwantmyname.com*, clique em `domínios` no menu e escolha seu domínio recém-adquirido. Em seguida, localize e clique no link `manage DNS records`: + +![][4] + + [4]: images/4.png + +Agora você precisa localizar este formulário: + +![][5] + + [5]: images/5.png + +E preencher com os seguintes detalhes:-Hostname: www - tipo: CNAME - valor: seu domínio de PythonAnywhere (por exemplo djangogirls.pythonanywhere.com) - TTL: 60 + +![][6] + + [6]: images/6.png + +Clique no botão Adicionar e salve as mudanças na parte de baixo. + +> **Nota** Se você usou um provedor de domínio diferente, o UI exata para encontrar o seu DNS / configurações de CNAME será diferente, mas seu objetivo é o mesmo: para configurar um CNAME que aponta seu novo domínio no `yourusername.pythonanywhere.com`. + +Pode levar alguns minutos para o seu domínio funcionar, então seja paciente! + +## Configure o domínio através de um web app na PythonAnywhere. + +Você também precisa dizer para o PythonAnywhere que você deseja usar o seu domínio personalizado. + +Vá para a [página PythonAnywhere contas][7] e atualize sua conta. A opção mais barata (um plano de "Hacker") é bom para começar, você pode sempre atualizá-lo mais tarde quando você ficar super famosa e tiver milhões de acessos. + + [7]: https://www.pythonanywhere.com/account/ + +Em seguida, vá na [Web tab][8] e anote algumas coisas: + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +* Copie o **caminho para seu virtualenv** e coloque em um lugar seguro +* Clique para seu **arquivo de configuração do wsgi**, copie o conteúdo e cole em um lugar seguro + +Em seguida, **exclua** seu antigo web app. Não se preocupe, isso não vai excluir nada do seu código, ele apenas irá se desligar do domínio *yourusername.pythonanywhere.com*. Em seguida, crie um novo aplicativo web e siga estes passos: + +* Digite seu nome de domínio novo +* Escolha "manual configuration" +* Escolha Python 3.5 +* E é isso! + +Quando você tiver voltado para a web tab: + +* Colar o caminho virtualenv que você salvou antes +* Clicar no arquivo de configuração wsgi e colar o conteúdo do seu arquivo de configuração antigo + +Clique em reload web app e você deve encontrar seu site live no novo domínio! + +Se você tiver qualquer problema, clique no link "Enviar feedback" no site PythonAnywhere, e um dos seus administradores amigáveis vai estar lá para ajudá-la. diff --git a/pt/domain/images/1.png b/pt/domain/images/1.png new file mode 100644 index 00000000000..2564b209b25 Binary files /dev/null and b/pt/domain/images/1.png differ diff --git a/pt/domain/images/2.png b/pt/domain/images/2.png new file mode 100644 index 00000000000..b97fe785c46 Binary files /dev/null and b/pt/domain/images/2.png differ diff --git a/pt/domain/images/3.png b/pt/domain/images/3.png new file mode 100644 index 00000000000..8c5030b918a Binary files /dev/null and b/pt/domain/images/3.png differ diff --git a/pt/domain/images/4.png b/pt/domain/images/4.png new file mode 100644 index 00000000000..443f243c0d4 Binary files /dev/null and b/pt/domain/images/4.png differ diff --git a/pt/domain/images/5.png b/pt/domain/images/5.png new file mode 100644 index 00000000000..571f92877ae Binary files /dev/null and b/pt/domain/images/5.png differ diff --git a/pt/domain/images/6.png b/pt/domain/images/6.png new file mode 100644 index 00000000000..1a20ea5beb3 Binary files /dev/null and b/pt/domain/images/6.png differ diff --git a/pt/dynamic_data_in_templates/README.md b/pt/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..6ae56ba438d --- /dev/null +++ b/pt/dynamic_data_in_templates/README.md @@ -0,0 +1,83 @@ +# Dados dinâmicos em templates + +Até o momento, temos diferentes peças: o modelo `Post` está definido em `models.py`, temos `post_list` em `views.py` e o template adicionado. Mas como faremos de fato para que as postagens apareçam no nosso template em HTML? Porque é isso que nós queremos: pegar algum conteúdo (modelos salvos no banco de dados) e exibi-lo de uma maneira bacana no nosso template, certo? + +E isso é exatamente o que as *views* devem fazer: conectar modelos e templates. Vamos precisar pegar os modelos que queremos exibir e passá-los para o template na nossa lista de postagens `post_list` *view*. Em uma *view*, nós decidimos o que (qual modelo) será exibido em um template. + +Tudo bem, e como vamos fazer isso? + +Precisamos abrir o nosso `blog/views.py`. Até agora, a *view* `post_list` se parece com isso: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Lembra de quando falamos sobre a inclusão de código que foi escrito em arquivos diferentes? Agora é o momento em que precisamos que incluir o modelo que temos escrito em `models.py`. Vamos adicionar a linha `from .models import Post` assim: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +O ponto antes de `models` significa *diretório atual* ou *aplicativo atual*. Tanto `views.py` como `models.py` estão no mesmo diretório. Isto significa que podemos usar `.` e o nome do arquivo (sem `py`). Em seguida, importamos o nome do modelo (`Post`). + +E o que vem agora? Para pegar os posts reais do modelo `Post`, precisamos de uma coisa chamada `QuerySet`. + +## QuerySet + +Você já deve estar familiarizada com o modo que os QuerySets funcionam. Nós conversamos sobre isso no [capítulo QuerySets e ORM do Django](../django_orm/README.md).

+ +Agora queremos classificar as postagens publicadas por `published_date`, certo? Nós já fizemos isso no capítulo sobre QuerySets! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Agora vamos colocar esse pedaço de código dentro do arquivo `blog.views.py` adicionando-o à função `def post_list(request)`. Não esqueça de adicionar `from django.utils import timezone` antes! + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +A última parte que falta é passar a QuerySet `posts` para o template. Não se preocupe com isso agora, vamos falar sobre como exibi-lo em um próximo capítulo. + +Note que criamos uma *variável* para nosso o QuerySet: `posts`. Esse é o nome do nosso QuerySet. De agora em diante, podemos nos referir a ele por este nome. + +Na função `render` já temos um parâmetro `request` (tudo o que recebemos do usuário através da Internet) e um arquivo de template (`'blog/post_list.html'`). O último parâmetro -- `{}` -- é um lugar em que podemos acrescentar algumas coisas para o template usar. Precisamos nomear os parâmetros (continuaremos com `'posts'`, por enquanto). :) Deve ficar assim: `{'posts': posts}`. Note que a parte antes de `:` é uma string; por isso você precisa colocá-la entre aspas: `"`. + +Agora, nosso arquivo `blog/views.py` deve ter essa cara: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Pronto! Hora de voltar para o nosso template e exibir essa QuerySet! + +Se quiser ler mais sobre QuerySets no Django, você deve dar uma olhada aqui: https://docs.djangoproject.com/en/2.0/ref/models/querysets/ \ No newline at end of file diff --git a/pt/extend_your_application/README.md b/pt/extend_your_application/README.md new file mode 100755 index 00000000000..dbfc325c305 --- /dev/null +++ b/pt/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Amplie sua aplicação + +Já concluímos todos os passos necessários para a criação do nosso site: sabemos como criar um modelo, uma url, uma view e um template. Também sabemos como deixá-lo bonitinho. + +Hora de praticar! + +A primeira coisa que precisamos em nosso blog é, obviamente, uma página para mostrar uma postagem, né? + +Já temos um modelo de `Post`, então não precisamos adicionar nada ao `models.py`. + +## Criando um link para os detalhes de um post + +Vamos começar com a adição de um link dentro do arquivo `blog/templates/blog/post_list.html`. Neste momento ele deve se parecer com: Abra-o no editor de código e, até agora, deve ficar assim:{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %} Queremos um link no título do post dentro da página de lista de posts apontando para a página de detalhes do post respectivo. Vamos mudar `

{{ post.title }}

` e adicionar um link para a página de detalhe:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Hora de explicar o misterioso `{% url 'post_detail' pk=post.pk %}`. Como você deve suspeitar, a notação `{% %}` significa que estamos usando as tags de template do Django. Dessa vez, usamos uma que cria uma URL para nós!{% endraw %} + +A parte `post_detail` significa que o Django espera uma URL no arquivo `blog/urls.py` com o nome definido como name='post_detail' + +E quanto ao `pk=post.pk`? `pk` é uma abreviação de "primary key" (do inglês chave primária), que é um identificador único de cada entrada em um banco de dados. Uma vez que não especificamos a chave primária em nosso modelo de `Post`, o Django cria uma para nós (que por padrão, é um número que incrementa sequencialmente a partir de 1, 2, 3, etc) e a adiciona como um campo chamado `pk` em cada um dos nossos posts. Acessamos a chave primária escrevendo `post.pk`, do mesmo modo que podemos acessar outros campos (`title`, `author`, etc.) no nosso objeto de `Post`! + +Agora, quando formos para: http://127.0.0.1:8000/, veremos um erro (como esperado, já que existe uma URL, mas não uma *view* para `post_detail`). Vai se parecer com isso: + +![erro NoReverseMatch](images/no_reverse_match2.png) + +## Criando uma URL para a página de detalhes de um post + +Vamos criar uma URL em `urls.py` para a nossa `post_detail` *view*! + +Queremos que a página de detalhes do nosso primeiro post seja exibida por essa **URL**: http://127.0.0.1:8000/post/1/ + +Vamos criar uma URL no arquivo `blog/urls.py` que aponta para uma *view* chamada `post_detail`, que vai nos mostrar o post completo. Abra o arquivo `blog/urls.py` no editor de código e adicione a linha `path('post//', views.post_detail, name='post_detail'),` para que o arquivo fique assim: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +A parte `post//` especifica um padrão de URL – vamos explicar: + +- `post/` significa apenas que a URL deve começar com a palavra **post** seguida por **/**. Até aqui, tudo bem. +- `` – essa parte é um pouco mais complicada. Ela nos diz que o Django espera um objeto do tipo inteiro e que vai transferi-lo para a view como uma variável chamada `pk`. +- `/` – por fim, precisamos adicionar uma **/** ao final da nossa URL. + +Isso significa que se você digitar `http://127.0.0.1:8000/post/5/` em seu navegador, o Django vai entender que você está procurando uma *view* chamada `post_detail` e vai transferir a informação de que `pk` é igual a `5` para essa *view*. + +Legal, adicionamos um novo padrão de URL para `blog/urls.py`! Vamos atualizar a página: http://127.0.0.1:8000 / Boom! O servidor parou de funcionar de novo. Dê um olhada no console -- como esperado, há ainda outro erro! + +![AttributeError](images/attribute_error2.png) + +Você se lembra qual é o próximo passo? Claro: adicionar uma view! + +## Adicionando a view de detalhes do post + +Desta vez, a nossa *view* recebe um parâmetro extra: `pk`. Nossa *view* precisa pegá-lo, certo? Então vamos definir nossa função como `def post_detail (request, pk):`. Precisamos usar exatamente o mesmo nome que especificamos em urls (`pk`). Omitir essa variável é incorreto e resultará em um erro! + +Agora, queremos receber apenas um post do blog. Para isso, podemos usar queries (buscas) como esta: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Mas este código tem um problema. Se não houver nenhum `Post` com a `chave primária` (`pk`) fornecida, teremos um erro horroroso! + +![erro DoesNotExist](images/does_not_exist2.png) + +Não queremos isso! Mas, claro, o Django vem com algo que vai lidar com isso para nós: `get_object_or_404`. Caso não haja nenhum `Post` com o `pk`, o Django exibirá uma página muito mais agradável que aquela mensagem de erro -- `Page Not Found 404` (página não encontrada). + +![Página não encontrada](images/404_2.png) + +A boa notícia é que você pode criar sua própria página de `Page not found` e torná-la tão bonita quanto quiser. Mas isso não é super importante agora, então vamos deixar pra lá. + +Hora de adicionar uma *view* ao nosso arquivo `views.py`! + +Em `blog/urls.py`, criamos uma regra de URL chamada `post_detail` que se refere a uma view chamada `views.post_detail`. Isto significa que o Django espera uma função chamada `post_detail` dentro de `blog/views.py`. + +Vamos abrir `blog/views.py` e adicionar o seguinte código perto das outras linhas `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +E no final do arquivo, vamos adicionar a nossa *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}) +``` + +É isso aí, está na hora de atualizar a página: http://127.0.0.1:8000/ + +![View da lista de posts](images/post_list2.png) + +Funcionou! Mas o que acontece quando você clica em um link no título de um post do blog? + +![erro TemplateDoesNotExist](images/template_does_not_exist2.png) + +Ah não! Outro erro! Mas nós já sabemos como lidar com isso, né? Precisamos adicionar um template! + +## Criando um template para os detalhes do post + +Vamos criar um arquivo em `blog/templates/blog` chamado `post_detail.html`. + +Ele vai ter essa cara: + +{% 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 %} +``` + +Mais uma vez estamos estendendo `base.html`. No bloco `content`, queremos exibir a data de publicação (published_date) do post (se houver), título e texto. Mas ainda temos algumas coisas importantes para discutir, certo? + +{% raw %}`{% if ... %} ... {% endif %}` é uma tag de template que podemos usar quando queremos conferir alguma coisa. (Lembra de `if ... else ...` do capítulo **Introdução ao Python**?). Neste cenário nós queremos conferir se a `published_date` de um post não está vazia.{% endraw %} + +Pronto, podemos atualizar nossa página e ver se aquele `Page not found` sumiu. + +![Página de detalhes da postagem](images/post_detail2.png) + +Uhuu! Funcionou! + +# Hora do Deploy! + +Seria bom ver se seu site ainda estará trabalhando no PythonAnywhere, né? Vamos tentar fazer a implantação novamente. + +{% 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 + + +Agora, em um [console Bash do PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Lembre-se de substituir `` com o nome do seu subdomínio PythonAnywhere, sem os colchetes angulares, ou seja, sem < e >). + +## Atualizando os arquivos estáticos no servidor + +Servidores como o PythonAnywhere tratam arquivos estáticos (como os arquivos CSS) de forma diferente dos arquivos em Python, por que assim podem otimizar para que eles carreguem mais rápido. Como resultado, sempre que alteramos nossos arquivos CSS, precisamos rodar um comando extra no servidor para dizer a ele que os atualize. O comando se chama `collectstatic`. + +Comece ativando seu virtualenv, se ele já não estiver ativo (para isso, o PythonAnywhere usa um comando chamado `workon` que é bem parecido com o comando `source myenv/bin/activate` que vosê usa no seu computador): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +O comando `manage.py collectstatic` é mais ou menos como `manage.py migrate`. Agora, fazemos algumas mudanças no nosso código e dizemos ao Django que as aplique (*apply*) à coleção de arquivos estáticos, ou ao banco de dados. + +Em qualquer caso, nós agora estamos prontos para saltar para a ["Web" page](https://www.pythonanywhere.com/web_app_setup/) (do botão menu à direita do console) e pressionar **Reload**, checando a página https://subdomain.pythonanywhere.com para ver o resultado. + +Deve estar pronto! Arrasou :) \ No newline at end of file diff --git a/pt/extend_your_application/images/404_2.png b/pt/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/pt/extend_your_application/images/404_2.png differ diff --git a/pt/extend_your_application/images/attribute_error2.png b/pt/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/pt/extend_your_application/images/attribute_error2.png differ diff --git a/pt/extend_your_application/images/does_not_exist2.png b/pt/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/pt/extend_your_application/images/does_not_exist2.png differ diff --git a/pt/extend_your_application/images/no_reverse_match2.png b/pt/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/pt/extend_your_application/images/no_reverse_match2.png differ diff --git a/pt/extend_your_application/images/post_detail2.png b/pt/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/pt/extend_your_application/images/post_detail2.png differ diff --git a/pt/extend_your_application/images/post_list2.png b/pt/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/pt/extend_your_application/images/post_list2.png differ diff --git a/pt/extend_your_application/images/template_does_not_exist2.png b/pt/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/pt/extend_your_application/images/template_does_not_exist2.png differ diff --git a/pt/how_the_internet_works/README.md b/pt/how_the_internet_works/README.md new file mode 100755 index 00000000000..4ef0d0a6203 --- /dev/null +++ b/pt/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Como a Internet funciona + +> Para leitoras em casa: este capítulo é abordado no vídeo [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Este capítulo é inspirado na palestra "Como a Internet funciona" de Jessica McKellar (http://web.mit.edu/jesstess/www/). + +Apostamos que você usa a Internet todos os dias. Mas você sabe realmente o que acontece quando digita um endereço como https://djangogirls.org em seu navegador e aperta `Enter`? + +A primeira coisa que você precisa entender é que um site é só um monte de arquivos salvos em um disco rígido. No entanto, há uma parte que é exclusiva para sites: ela inclui códigos de computador chamados HTML. + +Se você não estiver familiarizada com a programação, pode ser difícil compreender o HTML no começo, mas seus navegadores da web (como o Chrome, Safari, Firefox, etc) amam ele. Os navegadores da Web são projetados para entender esse código, seguir suas instruções e apresentar os arquivos de que um site é feito, exatamente como deve. + +Como qualquer arquivo, os arquivos HTML precisam ser armazenados num disco rígido. Para a internet, usamos poderosos computadores especiais chamados *servidores*. Eles não têm uma tela, um mouse ou um teclado, porque sua finalidade principal é armazenar dados e servi-los. É por isso que eles são chamados de *servidores* - eles *servem* dados a você. + +OK, mas você quer saber com o quê a internet se parece, certo? + +Fizemos um desenho para ajudar! Veja: + +![Figura 1.1](images/internet_1.png) + +Que bagunça, né? Na verdade, a internet é uma rede de máquinas conectadas (os *servidores* mencionados acima). São centenas de milhares de máquinas! Muitos, muitos quilômetros de cabos em todo o mundo! Para ver o quão complicada a internet é, você pode visitar um site (http://submarinecablemap.com/) que mostra o mapa com dos cabos submarinos. Aqui está um screenshot do site: + +![Figura 1.2](images/internet_3.png) + +Fascinante, né? Mas não é possível ter um fio ligando todas as máquinas que estão conectadas à internet. Logo, para alcançar uma máquina (por exemplo aquela onde https://djangogirls.org está salva), precisamos passar uma requisição por muitas máquinas diferentes. + +É algo assim: + +![Figura 1.3](images/internet_2.png) + +Imagine que quando digita http://djangogirls.org, você envia uma carta que diz: "Queridas Django Girls, eu desejo ver o site djangogirls.org. Enviem-no para mim, por favor!" + +Sua carta vai para a agência dos correios mais próxima de você. Então, ela vai para outra agência um pouco mais perto do destinatário e, em seguida, para outra e outra até ser entregue. A única coisa diferente é que se você enviar muitas cartas (*pacotes de dados*) para o mesmo lugar, elas podem passar por agências totalmente diferentes (*roteadores*). Isso depende de como elas são distribuídas em cada agência. + +![Figura 1.4](images/internet_4.png) + +Funciona assim - voê envia mensagens e espera alguma resposta. Ao invés de papel e caneta, você usa bytes de dados, mas a ideia é a mesma! + +Ao invés de endereços com o nome da rua, cidade, código postal e nome do país, na internet usamos endereços de IP. Primeiro seu computador pergunta pelo DNS (Domain Name System - Sistema de Nome de Domínio) para traduzir djangogirls.org para um endereço de IP. Isso funciona mais ou menos como as antigas listas telefônicas em que você podia procurar o número e endereço da pessoa que queria contactar. + +Quando você envia uma carta, ela precisa ter certas características para ser entregue corretamente: um endereço, um selo, etc. E você usa uma linguagem que o destinatário compreende, certo? O mesmo se aplica aos *pacotes de dados* que você envia para acessar um site. Nós usamos um protocolo chamado HTTP (Hypertext Transfer Protocol). + +Então, de forma simplificada, um site precisa ter um *servidor* (máquina) onde ele vive. Quando o *servidor* recebe uma *solicitação* de entrada (numa carta), ele envia em respota seu website (em outra carta). + +Este é um tutorial de Django, então você deve estar imaginando o que o Django faz. Quando envia uma resposta, nem sempre você quer mandar a mesma coisa para todo mundo. É muito melhor que as cartas sejam personalizadas, especialmente para a pessoa que acabou de nos escrever, né? O Django nos ajuda a criar essas cartas personalizadas. :) + +Chega de falar, é hora de criar! \ No newline at end of file diff --git a/pt/how_the_internet_works/images/internet_1.png b/pt/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/pt/how_the_internet_works/images/internet_1.png differ diff --git a/pt/how_the_internet_works/images/internet_2.png b/pt/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/pt/how_the_internet_works/images/internet_2.png differ diff --git a/pt/how_the_internet_works/images/internet_3.png b/pt/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/pt/how_the_internet_works/images/internet_3.png differ diff --git a/pt/how_the_internet_works/images/internet_4.png b/pt/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/pt/how_the_internet_works/images/internet_4.png differ diff --git a/pt/html/README.md b/pt/html/README.md new file mode 100755 index 00000000000..109028027ca --- /dev/null +++ b/pt/html/README.md @@ -0,0 +1,217 @@ +# Introdução ao HTML + +Você pode se perguntar: o que é um template? + +Template é um arquivo que nós podemos reutilizar para apresentar diferentes informações em um formato consistente – por exemplo, você pode usar um template para te ajudar a escrever uma carta, pois mesmo que cada carta contenha mensagens diferentes e possa estar endereçada a pessoas diferentes, elas compartilharão o mesmo formato. + +O formato do template do Django é descrito em uma linguagem chamada HTML (esse é o mesm HTML que mencionamos no primeiro capítulo -- **Como a Internet funciona**). + +## O que é HTML? + +HTML é um código interpretado pelo seu navegador - como Chrome, Firefox ou Safari - para exibir uma página web ao usuário. + +HTML significa "HyperText Markup Language". **HiperText** significa que é um tipo de texto que suporta hiperlinks entre páginas. **Marcação** nada mais é que marcar um documento com códigos que dizem para alguém (nesse caso, o navegador web) como a página deverá ser interpretada. Códigos em HTML são feitos com **tags**, cada uma começando com `<` e terminando com `>`. Estas tags representam **elementos de marcação**. + +## Seu primeiro template! + +Criar um template significa criar um arquivo de template. Tudo é um arquivo, certo? Provavelmente você já deve ter notado isso. + +Os templates são salvos no diretório `blog/templates`. Então, crie um diretório chamado `templates` dentro do diretório do seu blog. Em seguida, crie outro diretório chamado `blog` dentro do diretório templates: + + blog + └───templates + └───blog + + +(Você deve estar se perguntando porque nós precisamos de dois diretórios chamados `blog` - como você descobrirá mais para frente, essa é uma convenção que facilita a nossa vida quando as coisas começam a ficar mais complicadas.) + +E agora nós criamos o arquivo `post_list.html` (deixe-o em branco por enquanto) dentro do diretório `blog/templates/blog`. + +Veja como o nosso site está agora: http://127.0.0.1:8000/ + +> Se você ainda tem um erro `TemplateDoesNotExist`, tente reiniciar o seu servidor. Entre na linha de comando, interrompa o servidor pressionando Ctrl+C (Control seguido da tecla C, juntas) e reinicie-o rodando `python manage.py runserver`. + +![Figura 11.1](images/step1.png) + +Acabaram-se os erros! Uhuu :) Entretanto, nosso site não mostra nada a não ser uma página em branco. Isso acontece porque o nosso template está vazio. Precisamos consertar isso. + +Abra o novo arquivo no editor de código e adicione o seguinte: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Hi there!

+

It works!

+ + +``` + +Como está o nosso site agora? Visite a página descobrir: http://127.0.0.1:8000/ + +![Figura 11.2](images/step3.png) + +Funcionou! Bom trabalho :) + +* A tag mais básica, ``, estará sempre no começo de qualquer página da web, assim como, `` sempre estará no fim. Todo o conteúdo de um website se encontra entre a tag de início `` e a tag de fim `` +* `

` é a tag que inicia um parágrafos; `

` determina o fim de um parágrafo + +## "Head" e "body" + +Cada página HTML também é dividida em dois elementos: **head** (cabeçalho) e **body** (corpo). + +* **head** é um elemento que contém informações sobre o documento que não são mostradas na tela. + +* **body** é um elemento que contém tudo o que é exibido como parte de uma página da web. + +Nós usamos a tag `` para dizer ao navegador quais são as configurações da página. Por sua vez, a tag `` diz ao navegador qual é o conteúdo de fato da página. + +Por exemplo, você pode incluir o elemento título de uma página web dentro da tag ``. Veja: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Salve o arquivo e atualize a página. + +![Figura 11.3](images/step4.png) + +Viu como o navegador entendeu que "Ola's blog" é o título da página? Ele interpretou `Ola's blog` e colocou o texto na barra de título do seu navegador (o texto também será usado nos favoritos e outras coisas mais). + +Provavelmente você já deve ter notado que cada tag de abertura casa com uma *tag de fechamento*, com uma `/`, e que os elementos estão *aninhados* (ex.: você não pode fechar uma tag específica antes que todas as outras tags dentro dela estejam fechadas). + +É como colocar coisas dentro de caixas. Você tem uma grande caixa, ``; dentro dela há ``, e esta contém caixas ainda menores: `

`. + +Você precisa seguir essas regras de *fechamento* de tags, e de *aninhamento* de elementos - se não fizer isso, o navegador provavelmente não interpretará seu código da maneira correta e sua página será exibida incorretamente. + +## Personalize seu template + +Agora você pode se divertir um pouco tentando personalizar o seu template! Aqui estão algumas tags úteis para isso: + +* `

Um título

` para o título da seção principal exibido na página +* `

Um sub-título

` para um título um nível abaixo +* `

Um sub-sub-título

` ... e por aí vai, até `
` +* `

Um parágrafo de texto

` +* `texto` enfatiza seu texto +* `text` enfatiza fortemente seu texto +* `
` quebra a linha (você não pode digitar nada dentro da tag br e ela não possui uma tag de fechamento correspondente) +* `link` cria um link +* `
  • primeiro item
  • segundo item
` cria uma lista, exatamente como essa! +* `
` define uma seção da página + +Aqui vai um exemplo de um template completo; copie e cole dentro de `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Blog Django Girls + + + + +
+

publicado: 14.06.2014, 12:14

+

Meu primeiro 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.

+
+ +
+

publicado: 14.06.2014, 12:14

+

Meu segundo 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.

+
+ + +``` + +Nós criamos três seções `div` aqui. + +* O primeiro elemento `div` possui o título do nosso blog - é um título que contêm um link +* Os outros dois elementos `div` possuem nossas postagens com a data de publicação, `h2` com o título clicável da postagem e dois `p`s (parágrafos) de texto, um para a data e outro para o texto da postagem. + +Isso nos dá o seguinte efeito: + +![Figura 11.4](images/step6.png) + +Uhuu! Mas, até o momento, nosso template mostra **sempre a mesma informação** - sendo que, anteriormente, nós falávamos sobre templates como uma maneira para exibir informações **diferentes** em um **mesmo formato**. + +O que nós realmente queremos fazer é exibir as postagens reais que foram adicionadas no Django admin - e isso é o que faremos em seguida. + +## Mais uma coisa: implantação (deploy)! + +Seria bom ver tudo isto na Internet, certo? Vamos fazer mais um deploy no PythonAnywhere: + +### Commit, e dê push para subir seu código no GitHub + +Antes de tudo, vamos ver que arquivos foram modificados desde que nós fizemos a última implantação (execute esses comandos localmente, não no PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Assegure-se de que você está no diretório `djangogirls` e vamos dizer ao `git` para incluir todas as mudanças feitas nele: + +{% filename %}command-line{% endfilename %} + + $ git add --all . + + +> **Observação:** `..--all` significa que o `git` também vai reconhecer se você tiver excluído arquivos (por padrão, ele só reconhece arquivos novos/modificados). Lembre-se também (do capítulo 3) que `.` significa o diretório atual. + +Antes de fazermos o upload de todos os arquivos, vamos verificar quais deles o `git` enviará (todos os arquivos marcados para upload pelo `git` aparecerão em verde): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Estamos quase lá! Agora é hora de dizer ao git para salvar essa modificação em seu histórico. Daremos a ele uma "mensagem de commit" em que descrevemos as modificações que foram feitas. Você pode escrever o que quiser agora, mas é mais útil escrever algo descritivo que te ajude no futuro a lembrar das coisas que fez. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Changed the HTML for the site." + + +> **Observação:** Certifique-se de que você usou aspas duplas para delimitar a mensagem do commit. + +Uma vez feito isso, faremos o upload (push) das nossas mudanças para o Github: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Baixe seu novo código no PythonAnywhere e recarregue o seu aplicativo da web + +* Abra a [página de consoles do PythonAnywhere](https://www.pythonanywhere.com/consoles/) e vá para o seu **console do Bash** (ou inicie um novo). Em seguida, execute: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Você precisará substituir `` com o seu subdomínio PythonAnywhere, sem os colchetes angulares (< >). O nome do seu subdomínio normalmente é o mesmo nome de usuário do seu PythonAnywhere, mas em alguns casos este pode ser um pouco diferente (por exemplo, se o nome possuir letras maísculas). Sendo assim, caso o comando não funcione, utilize o comando `ls` (lista de arquivos) para encontrar o seu subdomínio/nome da pasta e então execute `cd` para acessá-lo. + +Agora veja o seu código ser baixado. Se você quiser verificar se ele chegou, você pode pular para a **página "Arquivos"**e visualizar seu código no PythonAnywhere (você pode acessar outras páginas do PythonAnywhere a partir do botão de menu na página do console). + +* Finalmente, pule para a aba ["Web" page](https://www.pythonanywhere.com/web_app_setup/) e aperte **Reload** em sua aplicação. + +Sua atualização deve estar no ar! Vá em frente e atualize seu site no navegador. As alterações devem estar visíveis. :) \ No newline at end of file diff --git a/pt/html/images/step1.png b/pt/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/pt/html/images/step1.png differ diff --git a/pt/html/images/step3.png b/pt/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/pt/html/images/step3.png differ diff --git a/pt/html/images/step4.png b/pt/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/pt/html/images/step4.png differ diff --git a/pt/html/images/step6.png b/pt/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/pt/html/images/step6.png differ diff --git a/pt/images/application.png b/pt/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/pt/images/application.png differ diff --git a/pt/installation/README.md b/pt/installation/README.md new file mode 100644 index 00000000000..799ead7434b --- /dev/null +++ b/pt/installation/README.md @@ -0,0 +1,69 @@ +# Se você estiver fazendo o tutorial em casa + +Se você estiver fazendo o tutorial em casa e não em um dos [eventos Django Girls](https://djangogirls.org/events/), pode pular este capítulo e ir direto para o capítulo [Como a internet funciona](../how_the_internet_works/README.md). + +Isso porque nós cobrimos a instalação dos itens a medida que eles são necessários no tutorial -- Essa é apenas uma página adicional que reúne todas as instruções de instalação em um só lugar (que é útil para alguns formatos de oficinas). Você pode escolher instalar tudo que está nessa página nesse momento se você quiser. Mas se você quer começar a aprender coisas antes de instalar um monte de coisas no seu computador, pule este capítulo e nós explicaremos os componentes de instalação para você mais tarde, a medida que são necessários. + +Boa sorte! + +# Se você está participando de uma oficina + +Se você está participando de uma oficina de um [ Evento Django Girls ](https://djangogirls.org/events/): + +* Sua oficina pode ter um "grupo de instalação" antes da oficina principal. Se você está com um grupo de instalação, essa página é para você! Siga as instruções aqui contidas para ter tudo que precisa para a oficina instalada, com a ajuda de instrutores, se necessário. Então, no workshop principal, poderás saltar as intruções de instalação que encontrares no tutorial principal, quando aparecerem. +* A organização do workshop poderá ter-te perguntado se tentaste reslizar a instalação no computador, em casa antes de vires para o workshop. Se te oriposeram a isso, esta página é para ti! Siga as instruções. Então, no workshop principal, quando chegar à etapa de instalação, se você ainda for capaz de prosseguir você poderá pedir ajuda para a sua monitora. +* Se o seu workshop não tem uma seção de instalação (ou você não a consegue localizar) e os organizadores não lhe pedirem para tentar instalar tudo antes que você chegue, pule esta página e vá direto para [Como a internet funciona](../how_the_internet_works/README.md). Você irá instalar tudo o que precisa no seguimento do tutorial. + +# Instalação + +Neste tutorial, você irá criar um blog. Para fazer isso, ao longo do tutorial você receberá instruções de como instalar diversos programas no seu computador e configurar algumas contas online conforme necessário. Esta página reune as instruções de instalação e registro em um só lugar (o que vai ser útil para a alguns formatos de workshop). + + {% include "/chromebook_setup/instructions.md" %} + + + +# Breve introdução à linha de comando + +Vários dos passos abaixos referenciam o "console", "terminal", "janela de comandos", ou "linha de comandos" - todos significam a mesma coisa: uma janela no seu computador onde você pode inserir comandos. Quando você chegar ao tutorial principal, você irá aprender mais sobre a linha de comandos. Por agora, a coisa principal que você precisará saber é como abrir uma janela de comandos e como ela se parece: +{% include "/intro_to_command_line/open_instructions.md" %} + +# Instale o Python + +{% include "/python_installation/instructions.md" %} + +# Instale um editor de código + +{% include "/code_editor/instructions.md" %} + +# Configure o virtualenv e instale o Django + +{% include "/django_installation/instructions.md" %} + +# Instale o Git + +{% include "/deploy/install_git.md" %} + +# Crie uma conta no GitHub + +Vá para [GitHub.com](https://www.github.com) e registre uma nova conta, de graça. Assegure-se de lembrar a sua senha (e a adicione ao seu gerenciador de senhas, caso você tenha um). + +# Crie uma conta no PythonAnywhere + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Comece a ler + +Parabéns, você tem tudo configurado e pronto para começar! Se você ainda tem algum tempo antes do workshop, seria útil começar a ler alguns dos capítulos de início: + +* [Como a internet funciona](../how_the_internet_works/README.md) + +* [Introdução à linha de comando](../intro_to_command_line/README.md) + +* [Introdução ao Python](../python_introduction/README.md) + +* [O que é Django?](../django/README.md) + +# Aproveite o workshop! + +Quando você começar a oficina, já será capaz de ir direto para o [seu primeiro projeto Django!](../django_start_project/README.md) porque já vai ter visto todo o material dos capítulos anteriores. diff --git a/pt/intro_to_command_line/README.md b/pt/intro_to_command_line/README.md new file mode 100755 index 00000000000..842ca198d1c --- /dev/null +++ b/pt/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Introdução à linha de comando + +> Para as leitoras em casa: este capítulo é coberto no vídeo [Sua nova amiga: a linha de comando](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +É emocionante, não?! Em poucos minutos você vai escrever sua primeira linha de código! :) + +**Vamos apresentá-la à sua primeira nova amiga: a linha de comando!** + +As etapas a seguir mostrarão como usar a janela preta que todos os hackers usam. Pode parecer um pouco assustador no começo, mas é apenas um prompt esperando por comandos. + +> **Observação:** Note que ao longo deste tutorial, intercalamos o uso dos termos 'diretório' e 'pasta', mas eles significam a mesma coisa. + +## O que é a linha de comando? + +A janela, que geralmente é chamada de **linha de comando** ou **interface de linha de comando**, é uma aplicação de texto para ver e manipular arquivos em seu computador. É como o Windows Explorer ou o Finder no Mac, mas sem a interface gráfica. Outros nomes para a linha de comando são: *cmd*, *CLI*, *prompt*, *console* ou *terminal*. + +## Abra a interface de linha de comando + +Para começar alguns experimentos, precisamos abrir a nossa interface de linha de comando. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Prompt + +Agora você deve ver uma janela branca ou preta que está à espera de seus comandos. + + + +Se você está usando Mac ou Linux, você provavelmente verá um `$`, como esse: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +No Windows, você provavelmente verá um `>`, assim: + +{% filename %}command-line{% endfilename %} + + > + + +Dê uma olhada na seção Linux logo acima -- você verá algo mais como isso quando você chegar ao PythonAnywhere depois no tutorial. + + + +Cada comando vai ser precedido por um `$` ou `>` e um espaço, mas você não deve digitar isso. Seu computador vai fazer isso por você. :) + +> Uma pequena observação: pode ser que apareça algo como `C:\Users\ola>` ou `Olas-MacBook-Air:~ ola$` antes do cursor e isso está 100% correto. + +A parte que vai até e inclui o `$` ou o `>` é chamada de *prompt de linha de comando*, ou *prompt*, de forma breve. Ele está pedindo que você digite algo. + +No tutorial, quando quisermos que você digite um comando, incluiremos o `$` ou `>` e, algumas vezes, algum texto adicional à esquerda. Ignore o que está à esquerda e apenas digite o comando que inicia após o prompt. + +## Seu primeiro comando (Uhuu!) + +Vamos começar digitando este comando: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +E então pressione a tecla `enter`. Este é o resultado: + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Como você pode ver, o computador acabou de mostrar seu nome de usuário na tela. Legal, né? :) + +> Tente escrever cada comando, não copie e cole. Assim você vai se lembrar melhor deles! + +## O Básico + +Cada sistema operacional tem o seu próprio conjunto de instruções para a linha de comando, então certifique-se de que você está seguindo as instruções do seu sistema operacional. Vamos tentar, certo? + +### Pasta atual + +Quer saber em que diretório está agora? Digite o seguinte comando e clique `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Observação: 'pwd' significa 'print working directory' (imprima/mostre o diretório de trabalho). + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Observação: 'cd' significa 'change directory' em inglês, o que se traduz para 'mudar de diretório'. Com o PowerShell, você pode utilizar pwd da mesma forma como no Linux ou macOS. + + + +Você provavelmente vai ver algo parecido em seu computador. A linha de comando geralmente inicia no diretório principal do usuário, também chamado de diretório "home", em Inglês. + +* * * + +### Aprenda mais sobre um comando + +Muitos comandos que você digita no Prompt de comand possuem um painel de ajuda integrada que você pode abrir e ler! Por exemplo, para entender melhor sobre o comando do diretório atual: + + + +SO X e Linux tem um comando `man`, que ajuda você nos comandos. Tente `man pwd` e veja o que ele diz, ou coloque `man` antes de outros comandos para ver seus menus de ajuda. A saída `man` é normalmente paginada. Use a barra de espaço para ir para a próxima página, e `q` para sair do menu de ajuda. + + + + + +Colocando um sufixo `/?` para a maioria dos comandos, irá imprimir uma página de ajuda. Você pode precisar rolar a janela do seu comando para ver tudo. Tente `cd /?`. + + + +### Listando arquivos e pastas + +Então, o que tem no seu computador? Vamos descobrir: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% filename %}command-line{% endfilename %} + + > 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 + ... + + +> Observação: No PowerShell, você também pode usar 'ls' como no Linux e macOS. + +* * * + +### Mudar a pasta atual + +Agora vamos para a pasta Desktop: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Note que o nome do diretório "Desktop" pode estar traduzido para a linguagem da sua conta Linux. Se for o caso, você irá precisar mudar `Desktop` para o nome traduzido; como exemplo, `Área de trabalho` em português. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Verifique se realmente mudamos de pasta: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Aqui está! + +> Dica de profissional: se você digitar `cd D` e apertar a tecla `tab` no seu teclado, a linha de comando preencherá automaticamente o resto do nome para que você possa navegar rapidamente. Se houver mais de uma pasta cujo nome comece com "D", aperte a tecla `tab` duas vezes para obter uma lista de opções. + +* * * + +### Criando Pastas + +Que tal criar uma pasta para praticarmos em sua área de trabalho? Você pode fazer assim: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir practice + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir practice + + + + +Esse pequeno comando criará uma pasta com o nome `practice` na sua área de trabalho. Você pode verificar se está lá ao olhar na sua Área de trabalho ou executando o comando `ls` ou `dir`! Experimente. :) + +> Dica de profissional: Se você não quiser digitar o mesmo comando várias vezes, tente pressionar `seta para cima` e `seta para baixo` no teclado para percorrer comandos usados recentemente. + +* * * + +### Pratique! + +Um pequeno desafio para você: em sua recém criada pasta `practice`, crie uma pasta chamada `test`. (Use os comandos `cd` e `mkdir`.) + +#### Solução: + + + +{% filename %}command-line{% endfilename %} + + $ cd practice + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + + + + +Boa! :) + +* * * + +### Arrumando + +Nós não queremos que você deixe uma bagunça, então vamos remover tudo que fizemos até aqui. + +Primeiro, precisamos voltar para a Área de trabalho: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Usando o comando `..` com o `cd` irá mudar sua pasta atual para o diretório pai (ou seja, a pasta que contém sua pasta atual). + +Verifique onde você está: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Agora é hora de deletar a pasta `practice`: + +> **Atenção**: A exclusão de arquivos usando `del`, `rmdir` ou `rm` é irreversível; ou seja, os *arquivos excluídos são perdidos para sempre*! Então, tenha cuidado com este comando. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r practice + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S practice + practice, Are you sure ? Y + + + + +Pronto! Para ter certeza de que a pasta foi excluída, vamos checar: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Saindo + +Isso é tudo por agora! Você pode fechar a janela da sua linha de comando agora sem medo. Vamos fazer isso do jeito hacker, certo? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Massa, né? :) + +## Sumário + +Aqui vai uma lista com alguns comandos úteis: + +| Comando (Windows) | Comando (Mac OS / Linux) | Descrição | Exemplo | +| ----------------- | ------------------------ | ----------------------------- | -------------------------------------------------- | +| exit | exit | Fecha a janela | **exit** | +| cd | cd | Muda a pasta | **cd test** | +| cd | pwd | Mostra o diretório atual | **cd** (Windows) ou **pwd** (Mac OS / Linux) | +| dir | ls | Lista as pastas e/ou arquivos | **dir** | +| copy | cp | Copia um arquivo | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | Move um arquivo | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | Cria uma pasta | **mkdir testdirectory** | +| rmdir (ou del) | rm | Exclui arquivo | **del c:\test\test.txt** | +| rmdir /S | rm -r | Exclui diretório | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | obtém ajuda para um comando | **cd /?** (Windows) or **man cd** (Mac OS / Linux) | + +Esses são apenas alguns dos comandos que você pode executar na sua linha de comandos, mas você não irá utilizar outros por hoje. + +Se estiver com curiosidade, [ss64.com](http://ss64.com) contém uma referência completa dos comandos de todos os sistemas operacionais. + +## Pronta? + +Vamos mergulhar no mundo do Python! diff --git a/pt/intro_to_command_line/open_instructions.md b/pt/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..ab7d2379721 --- /dev/null +++ b/pt/intro_to_command_line/open_instructions.md @@ -0,0 +1,29 @@ + + + +Dependendo da sua versão do Windows e do seu teclado, um dos seguintes deverá abrir uma janela de comando (você talvez tenha que experimentar um pouco, mas não precisa tentar todas essas sugestões): + +- Vá para o menu ou tela de iniciar, e digite "Prompt de comando" no campo de busca. +- Vá para o menu Iniciar → Sistema Windows → Prompt de comando. +- Vá em Iniciar → Todos os Programas → Acessórios → Prompt de comando. +- Vá para a tela Iniciar, passe o mouse sobre o canto inferior esquerdo da tela, e clique na seta para baixo que aparecerá (Em touch screen, passe o dedo sobre a parte inferior da tela). A página "Aplicativos" deve abrir. Clique em Prompt de comando na seção Sistema Windows. +- Pressione a tecla Windows no seu teclado e aperte a tecla "X" em seguida. Escolha "Prompt de comando" no menu pop-up. +- Mantenha pressionada a tecla Windows e pressione a tecla "R" para obter uma janela de "Executar". Digite "cmd" na caixa e clique no botão OK. + +![Digite "cmd" na janela "Run"](../python_installation/images/windows-plus-r.png) + +Ainda neste tutorial, você precisará ter duas janelas de comando abertas ao mesmo tempo. Entretanto, em algumas versões do Windows, se você já tem uma janela de comando aberta e tentar abrir uma segunda usando o mesmo método, Ao invés de abrir o sistema apontará para a que você já tem aberto. Agora tente no seu computador e veja o que acontece! Se você só obter uma janela de comando, tente um dos outros métodos listados acima. Ao menos um deles deve resultar em uma nova janela de comando. + + + + + +Vá para Aplicações → Utilidades → Terminal. + + + + + +Provavelmente está em aplicações → Acessórios → Terminal, ou Aplicativos → Sistema → Terminal, mas isso pode depender do seu sistema. Se não estiver lá, você pode tentar utilizar o Google. :) + + diff --git a/pt/python_installation/README.md b/pt/python_installation/README.md new file mode 100755 index 00000000000..8a2845ab154 --- /dev/null +++ b/pt/python_installation/README.md @@ -0,0 +1,15 @@ +# Vamos começar com o Python + +Finalmente chegamos aqui! + +Mas primeiro, vamos falar sobre o que é Python. Python é uma linguagem de programação muito popular que pode ser usada para criar sites, jogos, software científicos, gráficos e muito, muito mais. + +O Python foi criado na década de 1980 e seu principal objetivo é ser legível por seres humanos (e não apenas pelas máquinas!). Por isso ele parece mais simples que outras linguagens de programação, mas não se preocupe - o Python também é muito poderoso! + +# Instalação do Python + +> **Observação:** Se você está usando um Chromebook, pule este capítulo e certifique-se de seguir as instruções para [ Configuração do Chromebook](../chromebook_setup/README.md). +> +> **Observação:** Se você já passou pelas etapas de Instalação, não precisa fazer isso novamente - pode seguir em frente e ir para o próximo capítulo! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/pt/python_installation/images/add_python_to_windows_path.png b/pt/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/pt/python_installation/images/add_python_to_windows_path.png differ diff --git a/pt/python_installation/images/python-installation-options.png b/pt/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/pt/python_installation/images/python-installation-options.png differ diff --git a/pt/python_installation/images/windows-plus-r.png b/pt/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/pt/python_installation/images/windows-plus-r.png differ diff --git a/pt/python_installation/instructions.md b/pt/python_installation/instructions.md new file mode 100644 index 00000000000..5ef658caa77 --- /dev/null +++ b/pt/python_installation/instructions.md @@ -0,0 +1,121 @@ +> Para leitoras em casa: esse capítulo é abordado no vídeo [Instalando Python & Editor de Código](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Esta seção baseia-se em tutoriais das Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django é escrito em Python. Precisamos de Python para fazer qualquer coisa no Django. Vamos começar por instalá-lo! Queremos que você instale a versão mais recente do Python 3, então, se você tiver uma versão anterior, precisará atualizá-la. Se você já tem versão 3.4 ou superior, deve estar bem. + +Por favor, instale o Python normal da seguinte maneira, mesmo tenha o Anaconda instalado no seu computador. + + + +Primeiramente, verifique se o seu computador está rodando uma versão 32-bit ou 64-bit do Windows, na linha "Tipo de Sistema" na página de informação do Sistema. Para chegar a essa página, tente um desses métodos: + +* Aperte as teclas do Windows e "Pause/Break" ao mesmo tempo +* Abra o seu Painel de Controle pelo menu do Windows, e navegue para "Sistema e Segurança", depois "Sistema" +* Aperte o botão do Windows no seu teclado, então navegue para Configurações > Sistema > Sobre + +Você pode baixar Python para Windows do site https://www.python.org/downloads/windows/. Clique no link "Versão mais recente do Python 3 - Python x.x.x". Se o seu computador está executando uma versão **64-bit** do Windows, baixe o instalador executável **Windows x86-64**. Caso contrário, baixe o instalador executável **Windows x86**. Depois de baixar o instalador, você deve executá-lo (com clique duplo) e seguir as instruções fornecidas. + +Uma coisa para prestar atenção: durante a instalação, você notará uma janela marcada "Setup". Certifique-se de marcar a caixa "Adicionar Python 3.6 ao PATH" ou "Adicionar Python às suas variáveis de ambiente" e clicar em "Instalar Agora", como mostrado aqui (pode aparecer um pouco diferente se você estiver instalando uma outra versão): + +![Não se esqueça de adicionar o Python ao Path](../python_installation/images/python-installation-options.png) + +Quando a instalação for concluída, pode aparecer uma caixa de diálogo com um link que você pode seguir para saber mais sobre Python ou sobre a versão que instalou. Feche ou cancele essa caixa de diálogo -- você vai aprender mais neste tutorial! + +Observação: se você estiver usando uma versão antiga do Windows (7, Vista, ou qualquer outra mais antiga) e o instalador do 3.6. x Python falhar com um erro, você pode tentar: + +1. instalar todas as atualizações do Windows e tentar instalar o Python novamente; ou +2. instalar uma [versão mais antiga do Python](https://www.python.org/downloads/windows/), por exemplo, [3.4.6](https://www.python.org/downloads/release/python-346/). + +Se você instalar uma versão mais antiga do Python, a tela de instalação pode parecer um pouco diferente da mostrada. Se certifique de rolar o botão do meio do mouse para baixo, até ver "Add python.exe to Path", então clique no botão à esquerda e selecione "Will be installed on local hard drive". + +![Adicione o Python ao PATH, versões mais antigas](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Observação:** Antes de instalar o Python no macOS, você deve garantir que suas configurações permitam a instalação de pacotes que não estejam na App Store. Vá para preferências do sistema (dentro da pasta Aplicativos), clique em "Segurança & Privacidade" e depois na guia "Geral". Se a configuração "Permitir que apps baixados:" estiver definida como "Mac App Store," mude para "Mac App Store e desenvolvedores identificados." + +Você precisa visitar https://www.python.org/downloads/release/python-361/ e baixar o instalador do Python: + +* Faça o download do arquivo *macOS 64-bit/32-bit installer*, +* Dê um duplo clique no arquivo *python-3.6.1-macosx10.6.pkg* para executar o instalador. + + + + + +É muito provável que você já tenha o Python instalado e configurado. Para ter certeza se ele está instalado (e qual a sua versão), abra o terminal e digite o seguinte comando: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Se você tem instalada uma outra "versão micro" do Python, por exemplo, 3.6.0, não precisa atualizá-la. Se você não tem Python instalado, ou se você quer uma versão diferente, primeiro verifique qual distribuição Linux você está usando o seguinte comando: + +{% filename %}command-line{% endfilename %} + + $ grep ^NAME= /etc/os-release + + +Depois, dependendo do resultado, siga um dos seguintes guias de instalação abaixo desta seção. + + + + + +Digite o seguinte comando no terminal: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Use o seguinte comando no terminal: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Se você estiver em versões mais antigas do Fedora, pode receber um erro dizendo que o comando `dnf` não foi encontrado. Nesse caso, você precisa usar o `yum` em vez disso. + + + + + +Use o seguinte comando no terminal: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Verifique se a instalação foi bem sucedida abrindo o terminal e digitando o comando `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +A versão mostrada pode ser diferente da versão 3.6.1 -- deve corresponder à versão que você instalou. + +**Observação:** Se você estiver no Windows e receber uma mensagem de erro dizendo que o `python3` não foi encontrado, tente utilizar `python` (sem o `3`) e verifique se ela corresponde à versão Python 3.4. + +* * * + +Se você tem alguma dúvida ou se alguma coisa deu errado e você não tem a menor ideia do que fazer, pergunte à sua monitora! Nem sempre tudo sai conforme o esperado e é melhor pedir ajuda a alguém mais experiente. \ No newline at end of file diff --git a/pt/python_introduction/README.md b/pt/python_introduction/README.md new file mode 100755 index 00000000000..e9049b81fa2 --- /dev/null +++ b/pt/python_introduction/README.md @@ -0,0 +1,1070 @@ +{% set warning_icon = '' %} + +# Introdução ao Python + +> Parte deste capítulo é baseada no tutorial das Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Vamos escrever um pouco de código! + +## Interpretador de Python + +> Para leitoras em casa: esta parte é abordada no vídeo [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +Para começar a trabalhar com Python, precisamos abrir uma * linha de comando* (ou prompt) no computador. Você provavelmente já sabe como fazer isso - aprendeu no capítulo [ Introdução à Linha de Comando ](../intro_to_command_line/README.md). + +Assim que estiver pronta, siga as instruções abaixo. + +Para abrir um prompt de comando do Python, digite `python` no Windows ou `python3` no Mac OS/Linux e clique `enter`. + +{% filename %}command-line{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Digite "ajuda", "direitos autorais", ou "licença" para mais informações. + >>> + + +## Seu primeiro comando em Python! + +Depois de executar o comando python, o prompt mudou para `>>>`. Isso significa que, por enquanto, só podemos executar comandos na linguagem Python. Você não precisa digitar `>>>` - o Python fará isso por você. + +Se a qualquer momento você quiser sair do prompt do Python, digite `exit()` ou use o atalho `Ctrl + Z` no Windows e `Ctrl + D` no Mac ou Linux. Fazendo isso, você não vai mais ver o `>>>`. + +Por enquanto, não vamos sair do prompt do Python. Queremos aprender mais sobre ele. Para começar, vamos digitar um pouco de matemática, como `2 + 3`, e clicar `enter`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Legal! Viu como a resposta apareceu? O Python sabe matemática! Você pode tentar outros comandos: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Para executar cálculo exponencial, como 2 elevado a 3, digitamos: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Brinque um pouco com isso e depois volte aqui. :) + +Como você pode ver, o Python é uma ótima calculadora. Se você está se perguntando o que mais pode fazer… + +## Strings + +Que tal o seu nome? Digite seu primeiro nome entre aspas, desse jeito: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Você acabou de criar sua primeira string! Uma string é uma sequência de caracteres que pode ser processada pelo computador. Ela deve sempre começar e terminar com o mesmo caractere. Este caractere pode ser aspas duplas (`"`) ou simples (`'`) (não há nenhuma diferença!). Elas dizem ao Python que o que está entre elas é uma string. + +Strings podem ser juntadas. Tente isto: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Olá " + "Ola" +'Olá Ola' +``` + +(Ola é o nome das duas criadoras do Django Girls!). Você também pode multiplicar strings por um número: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Se você precisa colocar uma apóstrofe dentro de uma string, pode fazê-lo de duas maneiras. + +Usando aspas duplas: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Roda d'água" +"Roda d'água" +``` + +ou "escapando" a aspa simples (o que sinaliza para o Python que aquele sinal é uma apóstrofe, e não uma aspa marcando o final da string) com uma contra-barra (``): + +{% filename %}command-line{% endfilename %} + +```python +>>> "Roda d\'água" +"Roda d'água" +``` + +Legal, hein? Para ver seu nome em letras maiúsculas, basta digitar: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Você acabou de usar a **função** `upper` na sua string! Uma função (como `upper()`) é um conjunto de instruções que o Python tem que realizar em um determinado objeto (`"Ola"`) sempre que você o chamar. + +Se você quer saber o número de letras contidas em seu nome, há uma **função** para isso também! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Talvez você esteja se perguntando porque algumas vezes chamamos funções com um `.` depois de uma string (como `"Ola".upper()`) e outras vezes primeiro chamamos a função e depois colocamos a string entre parênteses. Bem, em alguns casos, funções pertencem a objetos - como `upper()`, que só pode ser utilizada em strings. Nesse caso, nós chamamos a função de **método**. Outras vezes, elas não pertencem a nada específico e podem ser usadas em diferentes tipos de objetos, como a função `len()`. É por isso que fornecemos `"Ola"` como parâmetro para a função `len`. + +### Sumário + +OK, chega de strings. Até agora, você aprendeu sobre: + +- **o prompt** - digitar comandos (códigos) no interpretador de Python resulta em respostas em Python +- **números e strings** - no Python, números são usados para matemática e strings, para objetos de texto +- **operadores** - como `+` e `*`, combinam valores para produzir um novo valor +- **funções** - como `upper()` e `len()`, executam ações nos objetos. + +Esse é o básico de todas as linguagens de programação. Pronta para algo mais difícil? Apostamos que sim! + +## Erros + +Vamos tentar algo novo. Será que conseguimos saber a extensão de um número da mesma forma que descobrimos a dos nossos nomes? Digite `len(304023)` e clique `enter`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Temos nosso primeiro erro! O ícone {{ warning_icon }} é a forma que o Pyhton tem para avisar que o código que você está prestes a executar não vai funcionar conforme o esperado. Cometer erros (inclusive intencionalmente) é uma parte importante da aprendizagem! + +Nossa primeira mensagem de erro nos diz que objetos do tipo "int" (inteiros, naturais) não têm comprimento algum. O que podemos fazer agora? Podemos escrever nosso número como string? Strings têm comprimento, certo? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Funcionou! Usamos a função `str` dentro da função `len`. A função `str ()` converte tudo em strings. + +- A função `str` converte as coisas em **strings** +- A função `int` converte as coisas em **números inteiros** + +> Importante: podemos converter números em texto, mas nem sempre é possível converter texto em números - o que `int('hello')` quer dizer? + +## Variáveis + +Variáveis são um conceito importante em programação. Uma variável é apenas um nome que você atribui a um objeto. Programadores armazenam dados nelas para tornar seus códigos mais legíveis e para não ter que lembrar a todo momento o que são certas coisas. + +Se quisermos criar uma nova variável chamada `name`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Ola" +``` + +Digitamos: name igual Ola. + +Como você deve ter percebido, a última linha de código não retornou nada como nos exemplos anteriores. Então como vamos saber se a variável realmente existe? Basta digitar `name` e clicar `enter`: + +{% filename %}command-line{% endfilename %} + +```python +>>> name +'Ola' +``` + +Uhuuu! Sua primeira variável! :) Você pode mudar o valor dela: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Você pode usá-la também em funções: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(name) +5 +``` + +Incrível, né? Variáveis podem ser qualquer coisa, então podem ser números também! Tente isso: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +E se digitarmos errado o nome da variável? Você consegue imaginar o que aconteceria? Vamos tentar! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Um erro! O Python tem diferentes tipos de erros e este é chamado **NameError**. Ele mostrará esta mensagem se você tentar usar uma variável que ainda não foi definida. Se encontrar esse erro mais tarde, confira no seu código se você não digitou errado o nome de uma variável. + +Brinque com isso por um tempo e veja o que consegue fazer! + +## A função print + +Tente o seguinte: + +{% filename %}command-line{% endfilename %} + +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Quando você digita `name`, o interpretador de Python responde com a *representação* da variável 'name' na forma de string, que é sequência de letras M-a-r-i-a, entre aspas simples. Quando você disser para o Python `print(name)`, ele vai "imprimir" (ou mostrar) na tela o conteúdo da variável sem as aspas. + +Como veremos mais tarde, `print()` também é útil quando queremos imprimir algo dentro de funções ou quando queremos imprimir algo em várias linhas. + +## Listas + +Além de strings e números inteiros, o Python tem muitos tipos diferentes de objetos. Agora, vamos apresentar um chamado **lista**. Listas são objetos que são listas de outros objetos. :) + +Vá em frente e crie uma lista: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Sim, esta é uma lista vazia. Não é muito útil, né? Vamos criar uma outra composta por números de loteria. Para não precisar repetir o código o tempo todo, vamos atribuí-la a uma variável: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Legal, criamos uma lista! O que podemos fazer com ela? Vamos ver quantos números de loteria ela contém. Você tem ideia de que a função deve usar para isso? Você já aprendeu ;) + +{% filename %}command-line{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Sim! `len()` pode te dizer o número de objetos que fazem parte de uma lista. Uma mão na roda, né? Agora vamos organizá-los: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.sort() +``` + +Isso não retorna nada, apenas muda a ordem em que os números aparecem na lista. Vamos imprimi-la outra vez e ver o que acontece: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Agora os números estão ordenados do menor para o maior. Parabéns! + +E se quisermos inverter a ordem? Vamos fazer isso! + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Moleza, né? Se quiser adicionar alguma coisa à sua lista, digite o seguinte comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Se quiser ver apenas o primeiro número da lista, pode usar **índices**. Um índice é o número que diz onde na lista um item está. Programadores preferem começar a contar a partir do zero, então o primeiro objeto em sua lista está no índice 0, o segundo no 1 e assim por diante. Tente isso: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Como você pode ver, podemos acessar diferentes objetos na lista usando o nome da lista e o índice do objeto entre colchetes. + +Para apagar algum objeto da sua lista, você precisa usar **índices**, como aprendemos acima, e o método `pop()`. Vamos usar um exemplo para reforçar o que já aprendemos: vamos deletar o primeiro número de nossa lista. + +{% 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] +``` + +Funcionou perfeitamente! + +Agora, tente alguns outros índices, como: 6, 7, 1000, -1, -6 ou -1000. Veja se consegue prever o resultado antes de executar o comando. Os resultados fazem sentido para você? + +Uma lista de todos os métodos disponíveis nesta seção pode ser encontrada na documentação do Python: https://docs.python.org/3/tutorial/datastructures.html + +## Dicionários + +> Para leitoras em casa: esta seção é abordada no vídeo [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Um dicionário é similar a uma lista, mas para acessar seus valores você usa uma chave ao invés de um índice. Uma chave pode ser qualquer string ou número. A sintaxe para definir um dicionário vazio é: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Você acabou de criar um dicionário vazio. Uhuuu! + +Agora escreva o seguinte comando (e tente colocar suas próprias informações): + +{% filename %}command-line{% endfilename %} + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Com esse comando, você criou uma variável chamada `participant` com três pares de chave-valor: + +- A chave `name` aponta para o valor `'Ola'` (um objeto do tipo `string`), +- a chave `country` aponta para `'Poland'` (outra `string`), +- e a chave `favorite_numbers` aponta para `[7, 42, 92]` (uma `lista` de três números). + +Você pode verificar o conteúdo de chaves individuais com a sintaxe: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(participant['name']) +Ola +``` + +É similar a uma lista, mas você não precisa lembrar o índice - apenas o nome. + +O que acontece se perguntarmos ao Python qual é o valor de uma chave que não existe? Você consegue adivinhar? Vamos testar e descobrir! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Olha, outro erro! Esse é um **KeyError**. O Python é bastante prestativo e te diz que a chave `'age'` não existe no nesse dicionário. + +Você deve estar se perguntando quando deveria usar um dicionário ou uma lista. Essa é uma questão importante. Pense sobre ela antes de ver a resposta nas próximas linhas. + +- Você precisa de uma sequência ordenada de itens? Use uma lista. +- Você precisa associar valores a chaves para poder procurá-los eficientemente (pela chave) mais tarde? Use um dicionário. + +Dicionários, assim como listas, são *mutáveis*. Isso significa que eles podem ser alterados depois de criados. Você pode adicionar um novo par chave-valor a um dicionário depois de ele ser criado, por exemplo: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Como nas listas, usar a função `len()` em dicionários retorna o número de pares chave-valor que ele contém. Vá em frente e digite o comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Esperamos que esteja fazendo sentido até agora. :) Pronta para mais diversão com dicionários? + +Você pode usar o método `pop()` para deletar um item do dicionário. Se quiser excluir a entrada correspondente à chave `'favorite_numbers'`, por exemplo, basta digitar o seguinte comando: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Como você pode ver no resultado, o par chave-valor correspondente à chave 'favorite_numbers' foi excluído. + +Além disso, você pode mudar o valor associado a uma chave já criada no dicionário. Digite: + +{% filename %}command-line{% endfilename %} + +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Agora, o valor da chave `'country'` foi alterado de `'Poland'` para `'Germany'`. :) Emocionante? Uhu! Você acabou de aprender outra coisa incrível. + +### Sumário + +Legal! Agora você sabe muito sobre programação. ;) Nesta última parte, você aprendeu sobre: + +- **erros** - você já sabe como ler e entender mensagens de erro que aparecem quando o Python não entende um comando que você deu; +- **variáveis** - são nomes para objetos que permitem que você programe facilmente e deixam seu código mais legível; +- **listas** - são listas de objetos armazenados em uma ordem específica; +- **dicionários** - contêm objetos armazenados como pares chave-valor. + +Animada para a próxima parte? :) + +## Compare coisas + +> Para leitoras em casa: esta seção é abordada no vídeo [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Grande parte da programação consiste em comparar coisas. O que é mais fácil comparar? Números! Vamos ver como funciona: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Demos ao Python alguns números para comparar. Como você pode ver, ele pode comparar não apenas números, mas também resultados de métodos. Legal, né? + +Você deve estar se perguntando por que colocamos dois sinais de igual `==` lado a lado para verificar se os números são iguais. Nós usamos um único `=` para atribuir valores a variáveis. Você sempre, **sempre**, precisa colocar dois `==` se quiser verificar se as coisas são iguais. Também é possível afirmar que as coisas são diferentes. Para isso, usamos o símbolo `!=`, como mostrado no exemplo acima. + +Dê ao Python mais duas tarefas: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +Já vimos `>` e `<`, mas o que significam `>=` e `<=`? Leia da seguinte forma: + +- x `>` y significa: x é maior que y +- x `<` y significa: x é menor que y +- x `<=` y significa: x é menor ou igual a y +- x `>=` y significa: x é maior ou igual a y + +Fantástico! Quer fazer mais? Tente isto: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Você pode pedir ao Python para comprar quantos números quiser e ele vai te dar uma resposta! Espertinho, não é? + +- **and** - se você usar o operador `and`, as duas comparações terão que ser verdadeiras para que a expressão seja verdadeira (True) +- **or** - se você usar o operador `or`, apenas uma das comparações precisa ser verdadeira para que a expressão seja verdadeira (True) + +Já ouviu a expressão "comparar alhos com bugalhos"? Vamos tentar o equivalente em Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Aqui, vemos que assim como não podemos comparar alhos com bugalhos, o Python não é capaz de comparar um número (`int`) e uma string (`str`). Em vez de retornar um resultado, ele mostrou um **TypeError** e nos disse que os dois tipos não podem ser comparados um ao outro. + +## Booleanos + +Aliás, você acabou de aprender sobre um novo tipo de objeto em Python. Ele se chama **booleano**. + +Existem apenas dois objetos booleanos: + +- True (verdadeiro) +- False (falso) + +Para que o Python entenda, você precisa escrever exatamente 'True' (primeira letra maiúscula e as outras minúsculas - mas sem as aspas). **true, TRUE ou tRUE não vão funcionar - só True está correto.** (A mesma coisa vale para 'False'). + +Booleanos também podem ser variáveis! Veja: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Você também pode fazer desse jeito: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Pratique e divirta-se com os valores booleanos tentando executar os seguintes comandos: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Parabéns! Booleanos são um dos recursos mais interessantes na programação, e você acabou de aprender como usá-los! + +# Salve! + +> Para leitoras em casa: esta seção é abordada no vídeo [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Até agora, escrevemos todos os códigos no interpretador de Python, que nos limita a digitar uma linha por vez. Programas normais são salvos em arquivos e executados pelo nosso **interpretador** de linguagem de programação ou **compilador**. Até aqui, executamos nossos programas uma linha de cada vez no **interpretador** de Python. Vamos precisar de mais de uma linha de código para as próximas tarefas, então vamos rapidamente: + +- Sair do interpretador de Python +- Abrir o editor de código que escolhemos antes +- Salvar algum código em um novo arquivo de Python +- Executar o código! + +Para sair do interpretador de Python, use a função `exit()`. + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Isso vai levá-la de volta ao prompt de comando. + +Mais cedo, nós escolhemos um editor de código da seção [code editor](../code_editor/README.md). Vamos precisar abrir o editor agora e escrever algum código em um novo arquivo (ou se você estiver utilizando um Chromebook, crie um novo arquivo no IDE da nuvem e o abra, que será incluso ao editor): + +{% filename %}editor{% endfilename %} + +```python +print('Hello, Django girls!') +``` + +Você já é uma desenvolvedora Python bastante experiente, então sinta-se livre para escrever códigos com o que aprendeu hoje. ;) + +Agora, precisamos salvar o arquivo e dar a ele um nome descritivo. Vamos nomear o arquivo **python_intro.py** e salvá-lo na sua área de trabalho. Podemos chamá-lo como quisermos, mas é importante que o nome termine com **.py**. A extensão **.py** diz ao sistema operacional que esse é um **arquivo Python executável** e o interpretador de Python pode rodá-lo. + +> **Observação**: Você deve reparar numa das coisas mais legais nos editores de código: cores! No interpretador de Python, tudo é da mesma cor, mas no editor você deve estar vendo que a função `print` tem uma cor diferente da string que ela recebe como argumento. Isso se chama destaque de sintaxe ("syntax highlightning", do Inglês) e é uma funcionalidade muito útil quando escrevemos código. As cores de cada elemento nos dão dicas importantes. Elas avisam, por exemplo, sobre strings que esquecemos de fechar ou palavras reservadas que digitamos errado (como a palavra `def` na definição de uma função, que veremos adiante). Esta é uma das razões pelas quais usamos um editor de código. :) + +O arquivo está salvo, então é hora de executá-lo! Com as habilidades que você aprendeu na seção sobre linhas de comando, use o terminal para **ir para os diretórios no desktop**. + + + +Em um Mac, o comando é esse: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +No Linux, ficará assim: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Lembre-se de que a palavra "Desktop" pode estar traduzida para o seu idioma local.) + + + + + +No prompt de comando Windows, é assim: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +E no Windows Powershell, é assim: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Se você tiver alguma dificuldade, é só pedir ajuda. Sua monitora está aqui para isso! + +Agora, use o interpretador de Python para executar o código que está no arquivo, assim: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Hello, Django girls! + + +Observação: no Windows, 'python3' não é reconhecido como um comando. Em vez disso, use 'python' para executar o arquivo: + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Muito bom! Você acabou de rodar o seu primeiro programa Python que foi salvo a um arquivo. Sente-se incrível? + +Agora, você pode começar a aprender uma ferramenta essencial na programação: + +## If … elif … else + +Várias coisas em um código só podem ser executadas se determinadas condições forem atendidas. É por isso que o Python tem um comando chamado **if**. + +Substitua o código no arquivo **python_intro.py** pelo seguinte: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Se você salvar e executar esse código, verá um erro como este: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +O Python espera que lhe demos instruções que devem ser executadas caso a condição `3 > 2` seja verdadeira (ou `True`). Vamos tentar fazer o Python mostrar na tela o texto "Funciona!". Altere o seu código no seu arquivo **python_intro.py** para isto: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('Funciona!') +``` + +Notou que a linha após o "if" começa com 4 espaços? Precisamos dessa endentação para que o Python saiba quais linhas executar se a condição dentro do if for verdadeira. Você pode quantos espaços quiser, mas por convenção os programadores Python usam 4, para que os códigos fiquem mais uniformes. Uma tabulação conta como quatro espaços se você configurar seu editor de texto assim. Quando escolher quantos espaços usar, não mude! Se começou a endentar com quatro espaços, siga esse padrão em todo o código - ou você poderá encontrar problemas. + +Salve-o e execute novamente: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +Funciona! +``` + +Observação: Lembre-se que no Windows 'python3' não é reconhecido como um comando. Se você usa esse sistema operacional, de agora em diante, substitua 'python3' 'python' para executar o arquivo. + +### E se uma condição não for verdadeira? + +Nos exemplos anteriores, o código foi executado somente quando as condições eram verdadeiras, mas o Python também tem as instruções `elif` e `else`: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 é maior que 2') +else: + print('5 não é maior que 2') +``` + +Quando esse código for executado, o Python mostrará: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 é maior que 2 + + +Se 2 fosse um número maior que 5, o segundo comando seria executado. Fácil, né? Vamos ver como funciona o `elif`: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Sonja' +if name == 'Ola': + print('Olá Ola!') +elif name == 'Sonja': + print('Olá Sonja!') +else: + print('Olá estranho!') +``` + +e executando: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Olá Sonja! + + +Viu o que aconteceu? O `elif` possibilita adicionar uma condição que só vai ser executada se a primeira condição for falsa. + +Você pode adicionar quantos `elif` quiser depois do `if`. Por exemplo: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("Está um pouco baixo") +elif 20 <= volume < 40: + print("Está bom para música ambiente") +elif 40 <= volume < 60: + print("Perfeito, posso ouvir todos os detalhes") +elif 60 <= volume < 80: + print("Ótimo para festas!") +elif 80 <= volume < 100: + print("Está muito alto!") +else: + print("Meus ouvidos doem! :(") +``` + +O Python testa cada condição na sequência em que aparece no código e então mostra: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Perfeito, posso ouvir todos os detalhes + + +## Comentários + +Comentários são linhas que começam com `#`. Você pode escrever o que quiser após o # `` e o Python vai ignorar. Comentários podem tornar seu código mais fácil para outras pessoas entenderem. + +Vamos ver como funciona: + +{% filename %}python_intro.py{% endfilename %} + +```python +# Mudar o volume se estiver muito alto ou muito baixo +if volume < 20 or volume > 80 + volume = 50 + print("Bem melhor!") +``` + +Você não precisa escrever um comentário para cada linha de código, mas eles são úteis para explicar porque o seu código faz alguma coisa ou para fornecer um breve resumo de algo mais complexo. + +### Sumário + +Nos últimos exercícios você aprendeu: + +- a **comparar coisas** - em Python, você pode comparar objetos usando os operadores `>`, `>=`, `==`, `<=`, `<` e `and`, `or`; +- **booleano** - um tipo de objeto que só tem dois valores possíveis: `True` ou `False`; +- a **salvar arquivos** - armazenar código em arquivos para que você possa executar programas maiores; +- **if... elif... else** - instruções que permitem que você execute o código somente se determinadas condições forem atendidas; +- **comentários** - linhas que o Python não executa e que permitem que você documente seu código. + +É hora da última parte deste capítulo! + +## Suas próprias funções! + +> Para leitoras em casa: esta parte do capítulo é abordada no vídeo [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Lembra de funções como `len()`? Boas notícias: agora você vai aprender como escrever suas próprias funções! + +Uma função é um sequência de instruções que o Python deve executar. Cada função em Python se inicia com a palavra reservada `def`, possui um nome e pode ter parâmetros. Vamos fazer uma tentativa. Substitua o código no **python_intro.py** com o seguinte: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(): + print('Olá!') + print('Tudo bem?') + +hi() +``` + +Ok, nossa primeira função está pronta! + +Você pode se perguntar por que escrevemos o nome da função na parte inferior do arquivo. Isto é porque Python lê o arquivo e executa-lo de cima para baixo. Então, para usar a nossa função, temos re-escrevê-lo na parte inferior. + +Vamos executá-lo agora e ver o que acontece: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Olá! + Tudo bem? + + +Observação: se não funcionou, não entre em pânico! A saída (o output) vai te ajudar a entender o que aconteceu: + +- Se você recebeu uma mensagem `NameError`, provavelmente foi um erro de digitação, então confira se usou o mesmo nome ao criar a função com `def hi()` e quando a chamou no final com `hi()`. +- Se recebeu uma mensagem `IdentationError`, confira se as duas linhas de `print` têm o mesmo recuo no começo: o Python precisa que o código dentro da função esteja bem alinhado. +- Se a função não retornou nenhum resultado, certifique-se de que o útlimo `hi()`*não* esteja endentado - se ele estiver, essa linha vai se tornar parte da função e o Python não vai receber nenhum comando para executar. + +Foi fácil, né? Vamos construir nossa primeira função com parâmetros. Usaremos o exemplo anterior - uma função que diz 'olá' para quem o executa - com o nome dessa pessoa: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Como você pode ver, agora demos um parâmetro chamado `name` para nossa função: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + if name == 'Ola': + print('Olá Ola!') + elif name == 'Sonja': + print('Olá Sonja!') + else: + print('Olá estranho!') + +hi() +``` + +Não esqueça: a função `print` está endentada com 4 espaços depois do `if`. Isso é necessário porque a função só rodará se a condição for verdadeira. Vamos ver como isso funciona: + +{% 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, um erro. Felizmente, Python nos fornece uma mensagem de erro bastante útil. Ela diz que a função `hi()` (aquela que declaramos) tem um argumento obrigatório (chamado `name`) e que nós esquecemos de passá-lo ao chamar a função. Vamos corrigi-lo na parte inferior do arquivo: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ola") +``` + +E rode novamente: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Olá Ola! + + +E se mudarmos o nome? + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Sonja") +``` + +E rode novamente: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Olá Sonja! + + +Agora, o que você acha que aconteceria se escrevesse um outro nome (diferente de "Ola" ou "Sonja")? Faça um teste e veja se estava certa. Deve aparecer o seguinte: + +{% filename %}command-line{% endfilename %} + + Olá estranho! + + +Legal, né? Dessa maneira você não precisa se repetir (Dry - don't repeat yourself) cada vez que for mudar o nome da pessoa que a função pretende cumprimentar. E é exatamente por isso que precisamos de funções - você não quer precisar repetir seu código! + +Vamos fazer algo mais inteligente - há mais de dois nomes e escrever uma condição para cada um seria difícil, certo? Modifique o conteúdo do seu arquivo com o seguinte: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Olá ' + name + '!') + +hi("Rachel") +``` + +Vamos chamar o código agora: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Olá Rachel! + + +Parabéns! Você acabou de aprender como criar funções. :) + +## Laços + +> Para leitoras em casa: esta parte do capítulo é abordada no vídeo [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +Essa já é a última parte do capítulo! Rápido, né? :) + +Programadores não gostam de repetir código. Programar é automatizar coisas, então não queremos cumprimentar cada pessoa manualmente, certo? É aí que entram os laços (ou "loops", em Inglês). + +Ainda se lembra das listas? Vamos fazer uma lista de garotas: + +{% filename %}python_intro.py{% endfilename %} + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'você'] +``` + +Queremos cumprimentar todas elas pelos seus nomes. Temos a função `hi` para fazer isso, então vamos usá-la em um laço: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +A instrução `for` se comporta de maneira similar ao `if`; o código abaixo de qualquer uma destas instrução deve ser endentado com quatro espaços. + +Aqui está o código completo que será salvo no arquivo: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Olá ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'você'] +for name in girls: + hi(name) + print('Próxima') +``` + +E quando rodamos: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Olá Rachel! + Próxima + Olá Monica! + Próxima + Olá Phoebe! + Próxima + Olá Ola! + Próxima + Olá você! + Próxima + + +Como você pode ver, tudo o que colocar dentro de uma instrução `for` com endentação será repetido para cada elemento da lista `girls`. + +Você também pode usar o `for` em números usando a função `range`: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Que deve imprimir: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` é uma função que cria uma lista de números que se seguem um após o outro (os números são dados por você como parâmetros). + +Note que o segundo desses dois números não está incluído na lista que o Python mostrou (em `range(1, 6)`, conta de 1 a 5, mas o 6 não é incluído). Isso porque o intervalo é semiaberto, o que significa que ele inclui o primeiro valor, mas não o último. + +## Sumário + +É isso. **Arrasou!** Esse foi um capítulo difícil, então você deve estar orgulhosa. Nós estamos orgulhosas de você por ter conseguido ir tão longe! + +Para um tutorial de Python oficial e completo, visite https://docs.python.org/3/tutorial/. Lá você encontrará um guia da linguagem mais exaustivo e completo. Até lá :) + +Talvez você queira fazer uma breve pausa - se espreguiçar, andar um pouco, descansar os olhos - antes de ir para o próximo capítulo. :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/pt/python_introduction/images/cupcake.png b/pt/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/pt/python_introduction/images/cupcake.png differ diff --git a/pt/template_extending/README.md b/pt/template_extending/README.md new file mode 100755 index 00000000000..dae006b6b08 --- /dev/null +++ b/pt/template_extending/README.md @@ -0,0 +1,147 @@ +# Estendendo os templates + +Outra coisa boa que o Django tem para você é o **template extending** - extensão de templates. O que isso significa? Significa que você pode usar as mesmas partes do seu HTML em diferentes páginas do seu site. + +Templates ajudam quando você quer usar a mesma informação ou layout em mais de um lugar. Você não precisa se repetir em todos os arquivos. E, caso queira mudar algo, você não precisa fazê-lo em todos os templates, apenas em um! + +## Criando um template base + +Um template base é o template mais básico sobre o qual você construirá em cada página do seu site. + +Vamos criar um arquivo `base.html` na pasta `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +Em seguida, abra o arquivo no editor de código e copie tudo de `post_list.html` para `base.html`, desse jeito: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Então, em `base.html`, substitua todo o seu `` (tudo entre `` e ``) por isso: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Você pode ver que essa ação substituiu tudo a partir de `{% for post in posts %}` até `{% endfor %}` por: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Mas por quê? Você acabou de criar um `bloco`! Você usou o a etiqueta de template (template tag) `{% block %}` para criar uma área que terá HTML inserido nela. Esse HTML virá de outro template que vai estender este template (`base.html`). Nós vamos te mostrar como fazer isso já já. + +Agora, salve `base.html` e abra novamente o seu `blog/templates/blog/post_list.html` no editor de código. {% raw %} Remova tudo acima de `{% for post in posts %}` e abaixo de `{% endfor %}`. Quando terminar, o arquivo deve estar parecido com isso: {% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Queremos usar isso como parte do nosso template para todos os blocos de conteúdo. É hora de adicionar as tags (etiquetas) de blocos neste arquivo! + +{% raw %}Você quer que sua etiqueta de bloco coincida com a etiqueta no seu arquivo `base.html`. Você também quer que inclua todo o código que pertence aos seus blocos de conteúdo. Para isso, coloque tudo entre `{% block content %}` e `{% endblock %}`. Assim:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Só falta uma coisa. Precisamos juntar estes dois templates. Isto é o que significa 'estender templates'! Vamos fazer isso adicionando uma etiqueta de extensão ao início do arquivo. Assim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +É isso! Salve o arquivo e veja se o seu site ainda está funcionando corretamente. :) + +> Se você receber o erro `TemplateDoesNotExist`, significa que não há um arquivo em `blog/base.html` e você está rodando o `runserver` na janela do terminal. Tente encerrá-lo (apertando Ctrl+C -- as teclas Control e C juntas) e reiniciá-lo rodando o comando `python manage.py runserver`. \ No newline at end of file diff --git a/pt/whats_next/README.md b/pt/whats_next/README.md new file mode 100755 index 00000000000..988ea4e715f --- /dev/null +++ b/pt/whats_next/README.md @@ -0,0 +1,42 @@ +# O que vem agora? + +Parabéns! Você **arrasou**. Estamos orgulhosas! <3 + +### O que fazer agora? + +Tire uma pausa e relaxe! Você acabou de fazer algo realmente grande. + +Depois disso, certifique-se de seguir o Django Girls no [Facebook](http://facebook.com/djangogirls) ou no [Twitter](https://twitter.com/djangogirls) para se manter atualizada. + +### Vocês podem recomendar outras fontes de informação? + +Sim! Existem *muitos* recursos online para aprender todos os tipos de habilidade de programação – pode ser bastante assustador decidir para onde prosseguir, mas nos te damos cobertura. Quaisquer que fossem seus interesses antes de vir à Django Girls, e quaisquer interesses você tenha adquirido ao longo do tutorial, aqui estão alguns recursos gratuitos (ou recursos com grandes partes gratuitas) que você pode usar para chegar até onde deseja estar. + +#### Django + +- Nosso outro livro: [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Tutorial oficial do Django](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) +- [Começando com as aulas de vídeo do Django](http://www.gettingstartedwithdjango.com/) + +#### HTML, CSS and JavaScript + +- [Curso de desenvolvimento web do Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Curso de Python do Code Academy](https://www.codecademy.com/learn/learn-python) +- [Curso Python do Google](https://developers.google.com/edu/python/) +- Livro [Learn Python The Hard Way](http://learnpythonthehardway.org/book/) - os exercícios iniciais são grátis +- [Tutoriais New Coder](http://newcoder.io/tutorials/) - uma variedade de exemplos práticos que você pode usar Python +- [edX](https://www.edx.org/course?search_query=python) – você pode assistir a maior parte dos cursos de graça, porem se você quiser um certificado ou créditos para validação em curso superior, então haverá um custo +- [Especialização em Python do Coursera](https://www.coursera.org/specializations/python) - alguns videos podem ser assistidos de graça e você pode ganhar um certificado por atender aos cursos +- [Python para todos](https://www.py4e.com/) - uma versão gratuita e aberta do Coursera Python para especialização de todo mundo + +#### Trabalhando com dados + +- [Codecademy curso de data science](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – você pode assistir a maior parte dos cursos de graça, porem se você quiser um certificado ou créditos para validação em curso superior, então haverá um custo +- [Dataquest](https://www.dataquest.io/) – as primeiras 30 "missões" são gratuitas + +Mal podemos esperar para ver o que você vai construir da próxima vez! \ No newline at end of file diff --git a/python_installation/README.md b/python_installation/README.md deleted file mode 100644 index 96f1b0b32a9..00000000000 --- a/python_installation/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# Let’s start with Python - -Huh, it's exciting, right?! You'll write your first line of code in just a few minutes! - -But first, let us tell you what Python is. Python is a very popular programming language that can be used for creating websites, games, scientific software, graphics and much, much more. - -Python originated in the late 1980s and its main goal is to be readable by human beings (not only machines!), which is why it looks much simpler than other programming languages. This makes it easy to learn, but don't worry, Python is also really powerful! - -# Python installation - -*This subchapter is based on awesome tutorials by Geek Girls Carrots (http://django.carrots.pl/)* - -Django is written in Python. We need Python to do anything in Django. Let's start with installing it! We want you to install Python 3.4, so if you have any earlier version, you will need to upgrade it. - -### Windows - -You can download Python for Windows from the website https://www.python.org/download/releases/3.4.1/. After downloading the ***.msi** file, you should execute it (double-click on it) and follow the instructions there. It is important to remember the path (the directory) where you installed Python. It will be needed later! - -### Linux - -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: - - $ python3 --version - Python 3.4.1 - -If you don't have Python installed or if you want a different version, you can install it as follows: - -#### Ubuntu - -Type this command into your console: - - sudo apt-get install python3.4 - - -#### Fedora - -Use this command in your console: - - sudo yum install python3.4 - -### OS X - -You need to go to the website https://www.python.org/downloads/release/python-341/ and download the Python installer: - -* Download the *Mac OS X 64-bit/32-bit installer* *DMG* file, -* double click to open it, -* double click *Python.mpkg* to run the installer. - -Verify the installation was successful by opening the *Terminal* application and running the `python3` command: - - $ python3 --version - Python 3.4.1 - ----- - -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 are not going smoothly and it's better to ask for help from someone with more experience. diff --git a/python_introduction/README.md b/python_introduction/README.md deleted file mode 100644 index 98da1710b80..00000000000 --- a/python_introduction/README.md +++ /dev/null @@ -1,534 +0,0 @@ -# Introduction to Python - -> Part of this chapter is based on tutorials by Geek Girls Carrots (http://django.carrots.pl/). - -Let's write some code! - -## Python prompt - -To start playing with Python, we need to open up a *prompt* on your computer. How you get there depends on the operating system but once it's open, everything is equal. - -### Windows - -On Windows you need to go to Start menu → All Programs → Accessories → Command Prompt. - -A window should pop up on your screen. This window is a prompt, waiting for commands from you. We want to open up a Python console, so type in `python3` and hit Enter. - - C:\Users\Name> python3 - Python 3.4.1 (...) - Type "copyright", "credits" or "license" for more information. - >>> - -### Linux and OS X - -On Mac OS X you can do this by launching the `Terminal` application (it's in Applications → Utilities). On Linux, it's probably under Applications → Accessories → Terminal. - -A window should pop up on your screen. This window is a prompt, waiting for commands from you. We want to open up a Python console, so type in `python3` and hit Enter. - - $ python3 - Python 3.4.1 (...) - Type "copyright", "credits" or "license" for more information. - >>> - -## Your first Python command! - -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. - -If you want to exit the Python console at any point, just type `exit()` or use the shortcut `Ctrl + Z` for Windows and `Ctrl + D` for Mac/Linux. Then you won't see `>>>` any longer. - -But now, we don't want to exit the Python console. We want to learn more about it. Let's start with something really simple. For example, try typing some math, like `2 + 3` and hit Enter. - - >>> 2 + 3 - 5 - -Nice! See how the answer popped out? Python knows math! You could try other commands like: -- `4 * 5` -- `5 - 1` -- `40 / 2` - -Have fun with this for a little while and then get back here :). - -As you can see, Python is a great calculator. If you're wondering what else you can do... - -## Strings - -How about your name? Type your first name in quotes like this: - - >>> "Ola" - 'Ola' - -You've now created your first string! It's a set of characters that can be processed by a computer. The string must always begin and end with the same character. This may be an apostrophe (`'`) or double quotes (`"`) - they tell Python that what's inside of them is a string. - -Strings can be strung together. Try this: - - >>> "Hi there " + "Ola" - 'Hi there Ola' - -You can also multiply strings with a number: - - >>> "Ola" * 3 - 'OlaOlaOla' - -Nice, huh? To see your name in uppercase letters, simply type: - - >>> "Ola".upper() - 'OLA' - -You just used the `upper` __function__ on your string! A function (like `upper()`) is a set of instructions that Python has to perform on a given object (`"Ola"`) once you call it. - -If you want to know the number of letters contained in your name, there is a function for that too! - - >>> len("Ola") - 3 - -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. - -### Summary - -OK, enough of strings. So far you've learned about: - -- __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. - -These are the basics of every programming language you learn. Ready for something harder? We bet you are! - -## Errors - -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: - - >>> len(304023) - Traceback (most recent call last): - File "", line 1, in - TypeError: object of type 'int' has no len() - -We got our first error! 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? - - >>> len(str(304023)) - 6 - -It worked! We used the `str` function inside of the `len` function. `str()` converts everything to strings. - -- The `str` function converts things into __strings__ -- The `int` function converts things into __integers__ - -> Important: we can convert numbers into text, but we can't necessarily convert text into numbers - what would `int('hello')` be anyway? - -## Variables - -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. - -Let's say we want to create a new variable called `name`: - - >>> name = "Ola" - -You see? It's easy! It's simply: name equals Ola. - -As you've noticed, your program didn't return anything like it did before. So how do we know that the variable actually exists? Simply enter `name` and hit Enter: - - >>> name - 'Ola' - -Yippee! Your first variable :)! You can always change what it refers to: - - >>> name = "Sonja" - >>> name - 'Sonja' - -You can use it in functions too: - - >>> len(name) - 5 - -Awesome, right? Of course, variables can be anything, so numbers too! Try this: - - >>> a = 4 - >>> b = 6 - >>> a * b - 24 - -Play with this for a while and see what you can do! - -## Lists - -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: they are objects which are lists of other objects :) - -Go ahead and create a list: - - >>> [] - [] - -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: - - >>> lottery = [3, 42, 12, 19, 30, 59] - -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! - - >>> len(lottery) - 6 - -Yes! `len()` can give you a number of objects in a list. Handy, right? Maybe we will sort it now: - - >>> lottery.sort() - -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: - - >>> print(lottery) - [3, 12, 19, 30, 42, 59] - -As you can see, the numbers in your list are now sorted from the lowest to highest value. Congrats! - -Maybe we want to reverse that order? Let's do that! - - >>> lottery.reverse() - >>> print(lottery) - [59, 42, 30, 19, 12, 3] - -Easy, right? If you want to add something to your list, you can do this by typing this command: - - >>> lottery.append(199) - >>> print(lottery) - [59, 42, 30, 19, 12, 3, 199] - -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. Computer people like 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: - - >>> print(lottery[0]) - 59 - >>> print(lottery[1]) - 42 - -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. - -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 - -## Dictionaries - -A dictionary is similar to a list, but you access values by looking up a key instead of an index. A key can be any string or number. The syntax to define a dictionary is: - - >>> {} - {} - -This shows that you just created an empty dictionary. Hurray! - -Now, try writing the following command: - - >>> django_dolls = {'Dottie' : 15, 'Lottie' : 305, 'EmmyLou' : 17} - -Don't be surprised with the weird names. Go to the link: http://hubpages.com/hub/50-Doll-Names to look for more cute doll names. :P Just Kidding (You should do this if and only if you have a lot of time). - -Above, you just created a variable named django_dolls with three key-value pairs. The key Dottie points to the value 15, Lottie points to the value 305, EmmyLou points to the value 17. - -When to use a dictionary or a list? Well, a good point to ponder on. Just have a soltuion in mind before looking at the answer in the next line. - -- Do you just need an ordered sequence of items? Go for a list. -- Do you need to associate values with keys, so you can look them up efficiently (by key) later on? Use a dictionary. - -Dictionaries are mutable like "lists" meaning that they can be changed after they are created. You can add new key/value pairs to the dictionary after it is created, like: - - >>> django_dolls['Jilly'] = 67 - -Like the lists, using len() method on the dictionaries, returns the number of key-value pairs in the dictionary. Go ahead and type in the command: - - >>> len(django_dolls) - 4 - -I hope it makes sense uptil now. :) Ready for some more fun with Dictionaries? Hop on the next line for some amazing things. - -You can use del() command to delete an item in the dictionary which has particular. Say, if you want to delete the entry corresponding to the key Dottie, just type in the following command: - - >>> del django_dolls['Dottie'] - >>> django_dolls - {'Jilly': 67, 'EmmyLou': 17, 'Lottie': 305} - -As you can see from the output, the key-value pair corresponding to 'Dottie' key has been deleted. - -Apart from this, you can also change a value associated with an already created key in the dictionary. Type: - - >>> django_dolls['Jilly'] = 100 - >>> django_dolls - {'Jilly': 100, 'EmmyLou': 17, 'Lottie': 305} - -As you can see, the value of the key 'Jilly' has been altered from 67 to 100. :) Exciting? Hurrah! You just learnt another amazing thing. - -### Summary - -Awesome! You know a lot about programming now. In this last part you learned about: - -- __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. - -Excited for the next part? :) - -## Compare things - -A big part of programming includes comparing things. What's the easiest thing to compare? Numbers, of course. Let's see how that works: - - >>> 5 > 2 - True - >>> 3 < 1 - False - >>> 5 > 2 * 2 - True - >>> 1 == 1 - True - -We gave Python some numbers to compare. As you can see, Python can compare not only numbers, but it can also compare method results. Nice, huh? - -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 `==` if you want to check if things are equal to each other. - -Give Python two more tasks: - - >>> 6 >= 12 / 2 - True - >>> 3 <= 2 - False - -`>` and `<` are easy, but what do `>=` and `<=` mean? Read them like this: - -- x `>` y means: x is greater than y -- x `<` y means: x is smaller than y -- x `<=` y means: x is smaller or equal to y -- x `>=` y means: x is greater or equal to y - -Awesome! Wanna do one more? Try this: - - >>> 6 > 2 and 2 < 3 - True - >>> 3 > 2 and 2 < 1 - False - >>> 3 > 2 or 2 < 1 - True - -You can give Python as many numbers to compare as you want, and it will give you an answer! Pretty smart, right? - -- __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 - -## Boolean - -Accidently, you just learned about a new type of object in Python. It's called a __boolean__ -- and it probably is the easiest type there is. - -There are only two boolean objects: -- True -- False - -But for Python to understand this, you need to always write it as True (first letter uppercased, with the rest of the letter lowercased). __true, TRUE, tRUE won't work -- only True is correct.__ (The same applies to False as well, of course.) - -Booleans can be variables, too! See here: - - >>> a = True - >>> a - True - -You can also do it this way: - - >>> a = 2 > 5 - >>> a - False - -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` - -Congrats! You can now move on to an essential tool in programming: - -## If...elif...else - -Lots of things in code should only be executed when given conditions are met. That's why Python has something called __if statements__. - -Try this: - - >>> if 3 > 2: - ... - -So far nothing has happened, as evidenced by the dots `...` instead of incentives `>>>` which we saw so far. Python expects us to give further instructions to it which are supposed to be executed if the condition `3 > 2` turns out to be true. Let’s try to make Python print “It works!”: - - >>> if 3 > 2: - ... print('It works!') - File "", line 2 - print('It works') - ^ - IndentationError: expected an indented block - -Well... something went wrong here! Python needs to know whether the instruction we have written is a continuation of `if` or a next instruction not covered by the condition. We need to indent our code to make it work: - - >>> if 3 > 2: - ... print('It works!') - ... - It works! - -All you need is one space after `...`. To avoid chaos, most Python programmers use four spaces for each level of indentation. - -Everything that is indented after the `if` statement will be executed if the condition is met. See: - - >>> if 3 > 2: - ... print('It works!') - ... print('Another command') - ... - It works! - Another command - -### What if not? - -In previous examples, code was executed only when the conditions were True. But Python also has `elif` and `else` statements: - - >>> if 5 > 2: - ... print('5 is indeed greater than 2') - ... else: - ... print('5 is not greater than 2') - ... - 5 is indeed greater than 2 - -If 2 were a greater number than 5, then the second command would be executed. Easy, right? Let's see how `elif` works: - - >>> name = 'Sonja' - >>> if name == 'Ola': - ... print('Hey Ola!') - ... elif name == 'Sonja': - ... print('Hey Sonja!') - ... else: - ... print('Hey anonymous!') - ... - Sonja! - -See what happened there? - -### Summary - -In the last three 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` -- __if...elif...else__ - statements that allow you to execute code only when certain conditions are met. - -Time for the last part of this chapter! - -## Your own functions! - -Remember functions like `len()` that you can execute in Python? Well, good news, you will learn how to write your own functions now! - -A function is a set 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 start with an easy one: - - >>> def hi(): - ... - -As you can see, there are those dots again! This means that nothing has really happened yet... and yes, we need to press the `Space` key before giving our instructions: - - >>> def hi(): - ... print('Hi there!') - ... print('How are you?') - ... - -Ok, our first function is ready! Press Enter to get back to the Python prompt again. Now let's execute our function: - - >>> hi() - Hi there! - How are you? - -Great! You're now a programmer, congratulate yourself :)! - -That was easy! Let's build our first function with parameters. We will use the previous example - a function that says hi to the person running it - with a name: - - >>> def hi(name): - ... - -As you can see, we now gave our function a parameter that we called `name`: - - >>> def hi(name): - ... if name == 'Ola': - ... print('Hi Ola!') - ... elif name == 'Sonja': - ... print('Hi Sonja!') - ... else: - ... print('Hi anonymous!') - ... - -As you can see, we needed to put two spaces before the `print` function, because `if` needs to know what should happen when the condition is met. Let's see how it works now: - - >>> hi("Ola") - Hi Ola! - >>> hi("Sonja") - Hi Sonja! - >>> hi("Anja") - Hi anonymous! - -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! - -Let's do something smarter -- there is more names than two, and writing a condition for each would be hard, right? - - >>> def hi(name): - ... print('Hi ' + name + '!') - ... - -Let's call the function now: - - >>> hi("Rachel") - Hi Rachel! - -Congratulations! You just learned how to write functions :)! - -## Loops - -That's the last part already. That was quick, right? :) - -As we mentioned, programmers are lazy, they 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. - -Remember lists yet? Let's do a list of girls: - - >>> girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] - -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: - - >>> for name in girls: - ... - -Dots again! Remember what goes after the dots? Yes, a space :) - - >>> for name in girls: - ... hi(name) - ... print('Next girl') - ... - Hi Rachel! - Next girl - Hi Monica! - Next girl - Hi Phoebe! - Next girl - Hi Ola! - Next girl - Hi You! - Next girl - -As you can see, everything you will put inside a `for` statement with space will be repeated for every element of the list `girls`. - -You can also use `for` on numbers using the `range` method: - - >>> for i in range(1, 6): - ... print(i) - ... - 1 - 2 - 3 - 4 - 5 - -`range` is a function that creates a list of numbers following one after the other (these numbers are provided by you as parameters). - -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). - -## Exiting Python - -You can exit Python and return to the command line using `exit()`. - -## Summary - -That's it. __You totally rock!__ This really wasn't so easy, so you should feel proud of yourself. We're definitely proud of you for making it to here! - -Grab yourself a cupcake and go to the next chapter :) - -![Cupcake](images/cupcake.png) diff --git a/python_introduction/images/cupcake.png b/python_introduction/images/cupcake.png deleted file mode 100644 index fa2f3baeae6..00000000000 Binary files a/python_introduction/images/cupcake.png and /dev/null differ diff --git a/ru/GLOSSARY.md b/ru/GLOSSARY.md new file mode 100755 index 00000000000..86fce21027d --- /dev/null +++ b/ru/GLOSSARY.md @@ -0,0 +1,3 @@ +# Текстовый редактор + +Текстовый редактор - это приложение, которое позволяет тебе сохранить свой код, чтобы вернуться к нему позднее. Информацию о том, где можно таким обзавестись, можно найти в главе [Текстовый редактор](./code_editor/README.md) \ No newline at end of file diff --git a/ru/README.md b/ru/README.md new file mode 100755 index 00000000000..397afd30aa4 --- /dev/null +++ b/ru/README.md @@ -0,0 +1,60 @@ +# Руководство Django Girls + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) + +> Это руководство распространяется под международной лицензией Creative Commons Attribution-ShareAlike 4.0 +Чтобы ознакомиться с содержанием этой лицензии, посети: https://creativecommons.org/licenses/by-sa/4.0/ + +## Вступительное слово + +Добро пожаловать в руководство Django Girls! Мы рады тебя здесь видеть :) В этом руководстве мы заглянем за кулисы веб-технологий и дадим +базовое представление о тех вещах, которые собираются в общую картину веба таким, каким мы его знаем. + +Как и с любой незнакомой темой – это будет приключением. Но не волнуйся, тебе уже хватило смелости оказаться здесь, так что всё будет хорошо :) + +## Введение + +Ты когда-нибудь чувствовала, что мир становится все более и более технологичным, в то время как ты остаёшься где-то позади? Ты задумывалась о том, как создать веб-сайт, но мотивации начать никогда не хватало? Приходило ли тебе в голову, что мир программного обеспечения слишком сложен, чтобы пробовать сделать что-то самой? + +Тогда у нас есть для тебя хорошие новости! Программирование – не такая уж сложная задача, как кажется, и мы покажем тебе, как весело это может быть. + +Это руководство не превратит тебя волшебным образом в программиста. Если ты хочешь добиться мастерства, то потребуются месяцы, а может быть и годы обучения и практики. Однако, мы хотим показать тебе, что программирование или создание веб-сайтов не настолько сложная задача как может показаться. Мы постараемся объяснить все настолько хорошо, насколько сможем, чтобы ты не чувствовала себя запуганной техническими деталями. + +Надеемся, что ты полюбишь информационные технологии также, как мы любим их! + +## Что ты узнаешь из этого руководства? + +После прохождения руководства у тебя будет простое работающее веб-приложение: свой собственный блог. Мы покажем, как разместить его онлайн, чтобы другие увидели твою работу! + +Он будет выглядеть следующим образом (более или менее): + +![Рисунок 0.1](images/application.png) + +> Если ты будешь работать над учебником самостоятельно и без тренера, который смог бы помочь при необходимости, то у нас есть для тебя чат: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge). Мы попросили наших тренеров и успешно прошедших обучение участников заглядывать туда время от времени и помогать остальным! Не стесняйся задавать там свои вопросы! + +Хорошо, [давай начнем с начала...][3] + + [3]: ./how_the_internet_works/README.md + +## Прохождение руководства дома + +Принимать участие в воркшопе Django Girls – это потрясающе, но мы понимаем, что не всегда есть такая возможность. Поэтому мы приветствуем прохождение +данного руководства дома. В настоящий момент мы готовим видео, которое поможет следовать руководству самостоятельно. Работа над ними ещё не закончена, +но все больше и больше тем скоро будут разобраны на YouTube-канале [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed). + +## Сотрудничество и дополнительная информация + +Это руководство поддерживается [DjangoGirls][4]. Если ты нашла ошибки или хочешь обновить информацию, пожалуйста, [следуй этим рекомендациям][5]. + + [4]: https://djangogirls.org/ + [5]: https://github.com/DjangoGirls/tutorial/blob/master/README.md + +## Хочешь помочь с переводом руководства на другие языки? + +В настоящее время перевод координируется через платформу crowdin.com: + +https://crowdin.com/project/django-girls-tutorial + +Если твоего языка нет в списке на crowdin, пожалуйста, [дай нам знать][6], чтобы мы могли его добавить. + + [6]: https://github.com/DjangoGirls/tutorial/issues/new diff --git a/ru/SUMMARY.md b/ru/SUMMARY.md new file mode 100755 index 00000000000..9d90c4e53dc --- /dev/null +++ b/ru/SUMMARY.md @@ -0,0 +1,27 @@ +# Содержание + +* [Введение](README.md) +* [Установка](installation/README.md) +* [Установка (chromebook)](chromebook_setup/README.md) +* [Как работает Интернет](how_the_internet_works/README.md) +* [Знакомство с командной строкой](intro_to_command_line/README.md) +* [Установка Python](python_installation/README.md) +* [Текстовый редактор](code_editor/README.md) +* [Введение в Python](python_introduction/README.md) +* [Что же представляет из себя Django?](django/README.md) +* [Установка Django](django_installation/README.md) +* [Твой первый проект на Django!](django_start_project/README.md) +* [Модели Django](django_models/README.md) +* [Администрирование Django](django_admin/README.md) +* [Публикация в Интернет!](deploy/README.md) +* [URL-адреса Django](django_urls/README.md) +* [Представления в Django – время создавать!](django_views/README.md) +* [Введение в HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Динамически изменяющиеся данные в шаблонах](dynamic_data_in_templates/README.md) +* [Шаблоны Django](django_templates/README.md) +* [CSS - сделай это красивым](css/README.md) +* [Расширение шаблона](template_extending/README.md) +* [Расширяем свое приложение](extend_your_application/README.md) +* [Формы в Django](django_forms/README.md) +* [Что дальше?](whats_next/README.md) diff --git a/ru/chromebook_setup/README.md b/ru/chromebook_setup/README.md new file mode 100644 index 00000000000..e72aa319db3 --- /dev/null +++ b/ru/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Настройка Chromebook + +> **Примечание** Если ты уже прошла раздел Установка, не нужно делать это снова – можно перейти прямо к [Введению в Python](../python_introduction/README.md) + +{% include "/chromebook_setup/instructions.md" %} diff --git a/ru/chromebook_setup/instructions.md b/ru/chromebook_setup/instructions.md new file mode 100644 index 00000000000..b2a16f03a76 --- /dev/null +++ b/ru/chromebook_setup/instructions.md @@ -0,0 +1,98 @@ +Если ты не используешь Chromebook, можешь пропустить эту секцию. +В противном случае процесс установки будет немного другим, и тебе нужно будет пройти только эту инструкцию по установке. + + +### Облачная IDE (PaizaCloud Cloud IDE, AWS Cloud9) + +Облачная IDE — это инструмент, который предоставляет тебе редактор кода и доступ к компьютеру, +запущенному в интернете. На этом удалённом компьютере ты можешь устанавливать, создавать и запускать программы. +На время прохождения этого руководства облачная IDE будет вести себя как _локальный компьютер_. +Ты будешь так же, как и другие участницы с macOS, Ubuntu или Windows, выполнять команды в командной строке, +но она будет подключена к компьютеру облачной IDE, который находится где-то в другом месте. + +Ниже ты увидишь инструкции для настройки облачных IDE (PaizaCloud Cloud IDE, AWS Cloud9). +Ты можешь выбрать одну из них и выполнить соответствующие действия. + +#### PaizaCloud Cloud IDE + +1. Перейди на сайт [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Войди в свой аккаунт +3. Нажми _New Server_ +4. Нажми кнопку Terminal (в левой части окна) + +Теперь ты должна увидеть интерфейс с боковой панелью, кнопки расположены слева. +Нажми кнопку "Terminal", чтобы открыть командную строку. Ты увидишь приглашение командной строки: + +{% filename %}Terminal{% endfilename %} +``` +$ +``` + +Командная строка в PaizaCloud Cloud IDE готова к твоим командам. +Ты можешь изменить размер этого окна, чтобы сделать его немного больше. + + +#### AWS Cloud9 + +1. Перейди на сайт [AWS Cloud9](https://aws.amazon.com/cloud9/) +2. Войди в свой аккаунт +3. Нажми _Create Environment_ + +Теперь ты должна увидеть интерфейс с боковой панелью, большим основным окном с текстом, +а также маленьким окошком снизу, которое выглядит как-то так: + +{% filename %}bash{% endfilename %} +``` +yourusername:~/workspace $ +``` + +Эта область внизу и есть твоя командная строка. Ты можешь использовать её, чтобы давать команды +удалённому компьютеру в Cloud9. Ты можешь изменить размер этого окна, чтобы сделать его немного больше. + + +### Виртуальное окружение + +Виртуальное окружение (его также называют virtualenv) похоже на личную коробку, куда мы можем +сложить полезный код для проекта, над которым работаем. Виртуальные окружения нужны нам, чтобы держать отдельно +разные кусочки кода для наших проектов — так они не перемешаются между разными проектами. + +В твоей командной строке в нижней части интерфейса Cloud 9 запусти следующие команды: + +{% filename %}Cloud 9{% endfilename %} +``` +sudo apt update +sudo apt install python3.6-venv +``` + +Если они не сработают, попроси своего тренера помочь. + +Далее запусти: + +{% filename %}Cloud 9{% endfilename %} +``` +mkdir djangogirls +cd djangogirls +python3.6 -mvenv myvenv +source myvenv/bin/activate +pip install django~={{ book.django_version }} +``` + +(обрати внимание, что в последней строчке мы используем сочетание тильды и знака равенства: `~=`). + +### GitHub + +Создай аккаунт на [GitHub](https://github.com). + +### PythonAnywhere + +Руководство Django Girls включает в себя раздел «Публикация». Этим словом описывается процесс, +когда ты переносишь код, запускающий твоё новое веб-приложение, на публично доступный компьютер +(он называется сервер), чтобы другие люди могли видеть результаты твоей работы. + +Если ты проходишь это руководство на Chromebook, этап публикации может выглядеть немного нетипично, так как +для разработки мы уже используем удалённый компьютер где-то в интернете (а, например, не мощности своего ноутбука). +Тем не менее, будет полезно пройти раздел «Публикация», ведь мы можем рассматривать наше рабочее пространство +в Cloud9 или PaizaCloud как место для незавершенной работы, а PythonAnywhere как место +для демонстрации законченных дел. + +Так что тебе нужно будет завести аккаунт на сайте [www.pythonanywhere.com](https://www.pythonanywhere.com). diff --git a/ru/code_editor/README.md b/ru/code_editor/README.md new file mode 100755 index 00000000000..326200c4c9a --- /dev/null +++ b/ru/code_editor/README.md @@ -0,0 +1,11 @@ +# Текстовый редактор + +> Для проходящих курс дома: эта глава рассмотрена в видео [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +Приступаем к написанию первых строк кода — пора загрузить текстовый редактор! + +> **Примечание:** Если ты используешь Chromebook, пропусти эту главу и следуй инструкциям в [Chromebook Setup](../chromebook_setup/README.md). Облачная IDE, которую ты выбрала (PaizaCloud Cloud IDE или AWS Cloud9), включает в себя редактор кода, и когда ты откроешь файл в IDE из файлового меню, редактор будет использоваться автоматически. + +> **Примечание:** если ты уже все сделала в главе, посвященной установке, то можешь смело переходить к следующей главе! + +{% include "/code_editor/instructions.md" %} diff --git a/ru/code_editor/instructions.md b/ru/code_editor/instructions.md new file mode 100755 index 00000000000..ab2aea568ad --- /dev/null +++ b/ru/code_editor/instructions.md @@ -0,0 +1,31 @@ +Существует много различных редакторов, и в основном все сводится к личным предпочтениям. Большинство Python-программистов используют сложные, но чрезвычайно мощные IDE (англ. Integrated Development Environments — Интегрированные среды разработки), такие как PyCharm. Однако они, вероятно, не очень подходят для начинающих; мы предлагаем столь же мощные, но куда более простые варианты. + +Ниже приведен перечень наших предпочтений, но также можешь попросить совета у своего тренера — будет проще получить помощь от него. + +## Gedit + +Gedit является открытым, бесплатным редактором, доступным для всех операционных систем. + +[Скачать его можно здесь](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text — это очень популярный текстовый редактор с бесплатным пробным периодом. Он легко устанавливается и прост в использовании, а также доступен для всех операционных систем. + +[Скачать его можно здесь](https://www.sublimetext.com/) + +## Atom + +Atom — это новейший текстовый редактор от [GitHub](https://github.com/). Он является бесплатным, открытым, легко устанавливается и прост в использовании. Доступен для Windows, OSX и Linux. + +[Скачать его можно здесь](https://atom.io/) + +## Зачем нам нужен редактор кода? + +Ты можешь спросить — зачем устанавливать отдельную программу для редактирования кода, если можно использовать Word или Notepad? + +Во-первых, код должен должен храниться в виде **простого текста**, а проблема таких программ, как Word или Textedit в том, что они не сохраняют файлы в этом виде, а используют "обогащённый" текст (с форматированием и шрифтами), например, [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +Вторая причина в том, что специализированные редакторы предоставляют множество полезных для программирования возможностей, таких как цветная подсветка кода в зависимости от его смысла и автоматически закрывающиеся кавычки. + +Позже мы увидим всё это в действии. Скоро ты начнешь думать о своем редакторе кода как о проверенном любимом инструменте :) diff --git a/ru/css/README.md b/ru/css/README.md new file mode 100755 index 00000000000..99c70cd6adf --- /dev/null +++ b/ru/css/README.md @@ -0,0 +1,309 @@ +# CSS — сделай это красиво! + +Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS. + +## Что такое CSS? + +Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы ;) + +Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело. + +## Давай использовать Bootstrap! + +Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/ + +Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира. + +## Установка Bootstrap + +Для установки Bootstrap тебе нужно добавить следующие строки в `` твоего `.html` файла (`blog/templates/blog/post_list.html`): + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + +``` + +Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат! + +![Рисунок 14.1][1] + + [1]: images/bootstrap1.png + +Выглядит уже лучше! + +## Статические файлы в Django + +Теперь мы ближе познакомимся с теми таинственными **статическими файлами**. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей. + +### Куда поместить статические файлы в Django + +Django уже знает, где искать статические файлы для встроенного приложения "admin". Теперь нам нужно добавить статические файлы для своего приложения `blog`. + +Мы сделаем это, создав папку `static` внутри каталога с нашим приложением: + +``` +djangogirls +├── blog +│ ├── migrations +│ ├── static +│   └── templates +└── mysite +``` + +Django будет автоматически находить папки `static` внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов. + +## Твой первый CSS файл! + +Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием `css` внутри твоей папки `static`. Затем создай новый файл под названием `blog.css` внутри папки `css`. Готово? + +``` +djangogirls +└─── blog + └─── static + └─── css + └─── blog.css +``` + +Пришло время написать несколько строк CSS! Открой файл `blog/static/css/blog.css` в своем редакторе кода. + +Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения. + +Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка? +Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с `#` и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться [предопределенными цветами][3], такими как `red` и `green`. + + [3]: http://www.w3schools.com/cssref/css_colornames.asp + +В файле `blog/static/css/blog.css` тебе нужно добавить следующий код: + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +h1 a { + color: #FCA205; +} +``` + +`h1 a` — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу `a` внутри элемента `h1` (например, когда у нас в коде что-то вроде: `

link

`). В этом случае мы говорим о том, что нужно изменить цвет элемента на `#FCA205`, то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет! + +В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть `a`, `h1`, `body`), атрибутом `class` или атрибутом `id`. Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега `a`, класса `external_link` или идентификатора `link_to_wiki_page`: + +```html + +``` + +Почитай про CSS селекторы в [CSS Selectors на w3schools][4]. + + [4]: http://www.w3schools.com/cssref/css_selectors.asp + +Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл `blog/templates/blog/post_list.html` и добавь эту строку в самое начало: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% load static %} +``` + +Мы просто загружаем здесь статические файлы :) +Далее между `` и ``, после ссылок на файлы Bootstrap CSS, добавь такую строку: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` +Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. +Мы только что сказали нашему шаблону, где находится наш CSS файл. + +Твой файл должен теперь выглядеть следующим образом: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Ок, сохрани файл и обнови страницу! + +![Рисунок 14.2][5] + + [5]: images/color2.png + +Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем! + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +body { + padding-left: 15px; +} +``` + +Добавь это к твоему CSS, сохрани файл и посмотри, как это работает! + +![Рисунок 14.3][6] + + [6]: images/margin2.png + +Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега `` в файле `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +``` + +Как и ранее, проверь порядок и вставь эту строку перед ссылкой на `blog/static/css/blog.css`. Эта строка импортирует шрифт под названием *Lobster* из шрифтов Google (https://www.google.com/fonts). + +Теперь добавь строку `font-family: 'Lobster';` в CSS файле `blog/static/css/blog.css` внутри блока определения стиля `h1 a` (код помещается между скобками `{` и `}`) и обнови страницу: + +{% filename %}blog/static/css/blog.css{% endfilename %} +```css +h1 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![Рисунок 14.3][7] + + [7]: images/font.png + +Отлично! + +Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково. + +Дадим имена определённым частям HTML кода. Добавь класс под названием `page-header` в блок `div`, содержащий наш заголовок, как это сделано здесь: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+

Django Girls Blog

+
+``` + +А теперь добавь класс `post` в твой `div`, содержащий сообщение в блоге: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа `.`, относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл `djangogirls/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; +} + +.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; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +Далее переделаем код HTML, отображающий посты, используя классы. Замени: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +в `blog/templates/blog/post_list.html` этим кодом: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +
+
+
+ {% for post in posts %} +
+
+

Опубликовано: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Сохрани эти файлы и обнови свой веб-сайт. + +![Рисунок 14.4][8] + + [8]: images/final.png + +Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть. + +Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие! + +В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс [Codeacademy HTML & CSS course](https://www.codecademy.com/tracks/web) в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS. + +Готова к следующей главе?! :) diff --git a/ru/css/images/bootstrap1.png b/ru/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/ru/css/images/bootstrap1.png differ diff --git a/ru/css/images/color2.png b/ru/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/ru/css/images/color2.png differ diff --git a/ru/css/images/final.png b/ru/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/ru/css/images/final.png differ diff --git a/ru/css/images/font.png b/ru/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/ru/css/images/font.png differ diff --git a/ru/css/images/margin2.png b/ru/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/ru/css/images/margin2.png differ diff --git a/ru/deploy/README.md b/ru/deploy/README.md new file mode 100755 index 00000000000..0b5ddb8ce89 --- /dev/null +++ b/ru/deploy/README.md @@ -0,0 +1,234 @@ +# Публикация в Интернете! + +> **Примечание**: Эта глава может показаться сложной. Будь упорна, развертывание сайта на сервере является важной частью веб-разработки. Данная глава намеренно расположена в середине учебника для того, чтобы твой наставник смог помочь с таким мудреным процессом, как публикация сайта. Так ты сможешь самостоятельно закончить все главы, даже если время будет поджимать. + +До настоящего момента твой сайт был доступен только для локального просмотра, теперь же ты узнаешь, как развернуть его на удалённом сервере! Развертывание (deploy) — это процесс публикации приложения в интернете, чтобы люди могли наконец увидеть твое творение :) + +Как ты уже знаешь, веб-сайт должен располагаться на сервере. Есть много компаний, предоставляющих сервера в интернете. Мы воспользуемся услугами одной из них, с довольно простым процессом публикации: [PythonAnywhere][1]. PythonAnywhere бесплатен для маленьких приложений с небольшим числом посетителей, и этого будет для нас более чем достаточно. + + [1]: https://www.pythonanywhere.com/ + +Другим внешним сервисом, которым мы воспользуемся, будет [GitHub][2] — сервис хостинга кода. Существуют и другие похожие сервисы, но практически у каждого программиста есть GitHub аккаунт, теперь будет и у тебя! + + [2]: https://www.github.com + +В итоге твой код будет в трёх местах. На локальном компьютере ты будешь заниматься разработкой и тестированием. Когда результат тебя устроит, ты загрузишь свою программу на GitHub. А твой сайт будет на PythonAnywhere, и ты сможешь обновлять его, просто загружая новую версию кода с GitHub. + +# Git + +> **Примечание:** если ты уже выполнила установку, незачем повторять её вновь — можешь сразу переходить к следующему разделу и начать создание собственного Git-репозитория. + +{% include "/deploy/install_git.md" %} + +## Создаём Git-репозиторий + +Git отслеживает изменения определенного набора файлов, который называется репозиторием (сокращенно "репо"). Давайте создадим такой для нашего проекта. Открой консоль и запусти эти команды в папке `djangogirls`: + +> **Примечание:** проверь текущий рабочий каталог с помощью команд `pwd` (OSX/Linux) или `cd` (Windows) перед инициализацией нового репозитория. Ты должна находиться в директории `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 +``` + +Инициализировать git-репозиторий придется только один раз за проект (и тебе больше не придется вводить имя пользователя и адрес электронной почты). + +Git будет отслеживать изменения всех файлов и каталогов в заданной директории, однако некоторые из них мы предпочли бы игнорировать. Для этого нам нужно создать файл `.gitignore` в корневом каталоге репозитория. Открой редактор и создай новый файл со следующим содержанием: + +{% filename %}.gitignore{% endfilename %} +``` +*.pyc +*~ +__pycache__ +myvenv +db.sqlite3 +/static +.DS_Store +``` + +И сохрани его как `.gitignore` в корневом каталоге "djangogirls". + +> **Примечание:** точка в начале имени файла имеет важное значение! Если у тебя есть проблемы с созданием таких файлов (Mac не позволит создать файл с названием, начинающимся с точки, через Finder, например), тогда используй кнопку «Сохранить как» в меню своего редактора кода, это точно поможет. + +> **Примечание:** среди файлов, которые мы перечислили в `.gitignore`, есть `db.sqlite3`. Этот файл содержит твою локальную базу данных, где будут храниться твои посты. Мы не добавляем его в репозиторий, поскольку твой сайт на PythonAnywhere будет использовать другую базу данных. Эта база данных тоже может быть SQLite, как на твоём рабочем компьютере, но обычно используется MySQL, которая может справиться с большим количеством посетителей, чем SQLite. В любом случае, поскольку мы не копируем базу данных SQLite на GitHub, все посты, которые ты уже создала, будут доступны только на твоём локальном компьютере, и тебе придётся заново создать их на опубликованном сайте. Рассматривай свою локальную базу данных как удобную игровую площадку, где ты можешь тестировать различные идеи и не бояться удалить настоящий пост из своего блога. + +Используй команду `git status` перед `git add` или в любой другой момент, когда ты не уверена, что изменения — хорошая идея. Это убережёт тебя от таких неприятных сюрпризов, как добавление неправильных файлов. Команда `git status` возвращает информацию обо всех ранее неотслеживаемых/изменённых/добавленных в git файлах, а также статус ветки и многое другое. Результат должен быть похож на: + +{% filename %}command-line{% endfilename %} +``` +$ 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) +``` + +И, наконец, мы сохраним наши изменения. Переключись на консоль и набери: + +{% filename %}command-line{% endfilename %} +``` +$ 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 + ``` + + +## Загружаем код в репозиторий GitHub + +Зайди на [GitHub.com][2] и создай новую бесплатную учётную запись (если это уже сделано во время подготовки к воркшопу — здорово!). Убедись, что запомнила свой пароль (добавь его в свой менеджер паролей, если им пользуешься). + +Затем создай новый репозиторий и назови его "my-first-blog". Не выбирай опцию "initialise with a README", не создавай файл .gitignore (мы уже сделали это сами) и оставь лицензию None. + +![][3] + + [3]: images/new_github_repo.png + +> **Примечание:** имя репозитория `my-first-blog` для нас очень важно — ты можешь, конечно, придумать другое название, но оно будет встречаться множество раз в руководстве, и тебе придется заменять его каждый раз на своё. Будет проще для начала остановиться на нашем варианте: `my-first-blog`. + +На следующем экране ты найдёшь URL для клонирования репозитория. Выбери вариант "HTTPS" и скопируй ссылку: + +![][4] + + [4]: images/github_get_repo_url_screenshot.png + +Теперь нужно связать локальный репозиторий с репозиторием на GitHub. + +Напечатай у себя в консоли следующую команду (замени `` на имя, указанное при создании аккаунта на GitHub, но без угловых скобок): + +{% filename %}command-line{% endfilename %} +``` +$ git remote add origin https://github.com//my-first-blog.git +$ git push -u origin master +``` + +Введи свое имя пользователя и пароль от аккаунта GitHub; ты должна увидеть что-то такое: + +{% filename %}command-line{% endfilename %} +``` +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. +``` + + + +Твой код теперь на GitHub. Зайди на сайт и проверь! Ты найдешь его в хорошей компании: [фреймворк Django][5], [этот учебник][6], а также многие другие великолепные проекты с исходным кодом размещены на GitHub :) + + + [5]: https://github.com/django/django + [6]: https://github.com/DjangoGirls/tutorial + +# Настройка блога на PythonAnywhere + +## Регистрация на PythonAnywhere + +> **Примечание:** возможно, ты уже завела учётную запись на PythonAnywhere ранее — если так, нет нужды повторять это вновь. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Настройка сайта на PythonAnywhere + +Вернись на [главную страницу PythonAnywhere](https://www.pythonanywhere.com/), кликнув логотип. Затем запусти Bash-консоль. Нажав на кнопку bash ты запускаешь командную строку, которая находится на серверах PythonAnywhere. Эта командная строка аналогична той, что есть на твоём собственном компьютере. + +Раздел «New Console» (новая консоль) в веб-интерфейсе PythonAnywhere с кнопкой «bash» + +> **Примечание:** PythonAnywhere использует Linux, так что если ты используешь Windows, то терминал и команды могут немного отличаться от того, к чему ты привыкла на своём компьютере. + +Чтобы опубликовать сайт на PythonAnywhere, нужно загрузить на PythonAnywhere твой код с Github и затем настроить PythonAnywhere так, чтобы он распознал твой код и запустил твоё веб-приложение. Существуют способы сделать это «вручную», но для PythonAnywhere есть программа-помощник, которая сделает это для тебя. Давай её установим. + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ pip3.6 install --user pythonanywhere +``` + +Когда ты это запустишь, в консоли будет печататься лог установки. Он начнётся с чего-то вроде `Collecting pythonanywhere`, а последней будет строчка `Successfully installed (...) pythonanywhere- (...)`. + +Теперь запустим эту вспомогательную утилиту, которую ты только что установила. Она настроит твоё приложение, скачав его код с GitHub. Напечатай следующее в консоли PythonAnywhere (не забудь использовать свой ник на GitHub вместо ``, URL в консольной команде должен совпадать с URL, используемым в команде clone): + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ pa_autoconfigure_django.py https://github.com//my-first-blog.git +``` + +Утилита будет печатать в консоль, что она делает: + +- Скачивает твой код с GitHub +- Создаёт виртуальное окружение на PythonAnywhere, такое же, как на твоём компьютере +- Обновляет твой файл настроек с настройками деплоя +- Создаёт базу данных на PythonAnywhere, используя команду `manage.py migrate` +- Разбирается с твоими статическими файлами (о них будет дальше) +- Настраивает PythonAnywhere так, чтобы твоё приложение было доступно в интернете + +Все эти шаги автоматизированы на PythonAnywhere, но они совершенно такие же, какие надо было бы совершить с любым другим хостинговым сервисом. + +Главное, на что нужно обратить внимание сейчас, — это то, что твоя база данных на PythonAnywhere никак не связана с базой данных на твоём компьютере. Поэтому там будут разные посты и разные аккаунты администраторов. Как следствие, для базы на PythonAnywhere необходимо создать аккаунт администратора так же, как ты это делала у себя локально с помощью команды `createsuperuser`. На PythonAnywhere заранее активировано виртуальное окружение, так что всё, что тебе нужно сделать — это запустить в консоли PythonAnywhere команду: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +(ola.pythonanywhere.com) $ python manage.py createsuperuser +``` + +Введи параметры для своего пользователя-админа. Лучше всего использовать те же самые данные, что и у тебя на локальном компьютере, чтобы избежать путаницы, если ты конечно не хочешь сделать пароль на сервере PythonAnywhere более надёжным. + +Сейчас, если хочешь, посмотри на файлы на PythonAnywhere с помощью команды `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 +``` + +Ты также можешь заглянуть на страницу «Files» и посмотреть, что лежит на сервере, используя встроенный в PythonAnywhere файловый менеджер. (Со страницы «Console» ты можешь попасть на другие страницы PythonAnywhere, используя кнопку меню в правом верхнем углу. Находясь на какой-либо странице, ты можешь найти ссылки на другие вверху.) + +## Ты в сети! + +Ура, твой сайт теперь доступен всем в интернете! Ты можешь найти ссылку на него на странице «Web» на PythonAnywhere. Этой ссылкой можно делиться с кем хочешь :) + +> **Примечание** Это туториал для начинающих, поэтому публикуя сайт, мы использовали несколько хаков, которые не очень хороши с точки зрения безопасности. Если ты захочешь сделать что-то на основе этого проекта или начать новый, прочитай [Django deployment checklist](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/) для советов по безопасности на твоём сайте. + +## Советы по отладке + +Если ты столкнулась с ошибкой, запуская скрипт `pa_autoconfigure_django.py`, вот несколько частых причин: + +- Ты забыла создать PythonAnywhere API токен +- Ошибка в GitHub URL +- Если ты видишь сообщение *"Could not find your settings.py"* (невозможно найти settings.py), это может быть вызвано тем, что ты не добавила все файлы в Git или не загрузила их на GitHub. Перечитай Git-секцию выше +- Если ты до этого уже регистрировала аккаунт на PythonAnywhere и наткнулась на ошибку collectstatic, вполне вероятно, что у тебя устаревшая версия SQLite (например, 3.8.2). В этом случае зарегистрируй новый аккаунт и попробуй ещё раз ввести команды, упомянутые в разделе __Настройка блога на PythonAnywhere__. + +Если ты столкнулась с ошибкой при попытке открыть свой сайт, первое место, где нужно искать отладочную информацию — твой **error log**. Ты найдёшь ссылку на него на странице ["Web"](https://www.pythonanywhere.com/web_app_setup/) на PythonAnywhere. Глянь, есть ли там какие-либо сообщения об ошибках; самые новые находятся внизу. + +Ещё есть [общие советы по отладке на PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +И помни, твой тренер здесь, чтобы помочь! + +# Ты в сети! + +Стандартная страница твоего сайта должна включать приветствие "It worked!", точно так же как было на локальном компьютере. Попробуй добавить `/admin/` к концу адреса сайта, и перейдёшь к панели администратора сайта. Войди под своим именем и паролем и увидишь форму для добавления новых записей в блог. + +После того, как создашь несколько записей, ты можешь вернуться к своей локальной версии приложения (а не на PythonAnywhere). С этого момента для внесения изменений тебе нужно работать в своей локальной версии. Это обычный подход в веб-программировании: изменять код локально, загружать изменения на GitHub, а затем подтягивать изменения на сервер с сайтом. Такой подход позволяет тебе работать и экспериментировать, не рискуя сломать свой сайт. Круто, правда? + +Ты заслужила *огромную* похвалу! Развёртывание сервера — одна из самых каверзных частей веб-разработки, и нередко уходит несколько дней, прежде чем заставишь всё работать. А у нас уже есть работающий в сети веб-сайт, вот так вот! diff --git a/ru/deploy/images/github_get_repo_url_screenshot.png b/ru/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/ru/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/ru/deploy/images/new_github_repo.png b/ru/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/ru/deploy/images/new_github_repo.png differ diff --git a/ru/deploy/images/pythonanywhere_account.png b/ru/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/ru/deploy/images/pythonanywhere_account.png differ diff --git a/ru/deploy/images/pythonanywhere_bash_console.png b/ru/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..68eb2a030e1 Binary files /dev/null and b/ru/deploy/images/pythonanywhere_bash_console.png differ diff --git a/ru/deploy/images/pythonanywhere_beginner_account_button.png b/ru/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/ru/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/ru/deploy/images/pythonanywhere_create_api_token.png b/ru/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/ru/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/ru/deploy/install_git.md b/ru/deploy/install_git.md new file mode 100755 index 00000000000..535df8ea1fc --- /dev/null +++ b/ru/deploy/install_git.md @@ -0,0 +1,50 @@ +Git — это «система управления версиями», используемая множеством программистов. Эта программа отслеживает изменения, происходящие с файлами, чтобы впоследствии можно было восстановить состояние кода на нужный момент времени. Это немного похоже на функцию отслеживания изменений в Microsoft Word, но куда мощнее. + +## Установка Git + + + +Ты можешь загрузить Git с официального сайта [git-scm.com](https://git-scm.com/). Ты можешь нажимать "дальше, дальше, дальше" на всех этапах установки за исключением одного: на пятом шаге, который называется "Adjusting your PATH environment" (Настройка системной переменной Path), выбери "Use Git and optional Unix tools from the Windows Command Prompt" (Запуск Git и соответствующих Unix утилит через командную строку Windows, нижняя опция). Все остальные настройки можно оставить по умолчанию. Также неплохо будет выбрать опцию "Checkout Windows-style, commit Unix-style line endings". + +После окончания установки не забудь перезапустить командную строку или PowerShell. + + + + +Загрузи Git с официального сайта [git-scm.com](https://git-scm.com/) и просто следуй инструкциям по установке. + +> **Примечание:** если ты используешь OS X 10.6, 10.7 или 10.8, тебе придётся установить git отсюда: [Установка Git для 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 +``` + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}command-line{% endfilename %} +```bash +$ sudo zypper install git +``` + + diff --git a/ru/deploy/signup_pythonanywhere.md b/ru/deploy/signup_pythonanywhere.md new file mode 100755 index 00000000000..60ef0201968 --- /dev/null +++ b/ru/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere — это сервис по запуску кода на Python в облаке. Мы будем использовать его, чтобы разместить наш сайт «вживую» в интернете. + +Создай аккаунт уровня "Beginner" на PythonAnywhere. Он бесплатный, так что кредитка не понадобится. + + * [www.pythonanywhere.com](https://www.pythonanywhere.com/) + + ![Страница регистрации на PythonAnywhere с кнопкой создания бесплатного 'Beginner' аккаунта](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Примечание:** при выборе имени пользователя помни, что URL блога примет вид `yourusername.pythonanywhere.com`, так что остановись либо на своём нике, либо на имени, связанном с тематикой блога. Кроме того, убедись в том, что запомнила пароль (сохрани его в своём менеджере паролей, если им пользуешься). + +## Создание API токена для PythonAnywhere + +Это нужно будет сделать только один раз. Когда ты зарегистрируешься на PythonAnywhere, откроется панель управления (dashboard). На ней в правом верхнем углу будет ссылка на страницу «Account»: + +![Account link on the top right on the page](../deploy/images/pythonanywhere_account.png) + +Там выбери вкладку «API token» и нажми кнопку, на которой написано «Create new API token» (создать новый 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/ru/django/README.md b/ru/django/README.md new file mode 100755 index 00000000000..23b9357582c --- /dev/null +++ b/ru/django/README.md @@ -0,0 +1,27 @@ +# Что такое Django? + +Django (*/ˈdʒæŋɡoʊ/ джанго*) — бесплатный и свободный фреймворк для веб-приложений, написанный на Python. Фреймворк — это набор компонентов, которые помогают разрабатывать веб-сайты быстро и просто. + +Каждый раз при разработке веб-сайтов требуются похожие компоненты: способ аутентифицировать пользователей (вход, выход, регистрация), панель управления сайтом, формы, инструменты для загрузки файлов и т. д. + +К счастью для нас, другие люди обратили внимание на возникновение однотипных проблем при веб-разработке, так что они объединились и создали фреймворки (Django и другие), которые предлагают нам готовые шаблоны для использования. + +Фреймворки существуют, чтобы облегчить процесс разработки и позволить нам не изобретать колесо. + +## Зачем нам нужен фреймворк? + +Чтобы понять, для чего же нам нужен Django, нам нужно ближе познакомиться с серверами. Во-первых, сервер должен узнать о том, что мы ждём от него веб-страницу. + +Представь себе почтовый ящик (порт), который проверяется на наличие новых писем (запросов). Это делает веб-сервер. Когда письмо приходит, сервер читает его и отправляет ответ с веб-страничкой. Однако чтобы что-то отправить, нам надо это что-то иметь. И Django как раз и отвечает за создание контента, который будет отправлен в ответе. + +## Что происходит, когда кто-то запрашивает веб-сайт у твоего сервера? + +Когда на сервер приходит запрос, он переадресуется Django, который пытается сообразить, что же конкретно от него просят. Для начала он берет адрес веб-страницы и пробует понять — что же нужно сделать. Эту часть процесса в Django выполняет **urlresolver** (адрес веб-сайта называется URL — Uniform Resource Locator — Единый указатель ресурсов, так что название *urlresolver*, resolver == распознаватель, имеет определенный смысл). Он не слишком умён, поэтому просто берет список шаблонов и пытается сопоставить их с URL. Django сверяет шаблоны сверху вниз и, если что-то совпадает, он перенаправляет запрос соответствующей функции (которая называется *view*). + +Представь себе почтальона с письмом. Она идет вниз по улице и сверяет номера домов с адресом на письме. Если они совпадают, то она оставляет письмо. Так же работает и urlresolver! + +Но самые интересные вещи происходят в функции *view*: мы, например, можем обращаться к базе данных за определенной информацией. Может быть, пользователь попросил изменить какую-нибудь информацию? Как будто в письме написано: "Пожалуйста, поменяйте описание моей работы." Функция *view* может проверить, имеете ли вы разрешение делать это, а затем обновит описание работы и отправит обратно ответ: "Готово!". Затем функция *view* сгенерирует ответ, и Django сможет отправить его веб-браузеру пользователя. + +В реальности все немного сложнее, однако тебе не обязательно знать все технические навороты прямо сейчас. Достаточно основной концепции. + +Так что вместо погружения в пучины нюансов мы просто начнем работать с Django и познакомимся со всеми важными особенностями по мере продвижения! diff --git a/ru/django_admin/README.md b/ru/django_admin/README.md new file mode 100755 index 00000000000..2b0578ed152 --- /dev/null +++ b/ru/django_admin/README.md @@ -0,0 +1,55 @@ +# Администрирование Django + +Чтобы добавлять, редактировать и удалять записи, для которых мы только что создали модель, мы используем панель управления администратора Django. + +Давай откроем файл `blog/admin.py` и заменим его содержимое на: + +{% filename %}blog/admin.py{% endfilename %} +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Как ты можешь заметить, мы импортировали (включили) модель Post, которую определили в предыдущей главе. Чтобы наша модель стала доступна на странице администрирования, нам нужно зарегистрировать её при помощи `admin.site.register(Post)`. + +Хорошо, теперь нам нужно взглянуть на модель Post. Не забудь запустить веб-сервер командой `python manage.py runserver`. Перейди в браузер и набери адрес http://127.0.0.1:8000/admin/. Ты увидишь страницу авторизации: + +![Страница авторизации][1] + + [1]: images/login_page2.png + +Чтобы залогиниться, тебе сначала нужно создать *суперпользователя (англ. superuser)* — пользователя, который имеет полный доступ к управлению сайтом. Вернись к командной строке, набери `python manage.py createsuperuser`, и нажми Enter. + +> Не забудь: чтобы выполнять команды во время работы сервера, открой новое окно терминала и активируй в нём виртуальное окружение. Мы описывали ввод новых команд в разделе Запуск веб-сервера главы Твой первый проект на Django!. + +При появлении запроса введи имя пользователя (строчными буквами, без пробелов), адрес электронной почты и пароль. Не беспокойся, если пароль не появляется на экране по мере ввода, так и задумано. Просто напечатай его и нажми `Enter`, чтобы продолжить. Результат должен выглядеть следующим образом (имя пользователя и почта, соответственно, будут твоими): + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py createsuperuser +Username: admin +Email address: admin@admin.com +Password: +Password (again): +Superuser created successfully. +``` + +Вернись в браузер и войди в систему при помощи имени пользователя и пароля, которые ты только что выбрала. Ты должна попасть в панель управления Django. + +![Администрирование Django][2] + + [2]: images/django_admin3.png + +Перейди к разделу Posts и немного поэкспериментируй с ним. Добавь пять или шесть постов. Не беспокойся о содержании — можешь просто скопировать и вставить текст из этого учебника, чтобы сэкономить время :) + +Убедись, что выбрала для двух или трёх записей (но не больше) дату публикации. Это пригодится позднее. + +![Администрирование Django][3] + + [3]: images/edit_post3.png + +Если ты хочешь узнать больше об администрировании Django, то ознакомься с этим разделом официальной документации: https://docs.djangoproject.com/en/1.11/ref/contrib/admin/. + +Сейчас, вероятно, подходящий момент, чтобы порадовать себя кружечкой кофе (или чая), а также съесть чего-нибудь для восполнения энергии. Ты только что создала свою первую модель Django и заслужила перерыв! diff --git a/ru/django_admin/images/django_admin3.png b/ru/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/ru/django_admin/images/django_admin3.png differ diff --git a/ru/django_admin/images/edit_post3.png b/ru/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/ru/django_admin/images/edit_post3.png differ diff --git a/ru/django_admin/images/images/django_admin3.png b/ru/django_admin/images/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/ru/django_admin/images/images/django_admin3.png differ diff --git a/ru/django_admin/images/images/edit_post3.png b/ru/django_admin/images/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/ru/django_admin/images/images/edit_post3.png differ diff --git a/ru/django_admin/images/images/login_page2.png b/ru/django_admin/images/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/ru/django_admin/images/images/login_page2.png differ diff --git a/ru/django_admin/images/login_page2.png b/ru/django_admin/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/ru/django_admin/images/login_page2.png differ diff --git a/ru/django_forms/README.md b/ru/django_forms/README.md new file mode 100755 index 00000000000..43c18372319 --- /dev/null +++ b/ru/django_forms/README.md @@ -0,0 +1,442 @@ +# Формы в Django + +Последним, что нам стоит сделать для нашего веб-сайта, является удобный способ добавления и редактирования записей. `admin`-панель Django удобна, но её дизайн сложно изменять. С `forms` (формами) у нас будет абсолютная власть над интерфейсом блога — мы сможем сделать практически всё, что только можно придумать! + +Формы Django удобны тем, что мы можем создать новую форму с нуля или воспользоваться `ModelForm` для сохранения содержимого формы в модель. + +Это как раз то, что нам нужно сделать: мы создадим форму для модели `Post`. + +Как и любая важная часть Django, формы имеют свой собственный файл: `forms.py`. + +Нам нужно создать файл с таким именем в директории `blog`. + +``` +blog +   └── forms.py +``` + +Теперь открой его и набери следующее: + +{% filename %}blog/forms.py{% endfilename %} +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Для начала нам нужно импортировать формы Django (`from django import forms`) и, разумеется, нашу модель `Post` (`from .models import Post`). + +`PostForm`, как ты, вероятно, подозреваешь, — это имя для нашей формы. Нам нужно также сообщить Django, что эта форма относится к `ModelForm` (чтобы он смог поколдовать для нас) — `forms.ModelForm` поможет с этим. + +Дальше у нас `class Meta`, где мы определяем, какая модель будет использоваться для создания формы (`model = Post`). + +В завершение мы можем указать, какие поля должны присутствовать в нашей форме. Сейчас нам требуются только поля `title` и `text` — `author` будет автоматически выбран в зависимости от авторизованного пользователя (тебя), а `created_date` должна автоматически проставляться в момент создания записи (т.е. через код), верно? + +Вот и всё! Теперь мы можем использовать форму в *представлении* и отобразить её в шаблоне. + +Поэтому снова нам необходимо создать ссылку на страницу, URL-адрес, представление и шаблон. + +## Ссылка на страницу с формой + +Пришло время открыть файл `blog/templates/blog/base.html`. Мы добавим ссылку в элемент `div` с именем `page-header`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +``` + +Обрати внимание, что мы назвали новое представление `post_new`. Класс `glyphicon glyphicon-plus` определён в используемой нами теме bootstrap — таким образом мы выведем значок плюса. + +После добавления строки твой html-файл должен выглядеть следующим образом: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +После сохранения файла и перезагрузки страницы по адресу http://127.0.0.1:8000 ты, конечно, увидишь знакомую ошибку `NoReverseMatch`, верно? + +## URL + +Нам нужно открыть файл `blog/urls.py` и добавить строку: + +{% filename %}blog/urls.py{% endfilename %} +```python +path('post/new/', views.post_new, name='post_new'), +``` + +Окончательная версия файла будет выглядеть следующим образом: + +{% filename %}blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +После перезагрузки веб-сайта мы увидим ошибку `AttributeError`, поскольку представление `post_new` не реализовано. Давай добавим его прямо сейчас. + +## Представление post_new + +Самое время открыть файл `blog/views.py` и добавить следующую строку к остальным, начинающимся с `from`: + +{% filename %}blog/views.py{% endfilename %} +```python +from .forms import PostForm +``` + +А затем наше *представление*: + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Чтобы создать новую форму `Post`, нам потребуется вызвать `PostForm()` и передать её шаблону. Мы ещё вернёмся к этому *представлению*, а пока давай быстро создадим шаблон под форму. + +## Шаблон + +Нам нужно создать файл `post_edit.html` в директории `blog/templates/blog`. Чтобы заставить форму работать, нам потребуется несколько вещей: + +- Нам нужно отобразить форму. Мы можем сделать это, к примеру, простым `{% raw %}{{ form.as_p }}{% endraw %}`. +- Строка выше должна быть обёрнута в HTML-теги `
...
` +- Нам потребуется кнопка `Save`. Мы добавим её при помощи HTML-кнопки: `` +- И, наконец, сразу после открытия тега `< form... >` мы должны добавить `{% raw %}{% csrf_token %}{% endraw %}`. Это очень важно, поскольку так мы делаем форму защищённой! Django будет ругаться, если ты забудешь добавить этот код: + +![Страница CSFR Forbidden][1] + + [1]: images/csrf2.png + +Хорошо, давай посмотрим, как должен выглядеть HTML-код в файле `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 }} + +
+{% endblock %} +``` + +Время обновить страницу! Ура! Форма отображается! + +![Новая форма][2] + + [2]: images/new_form2.png + +Но подожди минутку! Если ты наберёшь что-нибудь в полях `title` и `text` и попробуешь сохранить — что произойдёт? + +Ничего! Мы снова на той же странице и наш текст пропал... и новая запись не была добавлена. Так что же пошло не так? + +Ответ прост: ничего. Нам нужно сделать кое-что ещё, чтобы новое *представление* заработало. + +## Сохраняем данные из формы + +Снова открой файл `blog/views.py`. Всё, что у нас есть в представлении `post_new`, выглядит пока следующим образом: + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +После отправки формы мы возвращаемся к тому же представлению, но в этот раз с новыми данными в `request`, а точнее, в `request.POST` (имя POST не имеет ничего общего с "постом" в блоге, оно связано с тем, что мы "публикуем" данные). Помнишь, что в HTML-файле определение `
` имеет параметр `method="POST"`? Все поля формы теперь находятся в `request.POST`. Ты не должна переименовывать `POST` во что-то другое (другое доступное значение параметра `method` — `GET`, но у нас сейчас нет времени объяснять разницу). + +Получается, что в представлении *view* нам нужно обработать две разные ситуации. Первая: когда мы только зашли на страницу и хотим получить пустую форму. Вторая: когда мы возвращаемся к *представлению* со всей информацией, которую мы ввели в форму. Таким образом, нам потребуется ввести условие (для этого мы будем использовать условный оператор `if`): + +{% filename %}blog/views.py{% endfilename %} +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Теперь заполним строку, занятую `[...]`. Если `method` — `POST`, тогда мы хотим построить `PostForm` с данными из формы, верно? Мы добьёмся этого следующим образом: + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(request.POST) +``` + +Легко! Дальше мы проверим, корректна ли форма (все ли необходимые поля заполнены и не отправлено ли некорректных значений). Мы сделаем это при помощи `form.is_valid()`. + +Мы проверяем, допустимо ли содержимое формы, и, если всё в порядке, сохраняем её! + +{% 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() +``` + +Фактически мы выполняем две операции: сохраняем форму `form.save` и добавляем автора (поскольку обязательного поля `author` нет в `PostForm`!). `commit=False` означает, что мы пока не хотим сохранять модель `Post` — сначала нужно добавить автора. В основном ты будешь использовать `form.save()`, без `commit=False`, но в данном случае нам это пригодится. `post.save()` сохранит изменения (после добавления автора), и новая запись будет создана! + +Наконец, будет прекрасно, если мы сможем сразу переходить к странице `post_detail` после добавления новой записи, согласна? Для этого нам понадобится еще один импорт: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import redirect +``` + +Добавь эту строку в начало файла. Теперь мы можем сделать переадресацию на страницу `post_detail` для созданной записи: + +{% filename %}blog/views.py{% endfilename %} +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` — это имя представления, которое нам необходимо. Помнишь, что это *представление* требует переменную `pk`? Чтобы передать её представлению, мы используем аргумент `pk=post.pk`, где `post` — это новая запись в блоге! + +Хорошо, мы многое обсудили, пора взглянуть на *представление* полностью, верно? + +{% filename %}blog/views.py{% endfilename %} +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Проверим, всё ли работает. Перейди по адресу http://127.0.0.1:8000/post/new/, добавь текст в поля `title` и `text`, затем сохрани… и вуаля! Новая запись создана, и мы перешли на страницу `post_detail`! + +Возможно, ты заметила, что мы устанавливаем дату публикации перед сохранением поста. В последствии мы сделаем _кнопку публикации_ в __Django Girls Tutorial: Extensions__. + +Это круто! + +> Поскольку мы недавно использовали панель администратора Django, система до сих пор думает, что мы авторизованы. Существует несколько случаев, когда мы можем случайно выйти из аккаунта (закрытие браузера, перезапуск базы данных и т.д.). Если ты получаешь ошибку при попытке сохранения записи, то потребуется перейти на страницу http://127.0.0.1:8000/admin и авторизоваться в системе снова. Это решит проблему. В главе **Домашнее задание: добавляем безопасность нашему веб-сайту!** после основного учебника описано окончательное решение этой проблемы. + +![Ошибка при выходе из аккаунта][4] + + [4]: images/post_create_error.png + +## Валидация формы + +Теперь мы покажем тебе, насколько круты формы в Django. Запись в блоге должна иметь поля `title` и `text`. В нашей модели `Post` мы не указываем, что эти поля необязательны (в отличие от `published_date`), так что Django по умолчанию будет ожидать, что пользователь их заполнит. + +Попробуй сохранить форму с незаполненными полями `title` и `text`. Угадай, что произойдёт! + +![Валидация формы][3] + + [3]: images/form_validation2.png + +Django заботится о проверке всех полей в нашей форме на корректность. Разве не шикарно? + +## Форма редактирования + +Теперь мы знаем, как добавить новую форму. Но что, если мы хотим внести исправления в уже существующую запись? По сути это схожая с предыдущей задача. Давай быстро создадим пару важных вещей (если ты чего-то не понимаешь, спроси своего тренера или загляни в предыдущие главы, поскольку мы уже объясняли все необходимые шаги). + +Открой `blog/templates/blog/post_detail.html` и добавь следующую строку: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html + +``` + +так, чтобы шаблон выглядел следующим образом: + +{% 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 %} +``` + +В файле `blog/urls.py` добавь: + +{% filename %}blog/urls.py{% endfilename %} +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Мы будем использовать повторно шаблон `blog/templates/blog/post_edit.html`, так что осталось лишь отсутствующее *представление*. + +Давай откроем файл `blog/views.py` и добавим в самый конец следующее: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Выглядит практически идентично представлению `post_new`, верно? Но не совсем. Во-первых, мы передаём параметр `pk` из URL-адреса. Кроме того, мы получаем модель `Post` для редактирования при помощи `get_object_or_404(Post, pk=pk)` и передаём экземпляр post в качестве `instance` форме и при сохранении… + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(request.POST, instance=post) +``` + +… и когда мы открываем форму для редактирования: + +{% filename %}blog/views.py{% endfilename %} +```python +form = PostForm(instance=post) +``` + +Хорошо, давай удостоверимся, что всё работает! Перейди на страницу `post_detail`. Ты должна увидеть кнопку редактирования в правом верхнем углу: + +![Кнопка Редактировать (Edit)][5] + + [5]: images/edit_button2.png + +Когда ты её нажмёшь, то увидишь форму с выбранной записью: + +![Форма редактирования][6] + + [6]: images/edit_form2.png + +Поменяй заголовок и текст, а затем сохрани запись! + +Поздравляем! Твое приложение становится всё более сложным! + +Если тебе нужно больше информации о формах в Django, обратись к официальной документации: https://docs.djangoproject.com/en/2.0/topics/forms/ + +## Безопасность + +Круто иметь возможность создавать новые посты, просто перейдя по ссылке! Однако сейчас кто угодно из посетителей твоего сайта может создать новую запись в блоге, а это, скорее всего, совсем не то, чего бы тебе хотелось. Давай сделаем так, чтобы кнопка показывалась для нас, а не кого-либо ещё. + +В файле `blog/templates/blog/base.html` найди `page-header` `div` и тег ``, который мы добавили ранее. Должно выглядеть примерно так: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +``` + +Мы добавим сюда ещё один тег `{% if %}`, чтобы ссылка показывалась только пользователям, вошедшим в админку. То есть пока что — только тебе! Измени тег ``, чтобы получилось так: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Из-за этого `{% if %}` ссылка будет отправлена в браузер, только если запрашивающий страницу пользователь вошёл в систему. Это не обезопасит создание новых постов полностью, но для начала и это неплохо. Мы подробнее рассмотрим вопросы безопасности в дополнении к учебнику. + +Помнишь иконку редактирования, которую мы добавили на страницу поста? Чтобы посторонние не смогли менять уже созданные посты, нам нужно изменить страничку похожим образом. + +Открой файл `blog/templates/blog/post_detail.html` и найди такую строку: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html + +``` + +Замени её на следующее: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Поскольку ты авторизована, никаких изменений после обновления страницы ты не увидишь. Но попробуй загрузить страницу в другом браузере или в режиме инкогнито, и увидишь, что ссылка не отобразится! + +## И последнее: публикация! + +Теперь давай посмотрим, как это будет работать на PythonAnywhere. Пришло время для очередного развёртывания! + +* Сначала нам нужно сделать commit и push нового кода в репозиторий GitHub: + +{% filename %}command-line{% endfilename %} +``` +$ git status +$ git add --all . +$ git status +$ git commit -m "Added views to create/edit blog post inside the site." +$ git push +``` + +* Затем набери в [Bash-консоли PythonAnywhere][7]: + + [7]: https://www.pythonanywhere.com/consoles/ + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd ~/.pythonanywhere.com +$ git pull +[...] +``` + +(Не забудь подставить вместо свой поддомен на PythonAnywhere без угловых скобок.) + +* Наконец, зайди на страницу ["Web" page][8] (используй кнопку меню в правом верхнем углу консоли) и нажми **Reload**. Обнови страницу блога http://subdomain.pythonanywhere.com/, чтобы увидеть изменения. + + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +Вот и всё! Поздравляем :) diff --git a/ru/django_forms/images/csrf2.png b/ru/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/ru/django_forms/images/csrf2.png differ diff --git a/ru/django_forms/images/drafts.png b/ru/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/ru/django_forms/images/drafts.png differ diff --git a/ru/django_forms/images/edit_button2.png b/ru/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/ru/django_forms/images/edit_button2.png differ diff --git a/ru/django_forms/images/edit_form2.png b/ru/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/ru/django_forms/images/edit_form2.png differ diff --git a/ru/django_forms/images/form_validation2.png b/ru/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/ru/django_forms/images/form_validation2.png differ diff --git a/ru/django_forms/images/images/csrf2.png b/ru/django_forms/images/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/ru/django_forms/images/images/csrf2.png differ diff --git a/ru/django_forms/images/images/drafts.png b/ru/django_forms/images/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/ru/django_forms/images/images/drafts.png differ diff --git a/ru/django_forms/images/images/edit_button2.png b/ru/django_forms/images/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/ru/django_forms/images/images/edit_button2.png differ diff --git a/ru/django_forms/images/images/edit_form2.png b/ru/django_forms/images/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/ru/django_forms/images/images/edit_form2.png differ diff --git a/ru/django_forms/images/images/form_validation2.png b/ru/django_forms/images/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/ru/django_forms/images/images/form_validation2.png differ diff --git a/ru/django_forms/images/images/new_form2.png b/ru/django_forms/images/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/ru/django_forms/images/images/new_form2.png differ diff --git a/ru/django_forms/images/images/post_create_error.png b/ru/django_forms/images/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/ru/django_forms/images/images/post_create_error.png differ diff --git a/ru/django_forms/images/new_form2.png b/ru/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/ru/django_forms/images/new_form2.png differ diff --git a/ru/django_forms/images/post_create_error.png b/ru/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/ru/django_forms/images/post_create_error.png differ diff --git a/ru/django_installation/README.md b/ru/django_installation/README.md new file mode 100755 index 00000000000..728c98272e3 --- /dev/null +++ b/ru/django_installation/README.md @@ -0,0 +1,7 @@ +# Установка Django + +> **Примечание:** если ты используешь Chromebook, пропусти эту главу, но выполни инструкции по [настройке для Chromebook](../chromebook_setup/README.md) + +> **Примечание:** если ты уже выполнила установку — можешь пропустить эту часть и сразу перейти к следующей главе! + +{% include "/django_installation/instructions.md" %} diff --git a/ru/django_installation/instructions.md b/ru/django_installation/instructions.md new file mode 100755 index 00000000000..e9524d59929 --- /dev/null +++ b/ru/django_installation/instructions.md @@ -0,0 +1,221 @@ +> Отдельные части этой главы основаны на учебных пособиях Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +> Отдельные части этой главы основаны на [учебном пособии django-marcador](http://django-marcador.keimlink.de/), лицензированном под Creative Commons Attribution-ShareAlike 4.0 International License. Руководство django-marcador защищено авторским правом Markus Zapke-Gründemann et al. + +## Виртуальное окружение + +Перед установкой Django мы попросим тебя установить крайне полезный инструмент, который поможет тебе содержать среду разработки в чистоте. Можно пропустить этот шаг, но мы очень советуем этого не делать. Использование лучших рекомендаций с самого начала убережёт от многих проблем в будущем! + +Итак, давай создадим **виртуальное окружение** (оно также называется *virtualenv*). Virtualenv будет изолировать настройки Python/Django для каждого отдельного проекта. Это значит, что изменения одного сайта не затронут другие сайты, которые ты разрабатываешь. Удобно, правда? + +Всё, что тебе нужно сделать — найти директорию, в которой мы создадим `virtualenv`; домашний каталог вполне подойдёт. Для Windows адрес будет выглядеть так: `C:\Users\Name` (где `Name` — твоё имя пользователя). + +> __Примечание:__ Если ты работаешь в Windows, удостоверься, что в названии директории нет специальных символов или символов с диакритическими знаками; если в твоём имени пользователя есть такие символы, выбери другую директорию, например, `C:\djangogirls`. + +Мы будем использовать отдельную директорию `djangogirls` в домашнем каталоге: + +{% filename %}command-line{% endfilename %} +``` +$ mkdir djangogirls +$ cd djangogirls +``` + +Мы создадим виртуальное окружение под именем `myvenv`. В общем случае команда будет выглядеть так: + +{% filename %}command-line{% endfilename %} +``` +$ python3 -m venv myvenv +``` + + + +Чтобы создать новое `virtualenv`, тебе нужно открыть командную строку и набрать `python -m venv myvenv`. Это будет выглядеть так: + +{% filename %}command-line{% endfilename %} +``` +C:\Users\Name\djangogirls> python -m venv myvenv +``` + +Здесь `myvenv` — имя твоего `virtualenv`. Ты можешь выбрать другое имя, но используй только строчные буквы, без пробелов и специальных символов. Имя виртуального окружения выбирай покороче — тебе придётся часто его набирать! + + + + + +В Linux и macOS достаточно набрать `python3 -m venv myvenv`, чтобы создать `virtualenv`: + +{% filename %}command-line{% endfilename %} +``` +$ python3 -m venv myvenv +``` + +`myvenv` — имя виртуального окружения `virtualenv`. Можешь выбрать другое имя, но используй только строчные буквы и никаких пробелов. Имя виртуального окружения лучше выбирать покороче — набирать его предстоит не раз! + +> __Примечание:__ В некоторых версиях Debian/Ubuntu может произойти следующая ошибка: + +>{% 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. +>``` +> +> В таком случае следуй приведённым инструкциям и установи пакет `python3-venv`: +>{% filename %}command-line{% endfilename %} +>``` +>$ sudo apt install python3-venv +>``` + +> __Примечание:__ В некоторых версиях Debian/Ubuntu при таком способе создания виртуального окружения ты можешь получить такую ошибку: + +>{% filename %}command-line{% endfilename %} +>``` +>Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +>``` + +> Чтобы обойти её, используй команду `virtualenv`. + +>{% filename %}command-line{% endfilename %} +>``` +>$ sudo apt install python-virtualenv +>$ virtualenv --python=python{{ book.py_version }} myvenv +>``` + +> __Примечание:__ Если ты получаешь следующую ошибку + +>{% filename %}command-line{% endfilename %} +>``` +>E: Unable to locate package python3-venv +>``` + +> то запусти команду: +> +>{% filename %}command-line{% endfilename %} +>``` +>sudo apt install python{{ book.py_version }}-venv +>``` + + + +## Работаем с virtualenv + +Указанная выше команда создаст директорию `myvenv` (или другую, в зависимости от выбранного тобой имени), которая будет содержать виртуальное окружение (по сути — набор файлов и папок). + + + +Запусти виртуальное окружение, выполнив: + +{% filename %}command-line{% endfilename %} +``` +C:\Users\Name\djangogirls> myvenv\Scripts\activate +``` + +> __ПРИМЕЧАНИЕ:__ в Windows 10 при работе в Windows PowerShell ты можешь получить ошибку вида `execution of scripts is disabled on this system`. В этом случае открой ещё одно окно Windows PowerShell, выбрав опцию «Запустить от имени Администратора». Затем перед использованием виртуального окружения попробуй запустить следующую команду: +> +>{% 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 +>``` + + + + + +Запусти виртуальное окружение, выполнив: + +{% filename %}command-line{% endfilename %} +``` +$ source myvenv/bin/activate +``` + +Не забудь поменять `myvenv` на выбранное тобой имя для `virtualenv`! + +> __ПРИМЕЧАНИЕ:__ иногда команда `source` может быть недоступна. В таком случае используй следующий метод: +> +>{% filename %}command-line{% endfilename %} +>``` +>$ . myvenv/bin/activate +>``` + + + +Ты поймёшь, что `virtualenv` запущено, когда увидишь префикс `(myvenv)` в начале приглашения командной строки. + +При работе с виртуальным окружением команда `python` будет автоматически обращаться к правильной версии языка, так что ты можешь использовать просто `python` вместо `python3`. + +Отлично, теперь мы будем хранить все важные зависимости в одном месте. Наконец можно установить Django! + +## Установка Django + +После запуска `virtualenv` ты можешь установить Django. + +Перед этим мы должны удостовериться, что у тебя установлена последняя версия `pip` — программы, которую мы используем для установки Django. + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~$ python3 -m pip install --upgrade pip +``` + +### Установка библиотек через указание требований + +Файл с требованиями (requirements) хранит список зависимостей, которые нужно установить с помощью +`pip install`: + +Для начала создай файл `requirements.txt` внутри директории `djangogirls/`, используя текстовый редактор, который ты установила ранее. Просто создай в редакторе новый файл, а затем сохрани его под именем `requirements.txt` в директории `djangogirls/`. После этого твоя директория будет выглядеть так: + +``` +djangogirls +└───requirements.txt +``` + +В файл `djangogirls/requirements.txt` нужно добавить такой текст: + +{% filename %}djangogirls/requirements.txt{% endfilename %} +``` +Django~={{ book.django_version }} +``` + +Теперь выполни команду `pip install -r requirements.txt`, чтобы установить 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.1MB) +Installing collected packages: Django +Successfully installed Django-{{ book.django_version }} +``` + + + + +> Если при запуске pip в Windows ты получаешь сообщение об ошибке, проверь, что путь к директории с проектом не содержит пробелов или специальных символов (`C:\Users\User Name\djangogirls`). Если проблема в этом, то, пожалуйста, перенеси свой проект в другое место, адрес которого не будет содержать пробелов и специальных символов (предлагаем `C:\djangogirls`). Создай новое виртуальное окружение в новой директории, после этого удали старое и попробуй запустить команды выше заново (перемещение виртуального окружения не сработает, поскольку в нём используются абсолютные пути). + + + + + +> При попытке установки Django твоя командная строка может зависнуть. Если это произошло, вместо приведённой выше команды используй: +> +>{% filename %}command-line{% endfilename %} +>``` +>C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +>``` + + + + + +Вот и всё! Теперь ты (наконец-то) готова создать своё Django-приложение! diff --git a/ru/django_models/README.md b/ru/django_models/README.md new file mode 100755 index 00000000000..0d5909d7048 --- /dev/null +++ b/ru/django_models/README.md @@ -0,0 +1,200 @@ +# Модели Django + +Нам нужно что-то, что будет хранить все записи нашего блога. Но прежде давай поговорим о вещах, называемых `объектами`. + +## Объекты + +В программировании существует особая концепция, она называется `объектно-ориентированным программированием`. Идея заключается в том, что вместо скучной последовательности инструкций мы моделируем вещи и описываем, как они взаимодействуют друг с другом. + +Так что же такое объект? Это совокупность поведения и свойств. Звучит странно, но мы приведем пример. + +Если мы хотим смоделировать кошку, то создадим объект `Cat`, который обладает определенными свойствами, например, `color` (цвет), `age` (возраст), `mood` (настроение: плохое, хорошее, сонное ;)), `owner` (хозяин, например, другой объект — `Person` — или, если кошка дикая, это свойство будет пустым). + +Объект `Cat` будет иметь набор определённых действий: `purr` (мурчать), `scratch` (царапаться) или `feed` (кормить, где мы дадим кошке немного `CatFood` — кошачьей еды, которая так же может быть отдельным объектом со своими свойствами, например, `taste` — вкусом). + +``` +Cat +-------- +color +age +mood +owner +purr() +scratch() +feed(cat_food) +``` + +``` +CatFood +-------- +taste +``` + +Основная идея, таким образом, заключается в описании объекта в коде, используя его параметры (`свойства объекта`) и доступные ему действия (`методы`). + +Так как же мы смоделируем запись в блоге? Нам же нужен блог, верно? + +Для начала стоит ответить на вопрос: что такое запись в блоге? Какие свойства она имеет? + +Ну, запись наверняка содержит какой-то текст и заголовок, верно? Было бы неплохо также знать, кто её написал — так что нам нужен автор. Ну и в заключение, нам нужно знать, когда запись создана и когда опубликована. + +``` +Post +-------- +title +text +author +created_date +published_date +``` + +Какие вещи можно сделать с записью в блоге? Было бы неплохо иметь `метод` для её публикации, согласна? + +Так что нам пригодится метод `publish`. + +Ну и раз уж мы определились с тем, что хотим получить, давай начнем моделирование в Django! + +## Модель в Django + +Зная, что представляет из себя объект, мы можем создать модель Django для записи в блоге. + +Модель в Django — это объект определённого свойства: он хранится в `базе данных`. База данных представляет собой совокупность различных данных. Это то место, где ты будешь хранить информацию о своих пользователях, записях в блоге и т.д. Мы будем использовать базу данных SQLite для хранения информации. Это стандартная база данных в Django — её сейчас вполне хватит для наших нужд. + +Ты можешь представить модель в базе данных как электронную таблицу с колонками (полями) и строками (данными). + +### Создание приложения + +Для аккуратности мы создадим отдельное приложение в нашем проекте. Очень удобно иметь хорошо организованное рабочее место с самого начала. Для создания приложения нам понадобится набрать следующую инструкцию в командной строке (из директории `djangogirls`, где находится файл `manage.py`): + +{% filename %}macOS и Linux:{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py startapp blog +``` +{% filename %}Windows:{% endfilename %} +``` +(myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog +``` + + +Обрати внимание, что в нашем проекте появилась новая папка `blog`, которая содержит некоторые файлы. Таким образом, структура нашего проекта будет выглядеть так: + + +``` +djangogirls +├── blog +│   ├── __init__.py +│   ├── admin.py +│   ├── apps.py +│   ├── migrations +│   │   └── __init__.py +│   ├── models.py +│   ├── tests.py +│   └── views.py +├── db.sqlite3 +├── manage.py +└── mysite + ├── __init__.py + ├── settings.py + ├── urls.py + └── wsgi.py +``` + +После того, как приложение создано, нам нужно сообщить Django, что теперь он должен его использовать. Мы сделаем это с помощью файла `mysite/settings.py`. Нам нужно найти `INSTALLED_APPS` и добавить к списку `'blog',` прямо перед `]`. Конечный результат должен выглядеть следующим образом: + +{% 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', +] +``` + +### Создание модели записи в блоге + +В файле `blog/models.py` мы определяем все `Модели` — модель записи для блога также пойдёт сюда. + +Открой файл `blog/models.py`, удали весь текст и вставь на его место следующий код: + +{% filename %}blog/models.py{% endfilename %} +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Убедись, что использовала два символа нижнего подчёркивания (`_`) с обеих сторон от метода `str`. Это соглашение часто используется при программировании на Python, и иногда его называют "dunder" (сокращение от англ. "double-underscore"). + +Смотрится страшно, да? Но не волнуйся, мы объясним, что значит каждая строка кода! + +Строки, начинающиеся с `from` или `import`, открывают доступ к коду из других файлов. Так что вместо того, чтобы копировать и вставлять один и тот же код во все файлы, ты можешь сослаться на него при помощи `from ... import ...`. + +`class Post(models.Model):` — эта строка определяет нашу модель (`объект`). + +- `class` — это специальное ключевое слово для определения объектов. +- `Post` — это имя нашей модели, мы можем поменять его при желании (специальные знаки и пробелы использовать нельзя). Всегда начинай имена классов с прописной буквы. +- `models.Model` означает, что объект Post является моделью Django, так Django поймет, что он должен сохранить его в базу данных. + +Дальше мы задаем свойства, о которых уже говорили: `title`, `text`, `created_date`, `published_date` и `author`. Чтобы это сделать, нам нужно определиться с типом полей (это текст? число? дата? ссылка на другой объект? например, на пользователя?). + +- `models.CharField` — так мы определяем текстовое поле с ограничением на количество символов. +- `models.TextField` — так определяется поле для неограниченно длинного текста. Выглядит подходящим для содержимого поста, верно? +- `models.DateTimeField` — дата и время. +- `models.ForeignKey` — ссылка на другую модель. + +Мы не будем объяснять каждую запятую, поскольку на это уйдет слишком много времени. Ознакомься с официальной документаций Django: если хочешь узнать больше о полях моделей и о том, как определять разные объекты, то эта ссылка может помочь: https://docs.djangoproject.com/en/1.11/ref/models/fields/#field-types. + +Что насчёт `def publish(self):`? Это как раз метод `публикации` для записи, о котором мы говорили. `def` означает, что создаётся функция/метод, а `publish` — это название этого метода. Можно изменить имя метода, если хочешь. Существует правило для имён функций: нужно использовать строчные буквы, а пробелы заменять на подчёркивания. Например, метод, вычисляющий среднюю цену, может называться `calculate_average_price`. + +Методы часто `возвращают` что-то. Например, метод `__str__`. В нашем случае после вызова метода `__str__()` мы получим текст (**строку**) с заголовком записи. + +Также обрати внимание, что оба метода `def publish(self):` и `def __str__(self):` внутри класса имеют дополнительный отступ. Поскольку в Python важны отступы, нам необходимо использовать их для методов внутри класса — иначе методы не будут принадлежать к классу, и при запуске программы может получиться что-то неожиданное. + +Если тема моделей тебе до сих пор непонятна — не стесняйся обратиться к тренеру! Мы знаем, что она действительно сложна, особенно когда ты изучаешь параллельно объекты и функции. Но мы надеемся, что всё это больше не кажется тебе магией! + +### Создаём таблицы моделей в базе данных + +Последним шагом будет добавление нашей модели в базу данных. Сначала мы должны дать Django знать, что сделали изменения в нашей модели (мы её только что создали!). Набери `python manage.py makemigrations blog`. Должно получиться примерно так: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py makemigrations blog +Migrations for 'blog': + blog/migrations/0001_initial.py: + - Create model Post +``` + +**Примечание:** не забудь сохранить отредактированные файлы. Иначе твой компьютер выполнит команду с их предыдущей версией, и могут появиться неожиданные ошибки. + +Django создал для нас файл с миграцией для базы данных. Набери `python manage.py migrate blog`, результат должен быть следующим: + +{% filename %}command-line{% endfilename %} +``` +(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 +``` + +Ура! Модель записи для блога теперь в базе данных, и было бы неплохо посмотреть на неё, верно? Тогда переходи к следующей главе! diff --git a/ru/django_orm/README.md b/ru/django_orm/README.md new file mode 100755 index 00000000000..c57f57d4c27 --- /dev/null +++ b/ru/django_orm/README.md @@ -0,0 +1,204 @@ +# Django ORM и QuerySet + +В этой главе ты узнаешь, как Django подключается к базе данных и сохраняет в неё информацию. Давай начнём! + +## Что такое QuerySet? + +QuerySet, по сути, — список объектов заданной модели. QuerySet позволяет читать данные из базы данных, фильтровать и изменять их порядок. + +Проще научиться на примере. Давай попробуем, согласна? + +## Интерактивная консоль Django + +Открой свой локальный терминал (не на PythonAnywhere) и набери следующую команду: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py shell +``` + +Результат должен быть таким: + +{% filename %}command-line{% endfilename %} +```python +(InteractiveConsole) +>>> +``` + +Ты находишься в интерактивной консоли Django. По сути, это та же интерактивная консоль Python, но с магией Django :) Ты можешь использовать весь синтаксис Python, разумеется. + +### Все объекты + +Давай попробуем вывести на экран все записи в нашем блоге. Ты можешь сделать это следующей командой: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Упс! Ошибка. Она говорит, что не существует объекта с именем Post. И это верно — мы забыли импортировать его! + +{% filename %}command-line{% endfilename %} +```python +>>> from blog.models import Post +``` + +Всё просто: мы импортируем модель `Post` из `blog.models`. Давай попробуем получить все записи блога ещё раз: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +, ]> +``` + +Это список записей, с которыми мы работали до этого! Мы создали их через панель администратора Django. Теперь же мы хотим создавать записи с помощью Python, так как же мы этого добьёмся? + +### Создаём объект + +Создать объект Post в базе данных можно следующим образом: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Но у нас есть один недочёт: `me`. Мы должны передать этой переменной экземпляр модели `User`, который будет отвечать за автора записи. Как это сделать? + +Давай для начала импортируем модель User: + +{% filename %}command-line{% endfilename %} +```python +>>> from django.contrib.auth.models import User +``` + +Какие пользователи есть в нашей базе данных? Попробуй эту команду: + +{% filename %}command-line{% endfilename %} +```python +>>> User.objects.all() +]> +``` + +Это суперпользователь, которого мы создали ранее! Нам нужен его экземпляр: + +{% filename %}command-line{% endfilename %} +```python +>>> me = User.objects.get(username='ola') +``` + +Как ты можешь заметить, мы получили (`get`) пользователя (`User`) с именем `username` 'ola'. Шикарно! В твоём случае имя, конечно, может отличаться. + +Теперь мы, наконец, можем создать наш пост: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Ура! Хочешь проверить, что всё работает? + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.all() +, , ]> +``` + +Есть, ещё один пост в списке! + +### Добавляем записи + +Можешь повеселиться и добавить ещё записей. 2-3 будет достаточно. + +### Фильтрация объектов + +Важной особенностью QuerySets является возможность фильтровать объекты. Предположим, нам нужно найти все записи пользователя ola. Мы используем метод `filter` вместо метода `all` в `Post.objects.all()`. В скобках мы укажем условия, по которым будет построена выборка записей. В нашей ситуации условием будет являться равенство поля `author` переменной `me`. В Django мы можем написать это следующим образом: `author=me`. Теперь наш код выглядит следующим образом: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +А может быть мы хотим получить все записи со словом 'title' в поле `title`? + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Примечание**: обрати внимание на два символа нижнего подчёркивания (`_`) между `title` и `contains`. Django ORM использует этот синтаксис для разделения имён полей ("title") и операций или фильтров ("contains"). Если ты используешь только один символ нижнего подчёркивания, то получишь ошибку "FieldError: Cannot resolve keyword title_contains". + +Ты также можешь получить список всех опубликованных записей. Мы просто отфильтруем записи по полю `published_date`: + +{% filename %}command-line{% endfilename %} +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +К сожалению, пост, который мы добавили в консоли Python, ещё не опубликован. Мы можем изменить это! Сначала выберем запись, которую мы хотим опубликовать: + +{% filename %}command-line{% endfilename %} +```python +>>> post = Post.objects.get(title="Sample title") +``` + +Дальше мы опубликуем её с помощью метода `publish`! + +{% filename %}command-line{% endfilename %} +```python +>>> post.publish() +``` + +Теперь попробуй получить список опубликованных сообщений снова (нажми стрелку вверх 3 раза и затем `enter`): + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + + +### Сортировка объектов + +QuerySets позволяет сортировать объекты. Давай попробуем сортировку по полю `created_date`: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Мы также можем изменить порядок на противоположный, добавив `-` в начало условия: + +{% filename %}command-line{% endfilename %} +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + + +### Соединение QuerySets + +QuerySets можно **сцеплять**, создавая цепочки: + +``` +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Это мощный и удобный инструмент, позволяющий писать сложные запросы. + +Отлично! Теперь ты готова к следующей части! Чтобы закрыть интерактивную консоль, набери: + +{% filename %}command-line{% endfilename %} +```python +>>> exit() +$ +``` diff --git a/ru/django_start_project/README.md b/ru/django_start_project/README.md new file mode 100755 index 00000000000..667381fb96c --- /dev/null +++ b/ru/django_start_project/README.md @@ -0,0 +1,198 @@ +# Твой первый проект на Django! + +> Часть этой главы основана на учебных пособиях Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +> Отдельные части этой главы основаны на учебном пособии [django-marcador ][1], лицензированном под Creative Commons Attribution-ShareAlike 4.0 International License. Руководство django-marcador защищено авторским правом Markus Zapke-Gründemann et al. + + [1]: http://django-marcador.keimlink.de/ + +Мы собираемся создать простой блог! + +Первый шаг — создать новый проект Django. В сущности, это значит, что мы запустим несколько стандартных скриптов из поставки Django, которые создадут для нас скелет проекта. Это просто куча каталогов и файлов, которые мы используем позже. + +Названия этих каталогов и файлов очень важны для Django. Ты не должна переименовывать их. Перемещать их в другое место тоже не самая удачная идея. Django необходима определенная структура, чтобы иметь возможность найти важные вещи. + +> Не забудь: ты должна запускать все команды в virtualenv. Если ты не видишь в командной строке префикса `(myvenv)`, то необходимо активировать virtualenv. Мы объясняли, как это сделать, в разделе __Работаем с virtualenv__ главы __Установка Django__. Для этого нужно набрать `myvenv\Scripts\activate` в Windows или `source myvenv/bin/activate` в Mac OS / Linux. + + + +В консоли Mac OS или Linux нужно запустить следующую команду (**не забудь добавить точку `.` в конце**): + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ django-admin startproject mysite . +``` + +> Точка `.` крайне важна, потому что говорит скрипту установить Django в вашем текущем каталоге (который и обозначается сокращённо точкой `.`) +> +> **Примечание:** при вводе приведённой команды помни, что тебе нужно набирать только часть, начинающуюся с `django-admin`. `(myvenv) ~/djangogirls$` — это просто пример строки-приглашения терминала. + + + + + +В Windows запусти следующую команду (**не забудь добавить точку `.` в конце**): + +{% filename %}command-line{% endfilename %} +``` +(myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . +``` +> Точка `.` крайне важна, потому что говорит скрипту установить Django в вашем текущем каталоге (который и обозначается сокращённо точкой `.`) + +> **Примечание:** при вводе приведённой команды помни, что тебе нужно набирать только часть, начинающуюся с `django-admin.exe`. `(myvenv) C:\Users\Name\djangogirls>` — это просто пример приглашения командной строки. + + + +`django-admin.py` — это скрипт, который создаст необходимую структуру директорий и файлы для нас. Теперь у твоего проекта должна быть следующая структура: + +``` +djangogirls +├───manage.py +├───mysite +│ settings.py +│ urls.py +│ wsgi.py +│ __init__.py +└───requirements.txt +``` +> **Примечание:** в своей структуре директорий ты также увидишь ранее созданную нами директорию с виртуальным окружением. + +`manage.py` — это другой скрипт, который помогает с управлением сайтом. С помощью него мы, помимо прочего, сможем запустить веб-сервер на твоем компьютере без установки дополнительных программ. + +Файл `settings.py` содержит настройки для твоего веб-сайта. + +Помнишь нашу аналогию с почтальоном? Файл `urls.py` содержит список шаблонов, по которым ориентируется `urlresolver`. + +Давай пока забудем про остальные файлы — мы не будем их изменять. Только не удали их случайно! + + +## Изменяем настройки + +Давай внесём изменения в `mysite/settings.py`. Открой файл в текстовом редакторе, который ты выбрала ранее. + +**Примечание:** помни, что `settings.py` — самый обычный файл. Ты можешь открыть его из своего редактора кода, используя меню «Файл -> Открыть». При этом ты увидишь обычное окно, в котором ты можешь перейти к своему файлу `settings.py` и выбрать его. Либо ты можешь открыть этот файл, перейдя в директорию проекта djangogirls на твоём рабочем столе и щёлкнув по нему правой кнопкой мыши; затем выбери свой редактор кода из предложенного списка. Важно выбрать именно редактор, поскольку у тебя могут быть установлены программы, которые откроют наш файл, но не позволят его изменить. + +Было бы неплохо установить корректный часовой пояс на нашем сайте. Перейди к [списку часовых поясов википедии][2] и скопируй название своего часового пояса (TZ) (например, `Europe/Moscow`). + + [2]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones + +В файле settings.py найди строку, содержащую `TIME_ZONE`, и измени её в соответствии со своим часовым поясом: + +{% filename %}mysite/settings.py{% endfilename %} +```python +TIME_ZONE = 'Europe/Moscow' +``` + +Код языка состоит из сокращённого названия языка, например `en` для английского или `ru` для русского, и кода страны, например, `ru` для России или `ch` для Швейцарии. Тебе понадобится эта настройка, если ты хочешь, чтобы все встроенные кнопки и уведомления от Django были на твоём языке. Таким образом, надпись на кнопке «Cancel» будет переведена на заданный тобой язык. [Django поставляется с большим набором готовых переводов](https://docs.djangoproject.com/en/1.11/ref/settings/#language-code). + +Измени язык, отредактировав следующую строку: + +{% filename %}mysite/settings.py{% endfilename %} +```python +LANGUAGE_CODE = 'ru-ru' +``` + + +Нам также необходимо добавить в настройки информацию о расположении статических файлов (мы познакомимся со статическими файлами и CSS в следующих главах). Спустись в *конец* файла и после переменной `STATIC_URL` добавь новую — `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Когда наcтройка `DEBUG` имеет значение `True`, а настройка `ALLOWED_HOSTS` пуста, имя хост твоего веб-сайта сверяется со списком `['localhost', '127.0.0.1', '[::1]']`. +Ни одно из значений не будет соответствовать имени хоста на PythonAnywhere при публикации нашего приложения, поэтому нам необходимо изменить следующую настройку: + +{% filename %}mysite/settings.py{% endfilename %} +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Примечание**: В случае если вы используете Chromebook, добавьте следующую строку в конец файла settings.py: +> `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` + +## Настройка базы данных + +Существует множество различных баз данных, которые могут хранить данные для твоего сайта. Мы будем использовать стандартную — `sqlite3`. + +Она уже выбрана по умолчанию в файле `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + + +Чтобы создать базу данных для нашего блога, набери в командной строке следующее: `python manage.py migrate` (мы должны быть в директории `djangogirls`, где расположен файл `manage.py`). Если всё прошло успешно, то ты увидишь следующий результат: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py migrate +Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions +Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK +``` + +Вот и всё! Пришло время запустить веб-сервер и посмотреть, работает ли наш веб-сайт! + +## Запуск веб-сервера + +Ты должна быть в директории, где расположен файл `manage.py` (в нашем случае — `djangogirls`). Запустим веб-сервер из командной строки: `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py runserver +``` + +Если ты работаешь в Windows, и команда падает с ошибкой `UnicodeDecodeError`, используй вместо неё другую: + +{% filename %}command-line{% endfilename %} +``` +(myvenv) ~/djangogirls$ python manage.py runserver 0:8000 +``` + + +Теперь тебе нужно проверить, работает ли веб-сайт — открой браузер (Firefox, Chrome, Safari, Internet Explorer или любой другой) и набери следующий адрес: + +{% filename %}browser{% endfilename %} +``` +http://127.0.0.1:8000/ +``` +Если ты используешь Chromebook или Cloud9, вместо этого нажми на ссылку во всплывающем окне, которая должна появиться в правом верхнем углу командного окна, в котором запущен веб сервер. Ссылка может выглядеть так: + +{% filename %}browser{% endfilename %} +``` +https://<странные буквы и цифры>.vfs.cloud9.us-west-2.amazonaws.com +``` +Поздравляем! Ты только что создала свой первый веб-сайт и запустила его на веб-сервере! Ну не круто ли? + +![Сработало!][3] + + [3]: images/it_worked2.png + +Пока работает веб-сервер, в терминале не будет приглашения для ввода команд. Ты всё ещё сможешь ввести текст, но не сможешь выполнить никакую другую команду. Это происходит потому, что сервер продолжает работу, "слушая" входящие запросы. + +> Мы рассматривали, как работают веб-сервера, в главе Как работает интернет. + +Веб-сервер займёт командную строку, пока ты его не остановишь. Чтобы и дальше иметь возможность набирать команды, открой ещё одно окно терминала и активируй в нём виртуальное окружение. Чтобы остановить веб-сервер, перейди обратно в окно, в котором он работает, и нажми CTRL + C — кнопки Control и C вместе (в Windows может потребоваться нажать клавиши Ctrl + Break). + +Готова к следующему шагу? Пришло время создать содержимое для нашего блога! diff --git a/ru/django_start_project/images/images/it_worked2.png b/ru/django_start_project/images/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/ru/django_start_project/images/images/it_worked2.png differ diff --git a/ru/django_start_project/images/it_worked2.png b/ru/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..08b4b50238b Binary files /dev/null and b/ru/django_start_project/images/it_worked2.png differ diff --git a/ru/django_templates/README.md b/ru/django_templates/README.md new file mode 100755 index 00000000000..1d964c1f879 --- /dev/null +++ b/ru/django_templates/README.md @@ -0,0 +1,114 @@ +# Шаблоны Django + +Пришло время отобразить данные на сайте! Django поможет нам с этим при помощи встроенных **тегов шаблонов**. + +## Что представляют из себя теги шаблонов? + +Как видишь, в HTML нельзя помещать код Python, поскольку браузеры не понимают его. Они знают только HTML. Мы помним, что HTML статичен, в то время как Python позволяет динамические изменения. + +__Теги шаблонов Django__ позволяют нам вставлять Python в HTML, так что ты можешь создавать динамические веб-сайты быстрее и проще. То, что надо! + +## Отображаем шаблон списка записей + +В предыдущей главе мы передали нашему шаблону список записей в переменной `posts`. Теперь мы отобразим его в HTML. + +Чтобы вставить переменную в шаблон Django, нам нужно использовать двойные фигурные скобки с именем переменной внутри: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{{ posts }} +``` + +Попробуй это в шаблоне `blog/templates/blog/post_list.html`. Замени всё, начиная со второго `
` и вплоть до третьего `
` кодом `{{ posts }}`. Сохрани файл и обнови страницу, чтобы увидеть результат: + +![Рисунок 13.1][1] + + [1]: images/step1.png + +Как ты можешь заметить, мы получили следующую строку: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +, ]> +``` + +Это показывает, что Django понял переменную как список объектов. Помнишь из главы __Введение в Python__, как мы можем аккуратно отобразить список? Правильно, циклом for! В шаблонах Django ты можешь использовать их таким образом: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Попробуй вставить это в свой шаблон. + +![Рисунок 13.2][2] + + [2]: images/step2.png + +Сработало! Но мы хотим, чтобы они отображались как статические записи, которые мы создавали в главе __Введение в HTML__. Ты можешь смешивать HTML и теги шаблонов. Наш элемент `body` будет выглядеть следующим образом: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Всё, что ты поместишь между `{% for %}` и `{% endfor %}`, будет повторено для каждого объекта в списке. Обнови страницу:{% endraw %} + +![Рисунок 13.3][3] + + [3]: images/step3.png + +Ты заметила, что мы использовали немного другую запись в этот раз: `{{ post.title }}` или `{{ post.text }}`? Мы обращаемся к различным полям нашей модели `Post`. Также `|linebreaksbr` прогоняет текст через фильтр для преобразования переносов строк в параграфы. + +## Ещё один момент + +Пришло время ещё раз убедиться, что наш сайт будет работать в сети, согласна? Попробуем развернуть новую версию сайта на PythonAnywhere. Краткий обзор необходимых шагов... + +* Сначала загружаем код на GitHub + +{% filename %}command-line{% endfilename %} +``` +$ git status +[...] +$ git add --all . +$ git status +[...] +$ git commit -m "Modified templates to display posts from database." +[...] +$ git push +``` + +* Затем заходим на [PythonAnywhere][4], открываем **Bash console** и набираем команду: + + [4]: https://www.pythonanywhere.com/consoles/ + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd $USER.pythonanywhere.com +$ git pull +[...] +``` + +* Наконец, переключаемся на вкладку [Web][5] и жмём кнопку **Reload**. Обновления запущены в жизнь! Даже если записи в твоём блоге на PythonAnywhere отличаются от записей в блоге на локальном сервере, то всё в порядке. Базы данных на твоём локальном компьютере и на PythonAnywhere не синхронизируются, в отличиет от остальных файлов проекта. + + [5]: https://www.pythonanywhere.com/web_app_setup/ + +Поздравляем! Теперь попробуй добавить новые записи через панель администратора Django (не забывай указывать published_date!). Удостоверься, что ты в панели администратора своего сайта на PythonAnywhere (https://yourname.pythonanywhere.com/admin). Затем обнови страницу, чтобы проверить, появились ли новые записи. + +Работает как по волшебству? Есть чем гордиться! Отойди от компьютера на секунду — ты заслужила перерыв :) + +![Рисунок 13.4][6] + + [6]: images/donut.png diff --git a/ru/django_templates/images/donut.png b/ru/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/ru/django_templates/images/donut.png differ diff --git a/ru/django_templates/images/images/donut.png b/ru/django_templates/images/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/ru/django_templates/images/images/donut.png differ diff --git a/ru/django_templates/images/images/step1.png b/ru/django_templates/images/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/ru/django_templates/images/images/step1.png differ diff --git a/ru/django_templates/images/images/step2.png b/ru/django_templates/images/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/ru/django_templates/images/images/step2.png differ diff --git a/ru/django_templates/images/images/step3.png b/ru/django_templates/images/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/ru/django_templates/images/images/step3.png differ diff --git a/ru/django_templates/images/step1.png b/ru/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/ru/django_templates/images/step1.png differ diff --git a/ru/django_templates/images/step2.png b/ru/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/ru/django_templates/images/step2.png differ diff --git a/ru/django_templates/images/step3.png b/ru/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/ru/django_templates/images/step3.png differ diff --git a/ru/django_urls/README.md b/ru/django_urls/README.md new file mode 100755 index 00000000000..009af50a28a --- /dev/null +++ b/ru/django_urls/README.md @@ -0,0 +1,102 @@ +# URL-адреса Django + +Мы собираемся сделать нашу первую веб-страничку — домашнюю страницу твоего блога! Но для начала давай чуть ближе познакомимся с URL-адресами в Django. + +## Что такое URL-адрес? + +URL — это просто адрес в интернете. Ты можешь увидеть URL каждый раз, когда посещаешь веб-сайт — он отображается в адресной строке твоего браузера (да, `127.0.0.1:8000` — это URL-адрес! И `https://djangogirls.org` — тоже URL): + +![URL-адрес][1] + + [1]: images/url.png + +Любая страница в Интернете нуждается в собственном URL-адресе. Таким образом ваше приложение точно знает, что показать пользователю, который открывает конкретный URL-адрес. В Django мы используем так называемый `URLconf` (англ. URL configuration, конфигурация URL). URLconf — это набор шаблонов, которые Django попробует сравнить с полученным URL, чтобы выбрать правильный метод для отображения (view). + +## Как URL-адреса работают в Django? + +Давай откроем файл `mysite/urls.py` в нашем редакторе и посмотрим, как он выглядит: + +{% filename %}mysite/urls.py{% endfilename %} +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Как можешь заметить, Django уже кое-что разместил здесь для нас. + +Строки, расположенные между тройными кавычками (`'''` или `"""`), называются `docstrings` — ты можешь добавить их в начале файла, класса или метода для описания их функциональности. Python будет их игнорировать при запуске приложения. + +URL-адрес раздела администрирования, который мы посещали в предыдущей главе, уже здесь присутствует: + +{% filename %}mysite/urls.py{% endfilename %} +```python + path('admin/', admin.site.urls), +``` + +Таким образом, любому URL-адресу, начинающемуся с `admin/`, Django будет находить соответствующее *view* (представление). В этом случае мы охватываем большое количество различных URL-адресов, которые явно не прописаны в этом маленьком файле — так он становится более аккуратным и удобочитаемым. + +## Твой первый URL-адрес в Django! + +Пришло время создать твой первый URL-адрес! Мы хотим, чтобы 'http://127.0.0.1:8000/' возвращал домашнюю страничку нашего блога со списком записей в нём. + +Мы также хотим сохранить файл `mysite/urls.py` в максимально аккуратном виде, так что мы импортируем URL-адреса для нашего приложения `blog` в `mysite/urls.py`. + +Вперёд, добавь строку для импорта `blog.urls`. Обрати внимание, что здесь мы используем функцию `include`, поэтому тебе придется импортировать её в строке `from django.urls...`. + +Файл `mysite/urls.py` должен выглядеть следующим образом: + +{% filename %}mysite/urls.py{% endfilename %} +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django теперь будет перенаправлять все запросы 'http://127.0.0.1:8000/' к `blog.urls` и искать там дальнейшие инструкции. + +## blog.urls + +Создай новый пустой файл `blog/urls.py`. Отлично! Добавь в него следующие две строки: + +{% filename %}blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views +``` + +Так мы импортировали функцию `path` Django и все `views` (представления) из приложения `blog` (у нас их пока нет, но через минуту они появятся!) + +После этого мы можем добавить наш первый URL-шаблон: + +{% filename %}blog/urls.py{% endfilename %} +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Как ты можешь заметить, мы связали `view` под именем `post_list` с корневым URL-адресом (`''`). Этот шаблон URL будет соответствовать пустой строке. Это правильно, потому что для обработчиков URL в Django 'http://127.0.0.1:8000/' не является частью URL. Этот шаблон скажет Django, что `views.post_list` — это правильное направление для запроса к твоему веб-сайту по адресу 'http://127.0.0.1:8000/'. + +Последняя часть `name='post_list'` — это имя URL, которое будет использовано, чтобы идентифицировать его. Оно может быть таким же, как имя представления (англ. view), а может и чем-то совершенно другим. Мы будем использовать именованные URL позднее в проекте, поэтому важно указывать их имена уже сейчас. Мы также должны попытаться сохранить имена URL-адресов уникальными и легко запоминающимися. + +Если сейчас ты попытаешься открыть страницу http://127.0.0.1:8000/ в браузере, то увидишь сообщение о том, что веб-страница недоступна. Это произошло потому, что сервер (помнишь, как мы набирали `runserver`?) перестал обрабатывать запросы. Чтобы понять почему, открой окно своей командной строки. + +![Ошибка][2] + + [2]: images/error1.png + +В твоей командной строке появилось сообщение об ошибке, но не беспокойся — оно, на самом деле, довольно полезно. Ты можешь прочесть, что не существует атрибута с именем 'post_list' — __no attribute 'post_list'__. Это название **представления**, которое Django пытается найти и использовать, но мы же его ещё не создали. В данный момент раздел `/admin/` тоже не будет работать. Не беспокойся, мы этим займёмся. + +> Если хочешь узнать больше о Django URLconfs, посмотри официальную документацию: https://docs.djangoproject.com/en/2.0/topics/http/urls/ diff --git a/ru/django_urls/images/error1.png b/ru/django_urls/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/ru/django_urls/images/error1.png differ diff --git a/ru/django_urls/images/images/error1.png b/ru/django_urls/images/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/ru/django_urls/images/images/error1.png differ diff --git a/ru/django_urls/images/images/url.png b/ru/django_urls/images/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/ru/django_urls/images/images/url.png differ diff --git a/ru/django_urls/images/url.png b/ru/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/ru/django_urls/images/url.png differ diff --git a/ru/django_views/README.md b/ru/django_views/README.md new file mode 100755 index 00000000000..69c4186af4b --- /dev/null +++ b/ru/django_views/README.md @@ -0,0 +1,44 @@ +# Представления в Django – время создавать! + +Пришло время избавиться от ошибки, на которую мы наткнулись в прошлой главе :) + +*view*, или *представление*, — это то место, где мы разместим «логику» работы нашего приложения. Оно запросит информацию из `модели`, которую мы создали ранее, и передаст её в `шаблон`. Шаблонами мы займёмся в следующей главе. Представления похожи на методы в Python и лишь немногим сложнее того, с чем мы уже сталкивались в главе __Введение в Python__. + +Представления размещаются в файле `views.py`. Мы добавим свои *представления* в файл `blog/views.py`. + +## blog/views.py + +Хорошо, давай откроем этот файл и посмотрим на его содержимое: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render + +# Create your views here. +``` + +Не слишком много кода. + +Помнишь, что строки, начинающиеся с символа `#` — это комментарии? То есть Python не будет пытаться запустить их содержимое. + + Простейшее *представление* может выглядеть следующим образом. + +{% filename %}blog/views.py{% endfilename %} +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Как ты можешь заметить, мы создали функцию (`def`) с именем `post_list`, которая принимает `request` в качестве аргумента и возвращает (`return`) результат работы функции `render`, которая уже соберёт наш шаблон страницы `blog/post_list.html`. + +Сохрани файл, перейди по адресу http://127.0.0.1:8000/ и посмотри, что у нас получилось. + +Другая ошибка! Читаем, что произошло: + +![Ошибка][1] + + [1]: images/error.png + +Это значит, что, по крайней мере, сервер снова работает, но что-то всё же пошло не так, верно? Не беспокойся, это просто страница с сообщением об ошибке, бояться совершенно нечего! Как и сообщения об ошибках в консоли, такие страницы чрезвычайно полезны. Здесь ты можешь прочесть: *TemplateDoesNotExist* — такого шаблона не существует. Давай исправим ошибку и создадим шаблон в следующей главе! + +> Подробнее о представлениях в Django можно узнать из официальной документации: https://docs.djangoproject.com/en/1.11/topics/http/views/ diff --git a/ru/django_views/images/error.png b/ru/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/ru/django_views/images/error.png differ diff --git a/ru/domain/README.md b/ru/domain/README.md new file mode 100755 index 00000000000..2aca96d1f81 --- /dev/null +++ b/ru/domain/README.md @@ -0,0 +1,71 @@ +# Домен + +Heroku предоставил нам домен, но он довольно длинный, его сложно запомнить, да и выглядит он страшно. Было бы неплохо иметь короткий и легко запоминаемый домен, верно? + +В этой главе мы покажем как купить домен и привязать его к Heroku! + +## Где регистрировать домен? + +Типичный домен стоит около $15 в год. Существуют варианты и дешевле, и дороже, в зависимости от провайдера. Существует множество компаний, у которых ты можешь купить домен: простой [поиск в интернете][1] выдаст тысячи предложений. + + [1]: https://www.google.com/search?q=register%20domain + +Наш любимый выбор [I want my name][2]. Они рекламируют себя как "управление доменами без боли" и это действительно так. + + [2]: https://iwantmyname.com/ + +## Как зарегистрировать домен в IWantMyName? + +Перейди по ссылке [iwantmyname][3] и впиши желаемый домен в форму поиска. + + [3]: https://iwantmyname.com + +![][4] + + [4]: images/1.png + +Ты должна увидеть список доступных доменов с выбранным именем. Как ты можешь заметить, смайлик указывает занят ли домен или доступен для покупки. + +![][5] + + [5]: images/2.png + +Мы решили купить `djangogirls.in`: + +![][6] + + [6]: images/3.png + +Переходим к оформлению заказа. Ты должна авторизоваться на iwantmyname, если не сделала этого до сих пор. После этого укажи номер своей кредитки и соверши покупку! + +Теперь перейди в раздел `Domains` через меню и выбери свой новый домен. Затем найди ссылку `manage DNS records` и кликни по ней: + +![][7] + + [7]: images/4.png + +После этого найди следующую форму: + +![][8] + + [8]: images/5.png + +И заполни её следующей информацией: - Hostname: www - Type: CNAME - Value: your domain from Heroku (for example djangogirls.herokuapp.com) - TTL: 3600 + +![][9] + + [9]: images/6.png + +Нажми кнопку Add и Save changes в низу экрана. + +Может пройти несколько часов прежде чем твой домен начнет работать, будь терпеливой! + +## Настройка домена на Heroku + +Нам также нужно сообщить Heroku, что теперь ты будешь использовать свой домен. + +Перейди в [Панель управления Heroku][10], авторизируйся и выбери свое приложение. Затем зайди в настройки приложения и добавь свой домен в разделе `Domains`, после - сохрани изменения. + + [10]: https://dashboard.heroku.com/apps + +Вот и все! \ No newline at end of file diff --git a/ru/dynamic_data_in_templates/README.md b/ru/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..06109f7c694 --- /dev/null +++ b/ru/dynamic_data_in_templates/README.md @@ -0,0 +1,78 @@ +# Динамически изменяющиеся данные в шаблонах + +Отдельные части уже размещены в нужных местах: модель `Post` определена в файле `models.py`, `post_list` — в файле `views.py`, и добавлен шаблон. Но как нам отобразить записи в шаблоне HTML-страницы? Ведь именно этого нам и нужно добиться: взять определённый контент (модели, сохранённые в базе данных) и аккуратно отобразить их в шаблоне, верно? + +Для этого и предназначены *представления*: соединять между собой модели и шаблоны. В `post_list` *представлению* нужно будет взять модели, которые мы хотим отобразить, и передать их шаблону. Таким образом, в *представлениях* мы определяем, что (какая модель) будет отображена в шаблоне. + +Хорошо, так как мы этого добьёмся? + +Нам нужно открыть файл `blog/views.py`. Пока что *представление* `post_list` выглядит следующим образом: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Помнишь, мы говорили о включении кода из других файлов? Теперь нам нужно включить модель, которую мы определили в файле `models.py`. Мы добавим строку `from .models import Post` следующим образом: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from .models import Post +``` + +Точка перед `models` означает *текущую директорию* или *текущее приложение*. Поскольку `views.py` и `models.py` находятся в одной директории, мы можем использовать точку `.` и имя файла (без расширения `.py`). Затем мы импортируем модель (`Post`). + +Но что дальше? Чтобы получить реальную запись из модели `Post`, нам нужен `QuerySet`. + +## QuerySet + +Ты уже должна быть знакома с принципом работы QuerySet. Мы говорили о нём в главе [Django ORM (QuerySets)][1]. + + [1]: ../django_orm/README.md + +Сейчас нас интересует список записей блога, отсортированных по `published_date`, согласна? Мы уже делали это в главе о QuerySet! + +{% filename %}blog/views.py{% endfilename %} +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Теперь нам нужно включить эту строку кода в файл`blog/views.py`, добавив её в функцию `def post_list(request)`, но сначала не забудь добавить строку `from django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Нам осталось передать QuerySet `posts` в шаблон (мы расскажем о том, как отобразить его на странице, в следующей главе). + +Пожалуйста, обрати внимание, что мы создали *переменную* для QuerySet: `posts`. Можешь думать о ней как об имени для нашего QuerySet. Теперь мы можем обращаться к нему, используя имя. + +В функции `render` у нас уже есть параметр `request` (т.е. всё, что мы получим от пользователя в качестве запроса через Интернет) и файл шаблона `'blog/post_list.html'`. Последний параметр, который выглядит как `{}`, — это место, куда мы можем добавить что-нибудь для использования в шаблоне. Мы должны задавать имена передаваемым шаблону вещам (прямо сейчас мы остановимся на `'posts'` :)). В итоге параметр будет выглядеть следующим образом: `{'posts': posts}`. Обрати внимание, что часть перед `:` является строкой; её нужно обернуть в кавычки `''`. + +В результате файл `blog/views.py` должен выглядеть следующим образом: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Вот и всё! Теперь пришло время перейти к шаблону и отобразить QuerySet на странице! + +Подробнее о QuerySets в Django можно узнать в официальной документации: https://docs.djangoproject.com/en/1.11/ref/models/querysets/ diff --git a/ru/extend_your_application/README.md b/ru/extend_your_application/README.md new file mode 100755 index 00000000000..658ae9c05ff --- /dev/null +++ b/ru/extend_your_application/README.md @@ -0,0 +1,229 @@ +{% set warning_icon = '' %} + +# Расширяем свое приложение + +Мы уже выполнили часть необходимых шагов для создания веб-сайта: мы знаем как создать модель, URL, представление и шаблон. Мы также знаем, как улучшить визуальный дизайн с помощью CSS. + +Время для практики! + +Первое, что нам потребуется в блоге — страница для отображения конкретной записи, верно? + +У нас уже есть модель `Post`, так что нам не нужно добавлять дополнительный код в файл `models.py`. + +## Создадим в шаблоне ссылку на страницу поста + +Мы начнём с добавления ссылки внутри файла `blog/templates/blog/post_list.html`. Пока он выглядит следующим образом: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}Нам хотелось бы иметь ссылку с заголовка поста в списке на страницу с подробной информацией о посте. Давай изменим `

{{ post.title }}

`, чтобы получилась ссылка на пост:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} +```html +

{{ post.title }}

+``` + +{% raw %}Самое время разобраться с загадочным `{% url 'post_detail' pk=post.pk %}`. Как можешь предположить, синтаксис `{% %}` означает использование тегов шаблонов Django. На этот раз мы используем тот, что создаст для нас URL!{% endraw %} + +Параметр `post_detail` означает, что Django будет искать URL с именем `post_detail` в файле `blog.urls.py`. + +А что насчёт `pk=post.pk`? `pk` — это сокращение от primary key (первичный ключ). Он уникальным образом определяет каждую запись в базе данных. Поскольку мы не задали первичного ключа в нашей модели `Post`, Django создал такой ключ за нас (по умолчанию это порядковый номер, то есть 1, 2, 3…) и добавил поле `pk` к каждой записи блога. Для получения первичного ключа мы напишем `post.pk` — точно так же, как мы получали значения остальных полей (`title`, `author` и т.д.) нашего объекта `Post`. + +Теперь, когда мы перейдем по адресу http://127.0.0.1:8000/, мы получим ошибку (как и ожидается, поскольку у нас нет прописанного URL и *представления* для `post_detail`). Она будет выглядеть следующим образом: + +![Ошибка NoReverseMatch][1] + + [1]: images/no_reverse_match2.png + +## Создадим URL для страницы поста + +Давай создадим в `urls.py` URL для *представления* `post_detail`! + +Мы хотим, чтобы наш первый пост отображался на странице со следующим **URL**-адресом: http://127.0.0.1:8000/post/1/ + +Давай создадим URL в файле `blog/urls.py` и укажем Django на *представление* под названием `post_detail`, которое будет отображать пост целиком. Добавь строчку `path('post//', views.post_detail, name='post_detail')` в файл `blog/urls.py`. Файл должен выглядеть так: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Фрагмент `post//` определяет шаблон URL-адреса. Сейчас мы его поясним: +- `post/` значит, что после начала строки URL должен содержать слово **post** и косую черту **/**. Пока всё в порядке. +- `` — эта часть посложнее. Она означает, что Django ожидает целочисленное значение и преобразует его в представление — переменную `pk`. +- `/` — затем нам нужен еще один символ __/__ перед тем, как адрес закончится. + + +Славненько, мы добавили новый шаблон URL в файл `blog/urls.py`! Давай обновим страницу: http://127.0.0.1:8000/. Бууум! Сервер снова перестал работать. Проверь консоль — как и ожидалось, ещё одна ошибка! + +![AttributeError][2] + + [2]: images/attribute_error2.png + +Помнишь, каким должен быть следующий шаг? Конечно: добавить представление! + +## Добавим представление для страницы поста + +В этот раз *представление* получит дополнительный параметр `pk`. Но как дать нашему *представлению* знать о нём? Для этого мы определим функцию как `def post_detail(request, pk):`. Обрати внимание, что мы должны использовать то же имя переменной, что мы выбрали для обработки URL (`pk`). Пропуск переменной будет неправилен и приведёт к ошибке! + +Теперь мы хотим получить одну конкретную запись из блога. Для этого потребуется использовать QuerySet: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} +```python +Post.objects.get(pk=pk) +``` + +Однако в этом коде есть проблема. Если не существует экземпляра объекта `Post` с заданным `primary key` (`pk`), мы получим страшную ошибку! + +![Ошибка DoesNotExist][3] + + [3]: images/does_not_exist2.png + +Мы этого не хотим! Однако в Django, конечно, есть средство, которое позволит нам её обойти: `get_object_or_404`. В случае, если не существует экземпляра объекта `Post` с заданным `pk`, мы получим намного более приятную страницу (которая называется `Page Not Found 404`). + +![Страница не найдена][4] + + [4]: images/404_2.png + +Хорошая новость состоит в том, что ты можешь сделать свою страницу `Page not found`. Но для нас сейчас это не самая важная задача, и мы её пропустим. + +Хорошо, пришло время добавить *представление* в файл `views.py`! + +В файле `blog/urls.py` мы создали шаблон URL под названием `post_detail`, который ссылался на представление под названием `views.post_detail`. Это значит, что Django ожидает найти функцию-представление с названием `post_detail` в `blog/views.py`. + +Нам нужно открыть файл `blog/views.py` и добавить в него следующий код: + +{% filename %}blog/views.py{% endfilename %} +```python +from django.shortcuts import render, get_object_or_404 +``` + +— рядом с другими строками, начинающимися с `from`. В конец же файла мы добавим наше новое *представление*: + +{% 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}) +``` + +Вот так. Теперь обнови страницу http://127.0.0.1:8000/ + +![Представление списка записей][5] + + [5]: images/post_list2.png + +Заработало! Только что произойдёт, если ты попробуешь перейти по ссылке из заголовка записи? + +![Ошибка TemplateDoesNotExist][6] + + [6]: images/template_does_not_exist2.png + +Ой, нет! Другая ошибка! Но мы уже знаем, как иметь с ней дело, верно? Нам нужно добавить шаблон! + +## Создадим шаблон для страницы поста + +Мы создадим файл `post_detail.html` в директории `blog/templates/blog`. + +Он должен содержать следующее: + +{% 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 %} +``` + +И снова мы расширяем `base.html`. В блоке `content` мы отображаем дату публикации (published_date, если она существует), заголовок и текст. Нам также нужно обсудить пару важных вещей, хорошо? + +{% raw %}`{% if ... %} ... {% endif %}` — это тег шаблона, который мы можем использовать, если нам нужно что-то проверить (помнишь конструкцию `if ... else ..` из главы **Введение в Python**?). В данном случае мы хотим проверить, не пуста ли дата публикации поста — `published_date`.{% endraw %} + +Отлично, можешь перезагрузить страницу и проверить, пропала ли ошибка `Page not found`. + +![Отдельная страницы записи][7] + + [7]: images/post_detail2.png + +Ура! Всё работает! + +## Ещё одна вещь: развёртывание! + +Было бы неплохо проверить, что веб-сайт всё ещё будет работать на PythonAnywhere, верно? Давай еще раз проведём развёртывание. + +{% 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 +``` + +Затем набери в [Bash-консоли PythonAnywhere][8]: + + [8]: https://www.pythonanywhere.com/consoles/ + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd ~/.pythonanywhere.com +$ git pull +[...] +``` + +И нажми **Reload** на вкладке [Web][9]. + + [9]: https://www.pythonanywhere.com/web_app_setup/ + +## Обновим статические файлы на сервере + +Серверы вроде PythonAnywhere часто обрабатывают статические файлы (например, CSS) не так, как Python-файлы. Так происходит потому, что сервера могут оптимизировать их использование так, чтобы они быстрее загружались. В результате после того, как мы поменяли CSS-файлы, надо дать серверу команду обновить их. Эта команда называется `collectstatic`. + +Начни с активации virtualenv, если окружение уже не активно (PythonAnywhere использует для этого команду `workon`. Она работает так же, как `source myenv/bin/activate`, которую ты используешь на своём компьютере. + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ workon .pythonanywhere.com +(ola.pythonanywhere.com)$ python manage.py collectstatic +[...] +``` + +Команда `manage.py collectstatic` немножко похожа на `manage.py migrate`. Мы сперва вносим какие-то изменения в наш код, а затем сообщаем Django *применить* эти изменения — к набору статических файлов на сервере или к базе данных. + +В любом случае, мы теперь готовы перейти по ссылке ["Web" page][10] (нажав на кнопку в меню в правом верхнем углу консоли) и кликнуть на **Reload**, а затем посмотреть на страницу [https://subdomain.pythonanywhere.com][11], где отобразится результат. + + [10]: https://www.pythonanywhere.com/web_app_setup/ + [11]: https://subdomain.pythonanywhere.com + + +Вот и всё! Поздравляем :) diff --git a/ru/extend_your_application/images/404_2.png b/ru/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/ru/extend_your_application/images/404_2.png differ diff --git a/ru/extend_your_application/images/attribute_error2.png b/ru/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..33a3b36b1d3 Binary files /dev/null and b/ru/extend_your_application/images/attribute_error2.png differ diff --git a/ru/extend_your_application/images/does_not_exist2.png b/ru/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/ru/extend_your_application/images/does_not_exist2.png differ diff --git a/ru/extend_your_application/images/no_reverse_match2.png b/ru/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/ru/extend_your_application/images/no_reverse_match2.png differ diff --git a/ru/extend_your_application/images/post_detail2.png b/ru/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/ru/extend_your_application/images/post_detail2.png differ diff --git a/ru/extend_your_application/images/post_list2.png b/ru/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/ru/extend_your_application/images/post_list2.png differ diff --git a/ru/extend_your_application/images/template_does_not_exist2.png b/ru/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/ru/extend_your_application/images/template_does_not_exist2.png differ diff --git a/ru/how_the_internet_works/README.md b/ru/how_the_internet_works/README.md new file mode 100755 index 00000000000..76f31772038 --- /dev/null +++ b/ru/how_the_internet_works/README.md @@ -0,0 +1,55 @@ +# Как работает Интернет + +> Для проходящих курс дома: эта глава рассмотрена в видео [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc). + +> Эта глава вдохновлена выступлением «Как работает Интернет» Джессики Маккеллар (http://web.mit.edu/jesstess/www/). + +Можем поспорить, что ты пользуешься Интернетом каждый день. Но знаешь ли ты на самом деле, что происходит после ввода адреса, например, https://djangogirls.org, в браузер и нажатия `Enter`? + +Первое, что тебе нужно понять, это то, что веб-сайт представляет собой просто группу файлов, сохраненных на жёстком диске. Так же, как твои фильмы, музыка или фотографии. Тем не менее, есть одна особенность, которая является уникальной для сайтов: они содержат компьютерный код, называемый HTML. + +Если ты не знакома с программированием, то сначала может быть трудно понять HTML, но твой веб-браузер (например, Chrome, Safari, Firefox, и т. д.) обожает его. Веб-браузеры созданы для того, чтобы понимать этот код, следовать его указаниям и представлять файлы, из которых состоит твой веб-сайт, именно так, как ты этого хочешь. + +Как и с любым файлом, нам нужно хранить HTML файлы где-то на жёстком диске. Для Интернета мы используем специальные, мощные компьютеры, называемые *серверами*. У них нет экрана, мыши или клавиатуры, потому что их основной целью является хранение и обслуживание данных. Вот почему они называются *серверами* — потому что они *обслуживают* (serve) твои данные. + +Хорошо, но ты хочешь знать, как выглядит Интернет, так? + +Мы нарисовали тебе картинку! Он выглядит вот так: + +![Рисунок 1.1][1] + + [1]: images/internet_1.png + +Довольно беспорядочно, правда? На самом деле, это сеть связанных машин (упомянутых выше *серверов*). Сотен тысяч машин! Километры и километры кабелей по всему миру! На веб-сайте с картой подводных кабелей (http://submarinecablemap.com/) ты сможешь увидеть, насколько сложной является сеть. Вот скриншот с сайта: + +![Рисунок 1.2][2] + + [2]: images/internet_3.png + +Поразительно, не так ли? Однако, очевидно, что невозможно соединить друг с другом кабелем все машины, подключенные к Интернету. Таким образом, чтобы достичь нужной машины (например, хранящей https://djangogirls.org), мы должны передать запрос через множество других машин. + +Этот процесс выглядит следующим образом: + +![Рисунок 1.3][3] + + [3]: images/internet_2.png + +Представь себе, что когда ты вводишь адрес https://djangogirls.org, то отправляешь письмо, в котором говорится: «Дорогие Django Girls, я хочу увидеть сайт djangogirls.org. Отправьте мне его, пожалуйста!» + +Твое письмо отправляется в ближайшее почтовое отделение. Затем оно направляется в другое, которое немного ближе к адресату, а затем в следующее и так далее до его доставки в пункт назначения. Единственное отличие в том, что при отправке множества писем (*пакетов данных*) по одному адресу каждое из них может пойти через совершенно разные почтовые отделения (*маршрутизаторы*). Это зависит от того, как они были распределены в каждом отделении. + +![Рисунок 1.4][4] + + [4]: images/internet_4.png + +Да, все так просто. Ты отправляешь сообщения и ждешь ответа. Конечно, вместо бумаги и ручки ты используешь байты данных, но идея та же! + +Вместо адресов с названием улицы, города, почтового индекса и названия страны мы используем IP-адреса. Твой компьютер сначала просит DNS (Domain Name System) перевести djangogirls.org в IP-адрес. Это работает примерно как в случае старых телефонных книг, где можно по имени человека, с которым ты хочешь связаться, найти его номер телефона и адрес. + +Когда ты отправляешь письмо, оно должно обладать определенными особенностями, чтобы его доставили правильно: адресом, маркой и т.д. Ты также используешь язык, который понимает получатель, верно? То же самое относится к *пакетам данных*, которые ты отправляешь, чтобы увидеть веб-сайт. Мы используем протокол под названием HTTP (англ. HyperText Transfer Protocol, протокол передачи гипертекста). + +Поэтому, в принципе, когда у тебя есть веб-сайт, то необходимо иметь и *сервер* (машину), где он находится. Когда *сервер* получает входящий *запрос* (в письме), он отправляет обратно твой веб-сайт (в другом письме). + +Поскольку это руководство по Django, разумно будет спросить — что же он делает в этой системе. Когда ты отправляешь ответ, то ты не всегда хочешь отправлять одно и то же письмо всем получателям. Намного лучше, если твои письма являются персонифицированными, особенно для человека, который только что тебе написал сам, правильно? Django помогает тебе с созданием этих персонализированных, интересных писем :). + +Ну, хватит болтать, время заняться делом! diff --git a/ru/how_the_internet_works/images/internet_1.png b/ru/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/ru/how_the_internet_works/images/internet_1.png differ diff --git a/ru/how_the_internet_works/images/internet_2.png b/ru/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/ru/how_the_internet_works/images/internet_2.png differ diff --git a/ru/how_the_internet_works/images/internet_3.png b/ru/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/ru/how_the_internet_works/images/internet_3.png differ diff --git a/ru/how_the_internet_works/images/internet_4.png b/ru/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/ru/how_the_internet_works/images/internet_4.png differ diff --git a/ru/html/README.md b/ru/html/README.md new file mode 100755 index 00000000000..6ac6ac5b843 --- /dev/null +++ b/ru/html/README.md @@ -0,0 +1,226 @@ +# Введение в HTML + +«Так что же это за шаблон?» — можешь спросить ты. + +Шаблон — это файл, который ты можешь использовать повторно для отображения различной информации в заданном формате; например, ты можешь использовать шаблон, чтобы упростить написание письма, поскольку письма хоть и различаются по содержанию и получателю, но сохраняют общую структуру. + +Шаблоны в Django написаны на языке, называемом HTML (это тот HTML, о котором было упоминание в первой главе __Как работает Интернет__). + +## Что такое HTML? + +HTML — это простой код, который может быть интерпретирован твоим браузером — таким как Chrome, Firefox или Safari — чтобы отобразить веб-страницу пользователю. + +HTML (от англ. "HyperText Markup Language") — язык гипертекстовой разметки. __Гипертекст__ — это тип текста, поддерживающий гиперссылки между страницами. Под __разметкой__ понимается введение в текст документа кода, который будет говорить браузеру (в нашем случае), как интерпретировать веб-страницу. HTML код строится при помощи __тегов__, каждый из которых должен начинаться с `<` и заканчиваться `>`. Эти теги представляют __элементы__ разметки. + +## Твой первый шаблон! + +Создание шаблона означает создание файла шаблона. Всё есть файл, верно? Ты уже наверняка заметила это. + +Шаблоны сохраняются в директории `blog/templates/blog`. Для начала создай директорию `templates` внутри директории blog. Затем создай другую директорию `blog` внутри директории templates: + +``` +blog +└───templates + └───blog +``` + +(Ты, вероятно, можешь задаться вопросом: зачем нам нужны две директории с одинаковым названием `blog` — как ты узнаешь позже, это просто удобное соглашение об именовании, которое делает жизнь проще, когда вещи серьезно усложняются.) + +Теперь создай файл `post_list.html` (для начала оставь его пустым) внутри директории `blog/templates/blog`. + +Посмотри, как выглядит твой веб-сайт после этого: http://127.0.0.1:8000/ + +> Если тебя всё ещё встречает ошибка `TemplateDoesNotExists`, попробуй перезапустить сервер. Перейди в командную строку, останови веб-сервер нажатием Ctrl+C (Ctrl и С одновременно) и запусти его снова командой `python manage.py runserver`. + +![Рисунок 11.1][1] + + [1]: images/step1.png + +Ошибки больше нет! Поздравляем :) Однако твой веб-сайт всё равно ничего не отображает, кроме пустой страницы, поскольку твой шаблон пуст. Нам нужно это исправить. + +Добавь следующий код в файл шаблона: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + +

Hi there!

+

It works!

+ +``` + +Как теперь выглядит твой веб-сайт? Нажми сюда, чтобы узнать: http://127.0.0.1:8000/ + +![Рисунок 11.2][2] + + [2]: images/step3.png + +Заработало! Хорошая работа :) + +- Наиболее базовый тег, ``, всегда присутствует в начале веб-страницы, а `` — в конце. Как ты можешь заметить, основной контент веб-сайта находится между тегами `` и ``. +- `

` — это тег для параграфов; `

`, соответственно, закрывает каждый параграф. + +## Head и body + +Каждая HTML-страница также делится на два элемента: __head__ и __body__. + +- __head__ — это элемент, содержащий информацию о документе, которая не отображается на экране. + +- __body__ — это элемент, который содержит всё, что будет отражено на веб-странице. + +Мы используем тег ``, чтобы сообщить браузеру о настройках страницы, и тег `` — о её содержимом. + +Например, ты можешь разместить элемент title между тегов ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + + +Сохрани файл и обнови страницу. + +![Рисунок 11.3][3] + + [3]: images/step4.png + +Видишь, как браузер понял, что «Ola's blog» — это заголовок страницы? Он распознал `Ola's blog` и разместил текст в заголовке вкладки в твоем браузере (заголовок также будет использоваться при сохранении закладок и т.п.). + +Вероятно, ты уже заметила, что каждый открывающий тег имеет пару — *закрывающий*, с символом `/`, элементы таким образом становятся *вложенными* (ты не можешь закрыть тег, пока остаются открытыми теги внутри него). + +Это как складывать вещи в коробки. У нас есть одна большая коробка, ``; внутри неё лежит коробка ``, которая содержит еще меньшие коробки: `

`. + +Ты должна следовать этим правилам *закрытия* тегов и *вложенности* элементов: если ты их нарушишь, браузер не сможет интерпретировать код и корректно отобразить страницу. + +## Настраиваем шаблон + +Сейчас ты можешь немного повеселиться и попробовать настроить шаблон по своему вкусу! Вот несколько полезных тегов: + +- `

Заголовок

` — главный заголовок страницы +- `

Подзаголовок

` — для заголовков второго уровня +- `

Заголовок третьего уровня

` … и так далее, вплоть до `
` +- `

Параграф

` +- `текст` — курсивный шрифт +- `текст` — жирный шрифт +- `
` — переход на следующую строку (внутрь br нельзя ничего поместить, также для него нет закрывающего тега) +- `link` создаёт ссылку +- `
  • первый элемент
  • второй элемент
` создаёт список, такой же как этот! +- `
` определяет раздел страницы + +Вот пример готового шаблона, скопируй его содержимое в файл `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Мы создали три `div` элемента: + +- Первый элемент `div` содержит название нашего блога, которое также является ссылкой. +- Два других `div` элемента содержат текст записи и дату публикации: `h2` тег с заголовком записи, который также является ссылкой, и два `p` (параграфа) с текстом, один для даты, а другой — для самого текста записи. + +Это даёт нам следующий результат: + +![Рисунок 11.4][4] + + [4]: images/step6.png + +Ура! Однако до сих пор наш шаблон отображал лишь __одну и ту же информацию__ — тогда как раньше мы говорили, что шаблоны позволяют нам отображать __различную__ информацию в __одном и том же формате__. + +Что мы действительно хотим, так это отображать существующие записи, добавленные через панель администратора Django; этим и займёмся в следующий раз. + +## И ещё кое-что: публикация! + +Хотелось бы увидеть всё это вживую в интернете, согласна? Давай проведём еще одно развёртывание веб-сайта на PythonAnywhere. + +### Commit и push кода в репозиторий GitHub + +Во-первых, давай посмотрим, какие файлы были изменены с момента последнего развёртывания (выполни эти команды локально, не на PythonAnywhere): + +{% filename %}command-line{% endfilename %} +``` +$ git status +``` + +Убедись, что находишься в директории `djangogirls`, и попроси `git` выбрать все изменения в пределах папки: + +{% filename %}command-line{% endfilename %} +``` +$ git add --all . +``` + +> **Примечание**: `--all` («всё») означает, что `git` также обратит внимание на удалённые файлы (по умолчанию он отслеживает новые/изменённые файлы). Также помни (из третьей главы), что `.` означает текущую директорию. + +Прежде чем мы загрузим файлы, давай проверим, что именно `git` будет загружать (все файлы, которые `git` готов отправить на сервер, отмечаются шрифтом зелёного цвета): + +{% filename %}command-line{% endfilename %} +``` +$ git status +``` + +Мы почти у цели, пришло время сохранить изменения в истории. К сохраняемой версии мы добавим небольшое сообщение, в котором кратко опишем изменения. Можешь набрать в качестве сообщения всё, что захочешь, однако полезно использовать информативную запись, так будет проще вспомнить внесённые изменения в будущем. + +{% filename %}command-line{% endfilename %} +``` +$ git commit -m "Changed the HTML for the site." +``` + + +> __Примечание__: убедись, что используешь двойные кавычки вокруг комментария. + +После того, как мы сделали это, мы загрузим (заpush'им) изменения на GitHub: + +{% filename %}command-line{% endfilename %} +``` +$ git push +``` + + +### Загружаем новый код на PythonAnywhere и перезапускаем веб-приложение + +* Открой вкладку ["терминалы"][5] на PythonAnywhere и переключись на уже запущенную **консоль Bash** (или новую). Затем набери следующую команду: + + [5]: https://www.pythonanywhere.com/consoles/ + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ cd ~/.pythonanywhere.com +$ git pull +[...] +``` + +Можешь понаблюдать, как твой код будет загружаться на сервер. Если хочешь проверить успешность процедуры — открой вкладку **Файлы** и просмотри свой код на PythonAnywhere. + +* Наконец, переключись на вкладку [Web][6] и нажми кнопку **Reload**. + + [6]: https://www.pythonanywhere.com/web_app_setup/ + +Обновления должны отобразиться на веб-сайте! Переключись на него и обнови страницу. Ты должна сразу заметить улучшения :) diff --git a/ru/html/images/step1.png b/ru/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/ru/html/images/step1.png differ diff --git a/ru/html/images/step3.png b/ru/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/ru/html/images/step3.png differ diff --git a/ru/html/images/step4.png b/ru/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/ru/html/images/step4.png differ diff --git a/ru/html/images/step6.png b/ru/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/ru/html/images/step6.png differ diff --git a/ru/images/application.png b/ru/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/ru/images/application.png differ diff --git a/ru/installation/README.md b/ru/installation/README.md new file mode 100755 index 00000000000..73b77d8a527 --- /dev/null +++ b/ru/installation/README.md @@ -0,0 +1,56 @@ +# Если ты занимаешься дома + +Если ты занимаешься по этому руководству дома, а не на одной из [встреч Django Girls](https://djangogirls.org/events/), то можешь пропустить этот раздел и приступить сразу же к главе [Как работает интернет](../how_the_internet_works/README.md). + +Дело в том, что по ходу руководства мы всё равно будем рассматривать все эти вещи, а текущий раздел является дополнительным, где мы просто собрали инструкции по установке вместе (это используется в некоторых форматах мастер-классов). Ты можешь установить все сразу, воспользовавшись инструкцией ниже. Но можешь пропустить этот раздел, приступив к изучению основного материала, где детали установки мы объясним по мере необходимости. + +Удачи! + +# Если ты посещаешь мастер-класс + +Если ты находишься на одном из [мероприятий Django Girls](https://djangogirls.org/events/): +- Эта страница для тебя, если ты находишься на встрече Django Girls "вечер настроек" перед основным семинаром! Следуй инструкции ниже, а если возникнут трудности, попроси наставника помочь. На основном мастер-классе ты можешь пропускать инструкции по установке, с которыми столкнёшься. +- Возможно, организаторы мастер-класса, в котором ты будешь участвовать, попросили установить всё необходимое перед событием. Если это так, то эта страница для тебя! Следуй инструкции ниже. Если что-то самостоятельно выполнить не получилось, ничего страшного, на мероприятии ты можешь воспользоваться помощью наставника. +- Если мастер-класс, участницей которого ты являешься, не организует встречу "вечер настроек" (или ты не смогла присутствовать), и организаторы не попросили тебя попытаться установить все до начала мероприятия, пропусти этот раздел и переходи к главе [Как работает интернет](../how_the_internet_works/README.md). Не переживай, ты установишь все необходимое во время прохождения руководства на самом мастер-классе. + +# Установка +На мастер-классе ты будешь создавать блог. Также по мере необходимости, ты узнаешь, как устанавливать различное программное обеспечение и создашь некоторые учетные записи. Данная страница является местом, где собраны вместе все необходимые инструкции по установке и регистрации. + + +{% include "/chromebook_setup/instructions.md" %} + + +# Краткое введение в командную строку +В инструкции ниже ты часто будешь встречать такие термины, как "консоль", "терминал", "командная строка", на самом деле, они обозначают одно и тоже - окно на компьютере, в которое ты можешь вводить команды. Когда приступишь к основному руководству, ты узнаешь больше о командной строке. На данном этапе необходимо знать только, как открыть окно и как оно выглядит. +{% include "/intro_to_command_line/open_instructions.md" %} + +# Установка Python +{% include "/python_installation/instructions.md" %} + +# Установка редактора кода +{% include "/code_editor/instructions.md" %} + +# Настрока virtualenv и установка Django +{% include "/django_installation/instructions.md" %} + +# Установка Git +{% include "/deploy/install_git.md" %} + +# Создание учётной записи на GitHub +Перейди на [GitHub.com](https://www.github.com) и зарегистрируй новый бесплатный аккаунт. + +# Создание учётной записи на PythonAnywhere +{% include "/deploy/signup_pythonanywhere.md" %} + +# Начинай читать + +Поздравляем, всё готово к работе! Если у тебя ещё осталось немного свободного времени до семинара, было бы полезно начать читать одну из первых глав: + + * [Как работает Интернет](../how_the_internet_works/README.md) + + * [Введение в командную строку](../intro_to_command_line/README.md) + + * [Введение в Python](../python_introduction/README.md) + + * [Что же представляет из себя Django?](../django/README.md) diff --git a/ru/intro_to_command_line/README.md b/ru/intro_to_command_line/README.md new file mode 100755 index 00000000000..33233a30f9c --- /dev/null +++ b/ru/intro_to_command_line/README.md @@ -0,0 +1,437 @@ +# Знакомство с командной строкой + +> Для тех, кто проходит руководство дома: о материале этой главы рассказывает видео [Ваш новый друг — командная строка](https://www.youtube.com/watch?v=jvZLWhkzX-8). + +Вот это да! Всего через несколько минут ты напишешь свою первую строку кода! :) + +__Позволь представить нашего первого нового друга: командную строку!__ + +Следующие шаги покажут, как использовать чёрное окно, которым пользуются все хакеры. В начале оно может показаться немного пугающим, но, на самом деле это просто окно, которое ждет от тебя команды. + +> **Примечание** Пожалуйста, обрати внимание, что в этом руководстве мы используем термины «каталог» и «папка» взаимозаменяемо: эти слова обозначают одно и то же. + +## Что такое командная строка? + +Окно, которое обычно называют __командной строкой__ или __интерфейсом командной строки (англ. CLI, Command Line Interface)__, является текстовым приложением для просмотра, обработки и манипулирования файлами на вашем компьютере. Она делает то же, что и Проводник в Windows или Finder в macOS, но у неё нет графического интерфейса. Другими названиями для командной строки являются: *cmd*, *CLI*, *prompt*, *консоль* или *терминал*. + +## Открываем интерфейс командной строки + +Для того, чтобы начать экспериментировать, нам нужно сначала открыть интерфейс командной строки. +{% include "/intro_to_command_line/open_instructions.md" %} + +## Командная строка + +Перед тобой должно появиться белое или чёрное окошко. Оно ожидает, когда ты введёшь команду. + + + + +Если у тебя Mac или Linux, ты, скорее всего, увидишь знак `$` в конце строки (перед курсором): + +{% filename %}command-line{% endfilename %} +``` +$ +``` + + + + + +Если у тебя Windows, строка будет оканчиваться символом `>`, вот так: + + +{% filename %}command-line{% endfilename %} +``` +> +``` + +Можешь заглянуть в инструкцию для пользовательниц Linux чуть выше -- нам что-то подобное ещё встретится, когда мы дойдём до PythonAnywhere. + + + +Перед каждой твоей командой будет стоять знак `$` или `>` и пробел. Но тебе не нужно их печатать! Компьютер уже сделал это за тебя. :) + +> Небольшое примечание: перед курсором командной строки может быть написано что-то вроде `C:\Users\ola>` или `Olas-MacBook-Air:~ ola$`. Это абсолютно нормально. + +То, что написано до знака `$` или `>`, плюс сам знак, всё вместе называется *приглашением командной строки*. Как правило, оно включает адрес папки, в которой ты сейчас находишься. Оно приглашает тебя ввести в окно команду. + +Далее в руководстве перед каждой командой, которую тебе нужно будет ввести, мы будем писать символ `$` или `>`. Иногда слева от него мы будем добавлять ещё немного текста. Не обращай внимания на левую часть и просто печатай команду — она начинается после специального символа. + +## Твоя первая команда (УРА!) + +Давай введём следующую команду: + + + +{% filename %}command-line{% endfilename %} +``` +$ whoami +``` + + + + + + +{% filename %}command-line{% endfilename %} +``` +> whoami +``` + + + +Теперь нажми `Enter`. Вот что получилось: + +{% filename %}command-line{% endfilename %} +``` +$ whoami +olasitarska +``` + +Как видишь, компьютер только что вывел на экран твоё имя пользователя. Классно, а? :) + +> Постарайся набирать каждую команду вручную, а не копировать и вставлять. Так ты больше запомнишь! + +## Основы + +В каждой операционной системе набор команд для командной строки немного отличается, поэтому не забывай следовать инструкциям для своей операционной системы. Давай попробуем, готова? + +### Текущий каталог + +Было бы неплохо знать, где мы находимся сейчас, верно? Давай посмотрим. Набери эту команду и нажми `Enter`: + + + + +{% filename %}command-line{% endfilename %} +``` +$ pwd +/Users/olasitarska +``` + +> Примечание: 'pwd' означает 'print working directory' (вывести рабочий каталог). + + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd +C:\Users\olasitarska +``` +> Примечание: 'cd' означает 'change directory'(сменить каталог). Если ты пользуешься PowerShell, можешь ввести pwd — как на Linux или macOS. + + + +Ты, вероятно, увидишь нечто похожее на своем компьютере. Когда ты открываешь командную строку, то обычно находишься в домашнем каталоге текущего пользователя. + +--- + +### Как узнать больше о командах + +У многих команд для командной строки есть встроенная справка! Например, вот как узнать подробнее о команде, которая показывает, в какой папке ты сейчас находишься: + + + +В macOS и Linux есть команда `man` — справка о других командах (на английском языке). Набери `man pwd` и посмотри, что пишут о команде `pwd`. Используй `man` с другими командами, чтобы посмотреть для них справку. Как правило, справки `man` выводятся постранично. Нажми пробел, чтобы перейти на следующую страницу. Чтобы выйти, нажми `q`. + + + + + + +Чтобы вывести справку, почти к любой команде можно добавить `/?`. Чтобы прочитать всю справку, возможно, придётся прокрутить текст вниз. Попробуй набрать `cd /?`. + + + + +### Список файлов и каталогов + +Так что же в нем? Было бы здорово узнать. Давай посмотрим: + + + +{% filename %}command-line{% endfilename %} +``` +$ ls +Applications +Desktop +Downloads +Music +... +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> 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 +... +``` +> Примечание: в PowerShell можешь использовать 'ls' — как в Linux или macOS. + + +--- + +### Смена текущего каталога + +Теперь вернёмся в наш каталог рабочего стола: + + + +{% filename %}command-line{% endfilename %} +``` +$ cd Desktop +``` + + + + +{% filename %}command-line{% endfilename %} +``` +$ cd Desktop +``` + +Обрати внимание, что название каталога "Desktop" может быть переведено на язык твоей учётной записи в системе Linux. +В таком случае набери вместо `Desktop` переводное название: например, `Рабочий стол` (в кавычках — они нужны, чтобы командная строка поняла кириллицу). + + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd Desktop +``` + + +Проверь, что рабочий каталог действительно изменился: + + + +{% filename %}command-line{% endfilename %} +``` +$ pwd +/Users/olasitarska/Desktop +``` + + + + +{% filename %}command-line{% endfilename %} +``` +> cd +C:\Users\olasitarska\Desktop +``` + + +Вот и он! + +> Совет от профи: если ты введешь `cd D` и затем нажмешь `tab` на клавиатуре, в командной строке будет автоматически набрана остальная часть имени, что позволит быстрее перемещаться по каталогам. Если c "D", начинается название не одной папки, нажми `Tab` дважды, чтобы получить список вариантов. + +--- + +### Создание каталога + +Как насчет создания каталога practice на рабочем столе? Ты можешь сделать это так: + + + +{% filename %}command-line{% endfilename %} +``` +$ mkdir practice +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> mkdir practice +``` + + +Эта маленькая команда создаст папку с именем `practice` на рабочем столе. Ты можешь проверить, появилась ли она, просто взглянув на рабочий стол или введя команду `ls` (для Linux и macOS) или `dir` (если у тебя Windows)! Попробуй. :) + +> Совет от профи: если ты не хочешь вводить одни и те же команды снова и снова, попробуй нажать на `стрелку вверх` и `стрелку вниз` на клавиатуре для просмотра недавно использованных команд. + +--- + +### Тренируемся! + +Небольшая задачка: в недавно созданной папке `practice` создай папку с названием `test`. Используй команды `cd` и `mkdir`. + +#### Решение: + + + +{% filename %}command-line{% endfilename %} +``` +$ cd practice +$ mkdir test +$ ls +test +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd practice +> mkdir test +> dir +05/08/2014 07:28 PM test +``` + + +Поздравляем! :) + +--- + +### Чистка + +Мы не хотим оставлять беспорядок, поэтому давай удалим всё, что мы создали до этого момента. + +Во-первых, мы должны вернуться на рабочий стол: + + + +{% filename %}command-line{% endfilename %} +``` +$ cd .. +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd .. +``` + + +Используя `..` с командой `cd`, ты можешь сменить текущий каталог на родительский (то есть каталог, который содержит в себе текущий). + +Проверь, где ты находишься: + + + +{% filename %}command-line{% endfilename %} +``` +$ pwd +/Users/olasitarska/Desktop +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> cd +C:\Users\olasitarska\Desktop +``` + + +Пришло время удалить каталог `practice`: + +> __Внимание__: удаление файлов с помощью `del`, `rmdir` или `rm` необратимо. Это означает, что _удалённые файлы будут потеряны навсегда_! Поэтому будь очень осторожна с этими командами. + + + +{% filename %}command-line{% endfilename %} +``` +$ rm -r practice +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> rmdir /S practice +practice, Are you sure ? Y +``` + + +Готово! Давай проверим, что папка действительно удалена: + + + +{% filename %}command-line{% endfilename %} +``` +$ ls +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> dir +``` + + +### Выход + +Вот и всё на данный момент! Теперь можно безопасно закрыть командную строку. Давай сделаем это как хакеры, согласна? :) + + + +{% filename %}command-line{% endfilename %} +``` +$ exit +``` + + + + + +{% filename %}command-line{% endfilename %} +``` +> exit +``` + + +Круто, да?:) + +## Подведём итоги + +Вот краткий обзор некоторых полезных команд: + +Команда (Windows) | Команда (Mac OS / Linux) | Описание | Пример +----------------- | ------------------------ | ----------------------- | --------------------------------------------- +exit | exit | закрыть окно | **exit** +cd | cd | изменить каталог | **cd test** +cd | pwd | вывести текущий каталог | **cd** (Windows) или **pwd** (Mac OS / Linux) +dir | ls | список каталогов/файлов | **dir** +copy | cp | копировать файл | **copy c:\test\test.txt c:\windows\test.txt** +move | mv | переместить файл | **move c:\test\test.txt c:\windows\test.txt** +mkdir | mkdir | создать новый каталог | **mkdir testdirectory** +rmdir (или del) | rm | удалить файл | **del c:\test\test.txt** +rmdir /S | rm -r | удалить каталог | **rm -r testdirectory** +[CMD] /? | man [CMD] | справка для команды | **cd /?** (Windows) или **man cd** (Mac OS / Linux) + +Это лишь некоторые из команд, которые можно использовать в командной строке, но сегодня тебе больше и не пригодится. + +Если тебе интересно, на [ss64.com](http://ss64.com) можно найти полный справочник команд для всех операционных систем (на английском языке). + +## Готова продолжить? + +Давай погрузимся в мир Python! diff --git a/ru/intro_to_command_line/open_instructions.md b/ru/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..685d27bcb85 --- /dev/null +++ b/ru/intro_to_command_line/open_instructions.md @@ -0,0 +1,28 @@ + + + +В зависимости от твоей версии Windows и того, какая у тебя клавиатура, одно из следующих действий откроет окно командной строки (возможно, придётся немного поэкспериментировать, но все варианты пробовать необязательно): +- Перейди в меню Пуск (или на экран Пуск), в строке поиска набери "Командная строка". +- Перейди в меню Пуск → Windows → Командная строка. +- Перейди в меню Пуск → Все программы → Служебные → Командная строка. +- Перейди на экран Пуск, наведи мышь на нижний левый угол экрана и нажми на стрелочку вниз, которая появится там. (Если у тебя тачскрин, листни пальцем снизу вверх.) Откроется страница "Приложения". Выбери пункт "Командная строка" в разделе "Windows". +- Удерживая клавишу Windows на клавиатуре, нажми X. В появившемся меню выбери пункт "Командная строка". +- Удерживая клавишу Windows, нажми R, чтобы появилось окно "Выполнить". Набери в строке cmd и нажми OK. + +![Type "cmd" in the "Run" window](../python_installation/images/windows-plus-r.png) + +В какой-то момент тебе понадобятся два окна командной строки одновременно. Однако в некоторых версиях Windows, если ты попытаешься запустить вторую командную строку, когда одна уже запущена тем же способом, ты вместо этого попадёшь в уже открытое окно командной строки. Попробуй у себя на компьютере и посмотри, что будет! Если у тебя получается открыть только одно окно командной строки, попробуй какой-нибудь другой из вышеприведённых способов в списке. По крайней мере один из них сможет открыть новое окно командной строки. + + + + + +Перейди в Приложения → Прочие → Терминал. + + + + + +Вероятно, командная строка скрывается по адресу: Приложения → Стандартные → Терминал или Приложения → Система → Терминал, но это может зависеть от конкретной системы. Если не сможешь найти — Google поможет :) + + diff --git a/ru/python_installation/README.md b/ru/python_installation/README.md new file mode 100755 index 00000000000..18f7631dc23 --- /dev/null +++ b/ru/python_installation/README.md @@ -0,0 +1,15 @@ +# Давай начнем работать с Python + +Мы наконец-то здесь! + +Но сначала позволь рассказать, что такое Python. Python — это очень популярный язык программирования, который может использоваться для создания веб-сайтов, игр, научного программного обеспечения, графики и многого, многого другого. + +Python возник в конце 80-х годов, и его основная цель — быть понятным для людей (а не только машин!). Благодаря этому он выглядит простым, но не беспокойся — Python кроме этого ещё и очень мощный язык! + +# Установка Python + +> **Примечание:** если ты используешь Chromebook, пропусти эту главу, но выполни инструкции по [настройке для Chromebook](../chromebook_setup/README.md) + +> **Примечание:** если ты уже прошла шаги установки, не нужно делать это снова — можешь переходить прямо к следующей главе! + +{% include "/python_installation/instructions.md" %} diff --git a/ru/python_installation/images/add_python_to_windows_path.png b/ru/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/ru/python_installation/images/add_python_to_windows_path.png differ diff --git a/ru/python_installation/images/python-installation-options.png b/ru/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/ru/python_installation/images/python-installation-options.png differ diff --git a/ru/python_installation/images/windows-plus-r.png b/ru/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/ru/python_installation/images/windows-plus-r.png differ diff --git a/ru/python_installation/instructions.md b/ru/python_installation/instructions.md new file mode 100755 index 00000000000..b27995effa8 --- /dev/null +++ b/ru/python_installation/instructions.md @@ -0,0 +1,113 @@ +> Для проходящих руководство дома: эта глава рассмотрена в видео [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA). + +> Этот подраздел основан на руководстве Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django написан на Python. Нам нужен Python, чтобы сделать что-нибудь в Django. Давай начнем с его установки! Мы хотим, чтобы ты установила самую свежую версию Python 3, поэтому, если у тебя уже есть более ранняя версия, то её придется обновить. Если у тебя уже установлена версия {{ book.py_min_version }} или более высокая, она должна подойти. + + + + +Для начала проверь, какая версия Windows у тебя на компьютере — 32-битная или 64-битная. Это будет указано в строке «Тип системы» на странице «Сведения о системе». Чтобы попасть туда, попробуй один из этих способов: +* Нажми одновременно клавиши Windows и Pause/Break +* Открой панель управления из меню Windows, оттуда перейди в «Система и безопасность», затем в «Система» +* Нажми клавишу Windows, затем перейди по разделам Настройки > Система > О системе + +Ты можешь загрузить Python для Windows с официального веб-сайта: https://www.python.org/downloads/windows/. Перейди по ссылке «Latest Python 3 Release - Python x.x.x». Если у тебя установлена **64-битная** версия Windows, скачай **Windows installer (64-bit)**. Если нет — скачай **Windows installer (32-bit)**. После загрузки дистрибутива ты должна запустить его (двойным щелчком) и следовать инструкциям. + +Обрати внимание на экран мастера установки, который называется «Setup» (Настройка): тебе нужно пролистать его вниз и выбрать опцию «Add Python {{ book.py_version }} to the PATH» (Добавить Python {{ book.py_version }} к системной переменной PATH), как на рисунке (это может выглядеть по-разному в зависимости от версии, которую ты устанавливаешь): + +![Не забудь добавить Python в системную переменную Path](../python_installation/images/python-installation-options.png) + +Когда установка закончится, ты можешь увидеть предложение узнать больше о Python или об установленной тобой версии. Закрой это окно — ты узнаешь намного больше в этом руководстве! + +Примечание: если ты используешь старую версию Windows (7, Vista или ещё более старую версию), и установка Python {{ book.py_version }} завершается выводом сообщения об ошибке, ты можешь попробовать: +1. либо установить все доступные обновления Windows и попробовать установить Python {{ book.py_version }} заново; +2. либо установить [более раннюю версию Python](https://www.python.org/downloads/windows/), например, [3.4.6](https://www.python.org/downloads/release/python-346/). + +Если тебе пришлось установить раннюю версию Python, экран установки может выглядеть чуть иначе, чем показано выше. Не забудь прокрутить окно до строки «Add python.exe to Path», затем нажми кнопку слева от неё и выбери пункт «Will be installed on local hard drive»: + +![Добавление Python в переменную Path, ранние версии](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Примечание:** перед установкой Python в macOS тебе нужно проверить, что в настройках твоего Mac разрешено устанавливать пакеты, загруженные не из App Store. Перейди в Системные настройки (в папке «Программы»), нажми «Защита и безопасность» и выбери вкладку «Общие». Если в разделе «Разрешать загрузки из:» выбран вариант «App Store для Mac», смени его на «App Store для Mac и от установленных разработчиков». + +Тебе нужно перейти по ссылке https://www.python.org/downloads/ и скачать дистрибутив Python: + + * Скачай файл *macOS installer*, + * Сделай двойной щелчок на *python-{{ book.py_release }}-macosx11.pkg* для запуска установщика. + + + + + +Вполне вероятно, что у тебя уже установлен Python. Чтобы проверить это (а также версию языка), открой консоль и введи следующую команду: + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python {{ book.py_release }} +``` + +Если у тебя установлена другая версия Python, не меньше чем {{ book.py_min_version }} (например, {{ book.py_min_release }}), то нет необходимости обновляться. +Если Python не установлен, или ты хочешь использовать другую версию языка, то можешь установить его следующим образом: + + + + + + +Введи эту команду в консоль: + +{% filename %}command-line{% endfilename %} +``` +$ sudo apt install python3 +``` + + + + + +Используй следующую команду в консоли: + +{% filename %}command-line{% endfilename %} +``` +$ sudo dnf install python3 +``` + +Если у тебя старая версия Fedora, то ты можешь получить ошибку «command `dnf` is not found». В этом случае используй `yum`. + + + + + +Используй следующую команду в консоли: + +{% filename %}command-line{% endfilename %} +``` +$ sudo zypper install python3 +``` + + + +Убедись, что установка прошла успешно, открыв приложение *Терминал* и запустив команду `python3`: + +{% filename %}command-line{% endfilename %} +``` +$ python3 --version +Python {{ book.py_release }} +``` +Версия, которую ты увидишь, может быть и не {{ book.py_release }} — там будет такая версия, которую ты установила. + +**ПРИМЕЧАНИЕ:** если ты используешь Windows и получила ошибку с сообщением, что `python3` не найден, попробуй ввести `python` (без `3`) и проверь, будет ли это версия Python {{ book.py_min_version }} или выше. + +---- + +Если у тебя остались какие-либо сомнения, или что-то пошло не так, и ты понятия не имеешь, что делать дальше, — спроси своего тренера! Иногда дела идут не совсем гладко, поэтому лучше попросить помощи у кого-то с большим опытом. diff --git a/ru/python_introduction/README.md b/ru/python_introduction/README.md new file mode 100755 index 00000000000..000e55a2db5 --- /dev/null +++ b/ru/python_introduction/README.md @@ -0,0 +1,1013 @@ +{% set warning_icon = '' %} + +# Введение в Python + +> Часть этой главы основана на учебных пособиях Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Давай напишем немного кода! + +## Консоль Python + +> Для проходящих руководство дома: этот раздел рассмотрен в видео [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +Чтобы начать играть с Python, нам нужно открыть *командную строку* на твоём компьютере. Ты уже должна знать, как это сделать — мы изучали это в главе [Введение в интерфейс командной строки][1]. + + [1]: ../intro_to_command_line/README.md + +Когда будешь готова, следуй приведенным ниже инструкциям. + +Мы хотим открыть консоль Python, так что набери `python`, если работаешь в Windows, или `python3` для Mac OS/Linux, и нажми `enter`. + +{% filename %}command-line{% endfilename %} +``` +$ python3 +Python {{ book.py_release }} (...) +Type "help", "copyright", "credits" or "license" for more information. +>>> +``` + +## Твоя первая команда Python! + +После запуска Python командная строка изменилась на `>>>`. Для нас это означает, что сейчас мы можем использовать только команды на языке Python. Тебе не нужно вводить `>>>` — Python будет делать это за нас. + +Если ты хочешь выйти из консоли Python, в любой момент — просто введи `exit()` или используй сочетание клавиш `Ctrl + Z` для Windows и `Ctrl + D` для Mac/Linux. Тогда ты больше не будешь видеть `>>>`. + +Пока что мы не хотим выходить из консоли Python. Мы хотим узнать больше о ней. Давай начнём с чего-нибудь совсем простого. Например, попробуй набрать простое математическое выражение, вроде `2 + 3`, и нажми `enter`. + +{% filename %}command-line{% endfilename %} +```python +>>> 2 + 3 +5 +``` + +Прекрасно! Видишь, как выскочил ответ? Python знает математику! Ты можешь попробовать другие команды, например: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Чтобы вычислить степень числа, например, 2 в кубе, мы вводим: +{% filename %}command-line{% endfilename %} +```python +>>> 2 ** 3 +8 +``` + +Поиграй с этим немного и затем вернись сюда :). + +Как видишь, Python является прекрасным калькулятором. Если тебе интересно, что ещё можно сделать... + +## Строки + +Как насчет твоего имени? Введи своё имя в кавычках, вот так: + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola" +'Ola' +``` + +Ты только что создала свою первую строку! Это последовательность символов, которые могут быть обработаны компьютером. Строка должна всегда начинаться и заканчиваться одинаковым символом. Им может быть одинарная (`'`) или двойная (`"`) кавычка (разницы нет!) Кавычки говорят Python'у, что внутри них находится строка. + +Строки могут быть слиты воедино. Попробуй так: + +{% filename %}command-line{% endfilename %} +```python +>>> "Hi there " + "Ola" +'Hi there Ola' +``` + +Ты также можешь умножать строки на число: + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Если тебе нужно поставить апостроф внутри строки, то есть два способа сделать это. + +Используй двойные кавычки: + +{% filename %}command-line{% endfilename %} +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +или поставь перед апострофом обратную косую черту (`\`): + +{% filename %}command-line{% endfilename %} +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Прикольно, да? Чтобы увидеть своё имя прописными буквами, просто набери: + +{% filename %}command-line{% endfilename %} +```python +>>> "Ola".upper() +'OLA' +``` + +Ты только что использовала __метод__ `upper` своей строки! Метод (такой как `upper()`) представляет собой набор инструкций, который должен выполнить Python над заданным объектом (в нашем случае: `"Ola"`) при его вызове. + +Если ты хочешь узнать количество букв в своём имени, то и для этого тоже существует функция! + +{% filename %}command-line{% endfilename %} +```python +>>> len("Ola") +3 +``` + +Интересно, почему иногда мы вызываем функцию добавлением `.` к концу строки (как `"Ola".upper()`), а иногда сначала пишем имя функции и затем помещаем строку в скобки? Ну, в некоторых случаях функции принадлежат объектам, например, функция `upper()`, которая может быть применена только к строкам. В этом случае мы называем функцию __методом__. В другом случае функции не относятся к чему-то конкретному и могут использоваться для различных типов объектов, например, функция `len()`. Вот почему мы передаем `"Ola"` в качестве параметра функции `len`. + +### Подведём итог + +Хорошо, достаточно о строках. Пока ты узнала следующее: + +* __командная строка__ — ввод команд (кода) в интерактивную командную строку Python приводит к ответам на Python; +* __числа и строки__ — в Python числа используются для вычислений, а строки - для текстовых объектов; +* __операторы__, такие как + и *, объединяют значения для получения нового; +* __функции__, такие как upper() и len(), выполняют действия над объектами. + +Таковы основы каждого языка программирования, который ты можешь выучить. Готова к чему-то посложнее? Мы уверены, что готова! + +## Ошибки + +Давай попробуем кое-что новенькое. Можем ли мы получить длину числа так же, как длину твоего имени? Введи `len(304023)` и нажми `Enter`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Мы получили нашу первую ошибку! Иконкой {{ warning_icon }} мы будем обозначать код, который при запуске сработает не так, как ожидается. Совершение ошибок (даже преднамеренных) -- важная часть обучения! + +Она говорит о том, что у объектов типа «int» (целые числа) нет длины. Так что же мы можем сейчас сделать? Может быть, мы можем написать наше число в виде строки? У строк ведь есть длина, верно? + +{% filename %}command-line{% endfilename %} +```python +>>> len(str(304023)) +6 +``` + +Сработало! Мы использовали функцию `str` внутри функции `len`. `str()` преобразует всё в строки. + +- Функция `str` преобразует объекты в __строки__ +- Функция `int` преобразует объекты в __целые числа__ + +> Важно: мы можем преобразовать число в текст, но не всегда удается преобразовать текст в числа — например, каков будет результат `int('hello')`? + +## Переменные + +Переменные — важное понятие в программировании. Переменная — это всего лишь имя для чего-то, чтобы использовать его позднее. Программисты используют переменные для хранения данных, чтобы их код был более читабельным, и для того, чтобы им не пришлось запоминать, что есть что. + +Допустим, мы хотим создать новую переменную с именем `name`: + +{% filename %}command-line{% endfilename %} +```python +>>> name = "Ola" +``` + +Видишь? Это очень легко! Просто введи: name равно Ola. + +Как ты уже заметила, твоя программа не возвращает ничего, как было ранее. Так откуда мы знаем, что переменная действительно существует? Просто введи `name` и нажми `Enter`: + +{% filename %}command-line{% endfilename %} +```python +>>> name +'Ola' +``` + +Ура! Твоя первая переменная:)! Ты всегда можешь изменить то, к чему она относится: + +{% filename %}command-line{% endfilename %} +```python +>>> name = "Sonja" +>>> name +'Sonja' +``` + +Ты также можешь использовать переменные и в функциях: + +{% filename %}command-line{% endfilename %} +```python +>>> len(name) +5 +``` + +Круто, правда? Переменными, конечно, может быть что угодно, и цифры тоже! Попробуй следующее: + +{% filename %}command-line{% endfilename %} +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Но что делать, если мы использовали неправильное имя? Можешь догадаться, что произойдет? Давай попробуем! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Ошибка! Как ты можешь видеть, в Python есть различные типы ошибок, эта называется **NameError**. Python выдаст эту ошибку при попытке использовать переменную, которая пока не определена. При возникновении этой ошибки проверь свой код, чтобы узнать, не написала ли ты неправильно имя переменной. + +Попрактикуйся в этом какое-то время и посмотри, что ты сможешь сделать! + +## Функция print + +Попробуй ввести: + +{% filename %}command-line{% endfilename %} +```python +>>> name = 'Maria' +>>> name +'Maria' +>>> print(name) +Maria +``` + +Если просто ввести `name`, интерпретатор Python вернет строковое *представление* переменной 'name', которым, в нашем случае, являются буквы M-a-r-i-a, окруженные одинарными кавычками, ''. Когда ты вводишь `print(name)`, Python "печатает" содержание переменной на экран, без кавычек, что удобнее. + +Как мы увидим позднее, `print()` пригодится, когда нам будет нужно печатать что-то изнутри функций или когда мы захотим напечатать что-то на нескольких строчках. + +## Списки + +Помимо строк и целых чисел Python имеет богатую коллекцию других типов объектов. Сейчас мы собираемся представить тебе один из них — **list** (список). Списки — это именно то, о чём ты подумала: объекты, которые являются списками других объектов :) + +Давай начнем с создания списка: + +{% filename %}command-line{% endfilename %} +```python +>>> [] +[] +``` + +Отлично, это пустой список. Не особенно полезен, да? Давай создадим список лотерейных номеров. Мы не хотим повторять их каждый раз, так что присвоим список переменной: + +{% filename %}command-line{% endfilename %} +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Замечательно, у нас есть список! Что мы можем с ним сделать? Для начала посмотрим, как много лотерейных номеров в нашем списке. Есть идеи, какую функцию можно использовать для этого? Ты её уже знаешь! + +{% filename %}command-line{% endfilename %} +```python +>>> len(lottery) +6 +``` + +Точно! `len()` вернет тебе количество объектов в списке. Удобно, правда? Пожалуй, мы теперь отсортируем его: + +{% filename %}command-line{% endfilename %} +```python +>>> lottery.sort() +``` + +Эта команда не возвращает ничего, она просто меняет порядок номеров в списке. Давайте выведем его на экран и посмотрим, что получилось: + +{% filename %}command-line{% endfilename %} +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Как видишь, номера в списке теперь отсортированы от меньшего к большему. Поздравляем! + +Может, нам нужно обратить порядок? Давай сделаем это! + +{% filename %}command-line{% endfilename %} +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Просто, правда? Если хочешь добавить что-то к своему списку, то можешь воспользоваться этой командой: + +{% filename %}command-line{% endfilename %} +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Если ты хочешь получить только первый номер в списке, то можешь воспользоваться **индексами**. Индекс — это номер позиции в списке, на котором находится нужное нам значение. Программисты предпочитают начать считать с 0, так что первому объекту в списке соответствует индекс 0, следующему —1, и так далее. Попробуй ввести: + +{% filename %}command-line{% endfilename %} +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Как видишь, ты можешь обратиться к различным объектам в своем списке, используя имя списка и индекс объекта в квадратных скобках. + +Чтобы удалить что-либо из списка, тебе понадобятся **индексы**, с которыми мы уже разобрались выше, и команда `pop()`. Давай попробуем закрепить пройденное на примере: мы будем удалять первый элемент из нашего списка. + +{% 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] +``` + +Сработало как по маслу! + +В качестве дополнительной тренировки попробуй следующие индексы: 6, 7, 1000, -1, -6 и -1000. Можешь предсказать результат? Видишь логику работы? + +Ты можешь найти перечень всех методов, относящихся к списку, в этой главе официальной документации Python: https://docs.python.org/3/tutorial/datastructures.html + +## Словари + +> Для проходящих руководство дома: этот раздел рассмотрен в видео [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Словари схожи со списками, но ты обращаешься к значениям словаря по ключу, а не по индексу. Ключом может быть любая строка или число. Давай создадим пустой словарь: + +{% filename %}command-line{% endfilename %} +```python +>>> {} +{} +``` + +Это показывает, что мы создали пустой словарь. Ура! + +Теперь попробуй следующую команду (можешь заменить значения на своё имя, страну и т.д.): + +{% filename %}command-line{% endfilename %} +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +Этой командой ты создала переменную `participant` с тремя парами ключ/значение: + +- ключ `name`, указывающий на значение `'Ola'` (объект типа `строка`), +- ключ `country`, указывающий на значение `'Poland'` (еще одна `строка`), +- и ключ `favorite_numbers`, указывающий на значение `[7, 42, 92]` (объект типа `список` с тремя числами внутри). + +Значение конкретного ключа можно узнать следующим образом: + +{% filename %}command-line{% endfilename %} +```python +>>> print(participant['name']) +Ola +``` + +Видишь, синтаксис похож на работу со списком. Но вместо того, чтобы запоминать индекс, тебе нужно помнить ключ. + +Что случится, если мы спросим у Python значение несуществующего в словаре ключа? Можешь предположить? Давай попробуем и узнаем наверняка! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Смотри, другая ошибка! Эта называется **KeyError**. Python услужливо напоминает, что ключа `'age'` нет в словаре. + +Когда стоит использовать словарь, а когда список? Это хороший вопрос для самостоятельного размышления. Сделай предположение перед тем, как читать дальше. + +- Тебе нужна упорядоченная последовательность элементов? Список — наш выбор. +- Тебе нужны сочетания ключ/значение, чтобы быстро искать значения (по ключу) в дальнейшем? Словарь отлично подойдет. + +Словари, как и списки, *изменяемы*, т. е. они могут быть изменены после того, как были созданы. Ты можешь добавить новые пары ключ/значение в словарь следующим образом: + +{% filename %}command-line{% endfilename %} +```python +>>> participant['favorite_language'] = 'Python' +``` + +Так же как в примере со списками, использование функции `len()` вернёт число пар ключ/значение в словаре. Попробуй сама: + +{% filename %}command-line{% endfilename %} +```python +>>> len(participant) +4 +``` + +Надеюсь, всё вышеизложенное понятно. :) Готова к новым приключениям со словарями? На следующей строке тебя ждут изумительные вещи. + +Ты можешь использовать команду `pop()` для удаления элементов из словаря. Скажем, ты хочешь удалить элемент с ключом `'favorite_numbers'`. Просто набери следующую команду: + +{% filename %}command-line{% endfilename %} +```python +>>> participant.pop('favorite_numbers') +[7, 42, 92] +>>> participant +{'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} +``` + +Как видишь, пара ключ/значение с ключом 'favorite_numbers' была удалена. + +Помимо этого, ты можешь заменить значение, связанное с уже существующим ключом. Набери: + +{% filename %}command-line{% endfilename %} +```python +>>> participant['country'] = 'Germany' +>>> participant +{'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} +``` + + +Значение, на которое ссылается ключ `'country'`, изменилось с `'Poland'` на `'Germany'`. :) Захватывает? Ещё бы! Ты выучила еще одну потрясающую штуку! + +### Подведём итог + +Шикарно! Теперь ты знаешь немало о программировании. Мы познакомились с: + +* __ошибками__ — теперь ты знаешь как читать и анализировать ошибки, которые возникают, если Python не понимает твоей команды; +* __переменными__ — именами для объектов, которые упрощают твой код и делают его более читабельным; +* __списками__ — последовательностями объектов в заданном порядке; +* __словарями__ — объектами, хранящими пары ключ/значение. + +Готова к продолжению? :) + +## Сравнения + +> Для проходящих руководство дома: этот раздел рассмотрен в видео [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +В программировании часто надо что-то сравнивать. Что проще всего сравнить друг с другом? Числа, конечно. Давай посмотрим, как это работает: + +{% filename %}command-line{% endfilename %} +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Мы передали Python несколько чисел для сравнения. Как ты можешь заметить, Python сравнивает не только числа, но и результаты методов (например, умножения). Неплохо, правда? + +Хочешь спросить, почему мы написали двойной символ равенства `==`, чтобы проверить, одинаковы ли числа? Потому что одинарные символ равенства `=` уже задействован под присваивание значения переменным. Ты всегда, __всегда__ должна писать два символа равенства `==`, если хочешь проверить, одинаковы ли объекты. Мы также можем проверить, различаются ли объекты. Для этого мы используем `!=`, как показано в примере выше. + +Дадим Python еще два задания: + +{% filename %}command-line{% endfilename %} +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +С `>` и `<` все понятно, но что значат `>=` и `<=`? Читай их следующим образом: + +- x `>` y означает: x больше y +- x `<` y означает: x меньше y +- x `<=` y означает: x меньше или равен y +- x `>=` y означает: x больше или равен y + +Супер! Хочешь еще? Тогда попробуй вот это: + +{% filename %}command-line{% endfilename %} +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Ты можешь передать Python столько чисел, сколько захочешь, и он будет возвращать ответ! Хитро, правда? + +- __and__ — если ты используешь оператор `and`, оба сравнения по обе стороны от него должны быть True (верны), чтобы результат всей команды был равен True. +- __or__ — если ты используешь оператор `or`, достаточно одному из сравнений по обе стороны от него быть равным True, чтобы результат всей команды также равнялся True. + +Ты когда-нибудь слышала выражение "сравнивать тёплое с мягким"? Попробуем сделать что-то подобное в Python: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Как мы видим, Python не знает, как сравнить число (`int`) и строку (`str`) между собой. Поэтому он просто возвращает нам ошибку **TypeError** и предупреждает, что объекты заданных типов не могут быть сравнены. + +## Логические значения + +Между прочим, ты только что познакомилась с новым типом объектов в Python. Он называется __Boolean__ (логический) — и это, наверное, самый простой тип из всех. + +Существует только два логических объекта в Python: +- True (Истина), +- False (Ложь). + +Чтобы Python понимал тебя, ты всегда должна писать True с заглавной буквы (остальные прописные). **true, TRUE, tRUE не будут восприниматься — только True.** (Та же логика применима к False, само собой.) + +Ты можешь присваивать переменным логические значения! Смотри сюда: + +{% filename %}command-line{% endfilename %} +```python +>>> a = True +>>> a +True +``` + +Или так: + +{% filename %}command-line{% endfilename %} +```python +>>> a = 2 > 5 +>>> a +False +``` + +Попрактикуйся с логическими значениями на примере этих выражений: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Поздравляем! Логические значения — одна из самых классных фишек программирования, и ты только что научилась ими пользоваться! +# Сохраняй! + +> Для проходящих руководство дома: этот раздел рассмотрен в видео [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +До сих пор мы писали весь код в интерактивной консоли, где Python сразу анализировал, обрабатывал и выполнял наши команды. Мы были ограничены одной строкой. Обычно, программы сохраняются в файлах и выполняются **интерпретатором** или **компилятором** нашего языка программирования. Пока мы только просили **интерпретатор** Python выполнять наши однострочные команды из консоли. Однако нам понадобится больше места для следующих задач, поэтому задача минимум: + +- закрыть интерактивную консоль Python; +- открыть наш текстовый редактор; +- сохранить код в новом файле; +- запустить его! + +Чтобы закрыть интерактивную консоль Python, просто набери функцию `exit()`: + +{% filename %}command-line{% endfilename %} +```python +>>> exit() +$ +``` + +Это вернёт тебя в командную строку. + +В главе [Текстовый редактор][2] мы выбрали себе редактор. Нам нужно открыть его сейчас и записать следующий код в новый файл (или, если ты используешь Chromebook, создай новый файл в облачной IDE и открой файл, который будет во встроенном редакторе кода): + + [2]: ../code_editor/README.md + +{% filename %}editor{% endfilename %} +```python +print('Hello, Django girls!') +``` + +Очевидно, ты уже искушенный Python разработчик, так что не стесняйся добавить что-нибудь по своему вкусу из ранее изученного. + +Теперь нам нужно сохранить файл с кодом и дать ему подходящее имя. Давай назовем его **python_intro.py** и сохраним на рабочий стол. Мы можем назвать файл как хотим, но важно, чтобы название заканчивалось на **.py**. Расширение **.py** говорит операционной системе, что это **исполняемый файл python**, и Python может его запустить. + +> **Примечание** Ты должна уже была заметить одну из крутейших вещей в редакторах кода: цвета! В интерактивной консоли Python весь текст был одного цвета, сейчас же функция `print` должна отличаться по цвету от текста, который передается в неё в качестве аргумента. Это называется «синтаксическая подсветка», и это действительно удобная штука для программирования. Цвет подсветки может подсказать тебе о незакрытой кавычке или опечатке в ключевом слове (таком как `def` в определении функции, с которым мы скоро познакомимся). Это одна из причин, по которой мы используем редакторы кода :) + + +После сохранения файла пришло время запустить его! Используя навыки из раздела о командной строке, открой терминал и **поменяй текущую директорию** на рабочий стол. + + + +Для Mac команда будет выглядеть так: + +{% filename %}command-line{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + +Для Linux (слово "Desktop" может быть переведено на твой язык, например "Рабочий стол"): + +{% filename %}command-line{% endfilename %} +``` +$ cd ~/Desktop +``` + + + + + +В командной строке Windows команда будет такой: + +{% filename %}command-line{% endfilename %} +``` +> cd %HomePath%\Desktop +``` + + + + + +В Windows Powershell команда будет такой: + +{% filename %}command-line{% endfilename %} +``` +> cd $Home\Desktop +``` + + + +Если возникли проблемы — просто обратись за помощью. + +Теперь используй Python, чтобы запустить код в файле: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hello, Django girls! +``` + +Примечание: Windows не распознаёт команду 'python3'. Вместо этого для запуска файла используй команду 'python': + +{% filename %}command-line{% endfilename %} +```python +> python python_intro.py +``` + +Отлично! Ты только что запустила свою первую программу, код которой был сохранен в файле. Чувствуешь воодушевление? + +Можно передвигаться дальше к такому незаменимому в программировании инструменту как: + +## If...elif...else + +Зачастую определенный код в программе должен выполняться только при соблюдении определенных условий. Поэтому в Python есть такая вещь как **условный оператор if**. + +Замени код в своем файле **python_intro.py** на: + +{% filename %}python_intro.py{% endfilename %} +```python +if 3 > 2: +``` + +Если мы сохраним его и запустим, то получим ошибку: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} +``` +$ python3 python_intro.py +File "python_intro.py", line 2 + ^ +SyntaxError: unexpected EOF while parsing +``` + +Python предполагает, что мы должны дать ему инструкции, которые будут им выполнены при соблюдении условия `3 > 2` (т. е. при равенстве условия логическому значению `True`). Давай попробуем заставить Python напечатать на экране “It works!”. Внеси следующие изменения в **python_intro.py**: + +{% filename %}python_intro.py{% endfilename %} +```python +if 3 > 2: + print('It works!') +``` + +Обратила внимание, что мы сделали отступ во второй строке из 4 символов пробела? Мы поступаем так, чтобы Python понимал, какой код после условного оператора if должен быть выполнен, если условие равно True. Можно ограничиться и одним пробелом, однако практически все программисты Python используют 4, чтобы код выглядел аккуратно и читабельно. Каждая `табуляция` также считается за 4 пробела. + +Сохраняем и запускаем ещё раз: + +{% filename %}command-line{% endfilename %} +```python +$ python3 python_intro.py +It works! +``` + +Примечание: запомни, что Windows не распознаёт команду 'python3'. Всегда используй 'python' вместо 'python3' для запуска файлов. + +### Что, если условие не True? + +В предыдущем примере код выполнялся, только когда условие равнялось True. Однако Python имеет операторы `elif` и `else`: + +{% filename %}python_intro.py{% endfilename %} +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Если запустить этот код, он напечатает: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +5 is indeed greater than 2 +``` + +Если 2 больше 5, то будет выполнена следующая команда. Просто, правда? Давай посмотрим, как работает оператор `elif`: + +{% filename %}python_intro.py{% endfilename %} +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +и запускаем: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hey Sonja! +``` + +Видишь, что произошло? `elif` позволяет добавить дополнительные условия, которые запускаются, если предыдущие не срабатывают. + +Можно использовать сколько угодно `elif` после первого `if`. Например: + +{% filename %}python_intro.py{% endfilename %} +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python проходит через каждую проверку условия и выводит: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Perfect, I can hear all the details +``` + +## Комментарии + +Комментарии — это строки, начинающиеся с символа `#`. Ты можешь написать всё, что тебе заблагорассудится, после символа `#`, и Python не обратит на это внимания. Комментарии могут помочь другим людям быстрее понять твой код. + +Давай посмотрим, как они выглядят: + +{% 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!") +``` + +Тебе не стоит писать комментарий для каждой строки кода, но он может быть полезен, чтобы пояснить причину определённых действий или добавить описание, когда код делает что-то особенно сложное. + + +### Подведём итог + +В последних трёх упражнениях ты познакомилась с: + +- __сравнением__ — в Python ты можешь сравнивать объекты друг с другом при помощи `>`, `>=`, `==`, `<=`, `<` и операторов `and`, `or`; +- __Boolean__ — типом объекта, который может иметь только два значения: `True` или `False`; +- __сохранением файлов__ — хранение кода в файлах позволяет выполнять длинные программы; +- __if...elif...else__ — условными операторами, которые позволяют выполнять код только при определенных условиях; +- __комментариями__ — строками, которые Python не запускает и которые позволяют документировать твой код. + +Пришло время для последней части этой главы! + +## Твоя собственная функция! + +> Для проходящих руководство дома: этот раздел рассмотрен в видео [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Помнишь функции, такие как `len()`, которые можно использовать в Python? Тогда у нас есть хорошая новость — сейчас ты научишься писать свои собственные функции! + +Функция — это последовательность инструкций, которые должен выполнить Python. Каждая функция в Python начинается с ключевого слова `def`, имеет свое имя и параметры. Давай начнем с простого примера. Замени код в **python_intro.py** на следующий: + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + + +Отлично, наша первая функция готова! + +Ты можешь задаться вопросом, почему мы написали имя функции в конце файла. Причина в том, что Python читает и исполняет код из файла сверху вниз. Поэтому для использования нашей функции мы должны вызвать её в конце файла. + +Давай запустим и посмотрим, что произойдет: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi there! +How are you? +``` + +Примечание: если это не сработало, не поддавайся панике! Вывод командной строки поможет тебе понять, почему так произошло: +- Если ты получила ошибку `NameError`, то, возможно, ты что-то неправильно ввела, поэтому проверь, что ты использовала одно и то же имя при создании функции в строке `def hi():` и при её вызове в строке `hi()`. +- Если ты получила ошибку `IndentationError`, проверь, что обе строки с вызовом `print` начинаются с одинакового количества пробелов: Python хочет, чтобы весь код внутри функции был аккуратно выровнен. +- Если при запуске команда не вывела вообще ничего, проверь, чтобы в начале последней строки `hi()` *не было* отступа — если он есть, эта строка тоже становится частью функции, и функция никогда не запустится. + +Давай напишем нашу первую функцию с параметрами. Мы будем использовать предыдущий пример — функцию, которая пишет 'hi' и имя пользователя: + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): +``` + +Как ты можешь заметить, мы передали нашей функции параметр `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!') + +hi() +``` + +Помни: функция `print` расположена внутри блока оператора `if` с отступом в четыре пробела. Это потому, что она запускается тогда, когда выполняется условие. Давай посмотрим, как это работает: + +{% 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' +``` + +Упс, ошибка. К счастью, Python выдает довольно подробное сообщение об ошибке. Оно говорит нам, что функция `hi()` (которую мы определили) имеет один обязательный аргумент (`name`), и мы забыли передать его при вызове функции. Давай исправим это в конце файла: + +{% filename %}python_intro.py{% endfilename %} +```python +hi("Ola") +``` + +И запустим ещё раз: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Ola! +``` + +А если мы поменяем имя? + +{% filename %}python_intro.py{% endfilename %} +```python +hi("Sonja") +``` + +И повторим: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Sonja! +``` + +Теперь, как ты думаешь, что произойдет, если ты наберешь другое имя? (Не Ola или Sonja) Попробуй сама и проверь, была ли ты права. Результат должен быть таким: + +{% filename %}command-line{% endfilename %} +``` +Hi anonymous! +``` + +Шикарно, верно? Так тебе не придется повторяться каждый раз, когда ты захочешь изменить имя. И это именно та причина, для которой нам и нужны функции — ты никогда не захочешь повторять свой код! + +Давай попробуем что-то похитрее — существует немало имён, и писать условие для каждого будет тяжело, правда? + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +Давай выполним этот код: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Rachel! +``` + + +Поздравляем! Ты только что научилась писать свои собственные функции :) + +## Циклы + +> Для проходящих руководство дома: этот раздел рассмотрен в видео [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +Ну вот и последняя часть. Быстро время пролетело, верно? :) + +Программисты не любят повторяться. Программирование — это автоматизация вещей, поэтому мы не хотим приветствовать каждого человека по имени вручную, верно? Здесь пригодятся циклы. + +Еще помнишь о списках? Давай создадим список девушек: + +{% filename %}python_intro.py{% endfilename %} +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Мы хотим поздороваться с каждой по имени. У нас есть функция `hi`, которая этим и занимается, так что давай поместим её в цикл: + +{% filename %}python_intro.py{% endfilename %} +```python +for name in girls: +``` + +Оператор `for` работает по схожему принципу что и `if`; в коде после обоих операторов должен быть отступ в четыре пробела. + +Ниже полный код, который должен быть у нас в файле: + +{% filename %}python_intro.py{% endfilename %} +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +И после запуска: + +{% filename %}command-line{% endfilename %} +``` +$ python3 python_intro.py +Hi Rachel! +Next girl +Hi Monica! +Next girl +Hi Phoebe! +Next girl +Hi Ola! +Next girl +Hi You! +Next girl +``` + +Как ты можешь заметить, все команды внутри цикла `for` (с отступом от левого края) будут выполняться для каждого элемента списка `girls`. + +Ты также можешь использовать цикл `for` с числами с помощью функции `range`: + +{% filename %}python_intro.py{% endfilename %} +```python +for i in range(1, 6): + print(i) +``` + +Что выведет на экран: + +{% filename %}command-line{% endfilename %} +``` +1 +2 +3 +4 +5 +``` + +Функция `range` создает список чисел, следующих от первого до второго с заданным шагом (начало, конец и шаг мы передаем функции как параметры; если шаг не указать, как в примере выше, он будет по умолчанию равен 1). + +Обрати внимание, что второе число (конец списка) не включается в результат работы функции (`range(1, 6)` создает список от 1 до 5, не включающий 6). Это потому, что «range» — полуоткрытый диапазон, то есть включает в себя первое значение, но не включает последнее. + +## Подведём итог + +Вот и всё. __Ты чертовски крута!__ Эта глава была непростой, так что ты можешь гордиться собой. Мы-то точно тобой гордимся — вон как далеко продвинулась уже! + +Тебе может потребоваться перерыв — прогуляйся и дай отдых глазам перед тем, как мы перейдем к следующей главе. :) + +![Пирожок][3] + + [3]: images/cupcake.png diff --git a/ru/python_introduction/images/cupcake.png b/ru/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/ru/python_introduction/images/cupcake.png differ diff --git a/ru/template_extending/README.md b/ru/template_extending/README.md new file mode 100755 index 00000000000..9a3197ed855 --- /dev/null +++ b/ru/template_extending/README.md @@ -0,0 +1,143 @@ +# Расширение шаблона + +Ещё одной удобной вещью в Django является __расширение шаблонов__. Что это значит? Ты можешь использовать одни и те же блоки HTML-кода для разных частей своего веб-сайта. + +Так тебе не придётся повторяться каждый раз, когда потребуется использовать ту же информацию/структуру. И если появится необходимость что-то изменить, не придётся вносить правки в каждую страницу: достаточно скорректировать шаблон! + +## Создаём базовый шаблон + +Базовый шаблон — это наиболее общая типовая форма страницы, которую ты расширяешь для отдельных случев. + +Давай создадим файл `base.html` в директории `blog/templates/blog/`: + +``` +blog +└───templates + └───blog + base.html + post_list.html +``` + +Теперь открой его и скопируй всё из `post_list.html` в `base.html`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Затем в файле `base.html` замени всё между тегами `` и `` следующим кодом: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +Мы просто заменили всё между `{% for post in posts %}{% endfor %}` следующим: + +{% filename %}blog/templates/blog/base.html{% endfilename %} +```html +{% block content %} +{% endblock %} +``` + +Что это означает? Ты только что создала `block` — тег шаблона, позволяющий вставлять HTML-код этого блока в другие шаблоны, расширяющие `base.html`. Мы покажем, как это сделать, через секунду. + +Теперь сохрани всё и открой `blog/templates/blog/post_list.html` снова. +{% raw %}Тебе нужно удалить всё до `{% for post in posts %}` и после `{% endfor %}`. В итоге файл будет выглядеть следующим образом:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Мы хотим использовать это фрагмент в твоём шаблоне для отображения содержимого. Пора добавить теги блоков в этот файл! + +{% raw %}Нам нужно, чтобы новый тег блока соответствовал тегу в файле `base.html`. Также нам необходимо включить весь код, который соответствует твоему блоку с содержимым. Для этого расположи всё между `{% block content %}` и `{% endblock %}`. Вот так:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Осталось последнее: нам нужно связать эти два шаблона друг с другом. Ведь именно для этого и нужно расширение шаблонов! Мы сделаем это, добавив тег `extends` в начало файла. Вот так: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Готово! Проверь, что твой веб-сайт работает нормально :) + +> Если появилась ошибка `TemplateDoesNotExists`, это значит, что нет файла `blog/base.html` и `runserver` запущен в командной строке. Попробуй остановить его (одновременно нажми Ctrl + C) и перезапусти веб-сервер командой `python manage.py runserver`. diff --git a/ru/whats_next/README.md b/ru/whats_next/README.md new file mode 100755 index 00000000000..160d98d1a5f --- /dev/null +++ b/ru/whats_next/README.md @@ -0,0 +1,38 @@ +# Что дальше? + +Поздравь себя! __Ты нереально крута__. Мы очень гордимся! <3 + +### Что делать дальше? + +Сделай перерыв и расслабься. Ты только что закончила огромную работу. + +И не забудь подписаться на страничку Django Girls в [Facebook](http://facebook.com/djangogirls) и [Twitter](https://twitter.com/djangogirls), чтобы оставаться в курсе новостей. + +### Можем ли мы посоветовать дополнительные ресурсы для обучения? + +Конечно! Сейчас доступно _огромное_ количество ресурсов для изучения всевозможных навыков программирования. Мы поможем подобрать тебе то, что будет полезно изучить на следующем этапе. Вот несколько бесплатных ресурсов (или ресурсов с большим количеством бесплатного контента): + +#### Django +- Другое наше руководство, [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Django's official tutorial](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) +- [Getting Started With Django video lessons](http://www.gettingstartedwithdjango.com/) + +#### HTML, CSS и 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/) – несколько первых упражнений бесплатно +- [New Coder tutorials](http://newcoder.io/tutorials/) – многообразие практических примеров того, как ты можешь использовать Python +- [edX](https://www.edx.org/course?search_query=python) – большинство курсов бесплатны, но если вам нужен сертификат, необходимо оплатить +- [Coursera's Python specialization](https://www.coursera.org/specializations/python) – некоторые видеокурсы можно изучать бесплатно, также можешь получить сертификат Coursera после успешного прохождения +- [Python for Everybody](https://www.py4e.com/) + +#### Работа с данными +- [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) – большинство курсов бесплатны, но если вам нужен сертификат, необходимо оплатить +- [Dataquest](https://www.dataquest.io/) первые 30 "миссий" бесплатно + +Нам уже не терпится узнать, что ты создашь следующим! diff --git a/sk/GLOSSARY.md b/sk/GLOSSARY.md new file mode 100644 index 00000000000..a45f5aea436 --- /dev/null +++ b/sk/GLOSSARY.md @@ -0,0 +1,3 @@ +# editor kódu + +Editor kódu je aplikácia, pomocou ktorej môžeš svoj kód uložiť, aby si sa k nemu mohla neskôr vrátiť. Kde ho môžeš zohnať, zistíš v [kapitole o editore kódu](./code_editor/README.md) \ No newline at end of file diff --git a/sk/README.md b/sk/README.md new file mode 100644 index 00000000000..18d32e6d7b0 --- /dev/null +++ b/sk/README.md @@ -0,0 +1,51 @@ +# Django Girls tutoriál + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Toto dielo je zverejnené pod licenciou Creative Commons Attribution-ShareAlike 4.0 International License. Ak chceš vidieť kópiu tejto licencie, navštív https://creativecommons.org/licenses/by-sa/4.0/ + +## Vitaj + +Vitaj v Django Girls tutoriáli! Tešíme sa, že tu si. :) V tomto tutoriáli sa vydáme na cestu pod kapotu webových technológií a ponúkneme ti letmý pohľad na všetky čiastočky a kúsky, ktoré musia do seba zapadnúť, aby vytvorili web tak, ako ho poznáme. + +Ako to býva so všetkým, čo je neznáme, aj toto bude dobrodružstvo - ale žiadny strach, keď si už nabrala odvahu byť tu, zvládneš to v pohode. :) + +## Úvod + +Mala si niekedy pocit, že svet je stále viac a viac o technológiách, ku ktorým (zatiaľ) nemáš vzťah? Uvažovala si niekedy, že by si si vytvorila webovú stránku, ale nikdy si nemala dostatok motivácie začať? Zdalo sa ti niekedy, že svet softvéru je pre teba príliš komplikovaný na to, aby si sa vôbec pokúsila niečo sama vytvoriť? + +Máme pre teba dobrú správu! Programovanie nie je také zložité, ako sa zdá, a my ti chceme ukázať, aké môže byť zábavné. + +Tento návod z teba neurobí programátorku mávnutím čarovného prútika. Ak v tom chceš byť dobrá, čakajú ťa mesiace či dokonca roky štúdia a praxe. Chceme ti ale ukázať, že programovanie a vytváranie webových stránok nie je také ťažké, ako sa zdá. Pokúsime sa ti vysvetliť rôzne technológie tak, aby si sa ich nemusela báť. + +Dúfame, že sa ti technológia zapáči tak veľmi ako nám! + +## Čo ťa tento tutoriál naučí? + +Po skončení budeš mať funkčnú webovú aplikáciu - tvoj vlastný blog. Ukážeme ti, ako ho zverejniť na webe, kde ho môže každý navštíviť! + +Výsledok bude vyzerať asi takto: + +![Obrázok 0.1](images/application.png) + +> Ak budeš na tomto projekte pracovať sama a nemáš mentorku či mentora, ktorý ti pomáha, môžeš v prípade problémov navštíviť tento chat: [![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Požiadali sme naše mentorky a mentorov, ale aj absolventky, aby sa na tomto chate občas ukázali a pomohli ostatným! Neboj sa opýtať, čomu nerozumieš! + +OK, [začnime pekne po poriadku...](./how_the_internet_works/README.md) + +## Nasledovanie tutoriálu doma + +Zúčastniť sa Django Girls workshopu je skvelé, ale uvedomujeme si, že nie vždy je možné niektorý navštíviť. Preto ťa chceme povzbudiť v tom, aby si skúsila postupovať podľa tohto tutoriálu doma. Pre čitateľky doma v súčasnosti pripravujeme videá, vďaka ktorým bude jednoduchšie tutoriál nasledovať sama. Stále sa na tom pracuje, ale viac a viac vecí bude čoskoro na kanáli na YouTube pod názvom [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed). + +V každej kapitole, ktorá už bola spracovaná, sa nachádza odkaz na príslušné video. + +## Informácie a možnosti, ako sa zapojiť + +Tento návod vytvorili a udržiavajú [DjangoGirls](https://djangogirls.org/). Ak nájdeš chyby alebo by si chcela tento tutoriál aktualizovať, prosím, [postupuj podľa pokynov](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Chceš pomôcť s prekladom do iných jazykov? + +V súčasnosti koordinujeme preklady cez platformu crowdin.com: + +https://crowdin.com/project/django-girls-tutorial + +Ak sa tvoj jazyk nenachádza v zozname na [crowdin](https://crowdin.com/), [daj nám, prosím, vedieť](https://github.com/DjangoGirls/tutorial/issues/new), aký jazyk máme pridať. \ No newline at end of file diff --git a/sk/SUMMARY.md b/sk/SUMMARY.md new file mode 100644 index 00000000000..29aedb95212 --- /dev/null +++ b/sk/SUMMARY.md @@ -0,0 +1,35 @@ +# Zhrnutie + +* [Úvod](README.md) +* [Inštalácia](installation/README.md) + * [Príkazový riadok](installation/README.md#command-line) + * [Python](installation/README.md#python) + * [Editor kódu](installation/README.md#code-editor) + * [Virtuálne prostredie](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) +* [Inštalácia (chromebook)](chromebook_setup/README.md) +* [Ako funguje internet](how_the_internet_works/README.md) +* [Úvod do príkazového riadku](intro_to_command_line/README.md) +* [Inštalácia Pythonu](python_installation/README.md) +* [Editor kódu](code_editor/README.md) +* [Úvod do jazyka Python](python_introduction/README.md) +* [Čo je Django?](django/README.md) +* [Inštalácia Djanga](django_installation/README.md) +* [Tvoj prvý Django projekt!](django_start_project/README.md) +* [Django modely](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Nasadenie!](deploy/README.md) +* [Django URL](django_urls/README.md) +* [Django viewy - čas tvoriť!](django_views/README.md) +* [Úvod do HTML](html/README.md) +* [Django ORM (QuerySety)](django_orm/README.md) +* [Dynamické dáta v šablónach](dynamic_data_in_templates/README.md) +* [Django šablóny](django_templates/README.md) +* [CSS - skrášlime to](css/README.md) +* [Rozširovanie šablón](template_extending/README.md) +* [Ako rozšíriť aplikáciu](extend_your_application/README.md) +* [Django formuláre](django_forms/README.md) +* [Čo ďalej?](whats_next/README.md) \ No newline at end of file diff --git a/sk/chromebook_setup/README.md b/sk/chromebook_setup/README.md new file mode 100644 index 00000000000..a218b11f42b --- /dev/null +++ b/sk/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Nastavenie Chromebooku + +> **Poznámka** Ak už máš po [inštalácii](../installation/README.md), nemusíš toto robiť znova. Môžeš ísť rovno na [Úvod do Pythonu](../python_introduction/README.md). + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/sk/chromebook_setup/instructions.md b/sk/chromebook_setup/instructions.md new file mode 100644 index 00000000000..981d9157711 --- /dev/null +++ b/sk/chromebook_setup/instructions.md @@ -0,0 +1,158 @@ +Túto časť [môžeš preskočiť](http://tutorial.djangogirls.org/en/installation/#install-python), ak nepoužívaš Chromebook. Ak ho používaš, tak tvoja inštalácia bude trochu iná. Zvyšok inštalačných pokynov môžeš ignorovať. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com) + +Cloud IDE je nástroj, ktorý ti poskytne editor kódu a prístup na počítač, ktorý beží v cloude na internete, kde môžeš inštalovať, písať a spúšťať softvér. Počas tohto tutoriálu sa Cloud IDE bude tváriť ako tvoj *lokálny stroj*. Príkazy budeš zadávať do terminálového rozhrania tak, ako tvoje spoluúčastníčky, čo používajú macOS, Ubuntu, alebo Windows, ale tvoj terminál bude pripojený na počítač, ktorý beží niekde inde a ktorý Cloud IDE pripraví pre teba. Tu sú inštrukcie pre cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9, Glitch.com). Môžeš si vybrať jedno z Cloud IDE riešení a postupovať podľa inštrukcií pre zvolený typ IDE. + +#### PaizaCloud Cloud IDE + +1. Choď na [PaizaCloud Cloud IDE](https://paiza.cloud/) +2. Vytvor si účet +3. Klikni na *New Server* a vyber si Django appku +4. Klikni na tlačítko Terminal (na ľavej strane okna) + +Teraz by si mala vidieť rozhranie s bočnou lištou a tlačidlami naľavo. Klikni na tlačítko Terminal, aby sa ti otvorilo terminálové okno s takýmto promptom: + +{% filename %}Terminal{% endfilename %} + + $ + + +Terminál na PaizaCloud Cloud IDE je pripravený na tvoje inštrukcie. Oknu môžeš zmeniť veľkosť alebo ho maximalizovať, aby bolo trochu väčšie. + +#### AWS Cloud9 + +Cloud 9 momentálne vyžaduje, aby si si vytvorila AWS účet a vložila informácie o kreditnej karte. + +1. Nainštaluj si Cloud 9 z [Chrome webového obchodu](https://chrome.google.com/webstore/detail/cloud9/nbdmccoknlfggadpfkmcpnamfnbkmkcp) +2. Choď na [c9.io](https://c9.io) a klikni na *Get started with AWS Cloud9* +3. Vytvor si AWS účet (je potrebné zadať údaje o svojej kreditnej karte, ale účet môžeš používať zdarma). +4. Na AWS Dashboarde napíš do vyhľadávania *Cloud9* a klikni naň +5. Na Cloud 9 dashboarde klikni na *Create environment* +6. Nazvi ho *django-girls* +7. Pri konfigurácii nastavení vyber *Create a new instance for environment (EC2)* ako "Environment Type" a *t2.micro* ako "Instance type" (malo by tam byť napísané "Free-tier eligible."). Prednastavené cost-saving nastavenie je okej, aj ostatné prednastavené hodnoty môžeš nechať tak. +8. Klikni na *Next step* +9. Klikni na *Create environment* + +Teraz by si mala vidieť rozhranie s bočnou lištou, veľkým hlavným oknom s trochou textu a malým oknom v dolnej časti, ktoré vyzerá takto nejak: + +{% filename %}bash{% endfilename %} + + tvojaprezyvka:~/workspace $ + + +Táto dolná časť je tvoj terminál. Môžeš ho použiť na poslanie inštrukcií vzdialenému Cloud 9 počítaču. Okno môžeš zväčšiť. + +#### Glitch.com Cloud IDE + +1. Choď na [Glitch.com](https://glitch.com/) +2. Vytvor si účet (https://glitch.com/signup) alebo použi svoj účet na GitHube, ak máš. (Pozri inštrukcie ku GitHubu nižšie.) +3. Klikni na *New Project* a vyber *hello-webpage* +4. Klikni na rozbaľovacie menu Tools (vľavo dole v okne) a potom na tlačítko Terminal, aby sa ti otvorila terminálová záložka s takýmto promptom: + +{% filename %}Terminal{% endfilename %} + + app@nazov-tvojho-glitch-projektu:~ + + +Ak používaš Glitch.com ako tvoje cloud IDE, nemusíš si vytvárať virtuálne prostredie. Namiesto toho vytvor nasledujúce súbory ručne: + +{% 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 +``` + +Keď budeš mať tieto súbory vytvorené, choď do Terminálu a vykonaj nasledujúce príkazy, aby si si vytvorila svoj prvý Django projekt: + +{% filename %}Terminal{% endfilename %} + + django-admin.py startproject mysite . + refresh + + +Aby si mala prístup k detailným chybovým hláškam, môžeš si aktivovať debug logy vo svojej Glitch aplikácii. Pridaj nasledovné na koniec súboru `mysite/settings.py`. + +{% 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, + }, + }, +} +``` + +Toto vytvorí súbor `debug.log`, v ktorom nájdeš detaily o tom, čo Django robí, ako aj chybové hlášky, ktoré sa môžu vyskytnúť. Toto ti značne uľahčí opravovanie tvojej stránky, ak niečo nebude fungovať. + +Prvotný reštart tvojho Glitch projektu by mal zlyhať. (Keď klikneš na tlačítko `Show` hore a potom na `In a New Window`, mala by si sa dostať po chybovú hlášku `DisallowedHost`.) V tejto chvíli sa tým nemusíš zaoberať, tutoriál to vyrieši v momente, keď budeš meniť nastavenia svojho Django projektu v súbore `mysite/settings.py`. + +### Virtuálne prostredie + +Virtuálne prostredie (tiež nazývané virtualenv) je ako súkromná krabica, do ktorej môžeme uložiť užitočný počítačový kód pre projekt, na ktorom pracujeme. Používame ho na oddelenie rôznych častí kódu pre rôzne projekty, aby sa nám medzi nimi nepomiešali veci. + +Spusti: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3 -m venv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(všimni si, že v poslednom riadku sme použili vlnovku a za ňou znamienko rovnosti: `~=`). + +### GitHub + +Vytvor si [GitHub](https://github.com) účet. + +### PythonAnywhere + +DjangoGirls tutoriál obsahuje kapitolu o niečom, čomu sa hovorí nasadenie (deployment). Je to proces prenesenia kódu, ktorý poháňa tvoju novú webovú aplikáciu, na verejne dostupný počítač (ešte nazývaný aj server), aby aj ostatní ľudia videli tvoju prácu. + +Táto časť je trochu zvláštna, keď pracuješ s týmto tutoriálom na Chromebooku, lebo už používaš počítač, ktorý je na internete (na rozdiel od notebooku). Napriek tomu je stále užitočná, lebo si môžeme predstaviť pracovné prostredie Cloud 9 ako miesto, kde sa nachádza nedokončená práca, a PythonAnywhere ako miesto, kde ukážeme našu prácu, keď bude hotová. + +Tak si vytvor nový PythonAnywhere účet na [www.pythonanywhere.com](https://www.pythonanywhere.com). \ No newline at end of file diff --git a/sk/code_editor/README.md b/sk/code_editor/README.md new file mode 100644 index 00000000000..e9e19606304 --- /dev/null +++ b/sk/code_editor/README.md @@ -0,0 +1,11 @@ +# Editor kódu + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s). + +O chvíľu napíšeš svoj prvý riadok kódu, takže je načase si stiahnuť editor kódu! + +> **Poznámka** Ak používaš Chromebook, preskoč túto kapitolu a postupuj podľa pokynov na [nastavenie Chromebooku](../chromebook_setup/README.md). Cloud IDE, ktoré si si vybrala (PaizaCloud Cloud IDE alebo AWS Cloud9) už obsahuje editor kódu. Keď si otvoríš nejaký súbor vo svojom IDE pomocou menu File, automaticky budeš tento editor používať. +> +> **Poznámka** Toto si už možno urobila v [kapitole Inštalácia](../installation/README.md) - ak áno, môžeš preskočiť rovno na ďalšiu kapitolu! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/sk/code_editor/instructions.md b/sk/code_editor/instructions.md new file mode 100644 index 00000000000..6f2f2f950d5 --- /dev/null +++ b/sk/code_editor/instructions.md @@ -0,0 +1,37 @@ +Existuje veľa rôznych editorov a zväčša sa vyberajú podľa osobných preferencií. Väčšina programátorov a programátoriek v Pythone používa zložité, ale veľmi výkonné IDE (integrované vývojové prostredie) ako napríklad PyCharm. Pre začiatočníčku je to pravdepodobne menej vhodné; naše odporúčania sú rovnako výkonné, ale oveľa jednoduchšie. + +Naše návrhy sú uvedené nižšie, ale neváhaj sa opýtať svojej mentorky alebo mentora, aké sú ich preferencie - bude ti jednoduchšie vedieť pomocť. + +## Visual Studio Code + +Visual Studio Code je editor zdrojového kódu, ktorý vyvíja Microsoft pre Windows, Linux a macOS. Podporuje debugovanie, priamu prácu s Gitom, zvýrazňovanie syntaxe, inteligentné dopĺňanie kódu, snippety a refaktorovanie kódu. + +[Stiahni si ho odtiaľto](https://code.visualstudio.com/) + +## Gedit + +Gedit je open source editor zdarma dostupný pre všetky operačné systémy. + +[Stiahni si ho odtiaľto](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text je veľmi populárny editor so skúšobnou verziou zdarma a je dostupný pre všetky operačné systémy. + +[Stiahni si ho odtiaľto](https://www.sublimetext.com/) + +## Atom + +Atom je ďalší populárny editor. Je zdarma, open source a dostupný pre Windows, macOS a Linux. Atom je vyvíjaný [GitHubom](https://github.com/). + +[Stiahni si ho odtiaľto](https://atom.io/) + +## Prečo inštalujeme editor kódu? + +Možno ti napadlo, prečo inštalujeme takýto špeciálny editor kódu namiesto toho, aby sme použili niečo ako Word alebo Notepad. + +Prvý dôvod je, že kód musí byť **čistý text** a problém s editormi ako Word a Textedit je ten, že v skutočnosti nevytvárajú čistý text, ale produkujú obohatený text (s fontami a formátovaním) a používajú vlastné formáty ako [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +Druhý dôvod je, že editor kódu je špecializovaný na editáciu kódu, takže môže poskytovať pomocné funkcie ako zvýraznenie kódu farbou podľa jeho významu, alebo automaticky za teba uzatvárať úvodzovky. + +Všetko uvidíme neskôr. Čoskoro budeš považovať svoj verný editor za svoj obľúbený nástroj. :) \ No newline at end of file diff --git a/sk/css/README.md b/sk/css/README.md new file mode 100644 index 00000000000..6f8d0c76a9a --- /dev/null +++ b/sk/css/README.md @@ -0,0 +1,330 @@ +# CSS - skrášlime to! + +Náš blog vyzerá zatiaľ dosť škaredo, však? Je čas to napraviť! Použijeme na to CSS. + +## Čo je CSS? + +Kaskádové štýly (CSS, angl. Cascading Style Sheets) sú jazyk, ktorý sa používa na popis vzhľadu a formátovania webstránky napísanej v markupovom jazyku (napríklad HTML). Predstav si to ako make-up pre našu webstránku. ;) + +Ale nechceme začať zase od nuly, že? Znovu použijeme niečo, čo iné programátorky a programátori zverejnili na internete zadarmo. Ako vieš, vymýšlať koleso nie je žiadna zábava. + +## Použime Bootstrap! + +Bootstrap je jedným z najpopulárnejších HTML a CSS frameworkov pre vývoj krásnych webových stránok: https://getbootstrap.com/ + +Bol napísaný programátormi a programátorkami, ktorí pracovali pre Twitter. Teraz je vyvíjaný dobrovoľníkmi a dobrovoľníčkami z celého sveta! + +## Inštalácia Bootstrapu + +Aby si nainštalovala Bootstrap, otvor svoj súbor `.html` vo svojom editore a pridaj toto do sekcie ``: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Nepridá to do tvojho projektu žiadne súbory. Iba to ukazuje na súbory, ktoré už existujú na internete. Skúsme to, otvor svoju webstránku a obnov stránku. Už to máme! + +![Obrázok 14.1](images/bootstrap1.png) + +Už to vyzerá lepšie! + +## Statické súbory v Djangu + +Konečne sa pozrieme zblízka na veci, ktoré nazývame **statické súbory**. Statické súbory sú všetky tvoje CSS a obrázky. Ich obsah nie je závislý na kontexte žiadosti a budú rovnaké pre každého používateľa či používateľku. + +### Kam umiestniť statické súbory pre Django + +Django už vie, kde nájsť statické súbory pre zabudovanú aplikáciu "admin". Teraz už len musíme pridať niektoré statické súbory pre našu vlastnú aplikáciu `blog`. + +To urobíme tak, že vo vnútri našej aplikácie blog vytvoríme adresár s názvom `static`: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + + +Django automaticky nájde všetky zložky s názvom "static" vo všetkých priečinkoch tvojej aplikácie. Následne bude možné použiť ich obsah ako statické súbory. + +## Tvoj prvý CSS súbor! + +Vytvorme teraz CSS súbor, ktorý tvojej web stránke pridá tvoj vlastný štýl. Vytvor nový adresár s názvom `css` vnútri adresára `static`. Potom vytvor nový súbor s názvom `blog.css` vo vnútri tohto adresára `css`. Pripravená? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Je čas napísať trochu CSS! Otvor v editore kódu súbor `blog/static/css/blog.css`. + +Tu sa nebudeme do hĺbky zaoberať úpravou a štúdiom CSS. Na konci tejto stránky sa nachádza odkaz na bezplatný CSS kurz, ak sa o tom chceš dozvedieť viac. + +Ale urobme aspoň niečo. Čo keby sme zmenili farbu hlavičiek? Počítače používajú špeciálne kódy, aby rozumeli farbám. Tieto kódy sa začínajú `#` potom nasleduje 6 písmen (A-F) a číslic (0-9). Napríklad kód pre modrú je `#0000FF`. Kódy farieb nájdeš napríklad tu: http://www.colorpicker.com/. Môžeš tiež použiť [preddefinované farby](http://www.w3schools.com/colors/colors_names.asp) ako napríklad `red` (červená) alebo `green` (zelená). + +Do súboru `blog/static/css/blog.css` pridaj nasledujúci kód: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; +} + +``` + +`h1 a` je CSS selektor. Znamená to, že aplikujeme naše štýly na všetky `a` elementy, ktoré sa nachádzajú vnútri `h1` elementu. Selektor `h2 a` robí presne to isté, akurát pre elementy `h2`. Takže keď máme niečo ako: `

link

`, použije sa na to štýl `h1 a`. V tomto prípade elementu hovoríme, aby zmenil svoju farbu na `#FCA205`, čo je tmavooranžová. Alebo si môžeš vybrať vlastnú farbu, akurát daj pozor, aby dobre kontrastovala s bielym pozadím! + +V CSS súbore definujeme štýly pre elementy v HTML súbore. Prvý spôsob, akým môžme identifikovať elementy, je názov elementu. Môžno si pamätáš tieto tagy z HTML sekcie. Veci ako `a`,`h1`, a `body` sú príklady názvov elementov. Elementy taktiež identifikujeme pomocou atribútu `class` alebo atribútu `id`. Triedy (class) a id sú názvy, ktorými nazveš elementy. Triedy definujú skupiny elementov a id-čká poukazujú na konkrétne elementy. Napríklad nasledujúci element môže byť identifikovaný v CSS pomocou názvu `a`, triedy `external_link`, alebo id `link_to_wiki_page`: + +```html + +``` + +O [CSS selektoroch](http://www.w3schools.com/cssref/css_selectors.asp) si môžeš prečítať viac na stránkach w3schools. + +Ešte musíme povedať našej HTML šablóne, že sme pridali nejaké CSS. Otvor súbor `blog/templates/blog/post_list.html` v editore a pridaj tento riadok na úplný začiatok: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Tu sme len nahrali statické súbory. :) Medzi tagmi `` a ``, po odkazoch na bootstrapové CSS súbory, pridaj tento riadok: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Prehliadač číta súbory, ktoré dostane, zaradom, takže sa musíme uistiť, že sú na správnom mieste. Inak kód v našich súboroch môže byť prepísaný kódom z boostrapových súborov. Práve sme našej šablóne povedali, kde sa nachádza náš CSS súbor. + +Súbor by mal teraz vyzerať asi takto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +OK, súbor ulož a obnov stránku! + +![Obrázok 14.2](images/color2.png) + +Pekne! Možno by sme chceli dať našej webovej stránke trochu priestoru na dýchanie. Zväčšíme okraj na ľavej strane? Skúsme to! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Pridaj to do svojho CSS, súbor ulož a pozri, ako to funguje! + +![Obrázok 14.3](images/margin2.png) + +Mohli by sme trochu upraviť font v našej hlavičke, nie? Skopíruj toto do svojej hlavičky `` v súbore `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Rovnako ako predtým, skontroluj poradie a umiestni pred odkaz na `blog/static/css/blog.css`. Tento riadok bude importovať font pod názvom *Lobster* z Google Fonts (https://www.google.com/fonts). + +Nájdi deklaračný blok `h1 a` (kód medzi zátvorkami `{` a `}`) v CSS súbore `blog/static/css/blog.css`. Teraz pridaj riadok `font-family: 'Lobster';` medzi zátvorky a obnov stránku: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a, h2 a { + color: #C25100; + font-family: 'Lobster'; +} +``` + +![Obrázok 14.3](images/font.png) + +Super! + +Ako bolo uvedené vyššie, CSS má koncept tried. Triedy ti umožňujú pomenovať časti HTML kódu a použiť štýly iba na tejto časti bez zasahovania do iných častí. To môže byť veľmi užitočné! Možno máš dva divy, ktoré robia niečo iné (ako tvoja hlavička a tvoj príspevok). Triedy ti pomôžu docieliť, aby vyzerali každý inak. + +Poďme skúsiť pomenovať niektoré časti HTML kódu. Zmeň `header`, ktorý obsahuje tvoju hlavičku, takto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+

Django Girls Blog

+
+
+``` + +A teraz pridaj triedu `post` do tvojho `article`, v ktorom je blog post. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Teraz pridáme deklarácie pre rôzne selektory. Selektory, ktoré začínajú znamienkom `.`, sa týkajú tried. Na webe je ohľadne CSS veľa skvelých tutorialov a vysvetlení, ktoré ti pomôžu pochopiť nasledujúci kód. Ale teraz len skopíruj a vlož nasledujúci kód do tvojho súboru `blog/static/css/blog.css`: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + 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; +} + +h1, +h2, +h3, +h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h2 a, +.post h2 a:visited { + color: #000000; +} + +.post > .date, +.post > .actions { + float: right; +} + +.btn-secondary, +.btn-secondary:visited { + color: #C25100; + background: none; + border-color: #C25100; +} + +.btn-secondary:hover { + color: #FFFFFF; + background-color: #C25100; +} +``` + +Teraz deklaráciami tried obklop HTML kód, ktorý zobrazuje posty. Nahraď toto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +v súbore `blog/templates/blog/post_list.html` týmto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Ulož tieto súbory a obnov svoju web stránku. + +![Obrázok 14.4](images/final.png) + +Super! Vyzerá to úžasne, nie? Pozri sa na kód, ktorý sme práve vložili, a nájdi miesta, kde sme pridali triedy v HTML a použili sme ich v CSS. Kde by si spravila zmenu, ak by si chcela dátum spraviť tyrkysový? + +Neboj sa trochu pohrať s týmto CSS a poskúšať pomeniť niektoré veci. Hranie sa s CSS ti pomôže porozumieť tomu, čo robia rôzne veci. Ak niečo pokazíš, neboj sa, môžeš vždy vrátiť zmeny späť! + +Vrelo odporúčame online kurzy zdarma "Basic HTML & HTML5" a "Basic CSS" na [freeCodeCamp](https://learn.freecodecamp.org/). Naučia ťa všetko o tom, ako môžeš svoje stránky skrášliť pomocou HTML a CSS. + +Pripravená na ďalšiu kapitolu?! :) \ No newline at end of file diff --git a/sk/css/images/bootstrap1.png b/sk/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/sk/css/images/bootstrap1.png differ diff --git a/sk/css/images/color2.png b/sk/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/sk/css/images/color2.png differ diff --git a/sk/css/images/final.png b/sk/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/sk/css/images/final.png differ diff --git a/sk/css/images/font.png b/sk/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/sk/css/images/font.png differ diff --git a/sk/css/images/margin2.png b/sk/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/sk/css/images/margin2.png differ diff --git a/sk/deploy/README.md b/sk/deploy/README.md new file mode 100644 index 00000000000..45fb39c6b0b --- /dev/null +++ b/sk/deploy/README.md @@ -0,0 +1,181 @@ +# Nasadenie! + +> **Poznámka** Môže byť trochu ťažké prehrýzť sa touto kapitolou. Vydrž a dokonči ju, nasadenie je dôležitou časťou vývoja webových stránok. Táto kapitola je umiestnená uprostred tutoriálu, aby ti mentor či mentorka mohli pomôcť s trochu náročnejšími časťami procesu spúšťania tvojej webovej stránky online. To znamená, že môžeš dokončiť tutoriál aj sama, ak ti nevyjde čas. + +Až do tohto momentu bola tvoja webová stránka dostupná len v tvojom počítači. Teraz sa naučíš, ako ju nasadiť! Nasadenie (deployment) je proces publikovania aplikácie na internete, aby ju všetci konečne mohli vidieť. :) + +Ako už vieš, webová stránka musí byť umiestnená na serveri. Na internete existuje množstvo poskytovateľov serverov, my použijeme [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere je bezplatný pre malé aplikácie, ktoré nemajú príliš veľa návštevníkov a návštevníčok, takže zatiaľ ti to určite bude stačiť. + +Ďalšou externou službou, ktorú budeme využívať, je [GitHub](https://www.github.com), kde sa uchovávajú zdrojové kódy. Existujú aj ďalšie podobné služby, no v dnešnej dobe už majú takmer všetci programátori a programátorky githubové konto a teraz ho už budeš mať aj ty! + +Tieto tri miesta budú pre teba dôležité. Lokálny počítač bude miestom, kde budeš vyvíjať a testovať. Keď si spokojná so zmenami, uložíš kópiu programu na GitHub. Tvoja webová stránka bude na PythonAnywhere a budeš ju aktualizovať stiahnutím novej kópie svojho kódu z GitHubu. + +# Git + +> **Poznámka** Ak už máš za sebou [inštaláciu](../installation/README.md), nemusíš toto robiť znova - môžeš preskočiť na ďalšiu časť a začať s vytváraním vlastného Git repozitára. + +{% include "/deploy/install_git.md" %} + +## Založenie Git repozitára + +Git sleduje zmeny na konkrétnej skupine súborov, v niečom, čo sa nazýva úložisko kódu alebo repozitár (skrátene "repo"). Založme si repo pre náš projekt. Otvor konzolu a spusti nasledujúce príkazy v adresári `djangogirls`: + +> **Poznámka** Skontroluj si aktuálny pracovný priečinok príkazom `pwd` (macOS/Linux) alebo `cd` (Windows) pred inicializáciou repozitára. Mala by si byť v priečinku `djangogirls`. + +{% filename %}command-line{% endfilename %} + + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Tvoje Meno" + $ git config --global user.email ty@example.com + + +Inicializácia Git repozitára je niečo, čo musíme urobiť len raz za projekt (a už nikdy nebudeš musieť znovu zadávať užívateľské meno a e-mail). + +### Upravenie názvu vetvy + +Vo verziách Gitu starších ako **2.28** budeš musieť zmeniť meno svojej vetvy na "main". Ak chceš zistiť, akú verziu Gitu máš, prosím, spusti nasledovný príkaz: + +{% filename %}command-line{% endfilename %} + + $ git --version + git version 2.xx... + + +V prípade, že druhé číslo verzie ("xx" vyššie) je menšie ako 28, budeš musieť spustiť nasledujúci príkaz, aby si premenovala svoju vetvu. Ak je to 28 alebo viac, pokračuj, prosím, sekciou "Ignorovanie súborov". Rovnako ako v časti "Inicializácia" je toto niečo, čo musíme spraviť len jeden jediný raz vrámci projektu, a aj to iba v prípade, ak je tvoja verzia Gitu menšia ako 2.28: + +{% filename %}command-line{% endfilename %} + + $ git branch -M main + + +### Ignorovanie súborov + +Git bude sledovať zmeny všetkých súborov a priečinkov v tomto adresári, ale sú aj niektoré súbory, ktoré chceme ignorovať. To urobíme tak, že vytvoríme súbor s názvom `.gitignore` v základnom adresári. Otvor si editor a vytvor nový súbor s týmto obsahom: + +{% filename %}.gitignore{% endfilename %} + + # 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 + + +A ulož ho ako `.gitignore` v priečinku "djangogirls". + +> **Poznámka** Bodka na začiatku názvu súboru je dôležitá! Ak máš problém vytvoriť takýto súbor (napríklad Macom sa nepáči, ak chceš cez Vyhľadávanie (Finder) vytvoriť súbory, ktoré sa začínajú bodkou), potom použi funkciu "Uložiť ako" vo svojom editore, to funguje vždy. A daj pozor na to, aby si k názvu súboru nepridala `.txt`, `.py` alebo akúkoľvek inú koncovku - Git ho rozpozná, iba ak sa volá presne `.gitignore`. V Linuxe a MacOS sú súbory, ktoré začínajú `.` (ako `.gitignore`), považované za skryté a príkaz `ls` ich neukáže. Namiesto neho môžeš použiť `ls -a`, aby si súbor `.gitignore` videla. +> +> **Poznámka** Jeden zo súborov, ktoré si spomenula vo svojom súbore `.gitignore`, je `db.sqlite3`. Tento súbor je tvoja lokálna databáza, kde sú uložení všetci tvoji používatelia/používateľky a príspevky. Budeme sa riadiť štandardnými programátorskými postupmi, čo znamená, že budeme používať dve rôzne databázy, jednu pre svoju vlastnú lokálnu testovaciu stránku a druhú pre svoju online stránku na PythonAnywhere. Na PythonAnywhere to možno bude SQLite, tak ako na stroji, na ktorom vyvíjaš, ale zvyčajne by si tam skôr použila databázu, ktorá sa volá MySQL, ktorá zvládne oveľa viac navštevníčiek a návštevníkov ako SQLite. Tak či onak, to, že ignoruješ svoju SQLite databázu v kópii pre GitHub, znamená, že všetky príspevky a superuser, ktorých si doteraz vytvorila, budú dostupní len lokálne, a na produkčnej verzii budeš musieť vytvoriť nových. Svoju lokálnu databázu si môžeš predstaviť ako pieskovisko, na ktorom si môžeš vyskúšať rôzne veci a nebáť sa, že zmažeš reálne príspevky zo svojho blogu. + +Vždy je dobré použiť príkaz `git status` pred `git add` alebo kedykoľvek, keď si nebudeš istá, čo sa zmenilo. Pomôže ti to vyhnúť sa prekvapeniam ako napríklad pridanie nesprávnych súborov. Príkaz `git status` vracia informácie o nesledovaných (untracked) či zmenených (modified) súboroch, alebo súboroch pripravených na zmenu (staged), o stave vetvy a veľa ďalších vecí. Výstup by mal byť podobný nasledovnému: + +{% filename %}command-line{% endfilename %} + + $ 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) + + +A nakoniec uložíme naše zmeny. Prejdi na konzolu a zadaj nasledujúce príkazy: + +{% filename %}command-line{% endfilename %} + + $ 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 + + +## Prenos nášho kódu na GitHub + +Choď na [GitHub.com](https://www.github.com) a založ (Sign Up) si nový účet zdarma. (Ak si to už spravila počas prípravy na workshop, super!) Zapamätaj si svoje heslo (a pridaj si ho do svojho správcu hesiel, ak nejaký používaš). + +Potom vytvor nový repozitár a pomenuj ho "my-first-blog". Políčko "initialize with a README" nechaj nezaškrtnuté, voľbu .gitignore nechaj prázdnu (urobili sme to manuálne) a License nechaj ako None. + +![](images/new_github_repo.png) + +> **Poznámka** Názov `my-first-blog` je dôležitý -- mohla by si si vybrať aj niečo iné, ale bude sa to ďalej vyskytovať veľakrát a musela by si to zakaždým nahradiť. Pravdepodobne bude pohodlnejšie, ak ostaneš pri názve `my-first-blog`. + +Na nasledujúcej stránke sa ti ukáže klonovacia URL tvojho repa, ktorú budeme potrebovať v niektorých z nasledujúcich príkazov: + +![](images/github_get_repo_url_screenshot.png) + +Teraz musíme pripojiť Git repozitár v tvojom počítači k tomu na GitHube. + +Napíš do konzoly nasledujúci príkaz (nahraď `` svojím užívateľským menom na GitHube, ale bez špicatých zátvoriek - URL by mala byť rovnaká ako klonovacia URL, ktorú si práve videla). + +{% filename %}command-line{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin main + + +Keď pošleš niečo na GitHub, spýta sa ťa to na tvoje githubové meno a heslo (buď rovno v príkazovom riadku alebo vo vyskakovacom okne) a keď ich zadáš, mala by si vidieť niečo takéto: + +{% 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. + + + + +Tvoj kód je na GitHube. Choď sa naň pozrieť! Zistíš, že sa nachádza vo vyberanej spoločnosti - [Django](https://github.com/django/django), [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial) a mnoho iných skvelých open sourcových softvérových projektov uchováva svoj kód na GitHube. :) + +{% include "/deploy/pythonanywhere.md" %} + +# Choď sa pozrieť na svoju stránku! + +Hlavná stránka tvojej aplikácie by ťa mala vítať nápisom "It worked!", tak ako na tvojom počítači. Skús pridať `/admin/` na koniec adresy URL, a budeš presmerovaná na stránky administrácie. Prihlás sa svojím menom a heslom a uvidíš, že môžeš na server pridať nové príspevky. Nezabudni, že príspevky z tvojej lokálnej testovacej databázy sme neposlali na tvoj online blog. + +Keď vytvoríš niekoľko príspevkov, môžeš sa vrátiť do tvojho lokálneho prostredia (nie PythonAnywhere). Odteraz by si na zmenách mala pracovať vo svojom lokálnom prostredí. To je štandardný pracovný postup pri vývoji webových aplikácií - urobíš zmeny lokálne, dáš tieto zmeny na GitHub a stiahneš zmeny na svoj webový server. Vďaka tomu môžeš pracovať a experimentovať bez toho, aby si niečo pokazila na svojej online stránke. Celkom cool, že? + +*PORIADNE* sa potľapkaj po chrbte! Nasadenie serveru je jedna z najzradnejších častí vývoja web stránok a často zaberie ľuďom aj niekoľko dní, kým to celé spojazdnia. Ale ty už máš svoju stránku online teraz, na skutočnom internete! \ No newline at end of file diff --git a/sk/deploy/images/github_get_repo_url_screenshot.png b/sk/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/sk/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/sk/deploy/images/new_github_repo.png b/sk/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/sk/deploy/images/new_github_repo.png differ diff --git a/sk/deploy/images/pythonanywhere_account.png b/sk/deploy/images/pythonanywhere_account.png new file mode 100644 index 00000000000..612d4528e11 Binary files /dev/null and b/sk/deploy/images/pythonanywhere_account.png differ diff --git a/sk/deploy/images/pythonanywhere_bash_console.png b/sk/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..458b43f5d0d Binary files /dev/null and b/sk/deploy/images/pythonanywhere_bash_console.png differ diff --git a/sk/deploy/images/pythonanywhere_beginner_account_button.png b/sk/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/sk/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/sk/deploy/images/pythonanywhere_create_api_token.png b/sk/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..6e617d0a53e Binary files /dev/null and b/sk/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/sk/deploy/install_git.md b/sk/deploy/install_git.md new file mode 100644 index 00000000000..ddd087ecb83 --- /dev/null +++ b/sk/deploy/install_git.md @@ -0,0 +1,83 @@ +Git je "systém na správu verzií", ktorý využíva množstvo programátoriek a programátorov. Tento softvér sleduje v priebehu času zmeny v tvojich súboroch, takže sa kedykoľvek môžeš vrátiť ku konkrétnej verzii. Je to v podstate niečo ako nástroj na nasledovanie zmien v programoch na spracovanie textu (napr. Microsoft Word alebo LibreOffice Writer), ale omnoho mocnejšie. + +## Inštalácia Gitu + + + +Git si môžeš stiahnuť z [git-scm.com](https://git-scm.com/). Môžeš bez obáv klikať na "ďalej" pri všetkých krokoch okrem jedného. V kroku, kde to od teba bude chcieť, aby si si vybrala svoj editor, by si si mala vybrať Nano, a v kroku "Adjusting your PATH environment" zvoľ "Use Git and optional Unix tools from the Windows Command Prompt" (spodná možnosť). V ostatných prípadoch sú predvolené nastavenia v poriadku. Možnosť "Checkout Windows-style, commit Unix-style line endings" je OK. + +Ak ti bude počas inštalácie ponúknutá možnosť "Adjusting the name of the initial branch in new repositories", prosím, zvoľ "Override the default" a použi "main". Týmto bude tvoja inštalácia Gitu v súlade so všeobecným smerovaním globálnej programátorskej komunity. Vetvu "main" budeme používať v celom tomto tutoriáli. Pozri, prosím, na https://sfconservancy.org/news/2020/jun/23/gitbranchname/ a https://github.com/github/renaming pre viac detailov o tejto téme. + +Nezabudni reštartovať príkazový riadok alebo PowerShell po úspešnom dokončení inštalácie. + + + +Stiahni si Git z [git-scm.com](https://git-scm.com/) a riaď sa inštrukciami. + +Ak ti bude počas inštalácie ponúknutá možnosť "Adjusting the name of the initial branch in new repositories", prosím, zvoľ "Override the default" a použi "main". Týmto bude tvoja inštalácia Gitu v súlade so všeobecným smerovaním globálnej programátorskej komunity. Vetvu "main" budeme používať v celom tomto tutoriáli. Pozri, prosím, na https://sfconservancy.org/news/2020/jun/23/gitbranchname/ a https://github.com/github/renaming pre viac detailov o tejto téme. + +> **Poznámka** Ak používaš OS X 10.6, 10.7 alebo 10.8, budeš musieť nainštalovať verziu Gitu odtiaľto: [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 +``` + +### Upravenie prednastaveného názvu vetvy + +Týmto bude tvoja inštalácia Gitu v súlade so všeobecným smerovaním globálnej programátorskej komunity. Vetvu "main" budeme používať v celom tomto tutoriáli. Pozri, prosím, na https://sfconservancy.org/news/2020/jun/23/gitbranchname/ a https://github.com/github/renaming pre viac detailov o tejto téme. + +{% filename %}command-line{% endfilename %} + + $ git config --global --add init.defaultBranch main + + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo dnf install git +``` + +### Upravenie prednastaveného názvu vetvy + +Týmto bude tvoja inštalácia Gitu v súlade so všeobecným smerovaním globálnej programátorskej komunity. Vetvu "main" budeme používať v celom tomto tutoriáli. Pozri, prosím, na https://sfconservancy.org/news/2020/jun/23/gitbranchname/ a https://github.com/github/renaming pre viac detailov o tejto téme. + +{% filename %}command-line{% endfilename %} + + $ git config --global --add init.defaultBranch main + + + + + + +{% filename %}command-line{% endfilename %} + +```bash +$ sudo zypper install git +``` + +### Upravenie prednastaveného názvu vetvy + +Týmto bude tvoja inštalácia Gitu v súlade so všeobecným smerovaním globálnej programátorskej komunity. Vetvu "main" budeme používať v celom tomto tutoriáli. Pozri, prosím, na https://sfconservancy.org/news/2020/jun/23/gitbranchname/ a https://github.com/github/renaming pre viac detailov o tejto téme. + +{% filename %}command-line{% endfilename %} + + $ git config --global --add init.defaultBranch main + + + \ No newline at end of file diff --git a/sk/deploy/pythonanywhere.md b/sk/deploy/pythonanywhere.md new file mode 100644 index 00000000000..ffb93607159 --- /dev/null +++ b/sk/deploy/pythonanywhere.md @@ -0,0 +1,88 @@ +# Vytvorenie nášho blogu na PythonAnywhere + +## Vytvorenie PythonAnywhere účtu + +> **Poznámka** Možno si si už účet na PythonAnywhere vytvorila počas inštalácie - ak áno, nemusíš to robiť znova. +> +> {% include "/deploy/signup_pythonanywhere.md" %} + + +## Konfigurácia našej stránky na PythonAnywhere + +Choď naspäť do hlavného [PythonAnywhere dashboardu](https://www.pythonanywhere.com/) kliknutím na logo a vyber možnosť začať "Bash" konzolu -- to je PythonAnywhere verzia príkazového riadku, presne ako na tvojom počítači. + +![Sekcia "New Console" na webovom rozhraní PythonAnywhere s tlačítkom pre "bash"](images/pythonanywhere_bash_console.png) + +> **Poznámka** PythonAnywhere je založený na Linuxe, takže ak si vo Windowse, konzola bude vyzerať trochu inak ako v tvojom počítači. Nasadenie webovej aplikácie na PythonAnywhere zahŕňa stiahnutie kódu z GitHubu a nakonfigurovanie PythonAnywhere, aby ho rozpoznal a začal ho poskytovať ako webovú aplikáciu. Sú manuálne spôsoby, ako to urobiť, ale PythonAnywhere poskytuje pomocný nástroj, ktorý všetko urobí za teba. Najprv ho nainštalujme: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ pip{{ book.pa_py_version }} install --user pythonanywhere +``` + +Malo by to zobraziť niečo ako `Collecting pythonanywhere` a nakoniec skončiť riadkom, ktorý hovorí `Successfully installed (...) pythonanywhere- (...)`. + +Teraz spustíme pomocníka, ktorý automaticky nakonfiguruje našu aplikáciu z GitHubu. Zadaj nasledujúci príkaz do konzoly na PythonAnywhere (nezabudni použiť užívateľské meno z GitHubu namiesto ``, aby sa URL zhodovala s klonovacou URL z GitHubu): + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +$ pa_autoconfigure_django.py --python={{ book.pa_py_version }} https://github.com//my-first-blog.git +``` + +Keď budeš sledovať, ako to beží, uvidíš, čo to robí: + +- Sťahuje tvoj kód z GitHubu +- Vytvára virtualenv na PythonAnywhere, presne ako na tvojom počítači +- Aktualizuje tvoj súbor settings so zopár nastaveniami špecifickými pre nasadenie +- Pripravuje databázu na PythonAnywhere pomocou príkazu `manage.py migrate` +- Nastavuje tvoje statické súbory (o tých sa dozvieme viac neskôr) +- A nastavuje PythonAnywhere, aby sprístupnil tvoju stránku cez svoju API + +Na PythonAnywhere sú všetky tieto kroky zautomatizované, ale sú to presne tie isté kroky, aké by si musela spraviť u hocijakého iného poskytovateľa serverov. + +Dôležitá vec, ktorú si treba teraz všimnúť, je, že tvoja databáza na PythonAnywhere je vlastne úplne iná a oddelená od databázy na tvojom PC - to znamená, že budeš mať iné príspevky a administrátorský účet. Preto musíme najprv inicializovať admin účet pomocou `createsuperuser`, presne ako sme to spravili na svojom vlastnom počítači. PythonAnywhere pre teba automaticky vytvoril virtualenv, takže ti stačí spustiť: + +{% filename %}PythonAnywhere command-line{% endfilename %} +``` +(ola.pythonanywhere.com) $ python manage.py createsuperuser +``` + +Zadaj detaily pre admin užívateľa. Najlepšie je použiť tie isté, ako používaš na vlastnom počítači, a predísť tak prípadnému zmäteniu neskôr, ibaže by si chcela spraviť heslo na PythonAnywhere o niečo bezpečnejšie. + +A teraz, ak chceš, sa môžeš pozrieť na svoj kód na PythonAnywhere pomocou `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 +``` + +Môžeš tiež ísť do záložky "Files" a pohybovať sa pomocou zabudovaného PythonAnywhere prehliadača súborov. (Na stránke Console sa vieš dostať ku zvyšku stránok na PythonAnywhere pomocou tlačítka v menu v pravom hornom okraji. Keď už si na jednej z týchto stránok, linky na ostatné nájdeš hore.) + + +## Si online! + +Tvoja stránka by teraz mala byť online na internete! Preklikaj sa cez stránku "Web" na PythonAnywhere, kým sa dostaneš k odkazu na ňu. Môžeš ho poslať, komu len chceš. :) + + +> **Poznámka** Toto je začiatočnícky tutoriál a pre nasadenie stránky sme si niektoré veci zjednodušili, čo nie je ideálne z pohľadu bezpečnosti. Ak sa rozhodneš na tomto projekte ďalej stavať, mala by si si prejsť [Django deployment checklist](https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/) pre zopár tipov, ako svoju stránku zabezpečiť. + +## Debugovacie tipy + + +Ak uvídíš chybu počas behu skriptu `pa_autoconfigure_django.py`, toto sú niektoré z častých dôvodov: + +- Zabudla si si vytvoriť PythonAnywhere API token. +- Urobila si chybu vo svojej githubovej URL. +- Ak sa ti zobrazí chybové hlásenie *"Could not find your settings.py"*, pravdepodobne je to spôsobené tým, že sa ti nepodarilo pridať všetky súbory do Gitu a/alebo sa ich nepodarilo úspešne pridať na GitHub. Znovu sa pozri na odstavec o Gite vyššie +- Ak si už mala účet na PythonAnywhere a mala si problém s collectstatic, pravdepodobne máš účet so staršou verziou SQLite (napr. 3.8.2). V takom prípade si vytvor nový účet a skús príkazy v sekcii PythonAnywhere vyššie. + + +Ak pri pokuse navštíviť svoju stránku uvidíš chybu, prvým miestom, kde hľadať problém, je **error log**. Odkaz naň nájdeš na PythonAnywhere v [záložke Web](https://www.pythonanywhere.com/web_app_setup/). Pozri, či tam nie sú nejaké chybové hlášky - tie najnovšie sú naspodku. + +Môžeš skúsiť aj [všeobecné debugovacie tipy na help stránke PythonAnywhere](http://help.pythonanywhere.com/pages/DebuggingImportError). + +A nezabudni, tvoja mentorka alebo mentor sú tu na to, aby ti pomohli! diff --git a/sk/deploy/signup_pythonanywhere.md b/sk/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..45420d0c81d --- /dev/null +++ b/sk/deploy/signup_pythonanywhere.md @@ -0,0 +1,19 @@ +PythonAnywhere je služba, ktorá ti umožní nechať bežať svoj kód v Pythone na serveroch v "cloude". Použijeme ju na uverejnenie našej stránky na internete. + +Náš blog uverejníme na PythonAnywhere. Vytvor si "Beginner" účet na PythonAnywhere (verzia zdarma stačí, nepotrebuješ kreditnú kartu). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Stránka PythonAnywhere, kde sa vytvára účet, s tlačidlom pre vytvorenie "Beginner" účtu zdarma](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Poznámka** Pri výbere používateľského mena mysli na to, že URL tvojho blogu bude v tvare `tvojeuzivatelskemeno.pythonanywhere.com`, takže si vyber prezývku alebo názov, o čom tvoj blog je. Taktiež si určite zapamätaj svoje heslo (pridaj si ho do svojho správcu hesiel, ak nejaký používaš). + +## Vytvorenie PythonAnywhere API tokenu + +Toto je niečo, čo musíš spraviť len raz. Keď si vytvoríš PythonAnywhere účet, hodí ťa to na tvoju nástenku. Nájdi odkaz na svoj účet (Account) vpravo hore: + +![Odkaz na účet (Account) vpravo hore na stránke](../deploy/images/pythonanywhere_account.png) + +následne vyber záložku "API token" a stlač tlačítko "Create new API token". + +![Záložka API token na Account stránke](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/sk/django/README.md b/sk/django/README.md new file mode 100644 index 00000000000..28f25e210cf --- /dev/null +++ b/sk/django/README.md @@ -0,0 +1,27 @@ +# Čo je Django? + +Django (*džängou*) je bezplatný open sourcový webový framework na vytváranie webových aplikácií napísaný v Pythone. Webový framework je súbor komponentov, ktoré ti pomôžu vytvárať stránky rýchlejšie a ľahšie. + +Pri tvorení webových stránok potrebuješ vždy sadu podobných komponentov: spôsob, ako riešiť autentifikáciu užívateľov a užívateliek (registráciu, prihlásenie, odhlásenie), kontrolný panel web stránky, formuláre, spôsob, ako nahrávať súbory, atď. + +Našťastie si iní ľudia už dávno všimli, že webové vývojárky a vývojári čelia pri tvorbe nového webu podobným problémom, takže sa spojili a vytvorili frameworky (Django je jedným z nich), ktoré ti poskytujú hotové komponenty, ktoré môžeš použiť. + +Frameworky sú tu na to, aby si nemusela znovu vynachádzať koleso. Uľahčia ti tvorbu nových web stránok. + +## Prečo potrebuješ framework? + +Aby sme pochopili, čo vlastne Django je, potrebujeme sa zblízka pozrieť na servery. Prvá vec, čo o nich musíš vedieť, je, že budú obsluhovať tvoju stránku. + +Predstav si poštovú schránku (port), na ktorej sa sledujú prichádzajúce listy (žiadosti). To vlastne robí web server. Web server si prečíta list a pošle odpoveď v podobe web stránky. Ale ak chceš niečo poslať, potrebuješ mať nejaký obsah. A Django je to, čo ti ten obsah pomôže vytvoriť. + +## Čo sa stane, ak si niekto vyžiada web stránku z tvojho servera? + +Keď na webový server príde žiadosť, tá je preposlaná do Djanga, ktoré sa pokúsi zistiť, čoho sa vlastne žiadosť týka. Najprv si zoberie adresu webstránky a zisťuje, čo má urobiť. Túto časť vykonáva Django **urlresolver** (všimni si, že adresa webstránku sa nazýva URL (Uniform Resource Locator), takže názov *urlresolver* dáva zmysel). Nie je to žiadna veda - zoberie zoznam vzorov (patterns) a porovnáva ich s URL. Django overuje vzory od vrchu smerom dolu a ak nájde zhodu, pošle žiadosť príslušnej funkcii (ktorá sa nazýva *view*). + +Predstav si poštárku s listom. Kráča ulicou a porovnáva čísla domov s číslom na liste. Ak sa zhoduje, nechá tam list. Takto funguje urlresolver! + +Vo funkcii *view* sa dejú všetky zaujímavé veci: môžeme sa pozrieť do databázy a vyhľadať nejaké informácie. Čo ak užívateľka požiada o zmenu v údajoch? Je to, akoby poslala list s obsahom: "Prosím, zmeňte popis mojej práce." *view* overí, či je oprávnená takú zmenu spraviť, potom popis práce zaktualizuje a naspäť pošle správu: "Hotovo!". Následne *view* vygeneruje odpoveď a Django ho pošle do prehliadača patriacemu užívateľke. + +Samozrejme, vyššie uvedený popis je trochu zjednodušený, ale zatiaľ ešte nepotrebuješ vedieť všetky technické detaily. Pre všeobecnú predstavu to stačí. + +Takže namiesto zložitého študovania detailov jednoducho začneme v Djangu niečo budovať a všetky dôležité veci sa naučíme popri tom! \ No newline at end of file diff --git a/sk/django_admin/README.md b/sk/django_admin/README.md new file mode 100644 index 00000000000..f90e02f3536 --- /dev/null +++ b/sk/django_admin/README.md @@ -0,0 +1,57 @@ +# Django admin + +Na pridávanie, editovanie a mazanie príspevkov, ktoré sme práve namodelovali, budeme používať Django admina. + +Otvorme súbor `blog/admin.py` v editore a nahraďme jeho obsah týmto: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Ako vidíš, importujeme model Post definovaný v predchádzajúcej kapitole. Aby bol náš model viditeľný na adminskej stránke, musíme ho zaregistrovať pomocou `admin.site.register(Post)`. + +OK, je čas pozrieť sa na náš Post model. Nezabudni v konzole spustiť web server pomocou príkazu `python manage.py runserver`. V prehliadači zadaj adresu http://127.0.0.1:8000/admin/. Zobrazí sa ti takáto prihlasovacia stránka: + +![Prihlasovacia stránka](images/login_page2.png) + +Pre prihlásenie musíš vytvoriť *superusera* - užívateľa, ktorý má kontrolu nad všetkým na stránke. Vráť sa do príkazového riadku, napíš `python manage.py createsuperuser` a stlač enter. + +> Ak chceš zadať viac príkazov, kým web server beží, otvor nové okno terminálu a aktivuj svoj virtualenv. Ako písať príkazy sme si povedali v kapitole **Tvoj prvý Django projekt!** v odstavci **Spustenie webového serveru**. + +{% filename %}macOS alebo Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Po výzve zadaj svoje meno (malé písmená, bez medzier), emailovú adresu a heslo. **Netráp sa, že nevidíš heslo, ktoré zadávaš, tak to má byť.** Len ho zadaj a stlač `enter`. Výstup by mal vyzerať asi takto (kde užívateľské meno a email by mali byť tvoje vlastné): + + Username: ola + Email address: ola@example.com + Password: + Password (again): + Superuser created successfully. + + +Vráť sa do prehliadača. Prihlás sa zvolenými údajmi ako superuser, mala by sa ti zobraziť nástenka Django admina. + +![Django admin](images/django_admin3.png) + +Choď do kategórie Posts a trochu sa s ňou pohraj. Pridaj 5 alebo 6 príspevkov. Netráp sa s obsahom - je viditeľný len pre teba na tvojom lokálnom počítači - môžeš skopírovať nejaký text z tohto tutoriálu, aby si ušetrila čas. :) + +Uisti sa, že aspoň dva alebo tri príspevky (ale nie všetky) majú nastavený dátum publikovania. Príde nám to vhod neskôr. + +![Django admin](images/edit_post3.png) + +Ak chceš vedieť viac o Django admine, pozri si dokumentáciu Djanga: https://docs.djangoproject.com/en/5.1/ref/contrib/admin/ + +Teraz je asi vhodný čas dať si kávu (alebo čaj) alebo niečo pod zub a nabrať trochu energie. Práve si vytvorila svoj prvý Django model - zaslúžiš si trochu oddychu! \ No newline at end of file diff --git a/sk/django_admin/images/django_admin3.png b/sk/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/sk/django_admin/images/django_admin3.png differ diff --git a/sk/django_admin/images/edit_post3.png b/sk/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/sk/django_admin/images/edit_post3.png differ diff --git a/sk/django_admin/images/login_page2.png b/sk/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/sk/django_admin/images/login_page2.png differ diff --git a/sk/django_forms/README.md b/sk/django_forms/README.md new file mode 100644 index 00000000000..4a956b8adf6 --- /dev/null +++ b/sk/django_forms/README.md @@ -0,0 +1,479 @@ +# Django formuláre + +Posledná vec, ktorú chceme urobiť na našej web stránke, je vytvoriť pohodlný spôsob pridávania a úpravy blogových príspevkov. Django `admin` je v pohode, ale ťažko sa prispôsobuje a upravuje do krajšej podoby. Pomocou `formulárov` budeme mať absolútnu moc nad naším rozhraním - môžeme urobiť takmer čokoľvek, čo si vieme predstaviť! + +Na Django formulároch je fajn, že ich môžeme vytvoriť úplne od nuly alebo vytvoriť `ModelForm`, ktorý uloží výsledok formulára do modelu. + +A toto je presne to, čo chceme urobiť: vytvoríme formulár pre náš model `Post`. + +Tak, ako všetky ostatné dôležité časti Djanga, aj formuláre majú svoj vlastný súbor: `forms.py`. + +Musíme vytvoriť súbor s týmto názvom v adresári `blog`. + + blog + └── forms.py + + +OK, otvorme ho v editore a napíšme nasledovný kód: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Najskôr musíme naimportovať Django formuláre (`from django import forms`) a náš model `Post` (`from .models import Post`). + +`PostForm`, ako asi správne predpokladáš, je názov nášho formulára. Musíme Djangu povedať, že tento formulár je `ModelForm` (aby Django pre nás mohlo trochu čarovať) - za to je zodpovedný `forms.ModelForm`. + +Ďalej máme `triedu Meta`, kde Djangu povieme, ktorý model by mal byť použitý na vytvorenie tohto formulára (`model = Post`). + +Nakoniec môžeme Djangu povedať, ktoré polia budú v našom formulári. V tomto prípade chceme, aby boli zobrazené iba `title` (nadpisy) a `text` - `author` by mala byť aktuálne prihlásená osoba (teda ty!) a dátum vytvorenia `created_date` by mal byť automaticky nastavený pri vytvorení postu (t.j. v kóde), však? + +To je všetko! Jediné, čo treba teraz urobiť, je použiť formulár vo *viewe* a zobraziť ho v šablóne. + +Takže ešte raz vytvoríme link na stránku, URL, zobrazenie a šablónu. + +## Link na stránku s formulárom + +Predtým, než pridáme link, budeme potrebovať zopár ikoniek, ktoré použijeme ako tlačidlá pre link. V rámci tohto tutoriálu si stiahni [file-earmark-plus.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/file-earmark-plus.svg) a ulož ho do priečinku `blog/templates/blog/icons/` + +> Poznámka: Pre stiahnutie SVG obrázku otvor kontextové menu k linku (väčšinou stlačením pravého tlačidla na myši) a zvoľ "Uložiť odkaz ako". V dialógu, kde si vyberáš, kde sa má súbor uložiť, sa nasmeruj do priečinku `djangogirls` svojho Django projektu a ďalej do podadresára `blog/templates/blog/icons/` a ulož súbor tam. + +Prišiel čas otvoriť `blog/templates/blog/base.html` v editore. Teraz môžeme použiť tento súbor s ikonkou do našej základnej šablóny takto. V elemente `div` vnútri `header` sekcie pridáme link pred element `h1`: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Všimni si, že chceme zavolať náš nový view `post_new`. [SVG ikonku](https://icons.getbootstrap.com/icons/file-earmark-plus/) máme z [Bootstrap Icons](https://icons.getbootstrap.com/) a zobrazí sa ako ikonka stránky s pluskom. Použijeme šablónový príkaz `include`. Týmto dosiahneme, že sa obsah súboru vloží do Django šablóny. Webový prehliadač vie, ako sa s týmto typom obsahu vysporiadať, bez toho, aby bolo treba čokoľvek ďalej spracovávať. + +> Všetky Bootstrapové ikonky si môžeš stiahnuť [tu](https://github.com/twbs/icons/releases/download/v1.11.3/bootstrap-icons-1.11.3.zip). Súbor rozbaľ a skopíruj všetky obrázkové súbory SVG do nového adresára vo vnútri `blog/templates/blog/` s názvom `icons`. Vďaka tomuto môžeš pristupovať k ikonke ako `pencil-fill.svg` pomocou cesty `blog/templates/blog/icons/pencil-fill.svg` + +Po zmene riadku by tvoj HTML súbor mal vyzerať takto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+ + {% include './icons/file-earmark-plus.svg' %} + +

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Po uložení a obnove stránky http://127.0.0.1:8000 uvidíš našu starú známu chybu `NoReverseMatch`. Je to tak? Dobre! + +## URL + +Otvoríme `blog/urls.py` v editore a pridáme riadok: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new/', views.post_new, name='post_new'), +``` + +A výsledný kód bude vyzerať takto: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + 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 obnovení stránky uvidíme chybu `AttributeError`, pretože nemáme naimplementovaný view `post_new`. Pridajme ho teraz. + +## View post_new + +Teraz otvoríme súbor `blog/views.py` v editore a pridáme nasledujúce riadky so zvyškom importovacích riadkov `from`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +A potom náš *view*: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Nový formulár pre `Post` vytvoríme tak, že zavoláme `PostForm()` a prepošleme ho šablóne. K tomuto *viewu* sa ešte vrátime, ale teraz poďme rýchlo vytvoriť šablónu formulára. + +## Šablóna + +Musíme vytvoriť súbor `post_edit.html` v priečinku `blog/templates/blog` a otvoriť ho v editore. Aby formulár fungoval, potrebujeme niekoľko vecí: + +* Musíme zobraziť formulár. Môžeme to urobiť (napríklad) pomocou {% raw %}`{{ form.as_p }}`{% endraw %}. +* Riadok vyššie musí byť obalený HTML elementom form: `...`. +* Potrebujeme tlačidlo `Uložiť`. Vytvoríme ho ako HTML tlačidlo: ``. +* A nakoniec hneď za otváracím tagom `
` musíme pridať `{% raw %}{% csrf_token %}{% endraw %}`. Toto je veľmi dôležité, vďaka tomu je formulár zabezpečený! Ak na to zabudneš, Django sa bude sťažovať, keď sa pokúsiš formulár uložiť: + +![CSFR Zakázaná stránka](images/csrf2.png) + +OK, poďme sa pozrieť, ako by malo vyzerať 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 }} + +
+{% endblock %} +``` + +Čas obnoviť stránku! Aha! Tvoj formulár je na svete! + +![Nový formulár](images/new_form2.png) + +Ale moment! Keď zadáš niečo do polí `title` a `text` a skúsiš to uložiť, čo sa stane? + +Nič! Sme stále na rovnakej stránke a náš text zmizol... a žiaden nový príspevok sa nepridal. Takže čo sa pokazilo? + +Odpoveď znie: nič. Akurát musíme ešte trochu popracovať na našom *viewe*. + +## Uloženie formuláru + +Znova otvor `blog/views.py` v editore. Momentálne máme v `post_new` len toto: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Keď odošleme formulár, vrátime sa do rovnakého viewu, ale teraz už máme v `request` aj nejaké údaje, presnejšie v `request.POST` (názov nemá nič spoločné s "postom" na blogu, ide len o to, že posielame - "postujeme" údaje). Pamätáš si, ako naša definícia formuláru `
` v HTML súbore mala premennú `method="POST"`? Všetky polia z formulára sú teraz v `request.POST`. `POST` by si nemala premenovať na nič iné (jediná ďalšia platná hodnota pre premennú `method` je `GET`, teraz ale nemáme čas vysvetliť si rozdiel). + +Takže v našom *viewe* musíme ošetriť dva rôzne prípady: prvý, ak pristupujeme na stránku prvýkrát a chceme prázdny formulár, a druhý, keď sa vrátime na *view* s už predvyplnenými údajmi formulára. Takže potrebujeme pridať podmienku (na to použijeme `if`): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Je čas nahradiť tri bodky `[...]`. Ak ide o `metódu` `POST`, tak chceme vytvoriť `PostForm` s dátami z formulára, však? Urobíme to takto: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Ďalej skontrolujeme, či je formulár v poriadku (všetky povinné polia sú vyplnené a nie sú zadané žiadne nesprávne hodnoty). To urobíme pomocou `form.is_valid()`. + +Skontrolujeme, či je formulár platný a ak áno, môžeme ho uložiť! + +{% 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() +``` + +V podstate tu ide o dve veci: uložíme formulár pomocou `form.save` a pridáme autora (keďže pole `author` nebolo v `PostForm`, avšak toto pole je povinné). `commit=False` znamená, že ešte nechceme uložiť model `Post` - najskôr chceme pridať autora. Väčšinou budeš používať `form.save()` bez `commit=False`, no v tomto prípade to musíme tak spraviť. `post.save()` uchová zmeny (pridanie autora) a máme vytvorený nový blogový príspevok! + +A nakoniec by bolo super, keby sme mohli ísť rovno na stránku `post_detail` pre náš novovytvorený príspevok, nie? K tomu potrebujeme ešte jeden import: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Pridaj tento riadok úplne na začiatok súboru. A teraz môžeme povedať: "prejdi na stránku `post_detail` novovytvoreného príspevku": + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` je názov viewu, na ktorý chceme ísť. Spomínaš si, že tento *view* vyžaduje premennú `pk`? Aby sme ju odovzdali viewu, použijeme `pk=post.pk`, kde `post` je náš novovytvorený príspevok! + +OK, dosť bolo rečí, už je načase pozrieť sa, ako teraz vyzerá celý *view*, však? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Pozrime sa, či to funguje. Poď na stránku http://127.0.0.1:8000/post/new/, pridaj `title` a `text`, ulož to... a voilà! Nový príspevok je pridaný a my sme presmerovaní na stránku `post_detail`! + +Možno si si všimla, že pred uložením príspevku nastavujeme dátum publikovania. Neskôr v **DjangoGirls Tutorial: Rozšírenie** sa zoznámime s *tlačidlom Publikovať*. + +To je úžasné! + +> Keďže sme nedávno použili administrátorské rozhranie Djanga, systém si myslí, že sme stále prihlásení. Existuje zopár situácií, ktoré by mohli spôsobiť odhlásenie (zatvorenie prehliadača, reštart databázy a podobne). Pokiaľ by sa ti zobrazovala chyba pri vytváraní postu, ktorá by sa sťažovala, že nie si prihlásená, choď na adminskú stránku http://127.0.0.1:8000/admin and prihlás sa znova. Toto problém dočasne vyrieši. Čaká však na teba aj permanentné riešenie v kapitole **Domáca úloha: zvýš svojej stránke bezpečnosť!** po skončení hlavného tutoriálu. + +![Chyba prihlásenia](images/post_create_error.png) + +## Validácia formuláru + +Teraz si ukážeme, aké sú Django formuláre super. Príspevok na blogu musí mať polia `title` a `text`. V našom modeli `Post` sme nepovedali (na rozdiel od `published_date`), že tieto polia sú nepovinné, takže Django štandardne očakáva, že budú nastavené. + +Skús uložiť formulár bez `title` a `text`. Pokús sa uhádnuť, čo sa stane! + +![Validácia formuláru](images/form_validation2.png) + +Django sa postará o to, aby overilo, či sú všetky polia formulára správne. Nie je to skvelé? + +## Formulár pre úpravu + +Teraz už vieme, ako sa pridáva nový príspevok. Ale čo ak chceme upraviť existujúci? Je to veľmi podobné tomu, čo sme práve spravili. Poďme rýchlo vytvoriť niekoľko dôležitých vecí. (Ak niečomu nerozumieš, opýtaj sa svojej mentorky alebo mentora alebo sa pozri na predchádzajúce kapitoly, pretože všetky tieto kroky sme si už prebrali.) + +V prvom rade si uložíme ikonku, ktorá bude reprezentovať tlačidlo na úpravu. Stiahni si [pencil-fill.svg](https://raw.githubusercontent.com/twbs/icons/main/icons/pencil-fill.svg) a ulož ho do adresára `blog/templates/blog/icons/`. + +Otvor si `blog/templates/blog/post_detail.html` v editore a pridaj nasledujúci kód dovnútra elementu `article`: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +aby šablóna vyzerala takto: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + +{% endblock %} +``` + +Otvor si `blog/urls.py` v editore a pridaj tento riadok: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Znova použijeme šablónu `blog/templates/blog/post_edit.html`, takže posledná vec, čo nám chýba, je *view*. + +Otvor `blog/views.py` v editore a na úplný koniec súboru pridaj toto: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +To vyzerá skoro tak isto ako náš view `post_new`, však? Ale nie úplne. Jeden rozdiel je, že posielame navyše parameter `pk` z `urls`. A ďalej: pomocou `get_object_or_404(Post, pk=pk)` získame model `Post`, ktorý chceme upravovať, a následne pri vytváraní formuláru odovzdáme tento príspevok ako parameter `instance`, aj v prípade, keď ukladáme formulár… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +…aj v prípade, keď sme otvorili formulár za účelom úpravy daného príspevku: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +OK, vyskúšajme, či to funguje! Poďme na stránku `post_detail`. V pravom hornom rohu by malo byť tlačidlo na úpravu: + +![Tlačidlo Upraviť](images/edit_button2.png) + +Keď naňho klikneš, uvidíš formulár s našim blogovým príspevkom: + +![Úprava formuláru](images/edit_form2.png) + +Môžeš si vyskúšať zmeniť názov alebo text a uložiť zmeny! + +Gratulujeme! Tvoja aplikácia je čím ďalej dokonalejšia! + +Ak potrebuješ viac informácií o Django formulároch, prečítaj si dokumentáciu: https://docs.djangoproject.com/en/5.1/topics/forms/ + +## Bezpečnosť + +Možnosť vytvárať nové príspevky len kliknutím na link je super! Ale v tomto momente každý, kto navštívi tvoju stránku, bude môcť pridať nový blog post, a to asi nie je to, čo by si chcela. Zmeňme to tak, že tlačidlo sa zobrazí iba tebe a nikomu inému. + +Otvor `blog/templates/blog/base.html` v editore a nájdi náš `div` vovnútri `header` a tag "a", ktorý si tam umiestnila už predtým. Mal by vyzerať takto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + + {% include './icons/file-earmark-plus.svg' %} + +``` + +Do tejto časti pridáme ďalší tag `{% if %}`, vďaka ktorému sa link zobrazí len užívateľovi alebo užívateľke, ktorí sú prihlasení do admina. Momentálne si to len ty! Zmeň element ``, aby vyzeral takto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/file-earmark-plus.svg' %} + +{% endif %} +``` + +Tento `{% if %}` spôsobí, že link bude odoslaný do prehliadača len v prípade, ak je používateľka či používateľ požadujúci stránku prihlásená/-ý. Nezabráni to vytváraniu nových príspevkov úplne, ale ako prvý krok je to dobré. Viac o bezpečnosti si povieme v rozširujúcich lekciách. + +Spomínaš si na ikonku na upravovanie, ktorú sme práve pridali na našu stránku s detailmi? Rovnakú zmenu chceme pridať aj sem, aby iní ludia nemohli upravovať existujúce príspevky. + +Otvor `blog/templates/blog/post_detail.html` v editore a nájdi tento riadok: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + + {% include './icons/pencil-fill.svg' %} + +``` + +Zmeň ho na toto: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + + {% include './icons/pencil-fill.svg' %} + +{% endif %} +``` + +Kedže si pravdepodobne prihlásená, ak obnovíš stránku, neuvidíš nič nové. Načítaj stránku v inom prehliadači alebo incognito okne (nazývané "InPrivate" vo Windows Edge) a uvidíš, že odkaz sa nezobrazuje a ikonka tiež nie! + +## Ešte jedna vec: čas nasadiť aplikáciu! + +Pozrime sa, či to všetko funguje na PythonAnywhere. Je čas na ďalšie nasadenie! + +* Najprv commitni svoj nový kód a pošli ho na GitHub: + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add . + $ git status + $ git commit -m "Pridane viewy na vytvorenie/editovanie prispevkov priamo zo stranky" + $ git push + + +* Potom v [konzole PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Nezabudni nahradiť `` svojou subdoménou na PythonAnywhere bez špicatých zátvoriek.) + +* A nakoniec prejdi na stránku ["Web"](https://www.pythonanywhere.com/web_app_setup/) (použi tlačidlo menu v pravej hornej časti konzoly) a stlač **Reload**. Obnov svoj blog na https://subdomena.pythonanywhere.com, aby si videla svoje zmeny. + +A to by malo byť všetko! Gratulujeme! :) \ No newline at end of file diff --git a/sk/django_forms/images/csrf2.png b/sk/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/sk/django_forms/images/csrf2.png differ diff --git a/sk/django_forms/images/drafts.png b/sk/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/sk/django_forms/images/drafts.png differ diff --git a/sk/django_forms/images/edit_button2.png b/sk/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/sk/django_forms/images/edit_button2.png differ diff --git a/sk/django_forms/images/edit_form2.png b/sk/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/sk/django_forms/images/edit_form2.png differ diff --git a/sk/django_forms/images/form_validation2.png b/sk/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/sk/django_forms/images/form_validation2.png differ diff --git a/sk/django_forms/images/new_form2.png b/sk/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/sk/django_forms/images/new_form2.png differ diff --git a/sk/django_forms/images/post_create_error.png b/sk/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/sk/django_forms/images/post_create_error.png differ diff --git a/sk/django_installation/README.md b/sk/django_installation/README.md new file mode 100644 index 00000000000..ae3f6452cbe --- /dev/null +++ b/sk/django_installation/README.md @@ -0,0 +1,7 @@ +# Inštalácia Djanga + +> **Poznámka** Ak používaš Chromebook, preskoč túto kapitolu a postupuj podľa pokynov na [nastavenie Chromebooku](../chromebook_setup/README.md). +> +> **Poznámka** Ak si už prešla [inštalačnými pokynmi](../installation/README.md), tak toto už máš hotové a môžeš ísť rovno na ďalšiu kapitolu! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/sk/django_installation/instructions.md b/sk/django_installation/instructions.md new file mode 100644 index 00000000000..add4af1dcdf --- /dev/null +++ b/sk/django_installation/instructions.md @@ -0,0 +1,229 @@ +> Časť tejto kapitoly je založená na tutoriáloch Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Časť tejto kapitoly je založená na [django-marcador tutorial](http://django-marcador.keimlink.de/) pod licenciou Creative Commons Attribution-ShareAlike 4.0 International License. Tutoriál django-marcador je autorsky chránený Markusom Zapke-Gründemannom et al. + +## Virtuálne prostredie + +Skôr, ako nainštalujeme Django, nainštalujeme si extrémne užitočný nástroj, ktorý ti pomôže udržiavať poriadok pri programovaní na tvojom počítači. Je možné tento krok preskočiť, no veľmi ho odporúčame. Začať s najlepším možným nastavením ti ušetrí kopec problémov v budúcnosti! + +Takže poďme vytvoriť **virtuálne prostredie** (alebo aj *virtualenv*). Virtualenv oddelí nastavenia Pythonu/Djanga pre každý projekt zvlášť. To znamená, že zmeny, ktoré urobíš na jednej web stránke, neovplyvnia iné stránky, ktoré vyvíjaš. Šikovné, však? + +Jediné, čo musíš urobiť, je nájsť priečinok, v ktorom chceš `virtualenv` vytvoriť, napríklad tvoj domovský priečinok. Vo Windowse by mohol vyzerať napríklad `C:\Users\Meno` (kde `Meno` predstavuje tvoj login). + +> **POZNÁMKA:** Vo Windowse sa uisti, že tento priečinok neobsahuje špeciálne znaky alebo znaky s diakritikou; ak tvoje uživateľské meno obsahuje znaky s diakritikou, použi iný priečinok, napr. `C:\djangogirls`. + +V tomto tutoriáli budeme používať nový priečinok `djangogirls` v tvojom domovskom priečinku: + +{% filename %}command-line{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +Vytvoríme virtualenv s názvom `myenv`. Všeobecný príkaz má takýto formát: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + + + +Ak chceš vytvoriť nový `virtualenv`, musíš otvoriť príkazový riadok a spustiť `python -m venv myvenv`. Bude to vyzerať takto: + +{% filename %}command-line{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +`myvenv` je názov tvojho `virtualenvu`. Môžeš použiť aj iný názov, ale používaj malé písmená a žiadne medzery, diakritiku alebo špeciálne znaky. Je tiež dobré použiť krátky názov - budeš naň často odkazovať! + + + + + +Vytvoriť `virtualenv` na Linuxe a macOS vyžaduje spustenie `python3 -m venv myvenv`. Bude to vyzerať takto: + +{% filename %}command-line{% endfilename %} + + $ python3 -m venv myvenv + + +`myvenv` je názov tvojho `virtualenvu`. Môžeš použiť aj iný názov, ale ostaň pri malých písmenách a nepoužívaj medzery. Je tiež dobré použiť krátky názov, pretože naň budeš často odkazovať! + +> **POZNÁMKA:** Niektoré verzie systému Debian/Ubuntu môžu zobraziť nasledujúcu chybu: +> +> {% filename %}command-line{% endfilename %} +> +> The virtual environment was not created successfully because ensurepip is not available. Na systémoch Debian/Ubuntu budeš musieť nainštalovať balíček python3-venv pomocou nasledujúceho príkazu. +> apt install python3-venv +> Možno budeš musieť pre tento príkaz použiť sudo. Po nainštalovaní balíčku python3-venv si znova vytvor svoje virtuálne prostredie. +> +> +> V tomto prípade postupuj podľa pokynov uvedených vyššie a nainštaluj si balík `python3-venv`: {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python3-venv +> +> +> **POZNÁMKA:** V niektorých verziách Debian/Ubuntu inicializovanie virtuálneho prostredia týmto spôsobom vráti nasledovnú chybu: +> +> {% filename %}command-line{% endfilename %} +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Obídeme to príkazom `virtualenv`. +> +> {% filename %}command-line{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python{{ book.py_version }} myvenv +> +> +> **POZNÁMKA:** Ak sa ti objaví chyba ako +> +> {% filename %}command-line{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> potom namiesto toho spusti: +> +> {% filename %}command-line{% endfilename %} +> +> sudo apt install python{{ book.py_version }}-venv +> + + + +## Práca s virtualenvom + +Vyššie uvedený príkaz vytvorí priečinok s názvom `myvenv` (alebo akékoľvek meno si si vybrala), ktorý obsahuje naše virtuálne prostredie (v podstate kopec priečinkov a súborov). + + + +Virtuálne prostredie spusti príkazom: + +{% filename %}command-line{% endfilename %} + + C:\Users\Meno\djangogirls> myvenv\Scripts\activate + + +> **POZNÁMKA:** Vo Windowse 10 sa môže vyskytnúť chyba vo Windows PowerShelli, ktorá hovorí `execution of scripts is disabled on this system`. V tomto prípade otvor ďalší Windows PowerShell s možnosťou "Spustiť ako správca". Potom skús spustiť nasledovný príkaz predtým, než spustíš svoj virtualenv: +> +> {% 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 +> + + + +> **POZNÁMKA:** Pre používateľky populárneho editora VS Code, ktorý má vlastný zabudovaný terminál založený na Windows PowerShell: ak chcete naďalej používať tento zabudovaný terminál, môžete spustiť nasledovný príkaz na aktiváciu virtuálneho prostredia: +> +> $ . myvenv\Scripts\activate.ps1 +> +> +> Výhoda je, že netreba skákať medzi oknami editoru a príkazovými oknami. + + + + + +Virtuálne prostredie spusti príkazom: + +{% filename %}command-line{% endfilename %} + + $ source myvenv/bin/activate + + +Nezabudni nahradiť `myvenv` názvom svojho `virtualenvu`! + +> **POZNÁMKA:** Ak príkaz `source` nefunguje, skús namiesto neho toto: +> +> {% filename %}command-line{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +To, že je `virtualenv` spustený, zistíš tak, že príkazový riadok v konzole bude mať na začiatku `(myenv)`. + +Pri práci vo virtuálnom prostredí bude `python` automaticky odkazovať na správnu verziu, takže môžeš pokojne používať `python` namiesto `python3`. + +OK, všetko potrebné máme prichystané. Konečne môžeme nainštalovať Django! + +## Inštalácia Djanga {#django} + +Teraz, keď máš svoj `virtualenv` spustený, môžeš nainštalovať Django. + +Predtým, než to urobíme, mali by sme sa uistiť, že je nainštalovaná najnovšia verzia `pipu`, softvéru, ktorý použijeme na inštalovanie Djanga: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~$ python -m pip install --upgrade pip + + +### Inštalácia balíčkov so závislosťami + +Súbor requirements udržiava zoznam závislostí, ktoré sa nainštalujú, keď spustíš `pip install`: + +Ako prvé vytvor súbor s názvom `requirements.txt` vo vnútri tvojho priečinku `djangogirls/` pomocou editora, ktorý si si nainštalovala. V editore treba otvoriť nový súbor a uložiť ho ako `requirements.txt` v priečinku `djangogirls/`. Tvoj priečinok bude vyzerať takto: + + djangogirls + ├── myvenv + │ └── ... + └───requirements.txt + + +Do súboru `djangogirls/requirements.txt` by si mala pridať nasledujúci text: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Teraz spusti `pip install -r requirements.txt`, aby si nainštalovala 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 }} + + + + +> Ak sa objaví chyba pri spustení pipu vo Windowse, skontroluj, či cesta/názov tvojho projektu neobsahuje medzery, diakritiku alebo špeciálne znaky (napr. `C:\Users\Tvoje Meno\djangogirls`). Ak obsahuje, mala by si zvážiť použitie iného miesta, bez medzier, diakritiky a špeciálnych znakov (napríklad: `C:\djangogirls`). Vytvor nový virtualenv v tomto novom priečinku, potom odstráň starý a zopakuj vyššie uvedený príkaz. (Presunutie virtualenv priečinku samotného nebude fungovať, lebo virtualenv používa absolútne cesty.) + + + + + +> Príkazový riadok môže zamrznúť, keď sa pokúsiš nainštalovať Django. Ak sa to stane, namiesto hore uvedeného príkazu použi: +> +> {% filename %}command-line{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Ak sa objaví chyba pri spustení pipu v Ubuntu 12.04, spusti `python -m pip install - U --force-reinstall pip`, čím sa opraví inštalácia pipu vo virtualenve. + + + +To je všetko! Teraz si už (konečne) pripravená vytvoriť Django aplikáciu! \ No newline at end of file diff --git a/sk/django_models/README.md b/sk/django_models/README.md new file mode 100644 index 00000000000..44cf93f06ba --- /dev/null +++ b/sk/django_models/README.md @@ -0,0 +1,207 @@ +# Django modely + +Teraz pôjdeme vytvoriť niečo, čo bude uchovávať naše blogové príspevky. Aby sme to vedeli spraviť, musíme si najskôr povedať niečo o `objektoch`. + +## Objekty + +V programovaní sa používa pojem `objektovo orientované programovanie`. Myšlienka spočíva v tom, že namiesto vypisovania nudných sekvencií programátorských príkazov môžeme veci modelovať a definovať, ako majú navzájom komunikovať. + +Takže, čo je to objekt? Je to zbierka vlastností a akcií. Znie to čudne, ale ukážeme si príklad. + +Ak chceme namodelovať mačku, vytvoríme objekt `Macka`, ktorá má nejaké vlastnosti, napríklad: `farba`, `vek`, `nalada` (t. j. dobrá, zlá, ospalá ;)), a `majitelka` (ktorý je objektom `Osoba`, alebo možno v prípade túlavej mačky bude táto vlastnosť prázdna). + +Ďalej má `Macka` niekoľko akcií: `priast`, `skriabat` alebo `krmit` (v ktorej dáme mačke nejaké `MacacieZradlo`, ktoré by mohlo byť samostatným objektom s vlastnosťami, napr. `chut`). + + Macka + -------- + farba + vek + nalada + majitelka + priast() + skriabat() + krmit(mac_zradlo) + + + MacacieZradlo + -------- + chut + + + MacacieZradlo + -------- + chut + + +Takže v podstate hlavná myšlienka je popísať reálne veci kódom pomocou vlastností (ktorým hovoríme `vlastnosti objektu/object properties`) a akcií (tie nazývame `metódy`). + +Ako teda budeme modelovať blogový príspevok? Chceme predsa vytvoriť blog, nie? + +Musíme odpovedať na otázku: Čo je vlastne blogový príspevok? Aké vlastnosti by mal mať? + +No, náš blogový príspevok určite potrebuje nejaký text s obsahom a titulkom, nie? Bolo by tiež fajn vedieť, kto ho napísal - takže potrebujeme autorku či autora. A nakoniec, chceme vedieť, kedy bol príspevok vytvorený a zverejnený. + + Post + -------- + title + text + author + created_date + published_date + + +Čo všetko môžeme s blogovým príspevkom robiť? Bolo by dobré mať nejakú `metódu`, ktorá príspevok publikuje, však? + +Takže budeme potrebovať metódu `publish`. + +Keďže už vieme, čo chceme dosiahnuť, začnime tvoriť model v Djangu! + +## Django model + +Keďže už vieme, čo je objekt, môžeme vytvoriť Django model pre náš blogový príspevok. + +Model v Djangu je špeciálny typ objektu - je uložený v `databáze`. Databáza je súbor údajov. Je to miesto, kde budeš ukladať informácie o užívateľoch/užívateľkách, blogových príspevkoch atď. Na ukladanie údajov budeme používať databázu SQLite. Je to prednastavený databázový adaptér v Djangu -- nateraz nám bude stačiť. + +Model v databáze si môžeš predstaviť ako tabuľku so stĺpcami (polia) a riadkami (dáta). + +### Vytvorenie aplikácie + +Aby sme mali všetko pekne upratané, vytvoríme vo vnútri nášho projektu samostatnú aplikáciu. Je dobré mať všetko zorganizované hneď od začiatku. Aby sme vytvorili aplikáciu, musíme v konzole spustiť nasledujúci príkaz (v priečinku `djangogirls`, kde sa nachádza súbor `manage.py`): + +{% filename %}macOS a Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Uvidíš, že pribudne nový priečinok `blog`, ktorý obsahuje množstvo súborov. Priečinky a súbory v našom projekte by mali vyzerať takto: + + 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 + + + +Po vytvorení aplikácie tiež musíš Djangu povedať, že ju má použiť. To spravíme v súbore `mysite/settings.py` - otvor ho vo svojom editore. Musíme nájsť `INSTALLED_APPS` a pridať riadok `'blog',` tesne pred uzatváraciu zátvorku `]`. Takže výsledok nášho snaženia bude vyzerať takto: + +{% 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', +] +``` + +### Vytvorenie modelu príspevku + +V súbore `blog/models.py` definujeme všetky objekty, ktoré sa nazývajú `modely` - na tomto mieste definujeme náš príspevok. + +Otvor `blog/models.py` v editore, všetko z neho odstráň a napíš nasledovný kód: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Dvakrát skontroluj, či si použila 2 podčiarkovníky (`_`) na oboch stranách `str`. Táto konvencia sa v Pythone často používa a niekedy sa tomu hovorí "dunder" (skratka pre anglické double-underscore). + +Vyzerá to strašidelne, nie? Ale neboj sa, vysvetlíme si, čo tieto riadky znamenajú! + +Všetky riadky začínajúce na `from` alebo `import` pridávajú časti z iných súborov. Takže namiesto kopírovania tých istých vecí v každom súbore môžeme vložiť niektoré časti pomocou `from ... import ...`. + +`class Post(models.Model):` - tento riadok definuje náš model (je to `objekt`). + +- `class` je špeciálne kľúčové slovo, ktoré naznačuje, že definujeme objekt. +- `Post` je meno nášho modelu. Môžeme mu dať iný názov (ale musíme sa vyhnúť špeciálnym znakom a medzerám). Názov triedy vždy začni písmenami. +- `models.Model` znamená, že Post je djangový model, takže Django vie, že by mal byť uložený v databáze. + +Teraz zadefinujeme vlastnosti, o ktorých sme hovorili: `title` (titulka), `text`, `created_date` (dátum vytvorenia), `published_date` (dátum zverejnenia) a `author` (autor(ka)). Na to ale musíme zadefinovať typ každého poľa (Je to text? Číslo? Dátum? Vzťah k inému objektu, napr. objektu User?) + +- `models.CharField` - takto môžeš definovať text s obmedzeným počtom znakov. +- `models.TextField` - toto je pre dlhé texty bez obmedzenia. To znie ideálne pre blogový príspevok, nie? +- `models.DateTimeField` - toto je dátum a čas. +- `models.ForeignKey` - toto je odkaz na iný model. + +Nebudeme si tu vysvetľovať každý kúsok kódu, pretože by to zabralo príliš veľa času. Ak chceš vedieť viac o modelových poliach a definovaní ďalších vecí okrem tých, čo sme popísali vyššie, skús sa pozrieť do dokumentácie Djanga (https://docs.djangoproject.com/en/5.1/ref/models/fields/#field-types). + +A čo `def publish(self):`? To je presne tá metóda `publish`, o ktorej sme hovorili predtým. `def` znamená, že ide o funkciu/metódu, a `publish` je jej názov. Názov metódy môžeš zmeniť, ak chceš. Pravidlo pre názvy metód je, že používame malé písmená a podčiarkovníky namiesto medzier. Napríklad metóda, ktorá vypočíta priemernú cenu by sa mohla nazývať `pocitaj_priemernu_cenu`. + +Metódy často niečo vracajú (`return`). Príklad nájdeš napríklad v metóde `__str__`. V tomto prípade, keď zavoláme `__str__()`, dostaneme text (**string**) s názvom príspevku. + +Tiež si všimni, že `def publish(self):` a `def __str__(self):` sú odsadené vo vnútri našej triedy. Keďže Python je citlivý na medzery, musíme odsadiť naše metódy vo vnútri triedy. Inak metódy nebudú patriť do triedy a môže dojsť k neočakávanému správaniu. + +Ak čokoľvek nie je jasné, neváhaj a spýtaj sa mentora či mentorky! Vieme, že je to komplikované, najmä ak sa učíš, čo sú objekty a funkcie súčasne. Ale dúfame, že teraz už to vyzerá trochu menej magicky! + +### Vytváranie tabuliek pre modely v databáze + +Posledným krokom je pridať náš nový model do databázy. Najprv musíme Djangu dať vedieť, že sme urobili nejaké zmeny v našom modeli. (Práve sme ho vytvorili!) Choď do konzoly a zadaj `python manage.py makemigrations blog`. Bude to vyzerať takto: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py + + - Create model Post + + +**Poznámka:** Nezabudni uložiť súbory, ktoré upravuješ. Inak počítač spustí starú verziu, ktorá môže skončiť chybou. + +Django pripravil migračný súbor, ktorý musíme aplikovať na našu databázu. Napíš `python manage.py migrate blog` a výstup by mal byť: + +{% 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 + + +Hurá! Náš model Post je už v databáze! Bolo by fajn ho vidieť, nie? Prejdi na nasledujúcu kapitolu a uvidíš, ako vyzerá tvoj Post! \ No newline at end of file diff --git a/sk/django_orm/README.md b/sk/django_orm/README.md new file mode 100644 index 00000000000..5eac91986a0 --- /dev/null +++ b/sk/django_orm/README.md @@ -0,0 +1,221 @@ +# Django ORM (QuerySety) + +V tejto kapitole sa naučíš, ako sa Django pripája k databáze a ukladá do nej údaje. Poďme na to! + +## Čo je QuerySet? + +QuerySet je v podstate zoznam objektov daného modelu. QuerySet ti umožňuje čítať dáta z databázy, filtrovať a zoraďovať ich. + +Najjednoduchšie bude ukázať si to na príklade. Vyskúšajme si to, čo povieš? + +## Django konzola + +Otvor si lokálnu konzolu (nie na PythonAnywhere) a napíš tento príkaz: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Toto by sa ti malo zobraziť: + +{% filename %}command-line{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Teraz si v interaktívnej Django konzole. Je to ako konzola Pythonu, ale s trochou Django mágie. :) Môžeš v nej používať všetky pythonové príkazy. + +### Všetky objekty + +Skúsme najskôr zobraziť všetky naše príspevky. To sa robí nasledovným príkazom: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Ups! Objavila sa chybová hláška. Hovorí nám, že nič také ako Post neexistuje. To dáva zmysel - zabudli sme ho totiž najskôr naimportovať! + +{% filename %}command-line{% endfilename %} + +```python +>>> from blog.models import Post +``` + +Naimportujeme model `Post` z `blog.models`. Skúsme teda znova zobraziť všetky príspevky: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Je to zoznam príspevkov, ktoré sme vytvorili dávnejšie! Vytvorili sme ich pomocou Django administrátorského rozhrania. No radi by sme vytvorili nové príspevky pomocou Pythonu, tak ako na to? + +### Vytvorenie objektu + +Takto vytvoríš nový objekt typu Post v databáze: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') +``` + +Chýba nám však jedna prísada: `me`. Ako autorku musíme vložiť inštanciu `User` modelu. Ako to urobiť? + +Najskôr naimportujme User model: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Akých užívateľov a užívateľky máme v našej databáze? Skús toto: + +{% filename %}command-line{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Toto je superuser, ktorého sme vytvorili dávnejšie! Poďme ho dostať ako inštanciu (uprav tento riadok tak, aby obsahoval tvoje vlastné užívateľské meno): + +{% filename %}command-line{% endfilename %} + +```python +>>> me = User.objects.get(username='ola') +``` + +Ako môžeš vidieť, teraz sme dostali (`get`) `Usera` s užívateľským menom (`username`) 'ola'. Môže byť! + +Teraz už konečne môžeme vytvoriť náš prvý príspevok: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.create(author=me, title='Sample title', text='Test') + +``` + +Hurá! Chceš si overiť, či to zabralo? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.all() +, , ]> +``` + +Je to tam, jeden príspevok v zozname pribudol! + +### Pridanie ďalších príspevkov + +Teraz sa môžeš trochu zabaviť a pridať pár ďalších príspevkov, aby si si vyskúšala, ako to funguje. Pridaj dva-tri ďalšie príspevky a potom poďme na ďalšiu časť. + +### Filtrovanie objektov + +Dôležitou vlastnosťou QuerySetov je možnosť ich filtrovať. Povedzme, že chceme nájsť všetky príspevky, ktorých autorkou je užívateľka (User) ola. Použijeme `filter` namiesto `all` v príkaze `Post.objects.all()`. V zátvorkách definujeme jednu alebo viac podmienok, ktoré má príspevok spĺňať, aby skončil v našom querysete. V našom prípade je to `author`, ktorý sa rovná `me`. V Djangu to napíšeš takto: `author=me`. Náš kúsok kódu bude teraz vyzerať takto: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(author=me) +, , , ]> +``` + +Alebo možno chceme vyhľadať všetky príspevky, ktoré obsahujú slovo 'title' v poli `title`? + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='title') +, ]> +``` + +> **Poznámka** Medzi `title` a `contains` sú dva podčiarkovníky (`_`). Django ORM používa túto syntax, aby oddelil názvy polí ("title") a operácie či filtre ("contains"). Ak použiješ iba jeden podčiarkovník, dostaneš chybu "FieldError: Cannot resolve keyword title_contains". + +Môžeš tiež získať zoznam všetkých publikovaných príspevkov. To urobíme vyfiltrovaním príspevkov, ktorých `published_date` je v minulosti: + +{% filename %}command-line{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Bohužiaľ, príspevok, ktorý sme pridali z konzoly Pythonu, ešte nie je publikovaný. To môžeme zmeniť! Najskôr získaj inštanciu príspevku, ktorý chceme publikovať: + +{% filename %}command-line{% endfilename %} + +```python +>>> post = Post.objects.get(title="Sample title") +``` + +A potom ho zverejni pomocou našej metódy `publish`: + +{% filename %}command-line{% endfilename %} + +```python +>>> post.publish() +``` + +Teraz skús získať zoznam publikovaných postov znova (stlač šípku hore trikrát a stlač `enter`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +]> +``` + +### Zoradenie objektov + +QuerySety tiež umožňujú zoradiť zoznamy objektov. Skúsme ich zoradiť podľa dátumu vytvorenia (pole `created_date`): + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +, , , ]> +``` + +Poradie môžeme vymeniť pridaním `-` na začiatok: + +{% filename %}command-line{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +, , , ]> +``` + +### Zložité požiadavky pomocou reťazenia metód + +Ako sme videli, niektoré metódy na `Post.objects` vracajú QuerySet. Tie isté metódy môžeš zavolať na ďalšom QuerySete a vrátia ti nový QuerySet. Týmto môžeš kombinovať ich efekt **reťazením**: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +To je skutočne silný nástroj, vďaka ktorému môžeš písať pomerne komplexné požiadavky (queries). + +Super! Teraz si pripravená na ďalšiu časť! Django konzolu zatvoríš príkazom: + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/sk/django_start_project/README.md b/sk/django_start_project/README.md new file mode 100644 index 00000000000..bf9a9778588 --- /dev/null +++ b/sk/django_start_project/README.md @@ -0,0 +1,266 @@ +# Tvoj prvý Django projekt! + +> Časť tejto kapitoly je založená na tutoriáli Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). +> +> Časti tejto kapitoly sú založené na [django-marcador tutorial](http://django-marcador.keimlink.de/) pod licenciou Creative Commons Attribution-ShareAlike 4.0 International License. Tutoriál django-marcador je autorsky chránený Markusom Zapke-Gründemannom et al. + +Vytvoríme jednoduchý blog! + +Prvý krok je vytvoriť nový Django projekt. To v podstate znamená, že spustíme pár skriptov, poskytovaných Djangom, ktoré pre nás vytvoria kostru Django projektu. Je to len pár priečinkov a súborov, ktoré použijeme neskôr. + +Mená niektorých súborov a priečinkov sú pre Django veľmi dôležité. Súbory, ktoré teraz vytvoríme, by si nemala premenovať. Presúvať ich na iné miesto taktiež nie je dobrý nápad. Django potrebuje udržovať určitú štruktúru, aby bolo schopné nájsť dôležité veci. + +> Nezabudni všetko spúšťať vo virtualenve. Pokiaľ vo svojej konzole nevidíš predponu `(myenv)`, musíš aktivovať virtualenv. Ako na to bolo vysvetlené v kapitole **Inštalácia Djanga** v časti **Práca s virtualenvom**. Pokiaľ napíšeš `myvenv\Scripts\activate` na Windowse alebo `source myvenv/bin/activate` na macOS alebo Linuxe, malo by všetko fungovať. + + + +Vo svojej macOS alebo Linux konzole spusti tento príkaz. **Nezabudni pridať bodku `.` na konci!** + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Bodka `.` je dôležitá, pretože hovorí skriptu, aby nainštaloval Django v tvojom aktuálnom priečinku (pre ktorý je bodka `.` skratkou). +> +> **Poznámka** Pri písaní predchádzajúceho príkazu nezabudni, že píšeš len časť, ktorá začína `django-admin`. Časť `(myvenv) ~/djangogirls$` je len príkladom promptu, kam budeš zadávať svoje príkazy. + + + + + +Vo Windowse spusti tento príkaz. **(Nezabudni pridať bodku `.` na konci)**: + +{% filename %}command-line{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Bodka `.` je dôležitá, pretože hovorí skriptu, aby nainštaloval Django v tvojom aktuálnom priečinku (pre ktorý je bodka `.` skratkou). +> +> **Poznámka** Pri písaní predchádzajúceho príkazu nezabudni, že píšeš len časť, ktorá začína `django-admin.exe`. Časť `(myvenv) C:\Users\Name\djangogirls>` je len príkladom promptu, kam budeš zadávať svoje príkazy. + + + +`django-admin.py` je skript, ktorý pre teba vytvorí priečinky a súbory. Momentálne by si mala mať štruktúru priečinkov, ktorá vyzerá takto: + + djangogirls + ├── manage.py + ├── mysite + │   ├── asgi.py + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + ├── myvenv + │   └── ... + └── requirements.txt + + +> **Poznámka**: v štruktúre priečinkov uvidíš aj adresár `myvenv`, ktorý sme vytvorili dávnejšie. + +`manage.py` je skript, ktorý pomáha so správou stránky. Okrem iného budeme vďaka nemu môcť spustiť na našom počítači webový server, bez toho, aby sme inštalovali čokoľvek iné. + +Súbor `settings.py` obsahuje konfiguráciu tvojej webovej stránky. + +Pamätáš, keď sme sa rozprávali o poštárke, ktoré zisťuje, kam doručiť list? `urls.py` obsahuje zoznam vzorov, ktoré používa `urlresolver`. + +Zatiaľ ignorujme ostatné súbory, keďže ich teraz aj tak nebudeme meniť. Jediná vec, na ktorú netreba zabudnúť, je, že ich nesmieš omylom zmazať! + +## Zmena nastavení + +Spravme pár zmien v `mysite/settings.py`. Otvor súbor v editore kódu, ktorý si si nainštalovala predtým. + +**Poznámka**: Pamätaj, že `settings.py` je obyčajný súbor, ako každý iný. Môžeš ho otvoriť z editoru pomocou možnosti "Súbor -> Otvoriť" v menu. Malo by sa ti zobraziť štandardné okno, v ktorom vyhľadáš svoj `settings.py` súbor a označíš ho. Prípadne môžeš ísť do priečinku djangogirls na pracovnej ploche a kliknúť na súbor pravým tlačidlom myši. Potom vyber editor kódu zo zoznamu. Výber editora je dôležitý, pretože môžeš mať nainštalované iné programy, ktoré dokážu tento súbor otvoriť, ale nedovolia ti ho upravovať. + +Bolo by dobré mať na našej stránke správny čas. Choď na [zoznam časových pásiem na Wikipédii](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) a skopíruj svoje časové pásmo (TZ) (napr. `Europe/Bratislava`). + +V súbore `settings.py` nájdi riadok, ktorý obsahuje `TIME_ZONE`, a uprav ho tak, aby obsahoval tvoje časové pásmo. Napríklad: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Bratislava' +``` + +Jazykový kód sa skladá z jazyka, napr. `en` pre angličtinu alebo `sk` pre slovenčinu, a kódu krajiny, napr. `de` pre Nemecko alebo `ch` pre Švajčiarsko. Ak angličtina nie je tvoj materinský jazyk, môžeš pridať nasledovné, ak chceš zmeniť nápisy na tlačidlách a pripomienkach do svojho jazyka. Ak to spravíš, bude napríklad tlačidlo "Cancel" preložené do jazyka, ktorý tu definuješ. [Django má zabudovaných veľa prekladov](https://docs.djangoproject.com/en/5.1/ref/settings/#language-code). + +Ak chceš iný jazyk, zmeň jazykový kód tým, že zmeníš nasledujúci riadok: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Budeme tiež musieť pridať cestu pre statické súbory. (O statických súboroch a CSS si povieme viac neskôr.) Choď na *koniec* súboru a rovno pod `STATIC_URL` pridaj `STATIC_ROOT`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +Keď `DEBUG` je `True` a `ALLOWED_HOSTS` je prázdne, host sa validuje voči `['localhost', '127.0.0.1', '[::1]']`. Toto sa nebude zhodovať s naším hostname na PythonAnywhere, keď nasadíme našu aplikáciu, preto zmeníme nasledovné nastavenie: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Poznámka**: Ak používaš Chromebook, pridaj nasledovný riadok na koniec súboru settings.py: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Ak používaš Cloud 9, tiež pridaj `.amazonaws.com` do `ALLOWED_HOSTS`. +> +> Ak hostuješ svoj projekt na `Glitch.com`, mali by sme ochrániť tajný kľúč, ktorý by mal zostať skrytý (inak by ho mohol vidieť každý, kto použije tvoj projekt): +> +> - Najprv si musíme vytvoriť nový náhodný tajný kľúč. Otvor Glitch terminál a napíš nasledujúci príkaz: +> +> {% filename %}command-line{% endfilename %} +> +> ```bash +> python -c 'from django.core.management.utils import get_random_secret_key; \ +> print(get_random_secret_key())' +> ``` +> +> Mal by sa ti zobraziť dlhý náhodný reťazec, ktorý je ako stvorený pre tvoju novú Django webstránku. Tento kľúč teraz skopírujeme do súboru `.env`, ktorý Glitch ukáže len autorovi či autorke danej webstránky. +> +> - Vytvor súbor pod názvom `.env` v základnom adresári tvojho projektu a pridaj doň nasledovné: +> +> {% filename %}.env{% endfilename %} +> +> ```bash +> # Tuto pomedzi apostrofy na zaciatku a na konci mozes skopirovat nahodny kluc, ktory si vygenerovala vyssie +> SECRET='3!0k#7ds5mp^-x$lqs2%le6v97h#@xopab&oj5y7d=hxe511jl' +> ``` +> +> - Následne uprav svoj Django settings súbor tým, že doň vložíš túto tajnú hodnotu, a nastav názov tvojej Django webstránky: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> import os +> +> SECRET_KEY = os.getenv('SECRET') +> ``` +> +> - A ešte trochu nižšie v tom istom súbore doň vložíme meno tvojej novej Glitch stránky: +> +> {% filename %}mysite/settings.py{% endfilename %} +> +> ```python +> ALLOWED_HOSTS = [os.getenv('PROJECT_DOMAIN') + ".glitch.me"] +> ``` +> +> Hodnota `PROJECT_DOMAIN` je automaticky vygenerovaná Glitchom. Bude taká istá, ako je meno tvojho projektu. + +## Nastavenie databázy + +Existuje veľa rôznych databázových softvérov, ktoré umožňujú ukladať údaje pre tvoje web stránky. My budeme používať predvolenú databázu `sqlite3`. + +Tá je už nastavená v tejto časti súboru `mysite/settings.py`: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Databázu pre náš blog vytvoríme spustením tohto príkazu v konzole: `python manage.py migrate` (musíme byť v priečinku `djangogirls`, ktorý obsahuje súbor `manage.py`). Ak je všetko ok, mala by si vidieť niečo takéto: + +{% filename %}command-line{% endfilename %} + + (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 + + +A je to! Teraz treba spustiť webový server a zistiť, či je naša web stránka funkčná! + +## Spustenie webového servera + +Musíš sa nachádzať v priečinku, v ktorom sa nachádza súbor `manage.py` (adresár `djangogirls`). V konzole spustíme webový server zadaním `python manage.py runserver`: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Ak používaš Chromebook, použi nasledovný príkaz: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +alebo tento, ak používaš Glitch: + +{% filename %}Glitch.com terminal{% endfilename %} + + $ refresh + + + +Ak si vo Windowse a padne ti to s chybovou hláškou `UnicodeDecodeError`, použi namiesto toho tento príkaz: + +{% filename %}command-line{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Teraz už musíš len skontrolovať, či tvoja web stránka beží. Otvor si prehliadač (Firefox, Chrome, Safari, Internet Explorer alebo čokoľvek používaš) a zadaj adresu: + +{% filename %}browser{% endfilename %} + + http://127.0.0.1:8000/ + + +Ak používaš Chromebook alebo Cloud 9, namiesto toho klikni na URL vo vyskakovacom okne, ktoré by sa ti malo objaviť v pravom hornom rohu príkazového okna, kde ti beží web server. Táto URL bude vyzerať nejako takto: + +{% filename %}browser{% endfilename %} + + https://.vfs.cloud9.us-west-2.amazonaws.com + + +alebo na Glitchi: + + https://nazov-tvojho-glitch-projektu.glitch.me + + +Blahoželáme! Práve si vytvorila svoju prvú web stránku, ktorá beží na tvojom webovom serveri! Nie je to úžasné? + +![Inštalácia funguje!](images/install_worked.png) + +Treba spomenúť, že v príkazovom okne môže naraz bežať len jeden príkaz, a v príkazovom okne, ktoré si otvorila nedávno, teraz beží tvoj web server. Pokým web server beží a čaká na prichádzajúce požiadavky, terminál ti síce dovolí doň písať, ale nedovolí ti vykonávať príkazy. + +> Ako webový server funguje, sme si povedali v kapitole **Ako funguje internet**. + +Ak chceš spúšťať ďalšie príkazy počas toho, ako beží tvoj web server, treba otvoriť nové terminálové okno a aktivovať svoj virtualenv. Inštrukcie, ako otvoriť nové terminálové okno, nájdeš v [Úvode do príkazového riadku](../intro_to_command_line/README.md). Ak chceš webový server zastaviť, prepni sa späť do okna, v ktorom beží, a stlač Ctrl + C súčasne (na Windowse možno budeš musiť stlačiť Ctrl + Break). + +Pripravená na ďalší krok? Prišiel čas vytvoriť nejaký obsah! \ No newline at end of file diff --git a/sk/django_start_project/images/install_worked.png b/sk/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/sk/django_start_project/images/install_worked.png differ diff --git a/sk/django_start_project/images/it_worked2.png b/sk/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/sk/django_start_project/images/it_worked2.png differ diff --git a/sk/django_templates/README.md b/sk/django_templates/README.md new file mode 100644 index 00000000000..e726ad98739 --- /dev/null +++ b/sk/django_templates/README.md @@ -0,0 +1,108 @@ +# Django šablóny + +Prišiel čas zobraziť nejaké údaje! Na to nám Django ponúka užitočné zabudované **šablónové tagy**. + +## Čo sú to šablónové tagy? + +Totiž, v HTML nemôžeš písať pythonový kód, pretože prehliadače mu nerozumejú. Poznajú len HTML. Vieme, že HTML je skôr statické, kým Python je oveľa dynamickejší. + +**Šablónové tagy v Djangu** nám umožňujú previesť pythonové veci do HTML, takže dynamické webové stránky môžeš vytvoriť rýchlejšie. Paráda! + +## Zobrazenie šablóny so zoznamom príspevkov + +V predchádzajúcej kapitole sme našej šablóne dali zoznam príspevkov v premennej `posts`. Teraz ich zobrazíme v HTML. + +Na vypísanie premennej v Django šablónach použijeme dvojitú zloženú zátvorku s názvom premennej vo vnútri, asi takto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Vyskúšaj to vo svojej šablóne `blog/templates/blog/post_list.html`. Otvor ju vo svojom editore a nahraď elementy `
` týmto: `{{ posts }}`. Ulož súbor a obnov stránku, aby si videla výsledky: + +![Obrázok 13.1](images/step1.png) + +Ako vidíš, dostali sme len toto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +To znamená, že to Django chápe ako zoznam objektov. Pamätáš si z kapitoly **Úvod do jazyka Python**, ako môžeme zobraziť zoznamy? Áno, cyklami! V Django šablóne ich urobíš takto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Vyskúšaj si to vo svojej šablóne. + +![Obrázok 13.2](images/step2.png) + +Funguje to! Ale my chceme, aby sa príspevky zobrazili ako tie statické, ktoré sme vytvorili predtým v kapitole **Úvod do HTML**. HTML a šablónové tagy možno kombinovať. Naše `body` bude vyzerať takto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Všetko, čo dáš medzi `{% for %}` a `{% endfor %}` sa bude opakovať pre každý objekt v zozname. Obnov svoju stránku:{% endraw %} + +![Obrázok 13.3](images/step3.png) + +Všimla si si, že sme tentokrát použili trochu iný zápis (`{{ post.title }}` alebo `{{ post.text }}`)? Pristupujeme k údajom v každom z polí definovanom v našom modeli `Post`. Okrem toho, `|linebreaksbr` preposiela texty príspevkov cez filter, ktorý mení zalomenia riadkov na odstavce. + +## Ešte jedna vec + +Bolo by fajn vidieť, či bude tvoja web stránka stále funkčná aj na internete, však? Skúsme ju znova nasadiť na PythonAnywhere. Tu je rekapitulácia postupu… + +* Najskôr pošli svoj kód na GitHub + +{% filename %}command-line{% endfilename %} + + $ git status + [...] + $ git add . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push + + +* Potom sa prihlás do [PythonAnywhere](https://www.pythonanywhere.com/consoles/) a choď do **Bash konzoly** (alebo spusti novú) a zadaj: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd .pythonanywhere.com + $ git pull + [...] + + +(Nezabudni nahradiť `` svojou subdoménou na PythonAnywhere bez špicatých zátvoriek.) + +* A nakoniec prejdi na [záložku Web](https://www.pythonanywhere.com/web_app_setup/) a stlač **Reload** na svojej webovej aplikácii. (Ak sa chceš dostať k ďalším stránkam na PythonAnywhere z konzoly, použi tlačítko v menu v pravom hornom rohu.) Tvoje zmeny by mali byť online na https://subdomena.pythonanywhere.com - over si to vo svojom prehliadači! Pokiaľ sa blogové príspevky na tvojej PythonAnywhere stránke nezhodujú s príspevkami na blogu, ktorý beží na tvojom lokálnom serveri, to je v poriadku. Databázy na tvojom lokálnom počítači a na PythonAnywhere sa nesynchronizujú spolu s tvojimi ostatnými súbormi. + +Gratulujeme! Teraz skús pridať nový príspevok cez Django admina (nezabudni pridať published_date!). Uisti sa, že si v Django admin prostredí na svojej stránke na PythonAnywhere, https://subdomena.pythonanywhere.com/admin. Následne obnov stránku, aby si zistila, či sa tam príspevok objaví. + +Funguje ako hodinky? Tešíme sa! Teraz si na chvíľku oddýchni od počítača, zaslúžiš si prestávku. :) + +![Obrázok 13.4](images/donut.png) \ No newline at end of file diff --git a/sk/django_templates/images/donut.png b/sk/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/sk/django_templates/images/donut.png differ diff --git a/sk/django_templates/images/step1.png b/sk/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/sk/django_templates/images/step1.png differ diff --git a/sk/django_templates/images/step2.png b/sk/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/sk/django_templates/images/step2.png differ diff --git a/sk/django_templates/images/step3.png b/sk/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/sk/django_templates/images/step3.png differ diff --git a/sk/django_urls/README.md b/sk/django_urls/README.md new file mode 100644 index 00000000000..0a662c0a45f --- /dev/null +++ b/sk/django_urls/README.md @@ -0,0 +1,115 @@ +# Django URL + +Chystáme sa vytvoriť našu prvú webovú stránku: domovskú stránka tvojho blogu! Ale ešte predtým sa poďme naučiť niečo o Django URL. + +## Čo je URL? + +URL je webová adresa. URL si môžeš všimnúť zakaždým, keď navštíviš webovú stránku - vidno ju v prehliadači. (Áno! `127.0.0.1:8000` je URL! A `https://djangogirls.org` je tiež URL.) + +![URL](images/url.png) + +Každá stránka na internete potrebuje svoju vlastnú URL. Tak aplikácia vie, čo by mala ukázať užívateľke či užívateľovi, ktorý otvorí URL. V Djangu používame takzvaný `URLconf` (URL konfiguráciu). URLconf je súbor vzorov, ktoré sa Django pokúsi porovnať s prijatou URL, aby tak našiel správny view. + +## Ako fungujú URL v Djangu? + +Otvorme súbor `mysite/urls.py` v editore kódu a pozrime sa, ako vyzerá: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.contrib import admin +from django.urls import path + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Ako vidíš, Django sem už pre nás niečo umiestnilo. + +Riadky medzi trojitými uvodzovkami (`'''` or `"""`) sa nazývajú docstringy - môžeš ich pridať na začiatku súboru, triedy alebo metódy, aby si popísala, čo robí. Python ich nebude spúšťať. + +Adminovská URL, ktorú si navštívila v predchádzajúcej kapitole, je už tu: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Tento riadok znamená, že pre každú URL, ktorá začína na `admin`, Django nájde zodpovedajúci *view*. V tomto prípade pridávame množstvo adminovských URL, takže to nie je všetko natlačené v jednom malom súbore - je to čitateľnejšie a čistejšie. + +## Tvoja prvá Django URL! + +Je čas vytvoriť našu prvú URL! Chceme, aby 'http://127.0.0.1:8000/' bola domovská stránka nášho blogu a zobrazovala zoznam príspevkov. + +Tiež chceme udržiavať súbor `mysite/urls.py` čistý, takže naimportujeme URL z našej aplikácie `blog` do hlavného súboru `mysite/urls.py`. + +Poď na to, pridaj riadok, ktorý naimportuje `blog.urls`. Budeš tiež musieť zmeniť riadok `from django.urls…`, pretože v súbore chceme používať funkciu `include`, takže ju musíme pridať k importom. + +Súbor `mysite/urls.py` by mal teraz vyzerať takto: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.contrib import admin +from django.urls import path, include + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django teraz presmeruje všetko, čo prichádza na 'http://127.0.0.1:8000/', do `blog.urls` a tam bude hľadať ďalšie inštrukcie. + +## blog.urls + +Vytvor nový prázdny súbor s názvom `urls.py` v priečinku `blog` a otvor ho v editore. Okej! Pridaj tieto prvé dva riadky: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Tu iba importujeme Django metódu `path` a všetky naše `viewy` z aplikácie `blog` (zatiaľ žiadne nemáme, ale k tomu sa o chvíľu dostaneme!) + +Potom môžeme pridať náš prvý URL vzor: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Ako vidíš, priradili sme základnej URL `view` pod názvom `post_list`. Takýto URL vzor zaberie na prázdny string a Django URL resolver bude ignorovať meno domény (teda http://127.0.0.1:8000/), ktorá predchádza celej URL ceste. Tento vzor hovorí Djangu, že ak niekto vstúpi na tvoju stránku na adrese "http://127.0.0.1:8000/", má sa oňho postarať `views.post_list`. + +Posledná časť `name='post_list'` je názov URL, ktorý sa použije na identifikáciu správneho viewu. Názov URL môže byť rovnaký ako názov viewu, ale pokojne to môže byť aj niečo úplne iné. Neskôr budeme v projekte používať pomenované URL, takže je dôležité pomenovať všetky URL v aplikácii. Názvy by mali byť unikátne a ľahké na zapamätanie. + +Ak sa teraz pokúsiš navštiviť http://127.0.0.1:8000/, uvidíš správu, že stránka nie je dostupná ("web page not available"). Toto je z toho dôvodu, že server (spomínaš si, ako si spúšťala `runserver`?) už nebeží. Pozri sa na konzolu svojho serveru, aby si zistila prečo. + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + 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' + + +Konzola zobrazuje chybu, ale neboj sa - je to práveže nápomocné: hovorí ti, že neexistuje atribút post_list (**no attribute 'post_list'**). To je názov *viewu*, ktorý sa Django pokúša nájsť a použiť, ale my sme ho ešte nevytvorili. V tejto fáze `/admin/` tiež nefunguje. Žiadne obavy, aj k tomu sa dostaneme. Ak vidíš inú chybovú hlášku, skúš reštartovať web server. To môžeš docieliť tak, že v príkazovom okne, kde beží tvoj web server, stlačíš Ctrl + C (klávesy Control a C) naraz. Na Windowse možno bude treba stlačiť Ctrl + Break. Svoj web server potom znova spustíš príkazom `python manage.py runserver`. + +> Ak chceš vedieť viac o Django URL konfigurácii, pozri sa na oficiálnu dokumentáciu: https://docs.djangoproject.com/en/5.1/topics/http/urls/ \ No newline at end of file diff --git a/sk/django_urls/images/error1.png b/sk/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/sk/django_urls/images/error1.png differ diff --git a/sk/django_urls/images/url.png b/sk/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/sk/django_urls/images/url.png differ diff --git a/sk/django_views/README.md b/sk/django_views/README.md new file mode 100644 index 00000000000..3f8d8799725 --- /dev/null +++ b/sk/django_views/README.md @@ -0,0 +1,44 @@ +# Django viewy - čas tvoriť! + +Je čas zbaviť sa toho bugu, čo sme vytvorili v poslednej kapitole! :) + +*View* je miesto, kam dávame "logiku" našej aplikácie. Bude požadovať dáta z `modelu`, ktorý si už vytvorila, a pošle ich `šablóne`. Šablónu budeme vytvárať v nasledujúcej kapitole. Viewy sú vlastne len metódy Pythonu, ktoré sú trochu zložitejšie, ako tie, ktoré sme písali v kapitole **Úvod do jazyka Python**. + +Viewy sú umiestnené v súbore `views.py`. Naše *viewy* budeme pridávať do súboru `blog/views.py`. + +## blog/views.py + +OK, otvorme tento súbor v editore a pozrime sa, čo je v ňom: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Zatiaľ je tu toho málo. + +Ak si spomínaš, riadky začínajúce `#` sú komentáre - to znamená, že ich Python nespustí. + +Vytvorme *view*, ako nám komentár naznačuje. Pridaj pod komentár nasledovný minimálny view: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Ako vidíš, vytvorili sme funkciu (`def`) nazvanú `post_list`, ktorá použije `request` (žiadosť) a `return` (vráti) metódu `render`, ktorá vyplní (vyrenderuje) našu šablónu `blog/post_list.html`. + +Ulož súbor, prejdi na http://127.0.0.1:8000/ a pozri sa, čo sa udeje. + +Ďalšia chyba! Prečítaj si, o čo ide tentokrát: + +![Chyba](images/error.png) + +Ukazuje, že server aspoň znovu beží, ale nie je to úplne ono, že? Neboj sa, je to len chybová stránka, nič, čoho sa treba báť! Podobne ako chyby v konzole nám tieto chyby napovedajú, čo treba robiť. Dočítaš sa, že *TemplateDoesNotExist* (šablóna neexistuje). Poďme opraviť túto chybu tým, že vytvoríme šablónu v nasledujúcej kapitole! + +> Viac informácií o Django viewoch získaš v oficiálnej dokumentácii: https://docs.djangoproject.com/en/5.1/topics/http/views/ \ No newline at end of file diff --git a/sk/django_views/images/error.png b/sk/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/sk/django_views/images/error.png differ diff --git a/sk/dynamic_data_in_templates/README.md b/sk/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..c169e8376d1 --- /dev/null +++ b/sk/dynamic_data_in_templates/README.md @@ -0,0 +1,84 @@ +# Dynamické dáta v šablónach + +Niekoľko vecí už máme na svojom mieste: model `Post` je definovaný v `models.py`, máme `post_list` v `views.py` a pridanú šablónu. Ale ako vlastne prinútime HTML šablónu, aby zobrazila naše príspevky? Pretože to je to, čo chceme urobiť - vziať nejaký obsah (modely uložené v databáze) a zobraziť ich pekne v našej šablóne, že? + +To je presne to, čo majú robiť *viewy*: spájať modely a šablóny. V našom *viewe* `post_list` potrebujeme vziať modely, ktoré chceme zobraziť, a posunúť ich šablóne. Čiže vo *viewe* sa rozhodne, čo (resp. ktorý model) bude zobrazené v šablóne. + +Dobre, takže ako toto dosiahneme? + +Musíme otvoriť náš `blog/views.py` v editore. Zatiaľ *view* `post_list` vyzerá takto: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Pamätáš si, keď sme sa rozprávali o vložení kódu napísaného v rozdielnych súboroch? Teraz nastal čas, kedy musíme vložiť model, ktorý sme napísali v `models.py`. Pridáme riadok `from .models import Post` takto: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +Bodka za `from` znamená *aktuálny priečinok* alebo *aktuálna aplikácia*. `views.py` aj `models.py` sú v rovnakom priečinku. To znamená, že môžeme použiť `.` a názov súboru (bez `.py`). Potom naimportujeme názov modelu (`Post`). + +Ale čo ďalej? Na to, aby sme mohli zobrať konkrétny príspevok blogu z `Post` modelu, potrebujeme niečo, čo sa volá `QuerySet`. + +## QuerySet + +Už by si mala vedieť, ako fungujú QuerySety. Hovorili sme o tom v kapitole [Django ORM (QuerySety)](../django_orm/README.md). + +Takže teraz chceme zoznam zverejnených príspevkov, ktoré sú zoradené podľa `published_date`, však? To sme už spravili v kapitole QuerySety! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Takže poďme otvoriť súbor `blog/views.py` v našom editore a pridajme tento kus kódu do funkcie `def post_list(request)`, ale nezabudni najprv pridať `from django.utils import timezone`: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Ak chceme zobraziť náš QuerySet v našom zozname blog postov, ešte nám zostáva urobiť dve veci: + +1. Poslať náš QuerySet `posts` šablóne tak, že zmeníme, ako voláme funkciu `render`. To spravíme teraz. +2. Upraviť šablónu, aby nám zobrazila náš QuerySet `posts`. K tomuto sa dostaneme v neskoršej kapitole. + +Vezmi, prosím, na vedomie, že vytvárame *premennú* pre náš QuerySet: `posts`. Ber to ako meno nášho QuerySetu. Odteraz mu môžeme hovoriť týmto menom. + +Vo funkcii `render` už máme jeden parameter `request` (všetko, čo príjmeme od užívateľa či užívateľky cez internet) a ďalší, ktorý hovorí, ktorú šablónu použiť (`'blog/post_list.html'`). Posledný parameter, `{}`, je miestom, kam môžeme pridať veci, ktoré chceme poslať našej šablóne. Potrebujeme im dať mená (zatiaľ sa budeme držať `'posts'`). :) Malo by to vyzerať takto: `{'posts': posts}`. Všimni si, že časť pred `:` je reťazec: potrebuješ ju obaliť do úvodzoviek:`"`. + +Nakoniec by náš súbor `blog/views.py` mal vyzerať takto: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +To je všetko! Čas prejsť na našu šablónu a zobraziť tento QuerySet! + +Pokiaľ si chceš prečítať niečo viac o QuerySetoch v Djangu, mala by si sa pozrieť sem: https://docs.djangoproject.com/en/5.1/ref/models/querysets/ \ No newline at end of file diff --git a/sk/extend_your_application/README.md b/sk/extend_your_application/README.md new file mode 100644 index 00000000000..0f93c6b6255 --- /dev/null +++ b/sk/extend_your_application/README.md @@ -0,0 +1,226 @@ +{% set warning_icon = '' %} + +# Ako rozšíriť aplikáciu + +Už sme dokončili všetky kroky potrebné k tomu, aby sme vytvorili našu webovú stránku: vieme, ako napísať model, URL, view a šablónu. Taktiež vieme, ako našu stránku skrášliť. + +Čas na precvičovanie! + +Prvá vec, ktorú na našom blogu potrebujeme, je podstránka, ktorá zobrazí iba jeden príspevok, že? + +Už máme model `Post`, takže nepotrebujeme do `models.py` pridávať nič nové. + +## Vytvorenie odkazu na detail príspevku + +Začneme tak, že pridáme link do súboru `blog/templates/blog/post_list.html`. Otvor ho vo svojom editore. Zatiaľ by mal vyzerať takto nejako: {% 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 %} +``` + +{% raw %}Chceme, aby link z titulku príspevku smeroval na stránku s detailami príspevku. Zmeňme `

{{ post.title }}

` tak, aby odkazoval na stránku detailu príspevku:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Nadišiel čas vysvetliť si tento záhadný zápis: `{% url 'post_detail' pk=post.pk %}`. Ako možno tušíš, notácia `{% %}` znamená, že používame tagy Django šablóny. Tentoraz použijeme jeden, ktorý pre nás vytvorí URL!{% endraw %} + +Časť `post_detail` znamená, že Django bude očakávať URL v `blog/urls.py`, pre ktorú platí name=post_detail + +A čo `pk=post.pk`? `pk` je skratka pre primárny kľúč (primary key), ktorý jednoznačne určuje každý konkrétny záznam v databáze. Každý Django model má pole, ktoré slúži ako jeho primárny kľúč. Bez ohľadu na to, ako sa toto pole volá, dá sa naň vždy odkazovať menom "pk". Keďže sme neurčili žiadny primárny kľúč v našom `Post` modeli, Django ho vytvorí za nás (štandardne sa volá "id" a je to číslo, ktoré sa zvyšuje o jedna pre každý záznam, t.j. 1, 2, 3) a pridá ho ako pole ku každému z našich príspevkov. K primárnemu kľúču môžeme pristupovať napísaním `post.pk` rovnako, ako pristupujeme k iným poliam (`title`, `author`, atď.) v našom `Post` objekte! + +Teraz keď pôjdeme na http://127.0.0.1:8000/, uvidíme chybu (ako sa dalo očakávať, keďže ešte nemáme URL alebo *view* pre `post_detail`). Bude to vyzerať takto: + +![Chyba NoReverseMatch](images/no_reverse_match2.png) + +## Vytvorenie URL na detail príspevku + +Vytvorme URL v `urls.py` pre náš *view* `post_detail`! + +Chceme, aby sa detaily nášho prvého príspevku zobrazili na tejto **URL**: http://127.0.0.1:8000/post/1/ + +Vytvorme URL v súbore `blog/urls.py` tak, aby odkazovala Django na *view* nazvaný `post_detail`, ktorý zobrazí celý príspevok blogu. Otvor súbor `blog/urls.py` v editore a pridaj doň riadok `path('post//', views.post_detail, name='post_detail'),` tak, aby súbor vyzeral takto: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +Časť `post//` definuje vzor URL – vysvetlime si ho: + +- `post/` znamená, že na začiatku by URL mala obsahovať slovo **post** a **/**. Zatiaľ všetko v poriadku. +- `` – táto časť je trochu záludnejšia. Znamená, že Django očakáva číslo (integer alebo skrátene int) a posunie ho viewu ako premennú pod názvom `pk`. +- `/` – potom potrebujeme znova **/** predtým, ako URL skončí. + +To znamená, že ak zadáš `http://127.0.0.1:8000/post/5/` do svojho prehliadača, Django pochopí, že hľadáš *view* s názvom `post_detail`, a posunie informáciu, že `pk` je `5`, tomuto *viewu*. + +OK, pridali sme nový vzor URL do `blog/urls.py`! Poďme obnoviť stránku: http://127.0.0.1:8000 / Bum! Server znova prestal bežať. Pozri sa do konzoly - ako sa aj dalo očakávať, je tam ďalšia chyba! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + 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' + + +Pamätáš si, čo je ďalší krok? Musíme pridať náš nový view! + +## Pridanie viewu pre detaily príspevku + +Tentokrát má náš *view* extra parameter s názvom `pk`. Náš *view* ho potrebuje zachytiť, však? Takže definujeme našu funkciu ako `def post_detail(request, pk):`. Pozor na to, že tento parameter musí mať presne rovnaký názov, ako sme špecifikovali v `urls` (`pk`). Vynechanie tejto premmenej je nesprávne a bude mať za následok chybu! + +Teraz chceme, aby sme dostali jeden jediný príspevok blogu. Na to môžeme použiť querysety, a to takto: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Ale tento kód má problém. Pokiaľ neexistuje žiaden `Post` s daným `primárnym kľúčom`(`pk`), dostaneme veľmi škaredú chybu! + +![Chyba DoesNotExist](images/does_not_exist2.png) + +To nechceme! Našťastie Django má zabudované niečo, čo si s tým poradí: `get_object_or_404`. V prípade, že neexistuje žiaden `Post` s daným `pk`, zobrazí oveľa krajšiu stránku, `Page Not Found 404`. + +![Stránka nenájdená](images/404_2.png) + +Dobrá správa je, že si môžeš vytvoriť svoju vlastnú `Page not found` stránku a spraviť ju takú peknú, ako len chceš. Ale to nie je momentálne extra dôležité, takže to preskočíme. + +Dobre, čas pridať *view* do nášho súboru `views.py`! + +V `blog/urls.py` sme vytvorili URL pravidlo s názvom `post_detail`, ktoré odkazuje na view s názvom `views.post_detail`. To znamená, že Django očakáva view funkciu s názvom `post_detail` v súbore `blog/views.py`. + +Mali by sme otvoriť `blog/views.py` v editore a pridať nasledovný kód k ostatným `from` riadkom: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +A na konci súboru pridáme náš *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}) +``` + +Áno. Nastal čas obnoviť stránku: http://127.0.0.1:8000/ + +![Post list view](images/post_list2.png) + +Funguje to! Ale čo sa stane, keď klikneš na odkaz v názve príspevku blogu? + +![Chyba TemplateDoesNotExist](images/template_does_not_exist2.png) + +Ale nie! Ďalšia chyba! Ale už vieme, s čím máme dočinenia, že? Potrebujeme pridať šablónu! + +## Vytvorenie šablóny pre detaily príspevku + +Vytvoríme súbor v `blog/templates/blog` s názvom `post_detail.html` a otvoríme ho v editore. + +Vlož doň nasledujúci kód: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} + + {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Opäť raz rozširujeme (extend) `base.html`. V bloku `content` chceme zobraziť published_date príspevku (pokiaľ existuje), titulok a text. Ale mali by sme prebrať pár dôležitých vecí, však? + +{% raw %}`{% if ... %} ... {% endif %}` je tag šablóny, ktorý môžeme použiť, ak chceme niečo skontrolovať. (Pamätáš si `if ... else ...` z kapitoly **Úvod do jazyka Python**?) V tomto prípade chceme skontrolovať, či pole `published_date` nášho príspevku nie je prázdne.{% endraw %} + +Dobre, môžeme obnoviť našu stránku a pozrieť sa, či `TemplateDoesNotExist` zmizlo. + +![Post detail stránka](images/post_detail2.png) + +Jupí! Funguje to! + +# Je čas nasadiť! + +Bolo by dobré vedieť, či tvoja stránka stále funguje na PythonAnywhere, však? Pokúsme sa ju znova nasadiť. + +{% filename %}command-line{% endfilename %} + + $ git status + $ git add . + $ git status + $ git commit -m "Pridany view a sablona pre detaily prispevku a taktiez CSS pre stranku" + $ git push + + +Potom v [Bash konzole PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Nezabudni nahradiť `` svojou subdoménou na PythonAnywhere bez špicatých zátvoriek.) + +## Aktualizovanie statických súborov na serveri + +Servery ako PythonAnywhere sa ku "statickým súborom" (ako CSS súbory) správajú inak ako ku Python súborom, lebo ich môžu optimalizovať, aby ich bolo možné rýchlejšie načítať. Preto keď meníme naše CSS súbory, musíme spustiť ďalší príkaz na serveri, aby ich aktualizoval. Názov tohto príkazu je `collectstatic`. + +Začni spustením virtualenvu, ak už nie je aktivovaný (PythonAnywhere používa príkaz `workon`, je to presne ako príkaz `source mojenv/bin/activate`, ktorý si použila na vlastnom počítači): + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ workon .pythonanywhere.com + (ola.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +Tento `manage.py collectstatic` príkaz sa trochu podobá na `manage.py migrate`. Urobíme zmeny v našom kóde a potom povieme Djangu, aby aplikovalo (*apply*) dané zmeny buď na statické súbory na serveri, alebo na databázu. + +Každopádne, teraz môžeme prejsť na stránku ["Web"](https://www.pythonanywhere.com/web_app_setup/) (cez menu v pravom hornom rohu konzoly), stlačiť **Reload** a pozrieť sa na náš výsledok na adrese https://subdomena.pythonanywhere.com. + +A to by malo byť všetko! Gratulujeme! :) \ No newline at end of file diff --git a/sk/extend_your_application/images/404_2.png b/sk/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/sk/extend_your_application/images/404_2.png differ diff --git a/sk/extend_your_application/images/attribute_error2.png b/sk/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/sk/extend_your_application/images/attribute_error2.png differ diff --git a/sk/extend_your_application/images/does_not_exist2.png b/sk/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/sk/extend_your_application/images/does_not_exist2.png differ diff --git a/sk/extend_your_application/images/no_reverse_match2.png b/sk/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/sk/extend_your_application/images/no_reverse_match2.png differ diff --git a/sk/extend_your_application/images/post_detail2.png b/sk/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/sk/extend_your_application/images/post_detail2.png differ diff --git a/sk/extend_your_application/images/post_list2.png b/sk/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/sk/extend_your_application/images/post_list2.png differ diff --git a/sk/extend_your_application/images/template_does_not_exist2.png b/sk/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/sk/extend_your_application/images/template_does_not_exist2.png differ diff --git a/sk/how_the_internet_works/README.md b/sk/how_the_internet_works/README.md new file mode 100644 index 00000000000..c879f62ccb4 --- /dev/null +++ b/sk/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# Ako funguje internet + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [How the Internet Works](https://www.youtube.com/watch?v=oM9yAA09wdc). +> +> Táto kapitola je inšpirovaná prednáškou "Ako funguje Internet" od Jessicy McKellar (http://web.mit.edu/jesstess/www/). + +Stavíme sa, že internet používaš každý deň. Ale vieš, čo sa udeje, keď napíšeš adresu ako https://djangogirls.org do prehliadača a stlačíš `enter`? + +Prvá vec, ktorú musíš vedieť, je, že webová stránka je len kôpka súborov uložených na pevnom disku, presne ako tvoje filmy, hudba či obrázky. Ale je tu jedna vec, ktorá je špecifická pre webové stránky: obsahujú počítačový kód nazývaný HTML. + +Pokiaľ nemáš skúsenosti s programovaním, môže byť pochopenie HTML zo začiatku zložité, ale tvoj webový prehliadač (ako Chrome, Safari, Firefox atď.) HTML miluje. Webové prehliadače sú navrhnuté tak, aby rozumeli tomuto kódu, nasledovali jeho inštrukcie a ukazovali súbory, ktoré tvoria tvoju webovú stránku, presne tak, ako chceš. + +Ako každý iný súbor, aj HTML súbor musí byť uložený niekde na pevnom disku. V prípade internetu používame špeciálne výkonné počítače nazývané *servery*. Nemajú obrazovku, myš alebo klávesnicu, pretože ich hlavnou úlohou je ukladať dáta a poskytovať ich. Preto ich voláme *servery* -- pretože *poskytujú* (serve) tvoje dáta. + +OK, ale ty chceš vedieť, ako vyzerá internet, že? + +Nakreslili sme ti obrázok! Vyzerá takto: + +![Obrázok 1.1](images/internet_1.png) + +Vyzerá to ako neporiadok, že? V skutočnosti je to sieť prepojených strojov (hore spomenutých *serverov*). Stoviek a tisícok strojov! Mnoho, mnoho kilometrov káblov po celom svete! Môžeš navštíviť stránku Submarine Cable Map (http://submarinecablemap.com), ak chceš vidieť, aká komplikovaná sieť to je. Tu je obrázok zo stránky: + +![Obrázok 1.2](images/internet_3.png) + +Nie je to fascinujúce? Ale zjavne nie je možné mať kábel medzi každým strojom pripojeným k internetu. Takže na to, aby sme boli schopní kontaktovať nejaký stroj (napríklad ten, na ktorom je uložená stránka https://djangogirls.org), musíme poslať žiadosť cez mnoho, mnoho rozdielnych strojov. + +Vyzerá to takto: + +![Obrázok 1.3](images/internet_2.png) + +Predstav si, že keď napíšeš https://djangogirls.org, pošleš list, v ktorom stojí: "Drahé Django Girls, chcem vidieť stránku djangogirls.org. Prosím, pošlite mi ju!" + +Tvoj list ide na najbližšiu poštu. Potom ide na ďalšiu, ktorá je o čosi bližšie adresátovi či adresátke, potom na ďalšiu a ďalšiu, až kým nedorazí do svojej destinácie. Jediná unikátna vec je, že keď pošleš mnoho listov (*dátových paketov*) na rovnaké miesto, môžu ísť cez úplne odlišné pošty (*routery*). Záleží to od toho, ako sú rozdistribuované na každej pošte. + +![Obrázok 1.4](images/internet_4.png) + +Takto to funguje - posielaš správy a očakávaš nejaké odpovede. Akurát namiesto papiera a pera používaš bajty dát, ale princíp je rovnaký! + +Namiesto adries s názvom ulice, mesta, PSČ a krajinou používame IP adresy. Tvoj počítač najprv požiada DNS (Domain Name System), aby preložil djangogirls.org na IP adresu. Funguje to trocha ako staré dobré telefónne zoznamy, kde si môžeš vyhľadať meno osoby, ktorú chceš kontaktovať, a nájsť jej telefón a adresu. + +Keď pošleš list, musí mať určité náležitosti, aby ho bolo možné správne doručiť: adresu, známku atď. Taktiež používaš jazyk, ktorému adresát rozumie, že? Rovnako to funguje aj s *dátovými paketmi*, ktoré posielaš, aby sa ti zobrazila stránka. Používame protokol s názvom HTTP (Hypertext Transfer Protocol). + +Takže v podstate keď máš webovú stránku, musíš mať *server* (stroj), na ktorom bude žiť. Keď *server* obdrží prichádzajúcu *požiadavku* alebo request (v liste), pošle naspäť tvoju webovú stránku (v ďalšom liste). + +Keďže toto je Django tutoriál, možno sa pýtaš, kde do tohto procesu vstupuje Django. Keď pošleš odpoveď, nechceš vždy poslať každému to isté. Je oveľa lepšie, ak sú tvoje listy osobné, presne pre človeka, ktorý ti práve napísal, že? Django ti pomáha vytváriť tieto osobné, zaujímavé listy. :) + +Dosť bolo rečí, je čas tvoriť! \ No newline at end of file diff --git a/sk/how_the_internet_works/images/internet_1.png b/sk/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/sk/how_the_internet_works/images/internet_1.png differ diff --git a/sk/how_the_internet_works/images/internet_2.png b/sk/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/sk/how_the_internet_works/images/internet_2.png differ diff --git a/sk/how_the_internet_works/images/internet_3.png b/sk/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/sk/how_the_internet_works/images/internet_3.png differ diff --git a/sk/how_the_internet_works/images/internet_4.png b/sk/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/sk/how_the_internet_works/images/internet_4.png differ diff --git a/sk/html/README.md b/sk/html/README.md new file mode 100644 index 00000000000..74654b69e51 --- /dev/null +++ b/sk/html/README.md @@ -0,0 +1,227 @@ +# Úvod do HTML + +Možno sa pýtaš, čo je to šablóna? + +Šablóna (template) je súbor, ktorý môžeme viackrát použiť, aby sme ukazovali rôzne dáta v rovnakom formáte. Šablónu môžeš použiť napríklad ako pomôcku pri písaní listu, pretože aj napriek tomu, že každý list môže obsahovať rozdielnu správu a byť adresovaný inej osobe, bude mať rovnaký formát. + +Formát Django šablóny je popísaný v jazyku nazývanom HTML (to je to HTML, ktoré sme spomenuli v prvej kapitole **Ako funguje internet**). + +## Čo je HTML? + +HTML je kód, ktorý je interpretovaný tvojím webovým prehliadačom - ako napríklad Chrome, Firefox alebo Safari - aby tak zobrazil užívateľkám a užívateľom webové stránky. + +HTML znamená "HyperText Markup Language". **HyperText** znamená, že sa jedná o typ textu, ktorý podporuje hypertextové odkazy medzi stránkami. **Markup** znamená, že sme vzali dokument a označili ho kódom, aby sme niečomu povedali (v tomto prípade prehliadaču), ako interpretovať stránku. HTML kód je budovaný pomocou **tagov**, ktoré začínajú znakom `<` a končia znakom `>`. Tieto tagy reprezentujú značkovacie (markup) **elementy**. + +## Tvoja prvá šablóna! + +Vytvorenie šablóny znamená, že najprv musíme vytvoriť šablónový súbor. Všetko je súbor, však? To si si asi už všimla. + +Šablóny sú uložené v zložke `blog/templates/blog`. Takže najprv vytvor v priečinku blog priečinok s názvom `templates`. Potom vytvor ďalší priečinok s názvom `blog` v priečinku templates: + + blog + └───templates + └───blog + + +(Možno sa pýtaš, prečo potrebujeme dve zložky s menom `blog` - ako neskôr zistíš, je to len užitočná konvencia, ktorá ti uľahčí život, keď sa veci začnú komplikovať.) + +A teraz vytvor súbor `post_list.html` (zatiaľ ho ponechaj prázdny) v priečinku `blog/templates/blog`. + +Pozri sa, ako momentálne vyzerá tvoja stránka: http://127.0.0.1:8000/ + +> Pokiaľ stále vidíš chybu `TemplateDoesNotExist`, skús reštartovať svoj server. Choď do príkazového riadku, zastav server stlačením Ctrl+C (stlač naraz tlačidlá Control a C) a spusti ho znova pomocou príkazu `python manage.py runserver`. + +![Obrázok 11.1](images/step1.png) + +Chyba je preč! Gratulujeme :) Avšak tvoja webstránka zatiaľ neukazuje nič, len prázdnu stránku, pretože tvoja šablóna je taktiež prázdna. To musíme napraviť. + +Otvor svoj nový súbor v editore a pridaj doň nasledovné: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + +

Hi there!

+

It works!

+ + +``` + +Takže ako momentálne vyzerá tvoja stránka? To môžeš zistiť kliknutím na: http://127.0.0.1:8000/ + +![Obrázok 11.2](images/step3.png) + +Funguje to. Dobrá práca! :) + +* Riadok `` nie je HTML tag. Len definuje typ dokumentu. V tomto prípade hovorí prehliadaču, že typ nášho dokumentu je [HTML5](https://html.spec.whatwg.org/#the-doctype). Každý HTML5 súbor začína takto. +* Najzákladnejší tag, ``, je vždy na začiatku každej webovej stránky, a `` je vždy na jej konci. Ako môžeš vidieť, celý obsah stránky sa nachádza medzi začínajúcim tagom `` a uzatvárajúcim tagom `` +* `

` je tag pre element odstavca; `

` každý odstavec uzatvára + +## Head a body + +Každá HTML stránka je taktiež rozdelená do dvoch elementov: **head** a **body**. + +* **head** je element, ktorý obsahuje informácie o dokumente, ktoré nie sú zobrazené na obrazovke. + +* **body** je element, ktorý obsahuje všetko ostatné, zobrazené ako časť webovej stránky. + +`` používame, aby sme povedali prehliadaču o konfigurácii stránky, a ``, aby sme mu povedali, čo na stránke je. + +Napríklad môžeš dať stránke titulok pomocou elementu title v elemente `` takto: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Ulož súbor a znova načítaj svoju stránku. + +![Obrázok 11.3](images/step4.png) + +Všimla si si, ako prehliadač porozumel, že "Ola's blog" je titulok tvojej stránky? Prečítal si slová `Ola's blog` a vložil ich do záhlavia záložky v tvojom prehliadači (tiež ich bude používať, keby si si stránku napríklad uložila, atď.). + +Pravdepodobne si taktiež všimneš, že každý začínajúci tag má svoj *uzatvárajúci tag* obsahujúci `/`, a že elementy sú *vnorené* (tj. nemôžeš daný tag zatvoriť, kým nie sú taktiež zatvorené všetky tagy, ktoré sú v jeho vnútri). + +Je to, ako keby si vkladala veci do krabice. Máš jednu veľkú krabicu, ``; vo vnútri je ``, a tá obsahuje menšie krabice: `

`. + +Musíš dodržiavať pravidlá *uzatvárania* tagov a *vnorenia* elementov - pokiaľ ich nebudeš dodržiavať, prehliadač nemusí tagy správne interpretovať a tvoja stránka sa zobrazí nesprávne. + +## Upravenie tvojej šablóny + +Môžeš sa trocha pohrať s tým, že budeš upravovať svoju šablónu! Tu je zopár užitočných tagov: + +* `

Hlavný nadpis

` - pre tvoj najdôležitejší nadpis +* `

Podnadpis

` pre nadpis na nižšej úrovni +* `

Pod-podnadpis

`... a tak ďalej až do `
` +* `

Odsek textu

` +* `text` zvýrazňuje tvoj text +* `text` zvýrazňuje tvoj text o čosi viac +* `
` vkladá nový riadok (do br nemôžeš nič vložiť a nemá ani uzatvárací tag) +* `link` vytvára odkaz +* `
  • prvá položka
  • druhá položka
` vytvára zoznam, ako je tento! +* `
` definuje sekciu stránky +* `` definuje skupinu navigačných odkazov +* `
` (článok) definuje nezávislý obsah, ktorý má zmysel sám osebe +* `
` definuje sekciu v dokumente +* `
` definuje hlavičku dokumentu alebo sekcie +* `
` definuje hlavný obsah dokumentu +* `` definuje obsah vedľa iného obsahu (napr. bočná lišta) +* `
` definuje pätičku dokumentu alebo sekcie +* `` definuje konkrétny čas (alebo dátum a čas) + +Tu je príklad úplnej šablóny, skopíruj ho do súboru `blog/templates/blog/post_list.html`: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + + Django Girls blog + + +
+

Django Girls Blog

+
+ +
+ +

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.

+
+ +
+ +

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.

+
+ + +``` + +Týmto sme vytvorili jednu hlavičkovú `header` sekciu a dve článkové `article` sekcie. + +* Prvý `header` element obsahuje hlavný nadpis nášho blogu - je to nadpis a odkaz +* Nasledujúce `article` elementy obsahujú naše blogové príspevky, každý s dátumom publikovania v `time` elemente, s nadpisom príspevku v `h2` elemente, na ktorý sa dá kliknúť, a s odstavcovým elementom `p`, ktorý predstavuje text nášho príspevku. + +Výsledok je nasledovný: + +![Obrázok 11.4](images/step6.png) + +Jupí! Ale zatiaľ naša šablóna zobrazila len presne **tie isté dáta** - kým pred chvíľou sme hovorili, že nám šablóny dovoľujú zobrazovať **rozdielne** dáta v **rovnakom formáte**. + +To, čo v skutočnosti chceme docieliť, je zobraziť reálne príspevky pridané v Django admin rozhraní - a to teraz aj spravíme. + +## Ešte jedna vec: nasaďme to! + +Bolo by skvelé, ak by sme všetky tieto veci mohli vidieť naživo na internete, že? Spravme ďalšie PythonAnywhere nasadenie: + +### Commitni a pošli svoj kód na Github + +Najprv sa pozrime, ktoré súbory sa zmenili od posledného nasadenia (tieto príkazy spusti lokálne, nie na PythonAnywhere): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Uisti sa, že si v priečinku `djangogirls`, a následne povedz `gitu`, nech zahrnie všetky zmeny v priečinku: + +{% filename %}command-line{% endfilename %} + + $ git add . + + +Predtým, ako nahráme všetky súbory, skontrolujme, čo bude `git` nahrávať (všetky súbory, ktoré `git` nahrá, by teraz mali byť zelené): + +{% filename %}command-line{% endfilename %} + + $ git status + + +Už sme skoro tam, teraz nastal čas mu povedať, aby uložil tieto zmeny v jeho histórii. Dáme mu "commit správu" (commit message), kde popíšeme, čo sme zmenili. V tomto štádiu môžeš napísať čokoľvek, čo chceš, ale je nápomocné napísať čosi, čo je popisné natoľko, že si budeš v budúcnosti pamätať, čo si spravila. + +{% filename %}command-line{% endfilename %} + + $ git commit -m "Zmeny v HTML pre stranku." + + +> **Poznámka** Uisti sa, že si okolo commit správy použila dvojité úvodzovky. + +Keď to máme hotové, nahráme (push) naše zmeny na GitHub: + +{% filename %}command-line{% endfilename %} + + $ git push + + +### Stiahni svoj kód na PythonAnywhere a obnov svoju webovú aplikáciu + +* Otvor [konzolovú stránku PythonAnywhere](https://www.pythonanywhere.com/consoles/) a prejdi do svojej **Bash konzoly** (alebo naštartuj novú). Potom zadaj: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +Nezabudni nahradiť `` svojou subdoménou na PythonAnywhere bez špicatých zátvoriek. Názov tvojej subdomény je zväčša tvoje užívateľské meno na PythonAnywhere, ale sú prípady, kedy môže byť trochu iný (napríklad, keď tvoje užívateľské meno obsahuje veľké písmená). Čiže ak ti tento príkaz nefunguje, skús spustiť `ls` (list files, alebo vypíš súbory), aby si zistila, ako sa tvoja subdoména/podadresár volá, a potom sa do tohto adresára presuň pomocou `cd`. + +Sleduj, ako sa tvoj kód sťahuje. Ak si chceš overiť, že už prišiel, prejdi na stránku **"Files"** a pozri sa na svoj kód na PythonAnywhere (po ostatné PythonAnywhere stránky sa vieš potom dostať pomocou tlačidla v menu na stránke s konzolou). + +* A nakoniec prejdi na [záložku Web](https://www.pythonanywhere.com/web_app_setup/) a stlač **Reload** na svojej webovej aplikácii. + +Tvoje zmeny by mali byť online! Obnov svoju stránku v prehliadači. Zmeny by mali byť viditeľné. :) \ No newline at end of file diff --git a/sk/html/images/step1.png b/sk/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/sk/html/images/step1.png differ diff --git a/sk/html/images/step3.png b/sk/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/sk/html/images/step3.png differ diff --git a/sk/html/images/step4.png b/sk/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/sk/html/images/step4.png differ diff --git a/sk/html/images/step6.png b/sk/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/sk/html/images/step6.png differ diff --git a/sk/images/application.png b/sk/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/sk/images/application.png differ diff --git a/sk/installation/README.md b/sk/installation/README.md new file mode 100644 index 00000000000..cec8354f253 --- /dev/null +++ b/sk/installation/README.md @@ -0,0 +1,68 @@ +# Pokiaľ robíš tutoriál doma + +Pokiaľ robíš tento tutoriál doma, a nie na jednej z [Django Girls akcií](https://djangogirls.org/events/), môžeš úplne preskočiť túto kapitolu a pokračovať rovno na kapitolu [Ako funguje internet](../how_the_internet_works/README.md). + +Je to preto, lebo v tutoriáli sa zaoberáme inštaláciou vecí, ktoré sú potrebné - toto je len dodatočná stránka, ktorá zhromažďuje všetky pokyny na inštaláciu na jednom mieste (čo je užitočné pre niektoré formáty workshopov). Ak chceš, môžeš si nainštalovať všetko, čo spomíname na tejto stránke, rovno teraz. Ale pokiaľ sa chceš začať učiť predtým, ako si nainštaluješ množstvo vecí na svoj počítač, preskoč túto kapitolu a my ti vysvetlíme, ako veci nainštalovať, neskôr, priamo keď ich budeš potrebovať. + +Veľa šťastia! + +# Ak sa zúčastníš workshopu + +Ak sa chystáš zúčastniť [Django Girls eventu](https://djangogirls.org/events/): + +* Súčasťou tvojho workshopu môže byť "inštalačná párty" pred samotným workshopom. Ak si na takejto inštalačnej párty, táto stránka je pre teba! Tieto inštrukcie ti pomôžu nainštalovať si všetko potrebné pre workshop. Ak treba, tak s pomocou mentoriek alebo mentorov. Potom na samotnom workshope budeš môcť preskočiť inštalačné inštrukcie, ktoré sa objavia v hlavnom tutoriáli, keď sa k nim dostaneš. +* Organizátorky a organizátori tvojho workshopu ťa možno poprosili, aby si si skúsila všetko nainštalovať na svojom počítači doma predtým, než začne workshop. Ak to je tvoj prípad, táto stránka je pre teba! Nasleduj tieto inštrukcie, ako sa ti bude dať. Pokiaľ sa ti nepodarí niečo konkrétne nainštalovať, môžeš sa spýtať svojej mentorky či mentora neskôr na samotnom workshope, keď sa dostaneš po časť tutoriálu s pokynmi k inštalácii. +* Ak súčasťou tvojho workshopu nie je inštalačná párty (alebo si sa nemohla zúčastniť) a pokiaľ ťa organizátorky a organizátori nepoprosili, aby si si všetko nainštalovala pred príchodom, preskoč túto stránku a prejdi rovno na kapitolu [Ako funguje internet](../how_the_internet_works/README.md). Ako budeš postupovať tutoriálom, budeš si inštalovať všetko potrebné. + +# Inštalácia + +V tomto tutoriáli si vytvoríš blog. Aby sa ti to podarilo, počas toho, ako budeš postupovať tutoriálom, budeš dostávať inštrukcie, ako nainštalovať rôzny softvér na svojom počítači a ako si povytváravať zopár online účtov, keď bude treba. Táto stránka združuje všetky pokyny k inštalácii a vytváraniu účtov na jednom mieste (čo je užitočné pre niektoré workshopové formáty). + + {% include "/chromebook_setup/instructions.md" %} + + + +# Stručný úvod k príkazovému riadku {#command-line} + +Viacero krokov nižšie spomína "konzolu", "terminál", "príkazové okno", "príkazový riadok" (alebo "command line"). Všetky tieto termíny znamenajú to isté: okno na tvojom počítači, do ktorého môžeš zadávať príkazy. Keď sa dostaneš k hlavnému tutoriálu, dozvieš sa o príkazovom riadku viac. V tejto chvíli je pre teba hlavné vedieť, ako otvoriť príkazové okno a ako vyzerá: {% include "/intro_to_command_line/open_instructions.md" %} + +# Inštalácia Pythonu {#python} + +{% include "/python_installation/instructions.md" %} + +# Inštalácia editoru kódu {#code-editor} + +{% include "/code_editor/instructions.md" %} + +# Vytvorenie virtualenvu a inštalácia Djanga {#virtualenv} + +{% include "/django_installation/instructions.md" %} + +# Inštalácia Gitu {#git} + +{% include "/deploy/install_git.md" %} + +# Vytvorenie GitHub účtu {#github-account} + +Choď na [GitHub.com](https://www.github.com) a zaregistruj si nový bezplatný používateľský účet. Nezabudni si zapamätať heslo (ak používaš správcu hesiel, pridaj si ho doň). + +# Vytvorenie PythonAnywhere účtu {#pythonanywhere-account} + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Začni si čítať + +Gratulujeme, si pripravená začať! Pokiaľ máš stále zvyšný čas pred začiatkom workshopu, bolo by užitočné prečítať si pár začiatočníckych kapitol: + +* [Ako funguje internet](../how_the_internet_works/README.md) + +* [Úvod do príkazového riadku](../intro_to_command_line/README.md) + +* [Úvod do jazyka Python](../python_introduction/README.md) + +* [Čo je Django?](../django/README.md) + +# Uži si workshop! + +Keď začne workshop, budeš môcť prejsť priamo na [Tvoj prvý Django projekt!](../django_start_project/README.md), lebo si už absolvovala látku z predchádzajúcich kapitol. \ No newline at end of file diff --git a/sk/intro_to_command_line/README.md b/sk/intro_to_command_line/README.md new file mode 100644 index 00000000000..c18aa27fd67 --- /dev/null +++ b/sk/intro_to_command_line/README.md @@ -0,0 +1,441 @@ +# Úvod do rozhrania príkazového riadku + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná v [How the Internet Works](https://www.youtube.com/watch?v=jvZLWhkzX-8) videu. + +Je to vzrušujúce, však?! Už o pár minút napíšeš svoj prvý riadok kódu! :) + +**Dovoľ nám predstaviť ti tvojho nového kamaráta: príkazový riadok!** + +Nasledujúce kroky ti ukážu, ako používať tú čiernu obrzovku, čo používajú všetci hackeri a hackerky. Zo začiatku môže vyzerať trochu desivo, ale je to naozaj len okno, čo čaká na tvoje príkazy. + +> **Poznámka** Prosím, maj na pamäti, že v tomto texte používame výrazy "adresár", "zložka" a "priečinok" zameniteľne - ich význam je rovnaký. + +## Čo je to príkazový riadok? + +Okno, ktoré sa zvyčajne nazýva **príkazový riadok** (command line) alebo **rozhranie príkazového riadku** (command line interface) je textová aplikácia na prehliadanie, spracúvanie a manipuláciu so súbormi v tvojom počítači. V podstate je to ako Prieskumník vo Windowse alebo Finder na Macu, akurát bez grafického rozhrania. Ďalšie názvy pre príkazový riadok môžu byť: *cmd*, *CLI*, *prompt*, *konzola* alebo *terminál*. + +## Otvorenie rozhranie príkazového riadku + +Aby sme mohli trochu experimentovať, musíme najskôr rozhranie príkazového riadku otvoriť. + +{% include "/intro_to_command_line/open_instructions.md" %} + +## Príkazový riadok + +Teraz by si už mala vidieť biele alebo čierne okno, ktoré čaká na tvoje príkazy. + + + +Ak si na Macu alebo Linuxe, zrejme uvidíš `$`. Takto: + +{% filename %}command-line{% endfilename %} + + $ + + + + + + +Na Windowse pravdepodobne vidíš `>`. Takto: + +{% filename %}command-line{% endfilename %} + + > + + +Pozri na sekciu o Linuxe priamo nad touto - niečo také uvidíš neskôr, keď sa v tutoriáli dostaneme k časti o PythonAnywhere. + + + +Pred každým príkazom budeš vidieť `$` alebo `>` a jednu medzeru, ale tie nepíš. Tvoj počítač to spraví za teba. :) + +> Len malá poznámka: možno máš pred znakom promptu niečo ako `C:\Users\ola>` alebo `Olas-MacBook-Air:~ ola$`. To je úplne v poriadku. + +Časť od začiatku riadku po `$` alebo `>` (vrátane) sa nazýva *prompt*. Prompt ťa nabáda (angl. prompt), aby si niečo napísala. + +Keď od teba budeme v tomto tutoriáli chcieť, aby si napísala príkaz, budeme v príkladoch písať aj `$` alebo `>`, alebo prípadne aj viac vecí na začiatku riadku. Túto celú ľavú časť ignoruj a napíš len príkaz, ktorý sa začína po prompte. + +## Tvoj prvý príkaz (Hurá!) + +Začnime tým, že zadáme nasledovný príkaz: + + + +{% filename %}command-line{% endfilename %} + + $ whoami + + + + + + +{% filename %}command-line{% endfilename %} + + > whoami + + + + +A potom stlač `enter`. Toto je výsledok: + +{% filename %}command-line{% endfilename %} + + $ whoami + olasitarska + + +Ako vidíš, počítač práve vypísal tvoje užívateľské meno. Milé, nie? :) + +> Skús každý príkaz napísať, nielen skopírovať. Viac si tak zapamätáš! + +## Základy + +Každý operačný systém má trochu iné príkazy pre príkazový riadok, takže postupuj podľa inštrukcií pre tvoj operačný systém. Tak čo, vyskúšame to? + +### Aktuálny priečinok + +Bolo by fajn vedieť, kde sa nachádzame, však? Zistime to. Napíš tento príkaz a stlač `enter`: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska + + +> Poznámka: 'pwd' je skratka pre 'print working directory' (vypíš pracovný adresár). + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska + + +> Poznámka: 'cd' znamená 'change directory', teda zmeň priečinok. V PowerShelli môžeš použiť pwd rovnako ako na Linuxe alebo macOS. + + + +Na svojom stroji pravdepodobne uvidíš niečo takéto. Keď otvoríš príkazový riadok, zvyčajne začneš vo svojom domovskom priečinku. + +* * * + +### Ako sa dozvedieť viac o príkaze + +Mnoho príkazov, ktoré píšeš do konzoly, má zabudovanú nápovedu (help), ktorú si môžeš nechať zobraziť! Napríklad, ak sa chceš dozvedieť viac o príkaze z predošlej časti: + + + +macOS a Linux majú príkaz `man`, ktorý ti zobrazí nápovedu k iným príkazom. Skús `man pwd` a pozri, čo ti vypíše, alebo napíš `man` v kombinácii s inými príkazmi, aby sa ti zobrazila ich nápoveda. Výstup príkazu `man` má zvyčajne niekoľko strán. Na listovanie použi medzerník a stlačením klávesy `q` nápovedu ukončíš. + + + + + +Keď pripojíš `/?` na koniec príkazu, vo väčšine prípadov tiež dostaneš nápovedu. Je možné, že budeš musieť trochu poscrollovať vo svojom príkazovom okne, aby si si ju mohla celú prečítať. Skús `cd /?`. + + + +### Zoznam súborov a priečinkov + +Bolo by zaujímavé zistiť, čo taký priečinok obsahuje. Pozrime sa na to: + + + +{% filename %}command-line{% endfilename %} + + $ ls + Applications + Desktop + Downloads + Music + ... + + + + + + +{% 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 + ... + + +> Poznámka: V PowerShelli môžeš použiť aj 'ls' rovnako ako na Linuxe alebo macOS. + +* * * + +### Zmena aktuálneho priečinku + +Teraz prejdime do priečinku, kde je naša plocha: + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + $ cd Desktop + + +Tu je dobré poznamenať, že názov "Desktop" môže byť preložený do jazyka, ktorý máš nastavený vo svojom linuxovom konte. V takom prípade budeš musieť zmeniť `Desktop` na toto preložené meno, napríklad `Schreibtisch` v nemčine. + + + + + +{% filename %}command-line{% endfilename %} + + > cd Desktop + + + + +Skontroluj, či sa priečinok skutočne zmenil: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +A je to! + +> Profi tip: ak napíšeš `cd D` a potom stlačíš klávesu `Tab`, príkazový riadok automaticky doplní zvyšok názvu, takže priečinky môžeš prechádzať rýchlejšie. Ak na "D" začína viac ako jeden priečinok, stlač `Tab` dvakrát a dostaneš zoznam možností. + +* * * + +### Vytvorenie priečinku + +Čo takto vytvoriť pokusný adresár na ploche? Urobíš to takto: + + + +{% filename %}command-line{% endfilename %} + + $ mkdir pokus + + + + + + +{% filename %}command-line{% endfilename %} + + > mkdir pokus + + + + +Tento príkazík vytvorí adresár s názvom `pokus` na tvojej ploche. Či je priečinok naozaj tam, môžeš zistiť jednoducho pohľadom na plochu alebo spustením príkazu `ls` alebo `dir`! Skús si to. :) + +> Profi tip: ak sa ti nechce vypisovať stále dookola tie isté príkazy, skús sa stlačením `šípky hore` a `šípky dole` vrátiť k nedávno použitým príkazom. + +* * * + +### Cvičenie! + +Malá výzva pre teba: v čerstvo vytvorenom adresári `pokus` vytvor adresár s názvom `test`. (Použi príkazy `cd` a `mkdir`.) + +#### Riešenie: + + + +{% filename %}command-line{% endfilename %} + + $ cd pokus + $ mkdir test + $ ls + test + + + + + + +{% filename %}command-line{% endfilename %} + + > cd pokus + > mkdir test + > dir + 05/08/2020 07:28 PM test + + + + +Gratulujeme! :) + +* * * + +### Upratovanie + +Nechceme po sebe nechať neporiadok, tak poďme odstrániť všetko, čo sme doteraz vytvorili. + +Najskôr sa musíme vrátiť späť na plochu: + + + +{% filename %}command-line{% endfilename %} + + $ cd .. + + + + + + +{% filename %}command-line{% endfilename %} + + > cd .. + + + + +Pomocou `..` s príkazom `cd` zmeníš svoj aktuálny priečinok na rodičovský priečinok (čiže priečinok, ktorý obsahuje tvoj súčasný priečinok). + +Skontroluj, kde sa nachádzaš: + + + +{% filename %}command-line{% endfilename %} + + $ pwd + /Users/olasitarska/Desktop + + + + + + +{% filename %}command-line{% endfilename %} + + > cd + C:\Users\olasitarska\Desktop + + + + +Je načase zmazať priečinok `pokus`: + +> **Pozor**: mazanie súborov pomocou `del`, `rmdir` alebo `rm` je neodvolateľné, teda *odstránené súbory budú odstránené navždy*! Takže s týmito príkazmi buď opatrná. + + + +{% filename %}command-line{% endfilename %} + + $ rm -r pokus + + + + + + +{% filename %}command-line{% endfilename %} + + > rmdir /S pokus + pokus, Are you sure ? Y + + + + +Hotovo! Uistime sa, či je naozaj vymazaný: + + + +{% filename %}command-line{% endfilename %} + + $ ls + + + + + + +{% filename %}command-line{% endfilename %} + + > dir + + + + +### Ukončenie + +Nateraz je to všetko! Môžeš pokojne zatvoriť príkazový riadok. Urobme to hackersky, čo povieš? :) + + + +{% filename %}command-line{% endfilename %} + + $ exit + + + + + + +{% filename %}command-line{% endfilename %} + + > exit + + + + +Super, čo? :) + +## Zhrnutie + +Tu je prehľad niektorých užitočných príkazov: + +| Príkaz (Windows) | Príkaz (Mac OS / Linux) | Popis | Príklad | +| ----------------- | ----------------------- | -------------------------------- | ----------------------------------------------------- | +| exit | exit | zatvorí okno | **exit** | +| cd | cd | zmení priečinok | **cd test** | +| cd | pwd | ukáže aktuálny priečinok | **cd** (Windows) alebo **pwd** (Mac OS / Linux) | +| dir | ls | vypíše zoznam priečinkov/súborov | **dir** | +| copy | cp | skopíruje súbor | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | presunie súbor | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | vytvorí nový priečinok | **mkdir testdirectory** | +| rmdir (alebo del) | rm | odstráni súbor | **del c:\test\test.txt** | +| rmdir /S | rm -r | odstráni priečinok | **rm -r testdirectory** | +| [CMD] /? | man [CMD] | ponúkne nápovedu k príkazu | **cd /?** (Windows) alebo **man cd** (Mac OS / Linux) | + +Toto je len veľmi malá časť príkazov, ktoré môžeš spustiť vo svojom príkazovom riadku, ale dnes budeš potrebovať len tieto. + +Ak ťa to zaujalo, na [ss64.com](http://ss64.com) nájdeš kompletný prehľad príkazov pre všetky operačné systémy. + +## Pripravená? + +Vrhnime sa na Python! \ No newline at end of file diff --git a/sk/intro_to_command_line/open_instructions.md b/sk/intro_to_command_line/open_instructions.md new file mode 100644 index 00000000000..6cfd46cb280 --- /dev/null +++ b/sk/intro_to_command_line/open_instructions.md @@ -0,0 +1,28 @@ + + +V závislosti od tvojej verzie Windowsu a tvojej klávesnice by jedna z týchto možností mala otvoriť príkazové okno (možno budeš musieť trochu experimentovať, ale nemusíš skúšať všetky tieto možnosti): + +- Prejdi do ponuky Štart alebo na plochu a do vyhľadávacieho poľa zadaj "Príkazový riadok" alebo "Command Prompt". +- Prejdi na Štart menu → Systém Windows → Príkazový riadok. +- Choď na menu Štart → Všetky programy → Príslušenstvo → Príkazový riadok. +- Prejdi na plochu, podrž myš v ľavom dolnom rohu obrazovky a klikni na šípku nadol, ktorá sa zobrazí (na dotykovej obrazovke namiesto toho rýchlo prejdi prstom z dolnej časti obrazovky nahor). Mal by sa ti zobraziť zoznam aplikácií. Klikni na príkazový riadok (Command Prompt) v sekcii Windows System. +- Podrž špeciálnu klávesu Windows na klávesnici a stlač klávesu "X". Vyber "Príkazový riadok" z kontextového menu. +- Podrž klávesu Windows a stlač tlačidlo "R", kým sa ti nezobrazí okno "Run". Do poľa zadaj "cmd" a klikni na tlačidlo OK. + +![Zadaj "cmd" v okne "Run"](../python_installation/images/windows-plus-r.png) + +Neskôr v tutoriáli budeš potrebovať mať otvorené dve príkazové okná súčasne. Avšak na niektorých verziách Windowsu ak už máš otvorené jedno okno príkazového riadku a pokúsiš sa otvoriť druhé rovnakým spôsobom, len ťa to presmeruje na to, ktoré už máš otvorené. Vyskúšaj si to na svojom počítači! Ak dostaneš len svoje už existujúce príkazové okno, skús nové otvoriť použitím iného spôsobu zo zoznamu vyššie. Aspoň jeden z nich by ti mal otvoriť nové okno. + + + + + +Choď do Aplikácie → Nástroje → Terminál. + + + + + +Cesta je pravdepodobne Aplikácie → Príslušenstvo → Terminál alebo Aplikácie → Systém → Terminál, ale závisí to od tvojho systému. Ak to tam nie je, skús si to vygoogliť. :) + + \ No newline at end of file diff --git a/sk/python_installation/README.md b/sk/python_installation/README.md new file mode 100644 index 00000000000..012aa34c3e5 --- /dev/null +++ b/sk/python_installation/README.md @@ -0,0 +1,15 @@ +# Začnime s Pythonom + +Konečne sme tu! + +Na začiatok si povedzme, čo je Python. Python je veľmi obľúbený programovací jazyk, ktorý možno využiť na vytváranie webstránok, hier, vedeckých programov, grafiky a mnoho iných vecí. + +Python vznikol koncom 80.-tych rokov minulého storočia a jeho hlavným cieľom bola čitateľnosť pre ľudí (nie len pre stroje!). Toto je dôvod, prečo vyzerá jednoduchšie, než ostatné programovacie jazyky, ale netráp sa - napriek tomu Python je fakt schopný! + +# Inštalácia Pythonu + +> **Poznámka:** Ak používaš Chromebook, preskoč túto kapitolu a postupuj podľa pokynov na [inštaláciu na Chromebookoch](../chromebook_setup/README.md). +> +> **Poznámka** Ak si už prešla [inštalačnými pokynmi](../installation/README.md), tak toto už máš hotové a môžeš ísť rovno na ďalšiu kapitolu! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/sk/python_installation/images/add_python_to_windows_path.png b/sk/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/sk/python_installation/images/add_python_to_windows_path.png differ diff --git a/sk/python_installation/images/python-installation-options.png b/sk/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/sk/python_installation/images/python-installation-options.png differ diff --git a/sk/python_installation/images/windows-plus-r.png b/sk/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/sk/python_installation/images/windows-plus-r.png differ diff --git a/sk/python_installation/instructions.md b/sk/python_installation/instructions.md new file mode 100644 index 00000000000..c14068a4033 --- /dev/null +++ b/sk/python_installation/instructions.md @@ -0,0 +1,117 @@ +> Pre čitateľov a čitateľky doma: Táto kapitola je spracovaná vo videu [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA). +> +> Táto časť je založená na príručke Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django je napísané v jazyku Python. Python potrebujeme na všetko, čo chceme v Djangu robiť. Poďme ho teda najprv nainštalovať! Chceme, aby si si nainštalovala Python 3, takže ak máš staršiu verziu, budeš ju musieť upgradovať. Ak už máš verziu {{ book.py_min_version }} alebo vyššiu, malo by to byť v poriadku. + +Nainštaluj si, prosím, Python nasledovne, a to aj v prípade, že už máš na svojom počítači nainštalovanú Anacondu. + + + +Najprv si zisti, či na tvojom počítači beží 32-bitová alebo 64-bitová verzia Windowsu. Môžeš sa to dozvedieť v Systémových informáciách v časti Typ systému. Vieš sa tam dostať jedným z nasledujúcich spôsobov: + +* Stlač klávesu Windows a klávesu Pause/Break naraz +* Otvor Ovládací panel z windowsového menu, potom prejdi na Systém a zabezpečenia, potom Systém +* Stlač tlačidlo Windows a potom prejdi na položku Nastavenia > Systém > Informácie +* Vyhľadaj "System information" cez Štart menu. Stlač tlačidlo Štart alebo klávesu Windows a začni písať `System Information`. Ako začneš písať, začne ti to dávať tipy. Keď sa položka objaví, vyber ju. + +Python pre Windows si môžeš stiahnuť z webstránky https://www.python.org/downloads/windows/. Klikni na link "Latest Python 3 Release - Python x.x.x". Ak tvoj počítač beží na **64-bitovej** verzii Windowsu, stiahni si **Windows x86-64 executable installer**. V opačnom prípade si stiahni **Windows x86 executable installer**. Po stiahnutí inštalačného súboru ho spusti (dvojklikom) a postupuj podľa inštrukcií v ňom. + +Jedna vec, na ktorú treba dávať pozor: Počas inštalácie si všimni okno označené "Setup". Uisti sa, že začiarkneš políčko "Pridať Python {{ book.py_version }} do PATH" alebo "Pridať Python do premenných prostredia" (alebo "Add Python {{ book.py_version }} to PATH") a klikneš na "Inštalovať" ("Install Now"), ako je zobrazené tu (môže to vyzerať trochu inak, ak inštaluješ inú verziu): + +![Nezabudni pridať Python do PATH](../python_installation/images/python-installation-options.png) + +Po dokončení inštalácie sa môže zobraziť dialógové okno s odkazom, pomocou ktorého sa môžeš dozvedieť viac o Pythone alebo o verzii, ktorú si nainštalovala. Toto dialógové okno zatvor alebo zruš - na to, aby si sa dozvedela viac, je tu tento tutoriál! + +Poznámka: Ak si na staršej verzii Windowsu (7, Vista alebo niečo staršie) a inštalácia Pythonu {{ book.py_version }} padne s chybou, skús nainštalovať najnovšie updaty Windowsu a pokús sa nainštalovať Python znova. Ak problém pretrváva, skús nainštalovať Python {{ book.py_min_release }} z [Python.org](https://www.python.org/downloads/windows/). + +> Django {{ book.django_version }} vyžaduje Python {{ book.py_min_version }} alebo novší, ktorý nebeží na Windowse XP a nižších verziách. + + + + + +> **Poznámka:** Pred inštaláciou Pythonu na macOS sa uisti, že nastavenia tvojho Macu ti povoľujú inštaláciu balíkov, ktoré nie sú z App Storu. Choď do System Preferences (je to v priečinku Applications), klikni na "Security & Privacy," a potom na záložku "General". Ak možnosť "Allow apps downloaded from:" je nastavená na "Mac App Store," zmeň ho na "Mac App Store and identified developers." + +Potom musíš ísť na stránku https://www.python.org/downloads/ a stiahnuť si najnovší Python: + +* Stiahni si súbor s *macOS inštalátorom*, +* Dvojklikom na *python-{{ book.py_release }}-macos11.pkg* spusti inštalačný program. + + + + + +Je veľmi pravdepodobné, že Python už máš predinštalovaný. Pre kontrolu, či je naozaj nainštalovaný (a ktorá verzia), spusti konzolu a napíš tento príkaz: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +Ak máš inú verziu Pythonu, a to aspoň {{ book.py_min_version }} (napr. {{ book.py_min_release }}), nemusíš upgradovať. Ak Python nainštalovaný nemáš alebo chceš inú verziu, najprv zisti, akú máš linuxovú distribúciu, nasledovne: + +{% filename %}command-line{% endfilename %} + + $ grep '^NAME=' /etc/os-release + + +Potom podľa toho, čo si zistila, nasleduj konkrétne inštalačné pokyny pod touto sekciou. + + + + + +Zadaj do konzoly tento príkaz: + +{% filename %}command-line{% endfilename %} + + $ sudo apt install python3 + + + + + + +Použi v konzole tento príkaz: + +{% filename %}command-line{% endfilename %} + + $ sudo dnf install python3 + + +Ak používaš staršiu verziu Fedory, možno sa ti objaví chyba, že príkaz `dnf` neexistuje. V tom prípade musíš použiť príkaz `yum`. + + + + + +Použi v konzole tento príkaz: + +{% filename %}command-line{% endfilename %} + + $ sudo zypper install python3 + + + + +Ak si chceš overiť, že inštalácia bola úspešná, otvor príkazový riadok a spusti príkaz `python3`: + +{% filename %}command-line{% endfilename %} + + $ python3 --version + Python {{ book.py_release }} + + +Zobrazená verzia sa môže líšiť od verzie {{ book.py_release }} - mala by zodpovedať verzii, ktorú si nainštalovala. + +**POZNÁMKA:** Ak používaš Windows a objaví sa ti chybová hláška, že `python3` nebol najdený, skús použiť `python` (bez čísla `3`) a over, či to náhodou nie je Python {{ book.py_min_version }} alebo vyšší. Ak ani to nefunguje, otvor si nový príkazový riadok a skús znova - stáva sa to, keď robíš s príkazovým riadkom, ktorý bol otvorený ešte predtým, než sme nainštalovali Python. + +* * * + +V prípade pochybností alebo ak sa niečo pokazilo a nemáš tušenie, čo robiť ďalej - opýtaj sa svojej mentorky alebo mentora! Niekedy veci nejdú úplne hladko a je lepšie požiadať o pomoc niekoho, kto má viac skúseností. \ No newline at end of file diff --git a/sk/python_introduction/README.md b/sk/python_introduction/README.md new file mode 100644 index 00000000000..d9a06d0a3e2 --- /dev/null +++ b/sk/python_introduction/README.md @@ -0,0 +1,1056 @@ +{% set warning_icon = '' %} + +# Úvod do jazyka Python + +> Časť tejto kapitoly je založená na tutoriáli Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Poďme napísať nejaký kód! + +{% include "/python_introduction/prompt.md" %} + +## Tvoj prvý príkaz v Pythone! + +Po spustení príkazu python sa začiatok nášho príkazového riadku (nazývaný aj prompt) zmenil na `>>>`. Toto pre nás znamená, že odteraz by sme mali písať príkazy iba v jazyku Python. Ty sama nemusíš vždy písať `>>>`, Python to urobí za teba. + +Ak chceš z pythonovej konzoly kedykoľvek odísť, napíš `exit()` alebo použi skratku `Ctrl + Z` vo Windowse a `Ctrl + D` v Macu/Linuxe. Potom už nebudeš vidieť `>>>`. + +Zatiaľ ale z pythonovej konzoly odchádzať nechceme. Chceme sa o nej dozvedieť viac! Začnime tým, že napíšeme niečo jednoduché matematické ako `2 + 3` a stlačíme `enter`. + +{% filename %}command-line{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Pekne! Vidíš, ako vyskočilo riešenie? Python vie počítať! Môžeš skúsiť iné príkazy ako: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Aby sme vypočítali mocninu, povedzme 2 na tretiu, zadáme: {% filename %}command-line{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Trošku sa s tým pohraj a potom sa vráť späť . :) + +Ako môžeš vidieť, Python je skvelá kalkulačka. A ak si zvedavá, čo všetko ešte dokáže... + +## Reťazce + +Čo tak napríklad tvoje meno? Napíš svoje meno v úvodzovkách: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" +'Ola' +``` + +Práve si vytvorila svoj prvý reťazec (string)! Je to postupnosť znakov, ktoré môžu byť spracované počítačom. Reťazec musí vždy začínať a končiť rovnakým znakom. Buď jednoduchými (`'`) alebo dvojitými (`"`) úvodzovkami (nie je medzi nimi žiadny rozdiel!). Úvodzovky naznačujú, že to, čo je medzi nimi, je reťazec. + +Reťazce možno spájať dohromady. Skús toto: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ahoj " + "Ola" +'Ahoj Ola' +``` + +Reťazce môžeš tiež vynásobiť číslom: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola" * 3 +'OlaOlaOla' +``` + +Ak potrebuješ mať vo vnútri reťazca apostrof, máš dve možnosti, ako to spraviť. + +Použitím dvojitých úvodzoviek: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Runnin' down the hill" +"Runnin' down the hill" +``` + +alebo pomocou spätného lomítka (`\`) - tomuto sa anglicky hovorí escaping: + +{% filename %}command-line{% endfilename %} + +```python +>>> 'Runnin\' down the hill' +"Runnin' down the hill" +``` + +Fajn, nie? Ak chceš vidieť svoje meno napísané veľkými písmenami, zadaj: + +{% filename %}command-line{% endfilename %} + +```python +>>> "Ola".upper() +'OLA' +``` + +Práve si na svojom reťazci použila **metódu** `upper`! Metóda (ako `upper()`) predstavuje postupnosť inštrukcií, ktoré Python vykoná na danom objekte (`"Ola"`), keď ju zavoláš. + +Ak chceš vedieť, koľko má tvoje meno písmen, aj na to máme **funkciu**! + +{% filename %}command-line{% endfilename %} + +```python +>>> len("Ola") +3 +``` + +Rozmýšľaš, prečo občas voláme funkcie pomocou `.` na konci reťazca (napr. `"Ola".upper()`) a inokedy najprv zavoláme funkciu a reťazec dáme do zátvoriek? Ide o to, že v niektorých prípadoch funkcie patria k objektom, ako napríklad `upper()`, čo je funkcia, ktorá môže byť vykonaná len na reťazcoch. V takomto prípade sa tieto funkcie volajú **metódy**. Inokedy funkcie nepatria k žiadnemu konkrétnemu objektu a môžu byť použité na rôzne typy objektov, ako je to v prípade `len()`. Preto posielame reťazec `"Ola"` ako parameter funkcii `len`. + +### Zhrnutie + +OK, dosť už o reťazcoch. Zatiaľ sme sa niečo naučili o nasledovnom: + +- **prompt** - píšeme príkazy (kód) do Python promptu, z čoho dostaneme výsledky zase v jazyku Python +- **čísla a reťazce** - v Pythone sú čísla použité pre počítanie a reťazce pre textové objekty +- **operátory** - ako `+` alebo `*`, z daných hodnôt vyrobia novú hodnotu +- **funkcie** - napr. `upper()` alebo `len()`, vykonávajú činnosti na objektoch. + +Toto sú základy každého programovacieho jazyka. Si pripravená na niečo ťažšie? Stavíme sa, že áno! + +## Chyby + +Teraz skúsme niečo nové. Keď už vieme zistiť dĺžku reťazca, vieme to isté spraviť s číslom? Skús napísať `len(304023)` a stlač `enter`: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +Dostali sme našu prvú chybu! Keď uvidíš ikonku {{ warning_icon }}, ber to ako znamenie, že kód, ktorý ideš spustiť, nebude bežať tak, ako by sa dalo očakávať. Robenie chýb (aj úmyselných) je dôležitá súčasť učenia sa! + +Správa nám hovorí, že objekty typu "int" (integer, alebo slovensky celé číslo) nemajú dĺžku. Čo s tým? Možno by sme mohli naše číslo zapísať ako reťazec? Reťazce predsa dĺžku majú, nie? + +{% filename %}command-line{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +Funguje to! Použili sme funkciu `str` vovnútri funkcie `len`. `str()` zmení všetko na reťazec. + +- Funkcia `str` prevedie všetko na **reťazec** +- Funkcia `int` prevedie všetko na **int** (celé čísla) + +> Dôležité: čísla vieme premeniť na text, ale text nevieme vždy previesť na číslo - veď čo by vôbec malo byť `int('ahoj')`? + +## Premenné + +Veľmi dôležitý koncept v programovaní je pojem premennej (variable). Premenná nie je nič iné ako priradenie názvu niečomu, aby sme to mohli použiť neskôr. Programátorky a programátori používajú premenné, aby v nich ukladali dáta, aby ich zdrojový kód bol prehľadnejší, a aby nemuseli všetko držať v hlave. + +Povedzme, že chceme vytvoriť novú premennú s názvom `meno`: + +{% filename %}command-line{% endfilename %} + +```python +>>> meno = "Ola" +``` + +Napíšeme, že meno sa rovná Ola. + +Asi si si všimla, že tentokrát program nič nevypísal. Ako teda vieme, že naša premenná naozaj existuje? Napíš `meno` a stlač `enter`: + +{% filename %}command-line{% endfilename %} + +```python +>>> meno +'Ola' +``` + +Jupí! Tvoja prvá premenná! :) Vždy môžeš zmeniť, na čo ukazuje: + +{% filename %}command-line{% endfilename %} + +```python +>>> meno = "Sona" +>>> meno +'Sona' +``` + +Môžeš ju tiež použiť vo funkciách: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(meno) +4 +``` + +Super, nie? Premenné môžu obsahovať čokoľvek, aj čísla! Skús toto: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Ale čo by sa stalo, keby sme použili nesprávny názov? Uhádneš, čo sa stane? Vyskúšajme! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> mesto = "Tokio" +>>> mseto +Traceback (most recent call last): + File "", line 1, in +NameError: name 'mseto' is not defined +``` + +Chyba! Ako vidíš, Python má viacero druhov chýb a táto konkrétna sa volá **NameError**. Python ti ju vyhodí, pokiaľ sa pokúsiš použiť premennú, ktorá ešte nebola definovaná. Ak sa s touto chybou stretneš v budúcnosti, skontroluj si kód, či nemáš preklep v nejakom názve. + +Pohraj sa s tým trošku a vyskúšaj si, čo všetko sa s tým dá urobiť! + +## Funkcia print + +Skús toto: + +{% filename %}command-line{% endfilename %} + +```python +>>> meno = 'Maria' +>>> meno +'Maria' +>>> print(meno) +Maria +``` + +Ak napíšeš len `meno`, pythonový interpreter ti odpovie reťazcovou *reprezentáciou* premennej "meno", čo sú písmená M-a-r-i-a, obklopené jednoduchými úvodzovkami ''. Keď povieš `print(meno)`, Python vypíše (print) obsah premennej na obrazovku bez úvodzoviek, čo vyzerá úhľadnejšie. + +Ako uvidíme neskôr, funkcia `print()` tiež príde vhod, keď chceme vypisovať niečo zvnútra funkcie alebo keď chceme vypisovať veci na viacerých riadkoch. + +## Zoznamy + +Okrem reťazcov a celých čísel má Python všemožné typy objektov. Teraz sa zoznámime s typom, ktorý sa volá **zoznam** (list). Zoznamy sú presne to, čo by si povedala, že sú: objekty, ktoré sú zoznamami iných objektov. :) + +Poď na to, vytvor zoznam: + +{% filename %}command-line{% endfilename %} + +```python +>>> [] +[] +``` + +Áno, tento zoznam je prázdny. To nám nie je na veľa, že? Vytvorme radšej zoznam s číslami do lotérie. A keďže sa nechceme stále opakovať, hneď ho aj uložíme do premennej: + +{% filename %}command-line{% endfilename %} + +```python +>>> loteria = [3, 42, 12, 19, 30, 59] +``` + +OK, máme zoznam! Čo s ním môžeme urobiť? Pozrime sa, koľko čísel máme v zozname. Tušíš, akú funkciu by sme na také niečo mohli použiť? Už ju poznáš! + +{% filename %}command-line{% endfilename %} + +```python +>>> len(loteria) +6 +``` + +Presne! `len()` ti vráti počet objektov v zozname. Šikovné, nie? Teraz by sme ho možno mohli usporiadať: + +{% filename %}command-line{% endfilename %} + +```python +>>> loteria.sort() +``` + +Nič nám to nevrátilo, iba sa zmenilo poradie, v ktorom sa čísla vyskytujú v zozname. Vypíšme ho znova a pozrime sa, čo sa stalo: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(loteria) +[3, 12, 19, 30, 42, 59] +``` + +Ako vidíš, čísla v tvojom zozname sú teraz zoradené od najnižšej po najvyššiu hodnotu. Gratulujeme! + +Možno by sme chceli toto poradie otočiť? Urobme to! + +{% filename %}command-line{% endfilename %} + +```python +>>> loteria.reverse() +>>> print(loteria) +[59, 42, 30, 19, 12, 3] +``` + +Ak chceš do zoznamu niečo pridať, môžeš to urobiť zadaním tohto príkazu: + +{% filename %}command-line{% endfilename %} + +```python +>>> loteria.append(199) +>>> print(loteria) +[59, 42, 30, 19, 12, 3, 199] +``` + +Ak chceš zobraziť len prvé číslo, môžeš na to použiť **index**. Index je číslo, ktoré hovorí, kde v zozname sa položka nachádza. Programátorky a programátori radi počítajú od 0, takže prvý objekt v našom liste je na indexe 0, druhý na indexe 1 a tak ďalej. Skús toto: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(loteria[0]) +59 +>>> print(loteria[1]) +42 +``` + +Ako môžeš vidieť, môžeš pristupovať k rôznym objektom vo svojom zozname pomocou názvu zoznamu a indexu daného objektu v hranatých zátvorkách. + +Ak chceš niečo zo svojho zoznamu odstrániť, budeš potrebovať **indexy**, ako sme sa dozvedeli vyššie, a metódu `pop()`. Vyskúšajme si to na príklade a zopakujme si, čo sme sa už naučili - ideme vymazať prvé číslo v našom zozname. + +{% filename %}command-line{% endfilename %} + +```python +>>> print(loteria) +[59, 42, 30, 19, 12, 3, 199] +>>> print(loteria[0]) +59 +>>> loteria.pop(0) +59 +>>> print(loteria) +[42, 30, 19, 12, 3, 199] +``` + +Funguje to ako hodinky! + +Pre tú srandu vyskúšaj iné indexy, napr. 6, 7, 1000, -1, -6 či -1000. Skús, či sa ti podarí predpovedať, aký bude výsledok, ešte pred tým, ako príkaz spustíš. Dávajú ti výsledky zmysel? + +Zoznam všetkých dostupných metód pre zoznamy nájdeš v tejto kapitole dokumentácie Pythonu: https://docs.python.org/3/tutorial/datastructures.html + +## Slovníky + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Python Basics: Dictionaries](https://www.youtube.com/watch?v=ZX1CVvZLE6c). + +Slovník (dictionary, skrátene dict) je podobný zoznamu, ale k hodnotám pristupuješ pomocou kľúča namiesto číselného indexu. Kľúč môže byť hocijaký reťazec alebo číslo. Syntax na definovanie prázdneho slovníka je: + +{% filename %}command-line{% endfilename %} + +```python +>>> {} +{} +``` + +Toto ti hovorí, že si práve vytvorila prázdny slovník. Hurá! + +Teraz skús napísať nasledujúci príkaz (skús nahradiť hodnoty vlastnými údajmi): + +{% filename %}command-line{% endfilename %} + +```python +>>> ucastnicka = {'meno': 'Ola', 'krajina': 'Polsko', 'oblubene_cisla': [7, 42, 92]} +``` + +Týmto príkazom si práve vytvorila premennú s názvom `ucastnicka` s tromi pármi kľúč-hodnota (key-value): + +- Kľúč `meno` odkazuje na hodnotu `"Ola"` (objekt typu `reťazec`), +- `krajina` odkazuje na `"Polsko"` (ďalší `reťazec`), +- a `oblubene_cisla` ukazuje na `[7, 42, 92]` (`zoznam` s tromi číslami). + +Obsah jednotlivých kľúčov môžeš skontrolovať použitím tejto syntaxe: + +{% filename %}command-line{% endfilename %} + +```python +>>> print(ucastnicka['meno']) +Ola +``` + +Vidíš, podobá sa to na zoznam. Akurát si nemusíš pamätať index - stačí názov. + +Čo sa stane, ak si od Pythonu vypýtame hodnotu kľúča, ktorý neexistuje? Uhádneš? Vyskúšame a uvidíme! + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> ucastnicka['vek'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'vek' +``` + +Aha, ďalšia chyba! Táto sa volá **KeyError**. Python je nápomocný a povie ti, že kľúč (key) `'vek'` v tomto slovníku neexistuje. + +Kedy je dobré použiť slovník a kedy zoznam? No, to je dobrá otázka. Porozmýšľaj predtým, ako si pozrieš odpoveď v nasledujúcom riadku. + +- Potrebuješ zoradenú postupnosť vecí? Vyber si zoznam. +- Potrebuješ priraďovať hodnoty kľúčom, aby si ich mohla efektívne (podľa kľúča) neskôr vyhľadať? Použi slovník. + +Tak ako pri zoznamoch, aj pri slovníkoch funkcia `len()` vracia počet párov kľúč-hodnota v danom slovníku. Poď, zadaj tento príkaz: + +{% filename %}command-line{% endfilename %} + +```python +>>> len(ucastnicka) +3 +``` + +Slovníky, podobne ako zoznamy, sú *mutable* (premenlivé), čo znamená, že ich možno zmeniť po tom, ako boli vytvorené. Do existujúceho slovníka môžeš pridať nový pár kľúč-hodnota takto: + +{% filename %}command-line{% endfilename %} + +```python +>>> ucastnicka['oblubeny_jazyk'] = 'Python' +``` + +Dúfam, že to dáva zmysel. :) Pripravená na trochu zábavy so slovníkmi? Čakajú nás ďalšie úžasné veci. + +Na odstránenie položky zo slovníka môžeš tiež použiť metódu `pop()`. Napríklad, ak chceš odstrániť položku zodpovedajúcu kľúču `'oblubene_cisla'`, zadaj nasledujúci príkaz: + +{% filename %}command-line{% endfilename %} + +```python +>>> ucastnicka.pop('oblubene_cisla') +[7, 42, 92] +>>> ucastnicka +{'meno': 'Ola', 'krajina': 'Polsko', 'oblubeny_jazyk': 'Python'} +``` + +Ako vidíš z výstupu, pár kľúč-hodnota zodpovedajúci kľúču 'oblubene_cisla' zmizol. + +Taktiež môžeš zmeniť hodnotu priradenú k už vytvorenému kľúču v slovníku. Napíš: + +{% filename %}command-line{% endfilename %} + +```python +>>> ucastnicka['krajina'] = 'Nemecko' +>>> ucastnicka +{'krajina': 'Nemecko', 'oblubeny_jazyk': 'Python', 'meno': 'Ola'} +``` + +Ako vidíš, hodnota kľúča `"krajina"` sa zmenila z `"Polsko"` na `"Nemecko"`. :) Vzrušujúce? Hurá! Práve si sa naučila ďalšiu úžasnú vec. + +### Zhrnutie + +Skvelé! Teraz už vieš o programovaní dosť veľa. Pozrime sa, čo sme si vysvetlili v poslednej časti: + +- **chyby** - teraz už vieš, ako čítať a rozumieť chybám, ktoré sa zobrazia, ak Python nerozumie príkazu, ktorý mu zadáš +- **premenné** - názvy objektov, ktoré ti uľahčujú písanie kódu a robia tiež kód zrozumiteľnejším +- **zoznamy** - zoznamy objektov uložených v určitom poradí +- **slovníky** - objekty uložené v pároch kľúč-hodnota + +Tešíš sa na ďalšiu časť? :) + +## Porovnávanie vecí + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4). + +Veľkú časť programovania predstavuje porovnávanie veci. Čo sa porovnáva najjednoduchšie? Čísla! Pozrime sa, ako to funguje: + +{% filename %}command-line{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +>>> len([1, 2, 3]) > len([4, 5]) +True +``` + +Dali sme Pythonu na porovnanie zopár čísel. Ako vidíš, Python vie porovnávať nielen čísla, ale aj výsledky matematických výrazov ako `2 * 2` a výsledky funkcií ako `2`, ktorú vrátila funkcia `len([4, 5])`. Fajn, nie? + +Zaujíma ťa, prečo sme použili dve znamenienka rovnosti `==` vedľa seba, aby sme porovnali, či sú čísla rovnaké? Jeden znak `=` používame na priraďovanie hodnôt premenným. Takže ak chceš skontrolovať, či sú veci rovnaké, musíš vždy, úplne **vždy** použiť dve `==`. Taktiež môžeme vyjadriť, že sa veci navzájom líšia. Na to použijeme symbol `!=`, ako bolo uvedené v príklade vyššie. + +Dajme Pythonu dve ďalšie úlohy: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>` a `<` sme už videli, ale čo znamenajú `>=` a `<=`? Môžeš ich čítať takto: + +- x `>` y znamená: x je väčšie ako y +- x `<` y znamená: x je menšie ako y +- x `<=` y znamená: x je menšie alebo rovné y +- x `> =` y znamená: x je väčšie alebo rovné y + +Skvelé! Ešte si dáme jeden príklad? Skús toto: + +{% filename %}command-line{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Môžeš dať Pythonu toľko čísel, koľko chceš, a on ti dá vždy odpoveď! Vcelku šikovné, nie? + +- **and** - ak použiješ operátor `and`, obidve porovnávané veci musia byť pravdivé (True), aby príkaz bol pravdivý (True) +- **or** - ak použiješ operátor `or`, stačí, aby jedna z porovnávaných vecí bola pravdivá, aby bol celý príkaz pravda (True) + +Už si počula výraz "porovnávať hrušky s jablkami"? Skúsme ekvivalent v Pythone: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + +```python +>>> 1 > 'django' +Traceback (most recent call last): + File "", line 1, in +TypeError: '>' not supported between instances of 'int' and 'str' +``` + +Tu vidíš, že tak, ako nevieme porovnávať hrušky s jablkami, ani Python nevie porovnať číslo (`int`) s reťazcom (`str`). Namiesto toho vypíše chybu **TypeError** a povie nám, že tieto dva typy sa nedajú porovnať. + +## Logické hodnoty + +Mimochodom, práve si sa naučila nový typ objektu v Pythone. Volá sa **boolean** (logická hodnota). + +Existujú iba dva typy boolean objektov: + +- True (pravda) +- False (nepravda) + +Aby ich Python spoznal, musíš vždy napísať "True" (s veľkým písmenom na začiatku a zvyšok malým písmom). **true, TRUE, tRUE nebudú fungovať -- iba True je správne.** (To isté platí aj pre 'False'.) + +Premenné môžu tiež obsahovať booleany. Aha: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Môžeš to urobiť aj takto: + +{% filename %}command-line{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Precvič si to a zabav sa s booleanmi - skús spustiť tieto príkazy: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Gratulujeme! Booleany patria k tomu najzaujímavejšiemu v programovaní a ty si sa práve naučila, ako sa používajú! + +# Ulož to! + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk). + +Zatiaľ sme písali všetok kód v Pythone do konzoly interpretera, kde môžeme naraz zadať iba jeden riadok kódu. Bežné programy bývajú uložené v súboroch, ktoré spúšťa náš programovací jazyk buď pomocou **interpretera**, alebo **kompilátora**. Doteraz sme spúšťali naše programy riadok po riadku v **interpreteri** Pythonu. Na ďalšie úlohy budeme potrebovať viac ako jeden riadok kódu, takže teraz rýchlo musíme: + +- Ukončiť interpreter Pythonu +- Otvoriť si náš zvolený editor kódu +- Uložiť v ňom trochu kódu do nového Python súboru +- Spustiť ho! + +Ak chceš odísť z Python interpretera, ktorý sme doteraz používali, zadaj funkciu `exit()` + +{% filename %}command-line{% endfilename %} + +```python +>>> exit() +$ +``` + +Tak sa dostaneš späť na príkazový riadok. + +V jednej z [predošlých častí](../code_editor/README.md) sme si vybrali editor kódu. Teraz budeme chcieť tento editor otvoriť a napísať pár riadkov kódu do nového súboru (alebo ak používaš Chromebook, vytvoriť nový súbor v Cloud IDE a otvoriť ho, čo sa udeje v zabudovanom editore kódu): + +{% filename %}editor{% endfilename %} + +```python +print('Ahoj, Django Girls!') +``` + +Prirodzene, teraz si už poriadne skúsená Python vývojárka, takže pokojne napíš nejaký kód, ktorý si sa dnes naučila. + +Teraz súbor musíme uložiť a dať mu nejaký zrozumiteľný názov. Nazvime ho **python_intro.py** a uložme ho na plochu. Súbor môžeš nazvať, akokoľvek chceš, ale dôležité je, aby jeho názov končil na **.py**. Prípona **.py** nášmu operačnému systému hovorí, že je to **spustiteľný pythonovský súbor** a Python ho vie spustiť. + +> **Poznámka** Všimni si jednu z najlepších vecí na editoroch kódu: farby! V Python konzole bolo všetko jednou farbou, teraz by si ale mala vidieť, že funkcia `print` je napísaná inou farbou ako reťazec. Toto sa nazýva "zvýraznenie syntaxe" (syntax highlighting) a pri programovaní je to fakt užitočná vec. Farba výrazov ti môže niečo napovedať, ak máš niekde neuzavretý reťazec či preklep v názve špeciálnych slov (ako napríklad `def` vo funkcii, ktorú uvidíme neskôr). Toto je jeden z dôvodov, prečo používame editor kódu. :) + +Súbor máme uložený, je čas ho spustiť! Pomocou poznatkov z kapitoly o príkazovom riadku **zmeň adresár** na plochu terminálovým príkazom. + + + +Na Macu bude príkaz vyzerať takto: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + + + + + +Na Linuxe bude takýto: + +{% filename %}command-line{% endfilename %} + + $ cd ~/Desktop + + +(Pripomíname, že slovo "Desktop" alebo "Plocha" môže bude preložené.) + + + + + +Vo windowsovom Command Prompte to bude takto: + +{% filename %}command-line{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +A vo windowsovom PowerShelli to bude takto: + +{% filename %}command-line{% endfilename %} + + > cd $Home\Desktop + + + + +Ak sa zasekneš, neboj sa spýtať. Na to presne tu máš mentorky a mentorov! + +Teraz použi Python na spustenie kódu v súbore: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ahoj, Django Girls! + + +Poznámka: na Windowse "python3" ako príkaz neexistuje. Na spustenie súboru použi "python": + +{% filename %}command-line{% endfilename %} + +```python +> python python_intro.py +``` + +Okej! Práve si spustila svoj prvý program v Pythone zo súboru. Skvelý pocit, nie? + +Teraz sa môžeš posunúť na základný nástroj v programovaní: + +## If … elif … else + +Kopec vecí v kóde sa má spúšťať, len ak sú splnené určité podmienky. Práve na to používa Python príkaz **if**. + +Nahraď kód v súbore **python_intro.py** týmto: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Ak to uložíš a spustíš, dostaneš túto chybu: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python očakáva, že od nás dostane ďalšie inštrukcie, ktoré má vykonať, ak je podmienka `3 > 2` pravdivá (teda ak bude mať hodnotu `True`). Skúsme Pythonu povedať, aby vypísal "Funguje to!". Zmeň svoj kód v súbore **python_intro.py** takto: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('Funguje to!') +``` + +Všimla si si, ako sme odsadili druhý riadok o 4 medzery? To musíme urobiť preto, aby Python vedel, ktorú časť kódu má spustiť, ak je výsledok pravdivý. Môžeš použiť len jednu medzeru, ale takmer všetci programátori a programátorky v Pythone používajú 4 medzery, aby bol kód dobre čitateľný. Jedno stlačenie klávesy Tab sa tiež bude rátať ako 4 medzery, pokiaľ je tvoj editor tak nastavený. Keď sa pre jedno rozhodneš, zostaň pri tom! Ak si už začala odsádzať 4 medzerami, daj si záležať, aby aj ďalšie odsadenia boli 4 medzerami, inak ti to môže spôsobovať problémy. + +Ulož to a spusti znova: + +{% filename %}command-line{% endfilename %} + +```python +$ python3 python_intro.py +Funguje to! +``` + +Poznámka: Pamätaj, že Windows nepozná príkaz "python3". Odteraz vždy pri spúšťaní súborov nahraď "python3" príkazom "python". + +### Čo ak podmienka nie je pravdivá? + +V predcházajúcich príkladoch sa náš kód vykonal, len keď podmienka bola pravdivá (True). Ale Python má aj príkazy `elif` a `else`: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print('5 je naozaj viac ako 2') +else: + print('5 nie je viac ako 2') +``` + +Keď to spustíš, vypíše to: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + 5 je naozaj viac ako 2 + + +Ak by 2 bolo viac ako 5, spustil by sa druhý príkaz. Pozrime sa, ako funguje `elif`: + +{% filename %}python_intro.py{% endfilename %} + +```python +meno = 'Sona' +if meno == 'Ola': + print('Cau Ola!') +elif meno == 'Sona': + print('Cau Sona!') +else: + print('Cau neznama!') +``` + +a po spustení: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Cau Sona! + + +Všimla si si, čo sa stalo? `elif` ti dovolí pridať dodatočné podmienky, ktoré sa spustia, ak predchádzajúce podmienky nie sú splnené. + +Za prvý `if` môžeš dať `elifov` toľko, koľko len chceš. Napríklad: + +{% filename %}python_intro.py{% endfilename %} + +```python +hlasitost = 57 +if hlasitost < 20: + print("Je to pomerne tiche.") +elif 20 <= hlasitost < 40: + print("Je to fajn ako hudba na pozadi") +elif 40 <= hlasitost < 60: + print("Super, pocujem vsetky detaily") +elif 60 <= hlasitost < 80: + print("Fajn na party") +elif 80 <= hlasitost < 100: + print("Trochu hlasne!") +else: + print("Bolia ma usi! :(") +``` + +Python prejde všetkými podmienkami poporade a vypíše: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Super, pocujem vsetky detaily + + +## Komentáre + +Komentáre (comments) sú riadky, ktoré sa začínajú znakom `#`. Po `#` môžeš napísať hocičo, Python to bude ignorovať. Komentáre môžu spraviť tvoj kód čitateľnejším pre iných ludí. + +Pozrime sa, ako to vyzerá: + +{% filename %}python_intro.py{% endfilename %} + +```python +# Zmen hlasitost, ak je prilis silna alebo slaba +if hlasitost < 20 or hlasitost > 80: + hlasitost = 50 + print("Lepsie!") +``` + +Nemusíš písať komentár pre každý riadok kódu, čo napíšeš, ale je užitočné vysvetliť, prečo tvoj kód niečo robǐ, alebo stručne zhrnúť, čo sa deje, keď robí niečo zložité. + +### Zhrnutie + +V posledných pár cvičeniach si sa naučila: + +- **porovnávať veci** - v Pythone môžeš porovnávať veci pomocou znamienok `>`, `>=`, `==`, `<=`, `<` a operátorov `and`, `or` +- **boolean** - typ objektu, ktorý môže mať len jednu z dvoch hodnôt: `True` (pravda) alebo `False` (nepravda) +- **ukladať súbory** - ukladanie kódu v súboroch, vďaka čomu môžeme spúšťať väčšie programy +- **if... elif... else** - príkazy, ktoré ti umožňujú spustiť kód, iba ak sú splnené určité podmienky. +- **komentáre** - riadky, ktoré Python nebude spúšťať, vďaka ktorým môžeš svoj kód zdokumentovať + +Prišiel čas na poslednú časť tejto kapitoly! + +## Tvoje vlastné funkcie! + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0). + +Pamätáš si funkcie ako napríklad `len()`, ktoré môžeš v Pythone spúšťať? Máme pre teba dobrú správu - teraz sa naučíš, ako napísať vlastnú funkciu! + +Funkcia je postupnosť inštrukcií, ktoré by mal Python spustiť. Každá funkcia v Pythone začína kľúčovým slovom `def`, má svoje meno a môže mať nejaké parametre. Vyskúšajme si to. Nahraď kód v **python_intro.py** týmto: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ahoj(): + print('Ahoj!') + print('Ako sa mas?') + +ahoj() +``` + +OK, naša prvá funkcia je hotová! + +Možno sa čuduješ, prečo sme na koniec súboru napísali názov funkcie. Keď sme napísali `def ahoj():` a za tým odsadené riadky, písali sme inštrukcie, čo má funkcia `ahoj()` robiť. Python tieto inštrukcie prečíta a zapamätá si ich, ale funkciu zatiaľ nespustí. Aby sme Pythonu povedali, že funkciu má spustiť, musíme ju zavolať (call) pomocou `ahoj()`. Python číta a spúšťa obsah nášho súboru zhora nadol, takže funkciu musíme najprv definovať a až potom zavolať. + +Poďme to spustiť a pozrime sa, čo sa stane: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ahoj! + Ako sa mas? + + +Poznámka: Ak to nefunguje, žiadne strachy! Výstup ti pomôže zistiť prečo: + +- Ak sa ti zjaví `NameError`, znamená to, že si niečo chybne napísala, takže by si si mala overiť, že si použila rovnaký názov, keď si funkciu vytvárala pomocou `def ahoj()` a keď si ju zavolala pomocou `ahoj()`. +- Ak sa ti zjaví `IndentationError`, uisti sa, že oba `print` riadky majú rovnaký počet medzier od začiatku riadku: Python vyžaduje, aby všetky riadky boli pedantne zarovnané. +- Ak nevidíš žiaden výstup, tak sa pozri, či posledné `ahoj()` *nie je* odsadené - ak je, tento riadok sa stal súčasťou funkcie a nikdy sa nespustí. + +Poďme vytvoriť našu prvú funkciu s parametrami. Použijeme predchádzajúci príklad - funkciu, ktorá hovorí "ahoj" osobe, ktorá ju spustí - s menom: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ahoj(meno): +``` + +Ako vidíš, dali sme našej funkcii parameter, ktorý sme nazvali `meno`: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ahoj(meno): + if meno == 'Ola': + print('Ahoj Ola!') + elif meno == 'Sona': + print('Ahoj Sona!') + else: + print('Ahoj neznama!') + +ahoj() +``` + +Pamätaj: Funkcia `print` je odsadená o 4 medzery vo vnútri príkazu `if`. Je to preto, lebo funkcia sa spustí, len ak je splnená podmienka. Pozrime sa, ako to funguje: + +{% filename %}{{ warning_icon }} command-line{% endfilename %} + + $ python3 python_intro.py + Traceback (most recent call last): + File "python_intro.py", line 10, in + ahoj() + TypeError: ahoj() missing 1 required positional argument: 'meno' + + +Ups, chyba. Našťastie, Python nám dáva veľmi užitočnú chybovú hlášku. Hovorí nám, že funkcia `ahoj()` (tá, čo sme definovali) má jeden povinný argument (s názvom `meno`) a že sme mu ju zabudli zadať pri volaní funkcie. Opravme to na konci súboru: + +{% filename %}python_intro.py{% endfilename %} + +```python +ahoj("Ola") +``` + +A znova ho spustime: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ahoj Ola! + + +A čo ak zmeníme meno? + +{% filename %}python_intro.py{% endfilename %} + +```python +ahoj("Sona") +``` + +A spustíme to: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ahoj Sona! + + +No a čo si myslíš, čo sa stane, ak tam napíšeš iné meno? (Nie Ola, ani Sona.) Vyskúšaj a uvidíš, či bol tvoj predpoklad správny. Malo by ti to vypísať toto: + +{% filename %}command-line{% endfilename %} + + Ahoj neznama! + + +Nie je to super? Vďaka tomu nemusíš písať dookola to isté zakaždým, keď chceš zmeniť meno človeka, ktorého má funkcia pozdraviť. A to je presne dôvod, prečo potrebujeme funkcie - aby sme sa nemuseli v kóde opakovať! + +Skúsme to trochu inak. Existuje viac mien ako len dve a písať samostatnú podmienku pre každé jedno by bolo ťažké, nie? Nahraď obsah svojho súboru týmto: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ahoj(meno): + print('Ahoj ' + meno + '!') + +ahoj("Kika") +``` + +Teraz tento kód spustime: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ahoj Kika! + + +Gratulujeme! Práve si sa naučila, ako sa píšu funkcie! :) + +## Cykly + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0). + +Toto je už posledná časť. Išlo to rýchlo, však? :) + +Programátori a programátorky sa neradi opakujú. Programovanie je o automatizácii vecí, takže nechceme zdraviť každú osobu manuálne, však? A tu nám prídu vhod cykly (loops). + +Ešte si spomínaš na zoznamy? Spravme si zoznam dievčat: + +{% filename %}python_intro.py{% endfilename %} + +```python +dievcata = ['Katka', 'Kika', 'Zuza', 'Ola', 'Ty'] +``` + +Chceme ich pozdraviť všetky menom. Na to máme funkciu `ahoj`, tak ju použime v cykle: + +{% filename %}python_intro.py{% endfilename %} + +```python +for meno in dievcata: +``` + +Príkaz `for` sa správa podobne ako `if`; kód pod oboma z nich musí byť odsadený o štyri medzery. + +Tu je celý kód, ktorý napíšeme do súboru: + +{% filename %}python_intro.py{% endfilename %} + +```python +def ahoj(meno): + print('Ahoj ' + meno + '!') + +dievcata = ['Katka', 'Kika', 'Zuza', 'Ola', 'Ty'] +for meno in dievcata: + ahoj(meno) + print('Dalsie dievca') +``` + +A keď to spustíme: + +{% filename %}command-line{% endfilename %} + + $ python3 python_intro.py + Ahoj Katka! + Dalsie dievca + Ahoj Kika! + Dalsie dievca + Ahoj Zuza! + Dalsie dievca + Ahoj Ola! + Dalsie dievca + Ahoj Ty! + Dalsie dievca + + +Ako vidíš, všetko, čo dáš do príkazu `for` s tým, že to odsadíš, sa zopakuje pre každý prvok zoznamu `dievcata`. + +`for` môžeš pomocou funkcie `range` použiť aj na čísla: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Čo vypíše: + +{% filename %}command-line{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` je funkcia, ktorá vytvára zoznam s postupnosťou čísel (krajné čísla funkcii poskytneš ako parametre). + +Všimni si, že druhé číslo sa nenachádza vo výstupnom zozname (teda `range(1, 6)` počíta od 1 po 5, ale neobsahuje číslo 6). To preto, lebo "range" je jednostranne otvorený, čo znamená, že obsahuje prvú hodnotu, ale nie poslednú. + +## Zhrnutie + +To je všetko. **Si úplne super!** Toto bola náročná kapitola, takže by si mala byť na seba pyšná. My sme na teba rozhodne hrdí, že si to zvládla až potiaľto! + +Oficiálnu verziu tutoriálu najdeš na https://docs.python.org/3/tutorial/. Prevedie ťa jazykom podrobnejšie. Nech sa darí! :) + +Teraz na chvíľu si daj pauzu - natiahni sa trochu, poprechádzaj sa, nech si tvoje oči oddýchnu - a potom prejdeme na ďalšiu kapitolu. :) + +![Koláčik](images/cupcake.png) diff --git a/sk/python_introduction/images/cupcake.png b/sk/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/sk/python_introduction/images/cupcake.png differ diff --git a/sk/python_introduction/prompt.md b/sk/python_introduction/prompt.md new file mode 100644 index 00000000000..d92d1575a16 --- /dev/null +++ b/sk/python_introduction/prompt.md @@ -0,0 +1,17 @@ +## Pythonový príkazový riadok + +> Pre čitateľky a čitateľov doma: Táto kapitola je spracovaná vo videu [Python Basics: Integers, Strings, Lists, Variables and Errors](https://www.youtube.com/watch?v=MO63L4s-20U). + +Aby sme sa mohli začať hrať s Pythonom, musíme na svojom počítači otvoriť *príkazový riadok*. Už by si mala vedieť, ako sa to robí - naučili sme sa to v [Úvode do príkazového riadku](../intro_to_command_line/README.md). + +Keď si pripravená, pokračuj inštrukciami nižšie. + +Chceme otvoriť Python konzolu, takže napíš `python` na Windowse alebo `python3` na Mac OS a Linuxe a stlač `enter`. + +{% filename %}command-line{% endfilename %} +``` +$ python3 +Python {{ book.py_release }} (...) +Type "help", "copyright", "credits" or "license" for more information. +>>> +``` diff --git a/sk/template_extending/README.md b/sk/template_extending/README.md new file mode 100644 index 00000000000..3cd8197fb10 --- /dev/null +++ b/sk/template_extending/README.md @@ -0,0 +1,151 @@ +# Rozširovanie šablón + +Ďalšia super možnosť, ktorú ti Django ponúka, je **rozširovanie šablón** (template extending). Znamená to, že môžeš použiť rovnaké časti HTML kódu na rôznych stránkach svojho webu. + +Šablóny ti pomôžu, keď chceš použiť rovnaké informácie alebo formát obsahu na viac ako jednom mieste. Nemusíš dokola opakovať to isté. A ak chceš niečo zmeniť, nemusíš to urobiť v každej šablóne, len v jednej! + +## Vytvorenie základnej šablóny + +Základná šablóna (base template) je najzákladnejšia šablóna, ktorú rozširuješ na každej stránke svojej web stránky. + +Vytvorme súbor `base.html` v priečinku `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + + +Otvor ho v editore a skopíruj všetko z `post_list.html` do `base.html` takto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + + Django Girls blog + + + + + +
+
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Potom v `base.html` nahraď celé `` (všetko medzi `` a ``) týmto: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+
+

Django Girls Blog

+
+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Možno si si všimla, že toto nahradilo všetko od `{% for post in posts %}` po `{% endfor %}` týmto: {% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Ale prečo? Práve si vytvorila `blok`! Použila si šablónový tag `{% block %}`, aby si vytvoila časť, do ktorej bude vložené HTML. To HTML bude pochádzať z inej šablóny, ktorá rozšíri túto šablónu (`base.html`). Hneď ti ukážeme, ako sa to robí. + +Teraz ulož `base.html` a znova otvor `blog/templates/blog/post_list.html` v editore. {% raw %}Odstrániš všetko nad `{% for post in posts %}` a pod `{% endfor %}`. Keď skončíš, súbor bude vyzerať nasledovne:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Chceme toto použiť ako súčasť našej šablóny pre všetky bloky. Je načase pridať blokové tagy do tohto súboru! + +{% raw %}Blokový tag by sa mal zhodovať s tagom v `base.html` súbore. Taktiež by mal obsahovať celý kód, čo patrí do tvojich obsahových blokov. To docieliš tak, že vložíš všetko medzi `{% block content %}` a `{% endblock %}`. Takto:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+ +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Už zostáva len jediná vec. Potrebujeme tieto dve šablóny prepojiť. To je celá podstata rozširovania šablón! Urobíme to pridaním "extends" tagu na začiatku súboru. Nasledovne: + +{% 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 %} +``` + +A je to! Súbor ulož a skontroluj, či tvoja web stránka stále funguje tak, ako má. :) + +> Ak sa ti zobrazí chyba `TemplateDoesNotExist`, znamená to, že neexistuje súbor `blog/base.html` a `runserver` beží v konzole. Skús ho zastaviť (stlačením Ctrl+C – tlačidiel Control a C spolu) a spustiť znova pomocou príkazu `python manage.py runserver`. \ No newline at end of file diff --git a/sk/whats_next/README.md b/sk/whats_next/README.md new file mode 100644 index 00000000000..f3413c3eff9 --- /dev/null +++ b/sk/whats_next/README.md @@ -0,0 +1,43 @@ +# Čo ďalej? + +Môžeš si zablahoželať! **Si úplne úžasná**. Sme na teba hrdí! <3 + +### Čo robiť teraz? + +Daj si pauzu a oddýchni si. Práve si urobila niečo ohromné. + +Potom určite začni sledovať Django Girls na [Facebooku](http://facebook.com/djangogirls) alebo [Twitteri](https://twitter.com/djangogirls) pre najnovšie informácie. + +### Viete odporučiť ďalšie zdroje? + +Áno! Na webe nájdeš *obrovské množstvo* materiálov na trénovanie všemožných programátorských zručností. V tomto momente môže byť ťažké rozhodnúť sa, ako pokračovať, ale radi ti pomôžeme. Bez ohľadu na to, čo ťa zaujímalo pred Django Girls a čo ťa zaujalo počas tutoriálu, tu je niekoľko materiálov zdarma (alebo s veľkými časťami zadarmo), ktoré ti poslúžia na to, aby ťa dostali tam, kde chceš byť. + +#### Django + +- Naša knižka [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org/) +- [Oficiálny Django návod](https://docs.djangoproject.com/en/5.1/intro/tutorial01/) +- [Video návod Getting Started With Django](http://www.gettingstartedwithdjango.com/) +- [Django for Everybody Specialization](https://www.coursera.org/specializations/django) – niektoré z prednášok možno sledovať zdarma a môžeš za ne dostať Coursera certifikát + +#### HTML, CSS a JavaScript + +- [Kurz webového vývojárstva na Codecademy](https://www.codecademy.com/learn/paths/web-development) +- [freeCodeCamp](https://www.freecodecamp.org/) + +#### Python + +- [Python kurz na Codeacademy](https://www.codecademy.com/learn/learn-python) +- [Google Python kurz](https://developers.google.com/edu/python/) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) – základné cvičenia sú voľne dostupné +- [New Coder tutorials](http://newcoder.io/tutorials/) – množstvo praktických príkladov, ako sa dá použiť Python +- [edX](https://www.edx.org/course?search_query=python) – väčšina kurzov je voľne dostupná, ale ak za ne chceš certifikát alebo kredity, za tie sa už platí +- [Python špecializácia](https://www.coursera.org/specializations/python) na Coursere – niektoré video prednášky sú voľne dostupné a môžeš za ne dostať Coursera certifikát +- [Python for Everybody](https://www.py4e.com/) - voľne dostupná verzia špecializácie Python for Everybody na Coursere + +#### Práca s dátami + +- [Kurz data science na Codecademy](https://www.codecademy.com/learn/paths/data-science) +- [edX](https://www.edx.org/course/?search_query=python&subject=Data%20Analysis%20%26%20Statistics) – väčšina kurzov je voľne dostupná, ale ak chceš certifikát alebo kredity, za tie sa už platí +- [Dataquest](https://www.dataquest.io/) – prvých 30 "misií" je zdarma + +Už sa nevieme dočkať, čo vytvoríš nabudúce! \ No newline at end of file diff --git a/styles/website.css b/styles/website.css new file mode 100644 index 00000000000..e53ebbd161b --- /dev/null +++ b/styles/website.css @@ -0,0 +1,14 @@ +.book-langs-index .inner { + max-width: 800px; +} + +.book-langs-index .inner h3 { + text-align: center; + font-size: 30px; + font-family: "Trebuchet MS", Helvetica, sans-serif; +} +.book-langs-index .inner .languages li { + font-size: 24px; + font-family: "Trebuchet MS", Helvetica, sans-serif; + letter-spacing: 0; /* Fix for emoji flags */ +} diff --git a/template_extending/README.md b/template_extending/README.md deleted file mode 100644 index 7bd68f75dc1..00000000000 --- a/template_extending/README.md +++ /dev/null @@ -1,104 +0,0 @@ -# Template extending - -Another nice thing Django has for you is __template extending__. What does this mean? It means that you can use the same parts of your HTML for different pages of your website. - -This way you don't have to repeat yourself in every file, when you want to use the same information/layout and, if you want to change something, you don't have to do it in every template, just once! - -## Create base template - -A base template is the most basic template that you extend on every page of your website. - -Create a `templates/mysite/base.html` file. You also need to create `templates` and `mysite` directories, but you probably have noticed this pattern already :) - - mysite - └───templates - └───mysite - base.html - -Then open it up and copy everything from `post_list.html` to `base.html` file, like this: - - {% load staticfiles %} - - - Django Girls blog - - - - - - - -
-

Django Girls Blog

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

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text|linebreaks }}

-
- {% endfor %} -
-
-
- - - -Then in `base.html`, replace your whole `` (everything between `` and ``) with this: - - -
-

Django Girls Blog

-
-
-
-
- {% block content %} - {% endblock %} -
-
-
- - -We basically replaced everything between `{% for post in posts %}{% endfor %}` with: - - {% block content %} - {% endblock %} - -What does it mean? You just created a `block`, which is a template tag that allows you to insert HTML in this block in other templates that extend `base.html`. We will show you how to do this in a moment. - -Now save it, and open your `blog/templates/blog/post_list.html` again. Delete everything else other than what's inside the body and then also delete `
`, so the file will look like this: - - {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text|linebreaks }}

-
- {% endfor %} - -And now add this line to the beginning of the file: - - {% extends 'mysite/base.html' %} - -It means that we're now extending `base.html` template in `post_list.html`. Only one thing left: put everything (except the line we just added) between `{% block content %}` and `{% endblock content %}`. Like this: - - {% extends 'mysite/base.html' %} - - {% block content %} - {% for post in posts %} -
-

published: {{ post.published_date }}

-

{{ post.title }}

-

{{ post.text|linebreaks }}

-
- {% endfor %} - {% endblock content %} - -That's it! Check if your website is still working properly :) - -> If you have an error `TemplateDoesNotExists` that says that there is no `mysite/base.html` file and you have `runserver` running in the console, try to stop it (by pressing Ctrl+c - Control and C buttons together) and restart it with `python manage.py runserver`. diff --git a/tr/GLOSSARY.md b/tr/GLOSSARY.md new file mode 100644 index 00000000000..1e503fa6881 --- /dev/null +++ b/tr/GLOSSARY.md @@ -0,0 +1,3 @@ +# kod editörü + +Kod editörü, kodunuza sonradan geri dönebilmeniz için kodu kaydeden bir uygulamadır. Nereden edinebileceğinizi [Kod editörü bölümü](./code_editor/README.md)nde bulabilirsiniz \ No newline at end of file diff --git a/tr/README.md b/tr/README.md new file mode 100644 index 00000000000..2595ff42e6a --- /dev/null +++ b/tr/README.md @@ -0,0 +1,51 @@ +# Django Girls Eğitimi + +[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial) + +> Bu eser Creative Commons Attribution-ShareAlike 4.0 International License ile lisanslıdır. Bu lisansın bir örneğini görmek için https://creativecommons.org/licenses/by-sa/4.0/ adresine gidebilirsiniz + +## Hoşgeldiniz + +Django Girls Eğitimi'ne hoşgeldin! Seni burada görmekten mutluyuz :) Bu eğitimde, seni web teknolojileri dünyasında bir yolculuğa çıkaracak, internetin bildiğimiz haliyle çalışması için bir araya gelmesi gereken tüm parçalara bir göz atacağız. + +Bilinmeyen şeylerde hep olduğu gibi, bu bir macera olacak. Ama hiç endişelenme, buraya gelme azmini gösterdiğine göre devamı da iyi gidecek :) + +## Giriş + +Hiç senin (henüz) yakın ilişki kuramadığın teknolojinin dünyayı giderek daha fazla kapladığını hissettiğin oldu mu? Hiç web sayfalarının nasıl yapıldığını merak edip başlamak için gereken motivasyona sahip olmadığınız oldu mu? Yazılım dünyasının sizin için, kendi başınıza bir şeyler yapmayı denemek için bile, çok karmaşık olduğunu düşündünüz mü? + +Öyleyse, sizin için iyi haberlerimiz var! Programlama göründüğü kadar zor değil ve size ne kadar keyifli olabileceğini göstermek istiyoruz. + +Bu eğitim sihirli bir şekilde sizi bir programcıya dönüştürmeyecek. Eğer bu konuda iyi olmak istiyorsanız, aylara ve hatta yıllara dayanan bir öğrenme ve pratiğe ihtiyacınız var. Fakat biz size programlamanın ya da websayfası oluşturmanın göründüğü kadar da karmaşık olmadığını göstermek istiyoruz. Farklı parçaları, değişik kısımları anlatabildiğimiz kadar iyi anlatmaya gayret edeceğiz ki artık teknoloji gözünüzü korkutmasın. + +Ümit ederiz ki sizin de teknolojiyi bizim kadar sevmenizi sağlayabiliriz! + +## Bu eğitim ile ne öğreneceksiniz? + +Eğitimi bitirdiğinizde, küçük bir çalışan web uygulamanız olacak: kendi blogunuz. Size çevrimiçi olarak nasıl yayınlandığını göstereceğiz, böylece başkaları çalışmanızı görecek! + +Aşağı yukarı şu şekilde gözükecek: + +![Şekil 0.1](images/application.png) + +> Eğer eğitimi kendi başınıza takip ediyorsanız ve bir problem yaşadığınızda size yardım edebilecek bir mentörünüz yoksa, size yardım edebileceğimiz bir sohbet sistemimiz var:[![Gitter](https://badges.gitter.im/DjangoGirls/tutorial.svg)](https://gitter.im/DjangoGirls/tutorial). Daha önce katılmış olan kişilerden ve eğitmenlerimizden zaman zaman chat odasında bulunmalarını ve eğitimi takip eden kişilere yardımcı olmalarını istedik! Chat odasında sorularınızı sormaktan çekinmeyin! + +Tamam, [hadi en baştan başlayalım...](./how_the_internet_works/README.md) + +## Eğitimi evden takip etmek + +Bir Django Girls atölyesine katılmak harika, ama katılmanın her zaman mümkün olmayabileceğinin farkındayız. Bu nedenle, bu eğitimi evde takip etmeyi denemenizi tavsiye ediyoruz. Evde okuyanlar için, şu anda eğitimi kendi başına izlemeyi kolaylaştıracak videolar hazırlıyoruz. Bu hala devam eden bir çalışma, ancak yakında [Coding is for girls](https://www.youtube.com/channel/UC0hNd2uW8jTR5K3KBzRuG2A/feed) Youtube kanalında (İngilizce) giderek daha da fazla konu ele alınacak. + +Ele alınmış olan her bölümde, ilgili videoya ait bir bağlantı var. + +## Hakkında ve katkıda bulunma + +Bu eğitim [DjangoGirls](https://djangogirls.org/) tarafından sürdürülmektedir. Eğer hatalar bulursanız ve eğitimi güncellemek isterseniz lütfen [katkıda bulunma kılavuzunu takip edin](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Bu eğitimi diğer dillere çevirmemize yardımcı olmak ister misiniz? + +Şuan çeviriler crowdin.com platformunda tutuluyor: + +https://crowdin.com/project/django-girls-tutorial + +Eğer diliniz [crowdin](https://crowdin.com/)'de listelenmemişse, lütfen [yeni bir konu aç](https://github.com/DjangoGirls/tutorial/issues/new) aracılığıyla bizi bilgilendirin ki dilinizi ekleyebilelim. \ No newline at end of file diff --git a/tr/SUMMARY.md b/tr/SUMMARY.md new file mode 100644 index 00000000000..08e572a478e --- /dev/null +++ b/tr/SUMMARY.md @@ -0,0 +1,27 @@ +# Özet + +* [Giriş](README.md) +* [Kurulum](installation/README.md) +* [Kurulum (chromebook)](chromebook_setup/README.md) +* [İnternet nasıl çalışır](how_the_internet_works/README.md) +* [Komut satırına giriş](intro_to_command_line/README.md) +* [Python kurulumu](python_installation/README.md) +* [Kod editörü](code_editor/README.md) +* [Python'a giriş](python_introduction/README.md) +* [Django nedir?](django/README.md) +* [Django kurulumu](django_installation/README.md) +* [İlk Django projen!](django_start_project/README.md) +* [Django modelleri](django_models/README.md) +* [Django admin](django_admin/README.md) +* [Yayına alın!](deploy/README.md) +* [Django url'leri](django_urls/README.md) +* [Django views - yaratma zamanı geldi!](django_views/README.md) +* [HTML'ye giriş](html/README.md) +* [Django ORM ve QuerySets (Sorgu Setleri)](django_orm/README.md) +* [Template içinde dinamik veri](dynamic_data_in_templates/README.md) +* [Django templateleri](django_templates/README.md) +* [CSS - Güzelleştirin](css/README.md) +* [Template genişletmek](template_extending/README.md) +* [Uygulamanı genişlet](extend_your_application/README.md) +* [Django Formları](django_forms/README.md) +* [Sırada ne var?](whats_next/README.md) \ No newline at end of file diff --git a/tr/chromebook_setup/README.md b/tr/chromebook_setup/README.md new file mode 100644 index 00000000000..7e5c75d9265 --- /dev/null +++ b/tr/chromebook_setup/README.md @@ -0,0 +1,5 @@ +# Chromebook kurulumu + +> **Not** Zaten yükleme adımlarını uyguladıysanız, bunu tekrar yapmanıza gerek yok - doğrudan [Python'a Giriş](../python_introduction/README.md)'e atlayabilirsiniz. + +{% include "/chromebook_setup/instructions.md" %} \ No newline at end of file diff --git a/tr/chromebook_setup/instructions.md b/tr/chromebook_setup/instructions.md new file mode 100644 index 00000000000..667fec70ca4 --- /dev/null +++ b/tr/chromebook_setup/instructions.md @@ -0,0 +1,75 @@ +Chromebook kullanmıyorsanız, [bu bölümü atlayabilirsiniz](http://tutorial.djangogirls.org/en/installation/#install-python). Chromebook kullanıyorsanız kurulum deneyiminiz biraz farklı olacaktır. Diğer yükleme yönergelerini göz ardı edebilirsiniz. + +### Cloud IDE (PaizaCloud Cloud IDE, AWS Cloud9) + +Cloud IDE, size İnternette yazılım yükleyebileceğiniz, yazabileceğiniz ve çalıştırabileceğiniz bir kod düzenleyicisi ve çalışan bir bilgisayara erişim sağlayan bir araçtır. Eğitim boyunca, Cloud IDE sizin *yerel makinanız* gibi davranacak. macOS, Ubuntu veya Windows'daki sınıf arkadaşlarınız gibi terminal arayüzünde komut çalıştırmaya devam edeceksiniz, ancak terminaliniz Cloud IDE'nin sizin yerinize kuracağı başka bir bilgisayara bağlanacaktır. Cloud IDE'ler (PaizaCloud bulut IDE, AWS Cloud9) için talimatlar burada. Cloud IDE'lerden birini seçin ve o IDE'nin talimatlarini takip edin. + +#### PaizaCloud Cloud IDE + +1. [PaizaCloud Cloud IDE](https://paiza.cloud/)'ye gidin +2. Bir hesap oluşturun +3. *New Server*'a tiklayalim +4. Pencerenin sol tarafındaki Terminal butonuna tıklayalım + +Şimdi arayüzün sol tarafında bir takım buttonları görmeniz gerekiyor. "Terminal" buttonuna tıklayıp aşağıdaki komut satırını gösteren bir ekran açın: + +{% filename %}Terminal{% endfilename %} + + $ + + +Terminal Cloud 9 in hazırladığı komutları gösterecek. Ekranın boyunu değiştirebilir veya maxize edebilirsiniz. + +#### AWS Cloud9 + +1. [AWS Cloud9](https://aws.amazon.com/cloud9/)'a gidin +2. Bir hesap oluşturun +3. *Create Environment* a tıklayın + +Şimdi bir kenar çubuğu, bazı metinlerin olduğu büyük bir ana pencere ve en altta da buna benzer küçük penceresi olan bir arayüz görmelisiniz: + +{% filename %}bash{% endfilename %} + + yourusername:~/workspace $ + + +Bu alt alan * terminalinizdir , Cloud 9'un sizin için hazırladığı talimatlarınızı yazacağınız yer. Biraz daha büyük yapmak için bu pencereyi yeniden boyutlandırabilirsiniz.

+ +### Sanal ortam (Virtual environment) + +Bir sanal ortam(virtualenv diye de bilinir), üzerinde çalıştığımız proje için kullanışlı kodlarımızı yazabileceğimiz özel bir kutudur. Bunları çeşitli projelerimizi ayrı tutmak için kullanırız, böylece farklı projeler arasında işler karışmaz. + +Cloud 9 arayüzünün altındaki terminalinizde şunu çalıştırın: + +{% filename %}Cloud 9{% endfilename %} + + sudo apt update + sudo apt install python3.6-venv + + +Eğer hala çalışmıyorsa eğitmeninizden yardım isteyin. + +Sonra, bunu çalıştırın: + +{% filename %}Cloud 9{% endfilename %} + + mkdir djangogirls + cd djangogirls + python3.6 -mvenv myvenv + source myvenv/bin/activate + pip install django~={{ book.django_version }} + + +(son satırda bir tilde ve eşitlik işareti kullandığımıza dikkat edin: ~=). + +### GitHub + +Bir [Github](https://github.com) hesabı açın. + +### PythonAnywhere + +Django Girls eğitimi, yeni web uygulamanızı güçlendiren ve onu herkesin görebileceği şekilde herkes tarafından erişilebilen bir bilgisayara (sunucu olarak adlandırılır) taşıyan bir kod olan Deployment (Dağıtım) adlı bir bölümü içerir. + +Kılavuzu Chromebook üzerinden kullanırken bu bölüm biraz garip oluyor; zaten internet üzerindeki bir bilgisayar kullanılıyor (laptop dışında). Bununla birlikte, Cloud 9'u çalışma alanımız veya "devam etmekte" olan işlerimizin bulunduğu bir yer olarak, Python Anywhere'i de işlerimizi daha eksiksiz hale getirdiğimizde gösterebileceğimiz bir yer olarak düşündüğümüzde hala kullanışlıdır. + +Bu nedenle, [www.pythonanywhere.com](https://www.pythonanywhere.com) adresinden yeni bir Python Anywhere hesabı açın. \ No newline at end of file diff --git a/tr/code_editor/README.md b/tr/code_editor/README.md new file mode 100644 index 00000000000..f9ccff465bf --- /dev/null +++ b/tr/code_editor/README.md @@ -0,0 +1,11 @@ +# Kod editörü + +> Evden takip edenler için: Bu bölüm [Pythonu kurma & Kod Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA&t=4m43s) videosunda işlenmiştir. + +İlk kod satırınızı yazmak üzeresiniz, bu yüzden önce bir kod editörü edinme zamanı! + +> **Note** Eğer Chromebook kullanıyorsanız bu bölümü atlayın ve [Chromebook Kurulum](../chromebook_setup/README.md) u takip edin. +> +> **Note** Bunları Kurulum bölümünde yapmış olabilirsin, öyle ise hemen bir sonraki bölüme atlayabilirsin! + +{% include "/code_editor/instructions.md" %} \ No newline at end of file diff --git a/tr/code_editor/instructions.md b/tr/code_editor/instructions.md new file mode 100644 index 00000000000..d10b40034cc --- /dev/null +++ b/tr/code_editor/instructions.md @@ -0,0 +1,31 @@ +Birçok farklı kod editörü var, hangi editörü kullanacağınız kişisel tercihinize bağlı. Çoğu Python programcısı PyCharm gibi karmaşık fakat son derece güçlü IDE'leri (Integrated Development Environments-Entegre Geliştirme Ortamları) kullanır. Başlangıç seviyesi için bunlar muhtemelen pek uygun olmayacaktır. Bizim önerdiklerimiz aynı derecede güçlü fakat çok daha basit editörler olacak. + +Bizim tavsiyelerimiz aşağıdakiler, ama mentörünüze danışmak isteyebilirsiniz. + +## Gedit + +Gedit açık kaynaklı, ücretsiz bir editördür. Tüm işletim sistemlerinde kullanılabilir. + +[Buradan indirin](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text, ücretsiz deneme süresi olan çok popüler bir editördür ve tüm işletim sistemleri için mevcuttur. + +[Buradan indirin](https://www.sublimetext.com/) + +## Atom + +Atom başka bir popüler editör. Ücretsiz, açık kaynaklı ve Windows, macOS ve Linux için kullanılabilir. Atom GitHub tarafından geliştirilmiştir.

+ +[Buradan indirin](https://atom.io/) + +## Neden bir kod editörü kuruyoruz? + +Neden Word ya da Notepad kullanmak yerine, özel bir kod editörü yazılımı kurduğumuzu merak ediyor olabilirsiniz. + +Birinci nedeni yazdığımız kodun **sade yazı** olması gerektiği içindir ki Word gibi programlar sade yazı üretmezler (font ve şekillendirme desteklerler) ve [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format) gibi özel formatlar kullanılar. + +İkinci sebep ise kod editörlerinin kod düzenlemeye destek vermek - örneğin özel kelimeleri renklendirme ve otomatik parantez kapatma gibi - için özelleşmiş olmasıdır. + +Bütün bunları birazdan deneyimleyeceğiz. Yakında kod editörünüz güvenilir bir eski dostunuz gibi olacaktır :) diff --git a/tr/css/README.md b/tr/css/README.md new file mode 100644 index 00000000000..17fcb07d06b --- /dev/null +++ b/tr/css/README.md @@ -0,0 +1,303 @@ +# CSS – sayfanı güzelleştir! + +Blogumuz hala epey çirkin gözüküyor, değil mi? Güzelleştirme zamanı! Bunun için CSS kullanacağız. + +## CSS Nedir? + +Cascading Style Sheets (yani stil şablonu, kısaca CSS) bir işaretleme dili (örneğin HTML) ile yazılmış bir web sitesinin görünüm ve biçimini tanımlamakta kullanılan bir dildir. Bunu, web sayfamızın bir tür makyajı gibi düşünün ;) + +Fakat tekrar sıfırdan başlamak istemiyoruz, değil mi? Bir kez daha, programcıların internette ücretsiz sundukları bir şeyi kullanacağız. Bilirsiniz, tekerleği yeniden icat etmek pek eğlenceli değil. + +## Haydi Bootstrap kullanalım! + +Bootstrap HTML and CSS tabanlı çok güzel websiteleri geliştirmek için en yaygın olarak kullanılan çözümlerden biridir https://getbootstrap.com/ + +Twitter yazılımcıları tarafından geliştirilmeye başlanmış ve şu anda dünyanın her yerinden gönüllüler tarafından geliştirilmektedir! + +## Bootstrap kurulumu + +Bootstrap yüklemek için `.html` uzantılı dosyamızı kod düzenleyicisinde açalım ve `` bölümüne şunları ekleyelim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Bu satırlar projeye yeni dosya eklemez. Ancak İnternet'te var olan dosyalara işaret eder. Şimdi websitenizi açın ve sayfayı yenileyin. İşte oldu! + +![Şekil 14.1](images/bootstrap1.png) + +Şimdiden daha güzel gözüküyor! + +## Django'da statik dosyalar + +Son olarak **statik dosyalar** diye bahsettiğimiz şeylere daha yakından bakalım. Statik dosyalar, tüm CSS dosyaları ve resimlerindir. İçerikleri istek bağlamından (request context) bağımsızdır ve her kullanıcı için aynıdır. + +### Django'da statik dosyaları nereye koymalı + +Django dahili "admin" uygulaması için statik dosyaları nerede bulacağını biliyor. Şimdi sadece kendi `blog` uygulamamız için bazı statik dosyalar eklememiz gerekiyor. + +Bunu blog uygulamamızın içine `static` isimli bir klasör oluşturarak yapacağız: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │ └── templates + └── mysite + + +Django otomatik olarak uygulama klasörlerinizdeki "static" adlı klasörleri bulur. Böylece bunların içerikleri statik dosya olarak kullanabilir. + +## İlk CSS dosyanız! + +Şimdi web sayfana kendi stilini eklemen için bir CSS dosyası oluşturalım. `static` klasörü içinde `css` adlı yeni bir klasör oluştur. Şimdi de `css` klasörü içinde `blog.css` adlı yeni bir dosya oluşturalım. Hazır mısınız? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + + +Şimdi CSS yazma zamanı! `blog/static/css/blog.css` dosyasını kod editöründe açın. + +Burada CSS'yi özelleştirme ve öğrenmeyle ilgili çok derinlemesine gidemeyeceğiz. Daha fazla bilgi edinmek isterseniz, bu sayfanın sonunda ücretsiz CSS kursu için bir tavsiye var. + +Ama, biraz da yapalım. Acaba başlığımızın rengini mi değiştirsek? Bilgisayarlar renkleri anlamak için özel kodlar kullanır. Bu kodlar `#` ile başlar ve 6 harf(A-F) ve sayıyla(0-9) devam eder. Örneğin, mavinin renk kodu `#0000FF` dur. Birçok renk için renk kodlarını buradan bulabilirsiniz: http://www.colorpicker.com/. Ayrıca [tanımlı renkler](http://www.w3schools.com/colors/colors_names.asp)i de kullanabilirsin, `red` (kırmızı) ve `green` (yeşil) gibi. + +`blog/static/css/blog.css` dosyanıza şu kodu eklemelisiniz: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a { + color: #FCA205; +} +``` + +`h1 a` bir CSS seçicisidir (selector). Bu, stillerimizi `h1` öğesi içerisindeki `a` öğelerine uyguladığımız anlamına geliyor. Yani `

bağlantı

` gibi bir öğemiz olduğunda, ona `h1 a` stilimiz uygulanıyor. Bu durumda, rengi `#FCA205` yani turuncu yapmasını söylüyoruz. Ya da buraya kendi istediğin rengi koyabilirsin! + +Bir CSS dosyasında, HTML dosyasındaki öğeler için stil belirleriz. Öğeleri tanımlamanın ilk yolu öğe adıdır. Bunları HTML bölümünden etiket olarak hatırlıyor olabilirsiniz. Bunların hepsi öğe adına örnektir: `a`, `h1` ve `body`. Öğeleri aynı zamanda `class` ve `id` öznitelikleri ile tanımlarız. Sınıf ve id (kimlik), bir elemente senin tarafından verilen isimlerdir. Sınıflar bir öğe grubunu tanımlar, id'ler ise belirli bir öğeye işaret ederler. Örneğin şu aşağıdaki etiket CSS tarafından, `a` etiket adı, `external_link` class'ı ya da `link_to_wiki_page` id'si kullanılarak tanımlanabilir: + +```html + +``` + +CSS hakkında daha fazla bilgi edinmek için [CSS Selectors at w3schools](http://www.w3schools.com/cssref/css_selectors.asp) u okuyabilirsin. + +Sonrasında, ayrıca HTML şablonumuza (template) birtakım CSS eklemeleri yaptığımızı bildirmemiz gerekiyor. `blog/templates/blog/post_list.html` dosyasını açıp en başına şu satırı ekleyelim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} +``` + +Burada sadece statik dosya ekliyoruz :) `` ve `` etiketleri arasına, bootstrap linklerinden sonra, şu satırı ekleyelim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Tarayıcı, dosyaları verilen sırada okuyor. O yüzden doğru yerde olduğundan emin olmalıyız. Aksi takdirde dosyadaki kod, Bootstrap dosyası tarafından üzerine yazılabilir. Az evvel şablonumuza (template) CSS dosyamızın nerede olduğunu söylemiş olduk. + +Şimdi dosyanız şöyle olmalı: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

Yayın tarihi: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Tamamdır, dosyayı kaydedip sayfayı yenileyebilirsiniz. + +![Şekil 14.2](images/color2.png) + +Güzel! Şimdi de sitemizi biraz rahatlatıp sol kenar boşluğunu arttırsak mı? Hadi deneyelim! + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +body { + padding-left: 15px; +} +``` + +Bunu CSS dosyana ekleyip kaydet ve bak bakalım! Nasıl da oldu! + +![Şekil 14.3](images/margin2.png) + +Belki de başlığımızın yazı tipini özelleştirebiliriz? Aşağıdaki satırı `blog/templates/blog/post_list.html` dosyasının içinde `` bölümüne yapıştırın: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + +``` + +Daha önce yaptığımız gibi, sıralamayı ve yerini kontrol edelim `blog/static/css/blog.css` den önce olmalı. Bu satır Google Fonts'tan *Lobster* adlı bir font yükler (https://www.google.com/fonts). + +`blog/static/css/blog.css` CSS dosyasında `h1 isimli ` tanımlama bölümünü bulalım ( `{` ve `}` sembolleri arasındaki kod). `font-family: 'Lobster';` satırını parantezler arasına kopyalayıp sayfayı yenileyelim: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +h1 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![Şekil 14.3](images/font.png) + +Harika! + +Yukarıda bahsettiğimiz üzere, CSS'te class (sınıf) diye bir kavram var. Class'lar, temel olarak HTML kodunuzun bir kısmına isim vermenize yarar ve diğer kısımların stilini değiştirmeden yalnızca o kısmın stilini değiştirmenizi sağlar. Bu süper yararlı olabilir! Çok farklı şeyler yapan iki div'iniz var diyelim (örneğin biri başlık diğeri gönderinin metni). Class, farklı görünmelerini sağlamana yardımcı olur. + +Devam edelim ve HTML kodumuzun bir kısmına isim verelim. Başlığı içeren `div`'e `page-header` isimli bir class ekleyelim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Django Girls Blog

+
+``` + +Şimdi de gönderi metnini içeren `div`'e `post` isimli bir sınıf ekleyelim. + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+

Yayın tarihi: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +Şimdi farklı seçicilere (selectors) bildirim (deklarasyon) blokları ekleyeceğiz. `.` ile başlayan seçiciler sınıflara işaret eder. Web'de, aşağıdaki kodu anlamanıza yardımcı olacak pek çok güzel CSS öğreticisi ve açıklama mevcut. Şimdilik sadece bu kodu kopyalayıp `blog/static/css/blog.css` dosyamıza yapıştıralım: + +{% filename %}blog/static/css/blog.css{% endfilename %} + +```css +.page-header { + background-color: #ff9400; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +Sonra, blog gönderilerini gösteren HTML kodunu, class bildirimleri içine alın. <0>blog/templates/blog/post_list.html içindeki şu kısmı, + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+

Yayın tarihi: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +bununla değiştirelim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +
+
+
+ {% for post in posts %} +
+
+

Yayın tarihi: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Bu dosyaları kaydedin ve web sayfanızı yenileyin. + +![Şekil 14.4](images/final.png) + +Yaşasın! Harika görünüyor değil mi? Şimdi yapıştırdığımız koda bakıp CSS tarafından kullanılan ve HTML eklenmiş olan nesneleri bulalım. Tarihi turkuaz rengine çevirmek için nereyi değiştirmen gerekir? + +CSS ile biraz oynamaktan çekinme ve birkaç şeyi değiştirmeye calış. CSS ile oynamak neyin neyi etkilediğini anlamak için çok faydalı. Bir şeyleri bozarsan dert etme, her zaman geri alabilirsin! + +Ücretsiz [Codeacademy HTML & CSS kursu](https://www.codecademy.com/tracks/web)nu izlemeni gerçekten öneririz. Web sitelerini CSS'le güzelleştirmeyi iyice öğrenmene yardımcı olabilir. + +Sonraki bölüm için hazır mısın?! :) diff --git a/tr/css/images/bootstrap1.png b/tr/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/tr/css/images/bootstrap1.png differ diff --git a/tr/css/images/color2.png b/tr/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/tr/css/images/color2.png differ diff --git a/tr/css/images/final.png b/tr/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/tr/css/images/final.png differ diff --git a/tr/css/images/font.png b/tr/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/tr/css/images/font.png differ diff --git a/tr/css/images/margin2.png b/tr/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/tr/css/images/margin2.png differ diff --git a/tr/deploy/README.md b/tr/deploy/README.md new file mode 100644 index 00000000000..cccb685cbea --- /dev/null +++ b/tr/deploy/README.md @@ -0,0 +1,223 @@ +# Yayına alın! + +> **Not** Bir sonraki bölüm ara ara zor gelebilir. Dayanın ve bölümü bitirin; yayına alma, website geliştirme sürecinin önemli bir parçasıdır. Biraz daha uğraştırıcı olan websitesini canlıya alma işine eğitmeninizin yardım edebilmesi için bu bölümü tutorial'ın ortasına yerleştirdik. Böylece eğer zaman yetmezse tutorial'ı kendi başınıza bitirebilirsiniz. + +Şimdiye kadar web sitenize sadece kendi bilgisayarınızdan girilebiliyordu. Şimdi onu nasıl canlıya alacağınızı öğreneceksiniz! Yayına alma uygulamanızı internette yayınlama sürecidir, böylelikle insanlar sonunda gidip uygulamanızı görebilirler. :) + +Öğrendiğimiz üzere, bir websitesi bir sunucunun üstünde olmalıdır. İnternette birçok sunucu sağlayıcısı var, biz bunlardan [PythonAnywhere](https://www.pythonanywhere.com/) i kullanacağız. PythonAnywhere ücretsiz olduğu ve çok fazla ziyaretçisi olmayan küçük uygulamalar için uygun olduğu için kesinlikle yeterli olacaktır. + +Dışarıdan kullanacağımız diğer servis bir kod barındırma hizmeti olan [Github](https://www.github.com). Başkaları da var, ama neredeyse her programcının bir Github hesabı var, sizin de olacak! + +Bu üç yer sizin için önemli olacak. Lokal bilgisayarınız geliştirme ve test yaptığınız yer olacak. Değişikliklerden memnun olduğunuzda programınızın bir kopyasını Github'a koyacaksınız. Web siteniz PythonAnywhere üzerinde olacak ve onu kodunuzun bir kopyasını Github'dan alarak güncelleyeceksiniz. + +# Git + +> **Not** Eğer kurulum adımlarını zaten yaptıysanız, bunu tekrar yapmanıza gerek yok - bir sonraki bölüme geçip Git reponuzu oluşturabilirsiniz. + +{% include "/deploy/install_git.md" %} + +## Git repomuzu oluşturalım + +Git, bir kod deposu (repository veya kısaca "repo") olarak adlandırılan belirli dosyalardaki değişiklikleri izler. Projemiz için bir tane oluşturalım. Konsolunuzu açın ve `djangogirls` klasöründe aşağıdaki komutları çalıştırın: + +> **Not** Reponuzu oluşturmadan önce `pwd` (macOS/Linux) ya da `cd` (Windows) komutu ile şu an çalışmakta olan dizininizi kontrol edin. `djangogirls` dizininde olmanız gerekiyor. + +{% filename %}komut-satırı{% endfilename %} + + Hatırlatma: Kullanıcı adı seçerken Türkçe karakter kullanmayın. + $ git init + Initialized empty Git repository in ~/djangogirls/.git/ + $ git config --global user.name "Adınız" + $ git config --global user.email you@example.com + + +Git reposunu başlatmak proje başına sadece bir kere yapmamız gereken bir şeydir (ve kullanıcı adınız ve mailinizi tekrar girmeniz gerekmeyecek). + +Git bu dizindeki tüm dizin ve dosyalardaki değişiklikleri kaydedecek, ama takip etmemesini istediğimiz bazı dosyalar var. Bunu dizinin dibinde `.gitignore` adında bir dosya oluşturarak yapıyoruz. Editörünüzü açın ve aşağıdaki içeriklerle yeni bir dosya yaratın: + +{% filename %}.gitignore{% endfilename %} + + *.pyc + *~ + __pycache__ + myvenv + db.sqlite3 + /static + .DS_Store + + +Ve onu `.gitignore` ismi ile "djangogirls" dizinine kaydedin. + +> **Not** Dosya adının başındaki nokta önemli! Eğer dosyayı oluştururken zorluk yaşarsanız (örneğin Mac'ler Finder'dan nokta ile başlayan bir dosya oluşturmanızdan hoşlanmazlar), editörünüzdeki "Farklı Kaydet" özelliğini kullanın böylece çalışacaktır. +> +> **Not** `.gittignore` dosyasında belirttiğiniz dosyalardan biri `db.sqlite3` dosyası. Bu dosya tüm gönderilerinizin saklandığı yerel veritabanınızdır. Bunu reponuza eklemek istemiyoruz çünkü PythonAnywhere'deki web siteniz farklı bir veritabanı kullanacak. Bu veritabanı geliştirme makinenizdeki gibi SQLite olabilir ama genelde sitenizdeki çok daha fazla ziyaretçiyi kaldırabilecek MySQL adı verilen bir veritabanı kullanacaksınız. Her iki durumda da, GitHub kopyası için SQLite veritabanınızı yok saymanız, şu ana kadar oluşturduğunuz tüm gönderilerin lokalinizde kalması ve yalnızca lokal olarak kullanılabilmeniz anlamına geliyor. Canlıda onlara ulaşabilmeniz için yeniden eklemek zorundasınız. Lokal veritabanınızı farklı şeyleri test edebileceğiniz ve blogunuzdaki gerçek gönderilerinizi silmekten korkmayacağınız iyi bir oyun alanı olarak düşünmelisiniz. + +`git add` kullanmadan önce veya nelerin değiştiğinden emin değilseniz, `git status` komutunu kullanmakta yarar var. Bu, yanlış dosyaların eklenmesi ve gönderilmesi gibi istenmeyen sürprizlerin engelenmesine yardımcı olacak. `git status` komutu, takip edilmeyen/değişen/gönderilecek dosyalar (staged), dal durumu (branch status) gibi bilgiler verir. Çıktıda aşağıdakine benzer olmalıdır: + +{% filename %}komut-satırı{% endfilename %} + + $ 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/ + requirements.txt + + nothing added to commit but untracked files present (use "git add" to track) + + +Ve son olarak değişikliklerimizi kaydediyoruz. Komut satırına gidin ve aşağıdaki komutları çalıştırın: + +{% filename %}komut-satırı{% endfilename %} + + $ git add --all . + $ git commit -m "Django Girls uygulamam, ilk commit" + [...] + 13 files changed, 200 insertions(+) + create mode 100644 .gitignore + [...] + create mode 100644 mysite/wsgi.py + + +## Kodunu GitHub'a yollama (Push) + +Şimdi [Github.com](https://www.github.com) adresine gidip bir Github hesabı açmalıyız. (Eğer daha önceden hesap açtıysanız süper!) + +Sıra depomuzu oluşturmaya geldi. 'New Repository' tuşuna tıklayıp "my-first-blog" adında bir Github deposu oluşturalım. "initialize with a README" ve ".gitignore" kutularının seçili olmadığından emin olalım (zaten .gitignore dosyamızı kendimiz oluşturmuştuk). Son olarak License seçeneğinde 'None'yi seçelim. + +![](images/new_github_repo.png) + +> **Not** `my-first-blog` ismi önemli -- başka birşey de seçebilirsiniz, ama aşağıdaki yönergelerde çok geçiyor, her seferinde değiştirmeniz gerekir. En kolayı `my-first-blog` ismi ile devam etmek. + +Bir sonraki ekranda, reponuzun klonlama URL'ini goreceksiniz, bu URL takip eden bir kac komutta kullanacagiz: + +![](images/github_get_repo_url_screenshot.png) + +Şimdi bilgisayarınızdaki Git reposunu Github'daki repo ile ilişkilendirmemiz gerekiyor. + +Aşağıdakini komut satırına yazın (`< your-github-username>`) kısmını Github hesabını yarattığınız sırada kullandığınız kullanıcı adı ile değiştirin, büyüktür küçüktür işaretlerini eklemeyin): + +{% filename %}komut-satırı{% endfilename %} + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +Github kullanıcı adı ve şifrenizi girin, ardından aşağıdakine benzer bir şey görmeniz gerekiyor: + +{% filename %}komut satırı{% endfilename %} + + Username for 'https://github.com': zeynep + Password for 'https://zeynep@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/zeynep/my-first-blog.git + + * [new branch] master -> master + Branch master set up to track remote branch master from origin. + + + + +Kodunuz artık Github'da. Hemen gidip bak! İyi bir çevrede olduğunu göreceksiniz - [Django](https://github.com/django/django), the [Django Girls Tutorial](https://github.com/DjangoGirls/tutorial), ve daha birçok harika açık kaynak yazılım projesi de kodlarını Github'da tutuyor. :) + +# Blogumuzun PythonAnywhere üzerinde kurulumu + +## PythonAnywhere hesabı oluşturma + +> **Not** En baştaki kurulum adımlarında PythonAnywhere hesabını açmış olabilirsiniz - öyleyse bu kısmı tekrar yapmanıza gerek yok. + +{% include "/deploy/signup_pythonanywhere.md" %} + +## Sitemizin PythonAnywhere üzerinde yapılandırılması + +Ana [PythonAnywhere Dashboard](https://www.pythonanywhere.com/) a logosuna tıklayarak dönelim ve bir "Bash" console başlatalım – bu bilgisayarınızdaki komut satırının PythonAnywhere versiyonudur. + +![PythonAnywhere web arayüzündeki 'New Console' bölümünde, 'bash' için butona tıkla](images/pythonanywhere_bash_console.png) + +> **Not:** PythonAnywhere Linux tabanlıdır, eğer Windows kullanıyorsan, bilgisyarındaki konsoldan biraz farklı görünür. + +PythonAnywhere'de bir web yazılımı konuşlandırmak için kodun GitHub'dan çekilmesi ve PythonAnywhere'in bu kodu tanıyabilmesi ve çalıştırması için yapılandırmamız gerekiyor. Bu iş manuel olarak yapabilir ama PythonAnywhere bunu kolaylıkla yapabilmek için yardımcı bir araç sunar. İlk önce bu aracı kuralım: + +{% filename %}PythonAnywhere command-line{% endfilename %} + + $ pip3.6 install --user pythonanywhere + + +Bu komut ekrana bir takım şeyler yazar, mesela `Collecting pythonanywhere`, and eventually end with a line saying `Successfully installed (...) pythonanywhere- (...)`. + +Şimdi, programımızı otomatik olarak yapılandırmak için bu komutu calıştıralım. Aşağıdakileri PythonAnywhere konsoluna yazın (`` yerine kendi Github kullanıcı adınızı yazmayı unutmayın): + +{% filename %}PythonAnywhere komut satırı{% endfilename %} + + $ pa_autoconfigure_django.py https://github.com//my-first-blog.git + + +Bu komut çalışırken neler olup bittiğini izleyebilirsiniz: + +- Kodunuz GitHub'dan çekiliyor +- Tıpkı kendi bilgisayarındaki gibi PythonAnywhere üzerinde bir virtualenv oluşturuluyor +- Yayına almak için gerekli ayarlar (settings) dosyası güncelleniyor +- Yine `manage.py migrate` komutu ile PythonAnywhere üzerinde veritabanı oluşturuluyor +- Sabit dosyaların (bunları daha sonra öğreneceğiz) oluşturuluyor +- Ve web uygulamanızın API sinin PythonAnywhere tarafından sunulması için ayarlar yapılıyor + +Bu adımlar PythonAnywhere'de otomatikleştirilmiştir, fakat farklı herhangi bir sunucu sağlayacısıyla da aynı adımlar yapılmalıdır. Anlaşılması önemli olan nokta şu ki PythonAnywhere üzerinde yaratılan veritabanı ile kendi bilgisayarımızda yarattığımız veritabanı birbirinden tamamen ayrı -- dolayısı ile bu iki veritabanında saklanmış olan postlar ve kullanıcılar da farklı olabilir. + +Bu nedenle, aynen kendi bilgisayarımızda yapmış olduğumuz gibi, `createsuperuser` ile bir admin kullacısını oluşturmamız gerekiyor. PythonAnywhere otomatik olarak virtualenv i başlatmış olduğu için, bu kullanıcıyı hemen oluşturabiliriz: + +{% filename %}PythonAnywhere komut satırı{% endfilename %} + + (.pythonanywhere.com) $ python manage.py createsuperuser + + +Admin kullanıcısının detaylarını girin. Daha önce kendi bilgisayarınızda oluşturduğunuz kullanıcı detayları ile aynı olması hatırlamak açısından faydalı olacaktır, tabii PythonAnywhere üzerindeki şifreyi daha zor olarak tanımlamak isteyebiliriz. + +Şimdi, isterseniz, PythonAnywhere üzerindeki kodlara `ls` komutu ile göz atabilirsiniz: + +{% filename %}PythonAnywhere komut satırı{% endfilename %} + + (ola.pythonanywhere.com) $ ls + blog db.sqlite3 manage.py mysite requirements.txt static + (ola.pythonanywhere.com) $ ls blog/ + __init__.py __pycache__ admin.py forms.py migrations models.py static + templates tests.py urls.py views.py + + +"Files" sekmesine giderek de PythonAnywhere in sunduğu arayüz ile dosyaları gezinebilirsiniz. (Sağ üst köşedeki menü butonunu kullanarak, konsol sayfasından diğer PythonAnywhere sayfalarına geçebilirsiniz. Bu sayfaların birindeyken, sayfanın yukarısında diğer sayfalara olan linkleri görebilirsiniz.) + +## Şimdi Canlı Yayındasınız! + +Web siteniz şimdi İnternet üzerinden erişilebilir olmalı! PythonAnywhere "Web" tabına tıklayarak linki kopyalayın. Bu linki istediğiniz herkes ile paylaşabilirsiniz :) + +> **Not** Bu kılavuz başlangıçlara yönelik olduğu için basit tutmak amacıyla siteyi yayına alırken güvenlik açısından ideal olmayan bir kaç seçim yaptık. Bu projeyi ilerletmeye karar verirseniz veya yeni bir proje oluşturursanız, güvenlik tavsiyeleri için [Django deployment checklist](https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/) i inceleyin. + +## Hata ayıklama önerileri + +`pa_autoconfigure_django.py` komut dosyasını çalıştırırken bir hata görürseniz, bunun yaygın birkaç nedeni vardır: + +- PythonAnywhere API tokeni oluşturmayı unutmak. +- GitHub URL'nizde bir hata yapmak +- *"Could not find your settings.py"* hatası genellikle tüm gerekli dosyaların Git'e eklenmemiş ve/veya GitHub'a başarılı olarak push edilmemiş olmasından kaynaklanır. Tekrar Git bölümüne bakın + +Websitenizi ziyaret ettğiniz zaman bir hata ile karşılaşıtsanız ilk bakacağınız yer **error log** dosyasıdır. PythonAnywhere [Web](https://www.pythonanywhere.com/web_app_setup/) sekmesinde bu dosyaya link bulabilirsiniz. Hata mesajlarını buradan kontrol edebilrisiniz; en yakın zamandaki hatalar en sonda yer alır. + +[PythonAnywhere wiki üzerinde bazı genel hata giderme tüyoları](http://help.pythonanywhere.com/pages/DebuggingImportError) mevcuttur. + +Ve eğitmeniniz size yardıma hazır, unutmayın! + +# Sitenize göz atın! + +Siteniz için bulunan varsayılan sayfa ''İşe yaradı!'' demelidir. Tıpkı yerel bilgisayarınızda olduğu gibi. URL'nin sonuna `/admin/` yazın, 'giriş' tuşuna bastığınızda admin sitesi açılacak. Kullanıcı adı ve şifrenizle giriş yapın, sunucuda yeni blog yazıları girebildiğinizi göreceksiniz. + +Birkaç gönderi oluşturduktan sonra, lokalinize (PythonAnywhere'e değil) geri dönebilirsiniz. Değişiklikleri lokalinizde yapacaksınız. Bu web geliştirmekte yaygın bir akışıdır - değişiklikleri yerel olarak yapınız, bu değişiklikleri GitHub'a gönderin, değişikliklerinizi canlı Web sunucusuna çekin. Bu canlı web sitenizi bozmadan çalışmanızı ve yeni şeyler denemenizi sağlar. Bayağı havalı, di mi? + +Kendinize *KOCAMAN* bir aferin diyin! Yayına alma web geliştirme işinin en uğraştırmalı kısımlarından biridir ve genelde çalışana kadar insanların birkaç gününü alır. Ama işte siteniz canlıda, gerçek internette! diff --git a/tr/deploy/images/github_get_repo_url_screenshot.png b/tr/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/tr/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/tr/deploy/images/new_github_repo.png b/tr/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/tr/deploy/images/new_github_repo.png differ diff --git a/tr/deploy/images/pythonanywhere_bash_console.png b/tr/deploy/images/pythonanywhere_bash_console.png new file mode 100644 index 00000000000..0100aa4390a Binary files /dev/null and b/tr/deploy/images/pythonanywhere_bash_console.png differ diff --git a/tr/deploy/images/pythonanywhere_beginner_account_button.png b/tr/deploy/images/pythonanywhere_beginner_account_button.png new file mode 100644 index 00000000000..c1be0a14132 Binary files /dev/null and b/tr/deploy/images/pythonanywhere_beginner_account_button.png differ diff --git a/tr/deploy/images/pythonanywhere_create_api_token.png b/tr/deploy/images/pythonanywhere_create_api_token.png new file mode 100644 index 00000000000..abae45ae37a Binary files /dev/null and b/tr/deploy/images/pythonanywhere_create_api_token.png differ diff --git a/tr/deploy/images/pythonanywhere_web_tab_virtualenv.png b/tr/deploy/images/pythonanywhere_web_tab_virtualenv.png new file mode 100644 index 00000000000..6069f6da831 Binary files /dev/null and b/tr/deploy/images/pythonanywhere_web_tab_virtualenv.png differ diff --git a/tr/deploy/install_git.md b/tr/deploy/install_git.md new file mode 100644 index 00000000000..1dc6070f63c --- /dev/null +++ b/tr/deploy/install_git.md @@ -0,0 +1,52 @@ +Git, birçok programcı tarafından kullanılan bir "sürüm kontrol sistemi"dir. Bu yazılım dosyaların zaman içindeki değişimlerini izler, böylelikle sonradan eski sürümlere ulaşabilirsiniz. Biraz Microsoft Word'deki "değişiklikleri izle" özelliği gibi, ama çok daha güçlü. + +## Git'i kurmak + + + +Git'i [git-scm.com](https://git-scm.com/) adresinden indirebilirsiniz. Bir adım hariç bütün adımları "next"e basarak geçebilirsiniz. Bu adımda "Adjusting your PATH environment" dediği yerde, "Run Git and associated Unix tools from the Windows command-line" (en alttaki opsiyonu) seçin. Onun dışında varsayılanları seçebilirsiniz. Satır sonları için kodu çekerken Windows-stilini, kodu gönderirken Unix-stilini kullanın. + +Kurulum başarı ile tamamlandıktan sonra komut istemini veya powershelli yeniden başlatmayı unutmayın. + + + +Git'i [git-scm.com](https://git-scm.com/)'den indirin ve yönergeleri izleyin. + +> **Not** Eğer OS X 10.6, 10.7 ya da 10.8 kullanıyorsanız, giti buradan indirmeniz gerekmektedir: [OS X Snow Leopard için Git Kurulumu](https://sourceforge.net/projects/git-osx-installer/files/git-2.3.5-intel-universal-snow-leopard.dmg/download) + + + + + +{% filename %}komut-satırı{% endfilename %} + +```bash +$ sudo apt install git +``` + + + + + +{% filename %}komut-satırı{% endfilename %} + +```bash +$ sudo dnf install git +``` + + + + + +{% filename %}komut-satırı{% endfilename %} + +```bash +$ sudo zypper install git +``` + + \ No newline at end of file diff --git a/tr/deploy/signup_pythonanywhere.md b/tr/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..02d896740bc --- /dev/null +++ b/tr/deploy/signup_pythonanywhere.md @@ -0,0 +1,15 @@ +PythonAnywhere, "bulutta" bulunan sunucularda Python kodunu çalıştırmak için kullanılan bir hizmettir. Sitemizi, canlı ve internette barındırmak için bunu kullanacağız. + +PythonAnywhere'de bir "Beginner" hesabı için açın (ücretsiz seviye yeterli, kredi kartına ihtiyacınız yok). + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +![Ücretsiz 'Beginner' hesabı oluşturmak için PythonAnywhere kayıt sayfası düğmesi](../deploy/images/pythonanywhere_beginner_account_button.png) + +> **Not** Burada kullanıcı adınızı seçerken, blogunuzun URL'sinin `yourusername.pythonanywhere.com`, şeklini alacağını unutmayın, bu nedenle blogunuzun neyle ilgili olduğu için kendi takma adınızı veya bir adınızı seçin. + +## PythonAnywhere API token oluşturma + +Bu sadece bir kez yapmanız gereken bir şey. PythonAnywhere'e kaydolduğunuzda, dashboard sayfasına yönlendirileceksiniz. "Account" sayfanızın sağ üstüne yakın link'i bulun ve "API token" isimli sekmeyi seçerek "Create new API token" butonuna basın. + +![Hesaplar sayfasındaki API token sekmesi](../deploy/images/pythonanywhere_create_api_token.png) \ No newline at end of file diff --git a/tr/django/README.md b/tr/django/README.md new file mode 100644 index 00000000000..c76b588dd98 --- /dev/null +++ b/tr/django/README.md @@ -0,0 +1,27 @@ +# Django nedir? + +Django (/ˈdʒæŋɡoʊ/ *jang-goh*) Python ile yazılmış özgür ve açık kaynak bir web uygulama iskeletidir (framework). Bir web iskeleti, websitesi geliştirmeyi hızlandıran ve kolaylaştıran bir grup bileşendir. + +Bir web sitesi geliştirdiğinizde benzer türde bileşenlere her zaman ihtiyacınız olur: kullanıcılar için kimlik denetimi (üye olma, üye girişi, üye çıkışı), websiteniz için bir yönetim paneli, formlar, dosyaları yüklemek için bir yol, vs. + +Şanslısınız ki, uzun zaman önce başkaları web geliştiricilerinin yeni bir site yaratırken benzer problemlerle karşı karşıya geldiğini farkettiler ve takım kurup, kullanmanız için hazır bileşenleri olan iskeletler (ki Django bunlardan bir tanesi) oluşturdular. + +Frameworkler, siz yeni bir site oluştururken yükünüzü hafifletmek için tekerleği yeniden icat etmek zorunda. + +## Neden bir iskelete ihtiyacınız var? + +Django'nun aslında ne işe yaradığını anlamak için, sunuculara daha yakından bakmamız gerekiyor. İlk olarak sunucunun, onun size bir web sitesi sunmasını istediğinizi bilmesi gerekiyor. + +Bir posta kutusunun (port) gelen mektuplar (requests) için izlendiğini düşünün. Bu bir web sunucusu tarafından yapılıyor. Web sunucusu mektubu okur ve ardından bir web sayfası ile cevap verir. Ama bir şey gönderecekseniz, içeriğe ihtiyacınız var. Django içeriği oluşturmanıza yardımcı olan bir şeydir. + +## Birisi sunucunuzdan bir web sitesi istediğinde ne olur? + +Bir istek bir web sunucusuna geldiğinde, Django'ya aktarılır aslında ve Django da istenin ne olduğunu anlamaya çalışır. O da önce bir web sayfası adresi alır ve ne yapacağını anlamaya çalışır. Bu kısım Django'nun **url çözücüsü** (urlresolver) tarafından yapılıyor (websitesi adresine URL - Uniform Resource Locator - deniyor, dolayısıyla *url çözücü* ismi mantıklı oluyor). Çok akıllı değildir - kalıpların bir listesini alır ve URL'yi eşleştirmeye çalışır. Django kalıpları üstten alta doğru denetler ve eşleşen bir şey varsa isteği ilgili işleve (*view* olarak adlandırılan) aktarır. + +Mektup dağıtan bir postacı düşünün. Sokak boyunca yürüyor ve her evin numarasını mektubun üstündeki numara ile karşılaştırıyor. Eğer eşleşirse, mektubu oraya koyuyor. Url çözücü işte böyle çalışır! + +Tüm ilginç şeyler *view (görünüm)* fonksiyonunda yapılır: bir bilgi için veritabanına bakabiliriz. Belki de kullanıcı veride bir şeyin değişmesini istemiştir? "Lütfen iş tanımımı değiştirin." diyen bir mektup gibi. *View* bunu yapmaya izninizin olup olmadığını kontrol eder, iş tanımınızı sizin için günceller ve geri "Tamamdır!" mesajı yollar. Sonra *view* bir yanıt üretir ve Django bunu kullanıcının web tarayıcısına gönderebilir. + +Tabi ki yukarıdaki biraz basitleştirilmiş bir açıklama, ama şimdilik bütün teknik ayrıntıyı bilmene gerek yok. Genel bir fikrin olması yeterli. + +Doğrudan çok fazla detaya girmek yerine, Django ile bir şeyler oluşturacağız ve önemli kısımları yolda öğreneceğiz! \ No newline at end of file diff --git a/tr/django_admin/README.md b/tr/django_admin/README.md new file mode 100644 index 00000000000..642e2e56c5d --- /dev/null +++ b/tr/django_admin/README.md @@ -0,0 +1,57 @@ +# Django admin + +Az önce modellediğimiz gönderilere ekleme, düzenleme ya da silme işlemi yapmak için Django admini kullanacağız. + +Şimdi `blog/admin.py` dosyasını açarak içeriğini aşağıdaki şekilde değiştirelim: + +{% filename %}blog/admin.py{% endfilename %} + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Gördüğünüz gibi, bir önceki bölümde tanımladığımız gönderi modelini admin.py dosyamıza dahil (import) ettik. Admin sayfasında modelimizi görünür kılabilmek için, modeli `admin.site.register(Post)` ile kaydetmemiz gerekiyor. + +Tamam, artık admin sayfasında gönderi modelimize göz atabiliriz. Web sunucusunu çalıştırmak için komut satırında `python manage.py runserver` komutunu çalıştırmayı unutmayın. Tarayıcınıza gidin ve adresi yazın http://127.0.0.1:8000/admin/. Bunun gibi bir giriş ekranı göreceksiniz: + +![Giriş sayfası](images/login_page2.png) + +Giriş yapabilmek için, sitedeki her şey üzerinde kontrolü olan *superuser* - bir kullanıcı hesabı oluşturmanız gerekiyor. Komut satırına geri giderek `python manage.py createsuperuser` yazın ve enter'a basın. + +> Ağ sunucusu açıkken yeni komut yazmak için, yeni bir terminal penceresi açıp sanal ortamınızı (virtualenv) aktive etmeniz gerekmektedir. **Web sunucusu başlatma** bölümünün, **Sizin ilk Django projeniz!** kısmında yeni komutların nasıl yazılacağını gözden geçirdik. + +{% filename %}macOS veya Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py createsuperuser + + +Giriş satırı geldiğinde, kullanıcı adınızı (küçük harfler ile ve boşluksuz), email adresinizi ve parolanızı girin. **Yazdığınız şifreyi göremezseniz endişelenmeyin - olması gereken budur.** Devam etmek için şifreyi yazıp `enter` 'a basın. Çıktı şunun gibi olmalıdır ( belirtilen kullanıcı adı ve eposta size ait olmalı): + + Username: admin + Email address: admin@admin.com + Password: + Password (again): + Superuser created successfully. + + +Tarayıcınıza dönün. Oluşturduğunuz superuser'ın bilgileri ile giriş yaptığınızda Django'nun admin panelini göreceksiniz. + +![Django admin](images/django_admin3.png) + +Posts linkine tıklayın ve biraz kurcalayın. Beş altı blog yazısı ekleyin. İçeriği kafanıza takmayın - tutorial'dan bir kaç paragraf kopyalayıp yapıştırabilirsiniz. :) + +En azından iki ya da üç yazıya (ama hepsinin değil) yayınlama tarihi girdiğinizden emin olun. Bunu ileriki adımlarda kullanacağız. + +![Django admin](images/edit_post3.png) + +Eğer Django admin ile ilgili daha fazla şey öğrenmek istiyorsanız, Django dokümantasyonuna göz atabilirsiniz: https://docs.djangoproject.com/en/2.0/ref/contrib/admin/ + +Şu an muhtemelen enerjinizi geri toplamak için bir şeyler yemek veya kahve( ya da çay) içmek için iyi bir zaman. İlk Django modelinizi yarattınız. Küçük bir molayı hak ettiniz! \ No newline at end of file diff --git a/tr/django_admin/images/django_admin3.png b/tr/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..fb221bd18e1 Binary files /dev/null and b/tr/django_admin/images/django_admin3.png differ diff --git a/tr/django_admin/images/edit_post3.png b/tr/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..57299b6f5af Binary files /dev/null and b/tr/django_admin/images/edit_post3.png differ diff --git a/tr/django_admin/images/login_page2.png b/tr/django_admin/images/login_page2.png new file mode 100644 index 00000000000..c16d1aa4289 Binary files /dev/null and b/tr/django_admin/images/login_page2.png differ diff --git a/tr/django_forms/README.md b/tr/django_forms/README.md new file mode 100644 index 00000000000..a44c776675b --- /dev/null +++ b/tr/django_forms/README.md @@ -0,0 +1,449 @@ +# Django Forms + +Blogumuzda yapmak istediğimiz son şey blog yazılarını eklemek ve düzenlemek için güzel bir yapı oluşturmak. Django'nun `admin` arayüzü çok havalı, ama özelleştirilmesi ve güzel hale getirilmesi oldukça zor. `forms` (formlar) ile kendi arayüzümüz üstünde mutlak bir güce sahip olacağız - neredeyse hayal ettiğimiz her şeyi yapabiliriz! + +Django formlarının güzel yanı, hem sıfırdan bir form tanımlayabilmemiz hem de sonuçları modele kaydedecek bir `ModelForm` oluşturabilmemizdir. + +Tam olarak yapmak istediğimiz şey: `Post` modelimiz için bir form oluşturmak. + +Django'nun diğer önemli parçaları gibi, formların da kendi dosyası var: `forms.py`. + +`blog` dizinimizde bu isimde bir dosya oluşturmalıyız. + + blog + └── forms.py + + +Tamam, hadi dosyayı açalım ve aşağıdaki kodu yazalım: + +{% filename %}blog/forms.py{% endfilename %} + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Önce Django formları (`from django import forms`) ve tabii ki `Post` modelimizi (`from .models import Post`) import komutu ile dahil etmeliyiz. + +Tahmin etmiş olabileceğiniz gibi, formumuzun ismi `PostForm`. Django'ya bu formun bir `ModelForm` olduğunu belirtmeliyiz. Bunu `forms.ModelForm` sayesinde Django bizim için yapacaktır. + +Sırada Django'ya bu formu oluşturmak için hangi modelin kullanılması gerektiğini (`model = Post`) anlattığımız `class Meta` var. + +Son olarak, formumuzda hangi alan(lar)ın bulunması gerektiğini söyleyebiliriz. Bu senaryoda sadece `title` ve `text` alanlarının gösterilmesini istiyoruz - `author` şu anda giriş yapmış olması gereken kişidir (yani siz!) ve biz ne zaman yeni bir yazı oluşturursak `created_date` otomatik olarak (örn. kod içinde) ayarlanmalıdır, değil mi? + +Ve hepsi bu kadar! Şimdi tek yapmamız gereken formu bir *view* içinde kullanıp, template (şablon) içinde göstermek. + +Bir kere daha sayfaya bir bağlantı, bir url, bir view ve bir template oluşturacağız. + +## Formun bulunduğu sayfaya bağlantı oluşturma + +Şimdi `blog/templates/blog/base.html` isimli template'i açma zamanı. Öncelikle `page-header` adlı `div` öğesinin içine bir bağlantı ekleyeceğiz: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Yeni view'in (görünümün) adını `post_new` koymak istiyoruz. `"glyphicon glyphicon-plus"` class'ı kullandığımız bootstrap teması tarafından sağlanıyor ve bizim için bir artı işareti gösterecek. + +Satırı ekledikten sonra, HTML dosyanız bu şekilde görünmelidir: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load staticfiles %} +< html> + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Dosyayı kaydedip http://127.0.0.1:8000 sayfasını yeniledikten sonra, siz de bilindik `NoReverseMatch` hatasını görüyor olmalısınız, görüyorsunuz değil mi? Güzel! + +## URL + +`blog/urls.py` dosyasını açıp şu satırı ekleyelim: + +{% filename %}blog/urls.py{% endfilename %} + +```python +path('post/new', views.post_new, name='post_new'), +``` + +Ve kodun son hali şu şekilde görünecektir: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), + path('post/new/', views.post_new, name='post_new'), +] +``` + +Sayfayı yeniledikten sonra `post_new` view'ını oluşturmadığımız için `AttributeError` hatası alacağız. Şimdi onu ekleyelim. + +## post_new view + +Şimdi `blog/views.py` dosyasını açıp aşağıdaki satırları diğer `from` satırlarının olduğu yere ekleyelim: + +{% filename %}blog/views.py{% endfilename %} + +```python +from .forms import PostForm +``` + +Ve sonra bizim *view*'ımız: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Yeni bir `Post` formu oluşturmak için `PostForm()` fonksiyonunu çağırmak ve template'e iletmek gerekir. *view* kısmına geri döneceğiz, ancak şimdilik form için bir template oluşturalım. + +## Template + +Öncelikle `blog/templates/blog` dizininde `post_edit.html` isimli bir dosya oluşturmalıyız. Bir formu çalışır hale getirmek için birkaç şeye ihtiyacımız var: + +* Formu göstermek zorundayız. Örneğin bunu şu şekilde yapabiliriz {% raw %}`{{ form.as_p }}`{% endraw %}. +* Yukarıdaki örnek satır HTML form etiketi içine alınmalı: `...`. +* Bir `Kaydet` butonuna ihtiyacımız var. Bunu Bir HTML butonu ile yapıyoruz: ``. +* Ve son olarak, açılıştan hemen sonra `
` etiketini eklememiz gerekiyor {% raw %}`{% csrf_token %}`{% endraw %}. Formlarımızın güvenliğini sağladığı için bu çok önemlidir! Eğer bu kısmı unutursak, formu kaydetmeye çalıştığımızda Django şikayet edecektir: + +![CSFR Korumalı sayfa](images/csrf2.png) + +Tamam, hadi `post_edit.html` deki HTML'e bakalım: + +{% filename %}blog/templates/blog/post_edit.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} +

Yeni post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +Yenileme zamanı! Hey! Formun görüntülendi! + +![Yeni form](images/new_form2.png) + +Ama, bekle bir dakika! `title` ve `text` alanlarına bir şey yazdığımızda ve kaydetmeye çalıştığımızda, ne olacak? + +Hiçbir şey! Bir kere daha aynı sayfadayız, metnimiz gitmiş ve yeni gönderi de eklenmemiş. Peki neyi yanlış yaptık? + +Yanıt: hiçbir şeyi. Sadece *view*'ımızda biraz daha iş yapmamız gerekiyor. + +## Formu kaydetme + +Bir kez daha `blog/views.py`'yi açalım. Hali hazırda `post_new` view'ının tamamı aşağıdaki gibi olmalı: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Formu gönderdiğimizde, aynı view'a yönlendirileceğiz, bu sefer `request` içinde daha fazla bilgi olacak, özellikle `request.POST` içinde (isimlendirmenin blog gönderisiyle bir bağlantısı yoktur; daha fazla veri göndermemizle ilgilidir). HTML dosyasında `
` tanımımızdaki `method="POST"` değişkenini hatırlıyor musunuz ? Formdan gelen tüm alanlar şimdi `request.POST`'un içerisinde. `POST`'un ismini değiştirmememiz lazım (`method` için geçerli diğer değer sadece `GET`'dir, ama şimdi ikisi arasındaki farkın ne olduğunu anlatacak kadar vaktimiz yok). + +*view* içinde ele almamız gereken iki farklı durum var: ilki, sayfaya ilk kez eriştiğimizde boş bir form döndürmek isteğimiz durum, ikincisi ise *view*'e forma girdiğimiz form verisiyle geri döndüğümüz durum. Yani bir koşul eklememiz gerekiyor (bunun için `if` kullanacağız): + +{% filename %}blog/views.py{% endfilename %} + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Boşlukları doldurma zamanı `[...]`. Eğer `method` `POST` ise `PostForm`'u forma girilen veri ile oluşturmalıyız, değil mi? Bunu şu şekilde yapacağız: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST) +``` + +Bir sonraki işimiz formun doğru olup olmadığını kontrol etmek (tüm gerekli alanlar ayarlanmış ve yanlış değer verilmediyse). Bunu şu şekilde yaparız `form.is_valid()`. + +Formun doğruluğunu kontrol ediyoruz ve doğru ise kaydedebiliriz! + +{% 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() +``` + +Temel olarak, burada iki şey yaptık: formu `form.save` ile kaydettik ve bir author (yazar) ekledik (`PostForm`'da bir `author` tanımlı olmadığı ve bu zorunlu bir alan olduğu için). `commit=False` `Post` modelini henüzkaydetmek istemiyoruz demektir - öncelikle yazarı eklemeliyiz. Çoğu zaman `form.save()`'i `commit=False` olmadan kullanacağız, fakat bu durumda bu parametre ile kullanmalıyız. `post.save()` değişiklikleri saklar (author ekleyerek) ve yeni blog yazısı oluşturulur! + +Son olarak hızlı bir şekilde yeni oluşturulmuş blog gönderimiz için `post_detail` sayfasına gidebilirsek harika olurdu değil mi? Bunu yapmak için bir tane daha import yapmamız gerekli: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import redirect +``` + +Bunu dosyanın en başına ekleyelim. Şimdi yeni yarattığımız blog postu için "`post_detail` sayfasına git" diyebiliriz: + +{% filename %}blog/views.py{% endfilename %} + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail`, gitmek istediğimiz view'ın adı. Unutmayalım ki bu *view* için bir `pk` değişkeni lazım. Bu değeri viewlere aktarmak için `pk=post.pk` yazarız. Burada `post` yeni yarattığımız blog postudur! + +Çok şey söyledik ama artık *view*'ı tümüyle bir görmek isteriz, değil mi? + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Bakalım çalışacak mı? http://127.0.0.1:8000/post/new/ sayfasına gidelim, bir `title` ve `text` ekleyelim, kaydedelim... ve işte oldu! Yeni blog postu eklendi ve `post_detail` sayfasına yönlendirildik! + +Postu kaydetmeden önce publish date'e değer atandığını fark etmiş olabilirsin. Daha sonra *publish button*'nı **Django Girls Tutorial: Ek konular**'da anlatacağız. + +Süper! + +> Yakın zamanda Django'nun admin arayüzünü kullandığımız için, sistem hala giriş yaptığımızı düşünüyor. Bazı durumlar bizim oturumdan çıkmamıza neden olabilir (web tarayıcısını kapatmak, veritabanını tekrar başlatmak, vb). Eğer oturum açık olmadığı için post yaratmada hata alırsak admin sayfası olan http://127.0.0.1:8000/admin adresine gidip tekrar oturum açmalıyız. Bu sorunu geçici olarak düzeltecektir. Kalıcı çözüm, ana tutorialdan sonra **Ödev: Web sitene güvenlik ekleme!** bölümünde anlatılacak. + +![Oturum hatası](images/post_create_error.png) + +## Form doğrulama + +Şimdi de Django formlarının ne kadar havalı olduğunu görelim. Bir blog postunun `title` ve `text` alanları olmalı. `Post` modelimizde bu alanların gerekli olmadığını söylemedik (`published_date`'te yaptığımızın tersine), bu yüzden Django varsayılan olarak bu alanın dolu olmasını bekliyor. + +Formu `title` ve `text` olmadan kaydetmeye çalışalım. Ne olacak, tahmin edin! + +![Form doğrulama](images/form_validation2.png) + +Django tüm alanların doğruluğunu bizim için kontrol ediyor. Ne güzel, değil mi? + +## Form düzenleme + +Artık yeni bir form oluşturmayı biliyoruz. Peki, mevcut bir formu güncellemek için ne yapmalı? Bu az önce yaptığımız şeyle çok benzer. Hızlıca bazı önemli şeyleri oluşturalım. (Eğer birşeyi anlamazsan, mentörüne sormalısın veya önceki bölümlere bakmalısın, çünkü bütün bu adımları daha önce bitirdik.) + +`blog/templates/blog/post_detail.html` dosyasını açalım ve şu satırı ekleyelim + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +böylece şablon şöyle görünecektir: + +{% 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 %} +``` + +`blog/urls.py` dosyasını açıp şu satırı ekleyelim: + +{% filename %}blog/urls.py{% endfilename %} + +```python + path('post//edit/', views.post_edit, name='post_edit'), +``` + +Daha önce kullandığımız `blog/templates/blog/post_edit.html` template'ini tekrar kullanacağız, geriye bir tek *view* kalıyor. + +Şimdi `blog/views.py` dosyasını açıp en sonuna şu satırı ekleyelim: + +{% 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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Bu nerdeyse bizim `post_new` view'inin aynısı, değil mi? Ama, tam da değil. Özellikle url'lerden ekstra bir `pk` parametresi geçiriyoruz. Sonra,`get_object_or_404(Post, pk=pk)` ile düzenlemek istediğimiz `Post` modelini alıyoruz ve daha sonra bir form oluşturduğumuzda bu yazı objesini `instance` olarak geçiriyoruz, aynı şekilde formu kaydettiğimizde de… + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(request.POST, instance=post) +``` + +…ve düzenlemek için bu post ile ilgili bir form açtığımızda: + +{% filename %}blog/views.py{% endfilename %} + +```python +form = PostForm(instance=post) +``` + +Tamam, çalışıp çalışmadığını test edelim! `post_detail` sayfasına gidelim. Sağ üst köşede bir düzenleme butonu olmalı: + +![Düzenle butonu](images/edit_button2.png) + +Butona tıklarsak blog postunu görmemiz lazım: + +![Form düzenleme](images/edit_form2.png) + +İstediğimiz gibi title ve text'i değiştirebilir ve sonra da kaydedebiliriz! + +Tebrikler! Uygulamamız gittikçe tamamlanıyor! + +Eğer Django formlarıyla ilgili daha çok bilgiye ihtiyacın varsa, dökümanı okumalısın: https://docs.djangoproject.com/en/2.0/topics/forms/ + +## Güvenlik + +Bir linke tıklayarak yeni bir blog oluşturabilmek harika! Ama şu anda sizin sitenizi ziyaret eden herkes yeni bir blog post yapabilecek ve bu muhtemelen isteyeceğiniz bir şey değil. Butonun sadece bize görünmesini sağlayalım. + +`blog/templates/blog/base.html` dosyasında yarattığımız `page-header` `div` ve anchor etiketlerini (tags) bulalım. Şuna benziyor olmalı: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +``` + +Linkin sadece admin olarak giriş yapmış kullanıcılara gözükmesi için başka bir `{% if %}` etiketi ekleyeceğiz. Şu anda bu kişi sensin! `` etiketini şöyle değiştirelim: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Bu `{% if %}` linkin sadece sayfayı görüntüleyen kullanıcı oturum açtıysa görüntülenmesini sağlayacak. Bu yeni post yaratılmasını kesin olarak engellemese de iyi bir başlangıç. Güvenlik konusu ek derslerde daha çok ele alınacak. + +Az evvel detay sayfamıza eklediğimiz düzenle ikonunu hatırladınız mı? Aynı değişikliği oraya da eklemek istiyoruz. Böylelikle başka insanlar var olan gönderileri düzenleyemeyecekler. + +`blog/templates/blog/post_detail.html` dosyasını açalım ve şu satırı ekleyelim: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html + +``` + +Bu şekilde değiştirelim: + +{% filename %}blog/templates/blog/post_detail.html{% endfilename %} + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Yüksek olasılıkla login yapmış olduğunuz için sayfayı yenilediğinizde farklı bir şey göremeyeceksiniz. Sayfayı farklı bir tarayıcı veya görünmez pencere ile yükleyelim (Windows Edge üzerinde "InPrivate" olarak adlandırılan), göreceksiniz ki bağlantı ve ikon artık görüntülenmiyor! + +## Son bir şey daha: deployment (yayına alma) zamanı! + +Bakalım PythonAnywhere'de de çalışacak mı? Tekrar yayına alalım! + +* İlk önce kodumuzu commit edelim, sonra Github'a push edelim: + +{% filename %}komut-satırı{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Sitede gönderi oluşturmak ve düzenlemek için view'ler eklendi." + $ git push + + +* Sonra bir [PythonAnywhere Bash konsol](https://www.pythonanywhere.com/consoles/) una gidip: + +{% filename %}komut-satırı{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Açı parantezleri olmadan ``'i gerçek PythonAnywhere kullanıcı isminizle değiştirmeyi unutmayın). + +* Son olarak, ["Web" page](https://www.pythonanywhere.com/web_app_setup/) bölümüne geçin (konsolun sağ üst tarafındaki menü düğmesini kullanın) ve **Yeniden yükle** tuşuna basın. Değişiklikleri görmek için https://yourname.pythonanywhere.com blogunuzu yenileyin. + +İşte bu kadar! Tebrikler :) \ No newline at end of file diff --git a/tr/django_forms/images/csrf2.png b/tr/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/tr/django_forms/images/csrf2.png differ diff --git a/tr/django_forms/images/drafts.png b/tr/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/tr/django_forms/images/drafts.png differ diff --git a/tr/django_forms/images/edit_button2.png b/tr/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/tr/django_forms/images/edit_button2.png differ diff --git a/tr/django_forms/images/edit_form2.png b/tr/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/tr/django_forms/images/edit_form2.png differ diff --git a/tr/django_forms/images/form_validation2.png b/tr/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/tr/django_forms/images/form_validation2.png differ diff --git a/tr/django_forms/images/new_form2.png b/tr/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/tr/django_forms/images/new_form2.png differ diff --git a/tr/django_forms/images/post_create_error.png b/tr/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/tr/django_forms/images/post_create_error.png differ diff --git a/tr/django_installation/README.md b/tr/django_installation/README.md new file mode 100644 index 00000000000..957b9722f9c --- /dev/null +++ b/tr/django_installation/README.md @@ -0,0 +1,7 @@ +# Django kurulumu + +> **Not** Eğer Chromebook kullanıyorsanız, bu bölümü atlayın ve [Chromebook Kurulumu](../chromebook_setup/README.md)'ndaki talimatları takip ettiğinizden emin olun. +> +> **Not** Eğer kurulum aşamalarını başarıyla tamamladıysanız, Django kurulumunu o esnada yapmışsınızdır - direkt olarak diğer aşamaya geçebilirsiniz! + +{% include "/django_installation/instructions.md" %} \ No newline at end of file diff --git a/tr/django_installation/instructions.md b/tr/django_installation/instructions.md new file mode 100644 index 00000000000..20429332b59 --- /dev/null +++ b/tr/django_installation/instructions.md @@ -0,0 +1,218 @@ +> Bu bölümün bir kısmı Geek Girls Carrots tarafından hazırlanmış eğitimlere dayanılarak hazırlanmıştır (https://github.com/ggcarrots/django-carrots). +> +> Bölümün bu kısmı [django-marcador tutorial](http://django-marcador.keimlink.de/) e dayandırılmış ve Creative Commons Attribution-ShareAlike 4.0 International License koruması altında lisansı alınmıştır. Django-marcador tutorial'ının hakları Markus Zapke-Gründemann'e aittir. + +## Sanal ortam (Virtual environment) + +Django'yu yüklemeden önce kod ortamınızı düzenli tutmak için son derece yararlı bir araç yükleyeceğiz. Bu adımı atlayabilirsiniz, fakat atlamamanızı tavsiye ederiz. En iyi olası kurulum ile başlamanız sizi gelecekteki bir sürü sorundan koruyacaktır! + +Öyleyse bir **virtual environment** (diğer adıyla *virtualenv*) kuralım. Virtualenv Python/Django kurulumunuzu her proje için ayrı tutup izole eder. Bu, bir websitesine yapacağınız değişikliklerin diğer geliştirdiklerinize yansımayacağı anlamına gelir. Muazzam, değil mi? + +Yapmanız gereken tek şey `virtualenv` oluşturmak için bir dizin bulmak; örneğin giriş dizininiz. Windows'ta şöyle görünebilir: `C:\Users\Name` (`Name` yerine kullanıcı adınız gelir). + +> **NOTE:** Windows'ta bu dizinin özel karakterler içermediğinden emin olun; eğer kullanıcı adınız özel karakterler içeriyorsa, farklı bir dizin kullanın. Örneğin: `C:\djangogirls`. + +Bu eğitim için giriş dizininizde yeni açtığımız `djangogirls` adlı bir klasör kullanacağız: + +{% filename %}komut-satırı{% endfilename %} + + $ mkdir djangogirls + $ cd djangogirls + + +`myvenv` adında bir virtualenv oluşturacağız. Genel komut aşağıdaki şekilde olacak: + +{% filename %}komut-satırı{% endfilename %} + + $ python3 -m venv myvenv + + + + +Yeni bir `virtualenv` yaratmak için, komut satırını açmanız ve `python -m venv myvenv`'u çalıştırmanız gerekir. Böyle görünecektir: + +{% filename %}komut-satırı{% endfilename %} + + C:\Users\Name\djangogirls> python -m venv myvenv + + +Burada `myvenv`, `virtualenv`'inizin ismidir. İstediğiniz herhangi bir ismi kullanabilirsiniz, ama küçük harfle yazılmasına ve boşluk, aksan karakterleri (örn: å) ve özel karakterleri kullanmamaya dikkat edin. Ayrıca ismi kısa tutmak işinize yarayacaktır zira bu ismi çokça kullanıyor olacaksınız! + + + + + +Hem Linux hem de macOS 'teyken `python3 -m venv myvenv` komutuyla bir `virtualenv` oluşturabiliriz. Şu şekilde gözükecektir: + +{% filename %}komut-satırı{% endfilename %} + + $ python3 -m venv myvenv + + +Burada `myvenv` sizin `virtualenv`'inizin ismi. Dilerseniz istediğiniz herhangi bir isim kullanabilirsiniz, ama büyük harf ve boşluk kullanmamaya dikkat edin. Ayrıca ismi kısa tutmak işinize yarayacaktır zira bu ismi çokça kullanıyor olacaksınız! + +> **NOT:** Debian/Ubuntu'nun bazı sürümlerinde aşağıdaki hatayı alabilirsiniz: +> +> {% filename %}komut-satırı{% endfilename %} +> +> Ensurepip kullanılamadığından sanal ortam başarıyla oluşturulamadı. Debian/Ubuntu sistemlerinde, aşağıdaki komutu kullanarak python3-venv paketini yüklemeniz gerekir. +> apt install python3-venv +> sudo komutu ile kullanmanız gerekebilir. python3-venv paketini indirdikten sonra, virtualenv'inizi yeniden oluşturun. +> +> +> Bu durumda, yukarıdaki yönergeleri izleyin ve `python3-venv` paketini yükleyin: +> +> $ sudo apt install python3-venv +> +> +> Bu şekilde Debian/Ubuntu'nun bazı sürümlerinde sanal ortamı başlatırken o anda aşağıdaki hatayı alabilirsiniz: +> +> {% filename %}komut-satırı{% endfilename %} +> +> Error: Command '['/home/zeynep/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> Bu sorunu çözmek için `virtualenv` komutunu kullanabilirsiniz. +> +> {% filename %}komut-satırı{% endfilename %} +> +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.6 myvenv +> +> +> **NOT:** Eğer aşağıdaki gibi bir hata alırsanız +> +> {% filename %}komut-satırı{% endfilename %} +> +> E: Unable to locate package python3-venv +> +> +> o zaman yerine bunu çalıştırın: +> +> {% filename %}komut-satırı{% endfilename %} +> +> sudo apt install python3.6-venv +> + + + +## Virtualenv ile çalışmak + +Yukarıdaki komutlar `myvenv` (veya seçtiğiniz isimde) bir klasör oluşturacaktır. Bu klasörde birçok dosya ve klasör bulunur. + + + +Şu komutu çalıştırarak virtualenv'i başlatın: + +{% filename %}komut-satırı{% endfilename %} + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +> **NOT:** Windows 10'da , Windows PowerShell tarafından `bu senaryoların uygulanması bu sistemde devre dışıdır` diyen bir hata alabilirsiniz. Bu durumda, başka bir Windows PowerShell'i, "Yönetici Olarak Çalıştır" seçeneğiyle açın. Bundan sonra sanal ortamınızı başlatmadan önce aşağıdaki komutları yazmayı deneyin: +> +> {% filename %}komut-satırı{% 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 +> + + + + + +Şu komutu çalıştırarak virtualenv'i başlatın: + +{% filename %}komut-satırı{% endfilename %} + + $ source myvenv/bin/activate + + +`myvenv` yerine kendi seçtiğiniz `virtualenv` ismini koymayı unutmayın! + +> **NOT:** bazen `source` komutu kullanılamıyor durumda olabilir. Böyle durumlarda onun yerine aşağıdaki komutu da kullanabilirsiniz: +> +> {% filename %}komut-satırı{% endfilename %} +> +> $ . myvenv/bin/activate +> + + + +Konsolunuzda komut isteminizin başında `(myvenv)` gördüğünüzde `virtualenv`'in çalıştığını anlayabilirsiniz. + +Virtualenv ile çalışırken `python` otomatik olarak doğru sürümü çalıştıracaktır. Yani `python3` yerine `python` yazabilirsiniz. + +Artık bütün gerekli uygulamaları bir araya getirdiğimize göre sonunda Django'yu yükleyebiliriz! + +## Django'yu yüklemek + +`virtualenv`'i çalıştırdığınıza göre, şimdi Django'yu yükleyebilirsiniz. + +Bunu yapmadan önce, bilgisayarımızın, Django yüklemek için kullanacağımız yazılım olan `pip`'in en son versiyonuna sahip olduğundan emin olmalıyız: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~$ python3 -m pip install --upgrade pip + + +### Requirements ile paketleri yüklemek + +Bir requirements dosyası `pip install` ile yüklenmesi gereken paketlerin listesini tutar: + +Önce `djangogirls /` klasörü içinde `requirements.txt` dosyası oluşturalım: + + djangogirls + └───requirements.txt + + +`djangogirls/requirements.txt` dosyanıza şu kodu eklemelisiniz: + +{% filename %}djangogirls/requirements.txt{% endfilename %} + + Django~={{ book.django_version }} + + +Simdi, Django kurmak için `pip install -r requirements.txt` komutunu çalıstırın. + +{% filename %}komut-satırı{% 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.1MB) + Installing collected packages: Django + Successfully installed Django-{{ book.django_version }} + + + + +> Eğer Windows'ta pip komutunu kullanırken bir hata aldıysanız, lütfen projenizin isminin özel karakter içerip içermediğini kontrol edin (örneğin `C:\Users\User Name\djangogirls`). Eğer böyleyse, lütfen boşluksuz veya özel karaktersiz bir yer kullanmayı düşünün (öneri: `C:\djangogirls`). Yeni dizinde yeni bir virtualenv oluşturun, arkasından eskisini silin ve yukarıdaki komutu yeniden deneyin. (virtualenv dizinini taşımak işe yaramayacaktır çünkü virtualenv mutlak yollar kullanır.) + + + + + +> Django kurmaya çalışırken komut satırınız donabilir. Bu durumda, yukarıdaki komut yerine şu komutu kullanın: +> +> {% filename %}komut-satırı{% endfilename %} +> +> C:\Users\Name\djangogirls> python -m pip install -r requirements.txt +> + + + + + +> Eğer Ubuntu 12.04 işletim sisteminde pip komutunu çağırırken bir hata iletisiyle karşılaştıysanız `python -m pip install -U --force-reinstall pip` komutunu çalıştırarak pip kurulumunu onarmayı deneyin. + + + +İşte bu kadar! Sonunda Django uygulamanızı oluşturmaya hazırsınız! \ No newline at end of file diff --git a/tr/django_models/README.md b/tr/django_models/README.md new file mode 100644 index 00000000000..46fc539514b --- /dev/null +++ b/tr/django_models/README.md @@ -0,0 +1,200 @@ +# Django modelleri + +Şimdi blogumuzdaki bütün yazıları kaydedebileceğimiz bir şey oluşturmak istiyoruz. Ama bunu yapabilmek için önce `nesne` dediğimiz şeylerden (objects) bahsetmemiz gerekiyor. + +## Nesneler (Objects) + +Programlamada `nesneye yönelik programlama` denen bir kavram bulunuyor. Buradaki ana fikir her şeyi sıkıcı program komutları dizisi şeklinde yazmak yerine, konseptleri modelleyip birbirleri ile nasıl etkileşime geçeceklerini tanımlamak. + +Peki bir nesne nedir? Nesne bir özellikler ve hareketler bütünüdür. Kulağa garip geliyor olabilir, bir örnekle açıklayalım. + +Eğer bir kediyi modellemek istiyorsak, `Kedi` nesnesini oluştururuz ve bu nesne şöyle özelliklere sahip olur: `renk`, `yas`, `ruh_hali` (örneğin; iyi, kötü, uykulu ;)) ve `sahibi` (ki bu da bir `insan` nesnesi olur ya da eğer sokak kedisi ise bu özellik boş olabilir). + +Ayrıca `Kedi` bazı hareketlere sahiptir: `miyavla`, `tirmala` ya da `beslen` (bu durumda kediye biraz `KediMamasi` vermemiz gerekir ki o da kendine ait özellikleri olan başka bir nesne olarak tanımlanabilir, bu durumda onun özellikleri arasında da `tat` yer alabilir). + + Kedi + -------- + renk + yas + ruh_hali + sahibi + miyavla() + tirmala() + beslen(kedi_mamasi) + + + KediMamasi + -------- + tat + + +Yani aslında ana fikir, gerçek nesneleri kod içinde özellikleri (`nesne özellikleri`) ve hareketleri (`metodlar`) ile tanımlamak. + +Öyleyse blog gönderilerini nasıl modelleyeceğiz? Bir blog tasarlamak istiyoruz, degil mi? + +Cevaplamamız gereken soru: Bir blog gönderisi nedir? Özellikleri ne olmalıdır? + +Tabii ki blog gönderimizin içeriği için yazı ve bir de başlık lazım, değil mi? Kimin yazdığını da bilsek iyi olur - dolayısı ile bir de yazara ihtiyacımız var. Son olarak, gönderinin ne zaman yaratıldığını ve yayınlandığını da bilmek isteyebiliriz. + + Post + -------- + title + text + author + created_date + published_date + + +Bir blog gönderisi ile ne tür şeyler yapılabilir? Gönderiyi yayınlayan bir `method` olması güzel olurdu, değil mi? + +Bu yüzden `publish` metoduna ihtiyacımız olacak. + +Ne elde etmek istediğimizi bildiğimize göre, haydi bunu Django'da modellemeye başlayalım! + +## Django modeli + +Nesnenin ne olduğunu bildiğimize göre, blog gönderimiz için bir Django modeli oluşturabiliriz. + +Django'da modeller özel bir çeşit nesnedir - `veritabanı`'na kaydedilir. Veritabanı (database) belirli bir veri topluluğuna verdiğimiz isim. Veritabanında, kullanıcılar, blog gönderileri, vs. ile ilgili bilgileri saklarız. Verilerimizi depolamak için SQLite veritabanını kullanacağız. Bu varsayılan Django veritabanı adaptörü - şimdilik bizim için yeterli olacaktır. + +Veritabanındaki bir modeli, sütunları (alan adı) ve satırları (veri) olan bir hesap çizelgesi olarak düşünebilirsiniz. + +### Uygulama oluşturma + +Her şeyi derli toplu tutmak için, projemizin içinde ayrı bir uygulama oluşturacağız. Her şeyin en başından düzenli olması çok iyidir. Bir uygulama oluşturmak için aşağıdaki komutu konsolda çalıştırmamız gerekiyor (`djangogirls` dizininden `manage.py` dosyasının bulunduğu yer): + +{% filename %}macOS ve Linux:{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +{% filename %}Windows:{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> python manage.py startapp blog + + +Yeni bir `blog` dizininin oluşturulduğunu ve bir dizi dosya içerdiğini fark edeceksiniz. Projemizdeki dizinler ve dosyalar şu sekilde görünüyor olmalı: + + djangogirls + ├── blog + │   ├── __init__.py + │   ├── admin.py + │   ├── apps.py + │   ├── migrations + │   │   └── __init__.py + │   ├── models.py + │   ├── tests.py + │   └── views.py + ├── db.sqlite3 + ├── manage.py + ├── mysite + │   ├── __init__.py + │   ├── settings.py + │   ├── urls.py + │   └── wsgi.py + └── requirements.txt + + +Uygulamamızı oluşturduktan sonra, Django'ya bunu kullanmasını söylememiz lazım. Bunu `mysite/settings.py` dosyasından yapacağız -- kod editörümüzde açalım. `INSTALLED_APPS`'ı bulup `]` karakterinin üzerindeki satıra `'blog',` yazmamız lazım. Sonuç aşağıdaki gibi görünmeli: + +{% 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', +] +``` + +### Post (Blog gönderisi) modeli oluşturma + +`blog/models.py` dosyasında `Models` denilen bütün nesneleri tanımlıyoruz - burası blog postumuzu tanımlayacağımız yer. + +Şimdi `blog/models.py` dosyasını açalım ve içindeki her şeyi silip şu kodu yazalım: + +{% filename %}blog/models.py{% endfilename %} + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> `str`'nin her iki tarafında da 2 tane alt çizgi (`_`) kullandığımızdan emin olalım. İki alt çizgi Python dilinde sık kullanılır, bazen "dunder" olarak da anılır ("double-underscore"un kısaltması). + +Biraz korkunç görünüyor, değil mi? Ama merak etmeyin - hepsinin ne anlama geldiğini tek tek anlatacağız! + +`from` veya `import` ile başlayan tüm satırlar başka yerlerden bir şeyleri projemize dahil eder. Yani, başka yerlerde tanımlanmış kodları dosyalarımıza kopyalamak yerine, bu kodların bir kısmını `from ... import ...` kullanarak kodumuza dahil edebiliriz. + +`class Post(models.Model):` - bu satır modelimizi tanımlıyor (bir `nesne`). + +- `class` bir nesne tanımladığımızı belirten anahtar kelime. +- `Post` modelimizin ismi. Başka bir isim de verebilirdik (yeter ki özel karakterler ve boşluk kullanmayalım). class isimleri her zaman büyük harf ile başlamalıdır. +- `models.Model` Post'un bir Django Modeli olduğunu belirtir, bu şekilde Django onu veritabanında tutması gerektiğini bilir. + +Şimdi daha önce bahsettiğimiz özellikleri tanımlayabiliriz: `title`, `text`, `created_date`, `published_date` ve `author`. Bunun için her alanın türünü tanımlamamız gerekir (Bir metin mi? Bir numara mı? Bir tarih mi? Başka bir nesneye referans mı, örneğin User?) + +- `models.CharField` - belirli bir uzunluktaki metinleri tanımlamak için kullanılır. +- `models.TextField` - bu da uzun metinleri tanımlar. Blog gönderileri için biçilmiş kaftan, değil mi? +- `models.DateTimeField` - bu da gün ve saati tanımlamada kullanılır. +- `models.ForeignKey` - başka bir modele referans tanımlar. + +Burada her detayı anlatmıyoruz, çünkü çok fazla vakit alır. Model alanları (model fields) hakkında daha fazla bilgi edinmek ve yukarıda açıklananların dışındaki alanları nasıl tanımlayacağınızı öğrenmek istiyorsanız Django dokümantasyonuna bir göz atabilirsiniz (https://docs.djangoproject.com/en/2.0/ref/models/fields/#field -types). + +Peki ya `def publish(self):` nedir? Bu, daha önce bahsettiğimiz `publish` metodu. `def` bunun bir fonksiyon/method olduğunu söylüyor. `publish` ise methodumuzun ismi. Eğer isterseniz metodun adını değiştirebilirsiniz. Methodlara isim verirken küçük harf kullanmaya ve boşluk yerine alt çizgi kullanmaya dikkat ediyoruz. Örneğin ortalama fiyatı hesaplayan bir methoda `ortalama_fiyati_hesapla` ismi verilebilir. + +Genellikle methodlar bir şeyler döndürür (`return` anahtar kelimesi döndür anlamına gelir). `__str__` methodunda bunun örneğini görebiliriz. Bu durumda, `__str__()` methodunu çağırdığımızda Post başlığını içeren bir metin (**string**) elde ederiz. + +Aynı zamanda hem `def publish(self):` satırının, hem de `def __str__(self):` satırının sınıfımızın içinde girintili (indented) bir şekilde yazıldığına dikkat edin. Python boşluklara duyarlı olduğu için class'ın içindeki metodları girintili olarak yazmamız gerekiyor. Aksi takdirde methodlar class'a ait olmaz ve beklenmedik davranışlarla karşılaşabilirsiniz. + +Buraya kadar model hakkında anlamadığın bir şeyler varsa mentörüne sormaktan çekinme! Bu konuların biraz karmaşık olduğunun farkındayız. Özellikle hem nesneleri hem de fonksiyonları aynı anda öğrenmek kolay değil. Umarız gizemi biraz azalmaya başlamıştır! + +### Modeller için veritabanında tablo oluşturma + +Son adımımız yeni modelimizin veritabanına eklenmesini sağlamak. Öncelikle Django'nun modelimizde bazı değişiklikler yaptığımızı bilmesini sağlamalıyız. (Daha yeni oluşturduk!) Komut satırına gidelim ve `python manage.py makemigrations blog` yazalım. Şöyle görünmeli: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + blog/migrations/0001_initial.py: + + - Create model Post + + +**Not:** Düzenlediğiniz dosyaları kaydetmeyi unutmayın. Aksi takdirde, bilgisayarınız önceki sürümü çalıştırarak beklenmedik hatalar verebilir. + +Django bize veritabanımıza uygulayabileceğimiz bir taşıma (migration) dosyası oluşturdu. `python manage.py migrate blog` yazdığın zaman şunu görmelisin: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate blog + Operations to perform: + Apply all migrations: blog + Running migrations: + Applying blog.0001_initial... OK + + +Yaşasın! Post modelimiz artık veritabanımızda! Görsek ne güzel olur, değil mi? Gelecek bölümde Post'un nasıl göründügünü göreceğiz! \ No newline at end of file diff --git a/tr/django_orm/README.md b/tr/django_orm/README.md new file mode 100644 index 00000000000..426062ecd83 --- /dev/null +++ b/tr/django_orm/README.md @@ -0,0 +1,221 @@ +# Django ORM ve QuerySets (SorguSetleri) + +Bu bölümde Django'nun veritabanına nasıl bağlandığını ve veriyi nasıl sakladığını öğreneceğiz. Hadi başlayalım! + +## QuerySet (SorguSeti) Nedir? + +QuerySet (SorguSeti), esas olarak, verilen bir modele ait nesnelerin listesidir. QuerySet veritabanından veri okumamıza, veriyi filtrelememize ve sıralamamıza imkan sağlar. + +En kolayı örnek ile öğrenmektir. Hadi deneyelim, olur mu? + +## Django shell (kabuk) + +Bilgisayarımızdaki konsolu açalım (PythonAnywhere'dekini değil) ve şu komutu yazalım: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py shell + + +Etkisi aşağıdaki gibi olmalı: + +{% filename %}komut-satırı{% endfilename %} + +```python +(InteractiveConsole) +>>> +``` + +Şu an Django'nun etkileşimli konsolundayız. Python istemine benziyor, ama biraz Django büyüsü eklenmiş :) Kuşkusuz burada da Python komutlarının tümünü kullanabiliriz. + +### Tüm nesneler + +Önce tüm post'larımızı görüntülemeyi deneyelim. Bunu aşağıdaki komut ile yapabiliriz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.all() +Traceback (most recent call last): + File "", line 1, in +NameError: name 'Post' is not defined +``` + +Ahh! Bir hata meydana geldi. Bize Post'un tanımlı olmadığını söylüyor. Bu doğru, öncesinde post'u dahil etmeyi (import) unuttuk! + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> from blog.models import Post +``` + +`blog.models`'dan `Post` modelini dahil ettik (import). Tekrar bütün post'ları görüntülemeyi deneyelim: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.all() +, ]> +``` + +Bu daha önce oluşturduğumuz post'ların listesi! Bu post'ları Django admin arayüzü ile oluşturduk. Fakat şimdi Python kullanarak yeni post'lar oluşturmak istiyoruz, peki bunu nasıl yaparız? + +### Nesne oluşturma + +Veritabanına yeni bir gönderi eklemek için: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.create(author=ben, title='Harika bir gönderi', text='Ne desem bilemedim') +``` + +Ancak bir eksiğimiz var: `ben`. Gönderinin author (yazar) özelliğine `User` (kullanıcı) modelinden türetilen bir nesneyi parametre olarak vermemiz gerekiyor. Nasıl verebiliriz? + +Öncelikle User (kullanıcı) modelini dahil edelim: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> from django.contrib.auth.models import User +``` + +Veritabanımızda hangi kullanıcılar var? Şu şekilde görebiliriz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> User.objects.all() +]> +``` + +Bu daha önce yarattığımız süper kullanıcı (superuser)! Şimdi bu kullanıcının örneğini (instance) alalım (bu satırı kendi kullanıcı adınızı kullanmak için değiştirin): + +{% filename %}komut-satırı{% endfilename %} + +```python +ben = User.objects.get(username='zeynep') +``` + +Görebildiğiniz gibi, şimdi `kullanıcı adı` 'zeynep' olan bir `User` aldık. Temiz! + +Gönderimizi artık kaydedebiliriz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.create(author=ben, title='Harika bir gönderi', text='Ne desem bilemedim') + +``` + +Yaşasın! Çalışıp çalışmadığını kontrol etmek ister misin? + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.all() +, ,]> +``` + +İşte bu kadar, listede bir gönderi daha! + +### Daha fazla post ekle + +Şimdi daha fazla post ekleyerek biraz eğlenebilir ve nasıl çalıştığını görebiliriz. İki veya üç tane daha ekleyelim ve sıradaki bölüme geçelim. + +### Nesneleri filtrelemek + +QuerySet'lerin büyük bir bölümü nesneleri filtreleme yeteneğidir. Diyelim ki, Zeynep tarafından yazılmış tüm post'ları (gönderileri) bulmak istiyoruz. `Post.objects.all()` içindeki `all` yerine `filter` kullanacağız. Parantez içine istediğimiz blog gönderilerinin sağlaması gereken şartları belirteceğiz. Örneğimizde, `author` `ben`'e eşitti. Django'da bu filtreyi şöyle yazıyoruz: `author=ben`. Şu an kod parçacığımız şöyle görünüyor: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.filter(author=ben) +[, , , ] +``` + +Ya da belki `title` (başlık) alanında içinde 'Nefis' kelimesini içeren tüm gönderileri görmek istiyoruz? + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.filter(title__contains='Nefis') +[] +``` + +> **Not** `title` ve `contains` arasında iki tane alt çizgi (`_`) var. Django'nun ORM'i bu söz dizimini, özelliği ("title") ve operasyon veya filtreyi ("contains") ayırmak için kullanır. Eğer sadece tek bir alt çizgi kullanırsanız, "FieldError: Cannot resolve keyword title_contains" şeklinde bir hata alacaksınız. + +Ayrıca yayınlanmış tüm post'ların bir listesini alabiliriz. Bunu `published_date` (yayinlanma_tarihi) alanı geçmiş bir tarih olan tüm gönderileri filtreleyerek yapıyoruz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> from django.utils import timezone +>>> Post.objects.filter(published_date__lte=timezone.now()) + +``` + +Maalesef python konsolundan eklediğimiz post (gönderi) henüz yayınlanmadı. Fakat bunu değiştirebiliriz! Önce yayınlamak istediğimiz bir gönderi nesnesi bulalım: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> post = Post.objects.get(title="Harika bir gönderi") +``` + +Ardından `publish` (yayinla) methodu ile gönderiyi yayınlayalım: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> post.publish() +``` + +Şimdi yayınlanmış gönderileri tekrar almaya çalışalım (3 kez yukarı ok tuşuna ve ardından `enter` tuşuna basın): + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()) +[] +``` + +### Nesneleri Sıralama + +QuerySets ayrıca nesne listesini sıralamanızı da sağlar. Nesneleri `created_date` (yaratilma_tarihi) özelliğine göre sıralamayı deneyelim: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.order_by('created_date') +[, , , ] +``` + +Başına `-` ekleyerek sıralamayı tersine de çevirebiliriz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> Post.objects.order_by('-created_date') +[, , , ]> +``` + +### QuerySets (SorguSetlerini) Zincirlemek (Chaining) + +Sorgu setlerini **zincirleyerek** beraber kullanabilirsiniz: + +```python +>>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +, , , ]> +``` + +Zincirleme gerçekten çok güçlüdür ve oldukça karmaşık sorgular yazmanıza imkan sağlar. + +Güzel! Şimdi bir sonraki bölüm için hazırız. Komut satırını kapatmak için, şunu yazalım: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> exit() +$ +``` \ No newline at end of file diff --git a/tr/django_start_project/README.md b/tr/django_start_project/README.md new file mode 100644 index 00000000000..4b18e6ff559 --- /dev/null +++ b/tr/django_start_project/README.md @@ -0,0 +1,203 @@ +# İlk Django projen! + +> Bu bölümün bir kısmı Geek Girls Carrots tarafından hazırlanmış eğitimlere dayanılarak hazırlanmıştır (https://github.com/ggcarrots/django-carrots). +> +> Bu bölümün [django-marcador tutorial](http://django-marcador.keimlink.de/)'a dayanan bazı kısımları Creative Commons Attribution-ShareAlike International License altında lisanslanmıştır. Django-marcador tutorial'ının hakları Markus Zapke-Gründemann'e aittir. + +Küçük bir blog oluşturacağız! + +İlk adım yeni bir Django projesi başlatmaktır. Aslında, bizim için bir Django projesinin iskeletini yaratacak Django tarafından sağlanan bazı komut dosyaları çalıştıracağız. Bu sadece daha sonra kullanacağımız dosyalar ve dizinler grubudur. + +Bazı dosya ve dizinlerin isimleri Django için çok önemlidir. Oluşturmak üzere olduğumuz dosyaları yeniden adlandırmamalısınız. Onları başka bir yere taşımak da iyi bir fikir değil. Django'nun önemli şeyleri bulabilmesi için belirli yapısını koruması gerekir. + +> virtualenv içindeki her şeyi çalıştırmayı unutmayın. Eğer konsolunuzda `(myenv)` öneki görmüyorsanız, virtualenv'inizi aktive etmeniz gerekir. **Django yükleme** bölümünün **Virtualenv ile çalışma** kısmında nasıl yapılacağını açıkladık. Windows'ta `myvenv\Scripts\activate` ya da, Mac OS ya da Linux'ta `source myvenv/bin/activate` yazmak bunu sizin için yapacaktır. + + + +MacOS veya Linux konsolunuzda aşağıdaki komutu çalıştırmalısınız; **sonuna nokta `(.)` koymayı unutmayın** + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +> Nokta `.` bu durumda çok önemlidir çünkü; koda, Django'yu şu an bulunduğunuz dizine kurmasını söyler. (nokta `.` şu anki dizine bir kısayoldur). +> +> **Not** Yukarıdaki komutu yazarken, sadece `django-admin` ile başlayan kısmı yazmanız gerektiğini unutmayın. Burada gösterilen `(myvenv) ~/djangogirls$` kısmı, sadece komut satırında girdinizi davet eden komut istemi örneğidir. + + + + + +Windows'ta aşağıdaki komutu çalıştırmalısınız. **(Sonuna nokta `.` koymayı unutmayın)**: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) C:\Users\Name\djangogirls> django-admin.exe startproject mysite . + + +> Nokta `.` bu durumda çok önemlidir çünkü; koda, Django'yu şu an bulunduğunuz dizine kurmasını söyler. (nokta `.` şu anki dizine bir kısayoldur). +> +> **Not** Yukarıdaki komutu yazarken, sadece `django-admin.exe` ile başlayan bölümü yazmanız gerektiğini unutmayın. Burada gösterilmiş olan `(myvenv) C:\Users\Name\djangogirls>` kısmı komut satırına girdiğiniz davet edecek olan komut istemi örneğidir. + + + +`django-admin.py` sizin için dosya ve dizinler oluşturacak bir komut dosyasıdır. Şimdi aşağıdaki gibi görünen bir dizin yapınız olmalı: + + djangogirls + ├───manage.py + ├───mysite + │ settings.py + │ urls.py + │ wsgi.py + │ __init__.py + └───requirements.txt + + +> **Not**: Dizin yapınızda, daha önceden oluşturduğumuz `myvenv` dizinini de göreceksiniz. + +`manage.py` site yönetimine yardımcı olan bir komut dosyasıdır. Bu dosya sayesinde, başka herhangi bir şey kurmadan bilgisayarımızda bir web sunucusunu başlatabileceğiz. + +`settings.py` dosyası, web sitesinizin ayarlarını içerir. + +Bir mektubu nereye götüreceğini kontrol eden postacının hakkında konuştuğumuzu hatırlıyor musun? `urls.py` dosyası `urlresolver`(urlçözümleyici) tarafından kullanılan kalıpların bir listesini içerir. + +Şu an için değişiklik yapmayacağımız diğer dosyaları yoksayalım. Unutmamanız gereken tek şey kazayla onları silmeyin! + +## Ayarları değiştirme + +Hadi `mysite/settings.py` dosyasında bazı değişiklikler yapalım. Daha önceden kurduğunuz kod düzenleyicinizi (editör) kullanarak dosyayı açın. + +**Not**: `settings.py` dosyasının da diğerleri gibi normal bir dosya olduğunu aklınızda tutun. Bunu kod düzenleyicisi içerisinde "dosya -> aç" menü eylemini kullanarak açabilirsiniz. Bu, size `settings.py` dosyanıza gidebileceğiniz ve bu dosyayı seçebileceğiniz her zamanki klasik pencereyi açacaktır. Alternatif olarak, bu dosyayı masaüstünüzdeki djangogirls klasörüne gidip sağ tıklayarak açabilirsiniz. Sonra, listeden kod düzenleyicinizi seçin. Dosyayı açabilen ancak düzenlemenize izin vermeyecek diğer programların yüklü olması ihtimaline karşın kod düzenleyicinin seçilmesi önem arz etmektedir. + +Web sitemizin doğru bir saate sahip olması güzel olurdu. [Wikipedia'nın zaman dilimleri listesine](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) gidin ve ilgili saat dilimini kopyalayın (ZD) (Ör. `Europe/Berlin`). + +`settings.py` dosyasında `TIME_ZONE` ifadesini içeren satırı bulun ve kendi seçtiğiniz zaman dilimine göre uyarlayın: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +TIME_ZONE = 'Europe/Istanbul' +``` + +Bir dil kodu, dil (ör. İngilizce için `en` veya Almanca için `de`) ve ülke kodundan (ör. Almanya için `de` veya İsviçre için `ch`) oluşmaktadır. Eğer İngilizce ana diliniz değilse, varsayılan butonları ve Django uyarılarının dilini kendi dilinize değiştirmek için bunu ekleyebilirsiniz. Böylece "İptal" butonu burada tanımladığınız dile çevrilmiş olacaktır. [Django birçok çeviri ile birlikte gelmektedir](https://docs.djangoproject.com/en/2.0/ref/settings/#language-code). + +Farklı bir dil istiyorsanız, aşağıdaki satırı değiştirerek dil kodunu seçin: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +LANGUAGE_CODE = 'de-ch' +``` + +Ayrıca statik dosyalar için bir yol eklememiz gerekmektedir. (Eğitici ders içerisinde statik dosyalar ve CSS hakkında ayrıntılı bilgi bulabilirsiniz.) Dosyanın *son*'una gidin, hemen altında sadece `STATIC_URL` girişi yapın, `STATIC_ROOT` adında yeni birim ekleyin: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + +`DEBUG(Hata Ayıklama)` `True(Doğru)` ve `ALLOWED_HOSTS` boş olduğu zaman ana bilgisayar `['localhost', '127.0.0.1', '[::1]']`'a karşı doğrulanır. Bu, uygulamamızı dağıttıktan sonra, PythonAnywhere'deki anamakine adıyla eşleşmeyecek bu yüzden aşağıdaki ayarları değiştireceğiz: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] +``` + +> **Not**: Eğer Chromebook kullanıyorsanız bu satırı settings.py dosyanızın en altına ekleyiniz: `MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'` +> +> Ayrıca eğer cloud9 kullanıyorsanız `ALLOWED_HOSTS`'a `.c9users.io` 'i ekleyin + +## Bir veritabanı kur + +Web uygulamalarınız için farklı birçok veritabanı yazılımı vardır. Biz varsayılanı kullanacağız, `sqlite3`. + +Sqlite varsayılan olduğu için zaten `mysite/settings.py` dosyamızda kurulu: + +{% filename %}mysite/settings.py{% endfilename %} + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Blogumuzun veritabanını oluşturmak için konsolda şu komutu çalıştırın: `python manage.py migrate` (`manage.py` dosyasını içeren `djangogirls` klasöründe olmalıyız). İşler iyi giderse şöyle bir şey görmelisiniz: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py migrate + Operations to perform: + Apply all migrations: auth, admin, contenttypes, sessions + Running migrations: + Rendering model states... DONE + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying admin.0002_logentry_remove_auto_add... 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 sessions.0001_initial... OK + + +Hepsi bu kadar! Web sunucusunu (web server) çalıştırma ve websitemizin çalıştığını görme zamanı! + +## Web sunucusunu başlatmak + +`manage.py` dosyasının bulunduğu dizinde olmalıyız (`djangogirls` klasörü). Konsol üzerinden `python manage.py runserver` komutunu çalıştırarak web sunucusunu başlatabilirsiniz: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver + + +Eğer Chromebook üzerindeyseniz, bunun yerine şu komutu kullanın: + +{% filename %}Cloud 9{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0.0.0.0:8080 + + +Eğer Windows'taysanız ve `UnicodeDecodeError` hatası varsa, bu komutu kullanın: + +{% filename %}komut-satırı{% endfilename %} + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +Şimdi tek yapmanız gereken sitenizin çalışıp çalışmadığına bakmak. Tarayıcınızı açın (Firefox, Chrome, Safari, Internet Explorer veya ne tercih ediyorsanız) ve bu adresi girin: + +{% filename %}tarayıcı{% endfilename %} + + http://127.0.0.1:8000/ + + +Eğer Chromebook kullanıyorsanız, her seferinde test sunucusunu ziyaret edeceksiniz ve erişeceksiniz: + +{% filename %}tarayıcı{% endfilename %} + + https://django-girls-.c9users.io + + +Tebrikler! ilk web siteni oluşturdun ve web sunucusu kullanarak çalıştırdın! Harika, değil mi? + +![Kurulum basarili!](images/install_worked.png) + +Web sunucusu çalışırken ek komutlar girmek için yeni bir komut satırı istemi göremezsiniz. Terminal yeni metin kabul edecek ama yeni komutları çalıştırmayacaktır. Bunun nedeni web sunucusunun duraklamadan gelen talepleri algılamasıdır. + +> Web sunucuları nasıl çalışır **How the Internet works (İnternet Nasıl Çalışır)** bölümünde görmüştük. + +Web sunucusu açıkken yeni komut yazmak için, yeni bir terminal penceresi açıp virtualenv'inizi aktive etmeniz gerekmektedir. Web sunucusunu durdurmak için, çalıştığı pencereye geri dönün ve CTRL+C ye basın -Control ve C tuşlarına birlikte. (Windows'ta Ctrl+Break tuşları olabilir.). + +Sonraki adım için hazır mısın? İçerikleri oluşturma zamanı! \ No newline at end of file diff --git a/tr/django_start_project/images/install_worked.png b/tr/django_start_project/images/install_worked.png new file mode 100644 index 00000000000..4354c634ddb Binary files /dev/null and b/tr/django_start_project/images/install_worked.png differ diff --git a/tr/django_start_project/images/it_worked2.png b/tr/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/tr/django_start_project/images/it_worked2.png differ diff --git a/tr/django_templates/README.md b/tr/django_templates/README.md new file mode 100644 index 00000000000..e3fbf54a30b --- /dev/null +++ b/tr/django_templates/README.md @@ -0,0 +1,106 @@ +# Django templateleri + +Bazı verileri gösterme zamanı! Django bunun için bize faydalı bazı yerleşik **template etiketleri** sunuyor. + +## Template etiketleri nedir? + +Görüyoruz ki aslında, HTML'de Python kodu yazamayız, çünkü tarayıcılar bunu anlamaz. Tarayıcılar yalnızca HTML'den anlar. Biliyoruz ki Python daha dinamik bir dil iken, HTML oldukça statiktir. + +**Django template etiketleri** Python benzeri yapıların HTML'ye aktarılmasını sağlar, böylece dinamik web sitelerini daha kolay ve hızlı oluşturabiliriz! + +## Gönderi listesi template'ini gösterme + +Bir önceki bölümde, template'e `posts` değişkeni içinde gönderiler listesi verdik. Şimdi, bunu HTML'de göstereceğiz. + +Django şablonunda (template) bir değişken (variable) yazdırmak için, değişken adını çift kıvrımlı parantez içinde şu şekilde kullanırız: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{{ posts }} +``` + +Bunu `blog/templates/blog/post_list.html` şablonunda deneyelim. Dosyayı kod editöründe açalım ve ikinci `
`'den üçüncü `
`'e kadar olan her şeyi `{{ posts }}` ile değiştirelim. Ne olduğunu görmek için dosyayı kaydedip sayfayı yenileyelim: + +![Şekil 13.1](images/step1.png) + +Gördüğümüz sadece bu: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +, ]> +``` + +Yani Django bunu bir nesneler listesi olarak algılıyor. **Python'a giriş**'ten listelerin nasıl gösterildiğini hatırlıyor musun? Evet, döngülerle! Bir Django template ile bunu şöyle yaparsın: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Bunu kendi template'imizle deneyelim. + +![Şekil 13.2](images/step2.png) + +İşe yarıyor! Fakat bunların daha önce **HTML'ye giriş** bölümünde oluşturduğumuz statik gönderiler gibi görünmesini istiyoruz. HTML ve template etiketlerini karıştırabiliriz. `body` şöyle görünecektir: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}`{% for %}` ve `{% endfor %}` arasına koyduğunuz her şey listedeki her nesne için tekrarlanır. Sayfanı yenile:{% endraw %} + +![Şekil 13.3](images/step3.png) + +Bu sefer biraz daha farklı bir notasyon kullandığımızın farkında mısınız (`{{ post.title }}` or `{{ post.text }})`)? Böylece `Post` modelinde tanımlanan alanlardaki verilere ulaşıyoruz. Ayrıca `|linebreaks` (satırsonu), gönderilerin metnini, satır sonlarını paragraflara çeviren bir filtreden geçiriyor. + +## Bir şey daha + +Web sitemizin İnternet'te hâlâ çalıştığını görmek iyi olacak, değil mi? PythonAnywhere'e yükleyelim yine. Adımları hatırlayalım… + +* İlk önce kodumuzu Github'a push komutu ile yükleyelim + +{% filename %}komut-satırı{% endfilename %} + + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Veritabanından gönderileri göstermek için template'ler değiştirildi." + [...] + $ git push + + +* [PythonAnywhere](https://www.pythonanywhere.com/consoles/)'e bağlanalım ve **Bash konsolu**'na gidelim (veya yeni bir konsol açalım) ve şunu çalıştıralım: + +{% filename %}PythonAnywhere komut-satırı{% endfilename %} + + $ cd $USER.pythonanywhere.com + $ git pull + [...] + + +* Son olarak, [Web sekmesi](https://www.pythonanywhere.com/web_app_setup/)ne gidip uygulamanızın **Yenile** butonuna basın. (Konsoldan diğer PythonAnywhere sayfalarına ulaşmak için, sağ üst köşedeki menü düğmesini kullanın.) Güncellemeniz https://isminiz.pythonanywhere.com adresinde yayınlanmalıdır - tarayıcıda kontrol edin! Eğer PythonAnywhere sitesindeki gönderilerin içeriği ile lokal sunucunuzda bulunan gönderilerin içeriği aynı değilse sorun değil. Lokal bilgisayarınızdaki veritabanı ile Python Anywhere'deki veritabanı, diğer dosyalarınız gibi eşitlenmiyor. + +Tebrikler! Şimdi Django admin üzerinden yeni bir gönderi eklemeyi deneyin (published_date eklemeyi unutmayın!) PythonAnywhere sitenizin Django admininde olduğunuzdan emin olun, https://yourname.pythonanywhere.com/admin. Arkasından gönderileri görebilmek için oradaki sayfanızı yenileyin. + +Şiir gibi çalışıyor, değil mi? Gurur duyabiliriz! Şimdi bilgisayar başından bir süre kalkalım, çünkü bir molayı hak ettik. :) + +![Şekil 13.4](images/donut.png) \ No newline at end of file diff --git a/tr/django_templates/images/donut.png b/tr/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/tr/django_templates/images/donut.png differ diff --git a/tr/django_templates/images/step1.png b/tr/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/tr/django_templates/images/step1.png differ diff --git a/tr/django_templates/images/step2.png b/tr/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/tr/django_templates/images/step2.png differ diff --git a/tr/django_templates/images/step3.png b/tr/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/tr/django_templates/images/step3.png differ diff --git a/tr/django_urls/README.md b/tr/django_urls/README.md new file mode 100644 index 00000000000..a1bde414a74 --- /dev/null +++ b/tr/django_urls/README.md @@ -0,0 +1,103 @@ +# Django URL'leri + +İlk web sayfamızı yapmak üzereyiz: blogunuzun anasayfası! Ama önce, biraz Django url'lerini öğrenmeye başlayalım. + +## URL nedir? + +URL basitçe bir web adresidir. Her defasında bir web sitesini ziyaret ettiğinde bir URL görürsün. Tarayıcının adres çubuğunda görünmektedir. (Evet! `127.0.0.1:8000` bir URL'dir! Ve `https://djangogirls.org` da bir URL'dir) + +![Url](images/url.png) + +İnternetteki her sayfanın kendi URL'si olması gerekir. Böylelikle bir URL açıldığında uygulama ne göstermesi gerektiğini bilir. Django'da `URLconf` (URL konfigürasyonu) denilen bir şey kullanıyoruz. URLconf Django'nun doğru viewı bulmak için istenen URL ile eşleştirmeyi deneyeceği desenler dizinidir. + +## URL'ler Django'da nasıl çalışır? + +Kod editörümüzde `mysite/urls.py` dosyasını açalım ve neye benzediğine bakalım: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +"""mysite URL Configuration + +[...] +""" +from django.urls import path, include +from django.contrib import admin + +urlpatterns = [ + path('admin/', admin.site.urls), +] +``` + +Gördüğünüz gibi Django bu dosyaya bizim için bir şeyler koymuş bile. + +Üçlü tırnaklar (`'''` or `"""`) arasındaki satırlara docstrings denir - bunları bir dosyanın, sınıfın ya da metodun en üstüne ne yaptıklarını anlatmak için yazabilirsiniz. Python bunları çalıştırmaz. + +Önceki bölümde gördüğümüz yönetici URL'si burada: + +{% filename %}mysite/urls.py{% endfilename %} + +```python + path('admin/', admin.site.urls), +``` + +Bu satırın anlamı Django, `admin` ile başlayan her URL için ona uyan bir *view* bulur demektir. Bu durumda bir sürü yönetici URL'lerini ekliyoruz, böylece hepsi bu küçük dosyanın içinde sıkıştırılmış bir şekilde durmuyor -- bu hali daha okunabilir ve düzenli. + +## İlk Django URL'iniz! + +İlk URL'mizi oluşturma zamanı. 'http://127.0.0.1:8000/' adresinin bloğumuzun anasayfası olmasını ve gönderilerin bir listesini görüntülemesini istiyoruz. + +Aynı zamanda `mysite/urls.py` dosyasını temiz tutmak istiyoruz, bu yüzden `blog` uygulamamızdan `mysite/urls.py` ana dosyamıza URL'leri aktarıyoruz (import). + +Devam edip, `blog.urls`'i import edecek bir satır ekleyelim. Ayrıca, ilk satırı değiştirmelisiniz çünkü burada `include` fonksiyonunu kullanıyoruz, bu yüzden bu içe aktarmayı (import) satırlara eklemeniz gerekecek. + +`mysite/urls.py` dosyamız şöyle olmalı: + +{% filename %}mysite/urls.py{% endfilename %} + +```python +from django.urls import path, include +from django.contrib import admin + +urlpatterns = [ + path('admin/', admin.site.urls), + path('', include('blog.urls')), +] +``` + +Django artık 'http://127.0.0.1:8000/' adresine gelen her şeyi `blog.urls`'e yönlendirecek ve oradaki yönergelere bakacak. + +## blog.urls + +`blog` dizini içinde `urls.py` adında yeni bir boş dosya oluşturalım ve kod editöründe açalım. Tamam! Şu ilk iki satırı ekleyelim: + +{% filename %}blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views +``` + +Burada `blog` uygulamasından Django'nun `path` fonksiyonunu ve bütün `views` fonksiyonlarını dahil ediyoruz (import). (Şu an hiç url'imiz yok ama birazdan olacak!) + +Bundan sonra ilk URL kalıbımızı ekleyebiliriz: + +{% filename %}blog/urls.py{% endfilename %} + +```python +urlpatterns = [ + path('', views.post_list, name='post_list'), +] +``` + +Gördüğünüz üzere, ana URL'e `post_list` adında bir `view` atıyoruz. Django URL resolver ful URL'in başındaki domain adını (yani, http://127.0.0.1:8000 /) göz ardı eder, böylece bu URL kalıbı (pattern) boş bir string ile eşleşecek. Bu kalıp, Django'ya eğer siteye biri 'http://127.0.0.1:8000/' adresinden gelirse gitmesi gereken yerin `views.post_list` olduğunu söylüyor. + +Son kısım `name='post_list'`, görünümü (view) tanımlamak için kullanılan URL'in adıdır. Bu view'un adı ile aynı olabilir ama tamamen farklı bir şey de olabilir. Bundan sonra projede isimlendirilmiş URL'leri kullanıyor olacağız, bu yüzden uygulamadaki her URL'i isimlendirmek önemli. Aynı zamanda URL isimlerini eşsiz ve kolay hatırlanabilir şekilde seçmeliyiz. + +Eğer şimdi http://127.0.0.1:8000/ adresine gitmeyi denerseniz, 'sayfanıza ulaşılamıyor' tarzında bir mesaj görürsünüz. Bunun nedeni sunucunun (`runserver` yazdığınızı hatırlıyor musunuz?) artık çalışmıyor olması. Sebebini bulmak için sunucunuzdaki komut penceresine bakın. + +![Hata](images/error1.png) + +Konsolunuz bir hata gösteriyor, ama endişelenmeyin -aslında bu oldukça kullanışlı: bize **'post_list' özelliği yok** diyor. Bu Django'nun bulup kullanmaya çalıştığı *view*'ın adı. Ama onu henüz oluşturmadık. Bu aşamada `/admin/` de çalışmayacaktır. Hiç merak etmeyin, oraya geleceğiz. Farklı bir hata görürseniz, web sunucunuzu yeniden başlatmayı deneyin. Komut satırına girin, konsol ekraninda Ctrl+C (Control ve C tuşlarına beraber) basarak sunucuyu durdurun ve `python manage.py runserver` komutunu çalıştırarak yeniden başlatın. + +> Django URLconfs ile ilgili daha fazla bilgi edinmek istiyorsanız resmi Django dokümantasyonuna bakabilirsiniz: https://docs.djangoproject.com/en/2.0/topics/http/urls/ \ No newline at end of file diff --git a/tr/django_urls/images/error1.png b/tr/django_urls/images/error1.png new file mode 100644 index 00000000000..50618fca3fe Binary files /dev/null and b/tr/django_urls/images/error1.png differ diff --git a/tr/django_urls/images/url.png b/tr/django_urls/images/url.png new file mode 100644 index 00000000000..c22441e930e Binary files /dev/null and b/tr/django_urls/images/url.png differ diff --git a/tr/django_views/README.md b/tr/django_views/README.md new file mode 100644 index 00000000000..577d31af36b --- /dev/null +++ b/tr/django_views/README.md @@ -0,0 +1,44 @@ +# Django views - yaratma zamanı geldi! + +Bir önceki bölümde ortaya çıkan hatayı ortadan kaldırma vakti geldi! :) + +*view*, uygulamamızın "mantığının" ifade edildiği yerdir. Daha önce oluşturduğumuz `model` den bilgi alarak `template`'e iletir. "template"i ise gelecek bölümde oluşturacağız. View'ler bildiğiniz Python fonksiyonlarıdır. Ancak, **Python'a Giriş** bölümünde yazdığımız fonksiyonlardan biraz daha karmaşıktır. + +View'ler `views.py` dosyasında yer alır. Şimdi, *view*'larımızı `blog/views.py` dosyasına ekleyelim. + +## blog/views.py + +Tamam, şimdi bu dosyayı açalım ve içinde ne olduğuna bakalım: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Henüz fazla bir şey yok. + +`#` ile başlayan satırların yorumlar olduğunu unutmayın - bu # ile başlayan satırların Python tarafından çalıştırılmayacağı anlamına geliyor. + +Hadi yorumun önerdiği gibi bir *view* oluşturalım. Bunun için alttaki viewı en alta ekleyin: + +{% filename %}blog/views.py{% endfilename %} + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Burada `post_list` isimli bir fonksiyon (`def`) yarattık, bu fonksiyon girdi olarak `request` (isteği) alıp, `blog/post_list.html` template'ini işleyecek olan `render` fonksiyonunu `döndürüyor`. + +Dosyamızı kaydedelim ve http://127.0.0.1:8000/ adresine gidip bakalım. + +Bir başka hata! Okuyup neler olduğunu anlamaya çalışalım: + +![Hata](images/error.png) + +İyi tarafından bakarsak bu hata en azından sunucumuzun yeniden çalıştığını gösteriyor, ama hala bir şeyler yanlış, değil mi? Dert etmeyin, sadece bir hata sayfası, korkacak bir şey yok! Komut satırındaki hata mesajları gibi bunlar da aslında oldukça yararlılar. *TemplateDoesNotExist* hatası alıyoruz, yani Template bulunamadı. Gelecek bölümde bu hatayı template oluşturarak düzeltelim! + +> Django view'ları hakkında daha fazla bilgi edinmek için resmi dokümantasyonları okuyabilirsiniz: https://docs.djangoproject.com/en/2.0/topics/http/views/ \ No newline at end of file diff --git a/tr/django_views/images/error.png b/tr/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/tr/django_views/images/error.png differ diff --git a/tr/dynamic_data_in_templates/README.md b/tr/dynamic_data_in_templates/README.md new file mode 100644 index 00000000000..c04a25414e4 --- /dev/null +++ b/tr/dynamic_data_in_templates/README.md @@ -0,0 +1,81 @@ +# Template içinde dinamik veri + +Birkaç parçayı yerine oturttuk: `Post` (gönderi) modelini `models.py`'de tanımladık, `views.py`'de `post_list` (gönderi listesi) var ve template ekledik. Ama gönderilerimizi HTML'de görünür kıldık mı? Çünkü yapmak istediğimiz şey bu -bazı içerikleri (veritabanında kayıtlı modeller) al ve şablonumuzda göster, değil mi? + +Bu tam olarak *view*'lerin yapmasını beklediğimiz şey: modelleri ve template'leri bağlamak. `post_list` *view* 'ımızda göstermek istediğimiz modelleri alıp template'e iletmemiz gerekecek. *view* ile template içinde neyin (hangi modelin) gösterileceğine karar veriyoruz. + +Tamam, peki nasıl yapacağız? + +`blog/views.py`'ı açacağız. Şu anda `post_list` *view*'ı şöyle: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Kodları farklı dosyalara eklemekten bahsettiğimizi hatırlıyor musunuz? Şu an `models.py` içinde yazdığımız modeli kullanma zamanı. `from .models import Post` şeklinde bir satır ekleyeceğiz: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from .models import Post +``` + +`models`'dan önceki nokta, *mevcut dizin* veya *mevcut uygulama* anlamına geliyor. Hem `views.py` hem de `models.py` aynı dizindedir. Bu şu anlama geliyor: `.` ve dosya ismini (`.py` olmadan) kullanabiliriz. Arkasından modelin adını (`Post`)'u dahil ediyoruz (import ediyoruz). + +Sırada ne var? `Post` modelinden gerçek blog gönderilerini almak için `QuerySet` denilen sorgu setine ihtiyacımız var. + +## QuerySet (Sorgu Seti) + +QuerySet'in nasıl çalıştığı konusunda bir fikriniz oluşmuştur. [Django ORM (QuerySets) bölümü](../django_orm/README.md)nde konuşmuştuk. + +Şimdi yayınlanmış ve `published_date`'e (yayınlanma tarihine) göre sıralanmış bir gönderi listesi istiyoruz, değil mi? Bunu QuerySets bölümünde yapmıştık zaten! + +{% filename %}blog/views.py{% endfilename %} + +```python +Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') +``` + +Şimdi `blog/views.py` dosyasına `def post_list(request)` fonksiyonunu ekleyin ama öncelikle `from django.utils import timezone` eklemeyi unutmayın: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Son eksik parça `posts` QuerySet'i şablon içeriğine iletiyor. Endişelenmeyin - daha sonraki bölümlerde nasıl görüntüleyebileceğimizi ele alacağız. + +QuerySet'imiz için bir *değişken* yarattığımıza dikkat edin: `posts`. Bu QuerySet'in ismi. Bundan sonra ondan ismi ile bahsedebiliriz. + +`render` fonksiyonunda `request` (internet aracılığıyla kullanıcıdan aldığımız her şey) adında ve başka bir şablon dosyası (`'blog/post_list.html'`) veren parametremiz var. Son parametremiz `{}`, şablonu kullanmak için bir şeyler ekleyebileceğimiz bir yer. Bunlara isimler vermemiz gerekiyor (`'posts'` ismini kullanmaya devam edeceğiz şimdilik). :) Şöyle olması lazım: `{'posts': posts}`. `:` 'dan önceki kısım string bunu not edelim; çift tırnak: `"` içine almamız gerekiyor. + +Nihayetinde `blog/views.py` şu şekle gelmiş olmalı: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +İşte bu kadar! Template'e geri gidip QuerySet'leri görünür hale getirme zamanı! + +Django'daki QuerySet'ler hakkında daha fazla bilgi sahibi olmak istiyor musunuz? Şuraya bakabilirsiniz: https://docs.djangoproject.com/en/2.0/ref/models/querysets/ \ No newline at end of file diff --git a/tr/extend_your_application/README.md b/tr/extend_your_application/README.md new file mode 100644 index 00000000000..31179340232 --- /dev/null +++ b/tr/extend_your_application/README.md @@ -0,0 +1,214 @@ +{% set warning_icon = '' %} + +# Uygulamanı genişlet + +Websitemizi oluşturmak için gerekli adımların hepsini tamamladık: bir modelin, url'nin, view'ün ve template'in nasıl yazılacağını biliyoruz. Websitemizi nasıl güzelleştirebiliriz onu da biliyoruz. + +Pratik zamanı! + +Blog'umuzda lazım olan ilk şey bir gönderiyi göstermek için bir sayfa, değil mi? + +Halihazırda bir `Post` modelimiz var, dolayısıyla `models.py` dosyasına bir şey eklememize gerek yok. + +## Bir gönderinin detayı için bir template(şablon) linki oluşturun + +`blog/templates/blog/post_list.html` dosyasına bir link (bağlantı) ekleyerek başlayacağız. Bu dosyayı kod düzenleyicisinde açalım, şimdiye kadar yaptıklarımızın şöyle gözüküyor olması lazım: + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +{% raw %}Gönderi listesindeki bir gönderinin başlığından bir gönderinin detay sayfasına bir link (bağlantı) olsun istiyoruz. `

{{ post.title }}

`'i gönderinin detay sayfasına link verecek şekilde değiştirelim:{% endraw %} + +{% filename %}{{ warning_icon }} blog/templates/blog/post_list.html{% endfilename %} + +```html +

{{ post.title }}

+``` + +{% raw %}Gizemli `{% url 'post_detail' pk=post.pk %}` satırını anlatma zamanı. Şüphelendiğiniz üzere, `{% %}` notasyonu, Django template tags (şablon etiketleri) kullandığımız manasına geliyor. Bu sefer bizim için URL oluşturacak bir şablon (template) etiketi kullanacağız!{% endraw %} + +`post_detail` kısmı Django'nun `blog/urls.py/` dosyasının içinde post_detail adlı bir URL beklediği anlamına gelir. + +Peki `pk=post.pk`? `pk` primary key (birincil anahtar) için kullanılan kısaltmadır, veritabanındaki her kayıt için verilen özgün (eşsiz) bir isimdir. `Post` modelimiz için bir primary key tanımlamamış olduğumuz için, Django onu bizim için otomatik olarak oluşturdu (genelde, her kayıt için bir artan numara ile, örnek 1, 2, 3) ve her post için `pk` adlı bir alan ekledi. Primary key'e erişmek için `post.pk` yazarız, tıpkı `Post` objesindeki diğer alanlara eriştiğimiz gibi (`title`, `author`, vb.)! + +Şimdi http://127.0.0.1:8000/ adresine gittiğimizde bir hata ile karşılaşacağız (`post_detail` için bir URL ya da *görüntü (view)* olmadığı için hatayı almamız normal). Hata böyle görünecektir: + +![NoReverseMatch error (Tersi yok hatası)](images/no_reverse_match2.png) + +## Bir gönderinin detayı için URL oluşturun + +`post_detail` *view*'ımız için `urls.py`'un içinde bir URL oluşturalım! + +İlk gönderimizin detayının şu **URL**'de gösterilmesini istiyoruz: http://127.0.0.1:8000/post/1/ + +`blog/urls.py` dosyasında `post_detail` adında bir Django *view*'ına işaret eden bir URL yapalım. Bu <1>view bir gönderinin tümünü gösterecek. Kod düzenleyicide `blog/urls.py` dosyasını açın ve `path('post/)/', views.post_detail, name='post_detail'),` satırını ekleyin, böylece dosya şöyle görünür: + +{% filename %}{{ warning_icon }} blog/urls.py{% endfilename %} + +```python +from django.urls import path +from . import views + +urlpatterns = [ + path('', views.post_list, name='post_list'), + path('post//', views.post_detail, name='post_detail'), +] +``` + +`post//` kısmı bir URL kalıbı belirtir - sizin için bunu açıklayalım: + +- `post/`, URL'nin **post** kelimesi ile başlayıp ardından ** / ** ile devam etmesi gerektiği anlamına gelir. +- `` - bu bölüm daha zorlayıcı. Django'nun bir tamsayı değeri beklediği ve onu `pk` adlı bir değişken olarak bir görünüme(view) aktaracağı anlamına gelir. +- `/` - URL'yi bitirmeden önce **/** 'e tekrar ihtiyacımız var. + +Bu şu demek, eğer tarayıcınıza `http://127.0.0.1:8000/post/5/` yazarsanız, Django `post_detail` adında bir *view* aradığınızı anlar ve `pk` eşittir `5` bilgisini *view*'e aktarır. + +Tamamdır.`blog/urls.py`!'e yeni bir URL kalıbı ekledik! Http://127.0.0.1:8000/ sayfasını yenileyelim.Boom! Sunucu çalıştırmayı tekrar durdurdu. Konsola göz at, beklendiği gibi bir hata daha var! + +![AttributeError (Özellik hatası)](images/attribute_error2.png) + +Bir sonraki adımın ne olduğunu hatırlıyor musunuz? Tabi ki: view(görünüm)'ü eklemek! + +## Gönderi detayı için bir view ekleyin + +Bu sefer *view*'ımıza `pk` adında bir parametre ekleyeceğiz. *view*'ümüzün onu yakalaması gerekiyor, değil mi? Fonksiyonumuzu `def post_detail(request, pk):` olarak tanımlayacağız. Dikkat edin, url'lerde kullandığımız ismin birebir aynısını kullanmamız gerekiyor (`pk`). Bu değişkeni kullanmamak yanlıştır ve hataya sebep olacaktır! + +Şimdi sadece ve sadece bir tane blog gönderisi almak istiyoruz. Bunu yapmak için şunun gibi sorgu setlerini/kümelerini kullanabiliriz: + +{% filename %}{{ warning_icon }} blog/views.py{% endfilename %} + +```python +Post.objects.get(pk=pk) +``` + +Ama bu kodun bir problemi var. Eğer gelen `primary key` (`pk` - tekil anahtar) ile bir `Post` (gönderi) yoksa, çok çirkin bir hatamız olacak! + +![DoesNotExist error (Yok hatası)](images/does_not_exist2.png) + +Bunu istemiyoruz! Ama tabi Django'da bunu ele alan bir şey var: `get_object_or_404`. Eğer verilen `pk` ile bir `Post` bulunamazsa, çok daha güzel bir sayfa gösterilecek (`Sayfa bulunamadı 404` sayfası. + +![Page not found (Sayfa bulunamadı)](images/404_2.png) + +İyi haber şu, kendi `Sayfa bulunamadı` sayfasını yapabilir ve istediğiniz kadar güzelleştirebilirsiniz. Ama şu anda çok önemli değil, o yüzden bu kısmı atlayacağız. + +Tamam, `views.py` dosyamıza bir *view* ekleme zamanı! + +`blog/urls.py` içinde `views.post_detail` denilen bir görünüm ifade eden `post_detail` adında bir URL kuralı oluşturduk. Bu, Django'nun ` blog/views.py içinde post_detail adlı bir görünüm fonksiyonu bekleyeceği anlamına gelir.

+ +

blog/views.py` 'i açmalıyız ve diğer `from` satırının yanına şu kodları eklemeliyiz: + +{% filename %}blog/views.py{% endfilename %} + +```python +from django.shortcuts import render, get_object_or_404 +``` + +Ve dosyanın sonuna kendi *view*'ımızı ekleyeceğiz: + +{% 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}) +``` + +Evet. http://127.0.0.1:8000/ sayfasını tazeleme zamanı + +![Post list view (Gönderi listesi görünümü)](images/post_list2.png) + +Çalıştı! Fakat blog gönderisi başlığındaki bir bağlantıya tıkladığınızda ne oluyor? + +![TemplateDoesNotExist error (Template yok hatası)](images/template_does_not_exist2.png) + +Of hayır! Başka bir hata! Ama onu nasıl halledeceğimizi biliyoruz, di mi? Bir template eklememiz gerekiyor! + +## Post(gönderi) detayları için bir template(şablon) oluştur + +`blog/templates/blog` dizininde `post_detail.html` adında bir dosya oluşturalım ve kod düzenleyicisinde açalım. + +Şöyle görünmeli: + +{% 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 %} +``` + +Bir kere daha `base.html` dosyasıa ekleme yapacağız. `content` blogunda bir gönderinin varsa published_date, title ve text'ini göstermek istiyoruz. Ama daha önemli şeyleri konuşmalıyız, değil mi? + +{% raw %}`{% if ... %} ... {% endif %}` bir şeyi kontrol etmek istediğimizde kullanabileceğimiz bir şablon etiketidir. ( `if ... else ..` ifadelerini **Python'a Giriş** bölümünden hatırladın mı?) Bu durumda eğer gönderinin `published_date` kısmı boş değilse kontrol etmek isteriz.{% endraw %} + +Tamam, şimdi sayfamızı yenileyerek `TemplateDoesNotExist` hatası kaybolmuş mu görebiliriz. + +![Post detail page (Gönderi detay sayfası)](images/post_detail2.png) + +Heyo! Çalışıyor! + +# Yayına alma zamanı! + +Sitenizin hala PythonAnywhere'de çalışıp çalışmadığına bakmakta fayda var, değil mi? Yeniden taşımayı deneyelim. + +{% filename %}komut satırı{% endfilename %} + + $ git status + $ git add --all . + $ git status + $ git commit -m "Site için CSS ve ayrıntılı blog gönderisi için görünüm ve şablon eklendi." + $ git push + + +Sonra bir [PythonAnywhere Bash konsol](https://www.pythonanywhere.com/consoles/) una gidip: + +{% filename %}komut satırı{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Açı parantezleri olmadan ``'i gerçek PythonAnywhere kullanıcı isminizle değiştirmeyi unutmayın). + +## Sunucudaki statik dosyaları güncelleyelim + +PythonAynwhere gibi sunucular "statik dosyalar"a (CSS dosyaları gibi) Python dosyalarından farklı davranır çünkü onları daha hızlı yüklenmesi için optimize edebilir. Sonuç olarak, CSS dosyalarında her değişiklik yaptığınızda, sunucuya onları güncellediğimizi söylemek için ilave bir komut çalıştırmalıyız. Bu komuta `collectstatic` adı verilir. + +Daha önceden çalıştırdığın virtualenv'in hala etkin değilse tekrar aktive ederek başlayın. (PythonAnywhere bunu yapmak için `workon` adlı bir komut kullanır. Kendi bilgisayarında kullandığın `source myenv/bin/activate` komutu gibi.): + +{% filename %}komut satırı{% endfilename %} + + $ workon .pythonanywhere.com + (kullaniciadiniz.pythonanywhere.com)$ python manage.py collectstatic + [...] + + +`manage.py collectstatic` komutu biraz `manage.py migrate` komutu gibidir. Kodumuzda bazı değişiklikler yapıp Django'ya bu değişiklikleri sunucunun statik dosyalar yığınına ya da veritabanına uygulamasını söyledik. + +Her durumda, artık ["Web" sayfasına](https://www.pythonanywhere.com/web_app_setup/) (konsolun sağ üstündeki menü düğmesinden) atlamaya ve **Yeniden Yükle** seçeneğine tıklamaya hazırız ve sonucu görmek için https://adınız.pythonanywhere.com sayfasına bakın. + +İşte bu kadar! Tebrikler :) \ No newline at end of file diff --git a/tr/extend_your_application/images/404_2.png b/tr/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/tr/extend_your_application/images/404_2.png differ diff --git a/tr/extend_your_application/images/attribute_error2.png b/tr/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..4b8262476d9 Binary files /dev/null and b/tr/extend_your_application/images/attribute_error2.png differ diff --git a/tr/extend_your_application/images/does_not_exist2.png b/tr/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/tr/extend_your_application/images/does_not_exist2.png differ diff --git a/tr/extend_your_application/images/no_reverse_match2.png b/tr/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/tr/extend_your_application/images/no_reverse_match2.png differ diff --git a/tr/extend_your_application/images/post_detail2.png b/tr/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/tr/extend_your_application/images/post_detail2.png differ diff --git a/tr/extend_your_application/images/post_list2.png b/tr/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/tr/extend_your_application/images/post_list2.png differ diff --git a/tr/extend_your_application/images/template_does_not_exist2.png b/tr/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/tr/extend_your_application/images/template_does_not_exist2.png differ diff --git a/tr/how_the_internet_works/README.md b/tr/how_the_internet_works/README.md new file mode 100644 index 00000000000..919bafcc04f --- /dev/null +++ b/tr/how_the_internet_works/README.md @@ -0,0 +1,47 @@ +# İnternet Nasıl Çalışır + +> Evdeki okuyucular için: bu bölüm [İnternet Nasıl Çalışır](https://www.youtube.com/watch?v=oM9yAA09wdc) videosunda anlatıldı. +> +> Bu bölüm Jessica McKellar'ın "İnternet Nasıl Çalışır" adlı konuşmasından esinlenilerek oluşturuldu. (http://web.mit.edu/jesstess/www/). + +İddia ediyoruz ki her gün İnternet'i kullanıyorsunuz. Fakat tarayıcınıza https://djangogirls.org gibi bir adres girip `enter` tuşuna bastığınızda neler olduğunu biliyor musunuz? + +Anlamanız gereken ilk şey; bir web sitesinin, sadece bir sabit diskte saklanan birtakım dosyalardan ibaret olduğudur. Tıpkı filmleriniz, müzikleriniz ya da resimleriniz gibi. Ancak, web sitelerine özel şöyle bir durum var: HTML adı verilen bir bilgisayar kodu içerirler. + +Eğer programlamaya aşina değilseniz HTML'yi kavramak başlangıçta zor olabilir, ama web tarayıcılarınız (Chrome, Safari, Firefox, vs.) ona bayılıyor. Web tarayıcılarınız bu kodu anlamak, komutlarını yerine getirmek ve size bu websitesini oluşturan dosyaları sunmak için tasarlanmıştır, tam da olmasını istediğiniz gibi. + +Her dosya gibi, bu HTML dosyalarını da sabit diskte bir yerde saklamamız gerekir. Internet için, *sunucu (server)* denilen özel ve güçlü bilgisayarlar kullanıyoruz. Bir ekranları, fareleri ya da klavyeleri yok çünkü esas amaçları veriyi saklamak ve sunmak. Bu yüzden onlara *sunucular* diyoruz – çünkü size veri *sunuyorlar*. + +Tamam ama yinede Internetin nasıl gözüktüğünü görmek istersiniz değil mi? + +Size bir resmini çizdik, İnternet işte buna benzer: + +![Şekil 1.1](images/internet_1.png) + +Çok karışık, değil mi? Aslında birbirine bağlanmış bir makina ağıdır (yukarıda bahsedilen *servers*). Yüz binlerce makine! Dünyanın dört bir yanını saran yüz binlerce kilometrelik kablolar! İnternet'in ne kadar karışık olduğunu görmek için denizaltı kablo haritası web sitesine(http://submarinecablemap.com) göz atabilirsiniz. İşte web sitesinden bir ekran görüntüsü: + +![Şekil 1.2](images/internet_3.png) + +Büyüleyici, değil mi? Ama, İnternet'e bağlanan her makine arasında bir kablo olması mümkün değil. Yani, bir makineye erişmek için (örneğin, https://djangogirls.org sitesinin kayıtlı olduğu) birçok farklı makine üzerinden istek geçmesi gereklidir. + +Şöyle gözükmekte: + +![Şekil 1.3](images/internet_2.png) + +https://djangogirls.org yazdığınızda: "Sevgili Django Girls, djangogirls.org websitesini görmek istiyorum. Lütfen bana gönderin!" diyen bir mektup gönderdiğinizi düşünün. + +Mektubunuz size en yakın postaneye gider. Daha sonra sizden biraz daha uzak bir postaneye gider, daha sonra biraz daha uzaktakine, daha uzağa ve en son gitmesi gereken yere. Tek farklı olan, aynı yere bir çok mektup(*veri paketi*) gönderirseniz, tamamen farklı postanelerden(*yönlendirici*) geçebilir. Bu, her bir postanede nasıl dağıtım yapıldığına bağlıdır. + +![Şekil 1.4](images/internet_4.png) + +Evet, bu kadar basit. Bir mektup yollarsınız ve cevap beklersin. Tabii ki, kağıt kalem yerine bayt biriminde veri kullanırsınız, fakat fikir aynı! + +Sokak adı, şehir, alan kodu ve ülke adı yerine, biz IP adreslerini kullanırız. Bilgisayarınız ilk olarak DNS'den (Domain Name System - Alan Adı Sistemi) djangogirls.org adresini bir IP adresine çevirmesini ister. Bu bir nebze burada iletişim kurmak istediğiniz kişinin adına bakarak telefon numarası ve adresini bulabildiğiniz eski telefon rehberleri gibi çalışır. + +Bir mektup gönderdiğinizde, bazı özelliklerin doğru olarak teslim edilecek olması gerekir: bir adres, bir pul vs. Ayrıca alıcının anlayacağı bir dil kullanıyorsunuz, değil mi? Aynısı bir web sitesini görmek için gönderdiğiniz *veri paketleri* için de geçerli. HTTP(Hypertext Transfer Protocol - HiperMetin transfer protokolü) adı verilen bir protokol kullanırız. + +Basit olarak, bir web siteniz olduğunda, içinde yaşayacağı bir *sunucu* makineniz olması gerekli. *Sunucu* (bir mektupla gelen) bir *istek* aldığında, (başka bir mektupla) size web sitenizi gönderir. + +Bu bir Django eğitimi olduğundan, Django'nun ne yaptığını sorabilirsiniz. Bir yanıt gönderirken, herkese her zaman aynı şeyi göndermek istemezsiniz. Mektupları özellikle size yazan kişi için kişiselleştirmek çok daha iyi, değil mi? Django bu kişiselleştirilmiş, ilginç mektupları yazmanıza yardımcı olur. :) + +Yeterince konuştuk - Yaratma zamanı! \ No newline at end of file diff --git a/tr/how_the_internet_works/images/internet_1.png b/tr/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/tr/how_the_internet_works/images/internet_1.png differ diff --git a/tr/how_the_internet_works/images/internet_2.png b/tr/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/tr/how_the_internet_works/images/internet_2.png differ diff --git a/tr/how_the_internet_works/images/internet_3.png b/tr/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/tr/how_the_internet_works/images/internet_3.png differ diff --git a/tr/how_the_internet_works/images/internet_4.png b/tr/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/tr/how_the_internet_works/images/internet_4.png differ diff --git a/tr/html/README.md b/tr/html/README.md new file mode 100644 index 00000000000..f59d27d5b6f --- /dev/null +++ b/tr/html/README.md @@ -0,0 +1,217 @@ +# HTML'ye giriş + +Template nedir diye sorabilirsiniz. + +Template (şablon), farklı bilgileri hep aynı biçimde sunmak için tekrar tekrar kullanabileceğimiz bir dosyadır - örneğin, mektup yazmanıza yardımcı olan bir template kullanabilirsiniz çünkü yazacağınız tüm mektuplar farklı mesajlar içerse ve farklı kişilere gönderilse de aynı sayfa düzenine sahip olacaktır. + +Bir Django template'inin formatı HTML adını verdiğimiz bir dilde tanımlanır (**İnternet nasıl çalışır** adlı ilk bölümde bahsettiğimiz HTML). + +## HTML nedir? + +HTML kullanıcıya basit bir web sayfası görüntülemek için web tarayıcınız tarafından - Chrome, Firefox veya Safari gibi - yorumlanan basit bir koddur. + +HTML "HyperText Markup Language" (HiperMetin İşaretleme Dili) anlamına gelir. **HyperText** (HiperMetin) sayfalar arası bağlantıları destekleyen türden bir metin demektir. **Markup** (işaretleme), bir belgeyi alıp onu kodlarla işaretleyerek, nasıl yorumlanacağını (tarayıcıya) söylemek demektir. HTML kodu **etiketler** ile oluşturulur, etiketlerin her biri `<` ile başlar ve `>` ile biter. Bu etiketler biçimlendirme **öğelerini** temsil eder. + +## İlk template'iniz! + +Bir template oluşturmak bir template dosyası oluşturmak demektir. Her şey bir dosyadır, değil mi? Bunu muhtemelen zaten fark etmişsinizdir. + +Template'lar `blog/templates/blog` dizininde saklanır. Öyleyse blog klasörü altında `templates` adlı bir klasör oluşturalım. Sonra da templates klasörü altında yine `blog` adlı bir klasör oluşturalım: + + blog + └───templates + └───blog + + +(`blog` diye adlandırılan iki dizine niye ihtiyacımız olduğunu merak edebilirsiniz - daha sonra anlayacağınız üzere, sitemiz karmaşıklaştıkça bu şekilde isimlendirme tarzı işimizi oldukça kolaylaştırır.) + +Şimdi de `blog/templates/blog` dizini içine `post_list.html` adlı bir dosya oluşturalım (şimdilik içini boş bırakalım). + +Web sitemizin nasıl göründüğüne bir bakalım: http://127.0.0.1:8000/ + +> Eğer hala `TemplateDoesNotExist` hatası alıyorsanız, sunucunuzu yeniden başlatmayı deneyin. Komut satırına girin, Ctrl+C (Kontrol ve C tuşlarına beraber) basarak sunucuyu durdurun ve `python manage.py runserver` komutunu çalıştırarak yeniden başlatın. + +![Şekil 11.1](images/step1.png) + +Artık hata kalmadı! Tebrikler :) Ama, web sitemiz aslında boş bir sayfadan başka bir şey yayınlamıyor, çünkü template boş. Bunu düzeltelim. + +Yeni dosyayı kod düzenleyicisinde açıp şunları ekleyelim: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + +

Merhaba!

+

Çalışıyor!

+ + +``` + +Web siteniz şu anda nasıl görünüyor? Öğrenmek için bir bakalım: http://127.0.0.1:8000/ + +![Şekil 11.2](images/step3.png) + +Çalıştı! Tebrikler :) + +* En temel etiket, ``, daima herhangi bir web sayfasının başlangıcıdır ve `` daima bitişidir. Gördüğünüz gibi, web sitesinin tüm içeriği `` başlangıç etiketi ve `` bitiş etiketinin arasında yer alır +* `

` paragraf öğelerini belirten etikettir; her paragrafın bitişinde de `

` olacaktır + +## Kafa ve vücut + +Aynı zamanda tüm HTML sayfaları **head** ve **body** olmak üzere iki öğeye ayrılır. + +* **head** belge hakkında ekranda görüntülenmeyen bilgiler içeren öğedir. + +* **body** ise ekranda gösterilen tüm öğeleri içeren öğedir. + +`` öğesini tarayıcıya sayfanın yapılandırmasını anlatmak için, `` öğesini ise sayfada aslında ne olduğunu anlatmak için kullanırız. + +Örnek olarak, bir web sayfası başlık ögesini `` içine koyabilirsiniz, bunun gibi: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html + + + Zeynep'in blogu + + +

Merhaba!

+

Çalışıyor!

+ + +``` + +Dosyayı kaydedin ve sayfanızı yenileyin. + +![Şekil 11.3](images/step4.png) + +Tarayıcınızın "Zeynep'in blogu" başlığını nasıl anladığını fark ettiniz mi? `Zeynep'in blogu` kısmını başlık olarak yorumlayarak yazıyı tarayıcının başlık kısmına yerleştirdi. (Bu yazı yer işaretleri gibi yerlerde de kullanılır). + +Her açılan etiketin `/` ile başlayan bir *kapatan etiket*'i ile kapatılması gerekmektir. Ayrıca bu etiketler *iç içe* yerleştirilebilir (bu da bir etiketi kapatabilmek için, içindeki tüm etiketlerin kapanmış olmasını gerektirir). + +Bir şeyleri kutulara yerleştirmek gibi. Büyük bir kutuda `` olsun; onun içinde `` kutusu olsun, onun da içinde daha küçük kutular olsun: `

`. + +Bu *kapatma* etiketleri ve *yuvalama* ögeleri kurallarını takip etmeye ihtiyacınız vardır - eğer yapmazsanız tarayıcı onları gerektiği gibi açıklayamayabilir ve sayfanız hatalı olarak görüntülenecektir. + +## Template özelleştirme + +Şimdi artık biraz eğlenip template'inizi özelleştirmeyi deneyebilirsiniz! İşte bunun için faydalı birkaç etiket: + +* `

Bir başlık

` en önemli başlığınız (ana başlık) +* `

Bir alt başlık

` - bir sonraki seviyedeki bir başlık için +* `

Bir alt-alt başlık

`…ve böyle `
`'ya kadar gider +* `

Metin paragrafı

` +* `metin` metni vurgular +* `metin` metni iyice vurgular +* `
`alt satıra gider (br etiketi ve > işaretinin arasına bir şey konulmaz) +* `bağlantı` bağlantı oluşturur +* `
  • ilk madde
  • ikinci madde
` - tıpkı bunun gibi bir liste yapar! +* `
` - sayfanın bir bölümünü tanımlar + +İşte komple bir template örneği, kopyalayın ve `blog/templates/blog/post_list.html` içine yapıştırın: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +html + + + Django Girls blog + + + +
+

published: 14.06.2014, 12:14

+

İlk Blogum

+

Çok heyecanlıyım! Bu benim ilk blogum. Ne kadar zevkli bir işmiş bilgisayarlarla uğraşmak. Artık bilgisayar başından kalkmam.

+
+ +
+

published: 14.06.2014, 12:20

+

İkinci gönderim

+

Bir varmış bir yokmuş, evvel zaman içinde Ne kadar zevkli bir işmiş bilgisayarlarla uğraşmak. Artık bilgisayar başından kalkmam. kalbur saman içinde, develer tellal iken, pireler berber iken; ben annemin beşiğini tıngır mıngır sallar iken.

+
+ + +``` + +Burada üç tane `div` bölümü oluşturduk. + +* İlk `div` ögesi blogumuzun başlığını içerir - bu bir baş kısımdır ve bir bağlantıdır +* Sonraki iki `div` öğesi blog gönderilerimizi içeriyor; bunlarda bir yayın tarihi (published_date), tıklanabilir bir `h2` başlığı ve biri tarih diğeri gönderi metnimiz için olmak üzere, iki tane `p` (paragraf) var. + +Bize yaşattığı duygu: + +![Şekil 11.4](images/step6.png) + +Yaşasın! Şimdiye dek, şablonumuz tam olarak sadece **aynı bilgiyi** görüntüler - öncesinde ise şablonlardan **aynı formatta** **farklı** bilgileri görüntülememizden bahsediyorduk. + +Aslında yapmak istediğimiz Django yöneticimize eklenen gerçek postaları açmak - bundan sonra oraya gidiyoruz. + +## Bir şey daha: deployment (yayına alma) zamanı! + +Bunları İnternet'te canlı olarak görmek çok güzel olur, değil mi: + +### Kodumuzu commit ve push komutları ile Github'a yükleyelim + +İlk önce son deployment dan sonra hangi dosyaların değiştiğine bakalım. Bu komutları lokal bilgisayarımızda çalıştıralım, PythonAnywhere'de değil: + +{% filename %}komut-satırı{% endfilename %} + + $ git status + + +`djangogirls` dizininde olduğumuzdan emin olalım ve `git` 'e bu dizinde yapılan tüm değişiklikleri dahil etmesini söyleyelim: + +{% filename %}komut-satırı{% endfilename %} + + $ git add --all . + + +> **Not** `--all` demek eğer `git`'in silinmiş dosyaları varsa onları tanımayı sağlar (varsayılan olarak sadece yeni/değiştirilmiş dosyaları tanır). Hatırlatma: `.` içinde olduğumuz klasör anlamına gelir (3. Bölüm). + +Dosyalarımızı yüklemeden önce `git`'in hangilerini yükleyeceğine (`git`'in yükleyeceği dosyalar yeşil gösterilir) bakalım: + +{% filename %}komut-satırı{% endfilename %} + + $ git status + + +Neredeyse bitirdik, şimdi bu değişikliği tarihçesine kaydetmesini söyleyelim. Commit için değişiklikleri açıklayan bir mesaj yazalım. Bu aşamada istediğimizi yazabiliriz, fakat tanımlayıcı yazılar gelecekte neler yapmış olduğumuzu hatırlatması açısından faydalı olacaktır. + +{% filename %}komut-satırı{% endfilename %} + + $ git commit -m "Site için HTML dosyasını değiştirdim." + + +> **Not** Tamamlama mesajını çift tırnak içerisinde kullandığımızdan emin olalım. + +Bunu bir kez yapıp, değişikliklerimizi GitHub'a yükledik (ittik): + +{% filename %}komut-satırı{% endfilename %} + + $ git push + + +### Pull ile yeni kodu PythonAnywhere e alıp web uygulamasını tekrar yükleyelim + +* [PythonAnywhere consoles page](https://www.pythonanywhere.com/consoles/)sayfasını ve **Bash console** u açalım (ya da yeni bir tane açalım). Sonra da çalıştıralım: + +{% filename %}PythonAnywhere komut satırı{% endfilename %} + + $ cd ~/.pythonanywhere.com + $ git pull + [...] + + +(Açı parantezleri olmadan ``'i gerçek PythonAnywhere kullanıcı isminizle değiştirmeyi unutmayın). + +Ve kodunuzun indirilmesini izleyin. Kontrol etmek istersen, **Files** sekmesine gidip kodunu PythonAnywhere üzerinde görebilirsin (Konsol sayfasındaki menü butonundan diğer PythonAnywhere sayfalarına ulaşabilirsin). + +* Son olarak, [Web sekmesi](https://www.pythonanywhere.com/web_app_setup/)ne gidip uygulamanızın **Yenile** butonuna basın. + +Güncelleme hazır olmalı! Devam edelim ve tarayıcıda web sitesini yenileyelim. Değişiklikler görünüyor olmalı. :) \ No newline at end of file diff --git a/tr/html/images/step1.png b/tr/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/tr/html/images/step1.png differ diff --git a/tr/html/images/step3.png b/tr/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/tr/html/images/step3.png differ diff --git a/tr/html/images/step4.png b/tr/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/tr/html/images/step4.png differ diff --git a/tr/html/images/step6.png b/tr/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/tr/html/images/step6.png differ diff --git a/tr/images/application.png b/tr/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/tr/images/application.png differ diff --git a/tr/installation/README.md b/tr/installation/README.md new file mode 100644 index 00000000000..bd12c1abe5d --- /dev/null +++ b/tr/installation/README.md @@ -0,0 +1,58 @@ +# Eğer tutorial'ı evde yapıyorsanız + +Eğer tutorial'ı [Django Girls etkinliklerinden](https://djangogirls.org/events/) birinde değil de evde yapıyorsanız, bu bölümü şimdi tamamen atlayabilirsiniz ve direkt [İnternet nasıl çalışıyor](../how_the_internet_works/README.md) bölümüne geçebilirsiniz. + +Çünkü burada anlatılanları tutorial boyunca zaten işliyoruz, bu kısım kurulum talimatlarının tek yerde toparlandığı ek bir sayfa sadece. Django Girls etkinliği, çalıştay boyunca tekrar kurulumla uğraşmamak adına her şeyi yüklediğimiz bir "Kurulum akşamı" içeriyor. + +Eğer bunu yararlı bulduysanız, bu bölümü de takip edebilirsiniz. Ama bilgisayarınıza birkaç şey yüklemeden önce bir şeyler öğrenmeye başlamak istiyorsanız, bu bölümü atlayın. Daha sonra kurulum kısmını size açıklayacağız. + +İyi şanslar! + +# Kurulum + +Atölyede bir blog geliştireceksiniz, eğitim günü kodlamaya hazır olmanız için önceden ayarlamakta fayda olan birkaç kurulum var. + + {% include "/chromebook_setup/instructions.md" %} + + + +# Python Yükleyin + +{% include "/python_installation/instructions.md" %} + +# Bir kod düzenleyicisi yükleyin + +{% include "/code_editor/instructions.md" %} + +# Bir "virtualenv" kurun ve Django'yu yükleyin + +{% include "/django_installation/instructions.md" %} + +# Git yükleyin + +{% include "/deploy/install_git.md" %} + +# GitHub hesabı oluşturun + +[GitHub.com](https://www.github.com)'a gidin ve ücretsiz yeni bir kullanıcı hesabı oluşturun. + +# PythonAnywhere hesabı oluşturun + +{% include "/deploy/signup_pythonanywhere.md" %} + +# Okumaya başlayın + +Tebrikler, ayarlarınız tamam ve hazırsınız! Eğer atölyeden önce hala vaktiniz var ise, başlangıç bölümlerinden bazılarını okumanız yararlı olacaktır: + +* [İnternet nasıl çalışır](../how_the_internet_works/README.md) + +* [Komut satırına giriş](../intro_to_command_line/README.md) + +* [Python'a giriş](../python_introduction/README.md) + +* [Django nedir?](../django/README.md) + +# Çalışmanın tadına varın! + +İşe başladığınızda doğrudan [Your first Django project!](../django_start_project/README.md) gidebilirsiniz çünkü çoktan önceki bölümlerde bu konuları çözdük. \ No newline at end of file diff --git a/tr/intro_to_command_line/README.md b/tr/intro_to_command_line/README.md new file mode 100644 index 00000000000..ed6f9091a28 --- /dev/null +++ b/tr/intro_to_command_line/README.md @@ -0,0 +1,427 @@ +# Komut satırı arayüzüne giriş + +> Evden okuyanlar için: Bu bölüm [ Yeni arkadaşınız: Command Line](https://www.youtube.com/watch?v=jvZLWhkzX-8) videosu içinde anlatıldı. + +Heyecanlı değil mi?! Birkaç dakika içinde ilk kod satırınızı yazacaksın! :) + +**Sizi yeni arkadaşınızla tanıştıralım: komut satırı!** + +Gelecek aşamalar size tüm "hacker"ların kullandığı siyah pencerenin nasıl kullanıldığını gösterecek. Başta biraz korkutucu görünebilir fakat bu sadece sizden komut bekleyen bir pencere. + +> **Not** Lütfen kitap boyunca 'dizin' ve 'klasör' terimlerini birbirinin yerine kullandığımızı ve aynı anlama geldiklerini not unutmayın. + +## Komut satırı nedir? + +Genellikle **komut satırı** veya **komut satırı arabirimi** adı verilen pencere, bilgisayarınızdaki dosyaları görmek, düzenlemek ve yönetmek için kullanılan metin tabanlı bir uygulamadır. Bu tıpkı windows gezgini yada mac'teki finder gibi fakat grafiksel arayüzü olmadan. Komut satırının diğer adları: *cmd*, *CLI*, *komut istemcisi*, *konsol* veya *terminal (uçbirim)*dir. + +## Komut satırı arabirimini açın + +Birkaç deneme yapmak için önce komut satırı arabirimini açmamız gerekir. + + + +Başlat'a gidin → Windows sistemi → Komut istemcisi. + +> Daha eski bir windows sistemi için, Başlat menüsü →Tüm programlar → Aksesuarlar → Komut istemcisi. + + + + + +Uygulamalar → Araçlar →Terminal. + + + + + +Muhtemelen Uygulamalar → Donatılar → Terminal altında olmalı, fakat sistemler arası farklılık gösterebilir. Eğer orada değilse İnternet'te arayın. :) + + + +## İstemci + +Şu anda yüksek ihtimalle sizden komut bekleyen siyah ya da beyaz bir ekran görüyor olmalısınız. + + + +Eğer Mac veya GNU/Linux kullanıyorsanız, yüksek ihtimalle `$` işareti göreceksiniz, tıpkı bunun gibi: + +{% filename %}komut-satırı{% endfilename %} + + $ + + + + + + +Windows'da ise `>` işareti göreceksiniz, bunun gibi: + +{% filename %}komut-satırı{% endfilename %} + + > + + + + +Tüm komutlar bu işaret ve bir boşluktan sonra gelir fakat bunu yazmak zorunda değilsiniz. Bilgisayarınız bunu sizin için yapacaktır. :) + +> Küçük bir not: sizin durumunuzda `C:\Users\ola>` veya `Olas-MacBook-Air:~ ola$` benzeri bir durumda olabilir ve kesinlikle sorun yok. + +Başında `$` veya `>` içeren kısımlar *komut satırı istemi* veya kısaca *komut istemi*'dir. Buraya bir şeyler girilir. + +Bu kılavuzda bir komut girmeniz istendiğinde, biz `$` veya `>` ekleyeceğiz, genellikle sola doğru. Sol tarafı göz ardı edebilir ve işlemi başlatan komutu girebilirsiniz. + +## İlk komutunuz (Yaşasın!) + +Aşağıdaki komutu yazarak başlayalım: + + + +{% filename %}komut-satırı{% endfilename %} + + $ whoami + + + + + + +{% filename %}komut-satırı{% endfilename %} + + > whoami + + + + +Ve ardından `enter` tuşuna basın. Sonucumuz bu: + +{% filename %}komut-satırı{% endfilename %} + + $ whoami zeynep + + +Gördüğünüz gibi bilgisayar kullanıcı adınızı yazdı. Şahane, değil mi ? :) + +> Her komutu yazmaya çalışın; kopyala - yapıştır yapmayın. Böylece daha akılda kalıcı olur! + +## Temeller + +Tüm işletim sistemleri komut satırı için birbirinden biraz farklı komutlar kullanır, bu nedenle işletim sisteminize uygun yönergeleri izlediğinizden emin olun. Deneyelim mi? + +### Geçerli Dizin + +Nerede olduğumuzu bilmek güzel olurdu, değil mi? Bakalım. Bu komutu yazın ve `enter` tuşuna basın: + + + +{% filename %}komut-satırı{% endfilename %} + + $ pwd + /Users/zeynep + + +> Not: 'pwd'nin anlamı "print working directory" yani "çalışma dizinini yazdır"dır. + + + + + +{% filename %}komut-satırı{% endfilename %} + + > cd + C:\Users\zeynep + + +> Not: 'cd' komutu 'dizin değiştir' anlamındadır. Powershell ile Linux veya macOS'teki gibi pwd komutunu kullanabilirsiniz. + + + +Muhtemelen makinenizde benzeri bir yazı göreceksiniz. Komut satırını açtığınızda genellikle kullanıcınızın ev dizininde başlarsınız. + +* * * + +### Dosya ve dizinleri listele + +Yani içeride ne var? Bilmek harika olurdu. Haydi bakalım: + + + +{% filename %}komut-satırı{% endfilename %} + + $ ls + Uygulamalar + Masaüstü + İndirilenler + Müzik + ... + + + + + + +{% filename %}komut-satırı{% endfilename %} + + > dir Directory of C:\Users\zeynep + 05/08/2014 07:28 PM Uygulamalar + 05/08/2014 07:28 PM Masaüstü + 05/08/2014 07:28 PM İndirilenler + 05/08/2014 07:28 PM Müzik + ... + + +> Not: Ayrıca PowerShell kullanırken Linux ve macOS'teki gibi 'ls' komutunu kullanabilirsiniz. + +* * * + +### Geçerli dizini değiştir + +Şimdi, haydi Masaüstü dizinimize gidelim: + + + +{% filename %}komut-satırı{% endfilename %} + + $ cd Masaüstü + + + + + + +{% filename %}komut-satırı{% endfilename %} + + > cd Masaüstü + + + + +Gerçekten değişmiş mi bir bakalım: + + + +{% filename %}komut-satırı{% endfilename %} + + $ pwd + C:\Users\zeynep\Masaüstü + + + + + + +{% filename %}komut-satırı{% endfilename %} + + > cd + C:\Users\zeynep\Masaüstü + + + + +İşte oldu! + +> Profesyonel İpucu: Eğer `cd D` yazarsanız ve klavyenizden `tab`'a basarsanız, komut satırı ismin geri kalanını tamamlar ve daha hızlı gezersiniz. Eğer "D" ile başlayan birden fazla klasör varsa, diğer seçenekleri görmek için `tab` tuşuna iki kez basın. + +* * * + +### Dizin oluşturun + +Uygulamalı yapmak için masaüstünüzde bir dizin oluşturmaya ne dersiniz? Bu şekilde yapabilirsiniz: + + + +{% filename %}komut-satırı{% endfilename %} + + $ mkdir uygulama + + + + + + +{% filename %}komut-satırı{% endfilename %} + + > mkdir uygulama + + + + +Bu küçük komut masaüstünüzde `uygulama` isimli bir klasör oluşturacaktır. Orada olup olmadığını kontrol etmek için `ls` veya `dir` komutlarını kullanabilirsiniz! Deneyin. :) + +> Profesyonel ipucu: Eğer aynı komutları tekrar tekrar yazmak istemiyorsanız, `yukarı ok` ve `aşağı ok` tuşlarına basarak yazdığınız komutlar arasında geçiş yapabilirsiniz. + +* * * + +### Alıştırma! + +Sizin için ufak bir alıştırma: yeni oluşturduğunuz `alıştırma` dizininde `test` adında bir dizin oluşturun. (`cd` ve `mkdir` komutlarını kullanın.) + +#### Çözüm: + + + +{% filename %}komut-satırı{% endfilename %} + + $ cd uygulama + $ mkdir test + $ ls + test + + + + + + +{% filename %}komut satırı{% endfilename %} + + > cd uygulama + > mkdir test + > dir + 05/08/2014 07:28 PM test + + + + +Tebrikler! :) + +* * * + +### Temizlik + +Ortalığı dağınık bırakmak istemeyiz, haydi yaptığımız her şeyi silelim. + +İlk önce masaüstüne geri dönmemiz gerek: + + + +{% filename %}komut satırı{% endfilename %} + + $ cd .. + + + + + + +{% filename %}komut satırı{% endfilename %} + + > cd .. + + + + +`cd` komutu ile `..` kullanmak sizi geçerli dizinin bir üst dizinine götürür (bu şu anki dizinin ana dizinidir). + +Nerede olduğunuzu kontrol edin: + + + +{% filename %}komut satırı{% endfilename %} + + $ pwd + C:\Users\zeynep\Masaüstü + + + + + + +{% filename %}komut satırı{% endfilename %} + + > cd + C:\Users\zeynep\Masaüstü + + + + +Şimdi `uygulama` dizinini silme vakti: + +> **Dikkat**: `del`, `rmdir` veya `rm` komutları kullanılarak yapılan silme işlemleri geri alınamaz, bunun anlamı: *silinen dosyalar sonsuza dek yok olur*! Yani bu komutları kullanırken çok dikkatli olun. + + + +{% filename %}komut satırı{% endfilename %} + + $ rm -r uygulama + + + + + + +{% filename %}komut satırı{% endfilename %} + + > rmdir /S uygulama + uygulama, Emin misiniz ? E + + + + +Bitti! Gerçekten silindiğinden emin olalım: + + + +{% filename %}komut satırı{% endfilename %} + + $ ls + + + + + + +{% filename %}komut satırı{% endfilename %} + + > dir + + + + +### Çıkış + +Şimdilik bu kadar! Şimdi komut satırını güvenle kapatabilirsiniz. Bunu "hacker" tarzında yapalım, tamam mı? :) + + + +{% filename %}komut satırı{% endfilename %} + + $ exit + + + + + + +{% filename %}komut satırı{% endfilename %} + + > exit + + + + +Harika, değil mi? :) + +## Özet + +İşte bazı yararlı komutların özeti: + +| Komut (Windows) | Komut (Mac OS - GNU/Linux) | Açıklama | Örnek | +| ---------------- | -------------------------- | ----------------------- | ------------------------------------------------- | +| exit | exit | pencereyi kapatır | **exit** | +| cd | cd | dizin değiştir | **cd test** | +| cd | pwd | geçerli dizini göster | **cd** (Windows) veya **pwd** (Mac OS / Linux) | +| dir | ls | dizin/dosyaları listele | **dir** | +| copy | cp | dosya kopyala | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | dosya taşı | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | yeni bir dizin oluştur | **mkdir testdizini** | +| rmdir (veya del) | rm | dosyayı silin | **del c:\test\test.txt** | +| rmdir /S | rm -r | klasörü siliniz | **rm - r testdizini** | + +Bu kullanabileceğiniz komutlardan sadece birkaçı, fakat bugün bundan daha fazlasını kullanmayacaksınız. + +Eğer merak ediyorsanız, [ss64.com](http://ss64.com) adresinden tüm işletim sistemleri için tüm komutların kullanımına ulaşabilirsiniz. + +## Hazır mısınız? + +Haydi Python'a giriş yapalım! \ No newline at end of file diff --git a/tr/python_installation/README.md b/tr/python_installation/README.md new file mode 100644 index 00000000000..e8fee28d9cd --- /dev/null +++ b/tr/python_installation/README.md @@ -0,0 +1,15 @@ +# Hadi Python ile başlayalım + +Nihayet buradayız! + +Fakat önce, size Python'un ne olduğunu açıklayalım. Python web siteleri, oyunlar, bilimsel yazılımlar, grafikler ve çok daha fazlasını oluşturmak için kullanılan bir programlama dilidir. + +Python'un kökleri 1980'li yılların sonlarına dayanmaktadır ve ana hedefi sadece makineler değil insanlar tarafından da okunabilir olmaktır. Bu nedenle öbür programlama dillerinden daha basit görünür, ama merak etmeyin - Python da hakikaten güçlü! + +# Python kurulumu + +> **Not** Eğer Chromebook kullanıyorsanız bu bölümü geçin ve [Chromebook Kurulumu](../chromebook_setup/README.md)'daki talimatları takip edin. +> +> **Not** Eğer kurulum adımlarını zaten bitirdiyseniz tekrar yapmanıza gerek yok - doğrudan sonraki bölüme geçebilirsiniz! + +{% include "/python_installation/instructions.md" %} \ No newline at end of file diff --git a/tr/python_installation/images/add_python_to_windows_path.png b/tr/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/tr/python_installation/images/add_python_to_windows_path.png differ diff --git a/tr/python_installation/images/python-installation-options.png b/tr/python_installation/images/python-installation-options.png new file mode 100644 index 00000000000..a0a6c65d81d Binary files /dev/null and b/tr/python_installation/images/python-installation-options.png differ diff --git a/tr/python_installation/images/windows-plus-r.png b/tr/python_installation/images/windows-plus-r.png new file mode 100644 index 00000000000..4f8f7433381 Binary files /dev/null and b/tr/python_installation/images/windows-plus-r.png differ diff --git a/tr/python_installation/instructions.md b/tr/python_installation/instructions.md new file mode 100644 index 00000000000..3d1546f682e --- /dev/null +++ b/tr/python_installation/instructions.md @@ -0,0 +1,106 @@ +> Evdeki okuyucular için: bu bölüm [Installing Python & Code Editor](https://www.youtube.com/watch?v=pVTaqzKZCdA) isimli videoda anlatılmıştır. +> +> Bu bölüm Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) tarafından hazırlanmış bir öğreticiye dayanmaktadır + +Django, Python dilinde yazılmıştır. Django'da herhangi bir şey yapmak için Python'a ihtiyaç duyarız. Python'ın kurulumunu yaparak başlayalım! Sizden Python 3.6'nın kurulumunu yapmanızı istiyoruz. Yani, eğer daha önceki bir versiyonuna sahipseniz, güncellemeniz gerekecek. + + + +Öncelikle Windows + Pause/Break tuş kombinasyonlarına basarak bilgisayarınızın Windows'un 32-bit versyionunu mu 64-bit versiyonu mu çalıştırdığını kontrol edin. Bu size Sistem bilgisini açacak. Açılan bu pencerede "Sistem tipi" satırına bakın. Windows için Python'ı indirmek için resmi siteyi ziyaret edebilirsiniz: https://www.python.org/downloads/windows/. "Son Python 3 Sürümü - Python x.x.x" bağlantısına tıklayın. Eğer bilgisayarınız **64-bit** versiyon Windows çalıştırıyorsa, **Windows x86-64 çalıştırılabilir yükleyici**'yi indirin. Değilse, **Windows x86 çalıştırılabilir yükleyici**'yi indirin. Yükleyiciyi indirdikten sonra, çalıştırmalısınız (üzerine çift tıklayarak) ve oradaki talimatları takip etmelisiniz. + +Dikkat edilmesi gereken bir şey: Yükleme esnasında "Setup" ("Kur") işaretli bir pencere farkedeceksiniz. "Add Python 3.6 to PATH" ("PATH'e Python 3.6'yı ekle) kutucuğunun işaretli olduğundan emin olun ve aşağıda gösterildiği gibi "Install Now" ("Şimdi Yükle") 'a tıklayın: + +![Python'u arama yoluna eklemeyi unutmayın](../python_installation/images/python-installation-options.png) + +Önümüzdeki adımlarda, Windows Komut Satırını kullanıyor olacaksınız (ki ayrıca bahsedeceğiz). Şimdilik, bazı komutlar girmeniz gerekirse, Başlat menüsüne gidin ve arama alanına "Komut istemi" yazıp enter'a basın. (Windows'un eski sürümlerinde, komut satırını Başlat menüsü → Windows sistemi → Komut istemi ile başlatabilirsin.) Ayrıca "Çalıştır" penceresi açılana kadar Windows tuşunu basılı tutup "R"-tuşuna basabilirsin. Komut Satırı'nı açmak için, "cmd" yazın ve "Çalıştır" penceresinde enter'a basın. + +!["Çalıştır" penceresine "cmd" yazın](../python_installation/images/windows-plus-r.png) + +Not: eğer Windows'un eski bir versiyonunu (7, Vista ya da herhangi bir eski versiyon) kullanıyorsanız ve Python 3.6.x yükleyicisi hata veriyorsa, aşağıdakilerden birini deneyebilirsiniz: + +1. bütün Windows Güncellemeleri'ni yükleyin ve Python 3.6'yı tekrar yüklemeyi deneyin; ya da +2. [eski bir Python versiyonu](https://www.python.org/downloads/windows/), örneğin [3.4.6](https://www.python.org/downloads/release/python-346/) yükleyin. + +Eğer Python'ın eski bir versiyonunu yüklerseniz, yükleme ekranı yukarıda gösterilenden biraz farklı görünebilir. "python.exe'yi Path'e ekle" görene dek aşağı kaydırdığınızdan emin olun, daha sonra soldaki butona tıklayın ve "Yerel sabit sürücüye yüklenecek"'i seçin: + +![Eski Python sürümlerini Path'e ekleyin](../python_installation/images/add_python_to_windows_path.png) + + + + + +> **Not** Python'ı macOS'te yüklemeden önce, Mac ayarlarınızın App Store'dan olmayan paketleri yüklemeye izin verdiğinden emin olmalısınız. Sistem Tercihleri'ne (Uygulamalar klasöründe) gidin, önce "Güvenlik & Gizlilik"'e ve daha sonra da "Genel" sekmesine tıklayın. Eğer sizin "Şuradan yüklenen uygulamalara izin ver:" ayarınız "Mac App Store"'a ayarlıysa, onu "Mac App Store and kimliği bilinen geliştirici."lere çevirin + +Python kurulum dosyasını indirmek için resmi siteye gitmelisiniz: https://www.python.org/downloads/release/python-361/ + +* *macOS 64-bit/32-bit yükleyici* dosyasını indirin, +* *python-3.6.1-macosx10.6.pkg* 'a çift tıklayarak yükleyiciyi çalıştırın. + + + + + +Muhtemelen sisteminizde Python zaten yüklüdür. Yüklü olup olmadığını (ya da hangi versiyon olduğunu) kontrol etmek için komut satırını açın ve aşağıdaki komutları girin: + +{% filename %}komut satırı{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +Eğer farklı bir 'mikro sürüm' Python yüklüyse, örn: 3.6.0, o zaman yükseltme yapmak zorunda değilsiniz. Python yüklü değilse ya da farklı bir versiyon edinmek istiyorsanız aşağıdaki adımları takip edin: + + + + + +Terminale bu komutu girin: + +{% filename %}komut satırı{% endfilename %} + + $ sudo apt install python3.6 + + + + + + +Terminalde kullanmanız gereken komut: + +{% filename %}komut satırı{% endfilename %} + + $ sudo dnf install python3 + + +Eğer eski bir Fedora sürümünüz varsa `dnf` komutu bulunamadı hatasını alabilirsiniz. Bu durumda, `yum` kullanmanız gerekir. + + + + + +Terminalde kullanmanız gereken komut: + +{% filename %}komut satırı{% endfilename %} + + $ sudo zypper install python3 + + + + +Komut istemini açıp `python3` komutunu çalıştırarak yüklemenin başarılı olup olmadığını doğrulayabilirsiniz: + +{% filename %}komut satırı{% endfilename %} + + $ python3 --version + Python 3.6.1 + + +**Not:** Eğer Windows kullanıyorsanız ve `python3` bulunamadı hatasını alıyorsanız, `python` (`3` olmadan) komutunu deneyin ve Python 3.6 sürümlerinin olup olmadığını kontrol edin. + +* * * + +Eğer herhangi bir şüpheniz varsa veya kurulumda bir şeyler ters gittiyse ve sonrasında ne yapılacağını bilmiyorsanız, eğitmeninize sorabilirsiniz! Bazen işler düzgün gitmiyor, bu durumda daha fazla deneyime sahip birinden yardım istemelisiniz. \ No newline at end of file diff --git a/tr/python_introduction/README.md b/tr/python_introduction/README.md new file mode 100644 index 00000000000..f64ef088ba0 --- /dev/null +++ b/tr/python_introduction/README.md @@ -0,0 +1,1069 @@ +{% set warning_icon = '' %} + +# Python'a giriş + +> Bu bölümün bir kısmı Geek Girls Carrots tarafından hazırlanmış eğitimlere dayanılarak hazırlanmıştır (https://github.com/ggcarrots/django-carrots). + +Biraz kod yazalım! + +## Python komut istemi (prompt) + +> Evdeki okuyucular için: Bu kısım [Python Temelleri: Tamsayılar, Dizeler, Listeler, Değişkenler ve Hatalar](https://www.youtube.com/watch?v=MO63L4s-20U) videosunda bulunabilir. + +Python'la oynamaya başlamadan önce bilgisayarımızda bir *komut satırı* açmamız gerekiyor. Bunu zaten nasıl yapacağınızı artık biliyorsunuz, [Komut satırına giriş](../intro_to_command_line/README.md) bölümünde öğrenmiştiniz. + +Hazır olduğunuzda, aşağıdaki talimatları takip edin. + +Bir Python konsolu açmak istiyoruz; öyleyse Windows'ta `python`, Mac OS/Linux'ta `python3` yazıp, `enter`'a basın. + +{% filename %}komut satırı{% endfilename %} + + $ python3 + Python 3.6.1 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## İlk Python komutunuz! + +Python komutunu çalıştırdıktan sonra, komut istemi `>>>` şeklinde değişti. Bizim için bu, şimdi yalnızca Python dilinde komutlar kullanabileceğimiz anlamına geliyor. `>>>` yazmanıza gerek yok - Python bunu sizin için yapacak. + +Eğer herhangi bir zamanda Python komut satırından çıkmak isterseniz, yalnızca `exit()` yazmanız ya da Windows için `Ctrl + Z`, Mac/Linux için `Ctrl + D` kısa yolunu kullanmanız yeterli. Bunu yaptığınız taktirde artık `>>>` yazısını görmeyeceksiniz. + +Şimdilik, Python konsolundan çıkmak istemiyoruz. Bu konuda daha fazla bilgi edinmek istiyoruz. Biraz matematik yazarak başlayalım (` 2 + 3 ` gibi) ve `enter` 'a basalım. + +{% filename %}komut satırı{% endfilename %} + +```python +>>> 2 + 3 +5 +``` + +Güzel! Cevap nasıl da çıktı görüyor musun? Python matematik biliyor! Sen de diğer komutları şöyle deneyebilirsin: + +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Üstel hesaplama yapmak için 2 üzeri 3 deyin, şöyle yazalım: {% filename %}komut-satırı{% endfilename %} + +```python +>>> 2 ** 3 +8 +``` + +Bunları biraz kurcalayıp eğlen, sonra tekrar burada buluşalım. :) + +Gördüğün gibi Python çok iyi bir hesap makinesi. Eğer başka neler yapabileceğini merak ediyorsan... + +## String'ler (dizeler) + +Mesela ismin? İsmini tırnak işaretleri içerisinde şu şekilde yaz: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> "Zeynep" +'Zeynep' +``` + +İlk string'ini oluşturdun! String (dize), bilgisayar tarafından işlenebilen ve karakterlerden oluşan dizilerin genel adıdır. Bir string her zaman aynı özel karakterle başlamalı ve aynı özel karakterle bitmelidir. Tek tırnak (`'`) veya çift tırnak (`"`) olabilir (aralarında herhangi bir fark yok!). Tırnak işaretleri Python'da içlerinde olan şeyin bir string olduğunu ifade eder. + +Stringler birbirlerine eklenebilir. Şunu dene: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> "Merhaba " + "Zeynep" +'Merhaba Zeynep' +``` + +Ayrıca stringleri bir sayı ile çarpabilirsin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> "Zeynep" * 3 +'ZeynepZeynepZeynep' +``` + +Eğer stringinin içerisine bir tırnak işareti koymak istiyorsan, bunun için iki seçeneğin var. + +Çift tırnak kullanarak: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> "Turgut Uyar'ın dizeleriyiz" +"Turgut Uyar'ın dizeleriyiz" +``` + +veya backslash (` \ `) kullanarak: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> 'Turgut Uyar\'ın dizeleriyiz' +"Turgut Uyar'ın dizeleriyiz" +``` + +Hoş değil mi? İsminin tamamını büyük harf yapmak için, sadece şunu yazman yeterli: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> "Zeynep".upper() +'ZEYNEP' +``` + +String'in üzerinde `upper` **fonksiyon**unu kullandın! Bir fonksiyon (`upper()` gibi), çağırıldığında (calling) Python'un girdi olarak verilen bir obje (`"Zeynep"`) üzerinde gerçekleştirmesi gereken bir dizi işleme denilir. + +Eğer ismindeki harflerin sayısını öğrenmek istiyorsan bunun için de bir **fonksiyon** var! + +{% filename %}komut satırı{% endfilename %} + +```python +>>> len("Zeynep") +6 +``` + +Fonksiyonları neden bazen stringin sonunda bir `.` ile (`"Zeynep".upper()` gibi) ve bazen de önce fonksiyonu çağırıp sonra parantez içerisine stringi yazarak kullandığımızı merak ediyor musun? Pekala, bazı durumlarda, fonksiyonlar bir takım nesnelere aittirler, mesela `upper()`, yalnızca stringler üzerinde kullanılabilir. Böyle durumlarda, bu tarz fonksiyonlara biz **method** ismini veriyoruz. Diğer durumlarda, bir fonksiyon özel olarak bir nesneye ait olmayıp, farklı çeşitlerde nesneler üzerinde de kullanılabilir, aynı `len()` gibi. İşte bu nedenle `"Zeynep"` stringini `len` fonksiyonuna bir parametre olarak veriyoruz. + +### Özet + +Tamam, stringlerden yeterince bahsettik. Şu ana kadar şu konuları öğrendin: + +- **komut istemi** – komutları (kod) Python'un komut istemine yazdığınızda Python'da sonuçlandırarak yanıtlar üretir +- **sayılar ve dizeler** – Python'da sayılar matematik için dizeler ise metin nesneleri için kullanılmaktadır +- **operatörler** `+` ve `*` gibi, değerleri birleştirerek yeni bir değer üretmek için kullanılmaktadır +- **fonksiyonlar** `upper()` ve `len()` gibi, nesneler üzerinde eylemler gerçekleştirmektedirler. + +Bunlar öğreneceğiniz her programlama dilinin temelleri. Biraz daha zor bir şey için hazır mısın? İddiaya gireriz öylesin! + +## Hatalar + +Şimdi yeni bir şey deneyelim. Bir sayının uzunluğunu, bir string'in uzunluğunu bulduğumuz gibi bulabilir miyiz? Bunu görmek için `len(304023)` yazıp `enter` a basalım: + +{% filename %}{{ warning_icon }} komut satırı{% endfilename %} + +```python +>>> len(304023) +Traceback (most recent call last): + File "", line 1, in +TypeError: object of type 'int' has no len() +``` + +İlk hatamızı aldık! {{ warning_icon }} ikonu çalıştırmak üzere olduğunuz programın beklediğiniz gibi çalışmayacağı konusunda sizi ikaz eder. Hatalar yapmak (kasıtlı olanlar bile) öğrenmenin önemli bir kısmı! + +Nesne türü "int" (tam sayılar, tüm sayılar) in uzunluğu olmadığını söylüyor. Şimdi ne yapabiliriz? Belki de rakamı bir string olarak yazabiliriz? Stringlerin bir uzunluğu var, değil mi? + +{% filename %}komut satırı{% endfilename %} + +```python +>>> len(str(304023)) +6 +``` + +İşe yaradı! `str` fonksiyonunu `len` fonksiyonunun içinde kullandık. `str` her şeyi string'e çeviriyor. + +- `str` fonksiyonu, değişkenleri **stringe** çeviriyor +- `int` fonksiyonu değişkenleri **integera** çeviriyor + +> Önemli: Sayıları metin durumuna getirebiliriz ama metni sayılar durumuna tam olarak getiremeyebiliriz - yine de `int('hello')` olsa ne olurdu? + +## Değişkenler + +Programlamada en önemli konulardan biri değişkenlerdir. Değişken (variable), daha sonra kullanmak istediğiniz bir yapıya verdiğiniz isimdir. Programcılar değişkenleri verileri tutmak ya da kodlarını daha okunabilir ve anlaşılabilir kılmak için kullanırlar ve böylece her şeyi sürekli akıllarında tutmaya gerek kalmaz. + +`name` adında bir değişken yaratmak istediğimizi varsayalım: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> name = "Ayşe" +``` + +name (isim) eşittir "Ayşe" yazalım. + +Farkettiğiniz gibi, program daha öncekilerinin aksine bu kez hiçbir cevap vermedi. O zaman böyle bir değişkenin gerçekten tanımlı olduğunu nasıl bilebiliriz? Basitçe, `name` yazıp `enter` tuşuna basalım: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> name +'Ayşe' +``` + +Yaşasın! İşte bu senin ilk değişkenin! :) Bu değişkenin işaret ettiği şeyi her zaman değiştirebilirsin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> name = "Suzan" +>>> name +'Suzan' +``` + +Bu değişkeni fonksiyonlar içinde de kullanabilirsin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> len(name) +5 +``` + +Harika değil mi? Tabii ki değişkenler, sayılar da dahil herhangi bir şey olabilir. Şunu deneyin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> a = 4 +>>> b = 6 +>>> a * b +24 +``` + +Peki ya değişkenin adını yanlış kullanırsak? Ne olacağını tahmin ediyor musun? Deneyelim! + +{% filename %}{{ warning_icon }} komut satırı{% endfilename %} + +```python +>>> city = "Tokyo" +>>> ctiy +Traceback (most recent call last): + File "", line 1, in +NameError: name 'ctiy' is not defined +``` + +Bir hata! Gördüğünüz gibi, Python birçok hata çeşidine sahip ve bu hatanın adı **NameError**, yani İsimlendirme Hatası. Tanımlamadığınız bir değişkenin adını kullanmaya çalışırsanız, Python size bu hatayı verir. Eğer bu hata ile daha sonra karşılaşırsanız, kodunuzdaki değişkenlerin adını doğru yazıp yazmadığınızı kontrol edin. + +Bununla biraz oynayıp, neler yapabildiğinizi görün! + +## Yazdırma (Print) İşlevi + +Şunu deneyin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> name = 'Merve' +>>> name +'Merve' +>>> print(name) +Merve +``` + +Sadece `name` yazdığınız zaman, Python yorumlayıcısından 'name' değişkeninin dize olarak *temsili* döner, yani tek tırnaklar içine alınmış M-e-r-v-e harfleri. Eğer `print(name)` derseniz Python ekrana değişkenin içeriğini yazdıracaktır, bu kez tırnaklar olmaksızın, daha temiz biçimde. + +Daha ileride göreceğimiz gibi `print()`, işlevlerin içindeyken bir şey yazdırmak istediğimizde ya da bazı şeyleri birden fazla satırda yazdırmak istediğimizde de kullanışlıdır. + +## Listeler + +Python, string (dize) ve integerın (tam sayı) yanı sıra, çok değişik türlerde nesnelere sahiptir. Şimdi, **liste** türünü tanıtacağız. Listeler tam da düşündüğünüz gibidir: diğer nesnelerin listesi olan nesne. :) + +Yeni bir liste yaratmakla devam edelim: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> [] +[] +``` + +Evet, liste boş. Çok kullanışlı sayılmaz, değil mi? Hadi loto numaralarıyla liste oluşturalım. Sürekli kendimizi tekrar etmek istemeyiz, o yüzden listeyi değişkene atayalım: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> lottery = [3, 42, 12, 19, 30, 59] +``` + +Pekala, listeyi oluşturduk! Onunla ne yapabiliriz? Hadi listede kaç tane loto numarası olduğunu görelim. Hangi fonksiyonu kullanman gerektiği hakkında bir fikrin var mı? Zaten bildiğin bir fonksiyon! + +{% filename %}komut satırı{% endfilename %} + +```python +>>> len(lottery) +6 +``` + +Evet! `len()` listedeki nesne sayısını verir. Kullanışlı, değil mi? Belki de şu an listeyi sıralarız: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> lottery.sort() +``` + +Bu hiçbir cevap vermez, sadece listedeki numaraların sırasını değiştirir. Şimdi listeyi yazdıralım ve ne olduğunu görelim: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> print(lottery) +[3, 12, 19, 30, 42, 59] +``` + +Gördüğünüz gibi, listedeki sayılar artık küçükten büyüğe sıralı. Tebrikler! + +Belki de sıralamayı ters çevirmek isteriz? Hadi yapalım! + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> lottery.reverse() +>>> print(lottery) +[59, 42, 30, 19, 12, 3] +``` + +Kolay, değil mi? Listeye yeni bir eleman eklemek isterseniz, şu komutu yazarak yapabilirsiniz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> lottery.append(199) +>>> print(lottery) +[59, 42, 30, 19, 12, 3, 199] +``` + +Sadece listedeki ilk elemanı göstermek isterseniz, **indexes** (indeksler) ile yapabilirsiniz. İndeks elemanın listede nerede olduğunu belirten numaradır. Programcılar sıfırdan başlamayı tercih ederler, bu yüzden listedeki ilk eleman listenin 0. indeksindedir, sonraki 1. indeksindedir ve böyle devam eder. Şunu deneyin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> print(lottery[0]) +59 +>>> print(lottery[1]) +42 +``` + +Gördüğünüz gibi, listedeki nesnelere listenin ismi ve köşeli parantez içindeki nesnenin indeksini kullanarak ulaşabilirsin. + +Listenizden bir şeyler silmek için, yukarıda öğrendiğimiz gibi **indeksleri** ve `pop()` metodunu kullanmamız gerekecektir. Bir örnekle öğrendiklerimizi pekiştirelim; listeden ilk numarayı sileceğiz. + +{% filename %}komut satırı{% 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] +``` + +Kusursuz çalıştı! + +Daha fazla eğlence için diğer indeksleri de deneyin: 6, 7, 1000, -1, -6 veya -1000. Denemeden önce komutların sonuçlarını tahmin etmeye çalışın. Sonuçlar mantıklı mıydı? + +Bütün liste fonksiyonlarını Python dökümantasyonunun bu bölümünde bulabilirsin: https://docs.python.org/3/tutorial/datastructures.html + +## Sözlükler (Dictionaries) + +> Evdeki okuyucular için: Bu kısım [Python Temelleri: Sözlükler](https://www.youtube.com/watch?v=ZX1CVvZLE6c) videosunda işlenmiştir. + +Sözlük listeye benzerdir ancak sözlük değerlerine indeks yerine anahtar ile ulaşılır. Anahtar metin veya numara olabilir. Boş bir sözlük oluşturmak için kullanılan söz dizimi şudur: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> {} +{} +``` + +Bu boş bir sözlük oluşturduğunuzu gösterir. Yaşasın! + +Şimdi, bu komutu yazmayı deneyin (kendi bilgilerinizle değiştirmeyi deneyin): + +{% filename %}komut satırı{% endfilename %} + +```python +>>> participant = {'name': 'Ayşe', 'country': 'Türkiye', 'favorite_numbers': [7, 42, 92]} +``` + +Bu komutla, üç anahtar-değer çifti ile `participant` (katılımcı) isminde bir değişken oluşturdunuz: + +- Anahtar `name` `'Ayşe'` (`string` nesnesi) değerine işaret eder, +- `country` `Türkiye` (bir diğer `string`) değerine), +- ve `favorite_numbers` `[7, 42, 92]` (3 numaralı bir `list`) değerine işaret eder. + +Bu söz dizimi ile tek bir anahtarın içeriğini kontrol edebilirsin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> print(participant['name']) +Ayşe +``` + +Gördünüz mü, bu listeye benzer. Fakat indeksi hatırlamanıza gerek yok - sadece ismini hatırlayın. + +Python'a olmayan bir anahtarın değerini sorarsak ne olur? Tahmin edebiliyor musun? Hadi deneyip görelim! + +{% filename %}{{ warning_icon }} komut satırı{% endfilename %} + +```python +>>> participant['age'] +Traceback (most recent call last): + File "", line 1, in +KeyError: 'age' +``` + +Bir başka hata! **KeyError** hatası. Python yardımseverdir ve sana `'age'` anahtarının sözlükte bulunmadığını söyler. + +Ne zaman sözlük veya liste kullanmalısın? Düşünmek için güzel bir nokta. Sonraki satıra bakmadan önce cevap üzerinde bir düşünün. + +- Sıralı elemanlara mı ihtiyacın var? Liste ile devam et. +- İleride hızlıca (anahtarlar ile) değerlere ulaşmak istediğin için anahtarlar ile ilişkilendirilmiş değerlere mi ihtiyacın var? Sözlük kullan. + +Sözlükler de listeler gibi değişebilirdir (*mutable*), yani oluşturulduktan sonra değiştirilebilirler. Oluşturulduktan sonra sözlüklere anahtar/değer çifti ekleyebilirsiniz, aşağıdaki gibi: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> participant['favorite_language'] = 'Python' +``` + +Listeler gibi, `len()` metodu sözlükteki anahtar-değer çiftlerinin sayısını bize verir. Devam edip şu komutu yazın: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> len(participant) +4 +``` + +Umarım şu ana kadar mantıklı gelmiştir :) Sözlüklerle biraz daha eğlenceye hazır mısın? İlginç şeyler için sonraki satıra atla. + +Sözlükten bir maddeyi silmek için `pop()` metodunu kullanabilirsin. Mesela, `'favorite_numbers'` anahtarına karşılık gelen elemanı silmek istersen, şu komutu yaz: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> del participant['favorite_numbers'] +>>> participant +{'country': 'Türkiye', 'favorite_language': 'Python', 'name': 'Ayşe'} +``` + +Çıktıdan görebildiğin gibi, 'favorite_numbers' anahtarına karşılık gelen anahtar-değer çifti silindi. + +Bunun yanı sıra, sözlükteki daha önce oluşturulmuş anahtarın değerini değiştirebilirsiniz. Şunu yazın: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> participant['country'] = 'Almanya' +>>> participant +{'country': 'Almanya', 'favorite_language': 'Python', 'name': 'Ayşe'} +``` + +Gördüğün gibi, `'country'` anahtarının değeri `'Türkiye'`den `'Almanya`'ya çevrildi. :) Heyecan verici değil mi? Yaşasın! Bir başka harika şey öğrendin. + +### Özet + +Harika! Şu an programlama hakkında birçok şey biliyorsun. Bu kısımda, şunları öğrendin: + +- **errors** - eğer Python yazdığın komutu anlamazsa çıkan hataları nasıl okuyacağını ve anlayacağını artık biliyorsun +- **değişkenler** - daha kolay kod yazmanı sağlayan ve kodunu daha okunabilir yapan nesnelerin isimleri +- **listeler** - belirli bir sırada tutulan nesnelerin listesi +- **sözlükler** - anahtar-değer çifti olarak tutulan nesneler + +Bir sonraki bölüm için heyecanlı mısınız? :) + +## Karşılaştırma + +> Evden okuyanlar için: Bu kısım [Python Basics: Comparisons](https://www.youtube.com/watch?v=7bzxqIKYgf4) videosunda anlatılıyor. + +Programlamanın büyük kısmı karşılaştırma içerir. Karşılaştırması en kolay olan şey nedir? Tabi ki sayılar. Bakalım nasıl çalışıyor: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> 5 > 2 +True +>>> 3 < 1 +False +>>> 5 > 2 * 2 +True +>>> 1 == 1 +True +>>> 5 != 2 +True +``` + +Python'a birkaç sayı karşılaştırmasını söyledik. Gördüğünüz gibi, sadece sayıları karşılaştırmakla kalmadı, aynı zamanda metodların sonuçlarını da karşılaştırdı. Güzel değil mi? + +İki sayının eşit olup olmadığını öğrenmek için neden iki tane eşittir işraretini `==` yan yana koyduk? Değişkenlere içerik verirken, tek `=` işaretini kullanıyoruz. Her zaman ama **her zaman** ikisini birden koyman gerekir – `==` – eğer birbirlerine eşit olup olmadıklarını kontrol etmek isterseniz. Sayıların birbirine eşit olmaması durumunu da kontrol edebiliriz. Bunun için, yukarıdaki örnekteki gibi `!=` sembolünü kullanıyoruz. + +Python' a iki görev daha verin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> 6 >= 12 / 2 +True +>>> 3 <= 2 +False +``` + +`>`‘ı ve `<`‘ı gördük, ama `>=` ve `<=` ne anlama geliyor? Onları böyle okuyabilirsin: + +- x `>` y : x büyüktür y +- x `<` y : x küçüktür y +- x `<=` y : x küçük eşittir y +- x `>=` y : x büyük eşittir y + +Harika! Birkaç denemeye daha ne dersiniz? Şunu deneyin: + +{% filename %}komut satırı{% endfilename %} + +```python +>>> 6 > 2 and 2 < 3 +True +>>> 3 > 2 and 2 < 1 +False +>>> 3 > 2 or 2 < 1 +True +``` + +Python'a istediğiniz kadar sayıyı karşılaştırmak için verebilirsiniz, ve size hepsinin cevabını verecek. Çok akıllı değil mi? + +- **and** - Mantıkta kullandığımız "ve" anlamına geliyor, yani iki taraf da True, yani doğruysa, cevap da True olacak +- **or** - Bu da "veya" anlamına geliyor, karşılaştırılan iki taraftan tek bir tanesi bile True ise bize True cevabını verecek + +Portakallarla elmaları karşılaştılaştırabilir miyiz? Bunun Python'daki eşdeğerini deneyelim: + +{% filename %}{{ warning_icon }} komut satırı{% endfilename %} + +```python +>>> 1 > 'django' +Geri görüş (en son çağrı): + Dosya "", satır 1, ‘in içinde +HataTürü: ‘>’ 'int' ve 'str' örnekleri arasında desteklenmiyor +``` + +Gördüğünüz gibi Python tam sayılar(`int`) ve kelimeleri(yani stringleri, `str`) karşılaştıramıyor. Onun yerine, **TypeError** göstererek iki farklı tipteki değişkenin karşılaştırılamayacağını söylüyor. + +## Boolean (Mantıksal) + +Bu arada, python'da yeni bir nesne türü öğrendin. Buna **Boolean** denir. + +Yalnızca iki Boolean nesnesi vardır: + +- True +- False + +Python'un bunu anlaması için her zaman "True" (ilk harf büyük, geri kalanları küçük) yazmanız gerekiyor. **true, TRUE, tRUE işe yaramaz -- sadece True doğru.** (Aynısı "False" için de geçerli.) + +Boolean'lar değişken de olabiliyor! Bakınız: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> a = True +>>> a +True +``` + +Ayrıca bu şekilde de yapabilirsiniz: + +{% filename %}komut-satırı{% endfilename %} + +```python +>>> a = 2 > 5 +>>> a +False +``` + +Boolean'lar ile aşağıdaki komutları deneyerek biraz oynayın: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Tebrikler! Boolean'lar programlamadaki en havalı özelliklerden, ve az önce onları nasıl kullanmanız gerektiğini öğrendiniz! + +# Kaydet! + +> Evdeki okuyucular için: Bu kısım [Python Basics: Saving files and "If" statement](https://www.youtube.com/watch?v=dOAg6QVAxyk) videosunda işlenmiştir. + +Şimdiye kadar kodumuzu bizi sadece tek satır yazmaya limitleyen yorumlayıcı üzerinde yazdık. Normal programlar dosyalar içine kaydedilir ve programlama dilimizin **yorumlayıcısıyla** veya **derleyicisiyle** çalıştırılır. Şimdiye kadar programlarımızı Python **yorumlayıcısında** teker satır teker satır çalıştırdık. Bundan sonraki görevlerde, birden fazla satıra ihtiyacımız olacak, bu yüzden şunlara ihtiyacımız olacak: + +- Python yorumlayıcısından çıkın +- Seçtiğiniz kod düzenleyicisini açın +- Yeni Python dosyasına kod kaydedin +- Çalıştırın! + +Kullandığımız Python yorumlayıcısından çıkmak için ` +exit() ` fonksiyonunu yazın + +{% filename %}komut satırı{% endfilename %} + +```python +>>> exit() +$ +``` + +Bu sizi komut satırına geri yönlendirecektir. + +Biraz önce [kod editörü](../code_editor/README.md) bölümünden bir kod editörü seçmiştik. Şimdi o editörü açmalı ve yeni bir dosya içine kod yazmalıyız: + +{% filename %}editör{% endfilename %} + +```python +print('Merhaba, Django girls!') +``` + +Açıkça, artık oldukça deneyimli Python programcısısın, bu yüzden bugün öğrendiğin kodları yazmaktan çekinme. + +Şimdi dosyayı tanımlayıcı bir isimle kaydetmemiz gerekir. Dosyanın ismine **python_intro.py** diyelim ve masaüstüne kaydedelim. Dosyaya istediğimiz ismi verebiliriz, burada önemli olan kısım dosyanın **.py** uzantısı ile bitmesidir. **.py** uzantısı işletim sistemimize bu dosyanın bir **python çalıştırılabilir dosyası** olduğunu ve Python'un bu dosyayı çalıştırabileceğini belirtiyor. + +> **Not** Kod editörleriyle ilgili en harika şeylerden birine dikkat etmelisiniz: renkler! Python konsolunda herşey aynı renkteydi; şimdi bakın `print` fonksiyonu dizeden farklı renkte. Bunun ismi "söz dizimi vurgulama" ve kod yazarken gerçekten yararlı bir özellik. Koddaki renkler ipucu verir, kapanmamış dizeler gibi ya da aşağıda göreceğimiz (`def` fonksiyonu gibi imla hatası içeren anahtar kelimeler olabilir). Bu kod düzenleyicisi kullanma nedenlerimizden biri. :) + +Dosyayı kaydettiğimize göre artık çalıştırabiliriz! Konsoldan **klasör değiştirme ** yaparak masaüstüne ulaşın, komut satırı bölümünde öğrendiklerinizi hatırlayın. + + + +Mac'de bu komut şunun gibi görünecektir: + +{% filename %}komut-satırı{% endfilename %} + + $ cd ~/Desktop + + + + + + +Linux'ta ise bu şekilde ("Desktop" kelimesi "Masaüstü" olarak da görünebilir): + +{% filename %}komut-satırı{% endfilename %} + + $ cd ~/Desktop + + + + + + +Windows Komut İstemi’nde, bunun gibi olacak: + +{% filename %}komut-satırı{% endfilename %} + + > cd %HomePath%\Desktop + + + + + + +Ve Windows Powershell’de, bunun gibi olacak: + +{% filename %}komut satırı{% endfilename %} + + > cd $Home\Desktop + + + + +Takılırsanız, yardım isteyin. Eğitmenler bunun için var! + +Şimdi dosyadaki komutları çalıştırmak için Python'u kulllanın: + +{% filename %}komut-satırı{% endfilename %} + + $ python3 python_intro.py + Merhaba, Django girls! + + +Not: Windows'ta 'python3' bir komut olarak geçmez. Onun yerine, dosyayı çalıştırmak için 'python'ı kullanın: + +{% filename %}komut satırı{% endfilename %} + +```python +> python python_intro.py +``` + +Tamam! Bir dosyaya kaydedilen ilk Python programınızı çalıştırdınız. Harika hissediyor musunuz? + +Şimdi programlamanın olmazsa olmaz bir aracını öğrenme zamanı: + +## If … elif … else + +Kodunuzdaki bir çok şeyi sadece belirli bir durum sağlanıyorsa çalıştırmayı isteyeceksiniz. İşte tam da bu yüzden Python'da **if deyimi** isminde bir yapı bulunuyor. + +**python_intro.py** dosyasındaki kodunuzu şununla değiştirin: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: +``` + +Eğer bunu kaydetmiş ve çalıştırmış olsaydık, bunun gibi bir hata görecektik: + +{% filename %}{{ warning_icon }} komut satırı{% endfilename %} + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +Python bizden kendisine `3 > 2` durumu (veya `True`) sağlandığında neyi çalıştıracağını söylememizi bekliyor. Python'a "Çalışıyor!" yazmasını söyleyelim. **python_intro.py** dosyanızdaki kodu şununla değiştirin: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 3 > 2: + print('Çalışıyor!') +``` + +4 tane boşluk karakteri bıraktığımıza dikkat ettiniz mi? Bunu yaparak if ifadesine yazılan durum doğru olduğunda neyi çalıştırması gerektiğini Python'a söylemiş oluyoruz. Aslında tek bir boşlukla da yapabilirsiniz, ama hemen hemen bütün Python programcıları kodlarının temiz görünmesi için 4 boşluk bırakıyor. Metin düzenleyiciniz ayarlıysa bir tab karakteri de 4 boşluk karakteri olarak sayılacaktır. Seçiminizi yaptıktan sonra değiştirmeyin! Eğer girintilerde 4 boşluk kullandıysanız, gelecek girintilerde de 4 boşluk kullanmaya devam edin - aksi halde sorunlarla karşılaşabilirsiniz. + +Kaydedip çalıştırmayı deneyelim: + +{% filename %}komut satırı{% endfilename %} + +```python +$ python3 python_intro.py +Çalışıyor! +``` + +Not: Windows'ta 'python3'ün komut olarak geçerli olmadığını unutmayın. Bundan böyle dosyayı çalıştırmak için 'python3'ü 'python'la değiştirin. + +### Ya bir koşul True (Doğru) değilse? + +Önceki örneklerde kod sadece koşullar sadece True (doğru) olduğunda çalışıyordu. Ama Python ayrıca `elif` ve `else` ifadelerine de sahip: + +{% filename %}python_intro.py{% endfilename %} + +```python +if 5 > 2: + print("5 gerçekten de 2'den büyüktür") +else: + print("5 2'den büyük değildir") +``` + +Bu kod çalıştığında aşağıdaki çıktıyı verecektir: + +{% filename %}komut satırı{% endfilename %} + + $ python3 python_intro.py + 5 gerçekten de 2'den büyüktür + + +Eğer 2 5'ten büyük bir sayı olsaydı, ikinci komut çalıştırılmış olacaktı. Bakalım `elif` nasıl çalışıyor: + +{% filename %}python_intro.py{% endfilename %} + +```python +name = 'Zeynep' +if name == 'Ayşe': + print('Selam Ayşe!') +elif name == 'Zeynep': + print('Selam Zeynep!') +else: + print('Selam yabancı!') +``` + +ve çalıştırılınca: + +{% filename %}komut-satırı{% endfilename %} + + $ python3 python_intro.py + Selam Zeynep! + + +Gördünüz mü? Eğer önceki if ifadeleriniz doğru olmazsa kontrol edilmek üzere `elif` ifadeleri ekleyebilirsiniz. + +`if` ifadesinden sonra istediğiniz kadar `elif` ifadesi ekleyebilirsiniz. Mesela: + +{% filename %}python_intro.py{% endfilename %} + +```python +volume = 57 +if volume < 20: + print("Çok sessiz.") +elif 20 <= volume < 40: + print("Güzel bir fon müziği") +elif 40 <= volume < 60: + print("Harika, her notayı duyabiliyorum") +elif 60 <= volume < 80: + print("Parti başlasın") +elif 80 <= volume < 100: + print("Biraz gürültülü!") +else: + print("Kulaklarım ağrıyor! :(") +``` + +Python sırayla her sorguyu çalıştırır ve sonucu ona göre yazar: + +{% filename %}komut satırı{% endfilename %} + + $ python3 python_intro.py + Harika, her notayı duyabiliyorum + + +## Yorumlar + +Yorumlar `#` ile başlayan satırlardır. İstediğiniz her neyse `#` den sonra yazabilirsiniz ve Python onu gözardı eder. Yorumlar kodunuzu diğer insanların anlamasını daha kolaylaştırabilir. + +Bakalım nasıl gözüküyor: + +{% filename %}python_intro.py{% endfilename %} + +```python +# Çok yüksek ya da çok düşük olduğunda ses seviyesini değiştirme +if volume < 20 or volume > 80: + volume = 50 + print("That's better!") +``` + +Kodun her satırı için bir açıklama yazmaya ihtiyacınız yoktur, ama kodunuzun niçin birşey yaptığını açıklamak ya da kompleks bir şey yaptığında bir özet sunmak için faydalıdırlar. + +### Özet + +En son yaptığınız alıştırmalarda öğrendikleriniz: + +- **kıyaslama yapmak** - Python'da `>`, `>=`, `==`, `<=`, `<` ve `ve`, `veya` operatörlerini kullanarak kıyaslama yapabilirsiniz +- **Boolean** - İki farklı değer alabilen bir nesne tipidir: Ya `True` (doğru) olur ya da `False` (yanlış) +- **Dosya kaydetmek** – kodlarımızı dosyalara kaydederek daha büyük programları çalıştırabiliriz. +- **if ... elif ... else** - ifadelerini sadece belirli durumlar sağlandığında çalıştırmak istediğimiz komutlar için kullanabiliriz. +- **yorumlar** - kodunuzu belgelemenize izin verecek şekilde Python’un çalışmayacağı satırlar + +Bu bölümün son kısmının zamanı geldi! + +## Kendi fonksiyonlarınız! + +> Evdeki okuyucular için: Bu kısım [Python Basics: Functions](https://www.youtube.com/watch?v=5owr-6suOl0) videosunda işlenmiştir. + +Python'da çalıştırabileceğin `len()` gibi fonksiyonları hatırlıyor musun? Güzel, iyi haber - Şimdi kendi fonksiyonlarını nasıl yazacağını öğreneceksin! + +Fonksiyon Python tarafından işlenmesi gereken yönergeler dizisidir. Python'da her fonksiyon `def` anahtar kelimesi ile başlar, bir isim verilir ve bazı parameterleri olabilir. Hadi başlayalım. **python_intro.py** içindeki kodu aşağıdaki ile değiştirelim: + +{% filename %}python_intro.py{% endfilename %} + +```python +python +def hi(): + print('Merhaba!') + print('Nasılsın?') + +hi() +``` + +Tamam, ilk fonksiyonumuz hazır! + +Fonksiyon adını neden dosyanın en altına yazdığımızı merak edebilirsiniz. Bunun nedeni, Python'ın dosyayı okuyup, onu yukarıdan aşağı doğru işlemesi. Yani fonksiyonumuzu kullanabilmek için, onu en alt kısımda yeniden yazmalıyız. + +Haydi şimdi bunu çalıştıralım ve neler olacağını görelim: + +{% filename %}komut satırı{% endfilename %} + + $ python3 python_intro.py + Merhaba! + Nasılsın? + + +Not: Eğer çalışmadıysa panik yapmayın! Çıktı neden olduğu hakkında bir fikir verir: + +- Eğer bir `NameError` alırsanız, muhtemelen yanlış bir şey yazdığınız anlamına gelir, bu nedenle `def hi():` lı fonksiyonu oluştururken ve `hi()` lıyı çağırırken aynı adı kullanıp kullanmadığınızı kontrol etmelisiniz. +- Eğer bir `IndentationError` alırsanız,`print` dizelerinin her ikisinin de satır başında aynı boşluğa sahip olduğunu kontrol et: python fonksiyonun içindeki tüm kodların düzenli bir şekilde hizalanmasını ister. +- Eğer tamamında da çıktı yoksa, son `hi()` *isn't* girintiliğini kontrol et - eğer öyleyse, bu dize fonksiyonunda bir parçası haline gelecek ve hiçbir zaman çalışmayacak. + +İlk fonksiyonumuzu parametrelerle birlikte oluşturalım. Önceki örneği - çalışmaktaki kişiye merhaba diyen bi fonksiyon - ismiyle kullanacağız: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): +``` + +Gördüğünüz gibi, fonksiyonumuza `name` (isim) adında bir parametre ekledik: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + if name == 'Ayşe': + print("Merhaba Ayşe!') + elif name == 'Zeynep': + print('Merhaba Zeynep!') + else: + print('Merhaba yabancı!') + +hi() +``` + +Unutmayın: `if` içerisindeki `print` fonksiyonundan önce dört tane boşluk var. Bunun sebebi sadece durum sağlandığında çalışmasını istememiz. Bakalım nasıl çalışıyor: + +{% filename %}{{ warning_icon }} komut satırı{% 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' + + +Üzgünüz, bir hata. Neyse ki, Python bize oldukça yararlı bir hata mesajı veriyor. `hi()` fonksiyonun (yukarıda tanımladığımız) bir değişken kullanımını gerektirdiğini (`name` isimli) ve bizim o değişkeni fonksiyonu çağırırken iletmeyi unuttuğumuzu söylüyor. Dosyanın alt kısmında hatayı düzeltelim: + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Ayşe") +``` + +Ve tekrar çalıştıralım: + +{% filename %}komut satırı{% endfilename %} + + $ python3 python_intro.py + Selam Ayşe! + + +Eğer ismi değiştirirsek ne olur? + +{% filename %}python_intro.py{% endfilename %} + +```python +hi("Zeynep") +``` + +Ve çalıştırın: + +{% filename %}komut-satırı{% endfilename %} + + $ python3 python_intro.py + Selam Zeynep! + + +Peki Ayşe veya Zeynep dışında başka bir isim yazdığımızda ne olacağını tahmin edebiliyor musunuz? Deneyin ve tahmininizin doğru olup olmadığını görün. Şunun gibi bir şey yazmalı: + +{% filename %}komut satırı{% endfilename %} + + Selam yabancı! + + +Süper değil mi? Böylece fonksiyona göndereceğiniz isim değiştiğinde aynı kodu tekrar tekrar yazmanıza gerek kalmayacak. İşte fonksiyonlara tam da bu yüzden ihtiyacımız var - aynı kodu tekrar yazmaya gerek yok! + +Hadi daha zekice bir şey yapalım - İkiden fazla isim var ve her biri için bir şart yazmak zor olur değil mi? + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Merhaba ' + name + '!') + +hi("Seda") +``` + +Şimdi kodu çağıralım: + +{% filename %}komut satırı{% endfilename %} + + $ python3 python_intro.py + Merhaba Seda! + + +Tebrikler! Az önce fonksiyonları nasıl yazacağınızı öğrendiniz! :) + +## Döngüler + +> Evdeki okuyucular için: Bu kısım [Python Basics: For Loop](https://www.youtube.com/watch?v=aEA6Rc86HF0) videosunda işlenmiştir. + +Bu da zaten son parça. Hızlı oldu, değil mi? :) + +Programcılar kendilerini tekrar etmeyi sevmezler. Programlama tamamen işleri otomatize etmedir, bu yüzden her insanı ismiyle selamlamak istemeyiz, değil mi? İşte burası döngülerin devreye girdiği yerdir. + +Hala listeleri hatırlıyoruz değil mi? Haydi bir kızlar listesi yapalım: + +{% filename %}python_intro.py{% endfilename %} + +```python +kızlar = ['Seda', 'Gül', 'Pınar', 'Ayşe', 'Sen'] +``` + +Diyelim ki hepsine merhaba demek istiyoruz. Az önce yazdığımız `hi` fonksiyonunu döngü içinde kullanabiliriz: + +{% filename %}python_intro.py{% endfilename %} + +```python +for name in girls: +``` + +`for` un davranışı `if` e benziyor; aşağıdaki kodda her iki satır girintili olmalı (dört boşluk ile). + +Dosyada yer alacak tam kod aşağıdadır: + +{% filename %}python_intro.py{% endfilename %} + +```python +def hi(name): + print('Merhaba ' + name + '!') + +girls = ['Seda', 'Gül', 'Pınar', 'Ayşe', 'Sen'] +for name in girls: + hi(name) + print('Sıradaki kız') +``` + +Ve onu çalıştırdığımız zaman: + +{% filename %}komut satırı{% endfilename %} + + $ python3 python_intro.py + Selam Seda! + Sıradaki kız + Selam Gül! + Sıradaki kız + Selam Pınar! + Sıradaki kız + Selam Ayşe! + Sıradaki kız + Selam Sen! + Sıradaki kız + + +Gördüğünüz gibi, `for` cümlesinin içine boşluk karakteri ile koyduğunuz her şey `girls` listesi için tekrarlanıyor. + +Ayrıca `for`'u `range` fonksiyonuyla beraber sayılar üzerinde de kullanabilirsiniz: + +{% filename %}python_intro.py{% endfilename %} + +```python +for i in range(1, 6): + print(i) +``` + +Çalıştırırsak: + +{% filename %}komut satırı{% endfilename %} + + 1 + 2 + 3 + 4 + 5 + + +`range` fonksiyonu birbirini takip eden sayılardan bir liste oluşturur (bu sayıları da siz parametre olarak yazarsınız). + +Sizin verdiğiniz ikinci parametrenin listede olmadığına dikkat edin. Yani `range(1, 6)` 1'den 5'e kadar sayıyor, 6 dahil edilmiyor. Çünkü “aralık” yarı açıktır, ve yani ilk değeri içerir, ama son değeri içermez. + +## Özet + +İşte bu. **Harikasın, süpersin!** Bu bölüm biraz zordu, kendinle gurur duymalısın. Biz buraya kadar geldiğin için seninle gurur duyuyoruz! + +Resmi ve tam python tutorialı için https://docs.python.org/3/tutorial/ adresini ziyaret edin. Bu size dil hakkında daha kapsamlı ve eksiksiz bir çalışma sunacaktır. Teşekkürler :) + +Sonraki bölüme geçmeden başka bir şey yapmak isteyebilirsin. -gerin, biraz etrafta gezin, gözlerini dinlendir- :) + +![Cupcake](images/cupcake.png) \ No newline at end of file diff --git a/tr/python_introduction/images/cupcake.png b/tr/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/tr/python_introduction/images/cupcake.png differ diff --git a/tr/template_extending/README.md b/tr/template_extending/README.md new file mode 100644 index 00000000000..9c839d0da15 --- /dev/null +++ b/tr/template_extending/README.md @@ -0,0 +1,147 @@ +# Template genişletmek + +Django'nun size sunduğu başka bir güzellik de **template genişletmek**tir. O da ne demek? Şu demek, HTML dosyanızın bazı bölümlerini birden fazla sayfanızda kullanabilirsiniz. + +Templatelar aynı bilgiyi ya da yerleştirmeyi (layout) birden fazla yerde kullanmak istediğinizde yardım ederler. Yaptığınızı her dosya için tekrar etmek zorunda kalmazsınız. Ve bir şey değiştirmek isterseniz, tüm templatelarda değil sadece bir tanesinde değiştirirsiniz! + +## Bir Temel Template Oluştur + +Temel template web sitenizin bütün sayfalarında genişletebileceğiniz en temel template'inizdir. + +Şimdi `blog/templates/blog/` klasörü içinde `base.html` adlı bir dosya oluşturalım: + + blog + └───templates + └───blog + base.html + post_list.html + + +Sonra bunu açalım ve `post_list.html` dosyasındaki her şeyi aşağıdaki gibi `base.html`'ye kopyalayalım: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Sonra, `base.html` dosyasındaki ``'nizi (`` ve `` arasında kalan her şeyi) şununla değiştirin: + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Her şeyin bununla değiştirildiğini fark edebilirsiniz`{% for post in posts %}`dan`{% endfor %}`bununla:{% endraw %} + +{% filename %}blog/templates/blog/base.html{% endfilename %} + +```html +{% block content %} +{% endblock %} +``` + +Ama neden? Bir `blok` oluşturdunuz! `{% block %}` içinde HTML ekleyecek alan yapmak için şablon etiketi kullandınız. HTML başka bir şablondan gelecek (`base.html`) bu şablonu genişletir. Bunun nasıl yapıldığını da hemen göstereceğiz. + +Şimdi `base.html`'i kaydedelim ve `blog/templates/blog/post_list.html` dosyamızı tekrar açalım. {% raw %} `{% for post in posts %}`'ın üzerindeki ve `{% endfor %}`'ın altındaki her şeyi kaldıracaksınız. İşiniz bittiğinde dosya şu şekilde görünecektir:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Bunu, bütün içerik blokları için şablonumuzun bir parçası olarak kullanmak istiyoruz. Şimdi bu dosyaya blok etiketleri ekleme zamanı! + +{% raw %}Blok etiketinizin `base.html` dosyanızdaki etikete uymasını istiyorsunuz. Ayrıca içerik bloklarınına ait bütün kodu da dahil etmek istiyorsun. Bunu yapmak için, her şeyi `{% block content %}`ve`{% endblock %}`'un arasına yerleştir. Şunun gibi:{% endraw %} + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Geriye tek bir şey kaldı. Bu iki şablonu birbirine bağlamamız gerekiyor. Genişleyen şablonlar tam da bununla ilgili! Bunu dosyanın başlangıcına genişleyebilir etiketler ekleyerek yapacağız. Bunun gibi: + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} + +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +İşte bu! Dosyayı kaydedip sitenizin hala düzgün çalışıp çalışmadığını kontrol edin. :) + +> Eğer `TemplateDoesNotExist` hatasını alıyorsanız, bunun anlamı `blog/base.html` dosyası yok ve konsolda `runserver`'ı çalıştırıyorsunuz demektir. Konsolda durdurmayı deneyin (Ctrl+C -Control ve C tuşlarına birlikte basarak) ve `python manage.py runserver` komutunu çalıştırarak yeniden başlatın. \ No newline at end of file diff --git a/tr/whats_next/README.md b/tr/whats_next/README.md new file mode 100644 index 00000000000..aee9350a995 --- /dev/null +++ b/tr/whats_next/README.md @@ -0,0 +1,24 @@ +# Sırada ne var? + +Kendini tebrik et! **Kesinlikle harikasın**. Seninle gurur duyuyoruz! <3 + +### Şimdi ne yapmak gerek? + +Bir ara ver ve rahatla. Gerçekten çok büyük bir şey yaptın. + +Sonra, güncel kalmak için Django Girls'ü [Facebook](http://facebook.com/djangogirls) ya da [Twitter](https://twitter.com/djangogirls) da takip ettiğinizden emin olun. + +### Daha geniş kapsamlı kaynaklar önerebilir misiniz? + +Evet! Öncelikle [Django Girls Tutorial: Eklentiler](https://tutorial-extensions.djangogirls.org/) isimli diğer kitabımızı dene. + +Daha sonra, aşağıdaki listedeki kaynakları deneyebilirsin. Hepsi birden çok kez önerilir! + +- [Resmi Django eğitimi](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) +- [Yeni başlayan eğitimleri](http://newcoder.io/tutorials/) +- [Code Academy Python kursu](https://www.codecademy.com/en/tracks/python) +- [Code Academy HTML & CSS kursu](https://www.codecademy.com/tracks/web) +- [Django Carrots eğitimi](https://github.com/ggcarrots/django-carrots) +- [Django'yu Zor Yoldan Öğren kitabı](http://learnpythonthehardway.org/book/) +- [Django Video Dersleriyle Başlangıç](http://www.gettingstartedwithdjango.com/) +- [2 Kaşık Django 1.11: Django Web Framework'ün En İyi Uygulamaları Kitabı](https://www.twoscoopspress.com/products/two-scoops-of-django-1-11) diff --git a/uk/GLOSSARY.md b/uk/GLOSSARY.md new file mode 100644 index 00000000000..21fed491ffc --- /dev/null +++ b/uk/GLOSSARY.md @@ -0,0 +1,2 @@ +# Редактор коду +Редактор коду - це програма, що дозволяє зберегти ваш код, так що можна повернутися до його редагування пізніше. Ви можете дізнатися, звідки його взяти з розділу [про текстовий редактор](./code_editor/README.md) diff --git a/uk/README.md b/uk/README.md new file mode 100644 index 00000000000..39af52cf8d7 --- /dev/null +++ b/uk/README.md @@ -0,0 +1,45 @@ +# Навчальний посібник Django Girls +[![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) + +> Ця робота ліцензована міжнародною ліцензією Creative Commons Attribution-ShareAlike 4.0 +International License. Щоб переглянути копію цієї ліцензії, відвідайте +https://creativecommons.org/licenses/by-sa/4.0/ + +## Translation + +This tutorial has been translated from English by a group of awesome volunteers: [chupakabra](https://github.com/chupakabra), [Oleksandr Redko](https://github.com/alexandear), [Taras Bunyk](https://github.com/bunyk), [msihor](https://crowdin.com/profile/msihor), [Olesia Hrydzhuk](https://github.com/Zlira), [Andriy Kohut](https://github.com/andriykohut), [Artem Suchov](https://crowdin.com/profile/suchov), [Artem Godlevskyi](https://github.com/errno), [Alex Vykalyuk](https://crowdin.com/profile/alekzvik), [Kostyantyn Leschenko](https://crowdin.com/profile/kleschenko). Special thanks for all the free time they sacrificed to make that happen! <3 + + +## Вступ + +Чи ви коли-небудь відчували, що світ крутиться все більше і більше навколо технологій, а ви в певній мірі пасете задніх? Чи вас колись цікавило, як створити веб-сайт, однак, ніколи не вистачало достатньої мотивації, щоб почати? Чи ви колись вважали, що світ програмування є занадто складним для вас, щоб навіть пробувати робити щось самостійно? + +Що ж, маємо гарні новини для вас! Програмування - це не так складно, як може здатися, і ми хочемо вам показати, наскільки веселим цей процес може бути. + +Даний навчальний посібник не перетворить вас магічним чином на програміста. Якщо ви хочете розбиратися у цьому, то вам потрібні будуть для цього місяці або навіть роки теорії та практики. Однак ми хочемо показати вам, що програмування або створення веб сайтів не є настільки складним, як це здається. Спробуємо пояснити різні поняття настільки, наскільки зуміємо, то ж ви не будете почуватися заляканими технологіями. + +Сподіваємось, ми зможемо навчити вас полюбити технології настільки, наскільки любимо їх ми самі! + +## Що ви вивчите під час освоєння посібника? + +По завершенню даного посібника, ви будете мати простий робочий веб-додаток - свій власний блог. Ми покажемо вам як опублікувати його в Інтернеті, тож інші також зможуть оцінити вашу роботу! + +Це буде (в більшій чи меншій мірі) виглядати наступним чином: + +![Рисунок 0.1](images/application.png) + +> Якщо ви працюєте над матеріалами самостійно і не маєте інструктора, що зміг би допомогти у разі певної проблеми, для вас існує чат: [![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). Ми попросили наших інструкторів і попередніх учасників бути там час від часу та допомагати іншим із освоєнням матеріалу! Не бійтеся задавати свої питання! + +Гаразд, [почнемо з самого початку...](./how_the_internet_works/README.md) + +## Коротка інформація та вклад + +Цей посібник підтримується спільнотою [DjangoGirls](https://djangogirls.org/). Якщо ви знайдете якісь помилки або захочете зробити певні оновлення, будь ласка, [виконуйте вказівки з частини про вклад](https://github.com/DjangoGirls/tutorial/blob/master/README.md). + +## Чи не бажаєте допомогти нам із перекладом посібника на інші мови? + +На даний момент, переклади підтримуються на платформі crowdin.com: + +https://crowdin.com/project/django-girls-tutorial + +Якщо ваша мова не перерахована на crowdin, будь ласка, [відкрийте нову тему](https://github.com/DjangoGirls/tutorial/issues/new), що інформує про мову, таким чином ми зможемо додати її. diff --git a/uk/SUMMARY.md b/uk/SUMMARY.md new file mode 100644 index 00000000000..ea34bf8e38d --- /dev/null +++ b/uk/SUMMARY.md @@ -0,0 +1,26 @@ +# Зміст + +* [Вступ](README.md) +* [Встановлення](installation/README.md) +* [Як працює Інтернет](how_the_internet_works/README.md) +* [Вступ до командного рядку](intro_to_command_line/README.md) +* [Встановлення Python](python_installation/README.md) +* [Редактор коду](code_editor/README.md) +* [Вступ до Python](python_introduction/README.md) +* [Що таке Django?](django/README.md) +* [Встановлення Django](django_installation/README.md) +* [Ваш перший Django проект!](django_start_project/README.md) +* [Django моделі](django_models/README.md) +* [Django адміністратор](django_admin/README.md) +* [Розгортання!](deploy/README.md) +* [Django urls](django_urls/README.md) +* [Django відображення - час творити!](django_views/README.md) +* [Вступ до HTML](html/README.md) +* [Django ORM (Querysets)](django_orm/README.md) +* [Динамічні дані в шаблонах](dynamic_data_in_templates/README.md) +* [Django шаблони](django_templates/README.md) +* [CSS - зроби це красиво](css/README.md) +* [Шаблонне розширення](template_extending/README.md) +* [Розширте свою програму](extend_your_application/README.md) +* [Django форми](django_forms/README.md) +* [Що далі?](whats_next/README.md) diff --git a/uk/code_editor/README.md b/uk/code_editor/README.md new file mode 100644 index 00000000000..da85dfaae1c --- /dev/null +++ b/uk/code_editor/README.md @@ -0,0 +1,7 @@ +# Редактор коду + +Наближаємось до написання нашого першого рядка коду, отже, настав час завантажити редактор коду! + +> **Примітка** Ви могли зробити це раніше у розділі "Встановлення" - якщо вже завантажили редактор, то можете відразу перейти до наступного розділу! + +{% include "/code_editor/instructions.md" %} diff --git a/uk/code_editor/instructions.md b/uk/code_editor/instructions.md new file mode 100644 index 00000000000..b877de82df1 --- /dev/null +++ b/uk/code_editor/instructions.md @@ -0,0 +1,34 @@ +Існує багато різноманітних редакторів і здебільшого все зводиться до персональних вподобань. Більшість Python програмістів використовують складні, але надзвичайно потужні IDE (англ. Integrated Development Environments - інтегровані середовища розробки), такі як PyCharm. Однак, вони менш доцільні для початківців; ми пропонуємо такі ж потужні, але більш простіші інструменти. + +Нижче наведено перелік наших вподобань, але ви також можете попросити поради в своїх тренерів - тоді буде простіше отримувати від них допомогу. + +## Gedit + +Gedit є відкритим, безкоштовним редактором, доступним для усіх операційних систем. + +[Завантажте його можна тут](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text + +Sublime Text є дуже популярним редактором із безкоштовним пробним періодом. Він легко встановлюється та простий у використанні, а також доступний для усіх операційних систем. + +[Завантажити його можна тут](https://www.sublimetext.com/) + +## Atom + +Atom - це найновіший редактор коду, створений [GitHub](https://github.com/). Він є безкоштовним, відкритим, легко встановлюється та простий у користуванні. Доступний для Windows, OSX і Linux. + +[Завантажити його можна тут](https://atom.io/) + + + +## Чому ми встановлюємо редактор коду? + +Ви напевне запитуєте себе, чому ми встановлюємо спеціальний редактор для коду, а не використовуємо щось на зразок Word чи Notepad. + +По-перше, код повинен зберігатись як **звичайний текст**, а проблемою таких програм як Word чи Textedit є те, що вони не створюють звичайний текст, вони продукують так званий "збагачений" текст (зі шрифтами та форматуванням), використовуючи спеціальні формати, такі як [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +Другою причиною є те, що редактори коду спеціалізуються саме на редагуванні коду, тому вони можуть запропонувати корисні функції на зразок підсвітки коду залежно від його значення чи автоматичного закривання дужок. + +Ми побачимо все це в дії пізніше. Скоро ви вважатимете свого вірного редактора коду одним із найулюбленіших інструментів :) + diff --git a/uk/css/README.md b/uk/css/README.md new file mode 100755 index 00000000000..26c0c08e382 --- /dev/null +++ b/uk/css/README.md @@ -0,0 +1,288 @@ +# CSS - зроби це красиво! + +Наш блог все ще виглядає доволі жахливо, чи не так? Час зробити його гарним! Для цього будемо використовувати CSS. + +## Що таке CSS? + +Каскадні таблиці стилів (англ. Cascading Style Sheets, скорочено CSS) - спеціальна мова, що використовується для опису зовнішнього вигляду і форматування сайту написаного мовою розмітки (як HTML). Сприймайте це, як свого роду макіяж для нашої веб-сторінки;). + +Але ми ж не хочемо починати знову все з нуля, правда? А візьмемо знову щось, що вже було створене програмістами і опубліковано в Інтернеті для вільного користування. Ви ж знаєте, знову винаходити велосипед зовсім не весело. + +## Скористаємось Bootstrap! + +Bootstrap - один з найбільш популярних HTML і CSS фреймворків для розробки прекрасних веб-сайтів: https://getbootstrap.com/ + +Він був написаний програмістами, які працювали для Twitter'у і на сьогоднішній день удосконалюється волонтерами з усього світу. + +## Встановлення Boostrap + +Для встановлення Bootstrap, вам потрібно додати наступні рядки у розділ `` вашого `.html` файлу (`blog/templates/blog/post_list.html`): + +```html + + +``` + +Це не додасть жодного файлу до вашого проекту. Натомість ці рядки просто вказують на файли опубліковані в інтернеті. +Просто рухайтесь вперед, відкрийте ваш веб-сайт і оновіть сторінку. Ось так! + +![Рисунок 14.1](images/bootstrap1.png) + +Вже краще! + + +## Статичні файли в Django + +Нарешті, ми детальніше розглянемо те, що ми називали __статичними файлами__. Статичні файли включають усі ваші CSS файли та картинки - файли, які не є динамічними, а отже, їхній вміст не залежить від змісту запиту і буде однаковим для усіх користувачів. + + +### Де помістити статичні файли для Django + +Як ви бачили, коли ми запускали `collectstatic` на сервері, Django вже знає, де знайти статичні файли для вбудованого додатку "admin". Тепер нам просто потрібно додати деякі статичні файли для нашого власного додатку `blog`. + +Створимо директорію `static` всередині додатку blog: + + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite + +Django автоматично знайде всі "статичні" папки всередині будь-якої з папок з вашими додатками, і він буде мати можливість використовувати їх як статичні файли. + + + +## Ваш перший CSS файл! + +Що ж, тепер давайте створимо CSS файл для того, щоб додати ваш власний стиль до вашої веб-сторінки. Створіть нову папку з назвою `css` всередині вашої папки `static`. Потім всередині цієї папки`css` створіть новий файл `blog.css`. Готові? + + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css + +Настав час написати CSS! Відкрийте файл `static/css/blog.css` в редакторі коду. + +Не будемо тут занурюватись надто глибоко в процес налаштування і вивчення CSS, оскільки це так просто, що ви можете вивчити цей матеріал самостійно після завершення воркшопу. Ми наполегливо рекомендуємо пройти курс [Codeacademy HTML & CSS course](https://www.codecademy.com/tracks/web) для того, щоб вивчити все, що вам потрібно знати про оформлення веб-сайтів за допомогою CSS. + +Але принаймні попрацюємо трохи. Може ми могли б змінити колір заголовка? +Щоб зрозуміти кольори, комп'ютери використовують спеціальні коди. Вони починаються з `#` і далі слідують 6 літер (A-F), а також цифри (0-9). Ви можете знайти коди кольорів, наприклад, тут: http://www.colorpicker.com/. Також можете користуватися вже [визначеними кольорами](http://www.w3schools.com/colors/colors_names.asp), такими як `red` та `green`. + +У вашому файлі `static/css/blog.css` потрібно додати наступний код: + +```css +h1 a { + color: #FCA205; +} +``` + +`h1 a` - CSS селектор. Це означає, що ми застосовуємо наші стилі до кожного елементу `a` всередині елементу `h1` (наприклад, коли ми маємо в коді щось на зразок: `

link

`). У цьому випадку, ми повідомляємо про те, що треба змінити колір на `#FCA205`, тобто помаранчевий. Звичайно, ви можете визначити тут ваш власний колір! + +В CSS файлі ми визначаємо стилі для елементів файлу HTML. Елементи ідентифікуються іменами (тобто `a`, `h1`, `body`), атрибутом `class` або атрибутом `id`. +Class і id - імена, які ви присвоюєте елементам власноруч. Класи (сlasses) визначають групи елементів, а ідентифікатори (id), в свою чергу, вказують на специфічні елементи. Наприклад, наступний тег може бути ідентифікований CSS з використанням тегового імені `a`, класу `external_link`, або ідентифікатора `link_to_wiki_page`: + +```html + +``` + +Читайте про [CSS селектори на w3schools](http://www.w3schools.com/cssref/css_selectors.asp). + +Далі, нам треба повідомити наш HTML-шаблон про те, що ми додали CSS. Відкрийте файл `blog/templates/blog/post_list.html` і додайте на початок цей рядок: + +```html +{% load static %} +``` + +Тут лише завантажуються статичні файли :) +Далі, між `` і ``, після посилань на CSS файли Bootstrap додайте цей рядок: + +```html + +``` +Браузер читає файли в порядку їх слідування, тому ми повинні впевнитись, що код написаний в правильному місці. Інакше, код в нашому файлі може перекривати код із файлів Bootstrap. +Ми щойно повідомили наш шаблон, де розташовані наші CSS файли. + +Тепер ваш файл має виглядати наступним чином: + +```html +{% load static %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + +Добре, збережіть файл і перезавантажте сторінку! + +![Рисунок 14.2](images/color2.png) + +Чудова робота! Можливо, ми також хотіли б дати нашому веб-сайту трохи повітря і збільшити відступ зліва? Давайте спробуємо! + +```css +body { + padding-left: 15px; +} +``` + +Додайте це до вашого CSS, збережіть файл і подивіться, як це працює! + +![Рисунок 14.3](images/margin2.png) + +Може ми могли б також налаштувати шрифт нашого заголовка? Вставте це всередину розділу `` файлу `blog/templates/blog/post_list.html`: + +```html + +``` + +Цей рядок імпортує шрифт із назвою *Lobster* із колекції шрифтів Google (https://www.google.com/fonts). + +Знайдіть блок визначення стилю `h1 a` (код між фігурними дужками `{` і `}`) в CSS файлі `blog/static/css/blog.css`. Тепер додайте Тепер додайте рядок `font-family: 'Lobster';` між дужками і перезавантажте сторінку: + +```css +h1 a { + color: #FCA205; + font-family: 'Lobster'; +} +``` + +![Рисунок 14.3](images/font.png) + +Чудово! + + +Як було зазначено вище, CSS має концепцію класів. Вона дозволяє вам іменувати частину HTML коду і застосовувати стилі лише до цієї частини без будь-якого ефекту на інші частини. Це буває надзвичайно корисним. Скажімо, у вас є два блоки div, але вони виконують зовсім різні функції (як ваш заголовок і пост). Клас дозволяє вам зробити їх вигляд різним. + +Дайте імена певним частинам HTML коду. Додайте клас `page-header` до блоку `div`, що містить ваш заголовок, як це зроблено тут: + +```html +
+

Django Girls Blog

+
+``` + +А тепер додайте клас `post` до вашого блоку `div`, що містить сам допис. + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + +А тепер додамо визначення блоків для різних селекторів. Селектори, які починаються із символу `.` стосуються класів. Існує багато хороших посібників і пояснень CSS у Вебі, що можуть допомогти вам зрозуміти наступний код. Поки що, просто скопіюйте і вставте це у ваш файл `mysite/static/css/blog.css`: + +```css +.page-header { + background-color: #ff9400; + margin-top: 0; + 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; +} + +.content { + margin-left: 40px; +} + +h1, h2, h3, h4 { + font-family: 'Lobster', cursive; +} + +.date { + float: right; + color: #828282; +} + +.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 { + margin-bottom: 70px; +} + +.post h1 a, .post h1 a:visited { + color: #000000; +} +``` + +Далі обгорніть HTML код, що відображає пости, визначеннями класів. Замініть це: + +```html +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +в `blog/templates/blog/post_list.html` на: + +```html +
+
+
+ {% for post in posts %} +
+
+

published: {{ post.published_date }}

+
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + +Збережіть ці файли і перезавантажте веб-сайт. + +![Рисунок 14.4](images/final.png) + +Юхууу! Виглядає прекрасно, чи не так? +Код, який ми щойно вставили, насправді не є складним для розуміння і ви в змозі зрозуміти більшу його частину після прочитання. + +Не бійтеся трохи повозитися з цим CSS файлом і спробуйте поміняти деякий код. Якщо щось зламається, не хвилюйтесь, ви завжди можете відмінити попередню дію! + +В будь-якому разі, дуже рекомендуємо пройти цей безкоштовний онлайн [Codeacademy HTML & CSS курс](https://www.codecademy.com/tracks/web). Він допоможе вам вивчити усе, що потрібно знати про оформлення веб-сайтів за допомогою CSS. + +Готові до наступного розділу?! :) + diff --git a/uk/css/images/bootstrap1.png b/uk/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/uk/css/images/bootstrap1.png differ diff --git a/uk/css/images/color2.png b/uk/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/uk/css/images/color2.png differ diff --git a/uk/css/images/final.png b/uk/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/uk/css/images/final.png differ diff --git a/uk/css/images/font.png b/uk/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/uk/css/images/font.png differ diff --git a/uk/css/images/margin2.png b/uk/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/uk/css/images/margin2.png differ diff --git a/uk/deploy/README.md b/uk/deploy/README.md new file mode 100755 index 00000000000..8f35a4db6c9 --- /dev/null +++ b/uk/deploy/README.md @@ -0,0 +1,308 @@ +# Розгортання! + +> **Зауваження** Цей розділ може бути дещо складним для освоєння. Наполегливо продовжуйте і дійдіть до кінця; розгортання - важлива частина процесу розробки веб-сайту. Цей розділ розташований посередині посібника, щоб ваш наставник зміг допомогти із дещо хитрим процесом випуску веб-сайту в Інтернет. Це означає, що ви все ще можете завершити цей курс самостійно, якщо раптом не встигаєте. + +До цього часу ваш веб-сайт був доступний лише локально на вашому комп'ютері, тепер ви дізнаєтесь, як його розгорнути! Розгортання - це процес публікації вашого додатку в Інтернеті таким чином, що люди можуть зайти і побачити його :). + +Як ви вже знаєте, веб-сайт має бути розміщений на сервері. В Інтернеті є багато компаній які пропонують такі послуги. Ми будемо використовувати той, який має відносно простий розгортання процес: [PythonAnywhere](https://www.pythonanywhere.com/). PythonAnywhere безкоштовний для малих додатків, в яких не дуже багато користувачів, тож нам цього точно буде достатньо. + +Інший зовнішній інструмент, який ми будемо використовувати - це [GitHub](https://www.github.com), платформа для розміщення коду. У нього є альтернативи, але майже кожен програміст зараз має GitHub профіль, і скоро ви будете серед них! + +Ці три місця є дуже важливими для вас. Ваш локальний комп'ютер буде місцем, де ви розробляєте і тестуєте. Після того, як впевнитесь в змінах, ви перемістите копію програми на GitHub. Веб-сайт буде на PythonAnywhere і ви оновите його, роблячи нову копію коду з GitHub. + +# Git + +Git - це "система контролю версій", яка використовується багатьма розробниками. Ця програма дозволяє відслідковувати зміни у файлах з часом так, що ви можете повернутись до певних версій пізніше. Схоже на функцію "слідкувати за змінами" в Microsoft Word, але набагато потужніше. + +## Встановлення Git + +> **Примітка** Якщо ви вже виконали процес встановлення, немає потреби робити це ще раз, - можете перейти до наступного кроку і почати створення свого Git репозиторію. + +{% include "/deploy/install_git.md" %} + +## Створення свого Git репозиторію + +Git відслідковує зміни певних файлів в репозиторії коду (коротко – "репо"). Давайте створимо "репо" для нашого проекту. Відкрийте вашу консоль та запустіть наступні команди в папці `djangogirls`: + +> **Примітка** Перевірте поточну директорію за допомогою команд `pwd` (OSX/Linux) або `cd` (Windows) перед стартом репозиторію. Ви маєте бути в папці `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 + +Створення git-репозиторію відбувається тільки один раз на кожен проект (і тобі більше не потрібно буде заново вводити ім'я чи електронну пошту). + +Git стежитиме за змінам всіх файлів у цій директорії, але є певні файли, які ми хочемо ігнорувати. Ми зробимо це шляхом створення файлу з назвою `.gitignore` в базовій директорії. Відкрий свій редактор і створи новий файл з наступним змістом: + +``` +*.pyc +__pycache__ +myvenv +db.sqlite3 +/static +.DS_Store +``` + +І збережи його як `.gitignore` в директорії "djangogirls". + +> **Примітка** Крапка на початку імені файлу важлива! У разі виникнення будь-яких труднощів при створенні (наприклад, Mac не любить, коли через Finder створюють файли, імена яких починаються з крапки), використовуйте "Зберегти як" у редакторі, це повинно спрацювати. + +> **Примітка** Одним із файлів, вказаних в `.gitignore` є `db.sqlite3`. Цей файл є вашою локальною базою даних, де зберігаються пости. Ми не хочемо додавати його до нашого репозиторію, тому що веб-сайт на PythonAnywhere використовуватиме іншу базу. Ця база даних може бути SQLite, як на вашій локальній машині, але зазвичай, ми будемо використовувати базу MySQL, яка може обслуговувати набагато більше відвідувачів сайту, ніж SQLite. У всякому разі, ігнорування бази даних SQLite для копії коду на GitHub, означає, що всі створені вами пости залишаться і будуть доступні локально, але ви можете додати їх також і на продакшн. Ви повинні думати про локальну базу як про хороший майданчик, де можна тестувати різні речі і не боятися, що можна видалити реальні пости з блогу. + +Перед тим, як виконати команду `git add` (також, коли ви просто не впевненні що змінилось) непоганою ідеєю буде виконати `git status`. Це допоможе уникнути сюрпризів, наприклад, додавання чи коміту небажаного файлу. Команда `git status` повертає інформацію про файли у вашому репозиторії: untracked (не додані до репозиторію файли), modified (змінені файли), staged (файл додані до коміту), статус поточної гілки і багато іншого. Вивід повинен бути схожий на: + + $ 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) + +Зрештою, зберігаємо наші зміни. Перейдіть до консолі і виконайте наступні команди: + + $ 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 + + +## Викладемо наш код на GitHub + +Відкриємо [GitHub.com](https://www.github.com) і створимо новий безкоштовний обліковий запис. (Ті хто зробили це ще на етапі підготовки - справжні молодці!) + +Створимо новий репозиторій з назвою "my-first-blog". Залишимо опцію "initialise with a README" не вибраною, .gitignore порожньою (пізніше ми додамо це вручну) і License також залишимо як None. + + + +> **Примітка** Ім'я `my-first-blog` важливе - ви можете вибрати щось інше, але воно буде використовуватись багато разів в інструкціях нижче, і потрібно буде замінити його кожного разу. Мабуть легше просто його залишити як `my-first-blog`. + +В наступному екрані ми побачимо посилання для клонування репозиторію - clone URL, скопіюємо його і вставимо у термінал: + + + +Зараз нам потрібно під'єднати Git репозиторій на локальному комп'ютері до щойно створеного на GitHub. + +Введіть у вашій консолі (замінивши `<ваше-github-ім'я>` іменем користувача, вказаним під час створення облікового запису GitHub, але без кутових дужок): + + $ git remote add origin https://github.com/<ваше-github-ім'я>/my-first-blog.git + $ git push -u origin master + +Введемо наше ім'я користувача та пароль від GitHub, і побачимо щось на зразок: + + 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. + + + +Ваш код тепер на GitHub. Ходімо перевіримо! Виявляється, він у хорошій компанії - [Django](https://github.com/django/django), [Цей посібник](https://github.com/DjangoGirls/tutorial) і багато інших чудових проектів з відкритим вихідним кодом також публікуються на GitHub :) + + +# Налаштування нашого блогу на PythonAnywhere + +> **Примітка** Можливо, ви вже створили обліковий запис на PythonAnywhere під час підготовки - якщо це так, немає необхідності робити це знову. + +{% include "/deploy/signup_pythonanywhere.md" %} + + +## Завантажимо наш код на PythonAnywhere + +Після входу до PythonAnywhere, ми опинимось на головній панелі або сторінці "Consoles". Виберемо опцію почати нову "bash" консоль (Start a new console - bash) - це PythonAnywhere версія консолі, схожа на ту, що на вашому комп'ютері. + +> **Примітка** PythonAnywhere побудований на основі Linux, тому, якщо ви на Windows, консоль буде трохи відрізнятись від тієї, що на вашому комп'ютері. + +Давайте завантажимо наш код з GitHub у PythonAnywhere, клонувавши наш репозиторій. Наберіть наступне у консолі PythonAnywhere (не забудьте використовувати ім'я користувача GitHub замість `< ваше-github-ім'я>`): + + $ git clone https://github.com/<ваше-github-ім'я>/my-first-blog.git + +Ця команда завантажить копію вашого коду на PythonAnywhere. Давайте перевіримо, набравши `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 + + +### Створення virtualenv на PythonAnywhere + +Так само як і на власному комп'ютері, створіть virtualenv на PythonAnywhere. У консолі Bash введіть: + +``` +$ 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 +``` + + +> **Примітка** Крок `pip install` може зайняти кілька хвилин. Терпіння і ще раз терпіння! Але якщо він займає більш ніж 5 хвилин, щось пішло шкереберть. Попросіть допомоги у вашого тренера. + + + + +### Збирання статичних файлів. + +Можливо ви поцікавились, що за штука цей "whitenoise"? Це інструмент для обслуговування так званих "статичних файлів". Статичні файли - це файли, які зазвичай не змінюються і не виконують ніякого коду, наприклад, HTML чи CSS файли. На серверах вони працюють інакше, ніж на вашому локальному комп'ютері, щоб сервер міг їх віддавати, нам потрібен спеціальний інструмент, такий як "whitenoise". + +Пізніше, коли ми змінимо CSS для нашого сайту, ми дізнаємось трохи більше про статичні файли. + +Поки що нам просто потрібно виконати додаткову команду `collectstatic` на сервері. Ця команда каже Django про усі статичні файли на сервері, які йому потрібні. На даний момент це в основному файли, що допомагають зробити красивою сторінку адміністрування. + + (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 + +Введемо "yes" і помчали! Чи не прекрасно, коли ми можемо змусити комп'ютер друкувати незрозумілий текст сторінка за сторінкою? Кожного разу я додаю невеликий звуковий супровід: дир-дир-дир... + + 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'. + + +### Створимо базу даних на PythonAnywhere + +Ось ще одна річ, яка відрізняється на локальному комп'ютері і на сервері: вони використовують різні бази даних. Так що облікові записи користувачів і статті блогу можуть відрізнятися на сервері і локальному комп'ютері. + +Ми можемо ініціалізувати базу даних на сервері таким самим чином, як і на локальному комп'ютері - з допомогою `migrate` і `createsuperuser`: + + + (mvenv) $ python manage.py migrate + Operations to perform: + [...] + Applying sessions.0001_initial... OK + + + (mvenv) $ python manage.py createsuperuser + + +## Опублікуємо наш блог як веб-додаток + +Тепер наш код на PythonAnywhere, віртуальне середовище готове, статичні файли зібрані, база даних встановлена. Ми готові до публікації веб-додатку! + +Перейдемо до панелі керування PythonAnywhere, натиснувши на лого сайту і виберемо вкладку **Web**. Тепер натиснемо **Add a new web app**. + +Після підтвердження нашого доменного імені, виберемо ручне налаштування (**manual configuration**) у діалоговому вікні, зверніть увагу: варіант "Django" нам *не годиться*. Далі виберемо **Python 3.4** і натиснемо Next для завершення. + +> **Примітка** Пересвідчіться, що ви вибрали варіант "Manual configuration", а не "Django". Ми занадто круті для стандартних налаштувань PythonAnywhere для Django ;-) + + +### Налаштуємо virtualenv + +Ми опинились на сторінці налаштувань веб-додатку на PythonAnywhere. Сюди слід переходити, якщо ви хочете зробити якісь зміни до додатку на сервері. + + + + +У розділі "Vitrualenv" натиснемо на червоний текст "Enter the path to a virtualenv" (введіть шлях до virtualenv) і напишемо: `/home//my-first-blog/myvenv/`. Перед тим, як продовжити, натиснемо синю кнопку з галочкою, щоб зберегти шлях. + +> **Примітка** Замініть на своє ім'я користувача. Якщо ви помилитесь, PythonAnywhere покаже вам невеличке попередження. + + +### Сконфігуруємо WSGI файл + +Django використовує у роботі "WSGI протокол" - стандарт взаємодії веб-додатків на Python із веб-серверами. Він підтримується PythonAnywhere. Отже, поредагувавши конфігураційний файл WSGI, ми дозволимо PythonAnywhere розпізнати наш блог на Django. + +Перейдемо за посиланням напроти "WSGI configuration file" (у розділі "Code" близько до початку сторінки - посилання матиме якусь таку назву: `/var/www/_pythonanywhere_com_wsgi.py`). Ми опинились на сторінці з редактором. + +Зітремо весь вміст файлу і замінимо його таким: + +```python +import os +import sys + +path = '/home//my-first-blog' # use your own username here +if path not in sys.path: + sys.path.append(path) + +os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' + +from django.core.wsgi import get_wsgi_application +from whitenoise.django import DjangoWhiteNoise +application = DjangoWhiteNoise(get_wsgi_application()) +``` + +> **Примітка** Не забудьте вказати своє ім'я користувача замість `` +> **Примітка** Третій рядок вказує PythonAnywhere, як знайти наш додаток. Дуже важливо, щоб цей шлях був коректним і щоб не було зайвих пробілів. Інакше ви побачите "ImportError" в логах помилок. + +Завдання цього файлу - розповісти PythonAnywhere, де живе наш веб-додаток і як знайти файл із налаштуванням Django. Також він налаштовує інструмент для статичних файлів "whitenoise". + +Натиснемо **Save** і перейдемо назад до вкладки **Web**. + +Готово! Натискаємо на велику зелену **Reload** кнопку і можемо глянути на свій веб-додаток. Посилання на нього вгорі сторінки. + + +## Підказки для відлагодження (debug) + +Якщо відвідавши ваш сайт, побачили повідомлення про помилку, найперше, куди слід подивитись - це **лог помилок**. Перейти до нього можна із [вкладки Web](https://www.pythonanywhere.com/web_app_setup/) PythonAnywhere. Гляньте, чи є там повідомлення про помилки; найновіші будуть внизу файлу. Найчастіше трапляються такі проблеми: + +- Забули ввести одну із команд у консолі: створення віртуального середовища, його активацію, встановлення туди Django, збирання статичних файлів, міграцію бази даних. + +- Зробили опечатку в шляху до virtualenv на вкладці Web - в такому разі, там можна буде побачити маленьке червоне повідомлення про помилку. + +- Помилились у конфігураційному файлі WSGI - перевірте шлях до своєї директорії my-first-blog. + +- Ви точно вибрали таку ж версію Python для віртуального середовища, як і для веб-додатку? Обидві повинні мати версію 3.4. + +- Ось деякі [загальні підказки для налагодження у PythonAnywhere вікі](https://www.pythonanywhere.com/wiki/DebuggingImportError). + +Пам'ятайте, що ваш тренер може допомогти! + + +# Ми вийшли у світ! + +На сторінці за замовчуванням нашого сайту має бути напис "Welcome to Django" так само, як і на вашому локальному комп'ютері. Спробуємо додати `admin` у кінці URL і опинимось у панелі адміністратора. Використаємо для входу логін і пароль та побачимо, що тут можна додавати нові пости на сервер. + + +*ДОБРЯЧЕ* похваліть себе! Розгортання на сервер - один з найхитромудріших етапів веб-розробки. Зазвичай люди витрачають дні, щоб усе запрацювало. Але вам вдалось вийти у справжній інтернет, запросто! + + diff --git a/uk/deploy/images/github_get_repo_url_screenshot.png b/uk/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/uk/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/uk/deploy/images/new_github_repo.png b/uk/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/uk/deploy/images/new_github_repo.png differ diff --git a/uk/deploy/images/pythonanywhere_web_tab_virtualenv.png b/uk/deploy/images/pythonanywhere_web_tab_virtualenv.png new file mode 100644 index 00000000000..6069f6da831 Binary files /dev/null and b/uk/deploy/images/pythonanywhere_web_tab_virtualenv.png differ diff --git a/uk/deploy/install_git.md b/uk/deploy/install_git.md new file mode 100644 index 00000000000..cd11f616a69 --- /dev/null +++ b/uk/deploy/install_git.md @@ -0,0 +1,28 @@ + +### Windows + +Git можна завантажити з [git-scm.com](https://git-scm.com/). Ви можете натискати "next next next" на всіх кроках окрім одного. На п’ятому кроці, названому "Adjusting your PATH environment", виберіть "Run Git and associated Unix tools from the Windows command-line" (нижня опція). Крім цього, стандартні налаштування добрі. Вимкніть закінчення рядків в стилі Windows, ввімкніть в стилі Unix, вони кращі. + +### Mac OS + +Завантажте Git з [git-scm.com](https://git-scm.com/) і просто слідуйте вказівкам. + + +### Linux + +Якщо Git не встановлений, то він має бути доступний через менеджер пакетів, тому спробуйте: + + +#### Debian або Ubuntu + + $ sudo apt install git + + +#### Fedora + + $ sudo dnf install git + + +#### openSUSE + + $ sudo zypper install git diff --git a/uk/deploy/signup_pythonanywhere.md b/uk/deploy/signup_pythonanywhere.md new file mode 100644 index 00000000000..12ee7b6ca76 --- /dev/null +++ b/uk/deploy/signup_pythonanywhere.md @@ -0,0 +1,8 @@ + +Тепер час для створення безкоштовного "Beginner" акаунту на PythonAnywhere. + +* [www.pythonanywhere.com](https://www.pythonanywhere.com/) + + +> **Примітка** При виборі імені користувача, пам'ятайте, що URL-адреса блогу матиме вигляд `yourusername.pythonanywhere.com`, так що зупиніться або на вашому ніку, або на імені, пов'язаному з тематикою блогу. + diff --git a/uk/django/README.md b/uk/django/README.md new file mode 100755 index 00000000000..2c30e036c46 --- /dev/null +++ b/uk/django/README.md @@ -0,0 +1,27 @@ +# Що таке Django? + +Django (_/ˈdʒæŋɡoʊ/ джанго_) - безкоштовний і відкритий фреймворк для створення веб додатків, написаний мовою програмування Python. Веб фреймворк - набір компонентів, які допомагають розробляти веб-сайти швидше і простіше. + +При побудові веб-сайту, ви завжди потребуєте схожого набору компонентів: спосіб управління авторизацією користувача (створення акаунту, вхід, вихід), панель управління, форми, спосіб завантажити файли, тощо. + +На щастя для вас інші люди вже давно помітили, що веб розробники зіштовхуються з подібними проблемами під час розробки нового сайту, отже вони об'єднались в команду і створили фреймворки (Django є одним з таких), що дають вам вже готові до використання компоненти. + +Фреймворки існують для того, щоб вберегти вас від необхідності повторно винаходити велосипед і допомогти зменшити деякі накладні витрати під час розробки нового сайту. + +## Навіщо вам потрібен фреймворк? + +Щоб зрозуміти для чого насправді розроблений Django, потрібно ближче розглянути роботу серверу. Першочергово сервер повинен знати про те, що ви бажаєте щоб він обслуговував ваш сайт. + +Уявіть собі поштову скриньку (порт), котра моніториться на вхідні листи (запити). Це здійснюється веб сервером. Веб сервер читає листа і відсилає відповідь із веб-сторінкою. Але коли ви бажаєте відправити дещо, вам потрібно мати деякий вміст. І Django є інструментом, котрий допомагає вам створити цей контент. + +## Що трапляється коли хтось надсилає запит на веб-сайт з вашого серверу? + +Коли на веб-сервер надходить запит, він перенаправляється на Django, котрий намагається з'ясувати на що конкретно був запит. Спочатку береться адреса веб-сторінки і Django намагається з'ясувати, що робити. Ця частина роботи здійснюється таким компонентом Django як __urlresolver__ (зауважте, що адреса веб-сайту називається URL - Uniform Resource Locator - отже ім'я *urlresolver* має сенс). Це не дуже складний елемент - вилучається список шаблонів і відбуваються спроби знайти підходящий URL. Django перевіряє шаблони у порядку слідування і якщо якийсь із них відповідає адресі веб-сторінки Django надсилає запит до асоційованої функції (котра має назву *view*). + +Уявіть собі листоношу з листом. Він йде по вулиці і звіряє номер кожного будинку з тим, що вказаний в адресі отримувача. Якщо номер співпадає, він кладе листа в скриньку. Аналогічним чином працює і urlresolver! + +Всередині функції *view* відбуваються найцікавіші речі: щоб знайти деяку інформацію, ми можемо подивитися в базу даних. Можливо, користувач може попросити зробити певні зміни даних? На зразок листа, що говорить "Будь ласка, змініть опис моєї роботи." Елемент *view* може перевірити чи дозволено вам це зробити, потім оновлює опис роботи для вас і відправляє зворотнє повідомлення: "Виконано!". Далі блок *view* генерує відповідь і Django може відправити її до веб браузера користувача. + +Звичайно, вище наведені пояснення є трохи спрощеними, але вам не потрібно знати усіх технічних деталей поки що. Достатньо мати загальне уявлення. + +Отже замість того, щоб надто занурюватись у деталі, ми просто почнемо щось створювати із використанням Django і вивчимо усі важливі складові на цьому шляху! diff --git a/uk/django_admin/README.md b/uk/django_admin/README.md new file mode 100755 index 00000000000..de2e6babcf2 --- /dev/null +++ b/uk/django_admin/README.md @@ -0,0 +1,41 @@ +# Django адміністратор + +Щоб додавати, редагувати і видаляти пости, які ми щойно змоделювали, використаємо Django адміністратор. + +Відкриймо файл `blog/admin.py` і замінимо його зміст на наступні рядки: + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +Як можна побачити, ми імпортуємо (включаємо) модель посту Post визначену у попередньому розділі. Щоб зробити нашу модель видимою на сторінці адміністратора, потрібно зареєструвати модель за допомогою `admin.site.register(Post)`. + +Гаразд, час поглянути на нашу модель Post. Не забудьте виконати в консолі команду `python manage.py runserver` для того щоб запустити сервер. Відкрийте браузер, введіть адресу http://127.0.0.1:8000/admin/ і ви побачите сторінку входу схожу на цю: + +![Сторінка авторизації](images/login_page2.png) + +Щоб ввійти, потрібно створити *суперкористувача (superuser)* - користувача, котрий може контролювати все на сайті. Поверніться до командного рядка, наберіть `python manage.py createsuperuser`, і натисніть клавішу Enter. Коли вас про це запитають, введіть логін користувача (маленькими буквами без пропусків), адресу email та пароль. Не хвилюйтеся, що ви не можете бачити пароль який вводите – так і повинно бути. Просто введіть його і натисніть `Enter` щоб продовжити. Вихідний результат має виглядати наступним чином (де ім'я користувача і email повинні містити ваші дані): + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + Username: admin + Email address: admin@admin.com + Password: + Password (again): + Superuser created successfully. + +Поверніться до вашого браузера і здійсніть вхід використовуючи логін та пароль щойно створеного суперкористувача; ви маєте побачити робочу панель адміністратора Django. + +![Django адміністратор](images/django_admin3.png) + +Перейдіть в Posts та поекспериментуйте з ними трошки. Додайте п’ять-шість постів. Не переживайте за вміст, можете просто скопіювати якийсь текст з цього підручника щоб зберегти час :). + +Переконайтесь у тому, що принаймні два або три поста (але не всі) мають встановлену дату публікації. Це стане у нагоді пізніше. + +![Django адміністратор](images/edit_post3.png) + +Якщо бажаєте дізнатися більше про Django admin, гляньте документацію Django: https://docs.djangoproject.com/en/1.11/ref/contrib/admin/ + +Це напевне гарний час щоб налити кави (чи чаю) чи з’їсти щось щоб перезарядитися. Ви створили свою першу модель Django і заслуговуєте на короткий тайм-аут! diff --git a/uk/django_admin/images/django_admin3.png b/uk/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/uk/django_admin/images/django_admin3.png differ diff --git a/uk/django_admin/images/edit_post3.png b/uk/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/uk/django_admin/images/edit_post3.png differ diff --git a/uk/django_admin/images/login_page2.png b/uk/django_admin/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/uk/django_admin/images/login_page2.png differ diff --git a/uk/django_forms/README.md b/uk/django_forms/README.md new file mode 100755 index 00000000000..e773c22d764 --- /dev/null +++ b/uk/django_forms/README.md @@ -0,0 +1,401 @@ +# Django форми + +Остання річ, яку б ми хотіли зробити з нашим сайтом, це створити зручний спосіб додавати і редагувати пости. Django адміністратор - це звісно круто, але водночас він є досить складним для налаштування. З формами ми будемо мати абсолютний контроль над нашим інтерфейсом - можемо робити майже усе, що заманеться! + +Що тішить стосовно Django форм, так це те, що останні можна визначати як з нуля, так і створювати засобами `ModelForm`, що зберігають результат форми всередині моделі. + +Це саме те, що нам потрібно: створимо форму для нашої моделі `Post`. + +Як і кожна важлива складова Django, форми мають свій власний файл: `forms.py`. + +Потрібно створити файл із заданим ім'ям в папці `blog`. + + blog + └── forms.py + +Добре, відкриємо цей файл і наберемо наступний код: + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + +Спершу потрібно імпортувати Django форми (`from django import forms`) і, очевидно, нашу модель `Post` (`from .models import Post`). + +`PostForm`, як ви можливо зазначили, це ім'я нашої форми. Ми маємо повідомити Django, що наша форма є `ModelForm` (таким чином Django здійснить для нас певні магічні маніпуляції) і рядок `forms.ModelForm` відповідає за це. + +Далі, у нас є `class Meta`, де ми вказуємо для Django котра з моделей має бути використана для створення форми (`model = Post`). + +Зрештою, можемо зазначити, якими полями має закінчуватись наша форма. В даному сценарії ми би хотіли опублікувати такі параметри, як заголовок `title` і зміст `text`, дані про автора `author`, що автоматично встановлюються як дані користувача, який наразі залогінився (тобто ви!), а також дата створення `created_date`, яка автоматично встановлюється при створенні поста (тобто в коді), вірно ж? + +І це все! Все що нам потрібно тепер зробити це використати форму в блоці *view* і відобразити її в шаблоні. + +Отже, знову ми створимо: посилання на сторінку, адресу (URL), вид (view) і шаблон (template). + +## Посилання на сторінку з формою + +Час відкрити `blog/templates/blog/base.html`. Додамо лінк всередині блоку `div` із ім'ям `page-header`: + +```html + +``` + +Зауважте, що ми хочемо запустити наше нове відображення `post_new`. Клас `"glyphicon glyphicon-plus"` постачається bootstrap темою, яку ми використовуємо, і буде відображати знак плюса. + +Після додавання відповідного рядка, ваш html файл має виглядати наступним чином: + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + +Після збереження та оновлення сторінки http://127.0.0.1:8000 ви звісно побачите знайому помилку `NoReverseMatch`, правда? + +## URL + +Відкриваємо `blog/urls.py` і додаємо рядок: + +```python + url(r'^post/new/$', views.post_new, name='post_new'), +``` + +Остаточно код буде виглядати так: + +```python +from django.conf.urls import url +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'), +] +``` + +Після оновлення сайту бачимо помилку `AttributeError`, оскільки відображення `post_new` не реалізоване. Давайте додамо цей вид прямо зараз. + +## Відображення post_new + +Час відкрити файл `blog/views.py` і додати наступні рядки: + +```python +from .forms import PostForm +``` + +і функцію для потрібного *відображення*: + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Щоб створити нову форму `Post`, нам потрібно викликати функцію `PostForm()` і передати її до шаблону. Повернемося пізніше до цього відображення, а зараз давайте створимо шаблон для форми. + +## Шаблон + +Нам потрібно створити файл `post_edit.html` у папці `blog/templates/blog`. Щоб створити форму нам знадобиться декілька речей: + +- нам треба показати форму. Можна, наприклад, зробити це за допомогою простого `{% raw %}{{ form.as_p }}{% endraw %}`. +- верхній рядок має бути розміщений всередині тега HTML для форми: `...` +- нам знадобиться кнопка Зберегти - `Save`. Створимо її в HTML за допомогою: `` +- і нарешті, одразу після відкриваючого тегу `
` ми маємо додати `{% raw %}{% csrf_token %}{% endraw %}`. Це дуже важливо з міркувань безпеки вашої форми! Django наголосить на цьому, якщо ви раптом забудете вказати згадану вказівку і будете намагатися зберегти форму: + +![CSFR Forbidden page](images/csrf2.png) + +Добре, отже, давайте подивимось як має виглядати HTML код в `post_edit.html`: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+{% endblock %} +``` + +Час перезавантажитись! Йой! Ваша форма відображується! + +![New form](images/new_form2.png) + +Але, одну хвилиночку! Коли ви набираєте щось в полях `title` і `text`, та намагаєтесь зберегти зміни - що ж тоді станеться? + +А нічого! Ми знову опинимося на тій самій сторінці, і наш текст зникне... і жодного нового поста. Отже, що ж пішло не так? + +Відповідь: нічого. Мусимо проробити трохи більше роботи з нашим блоком *view*. + +## Зберігання форми + +Відкрийте `blog/views.py` знову. Наразі все що ми маємо в `post_new` це: + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Коли ми відправляємо форму, ми потрапляємо в той самий view, але цього разу маємо більше даних в `request`, а якщо точніше - в `request.POST` (ця назва не пов’язана з блогерським терміном "пост", вона пов’язана з тим що ми "постимо" дані). Пам'ятайте, що у файлі HTML наше визначення `
` містило атрибут `method="POST"`? Усі поля форми на даний момент знаходитимуться в `request.POST`. Ви не повинні перейменовувати `POST` на щось інше (лише єдине альтернативне прийнятне значення для атрибуту `method` це `GET`, але ми не маємо часу пояснювати в чому різниця). + +Отже, ми маємо дві окремі ситуації, що потребують контролю для нашого блоку вид *view*. Перша: коли ми отримуємо доступ до сторінки вперше і хочемо отримати пусту форму. Друга: коли ми повертаємось назад до виду *view* із усіма нещодавно доданими даними форми. Таким чином, маємо додати умову (використаємо для цього `if`). + +```python +if request.method == "POST": + [...] +else: + form = PostForm() +``` + +Час заповнити порожнє місце `[...]`. Якщо метод `method` є методом `POST`, тоді ми захочемо створити `PostForm` з даними форми, вірно? Зробимо це за допомогою: + +```python +form = PostForm(request.POST) +``` + +Просто! Наступна річ - перевірити чи коректно заповнена форма (налаштовані усі необхідні поля і не відбулося зберігання жодного некоректного значення). Зробимо це за допомогою `form.is_valid()`. + +Ми перевіряємо чи є форма прийнятною і якщо це так, то можемо зберегти її! + +```python +if form.is_valid(): + post = form.save(commit=False) + post.author = request.user + post.published_date = timezone.now() + post.save() +``` + +В основі, маємо тут два моменти: зберігаємо форму за допомогою `form.save` і додаємо автора (оскільки поле автор `author` було відсутнє в `PostForm` і це поле є необхідним!). `commit=False` означає, що ми не хочемо поки що зберігати модель `Post` - ми хочемо спочатку додати ім'я автора. У більшості випадків ви будете користуватися `form.save()` без `commit=False`, але в даному випадку, ми маємо це зробити. +`post.save()` захистить здійснені зміни (додавання автора) і створиться новий блог пост! + +Зрештою, було б чудово, якби ми могли миттєво переходити на сторінку `post_detail` для щойно створеного допису у блозі, чи не так? Щоб зробити це, нам необхідно виконати ще один імпорт: + +```python +from django.shortcuts import redirect +``` + +Додайте це з самого початку вашого файлу. А тепер можемо сказати: перейти на сторінку `post_detail` для щойно створеного поста. + +```python +return redirect('post_detail', pk=post.pk) +``` + +`post_detail` - ім'я виду, до якого ми хочемо перейти. Пам'ятаєте, що цей вид потребує змінної `pk`? Щоб здійснити передачу вище згаданої змінної, скористаємося `pk=post.pk`, де `post` є новим постом! + +Але, щось дуже багато балачок, напевно ми хотіли б побачити, як відображується даний вид наразі в цілому, правда ж? + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Подивимося, чи усе працює. Зайдіть на сторінку http://127.0.0.1:8000/post/new/, додайте `title` та `text`, збережіть... і вуаля! Новий блог пост успішно додано і нас автоматично перенаправило на сторінку `post_detail`! + +Ви могли помітити, що ми встановлюємо дату публікації, перед збереженням поста. Пізніше, ми введемо *кнопку публікації* в **Django Girls Tutorial: Розширте ваш додаток**. + +Просто чудово! + +> Оскільки ми нещодавно мали справу з інтерфейсом Django адміністратора система наразі вважає, що ми залогінились. Є декілька ситуацій, які могли призвести до того, що ми вийшли з системи (закриття браузера, перезавантаження бази даних тощо). Якщо раптом виявиться, що при створенні поста з'явиться помилка, пов'язана із відсутністю залогіненого користувача, перейдіть на сторінку адміністратора http://127.0.0.1:8000/admin і залогіньтеся знову. Проблему тимчасово буде вирішено. Безповоротне розв'язання проблеми чекає на вас у розділі __Домашня робота: безпека вашого сайту!__ після освоєння головного посібника. + +![Logged in error](images/post_create_error.png) + + +## Перевірка форми + +А тепер ми покажемо вам, наскільки круто використовувати Django форми. Блог пост повинен мати такі поля як заголовок - `title` і зміст - `text`. В нашій моделі `Post` ми не вказали (на відміну від дати публікації - `published_date`), що ці поля не є необхідними, отже, Django, за замовчуванням, очікує що вони будуть заповнені. + +Спробуйте зберегти форму без атрибутів `title` і `text`. Здогадуємось, що трапиться! + +![Перевірка форми](images/form_validation2.png) + +Django турбується про те, щоб усі поля нашої форми були коректно заповнені. Хіба це не круто? + + +## Редагування форми + +Тепер ми знаємо як додати нову форму. Та якщо ми раптом захочемо відредагувати вже існуючу? Це дуже схоже на те, що ми щойно проробили. Давайте швидко створимо певні важливі речі (якщо вам щось незрозуміло, ви маєте запитати вашого тренера або ще раз передивитись попередній параграф, оскільки ми вже пройшли усі ці речі). + +Відкрийте `blog/templates/blog/post_detail.html` і додайте наступний рядок: + +```python + +``` + +таким чином, шаблон буде виглядати подібним чином: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} + +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +В `blog/urls.py` додамо цей рядок: + +```python + url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'), +``` + +Повторно використаємо шаблон `blog/templates/blog/post_edit.html`, отже, остання річ, яка лишилась це відображення.. + +Давайте відкриємо `blog/views.py` і додамо в самому кінці файлу: + +```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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + +Виглядає майже точно так, як і наш вид `post_new`, правда? Не зовсім. Перше: ми передаємо додатковий параметр `pk` з адресного рядку. Наступне: ми отримуємо модель `Post`, яку хотіли б відредагувати як `get_object_or_404(Post, pk=pk)` і потім, при створенні форми ми передаємо цей пост як екземпляр `instance`, коли зберігаємо форму: + +```python +form = PostForm(request.POST, instance=post) +``` + +а коли ми просто відкриваємо форму з цим постом для редагування: + +```python +form = PostForm(instance=post) +``` + +Добре, давайте протестуємо, чи все працює! Перейдімо на сторінку `post_detail`. У верхньому правому кутку має з'явитися кнопка редагування: + +![Кнопка редагування](images/edit_button2.png) + +Коли ви натиснете на неї, то побачите форму з нашим блог постом: + +![Редагування форми](images/edit_form2.png) + +Можете вільно змінити заголовок або текст і зберегти зміни! + +Вітаємо! Ваш додаток стає все більш і більш повним! + +Якщо бажаєте дізнатись більше інформації про форми Django, ознайомтесь із документацією: https://docs.djangoproject.com/en/1.11/topics/forms/ + +## Безпека + +Створювати нові публікації просто клацаючи на посилання класно! Але зараз, будь-хто хто відвідує ваш сайт, буде здатним опублікувати пост, а ви цього напевне не хочете. Давайте зробимо так що кнопка показується для вас, але не показується для всіх інших. + +В `blog/templates/blog/base.html`, знайдіть наш `page-header` `div` і тег посилання який ви додали туди раніше. Вони повинні виглядати якось так: + +```html + +``` + +Ми збираємось додати інший тег `{% if %}` який показуватиме посилання лише користувачам які ввійшли від імені адміністратора. На даний момент, це лише ви! Змініть тег `` щоб він виглядав так: + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Цей `{% if %}` зробить так, що посилання буде відправлятись браузеру лише коли користувач, що запитував сторінку, залогований. Це не захищає від створення нових публікацій анонімами повністю, але це непоганий перший крок. Ми розглянемо більше питань безпеки в розширених уроках. + +Пам'ятаєте іконку редагування, що ми додали до нашої сторінки з деталями посту? Ми також хочемо додати цю ж зміну сюди, щоб інші люди не могли редагувати існуючі пости. + +Відкрийте `blog/templates/blog/post_detail.html` і знайдіть: + +```html + +``` + +Замініть це на: + +```html +{% if user.is_authenticated %} + +{% endif %} +``` + +Оскільки ви ввійшли до системи, то якщо оновите сторінку, не побачите зміни. Відкрийте сторінку в новому браузері або в анонімному вікні, і тоді ви побачите, що посилання не показується! + +## Ще одне: розгортання! + +Давайте поглянемо, чи це все працює на PythonAnywhere. Час для ще одного розгортання! + +* Спершу, закомітьте новий код і зробіть push на GitHub + +``` +$ git status +$ git add --all . +$ git status +$ git commit -m "Added views to create/edit blog post inside the site." +$ git push +``` + +* Тоді, в [bash консолі PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +``` +$ cd my-first-blog +$ source myvenv/bin/activate +(myvenv)$ git pull +[...] +(myvenv)$ python manage.py collectstatic +[...] +``` + +* Нарешті, перейдіть на [вкладку Web](https://www.pythonanywhere.com/web_app_setup/) і натисніть **Reload**. + + +І це все! Вітання :) diff --git a/uk/django_forms/images/csrf2.png b/uk/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/uk/django_forms/images/csrf2.png differ diff --git a/uk/django_forms/images/drafts.png b/uk/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/uk/django_forms/images/drafts.png differ diff --git a/uk/django_forms/images/edit_button2.png b/uk/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/uk/django_forms/images/edit_button2.png differ diff --git a/uk/django_forms/images/edit_form2.png b/uk/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/uk/django_forms/images/edit_form2.png differ diff --git a/uk/django_forms/images/form_validation2.png b/uk/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/uk/django_forms/images/form_validation2.png differ diff --git a/uk/django_forms/images/new_form2.png b/uk/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/uk/django_forms/images/new_form2.png differ diff --git a/uk/django_forms/images/post_create_error.png b/uk/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/uk/django_forms/images/post_create_error.png differ diff --git a/uk/django_installation/README.md b/uk/django_installation/README.md new file mode 100644 index 00000000000..3d6a14afbfb --- /dev/null +++ b/uk/django_installation/README.md @@ -0,0 +1,6 @@ +# Встановлення Django + +> **Зауваження:** Якщо ви вже проходили кроки інсталяції, значить все має бути зроблено - можете переходити зразу до наступного розділу! + +{% include "/django_installation/instructions.md" %} + diff --git a/uk/django_installation/instructions.md b/uk/django_installation/instructions.md new file mode 100644 index 00000000000..3a8c043f616 --- /dev/null +++ b/uk/django_installation/instructions.md @@ -0,0 +1,102 @@ +> Частина цього розділу базується на матеріалах Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +> Частина цього розділу базується на матеріалі [django-marcador tutorial] +(http://django-marcador.keimlink.de/), +який ліцензований Creative Commons Attribution-ShareAlike 4.0 International License. +Авторське право на навчальні матеріали django-marcador tutorial належить Markus Zapke-Gründemann та ін. + + +## Віртуальне середовище + +Перед тим, як встановлювати Django, ми допоможемо вам встановити надзвичайно корисний інструмент, що допоможе підтримувати середовище розробки на вашому комп'ютері чистим. Цей крок можна пропустити, але дуже рекомендується його виконати. Починати найкращим можливим способом дозволить уникнути багатьох клопотів в майбутньому! + +Отже, створимо віртуальне середовище (англ. **virtual environment**, скорочено *virtualenv*). Virtualenv ізолюватиме ваше Python/Django середовище, для кожного проекту. Це означає, що будь-які зміни, внесені на одному сайті не вплинуть на будь-які інші, які ви також розробляєте. Гарно, правда ж? + +Все, що вам необхідно зробити - це знайти місце, де ви хочете створити віртуальне середовище `virtualenv`; наприклад, ваша домашня папка. На Windows це може виглядати як `C:\Users\Name` (де `Name` - ваш логін). + +В рамках цього навчального посібника будемо використовувати нову директорію `djangogirls` з вашої домашньої папки: + + mkdir djangogirls + cd djangogirls + +Створимо віртуальне середовище з ім'ям `myvenv`. Загальна команда буде ось в такому форматі: + + python3 -m venv myvenv + +### Windows + +Щоб створити нове віртуальне середовище `virtualenv`, вам потрібно відкрити консоль (ми вже розповідали вам про це в одному з попередніх розділів - пам'ятаєте?) і запустити `C:\Python34\python -m venv myvenv`. Це буде виглядати так: + + C:\Users\Name\djangogirls> C:\Python34\python -m venv myvenv + +де `C:\Python34\python` - це папка, в якій ви перед цим встановили Python, а `myvenv` - ім'я вашого віртуального середовища `virtualenv`. Ви можете використовувати будь-яке ім’я, але старайтесь обмежитись маленькими буквами і не використовуйте пробілів, наголосів або спеціальних символів. Тримати ім’я коротким - також гарна ідея, оскільки ви будете часто посилатися на нього! + +### Linux та macOS + +Створення віртуального середовища `virtualenv` як на Linux так і на macOS просто відбувається запуском `python3 -m venv myvenv`. +Виглядає це так: + + $ python3 -m venv myvenv + +`myvenv` - ім'я вашого віртуального середовища `virtualenv`. Можете використовувати яке завгодно ім'я, але воно має містити лише маленькі літери і не містити пробілів. Тримати ім’я коротким - також гарна ідея, оскільки ви будете часто посилатися на нього! + +> __ЗАУВАЖЕННЯ:__ Ініціалізація віртуального середовища на Ubuntu 14.04 і Debian 8 схожим методом наразі призводить до наступної помилки: + +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 + +> Щоб обійти цю проблему, використовуйте натомість команду `virtualenv`. + +> $ sudo apt install python-virtualenv +> $ virtualenv --python=python3.4 myvenv + + +## Робота з віртуальним середовищем + +Вище зазначена команда створить папку `myvenv` (або інше вибране вами ім'я), що міститиме наше віртуальне середовище (в основному, набір папок і файлів). + +#### Windows + +Запустіть своє віртуальне середовище, виконавши: + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + +#### Linux та macOS + +Запустіть своє віртуальне середовище виконавши: + + $ source myvenv/bin/activate + +Не забудьте, що замість `myvenv` повинно бути вибране вами ім'я для віртуального середовища! + +> __ЗАУВАЖЕННЯ:__ іноді використання `source` може бути недоступно. В цьому випадку спробуйте зробити наступне: + +> $ . myvenv/bin/activate + +Про активацію віртуального середовища ви дізнаєтесь, коли побачите префікс `(myvenv)` в командному рядку консолі + +Під час роботи у віртуальному середовищі, `python` буде автоматичному посилатися на правильну версію, отже ви можете використовувати `python` замість `python3`. + +Добре, маємо усі необхідні залежності. Можемо зрештою встановити Django! + +## Встановлення Django + +Наразі, коли ваш `virtualenv` активований, можна встановлювати Django використавши `pip`. В консолі, запустіть `pip install django==1.11` (зазначте, що тут ми користуємося подвійним знаком рівності: `==`). + + (myvenv) ~$ pip install django==1.11 + Downloading/unpacking django==1.11 + Installing collected packages: django + Successfully installed django + Cleaning up... + +для Windows +> Якщо ви отримуєте помилку коли викликаєте pip на Windows, будь ласка, перевірте чи шлях до вашого проекту не містить пробілів, наголосів чи спеціальних символів (наприклад `C:\Users\User Name\djangogirls`). Якщо містить - перемістіть його в місце шлях до якого не містить таких символів (пропонуємо: `C:\djangogirls`). Після переміщення спробуйте запустити вищевказану команду знову. + +для Windows 8 чи Windows 10 +> Ваш командний рядок може зависнути, після того як ви спробуєте встановити Django. Якщо це сталось, замість вище зазначеної команди використовуйте: + +> C:\Users\Name\djangogirls> python -m pip install django==1.11 + +для Linux +> Якщо виникла помилка під час запуску pip на Ubuntu 12.04, будь ласка, запустіть `python -m pip install -U --force-reinstall pip` щоб коректно перевстановити pip у віртуальному середовищі. + +Оце усе! Зараз ви (нарешті) готові створити додаток Django! diff --git a/uk/django_models/README.md b/uk/django_models/README.md new file mode 100755 index 00000000000..03d73aa8968 --- /dev/null +++ b/uk/django_models/README.md @@ -0,0 +1,172 @@ +# Django моделі + +Наразі ми б хотіли створити щось, що зберігатиме усі дописи в нашому блозі. Але щоб бути спроможними це зробити, нам необхідно трохи поговорити про таке поняття, як об'єкти `objects`. + +## Об'єкти + +Існує така концепція в програмуванні, яка називається `Об'єктно-орієнтовне програмування`. Ідея полягає в тому, що замість написання нудної послідовності програмних інструкцій ми можемо моделювати речі і визначати як вони будуть взаємодіяти одна з одною. + +Отже, що ж таке об'єкт? Це набір властивостей та дій. Звучить дивно, але представимо приклад. + +Якщо ми хочемо змоделювати кота, то створимо об'єкт `Cat`, що має деякі властивості, наприклад, колір, вік, настрій, власник - `color`, `age`, `mood` (хороший, поганий, сонний ;)), `owner` (це буде об'єкт `Person` або, можливо, у випадку бездомного кота, ця властивість буде пустою). + +Далі припустимо, що наш кіт `Cat` має певний набір дій, наприклад, муркотіти, шкрябатися, їсти - `purr`, `scratch`, `feed` (де ми будемо давати коту певний котячий корм `CatFood`, котрий міг би бути окремим об'єктом зі своїми властивостями, наприклад, смак - `taste`). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + +Отже, основна ідея полягає в тому, щоб описати реальні речі в програмному коді з усіма їх властивостями (так званими властивостями об'єкта `object properties`) і діями (так званими методами `methods`). + +Як же ми тоді змоделюємо дописи у блозі? Ми ж хочемо створити блог, правда? + +Нам треба відповісти на питання: що таке допис у блозі? Які властивості він повинен мати? + +Однозначно наш допис повинен містити певний текст із змістом і заголовком, правда ж? Було б також непогано знати хто його написав, отже нам потрібен автор. Зрештою, ми б хотіли знати коли було створено і опубліковано цей допис. + + Post + -------- + title + text + author + created_date + published_date + +Якого роду дії можна було б вчиняти з дописом у блозі? Було б непогано мати певний метод, що публікує допис, правда ж? + +Отже, нам потрібен метод `publish`. + +Таким чином, знаючи, чого ми хочемо досягти, можемо почати моделювати це в Django! + +## Django модель + +Знаючи яким є наш об'єкт, можемо створити Django модель для допису у нашому блозі. + +Модель в Django - це спеціальний вид об'єкту, який зберігається в базі даних. База даних є набором певних даних. Це є місце, де ви будете зберігати інформацію про користувачів, дописи у вашому блозі тощо. Надалі для зберігання наших даних будемо використовувати базу даних SQLite. Це база даних, що встановлена в Django за замовчуванням і, цього буде наразі для нас достатньо. + +Ви можете уявляти модель в базі даних як таблицю зі стовпчиками (полями) та рядками (дані). + +### Створення додатку + +Щоб підтримувати все у порядку, створимо окремий додаток всередині нашого проекту. Дуже добре зберігати в усьому організованість з самого початку. Щоб створити додаток треба запустити наступну команду в консолі (з директорії `djangogirls`, де знаходиться файл `manage.py`): + + (myvenv) ~/djangogirls$ python manage.py startapp blog + +Ви побачите, що створено нову директорію `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 + +Після створення ми також повинні повідомити Django, що він має використовувати цей додаток. Ми робимо це у файлі `mysite/settings.py`. Нам треба знайти `INSTALLED_APPS` та додати рядок `'blog',` зверху над `)`. Таким чином, остаточний результат повинен мати наступний вигляд: + +```python +INSTALLED_APPS = ( + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', + 'blog', +) +``` + +### Створення моделі допису у блозі + +У файлі `blog/models.py` ми визначаємо всі об'єкти, що називаються моделі - `Models`. Це і є місце, де ми будемо визначати наш допис. + +Відкриємо `blog/models.py`, видалимо все звідси та запишемо наступний код: + +```python +from django.conf import settings +from django.db import models +from django.utils import timezone + + +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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title +``` + +> Двічі перевірте, чи ви використали два знаки підкреслення (`_`) з кожної сторони `str`. Ця домовленість часто використовується в Python й іноді ми називаємо її "dunder" (скорочення від англ. "double-underscore"). + +Страхіття якесь, правда ж? Але не хвилюйтесь, ми пояснимо, що означають ці рядки! + +Усі лінії, що починаються з `from` або `import` - це лінії, які додають деякі біти з інших файлів. Отже замість того, щоб копіювати і вставляти одне й те ж в кожному файлі,ми можемо включити деякі частини з `from ... import ...`. + +`class Post(models.Model):` - цей рядок визначає нашу модель (це об'єкт `object`). + +- `class` - це спеціальне ключове слово, яке показує що ми визначаємо об'єкт. +- `Post` - це ім'я нашої моделі. Ми можемо давати їй різні імена (але ми повинні уникати використання спеціальних символів та пробілів). Завжди починайте ім'я класу із великої літери. +- `models.Model` означає, що Post є Django моделлю, отже Django знає, що вона повинна бути збережена у базі даних. + +А зараз визначимо властивості, про які ми говорили перед цим: `title`, `text`, `created_date`, `published_date` і `author`. Щоб це зробити нам необхідно визначити тип поля (чи це текст? Число? Дата? Зв'язок із іншим об'єктом, наприклад, об'єкт користувач - User?). + +- `models.CharField` - для текстових полів з обмеженням кількісті символів. +- `models.TextField` - великі блоки тексту без обмежень. Ідеально підходить для запису блогу, правильно? +- `models.DateTimeField` - дата та час. +- `models.ForeignKey` - зв'язок із іншою моделлю. + +Не будемо пояснювати кожне слово в коді, оскільки це може зайняти надто багато часу. Якщо хочете дізнатися більше про поля моделей, а також як визначати речі відмінні від вище описаних, то дивіться документацію Django (https://docs.djangoproject.com/en/1.11/ref/models/fields/#field-types). + +А як щодо `def publish(self):`? Це і є наш метод `publish`, про який ми говорили раніше. `def` означає, що це функція/метод, а `publish` - ім'я методу. Ви можете змінити ім'я методу, якщо захочете. Правило іменування: треба використовувати рядкові букви, а пробіли замінювати підкресленнями. Наприклад, метод для розрахунку середньої ціни може бути названий `calculate_average_price`. + +Методи часто повертають (`return`) щось. Приклад цього можна побачити в методі `__str__`. У цьому сценарії, коли ми викликаємо `__str__()`, то отримуємо текст (**string**) із заголовком посту. + +Якщо вам щось незрозуміло з приводу моделей, не соромтеся запитувати у вашого тренера! Ми знаємо, що це дуже складно, особливо коли ви одночасно вивчаєте об'єкти і функції. Але сподіваємося наразі це виглядає трохи менш таємничим для вас! + +### Створення таблиць для моделей в базі даних + +Останній крок - додати нашу нову модель до нашої бази даних. Спочатку потрібно повідомити Django, що змінилась наша модель (ми щойно створили її!). Наберіть `python manage.py makemigrations blog`. Це буде виглядати так: + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + 0001_initial.py: + - Create model Post + +Django підготував для нас файл перенесення, який ми повинні тепер застосувати до нашої бази даних. Наберіть `python manage.py migrate blog`, на виході отримаємо: + + (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 + +Ура! Наша модель допису Post тепер знаходиться у нашій базі даних. Було б добре побачити її, правда ж? Для цього перейдемо до наступного розділу! diff --git a/uk/django_orm/README.md b/uk/django_orm/README.md new file mode 100755 index 00000000000..611ca099a54 --- /dev/null +++ b/uk/django_orm/README.md @@ -0,0 +1,145 @@ +# Django ORM і QuerySets + +У цьому розділі ви дізнаєтесь, як Django з'єднується із базою даних і зберігає в ній дані. Почнемо занурення! + + +## Що таке QuerySet? + +A QuerySet є, по суті, списком об'єктів заданої моделі Model. QuerySet дозволяє вам считувати дані з бази даних, а також фільтрувати і впорядковувати їх. + +Найпростіше показати на прикладі. Давайте спробуємо? + + +## Django shell + +Відкрийте свій локальний термінал (не PythonAnywhere) і наберіть цю команду: + + (myvenv) ~/djangogirls$ python manage.py shell + +Результатом повинно бути: + + (InteractiveConsole) + >>> + +Ви опинетесь в інтерактивній консолі Django. Це щось подібне на командний рядок Python, але має додаткову магію Django :). Звичайно, тут ви також можете використовувати усі команди Python. + + +### Усі об'єкти + +Давайте спробуємо спочатку вивести усі наші пости. Можна це зробити за допомогою наступної команди: + + >>> Post.objects.all() + Traceback (most recent call last): + File "", line 1, in + NameError: name 'Post' is not defined + +Ой! З'явилась помилка. Вона повідомляє нам, що немає ніяких постів. І це правильно, адже ми забули спочатку імпортувати їх! + + >>> from blog.models import Post + +Усе просто: імпортуємо модель `Post` з `blog.models`. Спробуємо вивести усі пости знову: + + >>> Post.objects.all() + , ]> + +Це список з дописів, з якими ми працювали раніше! Ми створили ці дописи через панель адміністратора Django. Проте, зараз ми хочемо створити нові дописи за допомогою Python, як ми цього доб'ємось? + + +### Створення об'єкту + +Мова йдеться про те, як створити об'єкт Post в базі даних: + + >>> Post.objects.create(author=me, title='Sample title', text='Test') + +Однак, ми пропустили один елемент : `me`. Потрібно передати екземпляр моделі `User` у якості автора. Як це зробити? + +Спочатку імпортуємо модель User: + + >>> from django.contrib.auth.models import User + +Які користувачі присутні в нашій базі даних? Спробуймо це: + + >>> User.objects.all() + ]> + +Це суперкористувач, якого ми створили раніше! Нам потрібен його екземпляр: + + me = User.objects.get(username='ola') + +Як бачимо, ми отримали користувача із іменем, що дорівнює 'ola'. Чудово! Звісно, ви мали б використовувати ваше ім'я. + +Тепер ми нарешті можемо створити наш пост: + + >>> Post.objects.create(author=me, title='Sample title', text='Test') + +Ура! Бажаєте перевірити, чи це працює? + + >>> Post.objects.all() + , , ]> + +Є, ще один допис в списку! + + +### Додайте більше постів + +А тепер можете трохи побавитися і пододавати більше постів, щоб побачити, як це працює. Додайте ще 2-3 поста і переходьте до наступної частини. + + +### Фільтрування об'єктів + +Великою частиною QuerySets є можливість фільтрувати запити до бази даних. Скажімо, ми хочемо відшукати усі пости, що мають автора ola. Будемо використовувати `filter` замість `all` в `Post.objects.all()`. В дужках ми вказуємо яким умовам повинен відповідати пост, щоб завершити наш запит до бази даних. У нашому випадку це автор `author`, що дорівнює `me`. В Django цю умову можна виразити як: `author=me`. Тепер наш шматок коду виглядає так: + + >>> Post.objects.filter(author=me) + , , , ]> + +Чи, можливо, ми хочемо побачити усі пости, що містять слово 'title' в полі `title`? + + >>> Post.objects.filter(title__contains='title') + , ]> + +> **Зауваження** Тут використано два знаки підкреслювання (`_`) між `title` і `contains`. Django ORM використовує цей синтаксис щоб відокремити імена полів ("title") і операції або фільтри ("contains"). Якщо ви раптом використаєте одне підкреслювання, то отримаєте помилку на кшталт "FieldError: Cannot resolve keyword title_contains". + +Ви також можете отримати список всіх опублікованих дописів. Ми робимо це шляхом фільтрації всіх дописів, які мають встановлене поле `published_date`: + >>> from django.utils import timezone + >>> Post.objects.filter(published_date__lte=timezone.now()) + [] + +На жаль, доданий з Python консолі допис ще не опублікований. Ми можемо змінити це! Спершу отримаємо екземпляр допису, який хочемо опублікувати: + + >>> post = Post.objects.get(title="Sample title") + +А далі опублікуємо його за допомогою нашого методу `publish`! + + >>> post.publish() + +Тепер спробуйте отримати список опублікованих дописів знову (натисніть стрілку вгору 3 рази, а потім `enter`): + + >>> Post.objects.filter(published_date__lte=timezone.now()) + ]> + + +### Впорядкування об'єктів + +QuerySets також дозволяє впорядковувати список об'єктів. Давайте спробуємо впорядкувати їх за параметром поля `created_date`: + + >>> Post.objects.order_by('created_date') + , , , ]> + +Також можна здійснити впорядкування у зворотньому напрямку, додавши `-` на початку: + + >>> Post.objects.order_by('-created_date') + , , , ]> + + +### З'єднання QuerySets + +QuerySets можна поєднувати, створюючи **ланцюжки**: + + >>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') + +Це дуже потужний механізм, що дозволяє вам писати дуже складні запити. + +Клас! Тепер ви готові до наступної частини! Щоб закрити командну оболонку, наберіть: + + >>> exit() + $ diff --git a/uk/django_start_project/README.md b/uk/django_start_project/README.md new file mode 100755 index 00000000000..087b4cdf8a8 --- /dev/null +++ b/uk/django_start_project/README.md @@ -0,0 +1,135 @@ +# Ваш перший Django проект! + +> Частина цього розділу базується на матеріалах Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +> Частина цього розділу базується на матеріалх [django-marcador tutorial](http://django-marcador.keimlink.de/) +ліцензованих Creative Commons Attribution-ShareAlike 4.0 International License. +Авторське право на навчальні матеріали django-marcador tutorial належить +Markus Zapke-Gründemann та ін. + +Ми збираємося створити простий блог! + +Перший крок - це почати новий проект Django. По суті, це означає що ми запустимо деякі скрипти, які надає Django, що створять для нас скелет Django проекту. Це просто кілька каталогів та файлів, якими ми користуватимемось пізніше. + +Імена деяких файлів і папок є дуже важливими для Django. Не можна перейменовувати файли, які ми зараз будемо створювати. Їх переміщення в різні місця також не є хорошою ідеєю. Для того щоб Django міг знаходити важливі речі, потрібно підтримувати задану архітектуру. + +> Пам'ятайте, що усе треба запускати у віртуальному середовищі. Якщо ви не бачите префікс `(myvenv)` в консолі, то потрібно активувати ваше віртуальне середовище. Ми пояснювали як це зробити у розділі __Встановлення Django__ в частині __Робота з віртуальним середовищем__. +Команда `myvenv\Scripts\activate` на Windows або `source myvenv/bin/activate` на Mac OS / Linux зробить це за вас. + +В терміналі Mac OS або Linux слід запустити наступну команду; **не забудьте додати крапку `.` в кінці**: + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + +У Windows; **не забудьте додати крапку `.` в кінці**: + + (myvenv) C:\Users\Name\djangogirls> django-admin startproject mysite . + +> Крапка `.` має ключове значення, оскільки вона означає "встанови Django в поточний каталог" (символ крапки `.` використовується, щоб не писати повний шлях) + +> **Примітка** Коли набираете команду вище, пам'ятайте, що потрібно друкувати тільки ту частину, яка починається з `django-admin` або `django-admin.py`. +Частини шляху `~/djangogirls$ (myvenv)` та `(myvenv) C:\Users\Name\djangogirls >`вказані тут лише +як приклад запрошення командного рядка до введення команд. + +`django-admin.py` - це скрипт, що створить для вас усі необхідні папки і файли. Наразі ви повинні мати структуру, котра виглядає наступним чином: + + djangogirls + ├───manage.py + └───mysite + settings.py + urls.py + wsgi.py + __init__.py + + +`manage.py` - скрипт, що допомагає керувати сайтом. З його допомогою ми зможемо запускати веб сервер без встановлення чогось іще додатково, серед іншого. + +Файл `settings.py` містить конфігурацію вашого веб сайту. + +Пам'ятаєте, коли ми розмовляли про листоношу, що перевіряє, куди треба доправити листа? Файл `urls.py` містить список шаблонів, що використовуються елементом `urlresolver`. + +Проігноруємо поки інші файли, адже ми не будемо їх змінювати. Єдина річ, яку варто пам'ятати - не видалити їх ненароком! + + +## Зміна налаштувань + +Здійснимо деякі зміни в `mysite/settings.py`. Відкриємо файл в текстовому редакторі, який ви мали встановити раніше. + +Було б непогано мати коректний час на нашому сайті. Перейдіть до [списку часових поясів на Вікіпедії](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) та скопіюйте відповідний часовий пояс (TZ). (напр. `Europe/Kiev`) + +У файлі settings.py знайдіть рядок, що містить `TIME_ZONE` і замініть його на ваш часовий пояс: + +```python +TIME_ZONE = 'Europe/Kiev' +``` + +Попередній рядок показує як обрати часовий пояс "Europe/Kiev" + + +Нам також необхідно додати шлях для статичних файлів (згодом із посібника ви дізнаетесь все про "статичні файли" та листи стилів (CSS)). Перейдіть *в кінець* файлу та додайте новий запис `STATIC_ROOT` одразу під словом `STATIC_URL`: + +```python +STATIC_URL = '/static/' +STATIC_ROOT = BASE_DIR / 'static' +``` + + +## Налаштування бази даних + +Існує безліч різноманітних програмних продуктів, що працюють із базами даних і можуть зберігати дані для вашого сайту. Ми будемо користуватися таким, що вказаний за замовчуванням - `sqlite3`. + +Відповідні налаштування вже прописані у файлі `mysite/settings.py`: + +```python +DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } +} +``` + +Щоб створити базу даних для нашого блогу, давайте запустимо наступне в консолі: `python manage.py migrate` (ми повинні знаходитися всередині директорії `djangogirls`, яка містить файл `manage.py`). Якщо все пройшло успішно, ви маєте побачити щось на кшталт: + + (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 + +Ми це зробили! Час запустити веб сервер і перевірити чи працює наш сайт! + +Ви повинні знаходитися в папці, що містить файл `manage.py` (папка `djangogirls`). В консолі ми можемо активувати веб сервер запустивши `python manage.py runserver`: + + (myvenv) ~/djangogirls$ python manage.py runserver + +Якщо ви використовуєте Windows і бачите помилку `UnicodeDecodeError` слід виконати наступну команду: + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +А зараз ви повинні перевірити, чи запущений ваш веб-сайт. Відкрийте браузер (Firefox, Chrome, Safari, Internet Explorer або будь-який інший) і введіть адресу: + + http://127.0.0.1:8000/ + +Веб-сервер забирає на себе керування командним рядком, доки ви його не зупините. Моб мати можливість виконувати нові команди, поки працює веб-сервер, відкрийте нове вікно командного рядка (терміналу) та активуйте ваш virtualenv. Щоб зупинити веб-сервер, переключіться назад до вікна, в якому він працює і використайте сполучення клавіш CTRL + C (натисніть клавіші разом) (на Windows, можливо, доведеться натиснути клавіші Ctrl + Break). + +Вітаємо! Ви щойно створили свій перший веб-сайт та запустили його на веб-сервері! Хіба ж це не круто? + +![Працює!](images/it_worked2.png) + +Готові до наступного кроку? Час додати трішки контенту! diff --git a/uk/django_start_project/images/it_worked2.png b/uk/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/uk/django_start_project/images/it_worked2.png differ diff --git a/uk/django_templates/README.md b/uk/django_templates/README.md new file mode 100755 index 00000000000..aaa7ba667e3 --- /dev/null +++ b/uk/django_templates/README.md @@ -0,0 +1,96 @@ +# Django шаблони + +Час вивести деякі дані! Django надає нам певні допоміжні, вбудовані __шаблонні теги__ для цього. + +## Що таке шаблонні теги? + +Як бачите, в HTML, ви не можете помістити Python код, тому що браузери не зрозуміють його. Вони знають лише HTML. Ми знаємо, що HTML більшою мірою є статичною, в той час як Python є більш динамічною мовою. + +__Шаблонні теги Django__ дозволяють нам передавати Python-подібні речі в HTML, таким чином можна розробляти динамічні веб-сайти швидше і простіше. Ой! + +## Шаблон для виведення списку постів + +В попередньому розділі ми надали нашому шаблону список постів у змінній `posts`. А тепер відобразимо це в HTML. + +Щоб надрукувати змінну в Django шаблоні, ми використовуємо подвійні фігурні дужки з іменем змінної всередині: + +```html +{{ posts }} +``` + +Спробуйте це в шаблоні `blog/templates/blog/post_list.html`. Починаючи з другого `
` до третього `
` замініть все на `{{ posts }}`. Збережіть файл і оновіть сторінку, щоб побачити результат: + +![Рисунок 13.1](images/step1.png) + +Як можна побачити, все що ми отримали, це: + + , ]> + +Означає, що Django розуміє це як список об'єктів. Пам'ятаєте із розділу __Вступ до Python__ як ми можемо виводити списки? Звичайно, за допомогою циклу __for__! У Django шаблонах ви можете створити їх наступним чином: + +```html +{% for post in posts %} + {{ post }} +{% endfor %} +``` + +Спробуйте це у вашому шаблоні. + +![Рисунок 13.2](images/step2.png) + +Працює! Однак, бажано, щоб вони були виведені як статичні пости, які ми створили раніше у розділі __Вступ до HTML__. Ви можете компонувати теги HTML і шаблонні теги. Наша частина `body` буде виглядати так: + +```html + + +{% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +{% raw %}Все, що ви напишете між `{% for %}` та `{% endfor %}` повторюватиметься для кожного об'єкта у списку. Оновіть сторінку:{% endraw %} + +![Рисунок 13.3](images/step3.png) + +Чи помітили ви, що цього разу ми використали трохи відмінні позначення `{{ post.title }}` або `{{ post.text }}`? Ми маємо доступ до даних, що містяться в кожному полі, визначеному в нашій моделі `Post`. Також `|linebreaksbr` перенаправляє текст посту через фільтр щоб конвертувати розриви ліній в абзаци. + + +## Ще одне + +Було б непогано побачити як ваш сайт буде працювати в інтернеті, так? Давайте спробуєм розгорнути його в PythonAnywhere знову. Ось наступні кроки... + +* По-перше, залийте ваш код на GitHub + +``` +$ git status +[...] +$ git add --all . +$ git status +[...] +$ git commit -m "Modified templates to display posts from database." +[...] +$ git push +``` + +* Потім, увійдіть до [PythonAnywhere](https://www.pythonanywhere.com/consoles/) та перейдіть до **Bash консолі** (або запустіть нову) і виконайте команди: + +``` +$ cd my-first-blog +$ git pull +[...] +``` + +* Нарешті, перейдіть на вкладку [Web](https://www.pythonanywhere.com/web_app_setup/) і натисніть **Reload** (перезавантажити) у веб-додатку. + + +Вітаємо! А тепер спробуйте додати новий пост у вашому Django адміністраторі (не забудьте додати published_date!), потім перезавантажте сторінку, щоб переконатись, чи з'явився новий пост. + +Все працює, як годинник? Ми пишаємося! Відійдіть ненадовго від комп'ютера, ви заслуговуєте на перерву. :) + +![Рисунок 13.4](images/donut.png) diff --git a/uk/django_templates/images/donut.png b/uk/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/uk/django_templates/images/donut.png differ diff --git a/uk/django_templates/images/step1.png b/uk/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/uk/django_templates/images/step1.png differ diff --git a/uk/django_templates/images/step2.png b/uk/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/uk/django_templates/images/step2.png differ diff --git a/uk/django_templates/images/step3.png b/uk/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/uk/django_templates/images/step3.png differ diff --git a/uk/django_urls/README.md b/uk/django_urls/README.md new file mode 100755 index 00000000000..9054f9e351b --- /dev/null +++ b/uk/django_urls/README.md @@ -0,0 +1,122 @@ +# Django url + +Ми збираємося побудувати нашу першу веб-сторінку - домашню сторінку для вашого блогу! Але спочатку, давайте трохи дізнаємось про Django URL-адреси. + +## Що таке URL? + +URL - це просто веб-адреса. Відображається URL кожен раз, коли ви відвідуєте веб-сайт - це видно в адресному рядку браузера (так! `127.0.0.1:8000` - це URL! І `https://djangogirls.org` також є URL): + +![Url](images/url.png) + +Кожна сторінка в Інтернеті потребує свого власного URL. Таким чином ваш додаток знає, що треба показувати користувачу, який відкриває URL. В Django використовується така річ, яка називається `URLconf` (URL конфігурація). URLconf являє собою набір шаблонів, які Django намагатиметься зіставити з отриманих URL, щоб знайти правильне відображення. + +## Як працює URL в Django? + +Давайте відкриємо файл `mysite/urls.py` в редакторі коду і подивимось, як він виглядає: + +```python +from django.conf.urls import include, url +from django.contrib import admin + +urlpatterns = [ + # Examples: + # url(r'^$', 'mysite.views.home', name='home'), + # url(r'^blog/', include('blog.urls')), + + url(r'^admin/', include(admin.site.urls)), +] +``` + +Як бачите, Django вже щось записав сюди для нас. + +Рядки, що починаються з `#` - це коментарі, тобто ці рядки не будуть запускатися Python. Досить зручно, чи не так? + +URL панелі адміністратора, котрий ви відвідували у попередньому розділі вже є тут: + +```python + url(r'^admin/', include(admin.site.urls)), +``` + +Це означає, що для кожного URL, що починається з `admin/` Django знаходитиме відповідне відображення - *view*. У даному випадку ми включаємо багато адміністраторських URL, отже не все запаковується в цей маленький файл, що є більш читабельним і акуратнішим. + +## Regex + +Хіба вам не цікаво, яким чином Django створює відповідності між URL і відображеннями? Гаразд, ця частина досить хитра. Django використовує `regex`, що є скороченням від "regular expressions" (регулярні вирази). Regex має багато (багато!) правил, що формують шаблон пошуку. Оскільки регулярні вирази є продвинутою темою, ми не будемо вникати в деталі їх роботи. + +Якщо ви все ще хочете зрозуміти, як ми створили шаблони, ось приклад процесу - нам потрібно буде тільки обмежена підмножина правил для того, щоб виразити потрібний шаблон, а саме: + + ^ для початку тексту + $ для кінця тексту + \d для цифри + + щоб позначити, що попередній символ має бути повторений мінімум один раз + () для захоплення частини шаблону + +Все інше у визначенні url буде прийматися як є. + +Тепер уявіть, що у вас є сайт з такою адресою: `http://www.mysite.com/post/12345/`, де `12345` - це номер вашого посту. + +Написання окремих відображень для усіх номерів постів було б дійсно нестерпним. За допомогою регулярних виразів ми можемо створити шаблон, який відповідає url і витягти номер для нас: `^post/(\d+)/$`. Давайте розберемо його по частинах, щоб побачити, що ми тут робимо: + +* **^post/** говорить Django взяти що-небудь, що має `post/` на початку url (зразу після `^`) +* **(\d+)** означає, що буде число (одне або декілька цифр), і ми хочемо, щоб число захопилось і вибралось +* **/** вказує Django, що наступним символом має бути `/` +* **$** далі позначає кінець URL-адреси, а це означає, що під шаблон підходять лише ті рядки, які закінчуються на `/` + + +## Ваш перший Django url! + +Час створити наш перший URL! Ми хочемо, щоб 'http://127.0.0.1:8000/' був домашньою сторінкою нашого блогу і виводив список постів. + +Також ми б хотіли підтримувати порядок у файлі `mysite/urls.py`, отже імпортуємо url з нашого додатку `blog` у файл `mysite/urls.py`. + +Вперед, видаліть закоментовані рядки (рядки, що починаються з `#`) та додайте рядок, що імпортує `blog.urls` до головного url (`''`). + +Ваш файл `mysite/urls.py` повинен наразі мати такий вигляд: + +```python +from django.conf.urls import include, url +from django.contrib import admin + +urlpatterns = [ + url(r'^admin/', include(admin.site.urls)), + url(r'', include('blog.urls')), +] +``` + +Django тепер перенаправлятиме усе, що надходить на 'http://127.0.0.1:8000/' до `blog.urls` і шукатиме там подальші інструкції. + +Для запису регулярних виразів у Python використовується символ `r` перед стрічкою. Це підказка для інтерпретатора, що рядок може містити спеціальні символи, які використовуються в регулярних виразах. + + +## blog.urls + +Створіть новий порожній файл `blog/urls.py`. Добре! Додайте наступні перші два рядки: + +```python +from django.conf.urls import url +from . import views +``` + +Тут ми лише імпортуємо методи Django і всі наші відображення з додатку `blog` (у нас ще немає жодного, але ми повернемося до цього через хвилину!) + +Після цього, ми можемо додати наш перший URL шаблон: + +```python +urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), +] +``` + +Як бачите, ми присвоюємо відображення із назвою `post_list` значенню URL `^$`. Цей регулярний вираз буде перевіряти рядок на `^` (початок рядка) та `$` (кінець) - тому тільки порожній рядок буде відповідати цим вимогам. Це правильно, тому що в механізмі Django URL, вираз ' http://127.0.0.1:8000 /' не є частиною URL-адреси. Цей шаблон показуватиме для Django, що `views.post_list` є правильним місцем для переходу, якщо хтось введе ваш сайт за адресою 'http://127.0.0.1:8000/'. + +На останок, `name='post_list'` - це назва URL, який використовуватиметься для ідентифікації потрібного відображення (в'ю). Це може бути ім'ям потрібного нам відображення (в'ю), або взагалі чимось іншим. Ми буде використовувати іменовані URL-адреси, протягом всього проекту, тому важливо, давати ім'я кожному URL у застосунку. Ми також повинні намагатися давати URL-адресам якомога простіші та унікальні імена, і так, щоб їх було легко запам'ятати. + +Усе гаразд? Відкрийте http://127.0.0.1:8000/ у браузері, щоб побачити результат. + +![Error](images/error1.png) + +Що, тут більше немає повідомлення "It works"? Не хвилюйтесь, це просто сторінка із помилкою, нічого боятися! Вони є насправді дуже корисними: + +Можете прочитати тут: __no attribute 'post_list'__. Чи *post_list* не нагадує вам про щось? Це назва нашого відображення! Це означає, що все знаходиться на місці, але ми просто ще не створили наше *відображення*. Не переймайтесь, ми його отримаємо. + +> Якщо бажаєте дізнатися більше про Django URLconf, зверніться до офіційної документації: https://docs.djangoproject.com/en/1.11/topics/http/urls/ diff --git a/uk/django_urls/images/error1.png b/uk/django_urls/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/uk/django_urls/images/error1.png differ diff --git a/uk/django_urls/images/url.png b/uk/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/uk/django_urls/images/url.png differ diff --git a/uk/django_views/README.md b/uk/django_views/README.md new file mode 100755 index 00000000000..6659604e69b --- /dev/null +++ b/uk/django_views/README.md @@ -0,0 +1,37 @@ +# Django відображення - час творити! + +Час позбутися помилки, створеної в попередньому розділі :) + +Відображення - *view* - це місце, в якому ми закладаємо "логіку" нашої програми. Воно запитує інформацію з `моделі`, яку ми створили раніше і передає його до `шаблону`. Ми створимо шаблон в наступному розділі. Відображення - це просто методи Python, трохи складніші за ті, які ми робили у розділі __Вступ до Python__. + +Відображення розташовані у файлі `views.py`. Додамо наші відображення до файлу `blog/views.py`. + +## blog/views.py + +OK, давайте відкриємо цей файл і подивимось що тут: + +```python +from django.shortcuts import render + +# Create your views here. +``` + +Не так багато поки що. Найпростіший вид може бути таким. + +```python +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + + +Як бачимо, ми створили метод (`def`) із назвою `post_list`, що приймає як аргумент запит - `request` і повертає метод `render`, що активує (компілює) наш шаблон `blog/post_list.html`. + +Збережіть файл, перейдіть до http://127.0.0.1:8000/ і подивіться, що ми отримали. + +Інша помилка! Прочитайте у чому цього разу справа: + +![Error](images/error.png) + +Цього разу усе просто: *TemplateDoesNotExist*.Виправимо це і створимо шаблон в наступному розділі! + +> Дізнатися більше про Django відображення можна, звернувшись до офіційної документації: https://docs.djangoproject.com/en/1.11/topics/http/views/ diff --git a/uk/django_views/images/error.png b/uk/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/uk/django_views/images/error.png differ diff --git a/uk/dynamic_data_in_templates/README.md b/uk/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..8f0daf06845 --- /dev/null +++ b/uk/dynamic_data_in_templates/README.md @@ -0,0 +1,71 @@ +# Динамічні дані в шаблонах + +Маємо різні шматочки на своїх місцях: модель `Post` визначено в `models.py`, маємо `post_list` у `views.py`, а також відповідний шаблон. Однак, яким чином ми змусимо наші пости з'явитися в HTML шаблоні? Оскільки це те, чого ми хочемо: взяти деякий контент (моделі збережені в базі даних) і вивести його в гарному вигляді на нашому шаблоні, правда ж? + +Це саме те, що покликані робити відображення: з'єднаємо моделі і шаблони. В нашому відображенні `post_list` нам потрібно взяти моделі, які ми хочемо зобразити, і передати їх до шаблону. Отже, в основному, у секції відображення - *view* ми вирішуємо що (модель) буде виведено в шаблоні. + +Добре, отже як ми цього досягнемо? + +Нам треба відкрити наш `blog/views.py`. Таким чином, відображення `post_list` виглядає на кшталт: + +```python +from django.shortcuts import render + +def post_list(request): + return render(request, 'blog/post_list.html', {}) +``` + +Пам'ятаєте, як ми говорили про включення коду написаного в різних файлах? Тепер настав момент, коли ми повинні включити модель написану в `models.py`. Додаймо рядок `from .models import Post`: + +```python +from django.shortcuts import render +from .models import Post +``` + +Крапка після `from` означає *поточна директорія* або *поточний додаток*. Оскільки `views.py` і `models.py` розташовані в одній і тій же папці, можемо просто використовувати `.` і ім'я файлу (без `.py`). Далі імпортуємо ім'я моделі (`Post`). + +А що далі? Щоб вилучити реальні пости з моделі `Post`, нам потрібна певна річ, що називається `QuerySet`. + +## QuerySet + +Ви маєте вже бути ознайомлені із роботою QuerySets. Ми говорили про це у розділі [Django ORM (QuerySets)](../django_orm/README.md). + +Отже, наразі ми зацікавлені у списку опублікованих і відсортованих за параметром `published_date` блог постів, чи не так? Ми вже робили це у розділі QuerySets! + + Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') + +А тепер вставимо цей шматок коду у файл `blog/views.py` додавши його до функції `def post_list(request)`: + +```python +from django.shortcuts import render +from django.utils import timezone +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', {}) +``` + +Зазначте, будь ласка, що ми створюємо *змінну* для нашого QuerySet: `posts`. Сприймайте її як ім'я для QuerySet. З цього моменту ми можемо посилатися на неї через це ім'я. + +Крім того, код використовує функцію `timezone.now()`, а значить, ми повинні імпортувати `timezone`. + +Остання пропущена частина - передача QuerySet `posts` шаблону (розглянемо, як це вивести в наступному розділі). + +У функції `render` ми вже маємо параметр `request` (тобто усе, що ми отримуємо від користувача через Інтернет) і файл шаблону `'blog/post_list.html'`. Останній параметр, котрий виглядає як: `{}` - це місце, в якому ми можемо додавати певні речі для використання у шаблоні. Ми повинні дати їм імена (ми обмежились ім'ям `'posts'` наразі :)). Це має виглядати як: `{'posts': posts}`. Прохання звернути увагу, що частина перед `:` є рядком; вам необхідно взяти це у лапки `''`. + +Отже, врешті-решт наш файл `blog/views.py` матиме наступний вигляд: + +```python +from django.shortcuts import render +from django.utils import timezone +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}) +``` + +Це все! Час повернутись назад до нашого шаблону і вивести QuerySet! + +Якщо бажаєте дізнатись трохи більше про QuerySets в Django, зазирніть сюди: https://docs.djangoproject.com/en/1.11/ref/models/querysets/ diff --git a/uk/extend_your_application/README.md b/uk/extend_your_application/README.md new file mode 100755 index 00000000000..189c257df11 --- /dev/null +++ b/uk/extend_your_application/README.md @@ -0,0 +1,177 @@ +# Розширте свою програму + +Ми вже завершили усі кроки, необхідні для створення нашого сайту: знаємо як написати модель, url, відображення та шаблон. А також знаємо про те, як зробити наш сайт гарнішим. + +Час попрактикуватись! + +Перша потрібна для нашого блогу річ це, очевидно, сторінка для відображення одного посту, чи не так? + +У нас вже є модель `Post`, отже? не треба нічого додавати до `models.py`. + +## Створюємо в шаблоні посилання на сторінку посту + +Почнемо із додавання посилання в `blog/templates/blog/post_list.html`. Таким чином, матимемо: +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} + +``` + +{% raw %}Ми хочемо, щоб в списку постів заголовок посилався на сторінку детальної інформації про пост. Давайте змінимо `

{{ post.title }}

` так, щоб вийшло посилання на пост:{% endraw %} + +```html +

{{ post.title }}

+``` + +{% raw %}Саме час пояснити цей дивний запис `{% url 'post_detail' pk=post.pk %}`. Як можна було очікувати, `{% %}` означає, що ми використовуємо шаблонні теги Django. Цього разу ми використаєм один з них, який створить URL для нас!{% endraw %} + +`blog.views.post_detail` - це шлях до відображення `post_detail`, яке ми бажаємо створити. Зауважте, будь ласка, що: `blog` - це ім'я нашого додатку (папка `blog`), `views` взято з імені файлу `views.py` і остання частина - `post_detail` - це ім'я відображення. + +Тепер, коли перейдемо на: http://127.0.0.1:8000/, отримаємо помилку (як і очікувалось, оскільки у нас немає URL або потрібного *вигляду* (в'ю) для `post_detail`). Він буде виглядати наступним чином: + +![NoReverseMatch error](images/no_reverse_match2.png) + +## Створюєм адресу URL для деталей запису + +Давайте створимо URL в `urls.py` для нашого відображення `post_detail`! + +Ми хочемо, щоб наш перший пост був доступний за такою **URL-адресою**: http://127.0.0.1:8000/post/1/ + +У файлі `blog/urls.py` вкажемо Django, де взяти відображення для запису блогу, яке називається `post_detail`. Додамо рядок `url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'),`у файл `blog/urls.py`. Це має виглядати якось так: + +```python +from django.conf.urls import url +from . import views + +urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), + url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'), +] +``` + +Ця частина `^post/(?P[0-9]+)/$` виглядає страшно, але не хвилюйтеся - зараз ми все пояснимо: +- вона починається з `^` - цей символ означає "початок", +- далі `post/` означає, що після початку, URL-адреса має містити слова **post** та **/**. Все йде добре. +- `(?P[0-9]+)` - ця частина хитріша. Вона означає, що Django візьме усе, що ви тут розмістите і передасть це до відображення як змінну із ім'ям `pk`. `[0-9]` також повідомляє нам про те, що це може бути лише цифрою, а не літерою (будь-яке значення між 0 та 9). `+` означає, що тут має бути один або більше символів. Таким чином, щось на зразок `http://127.0.0.1:8000/post//` є неприйнятним, однак `http://127.0.0.1:8000/post/1234567890/` цілком! +- `/` - далі нам потрібно знову __/__ +- `$` - "кінець"! + +Це означає, що якщо введете `http://127.0.0.1:8000/post/5/`, Django зрозуміє, що ви шукаєте відображення із назвою `post_detail` і передає цьому відображенню інформацію, що `pk` дорівнює `5`. + +`pk` - скорочення для первинного ключа - `primary key`. Це ім'я часто використовується в Django проектах. Однак, можете назвати вашу змінну як вам до вподоби (пам'ятайте: маленькі літери і `_` замість пробілів!). Наприклад, замість `(?P[0-9]+)` можемо мати змінну `post_id`, і, таким чином, ця частина буде виглядати як: `(?P[0-9]+)`. + +Добре, ми додали новий шаблон URL для `blog/urls.py`! Давайте перезавантажимо сторінку: http://127.0.0.1:8000/ Опаньки! Знову помилка! Як ми і очікували. + +![AttributeError](images/attribute_error2.png) + +Пам'ятаєте наступний крок? Звісно: треба додати відображення! + +## Додамо деталі для відображення запису + +Цього разу наше відображення отримує додатковий параметр - `pk`. Наше відображення має вилучити його, правда ж? Отже, визначимо нашу функцію як `def post_detail(request, pk):`. Зауважте, що треба використовувати точно таке ж ім'я, як ми визначили в urls (`pk`). Неправильно нехтувати цією змінною, це призведе до помилки! + +А тепер, ми хотіли б додати один-єдиний пост. Щоб зробити, це можемо скористатися наступним запитом до бази даних: + + Post.objects.get(pk=pk) + +Однак, цей код містить проблеми. Якщо немає жодного поста із заданим первинним ключем (`pk`), ми отримаємо мегажахливу помилку! + +![DoesNotExist error](images/does_not_exist2.png) + +Ми цього не хочемо! Звичайно, Django надає деякі інструменти, що будуть обробляти це для нас: `get_object_or_404`. У випадку, якщо немає постів із заданим `pk`, виведеться більш приємна сторінка (так звана сторінка `Page Not Found 404`). + +![Page not found](images/404_2.png) + +Хороші новини полягають в тому, що можна створити свою власну сторінку `Page not found` і зробити її настільки гарною, наскільки ви захочете. Однак, це не є надто важливим на даний момент, тому пропустимо цей крок. + +Добре, час додати відображення у наш файл `views.py`! + +Нам треба відкрити `blog/views.py` і додати наступний код: + + from django.shortcuts import render, get_object_or_404 + +Поряд із іншими рядками `from`. А в кінці файлу додамо наше відображення: + + def post_detail(request, pk): + post = get_object_or_404(Post, pk=pk) + return render(request, 'blog/post_detail.html', {'post': post}) + +Так. Прийшла пора оновити сторінку: http://127.0.0.1:8000 / + +![Post list view](images/post_list2.png) + +Спрацювало! Але що ж трапиться, коли ви натиснете на посилання в заголовку поста? + +![TemplateDoesNotExist error](images/template_does_not_exist2.png) + +О, ні! Інша помилка! Але ж ми вже знаємо, як із цим поводитись, чи не так? Потрібно додати шаблон! + +## Створюємо шаблон для деталей запису + +Створимо файл в `blog/templates/blog` і назвемо його `post_detail.html`. + +Це буде виглядати так: + +```html +{% extends 'blog/base.html' %} + +{% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endblock %} +``` + +Знову розширюємо `base.html`. Всередині блоку `content` ми хотіли б відобразити такі параметри як: published_date (якщо існує), title і text. Але мусимо обговорити певні важливі речі, правда ж? + +{% raw %}`{% if ... %} ... {% endif %}` - це шаблонний тег, який можна використовувати, коли ми бажаємо перевірити дещо (пам'ятаєте `if ... else ..` з розділу __Вступ до Python__?). У цьому випадку ми хочемо перевірити, чи дата запису `published_date` не порожня.{% endraw %} + +Окей, можемо перезавантажити нашу сторінку і побачити, чи повідомлення `Page not found` тепер зникло. + +![Post detail page](images/post_detail2.png) + +Йой! Працює! + +## Ще одне: розгортання! + +Було б добре переконатись, що ваш сайт буде працювати на PythonAnywhere, вірно? Спробуймо зробити розгортання ще раз. + +``` +$ 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 +``` + +* Тоді в [Bash консолі PythonAnywhere](https://www.pythonanywhere.com/consoles/): + +``` +$ cd my-first-blog +$ source myvenv/bin/activate +(myvenv)$ git pull +[...] +(myvenv)$ python manage.py collectstatic +[...] +``` + +* Нарешті, перейдіть на [вкладку Web](https://www.pythonanywhere.com/web_app_setup/) і натисніть **Reload**. + +І це все! Вітання :) diff --git a/uk/extend_your_application/images/404_2.png b/uk/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/uk/extend_your_application/images/404_2.png differ diff --git a/uk/extend_your_application/images/attribute_error2.png b/uk/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..33a3b36b1d3 Binary files /dev/null and b/uk/extend_your_application/images/attribute_error2.png differ diff --git a/uk/extend_your_application/images/does_not_exist2.png b/uk/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/uk/extend_your_application/images/does_not_exist2.png differ diff --git a/uk/extend_your_application/images/no_reverse_match2.png b/uk/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/uk/extend_your_application/images/no_reverse_match2.png differ diff --git a/uk/extend_your_application/images/post_detail2.png b/uk/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/uk/extend_your_application/images/post_detail2.png differ diff --git a/uk/extend_your_application/images/post_list2.png b/uk/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/uk/extend_your_application/images/post_list2.png differ diff --git a/uk/extend_your_application/images/template_does_not_exist2.png b/uk/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/uk/extend_your_application/images/template_does_not_exist2.png differ diff --git a/uk/how_the_internet_works/README.md b/uk/how_the_internet_works/README.md new file mode 100644 index 00000000000..61cc68f8363 --- /dev/null +++ b/uk/how_the_internet_works/README.md @@ -0,0 +1,48 @@ +# Як працює Інтернет + +> На створення цього розділу нас надихнула розмова "Як працює Інтернет" Джесіки Маккеллар (http://web.mit.edu/jesstess/www/). + +Б'ємось об заклад, ви використовуєте Інтернет кожного дня. Однак, чи знаєте ви насправді, що трапляється, коли ви набираєте адресу на зразок https://djangogirls.org у браузері та натискаєте `enter`? + +Перша річ, яку вам необхідно зрозуміти - це те, що веб-сайт є лише набором файлів на жорсткому диску. Просто як фільми, музика або зображення. +Проте, є одна унікальна річ для веб-сайтів: вони містять комп'ютерний код, що називається HTML. + +Якщо ви не знайомі із програмуванням, спочатку може бути складно зрозуміти, що таке HTML, але веб-браузери (такі як Chrome, Safari, Firefox тощо) його люблять. +Веб-браузери розроблені спеціально, щоб розуміти цей код, виконувати його інструкції та показувати файли, з якого складається ваш сайт, саме так, як ви того забажаєте. + +Як і звичайні файли, нам потрібно зберігати HTML-файли в певному місці на жорсткому диску. В Інтернеті ми використовуємо спеціальні потужні комп'ютери, що називаються *серверами*. +Вони не мають екрану, мишки чи клавіатури, тому що їхня основна ціль - зберігати і обробляти дані. Саме тому ці комп'ютери назвали *серверами*, вони обробляють (англ. to *serve* - обробляти) ваші дані. + +Гаразд, але ж ви хочете дізнатися як виглядає Інтернет, чи не так? + +Ми намалювали для вас картинку! Вона виглядає наступним чином: + +![Рисунок 1.1](images/internet_1.png) + +Суцільний безлад, правильно? Фактично, це мережа з'єднаних машин (вище зазначених *серверів*). Сотні тисяч машин! Багато-багато кілометрів кабелю по усьому світу! Можете відвідати веб-сайт Submarine Cable Map (http://submarinecablemap.com/), щоб побачити, наскільки складною є мережа. Тут наведено знімок з веб-сайту: + +![Рисунок 1.2](images/internet_3.png) + +Вражаюче, чи не так? Але однозначно, неможливо мати проводи між кожною машиною, підключеною до Інтернету. Отже, щоб досягти машини (наприклад, ту на якій збережено https://djangogirls.org), ми повинні передати запит через багато-багато різних машин. + +Це виглядатиме так: + +![Рисунок 1.3](images/internet_2.png) + +Уявіть, що коли ви набираєте https://djangogirls.org, ви відправляєте листа, що говорить: "Шановні Django Girls, я хочу побачити веб-сайт djangogirls.org. Відправте мені його, будь ласка!" + +Ваш лист надійде до найближчого поштового віділення. Далі він надходить до іншого, що знаходиться трохи ближче до вашого адресата, далі до іншого і так далі, поки не буде досягнуто остаточного пункту призначення. Єдина відмінність в тому, що при відправці багатьох листів (*пакетів даних*) в однакове місце, кожен з них може піти через абсолютно різні поштові відділення (*маршрутизатори*). Це залежить від того, як їх розподілили в кожному відділенні. + +![Рисунок 1.4](images/internet_4.png) + +Так, це так само просто. Ви відправляєте повідомлення і очікуєте певної відповіді. Звісно, замість паперу і ручки ви використовуєте байти даних, але ідея та сама! + +Замість адрес із назвами вулиці, міста, індексом і назвою країни, ми використовуємо IP адреси. Ваш комп'ютер спочатку запитує про DNS (англ. Domain Name System - система доменних імен) для переводу djangogirls.org в IP-адресу. Це працює подібно до старомодних телефонних довідників, де ви могли б знайти ім'я особи, з якою бажаєте зв'язатися і знайти її номер телефону та адресу. + +Коли ви відправляєте листа, це потребує наявності певних речей для коректної доставки: адреса, штамп тощо. Також ви використовуєте мову, котру розуміє отримувач, правда ж? Те ж саме стосується і *пакетів даних*, які ви відправляєте, щоб побачити веб-сайт. Ми використовуємо протокол, який називається HTTP (англ. Hypertext Transfer Protocol, протокол передачі гіпер-текстових документів). + +Отже, по суті, коли у вас є веб-сайт, вам треба мати *сервер* (машину), де він житиме. Коли *сервер* отримує вхідний *запит* (в листі), він відправляє назад ваш веб-сайт (в іншому листі). + +Оскільки ви читаєте навчальний посібник з Django, ви запитаєте, що ж робить Django. Коли ви відправляєте відповідь, то не завжди бажаєте відправляти одне й те саме кожному. Набагато краще, якщо ваші листи є персоналізованими, особливо для осіб, які щойно вам написали, еге ж? Django допомагає вам зі створенням цих персоналізованих цікавих листів :). + +Досить розмов, час творити! diff --git a/uk/how_the_internet_works/images/internet_1.png b/uk/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/uk/how_the_internet_works/images/internet_1.png differ diff --git a/uk/how_the_internet_works/images/internet_2.png b/uk/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/uk/how_the_internet_works/images/internet_2.png differ diff --git a/uk/how_the_internet_works/images/internet_3.png b/uk/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/uk/how_the_internet_works/images/internet_3.png differ diff --git a/uk/how_the_internet_works/images/internet_4.png b/uk/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/uk/how_the_internet_works/images/internet_4.png differ diff --git a/uk/html/README.md b/uk/html/README.md new file mode 100644 index 00000000000..ab871101e16 --- /dev/null +++ b/uk/html/README.md @@ -0,0 +1,194 @@ +# Вступ до HTML + +Ви можете запитати, що таке шаблон? + +Шаблон - це файл, який ми можемо повторно використовувати для представлення різноманітної інформації в послідовному форматі. Наприклад, ви можете використовувати шаблон для допомоги у написанні листа, бо, хоча кожен лист може містити різне повідомлення та бути адресованим різним особам, усі листи поширюватимуться у однаковому форматі. + +Формат Django шаблону описаний мовою, що називається HTML (це HTML, зазначений у першому розділі **Як працює Інтернет**). + +## Що таке HTML? + +HTML - це простий код, що інтерпретується вашим веб браузером (таким як Chrome, Firefox чи Safari) для відображення веб сторінки для користувача. + +HTML розшифровується як "Мова розмітки гіпертексту". __Гіпертекст__ означає тип тексту, який підтримує гіперпосилання між сторінками. __Розмітка__ (англ. markup) означає, що ми отримали документ із розміченим кодом для того, щоб повідомити комусь (у даному випадку, браузеру) як треба інтерпретувати сторінку. HTML код побудований за допомогою __тегів__, кожен з яких починається із `<` і закінчується на `>`. Теги представляють __елементи розмітки__. + +## Ваш перший шаблон! + +Під створенням шаблону мається на увазі створення файлу шаблону. Будь-що є файлом, чи не так? Ви, напевно, це вже зауважили. + +Шаблони зберігаються в папці `blog/templates/blog`. Отже, спершу створіть папку із назвою `templates` всередині вашої папки blog. Далі створіть іншу папку із назвою `blog` всередині вашої папки templates: + + blog + └───templates + └───blog + +(Вас може здивувати, для чого нам потрібно дві папки із однаковим ім'ям `blog` - як виявиться пізніше, це всього лише зручне узгодженість із найменування, котра спрощує життя, коли речі починають ускладнюватися.) + +А тепер створіть файл `post_list.html` (просто залиште його поки що порожнім) всередині папки `blog/templates/blog`. + +Погляньте, як тепер виглядає ваш веб сайт: http://127.0.0.1:8000/ + +> Якщо помилка `TemplateDoesNotExists` досі не зникла, спробуйте перезапустити ваш сервер. Перейдіть до командного рядка, зупиніть сервер, натиснувши Ctrl+C (клавіші Control і C разом) та активуйте його знову, запустивши команду `python manage.py runserver`. + +![Рисунок 11.1](images/step1.png) + +Більше ніяких помилок! Вітання :) Однак, ваш сайт насправді не публікує нічого, окрім пустої сторінки, оскільки ваш шаблон також пустий. Ми маємо це виправити. + +Додайте наступне у ваш файл шаблону: + +```html + +

Hi there!

+

It works!

+ +``` + +То як тепер виглядає ваш веб-сайт? Натисніть, щоб з'ясувати: http://127.0.0.1:8000/ + +![Рисунок 11.2](images/step3.png) + +Спрацювало! Гарна робота :) + +- Базовий тег `` завжди є початком будь-якої веб сторінки і `` - завжди є кінцем. Як бачите, увесь контент сайту розміщений між початковим тегом `` і закриваючим тегом ``. +- `

` - тег для елементів абзацу; `

` закриває кожен абзац. + +## Голова і тіло (Head & body) + +Кожну сторінку HTML також можна поділити на два елементи: __head__ - (голова) і __body__ - (тіло). + +- __head__ - елемент, що містить інформацію про документ, яка не відображається на екрані. + +- __body__ - елемент, що містить усе інше, що відображається як частина веб сторінки. + +Ми використовуємо `` щоб повідомити браузер про конфігурацію сторінки, а ``, щоб повідомити браузер, що у дійсності знаходиться на сторінці. + +Наприклад, ви можете розмістити заголовок веб-сторінки всередині `` наступним чином: + +```html + + + Ola's blog + + +

Hi there!

+

It works!

+ + +``` + +Збережіть файл і перезавантажте вашу сторінку. + +![Рисунок 11.3](images/step4.png) + +Зауважте, як браузер зрозумів , що "Ola's blog" - це заголовок вашої сторінки? Він інтерпретував `Ola's blog` і розмістив текст у рядку заголовка вашого браузера (він також буде використаний для закладок чи інших речей). + +Можливо, ви також звернули увагу, що кожен відкриваючий тег відповідає *закриваючому тегу*, із `/`, і ці елементи є *вкладеними* (тобто ви не можете закрити окремий тег поки усі теги, що містяться всередині не будуть також закриті). + +Це щось на кшталт як покласти речі всередину ящиків. У вас є один великий ящик, ``; всередині цього ящика є ``, що містить ще менші ящики: `

`. + +Ви повинні керуватися цими правилами _закриваючих_ тегів, і _вкладених_ елементів - якщо ви цього не робитимите, браузер може бути не в змозі інтерпретувати їх правильно і ваша сторінка буде відображатись некоректно. + +## Налаштуйте ваш шаблон + +А тепер можете трохи побавитися і спробувати налаштувати ваш шаблон! Тут наведено декілька корисних тегів для цього: + +- `

Заголовок

` - для найважливішого заголовка +- `

Підзаголовок

` для заголовків наступного рівня +- `

Підпідзаголовок

` ... і так далі, аж до `
` +- `текст` робить акцент на вашому тексті +- `текст` робить сильний акцент на вашому тексті +- `
` переходить на наступну лінію (ви не можете нічого розмістити всередині br) +- `link` створює посилання +- `
  • перший елемент
  • другий елемент
` створює список, такий як цей! +- `
` визначає блок сторінки + +Тут наведено повний приклад шаблону: + +```html + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + +``` + +Тут було створено три блоки `div`. + +- Перший `div` елемент містить заголовок нашого блогу - а точніше, заголовок і посилання +- Два інших `div` елементи містять наші пости із датою публікації, `h2` із заголовком поста, який можна клікнути і два `p` (абзаци) тексту, один для дати, а інший для нашого блог посту. + +Отримуємо наступний ефект: + +![Рисунок 11.4](images/step6.png) + +Йой! Але досі, наш шаблон лише незмінно відображає точно __таку ж інформацію__ - тоді як раніше йшлося про шаблони, що дозволяють нам відображувати __різну__ інформацію в __однаковому форматі__. + +Що б ми дійсно хотіли зробити, так це відобразити реальні пости, додані в нашій панелі адміністратора Django - це те, до чого ми перейдемо далі. + +## Ще одна річ: розгортання! + +Було б добре побачити все це в Інтернеті, правда? Давайте зробимо ще одне розгортання на PythonAnywhere: + +### Фіксування (commit) і завантаження (push) коду на GitHub + +По-перше, давайте подивимося, які файли були змінені після розгортання (виконайте ці команди локально, не на PythonAnywhere): + + $ git status + +Переконайтеся, що ви перебуваєте в директорії `djangogirls`, далі давайте скажемо для `git` включити всі зміни в рамках цього каталогу: + + $ git add --all . + +> __Зауваження__ `-A` (коротко усі - "all") означає, що `git` також розпізнає якщо раптом ви видалили файли (за замовчуванням, він розпізнає лише нові/змінені файли). Також пам'ятайте (з розділу 3), що `.` означає поточну директорію. + +Перед тим як завантажити усі файли, давайте перевіримо що ж буде завантажувати `git` (усі файли, які буде завантажувати `git` повинні тепер з'явитися і бути позначеними зеленим кольором): + + $ git status + +Майже на місці, а тепер час повідомити йому про те, що треба зберегти ці зміни в його історії. Ми збираємося задати "commit message" що ж ми змінили. На цьому етапі можна набрати будь-що, що вважатимете за потрібне, однак, має сенс надрукувати щось дійсно зрозуміле, щоб, таким чином, ви могли згадати що ви зробили у майбутньому. + + $ git commit -m "Changed the HTML for the site." + +> __Зауваження__ Переконайтеся, що ви використали подвійні лапки навколо повідомлення про здійснену фіксацію. + +Після того, як ми це зробили, завантажимо (push) наші зміни до GitHub: + + git push + + +### Завантаження (pull) нового коду на PythonAnywhere і перезапуск веб-додатку + +* Відкрийте [сторінку з терміналами на PythonAnywhere](https://www.pythonanywhere.com/consoles/) і переключіться на вже запущений **Bash термінал** (або запустіть новий). Далі, наберіть команди: + +``` +$ cd ~/my-first-blog +$ source myvenv/bin/activate +(myvenv)$ git pull +[...] +(myvenv)$ python manage.py collectstatic +[...] +``` + +Подивіться, що ваш код почав завантажуватись. Якщо ви хочете перевірити успішність процедури, відкрийте вкладку **Files** і подивіться на свій код на PythonAnywhere. + + +* Зрештою, переключіться на вкладку [Web](https://www.pythonanywhere.com/web_app_setup/) і натисніть **Reload**. + +Оновлення повинні відобразитись на вашому веб-сайті! Переключись на нього і онови сторінку. Ви повинні побачити зміни :) diff --git a/uk/html/images/step1.png b/uk/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/uk/html/images/step1.png differ diff --git a/uk/html/images/step3.png b/uk/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/uk/html/images/step3.png differ diff --git a/uk/html/images/step4.png b/uk/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/uk/html/images/step4.png differ diff --git a/uk/html/images/step6.png b/uk/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/uk/html/images/step6.png differ diff --git a/uk/images/application.png b/uk/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/uk/images/application.png differ diff --git a/uk/installation/README.md b/uk/installation/README.md new file mode 100644 index 00000000000..bff76bf0fef --- /dev/null +++ b/uk/installation/README.md @@ -0,0 +1,48 @@ +# Якщо ви проходите цей підручник вдома + +Якщо ви проходите цей посібник вдома, а не на одному з [майстер-класів Django Girls](https://djangogirls.org/events/), ви можете повністю пропустити цей розділ і перейти до розділу [Як працює Інтернет](../how_the_internet_works/README.md). + +Справа в тому, що ми все одно розглядаємо ці речі в посібнику, а цей розділ - лише додаткова сторінка, де зібрані разом всі інструкції по встановленню. Зустріч Django Girls включає в себе "Вечір налаштувань", коли ми встановлюємо все потрібне, щоб не витрачати на це час під час воркшопу, це дуже зручно для нас. + +Якщо ви вважаєте це корисним, можете пройти цей розділ також. Але якщо бажаєте почати вчитися без встановлення купи речей на ваш комп'ютер, пропустіть цей розділ і ми пояснимо як ставити програми пізніше. + +Успіхів! + +# Встановлення +На воркшопі ви будете створювати блог, і в посібнику є кілька підготовчих задач по встановленню, які було б добре виконати заздалегідь, так щоб на воркшопі ви були відразу готові програмувати. + +# Встановіть Python +{% include "/python_installation/instructions.md" %} + +# Налаштуйте virtualenv та встановіть Django +{% include "/django_installation/instructions.md" %} + +# Встановіть редактор коду +{% include "/code_editor/instructions.md" %} + +# Встановіть Git +{% include "/deploy/install_git.md" %} + +# Створіть аккаунт на GitHub +Зайдіть на [GitHub.com](https://www.github.com) і зареєструйте новий безкоштовний аккаунт користувача. + +# Створіть аккаунт на PythonAnywhere +{% include "/deploy/signup_pythonanywhere.md" %} + + +# Почніть читати + +Вітання, ви все зробили і готові йти вперед! Якщо ви все ще маєте час перед воркшопом, буде корисно, якщо ви почнете читати кілька вступних розділів: + + * [Як працює Інтернет](../how_the_internet_works/README.md) + + * [Знайомство з командним рядком](../intro_to_command_line/README.md) + + * [Вступ до Python](../python_introduction/README.md) + + * [Що таке Django?](../django/README.md) + + +# Насолоджуйтесь подією! + +Після початку воркшопу, можете відразу перейти до [вашого першого Django проекту!](../django_start_project/README.md), тому що ви пройшли матеріал із попередніх розділів. diff --git a/uk/intro_to_command_line/README.md b/uk/intro_to_command_line/README.md new file mode 100644 index 00000000000..70e30017ef8 --- /dev/null +++ b/uk/intro_to_command_line/README.md @@ -0,0 +1,254 @@ +# Вступ до інтерфейсу командного рядка + +Це захоплює, чи не так?! Ви напишете свій перший рядок коду через декілька хвилин :) + +__Дозвольте нам представити вас вашому новому другові: командний рядок!__ + +Наступні кроки покажуть вам, як користуватися чорним вікном хакерів. Спочатку це може видаватися трохи жахливим, однак насправді - це лише командна підказка, що очікує від вас певних команд. + +> **Примітка.** Зауважте, що в цій книзі ми використовуємо терміни 'директорія', 'каталог' та 'папка' взаємозамінно, ці слова означають одне й те саме. + +## Що таке командний рядок? + +Вікно, яке зазвичай називають __командним рядком__ або __інтерфейсом командного рядка__, є текстовою програмою для перегляду, обробки і управління файлами на вашому комп'ютері. Як Провідник на Windows чи Finder на Mac, але без графічного інтерфейсу. Інші назви командного рядка: *cmd*, *CLI*, *prompt*, *console* або *terminal*. + +## Відкриваємо інтерфейс командного рядка + +Щоб почати експериментувати, нам потрібно спочатку відкрити наш інтерфейс командного рядка. + +### Windows + +Перейдіть до меню Пуск → Усі програми → Стандартні → Командний рядок. + +### macOS + +Додатки → Утиліти → Термінал. + +### Linux + +Скоріш за все Додатки → Стандартні → Термінал, але це може залежати від вашої системної версії. Якщо тут його немає, просто загугліть :) + +## Командний рядок + +Має з'явитися біле або чорне вікно, що очікує на ваші команди. + +Якщо ви працюєте на Mac або на Linux, ви напевно побачите `$`, на зразок: + + $ + +На Windows, це знак `>`: + + > + +Кожній команді буде передувати цей знак і один пробіл, але ви не мусите набирати їх. Ваш комп'ютер робитиме це для вас сам :) + +> Просто маленьке зауваження: у вашому випадку ви побачите щось на кшталт `C:\Users\ola>` або `Olas-MacBook-Air:~ ola$` перед знаком командного рядка і це на 100% є правильним. + +Частина до `$` або `>` включно називається *запрошенням командного рядка* або скорочено *командним рядком*. Вона запрошує вас ввести туди щось. + +У посібнику, коли нам потрібно, щоб ви набрали щось в командний рядок, ми включатимемо `$` або `>`, а іноді й більше символів зліва. Ви можете ігнорувати ліву частину і друкувати в командний рядок лише те, що починається після `$`. + +## Ваша перша команда (ЙОЙ!) + +Почнемо з чогось простенького. Наберіть команду: + + $ whoami + +або + + > whoami + +Далі натисніть `enter`. Це наш результат: + + $ whoami + olasitarska + +Як бачимо, комп'ютер лише виводить ваше ім'я користувача. Файно, еге ж?:) + +> Спробуйте набирати кожну команду, а не копіювати і вставляти. Таким чином ви більше запам'ятаєте! + +## Основи + +У кожної операційної системи є трохи відмінні набори команд для командного рядку, отже, будьте певними, що виконуєте інструкції саме для вашої операційної системи. Давайте спробуємо? + +### Поточна директорія + +Було б чудово знати, де ми перебуваємо зараз, чи не так? Давайте подивимося. Введіть цю команду і натисніть `enter`: + + $ pwd + /Users/olasitarska + +Якщо ви працюєте на Windows: + + > cd + C:\Users\olasitarska + +Можливо, ви побачите щось схоже на вашій машині. Після того, як ви відкрили командний рядок, ви зазвичай починаєте зі своєї домашньої папки. + +> Зауваження: 'pwd' відповідає 'print working directory' (англ. надрукувати робочу папку). + +--- + +### Список файлів і папок + +Отже, що ж всередині? Було б круто з'ясувати. Давайте подивимось: + + $ ls + Applications + Desktop + Downloads + Music + ... + +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 + ... + +--- + +### Змінити поточну директорію + +Тепер давайте перейдемо до директорії робочого столу: + + $ cd Desktop + +Windows: + + > cd Desktop + +Перевірте, чи дійсно щось змінилось: + + $ pwd + /Users/olasitarska/Desktop + +Windows: + + > cd + C:\Users\olasitarska\Desktop + +Ось! + +> ПРОФІ хитрощі: якщо ви наберете `cd D` і потім натиснете `tab` на клавіатурі, командний рядок автоматично заповнить решту імені, таким чином можна переходити швидше. Якщо папок, що починаються з "D" більше однієї, натисніть кнопку `tab` двічі для отримання списку варіантів. + +* * * + +### Створити директорію + +Як щодо створення каталогу `practice` на вашому робочому столі? Ви можете зробити це таким чином: + + $ mkdir practice + +Windows: + + > mkdir practice + +Ця коротка команда створить папку з іменем `practice` на вашому робочому столі. Може перевірити чи є вона там, просто глянувши на свій Робочий стіл або запустивши команду `ls` або `dir`! Спробуйте :) + +> ПРОФІ хитрощі: Якщо ви не хочете кожного разу набирати одну й ту ж команду, спробуйте натиснути кнопки `стрілка вгору` та `стрілка вниз` на своїй клавіатурі щоб повторити нещодавно використовувані команди. + +--- + +### Вправа! + +Невеличке випробування для вас: в щойно створеній директорії `practice` створіть папку `test`. Використайте команди `cd` та `mkdir`. + +#### Розв'язання: + + $ cd practice + $ mkdir test + $ ls + test + +Windows: + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + +Вітаємо! :) + +--- + +### Прибираємо + +Ми не хочемо залишити безлад, то ж давайте видалимо усе, що ми створили до цього моменту. + +Спочатку нам потрібно повернутися назад до директорії Робочий стіл: + + $ cd .. + +Windows: + + > cd .. + +Використання `cd` із `..` змінить вашу поточну директорію на батьківську (тобто папка, що містить вашу поточну папку). + +Перевірте де ми: + + $ pwd + /Users/olasitarska/Desktop + +Windows: + + > cd + C:\Users\olasitarska\Desktop + +Тепер час видалити директорію `practice`: + +> __Увага__: Видалення файлів за допомогою `del`, `rmdir` або `rm` є безповоротнім, тобто *файли будуть видалені назавжди*! То ж, будьте конче обережними із цими командами. + + $ rm -r practice + +Windows: + + > rmdir /S practice + practice, Are you sure ? Y + +Виконано! Щоб переконатися, що папку дійсно видалена, давайте перевіримо: + + $ ls + +Windows: + + > dir + +### Вихід + +Це все наразі! Можна тепер спокійно закрити командний рядок. Давайте зробимо це хакерським методом, добре?:) + + $ exit + +Windows: + + > exit + +Круто, га?:) + +## Підсумок + +Тут наведено підсумок деяких корисних команд: + +| Команда (Windows) | Команда (Mac OS / Linux) | Опис | Приклад | +| ----------------- | ------------------------ | ------------------------ | ------------------------------------------------- | +| exit | exit | закрити вікно | **exit** | +| cd | cd | змінити директорію | **cd test** | +| dir | ls | список директорій/файлів | **dir** | +| copy | cp | скопіювати файл | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | перемістити файл | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | створити нову директорію | **mkdir testdirectory** | +| del | rm | видалити директорію/файл | **del c:\test\test.txt** | + +Тут наведено лише невелику кількість команд, котрі можна запускати у вашому командному рядку, однак, на даний момент ми не збираємося використовувати щось більше. + +Якщо вас цікавить, [ss64.com](http://ss64.com) містить повний список посилань на команди для усіх операційних систем. + +## Готові? + +Давайте зануримось у Python! diff --git a/uk/python_installation/README.md b/uk/python_installation/README.md new file mode 100644 index 00000000000..48b6f8aabae --- /dev/null +++ b/uk/python_installation/README.md @@ -0,0 +1,14 @@ +# Почнімо працювати з Python + +Нарешті ми тут! + +Але спершу, дозвольте нам розказати вам що ж таке Python. Python - це дуже популярна мова програмування, що може використовуватися для створення веб сайтів, ігор, наукових програм, графіки та багато-багато іншого. + +Python розроблено наприкінці 80-х, і його головною ціллю є читабельність для людей (не тільки для машин!). Саме тому ця мова виглядає набагато простіше, ніж інші мови програмування. Це привносить простоту у процес вивчення, але не турбуйтеся, Python водночас є дуже потужним! + +# Встановлення Python + +> **Примітка** Якщо ви вже прошли розділ установки, немає потреби робити це знову - можна пропустити і перейти відразу до наступного розділу! + +{% include "/python_installation/instructions.md" %} + diff --git a/uk/python_installation/images/add_python_to_windows_path.png b/uk/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/uk/python_installation/images/add_python_to_windows_path.png differ diff --git a/uk/python_installation/instructions.md b/uk/python_installation/instructions.md new file mode 100644 index 00000000000..13e70bf9d7f --- /dev/null +++ b/uk/python_installation/instructions.md @@ -0,0 +1,60 @@ + +> Цей розділ базується на навчальних матеріалах Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) + +Django написаний на Python. Нам потрібен Python, щоб робити усе, що заманеться на Django. Почнемо з його інсталяції! Ми хочемо встановити Python 3.4, отже якщо ви вже маєте якусь більш ранню версію, то необхідно її оновити. + + +### Windows + +Python для Windows можна завантажити з сайту https://www.python.org/downloads/release/python-343/. Після завантаження файлу ***.msi**, ви повинні запустити його (натисніть по ньому двічі) і виконувати усі подальші інструкції. Важливо пам'ятати шлях (директорію), де ви встановили Python. Це знадобиться пізніше! + +Зверніть увагу на другу сторінку "Customize" майстера установки, вам потрібно пролистати вниз і вибрати опцію "Add python.exe to the Path" (додати python.exe в системну змінну Path), як показано тут: + +![Не забудьте додати Python до змінної Path](../python_installation/images/add_python_to_windows_path.png) + +### Linux + +Цілком ймовірно, що у вас вже є Python встановлений разом із системою. Щоб перевірити це (а заодно й версію), відкрийте консоль і наберіть наступну команду: + + $ python3 --version + Python 3.4.3 + +Якщо Python не встановлено або ви бажаєте встановити іншу версію, то можете виконати встановлення наступним чином: + + +#### Debian або Ubuntu + +Наберіть наступну команду в консолі: + + $ sudo apt install python3.4 + + +#### Fedora + +Скористайтеся наступною командою в консолі: + + $ sudo dnf install python3.4 + + +#### openSUSE + +Скористайтеся наступною командою в консолі: + + $ sudo zypper install python3 + + +### macOS + +Вам необхідно перейти на веб сайт https://www.python.org/downloads/release/python-343/ і завантажити Python інсталятор: + +* завантажте файл *macOS 64-bit/32-bit installer*, +* Двічі клацніть на *python 3.4.3 macosx10.6.pkg*, щоб запустити інсталятор. + +Підтвердіть, що інсталяція пройшла успішно відкривши програму *Terminal* і запустивши команду `python3`: + + $ python3 --version + Python 3.4.3 + +---- + +Якщо маєте певні сумніви, або щось пішло не так і ви без поняття, що робити далі - будь ласка, зверніться до свого тренера! Інколи не все йде гладко і краще звернутись по допомогу до когось, хто має більше досвіду. diff --git a/uk/python_introduction/README.md b/uk/python_introduction/README.md new file mode 100644 index 00000000000..a1609ae2b95 --- /dev/null +++ b/uk/python_introduction/README.md @@ -0,0 +1,735 @@ +# Вступ до Python + +> Частина цього розділу базується на матеріалах Geek Girls Carrots (https://github.com/ggcarrots/django-carrots). + +Давайте напишемо якийсь код! + +## Командний рядок Python + +Щоб розпочати роботу із Python, нам необхідно відкрити *командний рядок*. Ви вже повинні знати як це зробити, адже ознайомились із цим у розділі [Вступ до командного рядка](../intro_to_command_line/README.md). + +Як тільки будете готові, виконайте наведені нижче інструкції. + +Ми хочемо відкрити консоль Python, тому введіть `python` на Windows або `python3` на Mac OS/Linux та натисніть `Enter`. + + $ python3 + Python 3.4.3 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + +## Ваша перша команда на Python! + +Після запуску команди Python командний рядок зміниться на `>>>`. Для нас це означає, що відтепер ми можемо користуватися лише командами мови Python. Вам не доведеться друкувати `>>>` - Python зробить це для вас сам. + +Якщо забажаєте вийти із консолі Python, просто наберіть `exit()` або використайте комбінацію `Ctrl + Z` для Windows і `Ctrl + D` для Mac/Linux. Після того ви більше не побачите `>>>`. + +Але наразі, ми не бажаємо виходити із консолі Python. Ми хочемо дізнатися про неї більше. Почнемо з чогось простенького. Наприклад, спробуйте виконати певні алгебраїчні операції, на зразок `2 + 3` та натисніть `enter`. + + >>> 2 + 3 + 5 + +Чудово! Бачите, яким чином здійснено вивід відповіді? Python знає математику! Можна спробувати інші команди, наприклад: +- `4 * 5` +- `5 - 1` +- `40 / 2` + +Поки що можете трохи побавитися із математикою, а далі повертайтесь назад :). + +Як бачите, Python є чудовим калькулятором. Хіба вас не цікавить, що ще можна робити... + +## Рядки + +Як щодо вашого імені? Наберіть ваше ім'я в лапках, як тут: + + >>> "Ola" + 'Ola' + +Щойно ви створили свій перший рядок! Це послідовність символів, що може бути оброблена комп'ютером. Рядок має постійно починатися і закінчуватися одним і тим же символом. Це може бути одинарна (`'`) або подвійна (`"`) лапка (немає ніякої різниці)! Лапки вказують Python, що всередині них рядок. + +Рядки можна об'єднувати. Спробуйте: + + >>> "Hi there " + "Ola" + 'Hi there Ola' + +Також можна множити рядки на число: + + >>> "Ola" * 3 + 'OlaOlaOla' + +Якщо вам раптом треба поставити апостроф всередині рядка, то існує два шляхи це зробити. + +Використавши подвійні лапки: + + >>> "Runnin' down the hill" + "Runnin' down the hill" + +або ж екранувати апостроф за допомогою оберненої косої риски (англ. backslash `\`): + + >>> 'Runnin\' down the hill' + "Runnin' down the hill" + +Гарно, еге ж? Щоб побачити своє ім'я, написане великими літерами, наберіть: + + >>> "Ola".upper() + 'OLA' + +Ви щойно застосували до свого рядка `upper` __функцію__! Функція (така як `upper()`) - це набір інструкцій, які повинен виконувати Python над заданим об'єктом (`"Ola"`) з моменту її виклику. + +Якщо ви раптом забажаєте дізнатися про число літер, що містяться у вашому імені, то для цього також існує функція! + + >>> len("Ola") + 3 + +Здивовані, чому іноді ви викликаєте функції із `.` наприкінці рядка (на зразок `"Ola".upper()`), а іноді ви спочатку викликаєте функцію і вказуєте рядок у дужках? Що ж, в деяких випадках, функції належать об'єктам, як `upper()`, котра може бути виконана лише над рядком. У цьому випадку, ми називаємо функцію __методом__. Іншого разу, функції не належать до жодного об'єкту і можуть використовуватись стосовно різних типів об'єктів, як `len()`. Саме тому ви використовуємо `"Ola"` у якості параметра для функції `len`. + +### Підсумок + +Гаразд, досить стосовно рядків. Отже, ви вже ознайомилися із такими поняттями як: + +- __командний рядок__ - набір команд (коду) в командному рядку Python дає результат у відповідях на Python +- __числа і рядки__ - в Python числа використовуються для математичних розрахунків, а рядки - для текстових об'єктів +- __оператори__ - на зразок + та \*, комбінують значення і продукують нове +- __функції__ - на зразок upper() та len(), виконують дії над об'єктами. + +Це є основи кожної мови програмування, яку ви вивчатимете. Готові приступити до чогось складнішого? Б'ємось об заклад, що так! + +## Помилки + +Спробуємо щось нове. Чи можемо ми отримати довжину числа тим же методом, як ми це робили для нашого імені? Наберіть `len(304023)` та натисніть `Enter`: + + >>> len(304023) + Traceback (most recent call last): + File "", line 1, in + TypeError: object of type 'int' has no len() + +Ми отримали нашу першу помилку! Вона говорить про те, що об'єкт типу "int" (integers, цілі числа) не має довжини. І що ж нам тепер робити? Можливо, можна записати наше число у формі рядка? Рядки ж мають довжину, правда? + + >>> len(str(304023)) + 6 + +Спрацювало! Ми використали функцію `str` всередині функції `len`. `str()` перетворює будь-що на рядки. + +- Функція `str` перетворює речі на __рядки__ +- Функція `int` перетворює речі на __цілі числа__ + +> Важливо: ми можемо перетворювати числа на текст, однак, не можемо перетворити текст на числа - чому б дорівнювало `int('hello')`? + +## Змінні + +Важливою концепцію в програмуванні є змінні. Змінна - це ніщо більше, ніж ім'я для чогось, що можна буде використовувати пізніше. Програмісти використовують ці змінні для збереження даних, щоб зробити свій код більш читабельним і, таким чином, їм не потрібно пам'ятати зайве. + +Скажімо, ми хочемо створити змінну і назвати її `name`: + + >>> name = "Ola" + +Бачите? Це просто! Просто: name дорівнює Ola. + +Як ви зауважили, ваша програма не повернула нічого як вона це робила до того. Отже, як ми впевнимось, що змінна насправді існує? Просто введіть `name` і натисніть `enter`: + + >>> name + 'Ola' + +Урра! Ваша перша змінна :)! Ви завжди можете змінити значення, на яке вона посилатиметься: + + >>> name = "Sonja" + >>> name + 'Sonja' + +Також можна використовувати її у функціях: + + >>> len(name) + 5 + +Файно, хіба ні? Звісно, змінні можуть представляти будь-що, числа також! Спробуйте: + + >>> a = 4 + >>> b = 6 + >>> a * b + 24 + +А якщо ми використали неправильне ім'я? Чи можете ви передбачити, що станеться? Спробуймо! + + >>> city = "Tokyo" + >>> ctiy + Traceback (most recent call last): + File "", line 1, in + NameError: name 'ctiy' is not defined + +Помилка! Як бачите, Python має різні типи помилок і дана помилка називається **NameError**. Python виведе для вас цю помилку, якщо ви спробуєте використати досі не визначену змінну. Якщо ж ви зіткнетеся із цією помилкою пізніше, перевірте свій код, чи не зробили ви помилки в написанні імен змінних. + +Поекспериментуйте із цим усім і подивіться, що можна робити! + + +## Функція print + +Спробуйте наступне: + + >>> name = 'Maria' + >>> name + 'Maria' + >>> print(name) + Maria + +Коли ви просто набираєте `name`, Python інтерпретує відповіді за допомогою рядкового *представлення* змінної 'name', котра є набором літер M-a-r-i-a, взятим в одинарні лапки, ''. Коли ви повідомляєте `print(name)`, Python "надрукує" значення змінної на екран, без лапок, що є більш акуратним. + +Як ми потім побачимо, `print()` є також корисним коли ми хочемо надрукувати речі з внутрішніх функцій, або ж коли хочемо надрукувати речі в декілька рядків. + + +## Списки + +Окрім рядків та чисел, Python має усі види різних типів об'єктів. Наразі ми збираємося представити вашій увазі один із них, що називається __список__. Списки є саме тим, про що ви й подумали: це об'єкти, що є списками інших об'єктів :) + +Створимо список: + + >>> [] + [] + +Так, цей список пустий. Не дуже корисно, чи не так? Створимо список лотерейних чисел. Ми не бажаємо увесь час повторюватись, тож покладемо усе до змінної: + + >>> lottery = [3, 42, 12, 19, 30, 59] + +Гаразд, маємо список! Що ми можемо із цим робити? Давайте глянемо скільки лотерейних номерів міститься у списку. Не маєте жодного уявлення, яку функцію для цього можна використати? Ви вже це знаєте! + + >>> len(lottery) + 6 + +Так! `len()` може дати вам кількість об'єктів у списку. Зручно, правда ж? Може, тепер здійснимо сортування: + + >>> lottery.sort() + +Ця функція нічого не повертає, вона лише змінює порядок, в якому з'являються числа у списку. Давайте надрукуємо список знову і подивимось, що ж трапилося: + + >>> print(lottery) + [3, 12, 19, 30, 42, 59] + +Як бачимо, числа у вашому списку тепер відсортовано починаючи з найменшого і закінчуючи найбільшим значенням. Вітаємо! + +Можливо, ми хочемо відсортувати числа у зворотньому порядку? Давайте це зробимо! + + >>> lottery.reverse() + >>> print(lottery) + [59, 42, 30, 19, 12, 3] + +Просто, чи не так? Якщо ви забажаєте щось додати до свого списку, то можете це зробити за допомогою наступної команди: + + >>> lottery.append(199) + >>> print(lottery) + [59, 42, 30, 19, 12, 3, 199] + +Якщо захочете показати лише перше число, то можете зробити це використавши __індекси__. Індекс - це номер, що повідомляє про те, звідки у списку взято елемент. Програмісти вважають за краще рахувати з 0, таким чином, перший об'єкт у списку має індекс 0, наступний - 1 і так далі. Спробуйте наступне: + + >>> print(lottery[0]) + 59 + >>> print(lottery[1]) + 42 + +Як бачимо, ви можете отримати доступ до різних об'єктів списку використавши ім'я списку та індекс об'єкта всередині квадратних дужок. + +Для того, щоб видалити що-небудь із списку, вам потрібно використовувати вище вивчені __індекси__ і команду `pop()`. Давайте спробуємо на прикладі та нагадаємо, що ми вивчили раніше; ми будемо видаляти перший елемент з нашого списку. + + >>> print(lottery) + [59, 42, 30, 19, 12, 3, 199] + >>> print(lottery[0]) + 59 + >>> lottery.pop(0) + >>> print(lottery) + [42, 30, 19, 12, 3, 199] + +Працює чудово! + +Для додаткового задоволення, спробуйте деякі індекси: 6, 7, 1000, -1, -6 або -1000. Подивіться, чи здатні ви передбачити результат команди перед її застосуванням. Чи мають ці результати якийсь смисл? + +Список усіх доступних методів для списку міститься у цьому розділі документації з Python: https://docs.python.org/3/tutorial/datastructures.html + +## Словники + +Словник є чимось подібним до списку, але доступ до значень отримується шляхом пошуку за ключем замість індексу. Ключ може являти собою будь-який рядок або число. Синтаксис для визначення пустого словника: + + >>> {} + {} + +Це показує, що ви просто створили пустий словник. Урра! + +А тепер спробуйте набрати наступну команду (спробуйте також замінити на вашу власну інформацію): + +```python +>>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} +``` + +За допомогою вказаної команди ви щойно створили змінну із назвою `participant` і трьома парами ключ-значення: + +- ключ `name` вказує на значення `'Ola'` (об'єкт `string` - рядок), +- `country` вказує на `'Poland'` (інший об'єкт `string` - рядок), +- і `favorite_numbers` вказує на `[7, 42, 92]` (об'єкт `list` - список з трьома числами всередині). + +Можна перевірити значення індивідуальних ключів, використовуючи наступний синтаксис: + + >>> print(participant['name']) + Ola + +Бачите, усе подібно до списку. Але вам не треба пам'ятати індекс - лише ім'я. + +Що трапиться, якщо запитати Python про значення ключа, якого не існує? Не здогадуєтесь? Давайте спробуємо і подивимось! + + >>> participant['age'] + Traceback (most recent call last): + File "", line 1, in + KeyError: 'age' + +Погляньте, інша помилка! Цього разу - **KeyError**. Python допомагає і підказує вам про те, що ключа `'age'` не існує в даному словнику. + +Коли ж варто використовувати словник, а коли список? Що ж, гарне питання. Просто вирішимо його подумки перед тим, як подивитися відповідь у наступному рядку. + +- Вам необхідна лише впорядкована послідовність елементів? Користуйтеся списком. +- Вам потрібні значення асоційовані із ключами, так що ви можете ефективно переглядати їх (за допомогою ключа) пізніше? Користуйтеся словником. + +Словники, як і списки, є *змінюваними*, це означає, що вони можуть бути змінені після створення. Ви можете додати нові пари ключ/значення до словника після того, як він був створений, наприклад: + + >>> participant['favorite_language'] = 'Python' + +Як і для списків, використання методу `len()` для словників, повертає значення пар ключ-значення в словнику. Наберіть команду: + + >>> len(participant) + 4 + +Сподіваюся, це наразі має сенс. :) Готові до ще більшого задоволення від роботи зі словниками? Перейдіть на наступний рядок, щоб побачити дещо дивовижне. + +Можна використовувати команду `pop()` для видалення елементів зі словника. Скажімо, якщо ви бажаєте видалити значення, що відповідає ключу `'favorite_numbers'`, просто наберіть наступну команду: + + >>> participant.pop('favorite_numbers') + >>> participant + {'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} + +Як бачимо з результатів, пару ключ-значення, що відповідає ключу 'favorite_numbers' було видалено. + +Аналогічно можна змінювати значення, асоційоване з уже існуючим ключем зі словника. Наберіть: + + >>> participant['country'] = 'Germany' + >>> participant + {'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} + +Як бачимо, значення ключа `'country'` було змінено із `'Poland'` на `'Germany'`. :) Вражаюче? Ура! Ви щойно освоїли іншу дивовижну річ. + +### Підсумок + +Чудово! Тепер ви знаєте багато про програмування. У цій останній частині ви дізналися про такі поняття, як: + +- __помилки__ - тепер ви знаєте як читати та розуміти помилки, що з'являються якщо Python не розуміє отриманої команди +- __змінні__ - імена для об'єктів, що дозволяють вам спростити процес написання коду і робить його більш читабельним +- __списки__ - списки певним чином впорядкованих об'єктів +- __словники__ - об'єкти, що зберігають пари ключ-значення + +Не дочекаєтеся переходу до наступної частини? :) + +## Порівняння + +Велика частина програмування включає речі, пов'язані із порівнянням. Що є найпростішою річчю для порівняння? Звісно, числа. Давайте подивимось як це працює: + + >>> 5 > 2 + True + >>> 3 < 1 + False + >>> 5 > 2 * 2 + True + >>> 1 == 1 + True + >>> 5 != 2 + True + +Ми надали Python деякі числа для порівняння. Як бачимо, Python вміє порівнювати не лише числа, а й результати операцій. Гарно, еге ж? + +Цікаво, чому ми використали два однакові знаки `==`, щоб порівняти на рівність числа? Ми використовуємо `=` для присвоєння значень змінним. Завжди, __завжди__ треба писати `==`, якщо ви бажаєте здійснити перевірку двох чисел на рівність одне одному. Ми також можемо перевіряти, чи два об'єкти є нерівними. Для цього ми використовуємо символ `!=`, як показано в прикладі вище. + +Задайте для Python ще дві задачі: + + >>> 6 >= 12 / 2 + True + >>> 3 <= 2 + False + +щодо `>` та `<` - усе просто, але що означають `>=` і `<=`? Читайте їх як: + +- x `>` y означає x більше ніж y +- x `<` y означає x менше ніж y +- x `<=` y означає x менше або дорівнює y +- x `>=` y означає x більше або дорівнює y + +Чудово! Хочете ще? Спробуйте це: + + >>> 6 > 2 and 2 < 3 + True + >>> 3 > 2 and 2 < 1 + False + >>> 3 > 2 or 2 < 1 + True + +Ви можете задавати для Python стільки чисел для порівння скільки заманеться, і він дасть вам результат! Дуже розумно, чи не так? + +- __and__ - якщо ви використовуєте оператор `and`, обидва порівнюваних значення мають бути істинними - True для того, щоб і уся команда була істинною - True +- __or__ - якщо ви використовуєте оператор `or`, лише одне із порівнюваних значень мають бути істинними - True для того, щоб і уся команда була істинною - True + +Чи чули ви про вираз "порівняння яблук і апельсинів"? Давайте спробуємо Python еквівалент: + + >>> 1 > 'django' + Traceback (most recent call last): + File "", line 1, in + TypeError: '>' not supported between instances of 'int' and 'str' + +Бачимо тут, що як і у виразі, Python не в змозі порівняти число (`int`) та рядок (`str`). +Натомість, виводиться **TypeError** і повідомляє нас про те, що ці два типи не можна порівнювати між собою. + +## Логічні типи + +Між іншим, ви щойно дізналися про новий типу об'єкту в Python. Він називається логічним - __Boolean__ - і, можливо, це найпростіший тип. + +Існує лише два логічних об'єкти: +- Істинне: True +- Хибне: False + +Але для того, щоб Python міг це зрозуміти, треба завжди писати 'True' (перша літера - велика, а решта - маленькі). __true, TRUE, tRUE не працюють - лише True є правильним.__ (Те ж саме стосується і 'False' також.) + +Логічні значення також можуть бути змінними! Погляньте: + + >>> a = True + >>> a + True + +Можна також зробити теж саме по-іншому: + + >>> a = 2 > 5 + >>> a + False + +Практикуйте із логічними типами спробувавши запустити наступні команди: + +- `True and True` +- `False and True` +- `True or 1 == 1` +- `1 != 2` + +Вітання! Логічними типи - одна із найкрутіших властивостей програмування, і ви щойно освоїли, як їх застосовувати! + +# Збережіть! + +Досі ми писали увесь наш Python код в інтерпретаторі, що обмежує нас написанням лише одного рядка за раз. Зазвичай програми зберігаються у файлах і виконуються __інтерпретатором__ або __компілятором__ нашої мови програмування. Досі ми запускали наші програми одним рядком в Python __інтерпретаторі__. Для наступних задач нам знадобиться більше, ніж один рядок коду, отже, нам потрібно: + +- Закрити Python інтепретатор +- Відкрити наш вибраний текстовий редактор +- Зберегти певний код в python файлі +- Запустити його! + +Щоб вийти з Python інтерпретатора, яким ми користувалися до цього, просто наберіть функцію ```exit()```: + + >>> exit() + $ + +Ви повернетеся назад до командного рядка. + +Раніше ми вже обрали для себе редактор коду в розділі [редактор коду](../code_editor/README.md). А тепер ми маємо відкрити цей редактор і написати якийсь код в новому файлі: + +```python +print('Hello, Django girls!') +``` + +Очевидно, ви тепер є досить досвідченим Python програмістом, отже, можете написати у ваш код усе, що ви до цього часу вивчили. + +А тепер треба зберегти файл і дати йому описове ім'я. Назвімо файл **python_intro.py** і збережемо його на вашому робочому столі. Ви можете називати файл як завгодно, тільки важливо, щоб назва закінчувалась на __.py__. Закінчення __.py__ говорить нашій операційній системі, що це **виконуваний файл Python** і Python може його запускати. + +> **Примітка** Ви повинні помітити одну з найкрутіших фіч редакторів коду: кольори! У консолі Python все було одного кольору, тепер ви повинні побачити, що функція `print` має інший колір, ніж рядок, який вона друкує. Це називається "підсвіткою синтаксису", і це справді корисна функція для програміста. Різний колір слів дає вам підказку щодо правильності набору тексту чи орфографічної помилки (згодом зверніть увагу на колір слова `def` в тілі функції). Це одна з вагомих причин, чому ми використовуємо редактор коду :) + + +По тому, як файл успішно збережено, час запустити його! Використовуючи навики отримані під час освоєння розділу, що стосувався командного рядка, скористайтеся терміналом, щоб **змінити директорію** на робочий стіл. + +Для Mac, команда буде виглядати так: + + $ cd ~/Desktop + +Для Linux, вона буде на зразок (слово "Desktop" може бути перекладене вашою мовою): + + $ cd ~/Desktop + +І для Windows, це буде так: + + > cd %HomePath%\Desktop + +Якщо ви застрягли, просто попросіть допомоги. + +Використовуйте Python, щоб виконати код у файлі, таким чином: + + $ python3 python_intro.py + Hello, Django girls! + +Гаразд! Ви щойно запустили вашу першу Python програму, яка була збережена у файлі. Чудові відчуття? + +Тепер ви можете переходити до важливого інструменту у програмуванні: + +## If...elif...else + +Багато речей в програмі мають бути виконані лише тоді, коли виконуються задані умови. Саме тому Python має інструмент, що називається __умовою if - якщо__. + +Замініть код вашого файлу **python_intro.py** на наступне: + +```python +if 3 > 2: +``` + +Якщо ми збережемо зміни і запустимо цей файл, то побачимо наступну помилку: + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + +Python очікує від нас подальших інструкцій, які повинні бути виконані, якщо умова `3 > 2` виявляється істинною (тобто `True`). Спробуємо змусити Python надрукувати “It works!”. Змініть код у файлі **python_intro.py** на наступне: + +```python +if 3 > 2: + print('It works!') +``` + +Зауважили, яким чином ми зробили відступ в 4 пробіли для наступного рядка коду? Це необхідно робити для того, щоб Python знав, який шматок коду запускати, якщо результати умови істинні. Можна зробити відступ і в один пробіл, але майже усі Python програмісти роблять відступ у 4 пробіли, щоб було акуратніше. Один `tab` також рахується як 4 пробіли. + +Збережіть і запустіть знову: + + $ python3 python_intro.py + It works! + +### Що ж, якщо ні? + +У попередніх прикладах код виконувався лише, коли умови були істинними - True. Однак, Python також має умови `elif` та `else`: + +```python +if 5 > 2: + print('5 is indeed greater than 2') +else: + print('5 is not greater than 2') +``` + +Коли запустимо це, буде виведено: + + $ python3 python_intro.py + 5 is indeed greater than 2 + +Якщо 2 було числом більшим за 5, то далі буде виконуватися друга команда. Просто, правда ж? Подивимося як працює `elif`: + +```python +name = 'Sonja' +if name == 'Ola': + print('Hey Ola!') +elif name == 'Sonja': + print('Hey Sonja!') +else: + print('Hey anonymous!') +``` + +і в результаті: + + $ python3 python_intro.py + Hey Sonja! + +Бачите, що тут відбуваеться? `Elif` вказує додаткові умови для перевірки, якщо результат попередніх умов є невдалим. + +Ви можете додати стільки виразів `elif`, скільки вам до вподоби одразу після виразу `if`. Наприклад: + +```python +volume = 57 +if volume < 20: + print("It's kinda quiet.") +elif 20 <= volume < 40: + print("It's nice for background music") +elif 40 <= volume < 60: + print("Perfect, I can hear all the details") +elif 60 <= volume < 80: + print("Nice for parties") +elif 80 <= volume < 100: + print("A bit loud!") +else: + print("My ears are hurting! :(") +``` + +Python послідовно виконує всі перевірки та друкує: + + $ python3 python_intro.py + Perfect, I can hear all the details + +### Підсумок + +В останніх трьох вправах ви освоїли такі поняття, як: + +- __порівняння__ - в Python можна порівнювати елементи використовуючи `>`, `>=`, `==`, `<=`, `<` та оператори `and`, `or` +- __Логічний тип - Boolean__ - тип об'єкту, що може дорівнювати лише одному з двох значень: `True`- Істинне або `False` - Хибне +- __Збереження файлів__ - зберігання коду в файлах дозволяє виконувати більші програми. +- __if...elif...else__ - умови, що дозволяють виконувати код лише коли виконуються певні умови. + +Час для останньої частини цього параграфу! + +## Ваші власні функції! + +Пам'ятаєте функції на зразок `len()`, що можна виконувати в Python? Що ж, гарні новини - зараз ви дізнаєтесь, як писати свої власні функції! + +Функція - це набір інструкцій, які Python повинен виконати. Кожна функція в Python починається із ключового слова `def`, отримує ім'я і може містити певні параметри. Почнемо з простого. Перепишемо код в **python_intro.py** наступним чином: + +```python +def hi(): + print('Hi there!') + print('How are you?') + +hi() +``` + +Окей, наша перша функція готова! + +Ви можете запитати, для чого ми написали ім'я функції наприкінці файлу. Це тому, що Python зчитує файл і виконує його згори донизу. Отже, для того, щоб скористатися нашою функцією, ми повинні написати її знову унизу. + +А тепер запустимо і подивимось, що станеться: + + $ python3 python_intro.py + Hi there! + How are you? + +Це було просто! Побудуємо нашу першу функцію з параметрами. Скористаємося попереднім прикладом - функцією, що говорить 'hi' особі, що її запускає - з іменем: + +```python +def hi(name): +``` + +Як бачимо, зараз ми задали для нашої функції параметр, який назвали `name`: + +```python +def hi(name): + if name == 'Ola': + print('Hi Ola!') + elif name == 'Sonja': + print('Hi Sonja!') + else: + print('Hi anonymous!') + +hi() +``` + +Пам'ятайте: функція `print` відділена відступами від команди `if` на чотири пробіли. Це тому, що функція запускається, коли виконується умова. Давайте подивимося, як це відбувається зараз: + + $ 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' + +Ой, помилка. На щастя, Python надає нам дуже корисне повідомлення про помилку. +Воно повідомляє нас про те, що функція `hi()` (та, яку ми визначили) має один необхідний аргумент (`name`) і що ми забули передати його, коли здійснювали виклик функції. +Виправимо це наприкінці файлу: + +```python +hi("Ola") +``` + +І запустимо знову: + + $ python3 python_intro.py + Hi Ola! + +А якщо ми змінимо ім'я? + +```python +hi("Sonja") +``` + +Запустимо: + + $ python3 python_intro.py + Hi Sonja! + +А тепер що ви думаєте про те, що станеться, якщо ми вкажемо тут інше ім'я? (Не Ola і не Sonja) Спробуємо і подивимося, чи ви маєте рацію. Маємо отримати на виході: + + Hi anonymous! + +Чудово, чи не так? Таким чином вам не потрібно повторюватись кожного разу, коли ви захочете змінити ім'я особи, з якою має вітатися наша функція. І саме тому нам потрібні функції - ви ж бо ніколи не хочете повторювати свій код! + +Виконаємо дещо складніші маніпуляції - існує безліч імен, набагато більше, ніж лише два, і написати умови для кожного з них буде досить складно, правда ж? + +```python +def hi(name): + print('Hi ' + name + '!') + +hi("Rachel") +``` + +А тепер виконаємо програму: + + $ python3 python_intro.py + Hi Rachel! + +Вітаємо! Ви щойно розібралися з тим, як писати функції :) + +## Цикли + +Це вже остання частина. Усе було швидко, чи не так? :) + +Програмісти не люблять повторюватись. Програмування - це процес автоматизації всього, тому ми не хочемо вітати кожну людину по імені вручну, правильно? Тут пригодяться цикли. + +Ще пам'ятаєте про списки? Давайте створимо список дівчат: + +```python +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +``` + +Ми б хотіли привітатися із кожною з них персонально. Щоб це зробити, у нас є функція `hi`, отже, використаємо її в циклі: + +```python +for name in girls: +``` + +Вираз ```for``` поводиться подібно до виразу ```if```, а код, наведений нижче повинен мати відступи в чотири пробіли. + +Тут наведено повну версію коду у файлі: + +```python +def hi(name): + print('Hi ' + name + '!') + +girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] +for name in girls: + hi(name) + print('Next girl') +``` + +А коли ми запустимо усе це: + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + +Як бачимо, все, що міститься всередині виразу `for` із відступом буде повторюватися для кожного елементу зі списку `girls`. + +Також можна використовувати `for` для чисел, використовуючи функцію `range`: + + for i in range(1, 6): + print(i) + +Що виведе на екран: + + 1 + 2 + 3 + 4 + 5 + +`range` - це функція, що створює список чисел, що йдуть одне за одним ці числа задаються вами як параметри). + +Зауважте, що друге з цих двох чисел, не входить до списку, що виводиться на екран Python (тобто `range(1, 6)` рахує від 1 до 5, але не включає число 6). Це тому, що "діапазон" є напіввідкритим, і під цим ми розуміємо, що він включає перше значення, але не останнє. + +## Підсумок + +Ось і все. __Ви молодці!__ Це був складнуватий розділ, тому ви можете пишатися собою. Ми ж безумовно пишаємося вами, адже ви вже багато чого досягли! + +Ви можете зробити коротку перерву - можливо потрібний відпочинок для ваших очей, розминка, невелика прогулянка, перш ніж перейдете до наступного розділу. :) + +![Cupcake](images/cupcake.png) diff --git a/uk/python_introduction/images/cupcake.png b/uk/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/uk/python_introduction/images/cupcake.png differ diff --git a/uk/template_extending/README.md b/uk/template_extending/README.md new file mode 100755 index 00000000000..8d35894913f --- /dev/null +++ b/uk/template_extending/README.md @@ -0,0 +1,134 @@ +# Розширення шаблону + +Інша хороша річ, яку має Django в своєму арсеналі - це __розширення шаблону__. Що це означає? Це значить, що ви можете використовувати одні й ті ж частини свого HTML коду для різних сторінок веб-сайту. + +Шаблони допомогають у випадку, коли ви хочете використати однакову інформацію/схему. Вам не потрібно повторюватись в кожному файлі. І якщо ви захочете щось змінити, то не доведеться це робити в кожному шаблоні, а лише один раз! + +## Створення базового шаблону + +Базовий шаблон - це основний шаблон, який ви будете розширювати для кожної сторінки вашого веб-сайту. + +Створимо файл `base.html` в `blog/templates/blog/`: + + blog + └───templates + └───blog + base.html + post_list.html + +Відкрийте його і скопіюйте усе з `post_list.html` до файлу `base.html`, як тут: + +```html +{% load static %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + +Далі для `base.html`, замініть ціле тіло `` (все між `` і ``) цим: + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + +{% raw %}Зауважте, це замінило все, починаючи від `{% for post in posts %}` до `{% endfor %}`, цим: {% endraw %} + +```html +{% block content %} +{% endblock %} +``` +Що це означає? Ви щойно створили блок `block`! Використали шаблонний тег `{% block %}` для того, щоб створити місце, в яке буде вставлено HTML. Цей HTML міститиметься в інших шаблонах, які розширюють цей шаблон (`base.html`). Скоро ми покажемо вам, як це зробити. + +А тепер збережіть зміни і відкрийте знову свій `blog/templates/blog/post_list.html`. +{% raw %}Видаліть усе, що вище `{% for post in posts %}` і нижче `{% endfor %}`. Коли ви закінчите, файл виглядатиме так:{% endraw %} + +```html +{% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+{% endfor %} +``` + +Ми хочемо використати це як частина нашого шаблону для всіх блоків контенту. +Час додати теги блоків до цього файлу! + +{% raw %}Ви хочете, щоб ваший тег блоку підходив до тегу у файлі `base.html`. Ви такоже хочете, щоб він включав в себе весь код, що належить вашим блокам з контентом. Щоб зробити це, розмістіть все між `{% block content %}` і `{% endblock %}`. Як тут: {% endraw %} + +```html + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` +Залишився один момент. Нам потрібно поєднати ці два шаблони разом. Це і є розширенням шаблонів. Ми зробимо це додаванням на початок файлу тегу розширення. Як тут: +```html +{% extends 'blog/base.html' %} + +{% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +{% endblock %} +``` + +Ось і все! Перевірте, чи ваш сайт все ще коректно працює :) + +> Якщо з'явилася помилка `TemplateDoesNotExists`, то це говорить про те, що файлу `blog/base.html` не існує і ви маєте в консолі запущений `runserver`, спробуйте зупинити його (натиснувши Ctrl+C - кнопки Control і C buttons разом) і перезавантажити командою `python manage.py runserver`. diff --git a/uk/whats_next/README.md b/uk/whats_next/README.md new file mode 100755 index 00000000000..349f6dc0008 --- /dev/null +++ b/uk/whats_next/README.md @@ -0,0 +1,26 @@ +# Що далі? + +Привітайте себе! __Ви абсолютно неймовірні.__ Ми пишаємося вами! <3 + +### Що тепер робити? + +Перепочиньте і розслабтеся. Ви щойно створили щось дійсно велике. + +Після цього переконайтеся, що ви: + +- Підписалися на Django Girls у [Facebook](http://facebook.com/djangogirls) або в [Twitter](https://twitter.com/djangogirls), щоб бути в курсі усіх подій + +### Чи можете ви порекомендувати інші джерела? + +Так! Спершу, спробуйте нашу іншу книгу [Django Girls Tutorial: Extensions](https://tutorial-extensions.djangogirls.org). + +Пізніше, ви можете спробувати джерела, перелічені нижче. Дуже рекомендуємо! +- [Django's official tutorial](https://docs.djangoproject.com/en/1.8/intro/tutorial01/) +- [New Coder tutorials](http://newcoder.io/tutorials/) +- [Code Academy Python course](https://www.codecademy.com/en/tracks/python) +- [Code Academy HTML & CSS course](https://www.codecademy.com/tracks/web) +- [Django Carrots tutorial](https://github.com/ggcarrots/django-carrots) +- [Learn Python The Hard Way book](http://learnpythonthehardway.org/book/) +- [Getting Started With Django video lessons](http://www.gettingstartedwithdjango.com/) +- [Two Scoops of Django: Best Practices for Django 1.8 book](https://twoscoopspress.com/products/two-scoops-of-django-1-8) +- [Hello Web App: Learn How to Build a Web App](https://hellowebapp.com/) diff --git a/zh/GLOSSARY.md b/zh/GLOSSARY.md new file mode 100755 index 00000000000..17ceeab9b1e --- /dev/null +++ b/zh/GLOSSARY.md @@ -0,0 +1,3 @@ +# 代码编辑器 + +代码编辑器是应用程序，允许您将保存您的代码，这样您可以稍后再打开它。 你可以从[代码编辑器](./code_editor/README.md)这一章节了解 \ No newline at end of file diff --git a/zh/README.md b/zh/README.md new file mode 100644 index 00000000000..f676385fa73 --- /dev/null +++ b/zh/README.md @@ -0,0 +1,82 @@ +# Django Girls 教程 + + [![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) + +> 这项工作是根据公共创意贡献署名国际协议4.0的要求完成的。若要查看本许可证的副本，请访问https://creativecommons.org/licenses/by-sa/4.0/ + +## 介绍 + +你有没有觉得世界越来越多的是关于技术，而你已经在某种程度上被甩在了后面？ 你有没有想去做一个网站，但是却从未有过足够的动力去开始吗? 你有没有想过软件世界太过复杂，即使你想做一些属于自己的东西？ + +好的，我们跟你讲一个好消息！编程没有看上去那么复杂，我们将给你展示它是多么的有趣。 + +本教程不会神奇地将你转变为程序员。 如果你想变得擅长于此，你需要数月乃至数年的时间去学习和练习。 但是我们想展示给你编程和创建网站没有看起来那么复杂。 我们试着用深入浅出的方法解释，所以你不会觉得被技术吓到。 + +我们希望我们可以让你变得更爱技术，像我们一样！ + +## 在本教程里你会学到什么？ + +一旦你完成本教程，你会有一个简单可用的web应用：你自己的博客。我们会教你怎么把它放到网上，这样别人就能看到你的作品！ + +它将（或多或少）看起来像这个样子： + +![图0.1][2] + + [2]: images/application.png + +> 如果你独自学习这个教程而苦于没有一位能帮你答疑解惑的的教练，我们给你提供交流的平台：[![Gitter](https://badges.gitter.im/Join Chat.svg)][1]。 我们要求我们的教练以及之前的参与者时不时到那里去，帮助其他人参与本教程！ 不要担心什么，尽管大胆地提问吧！ + +好嘞，[我们从头开始...][3] + + [3]: ./how_the_internet_works/README.md + +## 关于和贡献 + +这个教程由[DjangoGirls][4]维护。 如果你发现本网有任何错误或想更新教程，请按照 [贡献指导][5]行动. + + [4]: https://djangogirls.org/ + [5]: https://github.com/DjangoGirls/tutorial/blob/master/Contributing.md + +## 中文版的项献者 + +本教程的中文版由下列人员参与翻译,按名字首字母排名: +- Abraham Kan (abrahamkan) +- adv_zxy +- BigBagBOOM +- c2j +- classicalmu (zhanyanqiao) +- cnbabylinke +- Javen (javen_liu) +- jeff kit (bbmyth) +- Joker Qyou (Joker_Qyou) +- Kate Chan (kateismex0) +- liuzhongjun +- meelo +- neal1991 +- neoblackcap +- olasitarska +- pchnet +- rurong (defrur) +- Shit_JinP +- suusatoshigi (SuuSatoshigi) +- wangjiaxi +- wangshunping +- wly522 +- yinhm +- yobo (yfrancesc) +- Yue Du (ifduyue) +- zhangyi2099 +- Zhiheng Lin (onlyice0328) +- 刘奕聪(MrLYC) +- 芝加哥中文Meetup (chicagochinesemeetup) +- 陈艺虹(laceychen1993) + +## 你愿意帮我们翻译将本教程至其他语言吗？ + +目前，所有的翻译都储存于crowdin.com的平台，网址是: + +https://crowdin.com/project/django-girls-tutorial + +如果你在crowdin的列表里没看到自己的语言，请以[新开issue][6]的方式通知我们，以便我们加进去。 + + [6]: https://github.com/DjangoGirls/tutorial/issues/new diff --git a/zh/SUMMARY.md b/zh/SUMMARY.md new file mode 100755 index 00000000000..fafedd53db0 --- /dev/null +++ b/zh/SUMMARY.md @@ -0,0 +1,26 @@ +# 摘要 + +* [介绍](README.md) +* [安装](installation/README.md) +* [互联网是如何工作的？](how_the_internet_works/README.md) +* [命令行介绍](intro_to_command_line/README.md) +* [Python的安装](python_installation/README.md) +* [代码编辑器](code_editor/README.md) +* [Python 简介](python_introduction/README.md) +* [Django 是什么？](django/README.md) +* [Django安装](django_installation/README.md) +* [你的第一个Django 项目 ！](django_start_project/README.md) +* [Django模型](django_models/README.md) +* [Django管理](django_admin/README.md) +* [部署！](deploy/README.md) +* [Django urls](django_urls/README.md) +* [Django视图 - 抓紧时间去创建！](django_views/README.md) +* [HTML简介](html/README.md) +* [Django ORM (查询集)](django_orm/README.md) +* [模板中的动态数据](dynamic_data_in_templates/README.md) +* [Django模板](django_templates/README.md) +* [CSS - 让其更漂亮](css/README.md) +* [模板扩展](template_extending/README.md) +* [扩展您的应用](extend_your_application/README.md) +* [Django表单](django_forms/README.md) +* [接下来呢？](whats_next/README.md) diff --git a/zh/code_editor/README.md b/zh/code_editor/README.md new file mode 100755 index 00000000000..aa5f317f017 --- /dev/null +++ b/zh/code_editor/README.md @@ -0,0 +1,7 @@ +# 代码编辑器 + +你马上就要写下第一行代码，现在该下载一个代码编辑器了！ + +> **注意**在之前章节你可能已经完成了这一步，如果那样的话，你可以直接进入下一章节。 + +{% include "/code_editor/instructions.md" %} diff --git a/zh/code_editor/instructions.md b/zh/code_editor/instructions.md new file mode 100755 index 00000000000..da424920c91 --- /dev/null +++ b/zh/code_editor/instructions.md @@ -0,0 +1,31 @@ +有很多不同的编辑器，通常根据个人偏好选择。 大部分 Python程序员使用像 PyCharm这样复杂但是功能强大的IDE (集成开发环境)。 然而，这可能不太适合初学者。我们建议使用同样强大但是更为简单的编辑器。 + +下面是我们的建议，但是你可以随时咨询你的教练。那样会更容易得到他们的帮助。 + +## Gedit文本编辑器 + +Gedit 是开源、免费的编辑器，支持所有操作系统。 + +[在这里下载](https://wiki.gnome.org/Apps/Gedit#Download) + +## Sublime Text编辑器 + +Sublime Text 是一个很受欢迎的、免费试用的编辑器。它很容易安装和使用，并且支持所有操作系统。 + +[在这里下载](https://www.sublimetext.com/) + +## Atom编辑器 + +Atom 是 [GitHub](https://github.com/) 最新发布的代码编辑器。它开源、免费并且容易安装和使用。它可用于Windows、OSX和 Linux。 + +[在这里下载](https://atom.io/) + +## 我们为什么要安装代码编辑器？ + +你可能会疑惑为什么我们要安装代码编辑器软件，而不是使用如 Word 或记事本这样的软件。 + +第一个理由是代码应该是 **纯文本**，如 Word 和Textedit的程序实际上不能产生纯文本，它们产生富文本 (含有字体和格式)，使用自定义的格式，如 [RTF (Rich Text Format)](https://en.wikipedia.org/wiki/Rich_Text_Format). + +第二个原因是代码编辑器专长于编辑代码，因此它们可以提供一些有用的功能，比如代码高亮，比如自动闭合引用号。 + +以上这些我们将在实践中具体体会。很快你将会觉得，似乎过时的老文本编辑器正是最得心应手的工具！:) diff --git a/zh/css/README.md b/zh/css/README.md new file mode 100644 index 00000000000..9012f5ea7b6 --- /dev/null +++ b/zh/css/README.md @@ -0,0 +1,314 @@ +# CSS - 让它更好看！ + +我们的博客看起来仍然很丑吧？是时候来让它变得更好看了！为此，我们将引入CSS。 + +## 什么是 CSS？ + +层叠样式表(Cascading Style Sheets)是一种语言，用来描述使用标记语言(如HTML)写成的网站的外观和格式。把它当做我们网站的化妆 ;)。 + +但我们不想总是从零开始，对吧？ 我们将会再一次采用程序员们编写并发布到互联网上的免费玩意。 重新发明轮子十分无趣，你懂的。 + +## 让我们用 Bootstrap 吧！ + +Bootstrap是最流行的HTML和CSS框架之一，它可以用来开发炫酷的网站:https://getbootstrap.com/ + +起初，它由Twitter的程序员编写，现在由来自世界各地的志愿者写的。 + +## 安装 Boostrap + +若要安装Bootstrap，您需要将它添加到你的 `.html` 文件的 `` 中： + +{% filename %}blog/templates/blog/post_list.html{% endfilename %} +```html + + +``` + +这不会向你的项目添加任何文件。它只是指向在互联网上存在的文件。只需要继续打开您的网站并刷新页面。你瞧！ + +![图 14.1][1] + + [1]: images/bootstrap1.png + +已经变得更好看了！ + +## Django 中的静态文件 + +最后我们来看看这些我们叫做**静态文件**的东西。 静态文件是指你所有的CSS文件和图片文件，这些文件不是动态的，对所有用户都是一样，不会因为请求内容而发生变化。 + +### Django的静态文件放在哪儿呢？ + +Django已经知道到何处找到内建“admin”应用的静态文件。现在我们只需要给我们的`blog`应用添加一些静态文件。 + + +我们在blog应用的目录下创建一个名为`static`的文件夹，创建后目录结构如下： + +``` + djangogirls + ├── blog + │ ├── migrations + │ ├── static + │   └── templates + └── mysite +``` + + +Django会自动找到你应用文件夹目录下所有名字叫“static”的文件夹，并能够使用其中的静态文件。 + +## 你的第一个 CSS 文件！ + +现在让我们创建一个 CSS 文件，为了在您的 web 页中添加你自己的风格。 在`static` 的目录下创建一个新的目录称为 `css` 。 然后，在这个 `css` 目录里创建一个新的文件，称为 `blog.css` 。 准备好了吗？ + +``` + djangogirls + └─── blog + └─── static + └─── css + └─── blog.css +``` + + +是时候来写一些CSS了！首先用你的代码编辑器打开`blog/static/css/blog.css`。 + +在这里我们不会太深入学习自定义和关于 CSS的内容 ，因为这些内容很容易而且您可以在本教程结束后自行学习。这页的最后会推荐一个免费课程来学习更多相关的内容。 + +但至少要做一点吧。 也许我们可以改变我们标题的颜色？ 计算机使用特殊的编码来了解颜色。 它们以 `#`开始，后面跟着 6 个字母 （A 到 F) 或数字 (0-9)。例如，蓝色的的编码是`#0000FF` 你在这里可以发现许多颜色的编码： http://www.colorpicker.com/。 你也可以使用 [预先定义的颜色][3]，如 `red` 和 `green`。 + + [3]: http://www.w3schools.com/cssref/css_colornames.asp + +在你的`blog/static/css/blog.css`文件中添加下面的代码: + +```css + h1 a { + color: #FCA205; + } +``` + + +`h1 a`是CSS选择器。 这意味着我们要将我们的样式应用于在 `h1` 元素的任何 `a` 元素 。所以，当我们的代码中有类似`

link

`的代码， 上述的样式就会被应用。在这种情况下，我们会告诉它要改变其颜色为 `#FCA205`，它是橙色的。 当然，你可以把自己的颜色放在这里！ + +在 CSS 文件中，我们决定HTML 文件中元素的样式。我们标识元素的第一种方式是用元素名。你可能把来自于HTML段落的这些元素名当做了标签记忆。 例如`a`，`h1`，`body`，这些都是元素名。我们也用属性去标识元素，如 `class` 或属性 `id` 。 类和 id 是你自己给该元素的命名。 类定义元素组，并指向特定元素的 id。 例如，可以使用标记名称 `a`、 类 `external_link` 或 id `link_to_wiki_page` 标识以下标签： + + +```html + +``` + + +可以在 [CSS Selectors in w3schools][4]了解更多. + + [4]: http://www.w3schools.com/cssref/css_selectors.asp + +我们还需要告诉我们的 HTML 模板，我们添加了一些 CSS。打开 `blog/templates/blog/post_list.html` 文件并在文件最开始的地方添加以下代码： + +```html + {% load staticfiles %} +``` + + +我们刚刚加载了静态文件到这里（译者注：这里实际上是为模板引入staticfiles相关的辅助方法）：）。 然后，在`` 和 ``之间，在Bootstrap的CSS文件的引导之后添加以下行： + +```html + +``` + +浏览器按照给定文件的顺序读取文件，所以我们需要确保代码在正确的位置，否则我们文件中的代码可能会覆盖Bootstrap文件中的代码。我们只是告诉我们的模板我们的 CSS 文件所在的位置。 + +现在，您的文件应该像这样： + +```html + {% load staticfiles %} + + + Django Girls blog + + + + + + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + + +``` + + +好的保存该文件并刷新网站 ！ + +![图 14.2][5] + + [5]: images/color2.png + +干得好 ！我想，也许我们也给我们的网站一点空间并增加左边缘。让我们来试试这个 ！ + +```css + body { + padding-left: 15px; + } +``` + + +将它添加到你的 css 代码，保存该文件并查看它如何工作 ！ + +![图 14.3][6] + + [6]: images/margin2.png + +也许我们可以在我们的头中自定义字体吗？粘贴到你的 `< head >` 在 `blog/templates/blog/post_list.html` 文件中： + +```html + +``` + + +这行将从谷歌的字体 （ https://www.google.com/fonts ） 中导入称为 *龙虾*的字体 。 + +现在添加一行 `font-family: 'Lobster';` 到CSS文件 `blog/static/css/blog.css` 的 `h1 a` 声明块中(花括弧 `{` 与 `}` 之间的代码)，然后刷新页面： + +```css + h1 a { + color: #FCA205; + font-family: 'Lobster'; + } +``` + + +![图 14.3][7] + + [7]: images/font.png + +太棒了！ + +如上文所述，CSS 有一个概念叫做类，其中基本上允许您命名的 HTML 代码的一部分并只对这部分应用样式，不会影响其他部分。 它是超级有用的如果你有两个 div，但他们有些很多不一样 （如您的标题和你的帖子）。类可以帮你让它们看起来不同。 + +继续命名部分HTML 代码。添加一个称为 `page-header` 的类到您的 `div`中，其中包含您的标题，像这样： + +```html +
+

Django Girls Blog

+
+``` + + +和现在将包含一篇博客文章的类`post`添加到您的 `div` 。 + +```html +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+``` + + +现在，我们将向不同的选择器添加声明块。 选择器以 `.` 开始，关联到类。 网络上有很多很棒的CSS教程以及相关解释，帮助您理解下面的代码。 至于现在，就简单地复制粘贴到你的 `blog/static/css/blog.css` 文件中吧。 + +```css + .page-header { + background-color: #ff9400; + margin-top: 0; + 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; + } + + .content { + margin-left: 40px; + } + + h1, h2, h3, h4 { + font-family: 'Lobster', cursive; + } + + .date { + float: right; + color: #828282; + } + + .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 { + margin-bottom: 70px; + } + + .post h1 a, .post h1 a:visited { + color: #000000; + } +``` + + +然后将文章的HTML代码用类声明包裹起来。替换以下内容： + +```html + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +``` + + +在 `blog/templates/blog/post_list.html` 是这样的： + +```html +
+
+
+ {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+``` + + +保存这些文件并刷新您的网站。 + +![图 14.4][8] + + [8]: images/final.png + +呜呼 ！看起来棒极了，是吧？看看我们刚在HTML粘贴加入的类以及在CSS中使用的代码。如果你想要时间变成绿松石色，你该在哪里做改变呢？ + +不要害怕摆弄这个 CSS，并试图去改变一些东西。调整CSS可以帮你搞明白不同的东西怎样工作。如果你做错了什么东西，别担心，您总是可以撤消它 ！ + +我们非常建议在线免费学习这个 [Codeacademy HTML 和 CSS 课程][2] 。它可以帮你学到一切你需要知道的有关如何通过CSS使你的网站更漂亮。 + + [2]: https://www.codecademy.com/tracks/web + +准备好下一章了吗？:) diff --git a/zh/css/images/bootstrap1.png b/zh/css/images/bootstrap1.png new file mode 100644 index 00000000000..bd81cd14373 Binary files /dev/null and b/zh/css/images/bootstrap1.png differ diff --git a/zh/css/images/color2.png b/zh/css/images/color2.png new file mode 100644 index 00000000000..3f82e7d3922 Binary files /dev/null and b/zh/css/images/color2.png differ diff --git a/zh/css/images/final.png b/zh/css/images/final.png new file mode 100644 index 00000000000..067c83d36cc Binary files /dev/null and b/zh/css/images/final.png differ diff --git a/zh/css/images/font.png b/zh/css/images/font.png new file mode 100644 index 00000000000..310f9e85f18 Binary files /dev/null and b/zh/css/images/font.png differ diff --git a/zh/css/images/margin2.png b/zh/css/images/margin2.png new file mode 100644 index 00000000000..895828b688d Binary files /dev/null and b/zh/css/images/margin2.png differ diff --git a/zh/deploy/README.md b/zh/deploy/README.md new file mode 100755 index 00000000000..0aa570e2fdd --- /dev/null +++ b/zh/deploy/README.md @@ -0,0 +1,314 @@ +# 部署！ + +> **注** 这一章可以有时有点难打通。 坚持并完成它 ；部署是在网站开发过程的重要组成部分。 这一章放在本教程的中部，因此你的指导者可以帮助你在使网站上线中的一些小困难。 这意味着如果您花大量的时间，你仍然能独立完成这个教程。 + +到目前为止您的网站只是在您的计算机上可用，现在您将了解如何部署它 ！ 部署是在互联网上发布你的应用程序的一系列过程，因此人们最终可以一起去看看你的应用程序。 + +正如你所学习的，一个网站必须要放到一个服务器上。 在互联网上你可以找到很多的服务器供应商。 我们将使用一个相对简单的部署过程: [PythonAnywhere][1]。 PythonAnywhere 对于一些没有太多访问者的小应用是免费的，所以它对你来说绝对是足够使用的。 + + [1]: https://www.pythonanywhere.com/ + +其它我们将使用到的外部服务是[GitHub][2]，它是一个代码托管服务。 还有其它的一些服务，但当今几乎所有的程序员都有 GitHub 帐户，并且现在你也会有的！ + + [2]: https://www.github.com + +我们将使用 GitHub 作为基石，以和 PythonAnywhere 互相传输我们的代码。 + +# Git + +Git是一个被大量程序员使用的"版本控制系统"。 此软件可以跟踪任何时间文件的改变，这样你以后可以随时召回某个特定版本。 有点像Microsoft Word 的"跟踪更改"功能 ，但更强大。 + +## 安装Git + +> **注意** 如果你已经做过安装步骤了，你可以直接跳过这个步骤开始创建你自己的Git版本库。 + +{% include "/deploy/install_git.md" %} + +## 开始我们自己的Git版本库 + +Git跟踪一组特定的在代码仓库（或简称“仓库”）中文件的更改。 我们开始用git管理自己的项目吧。 打开你的终端，进入 `djangogirls` 文件夹运行以下的命令： + +> **注意** 在初始化仓库之前，请使用 `pwd`命令 (OSX/Linux) 或者 `cd` (Windows) 命令检查你当前的工作目录。 你应该是在 `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 + + +每个项目我们只需要初始化一次Git仓库（而且你从此不需要重新输入用户名和邮箱）。 + +Git会追踪这个目录下所有文件和文件夹的更改，但是有一些文件我们希望Git忽略它。 为此，我们可以在系统根目录下创建一个命名为 `.gitignore` 的文件。 打开编辑器，创建新文件并写入以下内容： + + *.pyc + __pycache__ + myvenv + db.sqlite3 + .DS_Store + + +然后在djangogirls项目根目录下保存为 `.gitignore`文件。 + +> **注意** 在文件名最前面的"."很重要。 如果你在创建文件的时候有困难(例如，Macs不能通过Finder创建开头为"."的文件), 可以在编辑器里点击"另存为", 这个没问题的。 + +在执行git操作之前，最好使用 `git status` 命令查看一下当前的状态，尤其是在执行 `git add`或者在你不确定哪些文件被改动的情况下。 这有助于阻止各种意外发生，例如错误的文件被添加或提交。 `git status` 命令会返回所有未追踪/修改/暂存的文件，还有分支状态等信息。 输出会是这样： + + $ 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) + + +最后保存我们的更改。转到你的控制台并运行这些命令： + + $ 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 + + +## 推送我们的代码到 GitHub 上 + +跳转到[GitHub.com][2]网站，注册一个新的免费账号。（如果你在看线下活动之前就已经有账号的话，那就太好了！） + +现在，创建一个新的仓库，命名为“my-first-blog”。 保持 "initialise with a README" 复选框未选中状态，.gitignore 选项为无 (我们已经手动创建了) ，让License设置为无。 + +![][3] + + [3]: images/new_github_repo.png + +> **注意** `my-first-blog`这个名字很重要 — 你可以用其它的，但是这个名字会在教程中出现多次，你需要确保每次都替换掉它。 保持用 `my-first-blog` 这个名字可能更为简单. + +在下一屏中，你将看到你的仓库克隆 URL。选择“HTTPS”版本，拷贝地址，我们马上要把它粘贴到终端： + +![][4] + + [4]: images/github_get_repo_url_screenshot.png + +现在我们需要把你电脑上的Git仓库和GitHub上的挂接。 + +在控制台输入以下内容（替换 `` 为你的 github 用户名 ，不包含尖括号）： + + $ git remote add origin https://github.com//my-first-blog.git + $ git push -u origin master + + +输入你的GitHub账号名和密码，然后你会看到这样： + + 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. + + + + +你的代码已经在GitHub上了。 快去确认一下吧！ 你会发现这些好家伙们 — [Django][5], [Django Girls Tutorial][6]，还有很多其它优秀的开放源代码软件项目同样也在GitHub上 :) + + [5]: https://github.com/django/django + [6]: https://github.com/DjangoGirls/tutorial + +# 在 PythonAnywhere 设置我们的博客 + +> **注意** 你可能在之前的安装步骤中已经创建 PythonAnywhere 账户 — 如果是的话，那么无需再来一次。 + +{% include "/deploy/signup_pythonanywhere.md" %} + +## 在 PythonAnywhere 上拉取我们的代码 + +当然注册完 PythonAnywhere，你讲会转到仪表盘或“控制台”页面。 选择启动“Bash”控制台这一选项 — 这是 PythonAnywhere 版的控制台，就像你本地电脑上的一样。 + +> **注意** PythonAnywhere 基于 Linux，因此如果你使用 Windows，控制台将会和你本地电脑上的略有不同。 + +让我们通过创建一个我们仓库的 “Clone” 以便从 GitHub 拉取代码到 PythonAnywhere。 在 PythonAnywhere 控制台输入以下 (不要忘记使用 GitHub 用户名替换 ``)： + + $ git clone https://github.com//my-first-blog.git + + +这将会拉取一份你的代码副本到 PythonAnywhere 上。通过键入`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 + + +### 在 PythonAnywhere 上创建 virtualenv + +如同你在自己电脑上做的，你可以在 PythonAnywhere 上创建 virtualenv 虚拟环境。在 Bash 控制台下，键入： + + $ 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 + + +> **注意** `pip 安装` 步骤可能需要几分钟。 耐心，耐心！但是如果超过 5 分钟，就不对劲了。 问问你的教练。 + + + +### 收集静态文件。 + +你可曾好奇，什么是"whitenoise"白噪音？ 它是用来服务所谓的“static files”静态文件的工具。 静态文件是很少改动或者并非可运行的程序代码的那些文件，比如 HTML 或 CSS 文件。 在我们的计算机上，它们以不同的方式工作，我们需要比如“whitenoise”这样的工具来为其服务。 + +在教程后续编辑网站 CSS 章节会介绍更多有关静态文件的内容。 + +暂且我们只需要在服务器上运行一个额外的命令，就是 `collectstatic`。 它告诉 Django 去收集服务器上所有需要的静态文件。 就眼下来说主要是使admin管理界面看起来更漂亮的文件。 + + (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 + + +键入 "yes", 然后它会自行运转！你可喜欢让计算机打印一页一页令人费解的文本？ 我总会弄点噪音作为伴奏。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'. + + +### 在 PythonAnywhere 上创建数据库 + +服务器与你自己的计算机不同的另外一点是：它使用不同的数据库。因此用户账户以及文章和你电脑上的可能会有不同。 + +我们可以像在自己的计算机上一样在服务器上初始化数据库，使用 `migrate` 以及 `createsuperuser`： + + (mvenv) $ python manage.py migrate + Operations to perform: + [...] + Applying sessions.0001_initial... OK + + + (mvenv) $ python manage.py createsuperuser + + Context | Request Context + + + +## 将我们的博客发布为一个网络应用程序 + +现在我们的代码已在PythonAnywhere上，我们的 virtualenv 已经准备好，静态文件已收集，数据库已初始化。我们准备好发布网络应用程序！ + +通过点击 logo 返回到 PythonAnywhere 仪表盘，然后点击 **Web** 选项卡。最终，点 **Add a new web app**. + +在确认你的域名之后，选择对话框中 **manual configuration** (注 *不是* "Django" 选项) ： 下一步选择 **Python 3.4**，然后点击 Next 以完成该向导。 + +> **注意** 确保你选中 "Manual configuration" 选项，而不是 "Django" 那个。我们太牛逼，所以不要用 PythonAnywhere Django 默认设置 ;-) + +### 设置 virtualenv + +你将会被带到 PythonAnywhere 上你的Web 应用程序的配置屏，那个页面是每次你想修改服务器上你的应用程序时候要去的页面。 + +![][7] + + [7]: images/pythonanywhere_web_tab_virtualenv.png + +在 “Virtualenv” 一节，点击红色文字 “Enter the path to a virtualenv"，然后键入： `/home//my-first-blog/myvenv/`。 前进之前，先点击有复选框的蓝色框以保存路径。 + +> **注意** 替换你自己的用户名。如果你犯了错，PythonAnywhere 会显示一个小警告。 + +### 配置 WSGI 文件 + +Django 使用 “WSGI 协议”，它是用来服务 Python 网站的一个标准。PythonAnywhere 支持这个标准。 PythonAnywhere 识别我们 Django 博客的方式是通过配置 WSGI 配置文件。 + +点击 “WSGI configuration file” 链接（在 "Code" 一节，接近页面上方 — 它将被命名为如 `/var/www/_pythonanywhere_com_wsgi.py`），然后跳转到一个编辑器。 + +删除所有的内容并用以下内容替换： + + import os + import sys + + path = '/home//my-first-blog' # use your own username here + if path not in sys.path: + sys.path.append(path) + + os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings' + + from django.core.wsgi import get_wsgi_application + from whitenoise.django import DjangoWhiteNoise + application = DjangoWhiteNoise(get_wsgi_application()) + + +> **注意** 当看到 ``时，别忘了替换为你自己的用户名。 + +这个文件的作用是告诉 PythonAnywhere 我们的Web应用程序在什么位置，Django 设置文件的名字是什么。它也设置 "whitenoise" 静态文件工具。 + +点击 **Save** 然后返回到 **Web** 选项卡。 + +一切搞定！点击大大的绿色 **Reload** 按钮然后你将会看到你的应用程序。页面的顶部可以看到它的链接。 + +## 调试小贴士 + +如果你在访问你的网站时候看到一个错误，首先要去 **error log** 中找一些调试信息。 你可以在 PythonAnywhere [Web 选项卡][8] 中发现它的链接。 检查那里是否有任何错误信息，底部是最新的信息。 常见问题包括： + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +* 忘记我们在控制台中的步骤之一：创建 virtualenv，激活它，安装 Django 进去，运行 collectstatic，迁移数据库。 + +* 在 Web 选项卡中，virtualenv 路径设置错误 — 如果真是这样，这通常会是一个红色错误消息。 + +* WSGI 文件设置错误 — 你的 my-first-blog 目录地址设置是否正确？ + +* 你是否为你的 virtualenv 选择了同样的 Python 版本，如同 Web 应用程序里的那样？两个应该都是 3.4。 + +* 有一些常见的调试小贴士在 [general debugging tips on the PythonAnywhere wiki][9] 里. + + [9]: https://www.pythonanywhere.com/wiki/DebuggingImportError + +记住，你的教练会在这里帮你！ + +# 你上线了！ + +你网站的默认页面说 “Welcome to Django”，如同你本地计算机上的一样。 试着添加 `/admin/`到URL的末尾，然后你会到达管理者的页面。 输入用户名和密码登录，然后你会看到服务器上的 add new Posts 。 + +给你自己一个*超大*的鼓励！ 服务器部署是web开发中最棘手的部分之一， 它通常要耗费人们几天时间才能搞定。 但你的网站已经上线，运转在真正的互联网上，就是这样！ diff --git a/zh/deploy/images/github_get_repo_url_screenshot.png b/zh/deploy/images/github_get_repo_url_screenshot.png new file mode 100644 index 00000000000..ee1560b1e85 Binary files /dev/null and b/zh/deploy/images/github_get_repo_url_screenshot.png differ diff --git a/zh/deploy/images/new_github_repo.png b/zh/deploy/images/new_github_repo.png new file mode 100644 index 00000000000..d1f82e5d863 Binary files /dev/null and b/zh/deploy/images/new_github_repo.png differ diff --git a/zh/deploy/images/pythonanywhere_web_tab_virtualenv.png b/zh/deploy/images/pythonanywhere_web_tab_virtualenv.png new file mode 100644 index 00000000000..6069f6da831 Binary files /dev/null and b/zh/deploy/images/pythonanywhere_web_tab_virtualenv.png differ diff --git a/zh/deploy/install_git.md b/zh/deploy/install_git.md new file mode 100755 index 00000000000..4b0841daa08 --- /dev/null +++ b/zh/deploy/install_git.md @@ -0,0 +1,17 @@ +### Windows系统 + +你可以从 [git-scm.com](https://git-scm.com/) 下载Git。 你可以在所有的安装步骤中点击"next next next"，除了第5步"Adjusting your PATH environment"，需要选择"Run Git and associated Unix tools from the Windows command-line"(底部的选项)。 除此之外，默认值都没有问题。 签出时使用 Windows 风格的换行符，提交时使用 Unix 风格的换行符，这样比较好。 + +### MacOS系统 + +从[git-scm.com](https://git-scm.com/)下载Git,根据说明操作。 + +### Linux系统 + +如果git还没有被安装的话，你可以从你的软件包管理器中下载git, 请试试下面命令: + + sudo apt install git + # or + sudo yum install git + # or + sudo zypper install git diff --git a/zh/deploy/signup_pythonanywhere.md b/zh/deploy/signup_pythonanywhere.md new file mode 100755 index 00000000000..d9aa35e29d6 --- /dev/null +++ b/zh/deploy/signup_pythonanywhere.md @@ -0,0 +1,5 @@ +下一步，在PythonAnywhere注册一个“Beginner”账户。 + + * [www.pythonanywhere.com](https://www.pythonanywhere.com/) + +> **注意** 在这里选择的用户名会出现在博客链接的地址当中`yourusername.pythonanywhere.com` ，因此最好选择你自己的绰号或者是与博客内容相关的名字。 \ No newline at end of file diff --git a/zh/django/README.md b/zh/django/README.md new file mode 100755 index 00000000000..0a67bddd664 --- /dev/null +++ b/zh/django/README.md @@ -0,0 +1,27 @@ +# Django 是什么？ + +Django （*/ˈdʒæŋɡoʊ/jang-goh*） 是用 Python 写的一个自由和开放源码 web 应用程序框架。 web框架是一套组件，能帮助你更快、更容易地开发web站点。 + +当你开始构建一个web站点时，你总需要一些相似的组件：处理用户认证（注册、登录、登出）的方式、一个管理站点的面板、表单、上传文件的方式，等等。 + +幸运的是，其他人很早就注意到web开发人员会面临一些共同的问题。所以他们联手创建了 web 框架（Django 是其中一个）来让你使用。 + +由于框架的存在，你无需重新发明轮子就能建立新的站点。 + +## 你为什么需要一个框架？ + +要理解什么是Django， 我们需要更仔细的看一下服务器。 服务器需要知道的第一件事就是你希望它为你的网页做什么。 + +想象一个用来监控接收邮件（请求）的邮箱（端口）。 这就是网站服务器做的事情。 网站服务器读这封信，然后将响应发送给网页。 但是当你想发送一些东西的时候，你必须要有一些内容。 而Django就是可以帮助您创建内容的工具。 + +## 当有人向您的服务器请求一个网站，会发生什么呢？ + +当一个请求到达网站服务器，它会被传递到Django，试图找到实际上什么是被请求的。 它首先会拿到一个网页的地址，然后试图去弄清该做什么。 这个部分是由Django的**urlresolver**（url解析器。注意一个网站的地址被叫做URL，统一资源定位器，所以*url解析器*是有意义的）。 它并不十分聪明，他接受一个模式列表，然后试图去匹配 URL。 Django从顶到底检查模式，如果有匹配上的，那么Django会将请求传递给相关的函数（这被称作*视图*）。). + +想象一个邮递员拿着一封信。 她沿着街区走下去，检查每一个房号与信件地址是否对应。 如果匹配上了，她就把信投在那里。 这也是url解析器的工作方式！ + +在*视图*函数里做了很多有趣的事情：我们能在数据库中寻找到一些信息。 如果用户要求修改数据呢？ 就像一封信里说，“请修改我的工作描述”，*视图* 将检查是否你允许它这么干，然后更新工作描述并发回一个消息：“做完了”。 然后*视图*生成响应，并且Django能够发送给用户的web浏览器。 + +当然，上述的描述是有一些简化的，但是你不需要去知道所有的技术的东西。有一个大概的想法就够了。 + +所以不要太过深入细节，我们会简单用Django创建一些东西，然后我们会在学习的路上学到所有重要的部分！ \ No newline at end of file diff --git a/zh/django_admin/README.md b/zh/django_admin/README.md new file mode 100755 index 00000000000..88a5cd8ed52 --- /dev/null +++ b/zh/django_admin/README.md @@ -0,0 +1,48 @@ +# Django admin 管理后台 + +我们将使用 Django admin 添加，编辑和删除我们刚刚创建的帖子。 + +让我们打开`blog/admin.py`文件，并替换其中的文件像这样： + +```python +from django.contrib import admin +from .models import Post + +admin.site.register(Post) +``` + +如你所见，我们导入（包括）了前一章定义的Post模型。 为了让我们的模型在admin页面上可见，我们需要使用`admin.site.register(Post)`来注册模型. + +OK, 现在来看看我们的 Post 模型。 记得先在控制台输入`python manage.py runserver`启动服务器。 然后打开浏览器，输入地址 http://127.0.0.1:8000/admin/ 你会看到登录界面像这样: + +![登录页面][1] + + [1]: images/login_page2.png + +为了登录, 你需要创建一个掌控整个网站所有东西的*超级用户*。 回到刚才的命令行，输入`python manage.py createsuperuser`，按下Enter。 然后输入你的用户名(英文小写，不包括空格), 邮箱和密码。 你输密码的时候看不见输入？别担心，它就是这样的。 你就输入要输得到然后按`Enter`继续就好了。 输出应该长得像这样（用户名和邮箱应该是你自己的）： + + (myvenv) ~/djangogirls$ python manage.py createsuperuser + Username: admin + Email address: admin@admin.com + Password: + Password (again): + Superuser created successfully. + + +返回到你的浏览器，用你刚才的超级用户来登录，然后你应该能看到Django admin的管理面板。 + +![Django管理][2] + + [2]: images/django_admin3.png + +到 Posts 页面多试几次，发布5、6条博客文章，不用担心你的文章内容，你可以复制粘贴这个教程的一些文字，这样比较节约时间 :)。 + +请确保至少有两到三个帖子（但不是全部）具有设置的发布日期。它在以后会有用。 + +![Django管理][3] + + [3]: images/edit_post3.png + +如果你想更多地了解Django admin模块，你可以查看Django 的官方文档:https://docs.djangoproject.com/en/1.8/ref/contrib/admin/ + +现在你可以来杯咖啡(或者是茶) 或吃点东西给自己充下电，你刚刚创建了你的第一个Django模型，你应该休息一下。 diff --git a/zh/django_admin/images/django_admin3.png b/zh/django_admin/images/django_admin3.png new file mode 100644 index 00000000000..ea01ab951bf Binary files /dev/null and b/zh/django_admin/images/django_admin3.png differ diff --git a/zh/django_admin/images/edit_post3.png b/zh/django_admin/images/edit_post3.png new file mode 100644 index 00000000000..d577b111424 Binary files /dev/null and b/zh/django_admin/images/edit_post3.png differ diff --git a/zh/django_admin/images/login_page2.png b/zh/django_admin/images/login_page2.png new file mode 100644 index 00000000000..6ae26e9959a Binary files /dev/null and b/zh/django_admin/images/login_page2.png differ diff --git a/zh/django_forms/README.md b/zh/django_forms/README.md new file mode 100755 index 00000000000..7af33e31d12 --- /dev/null +++ b/zh/django_forms/README.md @@ -0,0 +1,426 @@ +# Django表单 + +我们最后一件关于我们的网站的事情就是创建一个漂亮的方式来增加和编辑博客文章。 Django的`管理`是很酷，但是它很难去自定义，变得更漂亮。 通过`forms`，我们可以拥有对我们界面绝对的权利—我们能够做几乎我们能想象到的所有事情！ + +Django表单的一个好处就是我们既可以从零开始自定义，也可以创建`ModelForm`，它将表单的结果保存到模型里。 + +这正是我们想做的：我们将为我们自己的`Post`模型创建一个表单。 + +就像所有Django的重要部分一样，表单有他们自己的文件`forms.py`。. + +我们需要创建一个文件，把它的名字放在`blog`目录下。 + +``` + blog + └── forms.py +``` + + +好吧，让我们打开它，然后键入以下代码： + +```python +from django import forms + +from .models import Post + +class PostForm(forms.ModelForm): + + class Meta: + model = Post + fields = ('title', 'text',) +``` + + +首先我们需要导入Django表单（`from django import forms`）然后，显然是我们的`Post`模型（`from .models import Post

+ +

PostForm`, 正如你所猜想的，是我们表单的名字。 我们需要告诉Django，这个表单是一个`ModelForm`（所以Django将会为我们变一些魔法）—`forms.ModelForm`对此负责。 + +下面，我们有`class Meta`，在这里我们告诉Django哪个模型会被用来创建这个表单（`model=Post`）。). + +最后，我们可以说哪些字段会在我们的表单里出现。 在这个场景里，我们只想要`title`和`text`显示出来—`author`应该是当前登录的人（你！）然后`created_date`应该是我们创建文章时自动分配的（比如，在代码里），对吗？ + +就是这样！现在我们所有要做的就是在*视图*里使用表单，然后展现在在模板里。 + +所以下次我们将会创建：一个指向页面的链接，一个URL，一个视图和一个模板。 + +## 指向页面表单的链接 + +是时候打开`blog/templates/blog/base.html`了。我们将添加一个链接到`div`，命名为`page-header`： + +```html + +``` + + +请注意我们想要调用我们的新视图`post_new`. + +添加了新的行后，你的html文件现在应该看起来像这样： + +```html + {% load staticfiles %} + + + Django Girls blog + + + + + + +

+ +

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ + +``` + + +然后保存，刷新 http://127.0.0.1:8000 页面，你可以明显地看到一个熟悉的`NoReverseMatch`错误信息，是吧？ + +## URL + +我们打开`blog/urls.py`然后添加一个新行： + +```python + url(r'^post/new/$', views.post_new, name='post_new'), +``` + + +最终代码会看起来像这样： + +```python +from django.conf.urls import url +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'), +] +``` + + +刷新网页后，我们看到一个`AttributeError`，因为我们没有实现`post_new`视图。让我们现在把它加上吧。 + +## post_new视图 + +现在打开`blog/views.py`文件，加入下面的各行到`from`行下： + +```python +from .forms import PostForm +``` + + +还有我们的*view*： + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + + +为了创建一个新的`Post`表单，我们需要调用`PostForm()`，然后把它传递给模板。 我们会回到这个*视图*，但是现在，让我们为这个表单快速创建一个模板。 + +## 模板 + +我们需要在`blog/templates/blog`目录下创建一个文件`post_edit.html`。为了创建一个表单，我们需要几件事情： + +* 要展示表单，我们只需要很简单地加上`{% raw %}{{ form.as_p }}{% endraw %}`. +* 上面的这行需要被HTML表单标签包裹：`...` +* 我们需要一个`Save`按钮。我们通过使用一个HTML按钮来完成：`` +* 最后在`
`标签后，我们需要加上`{% raw %}{% csrf_token %}{% endraw %}`。 这个非常重要，因为他会让你的表单变得更安全！ Django会提醒你，当你试图保存表单而你又恰巧忘了这一点： + +![CSFR Forbidden page][1] + + [1]: images/csrf2.png + +好，让我们看看HTML 在`post_edit.html`里应该看起来什么样： + +```html + {% extends 'blog/base.html' %} + + {% block content %} +

New post

+ {% csrf_token %} + {{ form.as_p }} + +
+ {% endblock %} +``` + + +现在刷新！哇！你的表单显示出来了！ + +![新表单][2] + + [2]: images/new_form2.png + +但是，请等一下！当你键入诸如`title`和`text`字段，然后视图保存它—下面会发生什么？ + +什么都没有！我们再一次回到了同一个页面，然而我们的文本已经消失了...同时没有新的文章被发布。所以错在哪里了呢？ + +答案是：没有错误。我们需要在我们的*视图*里做更多的工作. + +## 保存表单 + +再一次打开`blog/views,py`。我们在看到`post_new`中的视图内容是: + +```python +def post_new(request): + form = PostForm() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + + +当我们提交表单，我们都回到相同的视图，但是这个时候我们有一些更多的数据在 `request`，更具体地说在 `request.POST` (命名和博客后缀"post"无关，它只是用来帮我们"上传"数据)。 还记得在HTML文件里，我们的`
`定义有一个方法`method="POST"`？ 现在所有从表单来的东西都在`request.POST`. 你不应该重命名`POST`为其他任何东西（其他唯一有效的`method`值是`GET`，但是我们没有时间去解释它们两者的区别是什么）。 + +所以在我们的*视图*里，我们有了两种不同的情况去处理。 首先：当我们首次访问一个页面，我们想要得到一个空白的页面。 第二：当我们回到*视图*，要有我们所有我们刚刚键入的数据。 所以我们需要添加一个条件判断（我们为此使用`if`）。 + +```python + if request.method == "POST": + [...] + else: + form = PostForm() +``` + + +现在去填写`[...]`。如果`method` 是 `POST`，那么我们要用表单里的数据构建`PostForm`，对吗？我们会这样做： + +```python + form = PostForm(request.POST) +``` + + +很容易吧！下一件事情就是去检查表单是否正确（所有必填字段都要被设置并且不会保存任何不正确的值）。我们将使用`form.is_valid()`来实现. + +我们检查表单是否正确，如果是我们就保存它！ + +```python + if form.is_valid(): + post = form.save(commit=False) + post.author = request.user + post.published_date = timezone.now() + post.save() +``` + + +基本上，我们这里有两件事情：我们使用`form.save`保存表单，我们添加一个作者（因为 `PostForm` 中没有`author`字段，然而这个字段是必须的！）。 `commit=False`意味着我们还不想保存`Post`模型—我们想首先添加作者。 大多数情况下，当你使用`form.save()`时，不会使用`commit=False`，但是在这种情况下，我们需要这样做。 `post.save()`会保留更改（添加作者），并创建新的博客文章！ + +最后，如果我们能够立即去`post_detail`页面创建新的博客内容，那将很酷，对吗？为了做到这点，我们需要再导入一个： + +```python + from django.shortcuts import redirect +``` + + +把它添加到你文件的最开始处。现在我们可以说：创建完新帖子我们就转去`post_detail`页面。 + +```python + return redirect('post_detail', pk=post.pk) +``` + + +`post_detail` 是我们想去的视图的名字。 还记得这个*视图* 需得具有一个 `pk` 变量吗? 为了把它传递给视图我们使用`pk=post.pk`, 其中 `post` 就是我们刚刚创立的博客帖子！ + +好吧，我们已经说了很多了，但可能我们想看到整个*视图*现在看起来什么样，对吗？ + +```python +def post_new(request): + if request.method == "POST": + form = PostForm(request.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() + return render(request, 'blog/post_edit.html', {'form': form}) +``` + + +让我们看看它是否正常工作。 转到页 http://127.0.0.1:8000//post/new/ ，添加 `title` 和 `text`，将它保存... 看！ 新博客文章已经加进来了，我们被重定向到`post_detail`页面！ + +你可能已经注意到在保存博客文章之前我们设置发布日期。稍后，我们讲介绍一个在 **Django Girls 教程：扩展**中介绍 *publish button* 。. + +太棒了！ + +## 表单验证 + +现在，我们将给你展现Django表单是多么酷。 一篇博客文章需要有`title`和`title`字段。 在我们的`Post`模型中我们并没有说（和`发布日期`恰恰相反）这些字段不是必须的，所以Django，默认期望他们是有存储数据的。 + +尝试不带`title`和`text`内容保存表单。猜猜，会发生什么！ + +![表单验证][3] + + [3]: images/form_validation2.png + +Django会处理验证我们表单里的所有字段都是正确的。这不是很棒？ + +> 因为我们最近使用过Django管理界面，系统目前认为我们已经登录了。 有几种情况可能导致我们被登出（关闭浏览器，重新启动数据库等等）。 如果你发现当你创建一个文章时得到了一个指向未登录用户错误的时候，前往管理页面 `http://127.0.0.1:8000/admin` ，再登录。 这会暂时解决问题。 有一个一劳永逸的方法在等着你，可以看看只要教程后的**Homework: add security to your website!** 章节。 + +![记录错误][4] + + [4]: images/post_create_error.png + +## 编辑表单 + +现在我们知道如何添加一个新的表单。 但是如果我们想编辑一个现有的呢？ 这和我们刚才做的非常相似。 让我们快速创建一些重要的东西（如果你还不清楚他们，你应该问问你的教练或者看看前面的章节，因为我们已经覆盖了所有的这些步骤）。 + +打开 `blog/templates/blog/post_detail.html` 并添加以下行： + +```html + +``` + + +所以模板看起来像这样： + +```html + {% extends 'blog/base.html' %} + + {% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} + +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endblock %} +``` + + +在`blog/urls.py`里我们添加这行： + +```python + url(r'^post/(?P[0-9]+)/edit/$', views.post_edit, name='post_edit'), +``` + + +我们将复用模板`blog/templates/blog/post_edit.html`，所以最后缺失的东西就是 *view*. + +让我们打开`blog/views.py`，并在文件的最后加入： + +```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('post_detail', pk=post.pk) + else: + form = PostForm(instance=post) + return render(request, 'blog/post_edit.html', {'form': form}) +``` + + +这看起来几乎完全和我们的`post_new`视图一样，对吗？ 但是不完全是。 第一件事：我们从urls里传递了一个额外的`pk`参数。 然后：我们得到了`Post`模型，我们想编辑`get_object_or_404(Post, pk=pk)`，然后当我们创建了一个表单我们用一个`实例`来传递这篇文章，当我们想保存它： + +```python + form = PostForm(request.POST, instance=post) +``` + + +当我们只是打开这篇文章的表单来编辑时： + +```python + form = PostForm(instance=post) +``` + + +好，让我们来试试它是否可以工作！让我们先去`post_detail`页面。在右上角应该有一个编辑按钮： + +![编辑按钮][5] + + [5]: images/edit_button2.png + +当你点击它的时候，你会看到我们博客文章的表单。 + +![编辑表单][6] + + [6]: images/edit_form2.png + +随意修改标题和内容，然后保存更改！ + +祝贺你！你的应用程序正在变得越来越完整！ + +如果你需要更多关于Django表单的信息，你应该阅读文档： https://docs.djangoproject.com/en/1.8/topics/forms/ + +## 安全性 + +能够通过点击一条连接进行发布确实不错。 但是现在，任何访问你网站的人都能够发布一条新博客日志，这可能不是你想要的。 那让我们来让这个发布按钮只显示给你，对其他人则不显示。 + +在 `blog/templates/blog/base.html`中，找到我们 `page-header` `div` 和你早些时候在放那里锚点标记。看起来应该像这样： + +```html + +``` + + +我们要将另一个 `{% if %}` 标记到这, 这会使链接仅在以管理者身份登录的用户访问时显示。现在来说，管理员就是你！ 像这样修改 `` 标记： + +```html + {% if user.is_authenticated %} + + {% endif %} +``` + + +这个 `{% if %}` 会使得链接仅仅发送到哪些已经登陆的用户的浏览器。 这并不能完全保护发布新文章，不过这是很好的第一步。 我们将在扩展课程中包含更多安全部分。 + +你应已登录，如果你刷新页面，你不会看到有什么不同。不过，在新的浏览器或隐身窗口中加载页，你会看不到这个链接! + +## 还有一件事：部署时刻！ + +我们来看看这一切能否运行在 PythonAnywhere 上。另一次部署的时间到了！ + +* 首先，提交你的新代码，然后将它推送到 GitHub 上 + + +``` + $ git status + $ git add --all . + $ git status + $ git commit -m "Added views to create/edit blog post inside the site." + $ git push +``` + + +* 然后，在一个 [PythonAnywhere 的 Bash 终端][7]里运行： + + [7]: https://www.pythonanywhere.com/consoles/ + +``` + $ cd my-first-blog + $ source myvenv/bin/activate + (myvenv)$ git pull + [...] + (myvenv)$ python manage.py collectstatic + [...] +``` + + +* 最后，跳到 [Web 标签页][8] 并点击**重新载入**. + + [8]: https://www.pythonanywhere.com/web_app_setup/ + +就是这样！祝贺你：） diff --git a/zh/django_forms/images/csrf2.png b/zh/django_forms/images/csrf2.png new file mode 100644 index 00000000000..ee946324f92 Binary files /dev/null and b/zh/django_forms/images/csrf2.png differ diff --git a/zh/django_forms/images/drafts.png b/zh/django_forms/images/drafts.png new file mode 100644 index 00000000000..1d62f8866f4 Binary files /dev/null and b/zh/django_forms/images/drafts.png differ diff --git a/zh/django_forms/images/edit_button2.png b/zh/django_forms/images/edit_button2.png new file mode 100644 index 00000000000..804674f0965 Binary files /dev/null and b/zh/django_forms/images/edit_button2.png differ diff --git a/zh/django_forms/images/edit_form2.png b/zh/django_forms/images/edit_form2.png new file mode 100644 index 00000000000..3d4e525d5d0 Binary files /dev/null and b/zh/django_forms/images/edit_form2.png differ diff --git a/zh/django_forms/images/form_validation2.png b/zh/django_forms/images/form_validation2.png new file mode 100644 index 00000000000..6e333af3077 Binary files /dev/null and b/zh/django_forms/images/form_validation2.png differ diff --git a/zh/django_forms/images/new_form2.png b/zh/django_forms/images/new_form2.png new file mode 100644 index 00000000000..8f2a1088070 Binary files /dev/null and b/zh/django_forms/images/new_form2.png differ diff --git a/zh/django_forms/images/post_create_error.png b/zh/django_forms/images/post_create_error.png new file mode 100644 index 00000000000..d140e8e2419 Binary files /dev/null and b/zh/django_forms/images/post_create_error.png differ diff --git a/zh/django_installation/README.md b/zh/django_installation/README.md new file mode 100755 index 00000000000..03e24e663cb --- /dev/null +++ b/zh/django_installation/README.md @@ -0,0 +1,5 @@ +# Django安装 + +> **注意**如果你已完成了安装步骤，可以直接进入下一章。 + +{% include "/django_installation/instructions.md" %} diff --git a/zh/django_installation/instructions.md b/zh/django_installation/instructions.md new file mode 100755 index 00000000000..c62dd5047f9 --- /dev/null +++ b/zh/django_installation/instructions.md @@ -0,0 +1,113 @@ +> 本节部分内容基于 Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 教程而来。 +> +> 本章的部分内容基于 [django-marcador 教程](http://django-marcador.keimlink.de/) ，使用知识共享署名-4.0 国际许可协议许可。 Django-marcador 教程的版权归 Markus Zapke-Gründemann 所有。 + +## 虚拟环境 + +在安装 Django 之前，我们会让你安装一个非常实用的工具，它可以让你计算机上的编码环境保持整洁。 这个步骤可以跳过，但我们强烈建议你跟着做。 从最佳实践设置开始将会在未来为你省去无数的烦恼！ + +所以，让我们创建一个 **虚拟环境** （也称为 *virtualenv*）。 虚拟环境会以项目为单位将你的 Python/Django 安装隔离开。 这意味着对一个网站的修改不会影响到你同时在开发的其他任何一个网站。 优雅吧？ + +你需要做的就是找到您想创建 `虚拟环境`的一个目录 ；比如您的主目录。 在 Windows 上，它可能看起来像 `C:\Users\Name` （其中 `Name` 是您的登录名）。 + +在本教程中我们将使用您的 home 目录下的一个新目录 `djangogirls` ： + + mkdir djangogirls + cd djangogirls + + +我们将虚拟环境称为 `myvenv`。一般的命令格式是： + + python3 -m venv myvenv + + +### Windows系统 + +若要创建新的 `虚拟环境`，您需要打开的控制台 （我们在前几章里已经告诉过你了，还记得吗？），然后运行 `C:\Python34\python -m venv myvenv`。 它看起来会像这样： + + C:\Users\Name\djangogirls> C:\Python34\python -m venv myvenv + + +`C:\Python34` 是您之前安装Python的目录， `myvenv` 是您`虚拟环境` 的名字。 你可以使用其他任何名字，但请坚持使用小写，并不要使用空格、重音符号或特殊字符。 始终保持名称短小是个好主意 — — 你会大量引用它 ！ + +### Linux 和 macOS + +在 Linux 和 macOS 上创建的 `虚拟环境` 就和运行 `python3 -m venv myvenv` 一样简单。看起来像这样： + + ~/djangogirls$ python3 -m venv myvenv + + +`myvenv` 是您 `虚拟环境` 的名字。 您可以使用其他任何名称，但请始终使用小写以及不要有空格。 始终保持名称短小是个好主意，因为你会大量引用它！ + +> **注意：** 在Ubuntu 14.04上启动虚拟环境会报以下错误： +> +> Error: Command '['/home/eddie/Slask/tmp/venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1 +> +> +> 为了解决这个问题，请使用 `virtualenv` 命令。 +> +> ~/djangogirls$ sudo apt install python-virtualenv +> ~/djangogirls$ virtualenv --python=python3.4 myvenv +> + +## 使用虚拟环境 + +上面的命令将创建一个名为 `myvenv` 目录 （或任何你选择的名字），其中包含我们的虚拟环境 （基本上是一堆的目录和文件）。 + +#### Windows系统 + +运行如下命令进入你的虚拟环境： + + C:\Users\Name\djangogirls> myvenv\Scripts\activate + + +#### Linux 和 macOS + +运行如下命令进入你的虚拟环境： + + ~/djangogirls$ source myvenv/bin/activate + + +记住要将 `myvenv` 替换成你选择的 `虚拟环境`的 名字 ！ + +> **注：** 有时 `source` 可能不可用。在这些情况下试着做这面这些事情： +> +> ~/djangogirls$ . myvenv/bin/activate +> + +当你看到在您的控制台中有如下提示就知道你已经进入 `虚拟环境` ： + + (myvenv) C:\Users\Name\djangogirls> + + +或： + + (myvenv) ~/djangogirls$ + + +注意 `（myvenv）`前缀的出现 ！ + +当在一个虚拟的环境中工作时，`python` 将自动指向正确的版本，因此您可以使用 `python` 代替 `python3`. + +好的现在所有重要的依赖关系已经就位。最后，我们可以安装 Django ！ + +## 安装 Django + +既然你有了`虚拟环境` ，您可以使用 `pip`安装 Django 。在控制台中，运行 `pip install django==1.8` （注意我们使用双等于号： `==`). + + (myvenv) ~$ pip install django==1.8 + Downloading/unpacking django==1.8 + Installing collected packages: django + Successfully installed django + Cleaning up... + + +在 Windows 上 + +> 如果你在 Windows 平台上调用 pip 时得到一个错误，请检查是否您项目的路径名是否包含空格、 重音符号或特殊字符 (如：`C:\Users\User Name\djangogirls`)。 若的确如此，请尝试移动它到另外一个没有空格、重音符号或特殊字符的目录，（例如：`C:\djangogirls`）。 在移动之后，请重试上面的命令。 + +在 Linux 上 + +> 如果你在Ubuntu 12.04上得到一个错误，请运行 `pip python -m pip install -U --force-reinstall pip`来修复虚拟环境中的pip安装。 + +就是这样！你现在（终于）准备好创建一个 Django 应用程序！ diff --git a/zh/django_models/README.md b/zh/django_models/README.md new file mode 100755 index 00000000000..690d74c283f --- /dev/null +++ b/zh/django_models/README.md @@ -0,0 +1,176 @@ +# Django模型 + +我们现在将要创建的是一个能存储我们博客所有文章的东西。为了达到这个目的，我们将要讲解一下一个被称为`objects（对象）`的东西. + +## 对象 + +在编程中有一个概念叫做 `面向对象编程` 。 它的思想是，与其用无聊的一连串的程序指令方式写程序，我们不如为事物建立模型，然后定义他们是怎样互相交互的。 + +那什么是对象呢？它是一个属性和操作的集合。它听起来很奇怪，但我们会给你一个例子。 + +如果我们想塑造一只猫的模型，我们会创建一个名为`Cat`的对象，它含有一些属性例如：`color`, `age`, `mood`(又比如：good, bad, sleepy ;))，还有`owner（主人）` (那是一个`Person`对象或者假若是流浪猫，这个属性可以为空)。 + +然后这个`Cat`会有一些行为: `purr`, `scratch`, 或者`feed` (在这其中我们会给这只猫一些 `CatFood`，这个`CatFood`可以是单独的一个包含比如<0>taste属性的对象). + + Cat + -------- + color + age + mood + owner + purr() + scratch() + feed(cat_food) + + + CatFood + -------- + taste + + +所以基本思想就是用包含属性的代码来描述真实的东西（称为 `对象属性`）和操作 （称为 `方法`). + +我们将如何为博客帖子建立模型呢？我们想要建立一个博客，对吗？ + +我们需要回答一个问题：什么是一篇博客文章？它应该含有什么样的属性？ + +嗯，肯定我们的博客文章需要一些文本，包括内容与标题，对吗？ 我们也需要知道是谁写的 — — 所以我们需要一位作者。 最后，我们想要知道什么时候该文章创建并发布。 + + Post + -------- + title + text + author + created_date + published_date + + +一篇博客文章需要做什么样的事情？应该有一些正确的 `方法` 来发布文章，对吗？ + +因此我们需要一个`publish`的方法 + +既然我们已经知道什么是我们想要实现的，让我们开始在Django里面为它建模！ + +## Django模型 + +知道什么是对象，我们可以为我们的博客文章创建一个 Django 模型。 + +Django 里的模型是一种特殊的对象 — — 它保存在 `数据库` 中。 数据库是数据的集合。 这是您存储有关用户、 您的博客文章等信息的地方。 我们将使用SQLite 数据库来存储我们的数据。 这是默认的 Django 数据库适配器 — — 对于我们现在的需求而言它是足够的。 + +您可以将数据库中的模型看作是电子表格中的列 （字段） 和行 （数据）。 + +### 创建应用程序 + +为了让一切保持整洁，我们将我们的项目内部创建单独的应用程序。 如果一开始就让每一件东西井然有序，那就太好了。 为了创建一个应用程序，我们需要在命令行中执行以下命令 (从`manage.py` 文件所在的`djangogirls` 目录)： + + (myvenv) ~/djangogirls$ python manage.py startapp blog + + +你会注意到一个新的 `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 + + +创建应用程序后，我们还需要告诉 Django 它应该使用它。 我们是在 `mysite/settings.py`文件中这样做的。 我们需要找到 `INSTALLED_APPS` 并在它下面添加一行`'blog'` 。 所以最终的代码应如下所示： + + INSTALLED_APPS = ( + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', + 'blog', + ) + + +### 创建一个博客文章模型 + +我们在 `blog/models.py` 文件中，定义所有的 `Models` 对象— — 我们将在其中都定义我们的博客文章。 + +让我们打开 `blog/models.py`，从中删除一切并编写这样的代码： + + from django.conf import settings + from django.db import models + from django.utils import timezone + + + 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) + + def publish(self): + self.published_date = timezone.now() + self.save() + + def __str__(self): + return self.title + + +> 当你在`str`的两端使用两个下划线字符（`_`）的时候务必三思而后行。 这是Python编程里面的一种常见的约定写法，有时我们也叫这个做"dunder"("double-underscore"的缩写)。 + +这看起来太吓人了，对吧？不过不用担心，我们会解释这几行是什么意思！ + +所有以 `from` 或 `import` 开始的所有行，都是需要从其他文件中添加一些内容。 所以与其复制和粘贴同样的内容，我们可以用 `from...... import......`来导入这些文件. + +`class Post(models.Model):` - 这行是用来定义我们的模型 (这是一个 `对象`). + +* `class` 是一个特殊的关键字，表明我们在定义一个对象。 +*   `Post`是我们模型的一个名字。我们可以给它取另外一个不同的名字(但是我们必须避免使用特殊字符或者空格符)。总是以首字母大写来作为类名。 +* `models.Model` 表明Post是一个Django模型，所以Django知道它应该被保存在数据库中。 + +现在我们定义了我们曾经提及到的那些属性：`title`, `text`, `created_date`, `published_date`和`author`。 为了做到那样我们需要为我们每个字段定义一个类型(它是文本吗？ 是数字？ 是日期？ 到另一个对象的关联，比如用户吗?）。 + +* `models.CharField` - 这是你如何用为数有限的字符来定义一个文本。 +* `models.TextField` - 这是没有长度限制的长文本。这听起来用在博客文章的内容上挺适合的，对吧？ +* `models.DateTimeField` - 这是日期和时间。 +* `models.ForeignKey` - 这是指向另一个模型的连接。 + +我们不会对这里的代码解释得面面俱到因为那会花太多时间了。 如果你想了解更多有关模型字段以及如何定义除上面描述以外的东西，那你应该去看看Django的官方文档(https://docs.djangoproject.com/en/1.8/ref/models/fields/#field-types)。 + +`def publish(self):`又怎样呢? 这正是我们之前提及到的`publish`方法。 `def`表明这是一个函数或者方法，`publish`是这个方法的名字。 如果你喜欢的话你可以改变方法名。 命名的规则是使用小写字母以及下划线而非空白符。 举个例子，一个计算平均价格的方法可以叫做`calculate_average_price`. + +方法通常会`return`一些东西。 例如在 `__str__` 方法中就有这个。 在这种情况下，当我们调用 `__str__()` 我们将得到文章标题的文本 （**字符串**）。 + +如果关于模型尚有不清楚的，请随时问你的教练 ！ 我们知道它很复杂，特别是当你同时学习对象和函数的时候。 但希望它在你看来没有那么神奇！ + +### 在你的数据库中为模型创建数据表 + +在这里的最后一步是将我们新的模型添加到我们的数据库。 首先我们必须让Django知道我们在我们的模型(我们刚刚创建的！) 有一些变更。 输入`python manage.py makemigrations blog`。 它看起来会像这样： + + (myvenv) ~/djangogirls$ python manage.py makemigrations blog + Migrations for 'blog': + 0001_initial.py: + - Create model Post + + +Django为我们准备了我们必须应用到我们数据库的迁移文件。输入`python manage.py migrate blog`，然后对应的输出应该是: + + (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 + + +万岁! 我们的Post模型现在已经在我们的数据库里面了! 它看起来很不错, 对吧? 跳转到下一个章节，看看你博客文章的样子！ diff --git a/zh/django_orm/README.md b/zh/django_orm/README.md new file mode 100755 index 00000000000..4a14a32ca53 --- /dev/null +++ b/zh/django_orm/README.md @@ -0,0 +1,155 @@ +# Django ORM 和 QuerySets（查询集） + +在这一章中，你将学习 Django 如何连接到数据库，并将数据存储在里面。一探究竟吧！ + +## QuerySet 是什么呢？ + +从本质上说，QuerySet 是给定模型的对象列表（list）。QuerySet 允许您从数据库中读取数据，对其进行筛选以及排序。 + +用例子来学习最容易的了。让我们试试这个，好吗？ + +## Django shell + +打开你本地的终端(不是在Python解析器里面) 然后输入这个命令: + + (myvenv) ~/djangogirls$ python manage.py shell + + +效果应该像这样： + + (InteractiveConsole) + >>> + + +你现在在 Django 的交互式控制台中。它是就像 Python 提示符，但有一些额外神奇的 Django 特性：）。你当然也可以在这里使用所有的 Python 命令。 + +### 所有对象 + +首先让我们尝试显示所有我们的文章。你可以用下面的命令： + + >>> Post.objects.all() + Traceback (most recent call last): + File "", line 1, in + NameError: name 'Post' is not defined + + +哎呀 ！出现了一个错误。它告诉我们没有文章。这是正确的 — — 我们忘了首先导入它 ！ + + >>> from blog.models import Post + + +这很简单： 我们从 `blog.models` 导入 `Post` 的模型。让我们试着再一次显示所有的帖子： + + >>> Post.objects.all() + , ]> + + +这是我们之前创建的文章的 list 列表！我们通过使用Django admin界面创建了这些文章。但是我们现在想通过Python来创建新的文章，那么我们应该如何做呢？ + +### 创建对象 + +这就是你如何在数据库创建一个新的Post对象的方法: + + >>> Post.objects.create(author=me, title='Sample title', text='Test') + + +但是我们这里有一个遗漏的要素： `me`。我们需要传递 `User` 模型的实例作为作者。如何做到这一点？ + +让我们首先导入用户模型： + + >>> from django.contrib.auth.models import User + + +我们在数据库中有哪些用户？试试这个： + + >>> User.objects.all() + ]> + + +这是一个我们之前创建的超级用户！让我们现在获取一个用户实例： + + me = User.objects.get(username='ola') + + +正如你所看到的，我们现在 `get` 一个 `username` 等于 'ola' 的`User` 。简单吧！当然，你必须将其改为你所使用的用户名。 + +现在我们终于可以创建我们的文章了: + + >>> Post.objects.create(author=me, title='Sample title', text='Test') + + +哈哈！要检查是否有效吗？ + + >>> Post.objects.all() + , , ]> + + +就是这样，又一个文章在列表里面！ + +### 添加更多文章 + +你现在可以找点乐子，并添加更多的帖子，看它是如何工作。添加 2-3 个并前进到下一个部分。 + +### 筛选对象 + +QuerySets的很大一部分功能是对它们进行筛选。 譬如，我们想要发现所有都由用户ola编写的文章。 我们将使用 `filter`，而不是 `all` 在 `Post.objects.all()`。 我们需要在括号中申明哪些条件，以在我们的 queryset 结果集中包含一篇博客文章。 在我们的情况是 `author`，它等于 `me`。 把它写在 Django 的方式是： `author = me`。 现在我们的代码段如下所示： + + >>> Post.objects.filter(author=me) + , , , ]> + + +或者，也许我们想看到包含在 `title` 字段标题的所有帖子吗？ + + >>> Post.objects.filter(title__contains='title') + , ]> + + +> **注**在`title` 与 `contains` 之间有两个下划线字符 (`_`)。 Django 的 ORM 使用此语法来分隔字段名称 （"title"） 和操作或筛选器 （"contains"）。 如果您只使用一个下划线，您将收到类似"FieldError： 无法解析关键字 title_contains"的错误。 + +你也可以获取一个所有已发布文章的列表。我们通过筛选所有含`published_date`为过去时间的文章来实现这个目的： + +> > > from django.utils import timezone Post.objects.filter(published_date__lte=timezone.now())[] + +不幸的是，通过Python终端添加的文章还没发布。我们可以改变它！首先获取一个我们想要发布的文章实例： + + >>> post = Post.objects.get(title="Sample title") + + +然后将它与我们 `publish` 的方法一起发布 ！ + + >>> post.publish() + + +现在再一次尝试获取已发布的文章（按向上箭头按钮三次，然后按回车）: + + >>> Post.objects.filter(published_date__lte=timezone.now()) + ]> + + +### 对象排序 + +Queryset 还允许您排序结果集对象的列表。让我们试着让它们按 `created_date` 字段排序： + + >>> Post.objects.order_by('created_date') + , , , ]> + + +我们也可以在开头添加 `-` 来反向排序： + + >>> Post.objects.order_by('-created_date') + , , , ]> + + +### 链式 QuerySets + +你可以通过**链式调用**连续组合QuerySets + + >>> Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') + + +这真是强而有力，而且可以让你写较复杂的的查询 + +酷 ！现在，你准备下一个部分 ！若要关闭shell程序，请键入这： + + >>> exit() + $ diff --git a/zh/django_start_project/README.md b/zh/django_start_project/README.md new file mode 100755 index 00000000000..3f6e74177ee --- /dev/null +++ b/zh/django_start_project/README.md @@ -0,0 +1,135 @@ +# 你的第一个Django 项目 ！ + +> 本章的部分内容基于 Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 的教程。 +> +> 本章的部分是基于知识共享署名-4.0 国际许可协议许可的 [django marcador 教程][1]。 Django marcador 教程的版权由Markus Zapke-Gründemann 持有。 + + [1]: http://django-marcador.keimlink.de/ + +我们将要创建一个简单的博客 ！ + +第一步是创建一个新的 Django 项目。 首先，我们需要运行一些由 Django 提供的脚本，为我们即将开始的项目建立主要骨架。 它会生成一系列的文件夹和文件，在后面的项目中我们会需要修改和使用到它们。 + +某些名称的文件和目录在 Django 起着至关重要的作用。 你不应该重命名我们将要创建的文件。 将它们移动到一个不同的地方也不是一个好主意。 Django 需要固定的系统结构，以便 Django 能够找到重要的东西。 + +> 记住在虚拟环境中运行的一切。 如果您没有看到您的控制台中的前缀 `（myvenv）`，您需要激活您的虚拟环境。 我们在 **Django 安装**这一节内的 **在虚拟环境下工作** 部分中解释过了。 在windows下面运行命令：myvenv\Scripts\activate，在苹果或linnux环境下运行命令：source myvenv/bin/activate + +在苹果或Linux系统下，你需要运行下面的命令,**记得不要漏掉命令后面的小点（.）**: (myvenv) ~/djangogirls$ django-admin startproject mysite . + + (myvenv) ~/djangogirls$ django-admin startproject mysite . + + +在windows环境下也不要忘了下面命令最后的小点。 + + (myvenv) C:\Users\Name\djangogirls> django-admin startproject mysite . + + +> 此时，符号"`.`"很重要，它将告诉脚本程序自动安装Django到你当前选择的目录中（所以这个“`.`”是告诉脚本执行时的一种参考点） +> +> **注意**：当敲入前面命令时，记住你是从 `django-admin` 或 `django-admin.py`开始。 而命令串前面的`(myvenv) ~/djangogirls$` 和 `(myvenv) C:\Users\Name\djangogirls>`则是由系统提示用户输入命令的光标位置，这部分不用用户输入。 + +`django-admin.py`是一个脚本，将自动为您创建目录和文件。前面的命令正确的话，你现在就应该有一个目录结构，看起来像下面这样： + + djangogirls + ├───manage.py + └───mysite + settings.py + urls.py + wsgi.py + __init__.py + 它是一个Django的项目文件夹，为即将开始的项目准备好了必要的资源文件和文件夹 + + +`manage.py` 是一个帮助管理站点的脚本。在它的帮助下我们将能够在我们的计算机上启动一个 web 服务器，而无需安装任何东西。 + +`settings.py` 文件包含的您的网站的配置数据。 + +还记得当我们谈到一名邮差在决定何处交付一封信时的例子吗？`urls.py` 文件包含`urlresolver`所需的模型的列表。. + +现在让我们忽略其他文件, 现在我们不会改变它们。要记住的唯一一点是不要不小心删除他们！ + +## 更改设置 + +让我们在 `mysite/settings.py` 中进行一些更改。使用您前面安装了的代码编辑器打开文件。 + +在我们的站点上有正确的时间是非常不错的。 访问[wikipedia timezones list][2]复制你所在地区的时区 (TZ). (eg. `Europe/Berlin` ) + + [2]: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones + +然后在 settings.py文件中, 找到包含`TIME_ZONE字段的这行,并将时区改为你所在地区的时区。即：

+ +
python
+TIME_ZONE = 'Europe/Berlin'
+`
+适当的修改"Europe/Berlin" ps:中国大陆地区可修改为 Asia/Shanghai + +我们还需要添加 (我们会找出在教程后面所提到的静态文件和 CSS文件) 静态文件的路径。 我们下拉到文件的*最底部*, 就是在`STATIC_URL` 条目的下面。添加新的一行内容为 `STATIC_ROOT`: + + STATIC_URL = '/static/' + STATIC_ROOT = BASE_DIR / 'static' + + +## 设置数据库 + +有很多的不同的数据库软件，可以用来存储你的网站数据。我们将使用默认的那个， `sqlite3`. + +这已经在您的 `mysite/settings.py` 文件中设置了： + + DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', + } + } + + +若要为我们的博客创建一个数据库，，让我们运行以下命令在控制台中： `python manage.py migrate` （我们需要`djangogirls` 目录中包含 `manage.py` 文件）。 如果一切顺利，您应该看到这样： + + (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 + + +我们完成了 ！现在去启动网站服务器，看看是否我们的网站正在工作！ + +你必须要进入包含`manage.py` 文件的目录 （`djangogirls` 目录）。 在控制台中，我们可以通过运行 `python manage.py runserver` 开启 web 服务器： + + (myvenv) ~/djangogirls$ python manage.py runserver + + +如果你在Windows系统遇到UnicodeDecodeError这个错误，用这个命令来代替 + + (myvenv) ~/djangogirls$ python manage.py runserver 0:8000 + + +现在，你需要做的就是检测你的站点的服务器是否已经在运行了。打开你的浏览器（火狐，Chrome，Safari，IE 或者其他你惯用的浏览器）输入这个网址： + + http://127.0.0.1:8000/ + + +Web服务器将接管你的命令行提示符，直到我们停止它。 为了尝试更多命令，我们应该同时打开一个新的终端，并激活虚拟环境。 想要停止web服务器，我们应该切换到刚才在运行程序的窗口，并且按下 CTRL+C - 同时按下CTRL键和字母C键(如果你的操作系统是windows，那么应当按下 Ctrl+Break)。 + +祝贺你 ！你已经创建您的第一个网站，并使用 web 服务器运行它！这超级赞吧？ + +![它工作了！][3] + +准备好下一步了吗？现在来创建一些内容 ！ + + [3]: images/it_worked2.png diff --git a/zh/django_start_project/images/it_worked2.png b/zh/django_start_project/images/it_worked2.png new file mode 100644 index 00000000000..4efa554e567 Binary files /dev/null and b/zh/django_start_project/images/it_worked2.png differ diff --git a/zh/django_templates/README.md b/zh/django_templates/README.md new file mode 100755 index 00000000000..3a4af4cccf5 --- /dev/null +++ b/zh/django_templates/README.md @@ -0,0 +1,114 @@ +# Django模板 + +是时候把数据展示出来了！Django提供了一个非常有用的内置来实现\---|-**模板标签** + +## 什么是模板标签呢？ + +正如你在前面章节中所了解的那样， 我们并不能将 Python 代码嵌入到HTML中。 因为浏览器不能识别 Python 代码， 它只能解析HTML。 我们知道，HTML是静态页面，而 Python 则显得更加动态。 + +**Django模板标签**允许我们将Python之类的内容翻译成HTML，所以你可以更快更简单的建立动态网站。哈哈！ + +## 展现文章列表模板 + +在之前的章节，我们给我们的模板一系列文章在`post`变量里。现在我们将在HTML里展现它。 + +为了用模板标签在HTML中显示变量， 我们会使用两个大括号， 并将变量包含在里面，正如这样 + +```html + {{ posts }} +``` + + +在你的 `blog/templates/blog/post_list.html` 文件中进行如下的操作。 将所有 `
` to the third `
` 中的 to the third 用 `{{ posts }}` 代替。 并保存文件，刷新页面后去看看我们做的那些改变。 + +![图 13.1][1] + + [1]: images/step1.png + +如你所见，我们得到如下： + +``` + , ]> +``` + + +这意味着Django视它为对象的列表。 还记得在 **Python入门介绍** 里我们怎么展现列表的吗？ 是的， 我们可以使用循环！ 在dajngo模板中使用循环去遍历它们。如下所示： + +```html + {% for post in posts %} + {{ post }} + {% endfor %} +``` + + +在你的模板里试试这个。 + +![图 13.2][2] + + [2]: images/step2.png + +它工作了！ 但是想让他们展现的像我们之前在**HTML介绍**章节里创建的静态文章一样 你可以混合HTML和模板标签。 我们的`body`将长得像这样： + +```html + + + {% for post in posts %} +
+

published: {{ post.published_date }}

+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +``` + + +{% raw %}所有的在`{% for %}` 和 `{% endfor %}` 之间的内容将会被Django对象列表中的每个对象所代替。刷新页面去看看：{% endraw %} + +![图 13.3][3] + + [3]: images/step3.png + +你注意到这次我们使用了一个明显不同的标记`{{ post.title }}` 或 `{{ post.text }}`？ 我们正在访问定义在`Post`模型中的每一个域。 此外，`|linebreaksbr`通过一个过滤器，使得行间隔编程段落。 + +## 还有一件事 + +如果我们将我们的网站放在互联网上运行，那将是一件很不错的事情，难道不是吗？ 让我们试着再次部署到 PythonAnywhere。简单部署步骤如下... ... + +* 首先，我们将我们的代码放到GitHub + +``` + $ git status + [...] + $ git add --all . + $ git status + [...] + $ git commit -m "Modified templates to display posts from database." + [...] + $ git push +``` + + +* 然后，重新登陆 [PythonAnywhere][4] 并进入**Bash 控制台** (或重开一个)，并运行: + + [4]: https://www.pythonanywhere.com/consoles/ + +``` + $ cd my-first-blog + $ git pull + [...] +``` + + +* 最后， 我们返回 [Web tab][5] 重新加载我们的应用程序， 此时我们应该可以看到更新后的程序运行情况了。 + + [5]: https://www.pythonanywhere.com/web_app_setup/ + +祝贺你！现在往前走，尝试在你的Django管理中添加一篇新文章（记得添加发布日期！），然后刷新你的页面看看是否文章正常显示了。 + +这一定是个让人沉醉的作品？为此我们应当骄傲， 在计算机学科的一点儿进步，都是自我的一次突破 :)。 + +![图 13.4][6] + + [6]: images/donut.png diff --git a/zh/django_templates/images/donut.png b/zh/django_templates/images/donut.png new file mode 100644 index 00000000000..f31cebdc8a3 Binary files /dev/null and b/zh/django_templates/images/donut.png differ diff --git a/zh/django_templates/images/step1.png b/zh/django_templates/images/step1.png new file mode 100644 index 00000000000..cbf6420360a Binary files /dev/null and b/zh/django_templates/images/step1.png differ diff --git a/zh/django_templates/images/step2.png b/zh/django_templates/images/step2.png new file mode 100644 index 00000000000..fd6269c837c Binary files /dev/null and b/zh/django_templates/images/step2.png differ diff --git a/zh/django_templates/images/step3.png b/zh/django_templates/images/step3.png new file mode 100644 index 00000000000..b471fdd4d7b Binary files /dev/null and b/zh/django_templates/images/step3.png differ diff --git a/zh/django_urls/README.md b/zh/django_urls/README.md new file mode 100755 index 00000000000..4e0ef147725 --- /dev/null +++ b/zh/django_urls/README.md @@ -0,0 +1,117 @@ +# Django urls + +我们将要建立第一个网页：你博客的主页！但是首先，让我们先学习一点 Django 的 url 知识。 + +## 什么是 URL？ + +简单地说，URL 是一个网页地址。 每当你访问一个网站时，你都能在浏览器的地址栏里看到一个 URL。（是的！ `127.0.0.1:8000` 是一个URL！ 同时 `https://djangogirls.org` 也是一个 URL）： + +![URL][1] + + [1]: images/url.png + +每一个互联网的网页都需要自己的 URL。 这样当用户打开一个 URL 时，你的应用程序才知道应该展现什么内容。 在 Django 中，我们使用一种叫做 `URLconf` （URL 配置）的机制 。 URLconf 是一套模式，Django 会用它来把 URL 匹配成相对应的 View。 + +## URL 在 Django 中如何工作？ + +使用你喜欢的编辑器打开 `mysite/urls.py` 就能看到它长什么样子了： + + from django.conf.urls import include, url + from django.contrib import admin + + urlpatterns = [ + # Examples: + # url(r'^$', 'mysite.views.home', name='home'), + # url(r'^blog/', include('blog.urls')), + + url(r'^admin/', include(admin.site.urls)), + ] + + +正如你所看到的，Django 已经为我们放了一些东西在里面。 + +以 `#` 开头的行是注释，这些行都不会被Python运行。是不是很方便呢？ + +你在上一章节中学到的 admin 的 URL 已经在里面了： + + url(r'^admin/', include(admin.site.urls)), + + +这表示对于每一个以 `admin` 开头的 URL，Django 都会找到一个相对应的 *view*。 在这行代码中，我们包含了许多 admin URL 进来，所以这些 URL 不需要都被打包进这个小文件中。这使得代码更具可读性和简洁性。 + +## 正则表达式 + +你知道 Django 是如何将 URL 匹配到 view 的吗？ 好吧，这部分很棘手。 Django 使用了 `regex`，这是“正则表达式”的缩写。 正则表达式有很多（非常多！）规则用来形成一个搜索模式。 由于正则表达式是一个比较深入的话题，我们不会太深入讲解它的运行机制。 + +如果你还是想要了解怎样创建这些模式，下面有一个例子。我们只需要有限的规则的子集，就可以表达出想要的模式，比如： + + ^ 表示文本的开始 + $ 表示文本的结束 + \d 表示数字 + + 表示前面的元素应该重复至少一次 + () 用来捕捉模式中的一部分 + + +其他定义在模式中的部分会保留原本的含义。 + +现在，想象你有一个网站，其中有一个 URL 类似这样：`http://www.mysite.com/post/12345/`。其中 `12345` 是帖子的编号。 + +为每一个帖子都写一个单独的视图是一件会让人恼火的事情。 用正则表达式，我们可以创建一种模式，用来匹配 URL 并提取出帖子编号：`^post/(\d+)/$`。 让我们一步一步将它分解，看看里面做了什么： + + +* **^post/** 告诉 Django 在 URL 的开头匹配 `post/` (后于 `^`) +* **(\d+)** 表示 URL 中会有一个数（一位或者多位数字），并且我们想提取出这个数 +* **/** 告诉 Django 后面紧跟着一个 `/` 字符 +* **$** 表示 URL 的末尾，即以 `/<1>` 结尾的 URL 才会被匹配到 + +## 你的第一个 Django url！ + +是时候创建第一个 URL 了！我们想用 'http://127.0.0.1:8000/' 作为博客的首页，并展示一个帖子列表。 + +我们也想保持 `mysite/urls.py` 文件简洁，所以我们从 `blog` 应用导出 urls 到主 `mysite/urls.py` 文件。 +来吧，删除被注释掉的那行（以 `#` 开头的行），然后添加一行代码用于把 `blog.urls` 导入到主 url (`''`). + +你的 `mysite/urls.py` 文件现在应该看起来像这样： + + from django.conf.urls import include, url + from django.contrib import admin + + urlpatterns = [ + url(r'^admin/', include(admin.site.urls)), + url(r'', include('blog.urls')), + ] + + +现在，Django 会把访问 'http://127.0.0.1:8000/' 的请求转到 `blog.urls`，并看看那里面有没有进一步的指示。 + +写正则表达式时，记得把一个 `r` 放在字符串的前面。 这告诉 Python，这个字符串中的特殊字符是为正则表达式准备的，而不是为 Python 自身准备的。 + +## blog.urls + +现在我们创建一个新的 `blog/urls.py` 空文件。好了！加入以下两行： + + from django.conf.urls import url + from . import views + +我们仅仅把 Django 的方法以及 `blog` 应用的全部 `views` 导入了进来。（目前什么都没有，但是不超过一分钟就能搞好！） 然后，我们可以加入第一个 URL 模式： + + urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), + ] + + +正如你所见，我们现在分配了一个叫作 `post_list` 的 `view` 到 `^$` 的 URL 上。 这个正则表达会会匹配 `^`（表示开头）并紧随 `$` （表示结尾），所以只有空字符串会被匹配到。 这是正确的，因为在 Django 的 URL 解析器中，'http://127.0.0.1:8000/' 并不是 URL 的一部分。（译注：即只有 'http://127.0.0.1:8000/' 后面的部分会被解析。如果后面的部分为空，即是空字符串被解析。） 这个模式告诉了 Django，如果有人访问 'http://127.0.0.1:8000' 地址，那么 `views.post_list` 是这个请求该去到的地方。 + +最后的部分，`name='post_list'` 是 URL 的名字，用来唯一标识对应的 view。 它可以跟 view 的名字一样，也可以完全不一样。 在项目后面的开发中，我们将会使用命名的 URL ，所以在应用中为每一个 URL 命名是重要的。我们应该尽量让 URL 的名字保持唯一并容易记住。 + +一切都搞定了？在浏览器里打开 http://127.0.0.1:8000/ ，看看结果。 + +![错误][2] + +"It works" 不见了，啊？不要担心，这只是个错误页面，不要被吓到了。它们实际上是非常有用的： + +你会发现有一个 **no attribute 'post_list'** （没有 'post_list' 属性）的错误。 *post_list* 提醒你什么东西了吗？ 这是我们的 view 的名字！ 这表示其他的一切正常，但是我们还没创建这个 *view* 。 不要担心，我们将会抵达那里。 + +> 如果你想知识更多关于 Django URLconf 的知识，去官方文档看一看：https://docs.djangoproject.com/en/1.8/topics/http/urls/ + + [2]: images/error1.png diff --git a/zh/django_urls/images/error1.png b/zh/django_urls/images/error1.png new file mode 100644 index 00000000000..250028e996b Binary files /dev/null and b/zh/django_urls/images/error1.png differ diff --git a/zh/django_urls/images/url.png b/zh/django_urls/images/url.png new file mode 100644 index 00000000000..b59f9dce992 Binary files /dev/null and b/zh/django_urls/images/url.png differ diff --git a/zh/django_views/README.md b/zh/django_views/README.md new file mode 100755 index 00000000000..4b09e115d95 --- /dev/null +++ b/zh/django_views/README.md @@ -0,0 +1,36 @@ +# Django视图 - 是时候去创建！ + +是时候去解决我们在上一章所制造的Bug了：） + +*view*是存放应用逻辑的地方。 它将从你之前创建的 `模型`中获取数据，并将它传递给 `模板`。 我们将在下一章创建 template 模板。 视图就是Python方法，只不过比我们在**Python简介**章节中所做的事情稍复杂。 + +视图都被置放在`views.py`文件中。我们将加入我们自己的*views*到`blog/views.py`文件。 + +## blog/views.py + +好，让我们打开这个文件，看看里面有什么： + + from django.shortcuts import render + + # Create your views here. + + +这里没有太多的东西。一个最简单的*view*就长得这个样子。 + + def post_list(request): + return render(request, 'blog/post_list.html', {}) + + +如你所见, 我们创建一个方法 (`def`) ，命名为 `post_list` ，它接受 `request` 参数作为输入， 并 `return` （返回）用 `render` 方法渲染模板 `blog/post_list.html` 而得到的结果. + +保存文件，转到 http://127.0.0.1:8000/ 然后看看我们现在得到什么了。 + +另一个错误！读读现在发生了什么： + +![错误][1] + + [1]: images/error.png + +这个错误很直白：*TemplateDoesNotExist*。让我们修复这个bug，然后在下一个章节里创建一个模板！ + +> 阅读更多关于 Django views 的内容请参阅官方文档： https://docs.djangoproject.com/en/1.8/topics/http/views/ diff --git a/zh/django_views/images/error.png b/zh/django_views/images/error.png new file mode 100644 index 00000000000..1530c879cb5 Binary files /dev/null and b/zh/django_views/images/error.png differ diff --git a/zh/dynamic_data_in_templates/README.md b/zh/dynamic_data_in_templates/README.md new file mode 100755 index 00000000000..74e9d908022 --- /dev/null +++ b/zh/dynamic_data_in_templates/README.md @@ -0,0 +1,70 @@ +# 模板中的动态数据 + +我们已有的几件： `Post` 模型定义在 `models.py` 中，我们有 `post_list` `views.py` 和添加的模板中。 但实际上我们如何使我们的帖子出现在我们的 HTML 模板上呢？ 因为那是我们所想要的： 获取一些内容 （保存在数据库中的模型） 然后在我们的模板中很漂亮的展示，对吗？ + +这就是 *views* 应该做的： 连接模型和模板。 在我们的 `post_list` *视图* 中我们需要获取我们想要显示的模型，并将它们传递到模板中去。 所以基本上在 *视图* 中，我们决定什么 （模型） 将显示在模板中。 + +好吧，我们将如何实现它呢？ + +我们需要打开我们的 `blog/views.py`。到目前为止 `post_list` *view* 看起来像这样： + + from django.shortcuts import render + + def post_list(request): + return render(request, 'blog/post_list.html', {}) + + +还记得当我们谈论过导入在不同文件中编写的代码吗？ 现在是我们必须导入我们已经写在 `models.py` 里的模型的时候了。 我们将添加这行 `from .models import Post`，像这样： + + from django.shortcuts import render + from .models import Post + + +`from` 后面的点号意味着 *当前目录* 或 *当前的应用程序*。 因为 `views.py` 和 `models.py` 是在同一目录中，我们只需要使用 `.` 和 文件的名称（无 `.py`) 。 然后我们导入模型（`Post`). + +但接下来是什么呢？为了让实际的博客帖子从 `Post` 模型里获取，我们需要一种叫做 `QuerySet`的东西. + +## QuerySet 查询集 + +您应该已经熟悉 Queryset 是如何工作的。我们在 [Django ORM (Queryset) 章节][1]谈论过它. + + [1]: ../django_orm/README.md + +所以现在我们对已经发表并进行由 `published_date`排序的博客列表感兴趣，对吗？我们已经在 QuerySets 查询集一节里这么干过！ + + Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date') + + +现在我们把这段代码插入 `blog/views.py` 文件，添加到函数 `def post_list(request)`里去： + + from django.shortcuts import render + from django.utils import timezone + 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', {}) + + +请注意我们为这里的 QuerySet查询集创建了一个 *变量*： `posts`。将此视为我们的 QuerySet 的名字。从现在开始我们可以通过这个名字引用它。 + +同时，代码中使用了 `timezone.now()` 函数，因此我们需要添加一个导入 `timezone`. + +最后还没有完成的部分是传递 `posts` 查询集到模板中 （我们将在下一章中介绍如何显示它）。 + +在`render` 函数中我们已经有了 `请求` （因此我们通过互联网从用户接收的一切） 和模板文件 `'blog/post_list.html'` 参数。 最后一个参数，看起来像这样： `{}` ，我们可以在其中添加一些模板要使用的东西。 我们需要给它们起名字 （我们暂且沿用 `'posts'` :)）。 它应该看起来像这样： `{'posts': posts}`。 请注意，`:` 之前的部分是字符串；你需要将它用引号包围 `''`. + +所以最后我们的 `blog/views.py` 文件应如下所示： + + from django.shortcuts import render + from django.utils import timezone + 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}) + + +就是它 ！现在回到我们的模板并显示此QuerySet查询集！ + +如果你想了解更多关于QuerySert的内容，那么你可在这里得到帮助：https://docs.djangoproject.com/en/1.8/ref/models/querysets/ diff --git a/zh/extend_your_application/README.md b/zh/extend_your_application/README.md new file mode 100755 index 00000000000..d8269d1b166 --- /dev/null +++ b/zh/extend_your_application/README.md @@ -0,0 +1,206 @@ +# 扩展您的应用 + +我们已经完成了所有创建网站的各项不同必须的步骤：我们知道如何写一个模型，url，视图和模板。我们同样知道如何让我们网站更漂亮。 + +现在来练习吧！ + +我们网站里的第一件事情就是，一个展现一篇博客的页面，对吗？ + +我们已经有了`Post`模型，所以我们不需要再添加任何内容到`models.py`文件中。. + +## 创建一个模板链接，跳转到博文的内容页 + +我们将从在`blog/templates/blog/post_list.html`里添加一个链接开始。目前它应该看起来像这样： + +```html + {% extends 'blog/base.html' %} + + {% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + {% endblock %} +``` + + + +{% raw %}我们在博文列表的博文标题处添加一个链接用于跳转到该博文的详细页面。 让我们编辑 `

{{ post.title }}

` 使得它能链接到博文详情页面：。{% endraw %} + +```html +

{{ post.title }}

+``` + + +{% raw %}是解释神秘的 `{% url 'post_detail' pk=post.pk %}` 时候了。 正如你所猜想的，`{% %}`标记意味着我们正在使用Django模板标签。 这一次我们将使用一个能为我们创建URL的！{% endraw %} + +`blog.views.post_detail` 是我们想创建的 `post_detail` *view* 的路径。 请注意：`blog` 是我们应用的名字 (`blog`目录), `views` 是表单 `views.py` 文件的名字同时最后一个部分 - `post_detail` - 是 *view*的名字。. + +现在当我们访问：http://127.0.0.1:8000/ 我们会得到一个错误（这是预料之中的，因为我们没有名为`post_detail` 的 URL 或 *视图*)。看起来会像这样: + +![NoReverseMatch 错误][1] + + [1]: images/no_reverse_match2.png + +## 创建文章详细页面的URL + +让我们在`urls.py`里为我们的 `post_detail` *view* 创建一个URL! + +我们希望我们的第一条文章详细页面显示在类似这样的**URL**： http://127.0.0.1:8000/post/1/ + +让我们在 `blog/urls.py` 文件中增加一个 URL 来指引 Django 到名为 `post_detail` 的 *view*，它将用来显示整篇博客文章。 增加这行 `url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'),` 到 `blog/urls.py` 文件。 文件应当如下所示： + +```python +from django.conf.urls import url +from . import views + +urlpatterns = [ + url(r'^$', views.post_list, name='post_list'), + url(r'^post/(?P[0-9]+)/$', views.post_detail, name='post_detail'), +] +``` + + +`^post/(?P[0-9]+)/$` 部分看上去很骇人，请勿担心—我们来解释给你听： - 还是起始自 `^` — "开头部分" - `post/` 只是表示，紧接着开头，URL应当包含 **post** 和 **/**。 到目前为止，一切都好。 - `(?P[0-9]+)` - 这部分很棘手。 这表示Django会把所有你放到这里的东西转变成一个称作`pk`的变量并传递给视图。 `[0-9]`也告诉我们它只能由数字，而不是字母（所以是取值范围是介于0和9之间）。 `+` 意味着需要一个或更多的数字。 所以诸如`http://127.0.0.1:8000/post//`是无效的，但是像`http://127.0.0.1:8000/post/1234567890/`是完全OK的！ - `/` - 然后我们再次需要 **/** - `$` - "结尾"！ + +这意味着如果你键入`http://127.0.0.1:8000/post/5/`到你的浏览器里， Django 明白你在寻找一个叫做 `post_detail` 的 *视图*，然后传递`pk` 等于 `5` 到那个 *视图*. + +`pk` 是 `primary key（主键）`的缩写。 在Django项目中常常用到这个名字。 但是你可以使用你想要的变量（记住：使用小写以及`_`而不是空格！）。 比如与其说 `(?P[0-9]+)` 我们可以有`post_id`, 所以这个就像： `(?P[0-9]+)`. + +好吧，我们已经向 `blog/urls.py` 添加了一个新的 URL 模式！让我们刷新页面： http://127.0.0.1:8000/ Duang！还有另一个错误！果然！ + +![属性错误][2] + + [2]: images/attribute_error2.png + +你还记得下面应该怎么做吗？当然：添加一个视图！ + +## 增加文章详细页面的视图 + +这次我们的*视图*提供了一个额外的参数`pk`。 我们的*视图*需要能捕获它，对吗？ 所以我们将定义我们的函数为`def post_detail(request, pk):`。 注意我们需要使用我们在urls里指定的(`pk`)。 省略这个变量是不正确的，将会导致一个错误！ + +现在，我们想要有一个并且只有一个博客帖子。为了做到这一点，我们需要使用下面的请求集合： + +```python + Post.objects.get(pk=pk) +``` + + +但是这段代码有一个问题。如果没有`Post`和给定`主键`（`pk`）我们将有一个非常丑陋的错误！ + +![对象不存在错误][3] + + [3]: images/does_not_exist2.png + +我们不希望那样！ 但是，当然，Django已经为我们处理好了这些：`get_object_or_404`。 万一没有`Post`和给定的`pk`，它将展现更多有趣的页面（称作`Page Not Found 404`页面）。 + +![找不到页面][4] + + [4]: images/404_2.png + +好消息是你实际上可以创建你自己 `Page not found` 的页面和使它漂亮如你所愿。但现在它不是超级重要的，所以我们将跳过它。 + +好吧，是时候将 *视图* 添加到我们的 `views.py` 文件了！ + +我们应该打开 `blog/views.py` 并添加以下代码： + +```python + from django.shortcuts import render, get_object_or_404 +``` + + +在 `from`附近 行。并在文件的末尾，我们将增加我们的 *view*： + +```python +def post_detail(request, pk): + post = get_object_or_404(Post, pk=pk) + return render(request, 'blog/post_detail.html', {'post': post}) +``` + + +好了。是时候刷新页面了： http://127.0.0.1:8000/ + +![文章列表][5] + + [5]: images/post_list2.png + +它工作了 ！但是，当您单击博客文章标题中的某个链接时，会发生什么呢？ + +![模板不存在的错误][6] + + [6]: images/template_does_not_exist2.png + +哦不 ！另一个错误 ！但我们已经知道如何处理它，对吗？我们需要添加一个模板 ！ + +## 为文章详细页面增加模板 + +我们将在`blog/templates/blog` 中创建一个文件，叫做 `post_detail.html` . + +它看起来会像这样： + +```python + {% extends 'blog/base.html' %} + + {% block content %} +
+ {% if post.published_date %} +
+ {{ post.published_date }} +
+ {% endif %} +

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endblock %} +``` + + +现在，我们要扩展 `base.html`。 在`content` 块中，我们想要显示一篇文章的published_date （如果存在的话）， 标题和文本。 但我们应该讨论一些重要的东西，对不对吗？ + +{% raw %}`{% if ... %} ... {% endif %}` 是当我们想检查某样东西（还记得Python简介里的 if ... else ... 吗？）的时候的一种模板记号 。 在这个例子中，我们想要检查文章的 `published_date` 不是空的。{% endraw %} + +好的，我们可以刷新我们的页面并查看是否 `Page not found` 是不是没有了。 + +![文章细节页面][7] + + [7]: images/post_detail2.png + +耶 ！它工作了！ + +## 还有一件事：部署时刻！ + +你的网站如果还能在 PythonAnywhere 正常运转就好了，对吧？让我们再次部署。 + +``` + $ 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 +``` + + +* 然后，在一个 [PythonAnywhere 的 Bash 终端][8]里运行： + + [8]: https://www.pythonanywhere.com/consoles/ + +``` + $ cd my-first-blog + $ source myvenv/bin/activate + (myvenv)$ git pull + [...] + (myvenv)$ python manage.py collectstatic + [...] +``` + + +* 最后，跳到 [Web 标签页][9] 并点击**重新载入**. + + [9]: https://www.pythonanywhere.com/web_app_setup/ + +就是这样！祝贺你：） diff --git a/zh/extend_your_application/images/404_2.png b/zh/extend_your_application/images/404_2.png new file mode 100644 index 00000000000..0a6fdf3234e Binary files /dev/null and b/zh/extend_your_application/images/404_2.png differ diff --git a/zh/extend_your_application/images/attribute_error2.png b/zh/extend_your_application/images/attribute_error2.png new file mode 100644 index 00000000000..33a3b36b1d3 Binary files /dev/null and b/zh/extend_your_application/images/attribute_error2.png differ diff --git a/zh/extend_your_application/images/does_not_exist2.png b/zh/extend_your_application/images/does_not_exist2.png new file mode 100644 index 00000000000..e7015f2c80d Binary files /dev/null and b/zh/extend_your_application/images/does_not_exist2.png differ diff --git a/zh/extend_your_application/images/no_reverse_match2.png b/zh/extend_your_application/images/no_reverse_match2.png new file mode 100644 index 00000000000..aba1c9c8980 Binary files /dev/null and b/zh/extend_your_application/images/no_reverse_match2.png differ diff --git a/zh/extend_your_application/images/post_detail2.png b/zh/extend_your_application/images/post_detail2.png new file mode 100644 index 00000000000..b40c92efb8c Binary files /dev/null and b/zh/extend_your_application/images/post_detail2.png differ diff --git a/zh/extend_your_application/images/post_list2.png b/zh/extend_your_application/images/post_list2.png new file mode 100644 index 00000000000..dd0a0d67a6f Binary files /dev/null and b/zh/extend_your_application/images/post_list2.png differ diff --git a/zh/extend_your_application/images/template_does_not_exist2.png b/zh/extend_your_application/images/template_does_not_exist2.png new file mode 100644 index 00000000000..c856abeda31 Binary files /dev/null and b/zh/extend_your_application/images/template_does_not_exist2.png differ diff --git a/zh/how_the_internet_works/README.md b/zh/how_the_internet_works/README.md new file mode 100644 index 00000000000..42d475b7c97 --- /dev/null +++ b/zh/how_the_internet_works/README.md @@ -0,0 +1,53 @@ +# 互联网是如何工作的？ + +> 本章内容衍生自Jessica McKellar的演讲“互联网是怎么工作的” (http://web.mit.edu/jesstess/www/) 。 + +我们猜你每天在使用互联网。但是当你在浏览器里输入一个像 https://djangogirls.org 的地址并按 `回车键`的时候，你真的知道背后发生了什么吗？ + +你需要了解的第一件事是一个网站只是一堆保存在硬盘上的文件。 就像你的电影、 音乐或图片一样。 然而，网站的唯一的不同之处是： 网站包含一种称为 HTML 的代码。 + +如果你不熟悉编程，一开始你会很难理解HTML。你的浏览器 (如Chrome、 Safari、 Firefox 等) 却很喜欢它。 Web浏览器懂得这些代码，遵循它的指令并如你所想的那样展示这些文件。 + +就像我们对待每个电脑文件一样，我们需要把HTML文件存储在硬盘的某个位置。 对于互联网，我们使用特定而功能强大的电脑，我们称之为*服务器*。 它们没有屏幕、鼠标或者键盘，因为它们的主要目的是存储数据，并用它来提供服务。 这就是为什么它们被称作*服务器*--因为他们用数据*服务*你。 + +好了，但是你想知道互联网看起来是什么样子的，对吗？ + +我们给你画了一幅画！它看起来像这样： + +![图1.1][1] + + [1]: images/internet_1.png + +看起来很糟糕，对吗？ 事实上，它是一个由互相连通的机器 (上面提到的*服务器*) 组成的网络。 数以十万计的机器！ 很多，很多数以公里长的电缆分布在全世界！ 你能访问一个海底电缆地图网站（ http://submarinecablemap.com/ ）来看这个网络有多么复杂。 这是一个网站上的截屏： + +![图1.2][2] + + [2]: images/internet_3.png + +它很迷人，对吧？ 但是很明显，我们不太可能用电缆去连接任何两台上网的电脑。 我们需要将请求通过很多很多不同的机器传递，以便连接一台机器 (比如存储https://djangogirls.org的机器)。 + +它看起来像这样： + +![图1.3][3] + + [3]: images/internet_2.png + +想象一下当你键入 https://djangogirls.org ，你会发送一封信说：“亲爱的Django Girls，我想看看djangogirls.org网站，请将它发送给我！” + +你的信件去了离你最近的邮局。 然后它去离你的收件人稍近一点的邮局，然后再去另一个，以此类推地到达它的目的地。 唯一的事情是，如果你将许多信件 (*数据包*) 发送到同一个地方，他们可以通过完全不同邮政局 (*路由器*)。 这取决于每个办公室的分布情况。 + +![图1.4][4] + + [4]: images/internet_4.png + +是的，就这么简单。你发送信息，然后期望一些回复。当然，你使用的不是纸笔，而是比特数据，但是思想是一样的！ + +我们使用的地址叫做IP地址，这种地址却不包含街道、城市、邮编和城市。 你的电脑首先要求DNS（域名服务器）去解析djangogirls.org成为IP地址。 他工作起来有点像老式的电话簿，在那里你可以找到你想联系的人的名字，并且找到他们的电话号码和地址。 + +当你发送一封信时，它需要确切的功能以便正确的传递：地址，邮票等等。 你使用一种接收者同样能够理解的语言，对吗？ 你送到网站的*数据包*也类似如此。 我们使用一个名为 HTTP (Hypertext Transfer Protocol：超文本传输协议) 的协议。 + +所以，基本上，当你有一个网站你需要有一台*服务器*用于网站的托管。 当*服务器*接收到一个访问*请求*（一封信），它把网站内容发送回去（回信）。 + +既然这是Django教程，你会问Django做什么。 当你发送一个响应时，你通常不会发送同样的东西给每一个人。 如果你信件的内容是个性化的必然更好，尤其是对于那个刚刚给你写信的人，对吗？ Django帮助你创建这些个性化，有趣的信件：）。 + +废话少说，抓紧时间创造！ diff --git a/zh/how_the_internet_works/images/internet_1.png b/zh/how_the_internet_works/images/internet_1.png new file mode 100644 index 00000000000..e289eac2b23 Binary files /dev/null and b/zh/how_the_internet_works/images/internet_1.png differ diff --git a/zh/how_the_internet_works/images/internet_2.png b/zh/how_the_internet_works/images/internet_2.png new file mode 100644 index 00000000000..e8cf8b77999 Binary files /dev/null and b/zh/how_the_internet_works/images/internet_2.png differ diff --git a/zh/how_the_internet_works/images/internet_3.png b/zh/how_the_internet_works/images/internet_3.png new file mode 100644 index 00000000000..6f5d95dec80 Binary files /dev/null and b/zh/how_the_internet_works/images/internet_3.png differ diff --git a/zh/how_the_internet_works/images/internet_4.png b/zh/how_the_internet_works/images/internet_4.png new file mode 100644 index 00000000000..d4748ac48ef Binary files /dev/null and b/zh/how_the_internet_works/images/internet_4.png differ diff --git a/zh/html/README.md b/zh/html/README.md new file mode 100755 index 00000000000..78aac23fad6 --- /dev/null +++ b/zh/html/README.md @@ -0,0 +1,206 @@ +# HTML简介 + +什么是模板，你可能会问？ + +模板是一个文件，它可以让我们使用一致的格式来展示不同的信息— —例如，您可以使用模板来帮助你写一封信，虽然每封信可以包含不同的消息和发送给不同的人，但他们使用相同的格式。 + +Django模板的格式是由HTML（也就是我们在第一章 **互联网是如何工作的** 中提到的 HTML ）语言来描述的。). + +## HTML 是什么？ + +HTML 是一种简单的代码，由 Web 浏览器解释—如 Chrome、 火狐或Safari—为用户显示一个网页。 + +HTML代表“HyperText Markup Language（超文本标记语言）”。 **超文本** 是指它是一种支持网页之间的超链接的文本。 **标记** 是指我们将一份文件用代码标记组织起来，然后告诉某个东西（在这种情况下，浏览器中） 如何解释网页。 HTML 代码是由 **标记**构成的，每一个都是由 `<` 开始，由结束 `>`. 这些标签表示标记 **元素**. + +## 你的第一个模板 ！ + +创建一个模板是指创建一个模板文件。一切都是文件，对吧？你可能已经注意到这点了。 + +模板保存在 `blog/templates/blog` 目录中。 因此，首先在您的 blog 目录内创建一个称为 `templates` 的目录。 然后创建另一个称为 `blog` 的目录到你的 templates 目录： + + blog + └───templates + └───blog + + +（你可能会疑惑为什么我们需要两个目录都叫的 `blog` — 你以后会发现这是简单有效的命名规则，使生活更容易，当事情开始变得更加复杂的时候。） + +现在创建一个叫做 `post_list.html` 的文件 （现在是空的，别管它）到 `blog/templates/blog` 目录下。 + +看看你的网站现在是什么样子： http://127.0.0.1:8000/ / + +> 如果您仍然有错误 `TemplateDoesNotExists`，尝试重新启动您的服务器。 转到命令行，按 Ctrl + C （同时按Control和 C 按钮） 停止服务，并通过执行 `python manage.py runserver` 命令再次启动它。 + +![图 11.1][1] + + [1]: images/step1.png + +再也没有错误了 ！祝贺 :) 然而，您的网站实际上并没有展现任何东西除了一个空白页，因为您的模板也是空。我们需要解决这个问题。 + +在您的模板文件中添加以下内容： + + +

Hi there!

+

It works!

+ + + +你的网站现在看这样怎么样？单击去查找： http://127.0.0.1:8000/ / + +![图 11.2][2] + + [2]: images/step3.png + +它工作了 ！很好地完成了:) + +* 最基本的标记，``，始终是任何网页的开始， `` 始终是最后。 正如你所看到的，整个网站的内容是在 `` 开始标记和结束标记之间 ``的 +* `

` 一种用于段落元素标记 ；`

` 关闭每个段落 + +## Head & body + +每个 HTML 页面也分为两个元素： **head** 和 **body**. + +* **head** 是一个包含有关文档且未显示在屏幕上的信息元素。 + +* **body** 是包含 web 页中所有显示的元素。 + +我们使用 `` 告诉浏览器这个页面的配置，以及 `` 来告诉它什么实际上是在页面上。 + +例如，你可以把网页标题元素放到 ``里，像这样： + + + + Ola's blog + + +

Hi there!

+

It works!

+ + + + +保存该文件并刷新您的网页。 + +![图 11.3][3] + + [3]: images/step4.png + +注意浏览器怎么理解"Ola's blog"是你的网页的标题的呢？ 它解释了 ` Ola's blog ` 并将其放置到您的浏览器 （它也用于书签，等等） 的标题栏中。 + +可能你也注意到每个开始标记匹配的 *结束标记*，用 `/`） 和元素是 *嵌套* （即只有您不能关闭特定标记，直到在里面的所有标记都关闭了）。 + +这就像把东西放进盒子里。 你有一个大箱子里，`` ；在它里面还有 ``，并包含更小盒： `

`. + +你需要遵循这些规则即 *关闭* 标签和 *嵌套* 的元素 — — 如果你不这样做，浏览器可能不能正确地解释它们以及您的页面将显示不正确。 + +## 自定义您的模板 + +现在，你可以找点乐子，尝试自定义您的模板 ！为此这里有几个有用的标签： + +* `

A heading

` -为你最重要的标题 +* `

A sub-heading

` 为下一层级的标题！ +* `

A sub-sub-heading

` ... 同样，直到 `
` +* `text` 强调您的文本 +* `text` 强烈强调您的文本 +* `
` 跳转到下一行（你不能放任何东西在br里面） +* `link` 创建一个链接 +* `
  • first item
  • second item
` 产生一个列表，就像这样！ +* `
` 定义页面上的一个段 + +下面是模板的一个完整示例： + + + + Django Girls blog + + + + +
+

published: 14.06.2014, 12:14

+

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

+

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.

+
+ + + + +我们已经创建了三个不同的 `div` 部分。 + +* 第一个 `div` 元素包含我们的博客的标题 — — 这是一个标题和链接 +* 另两个 `div` 元素包含我们博客文章发表的日期，`h2` 是可点击文章标题和两个 `p` （段落） 的文本、 日期和我们的博客。 + +它给了我们这种效果： + +![图 11.4][4] + + [4]: images/step6.png + +耶！ 但到目前为止，我们的模板永远只显示完全 **相同的信息** — — 而我们早些时候谈到模板作为使我们能够以 **相同的格式** 显示 **不同** 的信息. + +我们想要的真正想要做的是的显示实际添加到我们Django admin里面的文章：这是我们接下来要做的。 + +## 还有一件事：部署！ + +我们把这些成果放到网上一定很棒，对吧？让我们再来一次 PythonAnywhere 部署： + +### 提交并推送代码到 GitHub + +首先，让我们看看上次部署之后什么文件改变了（运行这些本地命令，不是在 PythonAnywhere 上）： + + $ git status + + +请确保你在 `djangogirls` 目录中，让我们告诉 `git` 包括此目录内的所有更改： + + $ git add --all . + + +> **注**`-A`（简称"全部"） 意味着，`git` 也会认识到如果你已经删除的文件 （默认情况下，它只能识别新的/已修改的文件）。 此外记得 （在第 3 章）`.` 意味着当前目录。 + +在我们上传的所有文件之前，让我们检查`git` 将上传什么（所有`git` 将上传的文件现在应以绿色显示）： + + $ git status + + +我们已经差不多完成了，现在是时候告诉它要在它的历史记录中保存此更改。 我们将要给它附上一条"提交消息"用来描述我们做了什么改动。 您可以在这个阶段键入任何您想要的东西，但写一些描述性的东西更有用，因为它能在将来使你记起你做了什么。 + + $ git commit -m "Changed the HTML for the site." + + +> **注意** 请确保您使用双引号括提交消息。 + +做完这些，我们上传（push）改动到 GitHub ： + + git push + + +### Pull 把你的新代码拉到 PythonAnywhere，然后重新加载你的 web 应用程序 + +* 打开 [PythonAnywhere consoles page][5] 并转到你的 **Bash console**（或启动一个新的）。然后，运行： + + [5]: https://www.pythonanywhere.com/consoles/ + + $ cd ~/my-first-blog + $ source myvenv/bin/activate + (myvenv)$ git pull + [...] + (myvenv)$ python manage.py collectstatic + [...] + + +然后观察你的代码被下载下来。如果你想要检查他是否正确下载，你可以跳转到**Files Tab** 并在PythonAnywhere上查看代码。 + +* 最后，跳到 [Web tab][6] 并点击对应你的 Web 应用程序的 **Reload** 。 + + [6]: https://www.pythonanywhere.com/web_app_setup/ + +你的更新应已上线！刷新你的浏览器，看到更新了吧 :) diff --git a/zh/html/images/step1.png b/zh/html/images/step1.png new file mode 100644 index 00000000000..eb474aaeddd Binary files /dev/null and b/zh/html/images/step1.png differ diff --git a/zh/html/images/step3.png b/zh/html/images/step3.png new file mode 100644 index 00000000000..47ede3f9993 Binary files /dev/null and b/zh/html/images/step3.png differ diff --git a/zh/html/images/step4.png b/zh/html/images/step4.png new file mode 100644 index 00000000000..0e6b48ec4a5 Binary files /dev/null and b/zh/html/images/step4.png differ diff --git a/zh/html/images/step6.png b/zh/html/images/step6.png new file mode 100644 index 00000000000..f044389de53 Binary files /dev/null and b/zh/html/images/step6.png differ diff --git a/zh/images/application.png b/zh/images/application.png new file mode 100644 index 00000000000..79071fe8d1b Binary files /dev/null and b/zh/images/application.png differ diff --git a/zh/installation/README.md b/zh/installation/README.md new file mode 100755 index 00000000000..afd992a2c49 --- /dev/null +++ b/zh/installation/README.md @@ -0,0 +1,49 @@ +# 如果你在家做这个练习 + +如果你在家做这个练习，而不是在一个 [Django Girls 活动](https://djangogirls.org/events/)中，你现在完全可以跳过这一章，直接阅读[互联网是如何工作的？](../how_the_internet_works/README.md)一章。 + +这是因为下面的这些步骤包含在整个教程当中，这只是一个额外的页面，把所有的安装说明收集在了一起。 Django Girls活动有一个“开学礼”环节，活动中会一次性安装完成所有的软件，因而在之后的线下活动中就无需再进行安装，这对我们很有帮助。 + +如果你觉得很有帮助，你也可以跟着阅读这一章。 但是如果你想在安装一堆软件以前就开始学习一些东西，最好跳过这一章，我们会稍后解释安装的部分。 + +祝你好运！ + +# 安装 + +在线下教程中，你会建立一个博客，有一些配置任务最好能够在之前完成，那样你就可以在那一天直接开始编程。 + +# 安装Python + +{% include "/python_installation/instructions.md" %} + +# 配置 virtualenv 与安装 Django + +{% include "/django_installation/instructions.md" %} + +# 安装一个代码编辑器 + +{% include "/code_editor/instructions.md" %} + +# 安装 Git + +{% include "/deploy/install_git.md" %} + +# 创建一个 GitHub 账户 + +前往 [GitHub.com](https://www.github.com) 并注册一个新的账号。 + +# 创建一个 PythonAnywhere 帐户 + +{% include "/deploy/signup_pythonanywhere.md" %} + +# 开始阅读 + +恭喜你，你配置好了全部的软件，可以准备正式开始了！如果你仍然在线下活动之前有一些时间，阅读一些入门章节会有一些帮助： + + * [互联网是如何工作的？](../how_the_internet_works/README.md) + + * [命令行介绍](../intro_to_command_line/README.md) + + * [Python 简介](../python_introduction/README.md) + + * [Django 是什么？](../django/README.md) diff --git a/zh/intro_to_command_line/README.md b/zh/intro_to_command_line/README.md new file mode 100755 index 00000000000..6dd9a4522e5 --- /dev/null +++ b/zh/intro_to_command_line/README.md @@ -0,0 +1,279 @@ +# 命令行界面简介 + +哈，这是令人兴奋，不是吗？:) 仅几分钟内你会写你第一行代码 + +**让我们把你介绍给你的第一个新朋友： 命令行 ！** + +以下步骤将显示你如何使用所有的黑客都使用的黑色窗口。它可能刚开始看上去有点吓人，但事实上它只是等待你的命令提示符。 + +> **注意** 请注意，在本书中我们使用术语“目录”和“文件夹”完全可以互换，它们指的是同一个东西。 + +## 什么是命令行？ + +这个窗口通常被称为 **命令行** 或 **命令行界面**，是一个基于文本的用来查看、 处理、 和操作您的计算机上的文件的应用程序。 就像 Windows 资源管理器或 Mac 上的 Finder，但没有图形界面。 命令行的其他名字是： *cmd*，*CLI*、 *提示符*、 *控制台* 或 *终端*. + +## 打开命令行界面 + +为了进行一些实验，我们需要首先打开我们的命令行界面。 + +### Windows系统 + +转到开始菜单 → 所有程序 → 附件 → 命令提示符。 + +### macOS 系统 + +应用程序 → 实用工具 → 终端。 + +### Linux系统 + +它可能是根据应用程序 → 附件 → 终端，但这可能取决于您的版本系统。如果它不存在，只需谷歌一下 :) + +## 提示符 + +你现在应该看到一个白色或黑色的窗口，正等待着你的命令。 + +如果你是在 Mac 或 Linux 上，您可能看到 `$`，就像这样： + + $ + + +在 Windows 上，它是一个 `>` 标志，像这样： + + > + + +每个命令将前缀由这个符号和一个空格组成，但您不必键入它。您的计算机将为您完成这个:) + +> 温馨提示： 你的提示符前可能是一些类似 `C:\Users\ola >` 或 `Ola-MacBook-Air:~ola$` 这样的符号，这都是正确的。 在本教程中我们将只是简化它到最低限度。 + +## 你的第一个命令 （耶 ！） + +让我们从简单的东西开始。键入以下命令： + + $ whoami + + +或 + + > whoami + + +然后键入 `enter`。这是我们的结果： + + $ whoami + olasitarska + + +正如你所看到的计算机刚刚打印了你的用户名。棒吧，呵呵?:) + +> 尝试键入每个命令，请不要复制粘贴。你会通过这种方式记得更多东西！ + +## 基础知识 + +每个操作系统都有一组略有不同的适用于相应命令行的命令，所以请务必按照您的操作系统说明来做。我们试试这个，好吗？ + +### 当前目录: + +知道身在何处让人高兴，对不对？让我们看看。输入命令并键入`enter`： + + $ pwd + /Users/olasitarska + + +如果你在 Windows 操作系统上： + + > cd + C:\Users\olasitarska + + +在你的机器上你可能会看见类似的东西。一旦你打开命令行工具你通常开始于用户主目录。 + +> 注： 'pwd' 代表 '打印工作目录'。 + +* * * + +### 列出文件和目录 + +那么它是什么？它一定很酷，找出。让我们看看： + + $ ls + Applications + Desktop + Downloads + Music + ... + + +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 + ... + + +* * * + +### 更改当前目录 + +现在，让我们去我们桌面目录： + + $ cd Desktop + + +Windows系统 + + > cd Desktop + + +请检查它是否真的发生改变了： + + $ pwd + /Users/olasitarska/Desktop + + +Windows系统 + + > cd + C:\Users\olasitarska\Desktop + + +它在这儿 ！ + +> 进阶提示： 如果你键入 `cd D`，然后在点击`tab`键，命令行将自动填充剩下的名称以便你可以更快地导航。 如果有多个文件夹以"D"开头，按下 `tab` 按钮两次以获取选项的列表。 + +* * * + +### 创建目录 + +在你的桌面上创建一个practice目录怎么样？你可以这样做： + + $ mkdir practice + + +Windows系统 + + > mkdir practice + + +这小小的命令将在桌面上为你创建名为`practice` 的目录。 你可以查看桌面文件夹或者通过运行 `ls` 或 `dir` 命令检查它是否存在！ 试试:) + +> 进阶提示： 如果你不想要一遍又一遍地键入相同的命令，试着按 `向上箭头键` 和 `向下箭头` 下循环查看最近你使用过的命令。 + +* * * + +### 练习 + +给你一个小挑战： 在您新创建的 `practice` 目录下创建一个名为 `test`的目录。使用 `cd` 和 `mkdir` 命令。 + +#### 解决方法 + + $ cd practice + $ mkdir test + $ ls + test + + +Windows系统 + + > cd practice + > mkdir test + > dir + 05/08/2014 07:28 PM test + + +恭喜 ！:) + +* * * + +### 清理 + +我们不想留下一个烂摊子，所以让我们删除所有的东西，直到达到目的。 + +首先，我们需要回到桌面： + + $ cd .. + + +Windows系统 + + > cd .. + + +使用 `..` 和 `cd` 命令将改变你的当前目录到父目录（包含当前目录的目录）。 + +检查你在哪里： + + $ pwd + /Users/olasitarska/Desktop + + +Windows系统 + + > cd + C:\Users\olasitarska\Desktop + + +现在删除 `practice` 目录： + +> **注意**： 删除文件使用 `del`，`rmdir` 或 `rm` 后便不能挽回，意思就是*已删除的文件会一去不复返了* ！ 因此，要十分小心地使用此命令。 + + $ rm -r practice + + +Windows系统 + + > rmdir /S practice + practice, Are you sure ? Y + + +完成了 ！为了肯定它真的已经删除了，让我们检查一下： + + $ ls + + +Windows系统 + + > dir + + +### 退出 + +暂时就到这里！你可以安全的关闭命令行。让我们以黑客的方式，好吗？:) + + $ exit + + +Windows系统 + + > exit + + +很酷吧?：） + +## 摘要 + +这里是一些有用的命令摘要： + +| 命令 (Windows) | 命令 （Mac OS / Linux） | 说明： | 示例： | +| ------------ | ------------------- | -------- | ------------------------------------------------- | +| exit | exit | 关闭窗口 | **exit** | +| cd | cd | 更改目录 | **cd test** | +| dir | ls | 列出的目录文件 | **dir** | +| copy | cp | 复制文件 | **copy c:\test\test.txt c:\windows\test.txt** | +| move | mv | 移动文件 | **move c:\test\test.txt c:\windows\test.txt** | +| mkdir | mkdir | 创建一个新目录 | **mkdir testdirectory** | +| del | rm | 删除文本文件目录 | **del c:\test\test.txt** | + +这些不过是你在你的命令行中可以运行的少量命令，但你今天不会用到比这里更多的了。 + +如果你好奇，[ss64.com][1] 包含用于所有操作系统命令的完整引用。 + + [1]: http://ss64.com + +## 准备好了吗？ + +让我们深入到 Python ！ \ No newline at end of file diff --git a/zh/python_installation/README.md b/zh/python_installation/README.md new file mode 100755 index 00000000000..399fa3d1182 --- /dev/null +++ b/zh/python_installation/README.md @@ -0,0 +1,13 @@ +# 让我们从学习Python开始 + +我们终于要开始了！ + +但首先，让我们告诉你什么是 Python。Python 是一种非常流行的编程语言，可以用来创建网站、 游戏、 科学软件、 图形和很多很多其他的东西。 + +Python 起源于 1980 年代后期，该语言的重要目标是源代码的人类可读性 (而不是机器!)。 这就是为什么它看起来比其他编程语言简单得多。 这使得它易于学习，但不要担心，Python 也是真的很强大 ！ + +# Python的安装 + +> 需要说明的是，如果你已经熟悉Python的安装步骤，那你就无需看这章，直接跳到下一章好了。 + +{% include "/python_installation/instructions.md" %} diff --git a/zh/python_installation/images/add_python_to_windows_path.png b/zh/python_installation/images/add_python_to_windows_path.png new file mode 100644 index 00000000000..3266efb6177 Binary files /dev/null and b/zh/python_installation/images/add_python_to_windows_path.png differ diff --git a/zh/python_installation/instructions.md b/zh/python_installation/instructions.md new file mode 100755 index 00000000000..96ab8a115ed --- /dev/null +++ b/zh/python_installation/instructions.md @@ -0,0 +1,59 @@ +> 本节基于 Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 的教程 + +Django 是用 Python 写的。 在 Django 中，我们需要使用 Python 语言去做所有的事情。 让我们从安装开始 ！ 我们希望您能安装 Python 3.4，所以如果你有任何以前的版本，你将需要将其升级。 + +### Windows系统 + +您可以从 https://www.python.org/downloads/release/python-343/ 网站上下载 Windows版的Python。 下载 * **.msi** 文件完成之后，你应该运行它 （双击它），并按照那里的指示。 重要的是记住 Python 的安装位置的路径 （目录）。 它以后将会被需要 ！ + +需要注意一件事情：在安装向导的第二步，选中“Customize”，向下滚动并确保选中“Add python.exe to the Path”选项，如下所示： + +![别忘了增加 Python 到 Path](../python_installation/images/add_python_to_windows_path.png) + +### Linux系统 + +很有可能你的系统已经默认安装了Python。要检查你是否安装了 （并且它是哪一个版本），打开控制台，并键入以下命令： + + $ python3 --version + Python 3.4.3 + + +如果你未曾安装过 Python 或者你想要一个不同的版本，你可以按如下所示安装它： + +#### Debian 或 Ubuntu + +在控制台中键入此命令： + + $ sudo apt install python3.4 + + +#### Fedora + +在您的控制台中使用此命令： + + $ sudo dnf install python3.4 + + +#### openSUSE + +在您的控制台中使用此命令： + + $ sudo zypper install python3 + + +### macOS + +你需要去到网站 https://www.python.org/downloads/release/python-343/ 然后下载 Python 安装程序： + + * 下载 *macOS 64-bit/32-bit installer* 文件， + * 双击 *python-3.4.3-macosx10.6.pkg* 以运行安装程序。 + +验证安装成功，请打开 *终端* 应用，运行 `python3` 命令： + + $ python3 --version + Python 3.4.3 + + +* * * + +如果您有任何疑问，或如果出了错，你根本不知道该怎么办下一步-请询问你的指导 ！ 有时事情都不顺利，这时寻求其他更多经验的人的帮助会更好。 diff --git a/zh/python_introduction/README.md b/zh/python_introduction/README.md new file mode 100755 index 00000000000..6910bf5e168 --- /dev/null +++ b/zh/python_introduction/README.md @@ -0,0 +1,775 @@ +# Python 简介 + +> 本章的部分内容基于 Geek Girls Carrots (https://github.com/ggcarrots/django-carrots) 的教程。 + +让我们现在就开始写代码 ！ + +## Python 提示符 + +要玩转 Python，首先需要打开您的计算机上的 *命令行* 。 这一点，你应该已经掌握了——你在 [命令行入门][1]这一章已经学习过。 + + [1]: ../intro_to_command_line/README.md + +如果你准备好了，那么请按照以下说明进行操作。 + +在 Windows 下输入 `python` 或在 Mac OS/Linux 上输入`python3` 并敲下 `回车键`。. + + $ python3 + Python 3.4.3 (...) + Type "help", "copyright", "credits" or "license" for more information. + >>> + + +## 第一条 Python 命令 ！ + +完成运行 Python 命令后，提示符变为 `>>>`。 这就意味着，现在我们只能使用符合 Python 语法的命令。 你不必键入 `>>>` —— Python会为你做的。 + +如果你想在任何时候退出 Python 控制台，只需要键入 `exit()` 或者在 Windows 下使用快捷键 `Ctrl+Z` ，在 Mac/Linux 下使用 `Ctrl+D` 快捷键。 这时候你就不会再看到 `>>>`。 + +但是现在，我们不需要退出 Python 控制台。 我们往下要继续了解 Python 。 让我们从最简单的开始。 例如，试着输入一些数学运算，如 `2 + 3` 并敲下 `回车`. + + >>> 2 + 3 + 5 + + +好的！看到答案是如何显示出来的吗？ Python 懂数学！你可以试试其他命令： - `4 * 5` - `5 - 1` - `40 / 2` + +好好的玩一会儿，然后回到这里 :)。 + +正如你所看到的，Python 是一个不错的计算器。如果你想知道你还能用它做什么…… + +## 字符串 + +比试试你的名字？把你的名字用引号括起来，就像这样： + + >>> "Ola" + 'Ola' + + +现在你创建了第一个字符串！ 字符串是一个可以由计算机处理的字符序列。 该字符串的开始和结束位置必须用同一个字符标志。 可以由单引号（`'`） 或双引号（`"`）来 包裹（两者是没有区别的！），让 Python 知道，这中间是一个字符串。 + +字符串可以用加号连接在一起。像这样： + + >>> "Hi there " + "Ola" + 'Hi there Ola' + + +你也可以将字符串与数字相乘： + + >>> "Ola" * 3 + 'OlaOlaOla' + + +如果你的字符串中需要表示一个单引号，你有两种方法： + +用双引号来包裹字符串： + + >>> "Runnin' down the hill" + "Runnin' down the hill" + + +或者使用反斜杠（``）来转义单引号 + + >>> 'Runnin\' down the hill' + "Runnin' down the hill" + + +表现得不错，是吧？如果想把字符串变成大写，只需要输入： + + >>> "Ola".upper() + 'OLA' + + +你刚刚在你的字符串上使用了 `upper` **函数**！ 像 （`upper()`）这样的函数是告诉Python运行某个给定对象如（`"Ola"`）上的一些列指令。 + +如果你想获取你名字里字母的个数，这里也有一个函数！ + + >>> len("Ola") + 3 + + +不知道为什么有时候你调用函数会在字符串尾部是用`.`（就像`"Ola".upper()`）而有时候你会在一开始就调用函数，然后将字符串置于括号中吗？ 好吧，在某些情况下，函数属于对象，就像 `upper()`，它只可以被应用于字符串上。 在这种情况下，我们将此函数称为**方法（method）**。 其他时候，函数不隶属于任何一个特定的对象，可以用在不同类型的对象上，例如 `len()` 。 这就是为什么我们使用`"Ola"`作为`len`函数的一个参数。 + +### 摘要 + +好的，关于字符串就学到这里。现在你已经学习到了以下这些内容： + +* **提示符**-键入命令行（代码）到 Python 提示符中，将在 Python 中得到回答。 +* **数字和字符串**-在 Python 里数字用于数学运算，而字符串被用作文本对象。 +* **运算符** - 例如 + 和 *, 将对赋值进行结合，并产生新的值。 +* **函数**-例如 upper() 和 len() ，对对象执行操作。 + +这些都是学习每种编程语言中最基本的东西。想学点更难的东东了吗？我们敢打赌你想！ + +## 错误 + +让我们试试一些新东西，我们能够像得到名称长度一样的方式来得到一个数字的长度吗？输入 `len(304023)` 然后敲下 `回车键`： + + >>> len(304023) + Traceback (most recent call last): + File "", line 1, in + TypeError: object of type 'int' has no len() + + +我们得到了第一个错误！它说"int"（整数）的对象类型没有长度。所以我们现在该做什么呢？或许我们能够把我们的数字写成字符串？字符串有长度，对吗？ + + >>> len(str(304023)) + 6 + + +它成功了！我们将 `str` 函数插入到 `len` 函数内。`str` 将所有东西转换成字符串。 + +* `str` 函数将对象转换成**字符串** +* `int` 函数将对象转换为**整数** + +> 重要提示：我们能够将所有的数字都转换成文本，但我们不能将所有的文本转换成数字，否则 `int("hello")` 究竟是什么意思？ + +## 变量 + +变量是编程中的一个重要概念。 变量只不过是一个待会儿你可以使用的一个东西的名称。 程序员是用这些变量去存储数据，让他们的代码变得更具可读性，所以他们不需要一直记住东西是什么。 + +假设我们想创建一个新变量，叫做 `name` ： + + >>> name = "Ola" + + +你看到了吗？这很容易！原因很简单：名字等于Ola。 + +正如你所注意到的，你的程序不会像以前那样返回任何东西。那么我们怎么知道这个变量确实存在？简单键入 `name` 然后按下`回车`。 + + >>> name + 'Ola' + + +耶！你的第一个变量:)！你随时可以改变它指代的内容： + + >>> name = "Sonja" + >>> name + 'Sonja' + + +你还可以这样使用函数： + + >>> len(name) + 5 + + +太棒了，对吗？当然，变量可以是任何东西，比如数字！试试这个： + + >>> a = 4 + >>> b = 6 + >>> a * b + 24 + + +但是如果我们使用了错误的名字？你能猜出来会发生什么吗？试试吧！ + + >>> city = "Tokyo" + >>> ctiy + Traceback (most recent call last): + File "", line 1, in + NameError: name 'ctiy' is not defined + + +一个错误！ 正如你所见，Python有不同种类的错误，这一种称作**NameError**。 Python将会在你尝试使用未定义的变量时产生这种错误。 如果你以后再次遇到这种错误，检查你的代码，看看你是不是错误输入了任何名称。 + +玩一会儿，然后看看你能做什么！ + +## 打印功能 + +试试这个： + + >>> name = 'Maria' + >>> name + 'Maria' + >>> print(name) + Maria + + +当你键入 `name`，Python 解释器会打印变量'name'*表示*的字符串，单引号包裹的：'Maria'。 当你调用 `print(name)` 的时候，Python 将会“打印”内容到屏幕上，没有引号，更加整洁。 + +我们稍后会看到的，当我们想打印一些东西，或者想打印一些多行的东西，`print()` 是一个对我们很有用的函数。 + +## 列表 + +除了字符串和整数，Python提供了各种不同类型的对象。 现在我们要介绍一个叫做**列表**的东西。 列表和你想的一样：一个容纳着其他对象的列表对象: ) + +继续，创建一个列表： + + >>> [] + [] + + +是的，这个列表是空的。并不是十分有用，对吗？让我们创建一个彩票号码的列表。我们不想总是重复我们的工作，所以我们也将它置于一个变量中： + + >>> lottery = [3, 42, 12, 19, 30, 59] + + +好吧，我们有了一个列表！我们能为它做什么呢？让我们看一看在列表中有多少个彩票数字。你知道什么方法什么函数你可以使用的吗？你已经知道了！ + + >>> len(lottery) + 6 + + +是的！`len()`可以给你列表中对象的个数。很方便，对吗？也许我们可以将它排序： + + >>> lottery.sort() + + +这不会返回任何东西，它仅仅改变了数字出现在列表里的顺序。让我们再一次把它打印出来，看看发生了什么： + + >>> print(lottery) + [3, 12, 19, 30, 42, 59] + + +正如你所看到的，你的列表里的数字现在从最小到最大排序。祝贺！ + +也许我们想要将顺序倒序呢？让我们开始做吧！ + + >>> lottery.reverse() + >>> print(lottery) + [59, 42, 30, 19, 12, 3] + + +很简单，对吧？如果你想给你的列表里加入些东西，你可以通过简入以下命令： + + >>> lottery.append(199) + >>> print(lottery) + [59, 42, 30, 19, 12, 3, 199] + + +如果你只想要显示第一个数字，你可以通过使用**索引**完成。 索引就是列表中出现一个项的位置。 程序员一般习惯从0开始计数，所以列表中的第一个对象的索引是0，下一个是1，依此类推。 试试这个： + + >>> print(lottery[0]) + 59 + >>> print(lottery[1]) + 42 + + +正如你所见，你可以通过使用列表名和置于方括号中的对象索引来访问列表中的不同元素。 + +如果需要从列表中删除元素，需要使用 **索引** 和上面学到的 `pop()` 语句来完成。 我们看个例子，删除列表中的第一个数字，以加强我们之前学到的知识。 + + >>> print(lottery) + [59, 42, 30, 19, 12, 3, 199] + >>> print(lottery[0]) + 59 + >>> lottery.pop(0) + >>> print(lottery) + [42, 30, 19, 12, 3, 199] + + +干得漂亮！ + +出于额外的乐趣，试试其他的索引：6，7，1000，-1，-6或者-1000。看看你是否能预测出命令尝试的结果。这些结果有意义吗？ + +你可以找到本章中所有关于列表的方法的Python文档：https://docs.python.org/3/tutorial/datastructures.html + +## 字典 + +字典类似与列表，但是你通过查找键来获取值，而不是通过访问索引。一个键可以是任何字符串或者数字。定义一个空字典的语法是： + + >>> {} + {} + + +这表明你刚创建了一个空字典。加油！ + +现在，试着写下下面的命令（试着也替换你自己的信息）： + + >>> participant = {'name': 'Ola', 'country': 'Poland', 'favorite_numbers': [7, 42, 92]} + + +通过这个命令，你刚创建了一个名为`participant`的变量，有三个键值对： + +* 键 `name` 指向 `'Ola'` (一个`字符串` 对象), +* `country` 指向`'Poland'` (另一个 `字符串`), +* 和`favorite_numbers` 指向`[7, 42, 92]` (一个有三个数字的 `列表` ). + +你可以通过下面的语法检查每个键的内容： + + >>> print(participant['name']) + Ola + + +看，这就和列表很相似了。但是你不需要记住索引-仅仅需要记住名字。 + +如果我们问Python一个不存在的键呢？能猜到吗？让我们试一试，看看！ + + >>> participant['age'] + Traceback (most recent call last): + File "", line 1, in + KeyError: 'age' + + +看，另一个错误！这是一个 **KeyError** 。Python 会告诉你键`'age'`并不存在于这个字典里。 + +那么什么时候使用字典或者列表呢？好吧，这是一个值得思考的点。在查看下一行答案前先在脑子里面设想一个答案。 + +* 你需要一个有序的元素排列吗？使用列表。 +* 你需要将键值相关联，这样你可以在后面更有效的查找他们？使用字典。 + +字典，就像列表，是*可变的*，意味着他们在创建之后可以被改变。你可以在字典被创建之后，增加新的键/值对，就像： + + >>> participant['favorite_language'] = 'Python' + + +像列表，使用`len()`方法，返回字典中键值对数目。继续输入命令： + + >>> len(participant) + 4 + + +我希望你能觉得到目前为止这些都合情合理。:)准备享受更多字典的乐趣吗？跳到下一行去做一些更有趣的事情。 + +你可以使用`pop() `语句去删除字典里的元素。 比如，如果你想删除键`'favorite_numbers'`所对应的项，只需要键入如下命令： + + >>> participant.pop('favorite_numbers') + >>> participant + {'country': 'Poland', 'favorite_language': 'Python', 'name': 'Ola'} + + +正如你从输出中看到的，键值对所对应的'favorite_numbers'键已经被删除了。 + +此外，你还可以改变字典中已经存在的键所对应的值。键入： + + >>> participant['country'] = 'Germany' + >>> participant + {'country': 'Germany', 'favorite_language': 'Python', 'name': 'Ola'} + + +正如你所见，键`'country'`的值已经从`'Poland'`变为了`'Germany'`。:)兴奋吗？哈哈！你刚又学了另一个有趣的东西。 + +### 摘要 + +太棒了！你现在知道很多关于编程的东西了。在最后的部分你学习了： + +* **errors** - 你知道如何读并理解错误，如果Python不能理解你所给它的命令。 +* **variables** - 对象名称让你代码变得更简单更可读的 +* **lists** - 按照特定序列排序的存储着对象的列表 +* **dictionaries** - 存储着键值对的对象 + +为接下来的部分感到兴奋吗？：） + +## 比较事物 + +编程里经常会比较事物。什么是最容易比较的东西呢？当然是数字。让我们来看一看它是怎么工作的： + + >>> 5 > 2 + True + >>> 3 < 1 + False + >>> 5 > 2 * 2 + True + >>> 1 == 1 + True + >>> 5 != 2 + True + + +我们给 Python 一些数字去比较。正如你所见的，Python 不仅可以比较数字，也可以比较函数的返回值。不错，是的吧？ + +你知道为什么我们在判断相等时要把两个等号 `==` 放在一起吗？ 我们使用一个等于符号 `=` 来给变量赋值。 你总是 **总是** 需要把两个 `==` 放在一起，如果你希望去检查两个东西是不是相同。 如果我们认为两个东西是不相等的。 我们使用符号 `! =`，如上面的示例中所示。 + +给Python两个更多的任务： + + >>> 6 >= 12 / 2 + True + >>> 3 <= 2 + False + + +`>` 和 `<` 很简单, 但 `>=` and `<=` 表示什么啊? 阅读下面的说明： + +* x `>` y 表示: x 大于 y +* x `<` y 表示：x 小于 y +* x `< =` y 表示： x 小于或等于 y +* x `>=` y 表示：x 大于或等于 y + +棒极了！想要做一次吗？试试这个： + + >>> 6 > 2 and 2 < 3 + True + >>> 3 > 2 and 2 < 1 + False + >>> 3 > 2 or 2 < 1 + True + + +你可以给 Python 任意多的数字来比较，他会给你想要的答案！非常智能，对吗？ + +* **and** -如果你使用 `and` 运算符，两个比较值都需要为真（True），这样整个命令才能为真 +* **or** - 如果你想使用 `or` 运算符，只要有一个比较值是真，那么整个命令就为真 + +你听说过“驴唇不对马嘴”这种说法吗？让我们试试它的 Python 版： + + >>> 1 > 'django' + Traceback (most recent call last): + File "", line 1, in + TypeError: '>' not supported between instances of 'int' and 'str' + + +在这里你看到就像在这表达式中，Python 是不能比较数字 （`int`） 和字符串 （`str`）。 相反，它显示一个 **TypeError**，并告诉我们两个类型不能相互比较。 + +## 布尔逻辑 + +顺带提一句，你刚刚学习了一个 Python 新的类型。它被叫做**布尔**——而且这可能是最简单的类型。 + +只有两个布尔类型对象: - True - False + +但是为了 Python 能够理解，你需要写成 True（第一个字母大写，其他字母小写）。 **true, TRUE, tTUE都不会正常工作 —— 只有 True 是正确的**（同样适用于False） + +布尔也可以是变量！看这里： + + >>> a = True + >>> a + True + + +或者通过这种方式： + + >>> a = 2 > 5 + >>> a + False + + +练习有趣的布尔值，然后尝试下面的命令： + +* `True and True` +* `False and True` +* `True or 1 == 1` +* `1 != 2` + +祝贺你！布尔值是编程中最酷的功能，你刚刚学会了如何使用它们！ + +# 保存它！ + +到目前为止，我们所写的所有 Python 代码都是在命令行中，这限制了我们每次只能写一行代码。 正常的程序是被保存在文件里，并通过对应程序语言的**解释器**或者**编译器**处理后执行。 目前为止，我们已经试过在 Python **解释器**中一行一行的运行我们的程序。 我们接下来的几个任务需要不止一行代码，所以我们很快就会需要： + +* 退出 Python 解释器 +* 打开我们选择的代码编辑器 +* 将一些代码保存到一个新的 python 文件 +* 运行它！ + +为了退出我们一直使用的 Python 解释器，只需要键入 exit() 函数： + + >>> exit() + $ + + +这将让你返回到命令提示符。 + +早些时候，我们在[代码编辑器][2]章节选择了一个代码编辑器。我们现在需要打开一个编辑器，然后写一些代码进入新文件： + + [2]: code_editor/README. md + + python + print('Hello, Django girls!') + + +> **注意**你应该注意到代码编辑器最酷的事情之一: 颜色! 在 Python 控制台中，一切都是相同的颜色，现在你应该看到 `打印` 函数和字符串的颜色不同。 这就所谓的"语法高亮"，在编写代码时是非常有用的功能。 颜色会给你提示，如未闭合的字符串或关键字名称拼写错误 （如函数中的 `def` 关键字，我们会在下面看到） 。 这是我们使用代码编辑器的原因之一:) + +显然，你现在是一个相当熟练的python开发者，所以随便写一些你今天学到的代码吧。 + +现在我们需要保存文件，然后给它一个描述性的名字。 让我们命名这个文件 **python_intro.py** 然后保存它到您的桌面。 我们可以随意给文件起名字，但是要确保 **.py** 在文件名结尾。 **.py** 扩展名告诉操作系统，这是一个 **python可执行文件**，Python 可以运行它。 + +文件保存之后，就到了可以运行它的时候了！使用你在命令行章节学习到的技能，在终端**改变目录**到桌面。 + +在 Mac 上命令会看起来像这样： + + $ cd ~/Desktop + + +在Linux，它会看起来像这样（“桌面”可能会被翻译成您所在的语言）： + + $ cd ~/Desktop + + +并在 windows 上，它会看起来像这样： + + > cd %HomePath%\Desktop + + +如果你遇到麻烦了，尽管提问寻求帮助。 + +现在文件中输入这样的代码并使用 Python 执行： + + $ python3 python_intro.py + Hello, Django girls! + + +好吧！你刚刚运行了你保存在文件中的第一个 python 程序。感觉棒极了吗？ + +你可以继续去学习编程中一些重要的工具： + +## If...elif...else + +很多代码只会在提供的条件被满足的时候运行。这就是为什么Python有**if 语句**. + +用以下代码替换 **python_intro.py** 中的内容： + + python + if 3 > 2: + + +如果我们保存这个，然后运行它，我们会看到一个类似这样的错误： + + $ python3 python_intro.py + File "python_intro.py", line 2 + ^ + SyntaxError: unexpected EOF while parsing + + +当条件 `3 > 2` 为真（或者 `True` ），Python 希望我们给它进一步的指示。 我们试着让 Python 打印 “it works!”。 更改您在 **python_intro.py** 文件中的代码变为这样： + + if 3 > 2: + print('It works!') + + +注意我们已经为下一行缩进了4个空格了吗？ 这样做是为了让 Python 知道如果条件正确它将运行什么代码。 你可以使用一个空格，但是几乎所有的 Python 程序员都是用4个，使事情看上去很整洁。 单个 `tab` 也将算作 4 个空格。 + +保存它，然后再次运行它： + + $ python3 python_intro.py + It works! + + +### 如果条件不为真呢？ + +在之前的例子里，代码只会在条件被满足的时候被运行。但是 Python 同样有 `elif` 和 `else` 语句： + + if 5 > 2: + print('5 is indeed greater than 2') + else: + print('5 is not greater than 2') + + +这段代码在运行后会打印： + + $ python3 python_intro.py + 5 is indeed greater than 2 + + +如果2是比5大，那么第二个命令会被执行。简单，对吧？在我们看看 `elif` 是怎么工作的： + + name = 'Sonja' + if name == 'Ola': + print('Hey Ola!') + elif name == 'Sonja': + print('Hey Sonja!') + else: + print('Hey anonymous!') + + +然后运行： + + $ python3 python_intro.py + Hey Sonja! + + +看到发生什么了吗？如果前面的条件失败了，`elif` 允许你添加额外条件来判断接下来该怎么运行。 + +在 `if` 语句之后，你可以添加任意多的 `elif` 语句。例如： + + volume = 57 + if volume < 20: + print("It's kinda quiet.") + elif 20 <= volume < 40: + print("It's nice for background music") + elif 40 <= volume < 60: + print("Perfect, I can hear all the details") + elif 60 <= volume < 80: + print("Nice for parties") + elif 80 <= volume < 100: + print("A bit loud!") + else: + print("My ears are hurting!") + + +Python 遍历判断每个测试的条件，并打印： + + $ python3 python_intro.py + Perfect, I can hear all the details + + +### 摘要 + +在刚才的三个练习，你已经学习到了： + +* **比较事物** - 在Python里你可以比较东西通过使用`>`, `>=`, `==`, `<=`, `<` 和`and`, `or` 运算符。 +* **Boolean** - 一个只能有两个值中的一个的对象: `True` 或者 `False` +* **保存文件** - 保存代码到文件里，这样你可以执行更大的程序。 +* **if...elif...else** -让你只执行当某个条件满足后的代码。 + +现在是本章的最后一个部分了！ + +## 你自己的函数！ + +还记得你在Python里运行的函数`len()`？好消息，你会学习如何编写自己的函数了！ + +一个函数就是一些 Python 应该运行的指令集。 每个Python函数都是以关键词 `def` 开始的，我们可以给定一个名字并能指定若干个参数。 让我们从一个简单的开始。 使用下面的替换**python_intro.py**中的代码： + + def hi(): + print('Hi there!') + print('How are you?') + + hi() + + +好吧，我们的第一个函数已经准备好了！ + +你可以想知道为什么我们把函数的名称写在文件的底部。 这是因为Python读了文件，然后自顶向下的执行它。 所以为了使用我们的函数，我们必须要在底部重写它。 + +现在让我们运行这个，看看会发生什么： + + $ python3 python_intro.py + Hi there! + How are you? + + +那很简单！让我们建立我们第一个有参数的函数。我们使用前面的例子-一个函数打印“hi to the person running it” + + def hi(name): + + +正如你所见的，我们给我们的函数一个叫`name`的参数： + + def hi(name): + if name == 'Ola': + print('Hi Ola!') + elif name == 'Sonja': + print('Hi Sonja!') + else: + print('Hi anonymous!') + + hi() + + +记住： `print` 函数是在 `if` 语句的缩进内的。这是因为我们要在仅满足条件时，才运行函数。让我们看看它是如何工作： + + $ 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' + + +哦！一个错误。 幸运的是，Python给我们一个有用的错误提示信息。 告诉我们函数 `hi()`（这是我们定义的）必须有一个参数（称之为`name`），我们调用函数的时候忘记传递它了。 让我们在文件的底部解决它： + + hi("Ola") + + +然后再次运行它： + + $ python3 python_intro.py + Hi Ola! + + +那如果我们改变名字了呢？ + + hi("Sonja") + + +然后运行它： + + $ python3 python_intro.py + Hi Sonja! + + +现在，如果我们写了另一个名字会发生什么？（不是 Ola 或者 Sonja ）试试看是不是和你想的是一样的。它应该打印成这样： + + Hi anonymous! + + +这太棒了，对吗？ 这样我们不用在每次调用此方法跟不同的人打招呼的时候重复自己。 而这正是我们为什么需要（定义）函数 - 你永远不想重复你的代码！ + +让我们做一些更智能的事情——如果有超过两个或者更多的名字，我们需要为每个都写一个判断，会比较难，对不对？ + + def hi(name): + print('Hi ' + name + '!') + + hi("Rachel") + + +现在让我们调用代码： + + $ python3 python_intro.py + Hi Rachel! + + +祝贺你！你刚刚学习了如何写函数！:) + +## 循环 + +这是最后一部分。这真快，对吗？:) + +程序员不喜欢重复劳动。编程的核心是自动化，所以我们不希望手动的一行一行去调用打招呼函数，是吧？这时候循环就能派上用场了。 + +还记得列表吗？让我们做一个女孩的列表： + + girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] + + +我们想要根据他们所有人的名字依次打招呼。我们有一个 `hi` 函数去实现这个，所以让我们在一个循环中使用它： + + for name in girls: + + +for 语句的声明和 if 语句声明类似，下面代码需要缩进。 + +这是文件中完整的代码： + + def hi(name): + print('Hi ' + name + '!') + + girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You'] + for name in girls: + hi(name) + print('Next girl') + + +然后当我们去运行它： + + $ python3 python_intro.py + Hi Rachel! + Next girl + Hi Monica! + Next girl + Hi Phoebe! + Next girl + Hi Ola! + Next girl + Hi You! + Next girl + + +正如你所看见的，所有你放在 `for` 中的语句都将会根据列表 `girls` 中的每个元素而重复执行。. + +你同样可以使用 `for` 来遍历使用 `range` 函数生成的数字： + + for i in range(1, 6): + print(i) + + +这将会打印： + + 1 + 2 + 3 + 4 + 5 + + +`range` 函数产生一个列表的数字，一个挨着一个（这些数字是由您提供的参数而产生的）。 + +请注意第二个参数将不会被包括在Python输出列表中（意味着`range(1,6)`从1到5计数，但是不包括数字6）。 这是因为"范围"是半开区间，意思是包含第一个值，但不包括最后一个。 + +## 摘要 + +就是这样，**你太厉害啦！** 这是一个棘手的章节，所以你应该为自己感到骄傲。我们为你取得这么多进展而感到骄傲！ + +你可以简单做点其他事情—— 伸个懒腰，走动一会儿，放松下你的眼睛，再接着往下一章。:) + +![纸杯蛋糕][3] + + [3]: images/cupcake.png diff --git a/zh/python_introduction/images/cupcake.png b/zh/python_introduction/images/cupcake.png new file mode 100644 index 00000000000..8c1820adee8 Binary files /dev/null and b/zh/python_introduction/images/cupcake.png differ diff --git a/zh/template_extending/README.md b/zh/template_extending/README.md new file mode 100755 index 00000000000..e5c9cf76df5 --- /dev/null +++ b/zh/template_extending/README.md @@ -0,0 +1,131 @@ +# 模板扩展 + +另一个有趣的事情Django已经为你做好了就是**模板扩展**。这是什么意思呢？它意味着你可以使用你的HTML相同代码为你网站不同的网页共享。 + +通过这种方法，当你想使用同样的信息或布局，或者你想改变某些模板内容时，你不必在每个文件中都重复着相同的代码。你仅仅只需要改变一个文件，而不是所有的。 + +## 创建一个基础模板 + +一个基础模板是最重要的模板，你扩展到你网站的每一页。 + +让我们创建一个`base.html`文件到`blog/templates/blog/`: + +``` + blog + └───templates + └───blog + base.html + post_list.html +``` + + +然后将它打开，从`post_list.html`中复制所有东西到`base.html`文件，就像这样： + +```html + {% load staticfiles %} + + + Django Girls blog + + + + + + +
+

Django Girls Blog

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

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +
+
+
+ + +``` + + +然后在`base.html`中，替换你所有的 ``(所有的在`` 和 ``之间的内容)像这样： + +```html + +
+

Django Girls Blog

+
+
+
+
+ {% block content %} + {% endblock %} +
+
+
+ +``` + + +用如下内容替换所有在 `{% for post in posts %}{% endfor %}`之间的代码： + +```html + {% block content %} + {% endblock %} +``` + + +这是什么意思呢？ 你刚刚创建了一个`block（块）`，这个模板标签允许你在其中插入扩展自`base.html`的模板的HTML代码。 我们一会儿将给你展示这个如何使用。 + +现在保存它，然后再次打开你的`blog/templates/blog/post_list.html`。 删除一切body外的代码，然后删除 `
`，此时文件会看起来像这样： + +```html + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} +``` + + +然后现在将这行加到文件的开始： + +```html + {% extends 'blog/base.html' %} +``` + + +{% raw %}这意味着我们在 `post_list.html`模板文件中扩展了 `base.html` 模板的内容。 还有一件事：将所有(除了我们刚刚加入的那行) 内容置于`{% block content %}`和 `{% endblock %}`之间。。 像这样:{% endraw %} + +```html + {% extends 'blog/base.html' %} + + {% block content %} + {% for post in posts %} +
+
+ {{ post.published_date }} +
+

{{ post.title }}

+

{{ post.text|linebreaksbr }}

+
+ {% endfor %} + {% endblock %} +``` + + +好了，就是它了！检查你的网站还能正常工作：） + +> 如果你有任何错误 `TemplateDoesNotExists` 这意味着没有 `blog/base.html` 文件，你需要 `runserver` 运行在控制台，尝试去关掉它（通过按下Ctrl+C -Control和C按钮一切）然后重新运行`python manage.py runserver` 命令行。 diff --git a/zh/whats_next/README.md b/zh/whats_next/README.md new file mode 100755 index 00000000000..1fe9d3af464 --- /dev/null +++ b/zh/whats_next/README.md @@ -0,0 +1,40 @@ +# 接下来呢？ + +祝贺你！**你简直太棒了**。我们很自豪！<3 + +### 现在要做什么？ + +休息一下，放松。你刚做完非常多的事。 + +之后，请确保： + +* 在[Facebook][1]或者 [推特][2] 来关注 Django Girls 以了解最新情况 + + [1]: http://facebook.com/djangogirls + [2]: https://twitter.com/djangogirls + +### 你能推荐更进一步的资源吗？ + +是啊！首先，继续尝试其他书籍，称作[Django Girls教程：扩展][3]. + + [3]: https://tutorial-extensions.djangogirls.org + +稍后，你可以试试利用以下的资源。 他们非常值得推荐啊！ +- [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 +