Bài viết này dành cho những bạn nào đang bắt tay vào học cách sử dụng kết hợp Laravel và React.
Qua việc làm 1 app CRUD, các bạn sẽ hiểu được luồng hoạt động cơ bản. Bắt đầu nào!
1. Backend:
1.1. Khởi tạo
Đầu tiên, chúng ta sử dụng composer để khởi tạo project với Laravel phiên bản mới nhất (ở đây của mình là Laravel 8):
1 2 | composer create-project --prefer-dist laravel/laravel laravel-react-crud |
Di chuyển vào thư mục chứa project:
1 2 | cd laravel-react-crud |
1.2. Config database
Để kết nối app với database, ta mở file .env và sửa một số thông tin của DB_DATABASE, DB_USERNAME, DB_PASSWORD sao cho phù hợp với database của mình.
1 2 3 4 5 6 7 | DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud DB_USERNAME=root DB_PASSWORD= |
1.3. Tạo Model, Controller và Route
1 2 | php artisan make:model Expense --migration --resource --controller |
Vào thư mục database/migrations và mở file migration vừa được tạo lên, sửa code như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token operator"><</span><span class="token operator">?</span>php use IlluminateDatabaseMigrationsMigration<span class="token punctuation">;</span> use IlluminateDatabaseSchemaBlueprint<span class="token punctuation">;</span> use IlluminateSupportFacadesSchema<span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">CreateExpensesTable</span> <span class="token keyword">extends</span> <span class="token class-name">Migration</span> <span class="token punctuation">{</span> <span class="token comment">/** * Run the migrations. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Schema<span class="token operator">:</span><span class="token operator">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token string">'expenses'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Blueprint $table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $table<span class="token operator">-</span><span class="token operator">></span><span class="token function">bigIncrements</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $table<span class="token operator">-</span><span class="token operator">></span><span class="token function">string</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $table<span class="token operator">-</span><span class="token operator">></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">'description'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $table<span class="token operator">-</span><span class="token operator">></span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token string">'amount'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $table<span class="token operator">-</span><span class="token operator">></span><span class="token function">timestamps</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Reverse the migrations. * * @return void */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">down</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Schema<span class="token operator">:</span><span class="token operator">:</span><span class="token function">dropIfExists</span><span class="token punctuation">(</span><span class="token string">'expenses'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Ta vừa viết migration để tạo bảng Expense, với các trường như sau:
{bảng contact}
Chạy câu lệnh migrate để tạo bảng trong database:
1 2 | php artisan migrate |
Migrate chạy thành công sẽ hiển thị như sau:
Sau khi migrate thành công, bảng Expense sẽ xuất hiện trong database.
Tiếp theo, ta thêm các routes vào file routes/api.php để kết nối với Controllers. File này sau đó sẽ có nội dung như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="token operator"><</span><span class="token operator">?</span>php use IlluminateHttpRequest<span class="token punctuation">;</span> use IlluminateSupportFacadesRoute<span class="token punctuation">;</span> <span class="token comment">/* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | is assigned the "api" middleware group. Enjoy building your API! | */</span> Route<span class="token operator">:</span><span class="token operator">:</span><span class="token function">middleware</span><span class="token punctuation">(</span><span class="token string">'auth:api'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/user'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">Request $request</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> $request<span class="token operator">-</span><span class="token operator">></span><span class="token function">user</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Route<span class="token operator">:</span><span class="token operator">:</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/expenses'</span><span class="token punctuation">,</span> <span class="token string">'<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token string">'expenses.all'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Route<span class="token operator">:</span><span class="token operator">:</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/expenses'</span><span class="token punctuation">,</span> <span class="token string">'<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token string">'expenses.store'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Route<span class="token operator">:</span><span class="token operator">:</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/expenses/{expense}'</span><span class="token punctuation">,</span> <span class="token string">'<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token string">'expenses.show'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Route<span class="token operator">:</span><span class="token operator">:</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'/expenses/{expense}'</span><span class="token punctuation">,</span> <span class="token string">'<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token string">'expenses.update'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Route<span class="token operator">:</span><span class="token operator">:</span><span class="token keyword">delete</span><span class="token punctuation">(</span><span class="token string">'/expenses/{expense}'</span><span class="token punctuation">,</span> <span class="token string">'<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token string">'expenses.destroy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Mình đang sử dụng Laravel 8, trong phiên bảng này, thuộc tính $namespace trong RouteServiceProvider mặc định được đặt là null. Do đó, sẽ không có prefix namespace nào được thực hiện bởi Laravel. Định nghĩa controller route (trong file routes/api.php sẽ được xác định bằng cú pháp chuẩn của PHP như sau:
1 2 | Route<span class="token operator">:</span><span class="token operator">:</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/expenses'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>ExpenseController<span class="token operator">:</span><span class="token operator">:</span><span class="token keyword">class</span><span class="token punctuation">,</span> <span class="token string">'index'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> |
Tuy nhiên, mình quen sử dụng prefix giống Laravel 7.x nên sẽ thêm thuộc tính $namespace vào RouteServiceProvider (app/Providers/RouteServiceProvider.php) như sau:
1 2 3 4 5 | Route<span class="token operator">:</span><span class="token operator">:</span><span class="token function">prefix</span><span class="token punctuation">(</span><span class="token string">'api'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">middleware</span><span class="token punctuation">(</span><span class="token string">'api'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">namespace</span><span class="token punctuation">(</span><span class="token string">'AppHttpControllers'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">group</span><span class="token punctuation">(</span><span class="token function">base_path</span><span class="token punctuation">(</span><span class="token string">'routes/api.php'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Tiếp theo, ta định nghĩa từng hành động trong file app/Http/Controllers/ExpenseController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <span class="token keyword">class</span> <span class="token class-name">ExpenseController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span> <span class="token punctuation">{</span> <span class="token comment">/** * Display a listing of the resource. * * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $expenses <span class="token operator">=</span> Expense<span class="token operator">:</span><span class="token operator">:</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">json</span><span class="token punctuation">(</span>$expenses<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Store a newly created resource in storage. * * @param IlluminateHttpRequest $request * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">Request $request</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $request<span class="token operator">-</span><span class="token operator">></span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">'name'</span> <span class="token operator">=></span> <span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span> <span class="token operator">=></span> <span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'description'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token comment">//optional if you want this to be required</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $expense <span class="token operator">=</span> Expense<span class="token operator">:</span><span class="token operator">:</span><span class="token function">create</span><span class="token punctuation">(</span>$request<span class="token operator">-</span><span class="token operator">></span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'message'</span><span class="token operator">=></span> <span class="token string">'expense created'</span><span class="token punctuation">,</span> <span class="token string">'expense'</span> <span class="token operator">=></span> $expense<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Display the specified resource. * * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token parameter">Expense $expense</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> $expense<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Show the form for editing the specified resource. * * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token comment">/** * Update the specified resource in storage. * * @param IlluminateHttpRequest $request * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">Request $request<span class="token punctuation">,</span> Expense $expense</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $request<span class="token operator">-</span><span class="token operator">></span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">'name'</span> <span class="token operator">=></span> <span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span> <span class="token operator">=></span> <span class="token string">'required'</span><span class="token punctuation">,</span> <span class="token string">'description'</span> <span class="token operator">=></span> <span class="token string">'required'</span> <span class="token comment">//optional if you want this to be required</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $expense<span class="token operator">-</span><span class="token operator">></span>name <span class="token operator">=</span> $request<span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $expense<span class="token operator">-</span><span class="token operator">></span>amount <span class="token operator">=</span> $request<span class="token operator">-</span><span class="token operator">></span><span class="token function">amount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $expense<span class="token operator">-</span><span class="token operator">></span>description <span class="token operator">=</span> $request<span class="token operator">-</span><span class="token operator">></span><span class="token function">description</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> $expense<span class="token operator">-</span><span class="token operator">></span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">'message'</span> <span class="token operator">=></span> <span class="token string">'expense updated!'</span><span class="token punctuation">,</span> <span class="token string">'expense'</span> <span class="token operator">=></span> $expense <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Remove the specified resource from storage. * * @param AppExpense $expense * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">destroy</span><span class="token punctuation">(</span><span class="token parameter">Expense $expense</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $expense<span class="token operator">-</span><span class="token operator">></span><span class="token keyword">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token string">'message'</span> <span class="token operator">=></span> <span class="token string">'expense deleted'</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Tiếp theo, ta chỉ định những thuộc tính có thể được thay đổi nội dung trong database (mass-assign) bằng cách thêm các thuộc tính đó vào biến $fillable trong file app/Models/Expense.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token operator"><</span><span class="token operator">?</span>php namespace App<span class="token punctuation">;</span> use IlluminateDatabaseEloquentModel<span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Product</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span> <span class="token punctuation">{</span> <span class="token comment">/** * The attributes that are mass assignable. * * @var array */</span> <span class="token keyword">protected</span> $fillable <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'description'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Vậy là xong phần back-end, bây giờ ta chạy ứng dụng bằng câu lệnh php artisan serve
, sau đó mở Postman để thử.
1.4. Test API bằng Postman
Do chưa có dữ liệu gì nên ta sẽ gọi đến api http://localhost:8000/api/expenses/ bằng phương thức POST trước.
Nhập url của API vào và chọn phương thức POST.
Để truyền dữ liệu vào API, chọn Body -> x-www-form-urlencoded và thêm các trường (KEY) cùng với giá trị (VALUE) của các trường đó.
API sẽ được gọi và lưu các giá trị này vào database. Khi lưu thành công, kết quả sẽ hiện ra như sau:
Bây giờ database đã có dữ liệu, ta gọi API GET để lấy dữ liệu ra xem sao:
Kết quả ra giống với dữ liệu vừa được ghi vào.
Các bạn có thể thử với những API còn lại
2. Frontend
2.1. Khởi tạo
Backend đã xong, giờ chúng ta hoàn thành nốt frontend, sử dụng ReactJS. Chạy câu lệnh sau để tạo khung sườn cơ bản (scaffold) cho React:
1 2 3 | composer require laravel/ui php artisan ui react |
Sau đó compile assets bằng các lệnh sau:
1 2 3 | npm install npm run dev |
Tiếp theo, ta cài đặt một số dependency cần thiết:
1 2 3 4 | npm install <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> npm install react-bootstrap npm install sweetalert2 --save |
2.2. Tạo components
Ở đây ta sẽ tạo các components và sử dụng axios để gọi API, tương tác với phía backend.
Trong thư mục components, tạo 3 components sau:
- create-expense.component.js
- edit-expense.component.js
- expenses-listing.component.js
và một component con: - ExpenseTableRow.js
Tiếp theo, nhập nội dung cho các file này:
create-expense.component.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Form <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Form'</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span> <span class="token keyword">import</span> Row <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Row'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Col <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Col'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span> <span class="token keyword">import</span> ExpensesList <span class="token keyword">from</span> <span class="token string">'./expenses-listing.component'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Swal <span class="token keyword">from</span> <span class="token string">'sweetalert2'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">CreateExpense</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token comment">// Setting up functions</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseName <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onChangeExpenseName</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseAmount <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onChangeExpenseAmount</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseDescription <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onChangeExpenseDescription</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSubmit <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onSubmit</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Setting up state</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> amount<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseName</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseAmount</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>amount<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseDescription</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>description<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onSubmit</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">const</span> expense <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>name<span class="token punctuation">,</span> amount<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>amount<span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>description <span class="token punctuation">}</span><span class="token punctuation">;</span> axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'http://localhost:8000/api/expenses/'</span><span class="token punctuation">,</span> expense<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// console.log(`Expense successfully created!`);</span> <span class="token comment">// console.log(`Name: ${this.state.name}`);</span> <span class="token comment">// console.log(`Amount: ${this.state.amount}`);</span> <span class="token comment">// console.log(`Description: ${this.state.description}`);</span> Swal<span class="token punctuation">.</span><span class="token function">fire</span><span class="token punctuation">(</span> <span class="token string">'Good job!'</span><span class="token punctuation">,</span> <span class="token string">'Expense Added Successfully'</span><span class="token punctuation">,</span> <span class="token string">'success'</span> <span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> amount<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"form-wrapper"</span><span class="token operator">></span> <span class="token operator"><</span>Form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSubmit<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>Row<span class="token operator">></span> <span class="token operator"><</span>Col<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Name"</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span>Name<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Control type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>name<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseName<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Col<span class="token operator">></span> <span class="token operator"><</span>Col<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Amount"</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span>Amount<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Control type<span class="token operator">=</span><span class="token string">"number"</span> value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>amount<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseAmount<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Col<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Row<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"description"</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span>Description<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Control <span class="token keyword">as</span><span class="token operator">=</span><span class="token string">"textarea"</span> type<span class="token operator">=</span><span class="token string">"textarea"</span> value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>description<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseDescription<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">></span> <span class="token operator"><</span>Button variant<span class="token operator">=</span><span class="token string">"primary"</span> size<span class="token operator">=</span><span class="token string">"lg"</span> block<span class="token operator">=</span><span class="token string">"block"</span> type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span> Add Expense <span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token operator">></span> <span class="token operator"><</span>br<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>br<span class="token operator">></span> <span class="token operator"><</span>br<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>br<span class="token operator">></span> <span class="token operator"><</span>ExpensesList<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ExpensesList<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
edit-expense.component.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Form <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Form'</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">EditExpense</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseName <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onChangeExpenseName</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseAmount <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onChangeExpenseAmount</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseDescription <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onChangeExpenseDescription</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>onSubmit <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onSubmit</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// State</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> amount<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>name<span class="token punctuation">,</span> amount<span class="token operator">:</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>amount<span class="token punctuation">,</span> description<span class="token operator">:</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>description <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseName</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseAmount</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> amount<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onChangeExpenseDescription</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> description<span class="token operator">:</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">onSubmit</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">const</span> expenseObject <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>name<span class="token punctuation">,</span> amount<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>amount<span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>description <span class="token punctuation">}</span><span class="token punctuation">;</span> axios<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> expenseObject<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Expense successfully updated'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// Redirect to Expense List </span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/expenses-listing'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"form-wrapper"</span><span class="token operator">></span> <span class="token operator"><</span>Form onSubmit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSubmit<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Name"</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span>Name<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Control type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>name<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseName<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Amount"</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span>Amount<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Control type<span class="token operator">=</span><span class="token string">"number"</span> value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>amount<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseAmount<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Group controlId<span class="token operator">=</span><span class="token string">"Description"</span><span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span>Description<span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Label<span class="token operator">></span> <span class="token operator"><</span>Form<span class="token punctuation">.</span>Control type<span class="token operator">=</span><span class="token string">"text"</span> value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>description<span class="token punctuation">}</span> onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeExpenseDescription<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token punctuation">.</span>Group<span class="token operator">></span> <span class="token operator"><</span>Button variant<span class="token operator">=</span><span class="token string">"danger"</span> size<span class="token operator">=</span><span class="token string">"lg"</span> block<span class="token operator">=</span><span class="token string">"block"</span> type<span class="token operator">=</span><span class="token string">"submit"</span><span class="token operator">></span> Update Expense <span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Form<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
ExpenseTableRow.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">ExpenseTableRow</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>deleteExpense <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">deleteExpense</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">deleteExpense</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> axios<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'http://localhost:8000/api/expenses/'</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Expense removed deleted!'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>amount<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>description<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span> <span class="token operator"><</span>Link className<span class="token operator">=</span><span class="token string">"edit-link"</span> to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"/edit-expense/"</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>obj<span class="token punctuation">.</span>id<span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>Button size<span class="token operator">=</span><span class="token string">"sm"</span> variant<span class="token operator">=</span><span class="token string">"info"</span><span class="token operator">></span>Edit<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token operator"><</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>deleteExpense<span class="token punctuation">}</span> size<span class="token operator">=</span><span class="token string">"sm"</span> variant<span class="token operator">=</span><span class="token string">"danger"</span><span class="token operator">></span>Delete<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
expenses-listing.component.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Table <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Table'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ExpenseTableRow <span class="token keyword">from</span> <span class="token string">'./ExpenseTableRow'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">ExpenseList</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> expenses<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost:8000/api/expenses/'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> expenses<span class="token operator">:</span> res<span class="token punctuation">.</span>data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">DataTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>expenses<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token operator"><</span>ExpenseTableRow obj<span class="token operator">=</span><span class="token punctuation">{</span>res<span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token punctuation">{</span>i<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"table-wrapper"</span><span class="token operator">></span> <span class="token operator"><</span>Table striped bordered hover<span class="token operator">></span> <span class="token operator"><</span>thead<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span>Name<span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span>Amount<span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span>Description<span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span>th<span class="token operator">></span>Action<span class="token operator"><</span><span class="token operator">/</span>th<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>thead<span class="token operator">></span> <span class="token operator"><</span>tbody<span class="token operator">></span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">DataTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>tbody<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Table<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Tạo landing page bằng file resources/js/app.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Nav <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Nav"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Navbar <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Navbar"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Container"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Row <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Row"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Col <span class="token keyword">from</span> <span class="token string">"react-bootstrap/Col"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">"bootstrap/dist/css/bootstrap.css"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token keyword">as</span> Router<span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> Route<span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> EditExpense <span class="token keyword">from</span> <span class="token string">"./components/edit-expense.component"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ExpensesList <span class="token keyword">from</span> <span class="token string">"./components/expenses-listing.component"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> CreateExpense <span class="token keyword">from</span> <span class="token string">"./components/create-expense.component"</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token operator"><</span>Router<span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"App"</span><span class="token operator">></span> <span class="token operator"><</span>header className<span class="token operator">=</span><span class="token string">"App-header"</span><span class="token operator">></span> <span class="token operator"><</span>Navbar<span class="token operator">></span> <span class="token operator"><</span>Container<span class="token operator">></span> <span class="token operator"><</span>Navbar<span class="token punctuation">.</span>Brand<span class="token operator">></span> <span class="token operator"><</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"/create-expense"</span><span class="token punctuation">}</span> className<span class="token operator">=</span><span class="token string">"nav-link"</span><span class="token operator">></span> Expense manager <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Navbar<span class="token punctuation">.</span>Brand<span class="token operator">></span> <span class="token operator"><</span>Nav className<span class="token operator">=</span><span class="token string">"justify-content-end"</span><span class="token operator">></span> <span class="token operator"><</span>Nav<span class="token operator">></span> <span class="token operator"><</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"/create-expense"</span><span class="token punctuation">}</span> className<span class="token operator">=</span><span class="token string">"nav-link"</span><span class="token operator">></span> Create Expense <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token operator"><</span>Link to<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"/expenses-listing"</span><span class="token punctuation">}</span> className<span class="token operator">=</span><span class="token string">"nav-link"</span><span class="token operator">></span> Expenses List <span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Nav<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Nav<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Container<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>Navbar<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>header<span class="token operator">></span> <span class="token operator"><</span>Container<span class="token operator">></span> <span class="token operator"><</span>Row<span class="token operator">></span> <span class="token operator"><</span>Col md<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"wrapper"</span><span class="token operator">></span> <span class="token operator"><</span>Switch<span class="token operator">></span> <span class="token operator"><</span>Route exact path<span class="token operator">=</span><span class="token string">'/'</span> component<span class="token operator">=</span><span class="token punctuation">{</span>CreateExpense<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>Route path<span class="token operator">=</span><span class="token string">"/create-expense"</span> component<span class="token operator">=</span><span class="token punctuation">{</span>CreateExpense<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span> |