How To Create Image Gallery In Bootstrap & jQuery & PHP & MySQL

How To Create Image Gallery In Bootstrap & jQuery & PHP & MySQL


Do you want to learn how to create an
image gallery using PHP jQuery MySQL and the Bootstrap in this video I’m going to
show first how to create the basic layout how to create a database and then
how to upload the image and also store in the database and then in the second
part I’m going to show you how to get all the image and provide some options
like delete or edit the image so stay with me or actual start with this tutorial let
me quickly explain what we are going to do in the part 1 so first we are going
to design some basic website so let’s say if they look like this after that
here at the top we will create one place where we’ll be able to upload all images
so we want to enable an option so that someone is able to drag and drop an
image and that image will immediately be uploaded so what will happen behind the
scenes when someone drop the image we will grab it and then send to the server
let’s say PHP now in PHP we will upload and put to some folder that image store
I will say here path of the image to the my squirrel ok to the database and then
return an information to the client side ok and now once we know the pet and you
know that image is successfully uploaded we will just append that image here and
now we are going to do the same thing for as many images as you want to do and
then in the part two we will just in case that someone opened this website we
will retrieve all the images and then they will just display them here so
let’s start writing the code so now I’m here at my PC and the first thing that
we are going to do is we want to grab the source code from one of my previous
tutorials so I suggest you to go to the compass income comm slash downloads and
then here search for the upload and then you can open this tutorial and for those
of you that haven’t learned already how to upload files to jQuery and PHP here
is like an amazing tour that goes in there that will show everything that you
need to do so that this the tour I was not too
and then for those of you that did already you can create yourself or you
can just don’t want the source code here so when you click down you will get a
link like this and then you can click here and download the source code I
already did that so the files are here so just extract here everything delete
the archive and then I will just grab the entire code paste it here and then
delete this one okay so this is pretty much our structure and then when I go to
my product you are able to see all the code and everything that I have created
so far so basically here we are using some script to upload files to Drake
query that I have explained in details each and every part of this code and
then here at the top we have the drop zone so if I go here and refresh this is
something that you will get and basically now here we are able to drag
and drop files or just select those and be able to upload them but now we want
to use the bootstrap so just go to the get busuu.com
download and then I will grab boots obsidian link ok I will paste it in the
head part and then here we are going to make some modifications ok so I will say
here this will be our container so maybe let me zoom in so you can easily see ok
I think this should be good enough ok container then inside that container we
are going to have one row and inside row we are going to use some cones so let’s
say I will just for now have one column and twelve okay and then here are all
these dogs so now when we refresh this page
almost nothing should change we will maybe just adhere our line to the center
and that’s it maybe we can make container I can edit here so let’s say
container you’ll have some margin top let’s say hundred pixels something like
that and that’s it it all looks good it works fine amazing
so now the next next thing that we need to do is to actually go and create
database where we are going to store the path of all the image that we upload so
if I go to the Browse and let’s say I use this one you can see it’s upload
it’s there but when we refresh the file is not any more here because we don’t
have any database we didn’t store anywhere the path and the only thing
that has happened is that files are uploaded here okay and that’s it that’s
all that has happened okay so I will just go to the PHP my admin’
okay and then there I’m going to create a new database so let’s say I don’t name
image gallery I will set this to utf-8 unicode see you could see and they are going to have
one table let’s say photos and let’s say for now it will be four columns but I
don’t think we need that much so this will be id integer Auto increment then
this one will be path of the five so let’s say 255 just in case and maybe we
can set the uploading date so let’s say uploaded and then I’ll say here it will
be date/time and that’s it okay okay save and boom that’s it so now the next
thing that we need to do is to actually go and check our PHP code that’s
actually uploading the file and moving as you can see it moves uploaded file to
the target file and our target file is actually this folder uploads and then
the name of the file now of course we can change the name of the file to be
something else okay so – so we can maybe extract file extension and then create
some names so that pretty much it’s very hard to have again the same name so what
we can do maybe maybe quickly just append the time so now when I go here
and upload file the same one say it’s completed but when we go here you can
see now that there are some random numbers and then the name of the file
okay so now that means that it’s pretty hard that again when I upload the same
file again so I will go and use the same file again now here we you can see now
that there’s again the file but with the different numbers okay so now we can
create pretty much different hair each time and use something advanced not
just the time but even this in most cases will be good enough when you don’t
have a lot of traffic and you don’t have our website where there is so many files
uploading at the same time so in that case it can happen that but it’s again
hard that someone will have the file with the same extension at the same name
just like Who and uploading at the same second millisecond so that’s very hard
anyway let’s move so as you can see here now if the file is uploaded okay that
means that we have this path that will return and now all we need to do is to
actually save this path to our database and that’s it that’s that’s very simple
so let’s say I’ll say I want to create new connection I will connect to the
localhost my username is root password sent you and then Davis is in Madrid
gallery if I’m not wrong not this one but this one okay cool and now please
note that this user name semicolon password check on David’s name semcon
that doesn’t exist so if I just grab this and paste to some basic document
like here and you can see that it doesn’t I so just make sure that you
don’t have those in your code or you will have a problem and then now let’s
just add out database for table dispatch so what I’m going to do I’ll just say
connection query I will say insert into photos and we have ID peg
but uploaded on and the values are sorry we don’t meet ID it’s out increment and
then we have pet and they time so here we can just say that is target file okay
and I guess in our target file you can see here we always are including this so
that means that we are also for each image in the database we are going to
store this and that really doesn’t make any sense we are just using the space
without any reason so I will just remove it there but I will add here ok so when
we return to our client side this will be appended but here in the database we
are just storing the file name and the extension and that’s it so let’s now
test let’s see what will happen so I will grab again same picture see it
completed 100% ok let’s your head what we have here you can see now that it’s
uploaded and it’s added to our table which is amazing right but one problem
here is that for some reason we don’t have an image displayed here so I will
usually go to the network and then try to upload again to see what will happen
so we can see now that parameters is something’s happening okay there’s
some problem says permission denied why that’s weird so they are probably some issues with my
localhost settings so files uploaded so let’s verify do we actually have those
funds and it looks that we don’t so we do not have those funds here’s the
problem we should only store in the database if file has been uploaded by
this ok so that is the problem we have been storing the pets but the file
doesn’t exist ok this was false here so for that reason we will just stop it and
I think that the problem is here ok here now it should work but also first let me
delete everything from the database because those files oh it doesn’t exist
ok let’s try now okay now it’s image displayed here which means that it’s
uploaded let’s see here and now that’s verify actually do we have the file with
this name so 201 to 0 one is at the end and it’s here it’s this one you can see
it’s the same number ok cool ok so now if we keep adding more you will see that
it really doesn’t work good okay so this one say your files to big marshmallow
size 500 kilobytes ok maybe we have something small like my image my logo
it’s here and now if we did correctly only
– yeah the first one is not uploaded okay cool so now let’s create this alpha
bit nicer because this looks terrible okay so how we are going to do this well
basically if you see here it means that we are appending all files to them to
this container files so I want to change that I will delete this one okay
no I don’t need to delete it because we are using for some other things but what
we can do is we will just create maybe can you create a new container that will
be fine too okay continue and I can say that idea of
this container is uploaded loaded files and then to this container we are going
to upload our image so let’s say we will have one row and then inside our row so
I will say this as a comment okay we will have like combs – hell like columns column md4 so okay
we want to display the four so what’s wrong
okay so we want to have three columns and each of them will be size of the
four or maybe we can have like four columns with the image that will be our
gallery okay so what we are going to do each time if five is uploaded we will
get the last role inside this container it will check how many columns are there
so maybe we can say here like something like my IMG okay so check how many of
those is inside the row and if there is three we will just create another row
and then append them so that means that it will easily just create nice-looking
image gallery with four images per row okay hope that makes sense so what I’m
going to do here I will first verify how many I will get the last row so how am I
going to do this I will say okay uploaded files don’t find the troll lost
I want to find the last and then there I want to find my IMG and then I will say
dot length okay and then I will say here if length of this is equal three okay people tree that means that
uploaded files needs to add one more needs to offend one more row okay hope
that makes sense like this and that’s it and now after that we are just going to
do this okay copy this and then here we want to append this but force here we
will say like class column MD tree okay and of course event already there okay
oh that makes sense so let’s let’s try now and see what will happen maybe
you’re correct or wrong I don’t know okay first one is here so just another
one yeah okay okay something else okay now we have four so let’s not try to
upload another one let’s grab this one and you can see now we have gone down
below to the next row and that again we are creating new columns inside that row
which means that we did an amazing job okay so now what we can do is I think
that each of those image is hundred or 500 so what we can do is maybe just
limit the hey to the hundred or we can optimize it on some other way and that’s
exactly what I’m going to do in the next video
we can do something like this but I guess the best option will be you can
see now it’s really nicely displayed and formatted but I will explain all of that
in the next video I will show you how to grab all those images that we have
stored here now you can see there’s a lot of them we will grab nicely and then
create down below nice image gallery and then we will make sure that you are able
to click on each and every image small pop-up came in and then you will be able
to delete image if you want so that means that you will have really
functional gallery and you will be able to minute manage those pictures so guys
I hope that you have enjoyed it like this video if you do please like it and
share to your friends and of course if you have any questions doubts problems
whatever the case might be ask in the comments below and I’ll make sure to
answer all of them take care

