Công ty truyền thông Twilio đã công bố Picture Messaging (tin nhắn hình ảnh) đến với người dùng, tính năng này đã mở rộng khả năng mà chúng ta có thể thực hiện được với tin nhắn văn bản. Với Picture Messaging, người dùng có thể đính kèm hình ảnh vào tin nhắn văn bản và sử dụng chúng theo nhiều cách khác nhau tùy mục đích.
Trong bài viết này, chúng ta sẽ cùng nhau xây dựng thẻ Photo Wall, trong đó hình ảnh đã liên kết với các thẻ sẽ được hiển thị trên một website.
Việc này có thể hữu ích đối với các sự kiện, tiệc tùng, hoặc bất cứ khi nào bạn muốn kết hợp hình ảnh với các thẻ.
Để xử lý hình ảnh, chúng ta sẽ phải thực hiện một số bước, trước tiên là lưu trữ hình ảnh cục bộ, sau đó thay đổi kích thước ảnh để chúng có thể hiển thị vừa vặn trên màn hình thiết bị của người dùng.
Chúng ta cũng sẽ sử dụng Jolt Microframework cho PHP, và Idiorm và Paris cho xử lý MySql.
Nội dung chính
Trước tiên, hãy cùng nhau thiết lập cơ sở dữ liệu đã nhé:
Chúng ta sẽ thiết lập hai bảng, một bảng để lưu trữ thẻ, một bảng để lưu trữ hình ảnh và id của thẻ được kết hợp.
Bảng này sẽ lưu trữ thẻ, hình ảnh, và dữ liệu meta về số điện thoại đã gửi ảnh.
Chúng ta cũng cần phải tải Jolt framework, Thư viện PHP của Twilio, Idiorm và Paris về máy.
Việc đầu tiên bạn cần làm là thu thập những packages này từ các website tương ứng.
Sau khi có tất cả các packages này trong máy tính, hãy bắt tay vào thiết lập cấu trúc thư mục. Chúng ta sẽ đưa các tập tin vào thư mục gốc trên website.
Đặt các tập tin liên quan đến dịch vụ web vào trong thư mục Services.
Bây giờ hãy thiết lập tập tin config.ini, mở file config.ini trong trình soạn thảo và thay đổi những cài đặt sau:
Bạn có thể nhìn thấy những thông tin mình phải điền vào trong thiết lập này gồm có tên website, URL, thông tin cơ sở dữ liệu và thông tin tài khoản trên Twilio.
Để bắt đầu, hãy xây dựng model trước nhé. Chúng ta sẽ tạo ra một tập tin bên trong thư mục system với tên gọi là models.php:
Đây là một model layout khá cơ bản, nhưng điểm thú vị ở đây đó là chúng ta sẽ sử dụng Paris để thiết lập hệ thức với bảng tag. Trong thực tế, do cơ sở dữ liệu đã được xây dựng trước đó để đưa trường tag_id vào trong bảng photo, nên model này sẽ biết kết hợp tất cả hình ảnh với tag_id ở vị trí của tag_id trong tên bảng và trong trường chính trên bảng tag.
Điều này cũng đúng với lớp Photo, khi chúng ta thiết lập nó vào một thẻ được định vị trong chức năng tag ().
Model này rất hữu ích trong việc xây dựng một hệ thống model nhanh chóng mà không mất quá nhiều chi phí.
Chúng ta cũng có thể tạo tập tin functions.php và giữ nó bên trong thư mục system:
functions.php sẽ có hai chức năng cốt lõi, chức năng slugify () sẽ chuyển đổi tên thẻ thành đơn vị khối lượng trong hệ phút giây, chức năng cropResize () sẽ sử dụng hình ảnh được gửi và lưu nó trong phạm vi kích thước mới.
Sắp tới chúng ta sẽ sử dụng các chức năng này nhiều hơn.
Hầu hết code sẽ được lưu trữ trong index.php, vì vậy hãy thiết lập các nền tảng cơ bản cho nó:
Giờ chúng ta đã có các tập tin mong muốn. Bây giờ, bắt đầu sử dụng Jolt nhé:
Đoạn mã trên chỉ thiết lập cho Jolt để framework này có thể đọc tập tin config.ini và thiết lập cài đặt cấu hình, bây giờ hãy kết nối với cơ sở dữ liệu:
Cuối cùng là đoạn mã khởi động, nó được sử dụng khi muốn thiết lập khách hàng trên Twilio:
Trên đây là phần khởi động mà chúng ta đã thực hiện được bao gồm các tập tin, thiết lập ứng dụng Jolt, kết nối với cơ sở dữ liệu và khởi tạo khách hàng trên Twilio.
Bây giờ, nếu chạy ứng dụng, bạn sẽ gặp phải một số lỗi ở đây. Điều này hoàn toàn bình thường, chúng ta sẽ đề cập đến chúng trong phần tiếp theo.
Bây giờ chúng ta cần đi thiết lập các định tuyến và nói cho ứng dụng của mình biết phải làm gì dựa trên các quy tắc nhất định. Những quy tắc này sẽ tồn tại trong get hoặc post.
Những quy tắc ban đầu này sẽ là trang chủ, trang thẻ, và người nghe:
Chúng ta vừa mới thiết lập các động tác đầu tiên để tạo nền tảng cơ bản cho trang chủ, nó được biểu diễn bởi ‘ / ‘, trang thẻ, và người nghe.
Để tập trung vào người nghe, hãy chú ý đến post chứ không phải get, bởi vì đây là bộ quản lý tin nhắn mới của Twilio.
Cuối cùng, hãy nhìn vào phương thức gọi $app->listen(). Đây là phương thức quan trọng nhất mà chúng ta có, vì nó cho phép các ứng dụng bắt đầu chạy.
Bây giờ chúng ta sẽ thiết lập trang chủ, và xây dựng view hiển thị cho tất cả người dùng.
Thay thế định tuyến ban đầu của trang chủ bằng mã này:
Lưu ý chúng ta sử dụng đoạn mã này để đề cập đến home, trong thư mục views. Hãy mở tập tin home.php lên và chỉnh sửa lại như sau:
Tập tin này sẽ sử dụng các biến mà chúng ta chuyển qua từ chức năng $app-> render () và khai thác chúng tại đây.
Chúng ta sẽ hiển thị một số trong tổng số các tag, cùng với tổng số hình ảnh, và một danh sách các thẻ mà khách truy cập có thể click vào.
Layout thực tế của trang được điều khiển bởi tập tin layout.php. Bạn có thể cập nhật tập tin này như sau:
Đây là nền tảng HTML cơ bản, nhưng nó có chứa những thông tin chúng ta cần. Tất cả sản phẩm đầu ra sẽ được gửi đến biến $pageContent trong layout.php.
Bây giờ hãy đi xử lý vấn đề upload hình ảnh thực sự từ Twilio.
Đăng nhập vào tài khoản Twilio và điền thông tin số điện thoại vào mục tin nhắn SMS trên http://MYSITEURL/listener, MYSITEURL chính là địa chỉ mà bạn upload ứng dụng.
Chúng ta sẽ thay thế định tuyến của người nghe bằng đoạn mã sau:
Đoạn mã này chỉ được gọi là post, do đó $app-> post () chỉ là câu lệnh.
Khi người dùng kích hoạt thông qua cách thức gửi tin nhắn, chúng ta sẽ kiểm tra xem có bất kỳ hình ảnh nào đính kèm hay không. Nếu có, chúng ta có thể quay vòng và lưu lại chúng vào trong cơ sở dữ liệu.
Trước tiên, hãy kiểm tra xem có bất kỳ thẻ nào được lưu trữ trong cơ sở dữ liệu phù hợp với thẻ chúng ta đã gắn trên hình ảnh hay chưa; nếu có, chúng ta sẽ thu thập id từ cơ sở dữ liệu; nếu không, chúng ta có thể save hồ sơ mới có chứa thông tin thẻ đó.
Tiếp theo, hãy quay vòng các tập tin được tải lên để chắc chắn chúng đều là hình ảnh. Mỗi hình ảnh được tải về cục bộ và được lưu trữ bên trong thư mục https://lmt.com.vn/images/original. Sau đó thay đổi kích thước và cắt bớt tấm hình để tạo kích thước dễ quản lý, và lưu trữ các tập tin mới trong thư mục https://lmt.com.vn/images/processed.
Cuối cùng, hãy lưu trữ hình ảnh bên trong cơ sở dữ liệu, cùng với một số dữ liệu meta về các cuộc gọi, và gửi tin nhắn văn bản lại cho người gửi để họ có thể kiểm tra trang thẻ.
Nếu không có hình ảnh đính kèm, hãy gửi cho họ một thông điệp hiển thị báo lỗi nhé.
Chúng ta đã thiết lập được cho trang chủ, và người nghe. Bây giờ việc còn lại là đi thiết lập wall hình ảnh.
Vào phương thức gọi $app->get(‘/tag/:tag’)
Thay thế phần giữ chỗ ban đầu bằng đoạn mã sau:
Chú ý $app-> filter (), đây là một method hữu ích, chúng ta có thể thiết lập nó để thu thập thẻ và hình ảnh mỗi lần biến $tag_slug được chuyển qua, điều này cho phép chúng ta tiết kiệm các truy vấn bổ sung.
Bây giờ, hãy thiết lập trang gallery.php bên trong views:
Mã này sẽ giúp hiển thị bộ sưu tập (gallery), và sử dụng jQuery để làm nổi bật tất cả hình ảnh độc đáo.
Kết luận
Trên đây là tất cả những bước cần thiết để hoàn thành ứng dụng cho mình. Bây giờ bạn đã có thể xây dựng wall hình ảnh hữu ích để hiển thị hình ảnh từ các sự kiện. Hãy nhớ kiểm tra các liên kết được cung cấp ở trên để tìm hiểu thêm về các thư viện và frameworks được sử dụng trong bài viết này nhé. Chúc bạn thành công.
Bạn có từng khó chịu khi ngồi bồn cầu lạnh ngắt trong mùa đông hay…
Bạn đang thắc mắc thuê chung cư 2 phòng ngủ có phù hợp với gia…
Một trong những kinh nghiệm giúp việc mua bán nhà đất diễn ra hiệu quả,…
Khi chọn mua bộ bàn làm việc tại nhà, gia chủ tuổi Ngọ nên cân…
Hiện nay, chi phí để thuê mặt bằng công ty tại các thành phố lớn…
Hồ cá Koi bằng thùng xốp được khá nhiều người sử dụng để nuôi cá…