Html nhập giá trị vô google sheet
Tiếp theo series quản lý web với google sheet, 2 bài trước mình đã hướng dẫn các bạn thu thập thông tin vào google sheet, giờ bài này mình sẽ hướng dẫn các bạn in dữ liệu từ google sheet ra như in từ database ra nhé Show 2 bài trước mình đều hướng dẫn các bạn xử lý không dùng ngôn ngữ backend nào, hoàn toàn hướng dẫn sử dụng script, nhờ đó mà không cần nhiều kiến thức ngôn ngữ backend vẫn có thể làm được. Bài này mình cũng có 1 cách chỉ sử dụng js, không dùng ngôn ngữ backend. Tuy nhiên nhược điểm của cách này là lộ hết code, và lộ cả link google sheet của bạn nữa (sohai). Vậy nên mình khuyến khích mọi người sử dụng cách 2: sử dụng ngôn ngữ backend, xử lý đọc dữ liệu hết trước khi in ra web cho người dùng đọc, tại đây mình sử dụng ngôn ngữ đơn giản - PHP với những hàm đơn giản thôi, và không sử dụng đến google API vì nó khá phức tạp. Chuẩn bịTất nhiên là cần phải chuẩn bị dữ liệu trên google sheet để có cái mà in ra rồi :v. Để dễ dàng và đơn giản nhất, các bạn nên coi 1 file google sheet làm DB của 1 web, mỗi sheet lưu nội dung của 1 "bảng" trong DB đó. Tất nhiên có thể chia ra nhiều file google khác nhau cũng được, nhưng như vậy mất công chúng ta tìm kiếm và mở nhiều file thôi Với mỗi sheet, mình quy định như sau: mỗi cột chính là 1 Field - trường dữ liệu, mỗi hàng là 1 bản ghi. Lấy ví dụ bảng News của mình như sau nhé: Giờ khi có các "bảng" dữ liệu rồi, các bạn lưu ý các thông tin sau nhé:
Sử dụng JSXử lý URL lấy dữ liệuĐể có thể
truy cập dữ liệu trong google sheet bằng web của bạn, tất nhiên là phải public cho phép xem trước. Để public được, bạn vào Sau đó chọn public , khi đó đường link public RSS URL sẽ trông như sau:
Tuy nhiên để thuận tiện cho việc đọc dữ liệu dễ dàng, thì dạng JSON sẽ giúp cho việc phân tách dữ liệu các hàng / các cột thuận tiện hơn, vậy nên URL để lấy dữ liệu cần có chút thay đổi để trở thành public JSON URL như sau:
Vậy là đã có link sử dụng để đọc dữ liệu từ google sheet trả về Json để xử lý rồi, việc tiếp theo sẽ là xử lý đám dữ liệu này hiển thị ra cho đúng cách và đúng chỗ nhé. Chuẩn bị chỗ chèn dữ liệu (Xử lý html tại vị trí sẽ chèn dữ liệu)Trong file HTML của mình, mình sẽ đặt 1
Xử lý dữ liệu để in raGiờ tất nhiên là công việc phức tạp
nhất: xử lý dữ liệu in ra sao cho đúng ý muốn của bạn. Mình sẽ khởi tạo 1 biến để lưu dữ liệu từ google sheet, sau đó sử dụng hàm
Vì sao lại là Như các bạn thấy và click thử vào các đối tượng dữ liệu kia, thì nội dung của "bảng" mà chúng ta cần nằm trong Việc tiếp theo là xử lý dữ liệu để in ra. Tất nhiên là với dữ liệu JSON kia đã đọc được rồi thì các bạn cũng có thể tự nghĩ cách xử lý cho phù hợp, ở đây mình hướng dẫn đơn giản làm ví dụ vừa in dữ liệu vừa in HTML cho đẹp nhé: Sử dụng 1 hàm
Giờ bắt đầu phân tích này: Như đã nói ở trên, mỗi 1 item trong Trong này có 3 item cần chú ý:
Vậy là giờ cần phân tích từng item trong Giờ phân tích từng ô dữ liệu (ứng với từng Chạy thử sẽ thấy kết quả như dưới đây nhé:
Dưới đây là toàn bộ code demo cho các bạn thử, nhớ thay link google sheet của các bạn vào nhé: Như đã nói từ đầu, sử dụng js như đoạn code trên mặc dù đơn giản, "ăn
liền" nhưng chỉ cần Inspect code lên cái là lộ luôn cái file google sheet của bạn rồi (capcuu). Chính vì vậy mình khuyến khích các bạn sử dụng thêm 1 ngôn ngữ backend, mình sử dụng PHP, để xử lý hết dữ liệu rồi mới in ra màn hình. Cách làm thì cũng đơn giản Tương tự như trên, chúng ta cũng xử lý dữ liệu dạng json nhé, URL để sử dụng cũng na ná như trên kia thôi, khác tí tẹo
Tất nhiên là vào thử link thấy dữ liệu cũng như trên, tức là thông tin cần lấy ở Lợi thế của PHP chính là tính linh động (hay cũng là sự "trông xấu" của PHP Giờ đã có 1 tập dữ liệu của từng ô như bên trên rồi. Tiếp theo lại là phân tích các tập dữ liệu này, tùy thuộc vào ô đó thuộc cột bao nhiêu để lấy được dữ liệu tương ứng viết vào đúng chỗ. Ồ, vậy đoạn code trên chạy in đúng như mong muốn, bởi vì các cột đã được xếp đúng thứ tự muốn in. Nhưng nhỡ các cột chưa đúng thứ tự in ra, VD in cột 3 trước khi in cột 4, hoặc
muốn in cột 3 vài lần thì sao? Để xử lý trường hợp in không đúng thứ tự, in nhiều lần 1 giá trị trong cột, hay xử lý chuyên nghiệp hơn với các bản ghi, thì suy luận đơn giản là gom hết các dữ liệu mỗi hàng thành 1 mảng con, và đẩy vào 1 mảng 2 chiều thôi Như trên là ta đã có mảng đa chiều Đã gom hàng xong. Giờ chạy vòng lặp foreach Đấy cũng có khó đâu, đỡ 'lộ hàng' hơn JS kia nhé, mỗi tội là phải cài thêm môi trường backend chứ ko 'ăn ngay' như JS được thôi. Lười mà không sợ lộ file google sheet thì dùng JS cũng được nhé Series này của mình đã hướng dẫn cách 'Lười' - sử dụng google spread sheet làm DB, và sử dụng JS (có thể kết hợp với ngôn ngữ backend đơn giản - không framework hay hàm phức tạp) để các
bạn đỡ mất công cài môi trường cho SQL hay cho framework backend. Tất nhiên cách quản lý và xây dựng web này có nhiều nhược điểm: Mặc dù có nhiều nhược điểm, nhưng google sheet thì Free; UI, UX thì dễ dùng cho người quản lý content; và nó còn lưu lại lịch sử chỉnh sửa, đề phòng lỡ tay xóa linh tinh rồi không biết làm sao để revert |