A minor note, but my IDE suggested using `random_int(5, 100)` instead of `rand(5, 100)`. It's more "cryptographically secure" for whatever that's worth...or use `mt_rand()`. I blindly do whatever my IDE tells me just to get rid of the damn squiggles.
Good to know! Though keep in mind that random_int is available since PHP 7.0 only. What about mt_rand(), from the PHP docs I see a note that as of PHP 7.1.0, rand() uses the same random number generator as mt_rand(). Btw, what IDE do you use? Because I've not noticed this suggestion in PhpStorm, but probably I just have different version.
Yeah `mt_rand()` seems to be a closer replacement. I use PhpStorm and the suggestion comes from the Php Inspections (EA Extended) plugin. https://github.com/kalessil...
I am novice to programming, just want to mention that nothing in this chapter made sense. Should I learn Javascrip and Json first before Symfony? Thank you
We're sorry that this chapter does not make much sense for you. Well, yes, to know it better you need to deal with JavaScript. And we even have a separate track for JavaScript: https://symfonycasts.com/tr... - but fairly speaking we're covering intermediate topics there, it would be better to learn some basics for you somewhere. And there should be plenty of tutorials about JS over the internet.
But JavaScript is not required for following this course, and further Symfony courses as well in this track. You can completely skip this JS code. I mean, just copy/paste it from our code and you will still have this functionality in your learning project, even if it won't have too much sense for you.
I hope this helps! And of course, if you have have any specific questions about topics you didn't get during following the course - feel free to ask questions below the video.
Hmm. It's possible you missed something. So, when jQuery makes an AJAX request, how does it know whether the data that's being returned from the server is JSON (and so, it should JSON.parse() it for you) or HTML or something else? The answer is: by reading the Content-Type header that's returned on the AJAX response.
Basically, if our AJAX endpoint correctly returns the header Content-Type: application/json, then jQuery will know that it should JSON.parse the data for you (so you don't have to). If you're missing this, it won't do this. So, what does your controller look like? Are you using JsonResponse or return $this->json()? Or are you using something else? Those two things I listed should both set the Content-Type header for you.
Or... I could be completely wrong and it could be something else ;). Let me know!
How can I send more data to the API endpoint (like a longer text)? I want to send data from a page in my symfony project without reloading the whole page so I thought I could send it using a ajex query like this:
Hmmm. So, you shouldn't have any problems POSTing any reasonable size of data. Indeed, what you're reporting looks odd - the AJAX request looks correct, it looks like you're sending data up correctly - so I'm also confused :). Here's what I would do: before making the AJAX request, open up your network tools in your browser. Then, after making the request, find the request you just made (under the XHR filter, if you want to filter). Then click on the "Headers" tab (it's probably already the active tab) and scroll down until you see the request information. *All* the way at the bottom, you should see what your submitted data actually looks like. Here's a screenshot of me doing this for an AJAX registration form, if it helps: https://imgur.com/a/0CYr4eK
Let me know what you find out! You're on the right path... so it's gotta be something minor.
Thanks for notifying us Maxim M.! I already fixed it but if you want to go further we have a handy button for proposing an edition to the script at the top right corner of the video-script area
Hi, thanks for great tutorial, but I've got a problem. When I use >>> return new JsonResponse(['hearts' => rand(5, 100)]) - it doesn't work, and I get error 500. When I try to use >>> return new Response(json_encode(['hearts' => rand(5, 100)])) - I get a string instead of an object, so I need to parse it to JSON in JS script. I don't have any idea what couses the problem. I need some help :)
Take a look at the error closely, if you're in the dev mode - you'll see the exact error message on error 500. If you're not in the dev mode - take a look at logs for the environment you're currently on to find more context for this error 500. It's difficult to say when I'm not seeing the error :) But I suppose you just forget to use the proper namespace for JsonResponse, it should be:
use Symfony\Component\HttpFoundation\JsonResponse;
Just realized that the line 3-5 of the javascript file is not shown anywhere on the script. I had to look back the video to understand why my Ajax was complaining about $link not being defined error.
When you create json routes for ajax calls in one of your projects, do you store them in the same controller similiar as here in the ArticleController, where the html representation lives, or do you create a new one, specifically for Ajax calls?
I consider to create an OAuth system for one of my projects. Therefore the folder structure is kind of an issue for me, yet. For api routes in conjunction with Oauth, I would create routes with prefix /api in a newly created folder called Api , e.g. with subfolders ProductController, ... . This location (/src/Controller/Api/ProductController) is only assigned to api requests where client credentials are needed.
And the json routes used for ajax calls for my homepage and the html representation are alltogether stored in a seperate /src/Controller/ProductController directory? Is this how it should be done, the right way?
Btw, do you guys know any good resource to learn OAuth, to secure my api requests, where users have to submit client credentials? I already watched your full Rest series and the OAuth tutorial, but I want to build a system like that. In the OAuth tutorial we were on the other side, trying to get access to such a system. Is it possible to create my own OAuth system similiar to your Rest series or shall I simply rely on the FOSOAuthServerBundle?
Even if it`s a bit off topic, honestly this is my favorite site to learn programming, and I hope you can help me :)
On KnpU we don't have too much API, so our routes for AJAX calls live in the same controller, so it's mostly like we show in this screencast, but probably it's happened historically. But you can totally split them, especially if you a have public API which is used by other clients, so it's nice to have something like "/api/" prefix in the URL for all your API calls. And this way you can organize your files as "src/Controller/ProductController.php" and "src/Controller/API/ProductController.php" - I like this way. But anyway, it's up, if you like it and if you're comfortable with it - go for it. Probably on the first stage you'll have just a few controllers, but I'd recommend you to think in advance a bit and imagine how comfortable you will be with chosen way if you have much more controllers. If it's still ok with you - then I think you chose the correct way.
Well, I'm a bit biased, but probably I don't really know a good resource to learn about OAuth, but I think if you google you can find some good information, probably not a tutorial but some blog posts on this topic.
If FOSOAuthServerBundle is OK for you - I think you can go with it, anyway it provides some kind of ready-to-use solution to you. Otherwise, I think you can look at low-level https://github.com/thephple... package.
Thank you for the tutorial, i really appreciate your hard work, What's the new feature introduced here?. I mean creating an endpoint and using fosJsRoutingBundle are already introduced in the old version of Symfony!!
Are you talking about exact this video? Probably nothing much if you have seen our old tutorials. Well, the same except now we're doing these changes on Symfony 4 and in a different way of course. And if you noticed it - probably nothing much were changed in Symfony 4 in *this* process, right? And I think it's good, like it's still solid. Anyway, we need to make these changes to move forward in this tutorial, but I agree, these changes you can do on Symfony 3.x, and probably even on Symfony 2.x as well, so this process remains the same, good catch!
Thank you for replying, I thought maybe I missed something, that's why I asked about this video. Again, thank you, I really appreciate, and I really enjoyed learning the trick with symfony 4.
Your tutorials are really helpful.In real project we wont make like button with random numbers because we need real data. :) If you make like real project it will be perfect for me.
Kinda difficult to implement this feature right now. This course is introduction into Symfony 4, and we know nothing about Doctrine and relations in it. Well, probably you do, but other users may do not know it well, or do not know at all. So, that's just another topic which isn't covered with this tutorial. But I think we'll implement this feature in the future tutorials when talk about more complex things. Thanks for understanding!
Yep, Victor is right! In fact, this API endpoint will be updated to handle *real* data in chapter 13 of the Doctrine tutorial :) https://knpuniversity.com/s...
1) It's no longer needed. Well, even in Symfony 3, it was not needed with annotations, but it was needed if you used YAML routing (there was a workaround, but it was ugly). But in Symfony 4, even in YAML, it's not needed.
2) Because of that, the Symfony core team decided to stop recommending it and just allow people to have short names. You already can easily know which methods in your controller are "controller actions": all public functions (if you have a public function that you consider to *not* be an action, then it shouldn't live in the controller!).
In this case it is returning a random between 5 and 100 because there is no database yet, so you can't actually know how many hearts have that given slug, in other words, Ryan just faked it. In the next chapters you will see how it gets implemented
42 Comments
A minor note, but my IDE suggested using `random_int(5, 100)` instead of `rand(5, 100)`. It's more "cryptographically secure" for whatever that's worth...or use `mt_rand()`. I blindly do whatever my IDE tells me just to get rid of the damn squiggles.
Hey Alex,
Good to know! Though keep in mind that random_int is available since PHP 7.0 only. What about mt_rand(), from the PHP docs I see a note that as of PHP 7.1.0, rand() uses the same random number generator as mt_rand(). Btw, what IDE do you use? Because I've not noticed this suggestion in PhpStorm, but probably I just have different version.
Anyway, thanks for this tip!
Cheers!
Yeah `mt_rand()` seems to be a closer replacement. I use PhpStorm and the suggestion comes from the Php Inspections (EA Extended) plugin. https://github.com/kalessil...
Hey Alex,
Aha, so it's not out of the box - good to know! I don't have this extension installed. Thanks for sharing it with others.
Cheers!
I am novice to programming, just want to mention that nothing in this chapter made sense. Should I learn Javascrip and Json first before Symfony? Thank you
Hey Travel,
We're sorry that this chapter does not make much sense for you. Well, yes, to know it better you need to deal with JavaScript. And we even have a separate track for JavaScript: https://symfonycasts.com/tr... - but fairly speaking we're covering intermediate topics there, it would be better to learn some basics for you somewhere. And there should be plenty of tutorials about JS over the internet.
But JavaScript is not required for following this course, and further Symfony courses as well in this track. You can completely skip this JS code. I mean, just copy/paste it from our code and you will still have this functionality in your learning project, even if it won't have too much sense for you.
I hope this helps! And of course, if you have have any specific questions about topics you didn't get during following the course - feel free to ask questions below the video.
Cheers!
Is there a guide to upgrading? Its impossible to debug these days with depredations all over the shop triggering the debugger.
Hey Maxii123,
Yes, we do have a course about upgrading Symfony 4 project up to Symfony 5, see it here:
https://symfonycasts.com/sc...
Cheers!
Did I miss something in the javascript code? I had to JSON.parse the data ...
`
`
Hey Jose Bastos!
Hmm. It's possible you missed something. So, when jQuery makes an AJAX request, how does it know whether the data that's being returned from the server is JSON (and so, it should JSON.parse() it for you) or HTML or something else? The answer is: by reading the Content-Type header that's returned on the AJAX response.
Basically, if our AJAX endpoint correctly returns the header
Content-Type: application/json, then jQuery will know that it should JSON.parse the data for you (so you don't have to). If you're missing this, it won't do this. So, what does your controller look like? Are you using JsonResponse orreturn $this->json()? Or are you using something else? Those two things I listed should both set the Content-Type header for you.Or... I could be completely wrong and it could be something else ;). Let me know!
Cheers!
True, I have in the controller
<br />$data['hearts'] = rand(5, 100);<br />return new Response(json_encode($data));<br />I did not know JQuery was so "intelligent"! Your answer was most enlightening.
Thanks
How can I send more data to the API endpoint (like a longer text)? I want to send data from a page in my symfony project without reloading the whole page so I thought I could send it using a ajex query like this:
`
$.ajax({
method: 'POST',
data:{ item_id: 1, item_text: 'dasdsad dasdas dsadas 3§!"$%' },
url: '{{ path('app_bookingitem_add', {id: bookingGroup.id}) }}',
success: function (result) {
}
});
``
Result in console:
<blockquote>[Array(0)]0: []length: 0proto: Array(0)length: 1proto: Array(0)</blockquote>
So it seems like, that it doesn't work (the json return is just for checking).
Hey Markus B.!
Hmmm. So, you shouldn't have any problems POSTing any reasonable size of data. Indeed, what you're reporting looks odd - the AJAX request looks correct, it looks like you're sending data up correctly - so I'm also confused :). Here's what I would do: before making the AJAX request, open up your network tools in your browser. Then, after making the request, find the request you just made (under the XHR filter, if you want to filter). Then click on the "Headers" tab (it's probably already the active tab) and scroll down until you see the request information. *All* the way at the bottom, you should see what your submitted data actually looks like. Here's a screenshot of me doing this for an AJAX registration form, if it helps: https://imgur.com/a/0CYr4eK
Let me know what you find out! You're on the right path... so it's gotta be something minor.
Cheers!
Typo:
That means that we can move the article count HTML line into this, and set it to data.heart
Must be:
That means that we can move the article count HTML line into this, and set it to data.hearts
Thanks for notifying us Maxim M.! I already fixed it but if you want to go further we have a handy button for proposing an edition to the script at the top right corner of the video-script area
Cheers!
Thank you.
The subtitles in the video are still data.heart. Probably the cache.
Ohh, the subtitles, that's another beast, I forgot to update it as well, thanks for the reminder! :D
Hi, thanks for great tutorial, but I've got a problem. When I use >>> return new JsonResponse(['hearts' => rand(5, 100)]) - it doesn't work, and I get error 500. When I try to use >>> return new Response(json_encode(['hearts' => rand(5, 100)])) - I get a string instead of an object, so I need to parse it to JSON in JS script. I don't have any idea what couses the problem. I need some help :)
Hey Mateusz,
Take a look at the error closely, if you're in the dev mode - you'll see the exact error message on error 500. If you're not in the dev mode - take a look at logs for the environment you're currently on to find more context for this error 500. It's difficult to say when I'm not seeing the error :) But I suppose you just forget to use the proper namespace for JsonResponse, it should be:
Cheers!
Just realized that the line 3-5 of the javascript file is not shown anywhere on the script.
I had to look back the video to understand why my Ajax was complaining about $link not being defined error.
Hey Dong,
It makes sense, because it was shown on the previous page: https://knpuniversity.com/s... - probably you missed it.
Cheers!
I thing there is an error with the name of the route. You miss the "s"
@Route("/news/{slug}")
You're right Stephane! I've already fixed that - https://github.com/knpunive... - thanks for letting me know!
Cheers!
Just a few question which I always wanted to ask.
When you create json routes for ajax calls in one of your projects, do you store them in the same controller similiar as here in the ArticleController, where the html representation lives, or do you create a new one, specifically for Ajax calls?
I consider to create an OAuth system for one of my projects. Therefore the folder structure is kind of an issue for me, yet.
For api routes in conjunction with Oauth, I would create routes with prefix /api in a newly created folder called Api , e.g. with subfolders ProductController, ... . This location (/src/Controller/Api/ProductController) is only assigned to api requests where client credentials are needed.
And the json routes used for ajax calls for my homepage and the html representation are alltogether stored in a seperate /src/Controller/ProductController directory? Is this how it should be done, the right way?
Btw, do you guys know any good resource to learn OAuth, to secure my api requests, where users have to submit client credentials? I already watched your full Rest series and the OAuth tutorial, but I want to build a system like that. In the OAuth tutorial we were on the other side, trying to get access to such a system. Is it possible to create my own OAuth system similiar to your Rest series or shall I simply rely on the FOSOAuthServerBundle?
Even if it`s a bit off topic, honestly this is my favorite site to learn programming, and I hope you can help me :)
Cheers
Hey Chris,
On KnpU we don't have too much API, so our routes for AJAX calls live in the same controller, so it's mostly like we show in this screencast, but probably it's happened historically. But you can totally split them, especially if you a have public API which is used by other clients, so it's nice to have something like "/api/" prefix in the URL for all your API calls. And this way you can organize your files as "src/Controller/ProductController.php" and "src/Controller/API/ProductController.php" - I like this way. But anyway, it's up, if you like it and if you're comfortable with it - go for it. Probably on the first stage you'll have just a few controllers, but I'd recommend you to think in advance a bit and imagine how comfortable you will be with chosen way if you have much more controllers. If it's still ok with you - then I think you chose the correct way.
Well, I'm a bit biased, but probably I don't really know a good resource to learn about OAuth, but I think if you google you can find some good information, probably not a tutorial but some blog posts on this topic.
If FOSOAuthServerBundle is OK for you - I think you can go with it, anyway it provides some kind of ready-to-use solution to you. Otherwise, I think you can look at low-level https://github.com/thephple... package.
Cheers!
waiting ... chilling :D
Hey cybernet2u
This chapter is released! I thought you would like to know it :)
Cheers!
now i'm waiting for Advanced APi tutorial :)
Thank you for the tutorial, i really appreciate your hard work,
What's the new feature introduced here?. I mean creating an endpoint and using fosJsRoutingBundle are already introduced in the old version of Symfony!!
Hey Ahmed,
Are you talking about exact this video? Probably nothing much if you have seen our old tutorials. Well, the same except now we're doing these changes on Symfony 4 and in a different way of course. And if you noticed it - probably nothing much were changed in Symfony 4 in *this* process, right? And I think it's good, like it's still solid. Anyway, we need to make these changes to move forward in this tutorial, but I agree, these changes you can do on Symfony 3.x, and probably even on Symfony 2.x as well, so this process remains the same, good catch!
Cheers!
Thank you for replying, I thought maybe I missed something, that's why I asked about this video. Again, thank you, I really appreciate, and I really enjoyed learning the trick with symfony 4.
Cheers, have a good day :)
Hey Ahmed,
Looks like you have learnt a lot with us so far, well done! ;)
Cheers, and have a good day too!
Your tutorials are really helpful.In real project we wont make like button with random numbers because we need real data. :) If you make like real project it will be perfect for me.
Hey Joseph,
Kinda difficult to implement this feature right now. This course is introduction into Symfony 4, and we know nothing about Doctrine and relations in it. Well, probably you do, but other users may do not know it well, or do not know at all. So, that's just another topic which isn't covered with this tutorial. But I think we'll implement this feature in the future tutorials when talk about more complex things. Thanks for understanding!
Cheers!
Yep, Victor is right! In fact, this API endpoint will be updated to handle *real* data in chapter 13 of the Doctrine tutorial :) https://knpuniversity.com/s...
Cheers!
Do we do not need to add a controller's method 'action' keyword end of method's name? Or no longer recommended?
Yo Mert Simsek!
Great question! Um.... both! ;)
1) It's no longer needed. Well, even in Symfony 3, it was not needed with annotations, but it was needed if you used YAML routing (there was a workaround, but it was ugly). But in Symfony 4, even in YAML, it's not needed.
2) Because of that, the Symfony core team decided to stop recommending it and just allow people to have short names. You already can easily know which methods in your controller are "controller actions": all public functions (if you have a public function that you consider to *not* be an action, then it shouldn't live in the controller!).
I hope that clarifies!
Cheers!
It sounds good. I see, thank you for replying :)
sorry I'm new to Symfony, there is about the this part I confused;
return new JsonResponse(['hearts' => rand(5, 100)]);
go to Symfony doc:
https://api.symfony.com/4.0...
JsonResponse create(mixed $data = null, int $status = 200, array $headers = array())
to me for understanding, JsonResponse is a default Symfony class which could return an HTTP response in JSON format
so in this tutorial, use hearts parametre as data I understand, but for this part
=> rand(5, 100)]
rand is get random number between 5-100
how could it be work to get increase count heart ? It should be increase $count ++ as for my understanding ?
thank you so much your awesome tutorial anyway
Hey Tess Hsu
In this case it is returning a random between 5 and 100 because there is no database yet, so you can't actually know how many hearts have that given slug, in other words, Ryan just faked it.
In the next chapters you will see how it gets implemented
Cheers!
great, yes that what i though, sorry for this stupid question
No worries Tess, I like to help ;)
"Houston: no signs of life"
Start the conversation!