Sunday, February 28, 2016

Matrix 6.0 Javascript Source Code

Matrix 6.0 source code with Matrix Reloaded Core Engine. The first Matrix was written in 2000 for NetValue Online in Java but Matrix Reloaded has 2 objects model and form instead of 3 classes model, form and sub_form. Matrix 6.0 is a software installed on my computer without web server.

 /**  
 *   
 * matrix.js is a standalone javascript software  
 * Add entries to the page of the month and save the page with CTRL+S   
 * Use with Firefox - Mozilla Foundation  
 *  
 * @author: Fabrice Morisseau  
 * @version: 6.0  
 * @date: March 20, 2016  
 *  
 **/   
 /**  
 *  
 * load_menu: Load the menu  
 *  
 **/  
 function load_menu() {  
 document.getElementById("menu_top").innerHTML = "";  
 }  
 /**  
 *  
 * add_div: Generate timestamp of the div  
 *  
 **/  
 function add_div() {  
 var today = new Date();  
 var y = today.getFullYear();  
 var M = today.getMonth()+1;  
 var d = today.getDate();  
 var h = today.getHours();  
 var m = today.getMinutes();  
 var s = today.getSeconds();  
 return "" + y + M + d + h + m + s;   
 }  
 /**  
 *  
 * model: Matrix Reloaded Core Engine repository  
 *  
 **/  
 function model() {  
 this.model = {};  
 this.add = function (prettyname,form) {  
 this.model[prettyname] = form;  
 }  
 this.get = function (prettyname) {  
 return this.model[prettyname];  
 }  
 }  
 /**  
 *  
 * form: Matrix Reloaded Core Engine form  
 *  
 **/  
 function form(prettyname) {  
 this.name = prettyname;  
 this.content = "";  
 this.set = function (content) {  
 this.content = content;  
 }  
 this.display = function() {  
 return this.content;  
 }  
 }  
 // Create timestamp  
 var item = add_div();  
 // Create Core Engine repository  
 var breeze = new model();  
 /**  
 *  
 * evolution: Add an entry to the main div  
 *  
 **/  
 function evolution() {  
 // Create Breeze Evolution Core Engine Forms   
 var main_evolution = new form("evolution");  
 main_evolution.set("<div id='item" + item + "' class='item" + item + "'></br></br><h2><div id='date" + item + "' class='date" + item + "'>" + document.getElementById('date').value + "</div></h2></br><div id='entry" + item + "' class='entry" + item + "'>" + document.getElementById('entry').value + "</div> <a href=javascript:update_item('"+ item +"');><img src='css/icon_edit.png' border='0'></a> <a href=javascript:delete_item('"+ item +"');><img src='css/icon_delete.png' border='0' height='18px'></a></div>");  
 // Add Breeze Evolution Core Engine Forms to Core Engine repository  
 breeze.add("evolution",main_evolution);   
 var main = document.getElementById('main').innerHTML;  
 var str = breeze.get("evolution").display();  
 while (str.search("\n") != -1)  
  str = str.replace("\n","<br>");  
 document.getElementById('main').innerHTML = str + main;  
 clear_passwd();  
 }  
 /**  
 *  
 * editor_display: Display Editor  
 *  
 **/  
 function editor_display() {  
 if (check_passwd())  
 document.getElementById("editor").innerHTML = "<br><input value='' class='date' id='date' type='text'><br><textarea value='' class='entry' id='entry' cols='60' rows='10'></textarea>&nbsp;<input name='Valid' value='Valid' onclick='javascript:evolution();return false;' type='button'>";  
 else  
 document.getElementById("editor").innerHTML = "You must set the password first";  
 }  
 /**  
 *  
 * editor_close: Close Editor  
 *  
 **/  
 function editor_close() {  
 document.getElementById("editor").innerHTML = "";  
 }  
 /**  
 *  
 * update_item: Change the entry displayer from text to update  
 *  
 * @param item: timestamp of the entry  
 *  
 **/  
 function update_item(item) {  
 if (check_passwd()) {  
 var date = document.getElementById('date' + item).innerHTML;  
 var entry = document.getElementById('entry' + item).innerHTML;  
 while (entry.search("\n") != -1)  
  entry = entry.replace("\n","");  
 while (entry.search("<br>") != -1)  
  entry = entry.replace("<br>","\n");  
 document.getElementById('date' + item).innerHTML = "<input value='" + date + "' class=update_date" + item + " id=update_date" + item + " type=text>";  
 document.getElementById('entry' + item).innerHTML = "<textarea class=update_entry" + item + " id=update_entry" + item + " cols=60 rows=10>" + entry + "</textarea>&nbsp;<input name=valid_update value=Valid onclick=javascript:valid_update('" + item + "');return false; type=button>";  
 }  
 }  
 /**  
 *  
 * valide_update: Update the entry of the main div  
 *  
 * @param item: timestamp of the entry  
 *  
 **/  
 function valid_update(item) {  
 var date = document.getElementById('update_date' + item).value;  
 var entry = document.getElementById('update_entry' + item).value;  
 while (entry.search("\n") != -1)  
  entry = entry.replace("\n","<br>");  
 document.getElementById('date' + item).innerHTML = date;  
 document.getElementById('entry' + item).innerHTML = entry;  
 clear_passwd();  
 }  
 /**  
 *  
 * delete_item: Delete an entry of the main div  
 *  
 * @param item: timestamp of the entry  
 *  
 **/  
 function delete_item(item) {  
 if (check_passwd())  
 document.getElementById('item' + item).innerHTML = "";  
 clear_passwd();  
 }  
 /**  
 *  
 * start_time: Display time every 10000ms  
 *  
 **/  
 function start_time() {  
   var today=new Date();  
   var h=today.getHours();  
   var m=today.getMinutes();  
   m = check_time(m);  
   document.getElementById('clock').innerHTML = "<center>"+h+":"+m+"</center>";  
   var t = setTimeout(function(){start_time()},10000);  
 }  
 /**  
 *  
 * check_time: Add zero in front of numbers if < 10  
 *  
 * @param i: Minutes  
 *  
 **/  
 function check_time(i) {  
   if (i<10) {i = "0" + i}; // add zero in front of numbers < 10  
   return i;  
 }  
 /**  
 *  
 * update_menu: Change the menu displayer from text to update  
 *  
 **/  
 function update_menu() {  
 var menu = document.getElementById('menu').innerHTML;  
 if (check_passwd())  
 document.getElementById('menu').innerHTML = "<textarea class=entry_menu id=entry_menu cols=50 rows=5>" + menu + "</textarea>&nbsp;<input name=valid_menu value=Valid onclick=javascript:valid_menu();return false; type=button>";  
 }  
 /**  
 *  
 * valide_menu: Update the entry of the menu  
 *  
 **/  
 function valid_menu() {  
 var menu = document.getElementById('entry_menu').value;  
 document.getElementById('menu').innerHTML = menu;  
 clear_passwd();  
 }  
 /**  
 *  
 * update_about: Change the about displayer from text to update  
 *  
 **/  
 function update_about() {  
 var about = document.getElementById('about').innerHTML;  
 if (check_passwd())  
 document.getElementById('about').innerHTML = "<textarea class=entry_about id=entry_about cols=50 rows=5>" + about + "</textarea>&nbsp;<input name=valid_about value=Valid onclick=javascript:valid_about();return false; type=button>";  
 }  
 /**  
 *  
 * valide_about: Update the entry of the about  
 *  
 **/  
 function valid_about() {  
 var about = document.getElementById('entry_about').value;  
 document.getElementById('about').innerHTML = about;  
 clear_passwd();  
 }  
 /**  
 *  
 * clear_passwd: Clear password hidden input  
 *  
 **/  
 function clear_passwd() {  
 document.getElementById('set_password_value').value = "";  
 }  
 /**  
 *  
 * check_passwd: check password hidden input  
 *  
 **/  
 function check_passwd() {  
 var str = document.getElementById('set_password_value').value;   
 if (str.hashCode() == "-1025043652")   
  return true;  
 else  
  return false;  
 }  
 /**  
 *  
 * hashCode: return hashCode of any String  
 *  
 **/  
 String.prototype.hashCode = function(){  
 var hash = 0;  
 if (this.length == 0) return hash;  
 for (i = 0; i < this.length; i++) {  
 char = this.charCodeAt(i);  
 hash = ((hash<<5)-hash)+char;  
 hash = hash & hash; // Convert to 32bit integer  
 }  
 return hash;  
 }  



Monday, January 18, 2016

Linux Mint 17.3 Rosa

I just installed Linux Mint 17.3 Rosa and it works really well. Congratulation to the team behind this fantastic desktop. Most of the internet uses Linux and open source software. From freedom comes elegance says Linux Mint when you Login. Just think about the engineers working for Alsthom and the wonderful TGV. They are proud of their achievement. Isn't it ? It should be the same for the contributors of open source projects. They made the internet that billion of people use everyday.

I belong to the old school so I don't use an IDE for Web Development. Instead, I edit all my files with gedit and write native javascript, css or html. Everybody know how to use a browser nowdays. Web Development is different than Linux Mint Software Engineering. I work by progressive enhancement for development while a Software Engineer has to follow much more project management constraints.

Sunday, August 2, 2015

Sunday, July 26, 2015

Amazon Web Services

You now know that you need to strike the right balance between a single page application relying on your client and a dynamic server side model view controler. The last stone of your architecture will be to deploy your software on the machines. The easiest way will be to use Amazon Web Services.

  1. Install a LAMP Server
  2. Transfer your software solution on the newly created production environment
  3. Install the RDS (Database)
  4. Create an image of your environment
  5. Configure the scalability (load balancing) of your solution
You now have a small, medium or big web application available on the internet.

Php is an easy solution to start programming on the internet without the constraints of projects development.

Thursday, May 21, 2015

Basic RESTFul/json API

Web Development is constraint by frequent evolutions so that you need to rewrite the whole or part of a software every 5 to 10 years. The Dynamic Web Application was a server side MVC but it's clear today that we are also moving to client side Single Page Application MVC with libraries like AngularJS. Google may not be welcome in China but I need to follow latest technology innovation. I made a new Kernel with a very basic web application in Ajax using a RESTFul/json API written in PHP.

The Kernel analyses the request and exec the endpoint

 <?php  
 /**  
  * rest.class.php  
  * author : Fabrice Morisseau  
  * creation date : April 9, 2015  
  **/ 

 abstract class rest  
 {  
   /**  
    * Property: method  
    */  
   protected $method = '';  
   /**  
    * Property: endpoint  
    */  
   protected $endpoint = '';  
   /**  
    * Property: action  
    */  
   protected $action = '';  
   /**  
    * Property: config  
    */  
   protected $config = Array();  
   /**  
    * Constructor: __construct  
    */  
   public function __construct($request) {  
     header("Content-Type: application/json");  
     $this->config = explode('/', rtrim($request, '/'));  
     $this->endpoint = $this->config[0];  
     $this->action = $this->config[1];  
     $this->method = $_SERVER['REQUEST_METHOD'];  
   }  
   public function exec() {  
     if ((int)method_exists($this, $this->endpoint) > 0) {  
       header("HTTP/1.1 200 OK");  
       $data = $this->{$this->endpoint}($this->config);  
     } else {  
       header("HTTP/1.1 404 Not Found");  
       $data = "The endpoint doesn't exist";  
     }  
     return json_encode($data);  
   }  
 }  
 ?>  

Obviously the endpoint are stored in the API which call the Kernel


 <?php  
 /**  
  * MyAPI.php 
  * author : Fabrice Morisseau  
  * creation date : April 9, 2015  
  **/   
 require_once '../../kernel/rest.class.php';  
 class MyAPI extends rest  
 {  
   protected $request;  
   public function __construct($request) {  
     parent::__construct($request);  
     $this->request = $request;  
   }  
   /**  
    * Endpoint Document  
    * Todo : Eval phpfile for documentation  
    */  
   protected function document() {  
    /**
     * Example of endpoint return $content of the document
     **/   
   }  
 }
       
 try {  
   $API = new MyAPI($_REQUEST['request']);  
   echo $API->exec();  
 } catch (Exception $e) {  
   echo json_encode(Array('error' => $e->getMessage()));  
 }  
 ?>  


while the .htaccess route the requests to the API

 <IfModule mod_rewrite.c>  
 RewriteEngine On  
 RewriteCond %{REQUEST_FILENAME} !-f  
 RewriteCond %{REQUEST_FILENAME} !-d  
 RewriteRule api/v1/(.*)$ api/v1/MyAPI.php?request=$1 [QSA,NC,L]  
 </IfModule>  


We are done with latest technology innovations and my prototype has been totally rewritten.

The Object Relational Bridge is no longer used because modelization is not flexible so that you can realize complex things but details and specific queries also matter. Modelization looks like Artificial Intelligence and the Alchemist dream moreover according to this study by the French national center in scientific research CNRS there are numerous security issues with a dynamic system. It seems better to access your data on-demand with strict security checks.

Single Page Application loads only one page while the server generates all the html code with a dynamic web application. Among the important things to notice as mentioned on wikipedia SPA are Search Engine Optimization in the case of this RESTFul/json API and Browser History as well as navigation. Those issues are critical when designing your application. Your application should have an important core generated on the server and optimized for search engine as well as on demand requests accessible with this RESTFul/json API.