Muhammad Afdhal : Zakat dan Programming

Muhammad Afdhal : Zakat dan Programming

Siapa yang tahu, apa hubungan zakat dengan programming? Saat ini, era perkembangan revolusi industri 4.0, segala hal dapat kita hubungkan dengan programming/teknologi informasi, tak terkecuali zakat. Pada kesempatan kali ini, spesial guest kita datang dari instansi Badan Amil Zakat Nasional. Yuk kita simak kisah beliau, bagaimana bisa sampai ke Rumah Coding.

Beliau merupakan kelahiran tahun 1978, memiliki nama lengkap Muhammad Afdhal, saat ini berdomisili di Bekasi dan bekerja di Jakarta Pusat. Beliau merupakan perantauan, meskipun merantau, beliau sudah tinggal disana sejak tahun 90.

Bahasa Sastra Dan Bahasa Pemrograman

Beliau memiliki latar belakang pendidikan dari Jurusan Bahasa dan Sastra dari Universitas Islam Negeri. Saat ini beliau bekerja di Badan Amil Zakat Nasional Pusat pada Divisi IT Bagian Pengembangan Aplikasi. Perjalanan karir beliau tidaklah mudah, setelah menyandang gelar Sarjana sampai menempati posisi sekarang, beliau membutuhkan waktu 16 tahun.

Perjuangan tersebut diwarnai dengan berbagai hal, diantaranya pernah mendapatkan pekerjaan diluar bidang yang beliau tekuni, pernah juga bekerja sesuai dengan bidangnya, namun karena satu dan lain hal, beliau memutuskan berhenti. Semuanya dilalui beliau dengan baik, dan beliau membuktikan bahwa bekerja diluar bidang dapat dilakukan jika kita mau bekerja keras. Beliau juga telah membuktikan bahwa mempelajari programming bisa lho, dilakukan oleh beliau yang merupakan lulusan bidang sastra dan bahasa.

Menemukan Rumah Coding

Sebelum memutuskan mengikuti kelas PHP CodeIgniter di Rumah Coding, beliau sudah pernah mendaftar di beberapa tempat pelatihan lain. Namun karena kendala teknis, seperti kelas akan dibuka bila minimal 6 peserta, maka beliau akhirnya mencari tempat lain dan menemukan Rumah Coding. Selain kuota peserta untuk memulai kelas hanya 3 orang, harga yang kompetitif juga menjadi salah satu alasan bagi beliau untuk memilih Rumah Coding.

Motivasi beliau dalam mengikuti kelas programming saat ini, yaitu untuk menunjang kebutuhan instansi tempat beliau bekerja. Hal ini karena, saat awal masuk di Baznas, beliau tidak ditempatkan di IT. Setelah setahun berjalan, beliau mendapatkan mutasi untuk bergabung dengan tim IT.

Untuk memperkuat teman-temannya dalam tim IT tersebut, beliau bertekad ingin belajar pemrograman dari dasar. Beliau juga beranggapan PHP CodeIgniter masih relevan digunakan saat ini. Pihak instansi mendukung keputusan beliau, sehingga beliau diizinkan untuk mengikuti training dimanapun pilihannya.

Harapan Agar Bermanfaat

Beliau berharap setelah mengikuti kursus ini, dapat mengimplementasikannya di kantor. Mengingat kebutuhan instansi dan keinginan beliau yang kuat dalam menguasai PHP CodeIgniter, karena saat ini kebutuhan web di Baznas menggunakan CodeIgniter sedangkan androidnya menggunakan Flutter. Beliau mengakui, sebagai seorang yang awam, sejauh ini dapat mengikuti kelas dan melakukan tugas yang diberikan trainer, sembari terus bertanya tentang hal-hal yang belum dipahami. Mengikuti dunia IT sejak tahun 2011, beliau juga sudah pernah membuat berbagai aplikasi diantaranya pernah membuat studio website berbasis CMS, dan beberapa aplikasi toko online.

Akhmad Fauzi : Teman Perjalanan

Akhmad Fauzi : Teman Perjalanan

Ada yang tahu, cuplikan film Harry Potter, dimana Ronald Weasly sewot karena menganggap dirinya hanyalah teman/pemanis bagi si Harry Potter yang terkenal? Well, mungkin Ron sedang kesal saja, jadi terlontarlah kata-kata itu. Namun salah satu hal terbaik dalam hidup adalah memiliki teman perjalanan yang dapat dijadikan panutan. Nah special guest kali ini, Mas Akhmad Fauzi merupakan ‘teman perjalanan’ Pak I Gede Sujana Eka Putra dari MDPI. Meski lebih tepat dikatakan juniornya Pak Sujana, ungkapnya dengan rendah hati. Diakui mas Akhmad, Bersama dengan Pak Sujana, banyak pembelajaran yang bisa Ia ambil. See, menjadi teman perjalanan banyak sekali manfaatnya kan?

Lulusan Sekolah Menengah Kejuruan

Memiliki nama lengkap Akhmad Fauzi, beliau saat ini berdomisili di Pemogan, Denpasar Selatan. Tapi mas Akhmad ini perantauan lho dari Bekasi, wah seru ya merantau ke Pulau Dewata. Siapa yang tidak kenal dengan keindahan tersebut? Jangankan warga Indonesia, turis mancanegara juga mengakui keindahan pulau ini, makanya banyak yang menjadikan pulau ini sebagai destinasi wisata/berlibur.

