Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Erika sf2 hw #307

Open
wants to merge 22 commits into
base: homework-2019-11-14
Choose a base branch
from
Open

Erika sf2 hw #307

wants to merge 22 commits into from

Conversation

aurelijusb
Copy link
Owner

@aurelijusb aurelijusb commented Dec 14, 2019 •
edited
Loading

Rebased: #229

git clone [email protected]:aurelijusb/kickstart.git
cd kickstart/
git checkout homework-2019-11-19 
git remote add erika https://github.com/erirad/kickstart.git
git fetch erika 
git checkout -b erika-sf2-hw
git merge erika/HW/symfony-part-2-erika

aurelijusbanelis and others added 21 commits November 13, 2019 21:47
@aurelijusbanelis
Lecture notes
08b9cce
@aurelijusbanelis
Pridedam React'ui reikalingas JavaScript bibliotekas
02d2606 
scripts/frontend.sh
   yarn add @babel/preset-react --dev
   yarn add react react-dom prop-types

Dokumentacija: https://symfony.com/doc/current/frontend/encore/reactjs.html

Jei paimate pavyzdį, tai scripts/frontend.sh
   yarn
@aurelijusbanelis
Pajungiame, kad kompiliuotų React'o JSX failus
c70edb7 
Iš assets/js eis į build/js/app.js, nes taip parašėme webpack.config.js

scripts/frontend.sh
  yarn watch

Rezultato ieškoti:
  build/js/app.js

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/reactjs.html
  https://yarnpkg.com/lang/en/docs/package-json/#toc-scripts
@aurelijusbanelis
Sukuriame Controller patogesniam testavimui
8d99df9 
Sugeneruota su scripts/backend.sh
    bin/console make:controller People

Patikrinimui:
 * http://127.0.0.1:8000/people

Dokumentacija:
 * https://symfony.com/doc/current/bundles/SymfonyMakerBundle/index.html
@aurelijusbanelis
Bandome React Hello world, bet neveikia
6824312 
Patikrinimui:
  http://127.0.0.1:8000/people

Dokumentacija:
  https://reactjs.org/docs/hello-world.html
@aurelijusbanelis
Pataisome, kad veiktų React Hello world pavyzdys
6f02df3 
Klaidą buvo galima patyti per Naršyklės konsolę:
  ReferenceError: ReactDOM is not defined

Esmė: React'ą turėjome node_modules (prsiminkime yarn... komandą), bet WebPack Encore nežinojo, kad reikia jį įtraukti.

Dokumentacija (neatsimenu, kur radau, bet čia geras pavyzdys):
  https://artemzhuravlev.com/blog/symfony-reactjs-using-encore/

Bonus per konsole siūlo (ir programuoti padės):
  Download the React DevTools for a better development experience: https://fb.me/react-devtools
@aurelijusbanelis
Panaudokime kieno nors kito biblioteką
b395b70 
scripts/frontend.sh
  yarn add axios
  yarn watch

Pridėta į app.js, kad būtų galima patikrinti:
  public/build/js/app.js

Dokumentacija:
  https://www.npmjs.com/package/axios
  https://yarnpkg.com/lang/en/docs/cli/add/
  https://yarnpkg.com/lang/en/docs/cli/run/

Jei naudojamas commit'as kaip pavyzdys, scripts/frontend.sh
  yarn
@aurelijusbanelis
Padarom AJAX užklausą naudojant axios biblioteką
f1cff08 
Čia viena iš pavyzdžių, kaip galima panaudoti išorinę bilbioteką,
kad mūsų kodas būtų paprastesnis.

Kad kodas veiktų, paleidžiame per scripts/frontend.sh
  yarn watch

Patirikrinimui:
  http://127.0.0.1:8000/people

Patirkinimui, atsidarome Naršyklės console langą
  Turėtų būti kažkas į Object { "build/app.css": "/build/app.css", "build/app.js": "/build/app.js", "build/runtime.js": "/build/runtime.js", "build/vendors~app.js": "/build/vendors~app.js" }

Dokumentacija:
  https://www.npmjs.com/package/axios
@aurelijusbanelis
Atvaizduojame duomenis puslapyje
bc78d6f 
Pradedame nuo "...", nes užsikrauna ne iš karto, kad naudotoja matytų, jog pasikeis.

Kodo generavimu paleisti per scripts/frontend.sh
  yarn watch

Rezultatas matysis atsidarius pusplaį:
  http://127.0.0.1:8000/people

Patikrinimui pabandykite (manifest.json reikšmė pasikeis):
  yarn dev
  yarn build

Dokumentacija:
  https://www.w3schools.com/jsref/prop_html_innerhtml.asp
  https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
  https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText
  https://symfony.com/doc/current/frontend/encore/versioning.html
  https://yarnpkg.com/lang/en/docs/cli/run/
@aurelijusbanelis
Perduokime duomenis iš Twig'o į JavaScript'ą
0c8b3b8 
Problema: naudojame React ir axious kodą tik People puslapyje, bet JavaScript įkraunamas visur. Taigi Pagrindiniame puslapyje Console'je metamos klaidos.
Sprendimas: įterpti JavaScript dalį, kuri būtų virš. Naudojami globalūs JavaScript kintamieji ("var", bet ne "let")

Gerosios praktikos: naudoti data-... parametrus
Geresnis sprendimas: patikrinti ar elementas egzistuoja

Kodas sukeneruotas per scripts/frontend.sh
  yarn watch

Patikrinimui, ar veikia:
  Tiek pagrindiniame, tiek /people puslapyje Naršyklės Console nerodo klaidos

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/server-data.html
  https://www.w3schools.com/js/js_datatypes.asp
@aurelijusbanelis
Prisimename navigaciją
d0288b0 
Nes jau sunku per puslapius vaikščioti.

Patrikrinimui (viršuje turėtų būti navigacijos juosta):
 http://127.0.0.1:8000/people
 http://127.0.0.1:8000/

Gali prireikti per scripts/backend.sh
  bin/console cache:clear

Dokumentacija:
  https://symfony.com/doc/current/reference/twig_reference.html
  https://twig.symfony.com/doc/2.x/tags/extends.html
  https://getbootstrap.com/docs/4.3/components/navbar/
@aurelijusbanelis
Pridedame atskirą JavaScript failą
6d7da67 
Kuris bus naudojamas tik viename puslapyje
Nes jau nebereikia mokintis parametrų perdavimo.

Priminimui: CSS failai yra įtraukiami iškviečiant require('../css/app.scss') ar pan.

Kodas sugeneruojamas per scripts/frontend.sh
  yarn watch

Patikrinimui, žiūrėti sugeneruotą:
  public/build/validation.js
  (Gali tekti iš naujo paleisti "yarn watch")

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/shared-entry.html
  https://symfony.com/doc/current/frontend/encore/split-chunks.html
@aurelijusbanelis
Paprastas JavaScript reaguojantis į įvestą laukelį
488b744 
Pridedame validacijos failą tik People puslapyje.

Kodo sugeneruojamas (nukopijuojamas į build katalogą) node konteineryje:
  yarn watch

Lyginant su senesnėmis Symfony/Encore versijomis buvo naudojama asset komanda, kurią dabar pakeičia gudresnė encore_entry_script_tags.

Patikrinimui, ar veikia:
  http://127.0.0.1:8000/people keičiant teksta su klaviatūra, turi šalia rodyti
@aurelijusbanelis
Pasidarome prieigą AJAX užklausoms (sudėtingesnis takų pavyzdys)
2026641 
Symfony turi galingą takų (angl. route) sistemą,
tai galima perduoti argumentus užklausoje, kaip argumentus į funkciją.

Pasidarome apribojimą, kad būtų galima kviesti tik per POST metodą.
Vis dar nėra kaip pilnai ištestuoti.

Galima tik patikrinti per scripts/backend.sh
  bin/console debug:router
  bin/console debug:router validatePerson

Arba iš Linux:
  curl -X POST http://127.0.0.1:8000/validate/name
  curl -X POST http://127.0.0.1:8000/validate/labas

Dokumentacija:
  https://symfony.com/doc/current/routing.html
  https://symfony.com/doc/current/routing.html#matching-http-methods
@aurelijusbanelis
Perduodame adresą į JavaScript'ą
bb86ad6 
Path irgi gali priimti parametrus

Javascript pergeneravimui iš scripts/frontend.sh
  yarn watch

Patirkinimui:
  http://127.0.0.1:8000/people keičiant tekstą, rodo: "Validuosiu su: /validate/name"

Dokumentacija:
  https://symfony.com/doc/current/frontend/encore/server-data.html
  https://symfony.com/doc/current/routing/generate_url_javascript.html
@aurelijusbanelis
Siųnčiame AJAX užklausą
9f38140 
Keičiant laukelio turinį, grąžina ":)"
Rankomis galima pasibandyti pakeisti, ar pagauna ir klaidas.

Bet jau turime sujungtą Frontend'ą su Backend'u.

Dokumentacija:
  https://www.npmjs.com/package/axios
@aurelijusbanelis
Pasiruošiame testinius duomenis
923ca9d 
Nesinori parodyti spendimo pirmam namų darbui,
tai dėl paprastumo tiesiog įdedama į PHP failą.
@aurelijusbanelis
Turime veikiančią AJAX validaciją (teisingos reikšmės patikrinimą)
96cb278 
Patikrinimui:
  Įvesti egzistuojantį vardą (pvz. Lukas) ir bus matoma laiminga šypsenėlė ":)"

Bandome apsisaugoti nuo netinkamų laukų pavadinimų.

JavaScript pergeneravimui per scripts/frontend.sh
  yarn watch

Dokumentacija:
  https://symfony.com/doc/current/create_framework/http_kernel_controller_resolver.html
@erirad
Symfony Homework Part 2
e02e0cf
@erirad
added blank line after namespace
fb15c1a
@aurelijusb
Solving merge conflicts
1e7d749 
Merge remote-tracking branch 'erika/HW/symfony-part-2-erika' into erika-sf2-hw

Conflicts:
	assets/js/validation.js
	src/Controller/PeopleController.php
	templates/people/index.html.twig
@aurelijusb aurelijusb mentioned this pull request Dec 14, 2019
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@aurelijusb @aurelijusbanelis @erirad