Month: March 2017

TypeScript

Ref: https://www.typescriptlang.org/docs/tutorial.html
Installation:

  1. Install from npm

    Check the typescript version:

     
  2. Try it via Visual Studio Code.
    Create a new file ‘greeter.ts’ and here is the content:

    Then compile it via

    It’d create a new js file: greeter.jsgreeter.js has same content with greeter.ts.
  3. TypeScript Interface
    Create a new file ‘greeter-interface.ts’:

    Then compile it

    Here is the output ‘greeter-interface.js’

  4. TypeScript Class
    Create a new file ‘greeter-class.ts’:

    Then compile it

    Here is the output ‘greeter-class.js’

  5. Open it on your web browser
    Create a new file ‘greeter.html’

    Then open the html file on your browser. It’d show like this:

     

Ionic Framework

Installation On Ubuntu 14.04:
ref: https://ionicframework.com/getting-started/

  1. Install Ionic and Cordova

     
  2. Start an App

     
  3. Run your App (in a browser)

    Then you can see the result on your browser: http://localhost:8100/Here I use Google Chrome developer tool and use device Nexus 5 to see how it looks on the device.

Upgrade MySQL v. 5.5.54 to v.5.7.17

Ref: http://askubuntu.com/questions/750498/mysql-5-5-update-to-mysql-5-7

Here is what I’ve done:
DON’T FORGET TO BACKUP YOUR DATABASE FIRST! Pls read : http://myprojects.advchaweb.com/index.php/2017/03/18/script-to-backup-each-mysql-database-in-separate-files/

  1. Download MySQL Apt Repository from https://dev.mysql.com/downloads/repo/apt/. Currently the file name is ‘mysql-apt-config_0.8.3-1_all.deb’.
    SORRY, ONLY ADMIN CAN SHOW THIS!
  2. Install it:
  3. Then I’d got this screenSelect ‘MySQL Server (Currently selected: mysql-5.7)’ then ‘ok’.
    Then I’d got the second screen.Select ‘mysql-5.7’ then ‘ok’. Then if you get to the first screen again, just select ‘Ok’ and ‘ok’. The screen would be closed.
  4. Update my ubuntu system
  5. install the MySQL-server package, which now contains MySQL 5.7

     
  6. Now upgrade all mysql databases

     
  7. Now restart mysql server

     
  8. Check mysql server version

     
  9. Everything run well. At the phpmyadmin, I found the max upload size is 2M. I can modify this value in php.ini file (‘upload_max_filesize’).
    To find out where is the configuration file location for mysql, pls do like this:

    It’d show pretty long output, but I can found the line like this:

    SORRY, ONLY ADMIN CAN SHOW THIS!

Script To Backup & Restore Each MySQL Database In Separate Files

Ref: http://stackoverflow.com/questions/9497869/export-and-import-all-mysql-databases-at-one-time

Here I want to backup all my database (more than 100 databases) in separate files. I can backup all the database in one single file like this:

But I want to pick only some of the databases to be imported on the different MySQL version and left out the rest (some of the databases I don’t want to be imported). From the top link, I create a new bash file ‘backup_each_db.sh’. Here is the code:

Make sure the ‘USER’ and ‘PASSWORD’ values for your MySQL server are correct!.
Then modify the file permission:

Then run the script:

SORRY, ONLY ADMIN CAN SHOW THIS!

To restore all the databases from the sql files, please run like this:
teddy@teddy:/media/teddy/Data/MASTER/MySQL/20180124_db_backup$ for SQL in *.sql; do DB=${SQL/\.sql/}; echo importing $DB; mysql -uroot -pYOURPASSWORD < $SQL; done
ref: https://stackoverflow.com/questions/4708013/import-multiple-sql-dump-files-into-mysql-database-from-shell
SORRY, ONLY ADMIN CAN SHOW THIS!

Magento CE 2.1.5 (With Sample Data) Installation

