Web Development

How to create Laravel project by using Valet

Step 1: Install environment
installation for Php 7.1
brew install homebrew/php/php71
or
installation for OS X install Php 7.1
curl -s https://php-osx.liip.ch/install.sh | bash -s 7.1

reference:
https://php-osx.liip.ch/

installation for Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install homebrew/php/php71
Update Homebrew
brew update

Composer

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

install Valet

composer global require laravel/valet

install laravel installer
composer global require "laravel/installer"

Step 2: Add Path to Terminal
echo $PATH
for running valet & composer installation
export PATH=/usr/local/php5/bin:$PATH
export PATH=$PATH:$HOME/.composer/vendor/bin

Step 3: Build up project
valet install
Go to folder you want, we suggest use Code (~/ is user home directory)
create a folder code under “User/”
input cd ~/code in terminal
cd ~/code
tell the plugin that you want to use code as the working path so that app.dev runs the program.
valet park
create a laravel project, naming it as “app”
laravel new app
running “app”
ping app.dev
secure the local domains by using terminal
valet secure

Bootstrap 4 Beta 正式出爐

由Twitter推特的程式員開發前端工具Bootstrap4終於發佈Beta版本。Bootstrap是一套為網頁開發而訂製的前端框架,最初由 Mark Otto 和 Jacob Thornton 製作命名為Twitter Blueprint。由於前端開發人編寫的風格因人而異,而且每次加載重覆的文檔費神失事。這班前端工程師製作了一套共享文檔,各自利用其開發前端網頁,亦便利了後端工程師的工作。簡單來說,這一套框架讓工作人員共享一套文檔,包括CSS (Cascading Style Sheets), JS(JavaScript),Ajax等文件,用來開發、傳閱、展示和匯報。程式員要需要下載一次和按時更新文件,便可離線工作,大大減少重覆加載的所耗費的資源和時間。而且線上傳閱時,透過CDN(Content delivery network)方法,數行代碼便可執行網頁,無疑方便整個項目由開發到匯報的時間。

自2015年4月宣佈發開,屈指一算已經2個年頭。

以下是這次Beta版本的撮要

  • CSS方面,正式融合Sass,棄守Less
  • 新版Grid system更具彈性。
  • 放棄IE8 & IE9 的支援 (終於放棄治療!!)
  • JS方面,整個JS插件重寫!
  • 重寫簡介文件,網站Document使用了algolia的設計 (多無關痛癢的改動) 。

Progressive Web App

Progressive Web App (PWA) is a term used to denote web apps that uses the latest web technologies. Progressive web apps are technically regular web pages (or websites) but can appear to the user like traditional applications or (native) mobile applications. This new application type attempts to combine features offered by most modern browsers with the benefits of mobile experience.

軟體概念MVC模式與SPA單頁應用淺談

現在的網頁技術發展愈來愈抽象化,大概是還原基本步。由最初能夠做到便足夠,到現在我們還會思考效能和擴展性。
MVC模式一在早在1979年代已提出的概念,用於軟體設計及運作。它就如一種三權分立的模式,大家互不統屬,從而獲得最佳效能。MVC代表了「模型」(Model)、「視圖」(View)和「控制器」(Controller)。這個理論是這樣運作的,網民一旦開啓網頁(或軟體),這時網民其實是發出一個請求,網站伺服器(或軟體)裏的「控制器」(Controller)便會傳達資訊給「模型」(Model),模型會更新資訊給「視圖」(View)。在這零點零零幾秒之間,View便會更新畫面,讓用家瀏覽。整個運算過程,由Controller在Model之間完成,前者被用家選擇和控制,後者則作為協調和規範的角色。

由於最初的網頁設計,例如一頁index.php或JSP當中,裏面包含HTML和一些運算式,這樣不太有利數式分工。HTML是一些基本表現式,但PHP等OOP程式涉及運算邏輯,兩者分離可以減少各自負擔,對於擴展和維修有很大幫助。此外Model還能分擔重覆的部分,讓View重覆使用,能夠減少重覆語句。

SPA是指「單頁應用程式」(Single-page Application)。意思是一個程序之中,以一個頁面處理大部分工作,減少網頁重新載入的部分,換句話說能減少網頁傳輸負擔從而加快瀏覽速度。SPA能夠以javascript完成,現在大多使用API和Ajax和JQuery等技術達到SPA效果。angularjs是由Google維護的一種框架技術,內裏包含了Ajax的技術,可惜速度和第一版的設計被人垢病,現在angularjs已出版了第2版,幾乎重寫了整套框架語法,其陡削的學習曲線亦令不少程序猿卻步。

數據管理101之Data Analysis基礎概念(上)——Entity Relationship Diagram(ERD)與Relational Database Management System(RDBMS)

數據管理的應用需要數據分析員處理和釐清邏輯關係。這裏要介紹一種概念技術和其作者——美籍華裔的陳品山(Peter P.S Chen)。

所謂數據只是一種的紀錄和資料,在未被處理的情況下,它只是一堆文字或檔案。在商業世界裏,數據可以說是一本天書,它能為目標導向的商業組織作出指導,當然前提是數據能被有效收集、統計和分析(這裏是三個完全不同而又缺一不可的步驟)。但在電腦應用範疇裏,我們是以如何分析呢?我們明白電腦應用其實依賴以數學式的邏輯作為語言基礎。那麼數據管理或數據分析,實際上的操作是根據什麼呢?現在的商業機構,會聘用數據分析員(Data analyst)處理數據,那個系統叫數據庫或資料庫,或者稱為「資料庫管理系統(Database management system, DBMS)」。除了電腦科學(Computer Science)外,這些分析員所學習的是「數據模型」(Data Model)理論,例如層次模型(Hierarchical model)、網狀(Network model)、關聯模型(Relational model)、鑽型(Dimensional model)和ER模型,ER模型即ERD。

Entity-Relationship Diagram(ERD)

Entity-Relationship Diagram(ERD)是一種著名的數據模式理論,現在大多軟體開發都會應用這個數據開發模式概念。運用Entity-Relationship Diagram(ERD),能夠視覺化數據個體(Entity)和它們之間的關係(Relationship)及其屬性(Attributes),用來規劃數據結構。換句話說,這個理論有助將現實世界的抽象資訊轉換為數據,讓分析員能夠量化及統計。ERD的視覺化邏輯亦有利數據分析員檢視、統計和管理。在規劃數據管理上,會將不同類型的數據分類,我們叫作邏輯設計(Logical design);在實踐和製作數據庫/資料庫上,稱為物理數據庫設計(Physical database design)。

ERD,我們可譯為「實體關係模組」。在1976年3月,台灣國立台灣大學電機工程學系畢業的陳品山,在ACM Transactions on Database Systems上發表了《The Entity-Relationship Model–Toward a Unified View of Data》一文。由於大眾廣泛使用實體聯繫模型,而這篇文章已成為計算機科學38篇被廣泛引用的論文中之一。他已被譽為全球最具軟體開發技術的16位科學家之一。早在1968年,IBM的推出一種產品IMS(Information Management System, IMS),它使用的是層次模型,一種樹型結構的數據模式。1970年,Edgar Frank Codd提出關聯式資料庫(Relational model),藉助於集合代數(Set)等數學概念來建立數據之間的關係。Edgar F.Codd在IBM工作期間提出的「科德十二定律」(Codd’s 12 rules)來建立數據模型的理論,它是ERD概念的先驅。後來更有EERD(Enhanced Enitity Relatioship Diagram)是ERD的進階加強版,加入其他進階術語。

ERD基本分為三大基本部分,實體(Entity)、屬性(Attribute)、關係(Relationship)。長方形代表實體(Entity)、橢圓形代表屬性(Attribute)、菱形代表關係(Relationship)。例如部門和僱員都是一個實體;它們的關係是部門包括員工。

但是考慮到它們關係並不平等(僱員不會包含一個部門),因此我們需要另外兩組符號標示兩者關係。 (more…)

Build a Blog with Laravel 101

Laravel is an open-source PHP web framework created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern. The very first version was created in 2011. Back in those days, there were already several frameworks among the industry.

Some of the features of Laravel are a modular packaging system with a dedicated dependency manager, different ways for accessing relational databases, utilities that aid in application deployment and maintenance, and its orientation toward syntactic sugar. (more…)

the easiest hack, sql injection

最簡單的駭客方式——SQL植入

一次我在半島冰室用膳,在旁邊的客人,一個介乎脫髮的中青年對著三五位男女同事哈哈大笑道,「聽聞SQL被喻為掃地呀姐都能夠識寫既語言。」我初時想,程式員究竟有多輕視SQL?後來發現自己的想法都有點兒政治不正確(political incorrect)。只能說,他對 SQL 的讚美與他對掃地職業的尊重相稱。或許SQL對掃地姐姐來說十分容易上手,或是寫SQL的人都很腳踏實地「down to earth」,願意落手落腳(get hands dirty)。言歸正傳,所謂的SQL即是代表Structured Query Language。幾乎無程式員把SQL之為程式的語言,它就像是上網時候用來Search搜尋的格式,用來查詢數據庫的數據。就像上google 搜尋 “site:luke.hk Luke”,你只會屬到特定網址的資料一樣,是一種格式。
(more…)

macOS利用Terminal終端機內建伺服器——網頁編寫101

今次要介紹在蘋果電腦裏建立伺服器和網頁。這個教學快則需時5分鐘,如果你能順著完成,能夠證明你的智商絕不低於70,前提是你懂得基本中文和英文字母。如果你一早懂得建立伺服器,恐怕你不會讀到這裏。想了解程式詳情請參考基本的網頁程式簡介,WCMS101 – 網頁內容管理系統建設教學(上)。當完成本篇後,你會懂得什麼是「localhost」,再完成(上篇)和(下篇),你可以完全建立一個屬於自己的網站了而不需假手於人。那是以往價值數萬港元的架設技術,我的天。我們要需要一部蘋果電腦macOS和五分鐘時間。例如Mac mini,macbook等等。注意:其他產品如iphone、ipad、Apple watch、Apple pencil是不能夠做到的,所以麻瓜們請不要拿Apple pencil研究五分鐘。

在這個實踐裏,將介紹到一些Terminal一些基本用法,例如一些術語cd和ls的意思和作用,以及一些程序員的習慣,例如以“//”標示注腳。事不宜遲,寫一個內建的初階網頁十分容易,首先要了解什麼是網頁Website,在人類史上第一個使用Website的人是Tim Berners-Lee,相信大家都很清楚,那麼可以馬上開始。(開始計時)

Step 1:如何找到Terminal終端機

1.在桌面按launchpad:
2.找Terminal:
可以在螢幕最上的Search輸入Terminal,便可找到

Terminal是MacOS(Macintosh operating systems)裏的應用程式。它是透過指令(command line)執行功能。它的功能包括查看、管理檔案。就像是沒有介面的的Finder和Windows檔案總管(File Explorer)。這類程式還有其他稱呼:cmd, prompt, console 或是 terminal(終端機)。

Step 2:初階使用Terminal終端機

1.打開Terminal,它是一個由上至下看,由左至右讀的視窗。以下是第一次使用Terminal的範例:

Last login: Tue Feb 21 15:06:44 on ttys004

它顯示Last login(最後登錄):Tue(星期二) 21(日子) 15:06:44(小時:分:秒) on ttys001(終端機術語)。
2.

Luke:~ luke.hk$ 

Luke是你台電腦名稱, luke.hk是你登入帳戶的名稱。$後面是輸入指令(command line)的位置。
3.直面輸入以下文字,按[輸入]。

cd ~

cd(change directory)意思是轉移路徑,~意思是當前用戶home directory。
4.直接輸入以下文字,按[輸入]。ls意思是「列表」(List),Terminal會列出當前目錄所有檔案

ls

此時你會看見
Desktop、Download、Documents等等,它們是桌面、下載和文件的檔案夾
4.輸入cd Download/,可以去到「下載」

cd Download/

5.輸入ls,可以顯示「下載」夾下的檔案。

ls

6.cd ..是跳到前個的目錄,例子如下

cd ..

7.再次輸入ls,可以顯示再到Desktop桌面、Download下載、Documents文件等等的檔案夾

ls

方便小貼士:當你輸入cd Des後,按[tab],它會自動幫你填寫好Desktop,例如你當下有那個資料夾的話

cd Desktop

(more…)

WCMS101 – 網頁內容管理系統建設教學(上)

內容管理系統(Content-Management-System, CMS)目的是用於管理和處理數碼檔案,包括文字和圖片,亦用於群組軟體開發(Collaborative Software)。這些程式最初都是軟體software或內聯網Intranet的形式建立在操作系統(Operating System, OS)之上,大多用Java寫成。但是在千禧年後,隨著各種開源語言如Perl(1989), Python (1994), Php(1996), Ruby(1995)和互聯網硬件配套逐漸成熟,各種免費的開源內容系統應運而生,CMS變得更便利,能夠輕易地建立在一般主機之上,並在互聯網上公開使用。
(more…)

Back
Copy link
Add to
Email
Facebook
Whatsapp
Gmail
More
Save
Like
Cancel