PHP Ajax CRUD Application Tutorial - MySQL & Bootstrap & jQuery DataTables [Part 1]

Recently I have got a lot of comments on how to make nice user interface we are able to add edit delete and view the data from the MySQL table so I have made a decision to create three part video series where I will show exactly that and since this is the first part in this part I am going to show you how to design web side in bootstrap how to add data to the MySQL table and also how to get all the data from that table so stay with me hey what's up guys Senaid here from codingpassiveicome.com the place where I help others to become a web developer much easier and faster then they will do it on data so that is something that interests you consider subscribing so now I'm here at my PHPstorm and created a new project and also I've created a new index.html file so first thing that we need to do is to include bootstrap libraries and also jQuery library that you need for the small project so I will go to getbootstrap.com click on the donwload bootstrap and he I'm just going to use those links to include the libraries ok so the CSS library I will paste just before closing head tag and the Javascript bootstrap library I'll paste does before closing body tag like this and also we will need jQuery library and I will get the one from the code.jquery.com so I'll click here the minified and copy this okay and this need to be pasted does before bootstrap library so I will quickly do this okay and here I'm going to just write the basic design for our project so we will first make a container it's required by bootstrap and inside this container will have one a row and in this row I will say to have one column-m-d8 and I will set an offset to the 2 and this should make as a result to position everything in the center of the screen and that's it so inside here we will have one button so I will say input type button I will say class will be btn btn-success value will be add new and for now that it later will make the functionality let's see what we have okay so here we go so let's say for our container I will set style-margin-top 30 pixels let's say you have one page two with the name MySQL table manager and let's say this button I will position to the right of the screen and let's see so here we go after that we are going to have one table where we will display old data so I will say table class table table I'll make hover and table-bordered so those are all the classes from the bootstrap and industries I'm not going to talk too much about those I will have another tutorial that goes deeply about bootstrap design and in this table I will set table head select the head you'll have one row first column this will be ID the next column will be let's say name for me the better country names and in the next one it will be options and inside this option column we will add edit view and delete for each row so that's it let's make a test so let's move this table I will be done okay so this is pretty much looking good so now once you have the basic design for this tutorial I'm going to create a new database inside my PHP my admin' so see here MySQL data manager I'll set the utf-8 unicode c3 and I will set table say country so first row it will be first column will be ID integer autoincrement and that's it the next one will be country name I'll set it to the varchar 20 for example the next one will be short description about this country I'll set the text and the next one will be long description about country all set to the long text and let's save this so that's it ok so now our goal with this project is that when someone click on the add new button or later we will have edit view and delete we will display a small modal pop up and the the user will be able to manipulate a date so first we need to design that model pop up so I will say here this I will set ID to the table manager and I will set class to the model fade and but should be fine the next part we are going to write actually the body so this dust I said this so I can display later from the date way so he I will say model yelped and he would need to set small heater little set model body and let's say will have small foot end of it so let's in this model put some title later we are going to manipulate but for now let's say it will be <h2> and let's say class will be model title and he will say country name in the model footer who does have one button but if you want to save all the information so I say my base class they can begin success and that should be fine and inside the body we need to display some information so I will set you will have one input type will be 'text we will set called class the form dialogue and let's see placeholder will be country name and we also need some ID for this subset country names ok break here I will since in the table we also have short description and long description so I will put our two text areas so I can see again for dialogue I'm in short description placeholer short country description and but it right at the end output break and how that duplicate is and that's it to the long description alright so let's see what we have right now refresh and as you can see this model is hidden it's not visible on the page but for the button add new let's put on click method and you'll see add new we'll call that function and give of the script type text/javascript and I love this work document.ready function and instead of making one click I will just change this to the ID and and inside this jQuery function we will wait for complete document rule and after that we will set and on click event on this add new button so say here addnew.on click function and here I will just say table 900 got more show and let's not dead this functionality so add new and as you can see now we have some design but obviously I have made somewhere small mistake so let's see what is wrong so here I have forgot to put this here class model content and I am going to move this on the footer okay like this so let's make a test again and you and now it is looking really good we have country name we will mind with this with the Drake query and here we have some options and we have button C which doesn't work at the moment so let's so I started to improve this anime small stake here I said dialogue but it seems to be control so let's make a test to fresh and new and not this is worth much nice okay so now let's make functionality for this Save button so when someone press this Save button let's say we are going to call the function to save and not here or maybe it's better to make this function ask manage data and let's write this function function to manage the impact and let's say that this function will receive one parameter so that we know what we are going to do so say like key and by that inside a text file that we are going to create it will know what is the Ajax code that we are making at the moment and heal that key will be Ed new so we are going to make an a first let's check to be having any information inside those three so like this and here I will first say war name equal country name and let's see short description and let's make long description and not let's test if name dot o people and two it means if there isn't any name for this country then we are going to select this and we are not going to make an a tax code so the sake name.CSS and we'll say bottle is one pixel solid red and you will say return it means you'll stop executing this code so let's try and you save and as you can see now it is green okay and the same thing we are going to do for the other two so we can say he felt if show description okay and here I got the same thing for the long description okay and health if Alton is okay we will does a name dot CSS border is H and we are going to do the same for show description and put a long description okay for maybe we should move this to the function this way as is a mnemonic technique test so save country and there's a mistake if you write something here click Save it selects again but the problem is as you can see now this input is selected to which means we should improve this so we can say maybe by this and same thing with books too maybe even if we write the function for this it will be even better so maybe the function will be very simple you will see trick beta and he will see core and we will just do this okay this is the best way to make heaven and here we'll just see my be cool and let's see what I want working here so we will test it maybe if is not empty so it is not empty name and is not empty for description and is not until long description you are going to do this let the are see so let's make a test and you say ok so now it works just fine say it is here and as you can see all red borders has minimal so this is just the best way to optimize this code and make it a lot nicer and easier to read so we have one function that is taking for the empty inputs if it's empty we will set the border to the red and it's not we will remove the border and return true ok so if it's not empty we are going to make an ajax call to the server so our URL movie let's say we are going to create a new page with PHP file so set method to the post data type will be texts and data will be dust key is key it will be the name it is name.val short description and long description and of course we need to have some success function response from sir so once we received the response from the server this part of the code here will execute so let's not that our response that to see what will happen and not let's create an ajax file and write the PHP code so I will say new PHP file ajax and here I will set safe improve see if isset post key which means if there is this key we are going to check keep since we are going to have multiple keys ignored orders making the one for adding new so if post key equal admin will able to this part of the code and first we need to make connection to our database connection=new mysqli and he will say localhost my username is root my password at moment is empty I don't have one but if you do have just make him and our dead business is just make sure it's correct is MySQL data manager okay so now let's first escape all the thing that we are getting from the jQuery so name = connection and I lose real escape string force name the same thing borders show description this and the same thing for the long description this is all to protect ourselves and now let's first check do we have any data with the same name in the database so say here as sql=connection query select let's say ID from country with country name in = name and let's make sure we have the call name correct yes country name so here if sql->num_rows > 0 turn we will say here the return to the jQuery country with this name already exists else you are going to insert so will say as well way insert country layers so he will see country name short description and long description and for the values will say country name show description and of course a long description exit country has been inserted so now let's make a test we have written a lot of the code so I hope so we done didn't make any mistake so refresh engine and he will say for example Austria should conscription long description safe and let's see what doesn't say great so problem is on line 15 correction gray sea like RV from countries where country nickel man came in here so I have seen it as well but it actually needs to be the connection let's try again Austria show this on description save and there is from again so I'm using clear country name but it needs to be the name try again and finally country has been insect ok so now if we go to out leave it now you can see that we have multiple but the first time we had a problem that this variable didn't exist so you can believe it they try again and that's it everything is looking good ok so now let's make the final functionality for this part of this product which is to list all the data inside this table so what they are going to do we can write the take where the PHP code directly here going you can write the code directly here but since we are already working with jQuery and not other things I will show how to do our occur the way to get all the data from the table so what I will do here is I will declare new function so the function get a linking data and this function will receive three parameters first on we'll be start and the next one will be Flint I would have used to without nutri okay and here I'll check with it's okay let's meet two parameters and I will say here are going to make ajax code again so may oh that's right okay hi this so this part here is the same so say like this and here this part same 2 okay so the data that we will send to the sever the kid will be get existing data so you have start that and alert when okay so and here all the response from severed will death attend to the table body I first wrote if response == reachedMax but no IDs you to table body append all the data on the response after that we will just increase our start for the length side and we are going to call the get existing data function again so why we have tables in the road they will just keep doing this and for those of you that are having problem with this on to understand what I am doing here I have just another tutorial where I will show how to get dynamically all the data from the table so make sure toward that video to better understand this concept so and allocate all the same path and now inside this ajax let's write this functionality so here I remove this part now here and here I will say if key = get existing data to only this so safety start oh okay and now we are going to tell do we have any rules so the SQL = connection query select ID country name from country limit start limit you'll see again get asked well number of rows because then here we will get a bit else you'll see exit reachedmax which will give to the tape very information that there isn't any more data inside this MySQL table and for that reason we are not going to make another ajax and if there is we will just get all the data cells use while complete data = sql fetch_array and here I will just concatenate full data together so say here we are going to have table row okay and inside this row I'm going to have one call some slicky by this so the first one is let's check our design so first one is I mean second one is country name so first I will append ID of that country to name and after that will append the buttons for which we are going to lay to make the functionality it is edit view and delete so let's try those sub button and reply this with victory the code for you guys value and class button button primary so the next one is to delete I will set button to danger and you'll help the ones you let's say little bitter but so let's see will this work probably not because we don't live in and call this function so let's do it here to get in this data and let's say we're starting from zero and we'll get say we are getting ten countries that 8 ajax code you can make it bigger material like to the plants on the table data so now lets me there's small mistake in ajax because here I didn't return the response okay refresh and as you can see now we have ID in tree we have country name its Austria and also we have some options here ok so at the moment those but that thought but in the next part we are going to make this functionality so guys I hope so that this tutorial is extremely simple and beautiful for you and I will suggest to you to watch the part 2 and 3 we will finish this small project and also if you have any questions feel free to ask in the comments below and if you liked this video please like it and share your friends take care

Channel: Coding Passive Income

Views: 56,517

Keywords: php crud, crud php mysql, php, mysql, database, php tutorial, jquery, tutorial, jquery tutorial, php crud bootstrap, ajax, jquery ajax, jquery ajax tutorial, phpmyadmin, tutorials, ajax tutorial, jquery datatable, php mysql crud, crud application, ajax crud, crud in php, crud, crud php, howto, learn, senaid bacinovic

Id: 27dgqvU2fZ8

Length: 37min 39sec (2259 seconds)

Published: Mon Aug 21 2017