10 bài học để trở thành một chuyên gia lập trình web

Mục tiêu của bài học này là giúp các bạn bắt đầu từ số không, kể cả những bạn chưa biết gì về lập trình web cũng có thể hiểu được và dần dần trở thành một coder chuyên nghiệp. Vì vậy nếu bạn nào đã học qua lập trình web và biết về các công cụ thiết kế, phát triển web thì có thể bỏ qua bài viết này. Tuy nhiên tôi khuyên các bạn nên đọc lướt qua để chúng ta có những đồng nhất về định nghĩa, khái niệm cũng như các công cụ thực hành để sau này dễ dàng theo sát các ví dụ trong các bài học tiếp sau. Bài học gồm 3 phần, phần 1 là các khái niệm, phần 2 giới thiệu các công cụ mà bạn cần có trên máy tính của mình để thực hành và phần 3 sẽ hướng dẫn bạn làm 1 trang web đầu tiên.

Các khái niệm

Website hoạt động như thế nào?

Hãy hình dung khi bạn định vào một trang web nào đó, bạn cần có một máy tính với một phần mềm được gọi là browser mà các bạn hay dùng như firefox, chrome trên hệ điều hành windows hay safari trên nền tảng apple. ở mỗi browser này sẽ có một dòng gọi là URL, bạn gõ tên website vào URL đó rồi enter, thế là trang web hiện ra. Vậy những gì diễn ra sau khi bạn enter ở cuối dòng URL? Có rất nhiều điều xảy ra đầu tiên là Browser phải thiết lập kết nối đến máy chủ chứa trang web đó, sau đó nó cho máy chủ biết tên trang web mà nó cần đọc dựa trên URL mà bạn gõ vào. Máy chủ sẽ gửi đến browser một trang web với 2 thành phần 1 là NỘI DUNG và 2 là mã HTLM. Browser căn cứ vào mã HTML để trình bày một trang web như cái mà bạn nhìn thấy trên màn hình, trong đó mã HTML quy định chỗ nào thì mầu xanh, chỗ nào thì mầu đỏ, chỗ nào chữ to, chỗ nào chữ nhỏ, chỗ nào có ảnh, chỗ nào có video, chỗ nào có link đến một trang web khác.... đó chính là nguồn cơn cho tên gọi HTML nghĩa là Hyper Text Marker Language (Ngôn ngữ đánh dấu siêu văn bản).

Ngôn ngữ HTML làm việc như thế nào?

HTML làm việc bằng các thẻ đánh dấu ví dụ trong đoạn text: "tôi là Thương Hiệu Web" nếu như tôi muốn một browser nhận ra và cho chữ Thương Hiệu Web in đậm lên trong khi các đoạn text khác không thay đổi mầu thì tôi phải đánh dấu đoạn text Thương Hiệu Web bằng 1 thẻ mở và một thẻ đóng như sau:



Khi đó nếu máy chủ web gửi về browser một trang web mà có dòng như trên thì browser sẽ hiển thị như sau:


Tất nhiên browser sẽ chẳng hiển thị thẻ đóng thẻ mở ra làm gì vì người viếng thăm website đâu cần quan tâm đến các thẻ, họ chỉ quan tâm đến nội dung và cách trình bày nội dung đó mà thôi. Tóm lại một trang web do máy chủ gửi đến máy tính của người đọc sẽ có 2 thành phần, một là NỘI DUNG, là cái mà người đọc nhìn thấy và hai là MÃ HTML mà browser có thể hiểu để trình bày NỘI DUNG cho đúng ý của người lập trình web. Đến đây chắc các bạn đã hiểu là công việc của một người lập trình web là gì. Công việc đó là tạo ra các trang web với các mã HTML đúng chỗ, đúng lúc, còn công việc của một người quản trị website là nhập những nội dung cần hiển thị. Hai công việc tách bạch rất rõ. Bạn muốn làm công việc nào? Nếu muốn làm công việc lập trình web, hãy đọc tiếp. Còn nếu muốn trở thành một người quản trị web chuyên nghiệp, hãy dành thời gian đọc seri bài viết khác nhé.

PHP là gì?

Ban đầu khi web mới ra đời các chuyên gia lập trình web dùng một loại code thuần là HTML. Lúc đó thực ra chưa có khái niệm chuyên viên lập trình web mà thực ra là khái niệm nhân viên viết trang web. Một chuyên gia web sẽ vừa phải nhập nội dung sau đó gắn các mã thẻ HTML cho đúng ý của chủ trang web. Và lúc đó các trang web trên mạng đều là website tĩnh vì nội dung với code gắn cứng với nhau. Mỗi lần muốn thay đổi lại phải gọi chuyên gia viết web đến chỉnh sửa Tuy nhiên khi website phát triển lên, nôi dung web tăng nhanh và thay đổi hàng ngày, và lượng các chuyên gia viết web không đáp ứng nổi nhu cầu viết các trang web tĩnh nữa. Lúc này người ta mới phát minh ra các ngôn ngữ trung gian khác có nhiệm vụ là tự sinh ra các đoạn code HTML để sẵn đó, sau rồi mới nhập nội dung vào. Từ đó phân công lao động rõ ràng, chuyên gia lập trình thì ngồi viết các chương trình sinh web bằng các ngôn ngữ khó hơn như PHP, ASP, Java.... đề tạo ra các trang web "trống" sau đó chuyên gia nhập dữ liệu website thì bằng một công cụ nào đó, đưa các nội dung thô vào các trang web trên, kết hợp lại sẽ có 1 trang web mà nay thế này, mai thế khác tùy theo người nhập nội dung quyết định. Từ đó khái niệm web động ra đời. Và đến nay 90% các trang web trên mạng là động. Ví dụ điển hình nhất là trang tin tức, với trang tin này bạn sẽ thấy nó thay đổi hàng giờ, đó là do đội ngũ nhập tin bài, còn đội ngũ viết code cho trang web đó thì ngồi ở hậu trường xử lý các vấn đề kỹ thuật.

