Cách tạo địa chỉ kỹ thuật số ngắn và duy nhất cho bất kỳ vị trí nào bằng AngularJS và PHP
Địa chỉ bưu điện thường dài dòng và đôi khi khó nhớ. Có một số tình huống trong đó địa chỉ ngắn hơn là mong muốn. Ví dụ: có khả năng gửi một địa chỉ ngắn chỉ bao gồm một vài ký tự có thể đảm bảo cung cấp dịch vụ xe cấp cứu khẩn cấp nhanh hơn. Pieter Geelen và Harold Goddijn đã phát triển hệ thống Mapcode vào năm 2001 để giúp dễ dàng tạo một địa chỉ dạng rút gọn cho bất kỳ địa chỉ thực nào trên thế giới.Trong hướng dẫn này, bạn sẽ phát triển một ứng dụng web sử dụng API Google Maps để tạo một địa chỉ kỹ thuật số ngắn cho bất kỳ địa chỉ nào bạn chọn. Bạn sẽ thực hiện việc này bằng cách sao chép mã cơ sở cho ứng dụng này từ GitHub và sau đó thêm mã vào nó để làm cho nó hoạt động đầy đủ. Ứng dụng này cũng sẽ có thể truy xuất địa chỉ thực ban đầu từ một mã bản đồ nhất định.
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần những thứ sau:
Truy cập vào server Ubuntu 18.04. Server này phải có user không phải root có quyền
sudovà firewall được cấu hình . Để cài đặt điều này, bạn có thể làm theo Hướng dẫn Cài đặt Server Ban đầu cho Ubuntu 18.04 của ta .Một LAMP được cài đặt trên máy của bạn. Điều này là cần thiết vì ứng dụng mà bạn sẽ phát triển trong hướng dẫn này sử dụng AngularJS và PHP, và địa chỉ kỹ thuật số mà ứng dụng tạo ra sẽ được lưu trữ trong database MySQL. Làm theo hướng dẫn của ta về Cách cài đặt ngăn xếp Linux, Apache, MySQL, PHP (LAMP) trên Ubuntu 18.04 để cài đặt điều này.
Git được cài đặt trên server của bạn. Bạn có thể làm theo hướng dẫn Đóng góp vào Nguồn mở: Bắt đầu với Git để cài đặt và cài đặt Git.
Bước 1 - Nhận Khóa API của Google
Trong hướng dẫn này, bạn sẽ sử dụng JavaScript để tạo giao diện cho Google Maps. Google chỉ định các khóa API để cho phép các nhà phát triển sử dụng API JavaScript trên Google Maps mà bạn cần lấy và thêm vào mã ứng dụng web của bạn .
Để nhận khóa API của bạn , hãy truy cập trang "Nhận khóa API" của Google. Nhấp vào nút BẮT ĐẦU ở Bước 1, và một cửa sổ bật lên sẽ mở ra như trong hình sau:
Chọn Bản đồ bằng cách nhấp vào hộp kiểm và nhấn TIẾP TỤC . Nếu bạn chưa đăng nhập vào account Google, bạn cần làm như vậy. Sau đó, cửa sổ sẽ yêu cầu bạn cung cấp tên cho dự án, có thể là bất kỳ tên nào bạn muốn:
Sau đó, nó sẽ yêu cầu bạn nhập thông tin thanh toán của bạn . Lưu ý Google cung cấp khóa API như một phần của bản dùng thử miễn phí, nhưng nó yêu cầu bạn cài đặt và bật tính năng thanh toán để lấy chúng.
Sau khi nhập thông tin này, khóa API của bạn sẽ xuất hiện trên màn hình. Sao chép và lưu trữ nó ở một vị trí mà bạn có thể dễ dàng lấy ra, vì bạn cần phải thêm nó vào mã dự án của bạn sau này.
Sau khi lấy được khóa API, bạn có thể bắt đầu xây dựng nền tảng của ứng dụng bằng cách tạo database MySQL.
Bước 2 - Tạo database
Ứng dụng web được mô tả trong hướng dẫn này chấp nhận một địa chỉ từ user và tạo mã bản đồ cho nó cùng với vĩ độ và kinh độ của vị trí được chỉ định. Bạn sẽ lưu trữ dữ liệu này trong database MySQL để có thể truy xuất dữ liệu đó sau này chỉ bằng lệnh địa chỉ kỹ thuật số tương ứng.
Bắt đầu bằng cách mở MySQL shell và xác thực bằng password của bạn:
- mysql -u root -p
Tại dấu nhắc, hãy tạo một database có tên digitaladdress bằng lệnh sau:
- CREATE DATABASE IF NOT EXISTS `digitaladdress`;
Tiếp theo, chọn database mới này để bạn có thể tạo một bảng bên trong nó:
- USE `digitaladdress`;
Sau khi chọn digitaladdress database , tạo ra một bảng gọi là locations bên trong nó để lưu trữ các địa chỉ vật lý, kinh độ, vĩ độ của nó, và mapcode rằng ứng dụng của bạn sẽ tạo ra từ dữ liệu này. Chạy câu CREATE TABLE sau để tạo bảng locations trong database :
- CREATE TABLE `locations` (
- `digitaladdress` varchar(50) DEFAULT NULL,
- `state` varchar(30) DEFAULT NULL,
- `zip` varchar(30) DEFAULT NULL,
- `street` varchar(30) DEFAULT NULL,
- `town` varchar(30) DEFAULT NULL,
- `house` varchar(30) DEFAULT NULL,
- `latitude` varchar(30) DEFAULT NULL,
- `longitude` varchar(30) DEFAULT NULL,
- KEY `digitaladdress` (`digitaladdress`)
- );
Bảng này có tám cột: digitaladdress , state , zip , street , town , house , latitude và longitude . Cột đầu tiên, digitaladdress , được lập index bằng cách sử dụng KEY lệnh. Các index trong MySQL hoạt động tương tự như cách chúng hoạt động trong bách khoa toàn thư hoặc công việc tham khảo khác. Bất kỳ khi nào bạn hoặc ứng dụng của bạn đưa ra một truy vấn có chứa câu lệnh WHERE , MySQL sẽ đọc mọi mục nhập trong từng cột, từng hàng, quá trình này có thể trở thành một quá trình cực kỳ tiêu tốn tài nguyên vì bảng của bạn ngày càng tích lũy nhiều mục nhập. Lập index một cột như thế này sẽ lấy dữ liệu từ cột và lưu trữ nó theo thứ tự bảng chữ cái ở một vị trí riêng biệt, nghĩa là MySQL sẽ không phải xem qua mọi hàng trong bảng. Nó chỉ phải tìm dữ liệu bạn đang tìm kiếm trong index và sau đó chuyển đến hàng tương ứng trong bảng.
Sau khi thêm bảng này, hãy thoát khỏi dấu nhắc MySQL:
- exit
Với database và bảng của bạn đã được cài đặt và trong tay có khóa API Google Maps, bạn đã sẵn sàng tạo dự án.
Bước 3 - Tạo dự án
Như đã đề cập trong phần giới thiệu, ta sẽ sao chép mã cơ sở cho dự án này từ GitHub và sau đó thêm một số mã bổ sung để làm cho ứng dụng hoạt động. Lý do cho điều này, thay vì hướng dẫn bạn qua quá trình tạo từng file và tự thêm tất cả mã, là để tăng tốc quá trình chạy ứng dụng. Nó cũng sẽ cho phép ta tập trung vào việc thêm và hiểu mã cho phép ứng dụng giao tiếp với cả API Google Maps và Mapcode.
Bạn có thể tìm thấy mã khung cho toàn bộ dự án trên trang dự án GitHub này . Sử dụng git sau để sao chép dự án vào server của bạn:
- git clone https://github.com/do-community/digiaddress.git
Thao tác này sẽ tạo một folder mới có tên là digiaddress trong folder digiaddress của bạn. Di chuyển folder này đến folder root của server của bạn. Nếu bạn đã làm theo hướng dẫn LAMP được liên kết trong yêu cầu , đây sẽ là folder /var/www/html :
- sudo mv digiaddress/ /var/www/html/
Dự án này chứa một số file PHP và JS mà bạn sẽ thêm một số mã vào sau trong hướng dẫn này. Để xem cấu trúc folder , trước tiên hãy cài đặt gói tree bằng cách sử dụng apt :
- sudo apt install tree
Sau đó chạy lệnh tree với folder digiaddress được cung cấp dưới dạng đối số:
- tree /var/www/html/digiaddress/
Outputdigiaddress/ ├── README.md ├── db.php ├── fetchaddress.php ├── findaddress.php ├── generateDigitalAddress.php ├── geoimplement.php ├── index.php └── js ├── createDigitialAddressApp.js └── findAddressApp.js Bạn có thể thấy từ kết quả này dự án bao gồm sáu file PHP và hai file JavaScript. Cùng với nhau, các file này tạo ra hai chức năng chính của ứng dụng: tạo mã bản đồ từ một địa chỉ thực và giải mã mã bản đồ để truy xuất địa chỉ thực ban đầu. Các file sau kích hoạt chức năng đầu tiên:
-
index.php -
geoimplement.php -
generateDigitialAddress.php -
db.php -
createDigitialAddressApp.js
Tệp index.php chứa mã cho giao diện user (UI) của ứng dụng, bao gồm một biểu mẫu mà user có thể nhập địa chỉ thực. Tệp index.php gọi file geoimplement.php bất kỳ khi nào user gửi biểu mẫu. geoimplement.php thực hiện một cuộc gọi đến API Google Maps và chuyển địa chỉ cùng với nó. Sau đó, server Google phản hồi bằng JSON chứa thông tin của địa chỉ được chỉ định, bao gồm cả vĩ độ và kinh độ của địa chỉ đó. Thông tin này sau đó được truyền cho generateDigitalAddress.php file trong đó kêu gọi các API Mapcode để có được một mapcode cho vị trí nhất định, theo quy định của vĩ độ và kinh độ của nó. Mã bản đồ kết quả, cùng với vĩ độ, kinh độ và địa chỉ vật lý, sau đó được lưu trữ trong database mà bạn đã tạo ở Bước 2. db.php hoạt động như một trình trợ giúp cho thao tác này. Tệp createDigitalAddressApp.js thực hiện một số hoạt động kiểm soát các phần tử UX được nhìn thấy trong ứng dụng, bao gồm cài đặt điểm đánh dấu và hình chữ nhật ranh giới trên giao diện Google Maps.
Ba file còn lại kích hoạt chức năng thứ hai của ứng dụng - đó là truy xuất địa chỉ thực từ một mã bản đồ nhất định:
-
findaddress.php -
fetchaddress.php -
findAddressApp.js
Tệp findaddress.php xác định giao diện user ứng dụng, khác với giao diện user được định nghĩa trong index.php . Ứng dụng chấp nhận mã bản đồ được tạo trước đó làm đầu vào và hiển thị địa chỉ vật lý tương ứng được lưu trữ trong database . Khi nào user gửi biểu mẫu này, findaddress.php sẽ gửi một cuộc gọi đến fetchaddress.php , sau đó lấy mã bản đồ tương ứng từ database . Tệp findAddressApp.js chứa mã trợ giúp để đặt điểm đánh dấu và hình chữ nhật ranh giới trên giao diện Google Maps.
Kiểm tra cài đặt bằng cách truy cập http:// your_server_ip /digiaddress trong trình duyệt của bạn, đảm bảo thay đổi your_server_ip để phản ánh địa chỉ IP server của bạn.
Lưu ý: Nếu bạn không biết địa chỉ IP của server , bạn có thể chạy lệnh curl sau. Lệnh này sẽ in nội dung trang của icanhazip.com , một trang web hiển thị địa chỉ IP của máy đang truy cập nó:
- curl http://icanhazip.com
Khi đó, bạn sẽ thấy tiêu đề này ở đầu cửa sổ trình duyệt của bạn :
Generate Digital Address Điều này xác nhận bạn đã download chính xác các file dự án. Cùng với đó, hãy để ta tiếp tục phát triển chức năng chính của ứng dụng: tạo mã bản đồ.
Bước 4 - Phát triển giao diện user của ứng dụng
Mặc dù mã soạn sẵn cho giao diện ứng dụng có trong các file bạn đã download ở bước trước, bạn vẫn cần thực hiện một số thay đổi và bổ sung cho một số file này để làm cho ứng dụng hoạt động và hấp dẫn đối với user . Ta sẽ bắt đầu với việc cập nhật mã để phát triển giao diện user của ứng dụng.
Mở index.php bằng trình soạn thảo bạn muốn . Ở đây, ta sẽ sử dụng nano :
- nano /var/www/html/digiaddress/index.php
Tìm dòng mã sau:
. . . <script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>"></script> . . . Thay thế <YOUR KEY> bằng khóa API của Google mà bạn đã lấy được ở Bước 1. Sau khi thêm khóa API của bạn, dòng sẽ giống như sau:
. . . <script async defer src="https://maps.googleapis.com/maps/api/js?key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u"></script> . . . Tiếp theo, tìm comment sau trong index.php :
. . . <!-- add form code here --> . . . Ta sẽ thêm vài chục dòng mã bên dưới comment này sẽ tạo ra một biểu mẫu mà user có thể nhập địa chỉ của một vị trí thực tế mà ứng dụng sẽ sử dụng để tạo mã bản đồ. Dưới comment này, hãy thêm mã được đánh dấu sau để tạo tiêu đề được gọi là Nhập địa chỉ ở đầu biểu mẫu:
. . . <!-- add form code here --> <div class="form-border spacing-top"> <div class="card-header" style="background:#cc0001; color:#ffff"> <h5>Enter Address</h5> </div> <div class="extra-padding"> . . . Dưới đây, thêm mã HTML sau. Điều này tạo ra một biểu mẫu có năm trường văn bản (cùng với các nhãn thích hợp của chúng), nơi user sẽ nhập thông tin của họ:
. . . <form> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state"/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border" id="town" ng-model="address.town" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled"/> </div> . . . Bên dưới mã biểu mẫu, thêm các dòng sau. Những điều này tạo ra hai điều khiển ẩn chuyển dọc theo thông tin kinh độ và vĩ độ bắt nguồn từ bất kỳ địa chỉ nào được gửi qua biểu mẫu:
. . . <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.lat"/> </div> <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.long"/> </div> . . . Cuối cùng, đóng phần này bằng cách thêm mã sau. Thao tác này tạo nút Tạo sẽ cho phép user gửi biểu mẫu:
. . . <button type="submit" disabled="disabled" class="btn btn-color btn-block rounded-0" id="generate" style="color:#ffff;background-color: #cc0001;">Generate </button> </form> </div> </div> . . . Sau khi thêm các phần tử này, phần này của file phải trùng với phần này:
. . . <!-- add form code here --> <div class="form-border spacing-top"> <div class="card-header" style="background:#cc0001; color:#ffff"> <h5>Enter Address</h5> </div> <div class="extra-padding"> <form> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state"/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border " id="town" ng-model="address.town" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.lat"/> </div> <div class="form-group input-group-sm"> <input type="hidden" ng-model="address.long"/> </div> <button type="submit" disabled="disabled" class="btn btn-color btn-block rounded-0" id="generate" style="color:#ffff;background-color: #cc0001;">Generate </button> </form> </div> </div> <br> </div> <!-- add google map control --> . . . Lưu file bằng cách nhấn CTRL+O rồi ENTER , rồi truy cập lại ứng dụng trong trình duyệt của bạn:
http://your_server_ip/digiaddress Bạn sẽ thấy các trường biểu mẫu mới được thêm vào và nút Tạo , và ứng dụng sẽ trông như thế này:
Đến đây, nếu bạn nhập thông tin địa chỉ vào biểu mẫu và thử nhấp vào nút Tạo , sẽ không có gì xảy ra. Ta sẽ thêm chức năng tạo mã bản đồ sau này, nhưng trước tiên hãy tập trung vào việc làm cho trang này hấp dẫn hơn về mặt hình ảnh bằng cách thêm bản đồ mà user có thể tương tác.
Bước 5 - Thêm Điều khiển Google Maps
Khi bản đồ được hiển thị trên một trang web thông qua API JavaScript của Google Maps, chúng chứa các tính năng giao diện user cho phép khách truy cập tương tác với bản đồ mà họ nhìn thấy. Các tính năng này được gọi là điều khiển . Ta sẽ tiếp tục chỉnh sửa index.php để thêm các điều khiển của Google Maps vào ứng dụng này và khi hoàn tất, user sẽ có thể xem bản đồ bên cạnh biểu mẫu nhập, kéo nó xung quanh để xem các vị trí khác nhau, phóng to và thu nhỏ, và chuyển đổi giữa chế độ xem bản đồ, vệ tinh và đường phố của Google.
Tìm comment sau trong index.php :
. . . <!-- add google map control --> . . . Thêm mã được đánh dấu sau bên dưới comment này:
. . . <!-- add google map control --> <div class="col-sm-8 map-align" ng-init="initMap()"> <div id="map" class="extra-padding" style="height: 100%; margin-bottom: 15px;"></div> <label id="geocoordinates" ng-show="latlng" ng-model="lt"></label><br/> <label id="geoaddress" ng-show="address" ng-model="padd"></label> </div> </div> . . . Lưu file , sau đó truy cập lại ứng dụng trong trình duyệt của bạn. Bạn sẽ thấy như sau:
Như bạn thấy , ta đã thêm thành công bản đồ vào ứng dụng. Bạn có thể kéo bản đồ xung quanh để tập trung vào các vị trí khác nhau, phóng to và thu nhỏ và chuyển đổi giữa các chế độ xem bản đồ, vệ tinh và đường phố. Nhìn lại mã bạn vừa thêm, hãy lưu ý ta cũng đã thêm hai điều khiển nhãn sẽ hiển thị tọa độ địa lý và địa chỉ thực đã được nhập vào biểu mẫu:
. . . <label id="geocoordinates" ng-show="latlng" ng-model="lt"></label><br/> <label id="geoaddress" ng-show="address" ng-model="padd"></label> . . . Truy cập lại ứng dụng trong trình duyệt của bạn và nhập tên tiểu bang vào trường đầu tiên. Khi bạn di chuyển con trỏ văn bản đến trường tiếp theo, các nhãn vĩ độ và kinh độ sẽ không xuất hiện, cũng như vị trí hiển thị trên bản đồ không thay đổi để phản ánh thông tin bạn đã nhập. Hãy kích hoạt những hành vi này.
Bước 6 - Thêm người nghe sự kiện
Thêm các yếu tố tương tác vào một ứng dụng có thể giúp thu hút user của nó. Ta sẽ thực hiện một vài hành vi tương tác trong ứng dụng này thông qua việc sử dụng trình lắng nghe sự kiện .
Sự kiện là bất kỳ hành động nào diễn ra trên một trang web. Sự kiện có thể do user hoặc trình duyệt thực hiện. Ví dụ về các sự kiện phổ biến là:
- Nhấp vào nút HTML
- Thay đổi nội dung của trường đầu vào
- Thay đổi tiêu điểm từ phần tử trang này sang phần tử trang khác
Trình nghe sự kiện là một chỉ thị yêu cầu chương trình thực hiện một hành động nhất định khi một sự kiện cụ thể diễn ra. Trong AngularJS, trình xử lý sự kiện được định nghĩa với các lệnh thường tuân theo định dạng sau:
ng-event_type=expression Trong bước này, ta sẽ thêm một trình xử lý sự kiện giúp xử lý thông tin do user nhập vào mã bản đồ khi nào họ gửi biểu mẫu. Ta cũng sẽ bổ sung thêm một vài trình nghe sự kiện nữa để giúp ứng dụng tương tác hơn. Cụ thể, ta sẽ sử dụng những trình nghe này để thay đổi vị trí được hiển thị trong bản đồ ứng dụng, đặt điểm đánh dấu và vẽ hình chữ nhật xung quanh vị trí khi user nhập thông tin vào biểu mẫu. Ta sẽ thêm các trình nghe sự kiện này vào index.php , vì vậy hãy mở lại file đó nếu bạn đã đóng nó:
- nano /var/www/html/digiaddress/index.php
Cuộn xuống lô mã đầu tiên mà ta đã thêm và tìm khối bắt đầu bằng <form> . Nó sẽ trông giống thế này:
. . . <form> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state"/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border" id="town" ng-model="address.town" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled"/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled"/> </div> </form> . . . Để bắt đầu, hãy thêm trình xử lý sự kiện được đánh dấu sau vào thẻ mở <form> . Mã này yêu cầu ứng dụng gọi hàm processForm khi nào user gửi thông tin qua biểu mẫu. processForm được định nghĩa trong file createDigitalAddressApp.js và đóng role như một chức năng trợ giúp gửi thông tin do user gửi đến các file thích hợp, sau đó xử lý nó thành một mã bản đồ. Ta sẽ xem xét kỹ hơn chức năng này trong Bước 7:
. . . <form ng-submit="processForm()" class="custom-form"> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state" </div> . . . Tiếp theo, tiếp tục chỉnh sửa khối này bằng cách thêm một vài trình nghe sự kiện blur . Sự kiện blur xảy ra khi một phần tử trang nhất định bị mất tiêu điểm. Thêm các dòng được đánh dấu sau input thẻ input của khối form . Các dòng này yêu cầu ứng dụng gọi hàm geocodeAddress khi tiêu điểm của user dịch chuyển khỏi các trường biểu mẫu tương ứng mà ta đã tạo ở Bước 4. Lưu ý bạn cũng phải xóa các dấu gạch chéo và dấu lớn hơn ( /> ) đóng mỗi thẻ input . Không làm như vậy sẽ ngăn ứng dụng đăng ký các sự kiện blur một cách chính xác:
. . . <form ng-submit="processForm()" class="custom-form"> <div class="form-group input-group-sm"> <label for="state">State</label> <input type="text" class="form-control rounded-0 textbox-border" id="state" placeholder="" ng-model="address.state" ng-blur="geocodeAddress(address,'state')" required=""/> </div> <div class="form-group input-group-sm"> <label for="zip" class="animated-label">Zip</label> <input type="text" class="form-control rounded-0 textbox-depth textbox-border" id="zip" ng-model="address.zip" disabled="disabled" ng-blur="geocodeAddress(address,'zip')" required=""/> </div> <div class="form-group input-group-sm"> <label for="town">Town</label> <input type="text" class="form-control rounded-0 textbox-border" id="town" ng-model="address.town" disabled="disabled" ng-blur="geocodeAddress(address,'town')" required=""/> </div> <div class="form-group input-group-sm"> <label for="street">Street</label> <input type="text" class="form-control rounded-0 textbox-border" id="street" placeholder="" ng-model="address.street" disabled="disabled" ng-blur="geocodeAddress(address,'street')" required=""/> </div> <div class="form-group input-group-sm"> <label for="house">House</label> <input type="text" class="form-control rounded-0 textbox-border" id="house" placeholder="" ng-model="address.house" disabled="disabled" ng-blur="geocodeAddress(address,'house')" required=""/> </div> . . . Dòng đầu tiên trong số những dòng mới này - ng-blur="geocodeAddress(address,'state')" required=""/> - dịch thành "Khi tiêu điểm của user dịch chuyển khỏi trường 'trạng thái', hãy gọi hàm geocodeAddress ." Các dòng mới khác cũng gọi là geocodeAddress , mặc dù khi tiêu điểm của user dịch chuyển khỏi các trường tương ứng của họ.
Giống như với hàm processForm , geocodeAddress được khai báo trong file createDigitalAddressApp.js , nhưng chưa có bất kỳ mã nào trong file đó xác định nó. Ta sẽ hoàn thành chức năng này để nó đặt một điểm đánh dấu và vẽ một hình chữ nhật trên bản đồ ứng dụng sau khi các sự kiện blur này xảy ra để phản ánh thông tin được nhập vào biểu mẫu. Ta cũng sẽ thêm một số mã lấy thông tin địa chỉ và xử lý nó thành mã bản đồ.
Lưu và đóng index.php (nhấn CTRL+X , Y , sau đó ENTER ) và sau đó mở file createDigitalAddressApp.js :
- nano /var/www/html/digiaddress/js/createDigitalAddressApp.js
Trong file này, hãy tìm dòng sau:
. . . $scope.geocodeAddress = function (address, field) { . . . Dòng này là nơi ta khai báo hàm geocodeAddress . Dưới đây là một vài dòng, ta khai báo một biến có tên là fullAddress , biến này tạo một địa chỉ gửi thư có thể đọc được từ thông tin user nhập vào các trường biểu mẫu của ứng dụng. Này được thực hiện thông qua một loạt các if báo cáo:
. . . var fullAddress = ""; if (address ['house']) { angular.element(document.getElementById('generate'))[0].disabled = false; fullAddress = address ['house'] + ","; } if (address ['town']) { angular.element(document.getElementById('street'))[0].disabled = false; fullAddress = fullAddress + address ['town'] + ","; } if (address ['street']) { angular.element(document.getElementById('house'))[0].disabled = false; fullAddress = fullAddress + address ['street'] + ","; } if (address ['state']) { angular.element(document.getElementById('zip'))[0].disabled = false; fullAddress = fullAddress + address ['state'] + " "; } if (address ['zip']) { angular.element(document.getElementById('town'))[0].disabled = false; fullAddress = fullAddress + address ['zip']; } . . . Trực tiếp sau những dòng này là comment sau:
. . . // add code for locating the address on Google maps . . . Bên dưới comment này, thêm dòng sau để kiểm tra xem fullAddress có phải là bất kỳ giá trị nào khác với null hay không:
. . . if (fullAddress !== "") { . . . Thêm mã sau vào bên dưới dòng này. Mã này gửi thông tin đã nhập vào biểu mẫu tới file geoimplement.php bằng phương thức HTTP POST nếu fullAddress không phải là null:
. . . $http({ method: 'POST', url: 'geoimplement.php', data: {address: fullAddress}, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).then(function successCallback(results) { . . . Tiếp theo, thêm dòng sau để kiểm tra xem cuộc gọi PHP có được trả lại thành công hay không:
. . . if (results.data !== "false") { . . . Nếu cuộc gọi PHP được trả về thành công, ta sẽ có thể xử lý kết quả. Thêm dòng sau để xóa bất kỳ hình chữ nhật ranh giới nào có thể đã được vẽ trước đó trên bản đồ bằng cách gọi hàm removeRectangle , được xác định ở đầu file createDigitalAddressApp.js :
. . . removeRectangle(); . . . Dưới removeRectangle(); dòng, thêm bốn dòng sau sẽ tạo điểm đánh dấu chỉ đến vị trí mới trên điều khiển bản đồ:
. . . new google.maps.Marker({ map: locationMap, position: results.data.geometry.location }); . . . Sau đó, thêm đoạn mã sau để lấy thông tin kinh độ và vĩ độ từ kết quả và hiển thị nó với hai nhãn HTML mà ta đã tạo trong index.php ở Bước 5:
. . . lat = results.data.geometry.location.lat; lng = results.data.geometry.location.lng; $scope.address.lat = lat; $scope.address.lng = lng; geoCoordLabel = angular.element(document.querySelector('#geocoordinates')); geoCoordLabel.html("Geo Coordinate: " + lat + "," + lng); geoAddressLabel = angular.element(document.querySelector('#geoaddress')); geoAddressLabel.html("Geo Address: " + fullAddress); $scope.latlng = true; . . . Cuối cùng, bên dưới những dòng này, hãy thêm nội dung sau. Mã này tạo một chế độ xem đánh dấu một hình chữ nhật ranh giới mới trên bản đồ:
. . . if (results.data.geometry.viewport) { rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 0.5, fillColor: '#FF0000', fillOpacity: 0.35, map: locationMap, bounds: { north: results.data.geometry.viewport.northeast.lat, south: results.data.geometry.viewport.southwest.lat, east: results.data.geometry.viewport.northeast.lng, west: results.data.geometry.viewport.southwest.lng } }); var googleBounds = new google.maps.LatLngBounds(results.data.geometry.viewport.southwest, results.data.geometry.viewport.northeast); locationMap.setCenter(new google.maps.LatLng(lat, lng)); locationMap.fitBounds(googleBounds); } } else { errorLabel = angular.element(document.querySelector('#lt')); errorLabel.html("Place not found."); $scope.latlng = true; removeRectangle(); } }, function errorCallback(results) { console.log(results); }); } . . . Sau khi thêm nội dung này, phần này của file sẽ giống như sau:
. . . // add code for locating the address on Google maps if (fullAddress !== "") { $http({ method: 'POST', url: 'geoimplement.php', data: {address: fullAddress}, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).then(function successCallback(results) { if (results.data !== "false") { removeRectangle(); new google.maps.Marker({ map: locationMap, position: results.data.geometry.location }); lat = results.data.geometry.location.lat; lng = results.data.geometry.location.lng; $scope.address.lat = lat; $scope.address.lng = lng; geoCoordLabel = angular.element(document.querySelector('#geocoordinates')); geoCoordLabel.html("Geo Coordinate: " + lat + "," + lng); geoAddressLabel = angular.element(document.querySelector('#geoaddress')); geoAddressLabel.html("Geo Address: " + fullAddress); $scope.latlng = true; if (results.data.geometry.viewport) { rectangle = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 0.5, fillColor: '#FF0000', fillOpacity: 0.35, map: locationMap, bounds: { north: results.data.geometry.viewport.northeast.lat, south: results.data.geometry.viewport.southwest.lat, east: results.data.geometry.viewport.northeast.lng, west: results.data.geometry.viewport.southwest.lng } }); var googleBounds = new google.maps.LatLngBounds(results.data.geometry.viewport.southwest, results.data.geometry.viewport.northeast); locationMap.setCenter(new google.maps.LatLng(lat, lng)); locationMap.fitBounds(googleBounds); } } else { errorLabel = angular.element(document.querySelector('#lt')); errorLabel.html("Place not found."); $scope.latlng = true; removeRectangle(); } }, function errorCallback(results) { console.log(results); }); } . . . Lưu file , nhưng vẫn mở file ngay bây giờ. Nếu bạn truy cập lại ứng dụng trong trình duyệt của bạn , bạn sẽ không thấy bất kỳ thay đổi mới nào đối với giao diện hoặc hành vi của nó. Tương tự như vậy, nếu bạn nhập địa chỉ và nhấp vào nút Tạo , ứng dụng vẫn sẽ không tạo hoặc hiển thị mã bản đồ. Điều này là do ta vẫn phải chỉnh sửa một vài file trước khi chức năng mã bản đồ hoạt động. Hãy tiếp tục thực hiện những thay đổi này và cũng xem xét kỹ hơn cách tạo ra các mã bản đồ này.
Bước 7 - Hiểu cách tạo Mapcode
Trong khi vẫn xem file createDigitalAddressApp.js , hãy cuộn qua phần mã mà bạn đã thêm ở bước trước để tìm mã lấy thông tin được gửi qua biểu mẫu và xử lý nó thành một mã bản đồ duy nhất. Khi nào user nhấp vào nút Tạo , mã trong index.php gửi biểu mẫu và gọi hàm processForm , được định nghĩa ở đây trong createDigitalAddressApp.js :
. . . $scope.processForm = function () { . . . processForm sau đó làm một POST HTTP đến generateDigitalAddress.php file:
. . . $http({ method: 'POST', url: 'generateDigitalAddress.php', data: $scope.address, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).then(function (response) { . . . Stichting Mapcode Foundation cung cấp API tạo mã bản đồ từ các địa chỉ thực như một dịch vụ web miễn phí. Để hiểu cách gọi này để các công trình dịch vụ Mapcode web, gần createDigitalAddressApp.js và mở generateDigitialAddress.php file:
- nano /var/www/html/digiaddress/generateDigitalAddress.php
Ở đầu file , bạn sẽ thấy như sau:
<?php include("db.php"); . . . Đọc dòng include("db.php"); nói với PHP để bao gồm tất cả các văn bản, mã, và đánh dấu từ db.php file trong generateDigitalAddress.php file . db.php giữ thông tin đăng nhập cho database MySQL mà bạn đã tạo ở Bước 2 và bằng cách đưa nó vào trong generateDigitalAddress.php , ta có thể thêm bất kỳ thông tin địa chỉ nào được gửi qua biểu mẫu vào database .
Bên dưới câu lệnh include này là một vài dòng khác lấy thông tin kinh độ và vĩ độ dựa trên yêu cầu do createDigitalAddressApp.js :
. . . $data = json_decode(file_get_contents("php://input")); $lat = $data->lat; $long = $data->lng; . . . Hãy tìm những comment sau trong generateDigitalAddress.php file .
. . . // call to mapcode web service . . . Thêm dòng mã sau vào bên dưới comment này. Mã này thực hiện một cuộc gọi API Mapcode, gửi các tham số lat và long .
. . . // call to mapcode web service $digitaldata = file_get_contents("https://api.mapcode.com/mapcode/codes/".$lat.",".$long."?include=territory,alphabet&allowLog=true&client=web"); . . . Các dịch vụ web sẽ trả về dữ liệu JSON được giao cho digitaldata , và giải mã tuyên bố sau đó JSON:
. . . $digitalAddress["status"] = json_decode($digitaldata, TRUE)['local']['territory']." ".json_decode($digitaldata, TRUE)['local']['mapcode']; . . . Thao tác này trả về mã bản đồ cho vị trí do user chỉ định. Các dòng sau sẽ lưu trữ thông tin này trong database :
. . . $obj = new databaseConnection(); $conn = $obj->dbConnect(); $obj->insertLocation($conn, $digitalAddress["status"],$data->state,$data->zip,$data->street,$data->town,$data->house,$lat,$long); . . . Sau đó, dòng cuối cùng lặp lại mã bản đồ trở lại hàm người gọi:
. . . echo json_encode($digitalAddress); Lưu file này, sau đó mở lại createDigitalAddressApp.js :
- nano /var/www/html/digiaddress/js/createDigitalAddressApp.js
Khi mã bản đồ đã được truy xuất thành công, các dòng sau trong file createDigitalAddressApp.js sẽ hiển thị mã đó cho user trong hộp thoại:
. . . digiAddress = response.data.status; . . . $('#digitalAddressDialog').modal('show'); . . . Mặc dù bạn đã thêm một dòng mã mới vào generateDigitalAddress.php , nhưng bạn vẫn sẽ không thấy bất kỳ thay đổi chức năng nào khi truy cập và tương tác với ứng dụng trong trình duyệt của bạn . Điều này là do bạn chưa thêm khóa API Google của bạn vào file geoimplement.php , file này thực hiện lệnh gọi thực tế tới API Google Maps.
Bước 8 - Bật cuộc gọi tới API Google Maps
Ứng dụng này phụ thuộc vào API Google Maps để dịch một địa chỉ thực sang các tọa độ kinh độ và vĩ độ thích hợp. Sau đó, chúng được chuyển cho API Mapcode sử dụng chúng để tạo mã bản đồ. Do đó, nếu ứng dụng không thể giao tiếp với API Google Maps để tạo vĩ độ và kinh độ của vị trí, thì mọi nỗ lực tạo mã bản đồ sẽ không thành công.
Nhớ lại từ Bước 6, sau khi xây dựng dữ liệu address , ta đã chuyển kết quả cùng với một yêu cầu HTTP POST trong file createDigitalAddressApp.js :
$http({ method: 'POST', url: 'geoimplement.php', data: {address: fullAddress}, headers: {'Content-Type': 'application/x-www-form-urlencoded'} }).then(function successCallback(results) { Khối mã này sẽ gửi dữ liệu địa chỉ do user nhập đến file geoimplement.php chứa mã gọi API Google Maps. Hãy tiếp tục và mở file này:
- nano /var/www/html/digiaddress/geoimplement.php
Bạn sẽ thấy rằng trước tiên nó giải mã address nhận được thông qua yêu cầu ĐĂNG:
. . . $data=json_decode(file_get_contents("php://input")); . . . Sau đó, nó chuyển trường address của dữ liệu đầu vào đến một hàm geocode hóa địa lý để trả về thông tin địa lý về địa chỉ:
. . . $result = geocode($data->address); . . . Kết quả sau đó được gửi lại cho người gọi:
. . . echo json_encode($result); . . . Các geocode chức năng mã hóa các address và chuyển nó vào API của Google Maps, cùng với key ứng dụng của bạn:
. . . // url encode the address $address = urlencode($address); // google map geocode api url $url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=<YOUR KEY>"; . . . Trước khi cuộn, hãy tiếp tục và thêm khóa API của bạn vào dòng dưới comment // google map geocode api url của // google map geocode api url :
. . . // google map geocode api url $url = "https://maps.googleapis.com/maps/api/geocode/json?address={$address}&key=ExampleAPIKeyH2vITfv1eIHbfka9ym634Esw7u"; . . . Sau khi gửi lệnh gọi đến API Google Maps, phản hồi được giải mã và giá trị của nó được trả về bởi hàm:
. . . // get the json response $resp_json = file_get_contents($url); // decode the json $resp = json_decode($resp_json, true); if ($resp['status'] == 'OK') { return $resp['results'][0]; } else { return false; } . . . Lưu file này và truy cập ứng dụng của bạn . Nhập US-NY vào trường tiểu bang rồi nhấn TAB để thay đổi tiêu điểm nhập sang trường tiếp theo. Bạn sẽ thấy kết quả sau:
Lưu ý tọa độ địa lý và địa chỉ thực mà bạn đã nhập trong biểu mẫu xuất hiện bên dưới bản đồ. Điều này làm cho ứng dụng cảm thấy hấp dẫn và tương tác hơn nhiều.
Lưu ý: Khi nói đến chữ viết tắt cho địa danh, Mapcode sử dụng tiêu chuẩn ISO 3166. Điều này nghĩa là nó có thể không giải thích một số từ viết tắt thường được sử dụng như mong đợi. Ví dụ: nếu bạn muốn tạo Mã bản đồ cho một địa chỉ ở Louisiana và bạn nhập LA , bản đồ sẽ chuyển đến Los Angeles, California (thay vì tiểu bang Louisiana).
Bạn có thể tránh nhầm lẫn với các chữ viết tắt của bưu điện USA bằng cách đặt trước chúng bằng US- . Trong ngữ cảnh của ví dụ Louisiana này, bạn sẽ nhập US-LA .
Để tìm hiểu thêm về cách Mapcode sử dụng tiêu chuẩn này, hãy xem trang tham chiếu Lãnh thổ và mã tiêu chuẩn .
Mặc dù có sự cải tiến này đối với cách ứng dụng hiển thị vị trí trên bản đồ, ứng dụng vẫn không hoạt động đầy đủ. Bước cuối cùng bạn cần thực hiện trước khi có thể tạo mã bản đồ là chỉnh sửa file db.php để cho phép ứng dụng truy cập database của bạn.
Bước 9 - Thêm thông tin đăng nhập database và kiểm tra việc tạo mã bản đồ
Nhớ lại rằng ứng dụng này lưu trữ mọi địa chỉ được nhập vào biểu mẫu - cùng với vĩ độ, kinh độ và mã bản đồ - trong database bạn đã tạo ở Bước 2. Điều này có thể thực hiện được nhờ mã trong file db.php , nơi lưu trữ thông tin đăng nhập database của bạn và cho phép ứng dụng truy cập bảng locations bên trong nó.
Bước cuối cùng để kích hoạt chức năng tạo mã bản đồ, hãy mở file db.php để chỉnh sửa:
- nano /var/www/html/digiaddress/db.php
Gần đầu file này, tìm dòng bắt đầu bằng $pass . Dòng này gửi thông tin đăng nhập MySQL của bạn để cho phép ứng dụng truy cập database của bạn. Thay thế your_password bằng password user MySQL gốc của bạn:
. . . $username = "root"; $pass = "your_password"; . . . Đó là thay đổi cuối cùng bạn cần thực hiện để tạo mã bản đồ từ một địa chỉ thực. Lưu file , sau đó tiếp tục và làm mới lại ứng dụng trong trình duyệt của bạn. Nhập địa chỉ bạn chọn và nhấp vào nút Tạo . Đầu ra sẽ giống như sau:
Ở giai đoạn này, bạn đã hoàn thành đơn đăng ký của bạn và bây giờ bạn có thể tạo một địa chỉ kỹ thuật số ngắn cho bất kỳ vị trí thực tế nào trên thế giới. Hãy thử nghiệm với các địa chỉ khác nhau và lưu ý địa chỉ bạn nhập không nhất thiết phải ở trong USA .
Nhiệm vụ cuối cùng của bạn là kích hoạt chức năng thứ hai của ứng dụng này: truy xuất địa chỉ từ database bằng cách sử dụng mã bản đồ tương ứng.
Bước 10 - Lấy địa chỉ thực
Đến đây bạn có thể tạo mã bản đồ từ một địa chỉ thực nhất định, bước cuối cùng của bạn là truy xuất địa chỉ thực ban đầu, như được lấy từ mã bản đồ. Để thực hiện điều này, ta sẽ phát triển một giao diện user PHP, được hiển thị ở đây:
Mã cho giao diện user này có sẵn trong file findaddress.php . Vì giao diện user được định nghĩa trong file này khá giống với giao diện user mà ta đã đề cập trước đó trong Bước 4, ta sẽ không xem xét quá kỹ tất cả các chi tiết về cách nó hoạt động. Tuy nhiên, ta sẽ đi qua ba file này để giải thích chung về cách chúng hoạt động.
Để bật chức năng truy xuất địa chỉ, bạn cần thêm khóa API Google của bạn vào file findaddress.php , vì vậy hãy mở nó bằng editor bạn muốn :
- nano /var/www/html/digiaddress/findaddress.php
Ở gần cuối file , tìm dòng bắt đầu bằng <script async defer src= . Nó sẽ trông giống thế này:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>"></script> Thay thế <YOUR KEY> của bạn <YOUR KEY> bằng khóa API Google của bạn như bạn đã thực hiện trong các bước trước, sau đó lưu file . Tuy nhiên, trước khi đóng nó, ta hãy xem nhanh để xem cách các file này hoạt động cùng nhau.
Khi user gửi biểu mẫu, nó sẽ kích hoạt sự kiện submit và trình xử lý sự kiện gọi hàm fetchadd :
. . . <form ng-submit="fetchadd()" class="custom-form"> . . . Hàm fetchadd gửi địa chỉ kỹ thuật số đến fetchaddress.php với một yêu cầu POST:
. . . $http({ method : 'POST', url : 'fetchaddress.php', data : {digiaddress: $scope.digiaddress} }).then(function(response){ . . . Nếu POST thành công, hàm sẽ trả về một phản hồi JSON. Dòng sau phân tích câu trả lời này:
. . . var jsonlatlng = JSON.parse(response.data.latlng); . . . Các dòng tiếp theo đặt điểm đánh dấu trên bản đồ:
. . . marker = new google.maps.Marker({ position: new google.maps.LatLng(jsonlatlng.latitude, jsonlatlng.longitude), map: locationMap }); . . . Và phần sau in tọa độ địa lý và địa chỉ thực:
. . . geoCoordLabel = angular.element(document.querySelector('#geocoordinates')); geoCoordLabel.html("Geo Coordinate: "+ jsonlatlng.latitude +","+ jsonlatlng.longitude); geoAddressLabel = angular.element(document.querySelector('#geoaddress')); geoAddressLabel.html("Geo Address: " + jsonlatlng.house +","+ jsonlatlng.town +","+ jsonlatlng.street +","+ jsonlatlng.state + " " + jsonlatlng.zip ); . . . Truy cập ứng dụng này trong trình duyệt của bạn bằng cách truy cập liên kết sau:
http://your_server_ip/digiaddress/findaddress.php Hãy kiểm tra bằng lệnh mã bản đồ bạn đã lấy trước đó. Hình sau cho thấy một kết quả điển hình:
Như vậy, ứng dụng của bạn đã hoàn thành. Như vậy, bạn có thể tạo mã bản đồ duy nhất cho bất kỳ vị trí nào trên thế giới, sau đó sử dụng mã bản đồ đó để truy xuất địa chỉ thực của vị trí đó.
Kết luận
Trong hướng dẫn này, bạn đã sử dụng API Google Maps để ghim một vị trí và nhận thông tin kinh độ, vĩ độ của nó. Thông tin này được sử dụng để tạo một địa chỉ kỹ thuật số ngắn và duy nhất bằng API Mapcode. Có một số trường hợp sử dụng thực tế cho mã bản đồ, từ các dịch vụ khẩn cấp đến khảo sát khảo cổ học. Stichting Mapcode Foundation liệt kê một số trường hợp sử dụng như vậy.
Sự nhìn nhận
Rất cám ơn Dinesh Karpe và Sayli Patil đã phát triển toàn bộ mã dự án.
Các tin liên quan
Cách thay đổi cài đặt PHP của bạn trên Ubuntu 14.042016-03-25
Cách thiết lập XHProf và XHGui để lập profile ứng dụng PHP trên Ubuntu 14.04
2016-02-19
Cách nâng cấp lên PHP 7 trên CentOS 7
2016-01-14
Cách nâng cấp lên PHP 7 trên Ubuntu 14.04
2015-12-15
Cách triển khai nhiều ứng dụng PHP bằng Ansible trên Ubuntu 14.04
2015-06-28
Cách triển khai ứng dụng PHP nâng cao bằng Ansible trên Ubuntu 14.04
2015-06-02
Cách triển khai một ứng dụng PHP cơ bản bằng Ansible trên Ubuntu 14.04
2015-04-14
Cách chia sẻ các phiên PHP trên nhiều server Memcached trên Ubuntu 14.04
2014-07-22
Cách sử dụng Framework PHP miễn phí béo
2014-03-06
Cách tự động hóa quy trình triển khai ứng dụng PHP bằng Capistrano trên Ubuntu 13
2014-02-26
