WEBVTT

00:00.680 --> 00:02.399
uh hello guys welcome to this video so

00:02.399 --> 00:04.200
in this video we'll be looking at how to

00:04.200 --> 00:07.160
create a markdown to PDF converter

00:07.160 --> 00:11.360
inside PHP and uh we will be looking at

00:11.360 --> 00:13.120
uh this is actually the demo of the

00:13.120 --> 00:14.639
application so you will actually see we

00:14.639 --> 00:17.119
are using bootstrap for the UI user

00:17.119 --> 00:19.800
interface we have a simple choose file

00:19.800 --> 00:21.160
button where the user will select the

00:21.160 --> 00:24.880
markdown file that needs to be passed so

00:24.880 --> 00:26.840
let's suppose if I select this markdown

00:26.840 --> 00:28.800
file let me show you the markdown file

00:28.800 --> 00:30.960
so

00:30.960 --> 00:33.480
so this is actually the markdown file

00:33.480 --> 00:36.200
you will actually

00:36.239 --> 00:39.920
see so these are two file sample MD

00:39.920 --> 00:42.360
sample 2 MD

00:42.360 --> 00:44.640
so so we will simply select this

00:44.640 --> 00:45.920
markdown

00:45.920 --> 00:48.719
file so first of all we will pass this

00:48.719 --> 00:50.879
markdown file and convert to HTML and

00:50.879 --> 00:53.079
then we will be using Dom PDF Library

00:53.079 --> 00:54.399
which is a very

00:54.399 --> 00:57.399
popular PDF library in PHP to convert

00:57.399 --> 00:59.399
the HTML to PDF so if I click this

00:59.399 --> 01:01.399
button you you will actually see a PDF

01:01.399 --> 01:03.199
file will get

01:03.199 --> 01:05.478
downloaded so if I open this now you

01:05.479 --> 01:07.360
will actually see all the markdown that

01:07.360 --> 01:09.080
was written in that file is actually

01:09.080 --> 01:11.560
passed and successfully converted first

01:11.560 --> 01:12.640
to

01:12.640 --> 01:15.200
HTML for that we will be using another

01:15.200 --> 01:17.360
open source library in PHP to convert

01:17.360 --> 01:19.799
markdown to HTML and then from HTML to

01:19.799 --> 01:23.079
PDF we are using the Dom PDF library in

01:23.079 --> 01:25.400
PHP to do this task right here you will

01:25.400 --> 01:27.200
see the PDF file is successfully

01:27.200 --> 01:29.040
generated with all the correct

01:29.040 --> 01:32.360
formatting it also contain third party

01:32.360 --> 01:35.200
links as well in the you can take any

01:35.200 --> 01:38.280
markdown file so now this is I'm taking

01:38.280 --> 01:41.280
the second one so again it will convert

01:41.280 --> 01:43.520
this you will see it's a kind of a

01:43.520 --> 01:47.040
resume so markdown files are really

01:47.040 --> 01:50.799
useful in programming in day-to-day life

01:50.799 --> 01:54.439
so it's a good practice lot of tools are

01:54.439 --> 01:56.000
available on internet which converts

01:56.000 --> 01:58.799
markdown to PDF so just wanted to show

01:58.799 --> 02:00.799
you in this video so how to make this

02:00.799 --> 02:03.600
converter in PHP so all the source code

02:03.600 --> 02:05.280
that I will be using in this video is

02:05.280 --> 02:06.840
given in the description so you can

02:06.840 --> 02:09.399
directly go to my website brod store.com

02:09.399 --> 02:11.520
and if you want you can purchase the

02:11.520 --> 02:13.120
full source code with full directory

02:13.120 --> 02:15.280
structure you will actually get the zip

02:15.280 --> 02:18.000
file after you purchase it you will be

02:18.000 --> 02:19.560
redirected to Google Drive where you

02:19.560 --> 02:21.519
will get this ZIP file which will

02:21.519 --> 02:23.959
contain the full directory structure so

02:23.959 --> 02:25.480
if you need this you can go to the

02:25.480 --> 02:27.040
description link so now let's get

02:27.040 --> 02:30.280
started so you need to have have this

02:30.280 --> 02:32.280
software installed on your system exam

02:32.280 --> 02:34.840
control panel which comes with Apache

02:34.840 --> 02:38.840
server from which we run our PHP server

02:38.840 --> 02:42.640
so simply install this and start this uh

02:42.640 --> 02:46.040
at Port 80 so by default it is located

02:46.040 --> 02:48.920
in the C directory if

02:48.920 --> 02:52.560
you write here inside your exam

02:52.560 --> 02:56.800
directory it has and uh inside your HD

02:56.800 --> 03:00.080
docs you will actually create a new

03:00.080 --> 03:03.000
project directory so let me make

03:03.000 --> 03:06.360
markdown to PDF

03:11.879 --> 03:14.560
converter so I will open it inside vs

03:14.560 --> 03:16.400
code so you will actually see currently

03:16.400 --> 03:19.400
the directory is empty so the very first

03:19.400 --> 03:21.000
thing we need to do we need to install

03:21.000 --> 03:24.280
those packages so let me show

03:24.280 --> 03:27.640
you the briefly about the packages we

03:27.640 --> 03:29.239
will be using we'll be using this

03:29.239 --> 03:32.000
package first of all which is a markdown

03:32.000 --> 03:36.040
parser in PHP so the official website of

03:36.040 --> 03:40.040
this package is pars down.or G so this

03:40.040 --> 03:42.040
is actually the markdown parer that

03:42.040 --> 03:44.920
we'll be using

03:44.920 --> 03:47.920
so the next Library will be using is Dom

03:47.920 --> 03:51.200
PDF which is actually a HTML to PDF

03:51.200 --> 03:53.439
converter for PHP which actually

03:53.439 --> 03:56.680
converts the HTML which is passed from

03:56.680 --> 03:59.519
markdown so this is both these libraries

03:59.519 --> 04:02.200
are open source you can read the

04:02.200 --> 04:04.319
documentation so now to install these

04:04.319 --> 04:06.280
packages we will be using a tool called

04:06.280 --> 04:09.120
as composer composer is actually a

04:09.120 --> 04:12.640
dependency manager for PHP so I already

04:12.640 --> 04:16.840
have composer installed you can install

04:17.400 --> 04:20.280
it so now to install those packages we

04:20.280 --> 04:23.919
need to write composer require so this

04:23.919 --> 04:28.280
will install those packages so the Dom

04:28.280 --> 04:32.039
PDF /d PDF this is the first package for

04:32.039 --> 04:34.479
converting HTML to PDF and then second

04:34.479 --> 04:37.479
package is for parsing the markdown so

04:37.479 --> 04:38.560
this is

04:38.560 --> 04:41.360
e

04:41.360 --> 04:44.120
v/b down so these are two packages you

04:44.120 --> 04:45.840
will see this is actually the command

04:45.840 --> 04:48.639
here composer require this is the first

04:48.639 --> 04:50.720
package and this is a second package

04:50.720 --> 04:52.919
simply enter and you will actually see

04:52.919 --> 04:56.440
it will actually create a composer. Json

04:56.440 --> 04:58.680
file with these two packages installed

04:58.680 --> 05:00.520
it will also create a vendor folder

05:00.520 --> 05:02.479
which will contain all the files for

05:02.479 --> 05:06.160
your libraries you will actually see so

05:06.160 --> 05:08.759
once it is installed you can see all

05:08.759 --> 05:11.000
these packages have been installed so

05:11.000 --> 05:15.440
now you need to create your index. HTML

05:15.440 --> 05:19.080
file which will be a simple form where

05:19.080 --> 05:21.400
we will

05:21.400 --> 05:25.639
be so we can use GitHub copilot as well

05:25.639 --> 05:28.400
so I already have so I can just say

05:28.400 --> 05:30.720
write HTML file

05:30.720 --> 05:33.280
which contains

05:33.280 --> 05:39.759
a user input field where user can select

05:39.759 --> 05:44.520
only markdown files and we need to

05:44.520 --> 05:49.720
use uh bootstrap as UI so you can just

05:49.720 --> 05:51.840
see I already have installed GitHub

05:51.840 --> 05:53.919
copilot which actually helps in

05:53.919 --> 05:56.560
generating code because uh it will save

05:56.560 --> 05:59.160
a lot of time because common code it

05:59.160 --> 06:00.880
will write you will see I'm just writing

06:00.880 --> 06:01.880
a

06:01.880 --> 06:04.960
simple instructing to is WR HTML file

06:04.960 --> 06:06.759
which contains user input

06:06.759 --> 06:11.919
field and uh a button to submit the

06:11.919 --> 06:14.360
form so now if you see it will write

06:14.360 --> 06:19.638
this HTML file for me you can see

06:20.840 --> 06:23.120
that so this actually helps in

06:23.120 --> 06:25.080
generating a lot of content you can see

06:25.080 --> 06:27.479
it included the bootstrap CDN markdown

06:27.479 --> 06:29.880
it added the title

06:29.880 --> 06:32.720
you can just see if I open this now uh

06:32.720 --> 06:36.319
in the browser Local Host mark down to

06:36.319 --> 06:38.080
PDF

06:38.080 --> 06:40.120
converter so now you can see it has

06:40.120 --> 06:44.080
generated this so we just need to add

06:44.080 --> 06:45.400
the BTN

06:45.400 --> 06:49.160
block BTN

06:50.800 --> 06:54.960
danger and just use the form control

06:54.960 --> 06:57.639
class it will make this interface like

06:57.639 --> 06:59.280
this and just make the heading in the

06:59.280 --> 07:02.440
center position so so in this way you

07:02.440 --> 07:04.520
can use GitHub co-pilot to actually

07:04.520 --> 07:07.000
increase the productivity and save time

07:07.000 --> 07:09.960
as well now this is a HTML file that

07:09.960 --> 07:12.919
guys we are Simply Having a simple form

07:12.919 --> 07:14.319
and this form will

07:14.319 --> 07:18.120
submit basically to a PHP script We'll

07:18.120 --> 07:20.879
add the action attribute so this will be

07:20.879 --> 07:25.039
submitting to upload.php Method will be

07:25.039 --> 07:27.800
post encoding type will be multi-art

07:27.800 --> 07:29.879
form data

07:29.879 --> 07:33.680
and uh we also need to give it a name

07:33.680 --> 07:36.160
parameter as well because in PHP we will

07:36.160 --> 07:39.319
be using this name parameter so we have

07:39.319 --> 07:41.520
given file here so we will be refreshing

07:41.520 --> 07:43.520
it inside the PHP script that we will

07:43.520 --> 07:45.960
write we need now need to create this

07:45.960 --> 07:47.960
script so simply create the script

07:47.960 --> 07:49.919
upload.php

07:49.919 --> 07:53.080
so right inside the script we need to

07:53.080 --> 07:59.360
create a public slash uploads directory

08:00.639 --> 08:02.560
so here we'll be storing all the input

08:02.560 --> 08:05.280
files which will the user will upload so

08:05.280 --> 08:07.360
just create this directory structure and

08:07.360 --> 08:11.638
now in the PHP script we need

08:13.240 --> 08:17.360
to first of all upload the file so just

08:17.360 --> 08:20.198
add the PHP

08:25.560 --> 08:27.919
tag so right here you will be first of

08:27.919 --> 08:31.000
all be requiring the autoload file the

08:31.000 --> 08:32.479
vendor

08:32.479 --> 08:35.039
SL autoload.php

08:35.039 --> 08:37.360
so this is required because we need to

08:37.360 --> 08:39.479
load all these packages which is this is

08:39.479 --> 08:42.120
autoload PHP file we are loading it to

08:42.120 --> 08:44.839
load the packages third party packages

08:44.839 --> 08:47.680
so after this we need to in require

08:47.680 --> 08:51.519
those classes first of all for Dom

08:51.519 --> 08:53.480
PDF

08:53.480 --> 08:57.040
slash sorry this slash Dom PDF and the

08:57.040 --> 09:01.440
second package is pars down

09:04.880 --> 09:06.760
so we you can see we have required all

