#PART6 : Tutorial membuat web CV Dinamis menggunakan Laravel 5, CRUD Pengalaman Kerja
Assalaamualaikum..
Setelah di part sebelum nya kita membuat modul untuk upload photo, maka sekarang kita mulai masuk ke part 6, yaitu management pengalaman kerja.
Tapi pada part 6 ini, kita baru hanya menampilkan data pengalaman kerja aja..
Jadi langsung saja yaaa..
Pertama, kamu buat table baru terlebih dahulu dengan nama pengalaman.
Seperti biasa, kita buat nya melalui migration, buka cmd kalian, arahkan ke project direktori, kemudian ketikkan perintah dibawah ini
Setelah perintah diatas dijalankan, maka akan tercipta sebuah file migration baru yang berada di dalam folder /database/migrations, untuk sebuah file migration yang baru saja dibuat, biasanya akan berada di list paling bawah.
Buka file tersebut, dan modifikasi seperti dibawah ini :
Sedikit penjelasan mengenai koding di atas..
kita mendeklarasikan field pengalaman_id sebagai auto increment, yang artinya nilai nya akan otomatis terisi.
Untuk filed dari dan sampai, kita deklarasikan dengan tipe data string, kenapa bukan date? karena suatu alasan yang nanti nya juga akan di pahami oleh teman2 sendiri hehe..
dan sisa nya sama seperti biasa.
oh iya, function nullable() digunakan jika filed tersebut boleh null.
Selanjutnya jalankan perintah ini :
Maka setelah itu, otomatis akan terbuat sebuah table baru yang bernama pengalaman dengan struktur seperti yang telah di tentukan, bisa di lihat pada gambar dibawah ini :
Setelah table terbuat, selanjutnya kita buat route baru untuk mengatur pengalaman kerja.
Tidak seperti sebelumnya, disini kita membuat 4 buah route baru dengan 2 method get, 1 put dan 1 post.
Pada Method get pertama, kita gunakan untuk menampilkan list dari pengalaman kerja yang telah kita input dan mengirim nya ke sebuah view.
Pada method post, kita gunakan untuk menginput data baru dari sebuah pengalaman kerja.
Pada method get kedua kita gunakan untuk mengambil 1 data dari pengalaman kerja, dan mengirim untuk ditampilkan didalam sebuah view.
Sementara unruk method put, kita gunakan untuk pemrosesan update data dari pengalaman kerja.
Intinya untuk ke 4 route di atas, kita gunakan untuk CRUD pengalaman kerja.
Sesuai dengan Route yang baru saja kita buat pada tahap ke-2, route tersebut mengarahkan kita ke file Pengalaman_controller.php yang ada didalam folder Admin, atau struktur lengkap dari direktori nya adalah seperti ini : /App/Http/Controllers/Admin/Pengalaman_controller.php
Untuk pembuatan file controller nya, kita lakukan melalui php artisan, ketikkan perintah seperti dibawah ini :
Setelah perintah tersebut dijalankan, maka otomatis akan tercipta sebuah file Pengalaman_controller.php yang berada didalam direktori /App/Http/Controllers/Admin.
Setelah kita buat route nya, kemudian sudah kita buat juga controller nya, selanjutnya kita coba untuk menampilkan data yang ada di dalam table pengalaman.
kita buat method index di dalam Pengalaman_controller.php
Pada method index di atas, kita mendeklarasikan variabel title, kemudian kita juga menarik data yang ada di table pengalaman dan menampung nya ke dala variabel $pengalaman.
Setelah itu kita memanggil view pengalaman_index, sekaligus membawa variabel title dan pengalaman kedalam view tersebut.
Sekarang kita buat view nya..
Kita buat terlebih dahulu folder yang bernama pengalaman di dalam /resources/views.
Setelah itu buat file pengalaman_index.php di dalam folder pengalaman tersebut, dan isi seperti dibawah ini :
Untuk table di atas, kita menggunakan datatables, walaupun masih client side.
Dan kita juga sudah menambahkan sebuah button untuk menambahkan pengalaman kerja, walaupun masih belum berfungsi.
Sekarang coba kita buka http://localhost/cv/admin/manage-pengalaman
Seharusnya akan muncul seperti tampilan dibawah ini :
Diatas memang masih belum ada datanya, karena kita memang masih belum menambahkan nya.
Mimin ada 1 route yang tertinggal, route untuk mengarahkan kita ke view tambah data, tambahkan seperti dibawah ini :
Setelah itu buat method add dan store pada file Pengalaman_controller.php
Kita juga harus membuat file view baru, yaitu pengalaman_add.blade.php, buat didalam folder /resources/views/pengalaman, dan isi seperti ini :
Dan nanti akan tampil seperti dibawah ini :
Jika tambah data telah berhasil, maka nanti list pengalaman nya akan terisi :
Tambahkan method edit, update, dan delete pada file Pengalaman_controller.php
Pada method edit adalah untuk memanggil view edit data (pengalaman_edit), di method ini pertama-pertama kita mengambil 1 data berdasarkan id yang sudah di tentukan, serta mengirim nya ke view pengalaman_edit.
Sementara method update adalah untuk pemrosesan update data nya, seperti biasa, disini kita memvalidasi nilai yang masuk dari form, semuanya required alias wajib diisi, kecuali inputan sampai, setelah itu kita juga membungkusnya dengan exception handling (try-catch).
Dan terakhir method delete adalah untuk menghapus data nya, disini kita menghapus data berdasarkan id yang sudah di tentukan dari parameter nya.
Ubah sedikit view pengalaman_index.blade.php seperti ini
Pada file di atas kita modifikasi sedikit, sehingga kita mempunya kolom baru yang bernama action, kolom ini untuk mengarahkan kita ke edit data ataupun hapus data, jika kita membuka : http://localhost/cv/public/admin/manage-pengalaman, maka tampilan nya akan menjadi seperti ini :
Ketika kita meng klik icon edit, maka kita akan diarahkan ke tampilan seperti ini :
Kalo kita klik icon hapus, maka akan muncul alert seperti ini :
Tapi sebelumnya, kamu juga harus menambahkan file /resources/view/pengalaman/pengalaman_edit.blade.php, dan isi seperti dibawah ini :
Setelah itu yang terakhir, kita tambahkan menu baru di sidebar agar bisa langsung mengakses halaman manage pengalaman kerja hanya dengan 1 kali klik saja.
Modifikasi /resources/views/layouts/sidebar.blade.php :
Sekian untuk part kali ini.
#PART7 : Tutorial membuat web CV Dinamis menggunakan Laravel 5, CheckPoint - penyesuaian koding antara milik mimin dengan milik kalian
#PART5 : Tutorial membuat web CV Dinamis menggunakan Laravel 5, Upload Photo Profile
Terima jasa pembuatan Website :
- hubungi : 0896-0849-8550 (WA)
Setelah di part sebelum nya kita membuat modul untuk upload photo, maka sekarang kita mulai masuk ke part 6, yaitu management pengalaman kerja.
Tapi pada part 6 ini, kita baru hanya menampilkan data pengalaman kerja aja..
Jadi langsung saja yaaa..
1. Buat table pengalaman dengan migration laravel
Pertama, kamu buat table baru terlebih dahulu dengan nama pengalaman.
Seperti biasa, kita buat nya melalui migration, buka cmd kalian, arahkan ke project direktori, kemudian ketikkan perintah dibawah ini
Setelah perintah diatas dijalankan, maka akan tercipta sebuah file migration baru yang berada di dalam folder /database/migrations, untuk sebuah file migration yang baru saja dibuat, biasanya akan berada di list paling bawah.
Buka file tersebut, dan modifikasi seperti dibawah ini :
Sedikit penjelasan mengenai koding di atas..
kita mendeklarasikan field pengalaman_id sebagai auto increment, yang artinya nilai nya akan otomatis terisi.
Untuk filed dari dan sampai, kita deklarasikan dengan tipe data string, kenapa bukan date? karena suatu alasan yang nanti nya juga akan di pahami oleh teman2 sendiri hehe..
dan sisa nya sama seperti biasa.
oh iya, function nullable() digunakan jika filed tersebut boleh null.
Selanjutnya jalankan perintah ini :
Maka setelah itu, otomatis akan terbuat sebuah table baru yang bernama pengalaman dengan struktur seperti yang telah di tentukan, bisa di lihat pada gambar dibawah ini :
2. Buat Route baru
Setelah table terbuat, selanjutnya kita buat route baru untuk mengatur pengalaman kerja.
Tidak seperti sebelumnya, disini kita membuat 4 buah route baru dengan 2 method get, 1 put dan 1 post.
Pada Method get pertama, kita gunakan untuk menampilkan list dari pengalaman kerja yang telah kita input dan mengirim nya ke sebuah view.
Pada method post, kita gunakan untuk menginput data baru dari sebuah pengalaman kerja.
Pada method get kedua kita gunakan untuk mengambil 1 data dari pengalaman kerja, dan mengirim untuk ditampilkan didalam sebuah view.
Sementara unruk method put, kita gunakan untuk pemrosesan update data dari pengalaman kerja.
Intinya untuk ke 4 route di atas, kita gunakan untuk CRUD pengalaman kerja.
3. Buat controller baru bernama Pengalaman_controller.php
Sesuai dengan Route yang baru saja kita buat pada tahap ke-2, route tersebut mengarahkan kita ke file Pengalaman_controller.php yang ada didalam folder Admin, atau struktur lengkap dari direktori nya adalah seperti ini : /App/Http/Controllers/Admin/Pengalaman_controller.php
Untuk pembuatan file controller nya, kita lakukan melalui php artisan, ketikkan perintah seperti dibawah ini :
Setelah perintah tersebut dijalankan, maka otomatis akan tercipta sebuah file Pengalaman_controller.php yang berada didalam direktori /App/Http/Controllers/Admin.
4. Menampilkan list pengalaman kerja
Setelah kita buat route nya, kemudian sudah kita buat juga controller nya, selanjutnya kita coba untuk menampilkan data yang ada di dalam table pengalaman.
kita buat method index di dalam Pengalaman_controller.php
Pada method index di atas, kita mendeklarasikan variabel title, kemudian kita juga menarik data yang ada di table pengalaman dan menampung nya ke dala variabel $pengalaman.
Setelah itu kita memanggil view pengalaman_index, sekaligus membawa variabel title dan pengalaman kedalam view tersebut.
Sekarang kita buat view nya..
Kita buat terlebih dahulu folder yang bernama pengalaman di dalam /resources/views.
Setelah itu buat file pengalaman_index.php di dalam folder pengalaman tersebut, dan isi seperti dibawah ini :
Untuk table di atas, kita menggunakan datatables, walaupun masih client side.
Dan kita juga sudah menambahkan sebuah button untuk menambahkan pengalaman kerja, walaupun masih belum berfungsi.
Sekarang coba kita buka http://localhost/cv/admin/manage-pengalaman
Seharusnya akan muncul seperti tampilan dibawah ini :
5. Tambah Pengalaman kerja
Mimin ada 1 route yang tertinggal, route untuk mengarahkan kita ke view tambah data, tambahkan seperti dibawah ini :
Setelah itu buat method add dan store pada file Pengalaman_controller.php
Kita juga harus membuat file view baru, yaitu pengalaman_add.blade.php, buat didalam folder /resources/views/pengalaman, dan isi seperti ini :
Dan nanti akan tampil seperti dibawah ini :
6. Edit Pengalaman dan Hapus Pengalaman
Tambahkan method edit, update, dan delete pada file Pengalaman_controller.php
Pada method edit adalah untuk memanggil view edit data (pengalaman_edit), di method ini pertama-pertama kita mengambil 1 data berdasarkan id yang sudah di tentukan, serta mengirim nya ke view pengalaman_edit.
Sementara method update adalah untuk pemrosesan update data nya, seperti biasa, disini kita memvalidasi nilai yang masuk dari form, semuanya required alias wajib diisi, kecuali inputan sampai, setelah itu kita juga membungkusnya dengan exception handling (try-catch).
Dan terakhir method delete adalah untuk menghapus data nya, disini kita menghapus data berdasarkan id yang sudah di tentukan dari parameter nya.
Ubah sedikit view pengalaman_index.blade.php seperti ini
Pada file di atas kita modifikasi sedikit, sehingga kita mempunya kolom baru yang bernama action, kolom ini untuk mengarahkan kita ke edit data ataupun hapus data, jika kita membuka : http://localhost/cv/public/admin/manage-pengalaman, maka tampilan nya akan menjadi seperti ini :
Setelah itu yang terakhir, kita tambahkan menu baru di sidebar agar bisa langsung mengakses halaman manage pengalaman kerja hanya dengan 1 kali klik saja.
Modifikasi /resources/views/layouts/sidebar.blade.php :
Sekian untuk part kali ini.
#PART7 : Tutorial membuat web CV Dinamis menggunakan Laravel 5, CheckPoint - penyesuaian koding antara milik mimin dengan milik kalian
#PART5 : Tutorial membuat web CV Dinamis menggunakan Laravel 5, Upload Photo Profile
Terima jasa pembuatan Website :
- hubungi : 0896-0849-8550 (WA)
Belum ada Komentar untuk "#PART6 : Tutorial membuat web CV Dinamis menggunakan Laravel 5, CRUD Pengalaman Kerja"
Posting Komentar