1 00:00:00,900 --> 00:00:05,420 Each dependency that composer maintains is called a package. 2 00:00:05,420 --> 00:00:09,720 To utilize packages, they need to be accessible from somewhere. 3 00:00:09,720 --> 00:00:12,860 This location is called a repository. 4 00:00:12,860 --> 00:00:18,590 By default, composer uses packages dot org for its package repository. 5 00:00:18,590 --> 00:00:22,410 If you want to include packages that are not on packages 6 00:00:22,410 --> 00:00:24,990 such as your own private packages. 7 00:00:24,990 --> 00:00:28,210 You'll need to define a custom package repository. 8 00:00:28,210 --> 00:00:32,200 Check the notes associated to this video for more information. 9 00:00:32,200 --> 00:00:37,330 Most packages in the PHP community are in the packages repository. 10 00:00:37,330 --> 00:00:40,960 So this should only apply to very custom instances. 11 00:00:40,960 --> 00:00:43,620 Let's take a look at packages and see what we get. 12 00:00:45,700 --> 00:00:48,590 The home page gives us two ways to get started. 13 00:00:48,590 --> 00:00:53,890 Using packages with composer and publishing your own packages to packages. 14 00:00:53,890 --> 00:00:55,853 We can also browse packages. 15 00:00:57,844 --> 00:01:04,880 New releases, popular packages, and random packages, or we can search for a package. 16 00:01:06,280 --> 00:01:09,010 For example, let's search for phpmailer. 17 00:01:11,500 --> 00:01:16,244 Because composer uses packages as well, the results from this search are the same 18 00:01:16,244 --> 00:01:20,040 as the results we saw when we did a search using composer require. 19 00:01:21,130 --> 00:01:25,820 When we click on phpmailer, we can see a link to the GitHub repo on the right 20 00:01:25,820 --> 00:01:29,080 along with quite a bit of information pulled from GitHub. 21 00:01:29,080 --> 00:01:32,200 An important place to notice is a section in the middle 22 00:01:32,200 --> 00:01:36,160 that talks about how this package relates to other packages. 23 00:01:36,160 --> 00:01:41,290 As we saw an installation, there are no requirements but there are suggestions. 24 00:01:41,290 --> 00:01:45,670 Also shown is the development requirements and details such as conflicts and 25 00:01:45,670 --> 00:01:47,070 replacements. 26 00:01:47,070 --> 00:01:50,200 We can also check different versions by clicking on the version 27 00:01:50,200 --> 00:01:50,980 number on the right. 28 00:01:53,690 --> 00:01:57,690 I want to allow formatting for my emails, like bold, and adding links. 29 00:01:57,690 --> 00:02:01,870 To do this, let's use a what you see is what you get editor for text area. 30 00:02:02,890 --> 00:02:07,565 An easy WYSIWYG option that I like to use is CKEditor. 31 00:02:07,565 --> 00:02:09,352 Let's search for CKEditor. 32 00:02:16,623 --> 00:02:19,537 CKEditor is actually a JavaScript library. 33 00:02:19,537 --> 00:02:24,107 But this isn't a problem since composer can handle JavaScript libraries as well as 34 00:02:24,107 --> 00:02:25,700 PHP libraries. 35 00:02:25,700 --> 00:02:29,380 Let's go back into work spaces and add the CKEditor to our application. 36 00:02:30,760 --> 00:02:32,159 First, we use our console. 37 00:02:34,723 --> 00:02:42,542 And type composer require ckeditor/ckeditor. 38 00:02:51,653 --> 00:02:58,913 We can then run composer update ckeditor/ckeditor. 39 00:03:10,376 --> 00:03:12,430 This installed the package. 40 00:03:12,430 --> 00:03:14,780 Because this is a JavaScript library, 41 00:03:14,780 --> 00:03:19,610 our actual usage will change from how we use the PHP mailer. 42 00:03:19,610 --> 00:03:23,360 There are two steps to using the CKEditor on our site. 43 00:03:23,360 --> 00:03:24,614 Let's close the console. 44 00:03:27,744 --> 00:03:32,774 First, we need to call the CKEditor script using a script element on our page. 45 00:03:39,948 --> 00:03:47,866 Src='vendor/ckeditor/ckeditor, 46 00:03:51,476 --> 00:03:55,110 ckeditor.js. 47 00:03:57,769 --> 00:04:00,826 We can see that, if we refresh our file list. 48 00:04:12,566 --> 00:04:15,619 Ckeditor, ckeditor. 49 00:04:20,097 --> 00:04:28,288 And then ckeditor.js. 50 00:04:28,288 --> 00:04:34,169 The next step is to replace the existing text area element using JavaScript. 51 00:04:38,649 --> 00:04:47,506 CKEDITOR.replace('message'). 52 00:04:49,583 --> 00:04:52,840 Message is the name of the text area we wish to replace. 53 00:04:53,850 --> 00:04:57,660 Check the notes attached to this video for documentation on the CKEditor. 54 00:04:58,900 --> 00:05:01,019 Let's preview our application in the browser again. 55 00:05:10,796 --> 00:05:15,101 This time, we see an editor at the top of our text area which allows us to format 56 00:05:15,101 --> 00:05:17,030 the email message. 57 00:05:17,030 --> 00:05:20,800 If I'm going to allow formatting, I can't just filter input and 58 00:05:20,800 --> 00:05:25,970 sanitize the string because this will remove all the HTML tags. 59 00:05:25,970 --> 00:05:28,460 So what can we do to keep our HTML safe? 60 00:05:29,700 --> 00:05:34,090 Well, we could write our own script for testing and modifying input. 61 00:05:34,090 --> 00:05:36,220 But this could get complicated quickly, and 62 00:05:36,220 --> 00:05:38,520 we could easily overlook an important issue. 63 00:05:39,630 --> 00:05:42,970 Why spend our time coding something that already exists? 64 00:05:42,970 --> 00:05:45,940 Wouldn't it be better to spend our time creating something new? 65 00:05:46,970 --> 00:05:50,060 Google is a great place to research what's out there, and 66 00:05:50,060 --> 00:05:51,030 what other people are doing. 67 00:05:52,690 --> 00:05:58,720 If we search for something such as safe html filter with php, 68 00:05:58,720 --> 00:06:03,600 we'll find things such as the HTML purifier. 69 00:06:05,720 --> 00:06:14,560 If we click download and scroll down, we can see the example for using composer. 70 00:06:15,930 --> 00:06:18,502 Lets copy this and go back into work spaces. 71 00:06:31,656 --> 00:06:35,348 We'd run the composer require, and then we can run composer update. 72 00:06:49,140 --> 00:06:56,210 Now, let's go back to the HTML purifier documentation. 73 00:06:56,210 --> 00:07:01,400 We see the three basic lines we need to start using the HTML purifier. 74 00:07:01,400 --> 00:07:04,070 Since we already have auto loading set up on this page, 75 00:07:04,070 --> 00:07:07,860 let's ignore the first line and just grab the next two lines. 76 00:07:20,330 --> 00:07:23,848 We'll paste those directly above setting our message variable. 77 00:07:23,848 --> 00:07:29,091 We'll change the variable clean HTML to message. 78 00:07:29,091 --> 00:07:32,710 And instead of using dirty HTML, we can use our filter input. 79 00:07:39,392 --> 00:07:44,059 We wanna make sure we remove the filter sanitized string because we're 80 00:07:44,059 --> 00:07:47,412 going to have the HTML purifier handle that for us. 81 00:07:52,527 --> 00:07:54,537 Let's preview our app once more. 82 00:08:09,490 --> 00:08:11,507 This time, we'll add some HTML. 83 00:08:16,825 --> 00:08:21,672 We'll also go into the source and add some JavaScript which by default, 84 00:08:21,672 --> 00:08:23,980 the HTML purifier will not allow. 85 00:08:30,380 --> 00:08:33,940 After we submit the email, we can view our logged email and 86 00:08:33,940 --> 00:08:37,420 verify that the HTML formatting was preserved. 87 00:08:37,420 --> 00:08:41,554 But JavaScript was removed, no alert box. 88 00:08:41,554 --> 00:08:50,560 And if we view source, We can see that the JavaScript was not added.