Kembali ke mas Akhmad, meski perantauan di Denpasar, namun Pendidikan sekolah menengahnya diselesaikan disana. Usut punya usut, ternyata mas Akhmad lulusan Sekolah Menengah Kejuruan Rekayasa Perangkat Lunak. Beliau menuturkan, pada saat itu kejuruan RPL masih sangat jarang.

Tak puas jika belajar hanya sampai sekolah kejuruan, mas Akhmad melanjutkan Pendidikan Sarjana pada jurusan Sistem Informasi. Mengantongi title sarjana, memantapkan langkah mas Akhmad untuk segera menapaki dunia pasca kampus, yaitu bekerja.

Membersamai di MDPI

Tiga tahun setelah kelulusannya, saat ini mas Akhmad menempati posisi Junior Software Developer dibawah arahan Pak Sujana. Perjalanan karir mas Akhmad tidak selalu mulus, sebelum menempati posisi saat ini, beliau pernah bekerja di dua instansi yang berbeda. Selain bekerja beliau juga aktif mengikuti mailing list/milis untuk mendapatkan informasi. Termasuk posisinya saat ini, ia ketahui melalui job posting di milis.

Sibuk bekerja di Masyarakat Dan Perikanan Indonesia/ MDPI, tak membuat mas Akhmad acuh terhadap kompetisi internasional bidang perikanan yang ia tekuni saat ini. Bersama dengan Pak Sujana, mas Akhmad membuat aplikasi website dengan nama traceability. Menjagokan webnya dalam ajang tersebut, membuatnya menempati posisi Juara II, satu langkah didepan Amerika yang juga berhasil mendapat Juara III, pencapaian yang sangat membanggakan ya. Diakui, memang teknologi yang berkembang saat ini sudah mengarah kepada Artificial Intelligence. Seperti India yang telah menerapkannya, dan menyabet Juara I.  

Meski sudah pernah memenangkan ajang internasional, tak membuat mas Akhmad berpuas diri. Kini ia turut belajar android intermediate di Rumah Coding. Semua ini dilakukan agar dapat menyempurnakan system website dan android, yang pada pada pelaksanaannya mempermudah user menginput data hingga menghasilkan dokumentasi perikanan yang efektif dan efisien. Karena tujuan teknologi, salah satunya tentu untuk memudahkan pekerjaan manusia, bukan?

Mari kita doakan semoga kerja keras mas Akhmad dan Tim dapat segera terwujud, agar semakin banyak nelayan kecil yang terbantu dan berdaya dan sejahtera di negerinya sendiri. Jangan lupa, kerja keras yang kita lakukan, dengan membantu kehidupan orang banyak tentu akan dihitung sebagai amal kebaikan.

CSRF Attack & Solution

CSRF Attack & Solution

A. CSRF Attack

  1. Untuk mencoba serangan, anda bisa mendownload project web yang sudah tersedia untuk penetrasi, download di sini -> https://github.com/raesene/bWAPP
  2. Kemudian download aplikasi sender penetrasi tambahan Burp Suite di sini -> https://portswigger.net/burp/communitydownload
  3. Setelah anda download, install pada localhost anda. Jika bingung, bisa lihat tutorial berikut -> https://www.youtube.com/watch?v=F3QcgmCuEC0
  4. Jika sudah terinstall, masuk ke halaman Login
    http://localhost/bwapp/login.php

5. Kemudian login dengan Login : bee, Password : bug

6. Untuk serangan CSRF terbagi menjadi beberapa serangan, kita coba satu – persatu. Sekarang kita coba CSRF (Change Password) kemudian pilih Hack

7. Setelah masuk ke halaman yang di tuju, klik kanan -> View page source ( Google Chrome )

8. Kemdian block baris code seeperti gambar di bawah, copy + paste di editor anda.

9. Buatlah sebuah file csrf.html simpan di lokasi yang anda inginkan. Paste code di atas.

10. Sekarang copy + paste url pada halaman ganti password

11. Sekarang kita akan mengganti password menggunakan file crsf.html yang dibuat, ubah code seperti gambar berikut

12. untuk melakukan perubahan password, buka file csrf.html pada browser anda, klik Change

13. Kemudian coba anda login dengan password baru yang dibuat lewat file csrf.html

B. Solution

  1. Untuk mengatasi serangan CSRF (Change Password) , pada bagian form input, tambahkan current password field seperti gambar di bawah

2. Pada saat handling request get password_curr , tambahkan code berikut ( Sesuaikan nama tabel dan kolom )

if(isset($_REQUEST["password_curr"]))
                {
                              
                    $password_curr = $_REQUEST["password_curr"];
                    $password_curr = mysqli_real_escape_string($link, $password_curr);
                    $password_curr = hash("sha1", $password_curr, false);                

                    $sql = "SELECT password FROM users WHERE login = '" . $login . "' AND password = '" . $password_curr . "'";

                    // Debugging
                    // echo $sql;    

                    $recordset = $link->query($sql);             

                    if(!$recordset)
                    {

                        die("Connect Error: " . $link->error);

                    }

                    // Debugging                
                    // echo "<br />Affected rows: ";                
                    // printf($link->affected_rows);

                    $row = $recordset->fetch_object();   

                    if($row)
                    {

                        // Debugging
                        // echo "<br />Row: ";
                        // print_r($row);

                        $sql = "UPDATE users SET password = '" . $password_new . "' WHERE login = '" . $login . "'";

                        // Debugging
                        // echo $sql;

                        $recordset = $link->query($sql);

                        if(!$recordset)
                        {

                            die("Connect Error: " . $link->error);

                        }

                        // Debugging              
                        // echo "<br />Affected rows: ";         
                        // printf($link->affected_rows);

                        $message = "<font color=\"green\">The password has been changed!</font>";

                    }

                    else
                    {

                        $message = "<font color=\"red\">The current password is not valid!</font>";

                    }
                
                }

