├── .github └── workflows │ └── documentation.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENCE ├── README.md ├── babel.config.js ├── blog ├── 2021-11-08-Hello-world.md └── authors.yml ├── docs ├── 01-Culture-generale-en-informatique │ ├── 00-introduction.md │ ├── 01-Les-bases-des-reseaux │ │ ├── 01-les-bases-du-reseau.md │ │ ├── 02-tcp-ip.md │ │ ├── 03-dhcp-dns.md │ │ ├── 04-client-serveur.md │ │ └── _category_.json │ ├── 01-histoire-de-l-informatique.md │ ├── 02-bases-d-internet │ │ ├── 00-introduction.md │ │ ├── 01-les-reseaux-d-internet.md │ │ ├── 02-un-serveur-web.md │ │ ├── 03-les-adresses-ip-publique.md │ │ └── _category_.json │ ├── 02-un-ordinateur.md │ └── _category_.json ├── 02-Connaissances-de-base │ ├── 01-bases-algorithme │ │ ├── 01-variables-operateurs-flux-entree-et-sortie.md │ │ ├── 02-logique-booleenne-et-structures-conditionnelles.md │ │ ├── 03-les-boucles.md │ │ └── _category_.json │ ├── 02-les-grands-principes-de-developpement │ │ ├── 00-introduction.md │ │ └── _category_.json │ ├── 03-bases-api │ │ ├── 00-introduction.md │ │ ├── 01-api-rest.md │ │ └── _category_.json │ └── _category_.json ├── 03-html-et-css │ ├── 01-html.md │ ├── 02-css.md │ └── _category_.json ├── 04-php │ ├── 00-introduction.md │ ├── 01-Installation.md │ ├── _category_.json │ └── xx-langage-php.md ├── 05-bases-de-symfony │ ├── 01-paradigme-mvc.md │ └── _category_.json ├── 06-symfony │ ├── 00-introduction.md │ ├── 01-installation.md │ ├── 02-routage.md │ ├── 03-controleurs.md │ ├── 04-twig.md │ ├── 05-modeles.md │ ├── 06-formulaires.md │ ├── 07-services.md │ ├── 08-JS-Symfony.md │ └── _category_.json ├── 07-JavaScript │ ├── 01-introduction.md │ ├── 02-les-variables.md │ ├── 03-les-conditions.md │ ├── 04-les-boucles.md │ ├── 05-les-fonctions.md │ ├── 06-events.md │ ├── 07-POO.md │ ├── 08-les-erreurs.md │ ├── 09-la gestion-asynchrone.md │ ├── 10-DOM.md │ ├── 11-AJAX.md │ ├── 12-JS-côté-serveur.md │ ├── 13-frameworks.md │ └── _category_.json ├── 08-Notions-systeme │ ├── 01-linux │ │ ├── 00-introduction.md │ │ ├── 01-les-commandes-de-base.md │ │ └── _category_.json │ ├── 02-docker │ │ ├── 00-le-concept.md │ │ ├── 01-passerelle-de-la-base-a-la-pratique.md │ │ ├── 02-docker-sous-symfony.md │ │ └── _category_.json │ └── _category_.json ├── 09-Communauté │ ├── 00-communaute.md │ ├── 01-contribuer.md │ └── _category.json ├── 09-outils │ ├── 01-notions-git │ │ ├── 00-introduction.md │ │ ├── 01-qu-est-ce-que-le-versionning.md │ │ ├── 02-debuter-avec-git.md │ │ ├── 03-github-et-cie-different-de-git.md │ │ └── _category_.json │ └── _category_.json └── intro.md ├── docusaurus.config.js ├── package-lock.json ├── package.json ├── screenshoot.png ├── sidebars.js ├── src ├── components │ ├── HomepageFeatures.js │ └── HomepageFeatures.module.css ├── css │ └── custom.css └── pages │ ├── index.js │ ├── index.module.css │ └── markdown-page.md └── static ├── .nojekyll └── img ├── dev.svg ├── favicon.ico ├── logo.svg ├── map.svg ├── step.svg └── tutorial ├── docsVersionDropdown.png └── localeDropdown.png /.github/workflows/documentation.yml: -------------------------------------------------------------------------------- 1 | name: documentation 2 | 3 | on: 4 | pull_request: 5 | branches: [documentation] 6 | push: 7 | branches: [documentation] 8 | 9 | jobs: 10 | checks: 11 | if: github.event_name != 'push' 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v1 15 | - uses: actions/setup-node@v1 16 | with: 17 | node-version: '14.x' 18 | - name: Test Build 19 | run: | 20 | if [ -e yarn.lock ]; then 21 | yarn install --frozen-lockfile 22 | elif [ -e package-lock.json ]; then 23 | npm ci 24 | else 25 | npm i 26 | fi 27 | npm run build 28 | gh-release: 29 | if: github.event_name != 'pull_request' 30 | runs-on: ubuntu-latest 31 | steps: 32 | - uses: actions/checkout@v1 33 | - uses: actions/setup-node@v1 34 | with: 35 | node-version: '14.x' 36 | - uses: webfactory/ssh-agent@v0.5.0 37 | with: 38 | ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }} 39 | - name: Release to GitHub Pages 40 | env: 41 | USE_SSH: true 42 | GIT_USER: git 43 | run: | 44 | git config --global user.email "yoan.bernabeu@gmail.com" 45 | git config --global user.name "gh-actions" 46 | if [ -e yarn.lock ]; then 47 | yarn install --frozen-lockfile 48 | elif [ -e package-lock.json ]; then 49 | npm ci 50 | else 51 | npm i 52 | fi 53 | npm run deploy 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | 2 | # Contributor Covenant Code of Conduct 3 | 4 | ## Our Pledge 5 | 6 | We as members, contributors, and leaders pledge to make participation in our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, visible or invisible disability, ethnicity, sex characteristics, gender 9 | identity and expression, level of experience, education, socio-economic status, 10 | nationality, personal appearance, race, caste, color, religion, or sexual identity 11 | and orientation. 12 | 13 | We pledge to act and interact in ways that contribute to an open, welcoming, 14 | diverse, inclusive, and healthy community. 15 | 16 | ## Our Standards 17 | 18 | Examples of behavior that contributes to a positive environment for our 19 | community include: 20 | 21 | * Demonstrating empathy and kindness toward other people 22 | * Being respectful of differing opinions, viewpoints, and experiences 23 | * Giving and gracefully accepting constructive feedback 24 | * Accepting responsibility and apologizing to those affected by our mistakes, 25 | and learning from the experience 26 | * Focusing on what is best not just for us as individuals, but for the 27 | overall community 28 | 29 | Examples of unacceptable behavior include: 30 | 31 | * The use of sexualized language or imagery, and sexual attention or 32 | advances of any kind 33 | * Trolling, insulting or derogatory comments, and personal or political attacks 34 | * Public or private harassment 35 | * Publishing others' private information, such as a physical or email 36 | address, without their explicit permission 37 | * Other conduct which could reasonably be considered inappropriate in a 38 | professional setting 39 | 40 | ## Enforcement Responsibilities 41 | 42 | Community leaders are responsible for clarifying and enforcing our standards of 43 | acceptable behavior and will take appropriate and fair corrective action in 44 | response to any behavior that they deem inappropriate, threatening, offensive, 45 | or harmful. 46 | 47 | Community leaders have the right and responsibility to remove, edit, or reject 48 | comments, commits, code, wiki edits, issues, and other contributions that are 49 | not aligned to this Code of Conduct, and will communicate reasons for moderation 50 | decisions when appropriate. 51 | 52 | ## Scope 53 | 54 | This Code of Conduct applies within all community spaces, and also applies when 55 | an individual is officially representing the community in public spaces. 56 | Examples of representing our community include using an official e-mail address, 57 | posting via an official social media account, or acting as an appointed 58 | representative at an online or offline event. 59 | 60 | ## Enforcement 61 | 62 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 63 | reported to the community leaders responsible for enforcement at 64 | [contact@yoandev.co](mailto:contact@yoandev.co). 65 | All complaints will be reviewed and investigated promptly and fairly. 66 | 67 | All community leaders are obligated to respect the privacy and security of the 68 | reporter of any incident. 69 | 70 | ## Enforcement Guidelines 71 | 72 | Community leaders will follow these Community Impact Guidelines in determining 73 | the consequences for any action they deem in violation of this Code of Conduct: 74 | 75 | ### 1. Correction 76 | 77 | **Community Impact**: Use of inappropriate language or other behavior deemed 78 | unprofessional or unwelcome in the community. 79 | 80 | **Consequence**: A private, written warning from community leaders, providing 81 | clarity around the nature of the violation and an explanation of why the 82 | behavior was inappropriate. A public apology may be requested. 83 | 84 | ### 2. Warning 85 | 86 | **Community Impact**: A violation through a single incident or series 87 | of actions. 88 | 89 | **Consequence**: A warning with consequences for continued behavior. No 90 | interaction with the people involved, including unsolicited interaction with 91 | those enforcing the Code of Conduct, for a specified period of time. This 92 | includes avoiding interactions in community spaces as well as external channels 93 | like social media. Violating these terms may lead to a temporary or 94 | permanent ban. 95 | 96 | ### 3. Temporary Ban 97 | 98 | **Community Impact**: A serious violation of community standards, including 99 | sustained inappropriate behavior. 100 | 101 | **Consequence**: A temporary ban from any sort of interaction or public 102 | communication with the community for a specified period of time. No public or 103 | private interaction with the people involved, including unsolicited interaction 104 | with those enforcing the Code of Conduct, is allowed during this period. 105 | Violating these terms may lead to a permanent ban. 106 | 107 | ### 4. Permanent Ban 108 | 109 | **Community Impact**: Demonstrating a pattern of violation of community 110 | standards, including sustained inappropriate behavior, harassment of an 111 | individual, or aggression toward or disparagement of classes of individuals. 112 | 113 | **Consequence**: A permanent ban from any sort of public interaction within 114 | the community. 115 | 116 | ## Attribution 117 | 118 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 119 | version 2.0, available at 120 | [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0]. 121 | 122 | Community Impact Guidelines were inspired by 123 | [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. 124 | 125 | For answers to common questions about this code of conduct, see the FAQ at 126 | [https://www.contributor-covenant.org/faq][FAQ]. Translations are available 127 | at [https://www.contributor-covenant.org/translations][translations]. 128 | 129 | [homepage]: https://www.contributor-covenant.org 130 | [v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html 131 | [Mozilla CoC]: https://github.com/mozilla/diversity 132 | [FAQ]: https://www.contributor-covenant.org/faq 133 | [translations]: https://www.contributor-covenant.org/translations -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional 4 | documentation, we greatly value feedback and contributions from our community. 5 | 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary 7 | information to effectively respond to your bug report or contribution. 8 | 9 | 10 | ## Reporting Bugs/Feature Requests 11 | 12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features. 13 | 14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: 15 | 16 | * A reproducible test case or series of steps 17 | * The version of our code being used 18 | * Any modifications you've made relevant to the bug 19 | * Anything unusual about your environment or deployment 20 | 21 | 22 | ## Contributing via Pull Requests 23 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that: 24 | 25 | 1. You are working against the latest source on the *main* branch. 26 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already. 27 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted. 28 | 29 | To send us a pull request, please: 30 | 31 | 1. Fork the repository. 32 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change. 33 | 3. Ensure local tests pass. 34 | 4. Commit to your fork using clear commit messages. 35 | 5. Send us a pull request, answering any default questions in the pull request interface. 36 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation. 37 | 38 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 39 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/). 40 | 41 | 42 | ## Finding contributions to work on 43 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix). 44 | 45 | 46 | ## Code of Conduct 47 | This project has adopted the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). 48 | 49 | 50 | ## Security issue notifications 51 | If you discover a potential security issue in this project we ask that you notify the owner via email [contact@yoandev.co](mailto:contact@yoandev.co). Please do **not** create a public github issue. 52 | 53 | 54 | ## Licensing 55 | 56 | See the [LICENCE](LICENCE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Yoan Bernabeu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Roadmap Dev Symfony 2 | 3 | Une Roadmap collaborative pour devenir un⸱e dev Symfony ! 4 | 5 | 👀 **La version consultable est disponible à cette adresse : [https://yoanbernabeu.github.io/Roadmap-Dev-Symfony/](https://yoanbernabeu.github.io/Roadmap-Dev-Symfony/)** 6 | 7 | ![Capture d'écran](screenshoot.png) 8 | 9 | *Ce site web est construit avec [Docusaurus 2](https://docusaurus.io/).* 10 | 11 | ## ✍ Comment contribuer au projet ? 12 | 13 | Vous souhaitez contribuer au projet ? **Merci !** 14 | 15 | ### Quoi faire ? 16 | 17 | Il y a pleins de possibilités pour contribuer au projet : 18 | 19 | * Soumettre des issues 20 | * Traiter une issue 21 | * Corriger une faute 22 | * Ajouter un lien vers une ressource 23 | * etc 24 | 25 | *Nous attirons votre attention : **notre roadmap n'a pas vocation à dispenser du contenu** pédagogique (cours, tutos, etc ...), mais seulement à **rediriger vers du contenu déjà existant**. Notre plus-value est de **proposer un chemin d'apprentissage** complet et cohérent.* 26 | 27 | ### Comment faire ? 28 | 29 | Nous vous invitons à prendre connaissance de notre [guide de contribution](CONTRIBUTING.md). 30 | 31 | En synthèse, les étapes pour contribuer : 32 | 33 | * **Forker** le projet 34 | * Réaliser vos ajouts, modifications ou corrections, si possible dans **une et une** seule thématique 35 | * Soumettre vos modifications via une **Pull Request** 36 | 37 | Vos modifications seront **review** par la communauté, et eventuellement intégrées dans la branche **main**. 38 | 39 | Dans un second temps, la branche **main** sera mergée dans la branche **documentation**, ce qui aura pour effet de déclencher la pipeline de déploiement de la version disponible à cette adresse : [https://yoanbernabeu.github.io/Roadmap-Dev-Symfony/](https://yoanbernabeu.github.io/Roadmap-Dev-Symfony/) 40 | 41 | ## 🚴‍♀️ Lancer le projet en local 42 | 43 | ### Prérequis 44 | 45 | Node.js version >= 14 ou supérieure (qui peut être vérifiée en exécutant node -v). 46 | 47 | *Vous pouvez utiliser [nvm](https://github.com/nvm-sh/nvm) pour gérer plusieurs versions de Node sur une seule machine installée* 48 | 49 | ### Installation 50 | 51 | ``` 52 | $ npm install 53 | ``` 54 | 55 | ### Serveur de développement 56 | 57 | ``` 58 | $ npm start 59 | ``` 60 | 61 | ### Builder l'application en local 62 | 63 | ``` 64 | $ npm run build 65 | ``` 66 | 67 | cette commande génère une version statique du site dans un répertoire `build`. -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /blog/2021-11-08-Hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | slug: les-copains-et-copines 3 | title: Hey, les copains et copines 4 | authors: yoandev 5 | tags: [actualité] 6 | --- 7 | 8 | :::info Publié intitialement sur twitter 9 | L'article ci-dessous est à l'origine un fil Twitter. Pour le rendre cohérent, il a été très légèrement modifié. 10 | 11 | Il est consultable en [suivant ce lien](https://twitter.com/yOyO38/status/1457379362555236359). 12 | ::: 13 | 14 | 👉 Hey, les copains et copines dev (Symfony mais pas que) une question pour vous 😉 15 | 16 | Est-ce que cela vous semble une bonne idée de construire (de manière collaborative) une Roadmap pour celles et ceux qui souhaiteraient devenir dev (Symfony) ? 17 | 18 | 💡 **Mon idée** : Construire un minisite avec une roadmap pour devenir dev Symfony. 19 | 20 | Pour chacune des étapes, nous pourrions proposer des ressources (si possible francophone) disponibles sur le web pour que chacun.e puissent se former gratuitement. 21 | 22 | 🔎 **Mon constat** : Les formations disponibles (gratuite ou payante) ne sont pas complète, et surtout font souvent l'impasse sur une formation généraliste sur l'informatique, les réseaux, internet... 23 | 24 | De mon point de vue, avoir des bases, même minimaliste des grands principes de l'informatique, des réseaux et de l'internet permet aux développeurs et développeuses d'être meilleur et de mieux comprendre les tenants et les aboutissants ! 25 | 26 | 🛠 **Comment** ? Afin de rester simple et de permettre un fonctionnement collaboratif, je vais probablement utiliser 27 | [docusaurus](https://docusaurus.io/) sur ce dépôt GitHub. 28 | 29 | Je vais bosser dessus cette semaine, je lancerais l'affaire publiquement probablement samedi prochain 🚀 30 | 31 | 🙏 Vous voulez être de l'aventure ? 32 | Venez dans les [issues du dépot](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/issues), on en discute ❤ -------------------------------------------------------------------------------- /blog/authors.yml: -------------------------------------------------------------------------------- 1 | yoandev: 2 | name: Yoan Bernabeu 3 | title: Mainteneur de la Roadmap Dev Symfony 4 | url: https://github.com/yoanbernabeu 5 | image_url: https://github.com/yoanbernabeu.png -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | Avant d'envisager d'étudier un langage de programmation ou de mettre les doigts dans le code, il nous semble important de prendre le temps d'étudier quelques bases préalables. 8 | 9 | Dans cette section de la roadmap nous vous proposons quelques ressources afin de vous former aux bases de l'informatique, afin d'améliorer ou compléter votre culture générale informatique. 10 | 11 | Promis, cela vous permettra de mieux comprendre certains concepts mis en œuvre plus tard dans votre métier de développeur. 12 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/01-Les-bases-des-reseaux/01-les-bases-du-reseau.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Les bases du réseau 6 | 7 | Que serait notre monde sans les réseaux ? Il serait probablement totalement différent ! 8 | 9 | Aujourd'hui sans les réseaux, rien de ce que l'on connaît actuellement n'existerait. Ce constat s'applique tout particulièrement aux applications Web. 10 | 11 | Le fonctionnement des réseaux est un élément essentiel que tous les développeurs devraient connaitre, notamment les développeurs Backend. 12 | 13 | ## Ressources 14 | 15 | * [Texte - Une brève histoire des réseaux de télécommunications](https://interstices.info/une-breve-histoire-des-reseaux-de-telecommunications/) 16 | 17 | * [Vidéo - L'histoire des systèmes et réseaux de télécommunications](https://youtu.be/LKGkmbz57ds) 18 | 19 | * [Texte - Les 7 couches du modèle OSI](https://www.reseaux-telecoms.net/actualites/lire-les-7-couches-du-modele-osi-28083.html) 20 | 21 | * [Vidéo - Comprendre les couches OSI en 8 minutes !](https://youtu.be/YG57te3jqE8) 22 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/01-Les-bases-des-reseaux/02-tcp-ip.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # TCP/IP 6 | 7 | > TCP/IP fut créé lorsque Bob Kahn, travaillant alors pour la DARPA, dut créer un protocole pour un réseau de commutation de paquets par radio. Bien qu'ayant été un ingénieur majeur de l'ARPANET, qui utilisait alors le protocole NCP, il ne put se résoudre à l'utiliser car celui-ci devait fonctionner avec l'équipement réseau IMP et en plus n'effectuait pas de contrôle des erreurs. Il créa donc avec Vinton Cerf un protocole permettant de relier les réseaux entre eux. 8 | > 9 | >La première publication de TCP/IP remonte à septembre 1973 lors d'une conférence de l'INWG3. 10 | > 11 | > -- [Wikipedia](https://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet) 12 | 13 | ## Ressources 14 | 15 | * [Texte - TCP/IP | Comment Ça Marche](https://www.commentcamarche.net/contents/539-tcp-ip) 16 | 17 | * [Texte - Concevez votre réseau TCP/IP | OpenClassrooms](https://openclassrooms.com/fr/courses/6944606-concevez-votre-reseau-tcp-ip) 18 | 19 | * [Texte - Cours d'introduction à TCP/IP](https://laissus.developpez.com/tutoriels/cours-introduction-tcp-ip/) 20 | 21 | * [Vidéo - Les 4 couches TCP/IP | payants](https://www.elephorm.com/formation/code/webmaster/les-fondamentaux-du-webmaster/les-4-couches-tcpip) 22 | 23 | * [Livre - Apprenez le fonctionnement des réseaux TCP/IP | payants](https://www.elephorm.com/formation/code/webmaster/les-fondamentaux-du-webmaster/les-4-couches-tcpip) 24 | 25 | * [Livre - Apprenez le fonctionnement des réseaux TCP/IP | Openclassrooms](https://openclassrooms.com/fr/courses/857447-apprenez-le-fonctionnement-des-reseaux-tcp-ip) 26 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/01-Les-bases-des-reseaux/03-dhcp-dns.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Les protocole DHCP et DNS 6 | 7 | * DHCP 8 | 9 | > Dynamic Host Configuration Protocol (DHCP, protocole de configuration dynamique des hôtes) est un protocole réseau dont le rôle est d’assurer la configuration automatique des paramètres IP d’une station ou d'une machine, notamment en lui attribuant automatiquement une adresse IP et un masque de sous-réseau. DHCP peut aussi configurer l’adresse de la passerelle par défaut, des serveurs de noms DNS et des serveurs de noms NBNS (connus sous le nom de serveurs WINS sur les réseaux de la société Microsoft). 10 | > 11 | > -- [Wikipedia](https://fr.wikipedia.org/wiki/Dynamic_Host_Configuration_Protocol) 12 | 13 | * DNS 14 | 15 | > Le Domain Name System, généralement abrégé DNS, qu'on peut traduire en « système de noms de domaine », est le service informatique distribué utilisé pour traduire les noms de domaine Internet en adresse IP ou autres enregistrements. En fournissant dès les premières années d'Internet, autour de 1985, un service distribué de résolution de noms, le DNS a été un composant essentiel du développement du réseau. 16 | > 17 | > -- [Wikipedia](https://fr.wikipedia.org/wiki/Domain_Name_System) 18 | 19 | 20 | ## Ressources 21 | 22 | * [Texte - DNS (Système de noms de domaine) - Comment Ça Marche](https://www.commentcamarche.net/contents/518-dns-systeme-de-noms-de-domaine) 23 | 24 | * [Texte - Le service DNS - OpenClassrooms](https://openclassrooms.com/fr/courses/857447-apprenez-le-fonctionnement-des-reseaux-tcp-ip/857163-le-service-dns) 25 | 26 | * [Texte - Le protocole DHCP - Comment Ça Marche](https://www.commentcamarche.net/contents/517-le-protocole-dhcp) 27 | 28 | * [Texte - Le service DHCP - OpenClassrooms](https://openclassrooms.com/fr/courses/857447-apprenez-le-fonctionnement-des-reseaux-tcp-ip/856923-le-service-dhcp) 29 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/01-Les-bases-des-reseaux/04-client-serveur.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Client-Serveur 6 | 7 | > Le protocole ou environnement client–serveur désigne un mode de transaction (souvent à travers un réseau) entre plusieurs programmes ou processus : l'un, qualifié de client, envoie des requêtes ; l'autre, qualifié de serveur, attend les requêtes des clients et y répond. 8 | > 9 | > -- [Wikipedia](https://fr.wikipedia.org/wiki/Client-serveur) 10 | 11 | ## Ressources 12 | 13 | * [Texte - Qu'est-ce que le côté serveur ?](https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps) 14 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/01-Les-bases-des-reseaux/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les bases des réseaux", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/01-histoire-de-l-informatique.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Histoire de l'informatique 6 | 7 | > Celui qui ne sait pas d'où il vient ne peut savoir où il va car il ne sait pas où il est. En ce sens, le passé est la rampe de lancement vers l'avenir. 8 | > 9 | > -- Otto von Bismarck 10 | 11 | ## Ressources 12 | 13 | * [Texte - Petite histoire de l’informatique](https://www.bm-lyon.fr/nos-blogs/fablab/l-idee-du-mois/article/petite-histoire-de-l-informatique) 14 | 15 | * [Vidéo - Une brève histoire de l'informatique, de 1945 à nos jours](https://youtu.be/dcN9QXxmRqk) 16 | 17 | * [Texte - Les femmes et l’informatique : histoire d’une exclusion, enjeux de la réappropriation](https://www.ritimo.org/Les-femmes-et-l-informatique-histoire-d-une-exclusion-enjeux-de-la) 18 | 19 | * [Texte - Des premiers ordinateurs aux machines d'aujourd'hui](https://www.superprof.fr/blog/la-bible-des-informaticiens/) -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/02-bases-d-internet/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | Aujourd'hui, on sort le smartphone de notre poche, on ouvre une application, et on accède à des millions d'informations ! Pourtant, derrière cette action si banale et anodine se cache en réalité une somme de complexité hallucinante si on prend le temps de s'y intéresser ! 8 | 9 | En temps que futur développeur web, comprendre les bases d'internet est plus que jamais un véritable atout ! 10 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/02-bases-d-internet/01-les-reseaux-d-internet.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Les réseaux d'internet 6 | 7 | Internet c'est un réseau, ou plutôt ce sont DES réseaux. 8 | 9 | Prenez le temps de (re)découvrir l'histoire d'internet et de ces réseaux, ceux sont des connaissances fondamentales pour celui ou celle qui veux bosser dans le web ! 10 | 11 | 12 | * [Texte - Au fait, pourquoi le web s’appelle le web ?](https://www.numerama.com/tech/470711-au-fait-pourquoi-le-web-sappelle-le-web.html) 13 | 14 | * [Texte - Internet : comprendre le travail d'un backbone](https://www.reseaux-telecoms.net/actualites/lire-internet-comprendre-le-travail-d-un-backbone-27929.html) 15 | 16 | * [Vidéo- Du télégraphe à Internet : l'incroyable histoire des câbles sous-marins](https://www.youtube.com/watch?v=j07V-P7-MBo) 17 | 18 | * [Vidéo - Internet, histoire d'une révolution](https://www.youtube.com/watch?v=5kXKPCqRbRI) 19 | 20 | * [Texte - Les réseaux de zéro](https://zestedesavoir.com/tutoriels/2789/les-reseaux-de-zero/) 21 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/02-bases-d-internet/02-un-serveur-web.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Un serveur web 6 | 7 | Un serveur est un dispositif informatique qui distribue des services. C'est un ordinateur (oui oui, comme celui que vous avez chez vous !) qui possède une carte réseau et un processeur très puissants. En règle général, son système d'exploitation est très souvent une distribution Linux, comme Debian connu pour sa stabilité, mais il peut aussi être sous Windows ou également tourner sur du matériel Apple et dans ce cas, son système d'exploitation sera OSX Server. 8 | 9 | Il dispose de logiciels comme Apache ou NGINX qui lui permettent de renvoyer une réponse HTTP dans le cas où quelqu'un le consulte depuis son navigateur. Mais il doit être également capable de stocker des données au travers de bases de données. Enfin, si on veut le sécuriser contre les méchants hackeurs, il faudra lui donner une "armure" virtuelle, et là encore certains logiciels existent afin de s'en prémunir. 10 | 11 | Bref, vous l'avez compris. Un serveur est capable de faire beaucoup de choses et c'est un noeud essentiel dans un réseau informatique. C'est lui qui s'occupe de distribuer les services auquels les autres ordinateurs / utilisateurs ont accès. 12 | 13 | * [Texte - Qu'est-ce qu'un serveur web ?](https://developer.mozilla.org/fr/docs/Learn/Common_questions/What_is_a_web_server) -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/02-bases-d-internet/03-les-adresses-ip-publique.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Une adresse IP publique 6 | 7 | Simplement, c'est un identifiant visible par tous. 8 | 9 | ## Ressources 10 | 11 | * [Texte - Qu'est-ce qu'une adresse IP publique ?](https://www.goto.com/fr/resources/glossary/public-ip-address) -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/02-bases-d-internet/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les bases d'Internet", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/02-un-ordinateur.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Un ordinateur ? 6 | 7 | Au cœur de notre utilisation de l'informatique, il trône sur nos bureaux, il est notre outil de travail, l'ordinateur est un élément important de notre quotidien, et encore plus dans notre quotidien de dev ! 8 | 9 | En comprendre, succinctement et en synthèse, le mode de fonctionnement reste des connaissances très utiles 😀 10 | 11 | ## Ressources 12 | 13 | * [Cour en ligne - Montez un PC](https://openclassrooms.com/fr/courses/7210326-montez-un-pc) 14 | 15 | * [Texte - Matériel informatique: les composants de l'ordinateur](https://www.cnetfrance.fr/produits/materiel-informatique-les-composants-de-l-ordinateur-39769700.htm) 16 | 17 | * [Vidéo - COMPRENDRE LES ÉLÉMENTS D'UN PC : PROCESSEUR, CARTE GRAPHIQUE, RAM... 💻](https://youtu.be/s7Dip-1u_gM) 18 | -------------------------------------------------------------------------------- /docs/01-Culture-generale-en-informatique/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Culture générale en Informatiquee", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/01-bases-algorithme/01-variables-operateurs-flux-entree-et-sortie.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Variables, opérateurs et flux d'entrée/sortie 6 | 7 | > En informatique, les variables sont des symboles qui associent un nom (l'identifiant) à une valeur. 8 | 9 | ## Ressources 10 | 11 | * [Texte - Cours pour apprendre les bases de l'algorithmique](https://algo.developpez.com/tutoriels/initiation/#LIII-C) 12 | 13 | * [Vidéo - L'algorithme (1/10): les variables](https://www.youtube.com/watch?v=EPOs1Fln05w) 14 | 15 | * [Vidéo - Algorithmique (3/14)- les opérateurs](https://www.youtube.com/watch?v=ae-2hgbiY6s) 16 | 17 | * [Texte - Flux d'entrée/sortie](http://www.lephpfacile.com/manuel-php/features.commandline.io-streams.php) 18 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/01-bases-algorithme/02-logique-booleenne-et-structures-conditionnelles.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Logique booléenne et structures conditionnelles 6 | 7 | > Ce qui rend la logique possible, c'est l'existence en nos esprits de notions générales, notre faculté de concevoir une classe et de 8 | désigner les individus qui en sont membres par un même nom. La théorie de la logique est ainsi intimement liée à celle du langage. 9 | Une entreprise qui réussirait à exprimer des propositions logiques par des symboles, dont les lois de combinaison seraient fondées sur les lois des opérations mentales qu'elles représentent, serait, du même coup, un pas vers un langage philosophique. 10 | > 11 | > -- George Boole 12 | 13 | ## Ressources 14 | 15 | * [Vidéo - George Boole, génie des maths](https://www.youtube.com/watch?v=68RG57jOF0c) 16 | 17 | * [Vidéo - L'algorithmique (3/10): Les test](https://www.youtube.com/watch?v=M91qKvGIb1g&t=2s) 18 | 19 | * [Vidéo - L'algèbre de Boole - SI - 1ère - Les Bons Profs](https://www.youtube.com/watch?v=C5z_EWnMjOI) 20 | 21 | * [Texte - Les structures Conditionnelles](https://www.technologuepro.com/informatique/chap3_algorithme.htm) 22 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/01-bases-algorithme/03-les-boucles.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Les boucles 6 | 7 | > Les premiers 90% du code prennent les premiers 90% du temps de développement. Les 10% restants prennent les autres 90% du temps de développement. 8 | > 9 | > -- Tom Cargill 10 | 11 | ## Ressources 12 | 13 | * [Texte - Les boucles](http://cours.pise.info/algo/boucles.htm) 14 | 15 | * [Texte - Le calcul itératif](http://www.jybaudot.fr/Programmation/boucles.html) 16 | 17 | * [Vidéo - L'algorithmie (4/10) Les boucles](https://www.youtube.com/watch?v=aYXj0qpUL-Y) 18 | 19 | * [Vidéo - La boucle POUR](https://www.youtube.com/watch?v=K27WNwYbCP8) 20 | 21 | * [Vidéo - La boucle TANT QUE](https://www.youtube.com/watch?v=6fvBZCu3GkU) 22 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/01-bases-algorithme/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les bases de l'algorithme", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/02-les-grands-principes-de-developpement/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | A écrire 8 | 9 | (Les design pattern, SOLID, DRY etc ...) -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/02-les-grands-principes-de-developpement/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les grands principes du Developpement", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/03-bases-api/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | ## Qu'est-ce qu'une API ? 8 | 9 | > En informatique, une interface de programmation d’applications ou interface de programmation applicative (souvent désignée par le terme API pour Application Programming Interface) est un ensemble normalisé de classes, de méthodes, de fonctions et de constantes qui sert de façade par laquelle un logiciel offre des services à d'autres logiciels. 10 | > 11 | > -- [wikipedia](https://fr.wikipedia.org/wiki/Interface_de_programmation_d%27applications) -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/03-bases-api/01-api-rest.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Les APIs REST 6 | 7 | Une API REST (également appelée API RESTful) est une interface de programmation d'application (API ou API web) qui **respecte** les contraintes du style d'architecture REST et permet d'interagir avec les services web RESTful. 8 | 9 | L'architecture REST a été créée par l'informaticien Roy Fielding. 10 | 11 | ## Ressources 12 | * [Cours en ligne - Débutez avec les API REST](https://openclassrooms.com/fr/courses/6031886-debutez-avec-les-api-rest) 13 | * [Cours en ligne - Adoptez les API REST pour vos projets web](https://openclassrooms.com/fr/courses/6573181-adoptez-les-api-rest-pour-vos-projets-web) -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/03-bases-api/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les bases des APIs", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /docs/02-Connaissances-de-base/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Connaissances de base", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/03-html-et-css/01-html.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # HTML HyperText Markup Language 6 | 7 | >Le HTML créé en 1993, est le langage de balisage conçu pour représenter les pages web. Ce langage permet d'écrire de l'hypertexte, de structurer sémentiquement la page web, mettre en forme le contenu de la page, de créer des formulaires de saisie, d'inclure des ressources multimédias (images, vidéos, programmes informatiques) et de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l'accessibilité du web (WAI).Le HTML est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). 8 | 9 | ## Ressources 10 | 11 | * [Texte - HTML (HyperText Markup Language)- MDN Web Docs](https://developer.mozilla.org/fr/docs/Web/HTML) 12 | 13 | * [Texte - HTML Tutorial- W3School](https://www.w3schools.com/html/default.asp) 14 | 15 | * [Formation - Apprendre l'HTML- Grafikart](https://grafikart.fr/formations/html) 16 | 17 | * [Formation - Apprenez à créer votre site web avec HTML5 et CSS3- OpenClassRooms](https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3) 18 | -------------------------------------------------------------------------------- /docs/03-html-et-css/02-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Feuilles de style en cascade 6 | 7 | >Les Cascading Style Sheets (CSS) forment un langage informatique qui décrit la présentation des documents HTML et XML. Introduit au milieu des années 1990, le CSS devient couramment utilisé dans la conception de sites web. 8 | 9 | ## Ressources 10 | 11 | * [Texte - CSS Tutorial](https://www.w3schools.com/css/default.asp) 12 | 13 | * [Texte - CSS : Feuilles de style en cascade](https://developer.mozilla.org/fr/docs/Web/CSS) 14 | 15 | * [Formation - Apprenez à créer votre site web avec HTML5 et CSS3](https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3) 16 | 17 | * [Formation - Découverte du CSS](https://grafikart.fr/formations/css) -------------------------------------------------------------------------------- /docs/03-html-et-css/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "HTML/CSS", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /docs/04-php/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | a compléter 7 | 8 | Élément d'histoire 9 | ------------------- 10 | 11 | * PHP/FI: créé en 1995 par Rasmus Lerdorf. Bibliothèque de scripts fonctionnant sous PERL (Personal 12 | Home Page Tools / Forms Interpreter) puis implémentation en C 13 | * 1997 : plusieurs milliers d’utilisateurs 14 | * PHP 3.0 : refonte de PHP/FI 2.0 par Andi Gutsman et Zeef Suraski (juin 1998: PHP Hypertext 15 | Preprocessor)‏ 16 | * PHP 4.0 : nouveau moteur PHP (mai 2000)‏ 17 | * 2003 : PHP 5.0, avec un nouveau moteur 18 | * 2005 : PHP 5.1, Arriver du PDO. 19 | * 2009 : PHP 5.2, Correction de bug. 20 | * 2009 : PHP 5.3, Les espaces de noms, Phar. 21 | * 2012 : Sortie de Composer. 22 | * 2012 : PHP 5.4, Les traits, [] en plus de Array(), Serveur Web intégré. 23 | * 2013 : PHP 5.5, Finnaly, les générateurs. 24 | * 2014 : PHP 5.6, Fonctions à nombre d'arguments variable. 25 | * 2015 : PHP 7, Spaceships <=> , Return Type Declarations & Scalar Type Hints ... 26 | * 2016 : PHP 7.1, Support des types nullable, return type Void... 27 | * 2017 : PHP 7.2, SimpleXml , object (mot réservé), Mcrypt supprimé 28 | * 2018 : PHP 7.3, is_countable(),array_key_first() et array_key_last() 29 | * 2019 : PHP 7.4, Spread Operator dans l’expression d’un array,short closures... 30 | * 2020 : PHP 8.0, Arguments nommés, Promotion de propriétés de constructeur, match ... 31 | * 2021 : PHP 8.1 pas encore de release 32 | 33 | PHP est un langage assez jeune. 34 | 35 | **PHP/FI a été créé en 1995 par Rasmus Lerdordf:** à l’origine il s’agissait d’une bibliothèque 36 | fonctionnant sous PERL que Rasmus avait développé pour son propre site web personnel (il voulait 37 | savoir qui venait consulter son CV). PHP/FI signifiait Personal Home Page Tools / Forms Interpreter. 38 | Petit à petit, la bibliothèque PERL s’est muée en une implémentation directe en C, afin d’augmenter 39 | les performances et les possibilités. 40 | 41 | En 1997, il y avait des milliers d’utilisateurs de PHP. PHP/FI 2.0 vit le jour en novembre 1997. 42 | Andi Gutsman et Zeef Suraski, fondateurs de Zend, procédèrent à une refonte complète de PHP/FI 2.0: 43 | le but était de pouvoir écrire des applications d’e-commerce plus importantes. Ils élaborèrent ainsi 44 | PHP 3.0, que Rasmus rejoignit. La principale fonction de PHP 3.0 était justement la possibilité 45 | d’être étendu par… de nouvelles fonctions: n’importe quel développeur pouvait créer ses propres 46 | modules, les ajouter à PHP grâce à une API modulaire et les partager avec l’ensemble de la 47 | communauté. PHP devint alors : **PHP Hypertext Preprocessor.** 48 | La version 4.0 de PHP apparut en mai 2000. Andi et Zeev ont ici de nouveau totalement réécrit le 49 | moteur de PHP, afin d’améliorer… ses performances. Depuis 2003, PHP en est à sa version 5.0. PHP 5 a 50 | l’ambition d’être plus professionnel et plus simple. La programmation objet a fait ainsi son 51 | apparition, grâce à un « nouveau moteur » PHP (Zend engine 2). Depuis PHP 7, la sortie d'une 52 | release est régulière, chaque année sort une nouvelle version. 53 | 54 | 55 | Principe de base. 56 | ----------------- 57 | 58 | * A l’origine, un langage de script pour serveurs web 59 | * À l’origine, PHP était un langage de script conçu spécifiquement pour agir sur les serveurs 60 | web: il s’agit d’ajouter quelques lignes de PHP à une page HTML pour la rendre « dynamique », 61 | c’est-à-dire que c’est le web serveur qui vient écrire du code HMTL dans la page. 62 | * Actuellement: PHP 8.0 (16 novembre 2021). 63 | * Mais PHP a beaucoup évolué jusqu’à la version 5, qui est très complète, et qui ont fait de PHP 64 | une vraie plateforme de développement professionnelle. 65 | * Licence opensource, avec communauté dynamique 66 | * PHP fonctionne en licence opensource: sa rediffusion, son utilisation et sa modification sont 67 | libres et gratuites. Le site officiel est http://www.php.net, la communauté des développeurs 68 | PHP est très dynamique: l’annonce d’une faille de sécurité implique généralement un correctif 69 | dans la journée. 70 | * Langage interprété: langage intermédiaire (bytecode) créé à chaque exécution 71 | * PHP est un langage interprété: les scripts sont convertis en langage intermédiaire (bytecode) 72 | avant d’être exécuté. Mais ce code intermédiaire est recréé à chaque exécution et ne peut pas 73 | être diffusé. Il n’y a donc pas de « compilation ». 74 | * Langage facile ? (Plus vraiment correcte). 75 | * **PHP** est un langage qui s’apprend **rapidement**. Cependant, **la maîtrise plus complète du 76 | langage est difficile.** 77 | 78 | L’utilisation de PHP 79 | ******************** 80 | 81 | * Couplée à un web serveur 82 | * Ligne de commande 83 | * Application graphique (à vérifier) 84 | 85 | Architecture 86 | ************** 87 | 88 | * Souvent LAMP : Linux, Apache, MySQL, PHP 89 | * Mais n’importe quel OS (Win, Unix/Linux…)‏ 90 | * D’autres web serveur (Nginx,IIS…)‏ 91 | * D’autres bases de données (SQLite, PostgreSQL, Oracle, SqlSrv)‏ 92 | 93 | L’utilisation principale du langage PHP reste le traitement et la création de pages web au sein d’un 94 | serveur web. PHP apparaît alors comme une série de « scripts ». Il est cependant possible d’utiliser 95 | PHP en dehors de tout serveur web : 96 | On peut utiliser PHP en ligne de commande. Il faut faire appel à l’exécutable PHP. On peut utiliser 97 | PHP comme une application graphique. II faut utiliser l’extension qui permet de produire une 98 | application graphique traditionnelle, et on obtient ainsi une application « standalone ». Cette 99 | extension est « GTK ». 100 | 101 | L’architecture « LAMP » est emblématique du monde opensource et est souvent citée. PHP ne s’y réduit 102 | pas, cependant. LAMP est utilisé pour : « Linux », « Apache », « MySQL », « PHP ». En effet, PHP 103 | fonctionne sur de nombreux OS : il fonctionne sur sous Windows (toutes versions supérieures à Win95) 104 | , sous Unix (Solaris), sous Linux, sous MacOS X, OpenBSD, FreeBSD… PHP peut être utilisé avec 105 | Apache, mais il peut également être utilisé avec d’autres serveurs web (IIS, par exemple). Quant aux 106 | bases de données, PHP 5 contient des connexions natives vers la plupart des bases de données (par 107 | exemple, Microsoft SQL server, Oracle, PostgreSQL, MySQL, Sybase, SQLite, FilePro, Informix, 108 | Interbase, mSQL, dBase, Empress…) PHP 5 propose même une base de données intégrée: SQLite. Depuis 109 | PHP 5.1, l’extension PDO (PHP Data Object) permet même d’avoir une abstraction vis-à-vis des bases 110 | données: pour gérer une nouvelle base de données, il suffit d’écrire le bon connecteur; les données 111 | sont ensuite transmises à la « couche » PDO. 112 | 113 | Quelques liens : 114 | **************** 115 | 116 | **Site Officiel de PHP** 117 | http://php.net 118 | 119 | **Communauté francophone PHP :** 120 | 121 | * http://developpez.com 122 | * http://afup.org 123 | * http://phpfrance.com 124 | * http://fr.php.net 125 | 126 | -------------------------------------------------------------------------------- /docs/04-php/01-Installation.md: -------------------------------------------------------------------------------- 1 | Installation PHP 2 | ================ 3 | 4 | 5 | Choix de plateforme : 6 | -------------------- 7 | 8 | * Prendre la configuration « classique »: PHP en mode client serveur, associé à un serveur web 9 | * Choisir un web serveur: **Apache**, Nginx, IIS.... 10 | * Choisir une plateforme système : Windows, Linux, OSX 11 | 12 | Installation de PHP 13 | ------------------- 14 | 15 | Deux manières d’installer PHP client-serveur orienté « web » : 16 | 17 | * Utiliser une plateforme « pré-installée », comme : 18 | - WAMP http://www.wampserver.com/ 19 | - XAMPP http://www.apachefriends.org/fr/xampp.html 20 | - Laragon http://www.laragon.org/ (le plus complet; Git, Terminal, MySQL, PHP, Apache, 21 | PhpMyAdmin, composer ...) 22 | - Mamp https://www.mamp.info/en/downloads/ (OsX) 23 | 24 | Cela représente à chaque fois un environement complet (serveur Web, PHP, Base de données) 25 | 26 | * Installer les composants « manuellement », comme : 27 | - PHP 28 | - Apache 29 | - MySQL 30 | - PhpMyAdmin 31 | - Composer 32 | - Git 33 | - Terminal 34 | - ... 35 | 36 | Installation manuelle de PHP pour Windows 37 | ------------------------------ 38 | 39 | * Télécharger la dernière version sur http://www.php.net 40 | * PHP8.0 est disponible en fichier ZIP 41 | * Décompressez-le (souvent c:\php\)‏ 42 | * Rendez le fichier de configuration (php.ini) « accessible » (PATH)‏ 43 | * Rendez le fichier php.exe « accessible » via les variables d'environements. 44 | 45 | .. image:: images/download.png 46 | 47 | **Test d’une installation PHP** 48 | Ecrire un mini script et le sauver (phpinfo.php) 49 | 50 | .. code-block:: php 51 | 52 | 55 | 56 | ‏ 57 | 58 | Installation Debian/Ubuntu/Mint... 59 | ---------------------------------- 60 | 61 | Pour avoir les dernières versions de **PHP** , voir le projet [deb.sury.org](https://deb.sury.org/) 62 | 63 | Pour **Debian** 64 | 65 | Ajouter les dépôts **Debian** de **deb.sury.org** 66 | 67 | .. code-block:: bash 68 | 69 | curl -s https://packages.sury.org/php/README.txt -o install_php.sh 70 | sh install_php.sh 71 | 72 | A cette [endroit](https://packages.sury.org/php/pool/main/p/) on peut avoir toutes les versions de **PHP** disponibles. 73 | 74 | Pour **Ubuntu/Mint** 75 | 76 | Ajouter les dépôts **PPA** de **deb.sury.org** 77 | 78 | .. code-block:: bash 79 | 80 | sudo add-apt-repository ppa:ondrej/php 81 | sudo apt update 82 | 83 | .. code-block:: bash 84 | 85 | sudo apt-get install php8.0 86 | 87 | Installation Fedora/Viperr 88 | --------------------------- 89 | Après avoir installé les dépôt de rémi 90 | 91 | .. code-block:: bash 92 | 93 | sudo dnf install php8.0 94 | 95 | Installation Red-Hat/CentOs/Scientific Linux 96 | --------------------------------------------- 97 | Après avoir installé les dépôt de rémi 98 | 99 | .. code-block:: bash 100 | 101 | sudo yum install php8.0 102 | 103 | Installation OSX 104 | --------------------------------------------- 105 | PHP est natif sur OSX. 106 | 107 | 108 | Environnement de développement 109 | ------------------------------- 110 | 111 | PHP offre un environnement de développement très facile à mettre en place grâce à la commande : 112 | 113 | .. code-block:: bash 114 | 115 | php -S localhost:8080 116 | 117 | Environnement de production 118 | --------------------------- 119 | Toutes les installations décrite ci-dessus sont suffisantes pour une installation de PHP. Mais 120 | celle-ci est limitée par les capacités de votre système. 121 | 122 | Pour être au plus proche des environements de production, il est recommandé d'utiliser des outils comme : 123 | 124 | * Docker (Voire chapitre sur Docker). 125 | * Vagrant (Voir chapitre sur Vagrant). 126 | 127 | -------------------------------------------------------------------------------- /docs/04-php/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Découvrir PHP", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /docs/04-php/xx-langage-php.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # le langage php 6 | 7 | * [Vidéo - Le monde des conteneurs d'injection de dépendances - Lior CHAMLA](https://www.youtube.com/watch?v=W6y9mXDgTiE) 8 | 9 | A écrire 10 | -------------------------------------------------------------------------------- /docs/05-bases-de-symfony/01-paradigme-mvc.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Le paradigme MVC 6 | 7 | Le paradigme MVC est un design pattern bien connu dans les applications Web. Le ```M``` signifie le modèle, le ```V``` la vue et le ```C``` le contrôleur C'est un modèle de conception qui a pour but de mieux organiser le code de l'application en le séparant en 3 couches abstraites distinctes. 8 | 9 | Imaginez que vous souhaitiez réaliser une page qui affiche une liste de produits venant d'une base de donnée. Vous pourriez techniquement tout faire dans un seul et unique fichier PHP. Mais ce code va être difficile à maintenir et à debugger. 10 | 11 | On préférera le découper en petits morceaux qui auront chacun leur responsabilité. En suivant un modèle MVC, on aura alors par exemple 3 fichiers disctincts. 12 | 13 | * le premier traitera la partie modèle, c'est à dire le code qui va intéragir avec les données, dans notre cas le code qui va se connecter à la base de données et récupérer les produits. 14 | 15 | * un second fichier traitera la vue, c'est à dire le côté visuel. On utilisera par exemple un language de templating pour pouvoir écrire dans notre code HTML une boucle qui itèrerait sur chaque produit pour les afficher dans des petites cartes. 16 | 17 | * le troisième fichier s'occupera de la couche contrôleur, c'est à dire le code qui ferait le lien entre les deux autres couches. Lorsque le routeur va intercepter une requète, il va la diriger vers un contrôleur associé. C'est ce contrôleur qui fera appel au modèle pour récupérer les produits et qui utilisera un moteur de template qui prendra en entrée la vue et les données qu'on a récupérées depuis le modèle pour fabriquer la page de sortie, à savoir notre liste de produits. 18 | 19 | Dans notre exemple, nous avons trois fichiers, mais il faut imaginer ces couches comme abstraites. Ainsi, dans Symfony, plusieurs types de fichiers entrent dans la couche ```modèle``` (entitées, repository et manager), on peut faire rentrer le routeur dans la couche ```contrôleur``` et le JavaScript que vous ajouterez pour dynamiser la page rentrera dans la couche ```Vue```. 20 | 21 | ## Ressources 22 | 23 | * [Texte - Structurer votre code avec le pattern MVC](https://apprendre-la-programmation.net/structurer-code-pattern-mvc/) 24 | 25 | * [Texte - PHP Orienté Objet - Le MVC Épisode 1](https://nouvelle-techno.fr/articles/live-coding-php-oriente-objet-le-mvc) 26 | 27 | * [Texte - PHP Orienté Objet - Le MVC Épisode 2](https://nouvelle-techno.fr/articles/live-coding-php-oriente-objet-le-mvc-episode-2) 28 | 29 | * [Vidéo - L'architecture MVC](https://www.youtube.com/watch?v=6v8LGDQL9Vs) 30 | 31 | * [Vidéo - Créer un MVC](https://www.youtube.com/watch?v=a3NZtp3FJEE) -------------------------------------------------------------------------------- /docs/05-bases-de-symfony/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les bases de Symfony", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /docs/06-symfony/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | Symfony est un projet initié par Fabien Potencier en 2005. Il compte aujourd'hui plus de 3000 contributeurs. Souvent présenté comme un framework PHP, c'est en fait un ensemble de composants indépendants, qui, associés les uns aux autres, permet de construire un framework. 8 | 9 | En effet, chaque composant peut être utilisé indépendamment dans n'importe quel projet PHP. Ainsi, quand on installe Symfony, on peut installer une version minimale du projet, avec juste les composants de base, puis installer des composants supplémentaires au fur et à mesure que le projet grandit. On peut aussi installer une version ```Webapp``` qui intègre les principaux composants nécessaires à une application web. 10 | 11 | En 2022, Symfony est en version 6 et fonctionne avec PHP 8. Une version majeure est publiée tous les deux ans. La retrocompatibilité est un des objectif de la communauté. 12 | 13 | Avec Laravel, Symfony fait partie des deux framework PHP les plus utilisés dans le monde. Symfony est particulièrement apprécié en France et de nombreuses entreprises l'utilisent. 14 | 15 | La documentation est très complète et particulièrement bien faite. Chaque notion clef est abordée sous la forme d'un petit tutoriel, avec à la fin des liens vers des notions plus complexes. 16 | 17 | Symfony s'intègre avec les technologies de votre choix : vous pouvez travailler avec n'importe quelle base de données ou n'importe quel framework frontend. Vous pouvez écrire des tests unitaires, faire de la contenairisation, déployer le projet facilement, etc. 18 | 19 | Il existe un grand nombre de ressources sur Internet, dont beaucoup en français, notamment des tutoriels vidéos expliquant les notions de bases comme les plus avancées. 20 | 21 | -------------------------------------------------------------------------------- /docs/06-symfony/01-installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Installation 6 | 7 | Pour pouvoir installer Symfony, il vous faut au minimum deux choses : ```PHP``` et ```Composer```. Composer va servir à installer Symfony et à gérer les dépendances. Pour vérifier que vous êtes prêt à installer Symfony, tapez les deux commandes suivantes : 8 | 9 | ``` 10 | php -v 11 | ``` 12 | Cette commmande vous donne la version de PHP. Pour installer la dernière version de Symfony, vous devez avoir au minimum la version 8.0 de PHP. 13 | 14 | ``` 15 | php -V 16 | ``` 17 | Cette commmande vous donne la version de Composer. 18 | 19 | Si les deux commandes fonctionnent sans message d'erreur, vous êtes prêt à installer Symfony. 20 | 21 | Bien qu'il soit possible d'installer Symfony directement avec Composer, il est recommandé d'utiliser ```Symnfony CLI```. Cet exécutable va permettre d'installer Symfony, mais également d'utiliser un serveur interne pour le développement, installer un certificat auto-signé pour gérer le HTTPS, utiliser plus facilement les commandes Symfony, etc. 22 | 23 | Pour le télécharger, rendez-vous [ici](https://symfony.com/download). Une fois que l'outil est installé, vérifiez que la commande suivante fonctionne. 24 | 25 | ``` 26 | symfony -v 27 | ``` 28 | 29 | Vous pouvez maintenant installer un projet Symfony en tapant la commande suivante : 30 | 31 | ``` 32 | symfony new nom_du_projet 33 | ``` 34 | 35 | Cette commande installera un projet Symfony avec juste le minimum requis. Si vous souhaitez installer un projet de type application Web, avec les principaux composants disponibles, tapez la commande suivante : 36 | 37 | ``` 38 | symfony new --webapp nom_du_projet 39 | ``` -------------------------------------------------------------------------------- /docs/06-symfony/02-routage.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Le routage 6 | 7 | Dans une application Symfony, et plus généralement dans une application Web, l'utilisateur va taper une adresse dans son navigateur ou cliquer sur un lien qui pointe vers cette adresse. Le routage consiste à orienter l'utilisateur vers la page demandée, un peu comme une gare de triage. On expliquera par exemple que si l'utilisateur tape ```/resources/A``` ou clique sur un lien qui pointe vers cette adresse, on doit lui renvoyer la ressource A. Les routes sont les différentes adresses de votre application. 8 | 9 | Dans Symfony, il y a deux manières de définir les routes de l'application. On peut passer par un fichier qui liste les différentes routes et leur associe une méthode d'un contrôleur qui va se charger de fournir la ressource correspondante. Mais généralement, on utilisera ce qu'on appelle des annotations ou des attributs PHP8. Ce sont des sortes de commentaires qu'on écrit au dessus d'une méthode dans un contrôleur. 10 | 11 | Exemple : 12 | 13 | ``` 14 | class HomeController extends AbstractController 15 | { 16 | #[Route('/home', name: 'home')] 17 | public function index(): Response 18 | { 19 | return $this->render('home/index.html.twig'); 20 | } 21 | 22 | } 23 | ``` 24 | 25 | Ici, on explique que lorsqu'on sera à l'adresse ```/home```, il faudra appeler la méthode ```index``` dans le contrôleur ```HomeController```. Dans cette exemple, cette méthode renverra une page HTML, écrite en Twig, définie dans un fichier ```index.html.twig``` et disponible dans le dossier ```/templates/home```. 26 | 27 | On peut aussi passer par un fichier qui liste toutes les routes de l'application. En reprenant le même exemple, il faudra éditer le fichier ```routes.yaml``` disponible dans le dossier ```config```. 28 | 29 | ``` 30 | home 31 | path : /home 32 | controller : App\Controller\HomeController::index 33 | ``` 34 | 35 | ## Ressources 36 | 37 | * [Apprendre à gérer les routes avec Symfony](https://grafikart.fr/tutoriels/routing-1065#autoplay) 38 | -------------------------------------------------------------------------------- /docs/06-symfony/03-controleurs.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Les contrôleurs 6 | 7 | Dans une application Symfony, et plus généralement dans une application qui suit le modèle MVC, les contrôlleurs (C) sont des bouts de code (généralement des classes) qui sont chargés de faire le lien entre le modèle (M) et la vue (V). Ce sont des méthodes de ces classes qui sont appelées par le routeur lorsqu'une requête arrive. 8 | 9 | Prenons un exemple : 10 | 11 | ``` 12 | use App\Repository\PostRepository; 13 | use Symfony\Component\HttpFoundation\Response; 14 | use Symfony\Component\Routing\Annotation\Route; 15 | use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; 16 | 17 | class BlogController extends AbstractController 18 | { 19 | #[Route('/blog/', name: 'blog_index')] 20 | public function index(PostRepository $repo): Response 21 | { 22 | $posts = $repo->findAll(); 23 | return $this->render('blog/index.html.twig', [ 24 | 'posts' => $posts 25 | ]); 26 | } 27 | } 28 | ``` 29 | 30 | Dans le code ci-dessus, on définit une classe ```BlogController```. Elle peut hériter du ```AbstractController``` si on veut qu'elle puisse renvoyer une vue (ce qui est le cas ici). A l'intérieur, nous définissons une méthode ```index```, qui sera chargée de renvoyer la liste des articles d'un blog. Ici, elle est reliée à une route nommée ```blog_index``` qui répond à l'adresse ```/blog```. 31 | 32 | Dans les paramètres de cette methode, nous pouvons nous faire liver des services. Ici, nous injectons le service ```PostRepository```. Attention, cette injection en paramètre d'un méthode ne fonctione que dans les méthodes des contrôleurs. 33 | 34 | Dans cette méthode, nous faisons appel à la méthode ```findAll()``` du service ```BlogRepository```, qui va nous renvoyer l'ensemble des articles, et nous l'assignons à une variable ```$posts``` 35 | 36 | Puis nous retournons une vue située dans ```templates/blog/index.html.twig``` à laquelle nous passons cette variable, dans un tableau associatif en second paramètre de la méthode ```render``` disponible sur la classe. 37 | 38 | ## Ressources 39 | 40 | * [Apprendre à créer des contrôleurs avec Symfony par Grafikart](https://grafikart.fr/tutoriels/routing-1065#autoplay) 41 | 42 | * [Apprendre à créer des contrôleurs avec Symfony par Nouvelle-Techno.fr](https://www.youtube.com/watch?v=X_mNHTGJb5M&ab_channel=NouvelleTechno) 43 | 44 | -------------------------------------------------------------------------------- /docs/06-symfony/04-twig.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Twig 6 | 7 | Twig est un langage qui va nous permettre de générer des pages HTML **dynamiques**. Il s'appuie sur le language HTML classique mais rajoute une syntaxe supplémentaire. Cette syntaxe est simple et ne gènera pas un intégrateur qui ne connait pas le Twig. 8 | 9 | Prenons un exemple : 10 | 11 | Dans un contrôleur, on demande à Symfony de générer une page HTML en lui passant le chemin vers un template Twig et éventuellement des données à lui passer en second paramètre. 12 | 13 | ``` 14 | #[Route('/hello', name: 'presentation')] 15 | public function presentation(): Response 16 | { 17 | return $this->render('presentation/index.html.twig', [ 18 | 'firstname' => 'John', 19 | 'age' => 34, 20 | 'hobbies' => ['HTML', 'CSS', 'PHP'] 21 | ]); 22 | } 23 | ``` 24 | 25 | Ici, le contrôleur fait appel à la méthode ```render```, en lui passant en premier paramètre le chemin du fichier Twig ```index.html.twig``` (ici dans le répertoire ```templates/presentation```). 26 | 27 | On lui passe en second paramètre les données qu'on va utiliser dans le template sous la forme d'un tableau associatif. 28 | 29 | Le fichier ```index.html.twig``` va alors ressembler à ceci : 30 | 31 | ``` 32 |

