2019年8月13日 星期二

在網頁中顯示HTML碼

以下是記錄在製作網頁時,怎樣在網頁中顯示程式碼:
使用工具有(1)Visual Studio Code(用作網頁編輯) , (2)code-prettify(使程式碼有顏色顯示,就像在IDE中的程式碼一樣)。
  1. 在VS code中開啟一個新的檔案(此以index.html 作記錄),並在編輯區輸入'html',此時VS code 會有一些選擇提供,請選擇'html:5',VS code就會自動把html的結構載入:
  2. 在HTML程式碼中加入欲顯示的程式碼,此處以<pre><code>...</code></pre>括着欲顯示之程式碼:
  3. 用瀏覽器打開剛剛的網頁,會發現欲想顯示的程式碼會被瀏覽器編譯出來:
  4. 現開始把欲想顯示的程式碼使用code-prettify加入顏色及使用VS code中的replace功能把程式碼顯示。
  5. 先Search 'code-prettify',GitHub網諳的那個google/code-prettify就對了:
  6. 在github中按Clone and Download ZIP:
  7. 儲存在與剛剛建立的網頁檔案中並解壓:
  8. 在GitHub的網站上有教怎樣使用code-prettify的,其實可以在不Download的情況下使用,但現在只是自行測試,所以download下來使用,根據指示,是要導入run_prettify.js的JavaScript檔案,並在<pre>中加入class="prettyprint":
  9. 由於run-prettify的檔案在自己的電腦內,所以src的path也要改改,在<head></head>內加入<script src="code-prettify-master/loader/run-prettify.js"></script>,並在<pre>加入class="prettyprint":
  10. 那顯示程式碼色彩的部份便完成,接下來是把html 碼的 '<' 轉成 '&lt;' 以讓瀏覽器不認定那些是html 標籤,做法是先把那段程式碼選起來:
  11. 再在VS Code 中選擇Edit > Replace :
  12. 先按下右手邊那3橫(Find in selection),再在左手邊的Find鍵入 '<', Replace 鍵入' &lt;'  :
  13. 之按下Replace那行最右手的那個鍵 Replace all :
  14. 此時所選的那段程式碼中的 '<' 己更換成 '&lt;' 了:
  15. 現在回到瀏覽器再重新載入測試頁,便會顯示那段程式碼了:
  16. 如想在顯示的程式碼中加入行號,只需要在<pre>中那多個class 'linenums' 便行:
  17. 儲存檔案後再重新載入測試頁:
~~ 完成 ~~
** 本文同時會張貼在rohole.com:  https://rohole.com **

2018年1月4日 星期四

Fedora 內安裝倉頡輸入法(粵語)

2018 第一post,近期重裝 Fedora, 重裝後更係要裝返個倉頡輸入法(其實我都好old school),其實依個問題一直都有人問,所以拍條片分享下個安裝過程.

 ps: Search 過關聯字真係好似無.



** 本文同時會張貼在rohole.com:  https://rohole.com **

2017年6月11日 星期日

香港的IT人

個多月前的GoBee.Bike共享單車保安問題的新聞令我認識(他不認識我)一名香港的IT人 - Gap撈Tech. Google下佢係何方神聖,見到佢網站內有好多技術文章,先致驚嘆原來香港係有人做依啲IT,open source嘢,因為我學寫program,遇到唔識都會上google,以中文黎講,都係揾到啲台灣同國內的文章,都無咩見到香港的,又證明咗我係幾咁井底.哈哈哈!

Gap撈Tech: https://blog.gaplotech.com/

AppAppDuck: http://www.appappduck.com/index.html

** 本文同時會張貼在rohole.com:  https://rohole.com **

2017年5月24日 星期三

PHP - scandir, foreach, is_dir, is_file, nested

近期工餘時間都忙於一個學習專案,因為想出一個自己想做的一個課題,慢慢將佢實現,而從中所學到的會比只看書所學到的會更多(
唔洗講都一定要用google),而我依家個學習專案係做一個有前後台的網站,無錯,就係好似wordpress咁有cms,當然我嗰個係超陽春(用wordpress做比喻,我自己都覺得過份咗,哈哈),做到一個可刪除檔案的頁面時又遇到問題,就係點樣可以將folder內的folder(sub-folder)內的檔案都可以找出來刪除呢,而又要去除其中的'.'與'..'(一點與兩點,代表自己directory及上一個directory),搞咗好耐,以下就分享下我嘅做法(這裡用顯示folder 或 file代替):
nested('../../../files/news');   //呼叫 nested 函式

function nested ($arg){   //開始 nested 函式
 $dir = scandir($arg);   //用 scandir() 把指定directory內的folder及file名以arry型式放入 $dir
 foreach ($dir as $value)   //用 foreach() 把array內的元素游走一次
 {
   if(($dir[0] == $value) || ($dir[1] == $value))   //去除 directory 內的 '.'與'..' 自己directory及上一個directory
     continue;
 
   if (is_dir($arg.'/'.$value))   //用 is_dir() 確定是否folder
   {
     echo $arg.'/'.$value." ---- is a folder<br>";   //如是folder,印出
     nested($arg.'/'.$value);   //如是folder,再呼叫函式自己以確定內裡(sub-folder)的是folder或file
   }
   elseif (is_file($arg.'/'.$value))   //用 is_file() 確定是否file
     echo $arg.'/'.$value." ---- is a file<br>";   //如是 file,印出
   else
     echo $arg.'/'.$value." ---- Not file or folder<br>";   //如不是folder或file(仲有咩?),印出
 }
}
當然,上返php官網都有好多勁人post咗好多example上去,但係對我黎講就有啲難理解,以下係相關網站:
ps. 如果在自己的Linux電腦測試,記得要留意permission問題,即係folder(777,755,...)果啲,要比apache server有寫入權限,而selinux亦都要設定嗰個folder可以被讀寫權限,我都搞咗幾日,以下係我參考的網站:

** 本文同時會張貼在rohole.com:  https://rohole.com **

2017年4月17日 星期一

PHP,MySQL,JavaScript入門好書介紹

 
圖片來源: http://lpmj.net/4thedition/


今次想介紹一本好書,就係O'Reilly出版,Robin Nixon寫嘅 "Learning PHP, MySQL, & JavaScript" 已經出到第四版,依本書可以話係我對PHP及MySQL網頁編程嘅啟蒙書,我係在公共圖書館借返黎的,當時係借中文譯版第二版,而點解我會覺得依本書係一本好書呢? 因為佢會由教用server開始,裝XAMMP(windows,Mac,Linux都有提點裝),介紹編輯器,PHP與MySQL的互動,當然仲有介紹JavaScript, Ajax, HTML5, CSS, JQuery等等,最重要佢有提一啲編程資安的資訊,跟住本書一步一步做到最後會做咗成個網站出黎(資質所限,我當然還沒有做到),所以一本咁全面嘅書係好值得介紹比想學及初學網頁編程嘅朋友們.當然我己經在灣仔電腦城二樓賣電腦書嗰間舖頭買咗第四版中譯本返屋企喇XD.

相關連結:
書本網站連結: http://lpmj.net/4thedition/

Amazon網站連結: https://www.amazon.com/gp/product/1491918667/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1491918667&linkCode=as2&tag=lephmyanja-20&linkId=EB4KF46RFKL4PXWM

博客來網站連結: http://www.books.com.tw/products/0010685274

** 本文同時會張貼在rohole.com:  https://rohole.com **

2017年4月4日 星期二

Godaddy hosting加入Let's Encrypt發行的certificate(https)

近期收到Let's Encrypt的電郵通知話我嘅cert就快到期,咁今日親有時間就動手搞搞自己個Rohole.com,在我兩個多月前申請使用Let's Encrypt時其實都搞咗成日,到今次更新張cert諗住有經驗會容易啲,但都搞咗幾個鐘(其實係自己唔記得點做啫XD),所以要係呢到做個記錄,同時又分享下我嘅做法:

 1) 去到Let's Encrypt 網站: https://letsencrypt.org/ 按下首頁中間大大隻字既Get Started,跟住就會見到建議使用Certbot


 2)入到去好簡單美觀嘅Certbot首頁,選擇Software係用Apache on Other Unix,跟住會有教在Shell中download certbot-auto及更改為可執行檔案。(ps. 因為我係用自己嘅蠢方法,將cert放在自己電腦再手動upload上godaddy,因為其他方法都唔識所以咁做XD)  