SQL Injection & Solution

A. SQL Injection

  1. Untuk mencoba serangan, anda bisa mendownload project web yang sudah tersedia untuk penetrasi, download di sini -> https://github.com/raesene/bWAPP
  2. Kemudian download aplikasi sender penetrasi tambahan Burp Suite di sini -> https://portswigger.net/burp/communitydownload
  3. Setelah anda download, install pada localhost anda. Jika bingung, bisa lihat tutorial berikut -> https://www.youtube.com/watch?v=F3QcgmCuEC0
  4. Jika sudah terinstall, masuk ke halaman Login
    http://localhost/bwapp/login.php

5. Kemudian login dengan Login : bee, Password : bug

6. Untuk serangan SQL Injection terbagi menjadi beberapa serangan, kita coba satu – persatu. Sekarang kita coba SQL Injection (GET/Search) kemudian pilih Hack

7. Lalu isi form seperti gambar di bawah, klik Search

8. Sekarang kita coba SQL Injection (GET/Select) kemudian pilih Hack

9. Kemudian pilih salah satu judul film selain yang pertama, lalu klik Go

10. Sekarang masukkan script modifikasi pada url seperti gambar dibawah, kemudian tekan enter pada url tersebut

B. Solution

  1. Untuk mengatasi serangan SQL Injection (GET/Search) &
    SQL Injection (GET/Select) , buatlah fungsi berikut

HTML Attack & Solution

A. Html Attack

  1. Untuk mencoba serangan, anda bisa mendownload project web yang sudah tersedia untuk penetrasi, download di sini -> https://github.com/raesene/bWAPP
  2. Kemudian download aplikasi sender penetrasi tambahan Burp Suite di sini -> https://portswigger.net/burp/communitydownload
  3. Setelah anda download, install pada localhost anda. Jika bingung, bisa lihat tutorial berikut -> https://www.youtube.com/watch?v=F3QcgmCuEC0
  4. Jika sudah terinstall, masuk ke halaman Login
    http://localhost/bwapp/login.php

4. Kemudian login dengan Login : bee, Password : bug

5. Untuk serangan HTML terbagi menjadi beberapa serangan, kita coba satu – persatu. Sekarang kita coba HTML Injection – Reflected (GET) kemudian pilih Hack

6. Lalu isi form seperti gambar di bawah, klik Go

7. Sekarang kita coba HTML Injection – Reflected (POST), kemudian pilih Hack

8. Kemudian isi form seperti gambar di bawah, klik Go

9. Sekarang kita coba HTML Injection – Stored (Blog), kemudian pilih Hack

10. Kemudian isi form seperti gambar di bawah, klik Submit

11. Lakukan cara no 9, akan muncul pop up baru

B. Solution

  1. Untuk mengatasi serangan HTML Injection – Reflected , buatlah fungsi seperti gambar dibawah

Sistem Informasi Penjualan menggunakan PHP Native dan Admin LTE ( Part 2 )

47. Kemudian kita tambahkan tombol plus untuk mengarahkan ke form add

48. pada bagian view/category/index.php tambahkan code ini

49. sekarang buat file show.php dalam folder view/category, lalu masukkan code berikut

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Detail Category</h3>
            </div>
            <div class="card-body">
                <?php $data=$_SESSION['data']; ?>
                <?php $category=$data->fetch(PDO::FETCH_OBJ); ?>
                <div class="form-group">
                    <label for="name">Category</label>
                    <input id="name" type="text" value="<?php echo $category->name ?>" class="form-control" disabled />
                </div>
                <div class="form-group">
                    <label for="status">Status</label>
                    <input id="status" type="text" value="<?php echo $category->status ?>" class="form-control" disabled />
                </div>
            </div>
        </div>
    </div>
</div>

50. Tambahkan method baru show di dalam Category.php

51. Tambahkan method baru show di dalam CategoryController.php

52. Pada fungsi main_view , tambahkan code dibawah

53. pada index.php tambahkan code dibawah

54. pada view/category/index.php ubah code seperti gambar di bawah

55. Sekarang coba klik gambar mata untuk melihat detail data

56. kemudian kita buat file edit.php dalam folder view/category/ . masukkan code berikut.

    <div class="row">
        <div class="col-12">
            <form method="POST" action="?category/update">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Update Category</h3>
                    </div>
                    <div class="card-body">
                        <?php $data=$_SESSION['data']; ?>
                        <?php $category=$data->fetch(PDO::FETCH_OBJ); ?>
                        <input type="hidden" name="id" value="<?php echo $category->id ?>">
                        <div class="form-group">
                            <label for="name">Category</label>
                            <input type="text" name="name" value="<?php echo $category->name ?>" class="form-control" placeholder="Enter category" />
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select name="status" class="form-control">
                               <option value="active "<?php 
                               if($category->status=="active")
                                  echo"selected";
                               else
                                  echo""; 
                                ?> 
                                >Active</option>
                              <option value="inactive "<?php 
                               if($category->status=="inactive")
                                  echo"selected";
                               else
                                  echo""; 
                                ?> 
                                >Inactive</option>

                        </select>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="?category" class="btn btn-outline-info">Back</a>
                    <button type="submit" class="btn btn-primary pull-right">Update Category</button>
                </div>
            </div>
        </form>
    </div>
