<center>![eaa9a1dad14dd6e710ba0a1a28fff206.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519381950/enztsvoewd0i9rvu5qmb.png)
<a href="https://s-media-cache-ak0.pinimg.com/originals/ea/a9/a1/eaa9a1dad14dd6e710ba0a1a28fff206.jpg">Source Image</a></center>

#### What Will I Learn?

Learn to CHAT with Meteor Js & MongoDB

#### Requirements

Meteor Js & MongoDB

#### Difficulty

- Intermediate


#### Tutorial Contents

![ffff.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519293988/sbdpyvq1pw3xtnoh8uaj.png)


#### What is a Meteor?

Meteor is a platform built on a Node .js to make the real-time web applications. Meteor work among the database your application and its user interface and ensure that the two are always aligned.

Because it is built on Node .js, Meteor good using JavaScript on the client side or the server. What's more, the Meteor can also download share code
airport environment.

The result of all this is a platform that is very simple but capable, which automatically handles the complexity-the complexity and difficulty of common web application development.

####  What is MongoDB?

MongoDB (from the word "humongous") is a document oriented database that is open source. MonggoDB is one of the noSQL database, i.e. a concept of non-relational data storage. The term noSQL was abbreviated from "Not Only SQL" database management systems that are different from relational database management systems in several ways.
Explanation:

<code>chatroom. html</code>: views from the chatroom page
<code>Chatroom. js</code>: Javascript handler to display html chatroom.

<code>createChatRoom. html</code>: display dialog pop up to addition of a chatroom <code>createChatRoom .js: </code>Javascrpit handler for html display

<code> CreateChatRoom.</code>

<code>home. html</code>: views from the home page

<code>home.</code>: Javascrpit js handler to display html home.

</code>layout .html</code>: Verify that the user is already logged in, the login if already redirects to the home display if it is not to display the sign in.

<code>listChatrooms. html</code>: display the dialog to pop up a list of existing chatroom

<code>listChatrooms .js</code>: Javascrpit handler for html display listChatrooms.

<code>signin. html</code>: views from the sign in page

<code>signin .js</code>: Javascrpit handler to display html signin.

<code>Signup. html</code>: views from the sign up page or register

<code>Signup .js</code>: Javascrpit handler to display html signups.

<code>main.CSS</code>: extra Css that we want to use

<code>main. html</code>: display or the main template from which we will chat application
create.

<code>main. js</code>: Javascript handler for all templates and appearance.

<code>router. js</code>: Javascript handles routing

<code>collection.Js </code>: Definsi documents existing in the database project we are in addition

In Meteor there are 3 ways to templating:

1. using the Angular Js
2. using the Js React
3. Use blaze

Templating by using the default templating is a blaze of
Meteor Js templating. and that we use is the use the blaze. Adding package-package required:
Previously we've added package twbs: bootstrap and
accounts-password. There are still some additional packages are needed. IE:

1.Meteor add Session

On Meteor under version 1.3 package session already installed in the Meteor Js. But for version 1.3 and above you should add them. The function of the package is to create a temporary session data. Data session will be set to default if the web we reload/refresh.

2.add iron Meteor: router

Iron: the router function for handling the routing from our website.

3.add aldeed: Meteor collection2

Package serves to create schemes and arrangement of documents (table in sql) database. Because basically there is no arrangement of nosql database alias its schema. So we can add it with lightly. But with the package aldeed: collection2 we can configure the fields anything that must exist in our scheme, and any field whose value should not be null and so on.

START TO CODE

FIRST STEP: CREATE A DISPLAY SIGN IN

Write down the following kodingan into file <code>signin.html </code>

``` language
<template name="signin">
<div  class="top-content">
<div  class="inner-bg">
<div  class="container">
<div  class="row">
<div  class="col-sm-8 col-sm-offset-2 text">
<h1><strong>Chat</strong>App</h1>
<div  class="description">
<p>
Aplikasi Chatting dengan  Meteor  Js dan MongoDB
</p>
</div>
</div>
</div>
<div  class="row">
<div  class="col-sm-6 col-sm-offset-3 form-box">
<div  class="form-top">
<div  class="form-top-left">
<h3>Masuk</h3>
<p>Masukkan username dan password anda</p>
</div>
<div  class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div  class="form-bottom">
<form  role="form" action="" method="post" 
class="login-form">
 <div  class="form-group">
<label class="sr-only" 
for="form-username">Username</label>
<input type="text" name="form-username"
placeholder="Username..." class="form-username form-control" id="form-username">
</div>
<div  class="form-group">
<label class="sr-only"
for="form-password">Password</label>
<input type="password" name="form-password"
placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<button type="submit" class="btn">Sign in!</button>
<h6>Don't have  account?</h6>
<a href="{{pathFor 'signup'}}">Create account</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
```

And write the following code into the file <code>signin.js  </code>

``` language
Template.signin.events({
'submit form':function (e, tmpl)  {
e.preventDefault();
var usernameVar = tmpl.find('#form-username').value; var passwordVar = tmpl.find('#form-password').value; Meteor.loginWithPassword(usernameVar, passwordVar, function (e) {
if(e){
alert("Login Error  \n" + e);
}else{ Router.go('/'); 
}
});
}
}); 

```

Next Part 2



<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@steemibal/chat-with-meteor-js-and-mongodb-part-1">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>