Posts

Showing posts from August, 2016

Upload an image with AJAX

Image
To begin, little reminder about sending a form (without upload) AJAX with jQuery. Nothing less than a form for sending in AJAX. Here in this example will be about an upload image, but can be adapted to any other type of file. Here is the code that supports the upload of an image, in addition to the rest of the form. enctype added = "multipart / form-data" to the form is mandatory if you want to do a file upload. We also add our field that allows the user to select a file on his computer. It states that only the images are accepted. The upload AJAX is related in fact to support the browser FormData API. This is supported by the major browsers finaly PHP : You can use my other tutoriel to handle this php file  .

Let's build a mobile application with Ionic Framework #5

Image
After listings the audio books , now we need to playing some sound . since we are dealing with html5 hybride application , no way better way  than using HTML5 Audio  api ! The idea is just creating two functions inside our controller : play() , and pause() But we declare a global variable called audio var audio = new Audio (); NB : the URL  for streaming these audio books is http://www.litteratureaudio.net  + Book. preview(data.json) // play function $scope.play = function(preview){       var url =  "http://www.litteratureaudio.net"  + preview   audio = new Audio(url)   audio.play() } // pause function $scope.pause = function(){ audio.pause() } Now we have our two functions, they still have to detect when the user click on play with angularjs ng-click , we will also pass the parameter preview to listen to the good book ng-click="play({{book.Book.preview}})"

Let's build a mobile application with Ionic Framework #4

Image
Afrer getting json data with http service, now we'r gone display it ! Before anything, we need to know what's a $scope variable ?  Scope  is an object that refers to the application model . It is an execution context for  expressions . Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch  expressions  and propagate events.( AngularJS Doc) basically each scope is a reference to a model in a controller  , except for the case of rootScope   because it is present in all controllers . NB : to use scope / rootScope we must inject it into the controller  $http.get("data.json")     .then(function(response) {         $scope.books = response.data;         console.log(response.data)     }); We are storing in $scope.books variable to be able to be able to use it in the view NB : the responce object is inside data attribut that's what we storing    resp

Let's build a mobile application with Ionic Framework #3

Image
Today We 're gonna start to write some code , first is make a main controller to our ionic application , of course by controller i mean angularjs controller . we start by add ng-controller to our body tag , but this is just a reference to controller we need also to create this controller (MainController) .  The idea is just use http call to get the data.json AngularJS comes with built in $ http service  to make (GET,UPDATE,POST,DELETE) in our case we are are doing get call app.controller('MainController',function ($scope,$http) {   // body...   $http.get("data.json")     .then(function(response) {         console.log(response)     }); }) we are just login data in the console. NB : the http call could make some time before it returns the  data in , our case we are working localy, but in real life we have to work with web services and  probably internet connection like mine lol, you guessed it, we need to use some techniq

Let's build a mobile application with Ionic Framework #2

Image
To Build this app first we need to get Audio books data, since we don't have a web service for this we just calling data.json file data.json The json array contains all informations about book such as title , category and author , w're gone to make it simple  we need just create ionic application first with command line ionic start books blank This Creating ionic application in  books  folder , blank stands for template we are using empty template. cd  books Changing directory to books folder ionic serve This is starting and listening to http server in 8100 port ,we are gone to keep this command when working on the project we also need to place data.json in root of the project,to use it later NB : Don't forget to install ionic before you begin( nodejs is required ) npm install -g cordova ionic here our ionic application structure  all the html  files are in the www folder

Let's build a mobile application with Ionic Framework #1

Image
Let's build a mobile application with Ionic Framework @ChihebNabil Composants UI : http://ionicframework.com/docs/components Slide NB : Ensure that NodeJS is correctly installed on your machine Slides Cordova / Ionic / AngularJS ? Native : The inconvenients Is there an alternative? Ionic CLI Overview of UI components (http://ionicframework.com/docs/components) Mini Project Cordova / Ionic / AngularJS ? Apache Cordova (6.x) : open source framework developed by the Apache Foundation. It allows to create applications for different platforms (Android, IOS ...) in HTML, CSS and JavaScript. Ionic (1.3): it is a framework based on AngularJS facilitate the development of hybrid mobile applications AngularJS (1.5.5) : AngularJS is a JavaScript framework Open Source Powered by Google Native : Les inconvénients Mastering each platform is required expensive development entirely separate Source Code Y at-il une alternative? HTML5 Applications Dir

