Đây là một bài báo được tài trợ và có thể được thực hiện bởi Wix. Nội dung và ý kiến ​​thực tế là quan điểm duy nhất của tác giả duy trì độc lập biên tập, ngay cả khi bài đăng được tài trợ.

Khi nói đến việc tạo một trang web, nếu bạn là một nhà phát triển, bạn có thể sử dụng cách tiếp cận DIY và mã và lưu trữ tất cả mọi thứ cho mình. Nếu bạn là người dùng cuối / người tiêu dùng giống như hầu hết chúng ta, bạn có thể sử dụng phần mềm trình tạo web để tạo các trang web đẹp chỉ với các nhấp chuột.

Wix thuộc về sau, vì nó là một nhà xây dựng web cho phép bạn tạo ra các trang web đẹp miễn phí chỉ với một vài cú click chuột. Nhưng với sự ra đời của Wix Code, nó đã làm mờ ranh giới giữa việc tự làm nó và sử dụng một người xây dựng web. Bây giờ bạn có thể làm cả hai.

Nếu bạn đang xây dựng một ứng dụng web hoặc trang web động, bạn sẽ phải sử dụng thuật ngữ công nghệ phức tạp như cơ sở dữ liệu, biểu mẫu và javascripts để xây dựng một trang web tương tác. Hầu hết các nhà xây dựng web không cung cấp các công cụ như vậy, vì nó thêm tấn biến chứng vào ứng dụng của họ.

Mã Wix thêm những thứ như vậy vào các công cụ xây dựng web hiện có của nó mà không có sự phức tạp. Nó cung cấp một số mẫu để bạn xây dựng và quản lý cơ sở dữ liệu, biểu mẫu của bạn và cũng cho phép bạn thêm mã javascript vào trang web của mình. Hơn hết, bạn có thể sử dụng tính năng trang động để nhanh chóng điền nội dung từ cơ sở dữ liệu, làm cho nó giống như Hệ thống quản lý nội dung hơn là người xây dựng trang web.

Trong ví dụ dưới đây, chúng ta sẽ tạo một blog Make Tech Easier đơn giản và thêm các tính năng động vào nó từ Mã Wix.

Thiết lập một trang mới với Wix

Giả sử bạn mới sử dụng Wix, bạn có thể bắt đầu bằng cách đăng ký một tài khoản với Wix. Khi bạn đã tạo một tài khoản, bạn sẽ được nhắc tạo trang web của mình.

Tiếp theo, nó sẽ yêu cầu bạn chọn loại trang web bạn muốn tạo. Vì tôi đang nhân rộng blog Make Tech Easier, tôi đã chọn tùy chọn “Blog”.

Màn hình tiếp theo sẽ hỏi bạn muốn tạo trang web của mình như thế nào.

Wix ADI sử dụng trí tuệ nhân tạo để tạo trang web tự động cho bạn. Nếu bạn muốn sử dụng thủ công, hãy chọn phương thức Wix Editor. (Để truy cập Wix Code bạn phải sử dụng sau này. Nếu bạn đã chọn Wix ADI, bạn vẫn có thể chuyển sang chế độ Editor sau này.)

Trong ví dụ này, tôi đã sử dụng Trình chỉnh sửa Wix vì tôi muốn có toàn quyền kiểm soát giao diện của trang web. Từ đó bạn có thể bắt đầu với một mẫu. (Bọn họ có hàng ngàn người.)

Để đơn giản, tôi bắt đầu với một mẫu trống với bố cục cổ điển. Hình ảnh sau đây là hình ảnh.

Truy cập mã Wix

Để truy cập Mã Wix, hãy chuyển đến “Công cụ” và chọn tùy chọn “Công cụ dành cho nhà phát triển”.

Bây giờ bạn sẽ thấy cột “Cấu trúc trang web” mới. Đây là nơi bạn có thể truy cập tất cả các tính năng của Mã Wix.

Tạo cơ sở dữ liệu để lưu trữ bài đăng