09:06.760 --> 09:09.760
these two classes Dom PDF bar down these

09:09.760 --> 09:12.079
two packages that we installed now we

09:12.079 --> 09:14.279
need to actually tell in which directory

09:14.279 --> 09:18.240
you need to store the input file so we

09:18.240 --> 09:21.519
will be storing inside the public SL

09:21.519 --> 09:23.959
uploads

09:24.640 --> 09:27.000
directory and then we need to Simply

09:27.000 --> 09:30.640
tell uh you need to give it a unique ID

09:30.640 --> 09:33.279
to the input file that will be uploaded

09:33.279 --> 09:36.480
so here we'll be having the target file

09:36.480 --> 09:38.000
so this will be equal to Target

09:38.000 --> 09:40.560
directory unique

09:40.560 --> 09:43.959
ID so we will be making this path here

09:43.959 --> 09:46.399
so it will be located in the Target

09:46.399 --> 09:50.120
directory concatenating by the unique

09:50.120 --> 09:52.040
name that we will be giving to

09:52.040 --> 09:53.600
the

09:53.600 --> 09:58.120
file and then you we will be having this

09:58.120 --> 10:02.000
underscore and then dot symbol is used

10:02.000 --> 10:03.920
in PHP to

10:03.920 --> 10:05.880
concatenate and here you'll be using the

10:05.880 --> 10:08.120
base name function to actually extract

10:08.120 --> 10:11.959
the extension so

10:12.399 --> 10:14.880
files so here we need to get the name of

10:14.880 --> 10:17.640
the files so we can simply get this by

10:17.640 --> 10:19.839
this is a file here and this is actual

10:19.839 --> 10:23.360
name parameter we have given if you see

10:23.360 --> 10:25.920
we have in index.html we have given this

10:25.920 --> 10:29.640
name parameter this needs to be same

10:29.640 --> 10:32.519
to actually get the name of the file

10:32.519 --> 10:35.519
that's all so this will be the complete

10:35.519 --> 10:38.279
path so after getting the path we can

10:38.279 --> 10:41.360
simply upload the

10:41.360 --> 10:43.880
file for uploading the file we be using

10:43.880 --> 10:46.839
the built-in function PHP which is move

10:46.839 --> 10:50.120
uploaded file so here it basically takes

10:50.120 --> 10:54.480
two arguments first is takes the actual

10:54.480 --> 10:57.959
name the temporary file this will be

10:57.959 --> 10:59.760
file

10:59.760 --> 11:01.120
you can just see it is giving me

11:01.120 --> 11:02.639
suggestion

11:02.639 --> 11:04.519
store

11:04.519 --> 11:07.160
name and then the second one will be the

11:07.160 --> 11:09.560
actual Target file that needs to get

11:09.560 --> 11:12.560
uploaded so Target uncore

11:12.560 --> 11:15.839
file so if if this function execute

11:15.839 --> 11:17.959
successfully then it will return true

11:17.959 --> 11:21.200
and in this case we can simply Echo a

11:21.200 --> 11:25.560
simple line that the file

11:31.000 --> 11:32.959
you can print out the name of the file

11:32.959 --> 11:35.639
as well using the HTML special

11:35.639 --> 11:37.000
characters

11:37.000 --> 11:39.680
function the file name has been uploaded

11:39.680 --> 11:41.600
this is not mandatory but we are just

11:41.600 --> 11:43.360
letting the user know that your file has

11:43.360 --> 11:45.720
been uploaded so after uploading this

11:45.720 --> 11:48.560
file we can even write else statement if

11:48.560 --> 11:51.200
it you can simply tell a message sorry

11:51.200 --> 11:53.920
there was error uploading your file so

11:53.920 --> 11:57.160
now if you basically see if you try to

11:57.160 --> 12:01.040
select a file click on convert to PDF

12:01.040 --> 12:02.920
you can see the use statement with the

12:02.920 --> 12:05.519
non-compound name pass down has no

12:05.519 --> 12:08.920
effect but you see this the file sample

12:08.920 --> 12:10.760
MD has been

12:10.760 --> 12:13.199
uploaded because this condition

