Juanas Smith Shared: javascript

Tampilkan postingan dengan label javascript. Tampilkan semua postingan

Selamat Malam Kali ini kita akan membuat MEAN (MongoDB Express.js Angular.Js Node.js) CRUD. Kami menggunakan Angular CLI versi terbaru yaitu versi 8, Untuk BackEnd nya kita menggunakan Node.js dan Express.js dan untuk databasenya kita menggunakan MongoDB

#Prequisites

-telah menginstall Node.js versi terbaru
-telah menginstall MongoDB
Langkah pertama Buatlah projek baru dengan nama angular8crud menggunakan angular cli dengan perintah

ng new angular8crud

kemudian masuk ke folder projek dan buka dengan code editor disini saya menggunakan visual studio code

cd angular8crud
code .

kemudian tambahkan css pada angular.json disni saya menggunakan bootstrap 4


"styles": [
   "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],

kemudian jalankan Angular server development dengan perintah

ng serve -o

nanti akan terbuka laman baru di browser dengan alamat http://localhost:4200/ menampilkan halaman awal angular

#1 Deskripsi Projek

Kita akan membuat Backend dengan Node.js dengan field ProductName, ProductDescription, dan ProductPrice

#2 Menggenerate Angular Component

ng g c product-add --skipTests=true
ng g c product-get --skipTests=true
ng g c product-edit --skipTests=true

sesuaikan kode app-routing.module.ts seperti berikut:

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductAddComponent } from './product-add/product-add.component';
import { ProductEditComponent } from './product-edit/product-edit.component';
import { ProductGetComponent } from './product-get/product-get.component';

const routes: Routes = [
  {
    path: 'product/create',
    component: ProductAddComponent
  },
  {
    path: 'edit/:id',
    component: ProductEditComponent
  },
  {
    path: 'products',
    component: ProductGetComponent
  }
];

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

#3 Membuat Navigasi

masukan kode berikut pada app.component.html

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a routerLink="product/create" class="nav-link" routerLinkActive="active">
          Create Product
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="products" class="nav-link" routerLinkActive="active">
          Products
        </a>
      </li> 
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

#4 Konfigurasi Angular Router Progres Indicator

kita akan menginstall library ng2-slim-loading-bar dan rxjs untuk menjembatani angular8 dengan package pihak-ketiga

npm install ng2-slim-loading-bar --save
npm install rxjs-compat --save

selanjutnya import SlimLoadingBarModule pada app.module.ts

// app.module.ts

import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';

imports: [
    ...
    SlimLoadingBarModule
],

lalu tambhkan library css pada style.css di folder src

@import "../node_modules/ng2-slim-loading-bar/style.css";

#5Menambahkan Router Event

sekarang tambahkan kode berikut ke app.compnent.ts

// app.component.ts

import { Component } from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
import { NavigationCancel,
        Event,
        NavigationEnd,
        NavigationError,
        NavigationStart,
        Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8tutorial';
  constructor(private loadingBar: SlimLoadingBarService, private router: Router) {
    this.router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this.loadingBar.start();
    }
    if (event instanceof NavigationEnd) {
      this.loadingBar.complete();
    }
    if (event instanceof NavigationCancel) {
      this.loadingBar.stop();
    }
    if (event instanceof NavigationError) {
      this.loadingBar.stop();
    }
  }
}

Selanjutnya tambahkan angular ng2-slim-loading-bar ke dalam app.componet.html

<!-- app.component.html -->

<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a routerLink="product/create" class="nav-link" routerLinkActive="active">
          Create Product
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="products" class="nav-link" routerLinkActive="active">
          Products
        </a>
      </li> 
    </ul>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

#6 Menambahkan Bootstrap form HTML

tambahkan kode html berikut pada product-add.component.html

<!-- product-add.component.html -->

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label class="col-md-4">Product Name</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Description </label>
        <textarea class="form-control" rows = 7 cols = "5"></textarea>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Price</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Create Product</button>
      </div>
    </form>
  </div>
</div>

#7 Membuat Angular Form Validation

Import ReactiveFormModule ke dalam file app.module.ts

// app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

imports: [
    ...
    ReactiveFormsModule
],

Selanjutnya pada file product-add.component.ts kita akan mengimport FormGroup, FormBuilder, Validators modules dari @angular/forms

// product-add.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';