Votre prénon est {{ firstname }}

33 | 34 | {% if age >= 18 %} 35 |

Vous êtes majeur

36 | {% else %} 37 |

Vous êtes mineur

38 | {% endif %} 39 | 40 | Vos hobby sont : 41 | 42 | 47 | ``` 48 | 49 | Ici, on utilise la variable ```firstname``` qu'on a passée au template avec la syntaxe des doubles accolades. 50 | 51 | On utilise ensuite une commande Twig pour gérer une condition et afficher un texte différent selon la valeur de la variable ```age```. 52 | 53 | Enfin, on utlise une commande Twig pour gérer les boucles. Ici, on boucle sur chaque élément présent dans le tableau qu'on a passé à Twig via la variable ```hobbies```, et on affiche chaque élément dans une liste. 54 | 55 | ## Ressources 56 | 57 | * [Apprendre à gérer Twig avec Symfony par Grafikart](https://grafikart.fr/tutoriels/routing-1065#autoplay) 58 | 59 | * [Apprendre à gérer Twig avec Symfony par Nouvelle-Techno.fr](https://www.youtube.com/watch?v=OG-ALaraXoo&list=PLBq3aRiVuwyzI0MT4LhvwqkVenz5pF_DM&index=8&ab_channel=NouvelleTechno) -------------------------------------------------------------------------------- /docs/06-symfony/05-modeles.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Les modèles 6 | 7 | Les modèles sont une façon de représenter les données avec lesquelles ont va travailler. Elle viennent la plupart du temps d'une base de données. Avec Symfony, on appelle ça des **entités**. Une entité représente une table de la base de données. On y définit des propriétés qui représentent les champs de la table. 8 | 9 | Chaque propriété définit un type de donnée et éventuellement sa longueur. On peut aussi spécifier des règles de validation. 10 | 11 | On dispose également de deux autres classes pour travailler avec notre entité. Un **repository**, qui est une classe qui va nous servir à récupérer des données et un **Entity manager** qui va nous servir à les enregistrer, les mettre à jour ou les supprimer. 12 | 13 | Prenons un exemple : 14 | 15 | ``` 16 | namespace App\Entity; 17 | use App\Repository\PostRepository; 18 | use Doctrine\ORM\Mapping as ORM; 19 | use Doctrine\DBAL\Types\Types; 20 | use Symfony\Component\Validator\Constraints as Assert; 21 | use Symfony\Bridge\Doctrine\Validator\Constraints\UniqueEntity; 22 | 23 | #[ORM\Entity(repositoryClass: PostRepository::class)] 24 | #[UniqueEntity("title")] 25 | class Post 26 | { 27 | #[ORM\Id, ORM\GeneratedValue(strategy: 'AUTO')] 28 | #[ORM\Column(type: Types::INTEGER)] 29 | private ?int $id = null; 30 | 31 | #[ORM\Column(type: Types::STRING, length: 255)] 32 | #[Assert\NotBlank] 33 | private string $title; 34 | 35 | #[ORM\Column(type: Types::TEXT)] 36 | #[Assert\NotBlank] 37 | private string $content; 38 | } 39 | ``` 40 | 41 | Ici, on définit une entité ```Post```. Elle contient trois proprités qui sont autant de champs dans la table. 42 | 43 | La propriété ```$id``` définit un entier pour stocker l'identifiant de l'article, avec une stratégie d'auto-incrémentation. 44 | 45 | La proprité ```$title``` définit une chaîne de caractère, de longueur maximale 255 pour stocker le titre de l'article. On spécifie également qu'elle ne peut pas être vide. 46 | 47 | De même avec la propriété ```$content``` qui a un type texte long. 48 | 49 | Lorsqu'on voudra récupérer des données, on fera appel au ```PostRepository``` en utilisant des méthodes comme ```findAll()``` ou ```findBy()``` 50 | 51 | 52 | ``` 53 | public function index(PostRepository $repo): Response 54 | { 55 | $posts = $repo->findAll(); 56 | } 57 | ``` 58 | 59 | Lorsque nous voudrons enregistrer, mettre à jour ou supprimer des données, on fera appel au ```EntityManager```, avec des méthodes comme ```persist()``` ou ```remove()```. 60 | 61 | ``` 62 | public function deletePost(Post $post = null, EntityManagerInterface $entityManager): Response 63 | { 64 | $entityManager->remove($post); 65 | $entityManager->flush(); 66 | } 67 | ``` 68 | 69 | ## Ressources 70 | 71 | * [Apprendre à gérer les entités avec Symfony par Grafikart](https://grafikart.fr/tutoriels/doctrine-decouverte-1066#autoplay) 72 | 73 | * [Apprendre à gérer les entités avec Symfony par Nouvelle-Techno.fr](https://www.youtube.com/watch?v=MhVAwrujifQ&list=PLBq3aRiVuwyzI0MT4LhvwqkVenz5pF_DM&index=3&ab_channel=NouvelleTechno) -------------------------------------------------------------------------------- /docs/06-symfony/06-formulaires.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # Les formulaires 6 | 7 | Bien qu'il soit tout à fait possible de gérer les formulaires comme on le fait d'habitude en PHP (en analysant la requête), Symfony propose une autre solution, plus puissante. 8 | 9 | Elle consiste en l'introduction d'un objet ```Form```, sur lequel on a des méthodes pour ajouter des champs, relier le formulaire a une entité, gérer les erreurs de validation, vérifier qu'un formulaire a été soumis et qu'il est valide, etc. Côté vue, on dispose de commandes Twig pour afficher le formulaire, gérer son apparence, l'affichage des erreurs, etc. 10 | 11 | Reprenons notre exemple de l'entité ```Post``` qu'on a vu dans le chapitre précédent. Pour gérer le formulaire qui va permettre d'ajouter un nouvel article, on va d'abord créer une classe ```PostType```, qu'on rangera dans un dossier ```Form```. 12 | 13 | ``` 14 | namespace App\Form; 15 | 16 | use App\Entity\Post; 17 | use Symfony\Component\Form\AbstractType; 18 | use Symfony\Component\Form\Extension\Core\Type\SubmitType; 19 | use Symfony\Component\Form\FormBuilderInterface; 20 | use Symfony\Component\OptionsResolver\OptionsResolver; 21 | 22 | class PostType extends AbstractType 23 | { 24 | public function buildForm(FormBuilderInterface $builder, array $options): void 25 | { 26 | $builder 27 | ->add('title') 28 | ->add('content') 29 | ->add('save', SubmitType::class, ['label' => 'Sauvegarder']); 30 | } 31 | 32 | public function configureOptions(OptionsResolver $resolver): void 33 | { 34 | $resolver->setDefaults([ 35 | 'data_class' => Post::class, 36 | ]); 37 | } 38 | } 39 | ``` 40 | 41 | Puis dans le contrôleur, on gère le formulaire. Une seule route peut servir à prendre en compte l'affichage du formulaire et sa soumission. 42 | 43 | ``` 44 | use App\Entity\Post; 45 | use App\Form\PostType; 46 | use Doctrine\ORM\EntityManagerInterface; 47 | use Symfony\Component\HttpFoundation\Request; 48 | use Symfony\Component\HttpFoundation\Response; 49 | 50 | #[Route('/post/new', name: 'post_create')] 51 | public function newPost(Request $request, EntityManagerInterface $entityManager): Response 52 | { 53 | $post = new Post(); 54 | 55 | $form = $this->createForm(PostType::class, $post); 56 | 57 | $form->handleRequest($request); 58 | if ($form->isSubmitted() && $form->isValid()) { 59 | $entityManager->persist($post); 60 | $entityManager->flush(); 61 | 62 | return $this->redirectToRoute('home'); 63 | } 64 | 65 | return $this->renderForm('post/new.html.twig', [ 66 | 'postForm' => $form, 67 | ]); 68 | } 69 | ``` 70 | 71 | Ici, l'objet ```post``` va automatiquement être rempli avec les données saisies. On vérifie si un formulaire a été soumis et si les données rentrées sont valides, si c'est le cas on sauvegarde l'entitée. 72 | 73 | Côté vue, on utilise des commandes Twig pour afficher le formulaire. 74 | 75 | ``` 76 | {% form_theme postForm 'bootstrap_5_layout.html.twig' %} 77 | 78 | {{form_start(postForm)}} 79 | 80 | {{form_row(postForm.title, {attr: { placeholder: "Titre de l'article"}, label: 'Titre'})}} 81 | {{form_row(postForm.content, {attr: { placeholder: "Contenu de l'article", rows: 20}, label: 'Contenu'})}} 82 | 83 | {{form_end(postForm)}} 84 | ``` 85 | 86 | Ici, on utilise un template Bootstrap fourni par Symfony. On peut afficher le formulaire entier avec une seul commande ```{{ form(Postform) }}``` ou bien gérer les champs un à un comme dans l'exemple. 87 | 88 | Symfony génère un formulaire qui prend en compte la validation HTML5 côté client, en fonction des contraintes des entitées. Une validation côté serveur a également lieu. Si il y a des erreurs de validation, on peut les afficher avec la commande ```{{ form_errors(form) }}``` (ici elles sont prises en compte par le template Bootstrap). 89 | 90 | ## Ressources 91 | 92 | * [Apprendre à gérer les formulaires avec Symfony par Lior Chamla](https://www.youtube.com/watch?v=_cgZheTv-FQ&ab_channel=LiorCHAMLA-WebDevelopMe) 93 | -------------------------------------------------------------------------------- /docs/06-symfony/07-services.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # Les services 6 | 7 | Lorsqu'on écrit du code, on aime que celui-ci soit bien rangé. On évite de faire de trop gros bouts de code, on préfère les morceler en de petits morceaux, plus faciles à maintenir, à faire évoluer et à débugger. De même, on peut être amené à vouloir réutiliser le même code à plusieurs endroits différents de l'application. Les services permettent de répondre à cette problématique. 8 | 9 | Symfony propose déjà des services tout en un, par exemple pour gérer des logs, envoyer des emails, gérer le cache, etc. Mais il est tout à fait possible de créer ses propres services. De plus, un service peut tout à fait faire appel à d'autres services. 10 | 11 | Prenons un exemple : 12 | 13 | ``` 14 | function SayHello(string $prenom, string $lang='EN') : string 15 | { 16 | $hellos = [ 17 | 'EN' => 'Hello', 18 | 'DE' => 'GutenTag', 19 | 'FR' => 'Bonjour', 20 | 'ES' => 'Hola' 21 | ]; 22 | 23 | return $hellos[$lang] . ' ' . $prenom . '!'; 24 | } 25 | ``` 26 | 27 | Cette fonction prend en entrée un prénom et éventuellement une langue et retourne ```Bonjour``` suivi du prénom dans cette langue. 28 | 29 | Transformons la en service. Nous créons un fichier ```HelloService.php``` que nous rangeons dans un dossier ```services``` 30 | 31 | Dedans, nous écrivons une classe : 32 | 33 | ``` 34 | 'Hello', 44 | 'DE' => 'GutenTag', 45 | 'FR' => 'Bonjour', 46 | 'ES' => 'Hola' 47 | ]; 48 | 49 | return $hellos[$lang] . ' ' . $prenom . '!'; 50 | } 51 | } 52 | ``` 53 | 54 | Si nous souhaitons faire appel à la méthode ```SayHello``` de ce service dans une méthode d'un contrôleur relié à une route, nous pouvons injecter ce service dans les paramètres de la méthode. 55 | 56 | ``` 57 | use App\Service\HelloService; 58 | use Symfony\Component\HttpFoundation\Response; 59 | 60 | #[Route('/hello/{firstname}', name: 'hello')] 61 | public function hello(string $firstname, HelloService $helloService) 62 | { 63 | $helloString = $helloService->SayHello($firstname, 'FR') 64 | 65 | $response = new Response( 66 | $helloString, 67 | Response::HTTP_OK, 68 | ['content-type' => 'text/html'] 69 | ); 70 | 71 | $response->send() 72 | } 73 | ``` 74 | 75 | Si nous souhaitons utiliser ce service dans une méthode d'une autre classe, nous pouvons l'injecter grâce au constructeur. 76 | 77 | ``` 78 | use App\Service\HelloService; 79 | 80 | class ServiceB 81 | { 82 | public function __construct( 83 | private HelloService $helloService 84 | ) 85 | {} 86 | 87 | public function something(): string 88 | { 89 | return $this->helloService->SayHello('John', 'EN'); 90 | } 91 | ``` 92 | 93 | ## Ressources 94 | 95 | * [Apprendre à gérer les services avec Symfony par Nouvelle-Techno.fr](https://www.youtube.com/watch?v=NgnRtEH8Yk4&ab_channel=NouvelleTechno) -------------------------------------------------------------------------------- /docs/06-symfony/08-JS-Symfony.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 8 3 | --- 4 | 5 | # Symfony et le JavaScript 6 | 7 | Quand on développe des applications Web, notamment des sites, on peut être amené à utiliser le JavaScript pour rajouter de l'interactivité à nos pages (menu déroulant, élément affiché ou masqué au clic sur un bouton, requêtes en arrière-plan sans recharger la page, etc.). Heureusement, Symfony offre un outil pour intégrer le JavaScript. 8 | 9 | Symfony propose l'outil ```Webpack Encore``` qui permet de "compiler" votre JavaScript (réunion de tous les fichiers en un seul, minification, optimisation, etc.) ains que votre CSS (réunion de tous les fichiers en un seul, possibilité de travailler avec un préprocesseur comme SASS, outils comme PostCSS, etc.). 10 | 11 | Pour installer Webpack Encore, tapez la ligne suivante : 12 | 13 | ```composer require symfony/webpack-encore-bundle``` 14 | 15 | Puis pour installer les dépendances NodeJS, tapez la commande suivante (il faut que NodeJS soit installé sur votre machine) : 16 | 17 | ```npm install``` 18 | 19 | Un fichier de configuration a été créé à la racine de votre projet. Il s'appelle ```webpack.config.js```. Il contient la configuration de Webpack Encore. Un dossier ```assets``` a également été créé, c'est là que vous mettrez vos fichiers JavaScript. 20 | 21 | C'est dans vos fichiers JavaScript que vous pourrez intégrer vos fichiers CSS (```import './styles/app.css';```). 22 | 23 | Vous pouvez ensuite taper la commande ```npm run watch``` pour le dévoloppement ou ```npm run build``` pour générer les fichiers. 24 | 25 | Vous pouvez ensuite mettre à jour votre template Twig de base comme suit : 26 | 27 | ``` 28 | 29 | 30 | 31 | {% block stylesheets %} 32 | {{ encore_entry_link_tags('app') }} 33 | {% endblock %} 34 | 35 | {% block javascripts %} 36 | {{ encore_entry_script_tags('app') }} 37 | {% endblock %} 38 | 39 | ``` 40 | 41 | Vous trouverez également dans le fichier de configuration des options pour travailler avec les framework JS Vue et React. 42 | 43 | ## Ressources 44 | 45 | * [Apprendre utiliser Webpack Encore avec Symfony par Grafikart](https://grafikart.fr/tutoriels/encore-symfony-1075) 46 | 47 | * [Apprendre utiliser Webpack Encore avec Symfony 6 par Développeur Musclé](https://www.youtube.com/watch?v=Xsxztq8s-_I&ab_channel=D%C3%A9veloppeurMuscl%C3%A9) 48 | 49 | 50 | -------------------------------------------------------------------------------- /docs/06-symfony/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Découvrir Symfony", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /docs/07-JavaScript/01-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | Le language JavaScript (JS en abrégé) est le langage incontournable si vous souhaitez réaliser des pages Web **réactives**. En effet, c'est un des trois langages que connait votre navigateur, avec le HTML et le CSS. 8 | 9 | Il sert à apporter de l'**interactivité** à vos pages. Un menu déroulant ? C'est du JS. Un élément qui apparait ou disparait au clic sur un bouton ? C'est du JS. Des données qui s'affichent à l'écran après avoir cliqué quelque part sans que la page ne se recharge ? C'est du JS. 10 | 11 | Ce langage a été crée en 1995 par NetScape. Il servait beacoup au début à afficher des pop-up de publicité. Mais aujourd'hui, il est devenu très puissant, et permet même de fabriquer des sites internet uniquement en JavaScript, grâce notamment à des frameworks comme **Angular**, **React** ou **Vue**. 12 | 13 | Aujourd'hui, il est maintenu par un groupe de standardisation qui s'appelle l'**ECMA-Script**. La version actuelle est le ECMA-Script-13 (ES13 ou ES2022). 14 | 15 | Bien que conçu pour travailler avec votre navigateur, on peut aujourd'hui le faire tourner côté serveur, avec des outils comme **NodeJS**, **Deno** ou **Bun**. Il y a d'ailleurs également des framework pour travailler en JS côté serveur comme **NextJS**, **NuxtJS** ou **Adonis**. 16 | 17 | Attention, JavaScript n'a rien à voir avec le langage Java. Le premier est un langage interprété (par votre navigateur ou NodeJS), le second est un langage compilé (et qui a donc besoin d'une machine virtuelle pour être exécuté). 18 | 19 | La documentation que vous êtes en train de lire a d'ailleurs été réalisée avec un outil qui utilise le JavaScript côté serveur et côté client ([Docusaurus](https://docusaurus.io/)). 20 | 21 | 22 | ## Ressources 23 | 24 | * [L'histoire du JS par Matthias Le Brun](https://www.youtube.com/watch?v=2mTYhhRmYfs&ab_channel=ParisJS) 25 | 26 | * [The Weird History of JavaScript by Fireship](https://www.youtube.com/watch?v=Sh6lK57Cuk4&t=39s&ab_channel=Fireship) 27 | 28 | * [Le JavaScript par Wikipedia](https://fr.wikipedia.org/wiki/JavaScript) -------------------------------------------------------------------------------- /docs/07-JavaScript/02-les-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Les variables 6 | 7 | En JavaScript comme dans presque tous les langages de programmation, le concept des variables est incontournable. 8 | 9 | Les variables sont des sortes de boites dans lesquelles on va ranger des données. Elle peuvent venir de celui qui écrit le programme ou de celui qui l'utilise. 10 | 11 | Il existe deux manières de déclarer des variables en JavaScript. On peut utiliser le mot-clé ```const``` si on sait que le contenu de la variable ne changera pas (dans ce cas c'est une constante) ou ```let``` si le contenu est amené à changer dans le temps. 12 | 13 | Pour déclarer une variable, on écrit le mot-clé ```const``` ou ```let```, suivi d'un signe égal, suivi de la valeur qu'on souhaite ranger dans cette variable. 14 | 15 | Par exemple : 16 | 17 | ``` 18 | const PI = 3.141592 19 | 20 | let age = 32 21 | ``` 22 | 23 | Dans une variable, on peut ranger différents types de données : 24 | 25 | - des nombres entiers 26 | - des nombres réels 27 | - des valeurs booléenes (vrai ou faux) 28 | - des chaînes de caractères 29 | - des tableaux 30 | - des objets 31 | 32 | Si une variable a été déclarée mais ne contient pas de valeur, la valeur qui sera retournée sera de type ```undefined```. On peut aussi déclarer une valeur nulle, avec le type ```null```. 33 | 34 | Les tableaux sont des collections de données ou de variables. Ils peuvent contenir tous les types de données, ou même un mix des types. Ils s'écrivent entre crochets, avec les données séparées par une virgule. Un tableau peut contenir d'autres tableaux. Par exemple : 35 | 36 | ``` 37 | const numbers = [2, 4, 6, 8] 38 | 39 | const mixed = ['texte', 2, true] 40 | 41 | const array_in_array = [[0, 1], [2, 3]] 42 | ``` 43 | 44 | Les objets sont une façon de représenter un objet abstrait qui dispose de propriétés, chacune ayant une valeur. Ils s'écrivent entre accolades, avec des couples proprité/valeur séparés par des virgules. On sépare la proprité de la valeur par un signe deux points. Par exemple : 45 | 46 | ``` 47 | const person = { 48 | first_name : 'John', 49 | last_name : 'Doe', 50 | age : 32 51 | } 52 | ``` 53 | 54 | On pourra récuperer la valeur d'une propriété en utilisant le symbole point sur l'objet. Par exemple, ```person.age``` renverra 32. 55 | 56 | ## Ressources 57 | 58 | * [Apprendre à gérer les variables par Grafikart](https://grafikart.fr/tutoriels/variables-2055#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/03-les-conditions.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Les conditions 6 | 7 | En JavaScript comme dans presque tous les langages de programmation, le concept des conditions est incontournable. Il consiste à pouvoir gérer le cas où l'on souhaite qu'un bout de code soit exécuté si une condition est remplie. 8 | 9 | Pour écrire une condition, on utilise le mot-clé ```if```, suivi entre parenthèses de la condition, puis d'un bloc de code entouré par des accolades. 10 | 11 | Exemple : 12 | 13 | ``` 14 | if(age >= 18) { 15 | console.log('vous êtes majeur') 16 | } 17 | ``` 18 | 19 | Ici, si la valeur de la variable ```age``` est supérieure ou égale )à 18, on écrit un message dans la console. 20 | 21 | On peut éventuellement ajouter un autre bout de code qui sera exécuté si la condition n'est pas remplie. 22 | 23 | Exemple : 24 | 25 | ``` 26 | if(age >= 18) { 27 | console.log('vous êtes majeur') 28 | } else { 29 | console.log('vous êtes mineur') 30 | } 31 | ``` 32 | 33 | Dans la condition, on utilise des opérateurs de comparaison, comme ```===``` pour une égalité stricte, ```>``` ou ```<``` pour supérieur ou inférieur, ```>=``` ou ```<=``` pour supérieur ou égal et inférieur ou égal, ou encore ```!==``` pour une différence. 34 | 35 | On peut également utiliser une version raccourcie, qu'on appelle une ternaire pour écrire une condition sur une seule ligne. 36 | 37 | Exemple : 38 | 39 | ``` 40 | const phrase = 'Vous êtes ' + (age >= 18 ? 'majeur' : 'mineur') 41 | ``` 42 | 43 | ## Ressources 44 | 45 | * [Apprendre à gérer les conditions par Grafikart](https://grafikart.fr/tutoriels/conditions-2056#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/04-les-boucles.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # Les boucles 6 | 7 | En JavaScript comme dans presque tous les langages de programmation, le concept des boucles est incontournable. 8 | 9 | Il consiste à pouvoir répeter une instruction ou un bloc de code autant de fois qu'on le désire ou tant qu'une condition est remplie ou non. 10 | 11 | Il existe différents types de boucle en JavaScript : 12 | 13 | - les boucles ```for``` 14 | - les boucles ```while``` 15 | - les boucles ```for in``` 16 | - les boucles ```for of``` 17 | 18 | #### Boucle for 19 | 20 | Elle permet de répeter les choses un nombre défini de fois. Imaginons qu'on souhaite réaliser un compteur : 21 | 22 | ``` 23 | for (let i = 1; i <= 5; i++) { 24 | console.log("compteur: " + i) 25 | } 26 | ``` 27 | 28 | Dans ce code, on part avec ```i``` à 1. On indique qu'on continue tant que ```i``` est inférieur ou égal à 5. On explique ensuite qu'on va incrémenter ```i``` de 1 à chaque tour avec ```i++``` (on aurait pu écrire ```i = i + 1```). Au premier tour, la console va afficher ```1```, puis ```2``` au deuxième tour, et ainsi de suite jusqu'à ```5``` au dernier tour. 29 | 30 | #### Boucle while 31 | 32 | Elle permet de répeter les choses tant qu'une condition est remplie. En reprennant l'exemple de la boucle ```for```, cela donne : 33 | 34 | ``` 35 | let i = 1 36 | while (i <= 5) { 37 | console.log("compteur: " + i) 38 | i++ 39 | } 40 | ``` 41 | 42 | On peut également remplacer le ```i++``` par ```i = i + 1```. 43 | 44 | 45 | #### Boucle for in 46 | 47 | Elle permet de parcourir les clefs d'un tableau ou les propriétés d'un objet. 48 | 49 | ``` 50 | const person = { firstname: 'john', lastname: 'Doe', age: 32 }; 51 | 52 | for (const property in person) { 53 | console.log(property) 54 | } 55 | ``` 56 | 57 | Cette boucle affichera d'abord ```firstname```, puis ```lastname``` puis ```age```. 58 | 59 | #### Boucle for of 60 | 61 | Elle permet de parcourir les éléments d'un tableau. Prenons un exemple : 62 | 63 | ``` 64 | const skills = ['HTML', 'CSS', 'PHP'] 65 | for (let skill in skills) { 66 | console.log(skill) 67 | } 68 | ``` 69 | 70 | Cette boucle affichera d'abord ```HTML```, puis ```CSS``` puis ```PHP```. 71 | 72 | ## Ressources 73 | 74 | * [Apprendre à gérer les boucles par Grafikart](https://grafikart.fr/tutoriels/boucles-2058#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/05-les-fonctions.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 4 3 | --- 4 | 5 | # Les fonctions 6 | 7 | Les fonctions permettent d'encapsuler du code pour pouvoir le réutiliser facilement. On peut appeller une fonction soi-même ou bien la déclencher lorsqu'un qu'un évênement arrive. 8 | 9 | Une fonction peut prendre en entrée des paramètres que l'on va utiliser dans le contenu de la fonction. Elle peut aussi retourner une valeur. 10 | 11 | Prenons un example : 12 | 13 | ``` 14 | function sayHello(prenom) { 15 | return 'Bonjour ' + prenom 16 | } 17 | ``` 18 | 19 | Cette fonction permet de renvoyer une chaine de caractère qui dit ```bonjour``` suivi d'un prénom que l'on a passé en paramètre. Pour l'appeler, on écrira par exemple ```sayHello('Bob')```. 20 | 21 | On peut aussi stocker la fonction dans une variable. Par exemple : 22 | 23 | 24 | ``` 25 | const sayHello = function (prenom) { 26 | return 'Bonjour ' + prenom 27 | } 28 | ``` 29 | 30 | On l'appellera de la même manière. 31 | 32 | On peut aussi utiliser ce qu'on appelle les fonctions fléchées. 33 | 34 | ``` 35 | const sayHello = (prenom) => { 36 | return 'Bonjour ' + prenom 37 | } 38 | ``` 39 | 40 | Si la fonction ne comporte qu'une seule instruction de retour, on peut l'écrire sur une seule ligne en enlevant les accolades et le mot-clé ```return```. 41 | 42 | ``` 43 | const sayHello = (prenom) => 'Bonjour ' + prenom 44 | ``` 45 | 46 | ## Ressources 47 | 48 | * [Apprendre à gérer les fonctions par Grafikart](https://grafikart.fr/tutoriels/fonctions-2059#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/06-events.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 5 3 | --- 4 | 5 | # Les évênements 6 | 7 | Quand on travaille avec le navigateur, il est parfois utile de pouvoir réagir à certains évènements : le clic sur un bouton, une frappe au clavier dans un champ texte, la souris qui bouge, etc. 8 | 9 | Pour déclancher du code quand un de ces évènement se produit, on utilise ce qu'on appelle des écouteurs d'évènement. Le principe est simple : on définit l'élement sur lequel on écoute, le type d'évènement qu'on attend et une fonction qui sera appelée quand il se produira. 10 | 11 | Par exemple, si on souhaite réagir au clic sur un élement du DOM, par exemple un bouton, on peut écrire le code suivant : 12 | 13 | ``` 14 | const button = document.querySelector('#loginBT') 15 | 16 | button.addEventListener('click', function () { 17 | console.log('on a cliqué sur le bouton') 18 | }) 19 | ``` 20 | 21 | Pour une frappe dans un champ texte, on peut écrire le code suivant : 22 | 23 | ``` 24 | const input = document.querySelector('input'); 25 | 26 | input.addEventListener('input', updateValue); 27 | 28 | function updateValue(e) { 29 | console.log('vous avez tapé : ' + e.target.value); 30 | } 31 | ``` 32 | 33 | Pour écouter les déplacement de la souris, on peut écrire quelque chose comme ça. 34 | 35 | ``` 36 | document.addEventListener('mousemove', (e) => { 37 | console.log(`la souris a bougé en ${e.offsetX}/${e.offsetY}.` 38 | } 39 | }); 40 | ``` 41 | 42 | ## Ressources 43 | 44 | * [Apprendre à manipuler les écouteurs par Grafikart](https://grafikart.fr/tutoriels/javascript-eventlistener-2072#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/07-POO.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 6 3 | --- 4 | 5 | # La programmation orientée objet 6 | 7 | Il serait bien difficule de décrire en totalité les principes de la programmation orientée objet (POO) en quelques lignes. Nous allons juste voir quelques exemples rapidement. 8 | 9 | Imaginons que vous travailliez sur un annuaire. Vous allez donc devoir gérer des personnes. Chacune aura par exemple un nom, un prénom et un email. C'est l'occasion de ce créer un type d'objet dédié, en écrivant ce qu'on appelle une classe. 10 | 11 | ``` 12 | class Person { 13 | 14 | firstname = '' 15 | lastname = '' 16 | email = '' 17 | 18 | constructor (firstname, lastname, email) { 19 | this.firstname = firstname 20 | this.lastname = lastname 21 | this.email = email 22 | } 23 | } 24 | ``` 25 | 26 | Dans cette classe, on définit des propriété, auxquelles on assigne une valeur par défaut, puis grâce à la méthode ```constructor``` on assigne les données reçues à la construction. Quand on va construire un objet ```Person```, on le fera comme ceci : 27 | 28 | ``` 29 | const personne = new Person('John', 'Doe', 'john.doe@gmail.com') 30 | ``` 31 | 32 | On pourra accéder aux proprités de l'objet comme avec n'importe quel objet littéral (ceux avec les accolades). Ainsi, pour récupérer l'email on écrira ```personne.email```. 33 | 34 | On peut aussi écrire des méthodes dans notre classe. Par exemple, rajoutons une méthode qui renverra une chaine formatée pour afficher la personne : 35 | 36 | ``` 37 | class Person { 38 | 39 | firstname = '' 40 | lastname = '' 41 | email = '' 42 | 43 | constructor (firstname, lastname, email) { 44 | this.firstname = firstname 45 | this.lastname = lastname 46 | this.email = email 47 | } 48 | 49 | getFormated() { 50 | return `${this.firstName} ${this.firstName} : ${this.email}` 51 | } 52 | } 53 | ``` 54 | 55 | On pourra donc utiliser cette méthode sur l'objet en écrivant ```personne.getFormated()```. Cela renverra ```John Doe : john.doe@gmail.com``` Notez qu'on a utilisé les backticks (le caractère `) pour écrire notre chaîne de carractère. A l'intérieur, on utilise ce qu'on appelle l'interpolation de variable, c'est à dire qu'on les écrit comme suit : ```${nom_de_la_variable}``` 56 | 57 | ## Ressources 58 | 59 | * [Apprendre à gérer les classes par Grafikart](https://grafikart.fr/tutoriels/class-2061#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/08-les-erreurs.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 7 3 | --- 4 | 5 | # La gestion des erreurs 6 | 7 | Lorsque l'on écrit un code, celui-ci peut parfois générer des erreurs. On peut aussi vouloir générer soi-même une erreur. On appelle ça des exceptions. 8 | 9 | Pour générer une exception, on utilise le mot-clef ```throw``` et l'objet ```Error```. On écrira par exemple : 10 | 11 | ``` 12 | if(age < 18) { 13 | throw new Error('Vous devez être majeur') 14 | } 15 | 16 | ``` 17 | 18 | On peut capturer une exception en utilsant le bloc ```try...catch```. 19 | 20 | ``` 21 | try { 22 | // code qui peut renvoyer des erreurs 23 | } catch (e) { 24 | // code qui sera éxécuté si il y a une erreur 25 | } 26 | ``` 27 | 28 | ## Ressources 29 | 30 | * [Apprendre à gérer les erreurs par Grafikart](https://grafikart.fr/tutoriels/class-tp-2063#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/09-la gestion-asynchrone.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 8 3 | --- 4 | 5 | # La gestion de l'asynchrone 6 | 7 | Tous les exemples que l'on a vu jusqu'à présent fonctionnaient de manière synchrone, c'est à dire qu'il étaient exécutés à la suite les uns des autres. En JavaScript, on peut aussi faire de l'asynchrone, à savoir écrire du code qui sera exécuté plus tard. 8 | 9 | Il existe pour cela deux méthodes : les callback et les promesses. 10 | 11 | #### Callback 12 | 13 | Les callback consistent en l'écriture d'une fonction qui prend elle même une fonction de retour, qui sera exécutée quand on le souhaite. 14 | 15 | Imaginons que l'on souhaite exécuté une fonction qui attendrait 2 secondes puis retournerait un message. On pourrait écrire les choses comme suit : 16 | 17 | ``` 18 | const wait = (duration, cb) => { 19 | setTimeOut(() => { 20 | cb() 21 | }, duration) 22 | } 23 | 24 | console.log('départ') 25 | 26 | wait(2000, () => { 27 | console.log('terminé') 28 | }) 29 | 30 | console.log('attente') 31 | ``` 32 | 33 | Ce code va d'abord écrire ```départ```, puis ```attente``` et ```terminé``` au bout de deux secondes. 34 | 35 | Mais si on doit gérer plusieurs callback imbriqués, on va tomber dans ce qu'on appelle le callbak hell. 36 | 37 | #### Promesses 38 | 39 | Les promesses sont une autre façon de gérer le code asynchrone. Elle s'écrivent de la façon suivante : 40 | 41 | ``` 42 | const wait = (duration) => { 43 | return new Promise((resolve, reject) => { 44 | setTimeout(() => resolve(duration), duration) 45 | }) 46 | } 47 | ``` 48 | 49 | Ici, la fonction ```wait``` retourne une promesse, qui prend en paramètre deux callback. ```resolve``` sera appelé en cas de succès et ```reject``` en cas d'échec. On pourra alors apeller la fonction ```wait``` comme suit : 50 | 51 | ``` 52 | wait(2000) 53 | .then((duration) => { 54 | console.log(`j'ai attendu ${duration}ms`) 55 | }) 56 | .catch(() => { 57 | console.log(`la promesse a été rejetée`) 58 | }) 59 | ``` 60 | 61 | L'avantage sur les callback est que si on renvoie une nouvelle promesse dans un ```then``` on peut alors enchainer les méthodes. 62 | 63 | ``` 64 | wait(2000) 65 | .then((duration) => { 66 | console.log(`j'ai attendu ${duration}ms`) 67 | return wait(3000) 68 | }) 69 | .then((duration) => { 70 | console.log(`j'ai attendu ${duration}ms`) 71 | }) 72 | ``` 73 | 74 | On peut aussi écrire les choses plus simplement avec les mots-clef ```async``` et ```await```. On déclarre une fonction comme asynchrone avec le mot-clef ```async```. Dans ce cas là, son retour sera une promesse. L'avantage, c'est qu'à l'interieur de cette fonction, on peut appeller une fonction qui retourne une promesse avec le mot clé ```await```. Le code qui suit attendra la résolution de la promesse pour être exécuté. 75 | 76 | ``` 77 | const wait = (duration) => { 78 | return new Promise((resolve, reject) => { 79 | setTimeout(() => resolve(duration), duration) 80 | }) 81 | } 82 | 83 | const main = async () => { 84 | console.log('départ') 85 | await wait(2000) 86 | console.log('fin') 87 | } 88 | 89 | main() 90 | ``` 91 | 92 | Ce code va d'abord écrire ```départ```, puis ```terminé``` au bout de deux secondes. 93 | 94 | ## Ressources 95 | 96 | * [Apprendre à gérer les promesses par Grafikart](https://grafikart.fr/tutoriels/javascript-promise-2067#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/10-DOM.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 9 3 | --- 4 | 5 | # La gestion du DOM 6 | 7 | Quand on travaille côté navigateur, il peut être utile d'intéragir avec le DOM. Ainsi, on peut manipuler le contenu des éléments, leurs styles, leurs attributs, etc. 8 | 9 | Pour sélectionner un élement du DOM avec JavaScript, on utilise une méthode ```querySelector``` sur l'objet ```document```. Cette méthode utilise un sélecteur CSS classique. 10 | 11 | Imaginons le code HTML suivant : 12 | 13 | ``` 14 |
15 | ``` 16 | 17 | On peut changer le texte de la div avec le code suivant : 18 | 19 | ``` 20 | const div = document.querySelector('.hello') 21 | 22 | div.innerHTML = 'Bonjour' 23 | ``` 24 | 25 | On peut aussi par exemple changer le style d'un élement : 26 | 27 | ``` 28 | const div = document.querySelector('.hello') 29 | 30 | div.style.fontSize = '24px' 31 | div.classList.add('red') 32 | ``` 33 | 34 | ## Ressources 35 | 36 | * [Apprendre à manipuler le DOM par Grafikart](https://grafikart.fr/tutoriels/javascript-dom-2071) -------------------------------------------------------------------------------- /docs/07-JavaScript/11-AJAX.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 10 3 | --- 4 | 5 | # Les requêtes AJAX 6 | 7 | Quand on fait du JavaScript, on peut être amené à devoir communiquer avec une API, pour récuperer ou envoyer des données. Une méthode existe pour ça, elle s'appelle ```fetch```. 8 | 9 | Pour l'utiliser, on l'appelle en lui passant en premier paramètre l'URL de la ressource et éventuellement en second paramètre un objet d'options, dans lequel on peut spécifier par exemple des entêtes HTTP. Elle renvoie une promesse. Si on veut récupérer des données en JSON, on devra appeler une méthode ```json()``` sur le résultat de la promesse, méthode qui renverra elle aussi une promesse. 10 | 11 | ``` 12 | fetch('https://jsonplaceholder.typicode.com/posts?_limit=10',{ 13 | headers: { 14 | Accept: 'application/json' 15 | } 16 | }) 17 | .then(r => { 18 | if (r.ok) { 19 | return r.json() 20 | } else { 21 | throw new Error('Erreur serveur', {cause: r}) 22 | } 23 | }) 24 | .then(posts => { 25 | console.log('La liste des articles : ', posts) 26 | }) 27 | .catch(e => { 28 | console.error('Une erreur est survenue', e) 29 | }) 30 | ``` 31 | 32 | On peut aussi l'utiliser pour envoyer des données. 33 | 34 | ``` 35 | fetch('https://jsonplaceholder.typicode.com/posts',{ 36 | method: 'POST', 37 | headers: { 38 | Accept: 'application/json', 39 | 'Content-Type': 'application/json', 40 | }, 41 | body: JSON.stringify({title: 'Hello world'}) 42 | }) 43 | ``` 44 | 45 | ## Ressources 46 | 47 | * [Apprendre à gérer fetch par Grafikart](https://grafikart.fr/tutoriels/javascript-promise-2068#autoplay) -------------------------------------------------------------------------------- /docs/07-JavaScript/12-JS-côté-serveur.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 11 3 | --- 4 | 5 | # JavaScript côté serveur 6 | 7 | Si le JavaScript a d'abord été pensé pour fonctionner dans un navigateur, on peut aujourd'hui le faire tourner **côté serveur**. En effet, des outils comme **NodeJS**, **Deno** ou **Bun** intégrent un moteur JavaScript permettant de l'utiliseur côté backend. Nous allons nous concentrer sur NodeJS. 8 | 9 | NodeJS est un outil qu'on peut installer sur sa machine ou sur un serveur. Il fonctionne sous **Linux**, **MacOS** ou **Windows**. 10 | 11 | Il permet de faire tourner des programmes écrits en JavaScript, à l'exception des fonctionnalités réservées aux navigateurs (manipulation du DOM, API de localisation, accès à la Webcam, etc.). 12 | 13 | Mais il rajoute des fonctionnalités spécifiques pour les usages côté serveur, comme la possibilité de lire ou d'écrire des fichiers, la possibilité d'écrire des serveurs Web ou encore la possibilité de faire du streaming audio ou vidéo. 14 | 15 | Par exemple, pour écrire dans un fichier, on pourra écrire quelque chose comme ça : 16 | 17 | ``` 18 | const fs = require('fs'); 19 | 20 | fs.writeFile('/Users/joe/test.txt', 'Hello World', err => { 21 | if (err) { 22 | console.error(err); 23 | } 24 | }); 25 | ``` 26 | 27 | Ce code créra un fichier ```test.txt``` et écrira dedans ```Hello World```. 28 | 29 | Pour exécuter ce code, qu'on imagine écrit dans un fichier ```hello.js```, on tapera la commande ```node hello.js```. 30 | 31 | NodeJS vient également avec un outil qui s'appelle **NPM**, qui est un gestionnaire de dépendance. En effet, il existe des dizaines de milliers de librairies JS écrites pour Node ou pour le navigateur. 32 | 33 | Imaginons par exemple que l'on ait besoin de générer des slug à partir de chaine de caractères. On peut se rendre sur [npmjs.com](https://www.npmjs.com/) et chercher ```slug```. On trouvera alors par exemple la librairie ```slugify```. 34 | 35 | Pour l'installer, on tapera en ligne de commande ```npm install slugify```. Cela téléchargera la librairie sur notre système. On pourra alors l'utiliser dans un fichier JavaScript comme ceci : 36 | 37 | ``` 38 | const slugify = require('slugify') 39 | 40 | console.log(slugify('un super article')) 41 | ``` 42 | 43 | Cela écrira ```un-super-article``` dans la console. 44 | 45 | ## Ressources 46 | 47 | * [Apprendre NodeJS par Grafikart](https://grafikart.fr/formations/nodejs) 48 | 49 | -------------------------------------------------------------------------------- /docs/07-JavaScript/13-frameworks.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 12 3 | --- 4 | 5 | # Les frameworks JavaScript 6 | 7 | Lorsqu'on écrit du code, on a besoin que celui-ci soit bien organisé. De même, on réalise souvent les mêmes actions et les réécrire à chaque fois est une perte de temps. Les frameworks sont là pour nous faire gagner du temps et nous aider à avoir un code structuré, bien rangé. 8 | 9 | Il existe des dizaines de frameworks en JavaScript. Mais certains sont plus connus et utilisés que d'autres. 10 | 11 | ## Côté navigateur 12 | 13 | #### React 14 | 15 | React est le framework JS le plus utilisé. Il a été proposé par Facebook en 2013. Il permet d'avoir des applications réactives. Il introduit la notion de composants. Il propose une syntaxe alternative, le JSX, qui permet de mélanger du HTML et du JS dans le même code. 16 | 17 | #### Vue 18 | 19 | VueJS est le framework historiquement concurent à React. Il a été proposé par Evan You en 2014. Il permet d'avoir des applications réactives. Il introduit la notion de composants. 20 | 21 | #### Angular 22 | 23 | Angular est le framework JS le plus utilisé en entreprise. Il a été proposé par Google en 2016. Il permet d'avoir des applications réactives. Il introduit la notion de composants. Il est plus complet que React ou Vue puisqu'il propose nativement une solution de routage et de gestion de l'HTTP. Il est entièrement écrit en TypeScript. 24 | 25 | ## Côté serveur 26 | 27 | #### Next 28 | 29 | Next est un framework JS qui permet de faire du rendu côté serveur. Il s'appuie sur React. 30 | 31 | #### Nuxt 32 | 33 | Nuxt est un framework JS qui permet de faire du rendu côté serveur. Il s'appuie sur VueJS. 34 | 35 | #### Adonis 36 | 37 | Adonis est un framework MVC, conçu pour être le pendant JS du framwork PHP Laravel. Il est fourni avec un ORM, un système de migration, un moteur de template, de l'injection de dépendance, etc. 38 | 39 | ## Ressources 40 | 41 | * [Le site de React](https://fr.reactjs.org/) 42 | * [Le site de VueJS](https://vuejs.org/) 43 | * [Le site d'Angular](https://angular.io/) 44 | * [Le site de NextJS](https://nextjs.org/) 45 | * [Le site de NuxtJS](https://nuxtjs.org/fr/) 46 | * [Le site d'Adonis](https://adonisjs.com/) 47 | 48 | -------------------------------------------------------------------------------- /docs/07-JavaScript/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Découvrir JavaScript", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /docs/08-Notions-systeme/01-linux/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | A écrire -------------------------------------------------------------------------------- /docs/08-Notions-systeme/01-linux/01-les-commandes-de-base.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Les commandes de base 6 | 7 | ## Info de base 8 | 9 | > **man** est une commande UNIX permettant d'accéder aux pages de manuel installées sur le système 10 | > Exemple, pour avoir des infos sur la commande ls: `man ls` 11 | 12 | `CTRL+C` et `CTRL+V` qu'on utilise sur Windows pour copier/coller peut interrompre l'écriture de la commande ou un script (CTRL+C). 13 | On peut alors aussi utiliser `CTRL+INS` et `SHIT+INS` de la même façon 14 | 15 | ## Les commandes de gestion des répertoires et des fichiers 16 | `pwd` affiche sur écran le chemin courant du répertoire de la shell 17 | ``` 18 | pwd 19 | /home/user/Documents // affiche le chemin courant 20 | ``` 21 | --- 22 | `ls` abbreviation de *list*, montre tous les répertoires et fichiers contenus du répertoire actif 23 | ``` 24 | ls // affiche seulement les noms 25 | /blog // c'est un répertoire 26 | package.json // c'est un fichier 27 | symfony1.md 28 | symfony2.md 29 | ... 30 | ``` 31 | ``` 32 | ls blog // affiche le contenu du sous-dossier 'blog' 33 | ... 34 | ``` 35 | ``` 36 | ls symfony* // affiche seulement les fichiers qui commencent par 'symfony' 37 | symfony1.md 38 | symfony2.md 39 | ... 40 | ``` 41 | --- 42 | `cd` abbreviation de *change directory*, on l'utilise pour changer de répertoire courant 43 | ``` 44 | pwd 45 | /home/user/Documents // le répertoire courant 46 | ls 47 | /blog // le répertoire où on veut se déplacer 48 | /video 49 | diario.txt 50 | cd blog // la commande pour se déplacer 51 | pwd // le test 52 | /home/user/Documents/blog 53 | ``` 54 | ``` 55 | cd ~ // pour se déplacer au répertoire de base 56 | ``` 57 | ``` 58 | cd .. // aller au répertoire parent 59 | ``` 60 | ``` 61 | cd / // aller au répertoire racine 62 | ``` 63 | --- 64 | `mkdir` abréviation de *make directory*, pour créer un nouveau répertoire 65 | ``` 66 | mkdir mon-dossier 67 | ls 68 | /mon-dossier 69 | ``` 70 | --- 71 | `cp` abréviation de *copy*, copie 72 | ``` 73 | cp symfony2.md symfony3.md // copie le fichier 'symfony2.md' dans un nouveau fichier 'symfony3.md' 74 | ``` 75 | ``` 76 | cp symfony* mon-dossier // copie tous les fichiers qui commencent par 'symfony' dans le dossier 'mon-dossier' 77 | cd mon-dossier 78 | ls 79 | symfony1.md 80 | symfony2.md 81 | ``` 82 | ``` 83 | cp * mon-dossier // copie tout le contenu du répertoire actuel dans 'mon-dossier' 84 | ``` 85 | --- 86 | `mv` abréviation de *move*, déplace mais on peut aussi l'utiliser pour renommer un fichier 87 | ``` 88 | mv symfony3.md symfony4.md // renomme 89 | ``` 90 | ``` 91 | mv symfony4.md blog // déplace le fichier dans le sous-dossier 'blog' 92 | ``` 93 | --- 94 | `rm` abréviation de *remove*, efface fichiers ou répertoires 95 | ``` 96 | rm symfony1.md // efface le fichier 'symfony1.md' 97 | ``` 98 | ``` 99 | rm symfony* // efface les fichiers qui commencent par 'symfony' 100 | ``` 101 | ``` 102 | rm -rf blog // efface le répertoire 'blog' avec tout son contenu 103 | ``` 104 | --- 105 | `rmdir` abréviation de *remove directory*, efface un ou plus répertoires mais seulement si sont vide 106 | ``` 107 | mkdir mon-dossier 108 | rmdir mon-dossier 109 | ``` 110 | ``` 111 | mkdir mon-dossier1 112 | mkdir mon-dossier2 113 | rmdir mon-dossier* // efface les deux dossiers 114 | ``` 115 | --- 116 | `ln` abréviation de *link*, crée un lien vers un fichier 117 | ``` 118 | ln 978-88-97192-60-2 livre // crée le lien de ISBN avec le livre 119 | cat 978-88-97192-60-2 // le même résultat de 'cat livre' 120 | ``` 121 | 122 | ## Les commandes d'édition 123 | 124 | `touch` pour créer un ficher vide 125 | ``` 126 | touch mon-ficher // Crée le ficher 'mon-ficher' dans le répertoire courant 127 | ``` 128 | --- 129 | 130 | `vi` 131 | ``` 132 | 133 | ``` 134 | --- 135 | `nano` permet d'éditer simplement et rapidement les fichiers textes 136 | ``` 137 | nano nom_du_fichier 138 | nano -w nom_du_fichier //Neutralise le retour à la ligne automatique 139 | nano -l nom_du_fichier //Affiche les numéros de ligne à gauche du texte 140 | ``` 141 | Quitter Nano : `CTRL+X` 142 | Enregistrer sous : `CTRL+O` 143 | Rechercher dans le fichier : `CTRL+W` 144 | 145 | ## Les commandes de recherche 146 | 147 | `locate` 148 | ``` 149 | 150 | ``` 151 | --- 152 | `find` 153 | ``` 154 | 155 | ``` 156 | --- 157 | `grep` recherche de mots dans les fichiers 158 | ``` 159 | echo "mon premier fichier" > livre // crée le fichier avec le texte 160 | grep "pre" livre 161 | mon premier fichier // montre en rouge l'occurence 162 | ``` 163 | ``` 164 | grep -c "pre" livre // compte les occurences 165 | ``` 166 | 167 | ## Les commandes d'affichage 168 | `echo` 169 | ``` 170 | 171 | ``` 172 | --- 173 | `cat` 174 | ``` 175 | 176 | ``` 177 | --- 178 | `more` affiche page par page le contenu (n'est pas possible de faire du retour en arrière, 'q' pour sortir de l'affichage) 179 | ``` 180 | more mon-script.php // affice le contenu de 'mon-script.php' 181 | ``` 182 | ``` 183 | more mon-script1.php mon-script2.php // affice le contenu de 'mon-script1.php' et 'mon-script2.php' 184 | ``` 185 | --- 186 | `head` 187 | ``` 188 | 189 | ``` 190 | --- 191 | `tail` 192 | ``` 193 | 194 | ``` 195 | --- 196 | `diff` 197 | ``` 198 | 199 | ``` 200 | 201 | ## Les commandes de gestion des utilisateurs 202 | sudo | chmod | chown | useradd | userdel 203 | 204 | ## Les commandes SSH 205 | 206 | Se connecter en SSH 207 | ``` 208 | ssh login@adresseIPdeVotreVM 209 | ``` 210 | 211 | Se connecter en SSH en utilisant une clé 212 | ``` 213 | ssh -i /CheminVersVotreCleSsh login@adresseIPdeVotreVM 214 | ``` 215 | 216 | Pour éviter d'ajouter -i fichier-cle-ssh 217 | ``` 218 | ssh-add fichier-cle-ssh 219 | ``` 220 | 221 | Copie de fichiers entre machines 222 | ``` 223 | scp -i /CheminVersVotreCleSsh fichierACopier login@adresseIPdeVotreVM:/dossierDestination 224 | ``` 225 | ## Autres commandes utiles 226 | df | du 227 | jobs | kill | top 228 | history 229 | ping | wget | curl 230 | tar | zip 231 | date 232 | wc 233 | 234 | 235 | ## Ressources 236 | 237 | * [Texte - Les commandes de base en console linux](https://doc.ubuntu-fr.org/tutoriel/console_commandes_de_base) 238 | 239 | * [Texte - Les commandes Linux de base](https://www.sitedetout.com/commandes-linux-de-base/) 240 | 241 | * [Vidéo - Tutoriel Linux 2 Les commandes de base](https://www.youtube.com/watch?v=cCW8Gz6zbQo) 242 | -------------------------------------------------------------------------------- /docs/08-Notions-systeme/01-linux/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Linux", 3 | "position": 1 4 | } -------------------------------------------------------------------------------- /docs/08-Notions-systeme/02-docker/00-le-concept.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Comprendre Docker 6 | 7 | 1. Pourquoi Docker ? 8 | 2. Docker vs Machine virtuelle ? 9 | 3. Comment utiliser docker ? 10 | 11 | Obtenez les réponses à ses questions, découvrez l'univers ops, démarrer un nouveau projet et lancez vos premières commandes docker ! 12 | Suivez la série de vidéos de [Teacher du net](https://www.youtube.com/watch?v=8LciBx9uGCA&list=PLlxQJeQRaKDRC_TTW7E0Dz9xZWoxxzH3M). 13 | -------------------------------------------------------------------------------- /docs/08-Notions-systeme/02-docker/01-passerelle-de-la-base-a-la-pratique.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Passerelle de la base à la pratique sous symfony 6 | 7 | ## La base 8 | 9 | Dans le chapitre précédent, nous avons découvert les bases de docker. Ce qu'il est important de retenir pour comprendre la suite : 10 | 1. Le lien vers le [hub de docker](https://hub.docker.com/) qui va nous permettre de configurer nos containers 11 | 2. Nous avons vu plusieurs commandes "Docker". exemple : "docker run...", "docker container ls", etc. Pensez à consulter [la documentation](https://docs.docker.com/) 12 | 13 | ## Docker sous symfony 14 | 15 | Les bases sont acquises. Nous avons compris le concept, nous savons comment récupérer les images sur le hub, les instancier et interagir avec, etc. 16 | 17 | Le chapitre suivant va nous permettre de nous simplifier en apprenant à travailler avec un fichier yaml. 18 | 19 | Les commandes commenceront par docker-compose et ira chercher vos services (containers et images) dans le dossier docker-compose.yml. 20 | 21 | Dans ce fichier vous préciserez : 22 | 1. (facultatif depuis la version 1.27.0) la version de docker compose qui est directement liée à votre version de docker : 23 | 1. dans votre terminale tapez docker -v pour connaitre la version de docker que vous utilisez. 24 | 2. trouvez la version de docker-compose associé : 25 | https://docs.docker.com/compose/compose-file/ 26 | 2. le nom de vos containers. Nommez-les comme bon vous semble. 27 | 3. Le nom des images. 28 | 29 | Ensuite vous n'aurez plus qu'à entrer la commande docker-compose up [-d] et docker ira chercher tout ce dont il a besoin. 30 | Au final, vous réaliserez que c'est tout :). 31 | Si vous avez ajouté une image MySQL, allez à l'adresse que vous avez paramétrée et vous verrez que votre serveur est opérationnel. 32 | 33 | Pensez à consultez la documentation de [docker-compose](https://docs.docker.com/compose/) -------------------------------------------------------------------------------- /docs/08-Notions-systeme/02-docker/02-docker-sous-symfony.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 2 3 | --- 4 | 5 | # Utilisation de docker avec Symfony 6 | Forcément, c'est la vidéo du boss [yoanDev](https://www.youtube.com/watch?v=tRI6KFNKfFo) qu'il vous faut. 7 | 8 | En [version ecrite](https://yoandev.co/un-environnement-de-developpement-symfony-5-avec-docker-et-docker-compose) si vous préferez. -------------------------------------------------------------------------------- /docs/08-Notions-systeme/02-docker/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Docker", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/08-Notions-systeme/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Notions Système", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /docs/09-Communauté/00-communaute.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # La communauté 6 | 7 | Lorsqu'on démarre sur Symfony, il peut être utile de recevoir les conseils de developpeurs dont c'est la spécialité. On peut alors suivre des tutoriels ou des formations. Voici une liste non-hexaustive de personnes qui en proposent, en français. 8 | 9 | #### YoanDev 10 | 11 | YoanDev propose sur sa chaine Youtube des vidéos en rapport avec Symfony. Il propose aussi des vidéos sur des outils qu'on peut intégrer dans Symfony, l'utilisation de Docker avec Symfony, les outils d'intégration continue, les test unitaires, etc. Vous pouvez le retrouver sur sa chaine [Youtube](https://www.youtube.com/c/yoandevco), son [site web](https://www.youtube.com/c/yoandevco) et [Twitter](https://twitter.com/yOyO38). 12 | 13 | 14 | #### Grafikart 15 | 16 | Grafikart propose sur sa chaine Youtube des vidéos en rapport avec Symfony, notamment une formation gratuite. Il propose aussi des vidéos sur tout un tas de sujets dans le monde du dev web. Il publie une nouvelle vidéo très régulièrement. Vous pouvez le retrouver sur sa chaine [Youtube](https://www.youtube.com/c/grafikart), son [site web](https://grafikart.fr/), sa chaine [Twitch](https://www.twitch.tv/grafikart) et [Twitter](https://twitter.com/grafikart_fr). 17 | 18 | #### Lior Chamla 19 | 20 | Lior Chamla propose sur sa chaine Youtube des vidéos en rapport avec Symfony pour comprendre comment ses entrailles fonctionnent. Il est reconnu pour sa grande pédagogie. Il propose aussi des vidéos sur les bonnes pratiques (tests unitaires, TDD, clean architecture, etc.). Il propose également des formations payantes, notamment une formation complète sur Symfony en plus de 20 heures. Vous pouvez le retrouver sur sa chaine [Youtube](https://www.youtube.com/c/LiorCHAMLA), son [site web](https://learn.web-develop.me/), sa chaine [Twitch](https://www.twitch.tv/liior?lang=fr) et [Twitter](https://twitter.com/LiiorC). 21 | 22 | 23 | #### Thomas Boileau 24 | 25 | Thomas Boileau propose sur sa chaine Youtube des vidéos en rapport avec Symfony. Il propose aussi des vidéos sur les design pattern, le TDD, la clean architecture, etc. Il propose du contenu chaque semaine. Vous pouvez le retrouver sur sa chaine [Youtube](https://www.youtube.com/c/ThomasBoileau), sa chaine [Twitch](https://www.twitch.tv/toham) et [Twitter](https://twitter.com/boileau_thomas). 26 | 27 | 28 | #### Les teachers du net 29 | 30 | Honoré Hounwanou propose sur sa chaine Youtube un grand nombre de vidéos en rapport avec Symfony. Des bases aux concepts plus avancés, avancez pas à pas avec Honoré. Vous pouvez le retrouver sur sa chaine [Youtube](https://www.youtube.com/c/Teachersdunet), son [site web](https://parlonscode.com) et [Twitter](https://twitter.com/TEACHERSDUNET). -------------------------------------------------------------------------------- /docs/09-Communauté/01-contribuer.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Contribuer au projet 6 | 7 | Ce projet est open-source. Cela signifie que vous pouvez avoir accès au code source de celui-ci. Mais cela veut aussi dire que vous pouver y contribuer. Son contenu en sera alors meilleur. 8 | 9 | Il y a deux façons de participer au projet : 10 | 11 | - en ouvrant un ticket sur le site du projet pour proposer des améliorations ou relever des erreurs 12 | 13 | - en publiant une PR (pull request) où c'est vous qui écrivez les modifications et les envoyez au mainteneur du projet. 14 | 15 | #### Ouvrir un ticket 16 | 17 | Pour ouvrir un ticket, rendez vous sur la [page Github](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony) du projet. Cliquez ensuite sur le lien [Issues](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/issues) en haut de la page. Vous y verrez la liste des tickets en attente de résolution. 18 | 19 | Vérifiez d'abord que personne n'a ouvert un ticket proposant des modifications identiques à celles que vous voulez proposer en parcourant la liste des tickets. Regardez également dans la liste des tickets fermés. 20 | 21 | Si c'est une nouvelle modification ou proposition, cliquez sur le lien [New issue](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/issues/new) en haut de la page à droite. Dans la nouvelle page qui s'ouvre, donnez un titre court et concis à votre ticket, puis décrivez votre proposition ou relevé d'erreur. Soyez le plus complet et précis possible. Enfin, cliquez sur bouton **Submit new issue** en bas à droite pour enregister votre ticket. 22 | 23 | Vous pouvez aussi cliquer sur un ticket existant et rajouter un commentaire à celui-ci, pour apporter des précisions ou des remarques. 24 | 25 | #### Faire une pull request 26 | 27 | Si vous souhaitez réaliser vous même une correction ou ajouter du contenu, vous pouvez le faire en suivant les étapes suivantes. Vous devez disposer d'un compte Github et avoir GIT installé sur votre machine. 28 | 29 | ##### Etape 1 30 | 31 | Sur la [page du projet](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony), cliquez sur le bouton **fork** en haut à droite. Cela va créer une copie du projet sur votre propre compte Github. 32 | 33 | ##### Etape 2 34 | 35 | Rendez-vous sur votre compte Github et cliquez sur le bouton **Repositories** en haut de la page. Dans la liste des dépôts qui s'affiche, cliquez sur celui que vous venez de copier, votre copie du projet original. Cliquez ensuite sur le bouton **code** en haut à droite, puis dans le menu qui s'affiche, dans l'onglet HTTPS, copiez l'adresse de votre dépôt qui est dans le champ texte ou cliquez sur l'icône qui est à la droite de celui-ci. 36 | 37 | ##### Etape 3 38 | 39 | Sur votre machine, en ligne de commande, tapez la commande suivante : 40 | 41 | ```git clone ``` en remplaçant `````` par celle que vous avez copiée à l'étape précédente. Cela va importer votre copie du projet sur votre machine dans un nouveau répertoire. 42 | 43 | #### Etape 4 44 | 45 | En ligne de commande, naviguez dans ce dossier. Vous devez alors créer une nouvelle branche sur laquelle vous allez faire vos modifications. Pour cela, tapez la commande suivante : 46 | 47 | ```git checkout -b ``` 48 | 49 | en remplaçant `````` par le nom de la branche sur laquelle vous allez travailler. Choisissez un nom court et évoquateur. 50 | 51 | #### Etape 5 52 | 53 | Vous devez indiquer à Git l'adresse du dépôt de votre copie du projet. Recupérez d'abord l'adresse de votre dépot en répétant l'étape 2. Puis tapez la commande suivante : 54 | 55 | ```git remote add upstream ``` en remplaçant `````` par celle que vous avez copiée. 56 | 57 | #### Etape 6 58 | 59 | Ouvrez le projet dans votre éditeur de code, et effectuez vos modifications. 60 | 61 | #### Etape 7 62 | 63 | Vous devez compiler le projet pour vérifier ce que donnent vos modifications et qu'elles ne cassent rien d'existant. Pour cela, tapez les trois commandes suivantes : 64 | 65 | ```npm install``` (vous devez avoir NodeJS installé sur votre machine) 66 | 67 | ```npm run build``` (pour compiler la documentation) 68 | 69 | ```npm run serve``` (pour voir le résultat). 70 | 71 | Rendez vous à l'adresse ```http://localhost:3000/Roadmap-Dev-Symfony/``` pour voir la documentation et vérifier le résultat de vos modifications. 72 | 73 | #### Etape 8 74 | 75 | Si vous êtes satisfait de votre travail, vous devez l'enregister dans le système de versioning de GIT. Pour cela, en ligne de commande, tapez les commandes suivantes : 76 | 77 | ```git add .``` (pour ajouter les fichiers modifiés) 78 | 79 | ```git commit -m ""``` (pour ajouter vos modifications) en ramplaçant `````` par un court message décrivant vos modifications (par exemple "ajout page X"). 80 | 81 | #### Etape 9 82 | 83 | Si vous avez vérifié que tout va bien, vous devez maintenant publier vos modifications sur le dépôt original. Pour cela, tapez la commande suivante : 84 | 85 | ```git push -u origin ``` en remplaçant `````` par celui la branche que vous avez créée à l'étape 4. 86 | 87 | #### Etape 10 88 | 89 | Rendez vous maintenant sur Github à la page de votre propre dépôt, celui que vous avez cloné à l'étape 1. 90 | 91 | Un message en haut de la page va vous indiquer que votre branche peut être fusionnée sur le dépôt d'origine. Cliquez sur le bouton **Compare and pull request** en haut à droite. 92 | 93 | Dans la page qui s'ouvre, donnez un titre à votre pull request, et indiquez en commentaire le détail de vos modifications. Si elles concernent un ticket, vous pouvez le référencer en tapant # suivi du numéro du ticket (sans espace). 94 | 95 | Cliquez enfin sur **Create pull request**. 96 | 97 | Le mainteneur du projet va alors être averti que vous voulez qu'il fusionne votre branche avec la branche principale du projet. Il va effectuer un contrôle sur vos modifications. Vous pouvez retrouver votre pull request sur la page du projet, en cliquant sur le bouton **Pull requests** en haut de la page. Vous verrez alors la liste des pull request en attente et donc la votre. 98 | 99 | Le mainteneur du projet peut souhaiter que vous fassiez des modifications avant qu'il accepte de fusionner votre travail. Pour cela, il vous laissera des commentaires sur la page de votre pull request. Normalement, Github vous enverra une notificiation afin de vous prévenir. Si c'est le cas, vous devrez alors répéter les étapes 6 à 9. 100 | 101 | Si vos modifications sont acceptées, vous apparaitrez dans la liste des contributeurs disponible [ici](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/graphs/contributors). 102 | 103 | -------------------------------------------------------------------------------- /docs/09-Communauté/_category.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Communauté", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /docs/09-outils/01-notions-git/00-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Introduction 6 | 7 | Git est un logiciel qui permet de versionner son projet informatique. Il est tout à fait possible de l'utiliser aussi bien pour des langages de programmations web, comme pour tout autre de langage. 8 | 9 | Git est de loin le système de contrôle de version le plus largement utilisé aujourd'hui. Git est un projet open source avancé, qui est activement maintenu. À l'origine, il a été développé en 2005 par Linus Torvalds, le créateur bien connu du noyau du système d'exploitation Linux. -------------------------------------------------------------------------------- /docs/09-outils/01-notions-git/01-qu-est-ce-que-le-versionning.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Qu'est ce que le versionning 6 | 7 | ### Introduction 8 | 9 | Que ce soit en temps que développeur solo ou professionnel, comme dans de nombreux milieux professionnels, les employés d’une équipe et d’un service traitent un très grand nombre de fichiers et de documents sur une base quotidienne. Chacun a un rôle à jouer lors du cycle de vie de ces données. Par conséquent, il est important que les entreprises disposent des bonnes applications afin de coordonner efficacement la façon dont ces fichiers sont gérés, sauvegardés et partagés. 10 | 11 | ### Késako ? 12 | 13 | Les systèmes de contrôle de version (versioning en anglais ou versionnage en français) sont une catégorie d’outils logiciels qui permettent de gérer les changements apportés à un code source au fil du temps. Grâce au versioning, il est possible de garder une trace de chaque modification du code dans une base de données dédiée. En cas d’erreur, les développeurs peuvent alors revenir en arrière et comparer les versions antérieures du code pour corriger les éventuelles erreurs. 14 | 15 | ### Ressources: 16 | 17 | * [Texte - Gestion de version](https://fr.wikipedia.org/wiki/Gestion_de_versions) 18 | 19 | ### Sources: 20 | 21 | * [Texte - Versionning: Assurer le fonctionnement de vos logiciels d'entreprise](https://www.nowteam.net/versioning-assurer-le-fonctionnement-de-vos-logiciels-dentreprise/) 22 | -------------------------------------------------------------------------------- /docs/09-outils/01-notions-git/02-debuter-avec-git.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Débuter avec git 6 | 7 | ### Introduction 8 | 9 | A Faire 10 | 11 | 12 | ### Ressources: 13 | 14 | * [Vidéo - Formation minimale sur l'usage de GIT](https://grafikart.fr/formations/git) -------------------------------------------------------------------------------- /docs/09-outils/01-notions-git/03-github-et-cie-different-de-git.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 3 3 | --- 4 | 5 | # GitHub / GitLab / Framagit est différent de Git 6 | Lorsque l'on parle de git, on l'associe trop à Github, au point parfois de mélanger les deux. Github n'est là que pour servir de dépôt distant pour votre versionning mais il est tout à fait possible d'utiliser git sans ce genre de service. 7 | 8 | 9 | ## Ressources 10 | 11 | 12 | * [Texte - Git != Github](https://grafikart.fr/blog/git-not-github) -------------------------------------------------------------------------------- /docs/09-outils/01-notions-git/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Les notions a avoir avec Git", 3 | "position": 1 4 | } -------------------------------------------------------------------------------- /docs/09-outils/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Outils", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /docs/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 0 3 | --- 4 | 5 | # Présentation de la Roadmap 6 | 7 | ## Une Roadmap, pour quoi faire ? 8 | 9 | La conception de cette roadmap est partie d'un constat simple : **devenir Dev peut être un véritable parcours du combattant** tant il y a de domaines et de compétences à découvrir. 10 | 11 | L'objectif de cette roadmap est de vous proposer une **trajectoire d'apprentissage cohérente et progressive** vous permettant de disposer de bases solides pour aborder sereinement le métier passionnant de développeur ! 12 | 13 | Notre idée est de **prendre le temps de bâtir de solides fondations** en vous proposant d'**étudier les bases de l'informatique, des réseaux ou d'internet** avant d'étudier toutes notions purement orientées développement. 14 | 15 | > "Une roadmap est une représentation (..) simplifiée permettant de communiquer et de partager efficacement une intention stratégique afin de mobiliser, d’aligner et de coordonner les efforts des parties prenantes pour atteindre un ou plusieurs objectifs." 16 | > 17 | > -- [Wikipedia](https://fr.wikipedia.org/wiki/Roadmap) 18 | 19 | ## Comment fonctionne notre Roadmap ? 20 | 21 | Notre roadmap, **présentée sous la forme d'un mini-site documentaire** se veut simple et fonctionnelle. 22 | 23 | Nous vous proposons une **succession de thématiques**, à suivre dans l'ordre ou non suivant votre niveau. **Pour chacune de ces thématiques**, nous vous proposons une **liste de sous-compétences/connaissances** importantes pour votre futur métier de développeur. 24 | 25 | **Lorsque vous consultez une sous-compétence ou connaissance**, nous vous donnons de manière succincte les **intérêts de son apprentissage**, puis nous vous proposons une **liste de ressources** le plus souvent **gratuites** et en **français** afin d'approfondir le sujet. 26 | 27 | ## Qui a construit cette Roadmap ? 28 | 29 | Cette roadmap est le résultat d'un **travail collaboratif, communautaire et bénévole**. 30 | 31 | Vous trouverez l'ensemble des contributeurs sur la page [GitHub](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony) du projet. 32 | 33 | ## Comment contribuer à cette Roadmap ? 34 | 35 | **Cette roadmap est en cours de construction et nous avons besoin d'aide pour la compléter, la corriger ou l'améliorer !** 36 | 37 | Nous utilisons l'outil [Docusaurus](https://docusaurus.io/) pour générer notre mini-site, la prise en main est simple, puisqu'il s'agit la plupart du temps de modifier ou créer des fichiers en Markdown. 38 | 39 | N'hésitez pas à **consulter ou créer des [Issues](https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/issues)** pour **contribuer** ou **proposer** des améliorations/corrections. 40 | -------------------------------------------------------------------------------- /docusaurus.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Note: type annotations allow type checking and IDEs autocompletion 3 | 4 | const lightCodeTheme = require('prism-react-renderer/themes/github'); 5 | const darkCodeTheme = require('prism-react-renderer/themes/dracula'); 6 | 7 | /** @type {import('@docusaurus/types').Config} */ 8 | const config = { 9 | title: 'Roadmap Dev Symfony', 10 | tagline: 'Une Roadmap collaborative pour devenir un⸱e dev Symfony !', 11 | url: 'https://yoanbernabeu.github.io/', 12 | baseUrl: '/Roadmap-Dev-Symfony/', 13 | onBrokenLinks: 'throw', 14 | onBrokenMarkdownLinks: 'warn', 15 | favicon: 'img/favicon.ico', 16 | organizationName: 'yoanbernabeu', // Usually your GitHub org/user name. 17 | projectName: 'Roadmap-Dev-Symfony', // Usually your repo name. 18 | deploymentBranch: 'gh-pages', 19 | 20 | presets: [ 21 | [ 22 | '@docusaurus/preset-classic', 23 | /** @type {import('@docusaurus/preset-classic').Options} */ 24 | ({ 25 | docs: { 26 | sidebarPath: require.resolve('./sidebars.js'), 27 | // Please change this to your repo. 28 | editUrl: 'https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/edit/main/', 29 | }, 30 | blog: { 31 | showReadingTime: true, 32 | // Please change this to your repo. 33 | editUrl: 34 | 'https://github.com/yoanbernabeu/Roadmap-Dev-Symfony/edit/main/', 35 | }, 36 | theme: { 37 | customCss: require.resolve('./src/css/custom.css'), 38 | }, 39 | }), 40 | ], 41 | ], 42 | 43 | themeConfig: 44 | /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ 45 | ({ 46 | navbar: { 47 | title: 'Roadmap Dev Symfony', 48 | logo: { 49 | alt: 'Roadmap Dev Symfony', 50 | src: 'img/logo.svg', 51 | }, 52 | items: [ 53 | { 54 | type: 'doc', 55 | docId: 'intro', 56 | position: 'left', 57 | label: 'Roadmap', 58 | }, 59 | {to: '/blog', label: 'Blog', position: 'left'}, 60 | { 61 | href: 'https://github.com/yoanbernabeu/Roadmap-Dev-Symfony', 62 | label: 'GitHub', 63 | position: 'right', 64 | }, 65 | ], 66 | }, 67 | footer: { 68 | style: 'dark', 69 | copyright: `Copyright © ${new Date().getFullYear()} | Roadmap Dev Symfony | Une Roadmap collaborative pour devenir un⸱e dev Symfony !`, 70 | }, 71 | prism: { 72 | theme: lightCodeTheme, 73 | darkTheme: darkCodeTheme, 74 | }, 75 | algolia: { 76 | appId: 'BH4D9OD16A', 77 | apiKey: 'a70846b936367f9fab41ed1f3f14a231', 78 | indexName: 'roadmap-dev-symfony', 79 | }, 80 | }), 81 | }; 82 | 83 | module.exports = config; 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "roadmap-symfony", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids" 15 | }, 16 | "dependencies": { 17 | "@docusaurus/core": "2.0.0-beta.9", 18 | "@docusaurus/preset-classic": "2.0.0-beta.9", 19 | "@mdx-js/react": "^1.6.21", 20 | "@svgr/webpack": "^5.5.0", 21 | "clsx": "^1.1.1", 22 | "file-loader": "^6.2.0", 23 | "prism-react-renderer": "^1.2.1", 24 | "react": "^17.0.1", 25 | "react-dom": "^17.0.1", 26 | "url-loader": "^4.1.1" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.5%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /screenshoot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yoanbernabeu/Roadmap-Dev-Symfony/3633f3b34260d9767b002cc5f00e312c3f3400b9/screenshoot.png -------------------------------------------------------------------------------- /sidebars.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating a sidebar enables you to: 3 | - create an ordered group of docs 4 | - render a sidebar for each doc of that group 5 | - provide next/previous navigation 6 | 7 | The sidebars can be generated from the filesystem, or explicitly defined here. 8 | 9 | Create as many sidebars as you want. 10 | */ 11 | 12 | // @ts-check 13 | 14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 15 | const sidebars = { 16 | // By default, Docusaurus generates a sidebar from the docs folder structure 17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], 18 | 19 | // But you can create a sidebar manually 20 | /* 21 | tutorialSidebar: [ 22 | { 23 | type: 'category', 24 | label: 'Tutorial', 25 | items: ['hello'], 26 | }, 27 | ], 28 | */ 29 | }; 30 | 31 | module.exports = sidebars; 32 | -------------------------------------------------------------------------------- /src/components/HomepageFeatures.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import styles from './HomepageFeatures.module.css'; 4 | 5 | const FeatureList = [ 6 | { 7 | title: 'Une Roadmap ?', 8 | Svg: require('../../static/img/map.svg').default, 9 | description: ( 10 | <> 11 | Une Roadmap est une proposition de "cursus" ou de "parcours" à suivre afin d'arriver à un objectif. 12 | Cette Roadmap a été construite de manière collaborative. 13 | 14 | ), 15 | }, 16 | { 17 | title: 'Étape par étape !', 18 | Svg: require('../../static/img/step.svg').default, 19 | description: ( 20 | <> 21 | L'objectif de notre Roadmap est de vous proposer des étapes qui vous permettent d'atteindre progressivement votre objectif. 22 | 23 | ), 24 | }, 25 | { 26 | title: 'Deviens un⸱e dev Symfony !', 27 | Svg: require('../../static/img/dev.svg').default, 28 | description: ( 29 | <> 30 | Avec cette Roadmap vous devriez être en mesure de devenir un développeur Symfony avec toutes les bases nécessaires pour concevoir des applications complexes ! 31 | 32 | ), 33 | }, 34 | ]; 35 | 36 | function Feature({Svg, title, description}) { 37 | return ( 38 |
39 |
40 | 41 |
42 |
43 |

