sClass1 สอนเขียนเว็บไซต์ด้วยตัวเองตั้งแต่ 0 - 100

FullCourse หลักสูตรที่ออกแบบมาสำหรับมือใหม่
ในการเรียนรู้เครื่องมือภาษา HTML5 CSS Bootstrap4 และ PHP MySQLi
และต่อด้วยการสอนสร้างเว็บไซต์ขึ้นมาจริงๆ ทั้งหน้าบ้าน และหลังบ้าน แบบเต็มระบบ

อัพเดทครั้งล่าสุดเมื่อ 12/2020    ผู้เรียนทั้งหมด 854 คน

เข้าสู่ห้องเรียน sClass1
สิ่งที่จะได้รับจากคอร์สนี้
ทั้งหมด 35บทเรียน + 3 Bonus 150 วีดีโอ ความยาว 40 ชม.
พื้นฐาน HTML5 CSS Bootstrap4 และ PHP MySQLi
มีเว็บไซต์เป็นของตัวเอง หน้าบ้าน และ หลังบ้าน
มีผู้สอนคอยดูแลอยู่ตลอดทั้งวัน สามารถปรึกษาได้ทันที ไม่ต้องรอทีมงานใดๆ

รายละเอียดคอร์สทั้งหมด แยกตามวีดีโอ

เนื้อหาหลักสูตร ความยาวทั้งหมด 40 ชั่วโมง 15 นาที

Chapter 1 Introduction (แนะนำผู้สอน + ผลงาน)
Ep1.1 แนะนำตัวผู้สอน และแสดงผลงานต่างๆ ดูตัวอย่างฟรี 9:58 น.
Ep1.2 เรียนรู้การทำงานของเว็บไซต์ ดูตัวอย่างฟรี 9:54 น.
  1. เว็บไซต์ โฮมเพจ เว็บเพจ คืออะไร ?
  2. HTTP คืออะไร
  3. HTTPs คืออะไร
  4. Domain คืออะไร
  5. ประเภทของ Domain ต่างๆ
  6. หลักการทำงานการเรียกดูเว็บไซต์
Chapter 2 การติดตั้งโปรแกรมเบื้องต้น
Ep2.1 ภาพรวมโปรแกรมที่ใช้ในการเขียนเว็บไซต์ต่างๆ ดูตัวอย่างฟรี 6:00 น.
  1. Xampp
  2. phpMyAdmin
  3. Visual Studio Code
  4. MySQL Workbench
  5. Node Package Manager
  6. Web Browsers
  7. FileZilla
Ep2.2 ติดตั้ง xampp และทำความรู้จักกับ PhpMyAdmin 14:20 น.
  1. ติดตั้ง xampp อย่างละเอียด
  2. เรียนรู้การใช้งาน PhpMyAdmin
Ep2.3 สอนการใช้งาน Visual Studio Code โปรแกรม Text Editor สำหรับการเขียนโค้ด 15:17 น.
Ep2.4 สอนการใช้งาน เว็บ W3schools ไว้เรียนรู้ด้วยตัวเอง 2:27 น.
Ep2.5 สอนการใช้งาน Jsfiddle ไว้สำหรับสอบถามปัญหา และ ส่งการบ้าน 7:03 น.
Chapter 3 Basic HTML
Ep3.1 พื้นฐาน HTML 14:44 น.
  1. HTML HTML5 คืออะไร
  2. ทุกวันนี้ เราเปิดเว็บไซต์ได้อย่างไร
  3. รู้จักกับ XML
  4. HTML HTML5 ใช้งานยังไง
  5. HTML Headings
  6. HTML Paragraphs
  7. HTML Styles
Ep3.2 HTML ต่างๆที่ควรรู้ 21:05 น.
  1. HTML Text Formatting
  2. HTML Comment Tags
  3. HTML Links
Ep3.3 Block-Level and Inline Elements 6:47 น.
Ep3.4 การใช้งานรูปภาพ ใน HTML (Tag img) 14:12 น.
  1. ดึงภาพมาแสดงบนหน้าเว็บจากเครื่องของตัวเอง
  2. ระดับในการดึงภาพต่างโฟลเดอร์จากเครื่องของตัวเอง
Ep3.5 การปรับแต่งขนาดภาพที่เราใช้ (width height) 4:29 น.
Ep3.6 เว็บแจกรูปภาพฟรีไม่มีลิขสิทธิ์ 14:22 น.
Chapter 4 Basic HTML5
Ep4.1 Sementic Markup HTML5 7:45 น.
  1. เรียนรู้คุณลักษณะใหม่ๆ ของ HTML5
  2. tag Html5 มีอะไรบ้าง
  3. รู้จักกับ Semantic Markup
Ep4.2 Input Type HTML5 4:56 น.
Ep4.3 WebStorage HTML5 12:05 น.
  1. Audio/Video
  2. Canvas
  3. Drag & Drop
  4. Web Storage
  5. Geolocation
Ep4.4 Workshop HTML5 #HomeWork1 เขียนเว็บแนะนำตัวเอง 18:29 น.
Chapter 5 HTML5 & CSS
Ep5.1 Workshop Elements 20:57 น.
  1. เรียนรู้ tag heading
  2. เรียนรู้ tag p
  3. เรียนรู้ tag ที่มีสมบัติของ block-level elements และ inline elements
  4. การใช้งาน css style inline
  5. เรียนรู้การใช้งาน backgroud css
