AdityaDees

Laravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node.js atau secara umum javascript. Laravel dan npm tidak saling bergantung, artinya Laravel dapat digunakan tanpa npm dan sebaliknya. Akan tetapi, Laravel memberikan kemudahan untuk para penggunanya agar dapat menggunakan javascript dan css untuk membangun UI. Salah satunya dengan menyediakan scaffolding untuk Vue, React dan Bootstrap melalui laravel/ui.

Jika Anda menggunakan laravel/ui untuk membangun UI, maka tentu saja Anda membutuhkan npm dan tentu saja npm membutuhkan node.js. Oleh karena itu, berikut ini adalah langkah-langkah untuk menginstall npm dan menambahkan package di Laravel.

0. Menginstall node.js

Seperti disebutkan di atas, bahwa npm memerlukan node.js dan bahkan jika Anda menginstall node.js, maka secara otomatis akan terinstall npm juga. Oleh karena itu langkah pertama adalah silahkan install node.js terlebih dahulu dengan cara mengunduh di sini : https://nodejs.org

Anda dapat melihat versi node.js dan npm yang terinstall dengan menggunkan perintah :

node --version

npm --version

1. Menginstall dan menambahkan package yang diperlukan

Untuk menginstall package npm yang sudah ditambahkan di dalam project laravel Anda, jalankan perintah : npm install. Dengan perintah ini, npm akan menginstall semua package beserta dependensinya dari file package.json.

Untuk menambahkan package yang Anda inginkan, silahkan masuk ke dalam folder project laravel Anda, kemudian jalankan perintah npm install nama_package . Contoh :

npm install vuetify

2. Compile Javascript dan CSS

Untuk mengcompile javascript dan css tersebut diatas, silahkan jalankan perintah :

npm run dev

npm run watch

npm run production

Sekian artikel tentang cara menambah dan menginstall package npm ke dalam Laravel. Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Jika anda menggunakan sistem operasi Linux atau Mac, mungkin anda pernah mengalami error npm error ./postinstall.js  - error storing binary to local file Error: EACCES: permission denied , padahal anda sudah menggunakan sudo atau root.

Berikut ini adalah contoh pesan error-nya

node ./postinstall.js
ngrok - downloading binary https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
ngrok - error storing binary to local file { Error: EACCES: permission denied, open '/usr/lib/node_modules/...'
errno: -13,
code: 'EACCES',
syscall: 'open',
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ngrok@2.2.24 postinstall: `node ./postinstall.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ngrok@2.2.24 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Error ini dikarenakan pada saat script postinstall dijalankan, npm menggunakan user nobody dan bukan user yang saat itu digunakan, dalam hal ini adalah root karena menggunakan sudo.

Solusi dari error ini ternyata sangat mudah, yaitu dengan menambahkan flag/argumen --unsafe-perm

Contoh, jika awalnya adalah :

sudo npm install -g @shoutem/cli

maka diubah menjadi :

sudo npm install -g @shoutem/cli --unsafe-perm 

Apakah fungsi dari flag/parameter --unsafe-perm ? Silahkan cek langsung pada tautan di bagian bawah.

unsafe-perm

Default: false if running as root, true otherwise

Type: Boolean

Set to true to suppress the UID/GID switching when running package scripts. If set explicitly to false, then installing as a non-root user will fail.

Selamat mencoba.

Sumber : https://docs.npmjs.com

Sudah lama tidak menulis blog, rasanya kangen juga ingin menulis sesuatu. Kebetulan disuruh oleh sensei (supervisor PhD) untuk belajar bahasa pemrograman baru untuk web programming, setelah baca-baca prosiding konferensi ACM CHI Conference on Human Factors in Computing Systems 2017, salah satu paper menuliskan tentang pengembangan prototipe aplikasi berbasis web untuk kolaborasi pemrograman web dan platform yang mereka gunakan untuk membangun aplikasi tersebut adalah platform berbasis server side Javascript NodeJS, Meteor. Akhirnya saya tertarik untuk mencoba membangun aplikasi dengan menggunakan Meteor dan sekalian mencoba mendokumentasikan pengembangan aplikasi dengan menulis artikel blog ini, dan siapa tahu bermanfaat untuk teman-teman yang membacanya, terutama yang sedang mencari, ehhhmmmm... bahasa pemrograman baru :D .

Sebelumnya kita mulai ada baiknya kita kenal dulu apa itu Meteor sebenarnya. Seperti saya kutip dari dokumentasi terakhir Meteor, Meteor adalah:

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications... Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it.

Konsep hampir serupa dengan data on the wire sebenarnya juga diterapkan pada beberapa framework Javascript seperti AngularJS dan ReactJS, dimana data dari server tidak dikirim dalam bentuk kode HTML, tetapi dalam bentuk data seperti JSON (JavaScript Object Notation) dan kemudian data dari server diformat ke dalam kode HTML yang diproses oleh library Javascript di sisi klien, membuat beban komunikasi server dan klien menjadi lebih ringan karena hanya berkomunikasi dalam format data ringan seperti JSON. Meteor pada intinya adalah sebuah platform fullstack yang intinya adalah NodeJS, beserta dengan beberapa komponennya, termasuk juga Meteor sudah menyediakan server MongoDB sehingga kita tidak perlu lagi install MongoDB sebagai server terpisah. (sisi negatifnya adalah ukuran download Meteor yang besar dan harus di-download melalui terminal/command line).

Untuk mengembangkan aplikasi web dengan menggunakan Meteor, ada beberapa hal yang sebaiknya kita kuasai terlebih dahulu yaitu: HTML5, CSS, Javascript, jQuery dan MongoDB. Jangan lupa juga menginstall text editor pemrograman favorit masing-masing untuk menuliskan kode-kode Javascript Meteor nanti.

Instalasi

Untuk menggunakan platform Meteor maka kita harus menginstallnya terlebih dahulu dengan menggunakan terminal/console/command prompt/powershell. Pada tulisan ini saya menggunakan aplikasi Terminal pada Operating System (OS) Apple macOS High Sierra dan kemudian menjalankan perintah:

curl https://install.meteor.com/ | sh

Bagi pengguna OS Microsoft Windows, ada perangkat lunak tambahan untuk menginstall Meteor yaitu Chocolatey. Chocolatey merupakan package manager/software installer untuk platform Windows. Cara instalasi Chocolatey silahkan ikuti buka tautan/link ke cara instalasi Chocolatey. Setelah Chocolatey terinstall maka langkah berikutnya adalah menjalankan perintah berikut pada command prompt/powershell Windows:

choco install meteor

Persiapan Kerangka Struktur Aplikasi

Setelah Meteor sudah terinstall, maka kita bisa mulai untuk membuat aplikasi web Javascript pertama kita. Untuk contoh aplikasi web yang akan kita kembangkan adalah aplikasi sederhana untuk membuat agenda kegiatan. Pada Terminal jalankan perintah berikut ini secara berurutan:

mkdir meteorapp
cd meteorapp
meteor create agendakegiatan
cd agendakegiatan

Saat ini kita sedang berada di dalam folder/direktori agendakegiatan dan kita akan melihat bahwa pada folder ini Meteor sudah membuat kerangka dasar aplikasi web kita (skeleton), yang terdiri atas folder client, server, node_modules, dan file package-lock.json dan package.json. Kita akan banyak bermain di dalam folder client, server dan satu buah folder ini tempat kita akan banyak menyimpan berbagai kode Javascript yaitu imports. Folder client adalah folder yang mengandung semua file terkait dengan apa yang akan ditampilkan kepada browser, sedangkan folder server mengandung semua file terkait dengan pemrosesan di sisi server.


Karena folder imports belum ada, maka kita perlu membuatnya terlebih dahulu, sekaligus kita membuat folder-folder lain di bawahnya dengan menjalankan perintah-perintah berikut:

mkdir imports
cd imports
mkdir ui
mkdir api

Setelah kita selesai membuat folder-folder baru tersebut, maka selanjutnya kita juga perlu membuat beberapa file tambahan yang akan kita isikan dengan kode Javascript dan kode HTML. Jalankan perintah-perintah berikut ini untuk membuat file-file tersebut:

touch ui/body.html
touch ui/body.js
touch api/agenda.js

Coding

Saatnya kita mulai menuliskan kode-kode! Buka text editor favorit masing-masing dan bukalah file-file berikut ini (relatif terhadap direktori agendakegiatan :

1. client/main.html


2. client/main.js


3. client/main.css


4. imports/ui/body.html


5. imports/ui/body.js


6. imports/api/agenda.js


7. server/main.js

client/main.html

<head>
  <title>Aplikasi Agenda Kegiatan</title>
  <meta name="author" content="Aditya Dees"/>
  <meta name="keywords" content="Meteor, Javascript, Agenda, Aplikasi Web"/>
</head>

client/main.js

import '../imports/ui/body.js';

imports/ui/body.html

<body>
  <div class="ui container">
      <h2 class="ui block header">Agenda Kegiatan</h2>

      <div class="ui container segment">
          <form class="ui form form-kegiatan">
            <div class="three fields">
              <div class="field">
                <label>Nama Kegiatan</label>
                <input type="text" name="nama_kegiatan" class="form-text form-control" placeholder="Nama kegiatan" />
              </div>
              <div class="field">
                <label>Tanggal Kegiatan</label>
                <input type="text" name="tgl_kegiatan" class="form-text form-control" placeholder="Tanggal kegiatan" />
              </div>
              <div class="field">
                <label>Lokasi Kegiatan</label>
                <input type="text" name="lokasi_kegiatan" class="form-text form-control" placeholder="Lokasi kegiatan" />
              </div>
            </div>
            <input type="hidden" name="_id" value="" />
          </form>

          <table class="ui celled table">
            <thead>
              <tr>
                <th class="ten wide">Nama Kegiatan</th>
                <th>Tanggal</th>
                <th>Lokasi</th>
                <th class="one wide"> </th>
              </tr>
            </thead>
            <tbody>
            {{#each agenda}}
              {{> data}}
            {{/each}}
            </tbody>
          </table>

      </div>
  </div>
</body>

<template name="data">
  <tr>
    <td><a class="edit-button" data-id="{{_id}}" href="#">{{kegiatan}}</a></td> 
    <td>{{tgl}}</td>
    <td>{{lokasi}}</td>
    <td><button class="ui icon button delete"><i class="trash icon"></i></button></td>
  </tr>
</template>

imports/ui/body.js

import { Template } from 'meteor/templating';
import { Agenda } from '../api/agenda.js';
import './body.html';

Template.body.helpers({
  agenda() {
    return Agenda.find({}, { sort: { tgl: -1 } });    
  }
});

Template.body.events({
  'keypress .form-text'(event) {
    // event.preventDefault();
    // console.log(event);
    const enterKey = event.key == "Enter";
    // console.log(enterKey);
    if (enterKey) {
      // ambil objek form
      const form = $('.form-kegiatan');
      
      // ambil nilai form
      const kegiatan = form.find('[name="nama_kegiatan"]');
      const tgl = form.find('[name="tgl_kegiatan"]');
      const lokasi = form.find('[name="lokasi_kegiatan"]');
      const _id = form.find('[name="_id"]');
      
      if (!kegiatan.val() || !tgl.val() || !lokasi.val()) {
        return false;
      }

      // console.log(form);
      
      if (_id.val().trim() != '') {
        // masukkan ke database
        Agenda.update(
          {_id: _id.val()},
          { kegiatan: kegiatan.val(),
          tgl: tgl.val(),
          lokasi: lokasi.val(),
        });
      } else {
        // masukkan ke database
        Agenda.insert({
          kegiatan: kegiatan.val(),
          tgl: tgl.val(),
          lokasi: lokasi.val(),
          tgl_input: new Date(),
        });
      }

      // reset nilai form
      kegiatan.val('');
      tgl.val('');
      lokasi.val('');
      _id.val('');
    }
  }
});

Template.data.events({
  'click .delete'(event) {
    const confirmDelete = confirm('Yakin akan menghapus data ini?');
    if (confirmDelete) {
      Agenda.remove(this._id);
    }
  },
  'click .edit-button'(event) {
    const updateData = Agenda.findOne({_id: this._id});
    // console.log(updateData);
    const form = $('.form-kegiatan');
    const kegiatan = form.find('[name="nama_kegiatan"]');
    const tgl = form.find('[name="tgl_kegiatan"]');
    const lokasi = form.find('[name="lokasi_kegiatan"]');
    const _id = form.find('[name="_id"]');
    kegiatan.val(updateData.kegiatan);
    tgl.val(updateData.tgl);
    lokasi.val(updateData.lokasi);
    _id.val(this._id);
  }
});

imports/api/agenda.js

import { Mongo } from 'meteor/mongo';
export const Agenda = new Mongo.Collection('agenda');

server/main.js

import '../imports/api/agenda.js';

client/main.css

body {
  margin: 0; padding: 0;
  top: 0; bottom: 0;
  left: 0; right: 0;
  position: absolute;
  min-height: 100%;
  font-family: Helvetica, sans-serif, Arial;
  background: #777;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 600px;
  background: #ccc;
  height: 100%;
}

.header {
  text-align: center;
  background: linear-gradient(180deg, #555, #999);
  margin: 0;
  color: #fff;
  padding: 20px;
}

.field {
  clear: both;
}

.field label {
  padding: 5px;
  display: block;
  float: left;
  width: 24%;
}

.field input {
  padding: 5px;
  display: block;
  float: right;
  width: 72%;
  font-size: 1.1em;
  border: 0;
  border-bottom: 1px solid #ccc;
}

.table {
  width: 100%;
  border-spacing: 0;
}

.celled thead tr th {
  padding: 10px;
  border-bottom: 1px solid #333;
  background: linear-gradient(180deg, #555, #999);
  margin: 0;
  color: #fff;
}

.celled tbody tr td {
  margin: 0;
  padding: 9px;
  border-bottom: 1px solid #777;
}

.button {
  display: inline-block;
  width: 100%;
  font-size: 1.2em;
}

Ujicoba Aplikasi

Setelah semua kode sudah kita tuliskan maka berikutnya adalah mengujicoba apakah aplikasi sudah berjalan dengan baik. Untuk menjalankan aplikasi dengan Meteor, buka kembali Terminal/console, masuk ke dalam folder aplikasi agendakegiatan dan kemudian jalankan perintah:

meteor

Selanjutnya buka browser favorit masing-masing dan arahkan ke alamat URL: http://localhost:3000, dan kita akan melihat aplikasi web kita sudah berjalan dengan tampilan seperti ini:

Coba isikan data pada kotak input isian nama kegiatan, tanggal kegiatan dan lokasi kegiatan dan kemudian tekan Enter untuk melihat menyimpan data isian kita. Kita lihat bahwa setelah kita menekan tombol Enter, maka data yang kita masukkan langsung muncul pada tabel di bawah form isian tanpa terjadi reload halaman! Dan yang lebih menarik bahwa apabila kita menjalankan dua browser yang berbeda bersamaan, ketika kita mengupdate data pada satu browser, maka otomatis tampilan pada browser lain akan otomatis terupdate tanpa harus me-refresh/reload browser tersebut! Hal ini terjadi karena aplikasi yang dibangun dengan Meteor telah menerapkan konsep push dari server ke client. Silahkan lihat pada video di bawah ini untuk melihat demo push data pada Meteor:

Bagaimana? menarik bukan membangun aplikasi dengan menggunakan Meteor? Mengenai penjelasan lebih detail mengenai masing-masing kode, akan saya coba tulis pada artikel berikutnya, selamat mencoba dan semoga bermanfaat!

Jika anda menggunakan node dan npm, dan mengalami error dengan kode 4048 pada saat melakukan npm install, berikut ini adalah cara mudah untuk mengatasi error tersebut.

Di bawah ini adalah contoh pesan error yang muncul :

npm ERR! path ...\node_modules\fsevents\node_modules\ansi-regex\package.json
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink '...fsevents\node_modules\ansi-regex\package.json'
npm ERR! at Error (native)
npm ERR! { Error: EPERM: operation not permitted, unlink '...\fsevents\node_modules\ansi-regex\package.json'
npm ERR! at Error (native)
npm ERR! stack: 'Error: EPERM: operation not permitted, unlink \'...\\node_modules\\fsevents\\node_modules\\ansi-regex\\package.json\'\n at Error (native)'

npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: '...\\node_modules\\fsevents\\node_modex\\package.json' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! ...\npm-cache\_logs\2017-09-08T09_53_36_343Z-debug

Berikut ini adalah beberapa alternatif solusi yang dapat anda coba.

1. Pastikan anda menutup semua editor yang mungkin saat itu sedang membuka file package.json. Lalu ulangi lagi perintah : npm install
2. Hapus cache dengan perintah : npm cache clean
3. Jika anda menggunakan npm versi 5.4, maka untuk saat ini silahkan downgrade ke versi 5.3
   npn install -g npm@5.3
4. Jika semua cara di atas tidak bisa, maka silahkan coba cara terakhir yaitu dengan meng-uninstall lalu menginstall lagi nodejs

Sekian dan selamat mencoba, semoga berhasil.