Source Image
What Will I Learn?
Learn to CHAT with Meteor Js & MongoDB
Requirements
Meteor Js & MongoDB
Difficulty
- Intermediate
Tutorial Contents
SECOND STEP: MAKE SIGN UP DISPLAY Write the following codes into the signup.html file
<template name="signup">
<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>Daftar</h3>
<p>Daftar dan chat teman anda</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<form role="form" method="post" class="login-form">
<div class="form-group">
<label class="sr-only"
for="form-email">Email</label>
<input type="text" name="form-email"
placeholder="Email..." class="form-username form-control" id="form-email">
</div>
<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>
<div class="form-group">
<label class="sr-only"
for="form-conf-password">Confirm Password</label>
<input type="password" name="form-conf-password"
placeholder="Confirm Password..." class="form-password form-control"
id="form-conf-password">
</div>
<button type="submit" class="btn">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
And write the following shapes into the signup.js file
Template.signup.events({
'submit form': function(e, tmpl){
e.preventDefault();
var emailVar = tmpl.find('#form-email').value;
var usernameVar = tmpl.find('#form-username').value;
var passwordVar = tmpl.find('#form-password').value;
var confPasswordVar = tmpl.find('#form-conf-password').value;
if(passwordVar != confPasswordVar || emailVar == 0 ||
usernameVar == 0 || passwordVar == 0 || confPasswordVar == 0) {
console.log("email : "+emailVar+"\nusername : "+usernameVar+"\npassword : "+passwordVar);
window.alert("Isikan data dengan benar");
}
Accounts.createUser({
email: emailVar,
username: usernameVar,
password: passwordVar
}, function (err) {
if(err){
window.alert("Error \n"+err);
console.log(err);
}
else{
console.log("success");
window.alert("Sukses"); Router.go('/home');
}
});
}
});
What to note:
Accounts.createUser is a method to add user to MongoDB database. This method is the default of the package
accounts-password.
THIRD STEP: MAKE DISPLAY HOME
Write the following casing into the home.html file
<template name="home">
{{#if currentUser}}
<br>
<div class="container bootstrap snippet">
<div class="row">
{{#if showCreateDialog}}
{{> createChatRoom}}
{{/if}}
{{#if showListDialog}}
{{> listChatrooms}}
{{/if}}
<div>
<div class="portlet portlet-default">
<div class="portlet-heading">
<div class="portlet-title">
<ul class="nav nav-pills" style="float: right">
<li role="presentation"><a href="#"
id="createChatRoom">Create Chatroom</a></li>
<li role="presentation"><a href="#"
id="listChatRoom">List Chatroom</a></li>
</ul>
<h2>Aplikasi Chatting</h2>
<h3>{{ currentUser.username }}</h3>
<a href="#" id="logout">Log Out</a>
</div>
<div class="clearfix"></div>
</div>
<div id="chat" class="panel-collapse collapse in">
<div>
<div id="always-scoll" class="portlet-body chat-widget"
style="overflow-y: auto; overflow-x: hidden; width: auto; height: 420px">
<div class="row">
<div class="col-lg-12">
<p class="text-center text-muted small"
style="float: right"></p>
</div>
</div>
{{#each chat}}
<div class="row">
<div class="col-lg-12">
<div class="media">
<div class="media-body">
<h4 class="media-heading">{{username}}
<span class="small
pull-right">{{formatDate timestamp}}</span>
</h4>
<p>
class="delete"><h6>Delete</h6></a>
{{text}}
</p>
{{#if canDelete username}}
<a href="#"
{{/if}}
</div>
</div>
</div>
</div>
<hr>
{{/each}}
</div>
</div>
<div class="portlet-footer">
<form role="form add-chat">
<div class="form-group">
<textarea class="form-control" placeholder="Enter message..." id="text-msg"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-default pull-right add-chat">Send</button>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{{else}}
{{ tolayout }}
{{/if}}
</template>
And write down the following shards into the home.js file
Template.home.events({
'click #logout':function (e) {
e.preventDefault(); Meteor.logout(); Router.go('/');
},
'click #createChatRoom':function (e) { e.preventDefault(); Session.set('showCreateDialog', true);
},
'click #listChatRoom':function (e) {
e.preventDefault();
Session.set('showListDialog', true);
},
'click .add-chat':function (e, tmpl) {
e.preventDefault();
var text = tmpl.find('#text-msg').value;
addChat(text);
var objDiv = document.getElementById("always-scoll");
objDiv.scrollTop = objDiv.scrollHeight;
tmpl.find('#text-msg').value = '';
},
'click .delete':function (e, tmpl) { e.preventDefault(); deleteChat(this._id);
}
});
Template.home.helpers({
tolayout:function () { Router.go('/');
},
showCreateDialog:function () {
return Session.get('showCreateDialog');
},
showListDialog:function () {
return Session.get('showListDialog');
},
chat:function () {
return Messages.find({
chatRoomId: { $exists : false }
}, { sort: { timestamp: 1 }});
},
formatDate: function(timestamp) {
var date = new Date(timestamp);
return date.toLocaleString();
},
canDelete:function (username) {
if(username == Meteor.user().username)
return true;
else
return false;
}
});
var addChat = function (text) {
var id = Messages.insert({
username: Meteor.user().username,
text: text,
timestamp: Date.now()
});
if(id==0){
alert("insert error");
}
};
var deleteChat = function (_id) {
Messages.remove(_id);
};
Template.home.onRendered(function () {
var objDiv = document.getElementById("always-scoll");
objDiv.scrollTop = objDiv.scrollHeight;
});
To note:
Writing {{#if currentUser}} is also a default of package accounts-password. Where the currentUsermerupakan checking whether this page is accessed by registered users.
When there is if the opener then there must be a closing even if there is somebody else.
Else and If the cover at the bottom. Where if user not yet registered then it will be called {{toLayout}}.
What is {{to Layout}}?
Meteor Js uses handlebar .js as templatingnya. So writing with {{}} is the writing of the handlebar. js. And pemrosesannya is in the javascript.
And we can look at the files home. There are js like this
We can see the image above, note that the above coding is a defining helpers for template files home. And there is
toLayout: function () {
.....
}
ToLayout above is a function or method that is called when we define the {{toLayout}} in file home. html. And we can see in the method or the helper he called Router. go ('/');
Router. go ('/') is the default function of iron: the router. Where he will redirect to the url by calling the root ('/').
And underneath there is a helper
showCreateDialog: function () {
.....
}
That's where he returns the value that is in session with the key showCreateDialog.
We can see a snippet of kodingan above there is a handlebar with writing
{{> listChatRooms}}.
What is {{> listChatRooms}}?
The writing is calling a template with the name listChatRooms. So kalo was replaced with the template it will be written as below.
< template name = "listChatRooms" >
.......
Helper method or by passing parameters
You can see the image at the top is calling helper with parameters with parameter canDelete one username
And my formatDate with timestamp parameter
How to catch these parameters in javascript???? See file home. There are js coding like this
See image above the parameters he capture sedemikan a way then do data processing.
The interaction with the Database
Note the file kodingan there are js home. as above. The above coding is one way of defining a function or method in javascript. AddChat method which he requires one parameter, namely the user inputted text parameter. Then do insert data into documents Messages that exist in the database.
And in method deleteChat also requires one parameter, that is, the id of the document that we want to delete Messages.
The Declaration we shall define Messages files collection. js lib directory below. Retrieving data from the Database
Note kodingan above. There are several handlebar. At the top we find themselves writing {{#each chat}}.
What is {{#each chat}}??
Handlebar means looping as much data in a chat method. We look at the js files home. about this chat kodingan.
Note kodingan above. Return data from the data chat method in the database. Can view the data in the document can be from Messages.
Notice again kodingan the two images above from kodingan the picture above. Writing {{username}}.
{{username}} is the value of an existing field in your document Messages. So also with the timestamp that is written like this {{timestamp my formatDate}}. That means the timestamp in my formatDate method parameters to set. Where timestamp is the value that is in the document Messages.
Curriculum
CHAT with Meteor Js & MongoDB #Part 1
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules, and is considered as plagiarism. Plagiarism is not allowed on Utopian, and posts that engage in plagiarism will be flagged and hidden forever.
Plagiarised from here.
You can contact us on Discord.
[utopian-moderator]