arnosa.net
Categories
Archives
Latest Comments

Tags

2013 4x abal2 ajax angular angular js angularjs aplikasi arnosa.net awards berhenti merokok blog bootstrap bug car rental cheat cms codeigniter composer crud curhat dead rising 3 dragon age dragon age inquisition fifa14 fifa2015 FM2014 framework game games gamewatch gimbot gta5 hotel idulfitri1434h injustice javascript jquery L5 lag laravel laravel 5.4 mtb mysql nbak2k15 nfs online shop pc pegawai PES2014 pes2015 php picture pro evolution soccer program property quote Racing rakpenting random rental mobil review rift rival rivals rokok SaintRow4 sepeda settings sistem informasi akademis sistem informasi hotel sistem informasi kepegawaian sistem informasi krs sistem informasi sekolah soccer song source code stik testing the sims 4 thrill trick vgx vue js web web programming welcome wreak

Contact Me



16 January 2015 Part 3: Membuat CRUD Sederhana Laravel & Angular JS - Edit & Delete Data Posted In: angularjs angular laravel crud javascript

 

Artikel ini merupakan lanjutan dari artikel sebelumnya yg belum baca bisa dilihat di : 

Part 1: http://arnosa.net/artikel/2015/01/02/part-1-membuat-crud-sederhana-laravel-angular-js-menampilkan-data ,

Part 2: http://arnosa.net/artikel/2015/01/08/part-2-membuat-crud-sederhana-laravel-angular-js-menambah-data

karena kalo belum dibaca bakal kesusahan menngikuti nya :D

Untuk artikel kali ini adalah bagian untuk edit & menghapus data , tambahkan sedikit kode di td untuk aksi edit maupun delete nya seperti kode dibawah ini:


 

Aksi

maka tampilannya akan seperti gambar dibawah ini:

Edit Delete aksi

buat controller baru di app.js dengan nama editStatusController

app.controller('editStatusController', function($scope, $http, $routeParams) {
    $scope.header = "Edit Data Status Pegawai";
    // set var statusId yang diambil dari parameter route.
    $scope.statusId = $routeParams.statusId;
    $scope.loading = true;
    $scope.submitted = false;
    // ambil data dari database dengan ajax
    $http.get('admin/status_pegawai/' + $scope.statusId + '/edit').success(function(data) {
        $scope.statusData = data;
        $scope.loading = false;
    });
    // proses edit data saat submit , mengirimkan data via ajax dan disimpan ke dalam database
    $scope.processForm = function(isValid) {
        if (isValid) {
            $http.patch('admin/status_pegawai/' + $scope.statusId, $scope.statusData).
                    success(function(data) {
                        if (data.success) {
                            window.location.href = '/';
                        }
                    }).
                    error(function(data) {
                        console.log(data);
                    });
        } else {
            $scope.submitted = true;
        }
    };
});

Dapat dijelaskan kode diatas , mengambil data dari database dengan parameter ID dalam bentuk Json , setelah itu ada fungsi untuk process form sama seperti yang ada di controller untuk menambahkan data , tetapi url edit nya berbeda.

setelah itu untuk menambahkan data ke database perlu membuat controler di laravel nya tambahkan kode dibawah ini di StatusPegawaiController.php

    public function edit($id) {
        //
        $statuspegawai = StatusPegawai::find($id);
        return Response::json($statuspegawai);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function update($id) {
        //
        $statuspegawai = StatusPegawai::find($id);
        $statuspegawai->nama_status = Input::get('nama_status');
        if ($statuspegawai->save()) {
            return Response::json(array('success' => TRUE));
        }
    }

Untuk halaman edit nya sendiri mengambil dari file new.html seperti yang sudah dituliskan di routing nya. Tampilannya seperti ini:

edit page

Validasi nya sama seperti waktu menambah data baru , nah ketemu disubmit makan data akan disimpan dan kembali ke halaman awal. Untuk edit data selesai, sekarang untuk delete data. Tambahkan sedikit kode di listStatusController di app.js.

    $scope.delete = function(id) {
        if (confirm("Anda yakin untuk menghapus data?") === true) {
            $http.delete('admin/status_pegawai/' + id).success(function(data) {
                $scope.loading = true;
                if (data.success) {
                    getStatus();
                }
            });
        }
    };

Kode diatas buat menghandle proses menghapus data dimana data dikirimkan dengan parameter id , dan ketika sukses menghapus data dari database maka akan meload kembali list data. Tentu juga jangan lupa tambahkan fungsi menghapus data di dalam StatusPegawaiController.php seperti kode dibawah ini:

    public function destroy($id) {
        //
        $statuspegawai = StatusPegawai::find($id);
        if ($statuspegawai->delete()) {
            return Response::json(array('success' => TRUE));
        }
    }

Nah sudah selesai untuk delete data nya ini. Kalo ada yang belum jelas ataupun saran , kritik etc. Silahkan komen saja ya.

Untuk demonya bisa dilihat di http://demo.arnosa.net


Related Article
0 Comments

What are your thoughts? Please leave a comment.