Tutorial Laravel Fullstack Dan Restfull API [PDF]

Citation preview

1. FULLSTACK LARAVEL



INSTALLASI LARAVEL 1. Install XAMPP terbaru yang memiliki PHP versi 7.x.x Download di : https://www.apachefriends.org/download.html 2. Install Composer, merupakan aplikasi command prompt digunakan untuk membantu proses install Laravel dan paket library Download di : https://getcomposer.org/ 3. Setelah ke dua aplikasi di atas terinstall, silahkan buka CMD dan jalankan perintah : Composer -V Untuk mengecek apakah composer kalian telah terinstall dengan benar atau belum. Jika muncul versi composer, maka composer berhasil terinstall di computer kalian. 4. Proses installasi Laravel - Arahkan directory CMD kalian ke C:\XAMPP\htdocs\ dengan perintah cd c:/xampp/htdocs atau sesuaikan dengan lokasi installasi xampp kalian. - Masukan perintah: composer create-project laravel/laravel nama_project --prefer-dist 5.8 - Kita menggunakan laravel versi 5.8 karena sudah stabil - Tunggu beberapa saat untuk mendownload file-file framework Laravel pada folder htdocs 5. Setelah installasi selesai, buka http://localhost/nama_project/public



TEMPLATING LARAVEL --------- copy assets ---------1. Untuk studi kasus, silahkan download template front end sederhana yang sudah di share di classroom 2. Buka project Laravel yang telah terinstall menggunakan code editor 3. Extract template frint end yang telah di download, kemudian copy paste folder css,js,fonts,img,sass ke dalam folder public pada Laravel --------- buat file template ------4. buat view baru di folder resource -> views klik kanan dan buat file baru bernama template.blade.php 5. Copy script yang ada di halaman index.html, kemudian paste ke dalam template.blade.php. Modifikasi script tersebut seperti di bawah ini.