Một trong những tính năng tuyệt vời của Mã Wix là chức năng Cơ sở dữ liệu cho phép bạn tạo cơ sở dữ liệu (còn gọi là Bộ sưu tập) và lưu trữ dữ liệu trong đó. Đối với một blog, chúng tôi sẽ cần phải tạo ra một cơ sở dữ liệu để lưu trữ tất cả các bài viết của chúng tôi. Trong phần Cơ sở dữ liệu, nhấp vào “Thêm bộ sưu tập mới.” Đặt tên bộ sưu tập của bạn và chỉ định mục đích của nó. Có một số loại cơ sở dữ liệu mà bạn có thể chọn, từ nội dung do người dùng tạo, gửi thành viên, dữ liệu cá nhân, v.v.

Khi bộ sưu tập được tạo, bạn có thể bắt đầu thêm các trường và dữ liệu vào đó.

Những gì chúng tôi đã tạo là một cơ sở dữ liệu bài viết có chứa tiêu đề, nội dung, ngày xuất bản và các khía cạnh khác nhau của bài đăng trên blog. Tiếp theo, chúng ta cần điền nội dung cơ sở dữ liệu vào trang chính.

Trang động

Các trang động giống như trang mẫu nơi bạn có thể tạo một thiết kế và kết nối nó với cơ sở dữ liệu và nó sẽ tự động điền tất cả các mục trong cơ sở dữ liệu của bạn vào trang đầu dưới URL riêng của chúng. Ví dụ, chúng tôi có sáu bài viết trong cơ sở dữ liệu. Với một trang động duy nhất, chúng tôi có thể hiển thị tất cả các bài đăng trong trang chính. Điều này giúp bạn tiết kiệm công sức để tạo thủ công một trang cho mỗi bài đăng. Có hai loại trang động chính trong Mã Wix - một trang để hiển thị một mục duy nhất, còn mục kia là dành cho Danh mục (một tập hợp các mục tương tự trong danh sách).

Phần sau đây cho thấy cách tạo trang động và liên kết chúng với trang web.

1. Trên thanh công cụ nổi, nhấp vào biểu tượng đầu tiên và chọn “Trang động”. Nhấp vào nút “Thêm vào trang web”.

2. Chọn “Trang mục” từ cửa sổ bật lên.

3. Trong URL, chọn trường (trong cơ sở dữ liệu) mà bạn muốn nó sử dụng cho URL. Trong trường hợp này, tôi đặt “tiêu đề” làm URL.

4. Tiếp theo, thiết kế trang và thêm vào các trường từ cơ sở dữ liệu. Với mọi phần tử bạn kéo đến trang, bạn có thể nhấp vào nút “Kết nối với dữ liệu” để liên kết nó với trường từ cơ sở dữ liệu. Ví dụ, tôi đã kéo một phần tử "Tiêu đề 1" vào trang và liên kết nó với trường "Tiêu đề" trong cơ sở dữ liệu Bài đăng.

Và tôi đã làm tương tự cho hình ảnh nổi bật, đăng nội dung, v.v.

5. Khi bạn đã hoàn thành thiết kế, bạn có thể xem trước và xem nó trông như thế nào trên giao diện người dùng.

6. Bước tiếp theo là liên kết trang động từ Trang chủ. Tải trang chủ và thêm tiện ích lặp lại từ phần “Danh sách và lưới”. Kết nối tiện ích với cơ sở dữ liệu Bài đăng và liên kết từng phần tử trong tiện ích với các trường trong cơ sở dữ liệu. Trong phần “Liên kết kết nối với”, cuộn xuống và chọn “Bài đăng” trong phần Trang động.

Đó là nó.

Những gì bạn có thể thấy là chúng tôi chỉ tạo một trang động và nó sẽ tự động tạo tất cả các trang cho từng mục trong cơ sở dữ liệu. Bạn có thể làm điều tương tự để thêm trang Danh mục động.

Thêm javascript vào các trang

