PHP Tutorial [Beginners]

Script47 · December 27, 2013

I made this tutorial a while back, any feedback will be helpful. Slight problem with the code, it lost all it's formatting hence it's all on one side.

[align=justify]So, you want to learn HTML & PHP, and you're serious about it. Firstly I just want to clarify in no way do I think I am a professional programmer/coder. However I can with confidence say I am decent. So if I make any mistakes point them out and I will change it. Without further ado let's get to it! [/align]

[align=center]Table of contents [/align]

[align=center] Overview of PHP

Simple form using HTML & PHP

Guess the number game [/align]

[align=center]Overview of PHP [/align]

[align=justify]PHP stands for Hypertext Pre-processor; PHP is widely used and probably the most popular server side language used. It is a powerful language if you would like to make dynamic and interactive web pages quickly. Once you know what you are doing with PHP you will find it a fun language to use. But obviously you must learn the basics before you actually want to make big sites. Hopefully that is what I'll be helping you with in this tutorial. Now that's the "Overview" done so we can get with the coding now! [/align]:D

[align=center]Simple form using HTML & PHP [/align]

[align=justify]So what you'll want to do is download an IDE like Netbeans for PHP or PHPStorm, type one of those in to Google and open them once you have downloaded, create a new project call it what you wish then create a file called index.php, and write the following code: [/align]

<html>   
<head>  
<title> Simple forms PHP & HTML </title>  
</head>  
<body>  
<form action="submit.php" method="post">  
<input type="text" name="Name" placeholder="Write your name here!" title="Write your name here!" required="true" spellcheck="true">  
<input type="submit" value="Submit!">  
</form>  
</body>  
</html>

[align=justify]Okay so now save that file and open it using a web browser and if you are successful you should see a text field and a simple submit button. So I will explain the code which I think may need explaining. action="submit.php" - the page (URL) you want to process the users input. method="post" - the way you send form data. placeholder="Write your name here!" - default text that appears in the text field that tells people what to write in that field. title="Write your name here!" - text that appears when you hover over the text field with your mouse. required="true" - this is some client side "checks" to make sure the field has something inside it. Now create a new file called submit.php, this will be the file which the users input is processed to after they click the submit button. The PHP part so either copy & paste this code in to the new file or type it up. I have commented out the code. So what are comments? Comments are used to annotate a script to help people understand what's going on in it. How do you comment? You can use the single line comment for short comment, to use them do this: // Hello, this is a comment, a single line comment to be precise! You can have block comments (multiple line comments) too. You will it all in the next piece of PHP code I share. [/align]

<html>
<head>
<title> Simple forms PHP & HTML </title>
</head>
</html>

<?php
/*
* Page created by:
* User: Script47
* Date: 16/09/13
* Time: 17:55
*/

/*
* Checks if the data "Name" is NOT set and checks to see if it's empty using an if-else statement.
* If it is empty it will give the error ELSE it will do the other part we told it to.
* As you see we are using HTML tags in PHP code it's is possible to do so.
* So what does echo do? echo is used to output text, mess around with it it's very simple use it like this: echo 'Hello'; OR echo "Hello";
* So what does exit(); do? That tells the PHP script to stop running the script and we don't want it to run if the Name field is empty so we kill the page.
* So what does header(); do? In this case it will refresh the page after two seconds and redirect the person back to the index page.
*/
if (!isset($_POST['Name']) || empty($_POST['Name'])) {
echo '<br/>';
echo 'You left the Name field empty!<br/>';
header("Refresh:2; URL=index.php");
exit();
} else {
/*
* Create a variable; what is a variable? A variable holds data; let that be an integer, text, decimals or anything else.
* How to create a variable, a variable is made by putting the "$" dollar sign then the variable name in our case it's called, $Name.
* Variables are case sensitive, so $Name is not the same as $name.
* $_POST['Name'] contains our users input so we say $Name = $_POST['Name'] which could be bob or anything else but by using a variable we can let the user have any name and store it in that variable.
* However, you never trust users input as your site could get hacked, XSS'd, read up on that more. So what we do here is use the function htmlspecialchars() on $_POST['Name'] which hold our users input.
* What does htmlspecialchars() do? It transform any HTML code in to it's entities. So this "<" becomes this "<".
*/

$Name = htmlspecialchars($_POST['Name']); 
echo "Hello " . $Name . ", how's it going?";
exit();
}

[align=justify]This is how you make a simple form and pass data through it. Now that you know the basics we can make a little fun game, it was one of the first things I made. A little guess the number game! Okay so we need to plan the game out first. We need to plan the stages of development and consider some things. I will list the things we need to consider but before that you try think of the things we'll need to think about (a little challenge). The minimum and maximum number we wish to allow to be randomly outputted. Validating user input i.e. Checking if field is empty, checking if a number is actually passed through and nothing else, securing the input. Success & failure messages if number guessed is right or wrong. Now create a new project folder in your IDE or in the editor you are using and make a project called Guess the number. Inside it create a file called index.php (the first page the user will see). Note I won't explain the HTML and the PHP that we have already gone over! [/align]

<html>
<head>
<title> Guess the number</title>
</head>
<body>
<center>
<br/>
<br/>
<form action="guess.php" method="post"> 
<input type="number" name="guessedNumber" placeholder="Number between 1-100!" title="Number between 1-100" required="true">
<input type="submit" value="Guess!">
</form>
</center>
</body>
</html>