{title}

44 |

{description}

45 |
46 |
47 | ); 48 | } 49 | 50 | export default function HomepageFeatures() { 51 | return ( 52 |
53 |
54 |
55 | {FeatureList.map((props, idx) => ( 56 | 57 | ))} 58 |
59 |
60 |
61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/components/HomepageFeatures.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary: #0077b6; 10 | --ifm-color-primary-dark: #006ba4; 11 | --ifm-color-primary-darker: #00659b; 12 | --ifm-color-primary-darkest: #00537f; 13 | --ifm-color-primary-light: #0083c8; 14 | --ifm-color-primary-lighter: #0089d1; 15 | --ifm-color-primary-lightest: #009bed; 16 | --ifm-code-font-size: 95%; 17 | } 18 | 19 | .docusaurus-highlight-code-line { 20 | background-color: rgba(0, 0, 0, 0.1); 21 | display: block; 22 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 23 | padding: 0 var(--ifm-pre-padding); 24 | } 25 | 26 | html[data-theme='dark'] .docusaurus-highlight-code-line { 27 | background-color: #03045e; 28 | } 29 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import clsx from 'clsx'; 3 | import Layout from '@theme/Layout'; 4 | import Link from '@docusaurus/Link'; 5 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; 6 | import styles from './index.module.css'; 7 | import HomepageFeatures from '../components/HomepageFeatures'; 8 | 9 | function HomepageHeader() { 10 | const {siteConfig} = useDocusaurusContext(); 11 | return ( 12 |
13 |
14 |

{siteConfig.title}

15 |

{siteConfig.tagline}

16 |
17 | 20 | Présentation de la Roadmap - 5min ⏱️ 21 | 22 |
23 |
24 |
25 | ); 26 | } 27 | 28 | export default function Home() { 29 | const {siteConfig} = useDocusaurusContext(); 30 | return ( 31 | 34 | 35 |
36 | 37 |
38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | } 12 | 13 | @media screen and (max-width: 966px) { 14 | .heroBanner { 15 | padding: 2rem; 16 | } 17 | } 18 | 19 | .buttons { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yoanbernabeu/Roadmap-Dev-Symfony/3633f3b34260d9767b002cc5f00e312c3f3400b9/static/.nojekyll -------------------------------------------------------------------------------- /static/img/dev.svg: -------------------------------------------------------------------------------- 1 | proud_coder -------------------------------------------------------------------------------- /static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yoanbernabeu/Roadmap-Dev-Symfony/3633f3b34260d9767b002cc5f00e312c3f3400b9/static/img/favicon.ico -------------------------------------------------------------------------------- /static/img/logo.svg: -------------------------------------------------------------------------------- 1 | map -------------------------------------------------------------------------------- /static/img/map.svg: -------------------------------------------------------------------------------- 1 | map -------------------------------------------------------------------------------- /static/img/step.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/tutorial/docsVersionDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yoanbernabeu/Roadmap-Dev-Symfony/3633f3b34260d9767b002cc5f00e312c3f3400b9/static/img/tutorial/docsVersionDropdown.png -------------------------------------------------------------------------------- /static/img/tutorial/localeDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yoanbernabeu/Roadmap-Dev-Symfony/3633f3b34260d9767b002cc5f00e312c3f3400b9/static/img/tutorial/localeDropdown.png --------------------------------------------------------------------------------