Diploma in Web System Development
(Front End + Back End)


PHP + NodeJS + MySQL + MongoDB + VueJS + ReactJS + Bootstrap

課程介紹

本課程將教授學員如何由零開始建立一個實用的 Web 網站系統, 系統具備登入登出功能、保安功能、上載檔案、建立紀錄、更改紀錄、搜尋紀錄及移除紀錄等功能。 能應用技術設計出不同的資訊系統,例如網頁管理系統、訂貨系統、倉存系統及記帳系統等等。 修畢課程後,學員可具備 Web 系統開發能力, 可以加強自己的競爭力並可以尋求新的出路。

課程特色:

  • 課程覆蓋現今 Web 最流行的開發方法
  • 同時學習兩大網站後台技術 (PHP + NodeJS)
  • 同時學習兩大資料庫平台 (MySQL + MongoDB)
  • 同時學習兩大前台開發框架 (ReactJS + VueJS)
  • 利用Bootstrap快速美化網站
  • 打好HTML + CSS + JavaScript基礎
  • 教授製作電子商務網站 (PayPal)
  • 教授製作會員登記系統 (Membership)
  • 能協助製作學位及文憑課程的 Project功課

上課模式

  • 集合了視像及面授課程的優點,學員可上堂問問題解決疑難 ,亦可重播片段重溫加深知識
  • 本課程有 9堂面授課程 + 9堂面授課程錄影
  • 另有 40小時輔助教學影片,以供學員自我進修之用
    • 4堂 (10小時) 前台技術課堂錄影 (jQuery + BootStrap + VueJS)
    • 4堂 (10小時) 後台技術課堂錄影 (PHP + MySQL)
    • 6堂 (15小時) 前後台技術課堂錄影 (ReactJS + MongoDB + NodeJS)
    • 3.5小時補充課堂錄影,詳細說明建立完整 Membership 系統並上傳到雲端 (Heroku) 的各個步驟及流程。
    • 2小時補充課堂錄影,詳細說明建立 eShop (PayPal) 的各個步驟及流程。

課程目標

       本課程適合需要學習 網站系統開發人士設,學員可同時學習前端和後端的程式開發, 由淺入深去理解前端和後端相關科技、前台技術主要涉及介面設計美化網站系統及如何作出不同的互動效果, 後台技術則以資料庫設計及程式設計為主。 學員可結合兩方面的技術建構出一個完整的資訊系統,例如POS系統,庫存系統,學校管理系統,人力資源系統等。

課程結構

Swift UI

PHP and Node.JS (Back End platform)

面授 + 視像

後台程式語言主要用作處理各式各樣的 Web request 及連接資料庫作出 CRUD 的運作 PHP是歷史悠久的後台語言覆蓋率廣泛 NodeJS 是較為新進的後台程式語言 優點是利用 Javascript在語言基礎 開發人員能用一套語言便可以開發前後台技術

TechnologyIntroduction
PHP PHP是一個應用範圍很廣的語言,特別是在網路程式開發方面。一般來說PHP大多在伺服器端執行,透過執行PHP的程式碼來產生網頁提供瀏覽器讀取。 PHP可以在許多的不同種的伺服器、作業系統、平台上執行,也可以和許多資料庫系統結合。
NodeJS NodeJS 是一個 Javascript 執行環境, 讓開發者可利用 Javascript開發後台系統。 使用者可以不再學習其他語言便可利用 Javascript一併開發前後台程式。 再配合強大的程式庫,可架構出任何種類的 Server 架構。
Kotlin

HTML5, CSS3, jQuery and BootStrap (Front End Technologies)

面授 + 視像

前台網頁的基礎是由 HTM5, CSS 及 Javascript所組成 為了加速開發 Javascript語言 我們可利用 jQuery程式傅協助 為了加快美化網站的速度及製作 Responsive 網站 我們可以了 BootStrap CSS Framework協助

TechnologyIntroduction
HTML5 HTML5是最新版本的HTML,可以準確描述出網頁的內容及外觀。HTML5利用JavaScript解決了瀏覽器兼容性的問題,並且引入多媒體及不同類型Tags增強結構及可讀性。
CSS3 CSS3 是一套美化網頁既語言,利用CSS我們可以加入不同的美化效果。例如背景圖畫、邊框、顏色、動畫效果及各種設計元素。
JavaScript Javascript是運行於瀏覽器上的程式語言 自從Google的v8引擎出現後,JavaScript的效能得到大大的提升 令我們可以在網頁上創造出不同的互動效果。
jQuery jQuery是一套跨瀏覽器的JavaScript函式庫,簡化HTML與JavaScript之間的操作,是目前最受歡迎的JavaScript函式庫。
BootStrap BootStrap 是一套跨瀏覽器的CSS framework ,可快速製作出適合不同裝置及尺寸的回彈性網頁介面。
sql

MySQL and MongoDB (Back End Database)

面授 + 視像

資料庫是所有網站的核心部分 傳統的關聯式資料庫 是以table為單位 學習設計資料庫及運用 SQL 語言是關鍵的一步 NOSQL 資料庫擺脫了傳統資料庫的限制 以document為儲存單位 更容易擴展及複製 是雲端服務常用的資料儲存方式

TechnologyIntroduction
MySQL MySQL 是一個開放源碼的關聯式資料庫管理系統,MySQL在過去由於性能高、成本低、可靠性好,已經成為最流行的開源數據庫,因此被廣泛地應用在 Internet上的中小型網站中。隨著MySQL的不斷成熟,它也逐漸用於更多大規模網站和應用,比如維基百科、Google和Facebook等網站。
MongoDB MongoDB 是一個以文件導向的資料庫架構, 開發者不用預先設定資料庫結構。使用者可隨意新增及刪除文件。 文件的格式亦可以隨意改變,適合大數據資料儲存。
Flutter

ReactJS vs VueJS (Front End JavaScript Framework)

面授 + 視像

為了使前台開發更有規模以及更容易管理 可以使用framework 熱門的有 ReactJS 及 VueJS 概念是將網頁切割成不同的 component 每個component包含自己的網頁內容 設計風格及相關程式碼 網站人員便可以輕鬆利用 component 組成不同的 website

TechnologyIntroduction
ReactJS ReactJS 是由 faceBook(Meta) 所開發的前端介面設計 Javascript工具庫, 是用介面組件(Components) 這觀念用來架構介面。 開發者可自行開發組件或利用已經建立的第三方組件用來建構網站, 是最先進的 Web design 技術及趨勢
VueJS VueJS 是漸進式JavaScript框架。 利用組件設計(Component Design)來設計Web前端, 是今年最流行的前端框架之一,為開發人員必須學習的新設計方式
HeroKu and Netify HeroKu (在Amazon AWS 上構建) 是一個用來安置各種後台系統的雲端服務而 Netify 是一個用來安置各種前台系統的雲端服務

時間表和其他資料

全新網上學習系統現正啟用, 學員可於網上報名,即時開展學習旅程。

如課程有面授課程部分可另行與職員聯絡安排上課時間。

學員可以以下示範戶口登入學習系統以瞭解更多內容

登入戶口: demoweb

登入密碼: demopass

Login

面授或即時網上授課內容

共有9堂, 學員可選擇親身到達課室上課, 或者在家遙控學校的電腦進行上課, 導師可以看到被遙控的電腦的狀況, 從了解學員的學習進度。 無論在學校或家裏的同學均可以發問問題, 導師會即時協助解決問題。

所有課堂均會有錄影, 學員可以在自己的個人戶口內重播上堂的錄影片段。 重播次數不限, 為期12個月。

Front End Web Technologies

Lesson 1: Front End (Live) (Live)

  • Using Bootstrap CSS library to style web page
  • mplement the web layout using Bootstrap griding system
  • Add styles and icons to the buttons
  • Build the dropdown menu system
  • Styling the forms and tables
  • Build the modal dialog to alert user
  • Create the image carousel using Bootstrap

Lesson 2: Front End (Live)

  • Understanding JavaScript ES6 Basics
  • JavaScript Variables and Constant
  • JavaScript Functions and Arrow functions
  • JavaScript If-Else Decision Making and Looping Control structure
  • JavaScript data structure (Array and Objects)
  • Using jQuery library to assist JavaScript development
  • Using localStorage for browser based storage

Lesson 3: Front End (Live)

  • Understanding Component based Web Design and VueJS framework
  • Using Node.JS to create VueJS project
  • Build responsive web page using VueJS directives
  • How to communicate with the backend using axios
  • Creating the reusable web components
  • Load and route the components using Vue router
  • Build a Single Page Application (SPA) using VueJS


Back End Web Technologies (PHP & MySQL)

Lesson 1 (Back End - PHP):

  • Environment Setup - Setup Apache Web Server, PHP Engine and MySQL Database
  • Create a MySQL database and design basic database table
  • Understanding Primary Key and Foreign Key Constriants
  • Select, Insert, Update and Delete data in the table
  • Draw the ER diagram for database design
  • One to One, One to Many and Many to Many relationships implementation
  • Table joining and building View for Query

Lesson 2 (Back End - PHP):

  • PHP Language Basics and Functions
  • PHP Variables and Arrays data structure
  • PHP If-Else Decision Making and Looping Control structure
  • Connecting MySQL Database Connection using PHP
  • Build a user registration form using POST and GET
  • Validate user data and responds with error messages
  • Build a image upload form for uploading image or files

Lesson 3 (Back End - PHP):

  • Design an eshop database using MySQL
  • Creating the shopping cart and the order tables
  • Adding and remove product to the shopping cart
  • Update product in the shopping cart
  • Build the user login system for authentication
  • Using Session and Cookies to implement secure pages


Back End Web Technologies (NodeJS & MongoDB)

Lesson 1 (Back End - NodeJS):

  • Installing NodeJS and create a new project
  • Create an Express Web server
  • Installing the Express web framework
  • Setup the static folder in Express
  • Receiving Data via Form POST and GET
  • Using Express routing to load different pages
  • Understanding MongoDB (NoSQL and document based)
  • Create and Drop the Database and Collections
  • Create Document using InsertOne and InsertMany
  • Query the Collection by using various operators

Lesson 2 (Back End - NodeJS):

  • Updating the document using Update, UpdateOne or UpdateMany
  • Deleting the document using DeleteOne or DeleteMany
  • Grouping the document using Aggregrate
  • Building the relationship using Embedded or Referenced Documents
  • Using NodeJS to connect MongoDB
  • Understanding the Mongoose packages for Object Data Modeling
  • Create the CRUD operations using Mongoose using NodeJS
  • Creating various controllers for CRUD
  • Introducing the Middleware concept and create the validation middleware
  • Indroducing the Session concept to implement security

Lesson 3 (Back End - NodeJS):

  • Create New React Project
  • Introducing React Component and JSX
  • Using map functions to render array and objects
  • Conditionally Rendering Components
  • Create State in Components using useState hook
  • Form Handling and stores values in Component state
  • Execute functions automatically using useEffect hook
  • Fetching remote using fetch and axios libraries
  • Understanding the concept of Promise object
  • Testing how to call the public remote API

視像課程內容

視像課程部分約有39小時,部分片段為其他班上堂的錄影片段,部分片段則是導師額外預先錄影的片段。 學員有充裕的時間去不斷重溫及重播相關技術課程片段,務求令自己掌握相關技術。

學員可以以下示範戶口登入學習系統以瞭解更多課程內容

登入戶口: demoweb

登入密碼: demopass

Card image cap
Live Recording of Front End Development with HTML5 + CSS3 + jQuery + BootStrap + VueJS

本部分是其他班別上前台網站開發的現場錄影片段,為期10小時共4堂。 內容由淺入深, 教授學員由基礎的 HTML 建立網頁架構, CSS 美化網頁及 Javascript 帶來互動性功能, 到使用 BootStrap 及 jQuery library協助加速網站開發, 到最後介紹新一代component-based design framework - AngularJS 及 VueJS 的使用作結。

約 10 小時
Card image cap
Live Recording of Back End Development with PHP & MySQL Database Development

本部分是其他班別上後台網站製作的現場錄影片段,為期10小時共4堂。 課程由淺入深,教授學員 MYSQL 資料庫設計,各種 SQL commands 的使用。 然後學習基礎 PHP 語法,設計表格傳輸資料給PHP,製作資料 Create Read Update Delete 以及上傳文件等功能, 到最後使用 Cookie 以及 Session 去建立帳戶及保安機制

約 10 小時
Card image cap
Live Recording of NodeJS + ReactJS + MongoDB System Development

本部分是其他班別上前台後台網站製作的現場錄影片段,為期15小時共6堂。 教授學員由基本 JavaScript 開始到慢慢了解 ReactJS的設計原則 , 學習如何建立不同種類的 Component 來建構前台網站。 亦會使用 NodeJS 及 ExpressJS 去逐步建立後台網站,透過 REST API 去讓 Component提供服務存 MongoDB 的資料庫

約 15 小時
Card image cap
NodeJS + MongoDB + ReactJS CRUD System Development

本部分是導師額外預先錄影的片段,為期3.5小時。 教授學員一步一步建立一個由 ReactJS, NodeJS, ExpressJS 以及 MongoDB 為核心的會員登記系統 , 系統具備完整的資料 Create/Read/Update/Delete功能。 最後更將MongoDB資料庫,NodeJS後台及 ReactJS前台三部分分別移上雲端服務 (Netify 及 Heroku),令系統能開放給大眾使用。

約 3.5 小時

FAQ 常問問題

我們只需有基本電腦操作能力便可。我們會假設學員只有基本電腦知識,所以會由基本的程式語言教起,學員可重複翻看片段去鞏固自己的知識

基本上用廣東話教學配以英文專有名詞

於課堂有錄影片段所以學員可重看片段便可補回進度。

在上堂時,導師會要求學員一起完成各種各類的電腦操作實驗。導師會與學員一起完成所有的實驗並解釋背後的原理。

學員需上課並達出席率80%便可獲得證書。

所有視像課程均有原始碼,學員可下載相關程式碼以便操作。

學員只需一部較為快的電腦便可安裝所有軟件,所有軟件都是免費的。電腦建議為i5或以上,越快越好。iPhone 的課程需要一部 MAC 機。

導師已有接近十年教授 Web / Apps 開發經驗。除了教授公開班外,亦為各大專院校及公私營機構開班教授相關課程, 例如教育學院、教育局、房屋署、香格里拉酒店。最近更獲強積金局採納電子教材為官方教學材料,質素有所保證。 。

上課時間由七時開始至9時45分。一星期上堂一天。上課地點則為佐敦地鐵站側的商業大廈,由地鐵站至本中心只需約步行數分鐘。

More Questions?