Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Xây dựng Startup với PHP: Tính khả dụng của lịch biểu và lựa chọn

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Scheduling a Meeting
Using the Mailgun Store(): A Temporary Mailbox for Your App's Incoming Email

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Final product image
What You'll Be Creating

Hướng dẫn này là một phần của loạt bài Xây dựng Khởi nghiệp Với PHP của bạn trên Tuts. Trong loạt bài này, tôi hướng dẫn bạn thông qua việc khởi chạy một khởi động từ khái niệm này sang thực tế bằng ứng dụng Meeting Planner của tôi như một ví dụ thực tế về cuộc sống. Mỗi bước trên đường đi, tôi sẽ phát hành mã Cuộc họp lập kế hoạch làm ví dụ nguồn mở mà bạn có thể học hỏi. Tôi cũng sẽ giải quyết các vấn đề kinh doanh liên quan đến khởi động khi chúng phát sinh.

Tất cả mã cho Công cụ lập kế hoạch cuộc họp được viết trong Khung công tác Yii2 cho PHP. Nếu bạn muốn tìm hiểu thêm về Yii2, hãy xem loạt bài song song của tôi Lập trình với Yii2 tại Tuts+. Bạn cũng có thể muốn kiểm tra trang web cơ sở kiến ​​thức của tôi cho các câu hỏi Yii2, Sở giao dịch dành cho nhà phát triển Yii2.

Mã hóa cho chức năng họp lịch biểu trải dài trên ít nhất bốn tập. Đây là phần thứ hai trong bốn tập này, tập trung vào việc thêm AJAX vào trang lập kế hoạch để cho phép người dùng thiết lập tính khả dụng của họ và chọn địa điểm, ngày tháng và thời gian. Nếu bạn bỏ lỡ hướng dẫn trước về lập kế hoạch cho một cuộc họp, vui lòng quay lại và đọc nó trước khi tiếp tục.

Trong hướng dẫn tiếp theo, chúng tôi sẽ đề cập đến việc cung cấp yêu cầu gặp mặt qua email. Chúng tôi sẽ trở lại sau để tối ưu hóa và đánh bóng giao diện người dùng, bởi vì nó quan trọng đối với sự thành công của sản phẩm này.

Hiển thị tính khả dụng từ cơ sở dữ liệu

The Meeting Scheduling View Page

Chế độ xem lịch biểu cuộc họp tương đối phức tạp đối với mã. Cách bố trí trực quan của các cột trong bảng không liên quan trực tiếp đến cách chúng tôi lưu trữ dữ liệu liên quan trong cơ sở dữ liệu và lược đồ của chúng tôi. May mắn thay, mỗi cuộc họp không có tập dữ liệu lớn về các tùy chọn địa điểm và thời gian ngày, do đó, điều này không trình bày một vấn đề hiệu suất cụ thể.

Trong lược đồ của chúng tôi, nơi sẵn có cho các nhà tổ chức và người tham gia (nghĩa là một địa điểm có thể chấp nhận được đối với họ cho cuộc họp này) được lưu trữ trong bảng MeetingPlaceChoice hay không. Sử dụng mô hình quan hệ của chúng tôi, mỗi cuộc họp có nhiều MeetingPlaces có nhiều MeetingPlaceChoices.

Đừng nhầm lẫn giữa bảng MeetingPlaceChoice với lựa chọn cuối cùng cho một địa điểm được lưu trữ trong trạng thái MeetingPlace->status

Bảng được hiển thị ở trên sẽ xuất hiện khác nhau khi người tổ chức xem nó:

  • Địa điểm 1 | Người tổ chức | Người tham gia | MeetingPlace.choice
  • Địa điểm 2 | Người tổ chức | Người tham gia | MeetingPlace.choice

Từ khi người tham gia xem nó:

  • Địa điểm 1 | Người tham gia | Người tổ chức | (có thể có thể làm cho MeetingPlace.choice)
  • Địa điểm 2 | Người tham gia | Người tổ chức | (có thể có thể làm cho MeetingPlace.choice)

Bây giờ chúng ta hãy thảo luận cách thực hiện các bảng này trong các khung nhìn.

Hiển thị một bảng với Bootstrap

Bây giờ, tôi đã chọn để hiển thị từng khu vực, ví dụ như địa điểm hoặc ngày tháng và thời gian, trong bảng Bootstrap với các bảng của riêng nó .

Trong \ frontend \ views \ meeting \ view.php, bạn sẽ thấy sự bao gồm cho bảng điều khiển Vị trí như sau:

Đây là một phần của tệp chế độ xem bảng điều khiển cuộc họp. Điều này thiết lập lưới bảng và bao gồm một tiện ích xem danh sách để hiển thị các hàng:

Chúng ta hãy xem xét kỹ hơn chế độ xem danh sách địa điểm gặp mặt.

Hiển thị các hàng với các Widget chuyển đổi Bootstrap

Yii Listview sẽ hiển thị một hàng dữ liệu cho mỗi địa điểm. Mã hoạt động gần như giống hệt nhau cho thời gian ngày.

Tôi đang sử dụng Yuki2 Switch Input Widget của Krajee cho Bootstrap Switch thay cho các hộp kiểm và hộp combo nhàm chán:

Examples of The Bootstrap Switch Input

Tôi thích cách lựa chọn ba trạng thái cho phép chúng tôi hiển thị cho người tham gia một trạng thái duy nhất trước khi họ lựa chọn; nó cũng cho phép chúng tôi hiển thị trình tổ chức mà người tham gia vẫn chưa thực hiện lựa chọn.

Hãy đi qua cột mã theo cột. Dưới đây là bảng điều khiển Vị trí và bảng chúng tôi đang triển khai:

The Place Panel

Cột địa điểm

Trong cột đầu tiên, tôi sử dụng trình trợ giúp liên kết Yii Html để liên kết tên của địa điểm với trang xem của riêng nó — hãy lưu ý cách chúng tôi đang sử dụng thanh địa điểm.

Cột tổ chức

Để tìm các lựa chọn của tổ chức, chúng ta lặp qua mảng MeetingPlaceChoices, kết hợp user_id với meeting->owner_id:

Để chọn tính khả dụng của bạn tại một địa điểm cụ thể, chúng tôi đang sử dụng chế độ hộp kiểm của đầu vào của chuyển đổi, tức là địa điểm này hoạt động cho bạn (bật) hoặc không (tắt).

Thuộc tính giá trị đặt công tắc khi tải. Id tương ứng với MeetingPlaceChoice->id được sử dụng cho AJAX bên dưới để xác định chuyển đổi cụ thể này.

Bạn cũng có thể nhận thấy rằng chúng tôi đang sử dụng glyphicons cho có và không thay thế nhãn.

Cột người tham gia

Mã cho người tham gia thực hiện các công tắc trạng thái tri. tức là nơi này làm việc cho bạn (trên), nó không (tắt) hoặc bạn chưa chỉ ra (không xác định):

Khi chúng tôi thêm hỗ trợ cho các cuộc họp cho phép người tham gia đề xuất địa điểm và thời gian ngày, chúng tôi cũng sẽ thêm các tiện ích con ba trạng thái vào cột tổ chức.

Hiển thị công tắc Chọn địa điểm và ngày giờ

Nếu người tổ chức đang xem cuộc họp, chúng tôi sẽ cho phép họ chọn địa điểm họp và ngày giờ cuối cùng. Chẳng bao lâu nữa, chúng tôi cũng sẽ thêm hỗ trợ cho các cuộc họp để cho phép người tham gia chọn chúng.

Trong trường hợp này, người dùng đang thực hiện lựa chọn trên các hàng (chọn một trong các địa điểm được liệt kê). Điều này yêu cầu chúng tôi sử dụng đầu vào chuyển đổi trong chế độ nút radio. Đối với các sự kiện AJAX cho các trình chọn, chúng ta chỉ có thể nghe trên thuộc tính name - không cần id, bởi vì chỉ có một lựa chọn có thể cho bảng điều khiển.

Tôi cũng muốn công tắc lựa chọn xuất hiện khác với công tắc sẵn có, vì vậy tôi làm cho chúng rộng hơn và sử dụng các màu khác nhau.

Bây giờ tôi sẽ hướng dẫn bạn cách chúng tôi triển khai hỗ trợ AJAX cho tất cả các trình chọn lựa này.

Triển khai hỗ trợ AJAX

Rõ ràng, tôi muốn tránh yêu cầu người dùng lưu các thay đổi đối với các biểu mẫu này. Thay vào đó, tôi muốn các switch chuyển trạng thái qua AJAX mà không cần refresh lại trang.

Mã được chia giữa việc thiết lập trình lắng nghe sự kiện để phản ứng với các thay đổi trạng thái và các hành động của bộ điều khiển để ghi lại các thay đổi trong cơ sở dữ liệu của chúng tôi. Nó cũng hơi khác nhau đối với các công tắc hộp kiểm so với các công tắc vô tuyến.

Xây dựng người nghe sự kiện

Chúng tôi tạo trình xử lý sự kiện để thực thi mã bất cứ khi nào trạng thái của nút được thay đổi. Sự kiện nghe là mã JavaScript được PHP tạo ra trong giao diện bảng điều khiển (cho toàn bộ bảng tùy chọn).