12:13.199 --> 12:16.000
evaluates to true if you now check

12:16.000 --> 12:18.440
basically we have uploaded this markdown

12:18.440 --> 12:21.560
file it has given a unique name to it or

12:21.560 --> 12:24.720
added a underscore and then the name of

12:24.720 --> 12:26.480
the

12:26.480 --> 12:29.199
file so now we have successfully

12:29.199 --> 12:31.120
uploading the files now we simply need

12:31.120 --> 12:36.240
to basically pass the markdown to

12:36.240 --> 12:38.600
HTML for doing this first of all we need

12:38.600 --> 12:42.240
to check that if the file exist at that

12:42.240 --> 12:45.240
part that is the target file if this

12:45.240 --> 12:48.360
exist or not if this exist then it will

12:48.360 --> 12:51.480
return true and now we need to Simply

12:51.480 --> 12:54.440
pass the markdown content we will be

12:54.440 --> 12:56.720
first of all be using the file uncore

12:56.720 --> 12:59.880
getor contents function of PHP to

12:59.880 --> 13:02.399
actually read all the content of this

13:02.399 --> 13:04.600
markdown file and store it inside this

13:04.600 --> 13:08.480
variable so after this we need to

13:08.480 --> 13:11.959
pass this uh markdown and convert this

13:11.959 --> 13:13.199
into

13:13.199 --> 13:15.600
HTML so for doing this we'll be using

13:15.600 --> 13:18.120
this third party Library which is Parts

13:18.120 --> 13:20.560
down we're making a new Constructor of

13:20.560 --> 13:23.720
it like

13:23.720 --> 13:26.760
this so after this we will be making a

13:26.760 --> 13:27.839
[Music]

13:27.839 --> 13:30.680
simple we we'll be using a simple

13:30.680 --> 13:36.040
function to pass the markdown file and

13:36.040 --> 13:38.480
convert this into HTML so we'll be using

13:38.480 --> 13:41.079
the text function which is available and

13:41.079 --> 13:42.760
we'll passing the

13:42.760 --> 13:45.800
markdown content that

13:45.800 --> 13:49.040
we got in the previous variable right

13:49.040 --> 13:51.160
here we are passing this this will

13:51.160 --> 13:54.600
actually pass the markdown and convert

13:54.600 --> 13:58.480
the uh markdown to HTML and store it in

13:58.480 --> 13:59.680
this variable

13:59.680 --> 14:01.440
so now the job is really easy now we

14:01.440 --> 14:03.920
need to convert this HTML to PDF using

14:03.920 --> 14:05.399
the Dom PDF

14:05.399 --> 14:08.440
Library so we using the two libraries

14:08.440 --> 14:10.560
simultaneously so now we need to Simply

14:10.560 --> 14:13.959
say the output file name let me pick

14:13.959 --> 14:15.480
output.pdf

14:15.480 --> 14:18.720
just make sure that you put

14:18.720 --> 14:22.560
semicolon at the end in PHP if you don't

14:22.560 --> 14:24.720
you will get error and now we'll be

14:24.720 --> 14:26.600
using the second Library which is Dom

14:26.600 --> 14:29.920
PDF we making a new Constructor of it

14:29.920 --> 14:33.240
and then we will be using Dom PDF SL

14:33.240 --> 14:34.839
load

14:34.839 --> 14:37.160
HTML and we'll be using this function

14:37.160 --> 14:40.240
load HTML to actually convert this HTML

14:40.240 --> 14:41.560
to

14:41.560 --> 14:44.199
PDF very simple step and now we'll be

14:44.199 --> 14:48.480
using a render function of Dom PDF to

14:48.480 --> 14:52.160
render this HTML to PDF and now at last

14:52.160 --> 14:55.680
we just need to Output make use of this

14:55.680 --> 14:58.519
output function and store the PDF in

14:58.519 --> 14:59.880
this variable

14:59.880 --> 15:02.959
now we need to Simply download the file

15:02.959 --> 15:04.639
in the

15:04.639 --> 15:07.360
browser so now how to do this we need to

15:07.360 --> 15:09.519
Simply first of

