MEAN Stack CRUD Tutorial

Juli 27, 2019 angular , express , javascript , mean , mongo , node 0 Comments

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.

0 komentar :

Membuat Halaman Login di Android dengan Firebase

Juli 01, 2019 android , firebase , login 0 Comments

Halo selamat siang pada kesempatan kali ini kita akan membuat halaman Login di Android dengan Firebase, untuk membuat login dengan Firebase sangat mudah kita tinggal memanfaatkan fungsi authentikasi dari firebase, fungsi authentikasi firebase ini sangat lengkap kita bisa login lewat facebook, google akun, twitter, email, no handphone dll, namun yang akan kita bahas pada tutorial kali ini yaitu login lewat Email dan Password.

Untuk membuat Login dengan Email/Password di Firebase Langkah pertama kita aktifkan dulu signin method nya di Firebase Console, caranya yaitu anda Login dulu ke Firebase kemudian pilih projek anda yang akan menggunakan authentikasi kemudian pada tab develop di samping kiri pilih authentication -> sign-in method -> pilih provider yang akan digunakan untuk melakukan authentikasi disini saya menggunakan provider Email/Password -> pada status pilih enable.

kemudian pada tab users tambahkan user yang akan digunakan untuk login nantinya karena pada tutorial kali ini kita tidak akan membuat register jadi usernya dimasukan secara manual dari firebase

Buka Projek Android anda yang akan ditambahkan authentikasi melalui firebase kemudian sambungkan projek anda dengan firebase lihat: cara menyambungkan projek androidke firebase

kemudian tambahkan despendency firebase auth di build.gradle

compile 'com.google.firebase:firebase-auth:11.6.2'

selanjutnya buat activity baru dan tambhkan dua buah editTeks untuk email dan password kemudian tambhkan sebuah button untuk submit, atur tampilanya agar terlihat lebih cantik seperti ini:

xml version="1.0" encoding="utf-8"?>

xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="10dp"

    android:background="@color/colorPrimary"

    tools:context="giviews.id.fireapp.LoginActivity">



    
        android:id="@+id/logoImage"

        android:layout_width="100dp"

        android:layout_height="130dp"

        android:layout_marginTop="20dp"

        android:layout_centerHorizontal="true"

        android:src="@drawable/logo"

        android:textAlignment="center" />



    
        android:id="@+id/txtLogo"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Firebase Login"

        android:gravity="center"

        android:textColor="#ffffff"

        android:layout_below="@+id/logoImage"

        android:textSize="25sp"/>



    
        android:id="@+id/email"

        android:background="@drawable/input_background"

        android:padding="15dp"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="Email ..."

        android:textColor="#807f7f"

        android:layout_below="@+id/txtLogo"

        android:layout_marginTop="60dp"

        android:inputType="textEmailAddress" />



    
        android:id="@+id/password"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="Password ..."

        android:background="@drawable/input_background"

        android:padding="15dp"

        android:textColor="#807f7f"

        android:layout_marginTop="20dp"

        android:layout_below="@+id/email"

        android:inputType="textPassword" />



        android:id="@+id/loginBtn"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/password"

        android:background="@drawable/btn_background"

        android:padding="15dp"

        android:textColor="@color/colorPrimary"

        android:layout_marginTop="20dp"

        android:textSize="20dp"

        android:text="Sign In"/>

untuk background Edit Teksnya buat file input_backgrounds.xml di drawable dan masukan kode berikut:

xml version="1.0" encoding="utf-8"?>

xmlns:android="http://schemas.android.com/apk/res/android">

    android:color="#fff" />

    android:radius="5dp" />

dan buat lagi file btn_background.xml di drawable untuk background button nya:

xml version="1.0" encoding="utf-8"?>

xmlns:android="http://schemas.android.com/apk/res/android">

    android:color="@color/colorAccent" />

    android:radius="5dp" />

kemudian untuk javanya masukan kode berikut:

package giviews.id.fireapp;



import android.content.Intent;

import android.support.annotation.NonNull;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.text.TextUtils;

import android.view.View;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;



import com.google.android.gms.tasks.OnCompleteListener;

import com.google.android.gms.tasks.Task;

import com.google.firebase.auth.AuthResult;

import com.google.firebase.auth.FirebaseAuth;



public class LoginActivity extends AppCompatActivity {



    private EditText mEmailField;

    private EditText mPasswordField;

    private Button mloginBtn;



    private FirebaseAuth mAuth;

    private FirebaseAuth.AuthStateListener mAuthListener;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_login);



        //Membuat FullScreen

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);



        mEmailField = (EditText) findViewById(R.id.email);

        mPasswordField = (EditText) findViewById(R.id.password);

        mloginBtn = (Button) findViewById(R.id.loginBtn);



        mAuth = FirebaseAuth.getInstance();



        mAuthListener = new FirebaseAuth.AuthStateListener() {

            @Override

            public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

                if (firebaseAuth.getCurrentUser() != null) {

                    startActivity(new Intent(LoginActivity.this, MainActivity.class) );

                }

            }

        };



        mloginBtn.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                startSignIn();

            }

        });

    }



    @Override

    protected void onStart() {

        super.onStart();



        mAuth.addAuthStateListener(mAuthListener);

    }



    private void startSignIn() {

        String email = mEmailField.getText().toString();

        String password = mPasswordField.getText().toString();



        if (TextUtils.isEmpty(email) | TextUtils.isEmpty(password)) {

            Toast.makeText(LoginActivity.this, "Fields are Empty", Toast.LENGTH_SHORT).show();

        } else {



            mAuth.signInWithEmailAndPassword(email, password).addOnCompleteListener(new OnCompleteListener() {

                @Override

                public void onComplete(@NonNull Task task) {



                    if (!task.isSuccessful()) {

                        Toast.makeText(LoginActivity.this, "Login Problem", Toast.LENGTH_SHORT).show();

                    }



                }

            });

        }

    }

}

Jika Login berhasil akan masuk ke MainActivity untuk isi main Activity bisa anda buat Tulisan Login Berhasil Pada TeksView, kemudian bisa anda tambahkan sebuah button untuk logout, kode logout sangat simple hanya mAuth.signOut();

Ok sekianlah tutorial kali ini pada postingan yang lain kita akan membuat cara membuat halaman registrasi dengan firebase, selamat mencoba semoga bermanfaat, jika ada yang ditanyakan silakan kirimkan pertanyaan anda pada kolom komentar dibawah

0 komentar :

Langganan: Postingan ( Atom )

MEAN Stack CRUD Tutorial

Juli 27, 2019 angular , express , javascript , mean , mongo , node 0 Comments

#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

0 komentar :

Membuat Halaman Login di Android dengan Firebase

Juli 01, 2019 android , firebase , login 0 Comments

0 komentar :

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

MEAN Stack CRUD Tutorial Juli 27, 2019 angular , express , javascript , mean , mongo , node 0 Comments

#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

0 komentar :

Membuat Halaman Login di Android dengan Firebase Juli 01, 2019 android , firebase , login 0 Comments

Share story

0 komentar :

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

MEAN Stack CRUD Tutorial

Juli 27, 2019 angular , express , javascript , mean , mongo , node 0 Comments

Membuat Halaman Login di Android dengan Firebase

Juli 01, 2019 android , firebase , login 0 Comments