A Single-page application example building with Laravel and Angularjs. Project will have two parts, back-end and front-end run separately. It handles a management user. Some technicals applied to this project.
- Restful webservice
- Token-based authentication
- Validation
- Paging
- Middleware
- Exception handle
- Elixir
- PHP artisan
- NPM
- Composer
- Responsive
- Resolve Cross-origin resource sharing
- HTML5 local storage
============ TODO:
- Make Sign Up feature.
- Write unit test for back-end API
- Vagrant 1.7.4 or later
- Virtual Box 5.0 or later
- Laravel/Homestead 2.1.6 or later
-
Pull source code from github.
$ git clone git@github.com:Mulodo-PHP-Laravel-Training/tuan-vu-sample-project-1.git -
Configuring homestead. To prepare homestead runner, we will have to add some configurations for folders, sites, databases as below to Homestead.yaml file
- folders: - map: /your/path/tuan-vu-sample-project-1/backend to: /home/vagrant/Code/backend type: "nfs" - map: /your/path/tuan-vu-sample-project-1/frontend to: /home/vagrant/Code/frontend type: "nfs" - sites: - map: api.mulodo.dev to: /home/vagrant/Code/backend/public - map: cms.mulodo.dev to: /home/vagrant/Code/frontend databases: - mulodo -
Configuring DNS for local run. In hosts file of your computer. Add
192.168.10.10 api.mulodo.dev 192.168.10.10 cms.mulodo.dev -
Preparing database. We need to prepare default database for the first time use. At backend folder, run:
$ php artisan migrate $ php artisan db:seed -
Set the application key for back-end. At backend folder, run:
$ php artisan key:generate -
Start homestead for using
$ homestead up
We have a default login user for testing. You didn't build sign up function yet.
Email : test@mulodo.com
Password: mulodotest
The project have an UI for client using. You can access via:
http://cms.mulodo.dev
You also can directly access back-end API via Restful webservice as below:
Method | URI | Parameters | Token | Action |
--------------------------------------------------------------------------------------------------------------------------------------
POST | http://api.mulodo.dev/authentication/signin | email, password | None | Api authentication |
GET | http://api.mulodo.dev/user | None | Yes | User list receipt |
GET | http://api.mulodo.dev/user/{id} | id | Yes | User detail receipt |
POST | http://api.mulodo.dev/user | firstName, lastName, email, password | Yes | User registration |
PUT | http://api.mulodo.dev/user/{id} | id | Yes | User updating |
DELETE | http://api.mulodo.dev/user/{id} | id | Yes | User remove |
Pass Token to API
Method: Header
Attribute: Authorization
Token format: Bearer {token}
For example:
- Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOjEsImlzcyI6Imh0dHA6XC9cL2FwaS5tdWxvZG8uZGV2XC9hdXRoZW50aWNhdGlv blwvc2lnbmluIiwiaWF0IjoiMTQ0MjIwNDE5OSIsImV4cCI6IjE0NDIyMDc3OTkiLCJuYmYiOiIxNDQyMjA0MTk5IiwianRpIjoiZjkxYTUyOTM4OTMyNmRlMzdiMzNkYjIyNDU0NmZjNjkifQ .buLjSa10KI2Nk0kfzhCYJmaa3GrpYqZiXYeFK5iDq-8
Special thanks to Mrs. Tien, Mr. Tam, Mr. Tuan Nguyen and Mr. Kondo have supported me to complete this project.
In addition, the project used packages as below:
Back-end
jwt-auth: https://github.com/tymondesigns/jwt-auth
laravel-cors: https://github.com/barryvdh/laravel-cors
Front-end
ngRoute: https://docs.angularjs.org/api/ngRoute
angularUtils.directives.dirPagination: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
ngMessages: https://docs.angularjs.org/api/ngMessages
ngStorage: https://github.com/gsklee/ngStorage
ngResource: https://docs.angularjs.org/api/ngResource
I also reference the articles as below:
- http://laravel.com/docs/5.1
- https://docs.angularjs.org/api
- http://campus.codeschool.com/courses/shaping-up-with-angular-js/
- http://www.toptal.com/web/cookie-free-authentication-with-json-web-tokens-an-example-in-laravel-and-angularjs
Tuan Vu vu.tuan@mulodo.com