Chapters

33 Chapters | 3:02:08 |

01

Lift Stuff! The js- Prefix

7:39
02

(document).ready() & Ordering

4:45
03

All about Event Bubbling

4:31
04

The Event Argument & stopPropagation

3:07
05

The DOM Element Object

6:35
06

The Magical this Variable & currentTarget

4:30
07

A Great Place to Hide Things! The data- Attributes

5:48
08

Organizing with Objects!

5:08
09

"Static" Objects & the this Variable

6:05
10

Getting to the bottom of the this Variable

4:29
11

Fixing "this" with bind()

6:08
12

Immediately Invoked Function Expression!

7:56
13

The window Object & Global Variables

6:12
14

Instantiatable Objects & Constructors

4:17
15

The Object prototype!

3:32
16

prototype Versus __proto__

7:02
17

Extending the Prototype

2:34
18

AJAX Form Submit: The Lazy Way

5:41
19

Old-School AJAX HTML

7:17
20

Delegate Selectors FTW!

3:45
21

Proper JSON API Endpoint Setup

4:46
22

POSTing to the API Endpoint

3:59
23

Handling JSON Validation Errors

6:40
24

Clearing the Form, Prepping for a Template

3:56
25

JavaScript Templating

5:57
26

Full-JavaScript Rendering & FOSJsRoutingBundle

7:26
27

All About Promises!

8:11
28

Catching a Failed Promise

5:58
29

Promise catch: Catches Errors?

6:40
30

Making (and Keeping) a Promise

7:57
31

Promise Chaining

3:43
32

SweetAlert: Killing it with Promises

5:11
33

Sweet Alert: Create a Promise!

4:45

> JavaScript Fundamentals > JavaScript for PHP Geeks

Buy Access to Course

21.

Proper JSON API Endpoint Setup

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

18 Comments

Sort By

Login or Register to join the conversation

sasa1007 7 years ago

Hi,
I dont know how to put
data-url = {{ path('citizenship_api_new')}}
in
<form method="post" class="js-new-rep-log-form">
if I use symfony form

My code
{{ form_start(form,{'attr': {'class':'js-new-rep-log-form' }}
.....
{{ form_end(form) }}

|

MolloKhan SFCASTS sasa1007 7 years ago edited

Hey sasa1007

That's odd, your code should work. If you override the "attr" on a form field. Does it work?
{{ form_row(form.name, {attr: ...} }}

Also, try removing the single quotes from object's key

Cheers!

|

sasa1007 MolloKhan 7 years ago

now it is working
{{ form_start(form,{
attr: {
'class':'js-new-rep-log-form',
'data-url': path('citizenship_api_new')
}
})
}}
{{ include('Resources/views/admin/citizenship/_form.html.twig' }}
{{ form_end(form) }}

Thank you

|

MolloKhan SFCASTS sasa1007 7 years ago

So it was caused by the single quotes?

|

J K. 8 years ago

Hi

could you help me understand how the repLog gets passed into deleteRepLogAction()? I was expecting the id to come in as a variable with the request and to use findById to get the entity and am missing how an entity comes in as a parameter on an action.

I am just updated to symfony 3.4 and am not using auto-wiring.

/**
* @Route("/reps/{id}", name="rep_log_delete")
* @Method("DELETE")
*/
public function deleteRepLogAction(RepLog $repLog)

{
... lines 53 - 58
}

|

MolloKhan SFCASTS J K. 8 years ago

Hey @happyuser

That's because of Symfony's Paramconverter, it automatically tries to find a "RepLog" record by id, and if it doesn't find any, it throws a 404 exception
You can read more detailed info here: https://symfony.com/doc/4.0...

But, if you don't like it, you can remove the type-hint and rename the variable to "$id"

Cheers!

|

happyuser MolloKhan 8 years ago

Thanks this helps a lot

|

Dmitry 8 years ago

Hi, Ryan!

protected function createApiResponse($data, $statusCode = 200)
{
$json = $this->get('serializer')
->serialize($data, 'json');
return new JsonResponse($json, $statusCode, [], true);
}

Why does this code work?
In this tuto you have replaced JsonResponse to Responce due to "And we can't use JsonResponse anymore, or it'll encode things twice."
https://knpuniversity.com/s...

|

MolloKhan SFCASTS Dmitry 8 years ago

Hey Dmitry, nice catch!

This is due to a Symfony version change. The Symfony-REST tutorial was made some time ago and it is using Symfony 2.6
Do you see that last parameter beign passed to JsonResponse constructor? That's a flag that tells if the data is in Json format or not

I hope this clarifies things a bit :)

|

Дмитрий Политов MolloKhan 8 years ago

Thank you! It's clear now)

|

Дмитрий Политов 8 years ago

I mean in this tutorial you did not replace JsonResponse to Response and code seems working properly..

|

MolloKhan SFCASTS Дмитрий Политов 8 years ago edited

Hey Дмитрий Политов

You are right, but Symfony has changed now. Check my comment here: https://knpuniversity.com/s...

Cheers!

|

GDIBass 8 years ago

Do you guys have any tutorials covering CSRF protection for API back ends? I don't remember anything in the API tutorials

|

Victor SFCASTS GDIBass 8 years ago

Hey Matt,

We do talk about it here: https://knpuniversity.com/s... . In short, we just set csrf_protection to false because we can't use normal CSRF protection in an API.

Cheers!

|

GDIBass Victor 8 years ago

Yeah I remember that from the tutorial. I'm wondering how you offer protections if you're using a pure JS front end combined with an API back end. What are the best practices?

|

weaverryan SFCASTS GDIBass 8 years ago edited

Hey GDIBass!

This is by far my favorite blog post on the topic: http://www.redotheweb.com/2...

Honestly, it's not something I have a lot of advice on, because it seems to be something that many people simply ignore :/. As that blog post says, your best protection is to use two different types of protections together... which is a lot of work. I think many people ignore this because they can - because the endpoint doesn't do anything "secure enough" (e.g. banking) to require them to think about it.

That's about all I can say on it at this time - it's on my list to find a robust, but "reasonable to implement" system for this. All the info is in that blog post... but the work is still up to you ;).

Cheers!

2 |

GDIBass weaverryan 8 years ago

Great, thanks Ryan. I'll definitely check that out.

1 |

GDIBass weaverryan 8 years ago

So... wow. This one seems a bit complex. Easy enough in concept but not super easy to implement. Lots to think about!

|

This tutorial uses an older version of Symfony... but since it's a JavaScript tutorial, the concepts are still ? valid!

Symfony 3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "symfony/symfony": "3.1.*", // v3.1.10
        "twig/twig": "2.10.*", // v2.10.0
        "doctrine/orm": "^2.5", // v2.7.1
        "doctrine/doctrine-bundle": "^1.6", // 1.10.3
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "symfony/swiftmailer-bundle": "^2.3", // v2.4.0
        "symfony/monolog-bundle": "^2.8", // 2.12.0
        "symfony/polyfill-apcu": "^1.0", // v1.2.0
        "sensio/distribution-bundle": "^5.0", // v5.0.22
        "sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
        "incenteev/composer-parameter-handler": "^2.0", // v2.1.2
        "friendsofsymfony/user-bundle": "~2.0@dev", // dev-master
        "doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.2.1
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
    },
    "require-dev": {
        "sensio/generator-bundle": "^3.0", // v3.1.1
        "symfony/phpunit-bridge": "^3.0" // v3.1.6
    }
}

Previous Chapter

Next Chapter