Bài đăng

Chuyển đổi tiền tệ với API miễn phí – Sử dụng VueJS kết hợp Laravel

Hình ảnh
  Bạn đã từng sử dụng API miễn phí cho việc chuyển đổi các đơn vị tiền tệ chưa, hãy cùng theo dõi ví dụ dưới đây nhé. Currency-exchange trong rapidapi cung cấp bản miễn phí cho chúng ta 2 API, đó là: List các đơn vị tiền tệ và Chuyển đổi tiền tệ. Để sử dụng API này các bạn có thể vào đăng ký miễn phí một tài khoản tại rapidapi.com, bạn sẽ lấy được một API Key như sau: (4929d1ffc6mshdd7c3bea2cb844dp1e83xxxxxxxxxxx). Chúng ta chỉ cần API Key này và bắt đầu thôi. Chuyển đổi tiền tệ với API miễn phí   1. File Api route Gọi tới hai hàm được xây dựng trong một controller CurrencyController: – currencyListquotes: Danh sách đơn vị tiền tệ – currencyConverter: Chuyển đổi các đơn vị tiền tệ Route::get(‘/currencyListquotes’, ‘Currency\CurrencyController@currencyListquotes’); Route::get(‘/currencyConverter/{currency_from}/{currency_to}’, ‘Currency\CurrencyController@currencyConverter’); 2. Controller Bạn tạo một controller CurrencyController Api, xây dựng hai hàm lấy danh sách tiền tệ và ...

Laravel env multiple environments, đặt nhiều biến môi trường

Hình ảnh
Khi phát triển dự án, bạn nhiều khi cần cài đặt nhiều biến để thích hợp với các cơ sở dữ liệu, các biến cài đặt khác nhau để phù hợp với phiên bản phát triển. Trong ví dụ đơn giản này, mình sẽ trình bày 2 file .local.env và .production.env để miêu tả việc bạn phát triển trên máy local và dự án khi deploy. Để cấu hình giá trị biến môi trường, chúng ta dùng thư viện DotEnv, nó đã được cài khi bạn khởi tạo Laravel . $ composer require vlucas/phpdotenv     Các bước thực hiện như sau: 1. Sửa file app.php Đầu tiên chúng ta tìm tới file bootstrap/app.php Thêm dòng lệnh require file enviroment.php trước dòng: return $app require __DIR__.’/enviroment.php’; return $app; 2. Tạo file enviroment.php Trong folder bootstrap, nó cùng cấp với file app.php vừa chỉnh sửa a. Nội dung file enviroment.php <?php use Dotenv\Dotenv; // Tìm và đọc nội dung file .env // Với biến APP_ENV lấy được, gán giá trị này ở file .env tương ứng // Load file .env tương ứng đã lấy được $env = $app->detectEnvir...

Kiểu dữ liệu thời gian và sự khác biệt chính của data type datetime với timestamp

Hình ảnh
Về mặt ý nghĩa thì đây đều là trường để lưu kiểu dữ liệu ngày tháng, thời gian. Còn mục đích sử dụng thì có thể tóm tắt như sau: 1. TIMESTAMP và DATETIME TIMESTAMP được sử dụng để theo dõi các thay đổi đối với các bản ghi và cập nhật mỗi khi bản ghi được thay đổi. DATETIME được sử dụng để lưu trữ giá trị cụ thể và tĩnh không bị ảnh hưởng bởi bất kỳ thay đổi nào. TIMESTAMP chịu ảnh hưởng bởi các cài đặt liên quan đến TIME ZONE. DATETIME thì không chịu ảnh hưởng bởi các cài đặt liên quan đến TIME ZONE. Giá trị giới hạn lưu dữ liệu kiểu TIMESTAMP: ‘1970-01-01 00:00:01 UTC đến’ 2038-01-19 03:14:07 Giá trị giới hạn lưu dữ liệu kiểu DATETIME: ‘1000-01-01 00:00:00 đến’ 9999-12-31 23:59:59 Ví dụ, nếu bạn đang ở Việt Nam, giả sử bạn insert dữ liệu vào column type timestamp có giá trị 1970-01-01 00:00:01 thì sẽ nhận được thông báo lỗi ngoài phạm vi lưu dữ liệu, lý do là ở Việt Nam chúng ta có múi giờ UTC +7:00, nên nếu bạn lưu với dữ liệu có giá trị 1970-01-01 07:00:01 thì sẽ thành công. Với DAT...

12 đoạn mã code Javascript sau sẽ khiến bạn giống như một chuyên gia

Hình ảnh
Ngôn ngữ lập trình Javascript hoặc Typescript chạy rất nhanh và nhẹ. Sau khi nhận kết quả từ Server, chúng ta xử lý phía Client và các mã code của bạn khi được tối ưu tốt sẽ giảm tải rất tốt cho hệ thống. Dưới đây là 12 đoạn mã code Javascript khi thực hiện sẽ khiến bạn giống như một chuyên gia vậy. Mình lưu lại bài viết này để khi cần có thể lấy ra tham khảo.   1. Xét kết quả ngẫu nhiên giá trị boolean (true / false) Hàm này sẽ trả về một boolean (true hoặc false) bằng phương thức Math.random(). Math.random sẽ tạo một số ngẫu nhiên từ 0 đến 1, sau đó chúng ta kiểm tra xem nó cao hơn hay thấp hơn 0,5. Điều đó có nghĩa là 50% / 50% tỷ lệ nhận được true hay false. const randomBoolean = () => Math.random() >= 0.5; console.log(randomBoolean());   2. Kiểm tra xem ngày là trong tuần hay cuối tuần Sử dụng phương pháp này, bạn sẽ có thể kiểm tra xem ngày bạn cung cấp trong hàm là ngày trong tuần hay ngày cuối tuần. const isWeekday = (date) => date.getDay() % 6 !== 0; console...

Chức năng Back to top JS đơn giản

Hình ảnh
Hiện nay hầu hết các trang Tin tức, Blog, Thương mai điện tử hay những website có nội dung dài hơn một trang thì chức năng Back to top khá tiện lợi, ở mọi vị trí mà con trỏ chuột ngoài phạm vi một màn hình khách hàng chỉ cần click và ngay lập tức màn hình sẽ di chuyển tới đầu trang. Tất nhiên tùy kích thước màn hình, và nếu vị trí con trỏ chuột vẫn ở trong kích thước màn hình đầu tiên thì chức năng Back to top sẽ không hiển thị. Trong ví dụ dưới đây sẽ giải thích rõ ràng hơn với ví dụ là những dòng code: 1. HTML Trong cặp thẻ detail-content là nội dung hiển thị của bạn, nếu nội dung ngắn hơn 1 màn hình thì Backtotop sẽ không hiển thị. <div class=”container”> <div class=”detail-content”> Content… </div> </div> Thẻ p chứa hình ảnh, icon backtotop, nó được xử lý bởi đoạn CSS để hiển thị ở phía dưới góc phải màn hình. <p id=”back-top” data-toggle=”tooltip” data-placement=”top” title=”Back-to-top”> </p> 2. CSS Chỉ đơn giản lấy hình ảnh hoặc icon mà bạn m...

7 tips đơn giản giúp tối ưu hóa code Javascript của bạn

Hình ảnh
Javascript là ngôn ngữ được sử dụng rất, rất nhiều. Nó chạy được trên tất cả các thiết bị, trình duyệt, là ngôn ngữ cơ bản khi developers bước vào con đường lập trình website. Ngôn ngữ lập trình nào khi viết code cũng cần được tối ưu, dưới đây là 7 tips nhỏ có thể giúp ích cho các bạn .     1. Sử dụng biến động Chúng ta vẫn quen với giá trị biến thay đổi thông qua các hàm xử lý, còn tên biến không thay đổi. Dưới đây là ví dụ cho bạn thấy mọi thứ có thể thay đổi  let dynamicProperty = ‘human’; let learn = { title: ‘Javascript’, [dynamicProperty]: ‘Senior’ }; console.log(learn); // { title:’JavaScript Best Practices’, human:’Senior’ } 2. Làm tròn giá trị Hai hàm phổ biến chúng ta hay sử dụng là math.floor() và math.round() Thay vào đó có hàm ngắn và hiệu quả hơn, đó là: ~~ Ví dụ: Math.floor(10.11); Math.round(10.11); Bạn có thể dùng: ~~(10.11) Đều cho result là: 10 3. Sử dụng Shortcuts Ví dụ đơn giản về if/else, sử dụng shortcuts hợp lý sẽ giúp code của bạn sáng hơn, ngắn...