Membuat Animasi Teks Masking dengan Adobe Flash

Selamat Malam, Kali ini Saya mau sharing pengalaman Saya membuat animasi masking, Waktu itu saya mengikuti LSP Desain Multimedia dan Saya mendapatkan soal membuat animasi masking dan animasi Shape tween, tutorial ini cocok bagi pemula yang baru belajar adobe flash ataupun bagi anda yang sedang ujian seperti Saya.

Tampilan Animasi Teks Masking


Langkah pertama buka Adobe Flash, kemudian pilih new -> actionscript 2.0 >> untuk ukuranya width 550 x height 400 pixel dan framerate 24 fps


jika anda baru menginstall adobe flash dan pertama kali membukanya atur agar tampilanya seperti berikut, caranya klik pada menubar windows -> workspace -> classic

Kemudian Buat Teks yang ingin di animasikan


Selanjutnya duplikat layer dan ganti warna text di layer yang di duplikat, lalu insert keyframe bebas, disini saya insert keyframe pada frame ke 60



kemudian buat lagi layer baru, pindahkan layer baru ke tengah diantara layer1 dan layer duplikat, kemudian di layer baru itu buat objek kotak atau lingkaran dan beri warna


kemudian gerakan dengan cara insert keyframe di frame ke 60 kemudian di frame ke 60 pada layer object lingkaran di saya pada layer2 pindahkan objek lingkaran ke ujung kanan atau ujung text, seperti pada gambar di bawah


kemudian klik kanan antara frame ke satu sampai 60 lalu pilih create classic tween

lalu pada layer paling atas klik kanan pilih mask

Hasil akhirnya seperti di bawah, untuk merubah background pilih warna di stage ada di bagian properties sebelah kanan


Untuk menjalankanya tekan tombol ctrl + enter, untuk publish ke swf pilih file -> publish, untuk merubah ke format gif pilih export -> export movie -> pilih format Animated Gif



Terimakasih telah mengikuti tutorial ini, jika ada yang ingin ditanyakan silakan tulis pada kolom komentar dibawah, jika artikel ini bermanfaat silakan share ke teman anda

Membuat CRUD dengan Laravel 5.8

Hallo Selamat malam, kali ini kita akan belajar Laravel. Ok langsung aja kita install dulu laravelnya kita akan menginstall laravel terbaru versi 5.8 tapi sebelumnya kita harus upgrade dulu PHP kita ke versi 7 karena PHP 5.6 hanya bisa menginstall laravel sampai versi 5.4, setelah menginstall PHP versi 7 selanjutnya kita install composer, anda bisa mendownloadnya di website composer https://getcomposer.org/. Selanjutnya download laravel ke dalam folder project kita dengan perintah:
composer create-project --prefer-dist laravel/laravel laravel58crud
sekarang masuk ke dalam folder project dan buka text editor
cd laravel58crud
code .

#1 Configurasi database


untuk databasenya kita akan menggunakan MySQL. sekarang kita buat databasenya dengan nama laravel58crud kemudian buka file .env dan atur konfigurasi database seperti berikut
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel58crud
DB_USERNAME=root
DB_PASSWORD=root
sekarang project kita sudah terhubung dengan database MySQL Selanjutnya kita akan melakukan migrasi database, buka terminal dan ketikan perintah
php artisan migrate
Kita akan membuat Program penyimpanan Nama buku yang bisa melakukan operasi CRUD create, read, update, delete

#2 Membuat Model dan Migrasi file

php artisan make:model Book -m
akan terbentuk file Book.php dan file migrasi create_books_table.php Sekarang buka folder databse->migrations->create_books_table.php sesuaikan seperti berikut:
public function up()
{
     Schema::create('books', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('book_name');
        $table->string('isbn_no');
        $table->integer('book_price');
        $table->timestamps();
     });
}
sekarang lakukan migrasi dan akan terbentuk table baru di database
php artisan migrate
Sekarang, tambahkan fillable property dalam file Book.php.
// Book.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    protected $fillable = ['book_name', 'isbn_no', 'book_price'];
}