Dereck Turner

25 thoughts on “How To Create Image Gallery In Bootstrap & jQuery & PHP & MySQL

  1. Mohamud Osman Hamud says:

    Really i liked your beautiful videos can you make a video about how do you record your videos the camera that are you using the lights also other staff if it possible to share us i would like to share thanks for your helpful videos.

  2. Z H says:

    hi can you do a tutorial about this topis please

    php vs node vs django

    mysql vs sql

  3. Amirul Afiq says:

    This is superb! Keep up the good work.

  4. Willy Nilly says:

    Great tutorial I learned file upload, with good tricks

  5. Niko88pl says:

    In line 104 you forgot add myImg class 🙂 Nice video.

  6. henry Watters says:

    please try and do tutorial on comment system using PhP, jquery, Ajax and MySQL database thank you

  7. IT 4K says:

    Thank you

  8. RPA says:

    BTW love the fact that you always send E-Mail reminders!

  9. Developer Account says:

    How we can send email to excel or CSV contact in attachment

  10. velammal Vinitha says:

    Hlo bro..In my project i have upload photo option in admin page.. whenever admin selects any photo from admin page it directly uploads into gallery page..what shall I do for this

  11. utterkhan it says:

    very nice tutorial

  12. Darshan Prajapati says:

    Very Nice Tutorial…

  13. Akila Rathnayake says:

    Fantastic Mr. Senaid. May I know how can we upload AutoCAD .dwg file as you upload images and show them as images then ones click on it open it with autocad software…. Thank you very much..

  14. Mayur Saroj says:

  15. Noxtube says:

    great video i like it,

    please i integreated your code in my project it's working perfectly, but i'd like to save the work Id get from the url with $_GET[id] in the data base.

    afeter saving the row workid in the BDD is empty, because i dont press the buton submit.

    can you give me a small idea plz?

  16. Mazhar Ansari says:

    Sir please make a video on Paypal Payouts 🙏🙏🙏

  17. Jimmy Fung says:

    Good video. btw, can you teach me how to write a simple online inventory / library system?

  18. Iboyaima Mangang says:

    Wonderful. Thank you. Please make videos on online quiz system using multiple choice questions

  19. Akila Rathnayake says:

    Hi Mr. Senaid.. Can you teach us how to deal with folder creation, deletion , view files in folder…

  20. Gokul Krishnan says:

    Creat gallery php signin people individual upload image and search box

  21. Gokul Krishnan says:

    Good video keep it up

  22. Michał Tumiłowicz says:

    Thank you 🙂

  23. Aasma Shaikh says:

    hello sir im not able to download the source code could you please help me with that

  24. BYTES Genesis says:

    the best thing is that you should use MySQL but you can also store it in the local Storage using setcookie.

  25. Iranna Hukkeri says:

    In your website, download source code button not working

Leave a Reply

Your email address will not be published. Required fields are marked *