 Hello, and welcome to this tutorial. So every so often, I do some video work for my church. And next week, I'm doing a video with a girl who is deaf. She has a little pad for me to write stuff down on, so I can talk to her, period. But not only is my handwriting horrible, but I'm a horrible speller as well, period. So I figured I'd write a little app that would help the situation, period. It's pretty simple and works pretty well, period. Using Google to translate my voice and send it to the server, period. And then any device pointed at the URL will get my message once it's updated. So now I will show you how I did this. Okay, let's get started. We'll make a project folder here. I'm logged into my website through SSH here. Make directory call it sp2txt for speak to text, I guess. Of course, you can call that folder whatever you want on your system. And we'll move into that folder. And then I will start first before we start actually writing any code. We're gonna be using some jQuery mobile just to shorten up our code. You can obviously do this, you can do anything with jQuery mobile. You can do anything with JavaScript that you can with jQuery mobile. It's just sometimes, most times jQuery, or not jQuery mobile, but just jQuery in this case. We'll shorten up your code, but in reality, you're passing it all this code. So you're actually upping the size of your code. Anyway, I'm going to go to the jQuery website. I am going to copy the address of the version of jQuery that I want. And then I'll just W get and paste in that. Okay, it's downloaded. So you can see now in this directory we have our jQuery JavaScript. Now, before we actually start writing our index PHP or HTML file, I'm going to create two PHP files. One which is going to be the file that retrieves the text that you're sending and saves it to a text file. And another one that will read that information from the text file. So the first one we'll use, I'm gonna use Vim as my text editor, but as always use whatever text editor you prefer. Text based ones make it a little bit easier when you're SSH'd into a server like this. I'm going to Vim and we'll call it send.php. And of course we'll give it our PHP tags here so that we know that this is PHP code between these. We'll create a variable called msg for message. And we're gonna use just a simple get rather than post in this case. But it doesn't really matter if you prefer post, you can do that. And we're going to get the variable that's passed to this file using a get form submit that is labeled msg. Next we're going to create or we're gonna choose what file name we want. So I'm gonna say my file, this is a variable. It's gonna contain this text msg.txt. Putting the name of your file into a variable makes it easier later on. If you want to make changes, we're only gonna be using this variable once in this script. But if we were to access that file more than once in the script, and we decide later on to change the name of the file, it's easier to change the variable once than all instances of it. So next we're gonna create a little object here. We're gonna say it's a file open object. What file are we going to open? Well, the one we just created using the variable myfile. And we're going to override this file every time, so we don't want to append to it. We're going to write to it, so w. So basically every time this script runs, it will erase the file if it exists. If not, it will create it, and then it will add in the text or replace whatever text is there with the text that we are sending. We're also gonna do an or die here. This is if for some reason the script fails. Let's say the script for some reason doesn't have right access to the folder. It's going to display a message, cannot open file. Next we're going to do fwrite to write to the file. So we're going to, no quotations there, get our object, our FH object, our file object, and we are going to place into that object the MSG, the message that is sent to us from the code we're going to write in a minute. So then we're going to say fclose or file close. What file are we going to close the FH object? And that's it, that will write to a text file called MSG when it's called. So let's actually go to my website here. And if I refresh, we'll go into here. Here is the folder we're looking at inside the shell. You can see the file we just created and here's our jQuery file. So we click this and we don't get anything because our file doesn't give any output unless it dies. Because really in the final code, you're never going to see this file. It's just going to be called from your script. But if we were to add a dollar sign up here in the URL, MSG is a variable. And we can say something like this is a test and hit enter. Still no output here, but if we go back to our shell and we list out, we now have another file here called MSG and if we cat out that file, we get this is a test. We didn't put any new line character because it doesn't really matter. Let's clear the screen. So now we have three files. We've got our PHP file that saves the information, the file where it's saved, and then the jQuery which we're going to use in our main index HTML. So now we're going to write a little PHP script that reads the file we just created. So once again, I'm going to use Vim. We'll call this read.php and very similar to before. Of course, we're going to have to start off with our PHP tags. We're going to create a my file and once again this variable here can be called pretty much whatever you want. I'm just trying to be consistent from the last script we just wrote. Again, we're going to create an object which is going to be a file open object. And again, we're going to say my file, but this time instead of w for right, we're going to say r for read because we're going to be reading the file. Next, we're going to create a variable. We'll say the data, but of course you can call that whatever you'd like. And we'll say f read and we're going to tell it what file we want to read, which again is our dollar sign fh. And here's a case unlike our last file where we only used this variable once. We're going to be using it twice because here we're going to be reading this file. And we're going to say file size and then inside that give that variable again. So here if we do change the name of the file we're saving it to, we only have to change it once up here and then the variables will follow accordingly. This is not the only way to read a file. This is just the way I decided to do it here. And basically the information we're giving here is how much of the file we want to read. And we're just saying the file size, working the size of the file. And so it will read the whole file. And then we're going to say f close to close the file. So we open the file to read it. We read the information, save it to a variable then we close the file. Now we want to display that information. So we're going to say echo dollar sign the data, which is the variable we created up here, which holds the information of our text file. So now if we go back to our web browser here and we do read dot php. And we hit enter. It gives us an error. I must have typed something wrong on line three. Let's go back here. This is line three. Not seeing what I typed wrong. Oh, it's actually the problems on line two. Forgot my semicolon there. So now we refresh this and you see it says this is a test because it is reading our message dot text right there. So again, if we go back to the last page and we change this message, we can say test or tester. Then we go back to our read php. It says test or tester because it's reading that file. Great. So we got our two back end scripts now. Now we just have to write our main HTML file, which will be our index HTML. So in here, we'll say vim index dot. In this case, I'm going to do a php because I am going to call the read within the script. Although if you just want to do HTML, you could do that and use JavaScript to call that. But I'm just going to use an include as you'll see. So here we are. We're going to start this off. Technically, you're supposed to start off HTML files with the doc type file. But I don't really know what that is off the top of my head because I never do it bad me. But we're going to say our head tags here. And we'll give it a body tag here and close that off. Then we're going to say script source equals. We'll close that. And real quick, I'm going to exit out, save that, and list. You can see we also got an error log in here now because of the one time I messed up on the php script. It keeps an error log if that's how your server is set up. Anyway, I'm going to highlight the name of the jQuery file. You could rename that to make it easier to remember. But I like to know what version I'm running easily. So now we're going to go back into here. And in the script source, we are just going to paste our jQuery file. Well, the name of it anyway. Next, we're going to say script here. And we'll close that off. And that's where we're going to put our own JavaScript here in a moment. Let's create our elements inside the body here first. So we're going to create a div tag. We're going to give it the ID of output. Close that div tag. And within this, we're going to give it a little bit of PHP code here. And this is why I used a PHP extension for my index file rather than HTML. But of course, you could do this with JavaScript if you preferred. And I'm going to include our read.php. So this will display whatever text is saved to our message text file the moments you open up this HTML file. So if I was actually to save that now and go to our web browser, and we should just be able to, with most web servers, not even put it indexed. It automatically looks for index.php, if that's how your server is set up. So right now, you're looking at this. You're going, whoa, it looks just like the read.php, because that's all we have so far. But if you look at the code, you can see this is the code we are writing. And the tester tester, which is the output of the read.php, is within our div tag there. So now we're going to add in a text box for us to put our message into our new message. So we're going to say text area. We'll give it an ID of msgbx, and we'll give it a size. We'll say rows equal 4, and columns equal, we'll say, 50. And then we will close our text area and give a new line here. Didn't have to give a new line after the div tag, because div tags automatically put new lines. And then we're also going to create a button element here. We'll create it, open, close it. And we're going to give that an ID of bt for button send. And we'll give it the title of send. We'll click, let's save that, refresh our page here, and that's what our page looks like now. So once again, it automatically displays the last message saved. Now we're going to be using this on a mobile device. So we're going to want, one, our button here to be larger. And also, we want this text to be bigger, because we want to make it easier to read. And two, the person also might have vision problems, which the person I plan on using the script with not only is hard of hearing, but she has not the greatest eyesight either. So we're going to add a little CSS to this real quick and increase the size of our text. So we're going to say, style, close our style tag here. And then we're going to say, we're going to give the font size. I think when I tested this out, I did 75. So we'll do 75 pixels. So we're going to say, for our output ID, which is our main div tag where our message is going to be displayed, and also our item with the ID of BT send, we are going to give it a font size of 75 pixels, not forgetting our semicolon there. So we'll save that, go back to our web browser, refresh. And you can see, well, you can see that the letter's bigger. You know what? I accidentally, that's what I did earlier. I hit a wrong key and deleted this. That's why there's no text there now. We'll say send F5. So our button's bigger, making it easier to press. And our text is bigger, obviously, on a tablet or phone or even on your browser, on your computer, you can zoom in. But it's good to start off with the larger text since that's what we want. Great, so we've got everything output here. We can type in here, but our button doesn't do anything yet. So now we're going to start writing our JavaScript now that we have our HTML and PHP stuff done. And our CSS is all done. So really the only thing left is the functionality with the JavaScript. So in here, I am going to say dollar sign parentheses inside the parentheses document.ready function. We'll close that off. And we're going to say, so this is saying, when the document is done loading, then start running our script. So it makes sure everything is loaded before it starts running a script. Now, first thing we're going to do is we want it to constantly be checking for new messages. So we're going to set an interval. So we're going to say, setInterval function. Let's see. Sorry, my microphone is in front of my face. So sometimes I can't see my keyboard and I got to look around my microphone. So here we're going to say, setIntervals. And this is how often it checks for a new message. So it's not going to instantly receive the message. But every few seconds, I think one second would be overkill. It's going to be checking our server too much. Not that it's going to really hurt anything to have a whole lot of people using this application. It really wouldn't hurt. And I think five seconds is a little too long. So I'm going to say 3,000, which is three seconds. And what are we going to do every three seconds? Well, we're going to use jQuery to get. And so it's going to use the getSubmit here. We're going to say read.php, which is our PHP file. And then we're going to say function. And we're going to retrieve whatever output the read.php gives us. We're going to put it in a variable called msg for message. So now we'll close that off. And so we're retrieving the message, putting in a variable here. But then what do we want to do with that? Well, we're going to say dollar sign, parentheses. And then we're going to say percent, I'm sorry, not percent, pound output, which is saying use the ID of output. And that's what we're going to be replacing the dot HTML of. And what are we going to replace it with? We're going to replace it with the variable message. So now it will, every three seconds, check for a new message and display that new message once it retrieves it into our div tag, replacing what is already there. Also, don't give me a hard time. I'm just realizing now that I'm being inconsistent, sometimes using single quotes and sometimes using double quotes. And there are good times and bad times to use both. And lots of times it doesn't matter. And I have a bad habit of going back and forth. So really, I should be consistent and be using single quotes here if that's what I used in the rest of the script. But let's save that. Let's go to our browser here. Now our send button still doesn't work. But we could open up a new tab here. And we can go here and we can say, send a new message. And we'll change it to, this is a test because right now it's tester, tester. We'll hit Enter. And if we look back here, you can see, oh, I got to refresh this page. Well, let's do that again. Let's change the message to new test. We'll hit Enter. And we come back here. And there you go. Within three seconds. So it's not going to take three seconds every time because it's constantly checking every three seconds. So if it's at two seconds and I send a new message, it's only going to take one second to get there. So at most it will take three seconds for the new message to get to the other device. And so I could be holding my cell phone. The person could be holding a tablet. I can talk into it, send. And at most it will take three seconds for them to see my new message. So there we go with that. But we need to make our send button do what we just did over here in this tab. So going back to our code here, we are going to add another little function here. We're going to say dollar sign, going back to the single quotes here, pound bt underscore send, saying look at the object that has, or the element that has the ID of bt underscore send. And when it is clicked, so click, function. I always like to close things right away so I don't forget. And I know that I can set Vim up to automatically close tags and stuff. I just like to do it myself. I feel that I learned things better if I add a repetition rather than having the computer do it for me. So here, when the button is clicked, we're going to do what we're going to create a variable. What is that variable going to be? It's going to be the content of our MSG box. So MSG BX is what we called it, and whatever the value of that. So that's our text area. So we're grabbing whatever was typed inside this box here, and we're putting in a variable called MSG for a message, and not the stuff that's in Chinese food. So now that we've grabbed what's there, let's clear out our box so that we're ready to type a new message. So I'm going to say set the val, and I'm just going to go little quotes there. So it's going to replace what's in there with nothing, because there's nothing between my quotes there. So at this point, I can actually save this. Go here, let me refresh. I'll type here, and I'll hit Send. And it created a variable, put what was in there into the variable, and then cleared out the text box. That's what we've done so far in this little section here. So now that we have created that variable, let's do something with that variable. Well, on the device that I'm putting in, I don't need to wait for it to get sent to the server. So right away, I'm going to take it from the message box after it's cleared out, and I'm going to put it into our output. So we're going to take the output and HTML, which is the same as inner HTML and regular JavaScript. We're going to replace that with this message. So we'll save that. We can refresh, of course, first. Type in here, and click Send. And boom, it's sent. But you see it went back to the other message, because every three seconds, it's going to check for the message on the server. And we haven't sent the new message to the server. We've only done things in this little section here. We've only done things locally. We haven't done anything remotely onto the server. So what we need to do is one more line here, dollar sign.get. And this time, we're going to use our send.php file that we created first thing when we started this. And then we're going to say braces here. Don't forget our semicolon there. And we're going to say we're going to send the variable msg and the val, and we're, well, this is kind of confusing, because I kind of named them both the same thing. This is the variable name that the PHP file is looking for. And if you remember, we created, we said to look for the get variable of msg. That's what that is. On the other side of this colon here, we're going to send it our JavaScript variable of msg, which is our message. So this side is what the PHP is looking for, and this is our JavaScript. So our PHP variable name, our JavaScript variable information. And that's it. So at this point, I can save that. Come here, refresh to make sure everything is up to date. And I can say this is my test. I can click send. It changes it here, but it also changes it if I come and open up in a new tab. So I can say blah, blah, blah, here. If I come back here, it does it there. If I pick up my cell phone, so what I'm going to do here is now that I have the Chrome extension installed, once again, Chrome to phone is what it's called. And it's set up with my device. I can click this. And in a second here, there we go. You heard a little chime there. I don't know if you heard that in the microphone. And it opened up my web browser to the page that I was viewing on my desktop here. So now that I have that, I can click inside the box, click my microphone, and be like, thank you so much for watching this tutorial. I hope that you enjoyed it, period. And I'll click send. And there you go. It's now sent to the server. And every three seconds, my computer here or any other device looking at this URL will see the message. So once again, I can be like, I think jQuery is great. And I use it all the time, period. I'll see if it gets jQuery it did. And I'll click send. And there we go. One more time. Please visit filmsbychrist.com. And I hope that you enjoyed this tutorial. And I hope that you have a great day. Let's see if it gets filmsbychrist.com. It's probably, yeah, it's obviously, it's spelled my name wrong and it put .com. So voice to text is not perfect, especially if you spell your name funny like I do. But this is, I think, gonna be a useful app. And I hope that you did enjoy this tutorial. My website is filmsbychrist.com. That's Chris with a K. Okay, the second I was done recording, I realized I should have mentioned something because anytime that you're allowing somebody to submit information to your server, you gotta be careful on what they can submit because it could cause security issues. So one simple thing you can do, at least the very bare minimum, let's go back into our code here. And well, let me give you an example first. So here I can go, since we're inputting information here, I can say, I can put an HTML code here. I can say something like HTTP colon four slash four slash filmsbychrist.com. So click and click send. And you can see that it gives you a button. If I click that, it will redirect me to my website. And that can be bad, especially with JavaScript. People could put JavaScript in there that would redirect or do stuff and potentially other types of codes. So luckily we're using PHP on our server end and it makes it very easy to strip HTML tags. So at the bare minimum, we should do this with our code. So let me go here, let me vim and go into our send.php since that's where we're writing to the file. So we created a variable here, we retrieved a variable here called msg. All we have to simply do is dollar sign msg equals and then HTML special, oops, charrs for characters, dollar sign, and then we'll say msg. So we're doing here is we're replacing the variable msg with msg, but with all the HTML characters stripped. So there's other good things about using this, but it makes it very simple. So now if I save that and go back to our web browser, I can again say something like a href equals http colon port slash four slash films by christ.com. Click me, hey, and then we'll say send. And now, oh, right, that's right. The first time I typed it in, so let me change this and show you again, I didn't even think about that. I put this in and we click it and you go, oh, it's still clicking, you can click it, right. That's because you didn't actually retrieve it from the server, that was your HTML code. So it's stripped on the server side, so that first initial little boop is only gonna happen to the person who submitted it, which would be the attacker in this case. But once it retrieves from the server, and anyone else looks at it, you can see it actually shows the code you put in and not actually running the code. So definitely wanna keep that into account. So let's look at that code again. Basically, we just add one line. So we've retrieved our msg message and then we're gonna replace the msg message with the msg message, but we're looking at the HTML special character. So it's not really stripping the tags, it's just displaying them as tags. It's commenting them, not commenting, like what's the word I'm looking for? They're displaying the tags rather than running the tags, and that will help prevent a malicious attack. Now I'm not saying that there aren't other malicious tags out there. In fact, if you think of any in this scenario, I would love if you let me know. But that definitely will help prevent a simple little, and I've seen sites that don't do this, and you can put in a JavaScript redirect that automatically redirects or when they hover over something redirects, and it can do some things to other users of your application that are viewing messages that people posted with malicious code in it. And so our HTML special characters, special chars, and then that's it. So I wanted to mention that because the potential there for malicious activity. Thank you for watching once again, and I hope that you visit my website, filmsbychrist.com. That's Chris with a K, and I hope that you have a great day.