Upload files with Php

Image
When it comes to upload files with php, it's not so difficult, In the beggining we just need to type some  html markup we just creating a form with enctype = " multipart/form-data " it important to add this attribute it shows that we can upload file with this form < input type = " hidden " name = " MAX_FILE_SIZE " value = " 30000 " /> this hidden field indicate max file size , we need also to make security check in php side < input name = " userfile " type = " file " /> this is the file input to upload a file move_uploaded_file ( ) : take 2 paramatres the filename and destination path/file NB : this just uploading directly files ,but in the production mode wee need  security checks such as allowed file extensions and allowed max file size $_FILES it's multidimensional array variable hols all uploaded file info

Realtime Chat Application with CakePHP and Socket.IO #3

Image
In this tutoriel we are going to setup the nodejs server to recive socket.io events. First make sure that nodejs is correctly installed on your server in my case it was Debian Server Create a folder in your server and with commande line (pointed to this folder ) type npm init this create a file called package.json  we need this file to install ou node module to install just type npm install Modules Socket.IO : to be able to use realtime events in our application Node-mysql : to connect to mysql database nodemon :  this just dev dependency to restart the server when make (server side) changes we need to create another important file whitch is server.js this is the main server code in this file we are setup a nodejs / socket.io server and listen to it in port 3000 the server point to index.php file but you can point it to empty html file , it's not a problem NB: it's just requiring module , installed / or nativly included in nodejs lik

Realtime Chat Application with CakePHP and Socket.IO #2

Image
Before , We begin we need the main layout for the application ,in my case i  make ctp file (cakephp file ) I include in the css and js files for   Material Design for Bootstrap  just to have a modern look for the application <?php echo $this -> fetch( ' content ' ); ? > this echo the view for other pages / controllers's actions we need also to another layout file  to use it in chat PS : the layout  files are in this directory app/view/layout , it's specific for cakephp 2

DNA : The Future Data Storage

Image
Yes, the dna we all studied this  in science classes (high school), it contains  all the genetic  information, but wait we are not for a course science !! Microsoft's idea is to produce customized dna chain which represents informations ,  The big difficulty  with DNA storage is reading and writing  , Microsoft  seeks to reduce  custom DNA sequence  costs to  (2cents) . the question arises, why use dna, the answer is simple  ,  we can store 1,000,000,000 TB in a gram

Realtime Chat Application with CakePHP and Socket.IO #1

Image
In this blog we will build a Realtime Chat Application with CakePHP and Socket.IO Your are free to use another framework, the idea is just learning the basics and a few (Socket.IO) tips Database :  To store our data for this application we need 4 tables :  users :         contains user's informations such as username and password hash ,email ...  messages : contains messages between users, it also store the information of sender and destination  user companies : or teams table ,in order to organise groups i add this table to give the user the freedom  of organizing his contact it stores the company name with his owner .   companies_users : it contains the users and their respective  companies here the SQL file fo database structure     file in the next tutorial we'r gone started building the frontend using cakephp  

Pokemon Go : How much would it cost to develop a similar application ?

Image
The market is not full with experts in augmented reality . On the other hand, these are specimens rare and not easy to find.and, the development of an application using this technology requires much time. And " time is money ", as the saying. Pokémon GO , with all its technical features, was developed by the   Niantic team. But to carry out projects in augmented reality apps, it is quite possible to use software platforms such as Windows Holographic or Unity. For a high quality game, it takes two to three months of development work, the cost would be around 25,000 euros . The same investment of time and money should be provided to carry out the design . Yes it is possible to simplify the graphics as much as possible to save money, but be careful all the same characters that the app does not end up becoming blurred. To make a good design, count two to three months of work and a budget of at least  25,000 euros . Finally, the application will require the establishmen

