Đây là một bài báo được tài trợ và đã đượ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ả, người duy trì tính độc lập về biên tập, ngay cả khi bài đăng được tài trợ.
Khi nói đến việc tạo trang web, nếu bạn là nhà phát triển, bạn có thể sử dụng phương pháp DIY và viết mã và tự lưu trữ mọi thứ. 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 xây dựng web để tạo các trang web đẹp chỉ với những cú nhấp chuột.
Wix thuộc về cái sau, vì nó là một trình xây dựng web cho phép bạn tạo các trang web đẹp miễn phí chỉ với một vài cú nhấp chuột. Nhưng với sự ra đời của Mã Wix, nó đã làm mờ ranh giới giữa việc tự làm và sử dụng trình 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 các biệt ngữ công nghệ phức tạp như cơ sở dữ liệu, biểu mẫu và javascrip để 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 những công cụ như vậy, vì nó thêm vô số phức tạp cho ứng dụng của họ.
Wix Code 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 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 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 một Hệ thống quản lý nội dung hơn là một trình tạo trang web.
Trong ví dụ dưới đây, chúng tôi sẽ tạo một blog Make Tech Easier đơn giản và thêm các tính năng động cho nó từ Wix Code.
Thiết lập một trang web mới với Wix
Giả sử rằng bạn là người mới sử dụng Wix, bạn có thể bắt đầu bằng cách đăng ký tài khoản với Wix. Khi bạn đã tạo 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 bản blog Make Tech Easier, nên 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í thông minh 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 pháp Wix Editor. (Để truy cập Mã Wix, bạn phải sử dụng mã sau. Nếu bạn đã chọn Wix ADI, bạn vẫn có thể chuyển sang chế độ Trình chỉnh sửa sau này.)
Đối với ví dụ này, tôi đã sử dụng Wix Editor 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. (Có hàng nghìn người trong số họ.)
Để đơ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à những gì nó trông như thế nào.
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 một 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ữ các bài đăng
Một trong những tính năng tuyệt vời của Wix Code là chức năng Cơ sở dữ liệu cho phép bạn tạo cơ sở dữ liệu (hay 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 ta sẽ cần tạo một cơ sở dữ liệu để lưu trữ tất cả các bài viết của chúng ta. Trong phần Cơ sở dữ liệu, hãy nhấp vào “Thêm bộ sưu tập mới”. Đặt tên cho bộ sưu tập của bạn và nêu rõ 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, thành viên gửi, dữ liệu riêng tư, v.v.
Sau 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 bộ sưu tập đó.
Những gì chúng tôi đã tạo là một cơ sở dữ liệu Bài đăng 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 một bài đăng trên blog. Tiếp theo, chúng ta cần đưa nội dung cơ sở dữ liệu vào trang web chính.
Trang động
Các trang động giống như một 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 lên trang đầu dưới URL của chính chúng. Ví dụ, chúng tôi có sáu bài đăng trong cơ sở dữ liệu. Với một trang động duy nhất, chúng ta có thể làm cho nó hiển thị tất cả các bài đăng trong trang web 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 Wix Code - một là để hiển thị một mục duy nhất, trong khi loại kia dành cho Danh mục (một tập hợp các mục tương tự trong một danh sách).
Phần sau trình bày cách tạo các 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, hãy 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à URL.
4. Tiếp theo, thiết kế trang và thêm 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 phần tử đó với trường từ cơ sở dữ liệu. Ví dụ:tôi đã kéo 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 cũng làm như vậy đối với hình ảnh nổi bật, nội dung bài đăng, v.v.
5. Khi bạn đã hoàn thành thiết kế, bạn có thể xem trước nó 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 Bộ lặp từ phần “Danh sách và lưới”. Kết nối tiện ích con với cơ sở dữ liệu Bài đăng và liên kết từng phần tử trong tiện ích con 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.
Thế là xong.
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ũng có thể làm điều tương tự để thêm trang động Danh mục.
Thêm javascript vào các trang
Nếu bạn là một người viết mã javascript 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 chuyển đến trang bất kỳ (hoặc trang mà 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 vào đó.
1. Chúng tôi đã tạo một biểu mẫu đơn giản sẽ thu thập Họ, Tên và địa chỉ Email từ 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) => (value, reject) => {
let otherEmailElement = $w(otherEmailElementId);
if (value === otherEmailElement.value) {
otherEmailElement.validity.valid = true;
otherEmailElement.resetValidityIndication();
return;
}
console.log("Email and Confirm Your Email fields do not match");
otherEmailElement.validity.valid = false;
otherEmailElement.updateValidityIndication();
reject("Email and Confirm Email fields do not match");
};
$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
$w('#dataset1').onBeforeSave(() => {
let validationMessage = '';
if (!$w('#emailInput').valid) {
if (!$w('#emailInput').value)
validationMessage += 'Please enter an email address\n';
else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
validationMessage += 'Email and Confirm Email fields do not match\n';
}
$w('#validationMessages').text = validationMessage;
$w('#validationMessages').expand();
}
else
$w('#validationMessages').collapse();
});
}); Thao tác này sẽ xác thực đị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 điề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. Wix Code hiện 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ọ.
Kết luận
Nếu bạn không hiểu biết về kỹ thuật hoặc một 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 rất tốt việc tạo trang web một cách dễ dàng. Với Wix Code, nó còn tiến xa hơn và cung cấp cho bạn nhiều quyền kiểm soát đối với trang web của mình. Giờ đây, bạn có quyền truy cập vào các công cụ dành cho nhà 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 sẽ hoạt động, tất cả được thực hiện bằng một cú nhấp chuột, kéo và thả đơn giản mà không cần kinh nghiệm viết mã.
Kudo to Wix vì đã 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 dùng thử Mã Wix và cho chúng tôi biết suy nghĩ của bạn về nó.
Mã Wix