Up next in 10
Build a PHP 8 File Manager CRUD Web App With Pagination in Browser Using MySQL Database
0 views
Jun 7, 2025
Buy the full source code of the application here: https://procodestore.com/index.php/product/build-a-php-8-file-manager-crud-web-app-with-pagination-in-browser-using-mysql-database/ Official Website: https://freemediatools.com
View Video Transcript
0:03
uh hello guys uh welcome to this uh
0:05
video in this live stream we will
0:06
building a full web application inside
0:10
PHP and MySQL it's it will be a file
0:13
manager kind of an web application as
0:15
you can see on your screen we have an
0:17
option of uploading files and uh you
0:21
also have the option to delete view the
0:23
files as well and also with
0:27
pagination so this is the interface
0:29
which looks something like this we have
0:32
the option to choose multiple files and
0:34
upload this and for this we are using
0:36
MySQL database as you can see our
0:38
database contain this table which
0:40
contain these five columns id will be
0:43
the primary key file name the MIM type
0:46
file data will be a blob which will
0:48
store the actual file and the uploaded
0:52
at currently the database is empty so if
0:55
you reload the application nothing is
0:57
there so if I try to choose the file
1:00
here if I select all these files
1:03
multiple files so you can see five files
1:07
are selected and as I click the upload
1:09
button you will see instantly the files
1:11
will be uploaded and if I try to refresh
1:14
the table you will see all the files
1:17
will be there in the table so it has
1:19
assigned the primary key we have the
1:22
file name and MIM type all these are JPG
1:25
images and I also you can see we are
1:27
storing the actual files in the database
1:30
inside the blob so I will show you how
1:33
to do this and this is the timestamp so
1:35
if you click on this you will see this
1:37
is the actual file that is stored inside
1:39
the database so if you try to view these
1:42
files here we have various buttons out
1:44
there we can view the file we can
1:46
download we can delete all the four CRUD
1:49
operations you can perform create read
1:51
update and delete if I click the view
1:54
button you will see the actual file will
1:56
display the in this case it is the
1:58
actual image file and you can see we can
2:02
download this as well so this will
2:04
download this from the database and this
2:06
will be the actual image file which you
2:08
have downloaded you also have the option
2:11
to delete so if you click the delete
2:13
button it will say that are you sure you
2:15
want to delete this i will say okay then
2:17
that image will be deleted you can see
2:20
it will also delete it from the database
2:22
as well so now only three entries will
2:24
be there so now you can see it has been
2:26
deleted from the database as well so
2:29
this is actually the application guys
2:30
and also pagination as well if you see
2:35
we are showing three files per page so
2:38
now we have three pages right here so we
2:40
are on the first page if I navigate to
2:42
the second page the URL will change so
2:46
if I go to the third page you will see
2:48
that so next three images will show up
2:50
so it's a fullyfledged file manager kind
2:53
of a web application where you can
2:55
upload delete view and download the
2:58
files with pagination so it's a full
3:01
project if you are interested to
3:03
purchase the full source code of this
3:04
project the link is given in the
3:06
description i will show you step by step
3:07
how I coded this this will be the
3:09
directory structure you will see we have
3:12
using MySQL database and PHP 8 which is
3:15
the latest version and this is all the
3:17
directory structure you will get after
3:19
you purchase the source code the link is
3:20
given in the description so now let's
3:23
get started i will delete everything and
3:25
start building this application from
3:27
scratch so let me delete
3:30
everything and for this you need to have
3:35
a way to run PHP code the most basic
3:40
thing you need to have is exam control
3:42
panel if you are on Windows it's a
3:44
cross-platform software so it basically
3:47
comes with Apache web server or MySQL
3:49
database i've already started both these
3:52
things and just go to the admin section
3:55
PHP myadmin and right here you need to
3:57
create a new database i've already
3:59
created one database right here if you
4:01
see which is my website which is free
4:05
media tools.com or you can create a new
4:08
one let's
4:11
suppose file project
4:21
so create a database and right here you
4:24
need to
4:27
uh I will define this file here which
4:30
will be your DBS SQL file so it will
4:33
contain all the databases all the tables
4:36
so inside this database you will
4:38
actually write the SQL code create table
4:42
if not
4:43
exist we'll call this table name as
4:49
files and inside parentheses you will
4:52
specify the column names first one will
4:55
be the actual column name for
4:58
storing the primary key so this will not
5:01
be null and it will be auto increment so
5:04
this means that this will be unique and
5:06
auto
5:07
increment primary key of the table and
5:10
then we have the actual file name this
5:12
will be of type
5:14
vchar and the limit will be 255
5:17
characters and it will be not null the
5:20
next column will be for storing the mim
5:24
type which will be the extension this
5:27
will also be of var 255 and also it will
5:31
be not null next one will be the actual
5:34
content that you want to store this will
5:36
be in long blob syntax and it will be
5:41
not
5:42
null and lastly we also have the column
5:45
to store the date in which that file was
5:49
uploaded so for that we'll be using time
5:52
stamp and it will be not null and the
5:55
default one will be the current time
5:57
stamp which will the current date and
5:59
time
6:01
and then we will simply set the id to be
6:04
the primary key of the table so in this
6:06
way we can set
6:10
this and lastly you just need to provide
6:13
the engine so these are some constant so
6:16
I'll paste
6:21
it so now you what you need to do you
6:24
just need to paste this code inside your
6:27
PHP myadmin go to the SQL section and
6:30
this will create automatically the table
6:32
based upon the schema that you pasted so
6:36
now we have the go button so just click
6:40
this go button and then it will create
6:42
your database so go to this structure
6:46
right here now this table you will see
6:48
the files table has been successfully
6:51
created and if you see the structure you
6:54
have five columns id is the primary key
6:57
file name MI me type content uploaded at
7:00
now we start building the actual
7:01
application so just define your basic
7:04
file here index dot PHP which will be
7:06
the homepage of the application so right
7:08
here we are using some Bootstrap as well
7:11
for styling purposes so we will simply
7:14
have first of all our HTML file so here
7:17
you just need to include the CDN of
7:20
Bootstrap simply include this and right
7:24
inside we will just give it some
7:26
bootstrap
7:29
class container
7:33
class and inside this we will have an H2
7:36
heading and a simple form which will be
7:40
responsible
7:44
for for this application you have a
7:47
simple form here and H2
7:49
heading so if you go to the application
7:52
now just say
7:55
localhost file upload you will see this
7:58
form here it is tiled using bootstrap
8:00
classes and uh the nice thing is that
8:04
inside this we are making a simple post
8:06
request to this upload dot php so now we
8:09
just need to define this php script
8:10
which will handle the actual uploading
8:12
of the files we are making a post
8:14
request right here if you see that and
8:17
then inside this form we have this input
8:19
type we are having this name parameter
8:23
files and here we are putting this
8:26
attribute multiple so for allowing
8:28
multiple file upload then we have the
8:30
button to upload the file as soon as we
8:33
click
8:34
this now we define this script here
8:37
which will be responsible for uploading
8:39
so upload dot PHP so right
8:42
here we will actually write the code
8:46
for uploading the file so right
8:52
here
8:54
we put the PHP
8:58
tag so inside
9:00
this the very first thing we need to do
9:02
we need to define this uh DB file
9:05
db.tphp dot php which will hold the
9:07
connection code so that we can connect
9:10
to this database for connecting to the
9:12
database it's quite easy you just need
9:14
to write this basic PHP code so here you
9:18
will define your host name so here we
9:21
are developing on local host and then
9:23
you just need to provide your username
9:26
which in this case is
9:28
root and then we need to provide the
9:30
password by default it is null and then
9:35
the database name so in my case it was
9:37
free media tools 1997 this is the
9:40
database name after you provide this now
9:43
we make the connection so now for making
9:45
the connection we say mysqli and we pass
9:48
both all these things host name then we
9:51
have the user then we have the password
9:54
then we have the database name so after
9:56
passing all these things our connection
10:00
will be
10:01
made and if any sort of error take place
10:04
we
10:05
can have
10:07
this
10:08
display we will display this message
10:11
that connection failed so now we just
10:14
need to include this file inside our
10:15
upload dot php so right here whenever we
10:19
are doing anything we need to first of
10:22
all upload uh include this because first
10:25
of all we need to make the connection to
10:27
the database so now for including it we
10:29
simply say require and then the script
10:32
name which is
10:34
db.tphp after that we put a semicolon
10:37
and uh then we simply in the if
10:40
condition if is set so here you'll be
10:44
checking that if the files are there if
10:49
the files are there then we will simply
10:51
get the files using the files array in
10:54
PHP so this needs to be whatever is the
10:57
name attribute that you have given so
10:59
our name attribute is you can see we
11:01
have given this name attribute which is
11:03
files so that's the same and name
11:06
attribute that we are using so just make
11:09
sure that you put semicolon in PHP
11:11
because if you don't put this you will
11:13
get an error so just put this semicolon
11:16
and after that you just need to get the
11:20
total number of
11:22
files so because we are uploading
11:24
multiple files so this will actually
11:26
contain the total length of files which
11:29
are
11:32
there and then we just need to run a
11:34
simple for loop for looping through each
11:37
file so you will declare a variable I
11:40
which will start from zero and it will
11:44
run until the total number of files and
11:47
I
11:49
++ this is a simple loop and here we are
11:56
simply checking that if no error is
11:59
there so we have
12:02
this property inside PHP
12:06
if this triple equal
12:09
to upload error okay if all things are
12:15
okay if this is the case then we will
12:17
upload the actual file name so we'll
12:20
give it a file name right
12:26
here like this and then we also give the
12:29
MIM
12:31
type which we also get using the type
12:34
property right here
12:41
and then we get this data that needs to
12:44
be stored inside the
12:45
blob file get
12:50
contents because if you see we define
12:53
this blob that you see this is we are
12:56
storing the actual image right in the
12:58
database itself so we are storing this
13:01
blob
13:05
so
13:08
files and it has a property here which
13:10
is temp
13:12
name you can even store it in a folder
13:15
but we are storing directly in the
13:17
database so this is another technique
13:19
that you can do and then we are simply
13:22
executing this query by using prepared
13:25
statements inside PHP so we simply call
13:27
this function which is
13:30
prepare and then we run the simple SQL
13:34
query insert into and then the table
13:39
name and we here define all the
13:42
columns
13:44
so the file name then we have the MI
13:51
type the file data and then you put the
13:56
actual
13:58
values question mark question mark
14:01
question mark this is actually the
14:03
prepared
14:04
statements after you do
14:10
this you
14:15
simply declare this variable and then
14:18
you
14:19
call bind
14:21
parameters bind param and here you
14:26
pass all these four parameters and then
14:31
execute this so let me just write this
14:34
this
14:39
is the script here we are executing this
14:46
query after we do this we just need to
14:48
redirect the user back to the index dot
14:52
PHP file so for this we use the header
14:54
function index dot PHP and exit from the
14:57
script that's all
15:02
so if you try
15:04
to refresh the application and uh if you
15:08
select
15:09
here these three files click on upload
15:13
so now you will see it is setting path
15:17
cannot be
15:20
empty upload.php on line number three so
15:23
I think there is some kind of error
15:29
in let me say
15:43
db.tphp i think there is some kind of
15:45
typo mistake let me paste this so you
15:47
will get all the source code once you
15:49
purchase it the link is given in the
15:51
description so let me just run this now
15:54
again select multiple files click on
15:58
upload you will see unknown column file
16:06
data on line number
16:20
14 let me put this on the same line i
16:24
think there is some kind of mistake in
16:34
formatting uh sorry I think I called
16:38
this as
16:40
content that is why this file data
16:43
doesn't exist if you check the database
16:46
the file data doesn't exist
16:51
we called it as content so just we need
16:54
to replace instead of file data we need
16:56
to say content and I think this will fix
17:00
the problem if I refresh
17:09
it so now you will see there is no
17:11
problem if I try to refresh it all these
17:14
four
17:15
files is successfully uploaded you will
17:18
see it has given the primary key 1 2 3 4
17:21
we have the file name we have the MIM
17:23
type so all these blobs are stored right
17:26
here in the content and these are the
17:28
timestamps so now we just need to
17:31
display this whenever we reload the page
17:34
inside a Tableau structure so now we
17:36
need to go to
17:37
index.tphp and uh we need to display
17:44
this in a tablo structure so for
17:47
displaying it it's very
17:50
easy
17:52
so we need to display it in a paginated
17:55
manner because we only need to see three
17:58
records per page so for this we need to
18:01
write some PHP code right here so
18:04
just open the PHP tags and we just need
18:07
to first of all require the DB script we
18:11
require it and then we set the limit how
18:14
many records you want to show so I want
18:16
to show three records and here we simply
18:20
set the current
18:24
page which will
18:26
be if the current page exist then we
18:30
need to get the
18:32
maximum this is uh the pagination logic
18:35
guys we get the current
18:38
page after getting the current page we
18:41
calculate the
18:42
offset by this formula which
18:45
is the current page whatever is the
18:49
current page we need to subtract one
18:51
from it and then multiply the how many
18:54
records you want to display so this is
18:57
present in the variable of limit so then
19:00
you can calculate it this is the formula
19:04
after we get this now we just need to
19:06
get the total number of records that
19:09
needs to be displayed so for this we'll
19:11
read the data from the database by using
19:13
this function query and here we'll be
19:16
executing this select query and count
19:19
and we'll count all the records which
19:21
are present so count star as count from
19:26
the table name which is files and then
19:29
we get all these data in a associative
19:32
array so we basically call this function
19:35
fetch
19:36
associative and then we get the count
19:39
value so this will get the total number
19:42
of records which are there so from this
19:44
we will calculate the variable which is
19:47
total pages so we
19:51
simply get this by dividing it by the
19:55
limit so if the total records are 15
19:58
then we divide this by three so it comes
20:01
out to be five so in this way we get the
20:04
total number of pages and then we get
20:06
the actual data that needs to be
20:09
displayed so for this once again we use
20:11
the connection object uh again we call
20:16
use a
20:17
prepared prepared statement and we will
20:20
again get the id file name me
20:26
type from the table name which is files
20:29
and we need to order it by descending
20:31
order so that the latest files comes
20:35
first uploaded at
20:40
descending and we just need to say limit
20:43
question
20:47
mark so now we just need to execute this
20:50
query so for executing it we simply use
20:53
the bind
21:00
param then we simply execute this
21:08
then we get the result right
21:11
here by calling this get result function
21:15
so now we get this records in this
21:17
variable of result now we just need to
21:19
display this so for displaying it so you
21:22
just need to add this uh CSS code for
21:25
the model window for showing the images
21:28
in the model so just add this stylesheet
21:30
code this is not important to the
21:32
application so just add
21:35
this so right after the form we will
21:38
display this in a tableau structure so
21:40
we define
21:42
this let me just paste
21:45
it this is all the
21:51
HTML so here we are simply adding some
21:54
PHP code as well if you see we are
21:56
looping through in a while loop showing
21:58
all the
22:01
records simply calling result fetch
22:03
associated and then we are putting all
22:06
these properties the ID file name then
22:09
we
22:10
also binding some buttons so once you
22:14
click these buttons we will execute view
22:18
image then we have the download PHP
22:21
script as well we are passing the uh
22:23
primary key of the record that we want
22:26
to download similarly for delete as well
22:28
so we need to define all these scripts
22:30
which is download delete
22:33
and this one for the view
22:40
image
22:42
so then after that this table we will
22:46
have this
22:55
pagionation if you just try to refresh
22:57
the table application now you will see
23:00
the records will display this is all the
23:03
records which are displaying the buttons
23:05
will not work because these scripts
23:07
haven't been defined so after this table
23:10
we'll add
23:14
the the model code here if you
23:26
see this is the model window whenever
23:29
you click the view button the images
23:32
will show in a model window so for this
23:35
we need to add some JavaScript as well
23:39
when you click the model the model will
23:41
show these are
23:43
all currently if you click the view
23:45
button this model will be empty because
23:47
we need to define the script which will
23:50
be responsible for showing the image so
23:55
we just need to define
23:59
a script view dot PHP so inside this PHP
24:04
script we will
24:06
write the PHP code which will be
24:08
responsible for fetching the image and
24:10
displaying it in the model window so we
24:13
first of all
24:15
require the DB
24:19
script and we get the ID of the image
24:22
that needs to be displayed
24:25
so we get the ID like this and see we
24:29
convert this into integer by type
24:31
casting it and storing it in this ID
24:34
variable and then we
24:37
simply return the image this will be the
24:41
PHP script we will search the table
24:45
based upon this primary key that is
24:47
there inside ID we will say select file
24:50
name type file data from where id is
24:53
equal to and then that id it will return
24:56
the record and you will display this so
24:59
if you refresh
25:01
now if you click
25:11
view and
25:13
similarly we also need to
25:16
define the scripts for deleting delete
25:20
dotphp and download dotphp so these
25:24
scripts will be responsible for
25:26
downloading the file and deleting it
25:30
and let me just paste it this is the
25:33
code for downloading it's very simple
25:37
code again we first of all
25:41
require the db.tphp the connection code
25:45
after that we get the primary key again
25:47
by dollar get id we store it inside this
25:51
and then we get the record by again
25:53
writing this prepared statement we
25:56
execute and get the record and then we
25:59
actually send this the headers and eco
26:05
data so if you click the download button
26:09
you will see
26:10
the unknown column file data that's the
26:14
problem uh because it is not file data
26:18
it is content so here also in the view
26:20
dotphp also I made this mistake this
26:23
needs to be
26:25
content that was the mistake I think and
26:28
now the image will also
26:33
show if you click download you can see
26:36
the image is successfully
26:40
downloading and similarly we have the
26:43
delete PHP as well this will be very
26:46
similar
26:48
through the primary key we will get the
26:52
record that we want to delete again by
26:54
dollar get ID we get the ID we get
26:58
prepare delete from files where ID is
27:00
this and we execute the query and
27:03
redirect the user back to the homepage
27:05
so if you refresh
27:09
now click on
27:12
delete so now you will see that record
27:15
is deleted only two records are there
27:18
and if I see the database as well so
27:20
those two records are successfully
27:23
deleted so we download button is working
27:26
delete yes upload is also working if you
27:29
upload the
27:33
files so this is the first page this is
27:36
the second page you can see the
27:38
pagination is also working
27:40
so the full source code guys is given in
27:43
the description of the video this view
27:45
button uh I think I made some kind of
27:49
mistake in the index.php so what I will
27:51
do for the not wasting your time I will
27:55
simply
27:57
paste all the code
28:01
here there will be some typo mistakes
28:09
so I just need to search for this column
28:12
name which is filed
28:28
data so you will get this source code
28:31
guys in the zip file the link is given
28:34
in the description it's a full file
28:35
manager app that we
28:37
developed and thank you very much for
28:40
watching this video