Mã JavaScript để đặt vé

Question

Ứng dụng Đặt phòng là một ứng dụng demo để đặt vé máy bay và lên kế hoạch cho các chuyến đi. Ứng dụng này cho phép tìm kiếm vé, đặt phòng khách sạn cho những ngày mong muốn và thuê ô tô

Nội dung chính Show

Lập kế hoạch ứng dụng của chúng tôi
đánh dấu
tạo kiểu
Tương tác với Firebase
Tìm nạp sự kiện
Tạo một sự kiện
Đặt một sự kiện
Hiển thị và cập nhật dữ liệu bằng JavaScript
Làm cách nào để tạo một hệ thống đặt phòng trong HTML?
Làm cách nào để tạo ứng dụng đặt lịch sự kiện bằng HTML CSS JavaScript và Firebase?
Hệ thống đặt vé xem phim là gì?

Bạn có thể tải xuống ứng dụng này và sử dụng nó làm mẫu tạo sẵn cho dự án của mình. Các mẫu giúp tiết kiệm thời gian làm việc của các nhà phát triển và hiểu rõ hơn về đặc thù của thư viện Webix UI

Trong hướng dẫn này, chúng ta sẽ xây dựng Ứng dụng đặt chỗ sự kiện bằng HTML, CSS, JavaScript và Firebase

Lập kế hoạch ứng dụng của chúng tôi
đánh dấu
tạo kiểu
Tương tác với Firebase
Tìm nạp sự kiện
Tạo một sự kiện
Đặt một sự kiện
Hiển thị và cập nhật dữ liệu bằng JavaScript

Lập kế hoạch ứng dụng của chúng tôi

Chúng tôi sẽ không xây dựng một ứng dụng đặt sự kiện hoàn chỉnh với tất cả các chức năng. Chúng tôi không cần phải bao gồm tất cả mọi thứ chỉ trong một hướng dẫn. Vì tôi chỉ muốn giữ mọi thứ đơn giản và dễ hiểu, chúng tôi sẽ đề cập đến phần xác thực trong một bài viết riêng

Vì vậy, Ứng dụng đặt sự kiện của chúng tôi sẽ có các chức năng sau

Người dùng có thể tạo một sự kiện và lưu trữ nó vào Firestore
Người dùng có thể tìm nạp tất cả các sự kiện trong thời gian thực
Người dùng có thể đặt một sự kiện
Người dùng không thể đặt sự kiện nhiều lần

Bây giờ chúng ta đã biết ứng dụng của mình sẽ trông như thế nào, hãy bắt đầu xây dựng nó trong phần tiếp theo

đánh dấu

Tệp HTML của chúng tôi sẽ tương đối đơn giản. Chúng tôi sẽ giữ thanh điều hướng và sự kiện mới nhất trong thẻ

0

trong

0

Tiếp theo, thẻ

1 sẽ bao bọc danh sách các sự kiện và biểu mẫu cho phép chúng ta tạo một sự kiện mới

Các sự kiện sẽ được hiển thị sau với sự trợ giúp của JavaScript

trong

0

Tiếp theo, chúng tôi cần kết nối ứng dụng của mình với Firebase để có thể lưu trữ dữ liệu của chúng tôi

Để có những thông tin đăng nhập này, bạn sẽ cần tạo một ứng dụng mới trong Bảng điều khiển Firebase. Và sau khi dự án được tạo, hãy nhấp vào biểu tượng mã

3 nằm bên cạnh biểu tượng iOS và Android để đăng ký ứng dụng của bạn

Bây giờ, để tạo thông tin đăng nhập, bạn phải đăng ký tên ứng dụng của mình.
Và cuối cùng, đặt thông tin đăng nhập vào tệp HTML như tôi làm ở đây.

Tiếp theo, sao chép thẻ

4 đầu tiên và thay đổi

5 thành

6 vì chúng tôi sẽ sử dụng Firestore trong dự án này

Sau đó, khởi tạo

7 với cấu hình và khai báo một biến

8 sẽ được sử dụng sau này để tương tác với Firebase

Bây giờ, chúng tôi đã đánh dấu và đã liên kết thành công dự án của mình với Firebase. Vì vậy, hãy bắt đầu tạo kiểu cho nó trong phần tiếp theo

tạo kiểu

