Installation mdbootstrap 5

Step 1

Download the package

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Open Dreamweaver editor and create a HTML site.

Find a template site and copy an index.html file to your project and compose your website. And yes, it's that simple! 

Importing CSS file

To import MDB stylesheet please use the following syntax:

<!-- Font Awesome -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<!-- Google Fonts Roboto -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

 <link rel="stylesheet" href="css/mdb.min.css" />

Importing JS file

<script href="js/mdb.min.js"></script>

Run: click index.html file to open it on browser

and it works

Source code
IntegratedMaterialDesignAdminDemo


Reference document:
https://mdbootstrap.com/docs/standard/getting-started/installation/

Read More

Introduction to Bootstrap

1. What is bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.

Read More

Introduction to Cascading Style Sheets

Cascading Style Sheets or CSS is the basic technique to separate the appearance of a web page from the content represented in HTML. In this section, we give an introduction to CSS and look how they are relevant to software development with Vaadin.

As we can only give a short intruction in this book, we encourage you to refer to the rich literature on CSS and the many resources available in the web. You can find the authoratitative specifications of CSS standards from the W3C website and other literature, references, and tutorials from the Open Directory Project page on CSS, as well as from other sources .

Read More

Cắt css cho trang web đầu tiên của bạn

Lập trình viên code java hay rất e ngại khi gặp phải phần thiết kế web, tuy nhiên một chút kiến thức căn bản có thể giúp java coder có thể tự tin hơn trong việc chuyển đổi từ thiết kế của UI/UX + CUT CSS team sang file jsp hay các dạng  view khác; hoặc có thể thiết kế thô sơ cho trang web của bạn sau đó sẽ chờ đến phase nâng cấp để cải tiến giao diện. Bài viết của tác giả Dirk với tiêu đề Slice and code your first website sẽ giúp chúng ta có cái nhìn cơ bản công việc của những thành viên nhóm design như thế nào. Thậm chí java coder có thể thiết kế một chút website với Photoshop trong khi chờ đợi kết quả thiết kế từ thành viên nhóm UI/UX. Chúc mừng bạn! Nhưng bây giời bạn phải làm cái gì? Bạn làm thế nào để website của bạn có thể chạy tốt. Trong bài viết này, tác giả sẽ giải thích làm thế nào để chia ra và code website bằng html/css.

Okay,
tác giả sẽ giải thích cho bạn làm thế nào để cắt ra thành từng lát template của bạn trong Photoshop và làm thế nào để code nó trong Dreamweaver sử dụng những thẻ DIV.
Tệp PSD & HTMLcủa template này đã có sẵn để tải về và bạn sẽ dễ dàng hơn làm theo những bước chỉ ra. Xem trước cái mà tác giả đã hoàn thành.

Bước 1:

Bạn có thể bắt đầu với việc tải Slice and Code PSD.
Mở nó với Photoshop CS6 và chọn slice tool (có thể dùng Crop tool + lệnh Trim).

Read More

Vẽ biểu đồ bằng thư viện Chart.js

Cài đặt Chart.JS

<script src="${contextURL}resources/js/plugin/chartjs/chart.min.js"></script>
You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN. Detailed installation instructions can be found on the installation page.

Read More

jQuery datepicker bootstrap-datetimepicker

Datepicker Datetimepicker

datepicker để hiển thị lịch chọn ngày/tháng/năm, trong khi datetimepicker để lựa chọn giá trị có format như HH:mm:ss DD/MM/YYYY"

Read More

Closures & callback function javascript & jQuery

What is a closure?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.
The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.
You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:


	function showName (firstName, lastName) {
	​var nameIntro = "Your name is ";
	// this inner function has access to the outer function's variables, including the parameter​
	​function makeFullName () {
	​return nameIntro + firstName + " " + lastName;
	}
	​
	​return makeFullName ();
	}
	​
	showName ("Michael", "Jackson"); // Your name is Michael Jackson

Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.

Read More

Ajax jQuery căn bản

AJAX = Asynchronous JavaScript and XML. In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.

jQuery provides several methods for AJAX functionality.

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

Lưu ý:

$("selector").each(function)

=> gọi hàm function với mỗi phần tử  có cùng tên 'selector'

$("selector").click(function)

=> đăng ký hàm xử lý sự kiện click (có thể cả với change, change focus, focus mouseover, mouseover, ..) với onclick handler.

Read More

jQuery in action study - Phần 3

Nghiên cứu sử dụng các chức năng cao cấp của jQuery

3.1 Các hiệu ứng jQuery (jQuery Effects)

3.1.1 Show/Hide

Với jQuery, bạn có thể ẩn (hide) và hiện (show) các phần tử HTML với các method hide() và show().

Cú pháp:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed parameter đặc tả tốc độ của việc hiding/showing, và có thể lấy một trong các giá trị sau: "slow", "fast", "normal", hoặc milliseconds.

callback parameter là tên của một function được thực thi sau khi hoàn thành hàm hide (hoặc show).

$(selector).hide() sẽ ẩn đi những phần tử được chọn

$(selector).show() hiển thị những phần tử được chọn

Read More

jQuery in action study - Phần 2

Cài đặt và sử dụng giản đơn jQuery trong ứng dụng Web

Có 3 cách để cài đặt jQuery:

- Cài đặt jQuery lên một thư mục ở ổ đĩa cứng máy tính

- Cài đặt jQuery vào database

- Cài đặt jQuery từ một địa chỉ trên mạng internet, ví dụ Google's CDN.

Trong tài liệu này, người viết chỉ giới thiệu cách thứ nhất là cài đặt jQuery vào một thư mục ở ổ đĩa cứng máy tính.

Read More