#3 Membuat route dan Controller

buat BookController dengan perintah
php artisan make:controller BookController --resource
didalam routes >> web.php tambahkan kode berikut:
<?php

// BookController.php

Route::get('/', function () {
    return view('welcome');
});

Route::resource('books', 'BookController');
kita bisa melihat list route aplikasi kita dengan perintah
php artisan route:list
Ok Sekarang buka BookController.php kita akan melihat semua fungsi yang di deklarasikan disini
<?php

// BookController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

#4 Membuat view

di dalam folder resources >> views buat empat views:
1. create.blade.php
2. edit.blade.php
3. index.blade.php
4. layout.blade.php
kemudian buka file layout.blade.php dan masukan kode berikut:
<!-- layout.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Laravel 5.8 CRUD Example Tutorial</title>
  <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class="container">
    @yield('content')
  </div>
  <script src="{{ asset('js/app.js') }}" type="text/js"></script>
</body>
</html>
file ini yang akan menjadi template aplikasi kita selanjutnya buka file create.blade.php dan tambahkan kode:
<!-- create.blade.php -->

@extends('layout')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Add Book
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('books.store') }}">
          <div class="form-group">
              @csrf
              <label for="name">Book Name:</label>
              <input type="text" class="form-control" name="book_name"/>
          </div>
          <div class="form-group">
              <label for="price">Book ISBN Number :</label>
              <input type="text" class="form-control" name="isbn_no"/>
          </div>
          <div class="form-group">
              <label for="quantity">Book Price :</label>
              <input type="text" class="form-control" name="book_price"/>
          </div>
          <button type="submit" class="btn btn-primary">Create Book</button>
      </form>
  </div>
</div>
@endsection
Ok, sekarang kita buka file BookController.php, dan pada bagian create function, kita akan me-return sebuah view ke create.blade.php
// BookController.php

public function create()
{
   return view('create');
}
Simpan perubahan file dan start Laravel development server dengan perintah:
php artisan serve
buka http://localhost:8000/books/create di browser dan kalian akan menemukan halaman berikut:

#5 Menambahkan Validation rules dan menyimpan data

Pada tahapan ini kita akan menggunakan laravel validation Langkah pertama buka BookController.php dan import Book model
// BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Book;
sekarang tambahkan kode berikut pada bagian store() di BookController.php
// BookController.php

public function store(Request $request)
{
    $validatedData = $request->validate([
         'book_name' => 'required|max:255',
         'isbn_no' => 'required|alpha_num',
         'book_price' => 'required|numeric',
     ]);
     $book = Book::create($validatedData);

     return redirect('/books')->with('success', 'Book is successfully saved');
}
sekarang kita lihat di browser pada halaman create jika kita submit form kosong akan mengeluarkan pesan error seperti berikut:
Sekarang jika kita mengisi form dengan benar dan kita submit akan tersimpan ke database

#6 Menampilkan data

Sekarang kita akan menulis di function index() di BookController, kita akan me-return view yang akan menampilkan data dari database
// BookController.php

public function index()
{
     $books = Book::all();

     return view('index', compact('books'));
}
Ok, sekarang kita buka file index.blade.php dan masukan kode berikut:
<!-- index.blade.php -->

@extends('layout')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="uper">
  @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div><br />
  @endif
  <table class="table table-striped">
    <thead>
        <tr>
          <td>ID</td>
          <td>Book Name</td>
          <td>ISBN Number</td>
          <td>Book Price</td>
          <td colspan="2">Action</td>
        </tr>
    </thead>
    <tbody>
        @foreach($books as $book)
        <tr>
            <td>{{$book->id}}</td>
            <td>{{$book->book_name}}</td>
            <td>{{$book->isbn_no}}</td>
            <td>{{$book->book_price}}</td>
            <td><a href="{{ route('books.edit',$book->id)}}" class="btn btn-primary">Edit</a></td>
            <td>
                <form action="{{ route('books.destroy', $book->id)}}" method="post">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-danger" type="submit">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
