Learn to Code in 5 Minutes


Learn right now to program a photo sharing web app.
Get going - time is running!

Your Goal:

Program a foto sharing application that you can use to upload a photo to a server and provide a link to it. The result is an individual link that you can use in Email and SMS, thus sending just a link and not the entire photo.
Click here for the tutorial in DEUTSCH!

The Solution:

1. Code

Copy the following code:
<h3>Foto Sharing App</h3>
<form action="http://www.wowoodu.com/p/photoupload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" >            
    <input type="submit" value="link photo" >  
 </form>

2. Host

Open w3schools Tryit Editor in a new window/tab.

3. Programming

Replace the following sentence in the programming window of theTryit Editor with the Code that you just copied before:
The content of the body element is displayed in your browser.
It means: insert the code exactly between the two socalled "Body Tags":
<body>
...
</body>

4. Testing

Click "See Result". It will be shown in the right window. Now check if your programming works properly: pick a photo of yours with the left button and click the right button to submit it to for linking.

5. Bug Fixing

If it does not work, we made a mistake in the programming. Repeat steps 1-4, trying to find and eliminate the error. If that does not work out, just change step one as follows: copy the following code and replace the entire code in the left window of the editor.

<!DOCTYPE html>
<html>
<body>
<h3>Foto Sharing App</h3>
<form action="http://www.wowoodu.com/p/photoupload.php" method="post" enctype="multipart/form-data">
 <input type="file" name="uploadFile" > 
 <input type="submit" value="link photo" > 
</form>
</body>
</html>


Does it work?
 

Congratulations!

You learned programming in just 5 minutes!!!


That's programming? No way! And yet it is! Let's go back and look at what you have done: You That's something, isn't it? Let us analyze this step by step. This little exercise was a beginning to get you going and to quickly show you what programming is all about. Now you probably want to know what exactly happened and we will show you.

Resources

Taking code from a resource instead of writing every single bit of code yourself is the norm today. Just look at all the little characters involved in your code. How easy is it to type a tiny typo in 100 lines of code? A tiny semi-colon can stop your code from working!

Today is paradise for coding, because there is so much documentation, discussion and resources for coding problems to be found online and in socalled cook-books. Whenever you have a problem, you will find a solution in one of the resources. What they are will be revealed later.

Host

Your program is like a text file - it has to be stored somewhere. Since your program should be usable over the internet, we have to store it on a computer that is connected to the internet. We call that a host.

Your PC/tablet/smartphone is connected to the internet but probable does not have a Html-editor.Therefore we had to find a quick and simple hosting solution for the 5 minute tutorial: the Tryit-Editor of the resource w3schools.

If you are going to continue with programming, you need a real hosting solution, which you can get from a hosting-provider. How you find a hosting-provider will be explained in the section Website - Hosting.

Hosting


HTML

Hyper Text Markup Language is the standard (programming) language for the creation of websites.
Markups are being used to describe the appearance of text for a browser (MS Explorer, Firefox, Safari, Chrome, Opera), so that the browser knows how to show the text. Markups are to be distinguished easily from the text.

In html we call them tags. Let's have a look at the tags in your html:
<h3>Foto Sharing App</h3>
<form action="http://www.wowoodu.com/p/photoupload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" >            
    <input type="submit" value="Foto verlinken" >  
 </form>
The tags are the curious letters, numbers and signs within angle brackets. In the case of <h3> you can easily distinguish them from the text inside the tags There are three tags in your html:
  1. <h3> describes a headline of size 3 (there are 6 pre-defined formats for headlines).
  2. <form> describes a form wher a user can submit some input.
  3. <input> is part of the form and describes, that the user has to make his input here or can submit the form.
The tags have to be positioned at the start and the end of the text to be described (or formatted). The ending tag looks the same as the starting tag, but has a slash after the left bracket. Here is a complete tag:
<tag> </tag>

What about the other gibberish?

Some tags must, other tags can be further specified with attributes, which contain more detailed information of the tag. Let's just take the form tag withou the content of the form:
<form action="http://www.wowoodu.com/p/photoupload.php" method="post" enctype="multipart/form-data">
    
