Showing posts with label web. Show all posts

 

 

Halo teman-teman semua apa kabar? Kita akan untuk melakukan koneksi ke database MySQL dan mempelajari sesuatu yang disebut dengan migration...

Halo teman-teman semua apa kabar?

Kita akan untuk melakukan koneksi ke database MySQL dan mempelajari sesuatu yang disebut dengan migration.

Sebelum kita masuk untuk membahas lebih dalam mengenai database dan juga migration di dalam laravel kita akan sedikit mengulas mengenai sesuatu yang disebut dengan environment variables.

Dalam project Laravel, ada file .env, kita akan gunakan untuk melakukan setting pada lingkungan pengembangan aplikasi kita, konfigurasi ini seharusnya hanya diketahui oleh developernya saja, dengan alasan keamanan.

Kita konfigurasi dulu database nya

  • DB_DATABASE : Nama database
  • DB_USERNAME : Username database
  • DB_PASSWORD : Password database (jika database kalian tidak memakai password, tidak usah di isi) 

Jangan lupa buat database nya yaaa
Sekarang kita akan membuat migration, migration itu apa?
Migration itu seperti version control untuk database, memungkinkan kita dan tim untuk mendefinisikan serta mendistribusikan atau membagikan atau struktur table lewat codingan.

Yukkk langsung praktek..
Rename file app/Models/Movies.php kalo kalian butuh untuk history belajar, atau bisa juga dihapus, karena kita akan mebuat model sekaligus migration menggunakan 1 perintah artisan.
For your information, kita bisa ketikkan perintah 
  php artisan help make:model  
Untuk melihat fungsi dan option apa yang bisa digunakan

Karena kita akan membuat model sekaligus migration nya maka bisa menggunakan perintah artisan dibawah ini pada terminal vscode (CTRL + `)

  php artisan make:model POST -m   

Ubah file migration seperti dibawah ini, lalu jalankan perintah php artisan migrate

Maka table akan otomatis dibuatkan, kalian bisa cek ke phpMyAdmin, akan ada 6 table, 1 table movies, 4 table default laravel dan 1 table migration untuk menyimpan history migration kita.

Kita masih bekerja di terminal menggunakan Laravel artisan tinker, ini  adalah REPL (Read Eval Print Loop) sebuah bahasa shell yang interaktif, menggunakan single user input, mengolahnya dan mengembalikan nilai berdasarkan input yang diberikan kepada user. 
Pada penerapan yang sebenarnya, kita akan berinteraksi dengan code berikut untuk memanipulasi database. Saat ini kita kan mencoba untuk insert data ke table menggunakan tinker.
  • Ketikkan perintah   php artisan tinker  
  • Deklarasi instance Movie
  • Lengkapi data title, year, duration, genres, actors, plot dan poster url
  • Terakhir, ketikkan $movie->save() untuk menyimpan
Insert data ke table movies berhasil, kalian juga bisa insert data nya lewat phpMyAdmin. Disarankan untuk menambahkan beberapa data movie lagi yaa..

Di Laravel tinker, bisa mencoba mengetikkan berbagai perintah untuk berinteraksi dengan data. Ini adalah contoh command yang bisa kalian coba sendiri
  • Movie::all()    : menampilkan semua data
  • Movie::first()    : menampilkan data pertama
  • Movie::pluck(‘title’)  : menampilkan semua judul dari data Movie

Selanjutnya, comment beberapa line di file resources/views/home.blade.php, seperti contoh dibawah ini
Lalu kita akan mulai meggunakan controller untuk menghubungkan antara model dan views yang sudah dibuat
Akses console(CTRL + `) pada vscode lalu ketikkan perintah 
  php artisan make:controller HomeController -r  
Maksud penggunaan -r pada perintah artisan itu, agar pada file controller yang dibuat sudah di sediakan function index, create, store, show, edit, update, dan destroy

Ubah controller seperti code dibawah ini yaa..

Ubah file web.php juga
Karena di database kolom poster url kita itu poster_url, kita juga harus ubah home.blade.php menjadi seperti ini

Dan selesai, untuk berlatih, kalian bisa mencoba untuk menampilkan item movie lainnya yaa, sampai ketemu di part selanjutnya👍



