How to do Simple CRUD Operations in WordPress with Elementor

hey everyone this is tony teaches tech i'm tony and in this video i'm going to show you how to do basic crud operations in wordpress now if you're not familiar crud is an acronym that stands for create read update and delete and by the end of this tutorial you will have a basic web page that allows you to do those four operations so what we're going to do is we're going to use the elementor pro plugin to design the user interface the front end and then we're going to use a combination of custom php functions and the elementor forms api in order to send the data that the user enters in the front end over to the database server process that data and insert it into a database now as far as the database is concerned i'm going to be using a mysql database i'm going to assume that you have some sort of access to the mysql database whether that's on the command line like i have or through something like phpmyadmin you will need some sort of access also to your server whether that's ftp or ssh in order to create your custom php files but other than that i think we can go ahead and get right on into the tutorial here okay so the first thing i want to do is to design the web page that's going to handle all the crud operations so what we're going to do assuming that also you have the the elementor plugin installed in the elementor pro plugin installed you will need both of those in order to add some widgets to our page which you'll see in a bit so with that installed let's add a new page to our website and we're going to edit this page with elementor but i'm going to call the this page let's just call it crud and that'll give it a permalink of oh that's one other thing that we want to change so as far as our permalink settings let's go into settings and reading let's make sure i'm sorry settings.permalink and make sure you have post name structure so that you have the name of your page after your domain name so save those changes and then come back to the pages page and we'll add a new page and like i was trying to do before let's create a page called crud um and it's going to get the url slug the permalink crud and we will publish that so publish that and then we'll edit it with elementor and that will open up the elementor dashboard editor and the one thing i always do is get rid of this title so we can do that under settings and for high title just toggle the switch and that goes away okay so let's design this web page what we're going to do is essentially have a header and the place where the data is going to be displayed and then a form at the bottom so let's go ahead and set that up so we'll throw a header in here and we'll just say something like add new records below okay so that's good for that and then um i'll do the form next now i'll do so the reason i'm kind of trying to figure out what i'm doing here is we're for for now we're going to just drag an html element into our page which is going to eventually contain the table where our data is going to be displayed we're not going to do anything with this right now but when we do come back in here we'll type in our html markup code over here so that's what that's going to happen but just for now it's a placeholder we'll come back to it later okay and then the third element on this page is the form so let's look for the form widget and we'll drag that in and in the form let's make our form so this is a good place to talk about uh what we're actually going to be doing with this these credit operations so i'm going to keep it very simple we're going to have the user have the ability to enter somebody's name a score that they got like a grade so like a 100 65 75 something like that and then just a button to submit that data and then ultimately what we want is that data to show up in a table the name the score and have the ability to edit those values and which is update in crud and then delete those values which is the the d incred the delete operation so let's build that form we don't want this message we can kind of utilize some of this let's get rid of this message field um we will we'll keep everything uh for name as far as the metadata is concerned we just want to make sure that the id is named over here and then we will change the column width to 40 percent and then i think that's good for the name so for email let's just modify this a little bit we will have this be of type number if i can find a number here you go because we're going to type the score in here we'll change that to be score score and the min value could be zero and the max value could be a hundred like between zero and a hundred percent column width will be 40 as well and you'll see that goes onto the same line and under the advanced tab let's change the id from email to b score okay um that looks good and then let's go down here to the button section instead of the send button the send text for the button let's say add and for the width of the button let's make that 20 so that everything's on one single line here okay that looks good actions after submit let's get rid of the email action we don't want to do anything after we submit and then additional options so right now when you click on this you'll see some the add button you'll see some default messages pop up you might be familiar with that let's turn on custom messages and get rid of all of these values so we don't see anything like that okay so we'll update that and then we will open up a new tab go to our domain name which is site1.xyz crud to preview the page and this is what we have right now so we just have the heading here the ability to type in some data so let's just do a test run tony got a 75 we'll click add and nothing happens because we haven't really implemented any logic right now so um as far as the design is concerned that's good for now we'll come back over here and we'll actually come back in here a little bit later like i said to add some additional html code in order to display the table okay so moving on to the next step let's go ahead and create the database that's going to hold the data that we that the user enters into the form so this is where you're going to need some that type of access to your mysql database um like i said i'm going to use the command line to do that so i have a terminal window open here i'm going to log into my server via ssh and in here what i can do is i can access my mysql command prompt with my sql dash u for user my username dash p for password and i'll type in my password which is literally this is my password okay so in here what we want to do is to create a database and then create a table to hold all of our data so let's use the create database commands to create a database called phpdemo and then we're just just as a shortcut we can switch over from the perspective of the command line we're going to use the php demo table so everything after this point is going to be in reference to the database php demo and then what we're going to do is create a table so our table structure is going to essentially be a unique identifier the name of the the person that the user entered and then the score for that user so just three columns here so we will do the create table command and the name of the table is going to be demo table and then let's define those three columns so the first column is the name of the first column is id it's going to be of type integer and we're not allowed to have null for a value it has to have a value so we'll say not null and then auto increment and primary key that is going to allow this column to automatically be assigned a value so the first record that we enter is going to have a value of one the next record is going to have a value of two so on and so forth it's going to be automatically assigned a value that's what that all means okay so the name of the next column is going to be name and the type for this is going to be var char which is basically just a string that can be at most 50 characters and that's obviously configurable to whatever length you want it to be this one is also not allowed to be null so you have to have a value associated with it and then finally our third column is going to be a named score and this is going to be of type integer so we'll close that parentheses hit a semicolon hit enter and that will create that table now as you would expect if we do select star which is shortcut for select all columns from demo table you'll see that there is no data in the database yet we'll come back in here and take a look at that as we add data to the database okay so let's get out of this and i want to i want to talk about database credentials right now which is an important part of this this whole tutorial for a couple reasons and i just want to talk about security for a second because the root of our website right now let's let me show you that cd var www wordpress and here is our wordpress installation and depending on how your server is configured some of this stuff is accessible via the public right like the index.php file so it would be against best practices to store database credentials in the root it's just a easy security measure to store our database credentials in a level above your root of your website so let's go to the var www directory and make a file here called p or we'll make it called yeah excuse me we'll make a file here called database db.php and hit enter and this is going to be some basic uh couple lines of php code here we're going to open and close our php tag and we're going to tab over here we're going to define a variable called con okay and what we're doing here just to explain it is we're going to define our database credentials in one file the database the db.php file and then we're going to reference this file anytime that we need to connect to the database in another php file so we can use the include keyboard you'll see that in a bit to reference these these database credentials so that way we can share this variable when we include that file from this file into uh whatever file we're referencing it so what we're going to do is use the mysql i php extension which is a really easy way to connect php to the mysql database and what this takes as an argument it takes a few arguments is the hostname of your mysql database which in this case is a local host because our database is hosted on the same server as our website this could be a remote host somewhere um the next one is your username for me that's tony the next argument is your password for me that is this is my password and the last one is the table that you're going to be working with and for us that's php underscore demo okay so that looks good let's save this and hit enter so now in just remember we have inside of var www we have a file called database.php which we can reference in other files okay so what we want to do next is to now that we have the database stuff all set up let's handle when the but when the user actually clicks the button add so that'll be the c in crud for create we'll come back here in a bit but what we want to do is actually go into wordpress okay into the uh we're going to edit our theme inside of wordpress so let me open up a new tab here site one dot x y z slash wordpress admin and what we're gonna do is go into appearance and actually let me just show you the theme that i'm using is hello i have the hello child theme installed which is a good practice when you are editing the theme directly so that you don't actually edit the theme directly you edit the child theme instead so let's go to appearance theme editor and you'll get this warning that says don't you mind screw things up click on i understand just make sure you're using your child theme here it's it's it's okay if you edit the the main theme directly but you can potentially screw things up so recommend the child theme click on themefunctions.php and down at the bottom i want you to put in some code that looks like this so this is direct this is pretty much mostly directly from the elementor forms api and this this taps into when the user clicks on let me show you when the user clicks on the add button because this is an elementor form this code on the server will be executed and what we can do here in what we actually are doing here is we're collecting the form fields that were the values of the form fields that the user entered and putting them into a variable called fields okay and then we're taking that fields variable and passing it on to a php file that we haven't yet created so we're going to go ahead and create this this php file called create.php next in in a sub directory called api so again where you order on the local hostesses could be something remotely an api somewhere remotely but we are having this all on our local system so um that's where this url comes in and then we're passing those fields specifically the name and the score that the user entered into that php file which we're about to create so hopefully that makes sense let's go ahead and save this file so now again every time that the user clicks the add button this code will be executed we're going to take those values pass it on to a file called create.php in an api directory so let's open up our terminal window again and go into the wordpress directory which is the root of our website and make a directory in here called api and inside the api directory we will make a file called create dot php hit enter and what i'm going to do is paste in some more code over here to handle the create the um uh when the user clicks on the add button so post request okay so there's there's two different types of requests in html one is a post request one is a get request we're gonna use both of those in this tutorial in this case the elementor form by default takes the data and moves it to the server via a post request and then let me just move this out of the right real quick and then we take that data yet again and post it from our server this the specific function on our server and we pass that data via the fields variable again via post request to the create.php file which is in the api folder so that's what we're defining now and um we get the name that the user entered and the score that the user entered and we're assigning those into the name variable in the score variable then we are defining the sql statement that we're going to execute so insert into the demo table into the columns name and score the values that the user entered for the name and the values that the user entered for the score so um the one thing and then we're going to execute that query i didn't i did not mention here the second line is we're including the database credentials that we defined in the var www directory which gives us access to that connection variable that we define so that's how that all kind of comes together hopefully i did a good job of explaining that but that's essentially how we're going to take that data that the user entered in the front end in the user interface pass it on to the server and then pass it into the database the final thing that we're going to do here is close that connection so let's save this file and what we should do at this point what i'm going to do is log into the my sql server again do a select all we're going to have to use the php demo database and then select all from demo table again we have nothing in that table but i want to show you in real time how we are able to populate this table so let's go to our web page here i will refresh the page and type in tony we'll give them a score of 78 hit add and now that data has been passed up to the server and then the server takes that takes that data and inserts it into the database so if you look at uh select star from demo table we will now see that we have a new record into our table and the name tony the score 78 and like i was talking about the id column the automatically assigned id of one because this is the first record okay so that takes care of create what we need to do now back in the user interface is show that that data has been inserted into the database and that is going to be the r in crud so we did create the next one is r for read so we want to be able to read that data from the database and we're going to do something kind of similar in order to have that happen we're going to create another file on our server called read.php and we have to add a little bit more how should i say it's a little bit more html and javascript to the user interface in order to be able to display that so let's work on that next back in the elementor editor we're going to type in some html code here and it's really more than html code it's a combination of html and jquery okay so jquery gives us the ability to um perform actions to the webpage without reloading the page it should make sense when we go through it here in a second so i'm going to copy some code into here and again with the the html element that we added earlier with that selected um we'll have this following code and let me make this a little bit bigger just so can we make it yeah we can make it bigger all right that looks good all right let's go through some of this code here actually we'll go through it all um like i said we are using jquery here so the first line here the first two lines or yeah the first line here is including the jquery javascript library and like i said that gives us the ability to modify the html page without reloading it okay the last i'm going to skip over the middle section but the last section here is defining a table an html table element with an id of records we're going to reference that in a bit just remember the table here it's an empty table right now but the table has an id of records and then in the middle here we have one jquery function another jquery function and then a javascript function so both of these jquery functions reference the javascript read function and what this does right here what this first one does is when the user clicks on the submit button we're going to call the read function the second one here when the page is loaded we're going to call the read function and then what does the read function do well it's going to use it's going to reference our the file that we're about to create our read.php file and execute that and take the data that it sends back to us from the server and apply it to the html element with the id of records okay and if you remember that is the table that we defined down here so again right now we have an empty table what we're essentially going to do when we click on the button or when we load the page again when we click on the button or when we load the page we are going to call the read.php function on the server that's going to dynamically generate the table data all the rows in the table and assign it to the table html element okay if you're with me let's go ahead and click on the update here to apply those changes inside this html element and let's go define read.php on the server so we will open up our terminal window again where is that terminal window there it is okay so we'll open this up we'll get out of our mysql command prompt and we're inside the api directory so let's make a new file in here called read.php and i'm going to copy and paste some code in here similar to before we have a php block and the first line here we're including those database credentials again we are defining our sql statement kind of like we did back over here um just before select star from demo table so we're getting all the records from the demo table and we're assigning them to a i'm sorry we're just this is just a string at this point uh we're executing this sql command in this line that we defined here and then we're taking all of those records and assigning them to a result variable and then we are essentially dynamically creating html for the rest of the file so we see our table body open here and our table body close down here and then for each row in the mysql database we're going to add the table row open tag and the table row close tag and then we're going to have a couple columns in here so we have the first column is the name so this is the name that the user uh originally typed into the form so we have the name the score is the second column and then we're gonna have an update button and a delete button and we're going to come back here and take a little bit deeper look at these for now but just know that they exist okay they're not going to work right now but just know that they exist and then so we're going to do that for each row and then at the final line in this file we're going to close the connection to the database so let's save that and come back to our web page and since we saved this too we can come back here and refresh the page and what we should see is everything kind of fall in place so when we refresh the page we should see the record that we originally entered for tony show up on the page so let's let's test it out hit enter to refresh the page and we do see that pop up here so tony gotta score 78 and then you see our update link i should call it an update link and a delete link so there's our record now any future record that we add should show up immediately because remember we had set up that jquery to when we click on the submit button we should reload the page with the new data from the database so let's try that out let's say andrea she's got a score of 90. we'll add her to the table she shows up right away just like we expected and then we'll do one more janelle got a score of 95. add her to the table she shows up just just as well too okay so crud create we did that read we did that what's next update and delete so let's work on update now um updates a little bit more complicated than all the other ones because it's kind of like a multi-step process because these these fields that we want to update here are read only right now and in order to update them the user is going to have to click on the update link first and then we're going to have to transform the row that the user clicked on to a form to make it editable then the user is going to have to edit the field and then the user will have to save those changes by clicking on another button or another link so it's a little bit more complicated but it's doable so i'm going to walk you through the process of how to do that after i get a drink give me one second here all right guys i'm back i do a lot of these videos like i record a whole bunch of videos in one day and this is one of the last videos that i'm recording probably the last video that i'm recording today um so my voice is a little bit exhausted and that's why i needed to drink anyway um it's orange and strawberry infused water if you're curious why it looks like the way it does okay back to the tutorial here um we are going to start implementing an update so in order to do this we need to know what row we clicked on and the best way to do that is to and we actually already kind of started through the process of doing this so when we click on update right now you'll see uh that it takes us to the same page but up top here it's gonna have a get parameter a key value pair with this question mark id equals two so that means that we clicked on the the row with id of two if we clicked on the janelle rowe that takes us to the same page but with ido3 that's just a way so that we can distinguish which which row we clicked on and we kind of glossed over it before but if we look at read.php this is this update is indeed a link as you can see here a href a link to the same page with an id of the row that was clicked on so that's how that all kind of fits together with that information we can do something inside of the elementor html form with that data so let me show you what i mean by that inside of here instead of going to read.php directly what we want to do is to tack on that get request so it's basically going to look like read.php question mark id equals something so that way we're going to take that get request and pass it back to the server so that we can do something special for that row on the server so let's implement that what i'm going to do is to create a function here and it's called get read url and what this is basically going to do is take a look at the url as it exists and if it has um an id value in the url we're going to take the old url which was api and it's still down here api read.php and tack onto it the question mark id equals the id value and then we're just going to return that url to the caller so instead of this value down here that'll be url and that's going to be var u r var url equals get read url so that's kind of how that works so again we're going to look at the current url and if there's an id in it kind of like we just looked at before we're going to tack that on and then use that url to pass it to the read function now with that information in the read function as a get parameter we can do something different for the the row that we clicked on the update link so let's do that next let's open up the read function again and let me let me type the code and it'll make a little bit more sense as i can walk you through it so there's going to be two cases right so one case and this is where it gets a little bit complicated like i was saying one case is the normal case which is the old code down here where we show just the non-editable row and then the other case is this new code that i just typed up here which is a form element so we have a form ins so we have our typical and i see actually yeah i see a these two should be switched around one second bear with me here i'll make a little bit more sense when i fix that okay so we have our typical table data here it's going to span three columns and that ends down here and then we have our form that starts here and ends here okay so our form is going to contain a text input for the name and it's going to default to the name that the current row has and then a number input for the score and it's going to default to the score and then we're going to have a submit button for that um and actually i do see one more addition that we should have here i'm glad i'm figuring this out as i'm recording the video this should have a table row open and a table row close okay so again this is just creating a form and the thing that i didn't specify yet is if we have that get parameter for the id matching the current row in this for loop so only on the row that was clicked on will we show the form everything else is the same so let's save that and see if that works out so we'll minimize this and we'll go to our page here we will get rid of that for now we'll just go to our domain name crud hit enter now let's test it out we can click on andrea's row here click on update and you'll see now instead of instead of seeing the non-editable columns we see their form where andrea's here 90 is here and we can save right now if we click on save it's not going to do anything because we haven't implemented any logic but i should point out what save actually does so for now if you click on the save button which submits the form this is going to again use the post method and call a function on our server or the file on our server update.php which is what we're going to define next so let's um save that and make the update dot php file and that is going to look something like this similar structure to before we're including our database credentials here we're getting the id the name in the score that was that the user changed in that row and then we have our sql command update demo table set name equals to whatever the the value of the name is score whatever the value of the score is where id equals the id of that current row so that's how we make the distinction between this row and any other row with the id we're going to execute that query and then close the connection to the database the last thing we're going to do here is to in the in the response header back to the from the server back to the client we're going to make sure that the user stays on the the current page the cred page so that way he's never going to know that we went to the um the update page the update.php so that looks good let's save this and i just want to check in here to make sure that it oh i did forget to tell you that we had one more input type of hidden down here with an id of a name of id and and what this does is allows us without the user ever knowing that there's an id associated with this row uh we're just going to add that on to the form so that way when the form submitted we have access to the id in update.php which is right here okay hopefully that's making sense let's save that and let's test it out so we'll minimize this and again we'll get rid of any parameters in our url we refresh the page test it out from square one here so we'll edit andrea let's say instead of a 90 she got a 93 we'll save that and now you can see that that data has been updated andrea now has a 93 we will do janelle let's say she changed the way she spells her name from uh janelle with two l's to just one l and her score stayed the same so let's save that and you'll see that that has been now updated and and the cool thing is in and this might be obvious but if we look at uh in our my sequel server again if we select star from demo table this data oops we have to use php demo select star from demo table we'll see that this data is being updated in the database because of all the functionality that we defined so um just wanted to point that out just so we're bringing this full circle okay create read update the last thing we have to do is delete so we have our delete link over here it doesn't do anything right now but let me point out to you guys that um we have started the functionality a little bit here so our delete link is defined right here and again it's kind of like uh update so we're going to call a delete.php function file which we have not defined yet we'll define that next and we're going to give it a get parameter key value pair id equals the current row so same concept as before so let's make that file delete dot php and i will paste in that code and that looks very similar to before we're going to include our database credentials we're going to get the id that we passed up via a get parameter and then we're going to execute the delete from demo table where the id is the id that was passed in execute that query close the connection and make sure we stay on the current crud page so we'll save oops so we'll save those changes minimize this refresh the page and now we should be able to delete any one of these rows and because we are re-reading the page every time that happens um that row should go away so let's go ahead and delete janelle she's gone delete tony he's gone delete andrea she's gone and we can use the similar functionality uh let's make a new one let's do john he got a 100 and uh joe got a 58. so create read update delete crud this is how you implement it in wordpress it's just one way to implement it in wordpress with the elementor plugin guys if you have any questions about this let me know in the comments below if you want to go a little bit more in depth into this i actually created a video on how to do this with um php raw php uh no wordpress or anything like that so check that out over here if you're interested in learning a little bit more thank you guys for watching please give this video a thumbs up and subscribe to this channel for more videos and if you do i'll see you in the next one you

Channel: Tony Teaches Tech

Views: 14,608

Keywords: elementor crud, wordpress crud, wordpress save form data to database, how to save custom form data into database in wordpress, wordpress custom form save to database, wordpress form to database tutorial

Id: poYpLnYOp3g

Length: 36min 42sec (2202 seconds)

Published: Thu Jan 28 2021