</div>

57. Tambahkan method baru edit di dalam CategoryController.php

58. Pada fungsi main_view , tambahkan code dibawah

59. Pada index.php

60. pada view/category/index.php ubah code seperti gambar di bawah

61. Sekarang klik simbol pensil, untuk menampilkan form ubah data

62. Tambahkan method baru update di dalam Category.php

63. Tambahkan method baru update di dalam CategoryController.php

64. pada index.php

65. Sekarang coba ubah data anda

66. Terakhir kita buat method untuk hapus, pada view/category/index.php ubah code seperti gambar di bawah

67. Tambahkan method baru delete di dalam Category.php

68. Tambahkan method baru delete di dalam CategoryController.php

69. pada index.php

70. arahkan url pada menu category di dalam sidebar.php

Workshop Android Special Ramadhan 2019 (1440 H)

Bulan Ramadhan sebentara lagi datang, apa yang sudah anda persiapkan? Bulan Ramadhan kali ini, Rumah Coding insya Allah akan mengadakan “Workshop Android Spesial Ramadhan”. Terdapat 3 workshop di bulan ramadhan mendatang. Melalui workshop ini, anda akan langsung praktek membuat aplikasi berikut

1. Kamus Arab Indonesia
Hari: Minggu,
Tanggal: 12 Mei 2019 
Waktu: 09:00 – 17:00
Biaya: Rp. 400.000

Materi:
– Activity
– Frame Layout
– Google Translator API
– List View
– Card View
– Custom Adapter
– Share Intent
– Realm

2. Jadwal dan Pengingat Shalat
Hari: Minggu,
Tanggal: 19 Mei 2019
Waktu: 09:00 – 17:00
Biaya: Rp. 400.000

Materi:
– OkHttp
– Custom Drawable
– Shared Preferences
– Notification
– Task Schedule
– Sound

3. App Al-Qur’an
Hari: Minggu,
Tanggal: 26 Mei 2018
Waktu: 09:00 – 17:00
Biaya: Rp. 400.000

Materi:
– OkHttp
– Image View
– View Pager
– Realm
– List View
– Custom Adapter

Tempat: Rumah Coding
Jl. Margonda Raya Gg. Kramat Batas No. 4 Depok, Jawa Barat
https://goo.gl/maps/g58xEuMewG62

Persyaratan:
1. Memiliki laptop sendiri (Windows/Linux/Mac 4GB RAM)

Persyaratan Software:
1. JDK8 (https://goo.gl/8XHlU2)
2. Android Studio (https://goo.gl/fcKQbF)
3. Emulator: Nox App Player

Tahap pendaftaran:
1. Mengisi formulir di bawah.
2. Peserta akan dihubungi melalui email/whatsapp
3. Pembayaran via transfer
4. Workshop.

Fasilitas:
1. Sertifikat
2. Ruangan Full AC

Catatan:
– Tersedia koneksi internet, tetapi untuk berjaga-jaga, silahkan mempersiapkan koneksi internet masing-masing.

Informasi:
+62 857-1005-9175
[email protected]

Silahkan lengkapi formulir pendaftaran di bawah ini:

Membuat Aplikasi CRUD Android dan IOS dengan SQLite pada IONIC 3

  1. pertama – tama, ketik pada cmd anda ionic start BookStoreApp blank

2. Input y

3. Input n

4. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd BookStoreApp

5. Kemudian install plugin SQLite, ketik ionic cordova plugin add cordova-sqlite-storage

6. Apabila muncul error, kita perlu install cordova secara global seperti gambar di bawah

7. Ketik npm i -g cordova

8. Kemudian ketik npm install –save @ionic-native/[email protected]

9. Kemudian buka folder project BookStoreApp menggunakan IDE anda, masuk ke dalam src/app/app.module.ts untuk import plugin SQLite. Tambahkan import { SQLite } from ‘@ionic-native/sqlite’; serta SQLite seperti gambar di bawah.

10. Lalu kita akan membuat provider untuk database, ketik ionic generate provider database

11. Ubah code yang ada dalam src/provider/database/database.ts. Masukkan code di bawah

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Injectable()
export class DatabaseProvider {
    db:SQLiteObject = null;

    constructor(private sqlite: SQLite) { }

    getOrGenerateDB() {
        // Generate DB adalah proses asynchronus, jadi bagusnya kita pakai promise
        // Walaupun prosesnya hanya sepersekian detik, tetap saja harus di tunggu.
        return new Promise((resolve, reject) => {
            if (this.db != null) {
                resolve(this.db)
            } else {
                this.sqlite.create({
                    name        : 'myDatabase.db',
                    location    : 'default'
                }).then((db: SQLiteObject) => {
                    this.db = db;
                    resolve(this.db)
                }).catch((e) => {
                    console.log(e);
                    reject(e);
                });
            }
        });
    }
   
    createTable() {
        this.getOrGenerateDB().then((db: SQLiteObject) => { 
            var sql = 'create table IF NOT EXISTS buku (' +
            'id INTEGER PRIMARY KEY AUTOINCREMENT, '+ 
            'judul VARCHAR(255), '+
            'penerbit VARCHAR(50), '+  
            'pengarang VARCHAR(50))';

            db.executeSql(sql, {})
                .then(() => console.log('tabel buku berhasil di create'))
                .catch(e => console.log(e));

            // db.executeSql('DELETE FROM buku', {})
            //     .then(() => console.log('tabel buku berhasil di delete'))
            //     .catch(e => console.log(e));

            // db.executeSql('INSERT INTO buku values (?, ?,?,?)', 
            //               [null, "judullll", "penerbittt", "ppengarang OKEOKE"])
            //     .then(() => console.log('tabel buku berhasil di tambah'))
            //     .catch(e => console.log(e));


            // Untuk create table lainnya bisa ditambahkan di sini
            // contoh
            // var sql = 'create Tabel 2 IF NOT EXISTS delivery_form (' +
            //     'number VARCHAR(255) PRIMARY KEY, '+ 
            //     'round_id VARCHAR(255), '+
            //     'state VARCHAR(50), '+  
            //     'has_returns INTEGER(2), '+  
            //     'has_annotations INTEGER(2))';
            // db.executeSql(sql, {})
            //     .then(() => console.log('delivery_form table has created'))
            //     .catch(e => console.log(e));
        })
    }

}

12. Ubah code yang ada dalam src/app/pages/home/home.ts. Masukkan code di bawah . Disini kita akan membuat fungsi untuk menampilkan semua data pada database.

import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SQLiteObject } from '@ionic-native/sqlite';

import { DatabaseProvider } from '../../providers/database/database';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    data:any=[];
    
    constructor(public navCtrl: NavController, public zone: NgZone,
                public db: DatabaseProvider) { }

    ionViewDidEnter() { 
        this.db.getOrGenerateDB().then((db: SQLiteObject) => { 
            db.executeSql('SELECT * FROM buku', {}).then(res => {
                this.data = [];
                this.zone.run(() => {
                    for (var i = 0; i < res.rows.length; i++) {
                        this.data.push({
                            id: res.rows.item(i).id,
                            judul: res.rows.item(i).judul
                        })
                    }
                })
            }).catch(e => console.log(e));
        });
    }

    edit(id) {
         this.navCtrl.push("BookformPage", {bookID: id})
    }

    add() {
        this.navCtrl.push("BookformPage")
    }

}