@Component({
  selector: 'app-product-add',
  templateUrl: './product-add.component.html',
  styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {

  angForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      ProductName: ['', Validators.required ],
      ProductDescription: ['', Validators.required ],
      ProductPrice: ['', Validators.required ]
    });
  }

  ngOnInit() {
  }

}

sekarang tambahkan kode berikut pada product-add.component.html

<!-- product-add.component.html -->

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Product Name</label>
        <input type="text" class="form-control" 
          formControlName="ProductName" 
          #ProductName />
      </div>
      <div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductName'].errors.required">
          Product Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Description </label>
        <textarea class="form-control" rows = 7 cols = "5"
        formControlName="ProductDescription" 
        #ProductDescription></textarea>
      </div>
      <div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductDescription'].errors.required">
          Product Description is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Price</label>
        <input type="text" class="form-control" 
          formControlName="ProductPrice" 
          #ProductPrice
        />
      </div>
      <div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductPrice'].errors.required">
          Product Price is required.
        </div>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary"
        [disabled]="angForm.pristine || angForm.invalid" >
          Create Product
        </button>
      </div>
    </form>
  </div>
</div>

#8 Menambahkan dan mengkonfigurasi HttpClientModule

Import HttpClientModule kedalam file app.module.ts

// app.module.ts

import { HttpClientModule } from '@angular/common/http';

imports: [
   ...
    HttpClientModule
 ],

#9 Membuat TypeScript Model file

di dalam folder src -> app, buat file baru dengan nama Product.ts dan masukan kode berikut

// Product.ts

export default class Product {
  ProductName: string;
  ProductDescription: string;
  ProductPrice: number;
}

10 Membuat Angular Service file

fungsi utama service ini untuk menangani AJAX request dari backend server ke frontend

ng g service products --skipTests=true

sesuaikan file product.service.ts sebagai berikut:

// products.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  constructor() { }
}

sekarang import products.service.ts ke dalam app.module.ts

// app.module.ts

import { ProductsService } from './products.service';

providers: [ ProductsService ],

#11 Submit Form ke dalam Node Server

buat sebuah file products.service.ts dan masukan kode berikut:

// products.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  uri = 'http://localhost:4000/products';

  constructor(private http: HttpClient) { }

  addProduct(ProductName, ProductDescription, ProductPrice) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };
    console.log(obj);
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }
}

tambahkan Add Product Button di dalam product-add.component.html

<div class="form-group">
        <button (click) = "addProduct(ProductName.value, ProductDescription.value, ProductPrice.value)" type="submit" class="btn btn-primary"
        [disabled]="angForm.pristine || angForm.invalid" >
          Create Product
        </button>
</div>

tambahkan fungsi addProduct dalam file product-add.component.ts

// product-add.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-product-add',
  templateUrl: './product-add.component.html',
  styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {

  angForm: FormGroup;
  constructor(private fb: FormBuilder, private ps: ProductsService) {
    this.createForm();
  }

  createForm() {
    this.angForm = this.fb.group({
      ProductName: ['', Validators.required ],
      ProductDescription: ['', Validators.required ],
      ProductPrice: ['', Validators.required ]
    });
  }

  addProduct(ProductName, ProductDescription, ProductPrice) {
    this.ps.addProduct(ProductName, ProductDescription, ProductPrice);
  }

  ngOnInit() {
  }

}

#12 Membuat Backend API di Node.js

di dalam root folder buat folder baru dengan nama api kemudian buka terminal dan ketikan perintah

npm init -y

kemudian install beberapa modul

npm install express body-parser cors mongoose --save

kemudian kita install nodemon server dan kita modifikasi file server.js agar node.js server bisa restart otomatis

npm install nodemon --save-dev

kemudian di dalam folder api buat file baru dengan nama server.js

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose');

    const app = express();
    let port = process.env.PORT || 4000;

    const server = app.listen(function(){
        console.log('Listening on port ' + port);
    });

kemudian kita akan mengkoneksikan dengan database MongoDB tetapi sebelumnya harus menginstall dulu MongoDB nya dan menstart mongoDB server dengan perintah

mongod

//atau jika di windows
net start mongodb

sekarang kita sudah terhubung ke database, kemudian buat file baru dengan nama DB.js di dalam folder api dan masukan kode berikut:

// DB.js

module.exports = {
  DB: 'mongodb://localhost:27017/ng8crud'
};

kemudian ubah file server.js seperti di bawah agar aplikasi kita terhubung dengan node.js server

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./DB');

    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB, { useNewUrlParser: true }).then(
      () => {console.log('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );

    const app = express();
    app.use(bodyParser.json());
    app.use(cors());
    const port = process.env.PORT || 4000;

    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    });

simpan perubahan di server.js dan buka terminal untuk start server node.js dengan perintah

nodemon server

Sekarang kita mempunyai tiga server yang berjalan
1. Angular Development server untuk frontend
2. Nodemon server untuk Backend
3. MongoDB server untuk database

#13 Membuat Route dan Model file

didalam folder api buat dua buah folder baru dengan nama routes dan models
di dalam models folder buat sebuah file dengan nama Product.js

// Product.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Define collection and schema for Product
let Product = new Schema({
  ProductName: {
    type: String
  },
  ProductDescription: {
    type: String
  },
  ProductPrice: {
    type: Number
  }
},{
    collection: 'Product'
});

module.exports = mongoose.model('Product', Product);

didalam folder routes buat file baru dengan nama product.route.js dan masukan kode berikut:

// product.route.js

const express = require('express');
const app = express();
const productRoutes = express.Router();

// Require Product model in our routes module
let Product = require('../models/Product');

// Defined store route
productRoutes.route('/add').post(function (req, res) {
  let product = new Product(req.body);
  product.save()
    .then(product => {
      res.status(200).json({'Product': 'Product has been added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
productRoutes.route('/').get(function (req, res) {
  Product.find(function (err, products){
    if(err){
      console.log(err);
    }
    else {
      res.json(products);
    }
  });
});

// Defined edit route
productRoutes.route('/edit/:id').get(function (req, res) {
  let id = req.params.id;
  Product.findById(id, function (err, product){
      res.json(product);
  });
});

//  Defined update route
productRoutes.route('/update/:id').post(function (req, res) {
  Product.findById(req.params.id, function(err, product) {
    if (!product)
      res.status(404).send("Record not found");
    else {
      product.ProductName = req.body.ProductName;
      product.ProductDescription = req.body.ProductDescription;
      product.ProductPrice = req.body.ProductPrice;

      product.save().then(product => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("unable to update the database");
      });
    }
  });
});

// Defined delete | remove | destroy route
productRoutes.route('/delete/:id').get(function (req, res) {
    Product.findByIdAndRemove({_id: req.params.id}, function(err, product){
        if(err) res.json(err);
        else res.json('Successfully removed');
    });
});

module.exports = productRoutes;

tambhkan product route ke server.js

// server.js

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./DB');

   const productRoute = require('./routes/product.route');
    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB, { useNewUrlParser: true }).then(
      () => {console.log('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );

    const app = express();
    app.use(bodyParser.json());
    app.use(cors());
    app.use('/products', productRoute);
    const port = process.env.PORT || 4000;

    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    });

#14 Menyimpan data ke database MongoDB

Masukan isian form di menu create product lalu submit

kemudian buka mongoDB untuk melihat apakah data sudah tersimpan di database atau belum

#15 Menampilkan data pada Angular FrontEnd

masukan kode berikut pada product-get.component.html:

<!-- product-get.component.html -->

<table class="table table-hover">
  <thead>
  <tr>
      <td>Product Name</td>
      <td>Product Description</td>
      <td>Product Price</td>
      <td colspan="2">Actions</td>
  </tr>
  </thead>

  <tbody>
      <tr *ngFor="let product of products">
          <td>{{ product.ProductName }}</td>
          <td>{{ product.ProductDescription }}</td>
          <td>{{ product.ProductPrice }}</td>
          <td><a [routerLink]="['/edit', product._id]" class="btn btn-primary">Edit</a></td>
          <td><a [routerLink]="" class="btn btn-danger">Delete</a></td>
      </tr>
  </tbody>
</table>

di dalam products.service.ts masukan fungsi getProducts() untuk fetching data dari database ke Aplikasi Angular

// products.service.ts

getProducts() {
    return this
           .http
           .get(`${this.uri}`);
  }

Sekarang kita include products.service.ts file dan Product.ts file kedalam product-get.component.ts

// product-get.component.ts

import { Component, OnInit } from '@angular/core';
import Product from '../Product';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-product-get',
  templateUrl: './product-get.component.html',
  styleUrls: ['./product-get.component.css']
})
export class ProductGetComponent implements OnInit {

  products: Product[];
  constructor(private ps: ProductsService) { }

  ngOnInit() {
    this.ps
      .getProducts()
      .subscribe((data: Product[]) => {
        this.products = data;
    });
  }

}

cek di browser dengan membuka URL: http://localhost:4200/products

#16 Edit dan Update

tambahkan kode berikut ke dalam file product-edit.component.ts:

// product-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-product-edit',
  templateUrl: './product-edit.component.html',
  styleUrls: ['./product-edit.component.css']
})
export class ProductEditComponent implements OnInit {

  angForm: FormGroup;
  product: any = {};

  constructor(private route: ActivatedRoute, private router: Router, private ps: ProductsService, private fb: FormBuilder) {
      this.createForm();
 }

  createForm() {
    this.angForm = this.fb.group({
      ProductName: ['', Validators.required ],
      ProductDescription: ['', Validators.required ],
      ProductPrice: ['', Validators.required ]
    });
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
        this.ps.editProduct(params['id']).subscribe(res => {
          this.product = res;
      });
    });
  }
}

di dalam products.service.ts tambhkan fungsi editProduct

// products.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  uri = 'http://localhost:4000/products';

  constructor(private http: HttpClient) { }

  addProduct(ProductName, ProductDescription, ProductPrice) {
    console.log(ProductName, ProductDescription, ProductPrice);
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }

  getProducts() {
    return this
           .http
           .get(`${this.uri}`);
  }

  editProduct(id) {
    return this
            .http
            .get(`${this.uri}/edit/${id}`);
    }
}

kemudian kita buat html form untuk edit dengan nama product-edit.component.html

<!-- product-edit.component.html -->

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Product Name</label>
        <input type="text" class="form-control" 
          formControlName="ProductName" 
          #ProductName 
          [(ngModel)] = "product.ProductName"/>
      </div>
      <div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductName'].errors.required">
          Product Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Description </label>
        <textarea class="form-control" rows = 7 cols = "5"
        formControlName="ProductDescription" 
        #ProductDescription [(ngModel)] = "product.ProductDescription"></textarea>
      </div>
      <div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductDescription'].errors.required">
          Product Description is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Price</label>
        <input type="text" class="form-control" 
          formControlName="ProductPrice" 
          #ProductPrice
          [(ngModel)] = "product.ProductPrice"
        />
      </div>
      <div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductPrice'].errors.required">
          Product Price is required.
        </div>
      </div>
      <div class="form-group">
        <button (click) = "updateProduct(ProductName.value, ProductDescription.value, ProductPrice.value)" type="submit" class="btn btn-primary"
        [disabled]="angForm.invalid" >
          Update Product
        </button>
      </div>
    </form>
  </div>
</div>

sekarang kita tambhkan fungsi update di products.service.ts

// products.service.ts

updateProduct(ProductName, ProductDescription, ProductPrice, id) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };
    this
      .http
      .post(`${this.uri}/update/${id}`, obj)
      .subscribe(res => console.log('Done'));
}

Kemudian buat fungsi updateProduct di product-edit.component.ts

// product-edit.component.ts

updateProduct(ProductName, ProductDescription, ProductPrice, id) {
    this.route.params.subscribe(params => {
      this.ps.updateProduct(ProductName, ProductDescription, ProductPrice, params.id);
      this.router.navigate(['products']);
    });
  }

#17 Delete Data

Pertama-tama definisikan dulu click even pada tombol delete di product-get.component.html

<!-- product-get.component.html -->

<tbody>
      <tr *ngFor="let product of products">
          <td>{{ product.ProductName }}</td>
          <td>{{ product.ProductDescription }}</td>
          <td>{{ product.ProductPrice }}</td>
          <td><a [routerLink]="['/edit', product._id]" class="btn btn-primary">Edit</a></td>
          <td><a (click) = "deleteProduct(product._id)" class="btn btn-danger">Delete</a>
      </tr>
  </tbody>

Sekarang buat fungsi deleteProduct function di dalam file product-get.component.ts

// product-get.component.ts

deleteProduct(id) {
    this.ps.deleteProduct(id).subscribe(res => {
      this.products.splice(id, 1);
    });
}

