Image Gallery app using Laravel 7 - Laravel and Mysql 2020

hey guys welcome back in this project we will use laravel to build the photo gallery so we'll be using the latest version of laravel so if you go to the browser if we go to that all calm and click the documentation we have sound quite like it is the latest version of laravel so if you scroll down below we can use the lateral installer to install our new project - I already have this installer so if you don't have that you can install that right tonight I can do that I will new block right so I can say laravel new and the name of your app so name of our app will be photo gallery or whatever of your choice so we need a tenth occasion for that I can say - - odd flag that will install the authentication as well right so let me open the Sam server so I can start my Apache here so now I have started that so I can go to the browser and I can go local host PHP my admin rights I can say local host PHP myadmin and we can create our new database in this case I will name this as laravel photo right so we can say laravel photo create a lateral photo is created as you can see that there is no tables which is a MT database after creating our new project we can connect our database with our application right so with that we can use our migrations to migrate our tables to the database right so let's wait for our second to complete now let's get completed let me clear the screen now I can go to photo gallery and I can open with code editor of my choice in my case Visual Studio code right so how we can start our server we can start our server using PHP artisan so that will serve on localhost 8000 I can go to the browser and I can say localhost 8300 is coming from my old cache so that'll be empty icon in your screen that this is the default application that comes with registration and login right so basically it now we can go to our code base and connect our database using 30 and V so inside env I can change this to laravel photo right so that's it this laravel photo is the name of our database now we don't need to change anything the WCCO name and password should be this right now if you see inside the database migrations we have our tables user tables ready so we don't need to care about anything now what we can do is we can just migrate this here right let me stop the server and use PHP or Jason migrate now I migrated our tables I can now start the server again if I go to the sand if refresh this laravel photo as you can see our users table is available right now what we can do is we can go to registration page and we can start building our best it can start using this registration form so yeah so I can say John John Doe John ago calm password I can remember confirm password and click enter and that is going to make me logged in as well right this is this is it now I can go to our code base and I can use home dot blue dot PHP which is this one right this page I can use this to get that form right so let me go to the code and go to the home dot light dot PHP right now what I can do is I can remove instead let me remove these long these things right so we can delete those things right so inside cut body so what I can do is I can say form right so I can say let me give some spacing here from right so let me take care of the accents later for now we need to use form group right and input of file right with class called form control image right after that name will be image so image we are going to do multiple uploads so we need to add this array right so just like that we need to add that one so finally we are using multiple images so we need to add multiple here as well so when you upload images you need to pass any type of the form form so we need to say n type which is multi-part form data so this should be it and the method should be first right so the action will be post method of slash image that we can write in our web dot PHP right so don't forget to add CSRF so at CSRF which is important when you do uploading things right so in use form you need to use CSRF token see a sort of to make sure you don't allow any fraud things right so you don't allow see a set of attacks right so finally we need a button right so we need to have a summit button so input input submit right so well will be upload and we need to add last call BTN BTN primary not party murray its primary right so I can go ahead and refresh this page now now that going to look somewhat better right now this is basically good I can go here and can change this Josh go to upload image cool now we need to go to web dot PHP and we need to start writing our own so let me clean this up so that we can have some spacing so I'll write route host right supposed slash image and we'll create a controller car image controller and width and the method called post right so that's it so we need to create the image model first so for that we need to go to the terminal I'll be using the old local terminal that is n vs Co right so I'll be using this so PHP artisan make model and the model of the name of our model will be image model and with the migrations so - mmm we'll add the migrations right so make sure you do - M flag right so now model and the migration created now we can use that here so basically I can go here to the top and inside app I have image dot PHP right so we don't need to care about or to say our relationship we don't need to write this one so basically we don't need to care about those things for now so let's leave this right here and we can what we can do is we can do inside database migrations now we'll be having another table called image table where we'll be using table integer user underscore ID and it should be unsigned right so second thing will be table String image that's it now we can migrate our table so let me make this big let me make this a bit and I can say a PHP artisan migrate that is going to migrate out image stable right let me clear this up and let me create PHP artisan make model make controller excuse me so make controller image controller so we created the controller now we can close this up so we are using image controller now we created a reg controller now we can go here I can you can say public function image controller oops excuse me post and inside this we can write our code so for now we need to validate right so we need to use this validate so we need to validate all the requests that is coming and the request will be the image right so image should be image should be required right so we never submit the form which is very empty right cool let me let me put the so now the request is not known this or not available now here right so we need to explicitly mention it here so you need to say request and request right now what we can do is we can use use app image and with that we can create our new data so the image coming will be an array right so we need to look through it so let me do image equals request image right so let me say images right so now I can say for each for each images as image right now I can say let me do let me change the name of the files we upload right because when you upload multiple files with same names when you storing inside a folder that is going to give an arrow right so for that we need to change the name so image new name equals let me uh pan with the time so that it will be unique right so time and I can say you made get blind parades in all named after that what I can do is I can move the image right so I can say image move and to the images folder we will be creating an image this folder inside public folder and the name will be image in your name image new name right so that's it finally what we need to do is sure enough we need to say we need to create a new record right so you need to say post equals new image with that post user underscore ID equals odd the user ID so this odd is already should be using here side so art should be used here so that this odd will get the current authenticated user ID which will be helpful for us so post image post image equals [Music] let me say images right / and the name of the image so basically imagining name so image new name finally we need to say post save right and finally we can say return redirect to slash hope for now we'll change that later right so save that so make sure he imported a of the thing now we can test our application whether it is working or not right so for that we need to create images folder inside public let me create images now we create it so everything looks fine so inside home let's double check whether everything is good all right right now I can't go here and refresh this and I can choose files I can do let me go to pictures here let me use the ladder over dot PNG if I click upload that is going to redirect back if I go to let me say every house I have the new user that is created but if I go to images I have one images that is uploaded now so use your idea of fun right so basically the user ID of the user is one so the user ID is one now if I go to images I have the image uploaded which means great and everything works fine as expected cool now I like to add another helper here which is after the multiple I can add another cone called accept image store so this will only show the images which is great for us so extra protection right so now if I go ahead and refresh this and if I click Choose files and I can choose multiple things right so I can say I can add two and I can click upload and that is going to be uploaded if i refresh this that is going to be fetched here right so as you can see the name is always same right so I can go ahead and I can even check inside our public folder so I can go ahead as you can see our two files are available cool this is a village of mine right so it's working so finally one thing we need to do is we need to fetch everything in here right for that we go to web dot PHP as you can see this is retaining the view right so we can what we can do is we can say so image controller at index right I can do use that right so now I can go to image controller I can write public function index so public function index and I can say return view welcome right that is with all the images right so basically I can say excuse me so with images and the variable of images so this should be this should fetch all the data right so basically what I can do is I can say images in a just equals image all say that and that is fine now I can go to welcome dot bleh dot PHP welcome dot blade dot PHP I can delete all those things I can use at extents layouts dot app after that at section content and end section fine now inside this I can use at for else right so basically first thing I need to do is let me open a container right after that I need to do a button to boot to homepage right so I can say /ho and I can add a class called BTN BTN warning and I can say upload here right if we go ahead and refresh this page as you can see we get this one which is great so after this one I can what I can say is I can say class of container and mt2 and I can add at for else right so I can say art for else which is available in a laravel and end for else to loop through right so the benefit of for else Lopes we can add at empty whether if if the data there is no data of the database is empty we can just say something like h1 of there is no uploads right so even you can add a class here called text danger say that so the far else logic should be images as image so basically this images says this one right so you might already know that right so this is the basic logic of it and down below what we can do is so basically we can loop I mean we can use our logic of getting everything right right so now what to do we need to have a row right so we'll use a row for some policy for responsiveness so now I'm using this and after this here I can use do with cold Excel for and call LG for coal md6 and cold excess struggle here inside that I can add a class called card inside this I can add image tag it should be this one and I can say asset and I can say image image so all we don't need to say all you can just say broken right here and let me add height of 2003 to 20.1 so I need to add a class here called class card IMG top right so which is helpful after this I can add after this image I can add card body and inside this I can add a button we basically can add a form right so I add a form and I can say input submit right so input submit value of delete right so delete and I can say add a class soft BTN VT and danger right if I go ahead and refresh this page as you can see I got everything here let me delete this too that will help right so let me delete that - right and i refresh this page I'll get this one so the Delhi should be visible when you uploaded the image right so for that we need to go to the code base and this scarred body should be visible when the image teammate user underscore ID equals Earth a user ID right so basically we need to say equal equals right see excuse me so now it should be complete here so ENDIF right so now if I go ahead and refresh that is going to be visible because I'm the one who created let me log out here uh I think I did someone something wrong let me refresh this here idea of non object yeah that's that's you do we are checking an ID right so that is going to be throw an error so we need to have another check to say if Earth check that is going to check right so basically that is going to check whether the user is authenticated or not so end if right so uh tells we can't say we don't need to add something else right so we don't need to care about this one so or if we go ahead and refresh this so now it is going to refresh that is without the delete button right so we need to check our check so that it check whether it is authenticated if already authenticated this is going to run this code otherwise it is not going to do so if you don't check this it is going to check for a user ID and author ID this authenticated user is not available when you are not logged in right this is important let me go ahead to the register page and add another user called David or someone stay with at door calm and I can add whatever I want Rafi click enter oops all right so now if I go to the first page as you can see there is no delete button when I go to upload if I go ahead to somewhere else here and if I say like if I choose all those three and if I click upload and if I go to laravel as you can see I have delete buttons on these images which is great right so now I can say I can just log out here and I can see all these images without delete button which is great so we can give a small spacing here inside card so basically this card we can have mp3 that will have some spacing so another thing we need to do is we need to show all those messages right so here we need to so the validation message after that we need to show the session message whether it is completed or not so we'll use session flash and session of success and say images uploaded right so uploaded so we need to use this session on the top so don't forget to do that so after this I'll use session right so cool now we need to write the code to show the validation messages and the session message right for that we'll go to app dot light dot PHP and inside this after the now bar as you can see this is an hour right so basically the closest neighbor after that we can write the code here I can say container and empty to inside this I can write our logic so basically at here yes so this error variable is available when that is validation error if error for universe need to check whether there is an error so errors any if there is any errors let me do end if for that so don't forget to do right so if there is any any errors we need to loop through all the errors right so art for each errors all right so us here inside this let me close this end for it and for it so inside this I can say alert alert danger and I need to get the error right that's simply I can say yeah cool now it is going to work now after this one I can use session here right I can say if session has success let me do end if musician has the success we can get the success message so alert alert success and we can just get the messages here so session get success and that's it I can go here now I can refresh this here I can go to upload and I can oops I'm logged out sorry sorry with it so let me log in using John at door calm and let me log in with the password oops sorry about that now I'm logged in if I go to laravel I have the link button here there is no other it buttons for other images which is good now if I click upload I will get image field is required after uploading the image let me do this one upload image uploaded now if I go to here as you can see the VJ s image is uploaded with the delete button cool now what I can do extra inside image controller instead of redirecting through slash home I can redirect to this page which will be really powerful and great right so another thing I can do is I can do the pagination here I can say pagination of nine right if I go ahead and refresh this that is going to Paigey sorry about that so paid Jean naté right so I can say now I can refresh this now and that is going to work so that is a benefit in this because if I go ahead and upload another multiple images let's do this whole images now and if I click upload that is going to be uploaded and here as you can see we only have just nine images so there is no images after nine so for that food to fetch that images we need to have the page nation link in our welcome dot bleh dot PHP after this in fact after this row right so I can just do let me do it here I can say it row just T five content center right inside here so inside here what I can do is I can say images links right if I save that and go ahead and refresh this page now if I scroll down below there is no link source of now there is only this much images if I go her to upload if I upload another image let me upload this one now I'll be having a link to the second page if I go ahead and click that is going to get the second image of it right so now that is great the final thing we need to do is we need to make sure the distillate works right so for that we need to write a post request here of delete so let me do I mean let me write delete request right so delete of images we'll say destroy it mates upload image controller destroy so after this here I can say public function destroy right so I can say public function destroy inside here I can say image equals image find based on the ID so the psy.d should be coming from our parameters so you are our parameters and after that we can say image delete right that is going to delete and we can say we can copy this too right so basically copy this too and paste this here and say image deleted so now that is good thing who is going to work so one thing we need to say is we need to say inside home dot dated PHP I mean in the well cool degraded way to be sorry about that so in this form action we need to say slash image and method of post and we need to say at my third of delete and at CSRF assault so at CSRF let's say that and let me go back to this page and refresh this and let me click this one oops yeah here there is a problem which is I forgot to pass the ID so we can say image ID right sorry about that now I can go ahead and refresh this page once again and I can delete this one so if I click delete for not for not found which is due to here sorry about that so ID right so basically that's like that we need to do that right so there is no you are all based on that so let me refresh this one and click delete that is going to say image deleted as you can see there is no image VJs image right now I can do whatever I want cool now this is all about this photo gallery app so that's it and I'll see you in the next project so thank you bye bye

Channel: Get Paid Devs

Views: 3,875

Keywords: Laravel and Mysql 2020, Laravel, MYSQL, Multiple file uploads, File upload in laravel, multiple file upload in laravel

Id: moshDMQTPJ4

Length: 36min 18sec (2178 seconds)

Published: Wed Apr 01 2020