Joomla – Thiết kế web động dễ như chơi (Phần 40)

Thảo luận trong 'Joomla' bắt đầu bởi hoangtrieumanhn, 2/1/15.

Lượt xem: 13,885

Bạn đang xem:

Joomla – Thiết kế web động dễ như chơi (Phần 40)

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Tiếp theo trong bài viết này sẽ hướng dẫn các bạn cài đặt component và plugin Phocamap vào trong Joomla. Thông qua component mới này, bạn sẽ có khả năng liên kết với bản đồ Google Map

    [​IMG]


    Bạn sẽ cần tải phần nguồn cài đặt từ địa chỉ http://www.mediafire.com/?8ypj42f3l9hcmfa, sau đó giải nén thành thư mục Extensions15.

    Cài đặt component và plugin Phoca Map

    Đầu tiên, bạn mở trình duyệt và truy cập vào địa chỉ:http://localhost/mobile/administrator, và đăng nhập bằng tên tài khoản (username) là admin, còn mục mật khẩu (password), bạn nhập vào mật khẩu mà bạn đã thiết lập trong quá trình cài đặt Joomla. Sau khi đăng nhập thành công, bạn vào menu Extensions, chọn Install/Uninstall. Ở mụcPackage File, bạn nhấn Browse và trỏ đường dẫn đến tập tinplg_phocamaps_v1.1.0.zip, sau đó bạn nhấn Upload File & Install.


    [​IMG]


    Khi bạn nhận được thông báo Install Plugin Success nghĩa là quá trình cài đặt pluginnày đã thành công. Tiếp theo cũng trong mục này, bạn cần cài đặt thêm componentPhoca Map bằng cách trỏ đường dẫn đến tập tincom_phocamaps_v1.1.1.zip. Khi nhận được thông báo Install Component Success Fully nghĩa là bạn đã hoàn tất việc cài đặt component.

    Cấu hình plugin Phoca Map

    Bạn vào menu Extensions, rồi chọn phần Plugin Manager. Bạn tìm tiếp đếnplugin mang tên Phoca Maps Plugin và nhấn chọn vào đó. Ở mục Name, bạn có thể thay đổi tên cho plug in. Ở mục Enabled , bạn chọn Yes để kích hoạt plug in này. Còn mục Access Level, thì bạn dùng nó để phân quyền cấp độ truy cập.


    [​IMG]


    Sau đó, bạn hãy nhìn sang khung Parameters ở góc bên phải, là nơi bạn có thể cấu hình thông tin cho plugin này. Mục Display Map Description, bạn nên chọn Yes để hiển thị các thông tin mô tả cho bản đồ. Mục Detail Windows, bạn chọn dạng hiển thị khi nhấn vào liên kết bản đồ. Có hai dạng pop up cho bạn lựa chọn: Standard Popup Windows và Modal Popup Box.

    Mục Modal Box Overlay Color, giúp bạn thiết lập màu sắc độ bao phủ ở ngoài khung popup. Điều này có nghĩa là khi bạn nhấn chuột vào liên kết bản đồ, khung popup sẽ sáng lên và toàn bộ nội dung bên ngoài khung popup sẽ có màu do bạn chỉ định tại mục này.

    Kế tiếp là mục Modal Box Overlay Opacity dùng để thiết lập độ trong suốt màu sắc cho nội dung nằm ngoài khung popup. Con số % này càng lớn thì màu sắc sẽ càng hiển thị đậm, nên để cho đẹp, thì bạn chỉ nên chọn giá trị từ20% hoặc 30% mà thôi.

    Mục Model Box Boder Color, bạn nhấn vào nút Pick Color để chọn màu sắc cho đường viền của khung Pop up. Cuối cùng là mục Modal Box Border Width, bạn thiết lập độ dày đường viền cho khung. Đơn vị ở đây được tính bằng điểm ảnh (pixel). Sau khi thiết lập xong, bạn nhấn nút Save để lưu lại.


    [​IMG]


    Tạo bản đồ với Component Phoca Maps

    Để bắt đầu tạo bản đồ, bạn vào menu Components, chọn Phoca Maps, sau đó bạn chọn Maps.


    [​IMG]


    Trong trang Maps, bạn sẽ nhìn thấy các biểu tượng như: xuất bản (Publish), không xuất bản (UnPublish), xóa (Delete), chỉnh sửa (Edit) và tạo mới (New) bản đồ.


    [​IMG]


    [​IMG]).Chúng ta đang cần tạo mới, nên bạn hãy nhấn vào nút New. Ở mục Title, bạn nhập vào tên bản đồ, ví dụ Bản đồ công ty ABC. Tiếp theo bạn phải nhập vào tọa độ cho địa chỉ của bạn, kinh độ ở mục Latitude và vĩ độ ở mụcLongtitude. Nếu bạn cảm thấy khó khăn trong việc xác định các thông số này, bạn hãy nhấn vào nút Coordinates.

    Bạn hãy nhập vào địa chỉ đầy đủ công ty hay cửa hàng của bạn ở mục Set Coordinates by address, sau đó bạn nhấn nút Set


    [​IMG]


    Ngay lập tức chương trình sẽ xác định tọa độ và vĩ độ của địa chỉ nhà bạn. Bạn chú ý ở góc bên phải phía trên có hai chế độ để bạn chọn lựa. Nếu bạn muốn xem bản đồ theo dạng hình vẽ, bạn có thể chọn Map. Còn nếu bạn muốn xem ảnh chụp từ vệ tinh, bạn chọn Satellite.


    [​IMG]


    Ở góc bên trái sẽ có các biểu tượng giúp bạn di chuyển và phóng to bản đồ. Sau khi đã có thông số kinh độ và vĩ độ, bạn nhấn biểu tượng Close để đóng bản đồ lại


    [​IMG]


    Quay trở lại màn hình tạo mới bản đồ, mục Map Width và Map Height cho phép bạn nhập vào chiều rộng và chiều cao của vùng bản đồ cần hiển thị.


    [​IMG]


    Mục Published, bạn nhớ chọn Yes để kích hoạt bản đồ. Ngoài ra, bạn có thể điền thêm các thông tin mô tả cho bản đồ ở mục Description.

    Bước kế tiếp chúng ta sẽ cấu hình giao diện cho khung bản đồ. Bạn quan sát khung Design Settings. Ở mục Border cho phép bạn lựa chọn màu sắc cho khung viền. Phoca cung cấp cho bạn bốn mẫu màu cho khung viền.


    [​IMG]


    Kế đến là khung Advanced Settings, mục Map Type có bốn dạng bản đồ cho bạn lựa chọn Roadmap, Hybrid, Satellite và Terrain. Ở mục Map Type Control sẽ giúp bạn hiển thị các nút điều chỉnh bản đồ, tốt nhất bạn nên để chế độ Default. Mục Map Type Control Position cho phép bạn thiết lập vị trí cho các nút hiển thị.

    Với hai mục Doubleclick Zoom và Scrool Wheel Zoom, nếu bạn muốn rằng khi người dùng nhấn kép chuột hoặc khi nhấn vào nút cuộn chuột thì bản đồ sẽ được phóng to, bạn hãy chọn Yes ở cả hai mục này.

    Thông số cuối cùng bạn cần quan tâm là Display Get Route Form dùng để hiển thị thông tin hướng dẫn đường. Điều này rất có ích cho người xem khi họ muốn tìm địa chỉ của bạn. Sau khi cấu hình xong, bạn nhấn nút Save để lưu lại.


    [​IMG]



    Đánh dấu vị trí công ty hoặc nhà của bạn

    Bạn vào menu Components, chọn Phoca Maps, và chọn tiếp Markers.


    [​IMG]


    Bạn nhấn New để tạo mới vị trí cần đánh dấu. Ở mục Name, bạn nhập vào tên cho vị trí định vị. Ở mục Latitude và Longtitude, bạn nhấn vào nútCoordinates, sau đó nhập vào vị trí nhà hoặc công ty của bạn. Bạn có thể di chuyển biểu tượng định vị đến đúng nơi bạn mong muốn.



    [​IMG]


    Ở mục Maps, bạn phải trỏ đến bản đồ mà bạn đã tạo ra.


    [​IMG]


    Ở khung Design Settings nằm ở góc cuối, bạn chọn dạng biểu tượng đánh dấu vị trí của bạn. Sau khi cấu hình xong, bạn nhấn nút Save để lưu lại.


    [​IMG]


    Chèn bản đồ vào bài viết

    Bây giờ thì bạn có thể chèn bản đồ đã tạo vào bài viết của mình. Quay trở lại trang quản trị Maps bằng cách vào menu Components, chọn Phoca Maps, và chọn Maps, bạn cần chú ý đến cột Plugin Code. Bạn hãy sao chép toàn bộ nội dung này vào trong Notepad.


    [​IMG]


    Tiếp theo bạn vào menu Content, chọn mục Article Manager. Bạn mở bài viết cần chèn bản đồ, rồi nhấn vào biểu tượng HTML để chèn đoạn mã vào. Cần chú ý là có hai cách để bạn thể hiện bản đồ trong bài viết. Cách đầu tiên là bản đồ sẽ thể hiện ngay trực tiếp trong bài viết của bạn

    {phocamaps view=map|id=2}, cách còn lại là trong bài viết của bạn sẽ hiển thị liên kết đến bản đồ. Khi người dùng nhấn vào liên kết này thì bản đồ mới được hiển thị.

    {phocamaps view=link|id=2|text=Bản đồ hướng dẫn}.

    Sau khi chèn xong, bạn hãy nhấn vào nút Updates và nhấn nút Save để lưu lại.


    [​IMG]


    Quay lại trang Joomla Mobile, bạn thử mở bài viết mà bạn đã chèn đoạn mã bản đồ vào để xem kết quả.


    [​IMG]



    Liên kết bản đồ với menu

    Quay lại trang quản trị Joomla, bạn vào menu Menus, chọn Main Menu. Nhấn vào biểu tượng New để tạo mới một mục chọn trong menu. Bạn bung mục Phoca Maps, rồi chọn Map.


    [​IMG]


    Ở mục Title, bạn nhập vào tên cho menu, ví dụ Bản đồ hướng dẫn. MụcPublished, bạn nhớ chọn Yes để kích hoạt menu này.


    [​IMG]


    Tiếp theo bạn nhìn sang khung Parameter (Basic) bên phải, ở mục Select Map, bạn chọn bản đồ mà chúng ta đã tạo. Nhấn nút Save để lưu lại.


    [​IMG]


    Quay lại trang Joomla Mobile, bạn nhấn vào menu vừa tạo ra, sẽ nhìn thấy ở bên dưới bản đồ có mục From (Address). Người xem trang muốn biết đường đi từ một vị trí bất kỳ đến công ty hoặc nhà của bạn thì người đó chỉ việc nhập vào địa chỉ hiện của họ, sau đó nhấn nút Get Route.


    [​IMG]


    Hệ thống định vị của Google sẽ tự động hướng dẫn đường đi một cách chính xác và nhanh chóng.


    [​IMG]


    NHÓM MỤC ĐỒNG
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Joomla – Thiết kế web động dễ như chơi (Phần 40)

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, sim tra sau, giàn phơi thông minh, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, fpt ho chi minh, @@
=