tag:blogger.com,1999:blog-5045340106917331202024-03-13T18:37:17.628+08:00網頁設計微筆記本站多數內容寫於 2013 年,當時筆者仍是初學者,因此本站部分內容可能已經過時、有錯誤,或品質不合乎現代標準,敬請留意!(推薦您瀏覽英文版的 MDN Web Docs,品質高、內容豐富。)Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comBlogger120125tag:blogger.com,1999:blog-504534010691733120.post-33530984093778284812017-08-01T14:00:00.000+08:002016-08-18T01:16:24.811+08:00網誌主目錄<table><tbody>
<tr>
<td style="text-align: right;" width="100px"><span style="font-size: large;">第 1 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page.html"><span style="font-size: large;">概觀</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 2 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/1-1.html"><span style="font-size: large;">HTML 的架構</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 3 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/3html.html"><span style="font-size: large;">HTML 語法</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 4 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_30.html"><span style="font-size: large;">CSS 的架構</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 5 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_84.html"><span style="font-size: large;">CSS 語法</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 6 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_87.html"><span style="font-size: large;">HTML5 與 CSS3 的變革</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 7 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_11.html"><span style="font-size: large;">JavaScript 腳本語言</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 8 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_55.html"><span style="font-size: large;">基礎 PHP 程式設計</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 9 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/9-mysql.html"><span style="font-size: large;">MySQL 資料庫系統</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 10 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_98.html"><span style="font-size: large;">進階 PHP 程式設計</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 11 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/11-linux-server.html"><span style="font-size: large;">淺談 Linux 伺服器</span></a></td>
</tr>
<tr>
<td style="text-align: right;"><span style="font-size: large;">第 12 章</span></td>
<td style="padding-left: 10px;"><a href="http://ywpu.blogspot.tw/p/blog-page_99.html"><span style="font-size: large;">其他筆記</span></a></td>
</tr>
</tbody>
</table>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-2796258939558897902016-08-30T18:02:00.000+08:002016-08-30T18:50:51.735+08:0012.8 中研院實習成果分享<h1 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em;">
Biodiversity Analysis 程式介紹</h1>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
程式 GitHub 首頁:<a href="https://github.com/yuwen41200/biodiversity-analysis" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">https://github.com/yuwen41200/biodiversity-analysis</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
本文作者:陳耘志、蒲郁文<br style="box-sizing: border-box;" />授權條款:<a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh_TW" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">創用 CC 姓名標示-非商業性 4.0 國際</a></div>
<h2 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E7%9B%AE%E6%A8%99" id="user-content-目標" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>目標</h2>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
路殺資料分析</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
農委會特有生物研究保育中心與中研院資訊所合作,進行台灣 <a href="https://en.wikipedia.org/wiki/Roadkill" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">路殺</a> 資料的整理與 <a href="https://roadkill.tw/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">網路平台</a> 的架設。雖然目前該平台已經製作了 <a href="https://roadkill.tw/viz" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">多種資料分析與視覺化的介面</a>,但我們希望能夠更進一步地探索、分析這些資料,例如:了解各物種間是否有共現(co-occurrence)的情形,以便探討物種「二次路殺」的可能。(註:當一生物為了掠食另一被路殺的生物的屍體而被路殺時,便稱為二次路殺。)</div>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
通用的分析工具</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
我們希望我們開發的工具不只適用於路殺資料,還能適用於其他的生物觀測數據。<a href="https://en.wikipedia.org/wiki/Darwin_Core_Archive" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Darwin Core Archive (DwC-A)</a> 是全世界通用的生物多樣性資料標準,因此我們希望能先將我們既有的路殺資料轉換成 DwC-A 格式,再傳入我們開發的工具進行分析。我們開發的工具應該要對 DwC-A 標準有良好的支援,能夠正確地解析任何合乎 DwC-A 標準的檔案。</div>
</li>
</ul>
<h2 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E8%A8%AD%E8%A8%88%E7%90%86%E5%BF%B5" id="user-content-設計理念" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>設計理念</h2>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
由於 Python 在統計、分析方面擁有豐富的第三方函式庫,故採用 Python 撰寫</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
在此程式中,我們結合了資料視覺化(data visualization)與量化分析,讓使用者能夠一眼掌握資料的分佈,同時也能夠得到精確的數據。</div>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
透過 <a href="https://www.riverbankcomputing.com/software/pyqt/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">PyQt</a> 建立圖形化使用者介面,方便生態學家乃至於一般大眾使用</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
<a href="https://www.qt.io/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Qt</a> 是一套優秀的跨平台應用程式框架,而 PyQt 則是 Qt 的 Python 綁定(binding)。由於最新版的 Qt 尚未提供原生的 GTK+ 介面外觀(look and feel),我們決定採用 PyQt 5.6 版。</div>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
使用 MVC 架構,讓程式未來的擴展更簡便</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
我們採用軟體工程中常用的 MVC (model–view–controller) 架構,將一個大專案模組化為眾多小元件,藉此增加程式碼的可讀性與可維護性。</div>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
加入多執行緒、多行程等平行化技術,提昇程式的執行效率</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
此程式必須同時進行許多運算,例如:查詢線上 API、計算共現相關度、呈現內嵌網頁與執行圖形化使用者介面的 event loop 等等。這些運算本身都有一定的複雜度,也有可能會出其不意的當掉。我們不希望其中一個元件當掉就導致整個程式崩解,我們也不希望其中一個元件長期佔用其他元件的計算資源,造成其他元件無法進行。為了滿足這些需求,我們將它們分開到不同的執行緒或行程,並且確保他們可以互相傳遞訊息。</div>
</li>
</ul>
<h2 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E7%89%B9%E8%89%B2" id="user-content-特色" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>特色</h2>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
物種分類階層查詢</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:自動查詢物種的各個分類階層(界、門、綱、目、科、屬、種)。</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">實作:自動在背景開啟新的執行緒,查詢 <a href="http://www.gbif.org/developer/registry" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">GBIF API</a>,得到 <em style="box-sizing: border-box;">GBIF</em> 提供的分類階層資料。如果查詢失敗,就直接忽略。此功能需要用到網路。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
物種篩選</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:為使用者篩選出曾出現在特定時間、經緯度範圍內的物種的所有紀錄。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
空間分析:空間分佈圖</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:將物種紀錄點在 <em style="box-sizing: border-box;">OpenStreetMap</em> 提供的地圖上,藉由不同顏色區別物種,不同半徑表示該筆紀錄所觀測到的個體數量。</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">實作:透過 <a href="http://doc.qt.io/qt-5/qwebengineview.html" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">QWebEngineView</a> 使用 <em style="box-sizing: border-box;">Chromium</em> 內嵌網頁,再透過 <a href="https://github.com/python-visualization/folium" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Folium</a> 使用 <em style="box-sizing: border-box;">Leaflet</em> 將 <em style="box-sizing: border-box;">OpenStreetMap</em> 的圖磚(tile)畫在網頁上。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
空間分析:空間相關度</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:透過物種之間的 <a href="http://goo.gl/XMHYdK" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">郝斯多夫距離(Hausdorff distance)</a>衡量牠們在空間上的相關性。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
時間分析:時間分佈圖</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:將物種紀錄點在一個橫軸為月份、縱軸為年份的座標上,並如同空間分佈圖一般,藉由不同顏色區別物種,不同半徑表示該筆紀錄所觀測到的個體數量。研究者可藉此推論各物種最頻繁出沒的季節為何、族群大小逐年增減的情形等。</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">實作:使用 <a href="http://matplotlib.org/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">matplotlib</a> 提供的函式庫,做出類似 <a href="https://github.com/yuwen41200/biodiversity-analysis/graphs/punch-card" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">GitHub punch card</a> 的視覺化呈現。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
時間分析:時間相關度</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:透過物種之間的 <a href="http://goo.gl/bxtsp3" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">柯爾莫諾夫—斯米爾諾夫檢驗(Kolmogorov-Smirnov test)</a>估算時間分佈的相關性。</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">實作:使用 <a href="http://scipy.org/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">SciPy</a> 提供的 <a href="http://docs.scipy.org/doc/scipy-0.15.1/reference/generated/scipy.stats.ks_2samp.html" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">ks_2samp</a> 來檢測兩個時間分佈之間的靠近程度。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
共現分析:共現相關度</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:找出整份資料集中無論在時間上或空間上都有很大的相關性的物種。</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">實作:自動在背景開啟新的行程,枚舉所有觀測紀錄,挑選出相關性夠大的紀錄,對其做時間與空間的加權與正規化(normalization),藉此歸納出哪些物種在空間上與時間上皆有極大的相關性。為了提供更流暢的使用體驗,只有在使用者切換到共現分析頁面後才會開始計算共現相關度。若資料集有任何變更,共現相關度也會自動重新計算。</li>
</ul>
</li>
</ul>
<h2 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E6%9C%AA%E4%BE%86%E9%A1%98%E6%99%AF" id="user-content-未來願景" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>未來願景</h2>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">避免將整份資料集全部載入記憶體</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">改善效能瓶頸</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">使用生態學界慣用的分析、統計方法</li>
</ul>
<h1 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin: 24px 0px 16px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E8%BC%94%E5%8A%A9%E5%B7%A5%E5%85%B7" id="user-content-輔助工具" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>輔助工具</h1>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
輔助工具根目錄:<a href="https://github.com/yuwen41200/biodiversity-analysis/tree/master/utils" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">utils</a></div>
<h2 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E7%9B%AE%E6%A8%99-1" id="user-content-目標-1" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>目標</h2>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
路殺資料 DwC-A 檔製作</div>
<div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
將台灣路殺觀測資料製作成 DwC-A 格式,另附上路殺照片與輔助網頁,方便生態學家探索。</div>
</li>
</ul>
<h2 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em;">
<a aria-hidden="true" class="anchor" href="https://www.blogger.com/blogger.g?blogID=504534010691733120#%E8%AA%AA%E6%98%8E" id="user-content-說明" style="box-sizing: border-box; color: #4078c0; float: left; line-height: 1; margin-left: -20px; padding-right: 4px; text-decoration: none;"><span aria-hidden="true" class="octicon octicon-link" style="box-sizing: border-box; color: black; display: inline-block; fill: currentcolor; vertical-align: middle; visibility: hidden;"></span></a>說明</h2>
<ul style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 0px !important; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
utils / image-tagger</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:將任意圖片加上指定的 CC 授權圖標與授權說明的浮水印,並且將圖片縮放至指定的大小。</li>
<li style="box-sizing: border-box; margin-top: 0.25em;">實作:在 Bash 腳本中呼叫 <em style="box-sizing: border-box;">ImageMagick</em> 子程式,透過多次迭代,將指定功能不斷加進輸出圖片中。</li>
</ul>
</li>
<li style="box-sizing: border-box; margin-top: 0.25em;"><div style="box-sizing: border-box; margin-bottom: 16px; margin-top: 16px;">
utils / roadkill-packer</div>
<ul style="box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;">功能:對於從路殺資料庫提取出來的 CSV 檔中的每一筆紀錄,下載 <a href="https://roadkill.tw/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">台灣野生動物路死觀察網</a> 上相對應的照片檔,並利用上述工具在照片中加上授權資訊。此外,將所有資料包裝成 DwC-A 格式,研究者可以將這份資料集發佈到他們單位的 <a href="http://www.gbif.org/ipt" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Integrated Publishing Toolkit (IPT)</a>,甚至是整個 <a href="http://www.gbif.org/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">Global Biodiversity Information Facility (GBIF)</a> 網絡。最後,將整份資料集整理成一份 HTML 檔,方便使用者直接透過瀏覽器探索資料。</li>
</ul>
</li>
</ul>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-8093954785851443822016-08-12T18:55:00.000+08:002016-08-12T18:55:14.710+08:0012.7 應用邏輯演講心得<div style="font-family: Georgia, Times New Roman, serif; padding: 10px;">
<h1 style="border-bottom: 1px solid rgb(238, 238, 238); box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.25; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em;">
An Explanatory, Topological Semantics for Inductive Knowledge</h1>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
by Kevin T. Kelly, Director of Center for Formal Epistemology and Professor at Department of Philosophy, Carnegie Mellon University</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
資訊所幾乎每週都會有一到兩場演講,題目也很多元。<br style="box-sizing: border-box;" />但是我覺得這場演講特別難得,因為講者是來自哲學專業背景的。</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
這場演講主要是在探討 modal logic 及其應用。<br style="box-sizing: border-box;" />一開始講者先談到 epistemic logic,它有幾個公理:<br style="box-sizing: border-box;" />(Kφ means "Agent α knows that φ.")</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
(N) Kφ, if ⊨ φ<br style="box-sizing: border-box;" />若某事成立,則我知道某事。<br style="box-sizing: border-box;" />(K) K(φ → ψ) → (Kφ → Kψ)<br style="box-sizing: border-box;" />若我知道「若這件事,則那件事」,則「若我知道這件事,則我知道那件事」。<br style="box-sizing: border-box;" />換句話說,若我知道這件事,而且我也知道「若這件事,則那件事」,則我知道那件事。<br style="box-sizing: border-box;" />(T) Kφ → φ<br style="box-sizing: border-box;" />若我知道某事,則某事為真。<br style="box-sizing: border-box;" />(4) Kφ → KKφ<br style="box-sizing: border-box;" />若我知道某事,則我知道我知道某事。<br style="box-sizing: border-box;" />(5) ¬Kφ → K¬Kφ<br style="box-sizing: border-box;" />若我不知道某事,則我知道我不知道某事。</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
最基本的 modal system 只遵循公理 T。<br style="box-sizing: border-box;" />常見的,最完整的 modal system 是 S5。</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
在進入 modal logic 之前,講者闡述了「世界」的概念。<br style="box-sizing: border-box;" />(W is a world; I is a set of information states; E is an information state; H is a hypothesis.)</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
I covers W.<br style="box-sizing: border-box;" />I is closed under finite conjunction.<br style="box-sizing: border-box;" />→ I is a topological basis of W.</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
H is verified by E iff E ⊆ H.<br style="box-sizing: border-box;" />H if refuted by E iff E ⊆ H<span style="box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; top: -0.5em; vertical-align: baseline;">c</span>.<br style="box-sizing: border-box;" />I(W) ≔ {E ∈ I | W ∈ E}</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
接著開始介紹 modal logic。<br style="box-sizing: border-box;" />什麼是情態(modality)呢?其中一種常見的定義是:<br style="box-sizing: border-box;" />Modality is the speaker’s "opinion or attitude towards the proposition that the sentence expresses or the situation that the proposition describes." (Lyons 1977:452)</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
情態大致可以分為認知情態(epistemic modality)與義務情態(deontic modality)兩種。<br style="box-sizing: border-box;" />認知情態:懷疑、可能、猜測等。<br style="box-sizing: border-box;" />義務情態:承諾、命令、希望等。</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
最重要的兩個 modal operator 分別是:<br style="box-sizing: border-box;" />□ denotes "will be verified that."<br style="box-sizing: border-box;" />◊ denotes "will never be refuted that."<br style="box-sizing: border-box;" />(運算子 □ 與 ◊ 分別意謂著 necessity 與 possibility。)</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
□φ ≔ FVḞφ<br style="box-sizing: border-box;" />F denotes future; V denotes "is verified that"; Ḟ denotes past of F.<br style="box-sizing: border-box;" />Note: The dot (.) above F should be a grave (`).</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
e.g. "It will be verified that it is raining now."<br style="box-sizing: border-box;" />In this sentence, "will be" can be denoted as F, "be verified" can be denoted as V, and "is V-ing now" can be denoted as Ḟ.</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
Similarly, let R denotes "is refuted that."<br style="box-sizing: border-box;" />Rφ ≔ V¬φ<br style="box-sizing: border-box;" />◊φ ≔ ¬□¬φ</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
比較特別的是,講者在這裡引入了 stack 的概念。<br style="box-sizing: border-box;" />一個 history(記為 h)可以被理解成一個 stack,[[φ]]<span style="bottom: -0.25em; box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; vertical-align: baseline;">E*h</span> 是 push 運算,[[φ]]<span style="bottom: -0.25em; box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; vertical-align: baseline;">pop(h)</span> 是 pop 運算。<br style="box-sizing: border-box;" />實際應用的例子:<br style="box-sizing: border-box;" />[[Ḟφ]]<span style="bottom: -0.25em; box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; vertical-align: baseline;">h</span> ≔ [[φ]]<span style="bottom: -0.25em; box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; vertical-align: baseline;">pop(h)</span></div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
最後,講者提到了 stable belief 與 infallible belief。<br style="box-sizing: border-box;" />Stabφ ≔ GCḞφ<br style="box-sizing: border-box;" />Ĩnfal<span style="bottom: -0.25em; box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; vertical-align: baseline;">2</span>φ ≔ VFG¬ẼḞḞφ<br style="box-sizing: border-box;" />G denotes "will always"; C denotes correctness; E denotes error; Ẽ denotes error whether.</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
最常見的對「知識」的定義是 justified true belief。<br style="box-sizing: border-box;" />不過在這裡,講者採用的是:<br style="box-sizing: border-box;" />Kφ ≔ Stabφ ∧ Ĩnfalφ<br style="box-sizing: border-box;" />(或是用 Ĩnfal<span style="bottom: -0.25em; box-sizing: border-box; font-size: 12px; line-height: 0; position: relative; vertical-align: baseline;">2</span>φ 來定義。)</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
這些理論能帶給 computer science 什麼啟發嗎?<br style="box-sizing: border-box;" />一些熱門的研究領域,如機器學習、人工智慧等,它們操作的對象已不再只是 data,也不是 information,而是 knowledge。<br style="box-sizing: border-box;" />因此哲學中的知識論(epistemology)等研究對它們便具有一定的重要性。</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
其實這場演講談到的內容遠超過我這裡所寫的,我只是摘錄下我(勉強)能夠理解的部份而已。<br style="box-sizing: border-box;" />講者講的很多都是他自己的研究,也不見得有發表,所以要找到相關資料並不是很容易。<br style="box-sizing: border-box;" />我對這方面的了解還相當有限,若發現任何錯誤,歡迎不吝指正。</div>
<div style="box-sizing: border-box; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 24px;">
延伸閱讀:<br style="box-sizing: border-box;" /><a href="http://plato.stanford.edu/entries/logic-modal/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">http://plato.stanford.edu/entries/logic-modal/</a> (Stanford Encyclopedia of Philosophy)<br style="box-sizing: border-box;" /><a href="http://www.iep.utm.edu/modal-lo/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">http://www.iep.utm.edu/modal-lo/</a> (Internet Encyclopedia of Philosophy)<br style="box-sizing: border-box;" /><a href="http://www.andrew.cmu.edu/user/kk3n/kelly/johan-simplified-50.pdf" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">http://www.andrew.cmu.edu/user/kk3n/kelly/johan-simplified-50.pdf</a> (Speaker's Publication)</div>
</div>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-29921173333357314632015-03-25T17:42:00.000+08:002016-08-22T01:20:35.194+08:0012.6 常見 GNU Debugger (GDB) 指令介紹<div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> GNU Debugger (GDB) 是標準的 GNU 除錯工具。在使用 GDB 之前,請先使用 gcc/g++ 編譯器 (Compiler) 的 </span><span style="font-family: "courier new" , "courier" , monospace;">-g</span><span style="font-family: "georgia" , "times new roman" , serif;"> 參數編譯您想除錯的 C/C++ 程式。範例:</span></div><pre class="prettyprint">$ g++ foo.cpp -o foo -std=c++11 -Og -g3 -v -Wall -Wextra -Wpedantic
# g0 | g1 | g | g3:產生除錯資訊,數字愈大層級愈高,預設層級為 2
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 接著便能使用 GDB 進行除錯。承上例:</div><pre class="prettyprint">$ gdb foo
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 常見的 GDB 指令如下:</div><pre class="prettyprint">(gdb) run | r # 執行程式
(gdb) breakpoint | break | bre | b [Line] # 設定中斷點
(gdb) next | n # 執行下一行,不進入副程式
(gdb) step | s # 執行下一行,會進入副程式
(gdb) continue | cont | c # 繼續執行
(gdb) print | p [Variable] # 顯示變數內容
(gdb) list | l [Line] # 顯示程式碼
(gdb) backtrace | bt # 顯示所有堆疊區塊
(gdb) help | h [Command] # 顯示說明
(gdb) kill | k # 結束程式
(gdb) quit | q # 離開 GDB
</pre><div style="text-align: justify;"><span style="font-family: georgia, times new roman, serif;"> 若您開發的是一個多執行緒 (Multithreading) 的程式,則 GDB 預設只會顯示當前執行緒的資訊。若您想查看其他執行緒的資訊,您可以在您想執行的指令前加上 </span><span style="font-family: Courier New, Courier, monospace;">thread apply [Thread ID]</span><span style="font-family: georgia, times new roman, serif;"> (或 </span><span style="font-family: Courier New, Courier, monospace;">thread apply all</span><span style="font-family: georgia, times new roman, serif;">),便能針對特定 (或全部) 的執行緒進行除錯。</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> GDB 還可以用來除錯其他程式語言,例如 Python。雖然 Python 已經提供了 PDB 除錯工具,但仍有一些情況,例如 Segmentation Fault,應該使用 GDB 比較合適。使用 GDB 來除錯 Python 程式並不難,您可以參考 <a href="https://wiki.python.org/moin/DebuggingWithGdb" target="_blank">這篇教學</a>。</div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-1190986627242598972015-03-24T19:19:00.000+08:002016-08-21T22:26:33.907+08:0012.5 參與 Mozilla Firefox OS 開發的流程<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> Firefox OS 所有的 bug 都是在 <a href="https://bugzilla.mozilla.org/" target="_blank">Bugzilla@Mozilla</a> 平台上管理的。因此,第一步當然是先到 Bugzilla 認領一個您想修的 bug (建議從簡單的 good first bug 開始)。或者,您也可以在 Bugzilla 上建立一個新的 bug。</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 接下來,有一些前置作業要完成。請先在 GitHub 上 fork 它所屬的 repository,例如 Firefox OS 的前端 Gaia:<a href="https://github.com/mozilla-b2g/gaia" target="_blank">mozilla-b2g/gaia</a>。接著請回到您的本地端,執行以下指令:</div><pre class="prettyprint">$ git clone https://github.com/username/gaia.git
$ git remote add upstream https://github.com/mozilla-b2g/gaia.git
# check if you have added 'mozilla-b2g/gaia' as 'upstream'
$ git remote -v
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 每次開始修 bug 之前,請記得從 upstream 抓取更新,使您的本地端 repository 保持在最新狀態。請執行以下指令:</div><pre class="prettyprint">$ git remote update
# do not use 'git merge upstream/master'
# use the following command instead
$ git rebase upstream/master
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 然後就可以開始修 bug 囉。為了維持簡潔明瞭的 commit log,您應該將所有變更提交為單一一個 commit。您可以參考以下指令:</div><pre class="prettyprint">$ git add filename
# your commit message should be in the following form
# Bug id - Description of your patch r=reviewer
$ git commit -m 'your commit message'
$ git push origin master
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 再次提醒您,如果您提交了超過一個 commit,請務必將其合併為單一一個 commit。您可以參考以下指令:</div><pre class="prettyprint"> # show the commit history
$ git log
# n: the number of commits you want to squash
# please replace 'n' with any positive integer
$ git rebase -i HEAD~n
# into interactive mode
# step i. replace 'pick' with 'squash' except for the first line
# step ii. modify commit messages
$ git log
# now you should see n commits combined into a single commit
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 最後,請至 Mozilla 的 GitHub repository 提出 pull request。同樣地,pull request 的標題必需符合 "Bug id - Description of your patch r=reviewer" 的形式。這時系統應該會自動為您在 Bugzilla 上新增一個 attachment,其檔案名稱即為該 pull request 的網址。請在 attachment 上指定 review flag 給相關負責人。</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 負責人檢查過您提交的程式碼後,請到 Bugzilla 為該 bug 新增一個 keyword "checkin-needed",讓系統自動處理您的 pull request。現在就只要等候您的 pull request 被 merge,然後再前往 Bugzilla 將該 bug 的 status 變更為 RESOLVED FIXED,就完成囉。</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><span style="color: red;">如何測試 Firefox OS?</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> Firefox OS 的架構分為:Gonk > Gecko > Gaia。Gonk 是系統核心,以 Linux Kernel 為基礎。而 Gaia 則是 Firefox OS 的前端,完全採用 HTML、CSS、JavaScript 等網頁程式語言來撰寫。要測試 Firefox OS 最簡單的方法是直接在 Firefox 瀏覽器上模擬。您只要開啟 Firefox,點選右上角的開啟選單 > 開發者 > WebIDE,選擇一個 Runtime (若選單中未出現 Firefox OS,則需先安裝一個 Firefox OS 模擬器),就可以直接執行 Firefox OS 囉。</div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-5264335306582543692015-03-23T03:46:00.001+08:002016-08-21T22:13:38.800+08:0012.4 網頁設計學習地圖<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<span style="color: red;">背景知識:</span>資訊工程學系大學部的必修課。不管您是要開發哪種類型的程式,懂這些技術對您絕對是有幫助的!<br />
<ul>
<li><a href="http://www.cplusplus.com/reference/" target="_blank">C++</a> | <a href="http://docs.oracle.com/javase/8/docs/api/" target="_blank">Java</a> - 熟悉基本語法,並能夠實作常見的資料結構 (Data Structure) 與演算法 (Algorithm)</li>
</ul>
</div>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<span style="color: red;">基本技能:</span>身為網頁設計師或工程師不可不會的技術。<br />
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">HTML (Hypertext Markup Language)</a> - 包含最新版的 HTML5</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">CSS (Cascading Style Sheets)</a> - 包含最新版的 CSS3</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">JavaScript</a> - 包含對 DOM (Document Object Model) 進行操作</li>
</ul>
</div>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<span style="color: red;">前端開發:</span>如果您想往前端工程師發展,您可以鑽研以下技術。<br />
<ul>
<li><a href="http://jade-lang.com/" target="_blank">jade</a> | <a href="http://haml.info/" target="_blank">HAML (HTML Abstraction Markup Language)</a> - 幫助您撰寫更簡潔的 HTML 文件</li>
<li><a href="http://lesscss.org/" target="_blank">LESS</a> | <a href="http://sass-lang.com/" target="_blank">SASS</a> - 幫助您撰寫更簡潔的 CSS 文件</li>
<li><a href="http://livescript.net/" target="_blank">LiveScript</a> | <a href="http://coffeescript.org/" target="_blank">CoffeeScript</a> - 幫助您撰寫更簡潔的 JavaScript 程式碼</li>
<li><a href="http://jquery.com/" target="_blank">jQuery</a> - JavaScript 通用函式庫</li>
<li><a href="https://angularjs.org/" target="_blank">AngularJS</a> - JavaScript MVW (Model–View–Whatever) 框架</li>
<li><a href="https://facebook.github.io/react/" target="_blank">React</a> - JavaScript 使用者介面函式庫</li>
<li><a href="http://jshint.com/" target="_blank">JSHint</a> - JavaScript 程式碼分析工具</li>
<li><a href="https://developers.google.com/closure/compiler/" target="_blank">Closure Compiler</a> - 最佳化 JavaScript 程式碼</li>
<li><a href="http://semantic-ui.com/" target="_blank">Semantic UI</a> | <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> - 網頁開發框架,支援 Responsive Web Design</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG" target="_blank">SVG (Scalable Vector Graphics)</a> - 包含使用 SMIL (Synchronized Multimedia Integration Language) 繪製動畫</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/WebGL" target="_blank">WebGL (Web Graphics Library)</a> - 繪製網頁圖形的 JavaScript API</li>
</ul>
</div>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<span style="color: red;">後端開發:</span>如果您想往後端工程師發展,您可以鑽研以下技術。<br />
<ul>
<li><a href="http://php.net/" target="_blank">PHP (PHP: Hypertext Preprocessor)</a> - 伺服端程式語言</li>
<li><a href="http://dev.mysql.com/doc/refman/5.7/en/" target="_blank">MySQL</a> - 資料庫系統</li>
<li><a href="http://json.org/" target="_blank">JSON (JavaScript Object Notation)</a> - 搭配 AJAX (Asynchronous JavaScript and XML) 技術開發動態網頁</li>
<li><a href="https://developer.apple.com/library/mac/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html" target="_blank">MVC (Model–View–Controller)</a> - 軟體開發架構</li>
<li><a href="http://nodejs.org/" target="_blank">Node.js</a> - JavaScript 函式庫</li>
<li><a href="https://laravel.com/" target="_blank">Laravel</a> | <a href="http://www.codeigniter.com/" target="_blank">CodeIgniter</a> - PHP 網頁應用程式框架</li>
<li><a href="http://docs.oracle.com/javaee/7/api/" target="_blank">JavaServer Pages/Java Servlet</a> | <a href="http://rubyonrails.org/" target="_blank">Ruby on Rails</a> | <a href="https://www.python.org/" target="_blank">Python</a> - PHP (尤其是 PHP 7) 絕對是一套優秀的程式語言!然而,依據需求的不同,有時 PHP 可能不是您最好的解決方案,故您仍然有必要學習其他的伺服端程式語言</li>
</ul>
</div>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<span style="color: red;">其他技能:</span>能接觸就盡量多接觸吧!<br />
<ul>
<li><a href="http://www.getgnulinux.org/" target="_blank">GNU/Linux</a> - 熟悉基本的 Shell 指令,並能夠架設伺服器</li>
<li><a href="http://www.vim.org/" target="_blank">VIM (Vi IMproved)</a> | <a href="http://www.sublimetext.com/" target="_blank">Sublime Text</a> | <a href="https://www.jetbrains.com/phpstorm/" target="_blank">PhpStorm</a> - 編輯器與 IDE (Integrated Development Environment)</li>
<li><a href="http://git-scm.com/" target="_blank">Git</a> - 包含使用 GitHub 協作開發</li>
<li><a href="http://gulpjs.com/" target="_blank">gulp.js</a> - 自動化編譯流程</li>
</ul>
</div>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<i>註:本清單僅供參考。技術日新月異,這份清單並不完整,也永遠不可能變得完整。</i></div>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-9099835710850623022015-03-22T17:24:00.000+08:002016-08-21T21:02:30.572+08:0012.3 Sublime Text + mingw-w64 編譯器的 Build System 設定<div style="text-align: justify;">
<span style="font-family: georgia, times new roman, serif;"> 以下是筆者使用的 C (mingw-w64).sublime-build 設定檔,其中 </span><span style="font-family: Courier New, Courier, monospace;">path</span><span style="font-family: georgia, times new roman, serif;"> 是 mingw-w64 binary 的安裝路徑。由於 Windows 系統預設的文字介面 (Command-Line Interface, CLI),也就是命令提示字元 (CMD),是使用 Big5 編碼的,因此必需設定 </span><span style="font-family: Courier New, Courier, monospace;">encoding</span><span style="font-family: georgia, times new roman, serif;"> 為 </span><span style="font-family: Courier New, Courier, monospace;">big5</span><span style="font-family: georgia, times new roman, serif;">。</span></div>
<pre class="prettyprint">{
"path": "C:/Program Files/mingw-w64/x86_64-4.9.2-posix-seh-rt_v3-rev0/mingw64/bin",
"encoding": "big5",
"cmd": ["gcc.exe", "-Wall", "-static", "-static-libgcc", "$file", "-o",
"$file_base_name"]
}
</pre>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
以下是筆者使用的 C++ (mingw-w64).sublime-build 設定檔,規則同上。</div>
<pre class="prettyprint">{
"path": "C:/Program Files/mingw-w64/x86_64-4.9.2-posix-seh-rt_v3-rev0/mingw64/bin",
"encoding": "big5",
"cmd": ["g++.exe", "-Wall", "-static", "-static-libgcc", "-static-libstdc++",
"$file", "-o", "$file_base_name"]
}
</pre>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-22503700480007736492015-03-22T17:04:00.000+08:002016-08-21T19:58:30.055+08:0012.2 Sublime Text 常用套件<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 首先,先依照 <a href="https://packagecontrol.io/installation" target="_blank">此網站</a> 的說明安裝 Package Control,這是 Sublime Text 的套件管理工具 (Package Manager)。安裝完成後便可透過此工具輕鬆地安裝各項所需的套件。以下是筆者常用到的套件。</div><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> </span><span style="color: red; font-family: "georgia" , "times new roman" , serif;">ConvertToUTF8:</span><span style="font-family: "georgia" , "times new roman" , serif;">用於開啟 Big5 編碼的檔案。由於 Windows 至今繁體中文 (台灣) 的預設編碼仍然是 Big5,然而 Sublime Text 卻不支援 Big5 編碼,因此必需使用此套件才能正常開啟 Big5 編碼的檔案。也可用此套件來將 Big5 編碼的檔案轉存成 UTF-8 編碼。但是這個套件預設的中文編碼優先順序並不是 Big5 優先,因此安裝過後記得要修改它的設定檔,找到 </span><span style="font-family: "courier new" , "courier" , monospace;">encoding_list</span><span style="font-family: "georgia" , "times new roman" , serif;"> 的部份,改成:</span></div><pre class="prettyprint">"encoding_list" : [
["Chinese Traditional (BIG5)", "BIG5"],
["Chinese Simplified (GBK)", "GBK"],
["Japanese (CP932)", "CP932"],
["Japanese (Shift_JIS)", "Shift_JIS"],
["Japanese (EUC-JP)", "EUC-JP"],
["Korean (EUC-KR)", "EUC-KR"],
["UTF-8", "UTF-8"]
],
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">LESS:</span>使 Sublime Text 支援 LESS 的語法高亮 (Syntax Highlighting)。LESS 是一款十分好用的 CSS 預處理器 (Preprocessor),關於它的詳細說明可以參考 <a href="http://lesscss.org/" target="_blank">LESS 官方網站</a>。另外,筆者習慣使用的設定是:</div><pre class="prettyprint">"auto_insert_semicolon": true
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">SublimeLinter + SublimeLinter-jshint:</span>Sublime Text 的 JSHint plugin。JSHint 是個方便好用的 JavaScript 程式品質分析工具,關於它的詳細說明可以參考 <a href="http://jshint.com/" target="_blank">JSHint 官方網站</a>。在安裝這兩個套件之前,記得要先在您的電腦上安裝好 JSHint。</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">Verilog:</span>使 Sublime Text 支援 Verilog 的語法高亮 (Syntax Highlighting)。Verilog 是一款相當著名的硬體描述語言 (Hardware Description Language, HDL),相信從事數位電路設計的工程師們對它一定都不陌生。</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><i>補充:除此之外,筆者慣用的字型是 Inconsolata,它是一款相當受程式設計師歡迎的字型,您可以前往 <a href="http://www.levien.com/type/myfonts/inconsolata.html" target="_blank">這裡</a> 下載。</i></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><i>註:目前筆者已經改用 <a href="https://atom.io/" target="_blank">Atom</a> 編輯器。</i></div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-89393827387542391962015-03-22T16:26:00.000+08:002016-08-21T19:33:36.890+08:0012.1 W3C Validation Service 檢驗 HTML 與 CSS 程式的正確性<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> W3C 提供了方便的線上檢驗工具來檢查您的網頁語法是否符合 W3C 制定的標準。檢驗 HTML 與 XHTML 文件:<a href="http://validator.w3.org/" target="_blank">http://validator.w3.org/</a>。檢驗 CSS 文件:<a href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a>。通過檢驗後,該站會提供認證標示,您可以將它下載回去,放在您的頁面上。</div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-85756635658485185452015-03-17T14:00:00.000+08:002016-08-21T19:17:54.329+08:0011.6 檔案壓縮<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><span style="color: red;">建立壓縮檔:</span></div><pre class="prettyprint">$ tar cvfz output.tar.gz input_files
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> </span><span style="font-family: "courier new" , "courier" , monospace;">c</span><span style="font-family: "georgia" , "times new roman" , serif;"> 選項表示建立 tar 檔;</span><span style="font-family: "courier new" , "courier" , monospace;">v</span><span style="font-family: "georgia" , "times new roman" , serif;"> 選項表示使用 verbose 輸出;</span><span style="font-family: "courier new" , "courier" , monospace;">f</span><span style="font-family: "georgia" , "times new roman" , serif;"> 選項表示下一個參數為目標檔案名稱;</span><span style="font-family: "courier new" , "courier" , monospace;">z</span><span style="font-family: "georgia" , "times new roman" , serif;"> 選項表示使用 gzip 進行壓縮。</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><span style="color: red;">顯示檔案清單:</span></div><pre class="prettyprint">$ tar tvfz output.tar.gz
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> </span><span style="font-family: "courier new" , "courier" , monospace;">t</span><span style="font-family: "georgia" , "times new roman" , serif;"> 選項表示列出 tar 檔內的檔案;其餘選項說明同上。</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><span style="color: red;">解壓縮檔案:</span></div><pre class="prettyprint">$ tar xvfz output.tar.gz
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> </span><span style="font-family: "courier new" , "courier" , monospace;">x</span><span style="font-family: "georgia" , "times new roman" , serif;"> 選項表示解開 tar 檔;其餘選項說明同上。</span></div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-57965770553298316832015-03-17T13:00:00.000+08:002016-08-21T19:20:11.304+08:0011.5 安裝與設定 ZSH<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
Ubuntu 預設的 shell 是 bash,想在 Ubuntu (搭配 Gnome Terminal) 上使用 zsh,您可以參考以下步驟:</div>
<div style="text-align: justify;">
<ul>
<li style="font-family: georgia, "times new roman", serif;">安裝 zsh (透過 apt-get install 指令)</li>
<li style="font-family: georgia, "times new roman", serif;">將 zsh 設為您預設的 shell (透過 chsh 指令)</li>
<li style="font-family: georgia, "times new roman", serif;">下載並安裝 <a href="https://github.com/robbyrussell/oh-my-zsh" target="_blank">oh-my-zsh</a></li>
<li style="font-family: georgia, "times new roman", serif;">將 theme 變更為 agnoster (編輯 ~/.zshrc 設定檔)</li>
<li><span style="font-family: "georgia" , "times new roman" , serif;">在 ~/.zshrc 中加入 </span><span style="font-family: "courier new" , "courier" , monospace;">DEFAULT_USER="username"</span></li>
<li style="font-family: georgia, "times new roman", serif;">下載並安裝 <a href="https://github.com/powerline/fonts" target="_blank">Powerline-patched Fonts</a></li>
<li style="font-family: georgia, "times new roman", serif;">下載並安裝 <a href="https://github.com/seebi/dircolors-solarized" target="_blank">dircolors-solarized</a> (選擇 dircolors.ansi-dark)</li>
<li style="font-family: georgia, "times new roman", serif;">下載並安裝 <a href="https://github.com/Anthony25/gnome-terminal-colors-solarized" target="_blank">gnome-terminal-colors-solarized</a> (選擇 set_dark.sh)</li>
<li style="font-family: georgia, "times new roman", serif;">下載並安裝 <a href="https://github.com/altercation/vim-colors-solarized" target="_blank">vim-colors-solarized</a> (選擇 dark background)</li>
<li style="font-family: georgia, "times new roman", serif;">將 Gnome Terminal 的字體設為 Inconsolata for Powerline Medium 13</li>
<li style="font-family: georgia, "times new roman", serif;">取消選取 Gnome Terminal 設定中的「可使用粗體文字」</li>
</ul>
</div>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
完成後,您的 terminal 看起來應該像這樣:</div>
<img border="0" src="https://2.bp.blogspot.com/-FSmhuGKFoEM/VSFO88rSECI/AAAAAAAABnk/bU8kp7nv0ww/s640/demo.png" /><br />
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
<i>註:參考 ~/.zshrc 設定檔。</i></div>
<script src="https://gist.github.com/yuwen41200/91fbf46fd2778b8f937b2ccba3ec098b.js"></script>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-40183667540737051022015-03-16T02:42:00.000+08:002016-08-21T16:42:36.317+08:0011.4 robots.txt<div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> 在網站根目錄下撰寫一個 robots.txt 設定檔,可以禁止或允許搜尋引擎搜尋特定的目錄或檔案。最常用的指令包括 </span><span style="font-family: "courier new" , "courier" , monospace;">User-agent</span><span style="font-family: "georgia" , "times new roman" , serif;">、</span><span style="font-family: "courier new" , "courier" , monospace;">Disallow</span><span style="font-family: "georgia" , "times new roman" , serif;">、</span><span style="font-family: "courier new" , "courier" , monospace;">Allow</span><span style="font-family: "georgia" , "times new roman" , serif;">,語法是:</span></div><pre class="prettyprint">User-agent: 搜尋引擎名稱
Disallow: /禁止搜尋的目錄/
Allow: /允許搜尋的目錄/
User-agent: 搜尋引擎名稱
Disallow: /禁止搜尋的檔案
Allow: /允許搜尋的檔案
User-agent: 搜尋引擎名稱
Disallow: /禁止搜尋的目錄/禁止搜尋的檔案
Allow: /允許搜尋的目錄/允許搜尋的檔案
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">使用 robots.txt 的優點:</span>搜尋引擎往往會檢索並快取網路上的資料,尤其是 Google,擁有 <a href="http://en.wikipedia.org/wiki/Google_Search#Search_options" target="_blank">一套強大的搜尋指令</a>,可以讓破壞者輕易地找到網路上的個人資料或是具有安全性露洞的網站,這就是著名的 Google Hacking。因此我們可以使用 robots.txt 來防範搜尋引擎對隱密資料的收集。</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">使用 robots.txt 的缺點:</span>為了讓搜尋引擎能讀取 robots.txt,我們必需將這個檔案的權限設為公開。但這也意謂著任何人都看得到 robots.txt 裡的隱密資料清單,有心人士反而可以透過這個設定檔找出一些不該被公開的資料,因此只靠 robots.txt 來保障安全性絕對是不夠的。其他的缺點包括不具強制力 (只是主流搜尋引擎大都遵守這個規範),以及沒有一套正式的標準等等。</div><div style="text-align: justify;"><i><span style="font-family: "georgia" , "times new roman" , serif;">註:關於搜尋引擎的名稱,Google Search 搜尋引擎為 </span><span style="font-family: "courier new" , "courier" , monospace;">Googlebot</span><span style="font-family: "georgia" , "times new roman" , serif;">,而 </span><span style="font-family: "courier new" , "courier" , monospace;">*</span><span style="font-family: "georgia" , "times new roman" , serif;"> 則表示針對所有的搜尋引擎。</span></i></div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-50356771766907651192015-03-16T02:17:00.000+08:002016-08-21T18:21:07.047+08:0011.3 Apache 伺服器啟用 Module mod_userdir<div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">1. Enable module </span><span style="font-family: "courier new" , "courier" , monospace;">mod_userdir</span></div><pre class="prettyprint">$ sudo a2enmod userdir
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">2. Configure module </span><span style="font-family: "courier new" , "courier" , monospace;">mod_userdir</span></div><pre class="prettyprint">$ sudo vim /etc/apache2/mods-enabled/userdir.conf
<IfModule mod_userdir.c>
UserDir public_html
UserDir disabled root
<Directory /home/*/public_html>
AllowOverride FileInfo AuthConfig Limit Indexes
<span style="color: red; font-weight: bold;">Options MultiViews SymLinksIfOwnerMatch IncludesNoExec</span>
<Limit GET POST OPTIONS>
Order allow,deny
Allow from all
</Limit>
<LimitExcept GET POST OPTIONS>
Order deny,allow
Deny from all
</LimitExcept>
</Directory>
</IfModule>
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">3. Configure module </span><span style="font-family: "courier new" , "courier" , monospace;">mod_php5</span></div><pre class="prettyprint">$ sudo vim /etc/apache2/mods-enabled/php5.conf
<IfModule mod_php5.c>
<FilesMatch "\.ph(p3?|tml)$">
SetHandler application/x-httpd-php
</FilesMatch>
<FilesMatch "\.phps$">
SetHandler application/x-httpd-php-source
</FilesMatch>
# To reenable php in user directories comment the following
# lines (from <IfModule ...> to </IfModule>.) Do NOT set it
# to On as it prevents .htaccess files from disabling it.
<span style="color: red; font-weight: bold;">#<IfModule mod_userdir.c></span>
<span style="color: red; font-weight: bold;"># <Directory /home/*/public_html></span>
<span style="color: red; font-weight: bold;"># php_admin_value engine Off</span>
<span style="color: red; font-weight: bold;"># </Directory></span>
<span style="color: red; font-weight: bold;">#</IfModule></span>
</IfModule>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">4. Configure php.ini</div><pre class="prettyprint">$ sudo vim /etc/php5/apache2/php.ini
disable_functions = pcntl_alarm, pcntl_fork, pcntl_waitpid, pcntl_wait,
pcntl_wifexited, pcntl_wifstopped, pcntl_wifsignaled, pcntl_wexitstatus,
pcntl_wtermsig, pcntl_wstopsig, pcntl_signal, pcntl_signal_dispatch,
pcntl_get_last_error, pcntl_strerror, pcntl_sigprocmask, pcntl_sigwaitinfo,
pcntl_sigtimedwait, pcntl_exec, pcntl_getpriority, pcntl_setpriority, exec,
passthru, shell_exec, system, proc_open, popen, curl_exec, curl_multi_exec,
parse_ini_file, show_source, phpinfo
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">5. Restart service apache2</div><pre class="prettyprint">$ sudo service apache2 restart
</pre>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-41661018403718057382015-03-16T02:01:00.000+08:002016-08-21T16:29:50.876+08:0011.2 Apache 伺服器禁止特定目錄執行 PHP<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 一個完整的網站絕對少不了檔案上傳的功能,但開放上傳檔案卻也可能成為系統的安全性漏洞。對一個 LAMP 伺服器而言,常見的攻擊手法之一就是上傳 PHP 惡意程式碼,透過 PHP 程式來破壞系統或存取機密資料 (例如存放在 MySQL 資料庫裡的資料表等),因此禁止「存放上傳檔案的目錄」執行 PHP 程式是很重要的。</div><div style="text-align: justify;"><span style="font-family: Georgia, Times New Roman, serif;"> 「禁止特定目錄執行PHP」最簡單的做法就是直接在 Apache 伺服器的 Configuration File 裡針對該目錄設定 </span><span style="font-family: Courier New, Courier, monospace;">php_flag engine off</span><span style="font-family: Georgia, Times New Roman, serif;">。例如當網站根目錄為 </span><span style="font-family: Courier New, Courier, monospace;">/var/www</span><span style="font-family: Georgia, Times New Roman, serif;">,而存放上傳檔案的目錄為網站根目錄底下的 </span><span style="font-family: Courier New, Courier, monospace;">files/</span><span style="font-family: Georgia, Times New Roman, serif;"> 時,我們可以這樣設定,這麼一來這個目錄底下所有的 PHP 檔案都會改以直接下載的方式取代在伺服器上執行:</span></div><pre class="prettyprint"><Directory /var/www/files>
AllowOverride None
php_flag engine off
Order allow,deny
Allow from all
</Directory>
</pre>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-88946350886169344402015-03-16T01:24:00.000+08:002016-08-21T16:28:11.810+08:0011.1 在採用 UEFI 的電腦上安裝 Ubuntu Linux<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">UEFI 設置:</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">1. Launch CSM -> Enabled<br />
2. Launch PXE OpROM -> Enabled</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">備註:</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">1. 重新啟動後即可獲得所有的 Boot Option<br />
2. 若要安裝較新版本的 Ubuntu 不需關閉 Secure Boot<br />
3. Even if your PC boots the DVD in Legacy mode, it might boot the HDD in EFI mode (and the contrary)</div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">使用 Boot-Repair 解決 GRUB 試圖在 UEFI 上運行發生的錯誤:</span></div><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">1. Boot computer on a Ubuntu live-CD<br />
2. Choose "Try Ubuntu"<br />
3. Connect to the internet<br />
4. Open a terminal<br />
5. Type "</span><span style="font-family: "courier new" , "courier" , monospace;">sudo add-apt-repository ppa:yannubuntu/boot-repair && sudo apt-get update</span><span style="font-family: "georgia" , "times new roman" , serif;">"</span><br />
<span style="font-family: "georgia" , "times new roman" , serif;">6. Type "</span><span style="font-family: "courier new" , "courier" , monospace;">sudo apt-get install -y boot-repair && (boot-repair &)</span><span style="font-family: "georgia" , "times new roman" , serif;">"</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">Identify if the computer boots the HDD in EFI mode:</span></div><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">1. Open a terminal<br />
2. Type "</span><span style="font-family: "courier new" , "courier" , monospace;">[ -d /sys/firmware/efi ] && echo "EFI boot on HDD" || echo "Legacy boot on HDD"</span><span style="font-family: "georgia" , "times new roman" , serif;">"</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">Mount Windows 8 partition without turning off fast startup:</span></div><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;">1. Shutdown Windows 8 via CMD by entering "</span><span style="font-family: "courier new" , "courier" , monospace;">shutdown /f /s /t 0</span><span style="font-family: "georgia" , "times new roman" , serif;">"</span></div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-77818168385123917002015-03-12T21:38:00.001+08:002016-08-21T12:46:08.944+08:0010.11 其他應用<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">大量記錄的處理:</span>先將每個表單元素的名稱加上 [ ] ,使其成為陣列的形式,再為表單元素加上迴圈以重複各個欄位。最後將 MySQL 指令也搭配迴圈執行,即可一次完成多筆記錄的處理。以下是一個簡單的範例。</div><pre class="prettyprint"><?php
define('RECORD_NUM', '5');
if (isset($_POST['column1'])) {
for ($i = 0; $i < RECORD_NUM; $i++) {
echo '<p>'.$_POST['column1'][$i].'&nbsp;';
echo $_POST['column2'][$i].'</p>';
}
}
?>
</pre><pre class="prettyprint"><form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<?php for ($i = 0; $i < RECORD_NUM; $i++) { ?>
<p><input type="text" name="column1[]"/></p>
<p><input type="text" name="column2[]"/></p>
<?php } ?>
<p><input type="submit" value="Submit"/></p>
</form>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">顯示錯誤訊息:</span>為了安全考量,我們通常會設定伺服器隱藏所有錯誤訊息。但是如果您還在開發階段,需要藉助錯誤訊息來除錯,可以透過以下方式快速地設定伺服器顯示錯誤訊息。</div><pre class="prettyprint"><?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
?>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> <span style="color: red;">結語:</span>我們現在談的都是一些關於文字的處理,將文字寫入 MySQL 資料庫中管理。但很多時候,我們要處理的不是文字,而是圖片或其他檔案,將其存入資料夾中管理,網路相簿即為一例。這時便牽扯到檔案的上傳與下載、檔案格式判斷、檔案的移動與刪除等等,這些都是值得您用心鑽研的。(要開發網路箱簿可能還需要用到 PHP 的 <a href="http://php.net/manual/en/book.image.php" target="_blank">GD 函式庫</a>) 如果您想開發大型網站,也建議您學習 Model–View–Controller (MVC) 等軟體開發架構,並使用一些 PHP Framework 來開發您的網站。甚至您也可以試著自己寫一套 PHP Framework,很多大型網站都是自己寫 Framework 的!</div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-90881537186632577642015-03-12T20:37:00.002+08:002016-08-21T11:50:06.238+08:0010.10 使用 PHP 程式寄信<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 假設我們已經建立好一個表單,擁有 email、name、school、birth、note 等欄位,我們可以使用以下方法寄信:</div><pre class="prettyprint"><?php
if (!preg_match('/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i',
$_POST['email']))
die('電子郵件信箱無效');
foreach ($_POST as $key => $value)
$_POST[$key] = htmlentities
((string) $_POST[$key], ENT_QUOTES, 'UTF-8');
$_POST['note'] = nl2br($_POST['note']);
$to = $_POST['email'];
$subject = '=?UTF-8?B?'.base64_encode('網站通知信').'?=';
$body = <<<MESSAGE
<!DOCTYPE html>\r\n
<html>\r\n
<head>\r\n
<style type='text/css'>\r\n
table {\r\n
border-collapse: collapse;\r\n
}\r\n
td {\r\n
border: 1px solid black;\r\n
white-space: nowrap;
}\r\n
td:first-child {\r\n
width: 120px;\r\n
}\r\n
</style>\r\n
</head>\r\n
<body>\r\n
<p>我們已經收到您的資料囉!您填寫的資料如下:</p>\r\n
<table>\r\n
<tr><td>姓名</td><td>$_POST[name]</td></tr>\r\n
<tr><td>學校</td><td>$_POST[school]</td></tr>\r\n
<tr><td>生日</td><td>$_POST[birth]</td></tr>\r\n
<tr><td>備註</td><td>$_POST[note]</td></tr>\r\n
</table>\r\n
<p>本郵件由系統自動寄出,請勿回覆。</p>\r\n
</body>\r\n
</html>\r\n
MESSAGE;
$header = "MIME-Version: 1.0\r\n".
"Content-type: text/html; charset=utf-8\r\n";
mail($to, $subject, $body, $header);
?>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 當然,在這之前,別忘了先安裝簡單郵件傳輸協議 (Simple Mail Transfer Protocol, SMTP) 伺服器,如此才能將信件順利寄出哦!</div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-72401859550153143932015-03-12T19:59:00.000+08:002016-08-21T11:45:45.318+08:0010.9 會員登出<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 會員登出的實作非常簡單。我們已經準備好 logout.php 的表單了,以下是它的程式碼,請跟著本文的指示操作:</div><pre class="prettyprint"><form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<p>使用者&nbsp;<?php echo $_SESSION['LoginUser']; ?>&nbsp;已登入</p>
<input type="submit" value="登出"/>
<input type="hidden" name="Logout" value="true"/>
</form>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 請在網頁原始碼的最上端加入以下程式碼。</div><pre class="prettyprint"><?php
session_start();
if (isset($_POST['Logout']) && $_POST['Logout'] == "true") {
unset($_SESSION['LoginUser']);
header("Refresh: 0; url=index.php");
exit;
}
?>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><span style="color: red;">補充:</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 很多重視安全性的網站都會將使用者的密碼使用某種加密演算法加密。這些加密演算法通常是不可逆的,因此就算有任何人竊取了經過加密的密碼,也不容易將它還原成原始的字串。</div><div style="text-align: justify;"><span style="font-family: Georgia, Times New Roman, serif;"> 想將密碼或其他字串加密,最簡單又有效的方式是使用 PHP 的 </span><a href="http://php.net/manual/en/function.password-hash.php" target="_blank"><span style="font-family: Courier New, Courier, monospace;">password_hash()</span></a><span style="font-family: Georgia, Times New Roman, serif;"> 與 </span><a href="http://php.net/manual/en/function.password-verify.php" target="_blank"><span style="font-family: Courier New, Courier, monospace;">password_verify()</span></a><span style="font-family: Georgia, Times New Roman, serif;"> 函式,詳細的使用說明請參閱以上 PHP 說明文件。</span></div><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 將密碼使用不可逆加密的缺點是:一旦使用者忘記自己的密碼,資料庫裡也沒有儲存他原始的密碼,因此我們就只能寄認證信到他註冊時填寫的電子郵件信箱,然後再請他重新設定新的密碼了。</div>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-29943169370258673512015-03-12T03:05:00.003+08:002016-08-21T11:39:08.838+08:0010.8 會員登入<div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> 會員登入的功能其實是使用 </span><span style="font-family: "courier new" , "courier" , monospace;">SELECT</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令搭配 </span><span style="font-family: "courier new" , "courier" , monospace;">WHERE</span><span style="font-family: "georgia" , "times new roman" , serif;"> 子句去查詢資料表裡是否有與輸入的帳號和密碼相同的記錄,若有,則登入成功,並使用一個或多個 SESSION 來記錄使用者名稱、權限…等等,相對的,若查詢不到,表示帳號或密碼有誤,登入失敗。我們已經準備好 login.php 的表單了,以下是它的程式碼,請跟著本文的指示操作:</span></div><pre class="prettyprint"><form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<table>
<tr><td colspan="2">會員登入</td></tr>
<tr><td>帳號</td><td><input type="text" name="Username"/></td></tr>
<tr><td>密碼</td><td><input type="password" name="Password"/>
</td></tr>
<tr><td colspan="2"><input type="submit" value="登入"/></td></tr>
</table>
</form>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 請在網頁原始碼的最上端加入以下程式碼。</div><pre class="prettyprint"><?php
if (isset($_POST['Username'])) {
foreach ($_POST as $value)
if (empty($value))
die('<p style="color: red;">請填寫所有欄位</p>');
require_once 'lib_mysql.php';
$db = new Mysql;
$db -> init('localhost', 'root', 'root', 'web_announce', '',
'utf8mb4_general_ci');
$value = $db -> checkValues($_POST);
$value = "uUsername=$value[Username] AND
uPassword=$value[Password]";
$result = $db -> select('*', 'user', $value);
if ($result -> num_rows) {
$result -> free();
session_start();
session_regenerate_id(true);
$_SESSION['LoginUser'] = $_POST['Username'];
header("Refresh: 0; url=index.php");
exit;
}
else {
$result -> free();
header("Refresh: 0; url=$_SERVER[REQUEST_URI]");
exit;
}
}
?>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"><i><span style="color: red;">思考:如何作出會員分級制度,僅讓已登入的使用者發佈、編輯、刪除訊息?</span><br />
參考解答:在網頁程式的一開始,先判斷登入狀態,若未登入則跳轉至登入頁面。</i></div><pre class="prettyprint"><?php
session_start();
if (!isset($_SESSION['LoginUser']) || $_SESSION['LoginUser'] == "") {
header("Refresh: 0; url=login.php");
exit;
}
?>
</pre>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-52287244460263619642015-03-12T02:30:00.000+08:002016-08-21T11:33:40.214+08:0010.7 刪除記錄<div style="text-align: justify;"><span style="font-family: georgia, times new roman, serif;"> 刪除記錄的程式碼非常簡單,只要使用 </span><span style="font-family: Courier New, Courier, monospace;">DELETE</span><span style="font-family: georgia, times new roman, serif;"> 指令搭配 URL 參數篩選並刪除資料即可。請建立一個 delete.php 的檔案,輸入以下內容。</span></div><pre class="prettyprint"><?php
if (isset($_GET['id']) && $_GET['id'] != "") {
require_once 'lib_mysql.php';
$db = new Mysql;
$db -> init('localhost', 'root', 'root', 'web_announce', '',
'utf8mb4_general_ci');
$index = intval($_GET['id']);
$result = $db -> delete('news', "nIndex=$index");
}
header("Refresh: 0; url=index.php");
exit;
?>
</pre>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-46749257976898952462015-03-12T02:23:00.001+08:002016-08-20T22:59:15.740+08:0010.6 更新記錄<div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> 更新記錄會同時用到 </span><span style="font-family: "courier new" , "courier" , monospace;">UPDATE</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令與 </span><span style="font-family: "courier new" , "courier" , monospace;">SELECT</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令,請先開啟 detail.php,我們要為輸出標題的那個儲存格加上動態連結。</span></div><pre class="prettyprint"><td><?php echo $row['nTitle']; ?>
&nbsp;[<a href="edit.php?id=<?php echo $row['nIndex']; ?>">編輯</a>]
&nbsp;[<a href="delete.php?id=<?php echo $row['nIndex']; ?>">刪除</a>]
</td>
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> 接著就能開始撰寫 edit.php 的 PHP 程式碼了,我們要先用 </span><span style="font-family: "courier new" , "courier" , monospace;">SELECT</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令搭配 URL 參數篩選並建立資料集,再用 </span><span style="font-family: "courier new" , "courier" , monospace;">UPDATE</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令更新記錄。我們已經準備好 edit.php 的表單了,以下是它的程式碼,請跟著本文的指示操作:</span></div><pre class="prettyprint"><form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<table>
<tr><td colspan="2">編輯訊息<input type="hidden" name="Index"/>
</td></tr>
<tr><td>標題</td><td><input type="text" name="Title"/></td></tr>
<tr><td>作者</td><td><input type="text" name="Name"/></td></tr>
<tr><td>內容</td><td><textarea name="Content"></textarea></td></tr>
<tr><td colspan="2"><input type="submit" value="更新"/></td></tr>
</table>
</form>
</pre><div style="text-align: justify;"><span style="font-family: "georgia" , "times new roman" , serif;"> 我們要為 edit.php 加入 </span><span style="font-family: "courier new" , "courier" , monospace;">SELECT</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令與 </span><span style="font-family: "courier new" , "courier" , monospace;">UPDATE</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令,並修改網頁的 HTML 程式碼,完成後如下所示。我們將主鍵值儲存在隱藏欄位「Index」裡,提供 </span><span style="font-family: "courier new" , "courier" , monospace;">UPDATE</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令的 </span><span style="font-family: "courier new" , "courier" , monospace;">WHERE</span><span style="font-family: "georgia" , "times new roman" , serif;"> 子句使用。</span></div><pre class="prettyprint"><?php
require_once 'lib_mysql.php';
$db = new Mysql;
$db -> init('localhost', 'root', 'root', 'web_announce', '',
'utf8mb4_general_ci');
if (isset($_POST['Index'])) {
foreach ($_POST as $value)
if (empty($value))
die('<p style="color: red;">請填寫所有欄位</p>');
$value = $db -> checkValues($_POST);
$value = "nTitle=$value[Title], nName=$value[Name],
nContent=$value[Content]";
$db -> update('news', $value, "nIndex=$value[Index]");
header("Refresh: 0; url=index.php");
exit;
}
$index = isset($_GET['id']) ? intval($_GET['id']) : -1;
$result = $db -> select('*', 'news', "nIndex=$index");
?>
</pre><pre class="prettyprint"><?php $row = $result -> fetch_assoc(); ?>
<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<table>
<tr><td colspan="2">編輯訊息
<input type="hidden" name="Index"
value="<?php echo $row['nIndex']; ?>"/></td></tr>
<tr><td>標題</td>
<td><input type="text" name="Title"
value="<?php echo $row['nTitle']; ?>"/></td></tr>
<tr><td>作者</td>
<td><input type="text" name="Name"
value="<?php echo $row['nName']; ?>"/></td></tr>
<tr><td>內容</td>
<td><textarea name="Content"><?php echo $row['nContent']; ?>
</textarea></td></tr>
<tr><td colspan="2"><input type="submit" value="更新"/></td></tr>
</table>
</form>
<?php $result -> free(); ?>
</pre>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-92023572084232450372015-03-12T01:21:00.004+08:002016-08-20T22:47:06.749+08:0010.5 動態連結<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
現在我們要做的是能檢視訊息詳細資訊的 detail.php,它是透過 URL 參數來篩選資料的。請先開啟 index.php,為輸出標題的那格儲存格加上動態連結。</div>
<pre class="prettyprint"><td><a href="detail.php?id=<?php echo $row['nIndex']; ?>">
<?php echo $row['nTitle']; ?></a></td>
</pre>
<div style="text-align: justify;">
<span style="font-family: georgia, times new roman, serif;"> 接著就能開始撰寫 detail.php 的 PHP 程式碼了。這部份和剛剛一樣都是使用 </span><span style="font-family: Courier New, Courier, monospace;">SELECT</span><span style="font-family: georgia, times new roman, serif;"> 指令建立資料集,只不過要多使用 </span><span style="font-family: Courier New, Courier, monospace;">WHERE</span><span style="font-family: georgia, times new roman, serif;"> 增加一個篩選條件而已。我們已經準備好 detail.php 的表格了,以下是它的 HTML,請跟著本文的指示操作:</span></div>
<pre class="prettyprint"><table>
<tr><td colspan="2">查看詳細訊息</td></tr>
<tr><td>標題</td><td>&nbsp;[編輯]&nbsp;[刪除]</td></tr>
<tr><td>時間</td><td></td></tr>
<tr><td>作者</td><td></td></tr>
<tr><td>內容</td><td></td></tr>
</table>
</pre>
<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
請在網頁原始碼的最上端加入以下程式碼,以建立資料集。</div>
<pre class="prettyprint"><?php
require_once 'lib_mysql.php';
$db = new Mysql;
$db -> init('localhost', 'root', 'root', 'web_announce', '',
'utf8mb4_general_ci');
$index = isset($_GET['id']) ? intval($_GET['id']) : -1;
$result = $db -> select('*', 'news', "nIndex=$index");
?>
</pre>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"> 接著請如下修改網頁的 HTML。多行文字欄位中的換行會以 </span><span style="font-family: "courier new" , "courier" , monospace;">\n</span><span style="font-family: "georgia" , "times new roman" , serif;"> 字元儲存在資料庫中,因此需使用 </span><span style="font-family: "courier new" , "courier" , monospace;">nl2br()</span><span style="font-family: "georgia" , "times new roman" , serif;"> 函式將 </span><span style="font-family: "courier new" , "courier" , monospace;">\n</span><span style="font-family: "georgia" , "times new roman" , serif;"> 字元轉換為 </span><span style="font-family: "courier new" , "courier" , monospace;"><br></span><span style="font-family: "georgia" , "times new roman" , serif;"> HTML 標籤。nl2br 就是 New Line to BR 的意思。</span></div>
<pre class="prettyprint"><?php $row = $result -> fetch_assoc(); ?>
<table>
<tr><td colspan="2">查看詳細訊息</td></tr>
<tr><td>標題</td><td><?php echo $row['nTitle']; ?>&nbsp;[編輯]&nbsp;
[刪除]</td></tr>
<tr><td>時間</td><td><?php
echo date('Y年m月d日 H時i分s秒 D', strtotime($row['nTime']));
?></td></tr>
<tr><td>作者</td><td><?php echo $row['nName']; ?></td></tr>
<tr><td>內容</td><td><?php echo nl2br($row['nContent']); ?>
</td></tr>
</table>
<?php $result -> free(); ?>
</pre>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-73176905710738214622015-03-05T01:40:00.000+08:002016-08-20T22:51:16.923+08:0010.4 建立資料集 (Recordset)<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;">
接下來建立資料集就比較簡單了,我們已經準備好 index.php 的表格了,以下是它的程式碼,請跟著本文的指示操作:</div>
<pre class="prettyprint"><table>
<tr><td colspan="3">最新訊息</td></tr>
<tr><td>標題</td><td>作者</td><td>時間</td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td colspan="3">共有&nbsp;&nbsp;筆訊息</td></tr>
</table>
</pre>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"> 藉由 MySQL 的 </span><span style="font-family: "courier new" , "courier" , monospace;">SELECT</span><span style="font-family: "georgia" , "times new roman" , serif;"> 指令取得的資料就稱為「資料集」,它是一個陣列,索引值就是資料表的欄位名稱,每執行一次 </span><span style="font-family: "courier new" , "courier" , monospace;">fetch_assoc()</span><span style="font-family: "georgia" , "times new roman" , serif;"> 就會傳回一筆記錄。請在網頁原始碼的最上端加入以下程式碼,以建立資料集。</span></div>
<pre class="prettyprint"><?php
require_once 'lib_mysql.php';
$db = new Mysql;
$db -> init('localhost', 'root', 'root', 'web_announce', '',
'utf8mb4_general_ci');
$result = $db -> select('*', 'news');
?>
</pre>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"> 接著我們要開始使用資料集,請如下修改網頁的 HTML。我們用 </span><span style="font-family: "courier new" , "courier" , monospace;">while</span><span style="font-family: "georgia" , "times new roman" , serif;"> 迴圈搭配 </span><span style="font-family: "courier new" , "courier" , monospace;">fetch_assoc()</span><span style="font-family: "georgia" , "times new roman" , serif;"> 以取得所有的記錄。</span><span style="font-family: "courier new" , "courier" , monospace;">date()</span><span style="font-family: "georgia" , "times new roman" , serif;"> 可以格式化任一特定的時間,第一個參數是指定格式,第二個參數是該時間點距離 1970 年 1 月 1 日 0 時 0 分 0 秒的秒數。我們用 </span><span style="font-family: "courier new" , "courier" , monospace;">strtotime()</span><span style="font-family: "georgia" , "times new roman" , serif;"> 將 MySQL 的 timestamp 資料型別轉換成距離 1970 年 1 月 1 日 0 時 0 分 0 秒的秒數。</span></div>
<pre class="prettyprint"><table>
<tr><td colspan="3">最新訊息</td></tr>
<tr><td>標題</td><td>作者</td><td>時間</td></tr>
<?php while ($row = $result -> fetch_assoc()) { ?>
<tr><td><?php echo $row['nTitle']; ?></td>
<td><?php echo $row['nName']; ?></td>
<td><?php echo date('M j Y g:i A', strtotime($row['nTime'])); ?>
</td></tr>
<?php } ?>
<tr><td colspan="3">
共有&nbsp;<?php echo $result -> num_rows; ?>&nbsp;筆訊息</td></tr>
</table>
<?php $result -> free(); ?>
</pre>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-42765982385302890052015-03-05T01:01:00.003+08:002016-08-20T21:58:52.713+08:0010.3 插入記錄<div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 我們已經準備好 add.php 的表單了,以下是它的程式碼:</div><pre class="prettyprint"><form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<table>
<tr><td colspan="2">發佈最新訊息</td></tr>
<tr><td>標題</td><td><input type="text" name="Title"/></td></tr>
<tr><td>作者</td><td><input type="text" name="Name"/></td></tr>
<tr><td>內容</td><td><textarea name="Content"></textarea></td></tr>
<tr><td colspan="2"><input type="submit" value="送出"/></td></tr>
</table>
</form>
</pre><div style="font-family: Georgia, Times New Roman, serif; text-align: justify;"> 請在這個網頁原始碼的最上端加入以下 PHP 程式碼:</div><pre class="prettyprint"><?php
if (isset($_POST['Title'])) {
foreach ($_POST as $value)
if (empty($value))
die('<p style="color: red;">請填寫所有欄位</p>');
require_once 'lib_mysql.php';
$db = new Mysql;
$db -> init('localhost', 'root', 'root', 'web_announce', '',
'utf8mb4_general_ci');
$value = $db -> checkValues($_POST);
$value = implode(', ', $value);
$db -> insert('news', 'nTitle, nName, nContent', $value);
header("Refresh: 0; url=index.php");
exit;
}
?>
</pre>Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.comtag:blogger.com,1999:blog-504534010691733120.post-26602911745712128352015-03-04T22:30:00.000+08:002016-08-28T01:50:50.601+08:0010.2 建立 MySQL 基本類別<div style="text-align: justify;">
<span style="font-family: georgia, times new roman, serif;"> 以下我們將使用 PHP 的 MySQLi (MySQL Improved Extension) MySQL API,您可以先使用 </span><span style="font-family: Courier New, Courier, monospace;">phpinfo()</span><span style="font-family: georgia, times new roman, serif;"> 檢查您的 PHP 伺服器是否已經配置了 MySQLi。MySQLi 提供了程序導向 (procedural) 與物件導向 (object-oriented) 兩種介面,為了幫助您將來開發大型專案,我們將全面採用物件導向的寫法。PHP 的物件導向有點類似 C++ 或 Java,但仍有些差異需要注意,例如 PHP 及 Java 的類別 (class) 皆不提供多重繼承 (multiple inheritance),不過卻擁有介面 (interface) 可以進行多重繼承,與 C++ 不同。關於 PHP 物件導向的語法,由於相似度高,在此不再多做敘述。另外,對於 MySQLi 的各個屬性 (field/property) 與方法 (method),也請您自行參閱 </span><a href="http://php.net/manual/en/book.mysqli.php" style="font-family: georgia, "times new roman", serif;" target="_blank">PHP 說明文件</a><span style="font-family: georgia, times new roman, serif;">,畢竟學會自己閱讀手冊 (manual) 或文件 (document/reference) 來尋找答案,是每個程式設計師必備的基本能力。</span></div>
<pre class="prettyprint"><?php
final class Mysql {
private $host = NULL;
private $usr = NULL;
private $pwd = NULL;
private $db = NULL;
private $conn_type = NULL;
private $charset = NULL;
public $conn = NULL;
public function init($_host, $_usr, $_pwd, $_db, $_conn_type,
$_charset) {
$this -> host = $_host;
$this -> usr = $_usr;
$this -> pwd = $_pwd;
$this -> db = $_db;
$this -> conn_type = $_conn_type;
$this -> charset = $_charset;
$this -> connect();
}
public function connect() {
$host_param = empty($this -> conn_type) ?
$this -> host : $this -> conn_type . $this -> host;
$this -> conn = new mysqli
($host_param, $this -> usr, $this -> pwd, $this -> db);
if ($this -> conn -> connect_error)
die('MySQL Error: ('.$this -> conn -> connect_errno.') '.
$this -> conn -> connect_error);
$this -> conn -> set_charset($this -> charset);
}
public function disconnect() {
$this -> conn -> close();
}
public function showDatabases() {
$result = $this -> conn -> query("SHOW DATABASES")
or die('MySQL Error: '.$this -> conn -> error);
$output = "<table><tr><td colspan='2'>All databases on the MySQL
server</td></tr>\n";
$count = 1;
while ($row = $result -> fetch_assoc()) {
$output .= "<tr><td>($count)</td>";
$output .= "<td>$row[Database]</td></tr>\n";
$count++;
}
$output .= "<tr><td colspan='2'>Total databases: $result->num_rows
</td></tr></table>\n";
$result -> free();
return $output;
}
public function showTables() {
$result = $this -> conn -> query("SHOW TABLES")
or die('MySQL Error: '.$this -> conn -> error);
$output = "<table><tr><td colspan='2'>All tables in database
'$this->db'</td></tr>\n";
$count = 1;
$column = "Tables_in_$this->db";
while ($row = $result -> fetch_assoc()) {
$output .= "<tr><td>($count)</td>";
$output .= "<td>$row[$column]</td></tr>\n";
$count++;
}
$output .= "<tr><td colspan='2'>Total tables: $result->num_rows
</td></tr></table>\n";
$result -> free();
return $output;
}
public function selectDatabase($new_db) {
$this -> conn -> select_db($new_db)
or die('MySQL Error: '.$this -> conn -> error);
$tihs -> db = $new_db;
}
public function describeTable($table) {
$query = "SHOW FULL COLUMNS FROM $table";
$result = $this -> conn -> query($query)
or die('MySQL Error: '.$this -> conn -> error);
$output = "<table><tr><td colspan='9'>Descriptions of table
'$table'</td></tr>\n";
$output .= "<tr><td>Field</td>";
$output .= "<td>Type</td>";
$output .= "<td>Collation</td>";
$output .= "<td>Null</td>";
$output .= "<td>Key</td>";
$output .= "<td>Default</td>";
$output .= "<td>Extra</td>";
$output .= "<td>Privileges</td>";
$output .= "<td>Comment</td></tr>\n";
while ($row = $result -> fetch_assoc()) {
$output .= "<tr><td>$row[Field]</td>";
$output .= "<td>$row[Type]</td>";
$output .= "<td>$row[Collation]</td>";
$output .= "<td>$row[Null]</td>";
$output .= "<td>$row[Key]</td>";
$output .= "<td>$row[Default]</td>";
$output .= "<td>$row[Extra]</td>";
$output .= "<td>$row[Privileges]</td>";
$output .= "<td>$row[Comment]</td></tr>\n";
}
$output .= "<tr><td colspan='9'>Total columns: $result->num_rows
</td></tr></table>\n";
$result -> free();
return $output;
}
public function select($column, $table, $condition = NULL,
$limitation = NULL, $order = NULL) {
$query = "SELECT $column FROM $table";
if ($condition)
$query .= " WHERE $condition";
if ($limitation)
$query .= " LIMIT $limitation";
if ($order)
$query .= " ORDER BY $order";
$result = $this -> conn -> query($query)
or die('MySQL Error: '.$this -> conn -> error);
return $result;
}
public function delete($table, $condition, $safe = TRUE) {
$query = "DELETE FROM $table WHERE $condition";
if ($safe)
$query .= " LIMIT 1";
$this -> conn -> query($query)
or die('MySQL Error: '.$this -> conn -> error);
}
public function insert($table, $column, $value) {
$query = "INSERT INTO $table ($column) VALUES ($value)";
$this -> conn -> query($query)
or die('MySQL Error: '.$this -> conn -> error);
}
public function update($table, $modification, $condition,
$safe = TRUE) {
$query = "UPDATE $table SET $modification WHERE $condition";
if ($safe)
$query .= " LIMIT 1";
$this -> conn -> query($query)
or die('MySQL Error: '.$this -> conn -> error);
}
public function query($query) {
$this -> conn -> query($query)
or die('MySQL Error: '.$this -> conn -> error);
}
public function checkValues($value_array) {
foreach ($value_array as $key => $value) {
$value_array[$key] = htmlentities
((string) $value_array[$key], ENT_QUOTES, 'UTF-8');
$value_array[$key] = $this -> conn -> real_escape_string
($value_array[$key]);
$value_array[$key] = ($value_array[$key] == "") ?
"NULL" : "'$value_array[$key]'";
}
return $value_array;
}
}
?>
</pre>
<div style="text-align: justify;">
<span style="font-family: "georgia" , "times new roman" , serif;"> 請將以上程式碼儲存為 lib_mysql.php,往後若要使用這個類別,只需使用 </span><span style="font-family: "courier new" , "courier" , monospace;">require_once 'lib_mysql.php';</span><span style="font-family: "georgia" , "times new roman" , serif;"> 即可將該檔案置入程式中。</span></div>
Yu-Wen Puhttp://www.blogger.com/profile/03639573501434882323noreply@blogger.com