</form>
The attribute action=="http://www.wowoodu.com/p/photoupload.php" describes, what happens after hitting submit in the form (the button's name was "link photo"):
Call the file photoupload.php, which you will find over the internet at wowoodu.com in directory p.
Then we have the attribute method="post".
There are two ways of sending forms: GET and POST. The latter sends data hidden and cannot be hacked so easily. But there are good reasons for using GET too - but let's discuss that later.

A third attribute is there: enctype="multipart/form-data". It describes the encoding of the data at submission. With "multipart/form-data" they will not be encoded, which is important when uploading files like our photo.

Now we will also look at the tags within the form tags:
    <input type="file" name="uploadFile" >            
    <input type="submit" value="link photo" >
Es handelt sich um den Input Tag.
Forms are all about filling the blanks and then submit it. In our case we had to input where the photo is stored on your PC and then hit the submit button.The attributes of the input tag are describing exactly that:

The first case defines that the is a file to input (or upload). The file will be named with a variable name: "uploadFile". This is necessary to use the form for whatever photo you want to upload instead of uploading just a specific one.

The second input defines submission as the type of input, which is simply the submit button. The value parameter allows to have the button show somethin else than just the word "Submit", which is the default. In our case, we found it more describing to name that button "link photo".

So that was demystification of your HTML Code: form tags, input tags and a method to send the form over the internet. You can check every websites html code with a right mouse click choosing the option "Show Source Code". Now you will even understand what you find there: tags and the text.

More about Html and how to quickly use it will come a little bit later.

PHP

Originally "Personal Home Page" - meanwhile "PHP: Hypertext Preprocessor", is a server-side programming language used for web development and general programming. Almost 40% of all websites work with PHP. Whenever there is work to do on the server side, bevor you can see something in the browser, most probably PHP is involved.

What is to do on the server side? Well, e.g. you typed something in a search field, or you requested a restaurant address, or you have Amazon show you proposals for books that may interest you, or you are searching for a friend on Facebook. In all of these cases php has to process the request by looking into a database.

In our case you wanted to upload a photo to a server. At the server side the following has to be done: A lot of work and PHP waits at the server ready to do it. Let's look closer at the PHP-Code of photoupload.php in your Photo-App. Don't get scared when you see this. We will decode this bunch of characters, letters and numbers step by step and at the end you will be able to read it like in primary school.
<?php
$new = $rand = substr(md5(microtime()),rand(0,26),4);
$target_dir = "u/";
$target_dir = $target_dir . basename($new.".jpg");

if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_dir)) 
{
$piclink = "http://flin.co/w?i=".$target_dir;
?>
<h1>Photo Linking Successful!</h1>
<p>Use this link to share your photo:<br>
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
</p>
<h2>Congratulations!</h2>
<p>You have just written your first software program. You can copy the link and put it into emails and text messages or post it online.
</p>
<strong>
The link will remain active for the next 24 hours!
</strong>
<?php
} 
else 
{
echo "Sorry, there was an error uploading your file.";
}
?>
So what is in this code?

Check the following infographic (click to enlarge). It shows the six elements this code is made of.

It is a simple if/then function with a condition to fulfill the jobs listed above (check photo, random name, upload and send link) and the two consequences for the successful case as well as for the not successful case respectively.

Die Elemente unseres PHP-Codes

First you have to "switch on" PHP. Imagine a dictionary for PHP which has to be installed on the server, so you can use PHP on the server. (When you book a hosting-service, php is pre-installed in most cases.)

To specify that there is PHP in a file, you need to give it the ending .php. That's why our file is called "photoupload.php". Then you need to flick the switch by starting the PHP code with <?php and by ending it with ?> as in the following example:
<?php
// Between these two comes your PHP-code. (This by the way after the two slashes is a comment, which does not affect the work of your PHP code. You can use it to describe your code and to make it easier to understand it.)
?>

Now we will look into every single element of the PHP-code:
Very impatient readers are allowed to jump over this section. However, I recommend to come back soon, because it is necessary to have a simple understanding of how PHP works..

jump over it

