Difference between revisions of "PHP-and-MySQL/C4/File-Upload-Part-1/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with '{| border=1 !Time !Narration |- |00:00 |Hi everyone! |- |00:01 |This is a pure My SQL php tutorial. |- |00:07 |I will teach you the basics of connecting, retrieving data, handlin…')
 
Line 1: Line 1:
{| border=1
+
{|Border=1
 
!Time
 
!Time
 
!Narration
 
!Narration
 
|-
 
|-
|00:00
+
|0:00
|Hi everyone!
+
|Hi. In this tutorial I'll show you how to create a simple php upload script. 
 
|-
 
|-
|00:01
+
|0:05
|This is a pure My SQL php tutorial.
+
|This will be slightly more advanced in our upload dot php file.
 
|-
 
|-
|00:07
+
|0:10
|I will teach you the basics of connecting, retrieving data, handling errors and modifying data.
+
|We will use our index dot php. We will be mainly using html code to give a form to the user to submit this particular file.
 
|-  
 
|-  
|00:15
+
|0:20
|So that will cover some SQL code and some SQL queries.
+
|Then in upload dot php we will process this file, get some information about the file like its name, its type, size, temporary stored name and any error messages that have occurred.
 
|-
 
|-
|00:21
+
|0:33
|Ok! Lets start.
+
|You can use the error messages to check if it has occurred or hasn't occurred.
 
|-
 
|-
|00:24
+
|0:38
|Here I am going to show the directory structure of "mysql"
+
|Then we are going to process the file and save it in a specific directory on our web server.
 
|-
 
|-
|00:27
+
|0:45
|and we will create a couple of files here.
+
|In the second part of this tutorial, I'll quickly teach you how to check the specific file type so you can protect it against file types.
 
|-
 
|-
|00:29
+
|0:54
|I will create the first file and call it "connect.php".
+
| We will also learn how to check the file size of the file so you can have a maximum or minimum file size.
 
|-
 
|-
|00:34
+
|01:04
|I will come here, click on the folder called "mysql" and Save this as "connect.php"
+
|So here I've created a folder named 'uploaded' in which I've created my index and upload dot php files.  
|-
+
|00:40
+
|Now here we will create a separate file and include with every page that we use.
+
|-
+
|00:46
+
|This is a lot easier to connect to your database
+
|-
+
|00:50
+
|What we will do is type our "include" function and specify this file.
+
|-
+
|00:55
+
|I will create another file which is my main "mysql" file
+
|-
+
|01:02
+
|with a code that I will show you all.
+
|-
+
|01:03
+
|Ok so I have got my mysql dot php open.
+
|-
+
|01:07
+
|This is php codes and we need the php tags and the same will connect to php
+
 
|-
 
|-
 
|01:13
 
|01:13
|I will explain this "include" function in a minute.
+
|And this is where my files are being stored once they have been uploaded.  
 
|-
 
|-
|01:18
+
|01:17
|First, I will teach you how to connect to the database.
+
|When the files are uploaded initially they go into a temporary area on the web server and NOT into this folder.
 
|-
 
|-
|01:23
+
|01:25
|If you don't know where you have it stored on your webserver, then I suggest you check out an application called phpmyadmin.
+
|For the html - we need to create a form. To do this we have a form action and we have a  specific action which is 'upload dot php' and we've created our file here.
 
|-
 
|-
 
|01:38
 
|01:38
|It is a database interface php written program or in other words a script.
+
|The method is set to POST. The reason for this is that we don't need to store it in a GET variable.
 
|-
 
|-
|01:44
+
|01:45
|Here we will look at the inside of my database, my service.
+
|Why? Because we don't want the user to see the binary data we're sending across the website, for security reasons.  
 
|-
 
|-
|01:51
+
|01:53
|Rather my server, My SQL server.  It gives our table information, our database information and information about my server etc etc.
+
|And also there is a hundred character limit on our GET variable.
 
|-
 
|-
|02:03
+
|01:58
|Although, we don't need to know about it, this is a good start to a program, if you are just starting to use a php mysql or just mysql in general.
+
|So you’ll have a very small file if you have only hundred bits of data.
 
|-
 
|-
|02:10
+
|02:04
|It is a good way to start interfacing with your database, instead of using the command line to do things.
+
|Okay, we have another parameter which you may not have heard of before.  
 
|-
 
|-
|02:17
+
|02:11
|Using command line could be difficult for the first timers.
+
|It's enctype, encoding type which means how we are going to encode this.
 
|-
 
|-
|02:21
+
|02:20
|Ok, so what we see here are, our databases.
+
|It will be multi-part and we need a forward slash and then its form data.
 
|-
 
|-
|02:25
+
|02:28
|I have got one called "phpacademy" and I have got one called "phplogin" which I mentioned in another  tutorial that I have created.
+
|In short this means that we're submitting this form in the form of data - that is, binary data - zeroes and ones which I mentioned earlier over here.
 
|-
 
|-
|02:30
+
|02:40
|The others are just a standard.
+
|Okay so we've got the type this is going to be encoded to. We'll end our form here. 
 
|-
 
|-
|02:32
+
|02:50
|They are just for holding data.
+
|We'll need some elements inside as input for our file.
 
|-
 
|-
|02:33
+
|02:57
|Don't delete them.
+
|This type is set to file and we'll call it myfile to be specific.
 +
|-
 +
|03:04
 +
|Okay - paragraph break here and then all we need is a submit button,
 
|-
 
|-
|02:36
+
|03:12
|All you need to do is create new databases.  
+
|Okay so lets just preview this. Lets close this off.  
 
|-
 
|-
|02:39
+
|03:18
|To do this, you have got a simple box here.  
+
|Click file upload. Oh - lets go back.  Input - I typed 2 'u's here.
 
|-
 
|-
|02:41
+
|03:27
|We are just going to create databases.
+
|Lets go back. You can see here we got our input here.
|-
+
|02:43
+
|I will work within my php academy database for now.
+
|-
+
|02:51
+
|It is a lot easier.
+
|-
+
|02:53
+
|So its creating a database now.
+
|-
+
|02:55
+
|It is simple.
+
|-
+
|02:56
+
|You type in the name and click on "Create".
+
|-
+
|02:59
+
|My php has already been created here.
+
|-
+
|03:00
+
|So I will use this one.
+
|-
+
|03:02
+
|Click on it and you can see that there are several tables inside.
+
|-
+
|03:06
+
|This is denoted by the symbol here when using phpmyadmin.
+
|-
+
|03:09
+
|This is guestbook from my guestbook tutorial.
+
|-
+
|03:12
+
|Now I will create a new table on this database for the specifics of this tutorial and I shall call it "people".
+
|-
+
|03:28
+
|The number of fields is quite important.  
+
 
|-
 
|-
 
|03:31
 
|03:31
|You can't leave this blank.
+
|I can make it browse. We can see we got a selection of files which we can upload.
|-
+
|03:32
+
|The number of fields on your table is for storing each column of data.
+
 
|-
 
|-
|03:41
+
|03:36
|For example, the first one usually when you are dealing with records, you can have an ID which is a numerical value.
+
|Okay - so lets make it more user friendly for you and me.
 
|-
 
|-
|03:47
+
|03:45
|So it is a number that is going to increment each time.
+
|Upload a file. And lets refresh that.  Okay so we've got a nice page here.  
 
|-
 
|-
 
|03:50
 
|03:50
|It will allow you to reference your records being stored individually by the unique number.  
+
|We've got our header and possibility to upload a file here. Also can be manually typed in here if needed.  
 
|-
 
|-
|03:59
+
|03:58
|And usually set this to the primary key.  
+
|And also we have an upload button which submits to our upload dot php.
 
|-
 
|-
|04:01
+
|04:04
|If you are not familiar with the databases, you need to start looking out for terms like primary key.
+
|Fine. So inside upload dot php we need a way of processing this file which has been submitted from our form.
 
|-
 
|-
|04:08
+
|04:13
|I will not be dealing with secondary keys because its quite flexible way to do this anyway with mysql database.
+
|The way to do this is by using dollar underscore FILES. This isn't actually right.
 
|-
 
|-
|04:16
+
|04:19
|Just read up on databases in general, if you have Microsoft access or any other database program.  
+
|We can tell it isn't right by echoing out just a single instance of this.  
 
|-
 
|-
|04:25
+
|04:27
|I suggest you to learn about groups of database.
+
|When we do and I click on upload, we can see we just get Array. That's because this is an array.
 
|-
 
|-
|04:29
+
|04:33
|Ok, so the number of fields depends on how much data you want to store and what data you want to store.  
+
|Since this is a multidimensional array, in the first set of brackets we'll type the name of the file that we have uploaded and the name of the input box from which it came from - that is myfile.  
 
|-
 
|-
|04:36
+
|04:49
|Usually when I am creating fields, I will bring out an usual blank document.  
+
|So we'll use myfile here.  And in the second one we can have a variety of properties and the simplest and most easy one to think about is the name of the file.
 
|-
 
|-
|04:40
+
|04:59
|And I will start by typing out the fields that I want.
+
|So lets go back to the upload form and lets choose intro dot avi.  It will be displayed here.
 
|-
 
|-
|04:43
+
|05:06
|The first one is always going be ID.
+
|Lets click upload and on the next page we see intro dot avi.
 
|-
 
|-
|04:45
+
|05:11
|This is a self incrementing value every time I create a new record.
+
|Remember this is in our upload dot php form, file sorry.
|-
+
|04:50
+
|So it will be 1 for the first record, 2,3,4 and the data will be stored after this.
+
|-
+
|04:58
+
|It is a very useful field.
+
|-
+
|05:01
+
|Since my table is called "people", I will store some data about people.
+
|-
+
|05:07
+
|So I will first type in the firstname and then I will type in the lastname and then age and then gender.
+
 
|-
 
|-
 
|05:16
 
|05:16
|We can leave it there for now, to keep it simple.
+
|Okay so that's that. Let me just save this to a variable.  
 
|-
 
|-
|05:20
+
|05:22
|So here we can see that we have got 5 fields.
+
|The next one we'll look at is - I'll just type it here - is the type of file.
 
|-
 
|-
|05:23
+
|05:30
|I shall go back here and type in 5 and click "Go".  
+
|So this is dollar underscore files and we'll use the myname reference.
 
|-
 
|-
|05:28
+
|05:38
|It will also be great to see a pop up here in a minute.  
+
|And inside here we'll have the type.  So that's type or rather we'll echo this out so you can see.  
 
|-
 
|-
|05:32
+
|05:45
|No you won't because we haven't created our field names yet.
+
|And it's refresh. Re-send that and see that now - myfile.  
 
|-
 
|-
|05:35
+
|05:54
|Ok! We have a standard here.
+
|Right re-send that and we can see there's a video slash avi. You may have seen this somewhere before in html.  
|-
+
|05:37
+
|There are a lot of options for these.
+
|-
+
|05:40
+
|But, a field is a fieldname.
+
|-
+
|05:41
+
|So the first one is going to be "ID".
+
|-
+
|05:43
+
|The type is the data type, that you want to store this field in.
+
|-
+
|05:47
+
|Anything that goes into it must be added here to this datatype.
+
|-
+
|05:50
+
|"varchar" which stands for variable characters is quite common.  It is a very useful one and it requires a length.
+
|-
+
|05:57
+
|We can have 25 characters long here.
+
 
|-
 
|-
 
|06:00
 
|06:00
|You could have 250 characters long.
+
|For example - this can be image slash png or image slash jpeg, image slash bmp , video slash avi and video slash mpeg or some other format.
 
|-
 
|-
|06:02
+
|06:11
|Or 100 characters long.
+
|At the moment we can see from here that it is an avi file so therefore that's what we get in 'type'.
 
|-
 
|-
|06:04
+
|06:18
|Or 1 character long.
+
|So we can say type equals all of this.  
 
|-
 
|-
|06:06
+
|06:22
|Actually we are just storing the type and the length of the data stored.
+
|The next one I'll show you is the size.  So to save time what I'll do is - I'll copy this code,paste it here and change this type to size and echo it out.
 
|-
 
|-
|06:14
+
|06:30
|It helps in storing, for example your firstname.  
+
|You can see it's quite simple to get e-property of the file you submit.
 
|-
 
|-
|06:19
+
|06:35
|Lets say our fieldname here is "firstname" and I have a "varchar".  
+
|I'll refresh this page and click resend and we can get the size of the file.
 
|-
 
|-
|06:24
+
|06:40
|There is no point in typing in 500 characters because we will be using unnecessary amount of data.  
+
|Now lets say we round this off to about a million - a million bytes is in fact a....,
 
|-
 
|-
|06:33
+
|06:47
|A typical firstname will not be more than 25 characters.
+
|Sorry, a million bits is a megabyte. myfile is actually a mega byte.  
|-
+
|06:37
+
|Even if it is, it will not be more than 30 or 35 characters.
+
|-
+
|06:42
+
|But for now I will store my "firstname" as 20 or 25 characters, I will put 20 here.
+
|-
+
|06:48
+
|Our "ID" will be an integer because it is a number.
+
 
|-
 
|-
 
|06:54
 
|06:54
|It will be self incrementing.
+
|So we've got a million megabyte of data here.
|-
+
|06:55
+
|This will be 1,2,3,4
+
|-
+
|06:56
+
|The amount of records we use.
+
|-
+
|06:57
+
|And we have some other options here.
+
 
|-
 
|-
|07:02
+
|06:58
|Now this here is primary key.
+
|So lets save that in a variable called size. Ok?
 
|-
 
|-
|07:04
+
|07:05
|We are going to select it and at extra, we can see that we got "auto underscore increment".
+
|Right then, the next one which is quite an important one is the 'temporary name'.
 
|-
 
|-
 
|07:09
 
|07:09
|This is an auto increment.  
+
|This is written slightly differently as tmp abbreviated to temp and underscore and name.
 
|-
 
|-
|07:11
+
|07:18
|It will give this particular function.  
+
|This will give us the directory that it's stored in temporarily until we transfer it to the folder of our choice.
 
|-
 
|-
|07:13
+
|07:25
|Whenever you enter a new record, this will also automatically go up.
+
|So lets refresh this page.
 
|-
 
|-
|07:19
+
|07:27
|So here we have "firstname".
+
|Click on Resend and you can see that that's stored into an xampp cause I'm using this application
 
|-
 
|-
|07:21
+
|07:33
|We have "lastname" and again I will set this as 30.
+
|But if you're using an apache you can store php yourself.  
 
|-
 
|-
|07:26
+
|07:37
|And what else do we have???
+
|You'll have apache here followed by your temporary file name.
 
|-
 
|-
|07:28
+
|07:41
|We have "age" and obviously this is an integer and we have "gender".
+
|You can see that this is a randomly generated name that has a tmp extension.
 
|-
 
|-
|07:34
+
|07:45
|Ok.
+
|But it is useless to us at the moment.
 
|-
 
|-
|07:36
+
|07:48
|Now here instead of "age", I will say say "Date of birth".
+
|So we can save that as temp file or tempLets type 'temp' in order to keep it short.
|-
+
|07:40
+
|So this is Date of Birth.
+
|-
+
|07:44
+
|I will set this as date.  
+
|-
+
|07:46
+
|Here I am trying to find a date datatype and I will see how this works.
+
|-
+
|07:52
+
|So our length for date doesn't have to be set here.
+
 
|-
 
|-
 
|07:55
 
|07:55
|We have a standard format for this. So we don't have to worry about that.
+
|And the last one is 'error'. Now this will basically echo out a zero if everything is clear.
 
|-
 
|-
 
|08:00
 
|08:00
|Now I will set the "gender" as "varchar" of character 1.
+
|Again copy-paste and change that to error.
 +
|-
 +
|08:03
 +
|We should get zero at the moment because everything is written correctly.
 
|-
 
|-
 
|08:07
 
|08:07
|Now we can store "M" for male and "F" for female.
+
|And this will never be a negative value.
 
|-
 
|-
 
|08:12
 
|08:12
|Ok. If we go across here, we can see that there are a lots of options.  
+
|If it's more than zero it means that it's giving an error code which basically means that you have an error.  
 
|-
 
|-
|08:18
+
|08:21
|You can comment this yourself.
+
|And let's say we'll store this in a variable called error.
 
|-
 
|-
|08:19
+
|08:28
|You can remind yourself what this field does.  
+
|Okay that's all for now.  In the second part of this tutorial I'll show you how to upload your file by moving it from the temporary storage area to a specified area of your choice.  
 
|-
 
|-
|08:22
+
|08:39
|But usually name your fieldname appropriately so you know what data you are saving.
+
|And what we'll do is we'll use this variable error to see if there are any errors.
|-
+
|08:26
+
|Ok. Here I will click on "Save" and you can see that "people" has appeared here.
+
|-
+
|08:35
+
|This will ask you a query here.
+
|-
+
|08:38
+
|Now when I was talking about command line earlier, this is what you have to type to create that.
+
|-
+
|08:41
+
|However, we have used a graphic user interface to save ours.
+
 
|-
 
|-
 
|08:45
 
|08:45
|We can see down here, we have our fields, our types and our collation attributes, null data for example.
+
|If there are errors, then we'll echo it out and use the error code.  
|-
+
|08:52
+
|The default value that is stored as.... say for example if you had a field saying "Has the user registered?"
+
|-
+
|09:02
+
|Or anything of your choice.  You could use the default here too.
+
|-
+
|09:13
+
|For example if I wanted to store everyone, I have registered here as male by default or female by default, I could type "M" or "F" here.
+
 
|-
 
|-
|09:21
+
|08:49
|And we have auto increment here and also some other data that we don't need to know about in this tutorial.
+
|If not we'll take this temp and we'll use a specific function called 'move uploaded' file and we'll take that and store it in our uploaded directory created on my web server here.
 
|-
 
|-
|09:26
+
|09:01
|Ok here we have created our table and if you go in part II of this, I will show you how to insert some data and also how to retrieve this data from your database using php.
+
|And then after that I'll take you through some specifics to say - is this a jpeg? Yes then disallow jpeg image being uploaded or disallow specific file size.
 
|-
 
|-
|09:39
+
|09:10
|Join me in part 2. This is Evan Varkey dubbing for the Spoken Tutorial Project. (Script contributed by Juanita Jayakar).
+
|Okay so tune in to Part-2. Thanks for watching. This is Joshua Mathew dubbing for the Spoken Tutorial Project.

Revision as of 15:22, 25 October 2013

Time Narration
0:00 Hi. In this tutorial I'll show you how to create a simple php upload script.
0:05 This will be slightly more advanced in our upload dot php file.
0:10 We will use our index dot php. We will be mainly using html code to give a form to the user to submit this particular file.
0:20 Then in upload dot php we will process this file, get some information about the file like its name, its type, size, temporary stored name and any error messages that have occurred.
0:33 You can use the error messages to check if it has occurred or hasn't occurred.
0:38 Then we are going to process the file and save it in a specific directory on our web server.
0:45 In the second part of this tutorial, I'll quickly teach you how to check the specific file type so you can protect it against file types.
0:54 We will also learn how to check the file size of the file so you can have a maximum or minimum file size.
01:04 So here I've created a folder named 'uploaded' in which I've created my index and upload dot php files.
01:13 And this is where my files are being stored once they have been uploaded.
01:17 When the files are uploaded initially they go into a temporary area on the web server and NOT into this folder.
01:25 For the html - we need to create a form. To do this we have a form action and we have a specific action which is 'upload dot php' and we've created our file here.
01:38 The method is set to POST. The reason for this is that we don't need to store it in a GET variable.
01:45 Why? Because we don't want the user to see the binary data we're sending across the website, for security reasons.
01:53 And also there is a hundred character limit on our GET variable.
01:58 So you’ll have a very small file if you have only hundred bits of data.
02:04 Okay, we have another parameter which you may not have heard of before.
02:11 It's enctype, encoding type which means how we are going to encode this.
02:20 It will be multi-part and we need a forward slash and then its form data.
02:28 In short this means that we're submitting this form in the form of data - that is, binary data - zeroes and ones which I mentioned earlier over here.
02:40 Okay so we've got the type this is going to be encoded to. We'll end our form here.
02:50 We'll need some elements inside as input for our file.
02:57 This type is set to file and we'll call it myfile to be specific.
03:04 Okay - paragraph break here and then all we need is a submit button,
03:12 Okay so lets just preview this. Lets close this off.
03:18 Click file upload. Oh - lets go back. Input - I typed 2 'u's here.
03:27 Lets go back. You can see here we got our input here.
03:31 I can make it browse. We can see we got a selection of files which we can upload.
03:36 Okay - so lets make it more user friendly for you and me.
03:45 Upload a file. And lets refresh that. Okay so we've got a nice page here.
03:50 We've got our header and possibility to upload a file here. Also can be manually typed in here if needed.
03:58 And also we have an upload button which submits to our upload dot php.
04:04 Fine. So inside upload dot php we need a way of processing this file which has been submitted from our form.
04:13 The way to do this is by using dollar underscore FILES. This isn't actually right.
04:19 We can tell it isn't right by echoing out just a single instance of this.
04:27 When we do and I click on upload, we can see we just get Array. That's because this is an array.
04:33 Since this is a multidimensional array, in the first set of brackets we'll type the name of the file that we have uploaded and the name of the input box from which it came from - that is myfile.
04:49 So we'll use myfile here. And in the second one we can have a variety of properties and the simplest and most easy one to think about is the name of the file.
04:59 So lets go back to the upload form and lets choose intro dot avi. It will be displayed here.
05:06 Lets click upload and on the next page we see intro dot avi.
05:11 Remember this is in our upload dot php form, file sorry.
05:16 Okay so that's that. Let me just save this to a variable.
05:22 The next one we'll look at is - I'll just type it here - is the type of file.
05:30 So this is dollar underscore files and we'll use the myname reference.
05:38 And inside here we'll have the type. So that's type or rather we'll echo this out so you can see.
05:45 And it's refresh. Re-send that and see that now - myfile.
05:54 Right re-send that and we can see there's a video slash avi. You may have seen this somewhere before in html.
06:00 For example - this can be image slash png or image slash jpeg, image slash bmp , video slash avi and video slash mpeg or some other format.
06:11 At the moment we can see from here that it is an avi file so therefore that's what we get in 'type'.
06:18 So we can say type equals all of this.
06:22 The next one I'll show you is the size. So to save time what I'll do is - I'll copy this code,paste it here and change this type to size and echo it out.
06:30 You can see it's quite simple to get e-property of the file you submit.
06:35 I'll refresh this page and click resend and we can get the size of the file.
06:40 Now lets say we round this off to about a million - a million bytes is in fact a....,
06:47 Sorry, a million bits is a megabyte. myfile is actually a mega byte.
06:54 So we've got a million megabyte of data here.
06:58 So lets save that in a variable called size. Ok?
07:05 Right then, the next one which is quite an important one is the 'temporary name'.
07:09 This is written slightly differently as tmp abbreviated to temp and underscore and name.
07:18 This will give us the directory that it's stored in temporarily until we transfer it to the folder of our choice.
07:25 So lets refresh this page.
07:27 Click on Resend and you can see that that's stored into an xampp cause I'm using this application
07:33 But if you're using an apache you can store php yourself.
07:37 You'll have apache here followed by your temporary file name.
07:41 You can see that this is a randomly generated name that has a tmp extension.
07:45 But it is useless to us at the moment.
07:48 So we can save that as temp file or temp. Lets type 'temp' in order to keep it short.
07:55 And the last one is 'error'. Now this will basically echo out a zero if everything is clear.
08:00 Again copy-paste and change that to error.
08:03 We should get zero at the moment because everything is written correctly.
08:07 And this will never be a negative value.
08:12 If it's more than zero it means that it's giving an error code which basically means that you have an error.
08:21 And let's say we'll store this in a variable called error.
08:28 Okay that's all for now. In the second part of this tutorial I'll show you how to upload your file by moving it from the temporary storage area to a specified area of your choice.
08:39 And what we'll do is we'll use this variable error to see if there are any errors.
08:45 If there are errors, then we'll echo it out and use the error code.
08:49 If not we'll take this temp and we'll use a specific function called 'move uploaded' file and we'll take that and store it in our uploaded directory created on my web server here.
09:01 And then after that I'll take you through some specifics to say - is this a jpeg? Yes then disallow jpeg image being uploaded or disallow specific file size.
09:10 Okay so tune in to Part-2. Thanks for watching. This is Joshua Mathew dubbing for the Spoken Tutorial Project.

Contributors and Content Editors

Gyan, Pratik kamble, Sandhya.np14