[ TUTORIAL LARAVEL 8 UNTUK PEMULA ] Membuat halaman Sederhana di laravel 8 dengan dan tanpa controller (PART 01)

HALAMAN SEDERHANA LARAVEL 8


Halo semuanya, semoga sehat selalu dan diberikan yang terbaik dari Allah. Aamiin. Dalam kesempatan kali ini kami akan memberikan pengalaman kami dalam membuat halaman di Laravel 8 dengan menggunakan Controller maupun tanpa menggunakan Controller. Jadi kita bisa membuat halaman meski tidak menggunakan controller.

Siapkan terlebih dahulu file project kita yaitu Laravel 8, sebelumnya kita sudah membuat halaman utama bawaan dari Laravel 8 dengan isian sesuai dengan kebutuhan kita. Nah kali ini kita akan membuat 5 halaman dalam Laravel 8 ini, yaitu Beranda, Profil, Download File, Album Foto dan Video, dan Kontak Kami. 

Baiklah sekarang kita mulai yuk untuk membuat halamannya : 

  1. Siapkan project Laravel 8 kita ( Boleh dengan cara Install Project dari File Komputer lain atau dengan mendownload menggunakan Composer /Laravel sesuai dengan keiinginan masing-masing. Disini saya menggunakan file project hasil dari artikel (Mengganti content Landing Page Laravel 8 ). Silahkan aktifkan Web server kalian (XAMPP atau MAMP) kemudian buka terminal dan arahkan ke folder htdocs yang berisi file project kalian: 

    di command prompt atau terminal ketikkan "cd" kemudian arahkan folder kalian ke command promt atau terminal kalian dan lepas kemudian kalian enter maka kalian sudah masuk dalam folder project kalian di htdocs. 
    jika sudah masuk folder kemudian ketikkan "php artisan serve" dan kalian sudah bisa mengaksesnya di web browser kalian dengan memasukkan URL di addres bar "127.0.0.1:8000" kemudian enter. 

    nah hasil project di postingan sebelumnya saya berhasil menampilkannya. 
  2. Berikutnya buka folder file project kalian ke Text Editor pilihan kalian. Disini saya menggunakan Visual Code yang gaes. 

    jika anda ingin menggunakan yang lain juga tidak apa-apa sih. text editor itu tidak baku, kalian bebas memilih sesuai dengan keiinginan dan kenyamanan kalian. 
  3. Jangan lupa gaes, kalian setting ".env" nya sesuai dengan project dan database yang akan kalian buat. Penjelasan setting ".env" nya ada DISINI

    jika sudah siap file ".env" nya maka kita lanjut no 4. 
  4. Nah selanjutnya kita membuka file yang mengatur jalannya web kita, atau bisa disebut pengatur URL yang akan kita gunakan untuk mengatur alaman halaman yang ada di web kita atau biasa disebut ROUTE. Nah pengaturan route di Laravel ada di "web.php", letaknya ada di: 
    "routes/web.php" 

    dan isinya seperti gambar diatas. Di dalam file "web.php" terdapat kode : 
    Route::get('/',function(){
         return view('welcome');
    }); 
    Nah maksud dari kode itu adalah : 
    -> get itu artinya mengambil dari addres bar (contoh kita memasukkan url ke address bar dengan alamat: www.google.com/beranda, berarti route itu mengambil nilai dari url itu jadi dapat nya ya  ww.google.com/beranda) tetapi dalam laravel sudah disederhanakan jadi yang diambil dari URL nya adalah setelah nama domain itu yaitu setelah www.google.com menjadi /beranda. Sampai sini sudah paham kan? loh itu kok cuman '/' gini saja ndak ada kata-kata setelah tanda /. nah dalam laravel tanda '/' di Route get itu berarti halaman utama atau halaman yang dituju ketika domain di jalankan atau disebut landing page. Contoh kalau kita masuk facebook : www.facebook.com maka halaman pertama yang akan kita dapatkan adalah halaman login. Nah itu disebut landing page. Jika sudah masuk ke beranda maka jadi www.facebook.com/beranda
  5. Nah kita coba dulu seumpama kita mau membuat 5 halaman tadi: Beranda, Profil, Download File, Album Foto dan Video, dan Kontak Kami. Maka kita juga harus membuat jumlahnya 5 Route. Tapi ingat kita tentukan terlebih dahulu halaman utama atau landing pagenya yang mana. Kalau halaman utama atau landing pagenya adalah Halaman Login berrti kita harus membuat 6 Route. 1 untuk halaman utama, 5 untuk halaman tersebut. Contohnya : 

    perhatikan di dalam kurung setelah tanda / selalu diikuti keterangan halaman mana yang akan dituju tanpa menggunakan spasi kecuali yang merupakan halaman utama yang muncul ketika pertama kali membuka domain. Jika ingin halaman utamanya adalah beranda maka tinggal diganti bagian beranda menjadi seperti ini: 

    bagaimana sudah paham soal landing page atau halaman pertama yang akan dituju? Okey sekarang dalam keadaan kode tersebut kita jalan kan project kita dan apa yang akan terjadi. 

    oopppsss 😱 not found. Disitu tertulis View [halamanBeranda] not found atau kata lainnya di dalam Folder view tidak ditemukannya file  halamanBeranda. Dari sini kita bisa lihat ketika kita mengakses 127.0.0.1:8000 atau kata lain domainnya maka yang memiliki get '/' saja yang akan di akses pertama kali atau ditampilkan pertama kali. Nah mengapa tidak ditemukan? , Alasannya karena kita belum membuat file halamanBeranda. Okey sekarang kita perhatikan di kode Route di web.php. 
    nah didalam kode Route ada pengembalian nilai atau return "return view('halamanBeranda');" nah itu maksudnya adalah mengecek di function view dimana function view itu menuju ke folder views yang ada di : 
    " resources->views" yang berfungsi untuk menampung file php yang digunakan untuk membuat tampilan dari web kalian. 


    nah agar halamanBeranda bisa diakses kita harus membuat file didalam folder "views" tersebut. Sekarang kita buat dulu file dengan nama "halamanBeranda.blade.php". nama sebelum blade harus sama dengan yang ada di return view('halamanBeranda'); di web.php. Dan wajib disusul dengan kata blade.php di belakangnya, karena blade adalah template bawaan dari Laravel yang keren (nanti kita bahas). 


    nah sekarang sudah memiliki file halamanBeranda.blade.php sekarang coba refresh lagi di project kalian maka akan memiliki tampilan kosong putih mulus seperti susu sapi 😆.  Nah buat file yang lainnya sesuai dengan yang ada di web.php. kecuali halaman login kita bahas itu nanti nanti yak yang penting bisa buat halaman lebih dahulu lah. 

    Biarkan saja file bawaan dari Laravel 8 nya yang welcome yak biar saja disitu walau tidak digunakan. 😢. jika sudah dibuat seperti gambar diatas. Sekarang silahkan berikan tulisan seperti dibawah ini disetiap file halamannya. 
    " <h1> Ini halaman beranda </h1> dan seterusnya sesuaikan dengan nama halamannya. 
    ikuti di semua file halaman.....blade.php nya semuanya yak jangan kelewat. okey

  6. Okey jika sudah sekarang kita coba. Ketikkan di address bar kalian sperti dibawah ini: 
    Ini halaman landing atau landing page. 
    halaman Profil perhatikan setelah tanda / di URL. sesuai dengan yang ada di web.php 
    Jadi yang di gunakan untuk Address Bar adalah yang ditanda kurung setela GET ('/....' )  bukan yang direturn karena return digunakan untuk mencari nilai di dalam views jadi untuk mencari file yang ada didalam folder views di resource. Nah sekarang lakukan semua dihalaman untuk memeriksa semua alamatnya berjalan lancar.
  7. Sekarang kita akan buat hyperlink agar halaman itu bisa kita akses tanpa harus mengetikkan di Address bar. Kita masukkan kode berikut di setiap file halaman di Views. 
    <a href="/">Beranda</a>
    <a href="/profil">Profil</a>
    <a href="/DownloadFile">Download File</a>
    <a href="/AlbumFotoVideo">Album Foto dan Video</a>
    <a href="/kontakkami">Kontak Kami</a>
    Perhatian didalam href. Didalam href sama seperti yang ada di dalam kurung setelah get. 
    get('/profil',function(){....}); dah sama dengan yang ada didalam itu '/profil'. Saya yakin anda paham maksud saya 🤓 jadi jangan sampai salah memasukkannya yak biar bisa diakses. 
    masukkan di semua file halaman di Views menjadi seperti ini: 

    dan jika kita akses di webbrowser jadinya seperti ini: 

    nah kita tinggal kita klik tuh di bagian link nya maka halaman bisa berganti sesuai dengan yang kita inginkan

Nah demikian cara membuat halaman tanpa menggunakan controller. Next artikel kita akan membuat halaman menggunakan Controller yang ada di Laravel 8. So tetap ikuti ya di artikel berikutnya 🤩 insyaAllah akan ada video tutorialnya untuk bisa lebih paham secara praktikum. 
Terima kasih atas support dan perhatiannya. Semoga bermanfaat silahkan komen jika ada saran, kritik atau pertanyaan karena itu akan sangat memotivasi kami untuk jauh lebih baik lagi dalam membagi ilmu dan pengalaman kami kepada kalian semuanya. Big thanks and Semoga yang terbaik dari Allah untuk kita semuanya. Aamiin 

Tunggin yak part 2 nya 🥳
Ade Setiyawan

kami adalah penggemar teknologi, pendidikan dan musik yang suka dengan membagi pengetahuan dan sharing sehingga akan menambah wawasan.

95 Komentar

Silahkan isi komentar jika ada pertanyaan, saran atau kritik. Bantu kami untuk lebih berkembang.

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. terimakasih
    elina wulandari (10) xii rpl 2

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. Terimakasih
    Riski Rosinta (32) XII RPL 2

    BalasHapus
  6. Terimakasih
    Rika kurniawati(30) XII RPL 2

    BalasHapus
  7. Terimakasih
    (Miranda Wahyu Anggraini)

    BalasHapus
  8. Terimakasih

    Indah Tashya Setya Astuti XII RPL 2

    BalasHapus
  9. Trimakasih

    Diah Ayu Nuraini XII RPL 2

    BalasHapus
  10. Terimakasih

    Farhan Fauzi Majid XII RPL 3

    BalasHapus
  11. Terima Kasih

    Devina Jayanti Prihatini - XII RPL 3

    BalasHapus
  12. Terimakasih

    Metria Widya - XII RPL 3

    BalasHapus
  13. Terimakasih
    Retno Meila - XII RPL 3

    BalasHapus
  14. Terimakasih

    Deviani Syafitri N - XII RPL 3

    BalasHapus
  15. Terimakasih

    Astrid Wulandari - XII RPL 3

    BalasHapus
  16. Terimakasih pak

    Sherlyna C - XII RPL 3

    BalasHapus
  17. Terima Kasih


    Fiqih Abnar Efendi - XII RPL 3

    BalasHapus
  18. Terimakasih pak


    Khoirul Nisa - XII RPL 3

    BalasHapus
  19. Terima Kasih


    Praditha Davina Putri P - XII RPL 3

    BalasHapus
  20. terima kasih

    Sopyan Hamid Nur Handoyo _XII RPL 3

    BalasHapus
  21. Terima Kasih Pak

    Muhamad Robby - XII RPL 3

    BalasHapus
  22. Terima kasih
    Elfira Yudith Tia - XII RPL 3

    BalasHapus
  23. Terimakasih pak Semoga Saya Bisa memahami nya dengan baik


    Yusroofa Bima Purnomo
    36

    BalasHapus
  24. Mantap pak.
    Warseno Bambang S. XII RPL 3

    BalasHapus
  25. terima kasih pak

    Novi Sulistiani - XII RPL 3

    BalasHapus
  26. terimakasih
    heayasti gama -XII RPL 3

    BalasHapus
  27. terimakasih
    Panji Pebrianto - XII RPL 3

    BalasHapus
  28. Sangat bermanfaat

    Aldi Satriya Pratama - XII RPL 3

    BalasHapus
Lebih baru Lebih lama