Kỳ trước, mình đã giới thiệu về sự khác nhau giữa Web tĩnh và Web động. Hai khái niệm này không phải là mới nhưng nó luôn hiện hữu trong công việc thường ngày của một lập trình viên Web. Web tĩnh đã đủ chức năng để hiển thị một trang Web. Vậy tại sao lại phải sử dụng Web động? Web động có thứ gì mà lại được sử dụng một cách rộng rãi trong cuộc sống hiện nay? Trong bài viết này, mình sẽ giới thiệu về những ưu điểm mà chỉ Web động mới có. Tại phần cuối, mình sẽ hướng dẫn cách xây dựng một trang Web động đơn giản.
Nội dung
Những ưu điểm của web động
Dễ dàng bảo trì mã nguồn
Hãy thử tưởng tượng bạn muốn thay đổi giao diện và chức năng của một trang Web tĩnh. Bạn sẽ phải truy cập trực tiếp vào từng trang HTML, từng dòng mã CSS, từng dòng mã JS để sửa đổi mã nguồn. Trong trường hợp trang Web của bạn là một trang mua sắm hay mạng xã hội, số lượng mã nguồn mà bạn cần sửa vô cùng lớn. Bạn sẽ gặp khó khăn trong việc theo dõi những thay đổi của mã nguồn, đồng thời việc thay đổi này cũng sẽ tiêu tốn một khoản chi phí thời gian kha khá.
Với một trang Web động, mã nguồn của trang Web không do bạn trực tiếp viết ra, việc này được chuyển giao cho một phần mềm / một ngôn ngữ chuyên dụng. Do đó, để thay đổi giao diện chức năng của trang Web, bạn không cần phải sửa trực tiếp trên mã nguồn của nó. Thay vào đó, bạn sẽ cài đặt / lập trình để phần mềm / ngôn ngữ khác đảm nhiệm việc đó. Việc này giảm bớt các công tác giống nhau, số lượng dòng code mà bạn cần thay đổi, giúp tối ưu chi phí thời gian hơn.
Dễ dàng cập nhật trang Web
Nếu mục tiêu của bạn là liên tục thay đổi, cải thiện giao diện trang Web,sử dụng công nghệ mới vào trang web thì việc sử dụng Web động sẽ là một khởi đầu tốt. Trong Web động, các thành phần của trang web được lưu trữ như các hàm chức năng. Để nâng cấp trang Web, bạn sẽ viết thêm mã nguồn cho các hàm đó và tất cả những thay đổi của trang web sẽ được cập nhật khi hàm chức năng đó chạy. Nhờ vậy, bạn chỉ cần thay đổi một vài dòng code và không cần phải thay đổi từng thành phần của trang Web. Việc này sẽ giúp việc nâng cấp trở nên đơn giản và giảm thiểu chi phí thời gian. Ví dụ nếu bạn cần thay đổi vị trí một button trên trang Web, bạn chỉ cần thay đổi mã nguồn của hàm đảm nhiệm việc hiển thị button đó.
Dễ dàng điều hướng trang Web
Khi bạn sử dụng Web động cho trang Web, việc điều hướng cho các trang sẽ trở nên đơn giản như việc truyền tham số cho một hàm chức năng. Ví dụ, hệ thống điều hướng của bạn sử dụng Web động và bạn muốn xoá một trang bất kì trong trang Web, bạn chỉ cần thay đổi mã nguồn trong hệ thống điều hướng mà không cần phải tác động trực tiếp tới trang Web cần xoá. Điều này giúp bạn kiểm soát việc điều hướng tốt hơn. Ngoài ra, bạn cũng có thể thay đổi nội dung của một trang Web trước khi nó được gửi tới máy khách.
Tạo khuôn mẫu cho trang Web
Các trang Web đều có bố cục bao gồm headers, footers, side menu với cùng một nội dung và giao diện hiển thị. Việc tối ưu nhất sẽ là tạo một khuôn mẫu (template) và áp dụng nó cho các trang khác. Nếu bạn sử dụng Web tĩnh, việc bạn cần làm là copy và paste khuôn mẫu này và sửa đổi nội dung của từng trang một. Điều này có thể gây ra lỗi và khiến cho giao diện của trang Web không đồng nhất. Để xử lý tình huống này, bạn sẽ cần tới Web động. Các hàm chức năng trong Web động sẽ giúp bạn sử dụng khuôn mẫu có sẵn, thay đổi nội dung và tạo các trang tương tự tuỳ theo yêu cầu. Việc này giúp giao diện ở từng trang đồng nhất, những thay đổi của khuôn mẫu sẽ luôn được áp dụng cho những trang Web khác.
Khi nào thì sử dụng Web động?
Tuy Web động có những lợi thế vượt trội hơn so với Web tĩnh nhưng việc triển khai một Web động sẽ rất mất chi phí thời gian ban đầu và tốn rất nhiều không gian bộ nhớ. Do đó, Web động sẽ không có ích khi trang Web của bạn chỉ chứa một hoặc một vài trang (Ví dụ như Portfolio, giới thiệu sản phẩm, blog cá nhân …). Việc áp dụng Web động cho những trang web này sẽ rất mất thời gian và không mấy hiệu quả. Web động chỉ nên được sử dụng cho các trang Web lớn với hệ thống thông tin phức tạp, nội dung và giao diện thay đổi liên tục.
Xây dựng một Web động đơn giản
Mình sẽ sử dụng Java làm ngôn ngữ phía Server để xây dựng một trang Web có chức năng đăng nhập và điều hướng sang một trang khác khi đăng nhập đúng. Trong khuôn khổ của bài viết, mình chỉ đề cập tới mã nguồn trang Web và không đi sâu vào từng công nghệ sử dụng.
Những công nghệ trong bài:
Tạo File index.jsp chứa giao diện đăng nhập
<%-- Created by IntelliJ IDEA. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Dynamic Web</title> </head> <body> <form action="/login" method="post"> <label for="user-name">User</label> <input type="text" id="user-name" name="user-name"> <label for="password">Password</label> <input type="text" id="password" name="password"> <button type="submit">Login</button> </form> </body> </html>
Tạo File home.jsp chứa giao diện đăng nhập thành công
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Login Success</title> </head> <body> <h1>Hello Admin</h1> </body> </html>
Viết mã Java có chức năng xác thực và điều hướng trang web
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author Duc on 5/25/2020
* @project demo-DynamicWeb-Login
**/
@WebServlet(name = "LoginServlet", urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userName = request.getParameter("user-name");
String password = request.getParameter("password");
if (userName == null | password == null ) {
response.sendRedirect("index.jsp");
} else if (userName.equals("admin") && password.equals("admin")) {
response.sendRedirect("home.jsp");
} else {
response.sendRedirect("index.jsp");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.sendRedirect("index.jsp");
}
}Đoạn mã trên sẽ xác thực tên đăng nhập và user có giá trị tương tự là admin, admin trên server. Nếu khớp, chuyển hướng sang trang home.jsp. Các trường hợp còn lại sẽ được điều hướng quay lại trang đăng nhập.
Cần lưu ý rằng, đây là một Web động, nội dung hiển thị của trang Web do chương trình viết bằng Java xử lý và gửi tới máy khách. Phía máy khách sẽ không nhìn thấy mã nguồn của chương trình này và chỉ nhận được tài liệu html với nội dung được xây dựng từ trước đó. Tương tự, việc điều hướng các trang web không do các thẻ <href> đảm nhiệm và trong tài liệu html cũng không chứa đường dẫn tới trang home.
Trên đây, mình đã đề cập tới các ưu điểm của một Web tĩnh và cách triển khai một Web tĩnh đơn giản. Hy vọng qua series bài viết này, các bạn sẽ có những kiến thức cơ bản về cách thức hoạt động của một trang Web động.
Tham khảo: https://hackernoon.com/the-advantages-of-building-dynamic-websites-bc914071a155
Author: Nguyễn Văn Đức
Đăng ký nhận bộ tài liệu học Java trên 2 trang giấy tại đây
Xem thêm: Java Coding Bootcamp là gì? Tổng quan về Java Coding Bootcamp
0 Lời bình