Save Private Placeholder with airSlate SignNow

Save private placeholder

in today's video we are going to have a look at how we can create a placeholder image imagine you have a list of Records which contain each of which contains a reference to an image but for some reason one of them may not have an image or the image has been removed by mistake or anything like this at which point as you can see the second image here displays this placeholder image and it's the actual image if you can see that I'm when I'm dragging this across you can see that's actually the image we have three other images which records which have images and this one obviously does not so in order to create something like this we are going to use the package called intervention image which makes use of either image magic or GD library to basically interact with the images to generate them crop resize and so on so the first thing we need is to install a few packages if we go to packages org and let's search for the first one which is going to be this inter van Tsion image there we go that's the one if we click on the name of the package and then just copy the line composer requiring the package name we go to term now before we actually go to the term you let me show you I'm starting with a completely empty root directory for the project so we don't have any exercise files I'm starting fresh and if I open the terminal I'm already within this placeholder directory by the PWD you'll see this is when it's pointing pointing so I can paste this command directly here and hit return this will install all the dependencies together with the package as you can see now once it's refreshed we have a vendor direct true obviously with the auto loader and all these dependencies then we have a composer Jason if I open this it tells me obviously within the required section we have this intervation image package the next package we are going to need a next three packages that we're going to install will be purely for the tests we are going to bright later on the first one is going to be simply PHP unit so PHP you need there we go if we install this one using the same approach so just copy this composer require clear screen command okay on a keyboard and this time rather than installing this under require we want to install this under required F because this package is only required one we developed one when we develop developing the the whole application basically so - - death and hit return once all this is done let's go back to our project as you can see within a composer than you a section has been created this required - def and there we go bicycle we've got this PHP unit ok next package we're going to need is the mockery because we're going to mock the intervention classes some more Curie mark rate there we go so that's the one same thing let's copy this composer require back to the terminal paste it again this is only for development so - - def hit return and the last package we are going to need is called VFS stream if we click on this one and as it says here is a virtual file system to mock the real file system in units s it allows us to basically mock the file system in our test rather than using the actual file system saving files to the hard drive and so on we're going to do everything in memory while we testing so copy again the composer required back to the terminal paste it in oops should have specified a def like let's go back to our editor and let's just cut it from within the required section let's remove this comma at the end as well because we within the jason file Jason isn't as forgiving as s PHP so if you had a comma here that words by say so you can see it's highlighting in red so we need to make sure that they come at the end if it's the last item you don't have any come at the end okay so now I've moved this package every C to development dependencies we can save the curse close the composer basically adjacent file and let's create this source directory first so source this is where our code will be stored and another thing I'm going to do is create the index of PHP file index dot PHP n within this font is going to put require and let's require our out all of the from within the vendor directory out ok for now we're just going to close this index dot PHP file because we won't be doing anything more for the time being a next thing within the source directory we going to create directory for our image-makers the class we're going to create call it whatever you want I'm going to call it utilities basically so if you are working with the existing system obviously put it somewhere that it makes sense so utilities directory for now and the name of the class is going to be image maker and the name space will be I will call my name space up and then obviously utilities so up util the piece ok and that has created our class a open compose of the jason we need to specify the outer loading here as well so Alto load and in between the double quotes obviously and then we have PS are - for and for psr-4 we want this up namespace and then two backslashes : and what we want to point this namespace is going to be SRC and then for slash so basically whenever you use we're using up namespace at the beginning that's going to point to the source direction then obviously whatever director we have there as we did with this image maker so we have up and then utilities and our image maker class is right here okay so to start with first thing I need to do is to let's specify basically whatever class we are going to use here we are going to use this image manager of the information so image manager intervention image so it's intervention image image manager this is a package we're going to be using here but this intervention in each package and this is the name of the class we're going to make use of and let's specify few properties I'm going to put them all as private we encapsulate them all we don't want anyone to have access to them directly from outside of this class so private and we start with a direct trim and by default what I'm going to do is point to assets and an image - maker and I'm putting slashes on both sides as a basic director separator I'm working on a hone Mac which is a UNIX system on line X if you're working is the same thing on Windows it would be backslash but don't worry specify it this way because when we're actually going to be pointing to the image from within the browser you still need to have forest logic regardless of what system you're using and we are going to use functionality here within this class which if you are if we are going to be pointing for to the file using the absolute path we're going to replace this based on what system we are actually on so that's the directory let's create a starchy within our and within a root of our project it's going to be assets and then we have image - maker assets director and then within this directory here image maker next thing is going to be private property called manager then we're going to have private property image then we are going to have private property called width by default I want my image to be 600 if we don't specify otherwise then private height which will be 400 so basically we're going to have a horizontal image then after this we are going to have private extension which by default I wants to be PNG then we are going to have private background which is going to be a background color by default I want the image to white colors ffffff you can use the short short hand just three of them I'm going to use the full six characters and then we're going to have a private file name which is where we're going to store the fun and once we've actually generated it okay let's add the dog blocks for the directory that's just a string so string then we have for the manager it's going to be image manager which is what we've imported right here at the top then for the image we are going to have backslash inter then shin then image image that's what it's going to represent then folder with that's obviously an integer for the height it's going to be the same integer for the extension that's going to be a string for the background it's going to be a string as well and for the file name we also will have a string obviously this one doesn't have a default value but it's going to be a string okay so these are our properties now the next thing we're going to do is to create a constructor I'm going to create a few lies so again shift it up a little bit okay so we start with the new constructor and constructor will basically take the image manager instance and associate it with our manager property so that's the the argument that we is going to be required for this class to instantiate okay the next thing we need is the first basically the method that we're going to create within this class it's going to be called set directory let's say we don't want to save the file to this specific directory we would like to overwrite like foot within the test this is what we're going to do this will basically allow us this setter will allow us to override this default value so public function because it needs to be accessible from the outside of this class set directory and we take the path as argument and then this directory equals path so that's the first one let's add that dock block as well it takes param path which it will be string and then what this specific one does is set directory that's what it says Direction okay the next one will be get directory basically we create industry mutaters to to be able to basically get and set that directory path so we for this one we also don't have any argument it's going to return this direction we've made it private we don't want anyone to mess with it so we need to provide some means of actually obtaining the value and setting the value and this one gets the director so they can get direct okay next method is the method that will actually create this image that we after and it's going to be called the same way as the method that we go into cult on our image manager and the name of this method is simply canvas so public function can bus and this method takes array of options which will basically override the properties and the properties that it will overwrite will be things like width height extension and a background so if we want to create the image with a different dimensions we will be able to pass them through as the key of this options array extension if you want to specify different one and then a background color you might want a different one as well so this is what we're going to be able to pass through using this options array okay in order to do we could do it manually from within this canvas but let's do it a little bit better way so we could just going to delegate it to another method so this init and we are going to pass options here so that's this init methods will basically do the job so I'm going to add this init method here and let's specify this array and by default in my be empty and then what we're going to do within this init method we are going to call array walk so that we are going through each item of this options array so options array goes is the first argument and please refer it to a PHP documentation to check all this array walk does of this countess in one of the previous courses if you go to php.net type this in within the search box obviously see the documentation to see exactly what this one does okay and the second arguments is a color ball so I'm going to refer to the method within image maker so this and then the method will be called s so she ate and after all this what we're going to do is to build the file name so this file name equals this file name method again another method that we don't have so what we need to do now is basically great this associate so first of all all these properties which can potentially be within specify these items of this options array overriding the properties of this class and then once we have this properties this filename will use this properties with the new values and create the fun lip icing so let's create this associate method first so the associate after this init private function associate and then we take a value as the first argument and the key as the second because that's how array walk passes items from the first argument which is the array to whatever callable option we have as a second argument and what we're going to do here is simply this we um using curly brackets you don't have to you just can you can just use key but I tend to use curly brackets around the situations like this so key equals value so basically what happens here this property name for instance with equals whatever values associated with it and this options here argument will be something like let's for instance with I want to be eight something like this then hi I want to be 800 as well then background I would like to be black so zero zero instance so this is what we're going to receive through this argument we may not receive anything and then obviously we're going to leave with a default value associated with these properties and obviously using these keys we associated the values with the properties of this class okay so that's the associate method the next method is the file name and the file name method what this one does it basically implode number of properties using the whatever heart are you going to specify I'm going to simply use the - so let's start with the method names of private function file name this one doesn't take any argument as you can see we call it here without any argument and we're going to return and using the implode function they glue we want to use again as I said it's up to you what you want to use I'm going to use a hyphen so all these properties that I'm going to pass through within the second argument to the same plot function within this array will basically be concatenated using this globe the first one will be the width the second one will be the height and the last one will be the background color so whenever we create an image it's going to look something like I can just type here say 600 by 400 by background color ffffff and then the X station da let's say PNG this is going to be the file name you can obviously specify your own where you can use different approach entirely up to you that's how I've decided to do it and then I'll at the end I'm going to concatenate it with the full stop and this extension because don't forget obviously these options can also contain extension if you want to obviously make the image with the jpg extension you can use this gif or anything else you can pass this through and then that's going to override the default so we have all these concatenated with them - and then added the extension at the end that's the filename which we're going to have associated with this file name property once we've called this file name method after walking through all these properties of this array okay so these two methods are now completed now back to canvas so now that we've got everything initiated our properties now have the valleys associated with them that we actually want to have so the next thing to do from within this canvas method will be to check if the file actually exists all these files will be saved to this directory assets image maker unless we've obviously overbreathing overwritten the path to the directory for the directory property so let's check if the file exists so if and an exclamation mark I'm going to use check for the the opposite this is file method which we create in just a moment and if it does not exist because this is basically going to return boolean true or false so if it isn't then this make and make method will create generate this file otherwise bicycie otherwise we're not going to do anything because the file exists and we simply return this a return this relative file path that's how I've decided to call my method so it's clear that this is relative path so we can pass it through to the browser absolute path will be the full path to the image which will use behind the scenes the basic generated and so on and check if it exists so we have three new methods which we need to create the first one is the is file then we have make and relative file path let's work on this in a following video