Adberv: web application

Login Form using OOP in PHP

Most of the web applications involves users, and by that, a login form is usually needed. Login forms receive username and password inputs, verifies access, and in most cases determines the privileges of the user, commonly called as user level.

This is a sample login web application I made using OOP in PHP. This has the basic functions of logging in, logging out, remember me and change password.

Since I'm using OOP, I used PDO to access my database. PDO returns results as an object and it is much easier to use when you are using OOP.

Notes:

When a user successfully logs in with the Remember Me checked, the system generates a unique cookie that will expire in a certain amount of time (see config.php and cookie.php) and the value will be saved to user_session. When the user logs out, the user_session is unset.
In hashing, the system generates a 12-bit random character and appends it to the password the user inputted, then the system will apply SHA-256 one-way hash. The system will now save 2 values in the database: the user_password and user_salt. When the user logs in, the system will simply attach the saved user_salt then append it to the user input, apply the hash and check if the user_password matches with it.

Package for login form in PHP contains:

classes:

Config.php - contains the abstraction of the configurations set in core/init.php.

abstraction is where you make a command more readable and easy to execute and use. Doing this involves parameters and return values.

Cookie.php - contains the creation and deletion of cookie that is to be set when user opts to remember login session.

setcookie is used to create a cookie, with a set name and expiry, on the local machine.

DB.php - contains all the abstracted database query functions (in PDO).

this is where I abstracted all my database queries so that it can be easily implemented and this also prevents connecting to the database multiple times.

Hash.php - contains the function that generates the hash and salt for password.

hashing is making a text unreadable. There are many hash encryption available now. One of which is the SHA-256 bit hash.

Input.php - the abstracted $_POST and $_GET function.
Redirect.php - function for redirection to certain pages
Session.php - the abstracted $_SESSION functions, and the flash messages.
Token.php - generates unique token for every form, avoiding cross-site request forgery(CSRF)
User.php - class used if a object user needs to be created.
Validate.php - function used to validate a certain field.

core:

init.php - contains all the initializations, configurations need to be loaded in the system

functions:

sanitize.php - function used to further validate input fields.

pages:

AddUser.php - page containing the form for adding a user
ChangeName.php - page containing the form for changing user's name.
index.php - home page
login.php - page containing the form for logging in.
logout.php - page for logout.

The advantage of using OOP in a web application is it can be easily expanded to whatever functions you want to add parameters, return values and properties without editing most of the codes. Also, OOP is easy trace and troubleshoot for bugs - functions and properties are grouped by objects so, bugs are easy to locate and fix.

Download here.

SVG Pie Chart using PHP

SVG, or Scalable Vector Graphics are widely used for dynamic shapes and icons in web applications. They are usually implemented because it is a vector graphic - meaning it can be scaled in any size without losing its quality. Also, charts and other graphical data representation can be easily implemented with SVG because it is very dynamic. You can basically draw any shapes by just providing certain parameters.

A dynamic SVG Pie Chart made using PHP. It accepts 10 names and corresponding values then it will automatically generate a pie chart (with legend). The program uses the path command for SVG.

The key here is you first decide where would be the point of origin. This will involve a little bit of trigonometry. After that, everything will be just like plotting points to a Cartesian coordinate system. Supply the start point and end point for the path, and it will automatically create the shape.

Technically, the code you really need to focus on is:


foreach($_POST['value'] as $value){
 if($value==""||$value==0){
  $x++;
  continue;
 }
 $angle=deg2rad((($value+$prev)/$total)*360);
 $end_point[0]=round(200-((cos($angle))*180),2);
 $end_point[1]=round(200-((sin($angle))*180),2);
 
 if((rad2deg($angle))<180){
  $path=0;
 }
 else{
  $path=1;
 }
 
 //for same start and end points
 if($start_point[0]==$end_point[0]&&$start_point[1]==$end_point[1]){
  $end_point[1]=$end_point[1]+0.001;
  $stroke=0;
 }
 else{
  $stroke=3;
 }
 //breakpoint
 echo "<path d='M200,200 L".$start_point[0].",".$start_point[1]." A180,180 0 ".$path.",1 ".$end_point[0].",".$end_point[1]." z'
   style='fill:#".$color[$x].";stroke:white;stroke-width:".$stroke."; mask:url(#hole) '/>    

 "; 
 $start_point[0]=$end_point[0];
 $start_point[1]=$end_point[1];
 $prev=$prev+$value;
 $x++;
}

First, calculate for the angle of the certain point: $angle=deg2rad((($value+$prev)/$total)*360);

So initially, when you plot the point, you start at the origin, which is (0,0) - the center of the circle.

By Pythagorean Theorem, you can solve for adjacent side, which is from 0 to y axis, by: $end_point[0]=round(200-((cos($angle))*180),2);

And solve for the base, which is from 0 to x: $end_point[1]=round(200-((sin($angle))*180),2);

Now you have the 3 points: the origin, the end_point[0] and end_point[1], that being said, we now have a triangle. This is basically the segment of our pie chart, but we need to draw the hypotenuse in a curve, so it will look like a segment of the circle.

After that, you need to determine if the angle is greater than 180. Why? Because if the angle is greater than 180, we would let the path draw the LONGEST path from end_point[1] to end_point[0]. Else, it should use the shortest path.

Now the path command will draw the path from origin, end_point[0] and end_point[1].

And since we are on a loop, the formula will just repeat for each values in the array.

This pie chart can chart more values easily by just extending the array where the data are saved. You can just add textboxes or more values to the array and it will automatically be interpreted in a chart.

Most of the chart functions now are using SVG because it can be easily implemented even with simple PHP code. You just have to be familiar with the properties and parameters the certain SVG command have.

Download here.

Feel free to ask questions if you are confused or if you want to modify the program.