jQuery and AJAX Tutorials 37 | Introducing jQuery UI Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilyas and
this is your thirty seventh tutorial and
in this tutorial we are going to make
something very cool and before I want to
show you guys a jQuery extension library
called jQuery UI and this jQuery UI is a
very powerful tool and you why stands
for user interface and it just provides
lots of snippets and lots of tools for
for your user interface you can have
these tabs for instance or accordion
accordion is this slider so you can
switch between the sections of a
document so you have lots of cool stuff
here and and you don't have to write too
much code because everything is already
prepared for you so if you view the
source you see that it takes only one
line of code but you just make sure you
at you append this jQuery UI source to
go to a web page and then you can use
all those nice functions for example you
just need to make sure to write the
correct HTML structure for it and then
you can just only apply this accordion
functions to to it and it will make nice
accordion out of it and of course you
already have you will also need to style
the element using CSS and stuff so
anyway and there's something we are
going to use from this jqr user
interface and this is something called
sortable
so what sortable is we can pick up you
can pick an element and like drag it and
drop it somewhere else but pick it and
drop it somewhere else so you can
probably can pretty much change the the
order of their appearance and if you
look at them using the developer tools
you will see that the sortable in fact
changes not only the appearance of the
elements of the screen but also change
the real structure it changed really how
they how they displayed on the
Paige you see so if I drag this element
from the bottom to the top it's being
dragged physically so in fact it's it's
being dragged and what we are going to
do with this we are going to make a tool
so that you can like drag for instance
this picture and leave it somewhere here
in the middle and drop it and then when
we drop it we will write a jQuery code
which uses Ajax which send which sends
the message to a server with this order
of this elements and the server will
have a PHP script which will save it and
next time when you go to this page and
you open it you will see the changes
you've made before and you don't have to
worry about the PHP part of this
tutorial because I already written some
code for it already a program has
changed at PHP and I also renamed the
index of HTML to index dot PHP so and
you would need a server to run to run
this page because otherwise the PHP it
just just cannot open it in your browser
locally stored in a computer you would
need a server for it so and what I also
did I cut out the portfolio list and I
put it to a document called list HTML
which is right here and that list of
HTML contains our portfolio entries so
you don't have to worry that there is no
Li elements anymore because I include
them using PHP so if I reload the page
you see that the elements are still
there and if I go to the source code of
the page will steel will still see them
right here so for the normal user who
doesn't have any access to your source
to PHP source code won't be able to to
see that this code is actually from PHP
and this code is in fact somewhere else
in an external document in our case this
is list dot HTML
so what the script will do this PHP
script will send a message to the
scripts going like hey server please
change the structure change the order so
I'll just basically store the order of
this of this picture pictures to a
variable and I'll pass this variable
using adjectives the server and the
server will distort the contents of this
variable into this list dot HTML and
this is the reason why I create an
external list for them so that it is
easier from the server's perspective to
update the order of the elements so I I
talked about this tutorial and we didn't
do anything but right now you guys know
what we are going to do in the next
tutorial so in this tutorial we're going
to write some magics code and we will
also bind this jQuery UI a sortable
thing so that we can be able to change
the order and then save it alright guys
thanks for watching and I hope you guys
will be interested in the next tutorial
so see you later