Front End Web Development

HTML5 + CSS3 + JavaScript + jQuery + BootStrap + VueJS
面授 + 視像

Back End Web Development

PHP + MySQL + PayPal
面授 + 視像

課程目標

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

課程結構

Front-End Technologies - HTMLS + CSS3 + JavaScript + jQuery + BootStrap + VueJS

面授 + 視像

這部分課程以介面設計及互動技術為主，學員可利用HTML5 建立網頁介面結構，CSS 美化及風格化網頁，JavaScript 建立出不同的互動效果。亦會學習各種常用的 library 及 framework 去加速網站介面設計例如 jQuery, AngularJS, VueJS 及 Bootstrap。接著學習如何建立適合手機顯示的 mobile web 及如何將 mobile web透過適當工具如 Cordova 轉化為 mobile Apps。

Technology	Introduction
HTML5	HTML5是最新版本的HTML，可以準確描述出網頁的內容及外觀。HTML5利用JavaScript解決了瀏覽器兼容性的問題，並且引入多媒體及不同類型Tags增強結構及可讀性。
CSS3	CSS3 是一套美化網頁既語言，利用CSS我們可以加入不同的美化效果。例如背景圖畫、邊框、顏色、動畫效果及各種設計元素。
JavaScript	Javascript是運行於瀏覽器上的程式語言自從Google的v8引擎出現後,JavaScript的效能得到大大的提升令我們可以在網頁上創造出不同的互動效果。
jQuery	jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作，是目前最受歡迎的JavaScript函式庫。
BootStrap	BootStrap 是一套跨瀏覽器的CSS framework ，可快速製作出適合不同裝置及尺寸的回彈性網頁介面。
Node.JS	Node.JS是一個Javascript Server 或執行環境，令JavaScript獨立於瀏覽器外運作，可取替php等後台程式語言。
VueJS	VueJS 是漸進式JavaScript框架。利用組件設計(Component Design)來設計Web前端，是今年最流行的前端框架之一，為開發人員必須學習的新設計方式。

Back-End Technologies - PHP + MySQL + PayPal

面授 + 視像

這部分課程以後台資料庫及程式設計為主，學員可學習利用 MySQL建立資料庫系統，利用 PHP 作為與之資料庫互動的語言，設計出一個有 CRUD(Create,Read,Update,Delete)及保安功能的資訊系統。完成的系統更會上載至亞馬遜雲端系統 AWS 公開給大眾使用。

Technology	Introduction
PHP	PHP是一個應用範圍很廣的語言，特別是在網路程式開發方面。一般來說PHP大多在伺服器端執行，透過執行PHP的程式碼來產生網頁提供瀏覽器讀取。 PHP可以在許多的不同種的伺服器、作業系統、平台上執行，也可以和許多資料庫系統結合。
MySQL	MySQL 是一個開放源碼的關聯式資料庫管理系統，MySQL在過去由於性能高、成本低、可靠性好，已經成為最流行的開源數據庫，因此被廣泛地應用在 Internet上的中小型網站中。隨著MySQL的不斷成熟，它也逐漸用於更多大規模網站和應用，比如維基百科、Google和Facebook等網站。
PayPal	最流行的網上付款供應商，客戶可利用 PayPal account或者信用卡進行網上交易，商戶亦可登記成為 PayPal商人會員，建立網上付款機制。

面授或即時網上授課內容

共有6堂面授及1堂視像錄影。導師會帶領學員利用 BootStrap, jQuery, VueJS, PHP, MySQL 建立出完整的資訊系統，學員可藉著上堂時間發問及由導師協助解決技術上的疑難。

Front End (Live)

Using Bootstrap CSS library to style web page
Implement 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

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

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 (Live)

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

Back End (Live)

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

Back End (Live)

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

Front End + Back End Integration (Video)

Understanding PayPal payment gateway
Applying and registering the PayPal account
Use the front end to connect to PayPal
Use the back end to connect to PayPal
Debug the traffic flow to and from PayPal
Sending email to send the payment receipt
Applying the SSL to encrypt the data sending

其他資料

課程代碼: DES360202301
6 堂即場或網上面授課程(即場錄影) + 1堂視像錄影
額外20小時詳盡學習影片，由淺入深教學，另外加 7 堂即場錄影片段，合共38小時
學員可遙控學校的電腦進行實習，導師亦可即時作出指導
觀看時限為期12個月
課程費用:HK$4,900
16th June 2023 開始逢星期五 7:00pm - 9:30pm

課程報名(使用其他付款方式)

Enrollment Form for DES360202301

First Name *

Last Name *

Chinese Name

Gender *

Male

Female

Date of Birth *

Mobile Number *

Other Phone (if any)

Email *

Contact Address

Dannis Mok

who has rich experience in business web and apps system development and have over 20 years of teaching experience. He has great passion in learning and teaching new technologies and his teaching style is clear to point and can explain complex technologies in simple terms. He has delivered various workshops and classes for different corporate, government departments and local universities and is the principal lecturer for NCC Education and University of Greenwich. Besides BSc degree in IT, he also got a MBA, MSc in IT and MSc in Telecommunication degree.

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

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

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

登入戶口: demoeshop

登入密碼: demopass

Login

視像課程內容 (Extra)

共有8堂。導師會帶領學員利用 BootStrap, jQuery, VueJS, PHP, MySQL 建立出完整的資訊系統，學員可藉著上堂時間發問及由導師協助解決技術上的疑難。

Front End Technologies

Lesson 1 (Video):

HTML Basic Tags (Header, Hyperlink, Paragraph, Table, Image)
HTML Layout using DIV tags
CSS basic styling commands and cascading concepts
CSS ID and class concepts
CSS Box Model (Background and Border styling)
CSS Color schemes and Google fonts
CSS Float and Layout

Lesson 2 (Video):

CSS Menu bar makeup
JavaScript Basics and Functions
JavaScript Variables and Arrays
JavaScript If-Else and Looping control structures
DOM (Document Object Model) introduction
Interacting DOM by JavaScript

Lesson 3 (Video):

jQuery Basic Sytnax
Interacting DOM with jQuery
AJAX communication with Server by jQuery
Using AJAX to submit form and download JSON data
BootStrap Grid system for Responsive Web Design
BootStrap classes for building different Components
BootStrap for styling a form and table

Lesson 4 (Video):

Introduction of VueJS as next generation web design
VueJS Environment Setup
Understanding VueJS component and instance
Using Inline Styling and Directives
Method binding in VueJS
Routing for Single Page Application (SPA)

Back End Technologies

Lesson 1 (Video):

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

Lesson 2 (Video):

Review of Basic HTML5 tags and write a simple web page
Build a HTML5 form for user input
Review the difference between GET & POST data submission
Understanding server side programming
PHP Basics and Functions
PHP Variables and Arrays data structure
PHP If-Else and Switch Decision Making
PHP Looping control structure

Lesson 3 (Video):

MySQL Database Connection using PHP
Building Standard Web BackEnd System
Build a CRUD system - Adding a menu system
Build a CRUD system - Adding new records function
Adding the data validations to the form
Build a CRUD system - Listing records function
Image upload handling

Lesson 4 (Video):

Build a CRUD system - Searching records function
Build a CRUD system - Deleting records function
Build a CRUD system - Updating records function
Build a CRUD system - Login / Logout functions
Build a CRUD system - Authorization functions
Session for web security
Cookie for web personalization

Courses

Courses

Courses

Courses

Diploma in eShop Web System Development (Front End and Back End)

HTML5, CSS, JavaScript, jQuery, BootStrap, VueJS, PHP, MySQL, PayPal

課程介紹

Front End Web Development

Back End Web Development

課程目標

課程結構

面授或即時網上授課內容

Front End (Live)

Front End (Live)

Front End (Live)

Back End (Live)

Back End (Live)

Back End (Live)

Front End + Back End Integration (Video)

其他資料

Enrollment Form for DES360202301

Dannis Mok

相關專業認證

相關教學經驗

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

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

登入戶口: demoeshop

登入密碼: demopass

視像課程內容 (Extra)

Front End Technologies

Lesson 1 (Video):

Lesson 2 (Video):

Lesson 3 (Video):

Lesson 4 (Video):

Back End Technologies

Lesson 1 (Video):

Lesson 2 (Video):

Lesson 3 (Video):

Lesson 4 (Video):

FAQ 常問問題

More Questions?

Diploma in eShop Web System Development
(Front End and Back End)

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