Nếu bạn là một người viết mã javascript có hiểu biết, bạn có thể thêm javascript vào từng tính năng bổ sung trên mỗi trang. Ví dụ: nếu bạn đã thêm biểu mẫu người dùng vào trang của mình, bạn có thể sử dụng javascript để xác thực trường biểu mẫu trước khi gửi.

Lưu ý : để thêm mã javascript vào một trang, hãy truy cập trang bất kỳ (hoặc trang bạn muốn mã xuất hiện) và nhấp vào nút “Mã trang” ở cuối mã. Một cửa sổ sẽ xuất hiện và bạn có thể thêm mã của mình ở đó.

1. Chúng tôi đã tạo một biểu mẫu đơn giản sẽ thu thập Tên, Họ và Địa chỉ email của người dùng. Đối với biểu mẫu này, chúng tôi muốn xác thực địa chỉ email và đảm bảo trường “Xác nhận email” giống với trường “Email”.

2. Thêm mã sau vào phần “Mã trang”:

 $ w.onReady (function () {const validateEmail = (otherEmailElementId) => (giá trị, từ chối) => {cho phép khácEmailElement = $ w (otherEmailElementId); if (value === otherEmailElement.value) {otherEmailElement.validity.valid = true; otherEmailElement.resetValidityIndication (); return;} console.log ("Email và Xác nhận các trường Email của bạn không khớp"); otherEmailElement.validity.valid = false; otherEmailElement.updateValidityIndication (); từ chối ("Email và Xác nhận Email các trường không khớp với ");}; $ w (" # emailConfirmInput ") onCustomValidation (validateEmail (" # emailInput ")); $ w (" # emailInput "). onCustomValidation (validateEmail (" # emailConfirmInput ")); $ w ('# dataset1'). onBeforeSave (() => {let validationMessage = ''; if (! $ w ('# emailInput'). hợp lệ) {if (! $ w ('# emailInput'). giá trị) validationMessage + = 'Vui lòng nhập địa chỉ email \ n'; else if ($ w ('# emailInput'). giá trị! == $ w ("# emailConfirmInput"). giá trị) {validationMessage + = 'Email và Xác nhận các trường Email không khớp \ n ';} $ w (' # validationMessages '). text = v alidationMessage; $ w ('# validationMessages'). mở rộng (); } else $ w ('# validationMessages'). collapse (); }); });

Điều này sẽ xác nhận địa chỉ email và hiển thị thông báo lỗi nếu email không hợp lệ.

Có rất nhiều bạn có thể làm với Javascript. Xem các ví dụ ở đây để biết thêm thông tin.

API bên ngoài

Đây là bước duy nhất mà nó có thể trở nên phức tạp hơn. Mã Wix giờ đây tích hợp với API bên ngoài, vì vậy bạn có thể dễ dàng kết nối với các dịch vụ của bên thứ ba như Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier, v.v. Tôi sẽ không đi vào chi tiết ở đây, nhưng nếu bạn quan tâm, bạn có thể xem tài liệu API của họ.

Phần kết luận

Nếu bạn không hiểu biết về mặt kỹ thuật hoặc nhà phát triển, việc xây dựng trang web của riêng bạn có thể là một công việc tẻ nhạt. Wix đã làm tốt công việc tạo trang web một cách dễ dàng. Với mã Wix nó đi một notch hơn nữa và cung cấp cho bạn rất nhiều quyền kiểm soát trên trang web của bạn. Bây giờ bạn có quyền truy cập vào các công cụ phát triển web phức tạp và kiểm soát hoàn toàn cách trang web của bạn hoạt động, tất cả được thực hiện chỉ bằng một lần nhấp, kéo và thả đơn giản mà không cần phải có trải nghiệm mã hóa.

Kudos để Wix tạo ra một công cụ dễ sử dụng như vậy sẽ giải quyết được nhiều vấn đề.

Hãy thử Wix Code và cho chúng tôi biết bạn nghĩ gì về nó.

Mã Wix