Chương 1: CƠ SỞ LÝ THUYẾT 1. Tìm hiểu lập trình Website Xây dựng một website cần nhiều công đoạn khác nhau phối hợp với nhau mới có thể tạo nên một trang Website hoàn chỉnh. Chẳng hạn như sắp xếp bố cục, chỉnh sửa hình ảnh, xử lý sự kiện… Nhưng nói chung thì lập trình web gồm 2 phần chính là Front-end và Back-end. Lập trình Front-end: Front-end là gì, là bộ phận phần giao diện hiển thị ra thiết bị Clients.
Hay nói một cách khách Front-end chính là bộ mặt của một website. Front-end thiết kế tạo ra phần giao diện cho người dùng tương tác với trang web, là ấn tượng đầu tiên của người dùng về trang web đó. Trước khi internet băng thông rộng (khoảng trước 2007) cùng với các thiết bị được phát triển mạnh mẽ như hiện nay Front-end thực sự đóng vai trò rất hạn chế trong việc hiển thị giao diện cho người dùng, lúc đó nhu cầu thực tế là làm sao cho một ứng dụng hiển thị là đủ. Bên cạnh đó phải làm sao cho Performance (hiệu suất) đạt hiệu quả cao để người dùng không cảm thấy delay (giật) hay load (tải) chậm là đạt.
Điều này cũng dễ hiểu vì khi đó tốc độ internet là cực thấp khi mà đa số người dùng chỉ tiếp cận được với Internet dial-up, với tốc độ “rùa bò" của nó thì việc tải về văn bản thôi đã vất vả rồi chứ không nói đến hình ảnh hay animation. Sau một thời gian công nghệ dần hiện đại hơn với nhưng ADSL, DSL, VPN. đó cũng là lúc nhu cầu về một Website thẩm mỹ được đặt ra với những hình ảnh tuyệt đẹp cùng với những hiệu ứng bắt mắt bắt đầu được chú trọng. Lúc này vai trò của Front-end cũng bắt đầu được chú trọng.
Nhưng điều bất cập ở đây là sự không thông hiểu nhau giữa Designer và Front-end thường xuyên xảy ra từ thảo luận tới gay gắt mà nếu chúng ta từng ở một trong hai vị trí này sẽ thấu hiểu. Vấn đề là ở chỗ một Designer thiết kế ra giao diện và anh ta muốn chỗ nút (button) đó khi hover sẽ đổi màu, hay khi open web lên sẽ có hàng chục hiệu ứng hiện ra mà không thể nào diễn đạt bằng hình ảnh được. Điều anh ta cần làm là diễn giải ý tưởng của mình cho Front-end hiểu nhưng mọi thứ đâu dễ vậy. Sự bất đồng không 4 chỉ dừng lại ở đó khi mà HTML5 và CSS3 ra đời kéo theo sự bùng nổ công nghệ Resposive (tương thích trên mobile/tablet) làm cho việc thiết kế Layout nhiều hơn và Front-end đôi khi gặp bế tắc với những giao diện khó khi thực hiện Responsive.
Cho đến khoảng những năm gần đây, khi công nghệ phát triển Internet trở nên nhanh hơn, những bộ vi xử lý mạnh mẽ hơn cũng với những công cụ hỗ trợ ngày càng nhiều thì Front-end dần khắc phục được những yếu điểm của mình dần trở thành một phần quan trọng không thể thiếu của một Website. Tất cả mọi thứ chúng ta đang nhìn thấy trên trang web ngày nay đều có thể được thực hiện bởi một lập trình viên Front-end. Một designer tạo ra logo và đồ họa, một photographer cung cấp hình ảnh, một copywriter viết nội dung. Nhưng một lập trình viên Front-end kết hợp tất cả những mảnh ghép đó lại và chuyển nó thành ngôn ngữ web, và tạo ra trải nghiệm mà chúng ta có khi duyệt qua mỗi trang.
Để lấy một ví dụ cụ thể, khi chúng ta cuộn con chuột lên xuống ở trang chủ của website Udacity. Chúng ta có thể để ý thấy rằng chữ "U" biến mất rồi xuất hiện trở lại không? Đó là tác phẩm của một lập trình viên Front-end. Nói chung, một lập trình viên Front-end chịu trách nhiệm cho thiết kế nội thất của một ngôi nhà đã được xây dựng bởi một lập trình viên Back-end. Các hương vị và phong cách trang trí được quyết định bởi chủ nhà.
Xét về ngôn ngữ lập trình Front-end thì có 3 loại chính: HTML, CSS, và ngôn ngữ lập trình JavaScript. Để lập trình Front-end tốt thì nhất thiết phải biết 3 ngôn ngữ này, kèm theo đó là một số framework thông dụng Bootstrap, Foundation, AngularJS và các thư viện như jQuery và LESS. Lập trình Back-end: Front-end thật sự rất quan trọng nhưng điều gì giúp phần Front-end của một trang web có thể hoạt động được, dữ liệu để hiển thị trên trang web nằm ở đâu, xử lí như thế nào. Đó là phần việc của back end.
Phần back end của một trang web bao gồm một máy chủ, một ứng dụng, và một cơ sở dữ liệu. Một lập trình viên Back- end xây dựng và duy trì công nghệ mà sức mạnh của những thành phần đó, cho phép phần giao diện người dùng của trang web có thể tồn tại được. Back-end xử lý các công việc từ phía server bao gồm lấy dữ liệu từ người dùng tương tác với trang web đưa vào cơ sở dữ liệu và ngược lại. Cụ thể là cần truy 5 xuất phần thông tin database, xử lý thông tin đó và sẽ ghi xuống database, gửi trả về cho client những thông tin sau khi xử lý xong.
Back-end là một công việc thầm lặng mà không thể thiếu của một website. Những công việc Back-end xử lý điều được thực hiện ngầm, nghĩa là khi một người sử dụng họ chỉ thấy được hình ảnh, thông tin, kết quả trả về mà không thể thấy quá trình tạo ra kết quả đó. Back-end thật sự rất quan trọng đối với website, một trang web không thể tồn tại nếu thiếu nó. Ngay từ khi hình thành thì Back-end được chú trọng nhất trong trang web, hơn cả front-end.
Nếu Front-end là lớp võ bên ngoài thì Back-end chính là phần ruột bên trong. Để khiến cho máy chủ, ứng dụng, và cơ sở dữ liệu có thể giao tiếp được với nhau, các lập trình viên Back-end sử dụng các ngôn ngữ server-side như PHP, Ruby, Python, Java và .Net để xây dựng một ứng dụng, và các công cụ như MySQL, Oracle, và SQL Server để tìm kiếm, lưu trữ, hoặc thay đổi dữ liệu và phục vụ trở lại tới người dùng trong phần front-end. Các công việc tuyển dụng lập trình viên Back-end cũng thường yêu cầu kinh nghiệm về các framework PHP như Zend, Symfony, và CakePHP; có kinh nghiệm với các phần mềm quản lý phiên bản như SVN, CVS, hoặc Git; và kinh nghiệm với Linux trong việc phát triển và triển khai hệ thống. Ngôn ngữ lập trình Fontend: 1.
Tìm hiểu về HTML5 HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngôn ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc biệc ta gọi là Browser. Hiện nay có khá nhiều Browser như Chrome, Firefox, Cốc Cốc, Microsoft Edge,. Tất cả Browser đều có điểm chung là hiển thị và giúp người dùng thao tác với website và nó đều có khả năng biên dịch những đoạn mã HTML, CSS và Javascript.
6 Với HTML, chúng ta có thể: - Điều khiển hình thức và nội dung của trang - Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu html - Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch. - Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash và các Java Applet vào tài liệu html. Xét về cấu trúc một html gồm 3 phần cơ bản: - Phần HTML: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết thúc bằng thẻ đóng html </html>. Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html.
- Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>. Tiêu đề là phần khá quan trọng.
Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm. - Phần thân: phần này nằm sau phần tiêu đề. Phầ̀n thân bao gồm văn bản, hình ảnh và các liên kết mà chúng ta muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>.
Ngoài ra nó còn nhiều cặp thẻ chức năng khác như: Bảng 1.Các thẻ trong HTML Thẻ Mô tả Định nghĩa một bình luận, được dùng để comment phần code <!–…–> html <!