File CSS hơi dài nên mình sẽ không trình bày hết trong bài viết này. Tôi sẽ chỉ nhấn mạnh những phần quan trọng nhất. Tuy nhiên, đừng lo, bạn sẽ tìm thấy mã nguồn ở cuối bài viết

Như thường lệ, chúng tôi bắt đầu bằng cách nhập phông chữ của mình và thực hiện một số đặt lại để ngăn hành vi mặc định

Trong

9

2

Tiếp theo, chúng tôi sử dụng Biến CSS để lưu trữ màu sắc của mình và đặt

20 thành

21 để chúng tôi có hiệu ứng cuộn đẹp mắt khi người dùng nhấp vào liên kết thanh điều hướng

Tuy nhiên, hãy cẩn thận với

20, vì nó không được hỗ trợ bởi tất cả các trình duyệt. Bạn có thể kiểm tra tính tương thích của trình duyệt tại đây

Trong

9

7

Đối với thanh điều hướng, theo mặc định, nền sẽ trong suốt. Để có khả năng sử dụng tốt hơn, nó sẽ thay đổi khi người dùng bắt đầu cuộn

Ứng dụng đặt chỗ sự kiện của chúng tôi đang bắt đầu hình thành. Bây giờ, hãy bắt đầu triển khai Firebase và kết nối ứng dụng của chúng ta với Firestore

Tương tác với Firebase

Firebase là một nền tảng xử lý mọi thứ liên quan đến back-end cho chúng tôi. Điều duy nhất chúng ta phải làm là kết nối ứng dụng của mình với nó và bắt đầu sử dụng cơ sở dữ liệu hoặc các dịch vụ khác

Firestore là một cơ sở dữ liệu NoSQL và nó không liên quan và sử dụng các tài liệu, bộ sưu tập, v.v. để tạo cơ sở dữ liệu

Bây giờ, hãy kết nối với Firestore và tạo cơ sở dữ liệu đầu tiên của chúng tôi

Tìm nạp sự kiện

Trước đó trong hướng dẫn này, chúng ta đã khai báo một biến

8 trong phần HTML. Bây giờ, hãy sử dụng biến đó để kết nối ứng dụng của chúng ta với Firestore

Tôi sẽ đặt mọi thứ liên quan đến cơ sở dữ liệu vào tệp

25 để có cấu trúc gọn gàng hơn

Trong

25

1

Với sự trợ giúp của

8, giờ đây chúng tôi có thể truy cập bộ sưu tập của mình

28. Đó chỉ là tên của cơ sở dữ liệu của chúng tôi và nếu nó không tồn tại, Firestore sẽ nhanh chóng tạo nó cho chúng tôi

Đối tượng bộ sưu tập có một phương thức rất tiện dụng có tên là

29. Nó giúp chúng tôi lắng nghe cơ sở dữ liệu trong thời gian thực. Điều này có nghĩa là bất cứ khi nào có thay đổi xảy ra trên nó, nó sẽ phản ứng và trả lại thay đổi theo thời gian thực

Phương pháp

29 cũng sẽ giúp chúng tôi truy cập tài liệu (dữ liệu của chúng tôi). Và bây giờ, chúng ta có thể trích xuất sự kiện mới nhất để hiển thị trên tiêu đề. Và, trước khi lặp qua mảng sự kiện, hãy xóa sự kiện mới nhất để nó không hiển thị lại

Bây giờ, để hiển thị các sự kiện trên giao diện người dùng, chúng ta phải gọi các chức năng cần thiết của mình là

71 và

72. Sau đó, chúng tôi chuyển sự kiện và id cho chúng dưới dạng tham số

Bây giờ chúng tôi có thể tìm nạp các sự kiện từ Firestore, nhưng chúng tôi vẫn không có bất kỳ sự kiện nào để hiển thị. Hãy lưu trữ sự kiện đầu tiên của chúng tôi trong cơ sở dữ liệu của chúng tôi

Tạo một sự kiện

Để lấy các giá trị do người dùng nhập vào, trước tiên chúng ta phải chọn thẻ

73 và sử dụng thẻ này để chọn id của từng đầu vào và lấy giá trị đã nhập

Trong

25

0

Biến

8 (hãy nhớ rằng nó là tham chiếu đến

76) có một phương pháp khác để lưu dữ liệu vào Firestore. chức năng

77. Đó là một lời hứa và sau khi hoàn thành, giờ đây chúng ta có thể đặt lại các giá trị của biểu mẫu và hiển thị thông báo thành công cho người dùng