13. Ubah code yang ada dalam src/app/pages/home/home.html. Masukkan code di bawah . Disini kita akan membuat halaman untuk menampilkan semua data pada database.

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic CRUD SQLite
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
   <ion-scroll scrollY="true" direction="xy" style="height: 100vh;">
        <ion-list >
            <ion-item tappable *ngFor="let a of data; let index = index" (click)="edit(a.id)" >
                {{a.judul}} 
            </ion-item>
        </ion-list>
    </ion-scroll>
    <ion-fab bottom right>
      <button ion-fab (click) = "add()" >Add</button>
    </ion-fab>
</ion-content>

14. Sekarang kita akan membuat sebuah halaman input data buku, ketik ionic generate page bookform

15. Ubah code yang ada dalam src/app/pages/bookform/bookform.ts. Masukkan code di bawah . Disini kita akan membuat fungsi untuk tambah data, ubah, serta hapus.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { SQLiteObject } from '@ionic-native/sqlite';
import { DatabaseProvider } from '../../providers/database/database';


@IonicPage()
@Component({
    selector: 'page-bookform',
    templateUrl: 'bookform.html',
})
export class BookformPage {
    book: any = {
        judul: '',
        penerbit: '',
        pengarang: ''
    }
    title = '';
    bookID = '';
    toaster: any;

    constructor(public navCtrl: NavController, public navParams: NavParams, 
                public toastCtrl: ToastController, public db: DatabaseProvider) {
        this.title = 'Tambah Buku';
        this.bookID = navParams.get("bookID");
        if (this.bookID != null || this.bookID != undefined) {
            this.title = 'Edit Buku';
        }
        this.toaster = this.toastCtrl.create({
            duration: 3000,
            position: 'bottom'
        });
    }

    ionViewDidLoad() {
        if (this.bookID != '') {
            this.db.getOrGenerateDB().then((db: SQLiteObject) => { 
                db.executeSql('SELECT * FROM buku where id = ?', [this.bookID]).then(res => {
                    this.book = {
                        id: res.rows.item(0).id,
                        judul: res.rows.item(0).judul,
                        penerbit: res.rows.item(0).penerbit,
                        pengarang: res.rows.item(0).pengarang
                    }
                }).catch(e => console.log(e));
            });
        }
    }

    save() {
        if (this.book.judul == '' || this.book.penerbit == '' || this.book.pengarang == '') {
            this.toaster.setMessage('All fields are required');
            this.toaster.present();
        } else {
            // Jika edit
            if (this.bookID) {
                var sql = 'UPDATE buku SET judul=?, penerbit=?, pengarang=? where id = ?';
                var param = [this.book.judul, this.book.penerbit, this.book.pengarang, this.book.id];
            } else {
                console.log(this.book);
                param = [null, this.book.judul, this.book.penerbit, this.book.pengarang]
                sql = 'INSERT INTO buku values (?,?,?,?)';
            }

            this.db.getOrGenerateDB().then((db: SQLiteObject) => { 
                db.executeSql(sql, param).then(res => {
                    setTimeout(()=>{
                        this.navCtrl.pop();
                    }, 300) 
                }).catch(e => console.log(e));
            });
        }
    }

    deleteBook() {
        this.db.getOrGenerateDB().then((db: SQLiteObject) => { 
            db.executeSql('DELETE FROM buku where id = ?', [this.bookID]).then(res => {
                setTimeout(()=>{
                    this.navCtrl.pop();
                }, 300) 
            }).catch(e => console.log(e));
        });
    }
}

16 . Ubah code yang ada dalam src/app/pages/bookform/bookform.html Masukkan code di bawah . Disini kita akan membuat tampilan input data buku.