Đây là mã ở cuối \ frontend \ views \ meeting-place \ _panel.php:

Nhân tiện, nếu có ai có thể cho tôi biết tên của JS viết tắt cho PHP, hãy đăng nó trong phần bình luận. Tôi muốn biết. Một số điều khó tìm kiếm.

Hàm registerJs trong Yii hiển thị tập lệnh cho một vị trí $ cụ thể trên trang. Trong trường hợp này, nó là một sự kiện sẵn sàng.

Đoạn mã trên thiết lập các sự kiện nghe cho tất cả các nút radio cho trình chọn vị trí cho tất cả các địa điểm theo thuộc tính tên. Giá trị mục tiêu của sự kiện sẽ đại diện cho id địa điểm cuộc họp đã chọn. Tôi sẽ nói thêm về chức năng AJAX trong giây lát.

Nói cách khác, các sự kiện radio chuyển đổi đáp ứng với người tổ chức (nói chung) chọn một địa điểm hoặc ngày để hoàn tất cuộc họp, truyền id cuộc họp hoặc id cuộc họp.

Đây là mã để nghe các thay đổi về tính khả dụng với các hộp kiểm nhập chuyển đổi:

Trình lắng nghe được thiết lập cho tất cả các thuộc tính tên cuộc họp-nơi-lựa chọn nhưng nó phải vượt qua id để cho biết chính xác MeetingPlaceChoice nào đang được thay đổi.

Để làm rõ, các trình lắng nghe sự kiện cho các hộp kiểm chuyển đổi đầu vào cho phép người dùng nói rằng họ có sẵn hay không cho một địa điểm hoặc ngày giờ. Họ gửi id lựa chọn nơi cuộc họp hoặc id thời gian cuộc họp.

Bây giờ, chúng ta hãy xem xét kỹ hơn cách các sự kiện AJAX gọi các hành động điều khiển dựa trên PHP của chúng ta để ghi lại các thay đổi trạng thái trong cơ sở dữ liệu.

Xây dựng các hành động điều khiển

Đây là đoạn mã một lần nữa cho trình chọn nút radio tại chỗ gặp:

URL cho biết đường dẫn đến hành động chọn của trình điều khiển MeetingPlace:

Id $ đến đại diện cho meeting_id. Giá trị đại diện cho id MeetingPlace đã chọn. STATUS_SELECTED cho biết địa điểm đã được chọn, trong khi STATUS_SUGGESTED chỉ cho biết địa điểm đã được đề xuất (không được chọn).

Mã này lặp qua các địa điểm họp của mỗi cuộc họp và cập nhật trạng thái của địa điểm đã chọn.

Hãy xem xét lại mã cho hộp kiểm chuyển đổi đầu vào để xác định xem ai đó có sẵn cho một địa điểm cụ thể không:

Những sự kiện này gọi hành động của bộ điều khiển MeetingPlaceChoice với một chuỗi có hậu tố chứa id của bản ghi MeetingPlaceChoice cần phải được cập nhật:

Đảm bảo yêu cầu AJAX

Vì lý do bảo mật, chúng tôi cần xác minh rằng yêu cầu AJAX đã được bắt đầu bởi người dùng thực tế có thể thực hiện những thay đổi này. Mã này thực hiện điều đó:

Nếu không có các kiểm tra này, sẽ dễ dàng cho một hacker viết kịch bản để sửa đổi cài đặt cuộc họp cho bất kỳ ai và mọi người.

Mã AJAX cho biết tính khả dụng cho thời gian ngày và đưa ra lựa chọn gần như giống nhau.

Hỗ trợ cài đặt sẵn có

Để hỗ trợ tất cả các tính năng trên, chúng tôi cũng cần thêm mã để thêm bản ghi vào các bảng MeetingPlaceChoice MeetingTimeChoice bất cứ khi nào người tham gia, địa điểm và ngày giờ được thêm vào. Đối với điều này, chúng tôi sử dụng các sự kiện afterSave của Yii.

Khi một người tham gia được thêm vào, chúng ta cần thêm hàng MeetingPlaceChoice mới cho mỗi MeetingPlace và các hàng MeetingTimeChoice mới cho mỗi MeetingTime. Đây là mã trong mô hình Tham gia tự động xử lý điều này cho chúng tôi:

Khi một địa điểm mới được thêm vào, MeetingPlaceChoices mới là cần thiết cho mỗi người tham dự:

Tương tự như vậy, khi một thời gian ngày mới được thêm vào, các mục mới là cần thiết cho MeetingTimeChoice cho mỗi người tham dự:

Giả sử rằng khi người tổ chức cuộc họp thêm địa điểm hoặc ngày giờ, thì nó hoạt động cho họ ban đầu.

Chọn địa điểm, ngày và giờ cuối cùng

Khi có ít nhất một người tham gia được mời, một nơi và một lần, người tổ chức cuộc họp có thể hoàn tất cuộc họp. Trong tương lai, chúng tôi cũng sẽ cho phép người tham gia hoàn thành cuộc họp.

Trong khi mã này sẽ thay đổi một chút về phía trước, có một hàm trong mô hình Cuộc họp cho biết xem có bật nút Hoàn tất hay không:

Đây là mã xem:

Khi cuộc họp được hoàn thành, MeetingPlanner sẽ thay đổi chế độ từ hỗ trợ lập kế hoạch để tạo điều kiện cho người tham dự tham dự thông qua một loạt các tính năng thú vị mà chúng tôi sẽ đề cập trong các hướng dẫn trong tương lai.

Vấn đề mã hóa tôi gặp phải

Tôi muốn đề cập đến một vài vấn đề mà tôi gặp phải khi viết mã cho phần tương đối phức tạp này.

Các loại AJAX

Các trạng thái SwitchInput được gửi qua JavaScript dưới dạng các kiểu boolean, ví dụ như true hoặc false, nhưng tôi cần chuyển đổi chúng thành các giá trị số nguyên để truyền thành công chúng qua AJAX tới các bộ điều khiển.

ID chồng chéo

Các ID số của các tiện ích MeetingPlaceChoiceMeetingTimeChoice chồng lên nhau. Tôi mất một lúc để tìm ra lý do tại sao các tiện ích chuyển đổi ngừng hiển thị chính xác cho tôi khi tôi thêm khả năng lựa chọn. Vì có các id chồng chéo, các tiện ích chuyển đổi chỉ hiển thị đối tượng đầu tiên.

Nó là cần thiết để thêm tiền tố như mpc- hoặc mtc- vào các id và loại bỏ chúng trong các hành động điều khiển.

Dưới đây là nơi chúng tôi rút tiền tố đó ra khỏi bộ điều khiển để tải mô hình:

Swith Input Widget Nút radio tải trạng thái

Tôi mất một lúc để khám phá cách đặt trạng thái tải / giá trị ban đầu cho tiện ích con chuyển đổi đầu vào ở chế độ nút radio. Không có tài liệu nào cho thấy cách thực hiện điều này. Tôi cuối cùng đã viết lên một explainer ở đây cho những người khác: Thiết lập trạng thái của nút chuyển đổi đầu vào phụ tùng Radio Button.

Cái gì tiếp theo?

Bây giờ tất cả AJAX đã sẵn sàng và đang hoạt động, đã đến lúc hoàn thành một số khu vực còn lại của chế độ xem kế hoạch cuộc họp để chuẩn bị cho các lời mời đã được gửi và cần được người xem xem.

Ví dụ: chế độ xem lịch họp mà người tham gia thấy sẽ khác trong bố cục so với người tổ chức và lịch sẽ khác nhau tùy thuộc vào quyền hạn mà người tổ chức đã ủy quyền.

Ví dụ: cột bạn và cột sẽ cần phải thay đổi từ triển khai hiện tại của chúng. Sẽ cần phải mở rộng Cài đặt mô hình cuộc họp để xác định liệu người tham gia có thể đề xuất địa điểm và ngày giờ và hoàn thành cuộc họp hay không.

Hơn nữa trong tương lai, tôi có thể muốn cho phép nhiều người tham gia và cần hiển thị nhiều cột sẵn có hơn cho chế độ xem tổ chức — chức năng này không phải là một phần của sản phẩm khả thi tối thiểu (MVP) của chúng tôi.

Tôi cũng cần hoàn thành việc thực hiện MeetingLog để ghi lại mọi thay đổi được thực hiện cho một cuộc họp trong quá trình lập kế hoạch. Điều này sẽ cung cấp một loại lịch sử lập kế hoạch cho mỗi cuộc họp. Tôi có thể sử dụng các sự kiện afterSave () cho điều này.

Xem các hướng dẫn sắp tới trong loạt bài Xây dựng Khởi nghiệp Với PHP của bạn — danh sách các chủ đề sắp tới hiện được đăng trong Mục lục của chúng tôi.

Xin vui lòng thêm câu hỏi và bình luận của bạn dưới đây; Tôi thường tham gia vào các cuộc thảo luận. Bạn cũng có thể liên hệ với tôi trên Twitter @reifman hoặc gửi email trực tiếp cho tôi.

Liên kết liên quan

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.