Socket.IO & Realtime application

Image
We all once believed that the development of a realtime application is difficult . But that's worng in fact it's not that difficult especialy for web developer the Reaseon ?  Socket.IO     To simplify things Socket.io is nodejs module (server side JavaScript)  to send and receive a kind of  events . Basically, you send and listen to emit events on both side front and back end   To install it on your project npm install socket.io you need also to include javascript library in the front end <script src="/socket.io/socket.io.js"></script><script> exemple  Client side : socket.on means we listen to an event called news socket.emit we send an event called my other event to the server Server Side : io.on('connection' is listen to when the user is connected when logged or not i takes socket as parametre socket conatins all connected users socket.emit send an event called news to

Install Bash on Windows 10

Image
Windows 10’s Anniversary Update comes with  a big new feature for developers: A full, Ubuntu -based Bash shell that can run Linux software directly on Windows. This is made possible by the new “ Windows Subsystem for Linux ” Microsoft is adding to Windows 10. This isn’t a virtual machine, a container, or Linux software compiled for Windows (like Cygwin). Instead, Windows 10 gains a Windows Subsystem for Linux, which is based on Microsoft’s abandoned Project Astoria work for running Android apps on Windows. How to Install Bash on Windows 10 First , we need to make sure to get Windows 10’s Anniversary Update Then we need to activate developer mode in Settings ->  Update & Security > For Developers Next, wee need install Bash For Ubuntu , open the Control Panel, click “Programs,” and click “Turn Windows Features On or Off” under Programs and Features. Enable the “Windows Subsystem for Linux (Beta)” option in the list here and click “O

Creating my First PHP Framework : Day 4

Image
After knowing which controller to load with App.php  , we need to know what the view corresponding, or simply create a functions to load the view in Controller.php in this file we find a function called view , it has 3 parameters -  $view : the view file name -  $data = [] : array of a view variables ,if we want send variables to the view -  $template = " default " : The view layout it loads by default , default.php exemple : $this -> view( ' pages/home ' , $data = [ ' name ' => $name ]); the second function model is just requiring the model for the controller require_once " ../app/models/ " . $model . " .php " ; and getting instant of it return new $model (); Tip : ob_start   is more like to save the view file content inside  a variable

Creating my First PHP Framework : Day 3

Image
The Controller Ohhh this magic piece of code  ,  to simplify things the role of controller is knowing which part of code to load . The idea here is a creating a class to auto load a model  and a functions to load view(template) , but... wait we have to know witch controller to load first , don't worry the is the Magic App.php file : Each time we load an url we have to decompose with (  URLparser function ) it into BASE_URL/CONTROLLER/ACTION/PARAMS in this file we take the url , extract the controller'name  as array   , after we require the controller file(after checking if exist) require_once " ../app/controllers/ " . $this -> controller . ' .php ' ; Lastly , we use  call_user_func_array to call the URL call_user_func_array ( [ $this -> controller , $this -> method ], $this -> params ); The framework github

Creating my First PHP Framework : Day 2

Image
First things first , i'needed a file (init.php) witch requires all other components of the framework , also all the static variables such as APP and CSS directories so i called it init.php                                                       <?php define ( ' ROOT ' , dirname ( __DIR__ )); define ( ' APP ' , ROOT . "/ app /" ); define ( ' WEBROOT ' , " http:// " . $_SERVER [ ' HTTP_HOST ' ] . dirname ( $_SERVER [ ' PHP_SELF ' ]) . " / " ); define ( ' CSS ' , WEBROOT . " css/ " ); define ( ' IMG ' , WEBROOT . " img/ " ); define ( ' JS ' , WEBROOT . " js/ " ); define ( ' DS ' , ROOT . " / " ); require_once ROOT . ' /vendor/autoload.php ' ; require_once APP . ' /core/App.php ' ; require_once APP . ' /database.php ' ; Also i need to require 3 files autoload.php : composer's a