Như vậy chúng ta tạm hiểu PHP là một ngôn ngữ lập trình dùng để sinh ra các trang web có code HTML. Vậy PHP nằm ở đâu? và nó làm việc như thế nào? Xin thưa, PHP làm việc theo cơ chế nhúng. Có nghĩa là với một trang web tĩnh bất kỳ, nếu như bạn muốn phần nào là động thì chỉ việc chèn vào đó đoạn code PHP đặt trong hai ký hiệu script như hình vẽ sau:

Lưu ý là PHP không làm việc ở phía browser, mà làm việc ở trên máy chủ. Trên mỗi máy chủ hỗ trợ PHP sẽ có một tiến trình nền miệt mài đọc các trang web do chuyên viên lập trình web để trên đó, nếu nó thấy là 1 trang web tĩnh, chỉ bao gồm mã HML, nó sẽ đơn giản là chuyển trang web đó đến browser yêu cầu trang web là xong nhiệm vụ. Nhưng nếu nó bắt gặp 1 trang web có cả mã nhúng PHP, nó sẽ phải làm thêm một công đoạn là đọc xem đoạn PHP đó nói gì, từ đó sinh ra một đoạn mã HTML theo đúng ý của đoạn mã PHP hay nói đúng hơn là theo ý của người lập trình PHP, và chèn ngược lại vào trang web đó trước khi gửi trang web đến với browser. Tất nhiên đã loại bỏ hết mã PHP rồi, vì browser không hiểu được PHP nói gì.


MySQL là gì?

Khi nội dung đã được động hóa qua cơ chế làm việc của PHP nêu trên, chúng sẽ không nằm trong trang web mà nằm ở một chỗ trung gian, được đánh số và quản lý nghiêm ngặt. Chỗ đó gọi là cơ sở dữ liệu. Có rất nhiều hệ quản trị cơ sở dữ liệu như SQL, MySQL, Oracle... và đều có thể làm việc với website, tuy nhiên PHP rất khoái MySQL vì cả hai đều là sản phẩm của mã nguồn mở, rất dễ dùng và quan trọng nhất là miễn phí.

Hãy hình dung vai trò của của cơ sở dữ liệu như sau. Trong một lớp có 40 học sinh, mỗi học sinh được đánh số từ 1 đến 40 và danh sách này nằm trong cặp của thày giáo, danh sách đó chính là cơ sở dữ liệu. Các học sinh là NỘI DUNG, còn thày giáo là PHP. Khi thầy muốn một bạn nào đó lên bảng làm bài thày chỉ cần mở danh sách và gọi theo số, bạn đó sẽ xuất hiện trên bục giảng, bục giảng chính là trang web mà máy chủ gửi tới cho browser là chúng ta, các thanh tra của sở giáo dục đến dự giờ.

Khó hiểu không các bạn? Ok tôi sẽ lấy ví dụ gần với web hơn, đó là trang tin tức VNexpress. Trang này có một vị trí rất đắc địa là home page và chỉ dùng để đưa các tin hot nhất. Lúc 9h bạn mở ra thấy có tin về cơn bão Haiyen. Đến 10h mở ra, chỗ đó đã bị thay bằng tin về họp quốc hội. Vậy cơn bão Haiyen hay họp quốc hội là các nội dung, dạng text hoặc hình ảnh. Nó sẽ được lưu ở trong cơ sở dữ liệu còn trang web VNexpress chắc chắn sẽ có một đoạn mã nhúng PHP hay ASP gì đó, đoạn mã này có nhiệm vụ lấy các nội dung mà nó cho là hot nhất trong cơ sở dữ liệu đưa lên trình bày ở trang web vnexpress và gửi đến browser nếu có yêu cầu.

Vẫn khó hiểu ư? OK, nếu vậy không cần hiểu nữa. Không cần hiểu kỹ về MySQL bạn vẫn có thể làm được web. chỉ cần hình dung thế này. MySQL là một chỗ nào đó để tống được các nội dung A, B, C vào đó và để PHP thích thì lôi thằng A, hay thằng B, hay thằng C ra đặt vào trang web và gửi về cho các độc giả.

 

Các công cụ cần thiết

