Ngu ngơ học làm web (46) - Cài đặt và sử dụng XAMPP

Tiếp theo của: Ngu ngơ học làm web (45) - Cơ bản về web server
------

Phần 46.       Cài đặt và sử dụng XAMPP


Như đã biết, Web Server gồm có phần cứng, hệ điều hành, phần mềm Web Server và nội dung của Website.

Phần này sẽ dựng một Web Server xem hình hài của nó như thế nào. Hiện tại, đã có sẵn phần cứng là cái Laptop, hệ điều hành là Windows 8.1 (hoặc Windows 10). Vậy còn thiếu phần mềm Web Server và nội dung của Website.

Có nhiều phần mềm Web Server đang được sử dụng hiện nay, ví dụ: Apache, Nginx, IIS, GWS.

Phần này sẽ thực hiện cài đặt Apache.

Cùng xem và làm theo clip sau, được chia sẻ bởi tác giả Thạch Phạm,


Ghi lại một số ý,

Theo wiki, XAMPP là chương trình tạo Web Server, được tích hợp sẵn: Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin, FileZilla.

Mặc dù khi tải XAMPP về, tập tin có tên là xampp-win32, tuy nhiên cài cho Windows 64-bit vẫn chạy bình thường.

Sau khi cài đặt thành công, để chạy XAMPP, vào C:\\xampp, bấm chuột phải vào tập tin xampp-control.exe, chọn Run as Administrator. Tại hàng Apache, bấm nút Start.

Chương trình Apache của XAMPP hay xung đột cổng (port) với các chương trình khác, vì vậy, nếu có lỗi, để ý cái thông báo lỗi của nó, lên google để tìm cách sửa lỗi. Ví dụ, máy này đang chạy vmware-hostd.exe, nên Apache không chạy được, phải vào Task Manager để tắt cái process vmware-hostd.exe đi.

Để kiểm tra Apache đã chạy được chưa? Mở trình duyệt, tại thanh địa chỉ, nhập vào http://localhost hoặc http://127.0.0.1. Nếu trình duyệt xuất hiện trang dashboard của XAMPP là được.

Đôi khi, Apache cũng không thể Start được, do liên quan đến mục chọn trong cột Service trên cửa sổ XAMPP Control Panel, đọc thêm về nó trên Internet.

Để đổi cổng của Apache từ 80 thành 8888, tại cửa sổ XAMPP Control Panel, hàng Apache, bấm vào nút Config, chọn Apache(httpd.conf), tìm tới hàng Listen, đổi giá trị 80 thành 8888, lưu lại, Stop và Start Apache.

Các thư mục và tập tin của “tên miền” localhost được chứa trong C:\xampp. Sẽ tìm hiểu kĩ hơn về localhost ở các phần sau.

Thư mục C:\xampp\htdocs chứa toàn bộ các nội dung sẽ được hiển thị ra ngoài, đây chính là DocumentRoot hay WebRoot.

Tạo một thư mục (ví dụ test) trong C:\xampp\htdocs, trong thư mục, tạo tập tin index.html, nhập nội dung bất kì cho tập tin index.html, ra ngoài trình duyệt, truy cập vào thư mục test để xem kết quả (http://localhost/test hoặc http://localhost/test/index.html hoặc http://localhost:8888/test hoặc http://localhost:8888/test/index.html).

Cấu trúc chung của một URL có dạng sau: Scheme://domain:port/path?query_string#fragment_id

Ở đây, mới quan tâm tới Scheme://domain:port/path, ví dụ http://localhost:8888/test.

Quan sát sẽ thấy, tại trình duyệt, khi nhập vào thanh địa chỉ một URL, kết thúc là một thư mục (ví dụ, http://localhost:8888/test), Web Server sẽ tìm trong thư mục đó xem có tập tin index không? Nếu có, nó sẽ gửi trang index.html cho trình duyệt, nếu không nó sẽ gửi toàn bộ nội dung của thư mục.

Xem thêm về XAMPP tại wiki: https://en.wikipedia.org/wiki/XAMPP

Các kí hiệu của XAMPP có nghĩa là:

- X: viết tắt của Linux, Windows, Solaris và MacOS (cross-platform: đa nền tảng); XAMPP có thể chạy trên các hệ điều hành này.

- A: viết tắt của Apache, phần mềm Web Server, là phần mềm mã nguồn mở, miễn phí, xử lý các yêu cầu gửi tới máy chủ dựa trên giao thức HTTP.

- M: viết tắt của MariaDB (tên cũ là mySQL); hệ quản trị cơ sở dữ liệu mã nguồn mở, miễn phí.

- P: viết tắt của PHP; biên dịch mã nguồn PHP

- P: viết tắt của Perl; biên dịch mã nguồn Perl

Các phần mềm có chức năng tương tự như XAMPP gồm:

- WAMP: Windows, Apache, Mysql, PHP

- LAMP: Linux, Apache, Mysql, PHP

- MAMP: Macintosh, Apache, Mysql, PHP

- WIMP: Windows, IIS, Mysql, PHP

Mở thử ứng dụng openemr: chép thư mục openemr vào trong thư mục C:\xampp\htdocs, mở trình duyệt, nhập vào đường dẫn sau: localhost:8888/openemr, để xem kết quả.

Vậy là đã dựng được một Web Server và mở được ứng dụng openemr (mặc dù chưa mở được trang giao diện, do phải cài đặt thêm một số thứ).

Trên đây là những kiến thức cơ bản về XAMPP, tạm đủ để làm các bài thực hành liên quan đến lập trình phía server như PHP, mySQL, PHP framework. Tuy nhiên, nếu rảnh nên làm thêm các cấu hình khó hơn một chút liên quan đến XAMPP sau:

- Cài đặt XAMPP vào ổ đĩa bất kì (khác ổ đĩa C:\), để không phải lo mất dữ liệu XAMPP, khi hệ điều hành bị trục trặc.

- Cấu hình tên miền ảo (virtual host), thực hiện cấu hình trên tập tin httpd-vhosts.conf, để có thể mở ứng dụng với URL kiểu như thế này: http://local.example.

- Cấu hình tên miền ảo (virtual host), thực hiện cấu hình trên tập tin httpd-vhosts.conf, để có thể mở ứng dụng với URL kiểu như thế này: http://local.example:8888.

- Cấu hình tên miền ảo (virtual host), thực hiện cấu hình trên tập tin httpd.conf, để có thể mở ứng dụng với URL kiểu như thế này: http://local.example.

- Cấu hình tên miền ảo (virtual host), thực hiện cấu hình trên tập tin httpd.conf, để có thể mở ứng dụng với URL kiểu như thế này: http://local.example:8888.

- Tạo thư mục WEBROOT trong ổ đĩa D:\ (nghĩa là thư mục WEBROOT đóng vai trò là htdocs), chuyển các dự án từ XAMPP\htdocs vào trong thư mục WEBROOT. Mục đích là để nếu phải cài đặt lại XAMPP thì các dự án đã tạo trước đó không bị ảnh hưởng.

Trong cấu hình XAMPP có hai việc nên để ý là:

Một là gắn tên miền vào một thư mục, đây là đoạn lệnh (trong tập tin httpd-vhosts.conf hoặc httpd.conf) :

<VirtualHost *:80>
    DocumentRoot "D:/WEBROOT/bansach"
    ServerName local.bansach
</VirtualHost>

Hai là gắn tên miền vào một địa chỉ IP, đây là đoạn lệnh (trong tập tin C:\Windows\System32\drivers\etc\hosts):


127.0.0.1         local.bansach
-----------
Cập nhật [6/10/2020]
-----------

Ngu ngơ học làm web (45) - Cơ bản về Web Server

Tiếp theo của: Ngu ngơ học làm web (44) - Học Bootstrap bằng tiếng Anh
------

Phần 45.       Cơ bản về Web Server


Phần này bắt đầu tìm hiểu về lập trình phía server (server-side hay backend).

Ở các phần trên, để lập trình, chỉ cần trình duyệt và một phần mềm viết mã là đủ. Tuy nhiên, khi xem trang web kết quả, đường dẫn của trang web luôn có dạng là file://, ví dụ:


Nhưng khi mở một trang web thực tế thì đường dẫn lại có dạng http:// hoặc https://. Vậy file:// và http:// khác nhau như thế nào, phần sau sẽ tìm hiểu sự khác biệt này và học thêm một số thứ liên quan đến Web Server.

Xem lại đoạn clip về quá trình lấy nội dung trang web về và hiển thị nội dung lên trình duyệt: https://www.youtube.com/watch?v=DuSURHrZG6I

Theo clip trên, đầu tiên, người dùng phải chỉ cho trình duyệt biết vị trí của tập tin HTML. Vị trí của tập tin HTML được chỉ định bằng một địa chỉ dạng URL (Uniform Resource Locator). Địa chỉ này được nhập trên thanh địa chỉ (address bar) của trình duyệt. URL cũng xuất hiện trong các thẻ của HTML, như <a href=URL>, <img src=URL>, <script src=URL>, <link href=URL>.

URL có dạng tổng quát như sau:

Scheme://domain:port/path?query_string#fragment_id

Ví dụ một số URL:

- https://en.wikipedia.org/wiki/Uniform_Resource_Locator

- http://daotao.edu.vn/e-learning/ViewCourses.php?cSval=3151&SjTemp=158


- http://daotao.edu.vn/e-learning/ViewCourses.php

Trong một URL,

- Scheme là giao thức được sử dụng để giao tiếp giữa Web Client (trình duyệt) và máy Web Server. Ví dụ: http, https, ftp, file.

- Domain là tên miền của Web Server, nơi chứa (các) trang web. Ví dụ: en.wikipedia.org, daotao.edu.vn.

- Port là cổng được sử dụng để giao tiếp giữa Web Client và Web Server, nếu không chỉ định rõ, thì giá trị của Port sẽ được ngầm hiểu là 80.

- Path là đường dẫn (thư mục) của trang web hoặc nơi chứa các tài nguyên của một Website tại Web Server. Ví dụ: wiki/Uniform_Resource_Locator, e-learning/ViewCourses.php, C:/Users/Win%208.1/Downloads/openemr/trangweb.html.

- Ngoài ra, URL cũng có thể chứa chuỗi truy vấn (query string) hoặc fragment_id (một vị trí cụ thể trong một trang web).

Đây là định nghĩa về Web Client và Web Server:

- Web Client là một chương trình có thể giao tiếp với Web Server, gửi yêu cầu và nhận thông tin từ Web Server, sau đó xử lý các thông tin nhận được để hiển thị hoặc phục vụ các mục đích khác. Trình duyệt chính là một Web Client.

- Web Server là một máy tính, cung cấp các dịch vụ WWW trên Internet. Web Server gồm có: phần cứng, hệ điều hành, phần mềm Web Server, và nội dung của website.

Theo wiki (https://en.wikipedia.org/wiki/Web_server), đôi khi khái niệm Web Server còn được sử dụng để chỉ một phần mềm, mà nó hiện thực hóa giao thức HTTP (ví dụ, phần mềm Web Server).


Xem hình minh họa Web Client và Web Server dưới đây.




Diễn giải hình trên:

- Nhà phát triển web (Web Developer) thiết kế và lập trình ra Website

- Sau khi tạo ra Website, Web Developer sẽ đăng kí một tên miền có tên www.test.com, thuê một không gian đĩa cứng trên Web Server để đặt Website của mình

- Dùng giao thức FTP để chuyển Website (từ máy cục bộ) lên Web Server

- Cuối cùng, người dùng (client) có thể truy cập đến trang www.test.com bằng cách gõ vào trình duyệt đường dẫn (URL) là http://www.test.com và bấm Enter

- Trình duyệt sẽ gửi một HTTP REQUEST tới Web Server để yêu cầu nội dung trang web

- Web Server sẽ gửi nội dung trang web (HTML) về cho trình duyệt bằng HTTP RESPONSE

Như vậy, chức năng của Web Server là: lưu trữ, xử lý và cung cấp trang web tới người dùng. Giao thức được sử dụng để giao tiếp giữa Web Server và Web Client là HTTP hoặc HTTPS.

Phần dưới đây sẽ tìm hiểu về các thành phần liên quan đến Web Server, gồm: phần cứng, hệ điều hành, phần mềm Web Server, và nội dung của Website.

Phần cứng của Web Server

Web Server là một máy chủ, có tốc độ xử lý cao, có khả năng lưu trữ nhiều dữ liệu, được bảo mật tốt, luôn luôn ở trạng thái hoạt động.

Theo trang web này http://help.sana-commerce.com/sana-commerce-83/installation/setup-web-and-database-server/hardware-requirements-for-web-and-database-servers thì, yêu cầu về phần cứng của Web Server phụ thuộc vào nhiều yếu tố, ví dụ: lượng người truy cập, kích thước của cơ sở dữ liệu, loại ứng dụng web.

Tuy nhiên, cấu hình phần cứng của Web Server có thể chỉ cần ở mức sau: bộ xử lý 2 x 1,6 GHz, RAM 3.5 GB, đĩa cứng 80GB.

Hệ điều hành của Web Server

Vì Web Server có thể là một máy chủ, hoặc là một phần mềm, nên có thể sử dụng rất nhiều hệ điều hành khác nhau, từ các hệ điều hành nhúng trong các thiết bị (máy in, router), cho tới các hệ điều hành thuộc các họ hệ điều hành khác nhau (ví dụ: Windows, Unix, Linux).

Phần mềm Web Server

Có nhiều phần mềm Web Server đang được sử dụng hiện nay, ví dụ: Apache, Nginx, IIS, GWS. Bảng dưới đây là thị phần của các phần mềm này, năm 2016 (nguồn: https://en.wikipedia.org/wiki/Web_server).

Product
Vendor
January 2016
Percent
February 2016
Percent
Change
Apache
Apache
304,271,061
33.56%
306,292,557
32.80%
0.76
IIS
Microsoft
262,471,886
28.95%
278,593,041
29.83%
0.88
Nginx
NGINX, Inc.
141,443,630
15.60%
137,459,391
16.61%
-0.88
GWS
Google
20,799,087
2.29%
20,640,058
2.21%
-0.08

Nội dung của Website trên Web Server

Nội dung của Website bao gồm toàn bộ tài nguyên giúp cho Website hoạt động. Ví dụ, mã nguồn trang web, hình ảnh, âm thanh, video, cơ sở dữ liệu.


Hình sau là một ví dụ về các thành phần của một Web Server (nguồn: https://en.wikipedia.org/wiki/LAMP_(software_bundle))




-----------
Cập nhật [19/10/2017][28/10/2016]
-----------

Ngu ngơ học làm web (44) - Học Bootstrap bằng tiếng Anh

Tiếp theo của: Ngu ngơ học làm web (43) - Làm một giao diện sử dụng Bootstrap
------

Phần 44.       Học Bootstrap bằng tiếng Anh

Bỏ ra một tiếng nghe bài giảng Bootstrap bằng tiếng Anh (Bootstrap Beginner Crash Course).


Học ngoại ngữ quan trọng ở sự rèn luyện thường xuyên.

Nghe bài giảng này được mấy cái lợi: rèn luyện tiếng Anh, xem cộng đồng thế giới họ dạy những gì, mình còn thiếu cái gì để học thêm. Chưa có tiền đi du học, cứ tưởng tượng mình đang ngồi trong lớp ở bên Tây, nghe giảng dạy bằng tiếng Anh.

Phần sau đây ghi lại một số ý,

Bootstrap là một front-end framework giúp làm giao diện web theo hướng responsive.

Bootstrap 3 phát triển dựa trên ý tưởng mobile first (mobile first approach).

Bootstrap 3 sử dụng single grid system, không hỗ trợ IE7, FF 3.6; hỗ trợ từ IE8 trở lên.

Một số ưu điểm khi dùng framework:

- Framework đã làm sẵn nhiều công đoạn, nhiều xử lý

- Người lập trình vẫn có thể tùy biến được

Bất lợi khi dùng framework:

- Mã của dự án nhiều hơn, phức tạp (bloat)

- Phải học cách sử dụng framework

Bootstrap được xây dựng và chạy dựa trên jQuery, do vậy, trong một trang web, cần tải thư viện jQuery trước thư viện Bootstrap. Nên tải các thư viện này ở cuối phần body.

Đọc thêm về respond.js

Đọc thêm về .visible và .hidden

Nên sử dụng img-responsive cho các hình ảnh trong website.

Trong lập trình theo hướng responsive, nên sử dụng đơn vị đo là “em”, ví dụ: padding: 2em 0;

Dùng thumbnail để hiển thị hình ảnh và nội dung.

Đọc thêm về Breadcrumbs: các đường link phân cấp.

Để thêm chữ MENU khi navbar bị thu nhỏ, dùng navbar-header.

Bootstrap sử dụng pull-left và pull-right tương đương với float trong CSS.

Các class liên quan đến hiển thị văn bản (typography):

- Màu chữ: text-primary, text-success, text-info, text-warning, text-danger, text-muted

- Màu nền: bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-muted

Ba cách tạo nút (button):

- <button class="btn btn-default">Button</button>

- <a href="" class="btn btn-default" role="button">Link</a>

- <input type="submit" class="btn btn-default" value="Submit">

Sức người có hạn, “rộng thì không sâu”, ý là học dàn trải quá thì sẽ không chuyên sâu vào một thứ gì đó được. Vậy từ đầu đến giờ, học nhiều thứ quá rồi, có sợ lan man quá không? Nếu xem lại Phần 1 – các công cụ để làm web, sẽ thấy còn nhiều thứ nữa cần phải học, dù gì thì vẫn đang học kiến thức để làm web thôi mà, mới chỉ ở mức cơ bản, có gì mà nhiều.

Khi biết nhiều sẽ có nhiều lựa chọn, ví dụ như tạo hiệu ứng cho một nút, có thể sử dụng JavaScript thuần, có thể sử dụng jQuery, có thể sử dụng Bootstrap, mỗi cách làm có những điểm mạnh và điểm yếu riêng, tùy từng trường hợp mà sử dụng.

Quay trở lại ứng dụng openemr, tới thời điểm này, mới chỉ biết dùng Sublime text để xem mã nguồn, mới biết dùng website demo có sẵn của nó trên Internet, mới biết làm một vài xử lý rất đơn giản, vẫn chưa biết cách để chạy được nó.

Các kiến thức đã học được cho tới thời điểm này gồm: quá trình hiển thị trang web tại trình duyệt, hiểu về thiết kế web theo hướng responsive (tùy chỉnh giao diện theo kích thước màn hình), gõ mã nhanh với Sublime text, cơ bản biết cách dùng HTML, CSS, JavaScript, jQuery, jQuery UI, JSON, Bootstrap, LESS.


Tới đây sẽ tạm thời kết thúc phần học về lập trình phía client (client side). Còn rất nhiều các chủ đề liên quan đến lập trình phía client, cứ tạm xem đó là những kiến thức nâng cao, và sẽ quay lại, sau khi học xong các phần kiến thức cơ bản khác.
-----------
Cập nhật [18/10/2017][26/10/2016]
-----------

Ngu ngơ học làm web (43) - Làm một giao diện sử dụng Bootstrap

Tiếp theo của: Ngu ngơ học làm web (42) - LESS, tùy biến Bootstrap và theme
------

Phần 43.       Làm một giao diện sử dụng Bootstrap


Đây là clip số 32: giới thiệu về giao diện sẽ làm


Đây là clip số 33: tạo Navbar


Phím tắt để tạo Navbar trong Sublime Text: bs3-navbar:responsive

Trang web giúp tạo box-shadow mẫu: http://www.cssmatic.com/box-shadow

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Company</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="header">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">   
        <div class="navbar-header">
          <div class="navbar-brand"><a href="#">Congty.com</a></div>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="main-menu">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Giới thiệu</a></li>
            <a href="#" class="btn btn-success navbar-btn navbar-right">Đăng ký</a>
          </ul>
        </div>
      </div>
    </nav>
  </div> <!-- #header -->
  <div id="content">
  </div> <!-- #content -->
  <div id="footer">
  </div> <!-- #footer -->
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

[style.css]

/*Navbar*/
#header nav {
  text-transform: uppercase;
  background: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
}

Đây là clip số 34: Call to Action, jumbotron


Sử dụng thư viện ảnh miễn phí cho phần jumbotron: https://unsplash.com/

Để hình nền tự co dãn theo kích thước của màn hình, dùng thuộc tính background-size: cover; của CSS.

[HTML]

<div id="content">
    <div id="call-to-action">
      <div class="jumbotron">
        <h1>Khóa học Bootstrap3</h1>
        <p>Hướng dẫn thiết kế website sử dụng Bootstrap3 framework</p>
        <a href="#" class="btn btn-success btn-lg">Đăng ký</a>
        <a href="#" class="btn btn-feature btn-lg">Giới thiệu</a>
      </div>
    </div>
  </div> <!-- #content -->

[CSS]

#call-to-action .jumbotron {
  padding: 150px 0;
  text-align: center;
  background: #63AFC7 url(bg.jpg) center no-repeat;
  background-size: cover;
}

#call-to-action .jumbotron h1,
#call-to-action .jumbotron p {
  color: white;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.2); 
}

#call-to-action .jumbotron .btn-feature {
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  box-sizing: border-box;
}

#call-to-action .jumbotron .btn-feature:hover {
  color: #F1F1F1;
}

Đây là clip số 35


Đây là clip số 36


Đây là clip số 37


Đây là clip số 38


Để cho một nút có chiều rộng đúng bằng các cột chứa nó, sử dụng class=“btn-block”.

Để cho nhiều phần tử của form cùng nằm trên một hàng, sử dụng class=“form-inline”.

Để cho một input có chiều rộng đúng bằng các cột chứa nó, sử dụng style="width: 100%".

Đây là clip số 39


Để cho nhiều phần tử của danh sách (ul, ol) cùng nằm trên một hàng, sử dụng class=“list-inline”.

Muốn cho chữ có màu đen nhạt (mờ đi), sử dụng class=“text-muted”

Đây là clip 40: fonticon - fontawesome – tạo biểu tượng có thể thay đổi kích thước


Mở trang web của fontawesome: http://fontawesome.io/, vào mục cheatsheet http://fontawesome.io/cheatsheet/ để lấy các biểu tượng.

Đây là clip 41: clip cuối của khóa học - Di chuyển giữa các vùng trong một trang.


Sử dụng JavaScript để điều khiển việc di chuyển giữa các vùng trong một trang.

Đọc thêm về .not() trong jQuery: https://api.jquery.com/not/

Đọc thêm về :not() trong jQuery: https://api.jquery.com/not-selector/

Ví dụ: var $result = $('a[href*="#"]:not([href="#"])').not('#myCarousel a, .modal-trigger a, .panel a').click(function(){ });

Đọc thêm về biểu thức chính quy (regular expression):



Để xóa kí tự “/” đầu tiên của chuỗi, sử dụng biểu thức chính quy sau: this.pathname.replace(/^\//, '')

Lưu lại đoạn mã để coi lại sau:

$('a[href*="#"]:not([href="#"])').not('#myCarousel a, .modal-trigger a, .panel a').click(function(){
            if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if(target.length) {
                                    if($(".navbar").css("position") == "fixed") {
                                                $('html,body').animate({
                                                            scrollTop: target.offset().top-72
                                                }, 700, 'swing');
                                    }else {
                                                $('html,body').animate({
                                                            scrollTop: target.offset().top
                                                }, 700, 'swing');
                                                }
                                                return false;
                                    }
                        }
});

Đây là toàn bộ đoạn mã và hình ảnh của trang giao diện.



Cám ơn Chickenrain.com đã chia sẻ các clip.

Ngu ngơ học làm web (42) - LESS, tùy biến Bootstrap và theme

-------

Phần 42.       LESS, tùy biến Bootstrap và theme


“LESS là một CSS preprocessor, giúp viết các đoạn mã CSS đơn giản, ngắn gọn và hiệu quả hơn, đồng thời cũng dễ quản lý hơn bằng cách thêm vào CSS các thành phần động như biến, mixins, toán tử và hàm. LESS được phát triển bởi Alexis Sellier, một lập trình viên người Đức.” (nguồn Internet)

LESS là ngôn ngữ stylesheet "động".

LESS mở rộng CSS bằng cách thêm vào nó các thành phần động như biến, mixins, toán tử và hàm. LESS chạy cả ở phía client-side (Chrome, Safari, Firefox) và server-side, cùng với Node.js và Rhino.

Đây là clip số 27: làm quen với LESS


Vào đây để đọc thêm và để tải LESS về máy: http://lesscss.org/

Vậy nếu CSS bằng LESS thì phải có một phần mềm để soạn thảo và chuyển mã từ dạng LESS sang dạng CSS. Quá trình chuyển mã từ LESS sang CSS được thực hiện ở đâu?

Thực hiện cài đặt và chạy thử để hiểu thêm về LESS.

Máy này đang chạy Windows, nên sẽ dùng phần mềm soạn thảo và chuyển mã có tên WinLess, http://winless.org/

Tải về và cài đặt. Khi cài đặt nếu máy tính chưa có thư viện .NET, khi chạy WinLess sẽ yêu cầu tải và cài đặt thư viện này.

Tạo một thư mục (ví dụ TestLESS), trong thư mục tạo hai tập tin index.html và style.less với nội dung như sau:

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
            <meta charset="UTF-8">
            <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
            <h1>Testing LESS</h1>
</body>
</html>

[style.less]

 body {
  background: red;
  color: yellow;
}

h1 {
  color: yellow;
}

Chạy chương trình WinLess, bấm vào mục Add folder để nhập vào thư mục chứa tập tin style.less, sau khi chọn thư mục xong, để ý ở cửa sổ bên phải sẽ có thông tin đường dẫn của tập tin nguồn (style.less) và tập tin sẽ được kết xuất ra (style.css).

Dùng một editor bất kì để soạn mã LESS (ví dụ Sublime Text), mỗi khi thực hiện lưu (save) bên editor là WinLess sẽ thực hiện kết xuất (chuyển mã từ dạng LESS sang dạng CSS).

Đây là clip số 28: biến, toán tử, mixins, nesting


Khai báo biến bằng từ khóa @, tiếp theo là dấu :, và cuối cùng là giá trị gán cho biến.

Ví dụ,

[style.less]

@bg: blue;
@color: white;
@border: 1px;

body {
  background: @bg;
  color: @color;
}

h1 {
  color: @color;
}

Toán tử trên biến, ví dụ: cộng, trừ, nhân, chia.

