Hỏi cách lưu hình, video trên web và cách làm editor trên web

hoalaxanh123 · March 28, 2022, 11:04am

Chào cả nhà,
Mình đang học cách làm một trang web tin tức thì đang hơi lấn cấn, nhờ mọi người giải ngố:

Có những cách nào để lưu hình và video trên website mọi người nhỉ. Hiện tại mình đang làm là khi user up lên, lưu ở 1 folder nào đó, sao đó lưu đường dẫn lại để lần sau load ra.
Cách để tạo 1 editor trực tiếp trên trang web, ý mình là khi một user vào viết bài viết, họ có thể trực tiếp thấy cái bài viết đó sẽ được hiển thị trên web như thế nào ấy. Hiện tại mình đã triển khai dùng dùng CK-editor để viết bình thường và rồi lưu HTML đó vào CSDL, sau này đọc ở CSDL và load HTML lên cho user.

2 cách triển khai của mình ổn không cả nhà nhỉ. Môi trường test và dev thì mình thấy oke chưa vấn đề gì, nhưng môi trường thực tế sợ nó bị sao đó. Ai biết được, user là test đỉnh nhất mà.
Các bác có kinh nghiệm chia sẻ cho mình với, dù sao biết được mà tránh vẫn tốt hơn là bị rồi mới sửa đúng không ạ.

Update: vì mình dùng html để lưu và load nội dung bài viết nên khi soạn nó là 1 đường, hiển thị nó nghẹo một đường khác, bể từa lưa vì bị ảnh hưởng css. Chèm

Chân thành cảm ơn cả nhà.

superthin · March 28, 2022, 3:02am

Nên nhớ bạn đang làm là thực hành không phải lý thuyết. Do đó, những cái bạn đang hỏi tại sao bạn không thử bắt tay vào làm xem nó có khả thi hay không? Trong quá trình đó bạn sẽ tìm thấy cách làm phù hợp hoặc chưa tốt nhưng ít ra là cũng đã tự xoay xở. Chỉ cần bỏ ra một buổi thì bạn sẽ biết được liệu những cái bạn “định” làm ở trên có khả thi hay không.

Hãy học bằng cách làm, không phải học bằng cách đi hỏi. Sau khi làm tháy có vấn đề mới nên đi hỏi vì người ta rất ghét trả lời những ông ngồi mơ mộng với những kế hoạch vĩ đại.

Hơn nữa, để làm được web động, chắc chắn bạn đã biết cách làm web tĩnh, thì rõ ràng là bạn cũng đã hình dung được web khi chưa có cơ sở dữ liệu thì nó cất giữ những tài nguyên tĩnh ở đâu. Giờ thì từ web tĩnh thành web động, cái gì khác nhau và giống nhau.

Bớt hỏi, hãy bắt tay làm!

hoalaxanh123 · March 28, 2022, 3:04am

Mình làm rồi bạn, đang đi hỏi xem có cách làm hay hơn không thôi

superthin · March 29, 2022, 1:27pm

Nhưng cách hỏi của bạn thì mình lại nghĩ rằng bạn chưa thực sự bắt tay vào làm. Lý do là có cách nào hay hơn thì bạn phải đặt câu hỏi cụ thể.

Ví dụ cho bạn dễ hiểu hơn về cách đặt câu hỏi để kích thích người ta tham gia chủ đề của bạn. Hãy đặt câu hỏi vầy: khi làm với CKEditor, khi lưu thì có khả nhiều ký tự bỗng nhiên từ khoảng trắng biến thành non-breaking space, vậy, bỗng nhiên từ 1 ký tự được lưu thành 4 ký tự, tốn 3 byte chẳng để làm gì. Liệu CKEditor có cấu hình ngăn cản việc này hay là phải xử lý lúc save để đổi   thành khoảng trắng?

Hoặc, câu hỏi là: khi người dùng upload lên file như vậy cảm thấy là nếu họ upload file đặt tên rối rắm, có cần thiết phải xử lý để đặt lại tên file? Liệu có rủi no nào ngoài việc tên file trông kỳ quái?