Ep5.2 เรียนรู้การใช้งาน CSS Layout float and clear 5:00 น.
Ep5.3 เรียนรู้รูปแบบการเขียน CSS แบบ Inline Style ดูตัวอย่างฟรี 20:44 น.
Ep5.4 Workshop HTML&CSS (Homework #2) การเขียนแนะนำตัวเองด้วย HTML5 + CSS 15:35 น.
Chapter 6 เรียนรู้การใช้งาน Bootstrap4
Ep6.1 ภาพรวมการใช้งาน Bootstrap4 30:44 น.
  1. ภาพรวมการใช้งาน Layout
  2. ภาพรวมการใช้งาน Grid
  3. ภาพรวมการใช้งาน Content
  4. ภาพรวมการใช้งาน Components ทั้งหมด
  5. ภาพรวมการใช้งาน Utilities ทั้งหมด
Ep6.2 การติดตั้งการใช้งาน Bootstrap4 ดูตัวอย่างฟรี 20:22 น.
  1. อธิบายการติดตั้งด้วย NPM
  2. สร้างโฟลเดอร์เพื่อเริ่มต้นการเขียนเว็บ
  3. การเช็คเวอร์ชั่นของ NodeJS และ Npm
  4. การใช้งาน npm init
  5. การติดตั้ง bootstrap jquery popper.js ผ่าน npm
  6. เรียนรู้การใช้งาน npm install
  7. การดึงไฟล์ package ต่างๆ เพื่อมาใช้งาน
  8. เทสระบบ ว่าสามารถทำงานได้จริงหรือไม่
Ep6.3 การใช้งาน Class Containers 9:07 น.
  1. เรียนรู้การใช้งาน Class container
  2. เปรียบเทียบการใช้งาน container กับ container-fluid
  3. การใช้งาน Class Colors ใน Utilities
  4. ตัวอย่างการใช้งานจริง container กับ container-fluid
  5. เจาะลึก css container ประกอบไปด้วยอะไรบ้าง
Ep6.4 การใช้งาน Basic Grid System 11:34 น.
  1. เรียนรู้การใช้งาน Grid System
  2. เรียนรู้การแบ่งคอลัมน์บนหน้าเว็บไซต์
Ep6.5 Mini Workshop Path1 ทำเว็บ Profile 21:32 น.
  1. นำการบ้านเก่ามาแปลงให้เป็น bootstrap4
  2. เริ่มต้นการทำ workshop
  3. เรียนรู้การวางโครงสร้างด้วย Bootstrap
  4. เรียนรู้การใช้งาน padding margin
  5. เรียนรู้การใช้งาน text center
Ep6.6 Mini Workshop Path2 ทำเว็บ Profile 11:56 น.
  1. เริ่มต้นการทำ workshop
  2. การเปลี่ยนสี Background
  3. ตรวจสอบผลงานของเรา
Ep6.7 วิธีส่งการบ้าน ( Homework #3 )ส่งการบ้าน Bootstrap ง่ายๆ ด้วย jsfiddle 6:16 น.
Chapter 7 Bootstrap4 Grid System (พื้นฐานการวางโครงสร้างหน้าเว็บไซต์)
Ep7.1 Grid System Bootstrap4 16:20 น.
  1. ติดตั้ง Mobile/Responsive Web Design Tester
  2. ปรับความเข้าใจ bootstrap grid system
  3. grid option (ขนาดต่างๆของ grid)
  4. ติดตั้ง Bootstrap4 ด้วย npm
Ep7.2 Grid Bootstrap4 All Breakpoints 19:14 น.
  1. ปรับความเข้าใจ Grid All Breakpoints
  2. ตัวอย่างการใช้งาน Grid All Breakpoints อธิบายอย่างละเอียด
Ep7.3 Grid Bootstrap4 Stacked to Horizontal 14:53 น.
  1. อธิบาย grid แต่ละหน้าจอควรใช้อย่างไร
  2. ตัวอย่างในการใช้งาน อธิบายแบบละเอียด
Ep7.4 Grid Bootstrap4 Mixs & Match 12:38 น.
  1. ยกตัวอย่างการใช้งานร่วมกันของ Grid Bootstrap4
Ep7.5 Grid Bootstrap4 Mini Workshop Article Path1 15:26 น.
  1. อธิบาย meta tag ที่สำคัญๆ
  2. การใช้งาน Jumbotron
  3. การใช้งาน Cards
  4. เริ่มต้นการเขียนหน้าเว็บ Article
  5. การใช้งานรูปภาพฟรี จากเว็บไซต์ https://unsplash.com/
Ep7.6 Grid Bootstrap4 Mini Workshop Article Path2 16:01 น.
  1. อธิบาย grid แต่ละหน้าจอควรใช้อย่างไร
  2. ตัวอย่างในการใช้งาน อธิบายแบบละเอียด
Ep7.7 วิธีการติดตั้ง Font สวยๆ ด้วย Google Fonts ( Homework #4 ) 8:20 น.
  1. วิธีการติดตั้ง Font สวยๆ ด้วย Google Fonts
  2. การบ้าน Homework #4 เขียนเว็บบทความของตัวเอง
Chapter 8 Bootstrap4 Components
Ep8.1 ภาพรวมการใช้งาน Bootstrap4 Components 14:54 น.
Ep8.2 Bootstrap4 การเรียกใช้คำของแต่ละสี พื้นฐานที่ต้องควรรู้ 15:17 น.
Ep8.3 Bootstrap4 การใช้งาน Badges 13:15 น.
Ep8.4 Bootstrap4 การใช้งาน Breadcrumb 5:47 น.
Ep8.5 Bootstrap4 การใช้งาน Alerts 6:37 น.
Chapter 9 Bootstrap4 Carousel
Ep9 Bootstrap4 การใช้งาน Carousel 18:00 น.
Chapter 10 Bootstrap4 Accordion
Ep10 Bootstrap4 การใช้งาน Accordion 16:21 น.
Chapter 13 Firebase Hosting
Ep13.1 สอนการใช้งาน Firebase Hosting 15:19 น.
  1. สอนการใช้งาน Firebase Hosting
  2. วิธีแก้ไข ExecutionPolicy ติด error เมื่อ firebase login
Chapter 14 Bootstrap4 Builder Layoutit
Bootstrap4 Builder #1 Layoutit การใช้งาน Grid System ดูตัวอย่างฟรี 9:10 น.
Bootstrap4 Builder #2 Layoutit การใช้งาน Base Css 16:50 น.
Bootstrap4 Builder #3 Layoutit การใช้งาน Components 10:40 น.
Bootstrap4 Builder #4 Layoutit การใช้งาน JavaScript 12:08 น.
Chapter 15 Git Version Control (Bitbucket) (เรียนรู้การใช้งาน Git)
Ep15.1 การใช้งาน Git เบื้องต้น 20:41 น.
  1. Git คืออะไร
  2. Git มีหลักการใช้งานยังไง
  3. Dowload & Setup
  4. สร้าง Git Repository
  5. Git Config name & email
  6. เช็คสถานะ git status
  7. track ไฟล์ที่เราต้องการโดยเฉพาะ
  8. 8. track ไฟล์ทุกอย่างที่อยู่ใน Repository
Ep15.2 บันทึกการเปลี่ยนแปลงของ Project 18:14 น.
  1. git commit ใส่ข้อความบอกการกระทำต่อไฟล์ที่เปลี่ยนแปลง
  2. git log ตรวจสอบการ commit
  3. git checkout เปลี่ยน stage ของ branch
  4. git reset ย้อนกลับการเปลี่ยนแปลง
  5. git revert ย้อนกลับการเปลี่ยนแปลง
  6. conflicts แก้ปัญหาโค้ดชนกัน
  7. เริ่มต้นการใช้งาน Bitbucket (วีดีโอถัดไป)
Ep15.3 การใช้งาน Bitbucket & Git Repository 18:14 น.
  1. การเริ่มต้นการใช้งาน Bitbucket
  2. การสร้าง Git Repository
  3. git remote (การเชื่อม local กับ git server)
  4. git push (การส่ง Code ขึ้น git server)
  5. git pull (การดึง Code จาก git server มาเข้าเครื่อง local)
  6. git clone (การ Clone Project มาทั้งหมด)
  7. สอนเทคนิคการทำงานสำหรับ 2 คน โดยใช้ Git เข้ามาช่วยในการทำงานทั้งหมด
  8. เริ่มต้นการสร้างโปรเจคของเรา (วีดีโอถัดไป)
Ep15.4 การใช้งาน Git Bash ในโปรแกรม Visual Studio Code 3:38 น.
Chapter 16 WebBlog #1 Home
Ep16.0 เริ่มต้นการเขียน Weblog ของเรา ดูตัวอย่างฟรี 11:49 น.
Ep16.1 สอนสร้างหน้าแรก (Navbar) 18:39 น.
Ep16.2 สอนสร้างหน้าแรก (Carousel) 15:59 น.
Ep16.3 สร้าง Caption ด้วย Jumbotron 10:25 น.
Ep16.4 สอนสร้างในส่วนของ Section Blog 11:35 น.
Ep16.5 แก้ไขปัญหา Blog เมื่อรูปภาพไม่เท่ากันจะแก้ไขปัญหานี้ได้อย่างไร 12:45 น.
Ep16.6 เรียนรู้เกี่ยวกับโทนสีของเว็บไซต์ด้วย Coolors.co 3:47 น.
Ep16.7 สร้าง Footer ในส่วนของการแสดง Contact 7:37 น.
Ep16.8 เรียนรู้การใช้งาน icons สวยๆด้วย FontAwesome 10:11 น.
Ep16.9 สร้าง Footer ในส่วนของการแสดง Menu 4:13 น.
Ep16.10 การใช้งาน Google Maps แบบฝัง (ฟรี) 4:19 น.
Ep16.11 สร้าง Footer สำหรับส่วนสุดท้าย All Right Reserved 3:12 น.
Ep16.12 การใช้งาน Git ใน Project นี้ 8:18 น.
Ep16.13 การใช้งาน Firebase Hosting เพื่อส่งการบ้านใน Project นี้ 10:59 น.
Chapter 17 WebBlog #2 About
Ep17.1 สอนสร้างหน้า About ( parallax ) 35:22 น.
  1. ทำความเข้าใจกับ parallax ชนิดต่างๆ พร้อมตัวอย่าง
  2. สร้างไฟล์ about.html
  3. แก้ไขส่วน navbar
  4. git reset ย้อนกลับการเปลี่ยนแปลง
  5. ติดตั้ง jarallax ด้วย npm install jarallax
  6. การใช้งาน parallax ด้วย jarallax
Ep17.2 สอนสร้างหน้า About ( เราทำอะไร ) 19:31 น.
  1. การใช้งาน Embed Youtube Video ในเว็บไซต์ แบบ Responsive
  2. การจัดการกับระยะห่างจากขอบด้านในด้วย Padding
  3. เขียน Parallax เพื่อเป็นการขั้นเนื้อหา
Ep17.3 สอนสร้างหน้า About ( Timeline & Star Rating ) 60:37 น.
  1. เทคนิคการเขียน Timeline บอกเล่าเรื่องราวประวัติต่างๆของเราแบบ Responsive
  2. เทคนิคการเขียน Star Rating ไว้ใช้สำหรับคำนวณคะแนนการ รีวิว ต่างๆ
  3. การใช้งาน Git และ Deploy เว็บเข้าสู่ Firebase Hosting
Ep17.4 สอนสร้างหน้าAbout ( แก้ปัญหาหน้าเว็บ แสดงผลผิดพลาดในหน้าจอมือถือ ) 15:59 น.
Chapter 18 WebBlog #3 Blog
Ep18.1 สอนสร้างหน้า Blog ( Create Blog ) 18:1 น.
  1. การสร้างหน้า blog.html
  2. ภาพรวมของหน้า blog มีอะไรบ้าง
  3. ทบทวนความรู้โครงสร้างหน้าเว็บ grid bootstrap
  4. สร้างปุ่มสำหรับแยกประเภทบทความต่างๆ
Ep18.2 สอนสร้างหน้า Blog ( Grid Blog ) 7:42 น.
  1. สอนการสร้างส่วนของ Grid Blog
  2. เก็บรายละเอียดหน้า Blog ต่างๆ
Ep18.3 สอนสร้างหน้า Blog Detail 17:26 น.
  1. สร้างหน้า blog detail ไว้สำหรับแสดงบทความในเนื้อหานั้นๆ
  2. ปรับเปลี่ยน style ในส่วนของ header ให้มีแสงที่ทึบ เพื่อที่จะได้แสดงข้อความแบบเห็นได้ชัดมากยิ่งขึ้น
  3. เรียนรู้การใช้งานเครื่องมือ ckeditor สำหรับสร้าง Code ขึ้นมา คล้ายๆ โปรแกรม Word ที่เราคุ้นเคย
Ep18.4 สอนสร้างหน้า Blog Detail ( owl carousel ) 19:15 น.
  1. เรียนรู้การใช้งาน owl carousel 2
  2. การติดตั้ง owl carousel 2 ผ่าน npm
  3. พาอ่าน Documents หรือเอกสารในการใช้งานที่อยู่ใน GIthub ของ owl carousel 2
  4. สอนเทคนิคการใช้งาน owl carousel 2 ให้รองรับมือถือ
Ep18.5 สอนสร้างหน้า Blog Detail ( Facebook Comments ) 15:59 น.
  1. สอนการติดตั้ง Facebook Comments Plugin ไว้สำหรับ ให้ผู้อ่านบทความทั่วไปสามารถแสดงความคิดเห็นได้
  2. ปรับแต่ง Facebook Comments ให้รองรับมือถือ
  3. พูดเรื่องการทำระบบ Blog ผ่าน Query String
  4. เมื่อทำหน้านี้เสร็จแล้วก็ให้ทำการ Git Commit เก็บ Code ไว้ และทำการ push ขึ้น Git Server
  5. นำเว็บไซต์ที่เราทำเสร็จแล้วใน Ep นี้ทำการ Deploy เข้าสู่ Firebase Hosting และให้ทุกคนนำส่งการบ้าน
Chapter 19 WebBlog #4 Contact
Ep19 #WebBlog สอนสร้างหน้า Contact (Homework #10) 43:35 น.
  1. ทบทวนความรู้เก่า Bootstrap4
  2. แก้ไข navbar ทั้งหมด ให้แสดงผลถูกต้อง
  3. สร้างหน้า contact.html
  4. สร้าง card แสดงรายละเอียด
  5. สร้าง form สำหรับส่งข้อความ
  6. ทำความเข้าใจกับ form
  7. นำเว็บไซต์ที่เราทำเสร็จแล้วใน Ep นี้ทำการ Deploy เข้าสู่ Firebase Hosting และให้ทุกคนนำส่งการบ้าน
Chapter 20 WebBlog #5 Fixed Bug
Ep20.1 Fixed WebBlog Owl-Carousel 10:37 น.
Ep20.2 Fixed WebBlog Navbar-brand Responsive 6:19 น.
Ep20.3 Fixed WebBlog Page Title 7:57 น.
Ep20.4 WebBlog reCAPTCHA 11:09 น.
  1. ทำความเข้าใจเกี่ยวกับ reCAPTCHA
  2. ติดตั้ง reCAPTCHA ลงบนหน้าเว็บไซต์
  3. สร้าง Responsive reCAPTCHA ให้รองรับมือถือ
Ep20.5 WebBlog On To Top 17:11 น.
  1. สร้าง On To Top ปุ่มสำหรับคลิกเพื่อเลื่อนขึ้นบนสุดของหน้าเว็บ
  2. เนื้อหาในหน้านี้จะใช้ในส่วนของ jquery เข้ามาร่วมด้วย ผมอธิบายอย่างละเอียดครับ
Ep20.6 ทบทวนการทำงานที่ผ่านมาใน Ep นี้ 8:55 น.
  1. แก้ไข Carousel ให้แสดงผลถูกต้อง
  2. แก้ไข Navbar-brand ให้แสดงผลถูกต้อง
  3. แก้ไข Function Carousel ให้ทำงานเฉพาะหน้าของมัน
  4. เพิ่ม reCAPTCHA เข้ามาใช้งาน
  5. ปรับปรุง reCAPTCHA ให้รองรับมือถือ (Responsive)
  6. เพิ่มปุ่ม On To Top
Chapter 21 WebBlog #6 Plugins
Ep21.1 การใช้งาน Favicons เพิ่ม icon สำหรับเว็บไซต์ 8:34 น.
Ep21.2 เรียนรู้การตั้งค่า SEO meta tag Search Engine, Google, Facebook 10:27 น.
Ep21.3 สอนการใช้งาน Sharing Debugger - Facebook และ Pagespeed Insight 7:20 น.
Ep21.4 สอนการติดตั้งในส่วนของ Social Sharing Platforms 19:28 น.
Ep21.5 สอนการติดตั้ง icon บนหน้าจอมือถือ 3:56 น.
Chapter 22 สอนการสมัครใช้งาน Domain & Host Server
Ep22.1 การสมัครใช้งาน Domain & Host 20:31 น.
Ep22.2 สอนการใช้งาน FileZilla การอัพโหลดไฟล์ขึ้น Server 7:27 น.
Ep22.3 สอนการติดตั้ง SSL Certificates 15:49 น.
  1. ตรวจสอบ email ที่ได้รับหลังจากการซื้อบริการ Domain & Hosting
  2. ติดตั้ง SSL Certificates
  3. เรียนรู้การใช้งาน Filezilla
  4. เรียนรู้การอัพโหลดโปรเจคขึ้น Server
Chapter 23 สอนการเขียน PHP CRUD ( Create Read Update Delete)
Ep23.1 การเชื่อมต่อฐานข้อมูล ( Setup ) 26:52 น.
  1. การเริ่มต้นสร้างไฟล์
  2. พื้นฐานการใช้ tag php
  3. การสร้าง Database
  4. สร้างไฟล์การเชื่อมต่อฐานข้อมูล
  5. อธิบายโอกาสที่จะเกิด Error ต่างๆ และวิธีการแก้ไข
Ep23.2 เพิ่มข้อมูล ( Create ) 27:10 น.
  1. เก็บผลไม้เข้าตะกร้า (ประกาศตัวแปรเก็บค่า)
  2. เขียนคำสั่งให้พนักงาน (เขียนคำสั่ง sql)
  3. สั่งให้พนักงานนำผลไม้ไปส่งให้ร้านค้า (ประมวณผล query)
  4. เช็คว่าพนักงานส่งสินค้าสำเร็จหรือไม่
  5. อธิบายในส่วนของการ include และ required
Ep23.3 เรียกดูข้อมูล ( Retrive ) 23:06 น.
  1. ประกาศตัวแปร เพื่อเก็บค่า SQL
  2. เรียนรู้การใช้งานคำสั่ง MySQLi_result::$num_rows
  3. 3.เรียนรู้การใช้งานคำสั่ง MySQLi_Result::fetch_assoc()
  4. เรียนรู้การใช้งานคำสั่ง MySQLi_Result::fetch_row()
  5. เรียนรู้การใช้งานคำสั่ง MySQLi_Result::fetch_array()
  6. เรียนรู้การใช้งานคำสั่ง MySQLi_Result::fetch_object()
Ep23.4 การแก้ไขข้อมูล ( Update ) 22:58 น.
  1. เรียนรู้เทคนิคการค้นหา sql ( update )
  2. ทำความรู้จักกับ query string และวิธีใช้งาน
  3. การใช้งาน isset (ตัวแปรนั้นๆ มีการกำหนดขึ้นมาหรือไม่)
  4. การเช็คเงื่อนไข การใช้งานต่างๆ
Ep23.5 การลบข้อมูล ( Delete ) 13:51 น.
  1. เรียนรู้การใช้งาน คำสั้ง Delete ข้อมูล
  2. เรียนรู้คำสั่ง MySQli::$affected_rows
  3. การใช้งาน isset (ตัวแปรนั้นๆ มีการกำหนดขึ้นมาหรือไม่)
  4. การเช็คเงื่อนไข การใช้งานต่างๆ
Chapter 25 WebBlog #7 Layout Website
Ep25.1 สอนการสร้าง Layout ใหม่ทั้งหมดด้วย php 24:31 น.
  1. การจัดการหน้าเว็บ Layout เปลี่ยนแปลง .html ทั้งหมดเป็น .php
  2. สร้างไฟล์ navbar.php เพื่อเป็น Components ใช้ในทุกๆหน้า
  3. การเขียนเช็คเงื่อนไขเมนูต่างๆให้สามารถ active ได้ในทุกเมนู
  4. 4. การใช้งานคำสั่ง $_SERVER['SCRIPT_FILENAME']
  5. การใช้งานคำสั่ง basename()
  6. เรียนรู้การใช้งาน Git local และ Git Server อีกครั้ง
Ep25.2 สอนการสร้าง Layout จัดการ Footer 14:39 น.
  1. การจัดการหน้าเว็บในส่วนของ Footer
  2. เทคนิคการเขียน css active menu
  3. การเขียนเช็คเงื่อนไขเมนูต่างๆให้สามารถ active ได้ในทุกเมนู
Ep25.3 สอนการสร้าง Layout จัดการ Parallax 11:56 น.
  1. การจัดการโครงสร้างของ Parallax
  2. แก้ไข warning JSON ของ Parallax
  3. สอนวิธีการจัดการกับ Error ต่างๆ
Chapter 26 WebBlog #8 Blog System
Ep26.1 หน้าแสดงบทความ สร้างฐานข้อมูล 8:51 น.
  1. การสร้างฐานข้อมูลด้วย PhpMyAdmin
  2. การวิเคราะห์ระบบบทความ
Ep26.2 หน้าแสดงบทความ ดึงบทความทั้งหมดมาแสดง 16:15 น.
  1. การเชื่อมต่อ Database
  2. ดึงข้อมูลบทความมาแสดงด้วย PHP MySQLi
  3. แสดงบทความทั้งหมดด้วย fetch_array()
Ep26.3 หน้าแสดงบทความ ดึงบทความจาก ID 24:49 น.
  1. การเชื่อมต่อ Database
  2. ดึงข้อมูลบทความตาม ID มาแสดงด้วย PHP MySQLi
  3. แสดงบทความด้วย fetch_array()
  4. ตรวจสอบการพิมพ์ Query String มาไม่ถูกต้อง
Ep26.4 หน้าแสดงบทความ การจัดการ tag 19:07 น.
  1. แยกประเภทในแต่ละ tag
  2. แก้ไข Database เพิ่มในส่วนของ status เข้าไป
  3. เช็คความปลอดภัยของ Query String
Ep26.5 หน้าแสดงบทความ ตรวจสอบสถานะของบทความ 11:13 น.
  1. จัดการแสดงข้อความเมื่อหาข้อมูลไม่เจอ
  2. ปรับเปลี่ยน Content ในส่วนของบทความ ในหน้า Index ให้เชื่อมต่อ Database
  3. เพิ่มการตรวจสอบสถานะว่า บทความนั้นๆ เผยแพร่อยู่หรือไม่
Ep26.6 หน้าแสดงบทความ active tag & change image path 14:51 น.
  1. ตั้งค่า active Button tag
  2. แก้ไข css ตอน hover Button ของ tag
  3. เปลี่ยนการใช้งานลิ้งรูปภาพให้เป็นแบบ เรียกจากภายในเครื่องของเรา
Ep26.7 หน้าแสดงบทความ สุ่มบทความมาแสดง 20:59 น.
  1. สุ่มบทความมาแสดงโดยใช้คำสั่ง RAND() ของ SQL
  2. แสดงข้อมูลใน Carousel
  3. ตัวอย่างการเขียน Function อย่างง่าย
Chapter 27 WebBlog #9 Contact System
Ep27.1 หน้าติดต่อเรา (ออกแบบฐานข้อมูล) 4:20 น.
  1. เกริ่นนำบทเรียนใน Ep นี้ทั้งหมด
  2. ออกแบบฐานข้อมูลสำหรับการติดต่อเรา
Ep27.2 หน้าติดต่อเรา (จัดการ Form) 20:48 น.
Ep27.3 หน้าติดต่อเรา (reCAPTCHA Client & Server) 15:19 น.
  1. จัดการ reCAPTCHA ฝั่งหน้าเว็บไซต์ (Client)
  2. สอนการอ่าน docs วิธีใช้งาน reCAPTCHA ฝั่ง Server
  3. ฝึกการใช้งาน file_get_contents
  4. verification reCAPTCHA ฝั่ง Server
Ep27.4 หน้าติดต่อเรา (Create Contact) 11:59 น.
  1. สอนการสร้างข้อมูลในส่วนของ Contact ลงใน Database
  2. ตรวจสอบการทำงานของระบบ
Ep27.5 หน้าติดต่อเรา ( Line Notify Push Notification ) 35:45 น.
  1. วิธีสมัคร Line Notify
  2. วิธี generate token
  3. ทบทวนของเดิม
  4. ตั้งค่า Api และ Token
  5. การกำหนดค่าตัวแปรข้อความที่จะส่งไปยัง line
  6. ตั้งค่า Header Option
  7. เรียกใช้งาน API
  8. 8. เทสระบบ ส่ง line
  9. 9. แก้ไขในส่วนของการส่ง line ให้เว้นบรรทัดกัน
Ep27.6 หน้าติดต่อเรา ( Line Notify รวมกับ Create Contact ) 16:20 น.
  1. รวมระบบ Line Notify เข้ากับระบบ สร้างข้อมูล
  2. ตรวจสอบการใช้งาน
Chapter 28 Workshop AdminBlog #10 Overview
Ep28.1 Overview Admin 15:10 น.
Ep28.2 Review Code Admin 23:26 น.
Chapter 29 Database Mysql Server
Ep29.1 การสร้าง Database Mysql server 12:23 น.
Chapter 30 การใช้งาน Meta tag และการ Debug Facebook
Ep30.1 การใช้งาน Meta tag และการ Debug Facebook 15:23 น.
Ep30.2 การแชร์บทความลง Facebook ตาม ID แต่ละบทความ 15:54 น.
Chapter 31 Admin Management
Ep31.1 Admin Management การสร้างฐานข้อมูล Admin 10:11 น.
Ep31.2 Admin Management การสร้าง Form สำหรับเพิ่มข้อมูล Admin 11:30 น.
Ep31.3 Admin Management การเพิ่มข้อมูลลงฐานข้อมูล 14:05 น.
Ep31.4 Admin Management การเข้ารหัส Password Hash 10:21 น.
Ep31.5 Admin Management โชว์ข้อมูลรายชื่อ Admin 10:02 น.
Ep31.6 Admin Management การแสดง Form สำหรับแก้ไขข้อมูล 20:15 น.
Ep31.7 Admin Management การแก้ไขข้อมูลลงฐานข้อมูล 17:14 น.
Ep31.8 Admin Management การตรวจสอบ Username ให้ไม่ซ้ำกัน 15:22 น.
Ep31.9 Admin Management การลบข้อมูล Admin 23:25 น.
Chapter 32 Admin Login & Authentication
Ep32.1 Admin Login การสร้างระบบ Login 33:35 น.
  1. การสร้างระบบ Login
  2. Verify Password
  3. สร้าง Session ไว้ใช้งาน
Ep32.2 Admin Login การแสดงข้อมูล Last Login 16:14 น.
  1. แสดงข้อมูลเข้าสู่ระบบครั้งล่าสุด
  2. การแก้ไขเวลาในดาต้าเบส
  3. เรียนรู้การใชงาน Format Datetime
Ep32.3 Admin Authentication การกำหนดสิทธิ์เข้าใช้งานในแต่ละเมนู 24:44 น.
Chapter 33 Admin Articles
Ep33.1 Admin Articles Create Form 18:57 น.
Ep33.2 Admin Articles CKEditor & Filemanager 15:48 น.
Ep33.3 Admin Aritcles Config Filemanager 17:44 น.
Ep33.4 Admin Articles Upload Image 17:22 น.
Ep33.5 Admin Articles Validate Image 7:25 น.
Ep33.6 Admin Articles การเพิ่มข้อมูลลงฐานข้อมูล 25:16 น.
Ep33.7 Admin Articles การแสดงข้อมูลบทความ 16:25 น.
Chapter 34 Admin แก้ไขระบบบทความ
Ep34.1 เริ่มต้นการเพิ่มไฟล์แก้ไขข้อมูลบทความ 10:35 น.
Ep34.2 เลือกข้อมูลบทความขึ้นมาแสดงในช่อง input 11:15 น.
Ep34.3 แสดงข้อมูล detail, tag, toggle swich เพื่อการแก้ไข 16:35 น.
Ep34.4 Form Upload Image อธิบายการแก้ไขรูปภาพ 16:16 น.
Ep34.5 Upload Image ด้วย PHP 10:10 น.
Ep34.6 การเช็คไฟล์อัพโหลด 10:32 น.
Ep34.7 นำข้อมูลการแก้ไขเข้าสู่ Database 25:24 น.
Bonus 1 วิเคราะห์ตัวอย่างระบบขายของออนไลน์
ติดตั้งโปรแกรม MySQL Workbench ดูตัวอย่างฟรี 30:44 น.
เริ่มต้นสร้าง Model รายชื่อลูกค้า Members #1 14:32 น.
สร้าง Table ประภทสินค้าและรายละเอียดสินค้า Products #2 8:48 น.
วิเคราะห์ใบสั่งซื้อสินค้า จากใบเสร็จจริงๆ Orders #3 7:00 น.
เชื่อมความสัมพันธ์ของข้อมูล และสร้างรายละเอียดใบเสร็จ Order Details #4 13:46 น.
สร้างฐานข้อมูลทั้งหมดด้วยคำสั่ง Forward Engineer #5 13:18 น.
แก้ไขโครงสร้างฐานข้อมูล และใช้คำสั่ง Sychronize Model #6 7:00 น.
Bonus 2 Freelance
Bonus 2 เทคนิคการเป็น Freelance 41:25 น.
  1. สอนการวิเคราะห์ระบบ
  2. เรียนรู้ความต้องการของระบบจากลูกค้า
  3. สอนการใช้งานเว็บไซต์ Flowaccount การจัดการด้านบัญชี
  4. การทำบัญชี, การทำภาษี
  5. การประเมินราคาของโปรเจค
  6. การทำใบเสนอราคา การทำใบวางบิล การทำใบเสร็จรับเงิน
  7. อธิบายเกี่ยวกับเรื่อง ภาษี หัก ณ ที่จ่าย
Bonus 3 Code Project sClass1 Final (แจกฟรี สำหรับนักเรียน)
Bonus 3 การติดตั้ง Code Project sClass1 Final ดูตัวอย่างฟรี 15:26 น.
ดาวน์โหลดระบบ Weblog sClass1 Final 30:44 น.

หัวข้อ เนื้อหาหลัก

พื้นฐาน HTML CSS เริ่มต้น Bootstrap4 Git Version Control เริ่มสร้าง Workshop WebBlog สมัครใช้งาน Domain & Host Server สอนการเขียน PHP CRUD สร้าง Layout ใหม่ ด้วย php ระบบหลังบ้าน Admin Bonus1 วิเคราะห์ระบบขายของออนไลน์ Bonus2 เทคนิคการเป็น Freelance Bonus3 Code Project Bonus ราคาคอร์สเรียนทั้งหมด แพ็คเก็จ Starter Course HTML5 CSS แพ็คเก็จ Basic Course HTML5 CSS Bootstrap4 + Git แพ็คเก็จ Premium FullCourse HTML5 CSS Bootstrap4 PHP MySQLi
AppzStory Studio
เรียนแล้วติดปัญหา จะต้องทำยังไง ?

ผู้สอนจะคอยอยู่ช่วยเหลือ ให้คำแนะนำ แก้ปัญหาต่างๆที่นักเรียนเจอ ตั้งแต่เวลา 10โมง ถึง เที่ยงคืนของทุกวัน ย้ำทุกวัน! ดังนั้นเมื่อเรียนจากที่นี้ สบายใจได้เลย ผู้สอนดูแลอย่างดีครับ

AppzStory Studio
ไม่มีพื้นฐานเลย เรียนได้หรือไม่ ?

คอร์สนี้ออกแบบมาสำหรับผู้เริ่มต้นโดยเฉพาะ และผู้สอนได้เรียบเรียงเนื้อหาให้เข้าใจง่ายที่สุด ดังนั้น ไม่มีพื้นฐานเลย ก็สามารถเรียนได้อย่างสบายๆครับ

AppzStory Studio
การันตี สิ่งที่นักเรียนจะได้คือ

เว็บไซต์ของตัวเอง ทั้งหน้าบ้าน และหลังบ้าน แบบเต็มระบบ และ ความรู้ในภาษาต่างๆ ที่ได้เรียนมาทั้งหมด เทคนิคที่มากกว่าการศึกษาพื้นฐานทั่วๆไป จากประสบการณ์เขียนระบบจริงๆของผู้สอน

ความคาดหวังของผู้สอน

คาดหวังไว้ว่า จะสอนนักเรียนทุกคน ให้สามารถสร้างเว็บไซต์ขึ้นมาด้วยตัวเอง และเรียนรู้องค์ประกอบ ทุกอย่างที่จำเป็นต่อการเริ่มสร้างเว็บไซต์ขึ้นมา เพื่อให้สามารถประกอบอาชีพ, เข้าสมัครงาน, ทำโปรเจคจบ, หรือทำโปรเจคที่ตัวเองคาดหวังไว้ ให้สำเร็จ

ค่าใช้จ่ายคอร์สนี้อยู่ที่เท่าไหร่ ?

ราคาคอร์สเรียนทั้งหมดอยู่ที่ 5,900 บาท

สิ่งที่คุณจะได้รับจากคอร์สนี้ กับเงินจำนวน 5,900 บาท คือ

พื้นฐานที่จำเป็นสำหรับการเขียนเว็บไซต์

  • การติดตั้งโปรแกรมพื้นฐานทั้งหมด
  • พื้นฐาน HTML5 CSS
  • พื้นฐาน CSS และการใช้ HTML5 CSS ร่วมกัน
  • Bootstrap4 การใช้งานจริง
  • วางโคงรสร้างหน้าเว็บไซต์ Grid System
  • Bootstrap 4 Components, Content, Utilities
  • Responsive Web Design (เว็บรองรับมือถือ)
  • Firebase Hosting
  • Workshop Landing Page
  • เรียนรู้การใช้งาน Git ร่วมกับ Bitbucket
  • Parallax Scrolling (Jarallax)
  • Owl Carousel V2 (Slide)
  • Facebook Comments Plugin
  • Font Awesome, Google Font, Favicons
  • Sharing Social, Meta tag Facebook, SEO
  • reCAPTCHA, Line Notify
  • PHP CRUD Create Read Update Delete
  • Admin Lte V3 นำมาใช้งาน
  • Domain & Host Server, SSL Certificates, FileZilla
  • CKEditor, Responsive Filemanager
  • Mysql Workbench วิเคราะห์ระบบขายของออนไลน์
  • เทคนิคการเป็น Freelance

Workshop การเขียนเว็บไซต์ Weblog เต็มรูปแบบ

  • ขอบเขตส่วนของระบบหน้าบ้าน (ผู้ใช้งานทั่วไป)
    • สามารถดูเนื้อหาที่แสดงไว้ในหน้าแรกของเว็บ
    • สามารถดูเนื้อหาที่แสดงไว้ในหน้าเกี่ยวกับเรา
    • สามารถเลือกบทความแต่ละประเภทได้
    • สามารถเลือกบทความที่ต้องการอ่านเพิ่มเติม
    • สามารถแสดงบทความต่างๆได้
    • สามารถส่งข้อความในหน้าติดต่อเราได้และแจ้งเตือนผ่าน Line Notify
  • ขอบเขตในส่วนของระบบหลังบ้าน (ผู้ดูแลระบบ)
    • สามารถ Login เข้าสู่ระบบได้
    • มีระบบแจ้งเวลาการเข้าใช้งานล่าสุด
    • หน้า Dashboard สำหรับแสดงข้อมูลทั้งหมด
    • แสดงรายชื่อ admin ทั้งหมด
    • สามารถเพิ่ม admin คนใหม่ได้
    • สามารถแก้ไขและกำหนดสิทธิ์ข้อมูลของ admin ได้
    • สามารถลบข้อมูลของ admin ได้
    • แสดงรายชื่อบทความทั้งหมด
    • สามารถเพิ่มบทความใหม่ได้
    • สามารถอัพโหลดรูปโดยใช้ Ckeditor + Responsive Filemanager ได้
    • สามารถแก้ไขข้อมูลบทความได้
    • สามารถกำหนดสิทธิ์ในการเผยแพร่บทความนั้นๆได้
    • สามารถ logout ออกจากระบบได้

เปรียบเทียบราคาคอร์สเรียนต่างๆ

Starter Course

HTML5 CSS

1,500 บาท 890 บาท

เรียนรู้พื้นฐาน HTML5 และ CSS พร้อม Mini Workshop ในการสร้างเว็บแนะนำตัวเอง

  • - ภาพรวมโปรแกรมที่ใช้ในการเขียนเว็บไซต์ต่างๆ
  • - ติดตั้ง xampp และทำความรู้จักกับ PhpMyAdmin
  • - สอนการใช้งาน Visual Studio Code โปรแกรม Text Editor
  • - พื้นฐาน Tag HTML,Block-Level and Inline Elements, การใช้งานรูปภาพ ใน HTML
  • - เรียนรู้คุณลักษณะใหม่ๆ ของ HTML5
  • - tag Html5 มีอะไรบ้าง
  • - Workshop HTML5 เขียนเว็บแนะนำตัวเอง
  • - พื้นฐาน HTML5 CSS และการใช้ HTML5 CSS ร่วมกัน
  • - Workshop HTML5&CSS การเขียนแนะนำตัวเองด้วย HTML5 + CSS
  • - เนื้อหาที่สอนจะมีตั้งแต่ Chapter1 ถึง Chapter5
สมัครเรียน Starter

Basic Course

HTML5 CSS Bootstrap4 + Git

3,500 บาท 2,490 บาท

เรียนรู้พื้นฐาน HTML5 CSS การออกแบบเว็บไซต์ให้รองรับมือถือด้วย Bootstrap4 และ workshop Landing Page สวยๆ ปิดท้ายด้วยพื้นฐานการใช้งาน Git Version Control

  • - สอนพื้นฐานที่จำเป็นสำหรับการเขียนเว็บไซต์
  • - พื้นฐาน HTML5 CSS และการใช้ HTML5 CSS ร่วมกัน
  • - workshop สร้างเว็บแนะนำตัวเองด้วย HTML5 + CSS
  • - เรียนรู้การใช้งาน Bootstrap4
  • - การติดตั้งการใช้งาน Bootstrap4
  • - workshop สร้างเว็บแนะนำตัวเองด้วย HTML5 + CSS + Bootsrap4
  • - Bootstrap4 Grid System (พื้นฐานการวางโครงสร้างหน้าเว็บไซต์)
  • - ตัวอย่างการใช้งาน Grid All Breakpoints อธิบายอย่างละเอียด
  • - Grid Bootstrap4 Mini Workshop Article
  • - วิธีการติดตั้ง Font สวยๆ ด้วย Google Fonts
  • - ภาพรวมการใช้งาน Bootstrap4 Components
  • - Bootstrap 4 Components, Content, Utilities
  • - สอนการใช้งาน Firebase Hosting
  • - Bootstrap4 Builder Layoutit
  • - Git Version Control (Bitbucket) (เรียนรู้การใช้งาน Git)
  • - การใช้งาน Git เบื้องต้น
  • - บันทึกการเปลี่ยนแปลงของ Project
  • - การใช้งาน Bitbucket & Git Repository
  • - การใช้งาน Git Bash ในโปรแกรม Visual Studio Code
  • - เนื้อหาที่สอนจะมีตั้งแต่ Chapter1 ถึง Chapter15
สมัครเรียน Basic Bootstrap

Premium FullCourse

HTML5 CSS Bootstrap4 PHP MySQLi

5,900 บาท 3,290 บาท

เรียนรู้พื้นฐานทั้งหมดด้วย HTML5 CSS Bootstrap4 PHP MySQLi ในการออกแบบสร้างเว็บไซต์ใช้งานได้จริงๆ

  • - เรียนรู้คอร์สเรียนทั้งหมด 35บทเรียน 3โบนัส
  • - Workshop การเขียนเว็บไซต์ Weblog เต็มรูปแบบ
  • - สอน Workshop การเขียนเว็บไซต์ Weblog หน้าบ้าน หลังบ้าน
  • - สอนพื้นฐานที่จำเป็นสำหรับการเขียนเว็บไซต์
  • - พื้นฐาน HTML5 CSS และการใช้ HTML5 CSS ร่วมกัน
  • - Bootstrap4 การใช้งานจริง
  • - วางโคงรสร้างหน้าเว็บไซต์ Grid System
  • - Bootstrap 4 Components, Content, Utilities
  • - Bootstrap 4 Workshop Template
  • - Firebase Hosting
  • - Workshop Landing Page
  • - เรียนรู้การใช้งาน Git ร่วมกับ Bitbucket
  • - Parallax Scrolling (Jarallax)
  • - Owl Carousel V2 (Slide)
  • - Facebook Comments Plugin
  • - Font Awesome, Google Font, Favicons
  • - Sharing Social, Meta tag Facebook, SEO
  • - reCAPTCHA, Line Notify
  • - Admin Lte V3 นำมาใช้งาน
  • - Domain & Host Server, SSL Certificates, FileZilla
  • - CKEditor, Responsive Filemanager
  • - Mysql Workbench วิเคราะห์ระบบขายของออนไลน์
  • - เทคนิคการเป็น Freelance
  • - sClass1 Final Project ระบบเว็บไซต์ที่เสร็จแล้ว แจกให้ฟรี 1 ระบบใหญ่
สมัครเรียน Premium FullCourse

    จำกัดราคาเฉพาะ 30 คนแรกเท่านั้น

    ต้องการสมัครเรียน ให้คลิกเลือกแพคเก็จที่ต้องการ

    ความรู้สึกของนักเรียนที่ได้เรียนจากที่นี่