Tutorials - Developing applications with Nooljs

Tutorial 2 - Introduction to working with Database in Nooljs: Getting data from SQL Server.

Nooljs is great framework to develop data driven application, which gets the data from relational databases or NoSql databases and displays in web page, with minimum coding. You don't need to worry about data retrieval process or how to transmitting data to client site. All these complex processes will be handled by NoolJs framework automatically.

The Server side of framework runs top of the nodejs and various database connectors for the databases Ms-sql server, Mongodb, Postgresql, and Mysql.

The communication layer is handle by socket-io and express-js.

The client side of framework is powered by Angular-js.

In this tutorial, we will show you how to get the data from SqlServer then display into webpage.

If you don't have SQL server installed in your computer, you can download SQLExpress from https://www.microsoft.com/en-us/download/details.aspx?id=52679 for free.

Create table Users and insert some records

 
create table users
(userid int  identity(1,1),
firstName varchar(100),
lastName varchar(100),
userName varchar(100)
)

insert into  users(firstName, lastName, userName)
values('Jone', 'King', 'johnKing')
insert into  users(firstName, lastName, userName)
values('Jane', 'Paul', 'janepaul')
insert into  users(firstName, lastName, userName)
values('Steve', 'Peter', 'stevepeter')
insert into  users(firstName, lastName, userName)
values('Ann', 'Mark', 'annmark')

select * from users

Now, we have setup table and data into Sqlserver database.

Install nooljs with npm
```
 npm install nooljs -g
```

Create new nooljs project by running command
```
 nooljs
```
It will ask project name. Enter the project name( example Tutorials2Sqldata). It will create new folder for the project and sample application.

Go the new project folder
```
  cd Tutorials2Sqldata
```

Update the npm dependency packages
```
 npm  update 
```

Go to the layout folder under this project, create new file called "users-template.html" . Then, open this file with your favorite editor(example notepad++) .

 
<nl-template id="user-template" nl-parent="main-content" >
   <h1>Users</h1>
   <table nl-db-data="select userName, firstName, lastName from Users" nl-db-model="users">
       <tr> <td>User Name </td><td>First Name</td><td>Last Name</td></tr>
       <tr ng-repeat="x in users">
           <td>{{x.userName}}</td><td>{{x.firstName}}</td><td>{{x.lastName}}</td>
       </tr>
   </table>
</nl-template>

Open The file index.html add "user-template as default nl-default-template.

 

 <html ng-app="myApp">
 <head>
 <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <link rel="stylesheet" href="http://code.ionicframework.com/1.3.1/css/ionic.min.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>
 <script src="https://cdn.socket.io/socket.io-1.3.7.js"> </script>
 <script  src="js/nooljsClient.js">
<script  src="js/client.js"> </script>

 </head>
 <body >
    <div id="top-content" nl-default-template="user-template">
     </div> 
 </body>
 </html>

Open the file config >> connection.json. Enter Sql server connection information under config section.

 
[
 {  "name":"sqlConn",
     "type":"sqlserver",
     "config":{"server": "localhost",
          "user": "admin",
          "password": "test123",
          "database": "userdb"
          }
   },
 .............

Open the file config >> config.json. Add sqlConn as default Connection.

 
 {"userid" : "UserId",
  "sessionTimeoutMinutes":60,
  "logout":"login",
 "defaultConnection": "sqlConn",
 "permission": {
  "connection":"jsonFile",
  "query" : "config/permision.json",
  "errorMessage": " You do not have permission to view this session."
 } }

Open the browser and go to localhost:8080 . You will see all the users in the screen.

For the full documentation go to the http://nooljs.github.io/nooljs/ or download from https://www.npmjs.com/package/nooljs

Tutorials - Developing applications with Nooljs

Monday, October 24, 2016

Tutorial 2 - Introduction to working with Database in Nooljs: Getting data from SQL Server.

No comments:

Post a Comment

Search This Blog