ThanhQuy202
commented
7 years ago - Ứng dụng đơn lẻ có một trang:
a) Bắt đầu
- Sau khi chạy và cài đặt ứng dụng Easy theo hướng dẫn trên github: tải tại đây hoặc bản chính thức
- Để chạy chương trình hình ảnh chạy chương trình
- Các bạn sẽ có giao diện như hình dùng mail và mật khẩu để đăng nhập: giao diện đăng nhập
- Sau khi đăng nhập
giao diện sau khi đăng nhập thành công - Chọn một trong các “Website Marketplace” để tạo ứng dụng mẫu và sửa lại cho phù hợp sử dụng một temple có sẵn để tạo Website
- Sau khi chọn chức năng 'Create' để tạo website mới giao diện website mới tạo
- Ứng dụng sẽ hiển thị giao diện như hình: 1: Build thử website 2: Open on browser
Có thể dùng các template trên lên trang này:
Tạo ứng dụng với one page và multi page. Có thể tham khảo chi tiết qua video
- Thực hiện trang web mẫu template
Cách thực hiện: Bước 1: Download hoặc clone template về máy.. Bước 2: Giải nén và copy trang index của template Edit bằng notpad++ Bước 3: Chép mã nguồn vào trang index của website vừa tạo và save lại và build lại website Bước 4: Copy các file Css, Js, Img,… vào asset Bước 5: Sau khi thực hiện các bước đó các bạn sẽ có giao diện web như temple b) Tạo tùy biến cho các thành phần bên trong 1) Menu: Tạo tùy biến biến Chọn kiểu dữ liệu phù hợp, ở đây dùng kiểu Array Thêm các thuộc tính mới Gọi biến Gọi các thuộc tính
{{#each menu-ngang}}
<li>
<a class=”page-scroll” href=”{{url}}”>{{ten}}</a>
</li>
{{/each}}
2) Array và các thành phần: Tùy biến Array là mảng chứa các thành phần giống nhau: Trong trang Gray: các thành phần tương tự trong các thẻ html Các thành phần này có thể đưa vào cùng một mảng:
- Bước 1: Vào config -> properties -> đặt tên Vd: array-gray hình ảnh minh họa
- Bước 2: Tùy chỉ biến vừa tạo thành kiểu mảng Chọn lại kiểu array và object Chọn kiểu dữ liệu thích hợp
- Bước 3: Gọi biến vừa tạo ra layout Sử dụng tổ hợp phím Ctrl + F tìm kiếm Sử dụng phím F1 để tìm biến bằng tính năng của Easyweb Giao diện như hình
3) Partial footer. Định nghĩa: Partial footer là những thành phần dùng chung có thể gọi ra và dùng lại ở những trang khác nhau cú pháp {{> tên biến}}. Lưu ý các bạn nên tùy biến cho các thành phần chung trước khi tạo partial footer hay header. Tạo partial Cắt phần footer của layout sang Partial vừa tạo Trở về layout gọi ra theo cú pháp ban đầu Save và build lại website 4) Deploy ứng dụng lên tên miền: Đưa lên tên miền Deploy và chờ hiện ra tên miền sau khi upload xong Tên miền được hiển thị và test thử trên web browser Vậy đã xong các bước tạo biến cho web 1 trang. Video 1 Video 2 Website với tên miền
- Ứng dụng nhiều hơn một trang: làm tương tự
- Sử dụng partial layout:
- Sử dụng category: Website với tên miền Dùng Category nhằm mục đích phân loại các nội dung của trang web theo một vài thể loại sẵn có Bước 1: Chọn chức năng tạo “Category” Bước 2: Tạo loại Category mới Bước 3: Tạo trang và chọn Category có sẵn Bước 4: Hoặc thêm category bằng cách chỉnh sửa thông tin trang Bước 5: Lọc các trang thuộc cùng category và sắp xếp theo thứ tự mới nhất => Kết quả là hiển thị các trang cùng thuộc một Category “Khoa học” Video hướng dẫn
1: Các bạn cần build để tạo ra nó
2: Chạy localhost sẽ thấy ứng dụng trên trình duyệt.
Các bạn có thể lên trang:
https://startbootstrap.com/template-categories/all/
để lấy các bản template về dùng dùng thử.
Phần tiếp theo là sẽ hướng dẫn các bạn dowload tạo ứng dụng từng trang khác nhau từ dễ đến khó.
Và cuối cùng sẽ có video cụ thể giúp các bạn hiểu rõ hơn. Bây giờ sẽ thực hiện trang web mẫu này
và
" và "- " để thay đổi biến
- Sau khi chỉ và gọi biến:
- Giao diện form:
- Vậy là các bạn đã thành công:
4) Deploy ứng dụng lên tên miền:
Dùng Category nhằm mục đích phân loại các nội dung của trang web theo một vài thể loại sẵn có