Selasa, 17 Desember 2019

Implementasi ReactJS dengan Laravel

  Author : lebah ganteng     Tidak ada komentar
08.57


Dipostingan kali ini, saya akan melanjutkan materi CRUD Laravel yang diimplementasikan dengan ReactJS.
Sebelum itu, ada beberapa yang harus dipersiapkan, antara lain:
1. Komputer kalian sudah terinstal Node.js
2. Komputer kalian sudah terinstal composer
3. Terminal
3. Teks Editor (saya menggunakan Visual Studio Code)
4. Standby internet, karena nanti ada beberapa library yang kita instal mungkin membutuhkan koneksi internet.
5. Komputer kalian sudah terinstal Xampp

Langsung saja kita buat projeknya.
1. Install node.js, jika belum, silahkan download di link https://nodejs.org/en/
2. Buat projek laravel kalian sesuai dengan direktori yang kalian inginkan dengan mengetik diterminal
composer create-project --prefer-dist laravel/laravel crud-react

3. Jika sudah selesai, masuk ke direktori laravel yang kalian buat dan ketik
composer require laravel/ui --dev

4. Silahkan menunggu karena ini membutuhkan waktu yang agak sedikit lama.
5. Jika sudah selesai, ketik
php artisan ui react
Setelah sukses, ketik
npm install

6. Setelah selesai, ketik
npm install axios –save

7. Buka 2 terminal, karena 1 terminal untuk npm dan satu lagi untuk laravel. Karena Visual Studio Code sudah ada terminal, maka saya cukup buka 1 terminal command prompt.
8. Buka xampp-controlpanel yang sudah kalian install, lalu start Apache dan MySql nya.

9. Buka web browser kalian, masuk ke localhost/phpmyadmin, kemudian buat database kalian. (disini saya membuat database dengan nama hr yang sudah ada tabel tabel nya).
Disini saya hanya menggunakan tabel employees, departments, dan jobs saja yang sudah terisi data-datanya.

10. Kemudian buka project kalian dieditor, masuk ke di direktori resource/views, lalu buat folder baru dengan nama 
layouts

11. Kemudian didalam folder layouts, buat file baru dengan nama
app.blade.php

12. Isikan script berikut ini
13. Kemudian pada direktori resourse/views, ganti isi file welcome.blade.php menjadi seperti berikut ini.

14. Kemudian pada direktori resourse/views, buat 3 file, yaitu :
create.blade.php
edit.blade.php
employees.blade.php

15. Pada create.blade.php ketikan script berikut ini
16. Pada edit.blade.php ketikan script berikut ini 
17. Pada employees.blade.php ketikan script berikut ini 
18. Kemudian pada directory app/Http/Controllers, buat folder baru dengan nama Api

19. Buka terminal untuk laravel (saya cukup buka di Visual Studio Code), ketik script berikut ini untuk membuat controller dan model nya.

20. Kita akan mengisi script untuk model, Employee terlebih dahulu. Masuk kedirektori app, buka Employee.php isikan script berikut
21. Masuk kedirektori app, buka Department.php isikan script berikut
22. Masuk kedirektori app, buka Job.php isikan script berikut
23. Maaf saya ada yg lupa, kita koneksikan dulu projek Laravel kita ke Database dengan menyeting file .env nya.

24. Yang saya kotakin dan garis bawahi, sesuaikan dengan set Database kalian.
25. Okey lanjut lagi
26. Buka terminal kalian, kita akan membuat controller yg mengontrol view nya saja. Ketik script berikut ini

27. Masuk ke direktori app/Http/Controllers, pada EmployeesController.php isikan script berikut ini
28. Masuk ke direktori app/Http/Controllers/Api, pada EmployeesController.php isikan script berikut ini

29. Masuk ke direktori routes, pada api.php isikan script berikut ini

30. Masuk ke direktori routes, pada web.php isikan script berikut ini


31. Selanjutnya kita akan membuat file Javascriptnya. Buka direktori resource/js/components, buat 3 file baru yaitu : Create.js | Edit.js | Employee.js

32. Buka file Create.js yang sudah dibuat, lalu isikan script berikut ini

33. Buka file Edit.js yang sudah dibuat, lalu isikan script berikut ini

34. Buka file Employee.js yang sudah dibuat, lalu isikan script berikut ini

35. Buka direktori resource/js, buka file app.js lalu isikan script berikut ini

36. Buka terminal untuk npm, jalankan perintah
npm run watch
37. Buka terminal untuk laravel, jalankan perintah
php artisan serve
kemudian copy alamat nya kebrowser
38. Selesai.

Cukup sekian di postingan kali ini, jika ada error, silahkan tulis dikolom komentar.
Oh iya, ini hanya program sederhana, mungkin kalian bisa mengembangkannya kembali :D
Selamat mencobaaa...
Sayonaraaaa ^_^

Diposting oleh
Read More

Kamis, 17 Oktober 2019

Implementasi MVC Lanjutan

  Author : lebah ganteng     Tidak ada komentar
10.07


Dipostingan kali ini saya akan melanjutkan materi dari postingan sebelumnya karena postingan sebelumnya belum terdapat model pada laravelnya.
Disini saya menggunakan sistem operasi Windows, MySql sebagai database servernya yang ada pada aplikasi xampp, dan menggunakan editor Visual Studio Code.
Saya asumsikan kalian sudah paham mengenai script-script dalam struktur database

