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



02 January 2015 Part 1: Membuat CRUD Sederhana Laravel & Angular JS - Menampilkan Data Posted In: javascript angular angularjs laravel crud

Halo gan , udah dipenghujung tahun 2014 nih , gmana liburannya enak toh?

Kali ini cuman mau share aja pengalaman bikin CROT eh CRUD sederhana menggunakan Angular JS dan Laravel nih. Sebenarnya banyak sekali diinternet bertebaran contoh-contoh membuat crud dengan angular dan laravel.

Tapi gpp , lagian saya lagi belajar mengenai Angular ini , jd gak ada salahnya share toh.Untuk instalasi laravelnya udah gak perlu dijelaskan yah , udah pada bisa pasti yah.

Buat database dengan nama terserah anda hahah, disini saya menamai database dengan simpeg

Kemudian buat tabel dengan nama tbl_master_status_pegawai , kalo mau cepat langsung dengan query seperti dibawah ini :

CREATE TABLE IF NOT EXISTS `tbl_master_status_pegawai` (
  `id_status_pegawai` int(50) NOT NULL AUTO_INCREMENT,
  `nama_status` varchar(150) NOT NULL,
  PRIMARY KEY (`id_status_pegawai`)
)

Setelah tabel dibuat kemudian masukkan beberapa data seperti query dibawahi ini:

INSERT INTO `tbl_master_status_pegawai` (`id_status_pegawai`, `nama_status`) VALUES
(2, 'OUTSOURCING'),
(3, 'HONORER'),
(4, 'CPNS PUSAT'),
(5, 'PNS PUSAT'),
(6, 'CPNS DAERAH'),
(7, 'PNS DAERAH'),
(8, 'PNS RW'),
(9, 'PENSIUN'),
(13, 'ABRI');

Setelah selesai dengan database sekarang buat index.php seperti kode dibawah ini.


 

Laravel & Angular Data Status

 

Dapat dilihat dari script index.php diatas , saya menggunaka bootstrap untuk design dan plugin Route dari angular untuk mengatur routing nya bukan dari laravel. Untuk itu diperlukan sedikit modifikasi di routing laravel. Sekarang mari kita edit route.php yang ada di laravel.

Route::get('/', function()
{
       return View::make('index'); 
});
  
App::missing(function($exception)
{
        return View::make('index');
});

Dari kode diatas dapat dijelaskan , kalo kita menjalankan url misal : http://127.0.0.1/laravel/ maka routing akan tertuju pada view index.php , dan bila url tidak ditemukan maka akan tertuju kembali ke index.php. Dan di index.php tersebut route dari angular akan mengatur routingnya. 

Sekarang saya buat app.js dengan menggunakan routing plugin dari angular. Seperti kode dibawah ini:

var app = angular.module("myApp", ['ngRoute', 'ui.bootstrap']);
 // load aplikasi dengan nama myApp dan plugin ngRoute dan ui.bootstrap
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
    {
        $locationProvider.html5Mode(true);
        $routeProvider
              // route url pertama kali dibuka
                .when("/", {
                    templateUrl: "view/statuspegawai/list.html", // template URL untuk route ini , disimpan di folder public/view
                    controller: "listStatusController" // controller yang akan menghandle halaman
                })
                // route url untuk menambahkan data baru
                .when("/statuspegawai/new", {
                    templateUrl: "view/statuspegawai/new.html",
                    controller: "newStatusController"
                })
                // route url untuk edit data dengan parameter statusId
                .when("/statuspegawai/edit/:statusId", {
                    templateUrl: "view/statuspegawai/new.html",
                    controller: "editStatusController"
                })
                 // bila route tidak ditemukan kembali ke default
                .otherwise({
                    redirectTo: "/"
                });
    }]);

Nah dari kode diatas sudah saya beri sedikit penjelasan , disini saya menggunakan virtual host jadi biar lebih gampang kalo manggil url nya . Bagi yang belum ngerti setting vhost bisa dicari dibaca dan dipraktekan yang ada di google.

Sekarang untuk list.html nya kode nya seperti dibawah ini:


 

CRUD Sederhana MenggunakanLaravel & Angular.js

Tambah Status

 

{{field| labelCase}} Aksi
{{status[field]}}  

Dari kode diatas sih emang kalo dijalankan di web pasti akan terjadi error karena kita belum membuat controller untuk menampilkan data. Untuk itu sekarang ditambahkan kode di app.js seperti kode dibawah ini:

app.controller('listStatusController', function($scope, $http) { 
    $scope.statuses = {}; // data statuses awal yang merupakan array kosong.
    $scope.loading = true; // loading icon bernilai true
    getStatus(); // memanggil fungsi getStatus()
    
    // fungsi sorting data ASC/DESC
    $scope.sort = function(field) {
        $scope.sort.field = field;
        $scope.sort.order = !$scope.sort.order;
    }
    $scope.sort.field = 'nama_status';
    $scope.sort.order = false;
    
// fungsi getStatus untuk memanggil data dalam bentuk json dan juga fungsi mengatur paginasi
    function getStatus() {
        $http.get('api/test').success(function(data) {
            $scope.fields = data.field;
            $scope.statuses = data.values;
            $scope.totalItems = $scope.statuses.length;
            $scope.currentPage = 1;
            $scope.numPerPage = 10;

            $scope.paginate = function(value) {
                var begin, end, index;
                begin = ($scope.currentPage - 1) * $scope.numPerPage;
                end = begin + $scope.numPerPage;
                index = $scope.statuses.indexOf(value);
                return (begin <= index && index < end);
            };
            $scope.loading = false;
        });
    }
});

Setelah kode diatas ditambahkan di file app.js , kemudian membuat route di laravel untuk memanggilkan data dalam bentuk json.

Route::get('/test', array('as' => 'api.test', 'uses' => 'StatusPegawaiController@jsonStatusPegawai'));

tambahkan kode diatas di routes.php , kemudian membuat suatu fungsi dicontroller untuk menampilkan data dalam bentuk json di file StatusPegawaiController.php. Kodenya seperti dibawah ini:

    public function jsonStatusPegawai() {
        // data array yang menampung data berupa nama field tabel dan values dari tabel.
        $data = array(
            'field' => StatusPegawai::getColumn(),
            'values' => StatusPegawai::orderBy('id_status_pegawai')->get()
        );
        return Response::json($data);
    }

Nah setelah menambahkan controller di laravel nya , tentu kita harus membuat model . Lihat kode StatusPegawai::getColumn() untuk memanggilkan model dengan fungsi getColumn sedangkan StatusPegawai::orderBy('id_status_pegawai')->get()? adalah eloquent query untuk menampilkan data di laravel. Untuk modelnya kita buat fungsi getColumn() nya seperti kode dibawah ini:

select('COLUMN_NAME')
                ->where('table_name', $this->table)
                ->where('column_key', '!=', 'PRI')
                ->get();
        foreach ($columns as $col) {
            $data[] = $col->COLUMN_NAME;
        }
        return $data;
    }

}

Kode diatas merupakan kode yang ada di dalam model StatusPegawai yang mempunyai fungsi getColumn untuk menampilkan nama kolom tabel. Setelah selesai dengan semua kode diatas coba buka browser maka tampilannya akan menjadi seperti ini :

Laravel & Angular CRUD

Nah sudah selesai untuk menampilkan data dengan laravel dan angular js , untuk edit maupun delete nya lanjut kapan2 kalo ada waktu. Kalo semisal ada pertanyaan/saran/kritik atau apapun itu silahkan komen saja.


Related Article
5 Comments

  1. image
    agung

    index dan list.html nya kok tidak terlihat ya?


  2. image
    Harry

    jebule pindah laravel (y)


  3. image
    Wasi Arnosa

    Iya suhu, hormat dulu ama suhu Harry


  4. image
    fifah

    mas mau nanya file app.js di taruh dimana ya, maaf new be masih cupu


  5. image
    Wasi Arnosa

    @fifah kalo contoh diatas didalam folder project-laravel/public/angular


What are your thoughts? Please leave a comment.