Ini adalah part singkat untuk mengubah tampilan web yang sudah kita buat menjadi seperti Netflix, ini adalah hasil akhirnya Saya sudah menyi...

Ini adalah part singkat untuk mengubah tampilan web yang sudah kita buat menjadi seperti Netflix, ini adalah hasil akhirnya

Saya sudah menyiapkan satu branch di repository github untuk bisa kalian ikuti atau dijadikan referensi, yang bisa diakses pada link dibawah ini
https://github.com/nioniarthaputri/laravel-2/tree/part-4

Folder img : tidak perlu di download, untuk menampilkan image bisa memakai link, seperi link poster yang ada di file app/models/Movies.php
Movie.php : ini adalah file model yang ada di folder app/Models/Movie.php, file sementara untuk menyimpan data movie, di artikel selanjutnya kita akan menggunakan database
app.css : replace semua code yang ada di public/assets/css/app.css dengan yang ada di github
home.blade.php & main.blade.php : file views di folder resources/views/ yang bisa di copy paste ke projek kalian

Di file home.blade.php, kita menggunakan @foreach untuk mendeklarasikan foreach loop, tidak perlu menggunakan syntax php seperti biasanya.

Foreach merupakan perintah perulangan yang istimewa karena kita tak perlu menentukan batas akhir perulangan itu sendiri, dan perulangannya pasti sama dengan jumlah data dalam variabel yang diulang, itu adalah kelebihan foreach, karena bisa otomatis menghentikan perulangan tanpa menentukan batas akhir untuk berhenti.

Maksud dari foreach $trending as $t adalah memecah nama variabel $trending menjadi $t.  Jadi, nilai dari $t adalah nilai tiap index dari $trending, yang asalnya $trending memiliki banyak data movie, kini dipecah menjadi $t yang berisi 1 bundle data movie ("id", "title", "slug", dst). $t yang berisi 1 bundle data movie, kita ambil value posterUrl yang berisi url photo untuk ditampilkan 

<a href=""><img src={{$t["posterUrl"]}} alt=""></a>

web.php : tambahkan baris berikut, agar data dari model kita bisa ditampilkan di views


Sampai ketemu di next part💪

Heyyooo guys, untuk mengikuti part 3 belajar Laravel ini, pastikan kalian sudah download dan menjalankan project yang ada di link ini ya.. h...

Heyyooo guys, untuk mengikuti part 3 belajar Laravel ini, pastikan kalian sudah download dan menjalankan project yang ada di link ini ya..

https://github.com/nioniarthaputri/movie_app_laravel9

Pada project tersebut, semua proses nya masih di lakukan pada component Routes kita, yang ada di file routes/web.php, contohnya ketika kita melakukan request untuk menampilkan list data movie begitu juga proses untuk menampilkan halaman view

Namun hal itu kurang tepat..

Karena pada dasarnya, Laravel mengadopsi pola pengembangan Model-View-Controller (MVC)
  • Model bertugas untuk menangani pengolahan data, seharusnya data array movie kita berasal dari file ini
  • View bertugas untuk menangani pengolahan tampilan kepada pengguna, ini adalah folder resources/views
  • Controller bertugas untuk menangani pengerjaan bisnis proses (misalnya : menghubungkan model & view), code dibawah ini lebih baik berada di controller
