How to send an SMS with VueJS and PHP

everyone in this video I'm going to teach you how to use view jeaious and PHP to send an SMS using the Twilio api so basically you'd be able to fill this out type in a message and hit send SMS and this will automatically connect with Twilio send the SMS reset the form and allow you to do it again over and over despite this form looking relatively simple there are quite a few things going on here a couple of things are that it does have front-end validation so once in the SMS to the server without the fields being filled out it also has form formatting so if I type in a valid Australian mobile number if I just do something like this you'll notice it automatically formats a number in a nice way so it puts the spaces here automatically and it actually doesn't let me type any more than ten numbers which is the Australian format obviously you can do it in other formats and I'll show you how to do that and the last thing is that if a number is invalid it also checks that on the front end as well we use a library for that to check and if it is invalid it won't allow the sending to the server as well so if I type in that number I type test as a message hit send SMS you'll see it automatically says the number is not valid so essentially we want to check everything as much as possible on the front end before we try and even send it to the server and then the server can do some extra checking to then process and send the SMS so with that being said let's get started in this tutorial I'm going to be using Visual Studio code and Lara GaN as my local server if you don't know what Lara GaN is just visit their website Lara gorg it's a free download and it works awesome I'm also obviously using Windows 10 now with that being said let's first create our index.html file and we will just do the plain html5 scaffolding and make the title whatever you want but I'm just going to do send an SMS and then we want to include some JavaScript and CSS in our project but instead of just including libraries inside our HTML we are going to be using a compiler we're going to be using laravel mix and that's just a wrapper around web pack it allows us to compile our JavaScript and our CSS and we can also use sass and it's relatively simple to install so if you go to the laravel mix website you'll see there's some installation instructions here if you don't want to follow along with this video you can see here I'm going to be following these instructions so the first thing we want to do is we want to initialize NPM substitute NPM in it and then - why so we don't have to fill out any of the questions so that's just going to set up a brand new package JSON file and then we want to do NPM install laravel mix mix sorry and then - - save - dev which means that it's not going to be used on on the live server it's just going to be used locally and basically laravel mix once we we're gonna have essentially two folders we're gonna have a source folder and a dist folder and we will do all our JavaScript ins sass or CSS inside our source folder and everything will then compile into our disk falter and then we include all of the dist files not the source files so we'll just wait for this to install now it's installed we need to intervene eed to copy a file from our node modules folder which we can just do CP node modules laravel mix set up web pack mix J s and then dot forward slash and that's going to copy it into our project so you can get this off their installation instructions on that laravel mix website and then what we want to do is we want to go into our web pack mixed ojs and as you can see a lot of stuff has been prefilled for us but what we want to do is we want to firstly create a source folder so we'll create source SRC and create another folder called dist so basically what's going to happen is our apt is in our source folder and our app dot s CSS in our source folder when it's compiled they're going to go both into our disk folder okay so we just need to create now in apps is in our source folder and an app dot s CSS in our source folder as well and then what we want to do is we want to do NPM actually before we do that we want to copy some scripts into our package JSON so we just basically override the scripts here and paste this and that is located on the laravel Mix website so you just need to copy these and that allows us to set up the production environment or watch whenever we do changes we can run this and it will automatically check and compile the j/s again so once you hit save then you can do NPM run watch and this should automatically watch for any changes in the J source at the CSS file as you can see what's happening is before it allows us to run the watch it's got to install a couple of other things and it's doing that automatically so we'll just wait for that to happen okay that's happened so now let's do NPM run watch again and let's see what happens okay that looks promising so what's happened is it's automatically compiled the two files in there and now in the disc file that we should see the same things there we go okay so now we want to link these files to our index dot HTML so for the CSS we'll do link href equals and then dot dist app dot CSS rel equals stylesheet and then just before the closing body tag script source equals dot dist ab dot j s and we can test if that actually works we'll just go into oops okay no we don't want to actually edit the dist files we want to edit the source file so we're going to upload a s and we'll do something like alert test and we'll see if that works we'll go to our project and I will go to this folder because I actually created this before the tutorial started so we need to go to the video folder let's go here video cool okay so it's all working now what we want to do is go into our app dot J's file and we want to install a couple of things firstly we want to install view into our project so let's go and install view I'm just going to cancel out of this watch because we don't need a watch right now so we have to do NPM install view and we'll wait for that to install okay viewers installed then we want something a library we can use to make HTTP requests so basically we're going to be making an HTTP request from our view application to our server to send the SMS and we'll use something called Axios so Axios can be downloaded by just doing MPM install Axios and we'll wait for that to install as well awesome so now we have both view and axials let's bring them into our app jeaious so we'll do window dot view equals require view and then we'll do window dot Axios equals require Axios okay so we've got both view and access in our project and then let's create our view instance so let's create a constant we'll just call it app and we'll open up a new view instance and within there we want to specify that the element that we're targeting is going to be the app div so let's go into our index dot HTML and actually create an app app div there we go so now everything for view is going to be contained within within that div cool now what we want to do is we want to create a component so we're going to create a separate component for the form and that can easily be done by let's just create a new folder called components and with inside components let's create a new file and we'll call that form dot view use capital F for that then what we can do is we can import that I'll just put a a note here called components and we'll just do import form from and then we want to grab it from components so we're already inside the component inside their source folder so it just needs to be like this components form now let's see if this all works all we have to do is do NPM run watch and we can leave NPM run watch going all the time and this is going to compile the j/s cool all right so it all worked ok now let's go into our form view and let's set that up so that we can actually start putting something in there so to do that let's type in template this is just the basic scaffolding of a view j/s template oh sorry component and then we'll also do a script tag there and you'll see that Visual Studio code automatically does that which is pretty cool all right so now that we have our basic template within any component in view you need to make sure that you have an inner div so it just needs to be a blanket ofthere otherwise you will run into problems and I'm just going to turn off my speaker here okay so now that we have the blank component let's just do a test we'll type this is a test and then we need to obviously create or tell view that there is a component that exists called form and to do that you just have to do view dot component and we can do a name for the component so it will just be the tag we're going to use and it will just call a SMS form and then we'll obviously use the component which we imported which is called form we'll save that let's get it out index dot HTML and within this app do let's do SMS form cool so that is automatically going to load this component and if we've done everything correctly if i refresh the page it should actually just say this is a test so let's give it a go beautiful okay so the view J's component is now loaded in our index dot HTML alright so now let's get bootstrap so we can make a look a bit prettier when we design this form we'll just go to get bootstrap calm and just use the CSS only we're not going to be using the JavaScript component of that and then let's go back to our project and just paste it on top of our app dot CSS so now we have bootstrap going now let's go into our form dot view which is our component and let's start designing this form so open up the form tags and within our form tags let's just do send an SMS as a title and maybe just a message type a number and message then we want to do a form group which is a bootstrap class you don't need to use bootstrap if you don't want to this is just to make it look good and within that form group we want to do an input type equals text and we'll do class equals form control and little placeholder which is phone number we'll copy that and we'll paste it again and within this form group we'll do a text area or just a text area I'll clear these out that get automatically generated just class form control and we'll do a placeholder of what will be time maybe just your message and then we'll do one more form group and this will be the submit button so just do button type equals submit and we'll do class equals BTN BTN success BTN large and BTN block and that is again bootstrap styles and then we'll just do send SMS as the actual text and save it let's have a look at our project now refresh it you'll see that the form comes up like this so we need to put it within a container to look half decent so let's go to our index dot HTML and wrap the container around our component cool refresh that alright still looks it looks ok we'll give our form a class so we'll go back in here and we'll do class equals form wrap and then we can go into our source SAS file or s CSS file and just do a couple of things so what we'll do is we'll do is form wrap and also will target the form will do padding 1 REM border-radius 0.5 REM background white width I'll make the with 500 pixels but then I'll give it a max width of 90 percent in case it's on used on mobile so we'll do margin:0 auto which will automatically center the div and we'll save that and also i'll just add a body so do in body will do background east 7e 77 which is kind of like a gray and then let's go and see how she looks now okay so yeah not too bad let's also do a full height of a hundred percent on our body and a full height of a hundred percent on our HTML because that we want to actually I'm gonna actually Center this form and then what we want to do is let's target this id app so let's just go I'll put forum rap with inside of there there we go and then we'll target app and we'll do display flex which will automatically make everything in the app div display as flex then we can do justify Content Center a line items Center and height 100% so we'll display this flex will tell it that we want everything to be centered from left to right and then aligning item Center up to down and the app dev will be 100% as well so if we're lucky now it should automatically be centered in the middle there we go alright and the last thing would be just to I guess give it a bit of a shadow at the back so this really isn't a design course but I wanted to show you this really cool tool and I'll just find it it's a shadow generator so if you just go to be are you mM dot AF fall slash shadows this website will automatically make it so much easier to creat create shadows for your project so as you can see this is the CSS so that's how the box will look you can change it with all these settings here let's just go back into our project now and we'll paste that code into there into our form wrap so we'll just paste it there refresh beautiful okay so that is our form designed let's dig deeper into it now and set up the functionality to ACTU action functionality to actually send the phone number and the message to our server to send the SMS okay so I'm just going to format this to make it look a bit nicer there we go we'll go into our form view now or close out of everything else will go into our component and let's set up a couple of things here so with the component we can set up some methods we can set up the data and we can also set up some computed properties and we're going to use all of them with UJS for this form the first thing we want to do is we want to add our spate or the initial loading state of our data so with the component we have to make it a function and then we returned the data so within there let's create an object called SMS and inside that object will be will do the phone and that the phone number is going to be null the initial state when it's loaded that form the actual form field will be null for the phone number and also the message will be null so that's the initial State we can now link up the actual inputs to those models so let's do v-model equals SMS dot phone because this is the phone field and here we'll do v-model equals SMS stop message so let's test it out at the top of our form let's just put the SMS object there and if we've done it correctly when we start filling out the form we should automatically see this being filled out so let's type in a number yeah as you can see it's automatically working fantastic okay let's go back into our component and what we want to do is we now want to set up a method so when someone clicks on the submit button it should run a method in view and that method should then make an HTTP request to the server to send the SMS so underneath our data object or function let's do methods and in the methods object let's do a function called send SMS and in this function this is what's going to be called when we click on the submit button of the form so with that being said let's do at submit dot prevent so basically when this form is submitted and then to do prevent default so basically it's not just going to submit the page like a standard HTML document does it's going to override it and then it's going to send an SMS using the function called send SMS so let's test that if I've done it correctly when we hit the submit button it's automatically going to say sent so it's typed this is something in hit send SMS there we go so it's working properly so now that we have the ability to hit the button it and and the method works then we want to do a couple of checks before it actually sends the message to the server so the first one I thought of is that when you send an SMS you might want to restrict it to 160 characters you don't want people to be able to type more than that really you can send as many characters you want and Twilio will automatically send as many sms's as required to fulfill that message but in this use case let's just make it that you can only send 160 characters okay so what would we do when the person submits the form it runs the method send SMS and it goes here so in this method let's do a check to make sure if it is more than 160 characters and if it is then it won't allow the message to be sent so let's do something like if and then let's refer to this message so let's go if this dot SMS stop message is dot length which automatically counts the number of characters in in the actual message if it's more than 160 then let's create an alert so let's do let's firstly go and create an alert and we'll make it null right now let's do this stop alert equals and I'm gonna do status false so this is a new object and the message will be please limit your message to 160 characters and then we'll return so we don't want it to go any further from there let's go back now and check it out so I will just type in a lot of characters there and hit send SMS and nothing's actually happening because what we need to do is we need the alert to come at the top so to do that let's go back in and let's add the alert right here so we'll do div actually know what we'll do is we'll do template templates like an invisible div it's just going to allow us to add some if statements in there without actually spitting out these tags so we'll do template V if alert so if there is an alert if it's not null then div V if and we'll do alert status so if it's true if the alert status is true then do something if the alert status is false do something else okay so we'll leave that one there for now and we'll do div V else and this is the one we want so we'll do class equals alert alert danger and we'll grab the message from that object as well so basically what's going happen is the SMS is going to be longer than 160 characters and then this alert up here will equal this object and inside inside our actual component it's going to check if the alert is not null which it is not null but then it's going to check if the status is true and if it's not true it's going to then show us the danger compare our danger class which is a bootstrap class and it's going to also spit out the message so let's save that and see what happens so I'll just type a lot of characters there hit send SMS and as you can see please limit your message to 160 characters and it returns it so you won't actually be able to send the message you probably noticed in the VIN the start of the video as well that we have a little counter so I'll show you the finished product if you start typing it'll actually tell you how many characters are left so let's create that function if we go back into our project we're going to create something called a CEM suited property and the computed property is basically going to be constantly running and calculating constantly whenever something changes so we'll go down here underneath methods will do computed and inside there let's create a function called message length and then we need to just figure out what we're going to do so the limit that we want to restrict a message to be will be 160 characters so let's create a variable called limit and we'll just give it a hundred and sixty and then we will do find out what the length is left in our message so we'll do var length equals and then we obviously the limit which is 160 and then we want to find out how many long the message is right now which is this so this SMS message dot length so 160 minus whatever's been typed equals how much have you got left now if the length of the message that we have left is less than 0 then we'll return 0 otherwise we'll return the length of the actual message so that just stops this actually just stops it from going into minus so then once we have that computed property we can just go underneath our text area here and we can just to do message length so let's save that and try it out let's refresh it and we've got a bit of an error so what is the error we'll inspect and we'll go to console and we'll say property length of null okay so why is that happening message length message length VAR limit limit my equals limit - okay so this SMS message okay so all right so the reason why that's coming up is because message is set to null so the it can't figure out a length and it's a bit painful when when this kind of error comes up because it's quite hard to debug but I've picked it up quite simply all we need to do is just do div ve message let me just think we'll just do ok we'll do be if SMS stop message which means that it will return true if there is actually any text typed into the actual form field so let's go back into our project and hit refresh and there you go it's working now so if we start typing you'll see that it's automatically going to count down and eventually it's going to go down to zero and the more we type it's just going to keep staying as zero but if we actually took away that if statement saves it and refreshed and we did exactly the same thing watch what happen goes into minus figures so you don't want that cool alright so now that we have that counter let's verify the phone number so for example if you are in I'm just going to use Australia as an example phone numbers in Australia are typically something like oh four zero zero zero zero zero zero zero zero so basically there's four numbers three numbers and three numbers you want people to type it in the correct format because if people don't type it in the correct format it's not going to work with Tullio so we need to try and force them or at least validate them now there is an awesome library we can use to do that in JavaScript and that library is called Lib phone number J s so let's go to the website and find and see how we can install the Lib phone J s and it should be which one are we gonna use let's click on this one and it was yeah it's quite up-to-date so it was last committed yesterday so let's go down here how to install this okay let's just go NPM install Lib phone Amadeus go back into the project now you can easily just open up another terminal window by going here right click and it will automatically paste it and let's install it now that we've installed it what we can do is we can go into our component and we can import it directly into our component so we'll do import and then open up our parentheses Pass phone number from string from Lib phone number J s it's going to bring in a function from the library which will allow us to check the phone number and if it's invalid it will automatically send us back and tell us that we need to change it otherwise it's going to automatically convert it into the right format that Twilio needs it at because Twilio actually needs the phone number to be in a plus format like in an international format for exists for example in Australia plus six one so say a number is oh four zero zero zero zero zero zero zero Tullio wants to be plus six one four zero zero zero zero zero zero zero so it's it's a bit painful if you have to automatically change it but this will automatically do it on the front end before it even sends it to the server you can obviously do it on the server as well but we'll do it this way okay so if you remember the method for sending an SMS once an SMS is sent it checks the length and if the length is more than 160 characters it returns a message and they can't go any further if that passes then we want to check if the actual phone number is valid so we can set up a constant and in there we'll just call it phone number oops no equal constant phone number equals pass phone for phone number from string so that was the function we brought in from the library and then we want to tell it the phone number that's being submitted so the phone number is going to be here first do this dot SMS dot phone and you specify the country so the country is in my case Australia but you can see all the things here in Visual Studio code so I'm gonna do Australia so that's basically going to check if the number is a valid Australian number and then we do an if statement so if the phone number isn't valid so this function is automatically built-in which checks if it's valid and I'm saying if it isn't with the exclamation mark then what we want to do is we want to send an alert back very similar to how we did the alert before so let's do this alert equals message status will be false and then we'll just put a message saying phone number is not valid okay so let's go and try it now we'll refresh let's just type anything and nothing's happening so why is that let's go to console and see if we're having an error yes we are having an error length of null length of null again all right so what's the problem here okay and the reason why this isn't working is because we haven't typed anything into our message field if we go to our methods and we look at send SMS method straight away it's checking if the message has a length and it does not because it's set to null and therefore it's going to spit out an error so just for this just for the time being we'll just put in a message and let's just put in a number and we'll hit Send SMS and as you can see the phone number is not valid so it's gonna spit back an incorrect message or a not valid message so now that we have setup the functionality to check if messages are under 160 characters and if they aren't it's going to stop the script and return an error as well as checking if the phone number is valid let's just pretty up this to make it a bit simpler let's create another method which we can just pass through which will do this for us so let's go and create a new new method called send error which is going to receive a status and a message and within there we will basically do exactly what this is doing and we'll just make the status receive the status and the message receive the message so then we can just do this stop send error false and then we will put the message there and we'll do exactly the same thing so I'll just copy it here and I'll paste this message there cool so let's try that out type any mess any number and any message hit send SMS beautiful so now that's that's out of the way what does this actually do this library what we can do is we can do a console log of this variable and you'll see what data we can play with if you'd like to so I'll just type in a real phone number and I'll type in a test message we'll go to our console and we'll just wait for it to do something go to info and there we go we can see a phone number object and inside there it gives us the calling code of that number the national number and as you can see here this is what we want to use so this is the actual perfect format that Twilio likes to receive the number in so to grab that what we need to do is we just need to get this so it will just be phone number dot number but where are we going to put this to submit it to the server well let's go and create another property and we'll just call it formatted phone now this won't be connected to the form per se but what will happen is once the form is submitted it will get filled so we'll just do this formatted phone equals phone number dot number so that's automatically going to add that once it is valid okay and then the last thing we all the last thing we want to do before we send it to the server will be to tell - to tell view that we're actually sending it so this just allows us to maybe do a loading screen or something like that so we'll go up here under alert let's create a new property called sending and this the the base state or the starting state will be false so obviously the form isn't sending at the start but then once this method has been validated and everything's working to be able to send it we'll do this sending equals true and we can work with that a bit later I'm not sure what's going on with my indenting and then the last thing obviously is we want to send this to the server so before we do that let's go into our main folder our project and create a PHP file called send SMS dot PHP and then we go into our form dot view component again and let's do let's use Axios which is the HTTP library to make the request so we'll do Axios post and we're going to post it to send SMS dot PHP and what are we gonna post to it well we're just going to post this whole object called SMS so this SMS then when we receive if we receive a response a unapproved or an okay response then let's do something otherwise let's catch the error and display it so I won't put anything in there yet now let's go ahead and create our send SMS dot PHP so we'll go into our folder hit new file call it send SMS dot PHP and let's then receive the data that is sent or received the SMS object that's sent through Axios so we can do PHP and then we'll create a variable just call the body will do equals file underscore get underscore contents and then we'll do PHP input so that's going to receive the data the way that Axios sends it then what we can do is we can do var dump body and let's go and refresh the page and type in a number hit test or type test sorry and hit send SMS will then go to our network actually I lost the day we'll hit it again go to our network hits and we'll see that it has come up as a string what we need to do is we need to use JSON decode in PHP to convert it into an actual array but you'll notice here the formatted phone actually was not done so why is that let's go back into our form view and okay so send SMS is sent it checks to the length it checks if the phone number is valid and if it is then it will automatically put it there but you will notice here that we didn't put dot SMS so that's what we need to do refresh it let's try it again keep the inspector open I'll just put it on the side and go to network I'll type in a number click into it there we go so you can see the phone number is there the formatted phone is there and the message is there so let's now decode that in our PHP file go back to send SMS dot PHP and we will do form equals JSON decode body and that's automatically going to grab it and put it into an array format so while we're here let's protect this so that people can't just go directly to the the page so right now we could just literally just go send SMS and SMS dot PHP and the page will load so let's change that let's do if there is no body then echo no cheating and we'll kill the script so let's refresh it now there we go so now people can only or people can't access it directly it will only be accessible through our script we also want the response of our PHP file to be in JSON format so to do that I'm just underneath the if statement we can do header content type application jason so that will ensure that the data is sent back in in proper format so let's try it we will just do an echo of the form and then we'll go into our project and let's type in a number phone numbers not valid cool and let's go to an inspector now and look at the network hit send SMS ok we're having a bit of an error here objectives class could not be converted to string okay that just means that I need to i can't just echo out the object I have to echo out a property cycle just to say formatted phone and that should send the data back in a JSON format there we go we can also do phone perfect and if we look at the console and we go back and we go into our Axios post and we do say console log res data will refresh the page type in a valid number and you'll see that it will come up here automatically awesome so once we receive a response we're just going to basically alert the user if their message has been sent or hasn't been sent so if we go into our send SMS and we just do echo and we create actually we can create a message we'll just call it alert equals and it'll be an array do status true and the message your SMS has been sent and then we can echo the we can do echo Jason encode alert now let's try and see if that works there's a unexpected string go back and have a look there we go yep so we can't put the semicolon there let's try it now okay so we're getting a response true your SMS has been sent we'll go back into our form now and we will do this alert equals res dot data and if you remember we did the alerts at the top here and if the alert status was true then we can do something so we're going to do class equals alert alert success and do exactly the same thing alert message let's refresh it all and I'll close the inspector and I'll type in a valid phone number there you go your SMS has been sent okay so now that we've received the SMS data we've received the message and we've also received the phone numbers let's go ahead and create a custom PHP class which will connect with Twilio send the SMS then respond to this PHP file and then respond back to the user we're going to be using composer to install the Twilio library as well as create our own class for auto loading so I'm just going to clear my terminal here and to create a composer file or a composer JSON file just need to do compose in it and it's going to ask a couple of questions so let's just fill out the questions I'll just call it mr. digital SMS tutorial no description and I'm just going to skip everything by pressing enter I'm just going to do no and then no again and okay yes and as you'll see now it's created a composer to a JSON file inside there we need to add a few properties here so we can use something called psr-4 autoloading if you don't know what that is it just makes it much easier to create classes and not have to include them all manually it just does it automatically so underneath the author's underneath the comma there we can do in inverted commas autoload and then within there make sure you don't miss that comma as well within there we want to do PSR - 4 and then colon and then we want to specify what our namespace will be so our namespace I'm just going to call it classes and then two backslashes just do two backslashes it's important otherwise it won't work and then we want to tell it where our classes are going to be located so I'm going to create a folder called classes so we'll just do dot forward slash classes hit save and let's create our folder called classes and we want that to be in the main main area we don't want it to be within our folder structure so classes cool so that's it then you just need to do NPM run oh sorry composer install and that is going to automatically install composer it's going to know that all your classes are going to be in the class folder here and it's just going to make it much easier to create our own class and integrate it into our project okay so know that composer is installed we can go ahead and create a class called let's call it SMS so in our classes folder we'll call it SMS dot PHP and inside there we'll do PHP and we'll tell it the name space which is classes or actually it's capital C so if we go to composer - Jason it's this that's our name space their names face classes and then we'll do class SMS and that should do it right this minute what we now want to do is install the Twilio PHP library so to do that we can go into our browser and just do a google for Twilio PHP oops Twilio PHP and you'll see if we scroll down there's a github repository for - Leah - PHP just need to go into there and we need to install it via composer by grabbing that and then go into our terminal paste that in hit enter wait for that to install as well so now that Twilio the PHP Twilio library is installed we can include it into our actual class but before we do that let's get out of our class and go back to our send SMS PHP so what's going to happen once it gets submitted to our PHP file it's going to be checked and if a body exists we're going to decode the body into an array and we are we're not going to send out an alert anymore because that is going to be done by our class and then what we're going to do is we're going to jason encode the response from our class so our class will create a new class we'll just call SMS equals new SMS which is going to instantiate a new instance of our SMS class and then we're going to return a JSON encoded response that our class responds with so SMS and we need to obviously create a function or a method in our class so let's go to our class and we'll do public function send SMS and what are we going to receive through there we're going to receive the phone number and the message so phone and message so we'll do here we'll do send SMS and we'll do form formatted phone which is the formatted phone number that gets sent through and form message okay and then let's go back in here and let's just return the phone number actually we'll return them ceej so just to sum up what's going on is we're receiving the data from our form we're checking if nobody is only our script is accessing this page it's going to return it with a JSON response then we're actually decoding the body that's received from Axios so that it's in an array format within creating a new SMS class and then we're actually responding back to the browser with a json encoded response which is a response from our actual class which receives our phone number and our message so what's going to happen now is it's going to run this function and the message should return so let's go back and see what happens here I'm gonna open up my inspector I'm gonna type in a valid phone number and if we go to our network there is an error here class SMS not found okay great so let's go back and in include our class our SMS class into our PHP file let's try it again now and it is still having some sort of error here so let's just see what's going on and then another extremely amateurish error that I've made we need to actually include our autoload file so that our PHP knows to use composer to auto load our classes so maybe just under the header here we can do require once vender auto load dot PHP and then we will go back and hit send SMS again and as you can see the message is being responded to us so obviously that's not going to be useful for us but we know now that connection is working so we could do something like this go back in here and we could return an array of status true and message equals awesome your SMS has been sent and let's see if that actually comes up now let's hit send SMS there you go comes up we could also do false has not been sent and let's then hit send SMS and as you can see it's automatically coming up as so now that we know the connection works what we want to do is go back into our code and let's just remove that we'll create a new function called make it a protected function called response and the response is going to receive two things which is the status and the message and we will then return the status as a status very similar to what we did in view and the message as message just to make a simple function for responses so now that we have asked the class to send the SMS what do we do now well we have to obviously run the Twilio library so if we go back to our browser go to the Twilio PHP file and you'll see that there's a quick start and it's just a basic sending of an SMS so let's copy that and let's paste that into our project in the send SMS function and remove the PHP file there no a PHP tag sorry now this wants us to enter in a few details es ID the token then the phone number that it needs to SMS so the phone number that it needs to SMS will just simply be the phone here so let's just type in the phone variable that gets received from here and then it wants a phone number that you're sending it from and once the message so the message will be here now the actual Twilio number will create a variable for that because that is a number that Twilio gives us and we have to firstly set up a Twilio account so let's go ahead and do that go to Tullio calm we'll go to let's actually I'm logged in I'll just log out I'm logged out and now let's sign up to Twilio and when you sign up you get free credits to test it I'll just type in my details I'll just put in a password now this is they're pretty secure with their passwords and then I'll hit start your free trial and what will happen is it will take us to a page and all ask us for to verify our mobile phone number well firstly we need to verify our email address so I'm just going to check my email on the other screen and I'm going to click to confirm it and now that I've confirmed it I've been taken to the Twilio page so let's now confirm our phone number and I'm going to then verify that so what's going to happen is a message is going to be sent to our mobile phone which we need to type in to verify it I've received the number and I'm just going to type it in and that will automatically set up the account and the last thing we want to do is I'm just want to actually I'll just skip to dashboard here so we have a trial balance of actually 15 dollars which is awesome and then we just need to get a trial number but before that we can just copy the s ID here put that into our s ID there and then get the token which is we can copy and we'll paste there as well and then we need to get our phone number so let's get a trial number and it will automatically give us this number we can choose the number usually it's going to give you an Us number for trial purposes and we'll just copy that phone number over and paste it into there and then we can just use that variable here cool okay so we've got our ID our token our 2000 we've also told it that we want to we've told it the message we want to send and we've also told it the phone number we want to send it to so once we do that we want to response so if everything goes well we want to return a response so we'll return this function return this response and we will do response will be true and the message will be message sent but we don't want to just do this because what if there's an error on Twilio Zend what if there's a problem with the phone number there's a problem with their server we can't just do this so to kind of make make it a bit more reliable we do a try and catch block so we'll do try and will automatically catch the exception if there's an error so catch rest exception e which will put the the exception into a variable and then we'll do the same thing we'll return a response but we'll make it false and we'll then respond with the actual message that the the exception is whatever the exception is that is caught it will actually respond with that message okay so now that we've pasted all this in we need to actually include Twilio the Twilio class into our class so to do that we can just do something like right in vs code we can import the class and you'll see that it will actually give us all the options here so as you can see here it's Reptilia restclient and we can then just remove that because it automatically knows to use that then down here we want to import that as well cool so now we have the two classes that we need from Twilio to send their message all right so let's save that let's go back to our project oops and let's try it out so when you're using a Twilio trial number you can only send a message to your own phone number that you have assigned to the account you need to actually pay for Tullio and get a real number if you want to set to other Mobile's so in this tutorial we're just going to be sending it to my mobile and you'll probably be sending it to yours until you become a Premium Member so I'm just going to type in a phone number to send it to which is my own phone number and I'll hit I'll type in a message or hit Send SMS and as you can see it says message sent and I should receive an SMS very shortly which I have it's prefixed with sent from your Twilio trial account but it actually comes up with the message which says test so we have successfully sent a message through Twilio and returned it in the forum now what if we made a mistake on Twitter let's like say change the to Lia phone number and add a 1 to it and then we go back I'm gonna get out of this go back and try and send it again what's going to happen as you can see because we picked that we did the try-catch block we returned the response of the the exception it's actually going to return what Twilio tells us so unable to create the front phone number is not valid so let's just take it back to the number it was and hit send SMS and there you go it works ok now we've taken care of the backend so we can send the SMS now I just want to tweak the front-end firstly to setup form validation so that people can't just submit a blank form secondly to format the phone number so that it looks half decent if you're typing in say this number you want it to come out in that format and not like that and the third thing would be to show a loading screen if the button is clicked ok so actually one more thing I want to do is when you're typing this I want it to actually say there's 154 letters left so or characters left so let's go back into our form component and let's just change this to small not a div and we'll just do so the message length characters left refresh that save it there we go 148 characters left blah blah alright now what we want to do is we want to do some validation now with view there's a couple of libraries for validation but I would recommend using something called V validate so if we go and do a search for V validate go to the V validate website makes it really really simple to kind of validate front-end forms so to integrate V validate let's go back into our form component and we are going to bring in a couple of libraries or not library one library and a couple of functions but firstly we need to install V validate to do that go into terminal and do NPM install V validate and wait for that to install now that V validate is installed we can go down and bring it into our actual components so we can do import now we need to import two functions one which is called something called a validation provider and another one which is called a validation observer and then we want to import it from V validate Ford / dist 4 / v - validate for and if you want to know where I got that from I got it from the V valid a website so now that we've imported it into our actual project we then want to go into our export object and put in the components property and inside there we want to tell it to expect that we're going to be using these components so validation observer and validation provider cool let's go back up to our form now we're going to wrap the form in the validation observer come ponent and we'll close it off as well now this basically wraps around the whole form and it keeps an eye out for all the form fields and essentially it will only allow the form to be submitted if the form is all the fields that are required are actually fulfilled so what we're going to do in this observer we're going to give it a reference which you'll know why I do this later of observer will just call it observer it's it's a name so you can use whatever name you want but I'm just calling it observer and then we're going to put in a slot and this is something that a function that gets passed into the observer and it's a and it's a function called handle submit what this will allow us to do now is within the form we can use this function from the validate now within the form here we instead of doing submit prevent send SMS we're going to do submit prevent handle submit send SMS and basically that function is going to run so when we hit let's just go back here when we hit send SMS it's going to run a function and going to check each field within our form and make sure that if it is required that it has been filled out now if it if all of a match then all will submit to the send SMS method if not it will obviously not work so let's go now to our individual fields and tell V validate that we want them to actually be validated so remember how we brought in the observer now we want to bring in the provider so let's wrap it around each individual input validation provider and then close it again and then within there we want to do rules equals and the only rule is required but you can do dual pipe and do email and all that sort of stuff we're just going to do required and we're gonna give it a name of phone and then we want to pass in a slot and we want to pass in a function that we can then use within this component wrapping component called errors and I'll just save that and just make sure it's giving me an underline here so I'm just trying to figure out why but it looks okay to me so then what we want to do is underneath our input we can do span errors zero so it's basically going to spit back the error if an error does exist for that particular form field we'll do exactly the same thing for the message wrap it around the text area and the name will be message and everything else can remain the same we'll also bring in the span with the errors and we'll do that cool so let's go back to our project refresh it and let's hit send SMS and as you can see now it's not actually gonna allow us to send unless these are fulfilled so if I do that still won't work then if I do a proper phone number it's actually saying phone numbers are valid because that's not the correct format let me just try a real number hit send SMS message sent beautiful so now that we have front end validation people can't submit to the server without making sure that they filled out both these fields now let's use something called cleave to be able to format the input fields so cleave is just another library so if we do view cleave component if you do a google for that you'll see something you'll see the NPM website there click into there and just go to the github home page for this particular component you'll see what we need to do so let's just install it via NPM NPM install view cleave component paste it in oops what have I done I'll just clear it and we'll just paste it in and install it now that we have installed Cleve into our project let's import it into our actual project or sorry into our component so we'll do import Cleve from view Cleve component and then we also want to import the functionality to do the phone numbers for our specific for my specific country which is Australia but you can use the one for your country which would be import Cleve Jas fold / dist add-ons Cleve phone auj s and I'm getting this off the Cleve website so I'm not remembering it off by heart or anything ok so now that we've got that we then need to go and set up a couple of options for the Cleve filled so we'll just do phone options we'll say phone is true so Cleve knows that it's we're using it for a phone and the phone region code will be au for Australia call now all we have to do is put the cleave cleave component inside there we're going to actually replace the component with our input field here with our cleave component so let's just go and open up the cleave component and and just before we do that we have to bring Cleve as well so just do cleave which refers to that so now our view component knows we're using cleave so we'll open up cleave and we'll close Cleve as well but then we need to put in some some arguments in there the first thing will be type equals tell so telephone the v-model is going to be the same model as this input oops we'll tell it that the options is relating to this so let's set that as the options will then give it a class of form control so that it matches bootstrap and then we'll do placeholder equals phone number and we can just remove all right we'll just save both and we'll keep them both next to each other and we'll refresh and as you can see we have two fields but when I type in one actually it's not coming up in the other so let's see why that is SMS phone SMS okay they both have the same same v-model asserts associated with them so let's just try this so for it might not work with both of them working to be honest let's try and see if I remove one of them and let's refresh and see now oh four one two one one one one one one okay so it doesn't seem to be working we'll have a look in our console and see if there are any errors and they don't seem to be any errors so let's see why that's not working okay so the problem is that I didn't put options it's supposed to be options not option so we'll hit save now and we'll make sure that we're watching yet watching so let's go and refresh it's compiled and let's type in any number cool so it's automatically putting the spaces in there I'm not typing that so that's fully formatted I'll type in a number to send an SMS cool so the last thing we want to do is we want to set up the load of so that you know we know that it's actually sending an SMS rather than just waiting for a response to do that we'll just use another library called view loading overlay so if we just do view loading overlay on Google and you'll see that come up on NPM we'll go to the github page and you'll see to install it we have to just do MPM install view loading overlay paste that into our terminal and if we go back to the site you'll see what we have to do to import it into our component which is just this so that's done and we'll now go and just paste it into here save that and then we can just have a look at the documentation and see what we can do so we can paste this component into our our component will paste it maybe at the top here and we'll just remove a couple of things first thing we want to remove is we're going to make is full-page true we'll take out these two and what we'll also do is take away active dot sync we'll just make active and this is what we need to refer to earlier we created a a property called sending and when we are sending it changes it to true so we will make this sending let's go and try it out refresh doesn't seem to be working we'll go into console element loading did you register it no we didn't so we need to actually go and we need to make sure that we tell view that we're using this we'll call it I think it's called loading yep and now let's try it there we go but you'll notice that the loading sign still hasn't gone away to do that we obviously have to tell the system once it's successful that we want to basically not be loading anymore so after the response has been made we can do this stop sending equals false let's try it again now oops refresh perfect okay one thing you would have noticed is that I once I send the SMS it should clear the form but it's not doing it right now so let's quickly make it do that let's go back into our component and create a new method we'll call it reset form and within there what we want to do is we want to do this SMS equals and then we just want to reset these things so we can just grab them out of there and just going to reset the phone the message and everything so it's gonna reset it back to how it's started with refresh the page let's try it again and it still didn't do anything and that's because in our Axios response we need to also call this function so I sue this reset form refresh try it again there we go but then what's happened again is that our phone number and our message is coming up with a required field and that's because V validate still thinks that exists but it doesn't so we need to just tell be validated to back off and reset itself to do that in our response we can do this dot rifts dot observer now where did I get observer from well I named the validation observer observer so that's what we're we're doing we're telling it through the refs or the reference in view to reset cool let's refresh try it again done okay so we've successfully setup the form to automatically format itself we've set up the ability to do front-end validation so people don't send Blake forms through we've also set up the ability to validate the phone number and put in the correct format to then send to the server and then send via to Leo and send back the appropriate response the last thing you might want to do is if you want to handle any errors that are caught by Axios when it's trying to send to send off send SMS dot PHP you can do whatever you want I'll just do alert arrow dub response and that should alert with an object actually you just do a console log but you could do whatever you want there you could make a message pop up whatever you want but that brings us to the end of the tutorial and you can download this off github if you want to muck around with it and I hope this has brought value and you've learned something so thank you very much and have a lovely evening or day or whatever wherever you are in the world Cheers

Channel: Mr Digital

Views: 2,789

Keywords: sms gateway, send sms from php, send sms using php, how to send sms using php, php send text message, bulk sms, twilio, sms send in php, send sms with php, send sms from website, sms api, php script for sms sending, sms sending using php, sms php api, email to sms in php, vue sms, vuejs, vue js, sms, send sms using vue and php, twilio php

Id: XiD0N9XZGMM

Length: 74min 38sec (4478 seconds)

Published: Mon Mar 09 2020