Tip:
Highlight text to annotate it
X
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 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