MUAZHAN
Home

Angular Node Js Mongodb Crud Github

10 min read Jun 28, 2024
Angular Node Js Mongodb Crud Github

Membangun Aplikasi CRUD dengan Angular, Node.js, MongoDB, dan GitHub

Artikel ini akan membahas langkah-langkah membangun aplikasi CRUD (Create, Read, Update, Delete) sederhana menggunakan Angular sebagai frontend, Node.js sebagai backend, MongoDB sebagai database, dan Git beserta GitHub untuk manajemen kode dan kolaborasi.

Persiapan

Sebelum memulai, pastikan Anda memiliki:

  • Node.js dan npm: Unduh dan instal Node.js dari . npm (Node Package Manager) akan terinstal bersama Node.js.
  • MongoDB: Instal MongoDB dari .
  • Editor Kode: Gunakan editor kode pilihan Anda, seperti Visual Studio Code, Atom, Sublime Text, atau lainnya.
  • Git: Instal Git dari untuk manajemen kode.
  • Akun GitHub: Buat akun GitHub di untuk menyimpan dan berbagi kode.

Langkah-langkah

1. Membuat Proyek Node.js

  • Buka terminal atau command prompt.
  • Buat folder proyek baru: mkdir my-crud-app
  • Masuk ke folder: cd my-crud-app
  • Inisialisasi proyek Node.js: npm init -y
  • Instal dependensi Node.js: npm install express mongoose body-parser cors

2. Membuat Model MongoDB

  • Buat folder models dalam folder proyek.
  • Buat file product.js di dalam folder models:
const mongoose = require('mongoose');

const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: String,
  price: { type: Number, required: true },
  imageUrl: String
});

module.exports = mongoose.model('Product', productSchema);
  • Kode ini mendefinisikan skema untuk koleksi Product dalam database MongoDB.

3. Membuat Controller Node.js

  • Buat folder controllers dalam folder proyek.
  • Buat file productController.js di dalam folder controllers:
const Product = require('../models/product');

exports.getProducts = (req, res, next) => {
  Product.find()
    .then(products => {
      res.status(200).json(products);
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({ error: err });
    });
};

exports.getProductById = (req, res, next) => {
  const productId = req.params.productId;
  Product.findById(productId)
    .then(product => {
      if (product) {
        res.status(200).json(product);
      } else {
        res.status(404).json({ message: 'Product not found' });
      }
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({ error: err });
    });
};

exports.createProduct = (req, res, next) => {
  const product = new Product({
    name: req.body.name,
    description: req.body.description,
    price: req.body.price,
    imageUrl: req.body.imageUrl
  });

  product.save()
    .then(createdProduct => {
      res.status(201).json(createdProduct);
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({ error: err });
    });
};

exports.updateProduct = (req, res, next) => {
  const productId = req.params.productId;
  const updateOps = {};
  for (const ops in req.body) {
    updateOps[ops] = req.body[ops];
  }

  Product.update({ _id: productId }, { $set: updateOps })
    .then(result => {
      res.status(200).json(result);
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({ error: err });
    });
};

exports.deleteProduct = (req, res, next) => {
  const productId = req.params.productId;
  Product.remove({ _id: productId })
    .then(result => {
      res.status(200).json(result);
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({ error: err });
    });
};
  • Kode ini mendefinisikan fungsi untuk setiap operasi CRUD: getProducts, getProductById, createProduct, updateProduct, dan deleteProduct.

4. Membuat Rute Node.js

  • Buat folder routes dalam folder proyek.
  • Buat file productRoutes.js di dalam folder routes:
const express = require('express');
const productController = require('../controllers/productController');

const router = express.Router();

router.get('/', productController.getProducts);
router.get('/:productId', productController.getProductById);
router.post('/', productController.createProduct);
router.patch('/:productId', productController.updateProduct);
router.delete('/:productId', productController.deleteProduct);

module.exports = router;
  • Kode ini mendefinisikan rute untuk setiap operasi CRUD dengan menggunakan fungsi yang telah didefinisikan pada productController.js.

