Building an Advanced Calculator using PHP Tutorial

all right so you're going to build a basic calculator well a team basic but we take it from a template here without all the fancy numbers and we probably skip one function so we could add nine plus one to ten we can subtract minus three and we can multiply and we can divide right so we could also get um add our point figures plus 3 is equal to 8 um 10.5 and we can add our zeros so we say 200 plus three let's go to two or three and we can go back so let's say we add five to that and want to go back you just go back and say you choose eight instead and we add that together and we can clear a selection so we clearly three clear everything there let's try that again two plus three well that clears everything right so c clears everything but we can just clear one one item so we clearly three and then we clearly plus and then we see minus one clear last century right i see e so yeah uh our calculator can do a lot and it's pure php and we did not um use any databases for this and or no javascript to make it special so let's just see how we do that let's get into it now also you know just um just entering two numbers right so we could we could create a whole list of numbers um and we can get the output two plus three is five six six rushers nine plus one should be ten right so we can add a whole list of numbers and we're getting outputs so we're gonna go up to 20 now it does eleven that should be six and we need four more to make up 20 right so we can do a whole list of things all right so we created our template and now we are going to make some work to that template so we're going to say my calculator later i'm also going to give it a heading right so we should see how that looks all right so let's check it out all right so we have that there right so based on our template what we actually going to do is we now need to add a number and the best way to do that for now would be a table so we're going to create a table [Music] i'm just going to test it out first so we're gonna see button test just to make sure it will look properly all right so yeah so that's what we need so we know we have our numbers and then we have a whole list of numbers so let's continue with that instead we're going to put an input here [Music] and i think the first thing is nine [Music] all right so let's see how that looks yeah so that's what we want so let's keep going nine eight seven is that correct a seven nine eight seven nine eight so we have that wrong you're just going to change the order seven nine eight great i'm gonna do this for the rest seven nine eight six five four i'm confusing myself six five four idiot four five six all right the next one should be one two three one two three all right so we halfway there to our calculator we have our our um number pad one four seven two five eight three six nine ten ten seven eight nine all right and now we have um we need to add one more row for these extra columns and then one below actually so let's do this here one two let's i well let's add our fourth row now so that is divide multiply subtract and add you find multiply x x subtract you don't have eyes here because we need to add a new row and add so we're going to add a new row this row is going to be plus and minus so we say plus minus this is zero let me say point and then we see um equal most important one so how are we doing not bad all right so at the top we have some additional buttons so we also have i think i do something wrong here multiply minus right so the first one divides actually you have additional rows say cec backspace and defined so let's let's add those [Music] c e c back and divide and then this one is multiply this one is subtract and this one is add and this one is just the way it is [Music] all right so that should be better great so we have cec back divide multiply minus plus equal is last then we have to plus a minus zero point and then equal all right all right so what we're going to do we're going to put we're on this playroom so we're going to do that now so our display is going to be an input it could be any table i've typed tags and then we're going to have our this is our we call it our history or the calculations field um stuff i'm going to give this a pi in a 0 or 3 and margin of zero so that's why i would put things like 2 2 plus 3 and like nicely calculations you're currently looking at right um so yeah that's good that's pretty good i just want to know oh so we can put a border around our calculator since we need it so far we're going to put a border on our calculator our official styling what is official styling [Music] a border a border a solid border with whatever color that is and i bought a radius of tree that's as much styling as you'll ever get right i don't think the pattern should have been that wide i change the width let's probably be displaying let me do that so display inline block might only allow it to expand yeah that's that's much better so it doesn't take up the whole page great so this is our calculator we are almost finished it only took us three minutes all right so what we're going to do next is we're going to uh we're going to submit our form so let's do that so let's put everything within a form turn off form block i'll return a form element we're gonna give it post method post and then we're gonna capture the post as it comes in so we are going to see if server request method equal to post you want to do something run an echo post it all right great so let's reload our page and see what's going on here line five error okay so now we should as we click the buttons we should see that values are being posted great now we want to determine what we're going to get when we post it so in order to do that if you have the values already um but we want to define our opposite we wanna you wanna know exactly what's being posted so we're gonna give every each of the inputs a name [Music] so if we wanted to we could take action based on the name so this is going to take a while i probably could skip this step we'll do something important come back i still be writing mean multiply multiply mean is equal to four name is equator five name is equal to six name is equal to minus and we are still going mean is equal to one name is equal to two name is equal to three few missing oh we have one more to the name is equal to add a plus or something like that name is equal to plus minus mean is equal to zero mean is equal to point name is equal to equal all right this is great and guess what we're gonna do now we want to know if what we send is is um i want to know if there's a number or not right so that's how we know if we get numbers so we're going to test it we're going to say if post i guess if we have post values right and then for each of the pools that we send we want to see is if it is numeric you want to echo it you can actually cure the value either way all right so check this out five six three two one four but we're not getting c we won't get back because none of these are numeric right so right now we can get all the numeric values which is great and next thing to do with beta calculate them all right so let's format our stuff a bit differently now so we're gonna get the correct entity to display so for divide we want to show actual divide and we need to change this to button so that we could change the value that's been displayed right so this is the actual html entity everything else should remain the same it's still a type of submit i mean it's still a type of submit and you name justified any value could be slash or you actually want to display the divide same thing for back you wanna arrow so we wanna left arrow for back so i think we're gonna do the same thing the value should remain the same but we're gonna display something different so the name is still back this value is still back but when we displaying the actual arrow um and plus and minus so we're gonna do that for plus and minus as well you want the actual value for plus or minus what we want to keep how it looks or how it submits [Music] so we are doing that now right so the value remains the same so the value should be plus minus the name remains the same and it should look differently great so we are almost there all right so the current value the current value of our calculations is zero so in our form we're just going to say value is equal to zero well i mean current value so that's one so that's how i display right choose the current value right now it is zero so the next thing you want to think about is what we're doing right so every time you submit something whether it's a number or uh uh we call it an action or plus or minus and divide um we want to save that information so that we can calculate it later or calculate it when we press the equal sign so you know let's do that we need an array and that array is going to capture everything we input that array also needs to be stored um yeah the i really need to be stored so that we can we can get it later so two things to note right two things to note we need to present a new input this one is going to be hidden the type is hidden the name is going to be input and value is going to be php echo json json and code input right you're going to change these um open and close so we don't conflict so there's one so right now we have a basic input we put in nothing in it currently and we included it into our hidden field so we always have access to it and when we submit we need to get back that value so you're gonna see if i set host input input um so we decoding it so we encoded it before i know you'll be good right so that overwrites the value so that's just a note now the question is how do we add items to the array well basically uh if they're numeric we add them more or less right well for now if they numerically add them so for input we add key or we can put value as well but we put in key so now we can look at the html and as we add something we should see it show up in our form we added five now we added six we add plus [Music] we're not getting plus that's fine because right now we only added numeric stuff right so nine and eight right so right now we can add everything but what we really want to do is add everything um so let's work on that so this shows you how we're gonna figure some things out but right now we don't need it we actually need to say is if if it's not input should i say if the key is not input remember input is what we saving right as long as it's not input we want to save it so we don't want to save over input values so remember we also passing in this value this is input but we want to get everything else and put that in the array so that's what we do now so you see if it's not input if it's not what we saved before we can add it to any area so five plus three five plus plus three um five plus three right see minus two so now we have an array of um what we're actually going to do five plus three minus two great so now what we wanna do is we wanna be able to display what we actually do in and we also want to figure out how um how to join um numbers together so instead of seeing if you put if you press five twice we would get two five and this should actually be 55 so we're gonna work on first we're going to work on displaying the actual information so let's let's do that all right so we're going to create a function that we call get input as string we pass in the input and what we're basically seeing is this is the output it's empty currently you're seeing for each of the values as a value for each of the values and the um we just added so i think it's going to be this straightforward and then we return the output so that that just gives us the area strength basically it's kind of great in the sense that you could do other things with it i think yeah no this is fine all right so i'm thinking of another way to do it currently as an econ exploded or included one of those and then just remove the commas right so yeah there are better ways to do it but this is how we did it initially and um we just get input a string and we pass any input so that should show us exactly um so right now the input is empty we don't want that to happen so we want to give it a height let's say the height is our only same size at the text so we put it out at least 20. that should be min height um yeah so the minimum height is 20 so we don't want that to change then offset how you press any calculators two plus three plus five see it does 55 which is actually good so we don't need to join any numbers together because if you wanna add five five five you just add it multiple times and then what's supposed to happen is we're supposed to calculate all of this when we press equal so that is where things get interesting right so let's figure out how we're going to do that now we need to start actually doing the calculations and that is where everything gets interesting all right but how would we know when to do the calculation though well that's obvious and we press the equal sign um so what we need to do here is if he is equal to equal it is equal to equal right let's see if that's the key is we do something special here echo equal otherwise we add everything to the array so that takes equal out of the run-in so we could do this plus three plus two but once you press equal we actually do something special so that's great now let's get into the interesting part calculate input user input so this is the function that is going to calculate the user input and this function is going to do two things first it's going to format the data in a way that um we can easily do the calculations and then it's actually going to do the calculations so this first part if you want to add a command is format user input so the user sends information in an array format right so well they don't know that but that's what's happening so we just need to format it in a way that makes sense to us so we're going to say for each user input as number it doesn't have to be a number but that's how free is it and right so this is where you you have to stay with me if it is numeric if the number is numeric okay i did this before right so so i can put it out from the top of my head um so i'm just going to run it through with you exactly what's going on so if the number is numeric or if it's a point what we want to do is um concatenate it to the car the char variable that we have and what this is basically saying is if you have multiple numbers consecutively so if you have five five five then what we want we want all those things to be one number so five five five is considered as one number right uh or five point three is considered as one number great so that's what's going on there next we see if it is not numeric that means we have our action uh should we have a different occur right if it's not numeric so we have a symbol which is plus minus or whatever so if it's if it's not numeric that means it's a symbol or something to that effect so what we're going to do is first we're going to say if char is not empty then we add in char to the area so let's run it through again um maybe i'll get a whiteboard all right so if it's non-numeric we want to add everything to char oh well we want to add everything to the array so again with my whiteboard horrible example we have one two three so we pass in this and as we pass this we concatenate the values so as we pass one because it's numeric we add it one and then we pass two and we say oh so this is actually two so right now we have a number of 12 and then we pass through and we say oh this is actually tree and we see this this is not a number which means this car variable here needs to go into the array because now we actually have a number all right and then we continue so four five six and we say oh look at that this goes into our array as well because we actually have a number all right so that's how we figure it out exactly or that's how we differentiate in between what is a single number what is a well what is the whole number and what is just a symbol whether it's plus or minus or divide or subtract here calm yourself so after we add char to the array we need to make it empty again right so that we now open for any new values that we see um at the last point here we say our is equal to num so right now we're on the symbol and again we need to add the symbol we need to add this symbol because we need to know that we're saying one two three star is equal to plus when we actually doing the array we say the number one two three the whole number one two three plus four five six four 156 right but we still need a plus so we add the array and finally i believe if if if the child is not empty and this takes care of a certain condition um we add it so this is at the end of everything and that's for the case again if you look at our little whiteboard example in this case we're going to stop at six and we're not going to have any more symbols so we have to say well if at the end of everything we seem to have something in the char variable we just need to add it to the array because if let's say we added something else here then this would definitely get added but if it doesn't have a symbol then we would miss out these last numbers so we just need to make sure to add those last and extract list to the array so that is great what we're going to do now is we're going to var dump the array and exit and we need to call this when we say calculate input user input is what input [Music] all right so let's test that let's test our work so 5 plus 3 plus 2 is equal to so 5 plus 3 plus 2 right so that's easy what we want to see is what we do with 5 5 5 plus three two five minus six so now we see we have formatted the area to show five five five this is one whole number plus three two five minus six so we have our stuff we can as it should all right so let's begin to calculate now that we have our formatted array called array we are now going to calculate the uh user input based on our formatted um car cue rate right so let's begin that so our current value is zero and the current action is equal to now the action is december when it's plus minus or whatever and we're going to say a 4 i is equal to 0 i that's not an equal to count of the array minus one so we're just gonna pass through the array the formatted array we just created so you're gonna pass that and you're gonna take some actions so what are we going to do let's see so the first thing you see according to what i have is is numeric r i is numeric all right but i get confused with what i do great so first we say if we add a numeric field and then we say if action and i'm going to explain that and you see if action is equal to plus then here's what we're going to do we're going to say current is equal to current so we add it back from the current plus the current number right so that's the current new number that we on if we have an action we just add it and once we do that we can see action is equal to now so we're gonna empty the action and in the case where it is not numeric if current is equal to zero we say current is equal to right so if current is equal to zero that means we have now started then the current value is actually the first number that we hit but that is not the case otherwise and finally if it is not numeric so you remember if up here oh one second i'm confusing myself all right so if action if action else so this has an else so if it's not an action we need to do something so i'm not confusing myself all right and again i'll run this trading so as if current so this if we have an action we take the action and reset action to now if we don't have an action and if if the current is equal to zero we see um if the first number that we meet is equal to that else now a big else is in the case of numeric and we see the action is equal to again i'm gonna explain this right and then we return in the current value all right so let's run the trigger again so if we find a number and within that number if we have an action set we add the current value to the number using the action that we have and then we set the action to now whether whether and the action could be plus minus divide all right if the number is numeric but we don't have an action set then wish and if current is equal to zero if it's not equal to zero we don't need to do anything but if it's equal to zero then the current value is equal to the current number that we on and finally if it is not numeric this is where we set the action so remember action here we set it back to null so let's run this through using the wiper all right so 12 45 so this is technically an array so we have 12 and you're 45 so the first thing we see is if it's numeric right if you don't have action set that's fine so currently we don't have any action set so we say 12 if it's numeric we have no action set that means the current value is 12 right because remember the code we see if um if current is equal to zero and right now current is equal to zero and we have no action set so if we had an action we take the action but we don't have any action sets and also the current is equal to zero so that means the current value is equal to the number that we are so the next time we're going to go so that's that was here now we on this path so once you reach the plus we're saying that hey this is not numeric which means the only thing we need to do is set the action right so now we have an action so the action is plus so that's plus and now we on 45. so the current value is not zero uh and we have an action set so what we're going to do we're going to see if the action is plus and the action is plus then we're going to say the current value is equal to current plus whatever number we earn so the current value is 12 and we're gonna say plus and whatever number we on is 45 so that's going to give us the calculation and we could basically do this for all the other numbers so regardless of what we have if we had more plus 45 plus three it would work the same way so once you reach here current value would be zero so the current value will become 12 then you'd have a action so the action will become plus then we go to 45 and now you could see we have a current action so it will be 12 plus 45 and the current value would be whatever 12 plus 45 is and then we would go to this the next action will become plus because once we do this action and we use the action on this we set the action to now so now we have a new action called plus and then we go to three and once we see three and we know that the current value is not zero and it would not be zero then we would say current value plus the current number and we would get the calculation right so let's get that we we're going to set the current value to whatever the global current value to whatever we calculated and that should take us where we need to go so let's say three plus two is equal to five plus 5 um is equal to 10 plus 1 is equal to 11 plus 8 is equal to 19 plus 1 is equal to 20. all right so we are halfway there what we want to do now is gonna add the logic for the other um symbol so divide multiply subtract plus so that is really simple we could say [Music] if action is equal to minus e minus it if action is equal to [Music] multiply we multiply it the fraction is equal to divide we divide it so we are getting somewhere let's just check that out so now we can see 10 uh oh we got zero zero so let's just do 12 divided by two and we should get six plus three is equal to nine multiplied by two should be probably eighteen minus one is equal to seventeen uh [Music] minus one more is equal to 16 i think there we go and then we're gonna divide it by two to give us eight all right so we have that weekend all right so before zero wasn't weakened uh because it wasn't i guess being detected as a something i'm not sure anyway we change the name to zero and that um that allows us to get zero now i think it wasn't being detected as a number i guess it's a zero number anyway so we should have zero we can now so we can now have two or three so before i had it as zero and that did not seem to be cutting it at all so two zero yeah right so i just changed it to zero which is how i originally had it now we have the issue so now we have our zeros and the only thing we need to do is be able to add a pointer so in order to do that and i believe we already have the logic for it because when we did calculate the user input we added something for the point so we can now do point five all right plus three and that should give us whatever that is right plus two point five to give us um that's 25 supposed to be 2.5 all right well let's do 25.5 yeah so is that correct get on this track 20.5 plus three plus 25.5 is equal to 49 right so we work in like a calculator so literally the only thing we need to do now is deal with the special um conditions that we have so we have ce which means clear everything oh no clear last entry c means clear everything back means clearly last number and i think that's it we left this one out we decided not to be a hero so let's just add those two features three features so up here if it's equal we do something special if the key else if if key is equal to c e which means last entry we're gonna do an array alright pop and that's what's up basically going to do it's going to remove the last entry and that's it so if we have the last entry true 2 plus 3 and press c e the last entry was three and then the last entry was plus let me say two plus one instead is equal to three right and c declares everything so if the key is equal to c we will be clearing everything so let's do that so you'd set the input as empty and we'll set the current value of zero so now take care of c which means clear everything five times 100 is equal to 500 plus three we press c clear everything and finally we have back [Music] what does back do [Music] so back takes the last um remove the last number so you have to check to see if if it's numeric again that's probably a better way to do this i'm pretty sure anyway but if it's the last number we pop it out using rap so if the last input was a number we would pop it out using back so that means two plus three right and that would be any case where we add a lot of trees all out of fives and we could just remove them one by one but if it was a number i mean if it was a symbol we can't minus that so we could minus a number but we can't down right so we are good to go there um i think there's one thing we need to do so you notice that it it doesn't show the total figure so let's say we say five plus three is equal to eight and then we add two more which should give us ten it just says five plus three plus two what you want to see is ten up here as well so let's just work on that so to do that um [Music] when we do equal let me get the current value what we're going to do is we're going to set it and put to now i mean empty and then we're going to set the first value as the current value so anything we calculate we would see it any less so let's say we did 10 plus three so that would give us 13 right and now we seen 13 up there and then we add two so we could see what we've calculated 15 by six the big num that's not what's supposed to happen there we go plus three i feel it might have an error you know or maybe an appearance by eight right plus three great so we could see that our value remains even after we have um the last count value is added to the to to our preview window kind of so we could we could keep track of all the calculations we're doing so yeah this is basically our calculator here it's you can add as many as you want [Music] and it will just calculate it for you so you can consider ourselves complete minus 10 minus 10 minus 20 right so yeah so we are officially complete let's clear thanks for watching

Channel: wfTutorials

Views: 2,622

Keywords: php, calculator, programming, html, css, beginner, tutorial, coding, wftutorials

Id: QLElPzQRol4

Length: 50min 38sec (3038 seconds)

Published: Sat Dec 05 2020