<ion-header>
    <ion-navbar>
     <ion-title> {{ title }} </ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item>
            <ion-label floating>Judul</ion-label>
            <ion-input type="judul" [(ngModel)] = "book.judul" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Penerbit</ion-label>
            <ion-input type="penerbit" [(ngModel)] = "book.penerbit" ></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Pengarang</ion-label>
            <ion-input type="pengarang" [(ngModel)] = "book.pengarang" ></ion-input>
        </ion-item>
        <ion-item text-center>
            <button ion-button round style="min-width: 200px; padding: 10px 16px" (click) = "save()">Save</button>
            <br/>
            <button ion-button round style="min-width: 200px; padding: 10px 16px" (click) = "deleteBook()">Delete</button>
        </ion-item>
    </ion-list>
</ion-content>

17. Kemudian panggil fungsi createTable ( ) pada DatabaseProvider

18. Langkah terakhir dengan menambahkan satu parameter pada MyApp Constructor untuk mengaktifkan fungsi createTable ( ) pada DatabaseProvider

19. Sekarang bisa anda coba dengan emulator atau smartphone ,

Membuat Aplikasi Login Android dan IOS Dengan IONIC 3

  1. Pastikan anda sudah menginstall serta konfigurasi NPM serta Node.js.
  2. Pertama tama, ketik ionic start LoginApp

3. Pilih blank .

4. input y

5. input n

6. Apabila proses instalasi sudah selesai, masuk ke folder anda dengan mengetik cd LoginApp

7. Untuk mengecek apakah sudah berhasil, ketik ionic serve -ctl

8. Sekarang kita akan membuat 2 buah halaman yaitu login dan home dengan megetik ionic generate page login untuk halaman login, serta
ionic generate page home untuk halaman home.

9. Kemudian buka folder project LoginApp dengan IDE anda, pada tutorial ini menggunakan Visual Code.

10. Lalu masuk ke src/pages/login/login.html

11. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas

<ion-content padding>
    <ion-list text-center>
        <br>
        <H3> Welcome </H3>
        <br>
         <ion-item>
            <ion-label color="primary" >Username</ion-label>
            <ion-input type="email" [(ngModel)]="credentials.username" ></ion-input>
          </ion-item>
          <br>
          <ion-item>
            <ion-label color="primary" >Password</ion-label>
            <ion-input type="password" [(ngModel)]="credentials.password" ></ion-input>
        </ion-item>

        <br>
        <br>
        <button ion-button round center (click)="login()">Login</button>

        <br>
        <p  text-center tappable> Forget Password </p>
        <p  text-center tappable (click)="register()" > Don't have account? Register </p>
    </ion-list>
</ion-content>

12. Sekarang kita akan membuat Auth Provider untuk menangani login, ketik ionic generate provider auth

13. Lalu masuk ke src/providers/auth/auth.ts

14. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas

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

@Injectable()
export class AuthProvider {
 constructor() {
        // console.log("belum dipake");
    }

    public login(credentials) {
        return new Promise((resolve, reject) => {
         if (credentials.username == "" || credentials.password == "") {
          reject("Username / password harus diisi")
         } else if (credentials.username == "admin" &amp;&amp; credentials.password=="admin") {
          localStorage.setItem("isLogin", "true");
          resolve("Berhasil Login")
         } else {
          reject("Username / password salah");
         }
        })
    }

    public logOut() {
        localStorage.setItem("isLogin", "false");
    }
}

15. Setelah login.html dan auth.ts diubah, sekarang kita akan mengubah
src/pages/login/login.ts

16. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { HomePage } from '../home/home';
// import auth provider
import { AuthProvider } from '../../providers/auth/auth';

@IonicPage()
@Component({
    selector: 'page-login',
    templateUrl: 'login.html',
})
export class LoginPage {
    credentials: any = {
        username: "",
        password: ""
    }

    constructor(public navCtrl: NavController, public navParams: NavParams,
        public auth: AuthProvider, public toastCtrl: ToastController) {}

    ionViewDidLoad() {
        //check apakah sudah dalam kondisi login?
        let status = localStorage.getItem("isLogin");
        if (status == "true") {
            this.navCtrl.setRoot(HomePage);
        }
    }

    login() {
        this.auth.login(this.credentials).then((resp) => {
            let toast = this.toastCtrl.create({
                message: "Berhasil",
                duration: 3000,
                position: 'bottom'
            });
            toast.present();
            this.navCtrl.setRoot(HomePage);
        }).catch((err) => {
            let toast = this.toastCtrl.create({
                message: err,
                duration: 2000,
                position: 'bottom'
            });
            toast.present();
        })
    }
}

17. Lalu masuk ke src/pages/home/home.html

18. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  Selamat Datang
  <br>
   <br>
  <button ion-button round (click)="logout()">Logout</button>
</ion-content>

19. Kemudian masuk ke src/pages/home/home.ts

20. Masukkan code berikut , ubah code aslinya yang ada pada gambar di atas

import { AuthProvider } from './../../providers/auth/auth';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [AuthProvider]
})

export class HomePage {
    constructor(public navCtrl: NavController, public auth: AuthProvider) {

    }
    logout() {
        this.auth.logOut()
        this.navCtrl.setRoot("LoginPage")
    }
}

21. Sekarang buka cmd baru, lakukan cara di no 7

Membuat CRUD Dengan Framework Codeigniter

Pada kesempatan kali ini, kita akan mencoba membuat CRUD(Create, Read, Update, Delete) menggunakan framework codeigniter. Langsung saja kita mulai dengan langkah pertama ini, dengan membuat database dengan nama tutorial_rumah_coding dan sebuah table dengan nama siswa seperti yang terlihat dibawah ini:

Selanjutnya lakukan pengaturan pada file autoload.php yang terdapat didalam folder application/config/ seperti berikut ini :

Setelah helper dan libraries yang kita butuhkan sudah diload, selanjutnya hubungkan database dengan project kita seperti berikut ini :

Tidak lupa juga untuk mengatur base_url yang terdapat didalam file config.php pada folder application/config/ :

Kemudian buat sebuah controllers dengan nama CrudSiswa.php dengan perintah sebagai berikut ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class CrudSiswa extends CI_Controller {

    public function __construct(){

        parent ::__construct();

        //load model
        $this-&gt;load-&gt;model('CrudSiswaModel');

    }

    public function index()
    {
        $data = array(

            'title'     =&gt; 'Data Siswa',
            'data_siswa' =&gt; $this-&gt;CrudSiswaModel-&gt;get_all(),

        );

        $this-&gt;load-&gt;view('datasiswa', $data);
    }

    public function tambah()
    {
        $data = array(

            'title'     =&gt; 'Tambah Data Siswa'

        );

        $this-&gt;load-&gt;view('tambahsiswa', $data);
    }

    public function simpan()
    {
        $data = array(

            'id_siswa'       =&gt; $this-&gt;input-&gt;post("id_siswa"),
            'nama'         =&gt; $this-&gt;input-&gt;post("nama"),
            'email'    =&gt; $this-&gt;input-&gt;post("email"),
            'password'         =&gt; $this-&gt;input-&gt;post("password"),
            'telepon'         =&gt; $this-&gt;input-&gt;post("telepon"),
            'pelajaran'         =&gt; $this-&gt;input-&gt;post("pelajaran")


        );

        $this-&gt;CrudSiswaModel-&gt;simpan($data);

        $this-&gt;session-&gt;set_flashdata('notif', '<div class="alert alert-success alert-dismissible"&gt; Success! data siswa berhasil disimpan didatabase.
                                                </div&gt;');

        //redirect
        redirect('CrudSiswa/');

    }

    public function edit($id_siswa)
    {
        $id_siswa = $this-&gt;uri-&gt;segment(3);

        $data = array(

            'title'     =&gt; 'Edit Data Siswa',
            'data_siswa' =&gt; $this-&gt;CrudSiswaModel-&gt;edit($id_siswa)

        );

        $this-&gt;load-&gt;view('editsiswa', $data);
    }

    public function update()
    {
        $id['id_siswa'] = $this-&gt;input-&gt;post("id_siswa");
        $data = array(

            'id_siswa'           =&gt; $this-&gt;input-&gt;post("id_siswa"),
            'nama'         =&gt; $this-&gt;input-&gt;post("nama"),
            'email'    =&gt; $this-&gt;input-&gt;post("email"),
            'password'         =&gt; $this-&gt;input-&gt;post("password"),
            'telepon'         =&gt; $this-&gt;input-&gt;post("password"),
            'pelajaran'         =&gt; $this-&gt;input-&gt;post("pelajaran"),


        );

        $this-&gt;CrudSiswaModel-&gt;update($data, $id);

        $this-&gt;session-&gt;set_flashdata('notif', '<div class="alert alert-success alert-dismissible"&gt; Success! data berhasil diupdate didatabase.
                                                </div&gt;');

        //redirect
        redirect('CrudSiswa');

    }

    public function hapus($id_siswa)
    {
        $this-&gt;CrudSiswaModel-&gt;hapus($id_siswa);
        //redirect
        redirect('CrudSiswa');

    }

}

Selanjutnya buat sebuah Model dengan nama CrudSiswaModel.php dengan perintah seperti berikut ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class CrudSiswaModel extends CI_model{

    public function get_all()
    {
        $query = $this-&gt;db-&gt;select("*")
                 -&gt;from('siswa')
                 -&gt;order_by('id_siswa', 'DESC')
                 -&gt;get();
        return $query-&gt;result();
    }

    public function simpan($data)
    {

        $query = $this-&gt;db-&gt;insert("siswa", $data);

        if($query){
            return true;
        }else{
            return false;
        }

    }

    public function edit($id_siswa)
    {

        $query = $this-&gt;db-&gt;where("id_siswa", $id_siswa)
                -&gt;get("siswa");

        if($query){
            return $query-&gt;row();
        }else{
            return false;
        }

    }

    public function update($data, $id_siswa)
    {

        $query = $this-&gt;db-&gt;update("siswa", $data, $id_siswa);

        if($query){
            return true;
        }else{
            return false;
        }

    }

    public function hapus($id_siswa)
    {

      $this-&gt;db-&gt;where('id_siswa', $id_siswa);
      $this-&gt;db-&gt;delete('siswa');

      

    }

}

Langkah Terakhir Adalah membuat halaman/view untuk menampikan data siswa, halaman tambah data siswa dan halaman edit data siswa. Pertama kita membuat halaman data siswa dengan nama file datasiswa.php :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
    <title&gt;<?php echo $title ?&gt;</title&gt;
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"&gt;
</head&gt;
<body&gt;

    <div class="container" style="margin-top: 80px"&gt;
        <?php echo $this-&gt;session-&gt;flashdata('notif') ?&gt;
        <a href="<?php echo base_url() ?&gt;index.php/CrudSiswa/tambah/" class="btn btn-md btn-success"&gt;Tambah Buku</a&gt;
        <hr&gt;
        <!-- table --&gt;
        <div class="table-responsive"&gt;
            <table id="table" class="table table-striped table-bordered table-hover"&gt;
                <thead&gt;
                  <tr&gt;
                    <th&gt;No.</th&gt;
                    <th&gt;Id Siswa</th&gt;
                    <th&gt;Nama</th&gt;
                    <th&gt;Email</th&gt;
                    <th&gt;Password</th&gt;
                    <th&gt;Telepon</th&gt;
                    <th&gt;Pelajaran</th&gt;
                    <th&gt;Aksi</th&gt;
                  </tr&gt;
                </thead&gt;
                <tbody&gt;

                <?php
                    $no = 1;
                    foreach($data_siswa as $hasil){
                ?&gt;

                  <tr&gt;
                    <td&gt;<?php echo $no++ ?&gt;</td&gt;
                    <td&gt;<?php echo $hasil-&gt;id_siswa ?&gt;</td&gt;
                    <td&gt;<?php echo $hasil-&gt;nama ?&gt;</td&gt;
                    <td&gt;<?php echo $hasil-&gt;email ?&gt;</td&gt;
                    <td&gt;<?php echo $hasil-&gt;password ?&gt;</td&gt;
                    <td&gt;<?php echo $hasil-&gt;telepon ?&gt;</td&gt;
                    <td&gt;<?php echo $hasil-&gt;pelajaran ?&gt;</td&gt;
                    <td&gt;
                        <a href="<?php echo base_url() ?&gt;index.php/CrudSiswa/edit/<?php echo $hasil-&gt;id_siswa ?&gt;" class="btn btn-sm btn-success"&gt;Edit</a&gt;
                        <a href="<?php echo base_url() ?&gt;index.php/CrudSiswa/hapus/<?php echo $hasil-&gt;id_siswa ?&gt;" class="btn btn-sm btn-danger"&gt;Hapus</a&gt;
                    </td&gt;
                  </tr&gt;

                <?php } ?&gt;

                </tbody&gt;
              </table&gt;
        </div&gt;

    </div&gt;

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;</script&gt;
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"&gt;</script&gt;


</body&gt;
</html&gt;

Hasilnya akan terlihat seperti ini :

Buat lagi halaman tambah data dengan nama file tambahsiswa.php :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
    <title&gt;<?php echo $title ?&gt;</title&gt;
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"&gt;
</head&gt;
<body&gt;

    <div class="container" style="margin-top: 80px"&gt;
        <div class="col-md-12"&gt;
            <?php echo form_open('CrudSiswa/simpan') ?&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;No. Siswa</label&gt;
                <input type="text" name="no_siswa" class="form-control" placeholder="Masukkan No. Siswa"&gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Nama</label&gt;
                <input type="text" name="nama" class="form-control" placeholder="Masukkan Nama"&gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Email</label&gt;
                <input type="email" name="email" class="form-control" &gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Password</label&gt;
                <input type="password" name="password" class="form-control" &gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Telepon</label&gt;
                <input type="number" name="telepon" class="form-control" &gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Pelajaran</label&gt;
                <input type="text" name="pelajaran" class="form-control" &gt;
              </div&gt;

              <button type="submit" class="btn btn-md btn-success"&gt;Simpan</button&gt;
              <button type="reset" class="btn btn-md btn-warning"&gt;reset</button&gt;
            <?php echo form_close() ?&gt;
        </div&gt;
    </div&gt;

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;</script&gt;
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"&gt;</script&gt;
</body&gt;
</html&gt;

Hasilnya akan terlihat seperti ini :

Kemudian langkah terakhir, kita membuat halaman edit dengan nama file editsiswa.php :

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
    <title&gt;<?php echo $title ?&gt;</title&gt;
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"&gt;
</head&gt;
<body&gt;

    <div class="container" style="margin-top: 80px"&gt;
        <div class="col-md-12"&gt;
            <?php echo form_open('CrudSiswa/update') ?&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Nama </label&gt;
                <input type="text" name="nama" value="<?php echo $data_siswa-&gt;nama ?&gt;" class="form-control" placeholder="Nama Siswa"&gt;
                <input type="hidden" value="<?php echo $data_siswa-&gt;id_siswa ?&gt;" name="id_siswa"&gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Email</label&gt;
                <input type="text" name="nama_buku" value="<?php echo $data_siswa-&gt;email ?&gt;" class="form-control" placeholder="Masukkan Email"&gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Password</label&gt;
                <input type="password" name="password" value="<?php echo $data_siswa-&gt;password ?&gt;" class="form-control" placeholder="Masukkan Password"&gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Telepon</label&gt;
                <input type="number" name="telepon" value="<?php echo $data_siswa-&gt;telepon ?&gt;" class="form-control" placeholder="Masukkan Telepon"&gt;
              </div&gt;

              <div class="form-group"&gt;
                <label for="text"&gt;Pelajaran</label&gt;
                <input type="text" name="pelajaran" value="<?php echo $data_siswa-&gt;pelajaran ?&gt;" class="form-control" placeholder="Masukkan Pelajaran"&gt;
              </div&gt;





              <button type="submit" class="btn btn-md btn-success"&gt;Update</button&gt;
              <button type="reset" class="btn btn-md btn-warning"&gt;reset</button&gt;
            <?php echo form_close() ?&gt;
        </div&gt;
    </div&gt;

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;</script&gt;
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"&gt;</script&gt;
</body&gt;
</html&gt;

Hasilnya akan terlihat seperti berikut ini :