SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
Ok, let’s build this form! Let’s leave PHP alone for a second and put together some good ol’ HTML to create a form with name, breed and weight text fields. And hey, why not a bio textarea field too so we can get to know these pets!
<h1>Add your Pet</h1>
<div class="form-group">
<label for="pet-name" class="control-label">Pet Name</label>
<input type="text" name="name" id="pet-name" class="form-control" />
</div>
<div class="form-group">
<label for="pet-breed" class="control-label">Breed</label>
<input type="text" name="breed" id="pet-breed" class="form-control" />
</div>
<div class="form-group">
<label for="pet-weight" class="control-label">Weight</label>
<input type="number" name="weight" id="pet-weight" class="form-control" />
</div>
<div class="form-group">
<label for="pet-bio" class="control-label">Pet Bio</label>
<textarea name="bio" id="pet-bio" class="form-control"></textarea>
</div>
<!-- ... -->
I’m adding some divs and classes here that use the Twitter Bootstrap CSS that’s included in this project. So, nothing to worry about - this just makes our site a little prettier! And hey, that’s important too!
Note
I used <input type="number" ... /> for the weight field because newer browsers will render this with some extra nice-ness. Old browsers just render a normal text fields. This is an HTML5 field.
In PHP’s eyes, the important thing is the name attribute on each field. It can be anything, but this will be how we get each field’s value in PHP.
We also need to wrap all of the fields in a form tag. Set its action attribute to point back to this same page and definitely don’t forget the method="POST" part. I’ll show you why that’s so important in a second:
<h1>Add your Pet</h1>
<form action="/pets_new.php" method="POST">
<!-- all the form guts from before ... -->
</form>
<!-- ... -->
Finally, you’re going to need a cool-looking submit button in the form!
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-heart"></span> Add
</button>
Refresh. Wow! Now that’s a sweet form.
Ok, let’s fill out a few fields and submit.
Hmm, nothing happens. The URL is still the same, and now the form is blank again. Actually, something amazing just happened. Go back to the network tab in our debug tools. When we pressed “Add”, our browser sent an HTTP request to the server. And this time, it had even more information on it. It had all the values from our form!
It’s different in another way too. The “Request Method” is POST - and that’s because of the method="POST" part of our form tag. So there are 2 types of HTTP requests our browser can send. GET request are used on almost every page and POST requests are used on most form submits. The difference doesn’t really matter yet, but GET requests are for reading data, like when you click on a link and read the next page. POST requests are for sending data, like a form submit.
Tip
There are actually other HTTP methods like PUT, HEAD and DELETE. These are mostly useful only if you’re building or using an API. Don’t worry about that at all right now.
So when we submit, our browser sends a POST request that has all the values on it. If we could just read that, we’d be as dangerous as a loose puppy at a hot dog stand!
Hey @emmatr,
Thank you for reporting it! Hm, if we're talking about this one: https://knpuniversity.com/s... - it works fine for me. I just copy the correct answer, put it into the text field, press check and see successful message. Could you try again now? Maybe that was a temporary issue and this time your challenge image will be re-created from scratch. Please, let us know if you still have this problem.
Cheers!
There seems to be a problem with the challenge section of this chapter. The section that tells you what needs to be done is blank for the 1 spot. However, the 2 spot has content.
Hi Ryan!
It's Ryan here :). THANK you for reporting this - you're right! We we're missing some quotes around a key internally and that caused the more important step 1 to be blank! I've just fixed this.
Thanks!
Hi there,
I can't seem to answer any challenge that needs coding(due to the coding block being blank and really small). Also can't get to the right answer to attempt to just paste the answer in the small block and skip it/ get it done.
Ah ha! It seems we have a bug on our coding challenges, we're looking at that now and will get back to you the second it's fixed.
Alright, the bug is fixed and you should now be able to access the coding challenges. Thanks for letting us know!
Hi there,
After several times trying to answer the second challenge (for Chapter 2), it seems impossible to check Ok, even copying the answer!!
Maybe you experienced the same problem.
Regards