Hoặc có thể chưa làm, đang quá trình tìm hiểu thì cũng liệt kê ra vài phương án và làm một bảng liệt kê, nhận định sơ khởi về phương án, và nhờ mọi người góp ý làm rõ xem liệu những thứ tìm được có xác thực chưa, cần điều chỉnh chỗ nào.

Nói chung: đi sâu vào những câu hỏi nhỏ/ gọn, chuyên kỹ thuật anh em ở đây sẽ vui,
muốn trả lời hơn các câu hỏi dạng tổng quát hóa.

hoalaxanh123 · March 28, 2022, 3:12am

Okie bác, mình sẽ update lại bài viết. Cảm ơn bác đã chia sẻ.

Piter · March 28, 2022, 3:36am

Lưu ảnh:
user up ảnh hello.png => server đổi hello thành UUID để không bị trùng, hello.png thành rgutrgsdf454tu54urg45t0refff.png => lưu rgutrgsdf454tu54urg45t0refff.png vào bảng images trong database (bảng đó có các cột như userId, postId, categotyId, imageName, …). Khi load ảnh thì có ENV là https//mydoamain.com/images/ nối chuỗi với rgutrgsdf454tu54urg45t0refff.png là thành https//mydoamain.com/images/rgutrgsdf454tu54urg45t0refff.png
Trang biên tập chia làm 2 tab, 1 tab là CKediter, 1 tab là cho xem trước kết quả giống text Editer của DayNhauHoc, CKeditor cho bắt sự kiện onChange, mỗi khi có ký tự mới thì update bên tab review luôn.

htwap · March 30, 2022, 12:10pm

Khi mới học code, và thông thường với các project nhỏ thì có thể làm theo cách lưu trữ uploaded files cùng chung server với code như vậy. Nhưng qua thời gian thì dung lượng lưu trữ trên server sẽ bị ngốn và cạn dần, do đó có thể tích hợp các dịch vụ lưu trữ file trên cloud / server khác.
Thứ nhất để server không bị sập bất thình lình vào 1 ngày đẹp trời nào đó, thứ hai phục vụ cho việc bạn triển khai horizontal scaling dễ dàng hơn, thứ 3 là các bên lưu trữ file kia có thể tích hợp thêm CDN giúp người dùng tiếp cận nhanh hơn.
Với kinh nghiệm của bản thân mình thì biết vậy, các bác nếu có gì thì góp ý hoặc bổ sung thêm cho mình nhé.
cái bạn đang hỏi được gọi chung là WYSIWYG, bạn có thể tìm hiểu thêm dựa vào từ khóa này.

Piter · March 28, 2022, 8:01am

Nếu upload lên cloud thì dùng cách nào vậy anh

Cách 1 server của mình không tốn băng thông khi user upload, như không xác thực được user, nếu lộ link sẽ bị lợi dụng link upload miễn phí.
Cách 2 thì server của mình lại tốn băng thông 2 lần: lần 1 nhận stream file do user upload lên, lần 2 server upload lên cloud nhưng xác thực được người dùng thông qua logic thông thường bằng session hoặc bearer token.

htwap · March 28, 2022, 8:22am

Cách 1 thì bạn vẫn phải xác thực user rồi mới tạo ra link cho user upload lên chứ, và link đó cũng sẽ hết hạn sau 1 khoảng thời gian nên việc để lộ link cũng không ảnh hưởng quá nhiều. Trade off cho việc tiết kiệm băng thông và giảm thời gian upload file cho user thôi.
nhưng flow ở hình 1 có vẻ chưa đúng lắm, phải là aws sẽ trả về link uploaded file cho user, sau đó user sẽ submit lên server chứ.

Piter · March 28, 2022, 8:35am

Đúng đúng, trong docs hướng dẫn sử dụng trước khi dùng nó cũng bảo phải làm vậy nhưng em chưa hiểu cách implement lắm.

htwap · March 28, 2022, 12:16pm

mấy cái trong editor mình thấy chủ yếu là inline CSS nên nếu bị ảnh hưởng thì khả năng là do CSS bên ngoài của bạn dùng element tag làm selector, cái này nếu k cho được vào 1 scope nhất định thì nên tránh nha.