After you have switched on PHP, 3 variables have been defined. Variables start with a $ followed with a name. They simplify the code and enable us to repeat the program for whatever image file we want, making it possible to repeat the process and upload more than just one image file.

The variables are being explained in the embedded comments:
<?php

$new = $rand = substr(md5(microtime()),rand(0,26),4);
// This variable receives a four-digit random name by using the function rand. We need this random name to avoid issues when files with the same name are uploaded.

$target_dir = "u/";
// This one stores the name of the target directory on the server, e.g. the storage location of the file. The directories is name is very short:  "u".

$target_dir = $target_dir . basename($new.".jpg");
// And we immediately give the variable a new task by adding the random name and the image file ending .jpg to the target directory.

?>
We skip learning about the function "rand" at this time. The rest of the PHP code is a simple if/then function with one condition:
"If the picture could be uploaded and can be stored, then do exactly that and return the link to the client. If this does not work, then send the client an error message back."
if (condition) 
{
// then do exactly that and return the link to the client. (positive consequence)
} 
else 
// if this does not work
{
// then send the client an error message back. (negative consequence)
}
?>
Let's start with the condition:
if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_dir))
The condition uses the PHP function move_uploaded_file. The function needs the name of the file, put here as a variable, so that you can use the program for any photo you want: $_FILES["uploadFile"]["tmp_name"]. The attributes of the $_FILES variable are the "uploadFile" variable of our Html form, which is defined as a "temporary_name", because in the same function we are now renaming the image file and move it into the target directory. Renaming and definition of the target directory has been done above with the variable $target_dir.

When it works - which is the main functionality of our web app - then the program can execute the positive consequence.:
{
$piclink = "http://flin.co/w?i=".$target_dir;
?>
<h1>Photo Linking Successful!</h1>
<p>Use this link to share your photo:<br>
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
</p>
<h2>Congratulations!</h2>
<p>You have just written your first software program. You can copy the link and put it into emails and text messages or post it online.
</p>
<strong>
The link will remain active for the next 24 hours!
</strong>
<?php
}
We have a look at the elements of this code bloc: The whole code instructs the server what to do when the upload is successful.

The first step is to generate a variable in which the link to the image file will be stored. You see the web address of Flin.co, my fotosharing service, that I use for this tutorial. After that comes the target directory. The string stored in the variable looks somehow like this: http://flin.co/w/u/2e34.jpg.

The second part (with Html, which you can recognize already) is just the text, that you have seen: "Linking successful" etc.

But now something odd happens: PHP is being switched off! With ?> - and then we see just HTML and text (you can distinguish that now!).

What you see is the beauty of PHP with HTML: they work so nicely together, that you can embed PHP into HTML and switch it on and off just as needed. And yet it will work just perfect.

In our case PHP needs to be switched off, so that we can after the successful upload show all the text. This text formatted with HTML making the browser show it the way you have seen it: as a headline with a text bloc.

But what about that strange string in the middle of the HTML???
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
It is simply the link to the image file. The HTML-tag <a href></a> describes a link: within the quotes after the href= is an internet address. And between the two tags <a href> </a> we can put a name for the link. We could have said "Link to the Photo". It would have looked like this:
<a href="<?php echo $piclink;?>">
Link to the Photo
</a>
But what is that?
<?php echo $piclink;?>
It is the link. We need to call the content of the variable $piclink which stores the link. You remember there is something like http://flin.co/w/u/2e34.jpg in the variable. Since PHP has been switched off before the HTML bloc, we need to switch it on for a short moment to call the variable. With echo we ask her to spit it out. And after that we switch PHP off again to continue with HTML.
After the text for the positive consequence follows the text for the negative consequence:
else 
{
echo "Sorry, there was an error uploading your file.";
}
Meaning: in the other case (else): "If this does not work, then send the client an error message back." Like for the positive consequence, the instructions are placed between braces and uses echo to print the error message.
Now we can put all the code back together and you will see, it is relatively easy to understand with that new knowledge that you just acquired.:
<?php
$new = $rand = substr(md5(microtime()),rand(0,26),4);
$target_dir = "u/";
$target_dir = $target_dir . basename($new.".jpg");

