Validation Email Address: Server side vs Client side

The week ago I was programming my web application using PHP5.

There is two ways to validate email:

1. On server side (using filter_var from PHP5)
2. On client side (using input type email from HTML5)

PHP5 example

$email = "xpto@email.com";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "This ".$email." email address is considered valid.";
}

HTML5 example

<form action="file.php" method="post">
  E-mail: <input type="email" name="useremail"><br>
  <input type="submit">
</form>

In my opinion it is better validate email on client side instead server side. So don't validate email on server side because it takes a lot work to warn user that has an invalid email address. With client side to validate email, it saves a lot work to warn user that has an invalid email address.

But if you are programming a web application using OOP, it is good idea to validate email from server side because you are not using form to validate email but you are using object, for example:

class User{
  private $name, email;
 
  public function __construct($name,$email){
   $this->name=$name;
   $this->email=validate($email);
  }
  
 private function validate($email){
  $mail = "";
  if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
   $mail = $email;
  }else{
    echo "This $email is not valid!";
   }
  return $mail;
 }
}
$user = new User("Peter","peter@xpto.com");//valid email
$user = new User("Paul","kjfddks");//prints "This kjfddks is not valid!"

How to create Graphs using HTML5

To develop a small web application, I would like to use the data of students' grades and translate it into a graph bar.  But how can I do that?

With HTML5, using tag <canvas>, it is possible create a graph bar without third part software. The first thing to do is write some functions in JavaScript. Before you copy code, you have to understand the coordinates on Canvas. The next figure show how coordinates are designed. It is not the same of what we learned on Math classes.

JavaScript code:

<script type="text/javascript">         function drawLine(context,startX,startY,endX,endY,color){             context.beginPath();             context.moveTo(startX,startY);             context.lineTo(endX,endY);             context.closePath();             context.strokeStyle=color;             context.stroke();         }         function drawRectangle(context,startX,startY,width,height,fill){             context.beginPath();             context.rect(startX,startY,width,height);             context.closePath();             context.stroke();             if(fill) context.fill();         }         function clearCanvas(context){             // Store the current transformation matrix             context.save();             // Use the identity matrix while clearing the canvas             context.setTransform(1, 0, 0, 1, 0, 0);             context.clearRect(0, 0, myCanvas.width, myCanvas.height);             // Restore the transform             context.restore();         }         function drawBarChart(context,data,startX,startY,endX, endY,chartHeight,barWidth,markDataIncrementsIn,scale){             //draw x-axis             drawLine(context,startX,startY,endX,startY,"#000");             //draw y-axis             drawLine(context,startX,startY,startX,endY,"#000");             var maxValue=0;             for(var i=0;i<data.length;i++){                 //extract data                 var values = data[i].split(",");                 //column name                 var name=values[0];                 //column value                 var height=parseFloat(values[1])*scale;                 //find maximum value                 if(parseInt(height)>parseInt(maxValue)) maxValue=height;                 //write data to chart                 //fill rectangle with yellow color                 context.fillStyle="#ff0";                 drawRectangle(context,startX+(i*barWidth*2),(startY-height),barWidth,height,true);                 //add column title to x-axis                 context.textAlign="left";                 //text color is black                 context.fillStyle="#000";                 context.fillText(name,startX+(i*barWidth*2),(chartHeight-25),barWidth*2);             }             //add some data markers to y-axis             var numMarkers = Math.ceil(maxValue/parseInt(markDataIncrementsIn));             context.textAlign="right";             context.fillStyle="#000";             var markerValue=0;             for(var i=0;i<=numMarkers;i++){                 context.fillText((markerValue/parseInt(scale)),(startX-5),(startY-markerValue),50);                 if(i==0){                     drawLine(context,startX,(startY-markerValue),endX,(startY-markerValue),"#000");                 }else{                     drawLine(context,startX,(startY-markerValue),endX,(startY-markerValue),"#00f");                 }                 markerValue+=parseInt(markDataIncrementsIn);             }         }         function graph(scale){             var s=0;             var changed=false;             document.getElementById("range").innerHTML=scale;             if(scale==undefined){                 s=1;                 changed=false;             }else{                 s=scale;                 changed=true;             }                           var graphCanvas = document.getElementById("myCanvas");             //ensure that element is available within DOM             if(graphCanvas && graphCanvas.getContext){                 //open a 2d context within canvas                 var context = graphCanvas.getContext("2d");                 //bar chart data                 var data = new Array(5);                 data[0]="Bad,2";                 data[1]="Mediocre,0.45";                 data[2]="Sufficient,5.5";                 data[3]="Good,7.2";                 data[4]="Excelent,3.9";                 //draw bar chart                 if(!changed){                     drawBarChart(context,data,35,560,750,50,myCanvas.height,30,s,s);                 }else{                     //clear canvas to redrawing                     clearCanvas(context);                     //draw bar chart                     drawBarChart(context,data,35,560,750,50,myCanvas.height,30,s,s);                                      }             }             return true;         }     </script>

The second thing to do is write some HTML tags.

<body onload="graph(1);">         <div id="title">Grades</div>         <table>             <tr>                 <td><canvas id="myCanvas" width="800" height="600"></canvas><td>             <td>                 <table>                     <tr>                         <td>Scale : <span id="range">1</span></td>                     </tr>                     <tr>                         <td><input type="range" min="1" max="501" value="1" onchange="return graph(this.value)"/></td>                     </tr>                 </table>             </td>         </tr>     </table> </body>

The third thing to do is write CSS.

<style type="text/css">             #title{                 text-align: center;             } </style>

Now put together all three parts on a single page or you can create a file to JavaScript and another to CSS and then link them on HTML page. How you can do that? Copy the next code and you can change name files.

<head>   <link rel="stylesheet" type="text/css" href="style.css" />   <script type="text/javascript" src="functions.js"></script> </head>

Attention
All this code is working on Google Chrome. Also works on Safari and Opera. If you will use Internet Explorer, you will have problems. For example, you can not use slide bar and you have to type a value instead.