Sekarang buat fungsi deleteProduct() di dalam file product.service.ts kita akan mengirimkan ID dengan AJAx request untuk menghapus data dari backend

// products.service.ts

deleteProduct(id) {
    return this
              .http
              .get(`${this.uri}/delete/${id}`);
  }

Akhirnya Selesai juga CRUD nya, jika kode diatas ada yang kurang jelas saya sudah menguploadnya di github,

Source Code

terimakasih telah mengikuti tutorial ini semoga bermanfaat jika ada yang kurang silkan ditanyakan pada kolom komentar, jika artikel ini bermanfaat silakan di share terimakasih.

Hallo Selamat Pagi, kali ini admin akan berbagi source code password strength checker, fitur-fitur nya bisa mengecek kekuatan password, menampilkan pesan kekuatan password, menyarankan penggunaan huruf kapital atau spesial karakter untuk memperkuat password, bisa melihat password dalam bentuk text, source code ini saya dapat dari vasplus programming blog dan sekarang saya akan membagikanya daripada saya simpan sendiri siapa tau ada yang membutuhkan, ini dia tampilanya:

Untuk link downloadnya dibawah

Download Disini

Semoga bermanfaat

Assalamualaikum. Wr. Wb, kali ini admin masih membahas tentang background, dan pada postingan kali ini admin mau berbagi tutorial membuat background titik particle yang atraktif dengan menggunakan particles.js, background ini sangat bagus karena memiliki animasi yang menarik dan interaktif ketika di hover atau di klik dengan mouse menampilkan feedback yang interaktif. sehingga backgroundnya tidak membosankan dan bisa dimainkan.

ok langsung saja untuk membuatnya masukan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Particle JS</title>
    <style media="screen">
    #particles-js{
      background: #0e0483;
      height: 100vh;
    }
    body {
      width: 100%;
      font: normal 16px Arial, Helvetica, sans-serif;
      color: #333;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #login {
      background: #fff;
      opacity: 0.9;
      padding: 2em;
      position: absolute;
      top: 200px;
      left: 150px;
    }
    #login h3 {
      color: #555555;
    }
    #login input[type="text"], #login input[type="password"] {
      padding: 7px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
    }
    #login input[type="submit"] {
      padding: 7px;
      background: rgb(5, 200, 118);
      color: #fff;
      border: none;
      opacity: 1;
      display: block;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="particles-js">
      <div id="login">
        <h3>Login</h3>
        <form action="#" method="post">
          <div>
            <label for="username">Username</label><br>
            <input type="text" name="" placeholder="Username">
          </div>
 
          <div>
            <label for="password">Password</label><br>
            <input type="password" name="" placeholder="Password">
          </div>
          <input type="checkbox" name=""> Ingat Saya
 
          <input type="submit" name="" value="Login">
        </form>
      </div>
    </div>
 
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      particlesJS.load('particles-js','particles.json', function() {
        console.log('particles.json loaded...');
      })
    </script>
  </body>
</html>

Kemudian buat lagi file dengan nama particles.json dengan isi sebagai berikut :

{
  "particles":{
    "number":{
      "value":300
    },
    "size":{
      "value":3
    }
  },
  "interactivity":{
    "events":{
      "onhover":{
        "enable":true,
        "mode": "repulse"
      }
    },
    "modes":{
      "repulse":{
        "distance":50,
        "duration":0.4
      }
    }
  }
}

Selanjutnya cek hasilnya di browser kesayangan anda, untuk demonya bisa kalian lihat pada tautan dibawah. sekianlah tutorial kali ini selamat mencoba salam koding otak pusing jari keriting. jangan lupa share tutorial ini ke teman anda semoga bermanfaat, Wasalamualaikum Wr. Wb.

Lihat Demo

Assalamualaikum Wr. Wb. Selamat Siang semuanya kali ini kita akan membuat VideoCall dengan menggunakan Api Bistri, dengan Api ini kita tidak usah bersusah-susah membuat engine videocall dari awal seperti postingan sebelumnya baca:cara mengakses kamera webcam dari web dengan javascript karena Api ini siap pakai. Untuk menggunakan Api ini anda harus registrasi dulu di api.developers.bistri.com/signup kemudian setelah terdaftar sekarang buat aplikasi baru, klik di menu applications->create new application

selanjunya masukan nama aplikasi anda lalu klik create new key

kunci aplikasi akan dikirimkan ke email anda, buka email anda untuk melihat appId & appKey

Selanjutnya setelah mendapatkan appId & appKey masukan pada script ini

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <title></title>
 <script type="text/javascript" src="https://api.bistri.com/bistri.conference.min.js"></script>

 <script type="text/javascript">
  /*
    JS library reference:
    http://developers.bistri.com/webrtc-sdk/js-library-reference
*/

var room;
var members;
var localStream;

// when Bistri API client is ready, function
// "onBistriConferenceReady" is invoked
onBistriConferenceReady = function () {

    // test if the browser is WebRTC compatible
    if ( !bc.isCompatible() ) {
        // if the browser is not compatible, display an alert
        alert( "your browser is not WebRTC compatible !" );
        // then stop the script execution
        return;
    }

    // initialize API client with application keys
    // if you don't have your own, you can get them at:
    // https://api.developers.bistri.com/login
    bc.init( {
        "appId": "Maukan AppId disini",
        "appKey": "Masukan App Key disini"
    } );
   
    /* Set events handler */

    // when local user is connected to the server
    bc.signaling.bind( "onConnected", function () {
        // show pane with id "pane_1"
        showPanel( "pane_1" );
    } );

    // when an error occured on the server side
    bc.signaling.bind( "onError", function ( error ) {
        // display an alert message
        alert( error.text + " (" + error.code + ")" );
    } );

    // when the user has joined a room
    bc.signaling.bind( "onJoinedRoom", function ( data ) {
        // set the current room name
        room = data.room;
        members = data.members;
        // ask the user to access to his webcam
        bc.startStream( "webcam-sd", function( stream ){
            // affect stream to "localStream" var
            localStream = stream;
            // when webcam access has been granted
            // show pane with id "pane_2"
            showPanel( "pane_2" );
            // insert the local webcam stream into div#video_container node
            bc.attachStream( stream, q( "#video_container" ), { mirror: true } );
            // then, for every single members present in the room ...
            for ( var i=0, max=members.length; i<max; i++ ) {
                // ... request a call
                bc.call( members[ i ].id, room, { "stream": stream } );
            }
        } );
    } );

    // when an error occurred while trying to join a room
    bc.signaling.bind( "onJoinRoomError", function ( error ) {
        // display an alert message
       alert( error.text + " (" + error.code + ")" );
    } );
   
    // when the local user has quitted the room
    bc.signaling.bind( "onQuittedRoom", function( room ) {
        // stop the local stream
        bc.stopStream( localStream, function(){
            // remove the stream from the page
            bc.detachStream( localStream );
            // show pane with id "pane_1"
            showPanel( "pane_1" );
        } );
    } );
   
    // when a new remote stream is received
    bc.streams.bind( "onStreamAdded", function ( remoteStream ) {
        // insert the new remote stream into div#video_container node
        bc.attachStream( remoteStream, q( "#video_container_2" ) );
    } );
   
    // when a remote stream has been stopped
    bc.streams.bind( "onStreamClosed", function ( stream ) {
        // remove the stream from the page
        bc.detachStream( stream );
    } );
   
    // when a local stream cannot be retrieved
    bc.streams.bind( "onStreamError", function( error ){ 
        switch( error.name ){
            case "PermissionDeniedError":
                alert( "Webcam access has not been allowed" );
                bc.quitRoom( room );
                break
            case "DevicesNotFoundError":
                if( confirm( "No webcam/mic found on this machine. Process call anyway ?" ) ){
                    // show pane with id "pane_2"
                    showPanel( "pane_2" );
                    for ( var i=0, max=members.length; i<max; i++ ) {
                        // ... request a call
                        bc.call( members[ i ].id, room );
                    }
                }
                else{
                    bc.quitRoom( room ); 
                }
                break
        }
    } );

    // bind function "joinConference" to button "Join Conference Room"
    q( "#join" ).addEventListener( "click", joinConference );
   
    // bind function "quitConference" to button "Quit Conference Room"
    q( "#quit" ).addEventListener( "click", quitConference );
   
    // open a new session on the server
    bc.connect();
}

// when button "Join Conference Room" has been clicked
function joinConference(){
    var roomToJoin = "vineet";
    // if "Conference Name" field is not empty ...
    if( roomToJoin ){
        // ... join the room
        bc.joinRoom( roomToJoin );
    }
    else{
        // otherwise, display an alert
        alert( "you must enter a room name !" )
    } 
}

