[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=j-2Rz3nL2HU” browser_url=”https://www.youtube.com/watch?v=j-2Rz3nL2HU”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-77946048-92949565-beb2″][vc_column_text]
Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.
In part 5 of this series, we will look at the basics of using PHP and adding its functionality to our site.
Here’s a list of the other tutorials in the series:
[/vc_column_text][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-77946048-92949565-beb2″][vc_button title=”Download Code Sample” target=”_blank” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/308_php/308_php.zip”][vc_column_text]
Basic PHP Syntax
There are several requirements before your PHP page will become functional. The first requirement is to make sure that you have a server with PHP installed. If not, you can learn how by watching the create a server tutorial. Your website files must reside on the server. Next, any file that has executable PHP code must be saved as a PHP file. For example, if your index.html page has PHP code in it, it must be saved as index.php before the code can be executed. Lastly, in order for the browser to process PHP, it has to be declared using the following tag structure:
<?php
PHP CODE GOES HERE
?>
Anything in between those declaration tags will be processed as PHP code. PHP tags can go anywhere in a webpages HTML structure, but is generally found in the body of the HTML code or above the HTML code (before the opening <HTML> tag). To display text or HTML on a webpage using PHP, you want to use the “echo” command. The “echo” command followed by the text or HTML code in quotes will tell it the web browser to process that text or code as regular HTML. Here is an example:
<?php
echo "It's PHP!";
?>
Notice how the “echo” command is terminated by a semi-colon. Apart from conditional statements, all PHP code should end with a semi-colon. If an echo statement contains HTML code that has quotation marks (“), you will need to replace them with apostrophes (‘). This prevents confusion when processing the PHP code.
<?php
echo "<p class ='welcome' id='greeting'> Hi! Welcome to my site!</p>";
?>
Variables
A variable is an object within programming code that can change it’s value as the program is executed. It’s similar to mathmatics were variables are used in equations to represent unknown values i.e. 2 + x = 4. Variables are used very frequently in Javascript because their value can be set to whatever you need it to. To create a variable in PHP, you want to come up with a name for your variable, and then precede it with a dollar ($) sign. Then you can set it equal to the value you desire. To recall the variable at any point in your code, simple type the name of the full name of the variable including the $ sign.
<?php
$username = "gigafide";
echo $username;
?>
When returning a variable value, sometimes you may want the variable to appear in the middle of a string of other text, such as a sentence. This is called concatenation As opposed to Javascript where a plus (+) sign is used to concatenate strings together, PHP uses a period (.) to concatenate.
<?php
$username = "gigafide";
echo "<p class ='welcome' id='greeting'> Hi, " . $username . "! Welcome to my site!</p>";
?>
Conditional Statements
A conditional statement is a section of code whose output is dependent on certain conditions. In PHP, this is charactarized by an “if” statement. An “if” statement will output a result if certain conditions are met. The syntax of an “if” statement starts with if followed by the conditions in a set of parenthesis. Immediately following this, you will put the line of code to be executed if the conditions are met. If you have more than one condition to be executed, you can enclose the code to be executed within curly brackets. If the conditions are not met, you can add an “else” statement after the “if” statement. The else statement can contain code to be executed if the conditions are not met.
<?php
if($username == "gigafide"){
echo "<p class ='welcome' id='greeting'> Hi, " . $username . "! Welcome to my site!</p>";
echo "Thanks for visiting!";
}else
echo "Hi! Welcome to my site!";
?>
Include
A great benefit that PHP offers is the ability to import HTML or PHP code into your page from a separate file. This is through a function called the include command. Include is often used when creating website templates. [WordPress] is a common platform that makes regular use of the include function for its templates. Here is how it works. Create a seperate page (both html and php pages will work) and put a section of HTML code in it. Then, on your main webpage, place the PHP include function with the seperate pages name wherever you want it to appear on the main webpage.
<?php
include("header.php");
?>
This is a good method of keeping a website organized. If you have a section of your website (such as a navigation menu) that stays static throughout your website, you can use it as an include webpage instead. This will shorten the websites code significantly, as well as allow you to only have to modify one page.
Think of it this way: if you have 100 pages on your website,and they all had a common menu, it would be a tedious task to edit 100 menus. With PHP, you can include one menu in 100 pages, and edit one menu to complete the task.
Passing Information Between Pages
Forms
Method:GET
Method:POST
Storing User Information
If you’re going to create a website that requires a user to enter information, it’s almost a necessity to store that information somewhere so that the user doesn’t have to enter it again and so that it can be recalled later and used elsewhere in the site. In PHP, there are two methods of storing a users information. One is Cookies and the Other is Sessions.
Cookies
Cookies are a means of storing a user’s information so that the user doesn’t have to enter in the same information again. For instance, websites commonly store a cookie of your username and password so that you don’t have to keep logging in to the website everytime you visit. Cookies store the information on the client’s computer as a small file. If the website needs to recall that information later, it can open up the cookie and read the information stored there. Let’s say you want store information from a form to a cookie. First you need to create a cookie using “setcookie” parameter, then give it a name, the value you want to store, and the time before it expires.
<?php
setcookie("user", $_POST["username"], time()+3600);
?>
Then if you want to recall that value later on, you can use this code
<?php
echo $_COOKIE["user"];
?>
Or if you wanted to return the entire contents of a cookie, you can use this code
<?php
print_r($_COOKIE);
?>
To use the cookie information in a conditional statement, you want to use the ISSET command to check and see if there is information stored in the cookie. If there is information stored in it, you can execute one set of commands. IF there is not information stored in it, you can execute another set of commands.
<?php
if (isset($_COOKIE["user"]))
echo "Hi, " . $_COOKIE["user"] . "Welcome to my site!<br />";
?>
Finally, if you want to delete the cookie information (such as to create a “log out” page), essentially you just set the cookie expiration date to a negative value.
<?php
setcookie("user", "", time()-3600);
?>
Sessions
Sessions are another means of storing users information. Except, unlike Cookies, they store information on the server as opposed to the clients computer. To start a session, you have to put a session_start script at the beginning of every webpage that uses session information (above the opening HTML tag).
<?php session_start(); ?>
Session information can then be stored to $_SESSION variables the same way you would store any other variable. Then you can recall the session information by simply using the variable name you created. Here’s an example.
<?php
$_SESSION['user']="gigafide;
echo "Hi, ". $_SESSION['user'];
?>
Similar to the cookie example above, you can use Session information in an if statement by adding the ISSET command.
<?php
if(isset($_SESSION['user']))
echo "Hi," . $_SESSION['user'] . "!";
?>
And then finally, to stop storing information for a session (and to forget the stored information), you can add a session_destroy command underneath the session_start command for your logout page.
<?php session_start(); session_destroy(); ?>
Final Code
After completeing the tutorial, you should have something similar to the code below. Please use this code for reference and correction.
header.php
<div class="main"> <div class="row1"> <img src="logo.jpg"/> </div> <div class="row2"> <div class="row2col1"> Navigation <hr align="left" width=75%> <ul> <li><a href="about.html">About Me</a></li> <li><a href="http://www.google.com">Google</a></li> </ul> </div> <div class="row2col2">
</div>
</div>
</div>
logout.php
<?php
session_start();
session_destroy();
?>
<html>
<head>
<title>My Data</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php include("header.php"); ?>
<p class="welcome" id="greeting">
You are now logged out
</p>
</body>
</html>
welcome.php
<?php session_start(); ?>
<html>
<head>
<title>My Data</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php include("header.php"); ?>
<p class="welcome" id="greeting">
<?php
$mypass = "abc123";
$passcheck = $_POST["password"];
if ($passcheck == $mypass){
echo "Welcome, " . $_POST["username"] . "! You are now logged in. <br/>";
$_SESSION['user']= $_POST["username"];
$_SESSION['pass']= $passcheck;
}
else
echo "Sorry, wrong password. <br/>";
?>
<a href="index.php">Click here</a> to return to the main page.
<?php include("footer.php"); ?>
</body>
</html>
Index.php
<?php session_start(); ?>
<html>
<head>
<title>My Data</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function clicked(){
var x;
var y;
x = document.getElementById('nameCheck').value;
y = document.getElementById('password').value;
if(x !="" && y !=""){
return true;
}
else if(y ==""){
document.getElementById('errorPass').innerHTML='<font color="red">(required) Password:</font>';
return false;
}
else if(x ==""){
document.getElementById('errorMsg').innerHTML='<font color="red">(required) Name:</font>';
return false;
}
}
</script>
</head>
<body>
<?php include("header.php"); ?>
<?php
if (isset($_SESSION['user']))
echo "<p class ='welcome' id='greeting'> Hi, " . $_SESSION['user'] . "! Welcome to my site!</p>";
else
echo "<p class ='welcome' id='greeting'> Please Login:</p>
<form action='welcome.php' method='post' onSubmit='return clicked();'>
<b id='errorMsg'>Name:</b>
<input type='text' id='nameCheck' name='username'/>
<b id='errorPass'>Password:</b> <input type='text' id='password' name='password'/>
<input type='submit' value='Click Me'onClick='clicked()'/>
</form>";
?>
<?php
if (isset($_SESSION['user']))
echo "<center><h1> User List:</h1>
<table border='1'>
<tr>
<td><b>User</b></td>
<td><b>Login password</b></td>
</tr>
<tr>
<td>" . $_SESSION['user'] . "</td>
<td>" . $_SESSION['pass'] . "</td>
</tr>
</table>
</center>";
?>
<?php if (isset($_SESSION['user']))
echo "<center><a href='logout.php'>Logout</a></center>";?>
<p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
<?php include("footer.php"); ?>
</body>
</html>
[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-77946048-92949565-beb2″][vc_column_text] Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter [/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]
did it for my self found it easy made a bril website thanks
cool tutorial !
Most people don’t do all of this themselves because they don’t know the tiny bit of technical know-how that you need.
It’s alot easier to just follow a video tutorial so you can just click here, click there etc.
Goto my website for a free 5 part video tutorial on how to make a website from scratch. http://www.drefficiency.com. It’s really alot easier than you think.
Please don’t advertise your website on here. And your tutorials are about hosting a wordpress site, which is NOT from scratch!!!!!!
MY EXAMS GOING ON HERE so i cnt watch allthe episode
bt see u guyzz soon
Great Job
I saw all the videos series , and this is the best , ur a perfect programmer
am a programmer too
I hope to see more videos on PHP
html, css and javascript are a doddle, i get on perfectly with them but its the php and the MySql
that really makes my brain hurt 🙁
hy gidafide and guys plz email me the coding..
where can I find the other website basics tutorials? I am only able to see 5 and 6. thanks.
Never mind. I see the youtube links above.