Hello everybody!
Angular.js
In this post, I will share my experience on making a javascript using AngularJS. I use WEBSTORM IDE that is created by Jetbrain.
1. I use Angular Template that is provided by the IDE.
2. Put the file inside the XAMPP folder because you want to connect it to the database.
3. Try to run the simple code as a tester by using localhost/… (depends on the path of the folder).
4. Run the node server that is provided the service to GET, DELETE, INSERT the database.
5. Create a folder name app.
6. Insert the assets folder, css folder inside the app folder.
7. Create the index.html
1. index.html consist the static of the website that you don’t want to change.
8. Create a folder inside app folder name #anything and create html file and js file in one folder.
9. Put the view (html code) in the html file.
10. in js file, i put the service there.
11. after making the service, put the name of the js in the app.js outside those file. (you can change the first view in the redirectTo to another page. In the picture it will redirect to the login page.
12. run the program again by using localhost/…
13. and you are DONE 🙂
Node.js
for node.js, i use Intellij IDE.
- Download & Install Node.js
- Create your project folder
- Open terminal directed to the project folder and type :
- npm install –save sequelize (ORM for node js) : ORM -> object relational model, used to create or define tables in database
- npm install –save mysql (if you are using mysql)
- npm install –save express (install express framework for node js)
- Create folder models in the project directory
- Create your models
*use the word require to use the module installed in the project or the ones you export
- index.js is used to collect all information of the models inside the models folder so it should be left as it is. Or if it was not created after installing the sequelize module through npm, just copy as the following
- models can be referred to database tables.
Sequelize.define (‘table’s name’,{
/*fill your table’s variable and properties (Integer, String etc.) using sequlize format as follows*/ } , classMethods : {/*declare your function as you are writing in javascript. Use sequelize.query for normal querying, or use sequlize’s for faster access*/}
- Create folder routes in the project directory. This will define the routing of your project.
The 2 most common routing verbs used are get and post. Get is used when user would like to retrieve data as it is, it is mostly used when user have no parameters to give to the API while post is otherwise. Router.get(‘/’) indicates a user trying to retrieve access the ‘/’ url using get verb. If you want to add more function to the routing, you can add in the back of / such as “/view_all_user”, “/add_user:id” and “/add/admin:id”. res.send is a response that will be send by the API back to the browser. The req.body in the post section is the way to get the value from what the browser sends to the server in the post method. The req.params is to get the value from get method. The req.body.id means that it will retrieve the data inside an input sent by the browser with the name of id.
- Create routing (app.js) in the project directory
This is what the app.js looks like in intellij IDE, as it already give out the basic requirements in the express framework user might need. But what we need most is the body-parser, express framework, and the routings we have defined earlier.
In this case there are already many routings defined, and in this tutorial we only provide you with one to stimulate your creativity in creating a more efficient routings and database models.
Next, is connecting the front end to the API we have created. Don’t forget to run the node js server before running the API. Have a blessed coding day. But before that, we have not created the server have we?
- Creating the Server.
Create bin folder in the project directory, create a www file (no exstension or anything)
Fill as following. Change the port as need. The default port is 3000.
*Do create the models.sequelize.sync, it is used to test the connection to the database. If you set force : true, it will recreate the database everytime the server start.
Created By :
- Billy Sean – Back End Programmer
- Inggreat Sundjaja – Front End Programmer
- Ivan Patria – Front End Programmer
- Otto Daniel – Back End Programmer
