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

Add Kendo UI into Angular Quickstart sample

SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects.

To use Kendo UI components for Angular with SystemJS, you have to explicitly list the package entry points. This article demonstrates how to implement the required configuration when you use the Angular Quickstart project template.

The source code for the completed sample project is available on GitHub at telerik/kendo-angular-quickstart.

Read More

Beginning Kendo UI

1. What is Kendo UI

Kendo UI is a comprehensive framework which comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library. It provides AngularJS and Bootstrap integration and is also distributed as part of several product units that you can choose from depending on your project requirements.
Install kendo ui core for jsp anh html application:

• Step 0 Dowload from https://github.com/telerik/wrappers-getting-started/tree/master/jsp/jsp-episode1/WebContent OR Download full files from download any of the Kendo UI bundles to local computer. 
• Step 1 Extract the /js and /styles directories from the bundle archive and copy them to your web application root directory.
  Step 2 Include the Kendo UI JavaScript and CSS files in the head tag of your HTML document. Verify that the common CSS file is registered before the theme CSS file.
• Step 3 Initialize a Widget.
  The following example demonstrates how to initialize the DatePicker widget.
  

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

HTML attribute vs. DOM property in Angular

1-HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.
Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

• A few HTML attributes have 1:1 mapping to properties. id is one example.
  
• Some HTML attributes don't have corresponding properties. colspan is one example.
  
• Some DOM properties don't have corresponding attributes. textContent is one example.
  
• Many HTML attributes appear to map to properties ... but not in the way you might think!
  

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

datatables - datatables.net

1-Datatables trong spring mvc

Introduction

DataTables operates on the principle of progressive enhancement, whereby an enhanced and interactive table will be presented to the end user if their browser has the required capabilities. When you initialise the jQuery.dataTable object, information about the table is read directly from the HTML page. In combination with the default values for the features in DataTables, this makes it very easy to integrate directly into your web-site or web-application. Optionally, you can use the initialisation parameters to load data from locations other than the DOM, such as a server-side processing script or an Ajax obtained JSON file.

Read More