<div>
@endsection

#7 Membuat Operasi Edit dan Update

Pertama kita rubah kode pada fungsi edit di BookController.php
// BookController.php

public function edit($id)
{
    $book = Book::findOrFail($id);

    return view('edit', compact('book'));
}
lalu buka file edit.blade.php dan tambahkan kode berikut:
<!-- edit.blade.php -->

@extends('layout')

@section('content')
<style>
  .uper {
    margin-top: 40px;
  }
</style>
<div class="card uper">
  <div class="card-header">
    Edit Book
  </div>
  <div class="card-body">
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
        </ul>
      </div><br />
    @endif
      <form method="post" action="{{ route('books.update', $book->id) }}">
          <div class="form-group">
              @csrf
              @method('PATCH')
              <label for="name">Book Name:</label>
              <input type="text" class="form-control" name="book_name" value="{{$book->book_name}}"/>
          </div>
          <div class="form-group">
              <label for="price">Book ISBN Number :</label>
              <input type="text" class="form-control" name="isbn_no" value="{{$book->isbn_no}}"/>
          </div>
          <div class="form-group">
              <label for="quantity">Book Price :</label>
              <input type="text" class="form-control" name="book_price" value="{{$book->book_price}}"/>
          </div>
          <button type="submit" class="btn btn-primary">Update Book</button>
      </form>
  </div>
</div>
@endsection
tampilanya seperi berikut:
Sekarang tambahkan kode di bagian update() pada controller
// BookController.php

public function update(Request $request, $id)
    {
        $validatedData = $request->validate([
            'book_name' => 'required|max:255',
            'isbn_no' => 'required|alpha_num',
            'book_price' => 'required|numeric',
        ]);
        Book::whereId($id)->update($validatedData);

        return redirect('/books')->with('success', 'Book is successfully updated');
    }
Sekarang kamu dapat mengedit dan mengupdate data ke dalam databse

#8 Delete Function

Buka Controller dan pada function destroy tambahkan kode
// BookController.php

public function destroy($id)
    {
        $book = Book::findOrFail($id);
        $book->delete();

        return redirect('/books')->with('success', 'Book is successfully deleted');
    }
Sekarang coba hapus buku di browser jika muncul pesan you have successfully delete the book maka fungsi delete berhasil kode lengkap BookController.php akan jadi seperti berikut:
<?php

// BookController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Book;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $books = Book::all();

        return view('index', compact('books'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $validatedData = $request->validate([
            'book_name' => 'required|max:255',
            'isbn_no' => 'required|alpha_num',
            'book_price' => 'required|numeric',
        ]);
        $book = Book::create($validatedData);

        return redirect('/books')->with('success', 'Book is successfully saved');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $book = Book::findOrFail($id);

        return view('edit', compact('book'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $validatedData = $request->validate([
            'book_name' => 'required|max:255',
            'isbn_no' => 'required|alpha_num',
            'book_price' => 'required|numeric',
        ]);
        Book::whereId($id)->update($validatedData);

        return redirect('/books')->with('success', 'Book is successfully updated');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $book = Book::findOrFail($id);
        $book->delete();

        return redirect('/books')->with('success', 'Book is successfully deleted');
    }
}
untuk kode lengkapnya saya telah mengupload ke github
Sekianlah tutorial ini, jika ada yang kurang jelas silakan ditanyakan pada komentar di bawah, jika artikel ini bermanfaat silakan di share, Terimakasih

MEAN Stack CRUD Tutorial

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,
terimakasih telah mengikuti tutorial ini semoga bermanfaat jika ada yang kurang silkan ditanyakan pada kolom komentar, jika artikel ini bermanfaat silakan di share terimakasih.

Membuat Halaman Login di Android dengan Firebase

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

Membuat Aplikasi CRUD Sederhana dengan database SQLite di Android Studio

Halo sobat blogger sudah lama admin tidak membuat postingan artikel dikarenakan sibuk dengan urusan di dunia nyata. pada kesempatan kali ini admin akan memberikan tutorial cara membuat aplikasi CRUD (Create Read Update Delete) di Android dengan Database SQLite. SQLite ini adalah database yang portable karena data-datanya akan tersimpan pada memori handhone kalian masing-masing, tidak disimpan di server. namun jika di perlukan bisa juga database ini disinkronkan ke server kita akan membahasnya pada kesempatan yang lain. Pada kesempatan kali ini kita akan membuat Aplikasi CRUD yang sederhana kedepanya kita akan bahas membuat CRUD dengan Content Provider.



Ok langsung saja untuk membuatnya kita buat desain tampilanya dulu.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:theme="@android:style/Theme.NoTitleBar"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:orientation="vertical"
   
android:background="#ddd"
   
android:padding="10dp"
   
tools:context="giviews.id.splash.MainActivity">

    <LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="20dp"
       
android:orientation="horizontal">

        <TextView
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="3"
           
android:textColor="#000"
           
android:text="Name"/>

        <EditText
           
android:id="@+id/editText_name"
           
style="@android:style/Widget.Material.Light.EditText"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="1"
           
android:ems="10"
           
android:hint="Name"
           
android:inputType="textPersonName" />
    </LinearLayout>

    <LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="20dp"
       
android:orientation="horizontal">

        <TextView
            
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="3"
           
android:textColor="#000"
           
android:text="Surname"/>

        <EditText
           
android:id="@+id/editText_surname"
           
style="@android:style/Widget.Material.Light.EditText"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="1"
           
android:ems="10"
            
android:hint="Surname"
           
android:inputType="textPersonName" />
    </LinearLayout>

    <LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="20dp"
       
android:orientation="horizontal">

        <TextView
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="3"
           
android:textColor="#000"
           
android:text="Marks"/>

        <EditText
           
android:id="@+id/editText_marks"
           
style="@android:style/Widget.Material.Light.EditText"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="1"
           
android:ems="10"
           
android:hint="Marks"
           
android:inputType="textPersonName"/>
    </LinearLayout>

    <LinearLayout
       
android:layout_width="match_parent"
       
android:layout_height="wrap_content"
       
android:layout_marginTop="20dp"
       
android:orientation="horizontal">

        <TextView
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="3"
           
android:textColor="#000"
           
android:text="Id"/>

        <EditText
           
android:id="@+id/editTextId"
           
style="@android:style/Widget.Material.Light.EditText"
           
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:layout_weight="1"
           
android:ems="10"
           
android:hint="Id"
           
android:inputType="textPersonName" />
    </LinearLayout>

        <LinearLayout
           
android:layout_marginTop="20dp"
            
android:layout_width="match_parent"
           
android:layout_height="wrap_content"
           
android:orientation="horizontal">

            <Button
               
android:id="@+id/button_add"
               
style="@android:style/Widget.Material.Light.Button"
               
android:background="@color/colorAccent"
               
android:textColor="@android:color/background_light"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
                
android:text="Add Data"
               
android:textAppearance="@android:style/TextAppearance.Material.Button"
               
android:layout_weight="1" />

            <Button
               
android:id="@+id/button_view"
               
style="@android:style/Widget.Material.Light.Button"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:background="@color/colorAccent"
               
android:layout_weight="1"
                
android:text="view all"
               
android:textAppearance="@android:style/TextAppearance.Material.Button"
               
android:textColor="@android:color/background_light" />
        </LinearLayout>

        <LinearLayout
           
android:layout_marginTop="20dp"
           
android:layout_width="match_parent"
           
android:orientation="horizontal"
           
android:layout_height="wrap_content">

            <Button
               
android:id="@+id/button_update"
               
style="@android:style/Widget.Material.Light.Button"
               
android:background="@color/colorAccent"
               
android:textColor="@android:color/background_light"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:layout_weight="1"
               
android:text="Update"
               
android:textAppearance="@style/TextAppearance.AppCompat.Button" />

            <Button
               
android:id="@+id/button_delete"
                
style="@android:style/Widget.Material.Light.Button"
               
android:background="@color/colorAccent"
               
android:textColor="@android:color/background_light"
               
android:layout_width="match_parent"
               
android:layout_height="wrap_content"
               
android:layout_weight="1"
               
android:text="Delete"
               
android:textAppearance="@style/TextAppearance.AppCompat.Button" />
        </LinearLayout>
    </LinearLayout>

Selanjutnya buat class DatabaseHelper di java, class ini berfungsi untuk membuat database, table, metode untuk menambah, mengupdate, menampilkan dan menghapus data.

package giviews.id.splash;



import android.content.ContentValues;

import android.content.Context;

import android.database.Cursor;

import android.database.sqlite.SQLiteDatabase;

import android.database.sqlite.SQLiteOpenHelper;



/**

 * Created by asus on 02/04/2017.

 */



public class DatabaseHelper extends SQLiteOpenHelper{

    //nama database

    public static final String DATABASE_NAME = "Student.db";

    //nama table

    public static final String TABLE_NAME = "student_table";

    //versi database

    private static final int DATABASE_VERSION = 1;

    //table field

    public static final String COL_1 = "ID";

    public static final String COL_2 = "NAME";

    public static final String COL_3 = "SURNAME";

    public static final String COL_4 = "MARKS";



    public DatabaseHelper(Context context) {

        super(context, DATABASE_NAME, null, DATABASE_VERSION);

        SQLiteDatabase db = this.getWritableDatabase();

    }



    @Override

    public void onCreate(SQLiteDatabase db) {

        db.execSQL("create table student_table(id integer primary key autoincrement," +

                "name text null," +

                "surname text null," +

                "marks integer null);");

    }



    @Override

    public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

        db.execSQL("DROP TABLE IF EXISTS "+ TABLE_NAME);

        onCreate(db);

    }



    //metode untuk tambah data

    public boolean insertData(String name, String surname, String marks) {

        SQLiteDatabase db = this.getWritableDatabase();

        ContentValues contentValues = new ContentValues();

        contentValues.put(COL_2,name);

        contentValues.put(COL_3,surname);

        contentValues.put(COL_4,marks);

        long result = db.insert(TABLE_NAME, null, contentValues);

        if(result == -1)

            return false;

        else

            return true;

    }



    //metode untuk mengambil data

    public Cursor getAllData() {

        SQLiteDatabase db = this.getWritableDatabase();

        Cursor res = db.rawQuery("select * from student_table", null);

        return res;

    }



    //metode untuk merubah data

    public boolean updateData(String id,String name,String surname,String marks) {

        SQLiteDatabase db = this.getWritableDatabase();

        ContentValues contentValues = new ContentValues();

        contentValues.put(COL_1,id);

        contentValues.put(COL_2,name);

        contentValues.put(COL_3,surname);

        contentValues.put(COL_4,marks);

        db.update(TABLE_NAME,contentValues,"ID = ?",new String[] {id});

        return true;

    }



    //metode untuk menghapus data

    public int deleteData (String id) {

        SQLiteDatabase db = this.getWritableDatabase();

        return db.delete(TABLE_NAME, "ID = ?", new String[] {id});

    }

}
Terakhir kita buat script untuk memfungsikan tombol add, edit, view dan delete yang telah kita desain tadi, kodenya seperti berikut:

package giviews.id.splash;



import android.database.Cursor;

import android.os.Bundle;

import android.support.v7.app.AlertDialog;

import android.support.v7.app.AppCompatActivity;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;



public class MainActivity extends AppCompatActivity {

    DatabaseHelper myDb;

    EditText editName,editSurname,editMarks,editTextId;

    Button btnAddData;

    Button btnViewAll;

    Button btnUpdate;

    Button btnDelete;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        myDb = new DatabaseHelper(this);

        editName = (EditText)findViewById(R.id.editText_name);

        editSurname = (EditText)findViewById(R.id.editText_surname);

        editMarks = (EditText)findViewById(R.id.editText_marks);

        editTextId = (EditText)findViewById(R.id.editTextId);

        btnAddData = (Button)findViewById(R.id.button_add);

        btnViewAll = (Button)findViewById(R.id.button_view);

        btnUpdate = (Button)findViewById(R.id.button_update);

        btnDelete = (Button)findViewById(R.id.button_delete);

        AddData();

        viewAll();

        UpdateData();

        deleteData();

    }



    //fungsi hapus

    public void deleteData() {

        btnDelete.setOnClickListener(

                new View.OnClickListener() {

                    @Override

                    public void onClick(View v) {

                        Integer deletedRows = myDb.deleteData(editTextId.getText().toString());

                        if (deletedRows > 0)

                            Toast.makeText(MainActivity.this,"Data Deleted",Toast.LENGTH_LONG).show();

                        else

                            Toast.makeText(MainActivity.this,"Data Failed to Deleted!",Toast.LENGTH_LONG).show();

                    }

                }

        );

    }



    //fungsi update

    public void UpdateData() {

        btnUpdate.setOnClickListener(

                new View.OnClickListener() {

                    @Override

                    public void onClick(View v) {

                        boolean isUpdate = myDb.updateData(editTextId.getText().toString(),

                                editName.getText().toString(),

                                editSurname.getText().toString(),

                                editMarks.getText().toString());

                        if(isUpdate == true)

                            Toast.makeText(MainActivity.this,"Data Updated",Toast.LENGTH_LONG).show();

                        else

                            Toast.makeText(MainActivity.this,"Data Failed to Update",Toast.LENGTH_LONG).show();

                    }

                }

        );

    }



    //fungsi tambah

    public void AddData() {

        btnAddData.setOnClickListener(

                new View.OnClickListener() {

                    @Override

                    public void onClick(View v) {

                        boolean isInserted = myDb.insertData(editName.getText().toString(),

                                editSurname.getText().toString(),

                                editMarks.getText().toString() );

                        if(isInserted == true)

                            Toast.makeText(MainActivity.this,"Data Iserted",Toast.LENGTH_LONG).show();

                        else

                            Toast.makeText(MainActivity.this,"Data Not Iserted",Toast.LENGTH_LONG).show();

                    }

                }

        );

    }



    //fungsi menampilkan data

    public void viewAll() {

        btnViewAll.setOnClickListener(

            new View.OnClickListener(){

                 @Override

                     public void onClick(View v) {

                     Cursor res = myDb.getAllData();

                     if(res.getCount() == 0) {

                     // show message

                         showMessage("Error","Noting Found");

                     return;

                 }



                 StringBuffer buffer = new StringBuffer();

                     while (res.moveToNext() ) {

                         buffer.append("Id :"+ res.getString(0)+"\n");

                         buffer.append("Name :"+ res.getString(1)+"\n");

                         buffer.append("Surname :"+ res.getString(2)+"\n");

                         buffer.append("Marks :"+ res.getString(3)+"\n\n");

                     }



                     // show all data

                     showMessage("Data",buffer.toString());

                }

            }

        );

    }



    //membuat alert dialog

    public void showMessage(String title, String Message){

        AlertDialog.Builder builder = new AlertDialog.Builder(this);

        builder.setCancelable(true);

        builder.setTitle(title);

        builder.setMessage(Message);

        builder.show();

    }

}





Sekarang jalankan program crud anda, selamat mencoba semoga berhasil. jika ada yang kurang jelas bisa ditanyakan pada komentar dibawah, jika artikel ini bermanfaat silakan share. pada postingan selanjutnya kita akan membuat Aplikasi CRUD dengan menggunakan Content Provider dan Circular Reveal Animation