Friday, September 19, 2014

Validating a form submission

When filling a form it is natural for the users to make mistakes. To get appropriate data we should always validate the forms. This is an example for a validation done to a form.


The form action calls for the route which will direct it to the function will check if there are any other event existing in the database. If there are events on the same date, an error message will be displayed.

The route

Route::post('submitproject', array('as'=> 'submitproject', 'uses'=>'ProjectsController@postProject'));

This will direct to the function 'postProject' in the controller 'ProjectsController'.

The Function

public function postProject()
  {
$event_date = Input::get('p_dateofevent');
$date = DB::select('SELECT ProjectID FROM projects WHERE DateOfEvent=?',array($event_date));

if($date == null)
{


DB::table('projects')->insert(array(
"ProjectTitle" => Input::get('p_title'),
"DateCreated" => Input::get('p_datecreated'),
"DateOfEvent" => Input::get('p_dateofevent'),
"ProjectManager" => Input::get('p_manager'),
"NoOfStaffs" => Input::get('p_noofstaffs'),
"ProjectDescription" => Input::get('p_description'),
));

$error ='New project is successfully added!';
return Redirect::to('DHProjects')->with('error',$error);

}
else
{
$error='The event date is not allowed. Please give a different event date.';

return Redirect::to('DHProjects')->with('error',$error);

}



}

In this function, it will take the event date from the form and check if any other events are there in the system with the same event date. If there are events an error will be displayed ( the else section). Otherwise the data will be added to the system.

The error message shown when an event is existing for a given Event Date.

Apart from that, the user will be alerted if he gives an event date which is invalid ( giving a past date as the event date).  The function has been called on an onchange, where the validation will be done as soon as the user gives a date.
The HTML code

<label>Event Date</label><input required type="date" id="p_dateofevent" name="p_dateofevent" class="form-control input-lg"  onchange="validateSubmission();"> <br />

The Javascript Function

 function validateSubmission()
            {
         
                var eventdate = document.getElementById('p_dateofevent').value;
             
                //getting the current date.
                var currentDate = new Date();

                var day = currentDate.getDate();
                var month=('0'+(currentDate.getMonth()+1)).slice(-2);
                var year = currentDate.getFullYear();
                var currDate =   year + "-" + month + "-" + day ;
             
             
                 if(eventdate <= currDate)
                    {
     
                      alert("Invalid Event Date");
                      return false;
                    }


            }

The output will be as below.


As a user it will be annoying to them if they have to give a date when it can be straight away taken from the system. In the Date Created field, the system will get the system date and display and will not allow the user to change it. This is done in order to get appropriate data.

         
                         function addDate()
                              {
                                var datee = new Date();
                                var month = datee.getMonth()+1; //January is taken as 0
                                var day = datee.getDate();
                                var year = datee.getFullYear();

                                if(document.getElementById("p_datecreated").value==''){
                                  document.getElementById("p_datecreated").value=year+'-'+month+'-'+day;
                                }
                              }

                              <?php
                                echo "addDate();";
                              ?>

   
        The addDate function will get the system date by calling the Date() function. Since the return value is in the date time format, the month, date year will be extracted form the function. p_datecreated' is the   textfield name in the form where the date should be displayed.

 <label>Date Created</label><input required type="text" id="p_datecreated" name="p_datecreated" class="form-control input-lg"  readonly="true"> <br />

Note that this text has been set so readonly, which has disabled the user on editing the text field. Once you go to the form, the system date will be shown.




Thursday, September 18, 2014

Display HTML table data in a form.

Here I will be discussing how to View a dataset which are in a dynamic table. This is a continuation to the previous post I have done to create a dynamic table to retrieve the data.
The onclick functions that have been written for the three buttons will be discussed here.

First of all let me show you how to display the table data in a different form when you click on the View button.
The HTML design for the view button is as follows.

<td class="auto-style8"> <input  id="btnPview" name="btnPview" type="submit" value="View" onclick="ViewTo('<?php  echo $key->ProjectID; ?>');" /></td>

'ViewTo' is the javascript function I have written to send the 'ProjectID' to the route and through the route I will be accessing the function in the controller which will display the view form.

Javascript function

 function ViewTo(ProjectID){
   
        location.href='viewto?pid='+ProjectID;
   }

The route

Route::get('viewto', array('uses'=>'ProjectsController@viweProject'));

Note that ProjectsController@viweProject is where you ask to go to the 'viewProject' function in the 'ProjectsController'.

The function

public function viweProject()
{

$id=Input::get('pid');

$projectDetails= DB::table('projects')->where('ProjectID',$id)->get();

Session::put('PDetails',$projectDetails);

return View::make('Projects/ViewProjects');


}

The 'ViewProjects' is the HTML page designed for the display the data.


The output for the view function is as follows.







How to display database data in a dynamic table using PHP

When developing a system it is necessary to display the database data in an appropriate way. using a dynamic table to display such data is one of the methods used. I will show you how to retrieve the data to the table using PHP. In php i have used the laravel framework where controllers and views are used. Here I will not be explaining about the laravel framework.

The code below is used to get the data set from the database and to pass it to the view.

public function DHProjects()
{
$presult = DB::table('projects')->get();
return View::make('Projects/DHProjects')->with ('projectsList', $presult);

}

get() is an inbuilt function in laravel where you get the data in the table that you pass. Here the table name is 'projects'. These data are passed to the view when creating it as 'projectsList'.

In the view add this code to insert the data in the dynamic table.


The '@foreach' is used to dispay the data row by row for all the data in the 'projectsList' passed by the controller. the ProjectID, ProjectTitle, DateCreated, DateOdEvent and ProjectManager are the field names in the table 'projects' in the database.

With the CSS styles the output can be seen as below.