網頁

顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

2016年12月19日 星期一

Laravel Framework 的 Homestead 安裝及使用 for Window

  1. 下載安裝 VirtualBox
  2. 下載安裝 Vagrant 
  3. 安裝完 Vagrant 進入到用戶目錄中就會看到 Vagrant 的檔案內容
  4. 安裝 Git
  5. Git 安裝好就可以在用戶目錄中進行安裝 VirtualBox 使用的 box (虛擬機的檔案)
  6. 開啟命令視窗在用戶目錄中下載, 執行

    git clone https://github.com/laravel/homestead.git Homestead

  7. 執行過 git 就會在用戶目錄中看到 Homestead 及 .homestead 這兩個目錄.
  8. 進入到 Homestead 這個目錄中, 執行第一次設定檔產生, 執行目錄中的檔案 init.bat, 這時會在 .homestead 中產生 Homestead.yaml 檔案.
  9. 進入到 .homestead 目錄中, 修改 Homestead.yaml
  10. 將 folders 項目中的 map 修改為自己要使用的目錄, 例如:

    folders:
        - map: D:/Code
          to: /home/vagrant/Code


  11. 將 sites 設定, 例如:

    sites:
        - map: homestead.app
          to: /home/vagrant/Code/blog/public


    其中的 map 設定為所要使用的網址, 並且到 Windows/system32/drivers/etc/ 底下修改 hosts 檔案, 通常設定 192.168.10.10 homestead.app 這樣才可以在瀏覽器中輸入 homestead.app 這樣的網址連線到網站. 

    另外 to 這個項目, 依照自己專案的名稱來設定, 系統預設的網頁目錄為 /home/vagrant/, 因為指派了 folders 的檔案目錄, 因此變成 /home/vagrant/Code/ 接下來才是專案名稱.所以成為 /home/vagrant/Code/專案名稱/專案的 public 這樣的路徑.
  12. Homestead.yaml 設定好後就可以進行第一次執行 Homestead 虛擬機.
  13. 執行命令視窗在 Homestead 的目錄中, 執行 vagrant up
  14. 執行過後 windows 系統必須使用 putty 或是其他 ssh 連線程式連接到虛擬機, 而不是用 vagrant ssh 指令.
  15. 開啟 putty 建立 homestead 連線, IP 需輸入 127.0.0.1 Port:2222 帳號 vagrant 密碼 vagrant 這樣就可以連接到虛擬機上面進行操作.
  16. 虛擬機進入後, 建議執行一次 sudo apt-get update, 及 sudo apt-get upgrade 更新一下系統.
  17. 更新過虛擬機後, 登出虛擬機, 回到 windows 命令視窗, 在 Homestead 目錄底下執行 vagrant provision 更新虛擬機的映象檔. 更新後使用 vagrant reload 重新執行虛擬機. 這樣下次經由ssh 連線進去就是更新過後的系統.
  18. 使用 php artisan make:migration 產生資料庫檔時, 有時會因為刪除了 database/migration 目錄底下的檔案要另外產生發生錯誤, 這時候可以執行 composer dump-autoload -o 來修復錯誤.
2017-04-14 更新

如果更新了 vagrant 到  1.9.3 版本後, 發生 vagrant up fails 的錯誤, 也就是網路 forward port 的問題, 可以考慮將 Homestead/scripts/homestead.rb 中的內容更改一下, 底下是要更改的內容:

        # Use Default Port Forwarding Unless Overridden
        unless settings.has_key?("default_ports") && settings["default_ports"] == false
            default_ports.each do |guest, host|
                unless settings["ports"].any? { |mapping| mapping["guest"] == guest }
                    #config.vm.network "forwarded_port", guest: guest, host: host, auto_correct: true
    config.vm.network "forwarded_port", guest: guest, host: host, host_ip: "127.0.0.1", auto_correct: true
                end
            end
        end

        # Add Custom Ports From Configuration
        if settings.has_key?("ports")
            settings["ports"].each do |port|
                #config.vm.network "forwarded_port", guest: port["guest"], host: port["host"], protocol: port["protocol"], auto_correct: true
config.vm.network "forwarded_port", guest: port["guest"], host: port["host"], protocol: port["protocol"], host_ip: "127.0.0.1", auto_correct: true
            end
        end


2014年4月6日 星期日

Spry Menu 的應用技巧 Vertical Menu Bar

美工製作網頁選單如果使用 Dreamweaver 常會使用 Spry menu 來製作加快處理選單的作法. Spry menu 是一個方便的選單處理方式. 不過如果對於 css 不熟悉或是剛剛入門的設計師而言要製作稍微客製化的選單就有點難度.

先針對一般的選單設計, 要製作出這樣的選單如果使用 Spry menu 處理很快, 以垂直顯示(Vertical) 的選單來說,設定好選單項目內容稍微修改一下 css 項目就可以達成. 每次選擇一個選項, 就會在該項目右邊顯示出相同高度的次目錄.

例如: http://www.smdoor.com.tw/test4.html



但是如果客戶要求要把選單點選後的次選單位置統一固定高度顯示,初學者可能會傻眼, 不知道要去哪邊修改高度讓他每次選擇一個主選單後次選單固定在一致的高度位置顯示.

2013年8月30日 星期五

網頁製作中使用 Font 字型取代小圖示 (icon)

在製作網頁時往往會用到依些小圖示來標示, 讓網站內容更明確清楚, 現在有一個 font 字型可以使用來取代這些常用的小圖示, 讓網站速度變快, 也省掉相當多的製圖時間.

網址為 : http://fortawesome.github.io/Font-Awesome/

可以參考裡面的範例將所要的字型圖示加到網頁中.

2012年6月13日 星期三

在網頁中加入 Google 提供的動態天氣預報資訊


幫客戶製作網站的網頁時, 客戶提出想在網頁中加入及時的天氣預報資訊.搜尋網路上有提供相當多的相關資訊, 但是一直都不是很簡潔的處理方式.

有的是透過 Yahoo 提供的 API, 有的是透過 Google 提供的 API, 由於想要的是最簡潔的方式, 可以很單純的將現在的溫度跟天候狀態顯示出來,以及未來三天的預測. 所以選用了 Google 的天氣 API. 另外, 為了要讓天氣顯示美美的, 所以也加上了 jQuery 的 plugin, fisheye dock menu 
(http://blog.jquery.com/2007/05/09/fisheye-dock-menu/) 來當作美化介面使用. 這一個 plugin 除了可以使用來凸顯介面, 也可以當作選單使用, 就像你在使用 Apple 的介面一樣, 讓你的網站看起來不一樣, 有興趣的自行參考該網站.

Google 提供天氣的資訊是使用 xml 的方式傳遞資訊, 所以在我開發的過程中使用了 php 提供解析 xml 的函數 simplexml_load_file(). 這樣就可以方便將每一個 xml 現在跟預報中的資訊都擷取出來使用.

要使用 Google 提供的 xml 檔案, 就要先了解他的 xml 結構, 要使用 Google weather API 請到以下的網址 http://www.google.com/ig/api?weather=taipei 參數 weather=taipei 這裡請填你要查詢的地區, 以下是抓取台北(taipei), 的地區天氣資訊所傳回的 xml 檔案.