OK now! Nếu bạn nào đọc xong phần trên mà vẫn còn nhiệt huyết, chúng ta có thể đi tiếp phần sau đây. Còn nếu bạn nào thấy choáng quá thì nên đi ngủ, ngày mai đọc lại đoạn trên thấy dễ tiêu hơn, ngày kia đọc tiếp cho nó tiêu hẳn rồi hãy đọc tiếp phần này bởi vì. Lý thuyết giúp soi đường cho thực tiễn. Nếu đã thấm nhuần các khái niệm bên trên thì mới biết tìm các công cụ gì để thực hành.

Để hoàn thành 10 bài học này, bạn cần chuẩn bị một máy tính cấu hình vừa phải, trên đó cài win7 hoặc windows XP là ổn sau đó bạn download các phần mềm dưới đây và cài lên máy của mình. Mục đích là gì: trước hết để biến máy của bạn thành một webserver, để bạn vừa đá bóng vừa thổi còi. Nghĩa là browser và web server cùng ở một chỗ, khi đó sẽ thuận tiện cho bạn viết web tĩnh hay động đều có thể test tại chỗ được.

Mục đích thứ 2 là biến webserver của bạn thành một máy chủ web hỗ trợ PHP và có sẵn hệ quản trị cơ sở dữ liệu MySQL để thực hành web động. Mục đích 1 và 2 được giải quyết bằng Wamp server

Mục đích thứ 3 là để có một công cụ có thể soạn thảo các trang web tĩnh cũng như động một cách thoải mái, cộng cụ này có tên là Dreamwaver.

Mục đích thứ 4: là có một bàn trang điểm cho các ảnh trước khi đưa lên website. Vấn đề về ảnh tuy đơn giản nhưng nếu bạn coi thường nó, bạn sẽ gặp rất nhiều rắc rối về sau. Hai nữa là bạn cần tập thói quen chỉn chu, kiên nhẫn khi xử lý ảnh thì mới có thể tạo ra những website vừa mắt được. Để xử lý ảnh nếu bạn nào có Win 7 rồi thì có thể dùng Paint sẵn có trong win 7, còn nếu bạn nào dùng XP thì nên download thêm một bản Pickpick dùng với rất nhiều tính năng hữu ích.

Dưới đây là link để down load và hướng dẫn cài đặt các phần mềm này. Lưu ý là các phần mềm này đều có nhiều bản update liên tục ra, tuy nhiên để demo tôi dùng các phiên bản khá cũ, vì nó chạy ổn định, ít hoa mắt, phù hợp với các bạn mới nhập môn. Bạn nào đã từng sử dụng các công cụ này thành thạo rồi thì cứ tùy ý dùng các phiên bản mới nhất mà mình thấy phù hợp là được.

    Wampserver 2.0 tải về ở đây
    Dreamwaver CS4 tải về ở đây hoặc mua đĩa ở Tạ Quang Bửu nếu thấy download lâu quá
    Pickpick  download ở đây

Đoạn code đầu tiên

Nào, bây giờ sau khi cài đặt xogn các công cụ trên, chúng ta sẽ bắt tay vào viết một trang web đầu tiên. Hãy mở Dreamwaver ra, chọn New File (Ctrl-N) rồi chọn kiểu file là HTML, sau đó bấm creat. Bạn sẽ thấy khung soạn thảo của Dreamwaver, với một số code HTML đặt sẵn, bạn sửa file đó như sau:

Sau đó các bạn save file nói trên với tên gọi my-first-webpage.html và để ngay trên destop cũng được, sau đó đóng dreamwave lại và tìm file đó trên desktop, double-click vào nó, bạn sẽ thấy firefox mở file này ra và xuất hiện dòng chữ "Xin chào, đây là đoạn code HTML đầu tiên của tôi" Nếu nó không làm việc các bạn có thể download file này về để so sánh và tìm hiểu nguyên nhân tại sao.

Giải thích:

Trong file trên chúng ta thấy các thẻ mở và đóng html, head, body. Thẻ html cho biết đây là một file được đánh dấu bằng các thẻ html. Thẻ head cho biết đây là phần đầu file, các thông tin ở đầu file hầu hết là không hiển thị trong browser, mà có tác dụng cho việc khai báo các thông tin của trang, các scrip hoặc css. Lưu ý các thông tin ở trong thẻ mở và thẻ đóng head có tác dụng rất nhiều cho việc SEO sau này. Vì thế đừng nên coi thường và bỏ qua nó. Ví dụ thông tin giữa 2 thẻ mở và đóng title sẽ hiển thị trong browser cho biết tiêu đề trang web là gì và Google rất coi trọng thông tin này.  Còn thẻ body cho browser biết bắt đầu từ đây là nội dung chính của trang web.

Ngoài ra chúng ta thấy thẻ meta không có thẻ mở và đóng như thông lệ. Có rất nhiều thẻ thuộc dạng này được gọi là thẻ tự đóng vì tính chất hiển thị của nó.

Danh sách và vai trò của các thẻ, các bạn tham khảo tại http://www.w3schools.com

Xem tiếp bài học 2:  Các thẻ HTML