{{url(‘public/bla/blabla’}} digunakan untuk memanggil file assets, kita sering menyebutnya dengan base_url 6. Untuk menampilkan halaman dashboard/home, buat file view baru dengan nama index.blade.php. isikan view tersebut dengan script di bawah ini



7. Untuk menampilkan view template dan halaman home di atas, kita perlu sebuah controller. Buat controller baru dengan nama Kontak.php. Dengan menerapkan composer, kita dapat membuat controller dengan cepat. Masukan perintah berikut pada CMD. php artisan make:controller Kontak --resource Note: resource adalah command otomatis laravel sehingga tercipta fungsi-fungsi dasar Controller seperti Index, Create, Store, Update, Show, dan Destroy.



8. Tambahkan script di bawah ini pada method index controller Kontak untuk menampilkan view halaman dashboard/home



9. Antara controller Kontak dan view Index masih belum bisa terhubung meskipun kita sudah menambahkan pada sebuah method. Pada Laravel perlu penambahan ROUTE yang berfungsi untuk mengarahkan/menyambungkan view dengan controller, sehingga kita dapat mengakses melalui browser. Letak file ROUTE pada folder routes->web.php 10. Hapus semua route default yang ada sebelumnya, ganti dengan script di bawah ini:



Maksud dari route di atas adalah, jika kita membuka halaman http://localhost/belajar_laravel/ maka secara otomatis url tersebut akan mengarahkan ke dalam controller Kontak method index. Kita ketahui bahwa di dalam method index yang kita buat tadi sudah ditambahkan script untuk menampilkan halaman dashboard/home. Berikut tutorial sederhana templating pada laravel. Silahkan mengekdplore diri terkait Laravel, agar pemahaman kalian lebih dalam dan lebih luas.



CRUD LARAVEL SELECT DATA



------------ konfigurasi Connect DB ------------1. Buat database baru dengan nama belajar_laravel 2. Buat desain database seperti dibawah ini :



3. Konfigurasi file .env yang terletak pada root folder Laravel kalian seperti bawah ini:



sesuaikan dengan konfigurasi database kalian



-------------- Model -------------4. Buat model baru dengan nama ModelKontak.php. Caranya dengan menggunakan composer, ketikan perintah berikut ini : php artisan make:model ModelKontak 5. Ubah file Model yang sudah kita buat dengan membuka folder app -> ModelKontak.php dan edit isinya seperti ini:



note: protected $table adalah variable untuk menentukan bahwa table yang digunakan pada model itu adalah kontak.



-------------- Controller -----------6. Buat controller baru bernama Kontak, cara membuatnya dengan memasukan perintah seperti di bawah ini: php artisan make:controller Kontak 7. Buka controller pada app -> Http -> Controllers -> Kontak.php lalu edit pada bagian method index seperti berikut



Jangan lupa melakukan import model pada controller Kontak dengan memasukan script berikut pada bagian atas:



----------- Views -----------8. Buat sebuah view baru dengan nama kontak.blade.php untuk menampilkan/menselect semua data kontak, dan dimasukan ke dalam tabel. Berikut script untuk menampilkan data kontak ke dalam tampilan tabel.



--------------- Routes -------------9. Untuk menggabungkan method index pada controller Kontak dengan view kontak.blade.php, maka kalian perlu menambahkan script pada routes untuk mengatur URL dan nantinya URL tersebut dapat diakses melalui browser. 10. Buka routes pada folder routes->web.php, kemudian ubah script routes yang sebelumnya seperti ini:



11. Akses hasilnya dengan membuka halaman http://localhost/belajar_laravel/public/kontak



CRUD LARAVEL INSERT DATA …..Lanjutan dari modul CRUD LARAVEL (SELECT) 1. Untuk menampilkan halaman tambah data kontak, kalian perlu membuat sebuah view baru bernama kontak_create.blade.php dan masukkan script dibawah ini:



2. Setelah membuat view tambah data, ubah controller Kontak.php dengan menambahkan script method tambah seperti berikut ini. Method tambah



note: method tambah digunakan untuk menampilkan halaman tambah data



jangan lupa untuk menambahkan script pemanggilan model kategori (kategoriModel) di paling atas



3. Buatlah kategoriModel dengan cmd dengan script seperti dibawah ini: php artisan make:model kategoriModel edit file model kategori di app/kategoriModel seperti dibawah ini gambar kategoriModel



4. Edit routesnya di web.php 5. Routes Ini untuk menampilkan desain tambah 6. 7. Routes Ini untuk proses simpan kontaknya 8. 9. Buatlah method simpan_tambah di controller Kontak



10. 11. Jangan lupa ditambahkan script use Session di paling atas untuk memanggil class session seperti dibawah ini



Note: method simpan_tambah digunakan untuk melakukan penyimpanan ketika kita menambah data.



Silahkan membuka url http://localhost/belajar_laravel/public/kontak/tambah kemudian masukan penambahan data sesuai form isian. Jika muncul tampilan seperti berikut, maka kalian telah berhasil melakukan insert data menggunakan Laravel.



Jika inputannya tidak diisi akan tampil seperti ini



Jika formnya diisi dengan benar akan tampil seperti ini



*** SELAMAT BELAJAR LARAVEL JANGAN LUPA EKSPLORASI HAL-HAL TERKAIT LARAVEL



CRUD LARAVEL UPDATE DATA …..Lanjutan dari modul CRUD LARAVEL (INSERT) 1. Untuk menampilkan halaman tambah data kontak, kalian perlu membuat sebuah view baru bernama kontak_edit.blade.php dan masukkan script dibawah ini:



2. Setelah membuat view edit kontak, ubah controller Kontak.php dengan menambahkan script pada method edit dan update seperti berikut ini. Method edit



note: method edit digunakan untuk menampilkan halaman edit dan data sebelum diubah



Method update



Note: method update digunakan untuk melakukan penyimpanan ketika kita mengubah data.



3. Silahkan membuka url http://localhost/belajar_laravel/public/kontak/ , kemudian klik button Edit pada data yang akan di ubah. Tampilan data sebelum di edit



Tampilan data berhasil diedit



*** SELAMAT BELAJAR LARAVEL JANGAN LUPA EKSPLORASI HAL-HAL TERKAIT LARAVEL



CRUD LARAVEL DELETE DATA …..Lanjutan dari modul CRUD LARAVEL (UPDATE) 1. Sebelumnya kita sudah membuat button Hapus pada kontak.blade.php. Button tersebut akan mengarah ke url kontak/hapus/parameter id_kontak.



2. Edit routesnya di web.php 3. 4. Setelah membuat button hapus pada view kontak dan mengedit routesnya, ubah controller Kontak.php dengan menambahkan script pada method hapus seperti berikut ini.



5. Silahkan membuka url http://localhost/belajar_laravel/public/kontak , kemudian klik button hapus pada data yang akan di hapus.



*** SELAMAT BELAJAR LARAVEL JANGAN LUPA EKSPLORASI HAL-HAL TERKAIT LARAVEL



CRUD LARAVEL LOGIN PAGE …..Lanjutan dari modul CRUD LARAVEL (setelah semua CRUD selesai dibuat) 1. Buatlah halaman view login.blade.php di folder resource/view (template login BSB admin material design)



2. Atur routesnya di web.php 3. Buatlah controller Login dengan cmd 4. php artisan make:controller Login 5. jika sudah membuat controller menggunakan cmd php artisan, buka controller Login , buatlah method index seperti dibawah ini



6. Atur routesnya di web.php untuk url login/cek 7. 8. Buka controller login , buatlah method cek dengan parameter Request seperti di gambar ini



9. 10. Jika sudah selesai membuat method cek, buatlah halaman dashboard.blade.php untuk user yang sudah melakukan login benar. Seperti diawah ini



11. 12. Atur routesnya di web.php untuk menampilkan dashboard 13. 14. Jika blm punya controller dashboard, silahkan membuat controller dengan cmd artisan 15. php artisan make:controller Dashboard 16. buka controller dashboard, lalu buatlah method index untuk menampilkan halaman dashboard



17.



18. Membuat mengecekan status login 19. Ini berfungsi untuk menghalangi user membuka halaman dashboard atau yang lainnya yang membutuhkan login dulu dengan menggunakan middleware 20. Buatlah halaman middleware dengan cmd artisan seperti dibawah ini: 21. php artisan make:middleware cek_login 22. buka file middleware cek_login di app/http/middleware 23. dan tambahkan script if pengecekan variable session login_status true atau tidak. Dan jangan lupa memanggil class session yang diletakkan di diatas class cek_login



24. 25. Selanjutnya tambahkan script pemanggilan middleware cek_login di kernel.php yang terletak di app/http/kernel.php , cari variable $routeMiddleware dan letakkan didalamnya seperti dibawah ini:



26. 27. Selanjutnya pemasangan cek_login di setiap controller yang hanya bisa diaccess setelah login sukses. 28. Misalkan di dashboard yang mana halaman ini perlu login terlebih dahulu. 29. Buka controller dashboard lalu tambahkan script construct didalam class diluar method.



30. 31. Di controller kontak kita kasih middleware agar login dulu sebelum buka kontak Membuat logout 32. Buatlah menu logout di template.blade.php seperti dibawah ini 33. 34. Atur routesnya di web.php dengan menambahkan script dibawah ini 35. 36. Sekarang buka controller login dan buatlah method logout



37. Silahkan dicoba buka kontak atau dashboard tanpa login, akan langsung ditolak dan diarahkan ke login



2. RESTFULL API LARAVEL



CRUD API LARAVEL Insert 1. Siapkan database dengan nama crud_laravel di phpmyadmin. 2. Buatlah table dengan nama siswa beserta kolom-kolom sebagai berikut: - id (int primaryKey autoIncrement) - nama_siswa (varchar 100) - tanggal_lahir (date) - gender (enum) - alamat (text) - id_kelas (int) 3. buatlah table dengan nama kelas beserta kolom-kolom sebagai berikut: - id (int primaryKey autoIncrement) - nama_kelas (varchar 100) - kelompok (varchar 100) 4. Buatlah Siswamodel dan Kelasmodel di command prompt dengan ketik php artisan make:model Siswamodel php artisan make:model Kelasmodel 5. Buka file model Kelasmodel di App/Kelasmodel.php 6. Edit isinya seperti dibawah ini:



7. Buka file model Siswamodel di App/Siswamodel.php 8. Edit isinya seperti dibawah ini:



9. Buatlah file controller Siswacontroller di command prompt dengan ketik :



php artisan make:controller Siswacontroller php artisan make:controller Kelascontroller 10. Buka file controller Kelascontroller di App\http\controller\Kelascontroller.php lalu isikan seperti dibawah ini:



11. Buka routes\api.php untuk mengatur url nya, lalu edit seperti dibawah ini: 12. Jika sudah selesai, maka saatnya percobaan entri data kelas di aplikasi postman, jika belum ada aplikasi postman, silahkan diinstal terlebih dahulu. 13. Untuk mencobanya buka postman lalu masukkan url http://localhost/crud_api_laravel/public/api/simpan_kelas 14. Ganti method nya dengan POST 15. Isikan nama kolom sesuai kolom yang ada di database pada table siswa dan datanya. 16. Jangan lupa centang tab body lalu pilih form-data



17. Buka controller Siswacontroller di App\http\controller\Siswacontroller.php lalu isikan seperti dibawah ini:



18. Buka routes\api.php untuk mengatur url nya, lalu edit seperti dibawah ini:



19. Jika sudah selesai, maka saatnya percobaan entri data siswa di aplikasi postman. 20. Untuk mencobanya buka postman lalu masukkan url http://localhost/crud_api_laravel/public/api/simpan_siswa 21. Ganti method nya dengan POST 22. Isikan nama kolom sesuai kolom yang ada di database pada table siswa dan datanya. 23. Jangan lupa centang tab body lalu pilih form-data



Update 1. Buka App\http\controller\Siswacontroller.php 2. Buatlah function update() di siswacontroller.php seperti script dibawah ini:



3. Tambahkan setting routes di routes\api.php 4. Untuk mencobanya buka postman lalu masukkan url http://localhost/crud_api_laravel/public/api/ubah_siswa/1 5. Ganti method nya dengan PUT 6. Isikan nama kolom sesuai kolom yang ada di database pada table siswa dan datanya. 7. Jangan lupa centang tab body lalu pilih x-www-form-urlencoded 8. Lalu klik send



Delete 1. Buka App\http\controller\Siswacontroller.php



2. Buatlah function destroy() di siswacontroller.php seperti script dibawah ini:



3. Tambahkan setting routes di routes\api.php 4. Untuk mencobanya buka postman lalu masukkan url http://localhost/crud_api_laravel/public/api/hapus_siswa/1 5. Ganti method nya dengan delete 6. Lalu klik send



Select JOIN 1. App\http\controller\Siswacontroller.php 2. Buatlah function tampil_siswa() di siswacontroller.php seperti script dibawah ini:



3. Tambahkan setting routes di routes\api.php 4. Untuk mencobanya buka postman lalu masukkan url http://localhost/crud_api_laravel/public/api/tampil_siswa 5. Ganti method nya dengan GET 6. Lalu klik send



JWT-LARAVEL Api Authentication 1. Install JWT Packagenya dengan mengetik perintah composer require tymon/jwt-auth:dev-develop --prefer-source



2. Jangan lupa setting .env sesuai dengan settingan database kalian. 3. Lalu buka config/app.php 4. Di bagian Provider tambahkan 1 baris code seperti ini: Tymon\JWTAuth\Providers\LaravelServiceProvider::class, 5. Di Bagian Aliases tambahkan 2 baris code seperti ini 'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class, 'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class, 6. Setelah itu publish JWT Packagenya dengan mengetik perintah php artisan vendor:publish -provider="Tymon\JWTAuth\Providers\LaravelServiceProvider" 7. Lalu buat jwt-auth secretnya dengan mengetik perintah php artisan jwt:secret 8. Setelah itu buka file Model User, lokasi filenya ada di app/User.phpbuatlah seperti ini