h1 {
  color: @color;
  border: @border*3 solid red;
}

Mixins là gắn toàn bộ thuộc tính của một class vào một class khác (trong CSS), ví dụ:

.big {
            font-size: 40px;
}

p {
            .big;
            border: @border*5 solid red;
}

Nesting: lồng các đối tượng trong CSS vào nhau. Ví dụ, từ mã LESS sau:

#container {
            h1 {
                        color: @color;
            }

            p {
                        border: @border;
            }
}

Khi xuất ra CSS sẽ là:

#container h1 {
  color: red;
}

#container p {
  border: 1px;
}

Đây là clip số 29: Tùy biến Bootstrap


Tùy theo nhu cầu sử dụng, có thể lựa chọn từng thành phần của Bootstrap, nhằm tối ưu dung lượng và tốc độ thực thị của Bootstrap. Để thực hiện, vào trang http://getbootstrap.com/, chọn phiên bản v3.3.7, chọn tab Customize, đánh dấu chọn các thành phần cần thiết, cuối cùng bấm nút Compile and Download để tải về và sử dụng.

Đây là clip số 30: Ghi đè giá trị CSS của Bootstrap


Có thể định nghĩa lại các class của Bootstrap theo yêu cầu. Ví dụ: .btn { background: red; }, tuy nhiên, cách này làm cho mọi phần tử sử dụng class = “btn” đều bị tác động. Có cách khác là định nghĩa một class mới, ví dụ .btn-new { background: red; }.

Để ý thứ tự áp dụng, và thứ tự ưu tiên của CSS lên các phần tử HTML. Ví dụ, viết thế này:

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

Và viết thế này sẽ có kết quả khác nhau:

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

Đây là clip số 31: theme - các mẫu giao diện mới


Thêm thư viện theme vào trang HTML: <link href="css/bootstrap-theme.min.css" rel="stylesheet">

Xem thêm về xu hướng phẳng (flat) trong thiết kế giao diện web: http://designmodo.github.io/Flat-UI/
-----------
Cập nhật [16/10/2017][22/10/2016]
-----------

Ngu ngơ học làm web (41) - JavaScript trong Bootstrap

tiếp theo của: Ngu ngơ học làm web (40) - Nav, Navbar trong Bootstrap
-------

Phần 41.       JavaScript trong Bootstrap


Đây là clip số 23: Modal – cửa sổ popup


Cửa sổ popup được gọi khi người dùng bấm vào một button hoặc một link.

Cửa sổ popup gồm ba phần: title/header, body và footer.

Cửa sổ popup thường được sử dụng để hiển thị thông báo.