3)Download 咗certbot-auto及更改為可執行檔案之後,就可以用佢網站內documention 內既command,即係: $sudo ./certbot-auto certonly --manual(留意: manual前係兩個 - , copy 時會變成一個)跟住佢會叫你入domain,咁我就更係入rohole.com
   

4)再之後會Note你話個IP address會公開記錄咗話係要求過取得certificate,選Y:

( *** ps. cPanel就唔cap圖了 *** ) 

5)跟住就會要你確定server有個file,內裡有一串字,而我是用godaddy的linux server(最平嗰個),進入到cPanel後選擇“檔案管理員",跟住會彈咗個視窗出黎,選擇"Web Root (public_html)"及“顯視隱藏檔案 (名稱開頭是 . 的檔案)“ 

6)去到檔案管理員的版面,按下左上角"+資料夾",跟住shell(step 5)中的指示新增".well-known"資料夾(記得有一點係前面),後再double click".well-known" 再按 "+資料夾" 以新增 "acme-challenge"資料夾 

7)我自己用Fedora的,所以用gedit把shell(step 5)中所指示的那句約80多個英數字copy到gedit,存檔時記得file name是根據shell(step 5)的指引,即係那句約80多個英數字的開首約40多個英數字作為檔名 

8)回到cPanel中把剛剛的約40多個英數字作為檔名的檔案上傳到"acme-challenge"資料夾內 

9)又回到自己的shell(step 5)按Enter鍵,等一會就會Congratulations!你及說明幾時到期及張cert放在那裡

10)在shell中鍵入"su"(為方便直接用root身份)及輸入蜜碼,再鍵入"cd /etc/letsencrypt/archive",再鍵入"ll"(兩個L),會見到自己個domain,再鍵入"cd rohole.com"(當然係根據返自己個情況),進入自己domain個folder裡面,會見到4個file都係".pem"尾  

11)輸入"gedit cert.pem",佢會用gedit開個file出黎,內容就係certificate,按"Ctrl + a"張內容全選,再按"Ctrl + c" copy自選內容,再去到cPanel中的“安全性"中有"SSL/TLS"並按下  

12)在"安裝並管理網站的 SSL (HTTPS)" 下,按下 "管理 SSL 網站"

13)在"安裝 SSL 網站"下的網域選取需要安裝cert的domain

14)在“憑證:(CRT)"中貼上剛剛copy出來的certificate.(Step 11) 

15)關閉Step11的gedit後,再在shell中鍵入"gedit privkey.pem"以開啟私蜜金鑰,同樣的把內容全都copy 

16)又回到cPanel中,在入了Step14的"憑證:(CRT)"之下的"Private Key(KEY)"中貼上剛剛copy的privkey.pem的內容

 17)最後在cPanel的底部按下“安裝憑證”,等一會便成功裝好憑證。 相關網站: https://letsencrypt.org/ https://certbot.eff.org/ https://hk.godaddy.com/ 

PS: 其實網上有好多教學,有啲用windows攞cert,有啲會比較簡單,希望依編文都有啲啲啲啲參考價值 XDD。

 PS2:** 本文同時會張貼在rohole.com: https://rohole.com **

2017年3月21日 星期二

XAMPP 安裝簡介

之前上堂有同學對電腦不熟識,在安裝XAMPP遇到問題,所以嘗試拍片,由download 到 安裝 到 在瀏覽器開啟網頁的整個過程,本人亦是一名初學者,希望此片對其他初學者有啲啲啲啲參考作用,謝謝!

XAMPP網址: https://www.apachefriends.org/index.html
拍片軟件: https://www.ezvid.com/download
Text editor: https://atom.io/
Text editor: http://bluefish.openoffice.nl/index.html



** 本文同時會張貼在rohole.com:  https://rohole.com **