Chương trình học
- Bức tranh Tổng thể về Lập trình WEB
-
Giới thiệu, cài đặt, cấu hình môi trường lập trình
9
- Cài đặt web server XAMPP
- Cài đặt công cụ truy vấn database HeidiSQL
- Cài đặt Composer để quản lý các gói thư viện trong PHP
- Cài đặt trình soạn thảo code Visual Studio Code IDE
- Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP
- Cài đặt nền tảng quản lý Source Code sử dụng GIT
- Cài đặt công cụ quản lý Source Code TortoiseGit
- Cài đặt chế độ Debug PHP với Visual Studio Code
- Tạo chứng chỉ SSL trên Localhost
- Tập làm quen với quản lý source code bằng GitHub 3
- Cài đặt framework Laravel 1
- Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
- Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL
7
- Phân tích các yêu cầu, nghiệp vụ của khách hàng
- Mô hình thiết kế CSDL mẫu Sunshine
- Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại
- Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend
20
- Thiết kế bố cục (layouts) cho giao diện Backend
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete)
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index
- Lưu đồ Upload file từ Client lên Server
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete
- Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar
- Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web
- Xây dựng chức năng xuất Excel
- Xây dựng chức năng xuất PDF
- Tạo chức năng Đăng nhập
- Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation)
- Kiểm tra ràng buộc dữ liệu (Validation) phía Client
- Kiểm tra ràng buộc dữ liệu (Validation) phía Server
- Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework
- AngularJS 7
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS
11
- Thiết kế bố cục (layouts) cho giao diện Frontend
- Tích hợp AngularJS vào framework Laravel
- Tạo giao diện trang chủ (index)
- Tạo giao diện trang Giới thiệu (about)
- Tạo giao diện trang Liên hệ (contact)
- Tạo trang danh sách Sản phẩm (product)
- Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart)
- Tạo trang Chi tiết Sản phẩm (product-detail)
- Tạo giỏ hàng (cart sidebar)
- Tạo trang thanh toán (checkout)
- Tạo đơn hàng và gởi mail xác nhận
-
Bonus
9
- Đa ngôn ngữ trong Laravel
- Tạo báo cáo với biểu đồ ChartJS
- Tạo khung chọn Ngày tháng cho dự án
- Tạo các trang thông báo lỗi tương ứng STATUS CODE
- Kiểm tra ứng dụng với tunnel ảo NGROK
- Phân trang trong Laravel
- Bổ sung khung xem Hình ảnh trước khi upload (preview image upload)
- Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện
- Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh
- Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
- Tài liệu tham khảo 3
- Thực hiện Đồ án 1
Sơ đồ hoạt động của Controller, đối tượng $scope
Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ví dụ đầu tiên AngularJS</title> <!-- Include thư viện Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Include script angularJS --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body ng-app="sunshineApp"> <div class="container"> <div class="row"> <div class="col-md-6" ng-controller="khachhangController"> <div class="panel panel-primary"> <div class="panel-heading">Thông tin khách hàng</div> <div class="panel-body"> Nhập họ: <input type="text" ng-model="ho"><br> Nhập tên: <input type="text" ng-model="ten"><br> <br> Tên đầy đủ của bạn: {{ fullName() }} </div> </div> </div> <div class="col-md-6" ng-controller="sanphamController"> <div class="panel panel-info"> <div class="panel-heading">Danh sách sản phẩm</div> <div class="panel-body"> <ul> <li ng-repeat="x in danhsachsanpham"> {{ x.tensanpham + ', ' + x.loai + ': ' + x.gia }} </li> </ul> </div> </div> </div> </div> </div> <script> // Khởi tạo ứng dụng angularJS var app = angular.module('sunshineApp', []); // Khai báo controller `khachhangController` app.controller('khachhangController', function ($scope) { $scope.ho = "Dương Nguyễn Phú"; $scope.ten = "Cường"; $scope.fullName = function () { return $scope.ho + " " + $scope.ten; }; }); // Khai báo controller `sanphamController` app.controller('sanphamController', function ($scope) { $scope.danhsachsanpham = [{ tensanpham: 'hoa lan', loai: 'hoa tiệc cưới', gia: 5000 }, { tensanpham: 'hoa hồng', loai: 'hoa tình yêu', gia: 2000 }, { tensanpham: 'hoa tươi', loai: 'hoa văn phòng', gia: 3000 } ]; }); </script> </body> </html>
Mục lục
Các bài học
Bài học trước Bài học tiếp theo
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
- Bức tranh Tổng thể về Lập trình WEB
-
Giới thiệu, cài đặt, cấu hình môi trường lập trình
9
- Cài đặt web server XAMPP
- Cài đặt công cụ truy vấn database HeidiSQL
- Cài đặt Composer để quản lý các gói thư viện trong PHP
- Cài đặt trình soạn thảo code Visual Studio Code IDE
- Tạo tên miền ảo trên máy cục bộ (virtual host on localhost) bằng XAMPP
- Cài đặt nền tảng quản lý Source Code sử dụng GIT
- Cài đặt công cụ quản lý Source Code TortoiseGit
- Cài đặt chế độ Debug PHP với Visual Studio Code
- Tạo chứng chỉ SSL trên Localhost
- Tập làm quen với quản lý source code bằng GitHub 3
- Cài đặt framework Laravel 1
- Tìm hiểu mô hình kiến trúc MVC vận hành trong framework Laravel 4
- Sử dụng Template Engine để trình diễn nội dung trong các VIEW 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế CSDL
7
- Phân tích các yêu cầu, nghiệp vụ của khách hàng
- Mô hình thiết kế CSDL mẫu Sunshine
- Khởi tạo database sunshine, thiết lập kết nối CSDL trong Laravel
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục phẳng
- Tạo cấu trúc table bằng tính năng MIGRATION trong Laravel - Danh mục có liên kết khóa ngoại
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục phẳng
- Tạo dữ liệu ban đầu cho CSDL bằng tính năng SEED trong Laravel - Danh mục có liên kết khóa ngoại
- Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Ánh xạ CSDL và Laravel 3
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Backend
20
- Thiết kế bố cục (layouts) cho giao diện Backend
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (index)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (create)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (edit)
- Xây dựng chức năng CRUD (Thêm, Sửa, Xóa, Xem) danh mục phẳng - Loại sản phẩm (delete)
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Index
- Lưu đồ Upload file từ Client lên Server
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Create
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Edit
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Delete
- Xây dựng danh mục Sản phẩm có chức năng upload nhiều Hình ảnh cùng lúc
- Xây dựng danh mục Sản phẩm có chức năng upload hình ảnh - Bổ sung menu vào sidebar
- Xây dựng chức năng xuất biểu mẫu và In ấn trực tiếp trên web
- Xây dựng chức năng xuất Excel
- Xây dựng chức năng xuất PDF
- Tạo chức năng Đăng nhập
- Lưu đồ Kiểm tra ràng buộc dữ liệu (Validation)
- Kiểm tra ràng buộc dữ liệu (Validation) phía Client
- Kiểm tra ràng buộc dữ liệu (Validation) phía Server
- Bài tập tổng hợp - Tạo các chức năng Backend cho trang web đọc Truyện Tranh và Tiểu Thuyết Online sử dụng Laravel framework
- AngularJS 7
-
Dự án thực tế mẫu - Trang web bán hàng trực tuyến - Thiết kế Frontend sử dụng AngularJS
11
- Thiết kế bố cục (layouts) cho giao diện Frontend
- Tích hợp AngularJS vào framework Laravel
- Tạo giao diện trang chủ (index)
- Tạo giao diện trang Giới thiệu (about)
- Tạo giao diện trang Liên hệ (contact)
- Tạo trang danh sách Sản phẩm (product)
- Tạo nút Thêm vào giỏ hàng cho từng sản phẩm (add-to-cart)
- Tạo trang Chi tiết Sản phẩm (product-detail)
- Tạo giỏ hàng (cart sidebar)
- Tạo trang thanh toán (checkout)
- Tạo đơn hàng và gởi mail xác nhận
-
Bonus
9
- Đa ngôn ngữ trong Laravel
- Tạo báo cáo với biểu đồ ChartJS
- Tạo khung chọn Ngày tháng cho dự án
- Tạo các trang thông báo lỗi tương ứng STATUS CODE
- Kiểm tra ứng dụng với tunnel ảo NGROK
- Phân trang trong Laravel
- Bổ sung khung xem Hình ảnh trước khi upload (preview image upload)
- Tạo API trong Laravel và sử dụng AngularJS để hiển thị giao diện
- Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh
- Danh sách Đồ án xây dựng trang web sử dụng LARAVEL 2
- Tài liệu tham khảo 3
- Thực hiện Đồ án 1
Bài học trước Bài học tiếp theo
Menu Tiện ích
Menu Hướng dẫn Học tập
❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜
Thực hiện các bước tuần tự theo nội dung Bài học nhé!