I want to install Magento CE 2.1.5 (with sample data) in my machine Ubuntu 14.04 and PHP 7.0.
Ref: http://devdocs.magento.com/guides/v2.1/install-gde/prereq/zip_install.html

  1. Download the installation file from magento website. Here I downloaded the file with sample data in tar.bz2 format
  2. Extract the compressed file into your web root. I extract them in ‘magentoce215’ directory.
  3. Modify the files permission of ‘magentoce215’ directory. Here I used this command to make it easier for me to deal with the many security issues.
  4. Open it the first time on your browser: http://localhost/works/magentoce215. It’d setup magento for the first time.Click ‘Agree and Setup Magento’ button. It’d bring us to next step, the check install page. Here is the looksI want to make sure anything would be okay so I click ‘Start Readiness Check’ button. It’d check my php version and the php extension I have. It seemed I miss some extensions. Here is the result.I need to sort its out first. Install the missing php extensions.

    Then don’t forget to restart apache server

    Back to the browser then click ‘Try Again’ button at the top of the page. If everything okay, I’ll get this page.Then click ‘Next’ button. It’d bring you to the database setting page. That is my database setting. I already created a new database ‘magentoce215’ (utf8-general-ci) via phpmyadmin. Make sure the setting is correct! Then click ‘Next’ button. Oops! I have MySQL Server 5.5.54 that not supported by magento ce 2.1.5. It recommended to use MySQL 5.6.0 or later!SO I NEED TO UPGRADE THE MYSQL VERSION TO MYSQL 5.6.0 OR LATER? OK. I upgraded my MySQL server to 5.7 version. Now everything is fine. Then I got this screen about my local magento web configuration.magento url: http://localhost/works/magentoce215/
    magento admin url: http://localhost/works/magentoce215/admin_dgj2ff
    Then click ‘Next’. Then I modify my store setting like this:I checked ‘Select All’ for ‘Advanced Modules Configuration’ because I want to use the samples data. Then click ‘Next’. Then fill out the admin form.SORRY, ONLY ADMIN CAN SHOW THIS!
    Then click ‘Next’. This is the last page to install magento.Click ‘Install Now’ button. Wait until installation completed and you get the success page.SORRY, ONLY ADMIN CAN SHOW THIS!
    It’s recommended for security, remove write permissions from these directories: ‘/home/teddy/Documents/works/magentoce215/app/etc’.
    When ‘Launch Magento Admin’ button is clicked, it’d go to the admin page (http://localhost/works/magentoce215/admin_dgj2ff).Use your correct username and password to sign in. Here is the main admin page.Somehow I got an error like this:“One or more indexers are invalid. Make sure your Magento cron job is running.”. I think no need to worry right now.
    Here is the main page (http://localhost/works/magentoce215/) looks:
  5. Use VirtualHost
    I prefer to use virtualhost so I can open this magento with more pleasing url like http://magentoce215.dev. Here is the step:
    Create an apache file configuration:

    Here is the file content:

    Enable the site:

    Put the url in hosts file

    Here is the line:

    Restart apache server

    We need to clean and flush the cache and build and deploy the static files:

    Test it on your browser: http://magentoce215.dev
    If there is no change on the url and still use the url:  http://localhost/works/magentoce215, we need to update ‘base-url’ and ‘base-url-secure’ (ref: http://blog.netgloo.com/2016/05/13/magento-2-change-base-url-using-the-command-line/) like this:

    Test it again on your browser: http://magentoce215.dev and the admin url is http://magentoce215.dev/admin_dgj2ff
  6. The looks are different with the version 1.X. Please read https://www.atwix.com/magento-2/magento-1-vs-magento-2/, https://www.shopping-cart-migration.com/blog/42-magento/43708-the-key-differences-between-magento-1x-and-20, https://www.apptha.com/blog/magento-1-vs-magento-2-for-building-multi-vendor-marketplace/, etc.
  7. Create a setup for nginx and php7.0-fpm
    Create the config file

    Here is the content:

    Enable file config

    Register the host on my system

    Like this:

    CHECK THE NGINX SETTING AND RESTART IT:


    Set file permission and owner:

    Test: http://magentoce215.test –> IT’S WORKING

Questionair App with Loopback and Angular

Ref: https://github.com/hellsan631/questionair
http://stackoverflow.com/questions/32132324/n-level-hierarchy-array-angular-js
Installation:

  1. Clone the github: https://github.com/hellsan631/questionair.git

    It’d create a new dir ‘questionair’.
  2. Go to the dir then install the node packages

     
  3. Here I found no ‘lb-services.js’ in /client/app/js/ directory, so let create it

    The file ‘lb-services.js’ would be created in /client/app/js/ directory.
    Then don’t forget to hook the file in /client/app/index.html file

    NOTE: I missed this step before because I didn’t check ‘lb-services.js’ file then I got this error:

     
  4. Now let run the node server

    Then open it on our browser: http://localhost:3000/
    Nothing found there because this app still haven’t completed yet.
    The main controller ‘questionairController’ is in /client/app/index.html file. We need to call it in /client/app/js/app.js file like this

    The parameter ‘Question’ we found from /server/model-config.json file. It represent ‘Question’ table. Also look the table structure in /server/models/question.json. There are also the others tables like ‘Answer’, ‘Role’, etc.

Quiz App With AngularJS and Loopback

Ref: https://github.com/tomchal/Quiz4All
Installation:

  1. Go to your favorite directory and Clone the app
  2. Go to the ‘Quiz4All’ dir
  3. Install the node packages with npm
  4. Go to ‘client’ dir and use bower to install the packages

     
  5. Modify /server/datasources.json file. At ‘TchMySql’, match with your database setting. SORRY, ONLY ADMIN CAN SHOW THIS!
    If you haven’t created the database ‘Quiz4All’, please do it manually (via phpmyadmin?).
    NOTE: Loopback has a functionality to create the tables and fill the data/fixture into the tables when the app run for the first time (create ‘quiz’ table, create ‘user’ table, insert the default user data into the table, etc). It’s called ‘autoMigrate’ (https://loopback.io/doc/en/lb2/Creating-a-database-schema-from-models.html#auto-migrate). It’d run the scripts in /server/boot/ directory like ’02_create-appusers.js’, ’04_load_quizzes.js’, and so on. We know the scripts also load the other scripts to create the tables structure in /common/models/ directory. For example ‘quiz.json’ to create ‘quiz’ table, ‘answer.json’ to create ‘answer’ table, and so on. It’d also fill the tables from the fixture ‘quizDane.js’ in /server/data/ directory. In the above scripts ’02_create-appusers.js’ and ’04_load_quizzes.js’, there is a line responsible to do that (create table, fill the tables with the fixtures) when the app is starting. For example:

    The loopback link above says:
    “If there are existing tables in a database, running autoMigrate() will drop and re-create the tables: Therefore, data will be lost. To avoid this problem use auto-update(). Instead of dropping tables and recreating them, autoupdate() calculates the difference between the LoopBack model and the database table definition and alters the table accordingly. This way, the column data will be kept as long as the property is not deleted from the model.“.
    BECAUSE WE ONLY NEED/WANT TO CREATE THE TABLES FOR THE FIRST TIME, THEN MODIFY THE SCRIPTS TO ‘autoupdate()’ AFTER THAT OR WE’D LOST OUR DATA CHANGES AT THE NEXT START! –> UPDATE: I TRIED TO MODIFY ‘.automigrate()’ to ‘.autoupdate()’ AFTER THE NEXT START BUT IT DIDN’T WORK.

    SO WHAT IS WORK IS TO DELETE/RENAME THE FILES IN /server/boot/ DIRECTORY (I RENAMED THEM TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’)
  6. Go back to the root app then start the node server

    Here are the looks from http://localhost:3000/ or http://localhost:3000/#!/quizzes If any user is logged in (or you can also register and login. Here I registered with email: advcha@yahoo.com and password: admin), here is the lookNew quiz (http://localhost:3000/#!/newquiz)Here is the created quizNOTE: DON’T FORGET TO RENAME THE SCRIPTS IN /server/boot/ DIR TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’ RESPECTIVELY SO THE ABOVE DATA WOULD NOT BE DELETED IF THE NODE SERVER RUN AGAIN!
    Anyway this is very good. But I think it needs some improvements like edit the quizzes (if user is logged in), admin panel, user member (student or admin), etc.

Loopback Angular Example: Todo

Ref: https://github.com/strongloop/loopback-example-angular

Clone the example

Go to the dir

Use npm to install the dependencies

Run node server with ‘node .’. But I got this error:

SOLUTION: Sorry, I got this problem because I run another node sever in another and I forgot to turn it off. After making sure only one node server running, everything run well!

Open your browser then type http://localhost:3000/ or http://localhost:3000/index.html. Here is the result and try to add a few list.NEXT: HOW TO STORE THE LIST IN DB???

StrongLoop Looback And AngularJS First Tutorial

Ref: Loopback and AngularJs first tutorial.

Make sure you already installed node/nodejs and npm on your system

Then start installing Strongloop framework

Wait until it’s finished. Then I go to my default directory for node project.

Use ‘slc’ command to create a new project. My first node project name is ‘todo’. Type ‘slc loopback todo’:

Then, as instructed, go to ‘todo’ directory

then create a model

At the end if there is no more property needed, type ENTER twice!
The last, Run the node server:

Use your browser to see the action:
http://localhost:3000/

http://localhost:3000/explorer/:Lest try to create a new post. Click ‘POST’ from the above explorer or http://localhost:3000/explorer/#!/Todo/Todo_createThen click ‘Try out!’ button. Here is the response:I also got the error in my terminal.

Let the error from now because we haven’t setup a datasource to store our data yet. We’ll fix this later. UPDATE: READ SETUP OUR DATASOURCE! AT THE END OF THIS ARTICLE.
NOTE: I ALSO CREATED THE OTHER LOOPBACK APP ‘todo1’ WITH Loopback 3 AND app ‘notes’ (A project containing a basic working example, including a memory database)

SO THE DATASOURCE ALREADY SETUP AND I’D NOT GET THE ABOVE ERROR ANYMORE. I DID THE SAME THING FOR ‘todo2’ AND Loopback 2.x.

BUT WHAT I DONT LIKE IS IT’D CREATE ALSO ‘notes’ REST BESIDE ‘todo’ REST. SO I PREFER TO SETUP MY OWN DATASOURCE FROM SCRATCH. PLEASE READ AT THE END OF THIS ARTICLE TO DO THAT!
The REST backend is ready but we need to instruct the ExpressJs backend on how to serve our static content. In the server folder locate the middleware.json file and modify the ‘files’ object in it like show below.

From now on all the files in the client folder will be served as static content.

AngularJS
We need install angularjs and the dependencies in /client/lib directory. Create a new file .bowerrc in the todo project root then write this piece of code in it.

Then use ‘bower’ to install angular and the others.

NOTE: at the beginning, I failed to execute the above code with this error

I tried this solution: (ref:https://github.com/bower/bower/issues/2260)

Before I tried ‘sudo bower update -a’, ‘sudo bower init –allow-root’, etc but no avail.
Okay. Now the angular, etc already installed in /client/lib/ directory. Please check the directory to make sure.
To test the angularjs in action, create a new html file ‘index.html’ in /client/ directory. Here is the content:

Open it in your browser: http://localhost:3000/index.html
Here is the result:

we will use the Loopback AngularJS client to create a service, compatible with the angular-resource module, to access the backend API.
Create a ‘js’ folder into the client folder and then type the command ‘lb-ng server/server.js client/js/lb-services.js’ in the console.

Check ‘lb-services.js’ in /client/js/ dir.
Now create another file called ‘app.js’ into the same ‘js’ folder.

In the app.js file we injected the ‘lbServices’ and defined three function (add, delete and update) for the basic CRUD operations. As you can see we used all the method exposed by the service created with the ‘lb-ng’ tool to interact with the backend. Most of this methods return a $promise that we used as callback to modify the client model.

The last thing in order to make this tutorial complete is to rewrite the index.html to suite our  application needs. Open the index.html previously created and paste the code below into it.

IT IS NOT FINISHED YET! SETUP OUR DATASOURCE!
Now we want to connect it to a datasource, MySQL!. read: Connect your API to a data source. Here are the steps:
1. Use scaffolding ‘slc’ to define the datasource. datasource name is ‘mysqlID’

2. Check the setting created in /server/datasources.json
SORRY, ONLY ADMIN CAN SHOW THIS!
3. Create the database ‘loopback’ (utf8-general-ci) and table ‘Todo’ manually (via phpmyadmin). For the table ‘Todo’, Here are the fields:
id int, primary, auto increment,
title varchar(50),
isDone boolean
4. Don’t forget to hook the datasource ‘mysqlID’ in /server/model-config.json like this:

NOTE: TO ADD ANOTHER TABLE IN /server/model-config.json, PLS DO LIKE THIS (FOR EXAMPLE WE WANT TO ADD A TABLE ‘User’):

SOMETHING LIKE THIS. PLS LEARN THE OTHERS PARAMS LIKE ‘$promise’ and ‘$resolved’.
5. If the node server still run, stop it then run it again to refresh the changes. Open your browser: http://localhost:3000/index.html. Here is the looks