Register

IT專才培訓 - 技術與學術兼備

News
Professional Diploma in Apps, Wed, Cloud Development - Start on 26 Sept 2023 Big Data Analysis and Workflow Automation - Start on 28 Sept 2023
Education Images
  • Home
  • 職業培訓課程

Higher Certificate in Web System Development
(NodeJS + ReactJS + MongoDB + ExpressJS)

使用JavaScript一次開發網站系統前後台

NodeJS + Express + ReactJS + MongoDB + REST API

Over 1000 students
Sophia Jaymes
By Dannis Mok
  • Last updated 2023
  • Cantonese
  • CEF course
Card image

你會學到什麼 ?

本課程將由淺入深教授學員利用 Javascript 建立全功能的網站系統， 學員只需要學習一套語言便可以開發出前後台個樣功能。 我們會利用望 MongoDB NoSQL 資料庫儲存文件，不再侷限於資料表格的規範。 利用 NodeJS 及 Express 建立網站的後台系統，透過各種各樣的 Modules 和 Middleware 輕鬆配搭出不同類型的後台系統需要。 前台系統則使用 ReactJS 寫出豐富及反應敏捷的以 Component 為主要設計單位的系統，配合不同的 hooks 來加強前台系統的功能。 再利用 REST API 透過 REST API 將前後台功能整合起來。 最後更將MongoDB資料庫，NodeJS後台及 ReactJS前台三部分分別移上雲端服務，令系統能開放給大眾使用。 ** 附上完整程式碼及 Lecture Notes 可供下載。

共有6堂面授課堂錄影。導師會帶領學員利用 NodeJS, Express, MongoDB, ReactJS 建立出完整的資訊系統。 另加3.5小時補充課堂錄影，詳細說明建立完整系統並上傳到雲端的各個步驟及流程。
Card image

Front-End Technologies - ReactJS

React JS 是由 faceBook(Meta) 所開發的前端介面設計 Javascript工具庫， 是用介面組件(Components) 這觀念用來架構介面。 開發者可自行開發組件或利用已經建立的第三方組件用來建構網站， 是最先進的 Web design 技術及趨勢

Back-End Technologies - MongoDB

MongoDB 是一個以文件導向的資料庫架構， 開發者不用預先設定資料庫結構。使用者可隨意新增及刪除文件。 文件的格式亦可以隨意改變，適合大數據資料儲存。

Card image
Card image

Back-End Technologies - NodeJS

NodeJS 是一個 Javascript 執行環境， 讓開發者可利用 Javascript開發後台系統。 使用者可以不再學習其他語言便可利用 Javascript一併開發前後台程式。 再配合強大的程式庫，可架構出任何種類的 Server 架構。

Back End Technologies - Express Web Server

Express 是 NodeJS 上一個最出名及最多人使用的 Web Server程式庫。 透過樣板 (Template) 能建構出各種各類的網頁。 開發者能夠輕易透過路由系統 (Routing) 建立各種網絡 REST API， 讓使用者能夠輕鬆存取背後的資料庫。

Card image

Entry Requirement

報讀者無需任何程式設計背景，但對網頁程式設計及各種新技術有興趣請便可報讀

Instructor

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.

相關專業認證
  • Microsoft MCSE, MCDBA
  • Microsoft Certified System Developer
  • Microsoft Office Specialist Master
  • Cisco CCNA,CCDA,CCNP,CCDP
  • Sun Microsystems – Certified Java Programmer
  • Oracle – Certified Database Professional
  • Linux - LPI Level 1 & 2
相關教學經驗
  • 為積金局 (MPF) IT 員工提供 Android 及 iPhone 視像培訓課程
  • 為香港教育局提供 Android 培訓課程予中學電腦科導師
  • 為香港教育大學 IT 員工提供 Cordova 跨平台流動程式開發課程
  • 為房屋署員工 IT 員工提供 HTML5 跨平台流動程式開發課程
  • 為房屋署員工 IT 員工提供 Android 及 iPhone 平台流動程式開發課程
  • 為香格里拉大酒店IT 員工提供 Android 流動程式開發課程
  • 為勞工處提供 HTML5 遊戲培訓課程及電子商店培訓課程
  • 為中國銀行IT 員工提供 Android 及 iPhone 流動程式開發課程
  • 為香港郵政IT 員工提供 Angular 8 程式開發課程
  • 為 VTC 職業訓練局提供各種各類 IT 培訓課程
  • 為醫管局員工 IT 員工提供跨平台流動程式開發課程

