Serba Serbi Node - Js
Serba Serbi Node - Js
Js
untuk membangun aplikasi penyimpanan file sederhana berbasis web yang lebih modern
menggunakan IndexedDB, Bootstrap, dan JavaScript. Saya juga akan menambahkan fitur
pencarian file. Untuk mendukung penyimpanan file besar dan skalabilitas, integrasi backend
sederhana dengan Node.js akan diusulkan di bagian akhir.
npm init -y
npm install express multer
Berikut adalah langkah-langkah untuk menginstal Node.js dan npm di berbagai platform, serta
menjalankan aplikasi web yang telah dibuat.
Langkah Umum
1. Unduh dan Instal Node.js
2. Verifikasi Instalasi
node -v
npm -v
Jika perintah ini menampilkan versi Node.js dan npm, instalasi berhasil.
1. Windows
1. Unduh Installer
Buka Node.js Download Page dan unduh versi LTS untuk stabilitas.
2. Jalankan Installer
Klik file installer yang diunduh ( .msi ), lalu ikuti langkah instalasi (klik Next).
Pastikan untuk mencentang opsi Automatically install necessary tools jika tersedia.
3. Verifikasi Instalasi
node -v
npm -v
Disarankan menggunakan editor seperti Visual Studio Code. Unduh dari situs resmi VS
Code.
2. macOS
1. Instal Homebrew (Opsional)
Jalankan:
Buka Node.js Download Page dan unduh versi LTS untuk macOS.
Jalankan file .pkg dan ikuti langkah instalasi.
4. Verifikasi Instalasi
node -v
npm -v
3. Linux (Ubuntu/Debian)
1. Perbarui Sistem
Jalankan:
3. Verifikasi Instalasi
Jalankan:
node -v
npm -v
3. Inisialisasi Proyek
npm init -y
4. Instal Dependensi
5. Jalankan Server
node server.js
6. Akses Aplikasi
Error tersebut terjadi karena versi Multer yang diminta ( ^1.4.5 ) tidak ditemukan di registry
npm. Hal ini mungkin disebabkan oleh versi yang ditentukan dalam package.json tidak
cocok dengan versi yang tersedia.
2. Pilih versi terbaru yang tersedia dari daftar tersebut, misalnya 1.4.4 .
2. Ubah bagian dependensi Multer agar sesuai dengan versi yang tersedia:
"dependencies": {
"express": "^4.18.2",
"multer": "^1.4.4"
}
3. Simpan file.
rm -rf node_modules
npm install
Langkah 4: Verifikasi
1. Pastikan instalasi berhasil dengan menjalankan:
2. Jika semua dependensi terinstal dengan benar, lanjutkan dengan menjalankan server:
npm start
Perbedaan antara versi installer dan versi standalone dari Node.js terutama terletak pada cara
pemasangan, konfigurasi, dan bagaimana mereka digunakan. Berikut penjelasan lengkapnya:
1. Node.js Versi Installer
Versi installer adalah paket instalasi lengkap yang dirancang untuk memandu pengguna melalui
proses pemasangan dengan antarmuka grafis atau perintah otomatis.
Ciri-Ciri
Dilengkapi Wizard: Memiliki proses pemasangan yang mudah melalui GUI (pada Windows
dan macOS).
Mengonfigurasi Secara Otomatis: Menambahkan Node.js ke PATH sistem, sehingga dapat
langsung digunakan dari terminal atau command prompt.
Dukungan Penuh: Menyediakan pembaruan otomatis (tergantung platform) dan mudah
digunakan oleh pemula.
Cara Pemasangan
1. Unduh Installer:
Kunjungi Node.js Download Page dan unduh versi installer untuk sistem operasi Anda.
Pilih versi LTS untuk stabilitas (direkomendasikan) atau Current untuk fitur terbaru.
2. Jalankan Installer:
Windows: Klik file .msi yang diunduh dan ikuti langkah-langkah instalasi.
macOS: Klik file .pkg yang diunduh, lalu ikuti panduan instalasi.
3. Verifikasi Instalasi:
Setelah instalasi selesai, buka terminal atau command prompt, dan jalankan:
node -v
npm -v
4. Penggunaan:
Node.js dan npm dapat langsung digunakan karena sudah ditambahkan ke PATH
sistem.
Ciri-Ciri
Cara Pemasangan
2. Ekstrak File:
Windows:
export PATH=/path/to/node/bin:$PATH
4. Verifikasi Instalasi:
Jalankan:
/path/to/node/bin/node -v
/path/to/node/bin/npm -v
5. Penggunaan:
/path/to/node/bin/node
Penggunaan Siap pakai setelah instalasi. Perlu jalur lengkap atau PATH manual.
Mendukung pembaruan
Pembaruan Harus diunduh dan diganti secara manual.
otomatis (opsional).
1. Windows
C:\node-standalone
2. Edit PATH:
C:\node-standalone
3. Simpan Perubahan:
Langkah 3: Verifikasi
1. Buka Command Prompt (CMD).
2. Linux (Ubuntu/Debian)
mkdir -p /opt/node-standalone
tar -xf node-vXX.X.X-linux-x64.tar.xz -C /opt/node-standalone
export PATH=/opt/node-standalone/node-vXX.X.X-linux-x64/bin:$PATH
source ~/.bashrc
Langkah 3: Verifikasi
1. Buka terminal baru.
2. Jalankan:
node -v
npm -v
3. macOS
mkdir -p /usr/local/node-standalone
tar -xf node-vXX.X.X-darwin-x64.tar.xz -C /usr/local/node-standalone
nano ~/.zshrc
export PATH=/usr/local/node-standalone/node-vXX.X.X-darwin-x64/bin:$PATH
source ~/.zshrc
Langkah 3: Verifikasi
1. Buka terminal baru.
2. Jalankan:
node -v
npm -v
Tips Tambahan
Jika PATH Tidak Terdeteksi: Pastikan Anda tidak salah mengetik direktori tempat Node.js
disimpan.
Jalankan:
echo $PATH
atau
echo %PATH%
Hapus Konfigurasi: Jika Anda ingin menghapus konfigurasi, hapus jalur Node.js dari
variabel PATH .
Dengan langkah-langkah di atas, Node.js versi standalone kini dapat digunakan dari terminal di
sistem Anda.
Untuk memasang dependensi seperti Express dan Multer secara offline, Anda perlu menyiapkan
paket terlebih dahulu di sistem yang memiliki akses internet. Berikut langkah-langkah
lengkapnya:
mkdir offline-deps
cd offline-deps
npm init -y
2. Unduh Dependensi
Gunakan perintah berikut untuk mengunduh semua paket ke dalam file .tgz :
Salin file .tgz ke media seperti USB atau simpan di tempat yang dapat diakses oleh
komputer offline.
npm init -y
Pastikan jalur /path/to diganti dengan lokasi file .tgz yang sesuai.
4. Verifikasi Instalasi
cat package.json
Anda juga bisa memeriksa folder node_modules untuk memastikan Express dan Multer
ada.
node server.js
Tips Tambahan
Paket Tambahan: Jika Anda membutuhkan lebih banyak dependensi, unduh semuanya di
sistem dengan akses internet, kemudian ulangi langkah di atas.
Mengelola Banyak Paket: Gunakan perintah npm ls untuk melihat semua paket dan versi
yang digunakan dalam proyek.
Dengan langkah ini, Anda dapat memasang dependensi seperti Express dan Multer secara
offline di komputer yang tidak memiliki akses internet. 😊
Berikut adalah solusi lengkap yang mencakup backend dan frontend untuk aplikasi
penyimpanan file sederhana, menggunakan Node.js untuk backend dan HTML/CSS/JS untuk
frontend. Aplikasi ini memungkinkan pengguna mengunggah file, menampilkan daftar file,
mengunduh file, dan menghapus file. Semua file disimpan di server.
Berikut adalah struktur direktori yang rapi untuk aplikasi web dengan fitur backend (Node.js)
dan frontend. Saya juga akan memberikan seluruh kode sesuai struktur direktori yang dibuat.
Struktur Direktori
modern-drive/
├── backend/
│ ├── server.js
│ ├── uploads/ # Folder untuk menyimpan file yang diunggah
│ ├── package.json # File konfigurasi proyek Node.js
├── frontend/
│ ├── index.html # Frontend utama
│ ├── styles.css # Gaya untuk tampilan
│ ├── app.js # Logika frontend
1. Backend
File: backend/package.json
{
"name": "modern-drive",
"version": "1.0.0",
"description": "A modern file manager web app",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.18.2",
"multer": "^1.4.5"
}
}
File: backend/server.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
2. Frontend
File: frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Drive</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
</head>
<body>
<div class="container">
<h1>Modern Drive</h1>
<form id="uploadForm">
<input type="file" id="fileInput" />
<button type="submit">Upload</button>
</form>
<h2>Files</h2>
<ul id="fileList"></ul>
</div>
</body>
</html>
File: frontend/styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1, h2 {
color: #333;
}
form {
display: flex;
align-items: center;
gap: 10px;
}
button {
background-color: #007BFF;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 5px 0;
padding: 10px;
background: #f1f1f1;
border-radius: 4px;
display: flex;
justify-content: space-between;
}
File: frontend/app.js
document.addEventListener('DOMContentLoaded', () => {
const uploadForm = document.getElementById('uploadForm');
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
// Upload file
uploadForm.addEventListener('submit', async (event) => {
event.preventDefault();
try {
const response = await fetch('/upload', {
method: 'POST',
body: formData,
});
const result = await response.json();
alert(result.message);
loadFiles();
} catch (error) {
console.error('Error uploading file:', error);
}
});
// Load files
async function loadFiles() {
try {
const response = await fetch('/files');
const files = await response.json();
fileList.innerHTML = files
.map(file => `<li><a href="/uploads/${file}" target="_blank">${file}</a>
</li>`)
.join('');
} catch (error) {
console.error('Error loading files:', error);
}
}
// Initial load
loadFiles();
});
Langkah untuk Menjalankan
1. Instal Dependensi Backend
cd backend
npm install
2. Jalankan Backend
Jalankan server:
npm start
3. Akses Aplikasi
1. node server.js
Untuk membuat Node.js berjalan otomatis saat perangkat dinyalakan, Anda dapat mengatur
server Node.js sebagai layanan atau menjalankan skrip startup tergantung pada sistem operasi
yang digunakan. Berikut panduan lengkap untuk Windows, Linux, dan macOS:
1. Windows
3. Konfigurasikan Task:
General Tab:
Berikan nama, misalnya "Node.js Server".
Pilih opsi Run whether user is logged on or not.
Triggers Tab:
Klik New dan pilih At startup.
Actions Tab:
Klik New, pilih Start a Program.
Masukkan path ke Node.js executable (misalnya, C:\Program
Files\nodejs\node.exe ) di kolom Program/script.
4. Simpan Task:
@echo off
cd C:\Users\RBNP\modern-drive\backend
node server.js
2. Tambahkan file batch ke folder Startup:
2. Linux
[Unit]
Description=Node.js Server
After=network.target
[Service]
ExecStart=/usr/bin/node /path/to/your/server.js
WorkingDirectory=/path/to/your/project
Restart=always
User=your-username
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
[Install]
WantedBy=multi-user.target
Catatan:
4. Aktifkan layanan:
crontab -e
3. macOS
Opsi 1: Launchd
1. Buat file plist:
nano ~/Library/LaunchAgents/com.node.server.plist
Catatan:
4. Aktifkan layanan:
Tips Tambahan
Debugging Startup Issues: Jika server tidak berjalan, pastikan path Node.js dan file server
benar.
Logging Output: Untuk mencatat log, tambahkan pengaturan log file pada konfigurasi,
seperti menggunakan file start-node.bat atau Systemd .
Testing Startup: Restart perangkat untuk memastikan konfigurasi berjalan otomatis.