if (move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_dir)) 
{
$piclink = "http://flin.co/w?i=".$target_dir;
?>
<h1>Photo Linking Successful!</h1>
<p>Use this link to share your photo:<br>
<a href="<?php echo $piclink;?>">
<?php echo $piclink;?>
</a>
</p>
<h2>Congratulations!</h2>
<p>You have just written your first software program. You can copy the link and put it into emails and text messages or post it online.
</p>
<strong>
The link will remain active for the next 24 hours!
</strong>
<?php
} 
else 
{
echo "Sorry, there was an error uploading your file.";
}
?>


Jump back

Where is the PHP bloc in your application?

Let's have a look at the source code of photoupload.php to see how PHP looks in a real life program file. Go to www.flin.co/photoupload.php, make a right click and choose "Show Page Source".

No PHP! There is only HTML. Where is the PHP?

Remember above: We have learned that PHP is working on the server side. The code you are seeing is the code of the negative consequence of our if/then function. How come?
Well photoupload.php is not there to be called just like that, because it is meant to execute the form input only, which is a photo input. You did call it just like that, triggering execution of PHP on the server. PHP, as we have programmed it, has looked for an uploaded photo which was not there (because you did not come from the form but directly). Therefore PHP sent you the negative consequence: the error message.

Wow! You have learned a lot of PHP. We take a break and come back to PHP later.

Testing and BugFixing

are also important elements of programming. BugFixing can be the most difficult part, because when something is not working you need to find it. Even pros have it hard. Just think about all the Updates to your PC-software and your smartphone apps. The listed reasons for the updates are very often "BugFixes".

But I cannot code now!

Yes you can - but you have just little experience. You have learned the most important elements of web programming to develop your own dynamic website or web-app.:

How can I get more experience?

Keep going! Request my tutorial files for simple learning to code. The tutorials are not boring learning of basics form A-Z, but realistic step-by-step instructions for something usable like the foto sharing app. One example of what you will find is the building plan for a marketplace than can be used to match offer and demand. You will find
Request the Tutorials

Coding Tutorials


Request resources, tutorials, instructions and tips to learn programming usable technology:



Hosting

A website is not more than one or more files stored on a computer. The computer is connected to the internet. That's why we call it a host. It hosts files accessable over the internet. The files on the host can be accessed by any visitor who knows the address. Why we are seeing what we see in our browser (i.e. Explorer, Firefox, Safari, Opera, etc.) will be covered in the programming tutorial.


Server Farm - Source: Wikipedia

The computer - the host - could as well be your laptop. But you probably do not want to use it for being permanently visitable through the internet. Therefore socalled "Hosting-Provider" offer you storage capacity on their computers.

These computers need special software to be able to submit data over the internet on request. This software is called "server". The server is usually also provided by the host provider and in many cases preconfigured on the host.

Host and server are often seen and called one machine, called server. Visitors request files over the internet from the server. The server answers these request from the "clients". When you accessed this article, your computer - the client - requested the data files from my server. My server answered the request positively and delivered the files. Your PCs browser interprets the code it finds in the files and shows you the beautiful site that you are currently reading.

Alright: a hosting provider has a big number of computers (in most cases a "server farm" like the one pictured above). He offers you storage space on these computers, so that you can store your website files on them and use the server software. Whenever a client requests files from your server (i.e. your website), the server responds and delivers.

Thats all the magic behind showing something on the internet.

Hosting is not expensive - 6$/month on average, depending on the volume of service needed, which is mostly space and additional software, databases, programming languages. Imagine a rental apartment: the bigger, the more rent. For 6$ you get usually huge storage, a MySQL database, php and a bunch of plugins.

I myself have had good exerience with the Unlimited Host from 1und1. You get a good overview on their website: 1&1 Hosting: Products and Services. Like mentioned before, the Unlimited Host is a perfect starter product and will fulfill the needs of most of you. And you can always upgrade to more space or to more included software. For me, it has done good work for 8 website projects. And if you really need your own dedicated server (as opposed to one you share with other customers) - you can easily upgrade.

Webhosting 300x250 gif animiert