Technotip.com | Programming Video Tutorials

Object Oriented Programming Basic: PHP

Video tutorial illustrates basics of OOP in PHP.

Things covered:
Defining class.
Creating Objects.
Public and Private access of Properties/Data.
Separating Class file and the application file.

What is a Class ?
A class is simply a representation of a type of object. It is the blueprint/ plan/ template that describe the details of an object. A class is the blueprint from which the individual objects are created. Class is composed of three things: a name, attributes, and operations.

Class Add
add.php

< ?php
class Add
{
private $a;
private $b;
 
function setValues($v1, $v2)
{
   $this->a = $v1;
   $this->b = $v2;
}
 
function add()
{
return( $this->a + $this->b );
}
}
?>

class is a keyword. Add is the name of the class we’ve assigned.
$a and $b are two variables of class Add. These have private access specifier, meaning, they’re not accessible directly from outside the class.
Public access specifier indicates that they can be accessed even outside the scope of a class. Private variables are treated as safe, so we prefer that.

Since private variables are accessed inside the class, we declared two methods inside the class Add. i.e., setValues() and add()
setValues() has two parameters which are then assigned to the local variables $a and $b using the $this pointer.

$this pointer references to the object which is currently pointing to it.

add() method adds the user passed values and returns the result.

Application File
index.php

?php
 include_once('add.php');
 
$add = new Add();
 
$add->setValues(50, 100);
echo $add->add();
 
$add->setValues(150, 100);
echo '<br />'.$add->add();
 
$add2 = new Add();
 
$add2->setValues(500, 1000);
echo '<br />'.$add2->add();
 
?>

Here we include the add.php file and create an object of (class)type Add.
Using this object we pass values to setValues(), and then call add() method, which returns the added value of the passed numbers. which is then output to the browser.

We could create as many objects as we wish and then pass and output as many results as required, without altering the class file what so ever, once finalized.

So this is the power of Object Oriented Programming.
This way we could manage complex applications easily or in an organized/standard way.
Increase code re-usability.
Also reduce maintenance cost etc..

Object Oriented Programming Basic: PHP

YouTube Link: https://www.youtube.com/watch?v=0smq5Lf6Q2k [Watch the Video In Full Screen.]

Why OOP in PHP ?
Most web projects still use procedural i.e., function based software development approach. And honestly, it has no issue, because most web projects are so small scale and straight forward that they don’t require OOP in most cases.

But for complex application development, you need OOP for effectiveness.
Like, if you want to build a home, you need a lot of planning, preparation and some standard approach to build it.

Login Form: jQuery + PHP + AJAX

In this Video tutorial, we build a login form which checks username and password and displays appropriate message on the same page, without refreshing the page.

Here we get the username and password from the user and check it against our database table records.

If the username, password combination is present, then the login success message is displayed, else login failed message is shown to the user.

Related Read: (for Database info and other related code)
Registration Form Using jQuery + PHP + AJAX (PART 1)
Registration Form Validation: PHP + jQuery + AJAX (PART 2)

HTML File: Login form
index.html

<html>
<head><title>Login Form: jQuery + PHP + AJAX</title></head>
<body>
 
<form id="myForm" action="login.php" method="POST">
username: <input type="text" name="username" id="username"/><br />
password: <input type="password" name="password" id="password"/><br />
<button id="submit">Login</button>
</form>
 
<div id="ack"></div>
 
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>
</body>
</html>

Here we have a form with an id myForm.
It has two input fields.
One button. And a div with an id of ack, where we display the messages to the user.

For database info, please have a glance at:
Registration Form Using jQuery + PHP + AJAX (PART 1)

PHP File: Processing the username, password
login.php

< ?php
        include_once('db.php');
 
$username = mysql_real_escape_string( $_POST["username"] );
$password = mysql_real_escape_string( md5($_POST["password"]) );
 
if( empty($username) || empty($password) )
echo "Username and Password Mandatory - from PHP";
else
{
$sql = "SELECT count(*) FROM users WHERE(
        username='$username' 
AND 
password='$password')";
 
 
    $res = mysql_query($sql);
$row = mysql_fetch_array($res);
 
if( $row[0] > 0 )
 echo "Login Successful";
else
 echo "Failed To Login";
   }
?>

We protect our application against sql injection by wrapping the user entered data with mysql_real_escape_string() method.
Next we check whether the username and password is not empty: server side validation.
If it’s not empty:
We check if the username and password combination entered by the user is actually present inside our database.
Also note that, we md5() encrypt the user entered password, inorder to match with the md5() encrypted data present in our database: encrypted while registering.
If the username, password combination is present, then we display “Login Successful” else “Failed To Login”.

These messages will be caught by the call back function of jQuery and is displayed to the user.

jQuery File: With jQuery AJAX Mehod, $.post
my_script.js

$("button#submit").click( function() {
 
  if( $("#username").val() == "" || $("#password").val() == "" )
    $("div#ack").html("Please enter both username and password");
  else
    $.post( $("#myForm").attr("action"),
        $("#myForm :input").serializeArray(),
function(data) {
  $("div#ack").html(data);
});
 
$("#myForm").submit( function() {
   return false;
});
 
});

Here we validate the data at client end by checking if the user has entered both username and the password, if entered, we post the user entered data to login.php file after serializing it with jQuery serializeArray() method.

Once the login.php processes the data, the call back function present in our $.post() method accepts the data from login.php and displays it to the user.
Also we disable the form redirection by returning false, once the user clicks on the submit button of the form.

Login Form: jQuery + PHP + AJAX

YouTube Link: https://www.youtube.com/watch?v=lUd0e9Uk6x0 [Watch the Video In Full Screen.]

We have just illustrated the way by which you can ajaxify the login form.
Using this method, you could do more. Like, redirect or include a page after the login is successful etc..

This video tutorial is a basic building block to all those amazing jQuery AJAX login forms.

Registration Form Validation: PHP + jQuery + AJAX (PART 2)

In this video tutorial we illustrate both client side as well as server side validation.

Client side validation using jQuery.
Server side validation using PHP.

To Solve:
Empty values shouldn’t be registered.
Duplicate usernames must not be allowed.
Display appropriate message, in case of duplicate username.

Explanation about HTML file (index.html), Database connection file(db.php):
Registration Form Using jQuery + PHP + AJAX (PART 1)

jQuery File: Client Side Validation
my_script.js

$("#submit").click( function() {
 
if( $("#username").val() == "" || $("#pass").val() == "" )
  $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
else
  $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
 function(info) {
 
   $("#ack").empty();
   $("#ack").html(info);
clear();
 });
 
$("#myForm").submit( function() {
   return false;
});
});
 
function clear() {
 
$("#myForm :input").each( function() {
      $(this).val("");
});
 
}

If the username and the password fields are empty, we display appropriate message and skip the execution of $.post() method.
This ensures that, we do not request data from the server when there is no need for it.

If the user has entered both username and password, then we execute $.post() method and pass the user entered data to process.php file.

PHP File: Server Side Validation
process.php

< ?php
      include_once('db.php');
 
  $username = mysql_real_escape_string( $_POST["username"] );
  $password = mysql_real_escape_string( md5($_POST["pass"]) );
  $fname = mysql_real_escape_string( $_POST["fname"] );
  $lname = mysql_real_escape_string( $_POST["lname"] );
 
 
  if( empty($username) || empty($password) )
  {
  echo "Username and Password are mandatory - from PHP!";
exit();
  }
 
 
 $res = mysql_query("SELECT username FROM users WHERE username='$username'");
  $row = mysql_fetch_row($res);
 
  if( $row > 0 )
    echo "Username $username has already been taken";
  else
  {
     $sql = "INSERT INTO users VALUES('',
                                           '$username', 
                                           '$password', 
                                           '$fname', 
                                           '$lname')";
    if( mysql_query($sql) )
     echo "Inserted Successfully";
   else
     echo "Insertion Failed";
}
?>

At the beginning we check if the username or the password is empty. If they are empty, we echo Username and Password are madatory – from PHP and then stop further execution of the script.

If the username and password are not empty, then we check the user entered username against the usernames present inside the database. If the username is already present inside the database, then we intimate it to the user with a customized message.

Registration Form Validation: PHP + jQuery + AJAX (PART 2)

YouTube Link: https://www.youtube.com/watch?v=dRk1r4SfSyA [Watch the Video In Full Screen.]

Why Validate both client side as well as server side ?
What if javascript has been disabled on client machine i.e., the browser ?
In this situation, our client side validation completely fails. So, server side validation is also important.

Then Why client side validation when server side validation could serve our purpose ?
This is because, client side validation is faster. i.e., if user tries to register empty data, it needs to travel across, reach the server, execute the validation rules script and then travel back to report that the user had submitted empty data and is not acceptable!
Instead of this lengthy, time consuming and costly process, we could simply write a client side validation and it responds back instantly, saving time, bandwidth and hence the cost of processing the data.

Registration Form Using jQuery + PHP + AJAX (PART 1)

Video tutorial illustrates development of user registration form using jQuery AJAX method.
In this tutorial we shall build a registration form using which users can register without leaving the webpage. i.e., without being redirected to any other pages once he / she hits the submit/register button.

HTML code
index.html

<html>
<head><title>Registration Form: jQuery</title></head>
<body>
 
<form id="myForm" action="process.php" method="POST">
Username: <input type="text" name="username"/><br />
Password: <input type="password" name="pass"/><br />
First Name: <input type="text" name="fname"/><br />
Last Name: <input type="text" name="lname"/><br />
<button id="submit">register</button>
</form>
 
<div id="ack"></div>
 
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>
</body>
</html>

Here we have a simple form with username, password, first name, last name fields and a button. Also a div with an id of ack where appropriate messages are displayed to the users.

Form has an id of myForm.
process.php file in the action field.
POST method.

PHP File: Database Connection Code
db.php

< ?php
      $conn = mysql_connect('localhost', 'root', '');
  $db   = mysql_select_db('people');
?>

Here we’re connecting to the database called people.

Also Read: Connecting To MySQL server From PHP

Database Details:
Database Name: people
Table Name : users
Fields : slno, username, password, fname, lname.

PHP File: Inserting user entered data to database table
process.php

< ?php
      include_once('db.php');
 
  $username = mysql_real_escape_string( $_POST["username"] );
  $password = mysql_real_escape_string( md5($_POST["pass"]) );
  $fname = mysql_real_escape_string( $_POST["fname"] );
  $lname = mysql_real_escape_string( $_POST["lname"] );
 
  $sql = "INSERT INTO users VALUES('',
                                           '$username', 
                                           '$password', 
                                           '$fname', 
                                           '$lname')";
  if( mysql_query($sql) )
   echo "Inserted Successfully";
  else
   echo "Insertion Failed";
?>

Here we use mysql_real_escape_string() method to avoid sql injection by the user.
We accept all the values entered by the user and store them in php variables.

Later we formulate MySQL query and pass these user entered values to it and execute it using mysql_query() PHP method.

Using the conditional logic statement we check if the query got executed or not. Then output appropriate message using echo.

This message will be retrieved by the call back function in jQuery and is being further processed as required.

jQuery File: Accessing The Data And Displaying
my_script.js

$("#submit").click( function() {
 $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
 function(info) {
 
   $("#ack").empty();
   $("#ack").html(info);
 });
 
$("#myForm").submit( function() {
   return false;
});
});

Once the user clicks on the button with an id submit, we call $.post() method.
First parameter being the URL to which the data is being sent.
Second parameter is the actual data, which is being serialized using serializeArray() method of jQuery. It formats the user entered data into key => value pairs.
Third parameter, is the call back function.

Using the data returned by process.php we display the data in div tag with an id of ack.

We also disable the redirection of the webpage by returning false once the user clicks on the button.

jQuery File: Clearing the input fields
my_script.js

function clear() {
 
$("#myForm :input").each( function() {
      $(this).val("");
});
 
}

It’s a custom function which selects all the input fields, loops through them and assigns an empty value.

jQuery File: Full / Final Code
my_script.js

$("#submit").click( function() {
 
 $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
 function(info) {
 
   $("#ack").empty();
   $("#ack").html(info);
clear();
 });
 
$("#myForm").submit( function() {
   return false;
});
});
 
function clear() {
 
$("#myForm :input").each( function() {
      $(this).val("");
});
 
}

Call clear() method after the user entered data is processed.

Registration Form Using jQuery + AJAX: PART 1

YouTube Link: https://www.youtube.com/watch?v=55FwdtnvQAM [Watch the Video In Full Screen.]

This way we turned our traditional registration form to a standard AJAX application form.

In tomorrows video tutorial lets see client side validation using jQuery and server side validation using PHP.

Registration Form Validation: PHP + jQuery + AJAX (PART 2)