Buka project movie_app_laravel9 di vscode, lalu tekan Ctrl+Shift+`, pada terminal vscode ketikkan perintah yang ada pada gambar dibawah ini, file model akan dibuat secara otomatis, dan berada di folder app/Models

Atau, bisa juga menggunakan extention ini
setelah install, Ctrl+Shift+P , pilih artisan:make Model
Ubah file Movies.php menjadi seperti ini
Kita akan menggunakan file Movies.php di file routes/web.php, jangan lupa untuk menambahkan namespace di baris atas file web.php, agar lebih mudah, ada extenstion yang bisa membantu
Ubah code seperti dibawah ini, klik kanan, pilih Import All Classes, maka otomatis akan menambahkan namespace Model Movies atau sesimple Ctrl+Alt+A
Jika halaman Movies kita di refresh di browser, tidak akan terjadi perubahan apa apa, namun kita berhasil mengambil data dari Model dan file web.php kita menjadi rapih.

Sekarang, kita akan membuat halaman Detail Movie
Tambahkan "slug", untuk digunakan sebagai link akses detail movie
Di file movies.blade.php tambahkan atribut href seperti dibawah ini
Tambahkan baris berikut ini di file routes/web.php
Ubah file model Movies.php kalian menjadi seperti ini

Buat file view baru resources\views\movie.blade.php, boleh untuk download file yang sudah saya bikin sebagai referensi yang ada di link ini https://github.com/nioniarthaputri/laravel-2/tree/part-3
- movie.blade.php : berada di folder resources/views
- movie.css : buat lalu simpan file nya di folder public/assets/css, dan tambahkan baris code dibawah ini pada file main.blade.php
- video.png : untuk saat ini kita gunakan gambar dulu, nanti kita akan bisa memutar video di website ini,, gambar nya simpan di folder public/assets/images
- app.css : tambakan baris berikut
Ini adalah halaman detail movie

Ditunggu part 4 yaa..



  Kali ini, kita akan mencoba membuat Sistem Layouting sederhana menggunakan bantuan templating engine blade dan Bootstrap untuk mempermudah...

 

Kali ini, kita akan mencoba membuat Sistem Layouting sederhana menggunakan bantuan templating engine blade dan Bootstrap untuk mempermudah pembuatan tampilan kita. 

Buat file baru di resources/views dengan nama home.blade.php

Akses link ini https://getbootstrap.com/docs/5.1/getting-started/introduction/ di browser kalian, lalu copy paste code Stater Template ke file home.blade.php, kalian juga bisa  hapus komentar nya yaa, agar terlihat rapih

Buka file routes/web.php, ubah text "welcome" menjadi "home"
Jangan lupa untuk menjalankan php artisan serve di cmd, lalu akses di browser


Lalu kita akan mebuat Navbar, kalian bisa copy codenya dan paste di file home.blade.php dengan mengakses link ini https://pastebin.com/ipUUvg8A


Selanjutnya, kita akan membuat halaman Movie dengan struktur yang sama, mempunyai Navbar dan content. Tentunya kita bisa saja langsung copy code nya dan paste ke file baru untuk halaman Movie. 

Eittss..

Tapi cara itu sangat tidak dianjurkan, karena jika ingin menambah menu baru di Navbar, kita akan repot untuk menambahkan nya pada masing masing file yang memiliki Navbar.

Maka dari itu..

Kita akan menggunakan System Layouting yang dimiliki oleh blade, silahkan download file yang ada di link ini https://github.com/nioniarthaputri/laravel-2, dan masukkan ke folder resources/views kecuali file web.php

Lalu sesuaikan file kalian yang ada di routes/web.php dengan yang ada di github.

layouts/main.blade.php
file tersebut adalah layout utama yang akan berisi apapun yang ada di dalam "content"

home.blade.php & movie.blade.php

merupakan child file yang berisi content, dan kita harus memberitahu halaman home/movie bahwa kita menggunakan layout utama dengan @extends dan @section untuk menandai bahwa itu adalah isi "content" nya


Sekarang kita akan mencoba mengirimkan data dari routes ke halaman home & movie, dengan menambahkan array seperti di bawah ini pada file routes/web.php

Buka file layouts/main.blade.php, lalu edit bagian title & tag li di navbar untuk menambahkan class active sesuai dengan page yang kita akses


Edit juga file home.blade.php & movies.blade.php menjadi seperti dibawah ini, lalu lihat hasil nya di browser, data nya akan berubah sesuai yang kita kirim dari file routes/web.php


Sekarang, giliran kalian untuk membuat list movie dari data yang bisa diakses pada link ini https://pastebin.com/hvWEgQ93

Bisaaa kan? Tapi kalo masih bingung, boleh banget untuk mempelajari code yang sebelumnya sudah saya buat, cara akses nya yaitu

1. Download project pada link berikut https://github.com/nioniarthaputri/movie_app_laravel9
2. Extract file 
3. Masuk ke folder project movie_app_laravel9, akses cmd/console dan jalankan perintah composer update
4. Rename file .env.example menjadi .env
5. Jalankan perintah php artisan key:generate di cmd/console
6. Jangan lupa untuk php artisan serve yaa😉

Kalo ada pertanyaan, tulis di kolom komentar ya..
Salam Coding!!