Bây giờ, hãy tiếp tục và xử lý trường hợp khi người dùng muốn đặt sự kiện

Đặt một sự kiện

Như tôi đã nói trước đó, chúng tôi không thể kiểm tra xem người dùng có được xác thực hay không, vì vậy họ có thể đăng ký sự kiện nhiều lần

Vì vậy, để xử lý việc này, tôi sẽ sử dụng

78 để tránh trùng lặp đặt phòng

Trong

25

6

Và như bạn có thể thấy ở đây, trước tiên chúng tôi kiểm tra xem id sự kiện có được lưu trữ trong localStorage hay không. Nếu đúng như vậy, người dùng không thể đặt lại cùng một sự kiện. Nếu không, họ sẽ có thể đặt sự kiện

Và để cập nhật quầy đặt phòng, chúng ta sử dụng lại

8 để cập nhật sự kiện trên Firestore

Tệp

25 hiện đã hoàn tất, Vì vậy, hãy chuyển sang phần cuối cùng và kết nối dự án của chúng ta với

25

Hiển thị và cập nhật dữ liệu bằng JavaScript

Như thường lệ, chúng tôi bắt đầu bằng cách chọn các yếu tố cần thiết

0

Trước đó trong bài viết này, chúng tôi đã chuyển dưới dạng tham số cho hàm

72, sự kiện được tìm nạp từ Firestore trong tệp

25

Bây giờ chúng ta có thể kéo các giá trị được giữ trên đối tượng sự kiện và hiển thị nó. Và, khi người dùng click vào nút đặt sự kiện, chúng ta sẽ gọi hàm

15 để xử lý

4

Như bạn có thể thấy, phương thức của

71 khá giống với

72, chỉ khác ở phần tử dùng để hiển thị sự kiện

Và, khi mô tả hơi dài, chúng tôi sử dụng

18 để cắt bớt giá trị

Tiếp theo, chúng tôi lắng nghe phần tử

73 để xử lý sự kiện gửi và lưu trữ nó vào Firestore với

00

Và để làm cho mọi thứ trông đẹp mắt, khi người dùng cuộn, chúng tôi thêm màu nền và bóng hộp vào thanh điều hướng

Với sự thay đổi đó, giờ đây chúng tôi đã có Ứng dụng đặt lịch sự kiện bằng JavaScript và Firebase

cảm ơn đã đọc bài viết này

Bạn có thể kiểm tra trực tiếp tại đây hoặc tìm Mã nguồn tại đây

Đọc thêm các bài viết trên blog của tôi - Đăng ký nhận bản tin của tôi - Theo dõi tôi trên twitter

QUẢNG CÁO

Ibrahima Ndaw

Người đam mê JavaScript, nhà phát triển Full-stack & blogger

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để tạo một hệ thống đặt phòng trong HTML?

Tên của bạn

.

E-mail của bạn

Làm cách nào để tạo ứng dụng đặt lịch sự kiện bằng HTML CSS JavaScript và Firebase?

Cách tạo ứng dụng đặt lịch sự kiện bằng HTML, CSS, JavaScript và Firebase .

Lập kế hoạch ứng dụng của chúng tôi

đánh dấu

tạo kiểu

Tương tác với Firebase

Tìm nạp sự kiện

Tạo một sự kiện

Đặt một sự kiện

Hiển thị và cập nhật dữ liệu bằng JavaScript

Hệ thống đặt vé xem phim là gì?

Hệ thống bán vé xem phim trực tuyến là nền tảng kỹ thuật số cho phép khách hàng truy cập các dịch vụ của doanh nghiệp, đặt chỗ và mua vé . Nền tảng này cung cấp các thông tin chi tiết như thời gian phát phim, chỗ ngồi nào có sẵn, bản xem trước phim, v.v.

programming javascript

Mã JavaScript để đặt vé

Lập kế hoạch ứng dụng của chúng tôi

đánh dấu

Events

New Event

tạo kiểu

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Tương tác với Firebase

Tìm nạp sự kiện

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Tạo một sự kiện

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Đặt một sự kiện

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Hiển thị và cập nhật dữ liệu bằng JavaScript

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Events

New Event

Làm cách nào để tạo một hệ thống đặt phòng trong HTML?

Làm cách nào để tạo ứng dụng đặt lịch sự kiện bằng HTML CSS JavaScript và Firebase?

Hệ thống đặt vé xem phim là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội