Meteor, Cara Membuat Template dan Collections pada Framework Meteor

Meteor, Cara Membuat Template dan Collections pada Framework Meteor

Template Meteor menggunakan tiga tingkat atas tag. Dua yang pertama adalah head dan body. Tag ini melakukan pekerjaan yang sama seperti HTML biasa. Tag ketiga adalah template. Ini adalah tempat di mana kita terhubung HTML ke JavaScript.
Postingan Terkait : Mengenal Bahasa Pemograman HTML

Simple Template

Contoh berikut menunjukkan bagaimana ini bekerja. kita akan membuat template dengan nama atribut = "myParagraph". Tag template kita akan dibuat di bawah dari elemen body, tetapi kita perlu memasukkannya sebelum ia dituliskan pada layar. Kita dapat melakukannya dengan menggunakan sintak {{> myParagraph}}. Dalam template kita juga menggunakan kurung kurawal ganda ({{teks}}). Ini adalah bahasa template meteor yang disebut Spacebars.

Dalam file JavaScript kami kita menetapkan method Template.myParagraph.helpers({}) yang akan menjadi jembatan kita untuk menghubungkan dengan template kita. Kita hanya menggunakan teks helper dalam contoh ini.
Postingan Terkait : Pengertian dan manfaat JavaScript dalam membangun WEB

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <h1>Header</h1>
   {{> myParagraph}}
</body>
 
<template name = "myParagraph">
   <p>{{text}}</p>
</template>

meteorApp.js

if (Meteor.isClient) {
   // This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}
Setelah kita menyimpan perubahan, kita akan mendapatkan output sebagai berikut
Meteor, Cara Membuat Template dan Collections pada Framework Meteor

Blok Template

Dalam contoh ini kita gunakan {{#each paragraf}} untuk paragraf array dan template name = "paragraf" untuk setiap nilai.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>
 
<template name = "paragraph">
   <p>{{text}}</p>
</template>
Kita perlu membuat paragraf helper. Ini akan menjadi sebuah array dengan lima nilai teks.

meteorApp.js

if (Meteor.isClient) {
   // This code only runs on the client
   Template.body.helpers({
      paragraphs: [
         { text: "This is paragraph 1..." },
         { text: "This is paragraph 2..." },
         { text: "This is paragraph 3..." },
         { text: "This is paragraph 4..." },
         { text: "This is paragraph 5..." }
      ]
   });
}
Sekarang kita dapat melihat lima paragraf pada layar.

Membuat Collection Meteor

Pada Bagian ini kita akan menunjukkan kepada Anda bagaimana menggunakan mongoDB collections.

Kita dapat membuat collectio baru dengan − kode berikut

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

Menambahkan Data

Setelah collection dibuat, kita dapat menambahkan atau memasukkan data dengan menggunakan method insert.

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

Menemukan Data

Kita dapat menggunakan method  find untuk mencari data dalam collection.

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
console.log(findCollection);
Konsol akan menunjukkan data kita yang dimasukkan sebelumnya.
Meteor, Cara Membuat Template dan Collections pada Framework Meteor

Kita bisa mendapatkan hasil yang sama dengan menambahkan parameter pencarian.

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find({key1: "value 1..."}).fetch();
console.log(findCollection);

Memperbarui / Update Data

Langkah berikutnya adalah untuk memperbarui data. Setelah kita menciptakan koleksi dan dimasukkan data baru, kita dapat menggunakan method  update.

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;

var updatedData = {
   key1: "updated value 1...",
   key2: "updated value 2...",
   key3: "updated value 3...",
   key4: "updated value 4...",
   key5: "updated value 5..."
}

MyCollection.update(myId, updatedData);

var findUpdatedCollection = MyCollection.find().fetch();
console.log(findUpdatedCollection);
Konsol akan menunjukkan bahwa collection telah diperbarui.

Menghapus / Delete Data

Menghapus data dari ollection dapat dilakukan dengan menggunakan method remove. Kami menetapkan id dalam contoh ini sebagai parameter untuk menghapus data tertentu.

meteorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;

MyCollection.remove(myId);

var findDeletedCollection = MyCollection.find().fetch();
console.log(findDeletedCollection);
Konsol akan menampilkan array kosong.
Meteor, Cara Membuat Template dan Collections pada Framework Meteor

Jika kita ingin menghapus semuanya dari koleksi, kita dapat menggunakan method yang sama tetapi bukannya id yang akan kita gunakan {} objek kosong. Kita perlu untuk melakukan hal ini pada server untuk alasan keamanan.

meteorApp.js

if (Meteor.isServer) {

   MyCollection = new Mongo.Collection('myCollection');

   var myData = {
      key1: "value 1...",
      key2: "value 2...",
      key3: "value 3...",
      key4: "value 4...",
      key5: "value 5..."
   }

   MyCollection.insert(myData);
   MyCollection.remove({});
 
   var findDeletedCollection = MyCollection.find().fetch();
   console.log(findDeletedCollection);
}
Kita juga bisa menghapus data dengan menggunakan parameter lain. Seperti pada contoh sebelumnya, Meteor akan memaksa kita melakukan ini dari server.

meteorApp.js

if (Meteor.isServer) {

   MyCollection = new Mongo.Collection('myCollection');

   var myData = {
      key1: "value 1...",
      key2: "value 2...",
      key3: "value 3...",
      key4: "value 4...",
      key5: "value 5..."
   }

   MyCollection.insert(myData);
   MyCollection.remove({key1: "value 1..."});
 
   var findDeletedCollection = MyCollection.find().fetch();
   console.log(findDeletedCollection);
}
Anda dapat melihat bahwa data dihapus dalam command window.
Meteor, Cara Membuat Template dan Collections pada Framework Meteor


Postingan Terkait Cara Membuat Template dan Collections pada Framework Meteor :

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments