課程內容
免費編程課系列 (1) : LAMP Stack
何謂LAMP Stack? Web 應用程式的開首十年，大多開發者均使用 LAMP 堆疊來回應 Web 瀏覽器的請求，這是最傳統建置網站的方法。所謂堆疊，是指用於建置、管理和執行web應用的一組程式軟體，以支援應用程式的視覺呈現、資料庫、聯網和安全。 LAMP 堆疊包含四種軟體技術，這些技術在後台共同協作，以建立可執行的 Web 應用程式，LAMP 架構由以下四個部份組成。 1）Linux Linux 是一個開放原始碼作業系統，是堆疊的第一層，支援上層的其他元件。 2）Apache Apache 是一個開放原始碼 Web 伺服器，構成 LAMP 堆疊的第二層，Apache 模組可存放網站檔案，並透過使用 HTTP 的瀏覽器交換資訊。 3） MySQL MySQL 是開放原始碼關聯式資料庫管理系統，這是 LAMP 堆疊的第三層。LAMP 模組使用 MySQL 來存放、管理和查詢關聯式資料庫中的資訊。 PHP PHP 是一倜超文字預處理器，是 LAMP 堆疊的最後一層，它是一種指令碼語言，可讓網站執行動不斷變化的軟體資訊。 要注意的是，Web 開發人員通常會將 PHP 程式設計語言內嵌於 HTML 中，亦即撰寫在同一頁面上，以便在網站上顯示即時或更新的資訊。， 當您在瀏覽器中開啟網頁時，LAMP 堆疊將執行以下程序； 1）接收請求 Apache Web 伺服器會從瀏覽器接收傳入的請求。如果請求載入靜態檔案，Apache 伺服器會直接回應適當的內容。如果請求是針對動態內容，Apache 伺服器會將請求傳遞給 PHP 元件，PHP 元件會尋找並載入可處理請求的相應 PHP 檔案。 2）處理請求 PHP 檔案包含 PHP 函數，這是用於產生動態內容的程式碼，PHP 元件可處理 PHP 函數，如轉換測量單位或建立銷售圖表；若某些 PHP 函數可能需要來自資料庫的資訊，PHP 程式碼會從資料庫中擷取存放的資訊，並將其用於處理該函數。 3） 傳回回應 PHP 將運算結果以 HTML 格式傳遞至 Web 伺服器Apache，而後者的HTTP 伺服器會將動態 HTML 結果傳送至使用者的瀏覽器，同時，還會將新資料存放在 MySQL 資料庫中。 以下課程，將為大家展現以上整個堆疊的細節。
0/83
HTML_metadata
10:00
HTML_h1 與 SEO
16:03
HTML_TEXT & HTML ENTITIES
09:25
HTML_Hyperlink
03:11
HTML_Image 與 CSS
13:45
HTML_Video
07:58
HTML_Table
11:40
HTML_Table
11:40
Instaling Server_purchsing domain name
02:31
Instaling Server_Virtual Machine
16:09
Instaling Server_Server and Apache
16:23
Instaling Server_PuTTY & FileZilla
14:30
CSS_Inspect Element
10:24
CSS Selectors
08:45
CSS_Color
09:11
CSS_Ordering of Selectors
05:21
CSS_Padding & Margin
10:06
Javascript_Javascript
11:20
Javascript_Dynamic Element
06:05
Javascript_Object
08:10
Javascript_Window Object
07:27
Javascript_Separation of Concerns
04:39
Javascript_Separation of Concerns II
06:37
Javascript_Anonymous Function
04:19
HTML_Form
04:19
Javascript_e.preventdefault()
08:07
Javascript_Password Validation
12:20
Javascript_textContent = ‘ ‘
02:02
Javascript_function of div tag
04:31
Javascript_div as a container
06:44
Javascript_Global and Local Variables
09:13
Javascript_032 Focus Event
05:43
Javascript_Mouseover and Mouseout Event
04:55
Javascript_事件流程
09:23
Javascript_Event Bubbling
06:23
Javascript_Event Capturing
02:10
Javascript_Stop Propagation
05:19
Javascript_window.confirm( )
04:22
Backend_MySQL
11:12
Backend_PHP
07:15
Backend_連線 MySQL
09:07
Backend_phpmyadmin
09:43
Backend_Static Folder
10:14
Backend_CSS Folder
05:15
Backend_Normalising CSS
05:19
Backend_PHP Post Method
08:45
Backend_PHP MySQL Table
12:14
Backend_Posting in MySQL
07:13
Backend_PHP: header( )
12:55
Backend_PHP setcookie( )
07:03
Backend_PHP isset( )
10:24
Backend_PHP get_file_contents( )
05:17
$_SERVER[“PHP_SELF”]
06:54
Backend_駭客入侵
05:29
Backend_htmlentities( )
07:11
Backend_Ajax
08:25
Backend_057: 進一步轉頁示範
05:26
Backend_058: State
12:30
Backend_059: 錯誤處理
09:49
Backend_hidden input
06:29
backend_upload file
04:31
backend_enctype=””
05:56
backend_is_uploaded_file( )
10:15
backend_建立產品資料庫
05:55
backend_dynamic use of ” “
10:04
backend_add table
04:01
backend_搜尋產品
03:15
backend_模糊搜尋
02:36
backend_069: 新增資料
04:29
backend_檢查輸入
06:47
backend_修改資料
05:19
backend_刪除資料
03:05
backend_073: CRUD
06:58
backend_primary, foreign and composite keys
05:57
backend_Session
07:48
backend_會員系統
03:06
backend_077: 會員註冊
09:08
backend_商品清單
04:31
backend_商品明細頁
03:41
backend_購物車(I)
05:48
backend: 購物車(II)
02:14
backend_我的最愛
05:00
backend_基礎篇終章(附完整程式碼檔案下載)
05:34
免費編程課系列 (2): WordPress
何謂WordPress? WordPress 是一個以LAMP stack 為底層的網站內容管理框架，再加以其自身所用的php 程式編寫而成的軟體框架。WordPress 最初為方便開發者建置blogger 網貼，但其後的發展，愈來愈多plugins 可相配合；基本上，當下任何Web 愈用的功能，都可以藉WordPress 完成。 WordPress的核心軟體本身是開源免費的，由 WordPress.org 和廣大程式開發者維護更新，並它不屬於任何一家公司，供開發者免費所用； 加上 WordPress 每過一段時間，就會釋出新版本，確保了網站安全性的持續進化！ 要注意的是，要下載免費版Wordpress ，可到wordpress.org 下載；至於wordpress.com 則有專人團隊提供維護和客服，是收費版。 使用WordPress 最具彈性的方法，就是開發者可使用LAMP 的相關程式語言，再配合WordPress 內置的php程式自建主題，本課程就是以此為基，開發一個自媒體網站。
0/64
CSS Framework_bootstrap
09:21
CSS Framework_class=”col-md-12″
06:05
CSS Framework_jumbotron
05:17
CSS Framework_Text overlays Image
04:30
CSS Framework_Google Fonts
02:14
CSS Framework_Default Classes
01:57
CSS Framework_position 的相對配置
05:21
CSS Framework_Button
02:53
CSS Framework_CSS .btn : hover{ }
01:49
CSS Framework: 093 CSS Navbar
02:20
CSS Framework_CSS Adding Logo
06:26
CSS Framework_CSS Navigation Bar
03:43
CSS Framework_CSS Dropdown Menu
03:25
CSS Framework_CSS class=”offset-md-2″
05:50
CSS Framework_CSS inner row
05:28
CSS Framework: 099 CSS Combinators
06:04
Javascript Framework_100 jQuery
06:58
Javascript Framework_Path Resetting
06:36
Javascript Framework_jQuery Plugin
05:56
Javascript Framework_woothemes Carousel
07:16
Javascript Framework_Inspecting Style
04:38
Javascript Framework_Fancy Box
07:20
Javascript Framework_Input Group
04:55
Javascript Framework_Footer
02:26
Javascript Framework_Index page
05:59
Backend_AWS 雲端
01:31
Backend_VM with LAMP
07:48
Backend_Domain Name Server (DNS)
05:11
Backend: 112 DNS Records
03:58
Backend_Documentation
08:40
Backend_SSL
03:42
Backend_Obtaining Application PasswordDraft Lesson
03:44
Backend_FileZilla issue
01:16
Backend_Assessing PhpMyAdmin
08:59
WordPress_wordpress.org
04:13
WordPress_Installing WordPress
04:33
WordPress_WordPress Plugins
06:39
WordPress_Importing Files
05:17
WordPress_echo get_template_directory_uri()
08:12
WordPress_Header & Footer Pages
06:51
WordPress_Completing Default Page
04:31
WordPress_functions.php
01:59
WordPress_Creating Other Pages
03:21
WordPress_Blog Page
02:40
WordPress_Single Blog Page
02:32
WordPress_PHP while loop
04:56
WordPress_get_permalink( )
10:29
WordPress_get_page_link( )
04:26
WordPress_廣告時間
04:20
WordPress_Edit Links
03:16
WordPress_Custom Posts
05:25
WordPress_Custom Post Structure
06:13
WordPress_Lesson Page
03:15
WordPress_Single Lesson page
03:29
WordPress_PHP Applications — Input Section
02:46
WordPress_PHP Applications — Ouput Page
04:47
WordPress_Form Submission
05:33
WordPress_Contact Page　
02:35
WordPress: jQuery Ajax
03:05
WordPress_Extra Functions
02:37
WordPress_Custom Post Structure
06:13
WordPress_Custom Post Structure
06:13
WordPress_Title Tag
02:24
WordPress_(完) 終章於自媒體網站之實作
10:06
免費編程課系列 (3): JAM Stack
由LAMP Stack 到 JAM Stack ——— 傳統架構前後端之分離 傳統網站的堆疊方法「LAMP Stack」，是前後端程式也在同一頁面上（試想想index.php 這頁面），然後放在伺服器等待使用者透過瀏覧器作出頁面的要求。當使用者開啟 Web 的某網站時，伺服器會產生顯示相關HTML 之頁面，然後將這些頁面傳送給使用者。 這個過程是相當緩慢的，在使用者可以檢視這些頁面之前，他們必須等待後端應用程式執行和產生 HTML，以及等待 HTML 到達他們的裝置。 JAM Stack 在這方面改善了速度，為使用者帶來更快的使用者體驗和為開發者帶來更簡單的建置網站的方法。 J 代表JavaScript，是 Web 應用的程式設計語言。 A 代表API（應用程式程式設計介面），是一種從第三方應用程式要求資料的方法。 M 代表Markup ，是為瀏覽器提供格式化指令的代碼（HTML 和 CSS）。 在 JAMstack Web 應用程式中，會預先建立好HTML 和 CSS 標記代碼，並儲存在內容傳遞網路 (CDN) 中；不同於在伺服器端執行一個單一的後端應用程式來產生動態內容，此類應用程式的動態元件是基於 API，而JavaScript 則負責呼叫 API。 比方說，使用 JAMstack 方法建置Web 應用程式，開發者不用編寫整個後端應用程式，而是建立了一系列靜態且輕量級的 HTML 頁面，並將其儲存在 CDN 中。當使用者開啟應用程式時，CDN 會立即將相應的 HTML 頁面交付給使用者，因為 CDN 比網站的伺服器更接近使用者，再配合呼叫 API 來渲染動態資料，載入的速度較快。 而從開發者角度看，亦省卻了大量編寫後端程式代碼的工作。 本課程的重心就是讓大家深入了解這網站建置的進化過程。
0/115
Frontend: Switch between Node.js version
08:07
Frontend_Installing Nuxt Project
07:11
Backend_Installing Strapi
18:01
Frontend_index.vue
05:19
Frontend_nuxt.config.js
07:07
Frontend_Default Slash
05:52
Frontend_Blog Folder
06:26
Frontend_default.vue
06:12
Backend_Creating Content Type
08:19
Backend_Creating API
05:32
backend_Postman
04:16
Frontend_vue.js devtools
00:55
Frontend_Vue.js — data( )
07:08
Frontend_node.js_non-blocking and asynchronous
17:00
Frontend_Axios and Await
05:06
Frontend_env: { }
04:10
Frontend_Calling API
05:56
Frontend_Browsing Vue.js devtools
02:57
Frontend_v-for loop
03:16
Frontend_process.env.
03:43
Frontend_v-bind & v-if
03:54
Frontend_connect to slug page
05:36
Frontend_API for slug page
11:47
Frontend_@nuxtjs/markdownit
09:12
Frontend_JSON Web Tokens (jwt)
07:11
Frontend_Sign-in page
02:00
Frontend_axios.$post( )
08:03
Frontend_v-model = ‘ ‘
07:35
Digression (1)_Vue CDN
06:02
Digression (2)_Vue and Javascript
08:06
Digression (3)_Vue – passing data via data( )
08:49
Digression (4)_Vue – v-html
03:22
Digression (5)_Vue – v-bind 與 a tab
04:45
Digression (6)_Vue – 雙向資料綁定
03:45
Digression (7)_Vue – computed: { }
03:51
Digression (8)_Vue – Applications of computed: { }
04:20
Digression (9)_Vuex – state
09:35
Digression (10)_Vuex – getters
03:51
Digression (11)_Vuex – mutations
04:57
Digression (12)_Vuex – mutations-payload
02:38
Digression (13)_Vuex – actions
07:38
Digression (14)_Vuex – actions – API calling
06:23
Digression (15)_Vuex – mapMutations
06:42
Frontend_js-cookie & cookieparser
04:31
Frontend_Cookies.set( )
06:21
Frontend_’Bearer ‘ + ……….
03:51
Frontend_use of cookieparser
03:15
Frontend_copilot
06:55
Frontend_bootstrap-vue
03:53
Frontend_sign-in button
03:41
Frontend_getuserjwt
04:01
Frontend_v-if=’!getuserjwt’
09:07
Frontend_log in page
04:06
Frontend_log-out button
06:17
Frontend_register page
05:19
Frontend_auth/local/register
06:26
Frontend_preliminary production
07:20
Frontend_ngnix and pm2
09:59
Frontend_server.js
03:10
Frontend_SSL for nginx
04:06
Frontend_firewall for frontend
08:08
Frontend_npm install & package.json
05:12
Frontend_ecosystem.config.js
13:33
Frontend_Amazon SES
06:05
Frontend_Create SES Identity
07:59
Frontend_Sending SES email
02:51
Frontend_SMTP Credentials
02:03
backend_plugins.js
04:26
frontend_confirm email
01:54
backend_updating backend setting
04:03
frontend_confirming registration
05:55
frontend_refining registration page
10:06
frontend_resetting password
07:56
frontend_middleware
03:25
frontend_my-account page
06:42
frontend_網站前端搬遷
07:45
backend_網站後端搬遷
07:05
backend_mongorestore
07:13
backend_sudo nmp install –unsafe -perm
06:19
backend_網站後端重置
09:28
frontend_products page
02:21
backend_product data
07:28
frontend_product page
05:55
frontend_product page
05:55
frontend_filter method of array
03:32
frontend_filtering by brandname
04:10
frontend_filtering by category
04:55
frontend_product ordering
07:29
frontend_’showmore’ button
05:59
frontend_二手交易區
06:15
backend_new collective type
05:13
frontend_createitem page
02:29
frontend_CRUD: READ
06:08
frontend_CRUD: UPDATE
05:00
frontend_CRUD: DELETE
03:19
frontend_relations between collective types
06:15
frontend_MyItem Page
08:20
backend_Controller and Handler
08:02
backend_Owner policy
07:25
backend_Email Confirmation
01:59
backend_Update and Delete
03:07
backend_Photo Uploading
06:55
backend_slug system
10:57
backend_my-account page
07:24
frontend_stripe account
02:05
backend_collective type: orders
05:28
backend_private and public keys
11:41
backend_testing credit card payment
05:42
frontend_cart.vue
04:30
backend_Email Confirmation
01:59
frontend_cart.js
05:22
frontend_checkout page
05:29
frontend_Title Tag
03:05
frontend_Pagination
02:47
frontend_Responsive Web Design (RWD) — End of Course
04:47
免費編程課系列 (4): Backend Programming – Node.js and Express.js
Node.js 與Express.js 的前因後果 JavaScript本為前端頁面的腳本程式語言，以JavaScript 寫出的程式，用戶須在瀏覽器上執行，故此，JavaScript的採用多在前端的程式開發。 2009年，美國軟件工程師瑞安·達爾，以Javascript 和 C+，結合了Google的V8、事件驅動模式和低階I/O介面，編寫了Node.js ，令JavaScript 的應用，跳出瀏覽器，在用於侍服器的終端上；換言之，自Node.js 的出現，JavaScript已不只用於前端編程，亦可應用於後端開發。 Node.js 含有一系列內建模組，如 HTTP 模組，使建置網站脫離 Apache HTTP Server ，令伺服器能獨立於前端，兩者能分離運作。 Node.js 可視作為一個微型作業系統，在執行環境中(runtime environment）運作，發展至今日，Node.js 已是很多前後端框架的執行環境，前端就有Angular.js 、React.js和Vue.js等等。 而後端的應用，因Node.js的modules 極有限，不敷應用於現實各種商業邏輯，於是便有Express.js 的出現，它是Node.js的web應用框架，除了簡化一些Node.js 原有功能的編程外（如HTTP modules），亦提供更多物件和方法處理較複雜的商業應用，彌補了Node.js 的功能不足。 自Node.js 和Express.js提供了完善的後端開發方案，能創造API 給前端所用後，Javascript的網站堆疊方法就再不局限於LAMP Stack ，過往十多年出現多樣化的框架組成，如MEAN Stack 和JAM Stack 等等，可真如雨後春筍，令編程者有更多的堆疊選擇。
0/103
Express.js
10:12
npm init
11:09
app.listen( )
15:51
app.get( )
02:07
server.js
08:34
middleware
08:01
public folder
08:22
custom middleware
09:26
mongoose
09:27
mongoose.Schema
04:25
inputting data
06:42
creating API
02:59
setting frontend
10:49
blogs page
07:06
Single blog page
03:15
https://youtu.be/ap4Mri68seE
05:58
Model.deleteOne( )
05:21
Model.deleteMany( )
02:24
Model.remove( )
04:28
databases folder
08:51
models
06:55
controllers
04:19
routes
02:31
simplifying server.js
03:50
refining the logic
05:35
A complicated API
14:21
photo upload
06:23
document upload
07:29
db.js
04:16
user model
06:08
.env file
06:40
.env file II
00:00
amazon ses
04:39
config file
03:16
services folder
04:34
nodemailer
00:55
initializeEmailService
03:18
sendEmail
02:47
removing the irrelevancies
05:37
authcontroller
04:23
authService
03:14
tokenschema
01:55
passport
02:21
authroute
01:02
API for user register
01:23
user registration
03:39
db.collectionname.find()
02:02
API for verifying emails
05:44
login
03:35
forget and reset password
04:35
relationship among files
02:44
req.body vs req.query
02:46
req.params.id
02:20
Nuxt 3
04:45
app.vue
05:42
index.vue
03:19
components
03:49
Blog Page
06:20
Single Blog Page
06:09
composables folder
03:52
runtimeConfig( )
07:37
pagination: backend
04:39
pagination: frontend
06:44
restructuring backend
03:42
ecosystem.config.cjs
03:42
registration page
06:55
verifying email
04:34
jwt & local storage
08:52
forget and reset password
02:22
front page protection (1): backend
04:35
front page protection (2): frontend
03:20
frontend middleware
03:59
authorization by admin
06:14
cookie
05:25
productschema
06:32
productController
04:37
productsroute
02:12
updating server.js
01:14
createproduct API
04:43
single product slug page
01:41
createproduct page
04:57
myproducts API
02:07
myproducts page
02:02
updateproduct API
02:00
updateproduct page
01:54
deleteproduct API
02:01
deleteproduct page
01:26
refining createproduct API for image upload
02:31
refining createproduct page for image upload
03:29
frontend: products folder
02:00
3 types of title tag
03:49
paymentschema
01:36
paymentController
01:48
paymentsroute
00:51
refining server.js
01:57
secret key of Stripe
01:22
test mode of Stripe
01:59
Stripe folder
03:40
public key of Stripe
02:35
checkout page
01:37
webhook
05:46
shopping cart
04:02
store folder
02:42
免費編程課系列 (5): Backend Programming – Django_Product API
0/94
installing pipenv
05:10
pipenv shell
08:21
.virtualenvs
03:56
Structure of Django
08:30
controllers: views
07:39
routes: urls
04:16
project core app
06:31
models.Model
06:59
choice fields
02:17
one to one/many relationship
06:30
many to many relationship
04:14
circular relationship
05:41
complete model
04:08
installing Mysql
05:04
DataGrip
07:26
連線 Mysql
05:29
migration
02:03
mockaroo
05:19
admin site
03:47
dummy data
01:42
customizing admin site
09:01
python decorator
07:28
computed column
03:01
search field
04:27
restframework
03:48
@api_view( )
06:50
object manager
04:37
serializer
05:01
serializing objects
04:02
query_set
03:40
API for getting products
02:55
COERCE_DECIMAL_TO_STRING
01:17
objects.order_by( )
02:41
objects.filter( )
01:30
custom serializer fields
03:52
renaming serializer fields
01:16
django-debug-toolbar
08:24
serializing relationships
03:15
API for creating products
05:15
deserializing data
03:23
saving data to database
03:01
validating the data
04:06
API for updating products
06:10
API for deleting products
03:47
testing APIs on postman
05:45
Views by class instead of function
08:10
Views by class instead of function (II)
03:30
Generic views
03:29
Generic views (II)
05:20
ViewSets
03:13
router
03:22
destroy method
02:04
filtering by collections
03:04
filtering by price range
01:59
search box
05:01
sorting
01:25
pagination
02:41
cycle for creating API : models -> serializers -> views -> urls
09:26
creating API for product review (1) models
07:49
digression: eliminating warning about code error
03:48
creating API for product review (2) serializers
01:26
creating API for product review (3) serializers
01:23
creating API for product review (4) nested router
06:50
API for shopping cart: (1) models
06:00
API for shopping cart: (2) serializers
01:28
API for shopping cart: (3) views: mixins
04:48
API for shopping cart (4) route: creating a cart
04:28
API for shopping cart (5) route: getting a cart
05:47
API for shopping cart (6) cart content
11:11
API for shopping cart: SerializerModelField( )
04:25
API for shopping cart: deleting a cart
02:04
preliminary production (1): sign up a GIthub account
06:09
preliminary production (2): environmental variable
04:52
preliminary production (3): mysqldump
01:51
preliminary production (4): installing mysql with VM
06:39
preliminary production (5): importing database
04:24
preliminary production (6): Github Token
01:45
preliminary production (7): Installing Git
03:03
preliminary production (8): git push
04:28
preliminary production (9): git pull
04:42
preliminary production (10): ensuring pipenv path
06:33
preliminary production (11): ALLOWED_HOSTS
01:43
preliminary production (12): gunicorn
07:29
preliminary production (13): ngnix & gunicorn
08:27
preliminary production (14): staticfiles
07:19
preliminary production (15): Full Production
03:15
nested url for cartitems
05:09
cartitem serializer and view
06:03
media folder
03:51
model for images
04:52
serializer, view, url for images
04:33
validators for image size
03:02
CORS
04:21
media folder for production (完結篇)
05:46
免費編程課系列 (6): Java & Android App
0/6
編譯語言
09:20
methods
01:30
Gradle
07:57
intelliJ IDEA
05:31
Integrated Development Environment (IDE) –
03:17
packaging class folders for production
03:37
免費編程課
關於課程
<section id=’email’>
  <div class=”container”>
    <div class=’row’>
      <div class=’col-md-8 offset-md-2 text-center’>
        <h3>成為我們的訂閱會員</h3>
      </div>
    </div>
    <div class=’row’>
      <div class=’col-md-8 offset-md-2 text-center’>    
        <p>讓我們發送給你最新文章</p>                
      <div class=”input-group input-group-lg”>
        <span class=”input-group-text” id=”inputGroup-sizing-lg”>你的電郵</span>
        <input type=”text” class=”form-control” aria-label=”Sizing example input” aria-describedby=”inputGroup-sizing-lg” placeholder=”abc@gmail.com”>
      </div>
      <br>
      <a class=”btn btn-primary btn-lg” href=”#” role=”button”>提交</a>
    </div>
    </div>
  </div>
</section>
上一個
下一題