Để có thể hiểu về hoạt động của modal, có thể đọc và làm theo bài viết về JS-Modal, bài viết này thực hiện tạo một modal từ HTML, CSS và JavaScript.

Ví dụ, đây là một modal đơn giản:

<!-- bấm vào nút này để bật lên modal -->
  <button id="btn-click" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show modal</button>
  <!-- modal -->
  <div id="myModal" class="modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body">
          <p>Nội dung của modal</p>
        </div>
        <div class="modal-footer"></div>
      </div>
    </div>
  </div>

Ví dụ, đây là một modal phức tạp hơn, và có rất nhiều thuộc tính chưa biết được dùng để làm gì, sau này dùng tới thì tìm hiểu chi tiết sau:

<!-- Button trigger Modal -->
          <button id="btn-click" class="btn btn-primary btn-lg" data-toggle="modal" data-show="true" data-target="#myModal">Show Modal</button>

          <!-- Modal -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">Congty.com</h4>
                </div>
                <div class="modal-body">
                  Body
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                </div>
              </div> <!-- .modal-content -->
            </div> <!-- .modal-dialog -->
          </div> <!-- .modal -->

Đây là clip số 24: Tooltip và Popover


Tooltip: dùng để hiển thị phần gợi ý, khi rê chuột vào một nút, hay một đối tượng bất kì.

Popover: giống như tooltip, tuy nhiên nội dung hiển thị nhiều hơn.

Tooltip chính là nội dung trong thuộc tính title của HTML. Có thể sử dụng hàm tooltip() của Bootstrap, để hiển thị tooltip đẹp hơn. Ví dụ,

$(document).ready(function() {
        $('#demoTooltip').tooltip();
      });

Gọi tooltip thông qua id hoặc class sẽ dẫn đến tình trạng phải viết rất nhiều các câu lệnh jQuery, để khắc phục vấn đề này, có thể gọi tooltip dựa vào thuộc tính data-toggle=“tooltip”, ví dụ:

<a href="" title="congty.com" data-toggle="tooltip">Show tooltips</a>
$(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
      }); 

Sử dụng thuộc tính data-placement để quy định vị trí hiển thị tooltip, ví dụ:

<a href="" title="congty.com" data-toggle="tooltip" data-placement="right">Show tooltip</a>

Các vị trí hiển thị tooltip gồm: auto, right, bottom, left, top.

Có thể quy định vị trí hiển thị tooltip trong JavaScript, ví dụ:

$(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({
          placement: "bottom",
        });
      }); 

Hoạt động của popover giống với tooltip, chỉ khác là có thêm thuộc tính data-content=“nội dung cần hiển thị”.

Ví dụ,

[HTML]

<a href="#" class="btn btn-primary" data-toggle="popover" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorum ipsam esse, debitis voluptatem impedit pariatur delectus. Nesciunt, ex assumenda!">Popover</a>

[JavaScript]

$(document).ready(function() {
      $('[data-toggle="popover"]').popover();
    });

Đây là clip số 25: Dropdown menu


Ví dụ, một dropdown menu đơn giản:
<div class="dropdown">
    <a href="" data-toggle="dropdown">My Account<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="">Profile</a></li>
      <li><a href="">Change Password</a></li>
      <li class="divider"></li>
      <li><a href="">Logout</a></li>
      <li><a href=""></a></li>
    </ul>
  </div>

Ví dụ, đưa dropdown menu vào thanh navbar:

  <div id="header">
    <div class="container">
      <nav class="navbar navbar-inverse">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Cong ty ABC</a>
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="main-menu">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Content</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
              <a href="" data-toggle="dropdown">My Account<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="">Profile</a></li>
                <li><a href="">Change Password</a></li>
                <li class="divider"></li>
                <li><a href="">Logout</a></li>
                <li><a href=""></a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>

Đây là clip số 26: Tabs


<!-- Nav tabs -->
            <ul class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#account" data-toggle="tab">Account</a></li>
              <li><a href="#settings" data-toggle="tab">Settings</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
              <div class="tab-pane active" id="home">HOME</div>
              <div class="tab-pane" id="account">ACCOUNT</div>
              <div class="tab-pane" id="settings">SETTINGS</div>

            </div>
-----------
Cập nhật [14/10/2017][20/10/2016]
-----------