15:09.519 --> 15:13.639
all create this file using file putut

15:13.639 --> 15:17.279
contents function in PHP so here it will

15:17.279 --> 15:21.680
actually create this file at that path

15:21.680 --> 15:24.000
with this content

15:24.000 --> 15:26.399
output so it will actually create this

15:26.399 --> 15:29.120
output file output.pdf right in the r

15:29.120 --> 15:31.079
directory and now we need to actually

15:31.079 --> 15:34.079
download this file in the browser for

15:34.079 --> 15:36.199
doing this we first of all again we will

15:36.199 --> 15:39.079
say file exist function we will actually

15:39.079 --> 15:41.120
check if this file has been

15:41.120 --> 15:44.800
created using this

15:45.920 --> 15:48.639
path if this created then it will return

15:48.639 --> 15:51.399
true and here we need to add all these

15:51.399 --> 15:54.319
headers if you check if you basically

15:54.319 --> 15:56.600
want to download any file in PHP first

15:56.600 --> 15:58.519
of all you need to add these headers

15:58.519 --> 16:00.720
just a about more information about the

16:00.720 --> 16:02.880
file that you're downloading so in this

16:02.880 --> 16:05.720
case we are downloading pH PDF file so

16:05.720 --> 16:08.399
we adding these all these headers so all

16:08.399 --> 16:10.560
the source code will be present if you

16:10.560 --> 16:14.560
purchase it you will get all this

16:14.560 --> 16:17.399
so if these if the file is not present

16:17.399 --> 16:20.839
we can actually sorry there was er error

16:20.839 --> 16:24.040
gener generating the PDF so now this

16:24.040 --> 16:26.120
application is complete so you can

16:26.120 --> 16:28.160
actually try this in the browser and

16:28.160 --> 16:29.839
simply go to the the homepage of this

16:29.839 --> 16:32.399
application and select your markdown

16:32.399 --> 16:35.880
file click on this button convert to PDF

16:35.880 --> 16:38.240
and now if you see the PDF file is

16:38.240 --> 16:40.839
successfully downloaded if you open it

16:40.839 --> 16:42.920
you can actually see all the markdown

16:42.920 --> 16:44.720
that is

16:44.720 --> 16:48.959
uh was there it has been converted to

16:48.959 --> 16:52.880
PDF and if you also see basically first

16:52.880 --> 16:55.480
of all we are converting this markdown

16:55.480 --> 16:59.360
to HTML using this

16:59.360 --> 17:02.720
the second library that we are

17:04.720 --> 17:08.520
using if you just see uh if you only

17:08.520 --> 17:10.720
want the HTML file you can even download

17:10.720 --> 17:12.880
the HTML as well totally depends upon

17:12.880 --> 17:16.438
you if you want the HTML or

17:16.919 --> 17:20.918
PDF so it does the both the

17:20.919 --> 17:24.480
things you can take any if I take the

17:24.480 --> 17:26.480
sample 2

17:26.480 --> 17:30.840
one you can see again

17:33.120 --> 17:36.520
has so if you want to try this before

17:36.520 --> 17:38.559
purchasing it in the checkout page I

17:38.559 --> 17:40.400
have given the link as well you can go

17:40.400 --> 17:43.240
to my website I basically deployed this

17:43.240 --> 17:46.320
tool if you go to free mediat tools.com

17:46.320 --> 17:49.480
mark down to PDF this is actually the

17:49.480 --> 17:51.000
tool that I

17:51.000 --> 17:53.600
deployed so if you need to try this tool

17:53.600 --> 17:55.960
first of all you can try

17:55.960 --> 17:59.400
this this is also you make made using

17:59.400 --> 18:02.559
PHP the same you can just

18:02.559 --> 18:05.000
see so you can try

18:05.000 --> 18:07.559
this the full source code is present in

18:07.559 --> 18:09.960
the description you can purchase it

18:09.960 --> 18:11.320
thank you very much for watching this

18:11.320 --> 18:13.039
video please hit that like button

18:13.039 --> 18:15.440
subscribe the channel as well and I will

18:15.440 --> 18:19.440
be seeing you in the next video