PHP Tutorial (& MySQL) #27 - Rendering Data to the Browser

okay then so far we have successfully gone to the database and we've selected the data that we need now I quickly wanted to show you one more thing when we grab this data we can actually order it in a specific way if we wanted to and the way we do that is by using a keyword or rather two keywords together order by at the end and we can order by a specific column or property if you like for example we could order by the title alphabetically or the ID or the ingredients or we could order but I created that remember that was that time stamp that's automatically created when we add a new document so that's what I'm going to order by so that they display in some kind of chronological order so I'm gonna order by created underscore at okay so now we have those ordered by this property right here that's fine okay so now we have all these different pizzas or rather two pizzas at the minute what would be nice is if we could output them to the template now to do that we're going to use this array right here remember that's now an array and a rate of arrays basically where each pizza is an associative array so we can cycle through this pizzas thing right here and output the data so underneath the header down here that's where we're going to do this first of all I'm going to create an H for this is going to have a class of sensor and it's also if I could have a class of gray - text and we'll just say pizza okay so that's the title of the page now under that I'm going to do another div this is going to have a class of container remember this is a materialized class and it centralizes everything within a central column now what I'm going to do is use the materialized grid system here now again I'm not going to go into materialized too much I don't want to take away the focus from PHP air because that's what we're learning but if you want to learn about materialized grid the link to the materialized playlist is right down below I explained it extensively in that course but anyway all we need to do is first of all declare a row for the grid and that's with a class of row so oops let's do that first of all and inside the road this is where we want to cycle through the different pizzas and output some content for each pizza okay so let's do our PHP tags first of all we're going to do a for each loop and we want to cycle through the pizzas array because that's what we called it right here and as pizza so we're referring to each individual pizza as we iterate through the array as a single pizza all right there so let's open up that code block we need to end the code block down here somewhere so let's do some more PHP tags and close that off as well so inside here this is where we're going to output the actual template for each individual pizza now we'll do a div first of all with a class of call and we're going to use the grid system here so every time we give something some kind of space on the grid system in materialise we use the class of call then we say how wide it's going to be how many columns of width on the screen we want it to take up for each individual screen size so for example I'm going to say for small screens six columns in width now there's twelve columns in total in the materialized grid so this basically means on small screens I want you to take up half of the width six of those twelve columns now on medium screens I want you to take up three columns of width now that's going to be a quarter because for lots of three may 12 right okay cool so basically each pizza that we output on medium sized screens is going to take up a quarter of the width that's what this is saying now inside this bit of space that we've given for each pizza I want to do a div and that's going to have a class of card again this is materialized class it just makes it look a little nicer and this card is also going to have a Zed - depth of 0 just to take away the box shut up and inside we need another div with a class of card - content this time again materialized class just to display correctly on the screen and also I'm going to use a class of center to centralize any text ok so now we want to output the title of the pizza so we'll do that inside an h6 and we need our PHP tags to output this variable so echo and then remember we're echoing something out here that a user has initially entered and I said rule one in getting data of a user is never trust to use it so what we need to do is use that method on that function where other HTML special chars to escape any malicious code when we're out putting it through the browser so that's what we're gonna do here HTML special chars and then we're going to output the individual pizza but not all of it it's an array remember with different properties and we want the title right here so without putting the title right there inside the 86 okay now we want to output the ingredients so I'll do a div for these and again a PHP tag first of all we're going to echo HTML special chars and in brackets we want the pizza and this time the ingredients from that pizza so now we're out put in the title and the ingredients and remember we got both of these the title and the ingredients right so finally what I'd like to do at the bottom of this card is output some kind of button say more info and when we click on that it's going to take us to a dedicated page later on about that pizza who created it when it was created and we can delete it now if we want to et cetera sir let's make a final div underneath the card content because this div is gonna have a class equal to card - action and also write a line that's going to align the text inside it or the anchor tag inside it to the right so we want an anchor tag here this is ultimately going to be a link which takes us to an individual details page later now this is going to have a class a brand - text remember it gives it that gold color we created this class before towards the start of creating this project so let's do that first of all the href at the minute is not going to go anywhere we're going to tackle this later on but for now we'll just put a pound symbol in and then we'll say more info okay so there my friends I think that is pretty much it for the template of outputting the pizzas so it's gonna output this for each individual pizza that we returned from the database okay and we do that because we're using a for each right here sweet so let's save that and South acres and hope this works okay first of all I'm going to not echo this out at the top because we don't need to anymore so let's get rid of that and save it then let's go over here and refresh and now we can see these two things here so we have the ninja supreme and the ingredients right there the mario supreme and the ingredients right here so there we go my friends we've done it we've grabbed data from a database and to be honest let's let's face it this was pretty easy to do we've grabbed that data and we've stored it inside this variable we've cycled through that array and for each individual item for each array in that array we've output the data that we need and remember the important thing when a user has input that data let's always make sure there's no malicious code by using HTML special chars ok so there we go now one thing here these things I would like to output some kind of list now currently these are a string they're a comma separated string so when we're outputting a list ideally I'd like to somehow cycle through some kind of data so it would be nice to turn this string right here which is comma separated into an array and thereafter we can cycle through that array using a for each loop much like we've done for the pizzas down here and we can output an li tag or something like that for each individual ingredient does that make sense so that's what I'd like to do in the next video

Channel: The Net Ninja

Views: 59,733

Keywords: php, tutorial, php tutorial, php tutorial for beginners, mysql, mysql tutorial, mysql tutorial for beginners, sql, sql tutorial, php for beginners, learn php, php mysql, php and mysql, render data, render, php render, php templae, php dynamic template, php data in template, embed php, embeded php template, php html, php html template, template

Id: 3T8bp9DlypU

Length: 8min 17sec (497 seconds)

Published: Tue Feb 26 2019