1.        Buat database dengan nama databasenya
hr

2.        Buat 3 tables, yaitu jobs, departments dan employees dengan struktur seperti berikut ini

3.        Create laravel baru, disini saya sudah menginstal laravel secara global maka saya cukup membuat preject laravel baru didalam file htdocsnya dengan cara menulis script di terminal seperti berikut ini:
c:\xampp\htdocs>laravel new laravel-hr
Jika kalian belum install laravel secara global, cukup membuat script berikut ini
c:\xampp\htdocs> composer cereate-project –prefer-dist laravel/laravel namaprojekkalian
dan tunggu sampai selesai

4.        Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table departments dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\unpas\laravel-hr>php artisan make:controller DepartmentsController -r -m Department
5.        Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table jobs dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\laravel-hr>php artisan make:controller JobsController -r -m Job
6.        Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table employees dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\laravel-hr>php artisan make:controller EmployeesController -r -m Employee
7.        Kemudian buka editor kalian, selanjutnya kita akan lanjut ngoding file yg kita buat. Disini saya menggunakan Visual Studio Code
8.        Pada folder resources>views buat 2 folder baru, yang pertama itu nama foldernya
layout ->ini akan berisi template semua file yang akan di panggil
yang kedua itu nama foldernya
employees ->ini akan berisi halaman yang berhubungan dengan data-data employees
9.        Pada folder layout tadi, buat file baru dengan nama filenya main.blade.php
isi script berikut ini
<script src="https://gist.github.com/sigitprd23/ccc153e0bec9312997181eeee5f20b90.js"></script>


10.   Selanjutnya buat 2 file baru yaitu index.blade.php dan about.blade.php didalam folder resources>views
11.   Pada index.blade.php tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/f5c65767ff3b67cd05d7bae3f4e9a9c0.js"></script>
12.   Pada about.blade.php tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/a55a964abb30e9fb8eb8b91566ab222a.js"></script>
13.   Selanjutnya buka terminal kalian, kita akan membuat controller baru untuk sebagai pengontrol halaman index.blade.php dan about.blade.php dengan mengetik script berikut ini diterminal kalian

c:\xampp\htdocslaravel-hr>php artisan make:controller PagesController

14.   Selanjutnya buka file PagesController yang berada didalam folder app>Http>Controllers>PagesController

15.   Kemudian isi script berikut ini
<script src="https://gist.github.com/sigitprd23/6a7d1acdd724e6092fe97fff8897f3bf.js"></script>

16.   Selanjutnya buka file web.php yang berada di folder routes>web.php
17.   Isi script berikut ini
<script src="https://gist.github.com/sigitprd23/f8cbd89ab6ad838d551f52f247f7b676.js"></script>

18.   Kemudian buat tiga file baru didalam folder employees yaitu create.blade.php, index.blade.php, dan show.blade.php
19.   Pada file resources>views>employees>index.blade.php 
tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/50b22aca95470f946e268d8a0ae202e9.js"></script>

20.   Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController
kemudian pada method index tuliskan script berikut ini
21.   Pada file web.php yang berada di folder routes>web.php 
tambahkan script berikut ini

22.   Selanjutnya kita akan mengkoneksikan database kita di project laravel. Disini saya menggunakan database server MySql dari xampp
23.   Pada file .env
pada baris ke 12, ganti DB_DATABASE dengan nama databsenya

24.   Selanjutnya buka file create.blade.php yang berada di folder resources>views>employees>create.blade.php
isikan script berikut ini
<script src="https://gist.github.com/sigitprd23/4f67de6ae0c5fc9ce79e031c76cb3471.js"></script>

25.   Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController
tambahkan script berikut ini pada method create dan store

26.   Pada file web.php yang berada di folder routes>web.php 
tambahkan script berikut ini

27.   Selanjutnya buka model Employee yang berada di dalam folder app>Employee.php
isikan script berikut ini

28.   Selanjutnya buka file show.blade.php yang berada di folder resources>views>employees>show.blade.php
isikan script berikut ini
<script src="https://gist.github.com/sigitprd23/85e5fe36d838ab0942ddd96da663604a.js"></script>

29.   Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController
tambahkan script berikut ini pada method show

30.   Pada file web.php yang berada di folder routes>web.php 
tambahkan script berikut ini
31.   Selanjutnya save all
32.   Kemudian buka terminal kalian, jalankan

c:\xampp\htdocs\laravel-hr> php artisan serve

copy alamat servernya dan paste kan di browse kalian lalu jalankan
33.   Silahkan kalian mencoba mengiput data baru. Oh iya, pada tables departments dan jobs, kalian isi terlebih dahulu data-datanya, agar memudahkan menginout data employeesnya pada web kalian.
Cukup sekian dulu ya, postingan kali ini. 
Sampai jumpa di postingan selanjutnya and sayonaraaa.. ^_^

 **tambahan, jika ada yg tidak jelas atau script ada yg kosong, kemungkinan githubnya tidak muncul


Diposting oleh
Read More
Langganan: Postingan ( Atom )