PHP Ajax Crud using JQuery UI Dialog

hi friends this new video tutorial on PHP scripts with Ajax and query here we will display PHP crud operation by using CH query user interface dialog widgets we will how can we use query dialog widget for insert update delete of MySQL table data by using PHP script with Ajax we have already discussed speech P Ajax crud operation by using bootstrap modal but there are many developers who want to use query dialogue modal instead of bootstrap modal then it's the time this tutorial will helpful and it is easy to understand so if you have developer then you should know every things so we have make this simple tutorial in which we will learn how can we use jQuery UI dialog widget for form operation with PHP and Ajax so this is our testing database and in this we have one sample table with three table column like it first name and last name in this table we will do crud operation like create read update and delete data by using PHP with Ajax this is index page of our working folder and here first URL CH query user interface style sheet link second is for bootstrap stylesheet link third is for query library link and last URL is for CH query user interface javascript library link first we want to display my SQL table table on web page one page has been load so here we have defined one division tag with attribute it is equal to user data for load day two under this division tag we have go touch query code part and here we have make load data function this function will fetch data from table and display on the division tag with is equal to user data under this we have start right Ajax requests and under this first we have right URL option set to fetch dot PHP here we have send request to this URL in second option we have right method which method we should use for sent data to server so here we have used post method lastly we have write success callback function this function has been called if request completed successfully and it will receive data from server under this function we have write dollar with division tag it user data with HTML methods and under this we have write data this code will displayed a two under user data division tag now we have moved to write PHP code so for this we have to make database connection so we have write dollar connect variable is equal to new per class object with three argument in first argument we have write MySQL host set to localhost and database name set to testing username set to root and password set to blank after making database connection now we have go to fetch dot PHP page and here we have write include statement with database connection dot PHP file this will make database connection on this page below this we have right dollar query variable is equal to select star from sample table after this we have arright dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this will make query for execution for execute prepare statements we have right dollar statement variable with execute method this method will execute query now we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution result after this we have write dollar total row variable is equal to dollar statement variable with row count method this method will return number of rows in query execution result below this we have write dollar output variable is equal to HTML table definition width for table column like first name last name edit and delete now we have right if statement and under condition we have right dollar total row variable value greater than zero if this condition true then it will execute if block otherwise it will execute else block of code suppose above condition false then it will execute else block of code and under this way of right dollar output variable and in this we have a pen table HTML code with data not found message but suppose above condition true then it will execute if block of code and under this block we have write for each loop dollar result variable as dollar row variable under this loop we have a right dollar output variable and in this we have a pen table HTML code like open and close table row tag between this tag we had right open and closed table data tag and between this we have rice dollar Oh first name variable same for last name data we have right open and close table data tagging between this weave right dollar row last name variable in third table data tag we have right button type is equal to button name is equal to edit class is equal to edit and it is equal to dollar Rohit variable here we will use edit classes selector in query code and particular day to add value we will fetch from MIT attributes in last table data tag we have defined delete button so here we have right button tag with attribute name is equal to the leet and class is equal to delete and it is equal to dollar Rohit variable same thing here we will use delete class as selector in query code and particular day to add value we will fetch from MIT attributes so here we have store all data in dollar output variable in HTML table formats now we want to send this data to Ajax request so we have write echo statement with dollar output variable now we have go to index page and here we have called load data function so when page has been loaded into browser then this function will called friends here when page has been loaded into browser then we can see sample table day 2 on webpage with edit and delete button now we want to add new data using CH query dialog widget so we have go-to index page and here we have right button tag with type is equal to button name and it is equal to add by clicking on this button which query dialog with form will pop on web page now here we have right division tag with it is equal to user dialog and title is equal to a data we will initialize each query dialog widget on this tag and that dialogue title will be the sad data title of division tag under this we have right form tag with attribute method is equal to post and it is equal to use a form under this form first we have write input type is equal to text name and it is equal to first name we can enter first name details under this tag below this we have write span tag with it is equal to error first name under this tag we will display validation message same for last name we have right input type is equal to text name and it is equal to last name we can enter last name details under this text box for display validation error of last name textbox here we have write span tag it is equal to error last name now here we have right input type is equal to hidden name and it is equal to action and value is equal to insert we will use value of this variable of server-side script to define operation like insert update delete below this we have write input type is equal to hidden name and it is equal to hidden it under this tag we will store it value lastly for submit form data we have write input type is equal to submit name and is equal to form action action and value is equal to insert by click on this button we can submit form data now we have moved to write query code and first we want to initialize query dialogue so we have write dollar with division tag Eid use a dialogue with dialogue method this method will initialize query dialog widget on defined division tag and under this we have first write auto open option set to false this option will Hodge query dialog box when page load and in second option we have set dialog box with 400 now when we have click on that button then query dialog box with form must be pop on webpage so we have right dollar with button lead ad with click event so when we have click on that button then this code will execute under this first we have right dollar with division tagged user dialog with attribute method with two argument like title and add data this code will search query dialog box title with text like add data after this we have write dollar with hidden tag add action with value method and under this we have write insert this code will set insert as value to action hidden tag below we have write dollar with submit button mid form action with value method and under this we have write insert this code will set value of submit button lastly we have right dollar with division tacit use a dialogue with dialogue methods and under this we have right open this code will pop up dialog box with form on webpage friends first we have refresh page and click on that button so when we have click on that button wrench query dialog box has been pop up on webpage for submit form data we have gota index page and here we have write dollar with form lead user form with on method with submit event so when we have click on submit button then this code will execute under this first we have right event dot preventdefault method this method will prevent to submit form data to server below this way have defined two variable like arrow first name and error last name with blank value now we have right if statement and under condition we have right dollar with textbox it first name with value method is equal to blank this condition will check if first name textbox has no value then it will execute if block otherwise it will execute else block of code suppose above condition true then it will execute if block of code and under this we have write error first name variable is equal to first name is required text after this we have right dollar with span tag Adair first name with text methods and under this we have write our first name variable it will display this message below text box below this we have right dollar with text box at first name with CSS method this code will change text box border color to red but suppose about false then it will execute else block of code and under this block we have right here first name variable is equal to blank value after this we have right dollar with span tag adair first name with text methods and under this we have right here a first name variable it will remove error message from span tag and below this we have right dollar with textbox it'd first name with CSS method this code will change textbox border color to its original color now we have right if statement and under condition we have right dollar with textbox said last name with value method is equal to blank this condition will check if last name text-box has no value then it will execute if block otherwise it will execute else block of code suppose above condition true then it will execute if block of code and under this we have write error last name variable is equal to last name is required text after this we have write dollar with span tag Adair last name with text methods and under this we have write error last name variable it will display this message below textbox below this we have right dollar with text box Sid lastname with CSS method this code will change text box border color to red but suppose of and false then it will execute else block of code and under this block we have right arrow last name variable is equal to blank value after this we have right dollar with span tag Adair last name with text methods and under this we have right our last name variable it will remove error message from span tag and below this we have right dollar with textbox SID last name with CSS method this code will change text box border color to its original color now we have again right if statement and under condition we have right here first name or last name variable value is not equal to blank if this condition true then it will execute if block otherwise it will execute else block if the buff condition true then it will execute if block of code and under this block we have write return false that means form data will not be submitted but suppose above condition false then it will execute else block of code and under this block we have write dollar with submit button mid form action with attribute method under this method we have write disabled and disabled this code will disabled submit button for restrict to double click on submit button below this we have right form data variable is equal to dollar this with serialized method this method will convert form data into URL encode its string now we have start right Ajax requests so under this first we have right URL option set to action dot PHP page here we have send request to this page in second option we have right post here we have used post method to submit form data to server in third option we have right data option and under we have right form data variable in which we have store form data in URL encode its string lastly we have write success callback function this function has been called if request completed successfully and it will receive data from server under this function we have right dollar with division tag you'd use a dialogue with dialogue methods and under this we have right close this code will fade out at date a dialog box from webpage now we have we have defined one division tag with attribute it is equal to action alert and title attribute is equal to action under this we will display success message on webpage we want to initialize query dialog box on this tag so we have write dollar with division tag addiction alert with dialogue method this method will initialize query dialog box on this tag now we have go to success function and here we have right dollar with division tag eed action alert with HTML method and under this we have right data variable below this we have right dollar with division tag heed alert action with dialogue method with open argument this code will pop query dialog box for display success message on webpage lastly we have called load data function this function will display fresh data on webpage now we have go to action dot PHP page and on this first we have write include statement with database connection dot PHP file this code will make database connection after this we have right if statement and under condition we have right is set function with dollar post action variable this condition will check if this variable value is set or not if value is set then it will execute if block of code and under this block we have right if statement and under condition we have right dollar post action variable value is equal to insert if this condition true then it will execute if block of code and under this we have right dollar query variable is equal to insert into sample table with table column like first name last name with values get from dollar post first name comma dollar post last name variable after this we have a write dollar statement variable is equal to dollar connect variable with prepare statement with dollar query variable this will make query for execution for execute prepare statements we have right dollar statement variable with execute method this method will execute query lastly we have right echo statement with message like day two inserted this message will be Papa pundit query dialog box now we have saved this code in check output in browser friends first we have refresh browser and now we have click on add button after click on add button each query dialog box has pop up and a browser in dialog box we can see simple form for at first and last name data field so we have directly click on insert button after click on insert button we have received validation message like first name and last name is required so we have enter data in first name field after this we have click on insert button so we have again received last name is required so now we have enter data in last name field and click on insert button after click on insert button we form dialog box has been closed and day 2 inserted message has been pop-up and of query dialog box so this way we can insert data into my SQL table by using query dialog box now we have moved to write code for edit or update data so we have go-to index page and here we have write dollar document selector with on methods and under this we have right-click event with edit button class edit so when we have click on edit button then this code will execute under this we have righted variable is equal to dollar this with attributed this code will fetch value from it attributes below this we have right action variable is equal to fetch single we will use value of this variable in PHP code now we have start right Ajax request for fetch single data under this first we have write URL option and under this we have right action dot PHP we have send request to this page in second option we have right methods set to post we have used post method for send data to server in third option we have right tato and under this option we can define which states are want send to server so here we have define it an action variable in fourth option we have right data type under this option we can define in which data format you want to receive data so here we have write some lastly we have write success callback function this function has been called if request completed successfully and it will receive data from server under this function we have write dollar with textbox it first name dot value method and under this we have write data dot first name this code will first name textbox with data same way we have again write dollar with textbox add last name with value method and under this we have write data dot last name this code will filled last name textbox with data now we want to change dialog box title from add data to edit data so we have right dollar with division tag lead user dialog with attribute method with title value set to edit data after this we want to change value of hidden action-filled value from insert to update so we have right dollar with hidden tag add action with value method and under this we have right update now we want to assign it field value to hidden field with it hidden field so we have right dollar with hidden tag yet hidden it with value methods and under this we have righted variable same way we want to change submit button value from insert to update so we have right dollar with submitted form action with value method and under this we have right update lastly we want to pop up dialog box form so we have right dollar with division tag add user dialog with dialogue methods and under this we have right open this will pop up dialog box with filled form data now we have go to action dot PHP page and here we have write its statement and under condition we have right dollar post action variable value is equal to fetch single if this condition true then it will execute if block of code and under this block we have right dollar query variable is equal to select star from sample table where it is equal to dollar posted variable after this we have right dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this will make query for execution for execute prepare statement we have right dollar statement variable with execute method this method will execute query now we have right dollar result variable is equal to dollar statement variable with fetch all method this method will fetch query execution result below this we have right for each loop and under this we have right dollar result variable as dollar aa variable this loop we have right dollar output first name variable is equal to dollar row first name variable same way we have right dollar output last name variable is equal to dollar row last name variable so this way we have stored data in dollar output variable now we have right echo statement which an encode function and under this we have right dollar output this function will convert PHP array to some string and send to Ajax request friends here first we have a refreshed page and now we have click on particular day to edit button after click on edit buttons query dialog box has pop up with filled form data here a title has been changed from add data to edit day two and submit button value has been changed from insert to update now when we have click on Update button then form data has been submitted and we have already write code for submit form data so now we want to only write PHP code for update data so we have go to action dot PHP and here we have write if statement and under condition we have write dollar post action variable value is equal to update if this condition true then it will execute if block of code and under this block we have right dollar query variable is equal to update sample table set first name is equal to dollar post first name variable last name column is equal to dollar last name variable where it is equal to dollar post hidden it variable after this we have arright dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this will make query for execution for execute prepare statements we have right dollar statement variable with execute method this method will execute query now we have right echo statement with day two update message so this message will pop up under query dialog box now we have check output in browser friends first we have a refreshed page and now we have click on particular day to edit button after click on dated query dialog has been pop up with filled form data so now we have changed first name textbox stay to and click on update button after click on Update button day to update query dialog box pop-up on webpage now we want to delete data so on index page we have defined one division tag with attribute it is equal to delete confirmation with title confirmation you we will initialize query dialog box on this division tag now we have right dollar with document selector with our method and under this we have right click event and button class delete so when we have click on delete button then this code will execute under this first we have righted variable is equal to dollar this with attribute methods and under this we have write it this code will fetch value from an attribute and store under it variable now we have write dollar with division tag we delete confirmation with data method with two argument in first argument we have righted and in second argument we have righted variable here we have past value of it variable touch query dialog box when we have click on deletes button and after this we've right dot dialog method with open argument for pop dialog box on webpage now we want to set property of query dialog box on division tacky delete confirmation for this we have right dollar with delete confirmation with dialogue method under this first we have right Auto open option set to false and modal option set to true under this we want to display two button like okay and cancel when we have click on cancel button then on action has been taken and dialog box will be clock but when we have click on OK button then data will be deleted for this display buttons we have right buttons option and under this we have right okay button with callback function and cancel button with callback function you first we have right action for cancer button so in cancel button callback function we have right dollar this with dialogue method with closed event this will close dialog box now under ok button callback function we have righted variable is equal to dollar this with data aid this code will fetch value from day two it variable below this we have right action variable is equal to delete we will use value of this variable in PHP code now we have start right Ajax request so under this first we have right URL option set to action dot PHP page here we have send request to this page in second option we have right method here we have used post method for send data to server in third option we have right data in this option we can define which data we want send to server so here we have define it an action variable lastly we have write success callback function this function has been called if request completed successfully and it will receive data from server under this function we have write dollar with division tag you delete confirmation with dialog method with close argument this code will closed query dialog box after this we have write dollar with division tag Eid action alert with HTML methods and under this we have write data this code will fill dialog box with data received from server below this we have write dollar with division tag Eid action alert with dialogue method with open argument this will pop up dialog box on webpage lastly we called load data function this function will fetch fresh data from database and display on webpage now we have go to action dot PHP page and here we have write if statement and under condition we have write dollar post action variable value is equal to delete if this condition true then it will execute if block of code and under this block we have right dollar query variable is equal to delete from sample table where it is equal to dollar posted variable after this we have a right dollar statement variable is equal to dollar Connect variable with preparer statement with dollar query variable this will make query for execution for execute prepare statements we have right dollar statement variable with execute method this method will execute query now we have right echo statement with data delete text message this message would be display with query dialog box now we have check output in browser friends first we have refresh page and now we have click on particular data delete button after click on delete buttons query dialog box pop-up on web page with OK and cancel button so we have click on cancel button after click on cancel button no action has been taken and day two is not deleted now we have again click on delete button and query dialog box again popup on web page would ok and cancel button but now we have click on OK button after click on OK button later delete message has been pop-up on web page Inge query dialog box and remaining data has been display on web page without refresh of web page so this way we can insert update and delete my SQL table data by using query use an interface dialog box with PHP and Ajax by using this all feature we can make single page application because we have done all operation on same page without going to other page if you have any query regarding this video tutorial part please comment your query in comment box and if you like this video tutorial please share with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our youtube channel forget more update regarding release of future video lastly keep watching our youtube channel thanks for watching this video to you

Channel: Webslesson

Views: 64,754

Keywords: crud jquery php, jquery crud dialog, php ajax crud example, php pdo crud with Jquery and ajax, php pdo insert update delete, ajax jquery add edit delete in php, insert update delete without page refresh, php mysql crud tutorial, ajax crud with jquery dialog box, php pdo, ajax, jquery ui, insert, update, delete, select, add, edit, remove, fetch, ajax crud using jquery ui dialog, ajax crud using jquery dialog box

Id: MMCo3fO1kIg

Length: 38min 20sec (2300 seconds)

Published: Sat Mar 31 2018