Viewers: in countries Watching now:
Often, designers need to convey simple data without the overhead of a relational database such as MySQL. This course introduces web technologies that make it easy for a designer or developer to store, retrieve, and display data online.
In this lesson, I'm going to demonstrate one technique for storing values entered through a form into JSON format. We'll be using PHP, but most server side languages equivalent syntax. As you'll see, it's surprisingly straightforward. So I'll go to my code editor Where I've got index.php from the Chapter Four 04, 03 folder up and running. Now there's a form on this page starting around line 40 I believe. Yep, there it is. That asks for name, email, and date of birth, and other data.
The code we'll be using is not form specific however, and can be used with most if not all forms. So we're going to put our PHP block however at top of the file. I'll make a little room and start off with our PHP code block. The form on this page is setup using the POST method and an empty action so when it's submitted the information will be posted to the same page. To make sure the code is run only when that happens, we'll add an if statement that checks to see if submit is set in the posted data.
If it is, it means that the Submit button was clicked. So after the keyword POST 'submit'. And then after the whole if statement, a curly brace pair. And now we are at the heart of the function, and it's just four lines of code. Two of which are establishing variables. So, let's first create a variable for our adjacent data file name path.
And I'm going to call this $file and set that equal to, in quotes, data.JSON, semicolon at the end. Next, we'll create a variable to hold the posted JSON data. The JSON encode function that we're going to be using has been around for a bit. But the JSON pretty print functionality that's an attribute, was only added in PHP 5.4, so you'll need a fairly recent version of PHP to take advantage of this.
Without it, the code will be one long string, which is workable, but just not as easy to read. So, the variable Jason underscore string and we'll set that equal to the function JSON_encode. Open and closed parenthesis, two arguments. The first is what are we going to encode. It's the POST array. Follow that with a comma, and then all uppercase.
You may want to hit your caps lock key for this one. JSON_PRETTY_PRINT. Make sure you turn that Caps Lock key off if you haven't yet. And then close it all of with a semicolon. Now, we're ready to write out our data. Because we're just adding record after record, we can use PHP's file put content function with it's file append argument. So the function is file, underscore, put, underscore, content.
Then an open and close parentheses, which file are we going to put it into. And we'll use our variable $file comma, what are we going to put in it, our other variable. $json_string, and then the other parameter, FILE_APPEND. Alright, close that off with a semicolon. Lastly, we'll redirect the user to a thank you page. And to do that we'll use the header function, header parenthesis, single quotes, location, colon, thanks.php, and the semicolon rounds it all out.
Thanks to JSON's wide support within the PHP community and its advanced related functions, that's all the code we need. So let's save the page and try it out on our local web server. I'll refresh the page to make sure we got everything we need, and then let's enter in some data. This time I think I'll honor one of my other cats who is named Tao and email@example.com, fictitious email address. Let's give Tao Their own personal phone number of course, and lets see if I can remember Tao birth date.
I do believe it was April 2nd and it was a while ago. Well not quite that long ago. All right Tao was a master of the arts as you can imagine. I'll hit submit. All right, we made it to our thank you page without triggering an error. That bodes well. Let's head over and take a look at our data file. Now I already have it open here, so when I switch to it, I get a file change message. I click yes. And there's my Json data.
I think it looks pretty good. One might even say, pretty. Alright let's run one more test, so I'll go back to the browser hit my back key and then refresh to clear that out. And after giving all my pets a little shout out maybe it's time to bring the daughter into it. So we'll just do an initial there. Believe it or not, she has her own cell phone.
And, we'll hit Submit. Back to check the data. File changed. Bingo! We've got another record, nicely formatted. Looks like our work here is done. Excellent.
There are currently no FAQs about Working with Data on the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.