// when button "Quit Conference Room" has been clicked
function quitConference(){
    // quit the current conference room
    bc.quitRoom( room );
}

function showPanel( id ){
    var panes = document.querySelectorAll( ".pane" );
    // for all nodes matching the query ".pane"
    for( var i=0, max=panes.length; i<max; i++ ){
        // hide all nodes except the one to show
        panes[ i ].style.display = panes[ i ].id == id ? "block" : "none";
    };
}

function q( query ){
    // return the DOM node matching the query
    return document.querySelector( query );
}
 </script>
 <style type="text/css">
   #video_container{
      
                margin: 20px;
                text-align: center;
                width:100px;
                height:50px;
                position:absolute;
                top:150px;
                left: 150px;
                z-index: 1;
   }
            #video_container_2{
               
                margin: 20px;
                text-align: center;
                width:800px;
                height:800px;
                position:absolute;
                top:250px;
                left: 200px;
            }
           
   video {
       width: 100%;
   }
            body{
            background-color:#E6E6FA;
            }         
            .container-fluid{
            background-image: linear-gradient(90deg, #4b6cb7, #182848);
            }


 </style>
</head>
<body>
    <div class="container-fluid" style="height:100px ">
            <div>
                <h1 class="col-sm-12 col-lg-9" style="top:25%"><strong><em>Video Call</strong></em></h1>
            </div>
            <div class="col-sm-12 col-lg-3" style="position:relative; top:25%; right:5%;"></div>
     </div>
    <div class="pane" id="pane_1" style="display: block">

        <br>
        <div class="container"><input type="button" value="Make Video Call" id="join" class="btn btn-lg btn-success"></div>
       
    </div>
   
    <div class=" pane" id="pane_2" style="display: none">
        <div id="video_container"></div>
        <div id="video_container_2"></div>
        <input type="button" value="Quit Conference Room" id="quit" class="btn btn-danger btn-default btn-block">
    </div>
</body>
</html>

Selanjutnya tes di browser, jika berhasil melakukan video call hasilnya seperti ini:

Lihat Demo

Ok sekianlah tutorial kali ini selamat mencoba, jika ada yang ditanyakan silakan kirimkan pertanyaan anda pada kolom komentar dibawah, jika artikel ini bermanfaat silakan di share

Langganan: Postingan ( Atom )

MEAN Stack CRUD Tutorial

#Prequisites

#1 Deskripsi Projek

#2 Menggenerate Angular Component

#3 Membuat Navigasi

#4 Konfigurasi Angular Router Progres Indicator

#5Menambahkan Router Event

#6 Menambahkan Bootstrap form HTML

#7 Membuat Angular Form Validation

#8 Menambahkan dan mengkonfigurasi HttpClientModule

#9 Membuat TypeScript Model file

10 Membuat Angular Service file

#11 Submit Form ke dalam Node Server

#12 Membuat Backend API di Node.js

#13 Membuat Route dan Model file

#14 Menyimpan data ke database MongoDB

#15 Menampilkan data pada Angular FrontEnd

#16 Edit dan Update

#17 Delete Data

Source Code Password Strength Checker

Membuat Background Particle dots yang atraktif dengan particles.js

Membuat VideoCall dengan Api Bistri

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

MEAN Stack CRUD Tutorial

#Prequisites

#1 Deskripsi Projek

#2 Menggenerate Angular Component

#3 Membuat Navigasi

#4 Konfigurasi Angular Router Progres Indicator

#5Menambahkan Router Event

#6 Menambahkan Bootstrap form HTML

#7 Membuat Angular Form Validation

#8 Menambahkan dan mengkonfigurasi HttpClientModule

#9 Membuat TypeScript Model file

10 Membuat Angular Service file

#11 Submit Form ke dalam Node Server

#12 Membuat Backend API di Node.js

#13 Membuat Route dan Model file

#14 Menyimpan data ke database MongoDB

#15 Menampilkan data pada Angular FrontEnd

#16 Edit dan Update

#17 Delete Data

Share story

Source Code Password Strength Checker

Share story

Membuat Background Particle dots yang atraktif dengan particles.js

Share story

Membuat VideoCall dengan Api Bistri

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive