Learn How To Input Data On A Html Form Using An Esp32 In This Easy Step-by-step Tutorial!

hiya and welcome hope you're all well now the last few videos we've looked at um web servers um before we move on I want to look at one more just one more you can use your web server for for any of the modules you've got you know any other components um but I want to look at HTML form now because whenever you log into a website that you're a member of you have to log in normally it's either your username or your email address and a password now for sure our kids will at some stage uh look at HTML forms and that's what we're gonna do we're gonna look at HTML forms now let me just show you um what we're going to be looking at okay here is a HTML form well we're going to produce this all right hopefully the coding is not going to take too long and we'll try and do it in one sitting um but this is what we're going to build right so let's crack on let's crack on let me go to to this site um remembering that um we need new sketch so it's file new sketch yeah make sure you're connected to the board that you're going to be using all right oh I'm using my Rover W Rover module on com10 and let's start okay we are going to need two libraries all right we're gonna need the async TCP I've got a link down below where you can download them libraries and I've showed in previous videos how you can um how you install them because you install them as a zip library and you're also going to need the a sync web server right well let's crack on then let's crack on it just um move a few things get my life sorted Okay so we've got to include those libraries all right now this can be used this sketch can be used not only for the esp32 which we're using but it's cousin the ESP uh 8266 all right so let's let's start let's hashtag include all right all right space are greater than and it's arduino.h and it's rated ends off all right enter hashtag include no it's not it's a different command because um we're using the esp32 that's if death defined all right and capital ESP 32 enter right and then it's a tab right after that says if Def and then a test tag include space and it's less than and it's a Wi-Fi member bumpy tax dot h and it's greater than enter hashtag include and it's a lesson and it's see a sync TCP TCP standing for transfer control protocol all right and it's greater than enter space would be so bad if I could spell include with it all right no the next is an else command all right else enter tab a stag include right and it's space a lesson and this is the ESP um six six Wi-Fi bumpy text all right and that's dot h it's greater than enter a stag include space lesson PSP capitals async TCP dot h and greater than enter space indiff hashtag end if all right enter hashtag include space and this is where we include the ESP I think I think and it's web async yeah web server capital W on the web capital S on the server Dot H greater than enter right so that's that now we have to do our port enter there's a sink web server again bumpy text base server okay it's on and it's port 80. records of semicolon enter right next thing we need to do is put in our uh Network credentials right so it's const jar star SSID base equals is quote and now we have to put our um SSID underscore and you need to put this for your okay your credentials all right come outside the quotes semicolon enter and it's const ant face jar star equals votes and your password right so it's password oh I forgot that so let's go back password space equals votes on and my password you might saw the quotes semicolon enter now we're gonna have to build the web page all right the three inputs all right so this is I just seen another typo right let's come down a bit as far as we can now we're going to build the HTML page all right uh for inputs one two and three so it's great to then exclamation mark doctype all capitals space HTML goes the tag open a tag HTML or small case post tag open the tag Ed all small case enclosed tag right we've sort of done this before sort of done this before and then we enter then we tab okay opening tag so it's a sand and its title those tag all right ESP all capitals space input form right so that's going to be our title remember it's closed tag let's send forward slash all right so greater than right enter now we need the oh what am I doing our next um let's come down a bit as far as we can for the moment but that's our dock type right now it's our first sand meta name space name all right equals well viewport or small case I'm outside the quote space content equals equals votes width equals device Dash width comma initial Dash Scout all right equals one all right come outside the uh quotes and it's a greater than it's an enter all right now we're going to do the uh we're gonna close off the head all right so it's less than four slash Ed ready to then all right that's uh now you can do it like this or you can put a space in but it's less than now we're going to do the body all right and then it's a greater then enter we're now doing the body that's sand boom action right this is telling it's a form action uh equals quotes forward slash get right I'm outside the quotes rather than enter now we're going to do input one all right the first input all right so input one odons enter less than input space type equals and it's a text sorry input is going to be a text come outside the uh quotes space name equals quotes and we're going to call it input one all right come outside the quotes greater than enter all right form action what I forgot to do we'll tab that in all right tab that in enter next it's um lesson input type equals votes submit all right submit I'm outside the quotes space value equals quotes submit all right come outside the quotes right to then enter right excuse me and then it's backspace uh lesson four slash so we closing off the form right to then less than VR which is for break greater than enter all right what I'm doing I'm just gonna break these up a little bit okay and now what we can do we can now copy this right you can either do Ctrl C or right click copy come down and control V all right now we're going to go through this right the second one right let me just come down on my first again is form space action equals votes what was last get close off less said the next one we want to put here is input two okay and we come across input two input type equals text name space and the next one here we change to input okay and the next line is exactly the same input space type equals quotes on submit value equals votes on submit quotes off uh greater than and then we've got the form break all right exactly the same so we can come down a bit put a couple of spaces in there Ctrl V right but this time all right it's again the input type this input three all right input three and again it's input type submit submit form break let me just take this out and I've just noticed we're missing a rate of n there for the break but that's the end of that form right then we enter backspace right backspace and it's um less than forward slash body right then less than or slash HTML rate to then brackets off now should I try to see if we put our brackets on anywhere oh yeah right at the top okay and then it's HTML and it's raw literal votes semicolon okay and that's uh let me just check I haven't left out const char yes I did yes I did I'm glad I noticed that before we uh before we um started the HTML dot before that we have to put this in honest face char space index underscore HTML behind protects my Gap language [Music] square brackets on square brackets off space and then it's all capitals p r o g mem program memory space equals is capital r quotes Raw literal okay and then it's a brackets on glad I noticed that and we can get rid of that brackets because the brackets off all right is down here all right is down here and there's our raw literal boats semicolons all right okay ready for the confusion there sorry for the confusion and now we gotta avoid right not bound capital F on the found right back it's on sync web server don't forget the bumpy ticks a w s all capitals request f2r on the request all right space oh request brush itself face curly brackets so there's no semicolon enter right and it's request minus or greater than send like it's on 404 bummer base boats anything we put in this quote is next printed plane I'm outside the quotes comma bass boats not bound come outside the quotes may I saw the brackets semicolon come outside the curl it's come down a bit and we can bring things up now because we're now going to go into our void sets up all right then we put some spaces in here so we can bring it up here in our void setup things that we only need to happen once right so let's get rid of this that's just to remind you okay cerealed up again okay brackets on and it's one one five two hundred or whatever board rate you have set semicolons enter and then it's Wi-Fi sorry dot mode all right let's brackets on this capital w-i-f-i Wi-Fi underscore and we're gonna be in station mode remember in a previous video we did the different mode station and APL was it and semicolons and it's enter and it's a Wi-Fi dot begin right brackets on ssrd or small case brackets and then password all right come outside the brackets semicolon enter down a bit and then next we got if brackets on Wi-Fi again bumpy text dot wait or character f connection connect result capital on the result Spell result all right so wait for Connect brackets on brackets off come outside the brackets face exclamation mark equals is all capitals WL underscore connected I'm gonna start the brackets no semicolons after an if statement space curly brackets enter zero dot print line remember it's Ln for line like it's on boats Wi-Fi base failed all right exclamation mark I'm outside the quotes come outside the brackets semicolon all right enter and then return semicolons down a bit I'm outside the curly brackets and then it's not outside the curly brackets and then it's serial dot print line in the line brackets on and then it's inside the brackets semicolon enter and then it's zero dot print brackets on boats IP address all right come outside the uh you can put add-ons if you like in the space I'm outside the quotes come outside the brackets semicolon enter and then it's cereal.printline and then for lime brackets on Wi-Fi bumpy text Dot local IP capital brackets on brackets off right that's where the uh local IP address is gonna go I'm outside the brackets semicolon enter right now we need to send the web page with input fields to the client all right so what I'm going to do here I am going to verify the code so far we don't want to go on too long and do the last uh in a second video so let's just check that everything's hunky-dory fingers crossed right include where are we what did I do what have I done here if death include I think it's just a space async TC yeah it's just a space I think let's try and verify it again always good to do this halfway through verify your code let's see if you've got a long sketch right include and oh I can see boy school boy error dot h let's try again aside just to remind you if you haven't got your uh your components you must you should have them by now you know the videos we've been through but if you haven't I've got a couple of links down below I'll look on Amazon Amazon have got loads of kits components excuse me everything you want okay we're compiling but it's always good to do this we are going to be moving on after this to things new the things new um what what we got here returned what if I failed semicolon and it's uh I put quotes instead of a right okay let's try again Schoolboy errors nearly there yeah we're going to be moving on to something completely new it's um ESP now it's called it's um it's um a Communications protocol between esp32s that's what we're going to be moving on to after we've done these two um videos this one and obviously the carrier but yeah that's what we're going to be doing ESP now it's alessif's or else ifs owner communication protocol so uh yeah we'll be communicating between esp32s it's a good way of setting up a home network you're using esp32s right how are we doing yeah okay so far so good so far so good right well thanks for watching guys thanks um hopefully I'll see you in the next video to carry on this I don't want the videos going too long the last few videos have been very long right so again thanks for watching give us a thumbs up please don't forget to subscribe okay and I'll see you in the second half bye-bye

Channel: LETS CODE FOR THE OLDER FOLKS

Views: 1,764

Keywords: esp32 & web forms, esp32 html web server, esp32 html form, esp32 html page, esp32 html server, esp32 tutorial, esp32 web server, esp32 project, esp32 tutorial for beginners, esp32 http get request, esp32 projects, esp32 projects home automation, esp32 and web forms

Id: IbHSFJo2nvQ

Length: 30min 19sec (1819 seconds)

Published: Wed Sep 20 2023