Course Content (15 hrs)

  • Introducing JavaScript and its basic syntax
  • Installing NodeJS and Visual Studio Code
  • Downloading and installing various modules using npm
  • Create New NodeJS project
  • Understanding various files in NodeJS project
  • Using the basic modules like http, url and fs
  • Create a basic NodeJS web server
  • Understanding the Request and Response objects
  • Reading files and images using fs module
  • Showing different pages using url module
  • Sending Data using GET method
  • Receiving Data via Query String
  • Sending Data using POST method
  • Receiving Data via Form POST
  • Uploading files and process it using formidable module
  • Using AJAX to send data
  • Installing the Express web framework
  • Setup the static folder in Express
  • Using Express routing to load different pages

  • Understanding MongoDB (NoSQL and document based)
  • Installing the MongoDB
  • Create and Drop the Database
  • Create and Drop the Collections
  • Create Document using InsertOne and InsertMany
  • Understanding the ObjectID for each document
  • Query the Collection by using various operators
  • Sorting and Limiting the Query Result
  • 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
  • Create the CRUD operation in MongoDB using NodeJS

  • Understanding the Mongoose packages for Object Data Modeling
  • Creating the Mongoose schema and model
  • Using NodeJS to connect Mongoose
  • Create the CRUD operations using Mongoose using NodeJS
  • Understanding the EJS template engines for page rendering
  • Introducing the MVC (Model + View + Controller) architecture
  • Creating various controllers for CRUD
  • Introducing the Middleware concept
  • Creating the Data Validation Middleware
  • Indroducing the Session concept
  • Using the Session to implement security
  • Create a user collection and controllers for login and logout
  • Create a middleware to protect pages which require authentication

  • Create New React Project
  • Understanding various files in React Project
  • Introducing React Component
  • Create your first React Component
  • Introducing JSX (JavaScript XML) as the rendering language
  • Rendering variables and functions in JSX
  • Using map functions to render array and objects
  • Conditionally Rendering Components

  • Create State in Components using useState hook
  • Avoiding Infinite Rendering by incorrect function calls
  • Form Handling and stores values in Component state
  • Building the Component Tree using Child Components
  • Export and Import the Components
  • 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

  • Using useRef to persist values between rendering
  • Using useRef to access DOM elements
  • Using createContext and useContext to build global state
  • Understanding Facebook's Flux pattern
  • Using useReducer to implement the Flux pattern
  • Using useMemo and useCallback to avoid unnecessary rendering
  • Using React Router to load different components
  • Setup the Routing Tables
  • Adding the Link for loading each component
  • Passing data by useLocation and useParams hooks
  • Using React Bootstrap to style the components

  • Design the system architecture for the complete system
  • Create the NodeJS backend system
  • Build a CRUD system - Adding a menu system
  • Installing the CORS module for cross domain API calls
  • Installing the Express-Upload module for file upload
  • Build a CRUD system - Listing records function
  • Create an registration database and create the Mongoose models
  • Create the API for retreiving all the registrations
  • Create the API for retreiving a single registration
  • Create the API for deleting the registration
  • Create the API for updating the registration
  • Create the API for updating the registration

  • Create the ReactJS frontend system
  • Set the Environment Variables
  • Create the Component for listing all the registration
  • Create the Component for showing the single registration
  • Create the Component for adding a new registration
  • Create the Component for searching the registration
  • Create the Component for updating the registration

  • Porting the Mongodb database to the cloud service (Mongodb Altas)
  • Registering an account in Mongodb Altas
  • Setup the database and the access permission
  • Connecting the NodeJS to use the remote database
  • Porting the NodeJS backend to the cloud service (Heroku)
  • Registering an account in Heroku
  • Prepare the NodeJS project for uploading
  • Deploying the NodeJS backend using Git
  • Porting the ReactJS frontend to the cloud service (Netify)
  • Registering an account in Netify
  • Build the production version of the ReactJS frontend
  • Deploing the ReactJS frondend to Netify

Course Content (3h:38m)

  • Extra Video for NodeJS 49m:28s
  • Extra Video for ReactJS1h:06m:59s
  • Extra Video for CRUD System Development (Full System)1h:42m:05s
Video Images
Preview this course
Create MySQL tables for one to many relationship
$1,980
Summer Promotion
  • 學習影片19小時詳盡學習影片，由淺入深教學
  • 面授錄影6堂(15小時) 面授課程錄影
  • 預錄視像額外4小時，詳解如何建造一個 CRUD 系統
  • 觀看時限12個月
  • 入學要求無需任何程式設計背景，有興趣請便可報讀
  • 課程代碼:DNR06202201
Show More

請登入網上學習系統觀看更多示範。

登入戶口: demonode
登入密碼: demopass
LOGIN

Copyright © 2023 Unisoft Education Centre. All Rights Reserved