5. Membuat File Server Node.js

  • Buat file app.js di folder proyek:
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const productRoutes = require('./routes/productRoutes');

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());

// Rute
app.use('/products', productRoutes);

// Koneksi MongoDB
mongoose.connect('mongodb://localhost:27017/my-crud-app', { useNewUrlParser: true })
  .then(() => {
    console.log('Terhubung ke MongoDB!');

    // Mulai server
    app.listen(3000, () => {
      console.log('Server berjalan di port 3000!');
    });
  })
  .catch(err => {
    console.log('Gagal terhubung ke MongoDB: ', err);
  });
  • Kode ini mengatur server Node.js, menghubungkan ke MongoDB, dan menjalankan rute yang telah didefinisikan.

6. Membuat Proyek Angular

  • Buka terminal atau command prompt.
  • Buat folder proyek Angular: mkdir my-crud-app-frontend
  • Masuk ke folder: cd my-crud-app-frontend
  • Buat proyek Angular: ng new my-crud-app-frontend
  • Masuk ke folder proyek Angular: cd my-crud-app-frontend

7. Menginstal Dependensi Angular

  • Instal dependensi untuk bekerja dengan HTTP: npm install @angular/common/http

8. Membuat Komponen Angular

  • Buat komponen untuk menampilkan daftar produk: ng generate component product-list
  • Buat komponen untuk menambah produk: ng generate component add-product
  • Buat komponen untuk detail produk: ng generate component product-detail
  • Buat komponen untuk mengedit produk: ng generate component edit-product

9. Menambahkan Kode Komponen

  • Buka file src/app/product-list/product-list.component.ts dan tambahkan kode berikut:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
  products: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.fetchProducts();
  }

  fetchProducts() {
    this.http.get('http://localhost:3000/products')
      .subscribe(data => {
        this.products = data;
      }, error => {
        console.log('Terjadi kesalahan: ', error);
      });
  }
}
  • Buka file src/app/product-list/product-list.component.html dan tambahkan kode berikut:

  
{{ product.name }}

  
{{ product.description }}

  
{{ product.price }}

  {{ product.name }}
  Detail
  • Ulangi langkah serupa untuk komponen add-product, product-detail, dan edit-product.

10. Menambahkan Routing

  • Buka file src/app/app-routing.module.ts dan tambahkan kode berikut:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';
import { AddProductComponent } from './add-product/add-product.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { EditProductComponent } from './edit-product/edit-product.component';

const routes: Routes = [
  { path: '', component: ProductListComponent },
  { path: 'product/new', component: AddProductComponent },
  { path: 'product/:productId', component: ProductDetailComponent },
  { path: 'product/:productId/edit', component: EditProductComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

11. Menjalankan Aplikasi

  • Jalankan server Node.js: node app.js
  • Jalankan aplikasi Angular: ng serve
  • Buka browser dan akses http://localhost:4200/.

12. Push Kode ke GitHub

  • Jalankan perintah git init di folder proyek Node.js dan Angular.
  • Tambahkan semua file: git add .
  • Commit perubahan: git commit -m "Initial commit"
  • Buat repository baru di GitHub.
  • Hubungkan repository lokal dengan repository GitHub: git remote add origin <url-repository-github>
  • Push kode ke GitHub: git push origin main

Kesimpulan

Artikel ini menunjukkan langkah-langkah dasar membangun aplikasi CRUD sederhana menggunakan Angular, Node.js, MongoDB, dan GitHub. Anda dapat mengembangkan aplikasi ini lebih lanjut dengan menambahkan fitur tambahan seperti autentikasi, pagination, dan pencarian.

Ingat, ini hanyalah contoh dasar. Untuk aplikasi yang lebih kompleks, Anda mungkin perlu mengimplementasikan arsitektur yang lebih canggih dan menggunakan berbagai library dan framework tambahan.

Node Js

Latest Posts

Featured Posts