[align=justify]That is our simple HTML code, a simple form with a submit button. Now swiftly on to the PHP (server side). So create a new page called guess.php and write the following code inside it.[/align]

<html>
<head>
<title>Guess</title>
</head>
</html>
<?php
echo '<center>';
if (!ctype_digit($_POST['guessedNumber'])) {
echo '<br/>';
echo 'Input value has to be an integer!<br/>';
header("Refresh:2; URL=index.php");
exit();
}
if (!isset($_POST['guessedNumber']) || empty($_POST['guessedNumber'])) {
echo 'Input field empty!<br/>';
header("Refresh:2; URL=index.php");
exit();
} else {
$guessedNumber = htmlspecialchars($_POST['guessedNumber'])+0;
$randomNumber = rand(1, 100);
if ($guessedNumber === $randomNumber) {
echo 'Woohoo, you guessed right!<br/>';
echo 'Random number was: '.$randomNumber. '<br/>';
echo '<a href="index.php">Play again?</a>';
exit();
} else {
echo 'Aw snap, unlucky better luck next time!<br/>';
echo 'The actual answer was: '. $randomNumber. '. You guessed: '. $guessedNumber. '<br/>';
echo '<a href="index.php">Try again?</a>';
exit(); 
} 
echo '</center>';
}

[align=justify]So what have we done here? We checked to see if the field was a number and if not give and error and send back then we check if the field was empty and give them error if it was. Then we create a variable to hold our users input, we do our normal security function, however this time we +0 to because 200+0 is 200. So if it's anything else but a number it will equal zero. Next we use the rand(); function to generate a random number, the first parameter is our minimum number, the second parameter is the maximum number it will generate. We put it in a variable so we can call it easily without having to much trouble. Next we run a simple if-else statement comparing the user input variable with the random number variable to check if they are the same, it will give them the success message otherwise it will give them the error message. Some operators I have used || - this operator means or, so we check if the variable is set OR empty. === - used to compare two things against each other. ! - checks if it's the opposite (sort of like that) so the function isset() is used to check if a variable IS set however by putting "!" we are checking if it's not set. This concludes my tutorial! Mess around with that stuff to make some thing, tell me if you like this, and where I can improve! If you did find this informative then please share. If you want to get in touch with me you could message me on here. If you want me to PasteBin the code to make it more clear, then do ask and I shall do it. If you would like to see more of these tutorials don't hesitate to ask on this article by replying or any other means you have.

[/align]

Lithium · December 31, 2013

i'm a beginner and want to learn...

Netbeans and PHPStorm are too confusing, i get lost using them... there is nothing simpler? (notepad, notepad++ (for syntax highlighting))

what is... if, else, isset, header, etc etc etc, you are telling me to use those, but i don't understand what they are for...

See my point? :) Not saying it was a bad idea, but you should actually begin with simpler explanations ;)

Dayo · December 31, 2013

Also there is no indentation, this can help you out alot when you are debugging

rockwood · December 31, 2013

ABCD time guyz

john. · December 31, 2013

i'm a beginner and want to learn...
Netbeans and PHPStorm are too confusing, i get lost using them... there is nothing simpler? (notepad, notepad++ (for syntax highlighting))

what is... if, else, isset, header, etc etc etc, you are telling me to use those, but i don't understand what they are for...

See my point? :) Not saying it was a bad idea, but you should actually begin with simpler explanations ;)

Have a look at Sublime Text 3.

I have to agree with you as well, the tutorial takes too many concepts together and it's simply too much for a beginner to understand .

Lithium · December 31, 2013

Have a look at Sublime Text 3.
I have to agree with you as well, the tutorial takes too many concepts together and it's simply too much for a beginner to understand .

Thx for the link though i don't need it, I was just making a statement, as a "beginner" wanting to learn. ;)

Script47 · December 31, 2013

i'm a beginner and want to learn...
Netbeans and PHPStorm are too confusing, i get lost using them... there is nothing simpler? (notepad, notepad++ (for syntax highlighting))

what is... if, else, isset, header, etc etc etc, you are telling me to use those, but i don't understand what they are for...

See my point? :) Not saying it was a bad idea, but you should actually begin with simpler explanations ;)

I explain what they do in the comment blocks in the actual code. :p

Also there is no indentation, this can help you out alot when you are debugging

I put it at the top in bold saying the formatting got messed up when adding it to this site.

ABCD time guyz

Yep, it is. You'd need it to be honest. You see why I'm annoyed here? Everyone stays on topic yet you just can't do that can you.

Off-topic, my 400th post! :D

Edited December 31, 2013 by Script47

Lithium · December 31, 2013

I explain what they do in the comment blocks in the actual code. :p

To explain WHAT TO DO is not the same thing as explaining WHAT IT IS.

Atutorial, no matter how simple it is, should cover first, WHAT IT IS, then WHAT TO DO, and properly done, second part should cover first part explanation! :)

Sign In

PHP Tutorial [Beginners]

Recommended Posts

Script47

Link to comment

Share on other sites

Lithium

Link to comment

Share on other sites

Dayo

Link to comment

Share on other sites

rockwood

Link to comment

Share on other sites

john.

Link to comment

Share on other sites

Lithium

Link to comment

Share on other sites

Script47

Link to comment

Share on other sites

Lithium

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Hosting

Marketplace