Step by Step How to Implement Alertify Javascript in Web Applications that Generated by PHPMaker 10

Alertify is the JavaScript Alert/Notification System. It is created since browser dialogs never looked so good. Indeed, as we can see that the browser dialogs are not good. Time to change them now! There are several advantages that you will get if you use Alertify. First, it is customizable look and feel. If you can edit CSS, then you can also customize the look of Alertify to match your needs. Secondly, it is lightweight, no dependencies. No matter the type of project, if JavaScript is available, then Alertify can be used. And the most important thing is, it supports for Bootstrap style! As we have already known, PHPMaker 10 uses Twitter Boostrap. So it's time for us to use it, right?

This following article will show you step by step how to implement Alertify in PHPMaker project. You will see that how easily we can implement it in our project. Started from downloading and extracting the source files, copy the required files, declare the files in your PHPMaker project using Server Event, and write the code in the Client Scripts section of PHPMaker 10. I will show you also, one little trick, how to customize the existing code in the function of the Client Script, so that the Alertify will work properly in PHPMaker project. 😉

In this example, I will show you the confirmation dialog which contains two button; OK and Cancel. User has to click on the button in the confirmation dialog either for Add or Edit page. When user is clicking on the OK button, then the confirmation dialog will be hidden and the process proceeds to submit the form; and the fun part is, there will be a success message that came from the bottom-right of your screen: Saving .... Otherwise, when user is clicking on Cancel button, then the confirmation dialog will be hidden and there is a cancel message appears at the bottom-right of your screen: Cancelling .... Those messages will automatically be gone after several seconds. However, you can hide the message immediately by clicking it on its body. So nice! 🙂

Want to see the demo? Watch this video!

Updated on October 13, 2013: Please note that Alertify has been included into MasinoHeaderFooter10 extension. In other words, you don't need to add the stylesheet and javascript declaration. Please see the instruction at the 6th step below!

[hidepost]

1. Download the script file from this link.
2. Extract the .zip file to your computer until you see some sub-folders and some files inside.
3. Copy the alertify.js and alertify.min.js files that located in lib sub-folder into your phpjs sub-folder of your generated web applications.
4. Copy the alertify.bootstrap.css and alertify.core.css files that located in themes sub-folder into your phpcss sub-folder of your generated web applications.
5. Open your PHPMaker project (.pmp) file using PHPMaker application.
6. Go to Server Events -> Global -> All Pages -> Page_Head, and then insert the following code into the editor code in the right pane:

   ew_AddStylesheet("phpcss/alertify.core.css"); // Add CSS stylesheet  
   ew_AddStylesheet("phpcss/alertify.bootstrap.css"); // Add CSS stylesheet
   ew_AddClientScript("phpjs/alertify.min.js"); // Add JavaScript 
   

   Please note that alertify.core.css is the main style of the Alertify css. Make sure you do not forget to include this file, whereas alertify.bootstrap.css is the stylesheet that supports for Bootstrap. If you don't want to use Bootstrap, then you can use alertify.default.css file instead.

   Please note also that Alertify has been included into MasinoHeaderFooter10 extension. So, you don't have to add the stylesheet and javascript declaration anymore. Now it has been handled from the extension side.

7. The next step is the most important part. Yeah, we will write the code in the Client Scripts section of PHPMaker in order to display the confirmation dialog. To do this, you have to first select one of your desired table from the Database pane that located in the left side of PHPMaker (in this example, I am using orders table), afterwards, go to its Client Scripts -> Table-Specific -> Add/Copy Page -> Form_CustomValidate, and then insert the following code into the code editor at the right pane of PHPMaker:

       // confirm dialog
       alertify.confirm("Are you sure you want to save the record?", function (e) {
           if (e) {
               alertify.success("Saving ...");
               document.forms["fordersadd"].submit(); // adjust "fordersadd" with yours!
               return true;
           } else {
               alertify.error("Canceling ...");
               return false;
           }
       });
   

   before or above of the following code:

     return true;
   }
   

   Important: In the snippet code above, we are using fordersadd as the form name. Yeah, I was using orders table in this case. Fortunately, PHPMaker has the standard format for the form name. It uses f<tablename><operation>. Similarly, for Edit page, the form name is fordersedit. You have to adjust it with yours, so make sure you don't forget about it! 🙂

8. The next step, we have to remove return true code in the function, since we have handled it from the if structure control above. So, replace the following code in the last of the Form_CustomValidate function above:

     return true;
   }
   

   become:

     // return true; // we have handled it above. see?
   }
   

   In other words, if there are no code besides that one above in the Form_CustomValidate client script, then the complete code in your generated script file (in this case: ordersadd.php) will become:

   function(fobj) { // DO NOT CHANGE THIS LINE!
       // Your custom validation code here, return false if invalid.
   
       // confirm dialog
       alertify.confirm("Are you sure you want to save the record?", function (e) {
           if (e) {
               alertify.success("Saving ...");
               document.forms["fordersadd"].submit(); // adjust "fordersadd" with yours!
               return true;
           } else {
               alertify.error("Canceling ...");
               return false;
           }
       });
     // return true; // we have handled it above. see?
   }
   

9. You can do the same thing for Edit page by using the previous step. In that case above, then the form name would become fordersedit. Again, don't forget to adjust the form name that suits to yours.
10. Finally, re-generate your script files using PHPMaker, as always, and enjoy the result! 🙂

[/hidepost]