Những năm 1950 là thiên đường của những người có sở thích với các tạp chí như Mechanix Illustrated và Popular Science hướng dẫn tự chế tạo một chiếc xe go-kart cho trẻ em và cách cải tiến một chiếc máy cắt cỏ bằng một động cơ thực tế! Bảy mươi năm sau, giờ đây chúng ta đã vững chắc trong thời đại công nghệ tự làm, nơi mọi người tận dụng niềm đam mê bên trong của mình để tham gia vào nhiều hình thức mày mò và hack kỹ thuật số khác nhau. Hiện thân của sự phục hưng của những người có sở thích công nghệ cao này là người chế tạo, một nghệ nhân hiện đại để tạo ra mọi thứ thay vì chỉ tiêu thụ chúng. Các nhà sản xuất ngày nay thể hiện rất nhiều tài năng, nhưng kỹ năng được săn đón nhiều nhất không chỉ bởi chính họ mà còn bởi những người thuê họ là viết mã và phát triển web.
Trang 1THIẾT KẾ VÀ PHÁT TRIỂN WEB DÀNH CHO
DÂN GÀ: TẬP 1 LÀM QUEN VỚI MÃ HÓA
CODE CHO WEB
Trang 2CHƯƠNG 1 CÁCH MÃ HÓA VÀ PHÁT TRIỂN WEB HOẠT ĐỘNG
Những năm 1950 là thiên đường của những người có sở thích vớicác tạp chí như Mechanix Illustrated và Popular Science hướngdẫn tự chế tạo một chiếc xe go-kart cho trẻ em và cách cải tiếnmột chiếc máy cắt cỏ bằng một động cơ thực tế! Bảy mươi nămsau, giờ đây chúng ta đã vững chắc trong thời đại công nghệ tựlàm, nơi mọi người tận dụng niềm đam mê bên trong của mình đểtham gia vào nhiều hình thức mày mò và hack kỹ thuật số khácnhau Hiện thân của sự phục hưng của những người có sở thíchcông nghệ cao này là người chế tạo, một nghệ nhân hiện đại đểtạo ra mọi thứ thay vì chỉ tiêu thụ chúng Các nhà sản xuất ngàynay thể hiện rất nhiều tài năng, nhưng kỹ năng được săn đónnhiều nhất không chỉ bởi chính họ mà còn bởi những người thuê
họ là viết mã và phát triển web
Bạn đã bao giờ truy cập một trang web và nghĩ: “Này, tôi có thểlàm tốt hơn thế!” chưa? Bạn có thấy mình ngày càng mệt mỏi khichỉ đọc văn bản và xem hình ảnh mà người khác đưa lên webkhông? Có điều gì sáng tạo trong bạn - những câu chuyện, hìnhảnh, kiến thức chuyên môn, ý kiến - mà bạn muốn chia sẻ với thếgiới? Nếu bạn trả lời “Có!” đối với bất kỳ câu hỏi nào trong số này,xin chúc mừng: Bạn có mọi thứ bạn cần để bắt đầu với việc viết
mã và phát triển web Nói tóm lại, bạn có khả năng của một nhàsản xuất
Trang 3Điểm mấu chốt của mã hóa và phát triển web
Nếu, như Con Vua đã nói rất nghiêm túc trong Alice inWonderland của Lewis Carroll, thì tốt nhất là “bắt đầu từ đầu”, thìbạn đã đến đúng nơi Mục tiêu của tôi ở đây là giúp bạn đi đúnghướng bằng cách chỉ cho bạn biết mã hóa web và phát triển web
là gì
Cách thức hoạt động của web
Trước khi có thể hiểu về mã hóa và phát triển web, bạn cần lùi lạimột bước và hiểu một chút về cách hoạt động của web Đặc biệt,bạn cần biết điều gì xảy ra đằng sau khi bạn nhấp vào một liênkết hoặc nhập địa chỉ trang web vào trình duyệt của mình Maymắn thay, bạn không cần phải là kỹ sư mạng để hiểu nội dungnày, bởi vì tôi có thể giải thích những điều cơ bản mà không cầndùng nhiều thuật ngữ Đây là bản tường thuật chi tiết cấp cao (vàkhông hề nghiêm trọng) về những gì xảy ra:
1 Bạn cho trình duyệt web biết trang web bạn muốn truy cập
- Bạn làm điều đó bằng cách nhấp vào liên kết đến trang hoặcbằng cách nhập vị trí — được gọi là công cụ định vị tài nguyênthống nhất (uniform resource locator) hoặc URL — vào thanh địachỉ của trình duyệt ( xem Hình 1-1)
2 Trình duyệt giải mã URL
- Giải mã URL trải qua hai bước Đầu tiên, trình duyệt xem loại tàinguyên bạn đang yêu cầu bằng cách kiểm tra tiền tố của URL;
Trang 4đây thường là http:// hoặc https://, cả hai đều chỉ ra rằng tàinguyên là một trang web Thứ hai, nó lấy tên miền của URL —phần something.com hoặc what.org — và yêu cầu hệ thống tênmiền (domain name system-DNS) dịch tên miền này sang một vịtrí duy nhất — được gọi là địa chỉ IP (Giao thức Internet- InternetProtocol) — cho máy chủ web lưu trữ trang (xem Hình 1-2).
3 Trình duyệt liên hệ với máy chủ web và yêu cầu trang web
- Với địa chỉ IP duy nhất của máy chủ web trong tay, trình duyệtweb sẽ thiết lập một kênh liên lạc với máy chủ và sau đó sử dụngkênh đó để gửi yêu cầu về trang web (xem Hình 1-3)
4 Máy chủ web giải mã yêu cầu trang
Trang 5- Giải mã yêu cầu trang bao gồm một số bước Đầu tiên, nếu máychủ web được chia sẻ giữa nhiều tài khoản người dùng, máy chủ
sẽ bắt đầu bằng cách định vị tài khoản người dùng sở hữu trangđược yêu cầu Sau đó, máy chủ sử dụng địa chỉ trang để tìm thưmục chứa trang và tệp chứa mã trang (xem Hình 1-4)
5 Máy chủ web gửi tệp trang web tới trình duyệt web (xem Hình1-5)
6 Trình duyệt web giải mã tập tin trang web
- Giải mã tệp trang có nghĩa là tìm kiếm văn bản để hiển thị,hướng dẫn cách hiển thị văn bản đó và các tài nguyên khác màtrang yêu cầu, chẳng hạn như hình ảnh và phông chữ (xem Hình1-6)
Trang 67 Nếu trang web yêu cầu nhiều tài nguyên hơn, trình duyệt web
sẽ yêu cầu máy chủ chuyển các tài nguyên đó (xem Hình 1-7)
8 Đối với mỗi tài nguyên được yêu cầu, máy chủ web sẽ định vịtệp được liên kết và gửi nó tới trình duyệt (xem Hình 1-8)
Trang 79 Trình duyệt web tập hợp tất cả văn bản, hình ảnh và các tàinguyên khác rồi hiển thị trang đó với tất cả vẻ đẹp kỹ thuật sốcủa nó trong cửa sổ nội dung của trình duyệt (xem Hình 1-9).
Cách thức hoạt động của web, hãy lấy hai
Một cách khác để xem quá trình này là hãy coi web như một trungtâm mua sắm hoặc trung tâm mua sắm khổng lồ, trong đó mỗiwebsite là một cửa hàng trong trung tâm mua sắm đó Khi bạnyêu cầu một trang web từ website đó, trình duyệt sẽ đưa bạn vàocửa hàng của website và hỏi nhân viên về trang web đó Nhân
Trang 8viên đi vào phía sau cửa hàng, tìm trang và đưa nó cho trìnhduyệt Trình duyệt kiểm tra trang và yêu cầu bất kỳ tệp nào cầnthiết khác mà nhân viên bán hàng sẽ truy xuất từ phía sau Quátrình này được lặp lại cho đến khi trình duyệt có mọi thứ nó cần vàsau đó nó sẽ ghép tất cả các phần trang lại với nhau cho bạn,ngay phía trước cửa hàng.
Phép ẩn dụ này có vẻ hơi ngớ ngẩn, nhưng nó dùng để giới thiệumột phép ẩn dụ khác, chính nó minh họa một trong những kháiniệm quan trọng nhất trong phát triển web Giống như cách cửahàng website của chúng ta có mặt trước và mặt sau, quá trìnhphát triển web cũng được tách thành frontend và backend:
- Frontend: là phần trang web mà trình duyệt web hiển thị trongcửa sổ trình duyệt Nghĩa là, frontend là nội dung trang bạn nhìnthấy và tương tác
- Backend: là phần nằm trên máy chủ web Hay nói cách khácbackend là nội dung trang mà máy chủ thu thập dựa trên các yêucầu mà nó nhận được từ trình duyệt
Với tư cách là người sử dụng trang web, bạn chỉ giao tiếp vớifrontend và thậm chí sau đó bạn chỉ tương tác một cách thụ độngvới trang bằng cách đọc nội dung, xem hình ảnh hoặc nhấp vàoliên kết hoặc nút của trang
Tuy nhiên, với tư cách là người tạo trang web - tức là nhà pháttriển web - công việc của bạn đòi hỏi phải xử lý cả frontend vàbackend Hơn nữa, công việc đó bao gồm mã hóa những gì ngườikhác nhìn thấy ở frontend, mã hóa cách máy chủ thu thập dữ liệubackend và mã hóa các tác vụ trung gian gắn kết cả hai với nhau
Trang 9Tìm hiểu về Front End: HTML và CSS
Như tôi đã đề cập ở phần trước, phần frontend của quá trình pháttriển web liên quan đến những gì người dùng nhìn thấy và tươngtác trong cửa sổ trình duyệt web Công việc của nhà phát triểnweb là thực hiện một thiết kế trang - thứ mà bạn có thể tự nghĩ ranhưng thường là thứ được sáng tạo bởi một người sáng tạochuyên về thiết kế web - và làm cho nó sẵn sàng cho web Chuẩn
bị sẵn một thiết kế cho web có nghĩa là dịch thiết kế đó thành mãcần thiết để trình duyệt hiển thị trang gần như trung thực nhất.(Tôi nói gần như bởi vì không phải lúc nào cũng dễ dàng tạo ramột thiết kế đẹp mắt trong Photoshop hoặc Illustrator và làm cho
nó trông đẹp mắt như trên web Tuy nhiên, với những kỹ thuậtbạn học trong cuốn sách này, bạn gần như đạt được kết quả này.)Bạn cần mã để tạo frontend cho trang web vì nếu không có nó,trang của bạn sẽ khá buồn tẻ Ví dụ: hãy xem xét văn bản sau (cótrong bk01ch01/example01.html trong các tệp ví dụ của cuốnsách này):
Trang 10Nếu bạn đưa văn bản đó lên web, bạn sẽ nhận được kết quả nhưtrong Hình 1-10 Như bạn có thể thấy, văn bản rất đơn giản vàtrình duyệt thậm chí không thèm đưa vào các ngắt đoạn.
Thêm cấu trúc: HTML
Điều đầu tiên bạn thường làm để viết mã một trang web là tạocho nó một số cấu trúc Điều này có nghĩa là chia văn bản thànhcác đoạn văn, thêm các phần đặc biệt như đầu trang và chântrang, sắp xếp văn bản thành các danh sách có dấu đầu dònghoặc đánh số, chia trang thành các cột, v.v Công nghệ mã hóaweb chi phối các cấu trúc này và các cấu trúc trang web khác
Trang 11được gọi là Ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language), hay viết tắt là HTML.
HTML là một tập hợp các ký hiệu đặc biệt được gọi là thẻ (tag) mà
bạn rải một cách chiến lược khắp trang Ví dụ: nếu bạn muốn chotrình duyệt web biết rằng một đoạn văn bản cụ thể là một đoạnvăn riêng biệt, bạn đặt thẻ <p> (p ở đây là viết tắt củaparagraph) trước văn bản và thẻ </p> cuối văn bản
Trong đoạn mã tiếp theo (xem bk01ch01/example02.html), tôi đãthêm các thẻ <p> vào văn bản thuần túy mà tôi hiển thị trước đó.Như minh họa trong Hình 1-11, trình duyệt web hiển thị văn bảndưới dạng ba đoạn văn riêng biệt
Trang 12Thêm kiểu: CSS
HTML đảm nhiệm cấu trúc của trang, nhưng nếu bạn muốn thayđổi định dạng của trang, bạn cần chuyển sang công nghệ
frontend thứ hai: cascading style sheets, viết tắt là CSS Với CSS
trong tay, bạn có thể thử nghiệm với màu sắc và phông chữ củatrang, bạn có thể thêm lề và đường viền xung quanh mọi thứ,đồng thời bạn có thể thay đổi vị trí và kích thước của các thànhphần trang
CSS bao gồm một số lượng lớn các thuộc tính (properties) cho
phép bạn tùy chỉnh nhiều khía cạnh của trang để làm cho nótrông giống như bạn muốn Ví dụ: thuộc tính width cho phép bạnchỉ định độ rộng của phần tử trang; thuộc tính font-family chophép bạn chỉ định kiểu chữ cho một phần tử; và thuộc tính font-size cho phép bạn xác định kích thước loại văn bản của một phần
tử Đây là một số mã CSS áp dụng cả ba thuộc tính này cho mọiphần tử p (nghĩa là mọi thẻ <p>) xuất hiện trong một trang (lưu ý
rằng px là viết tắt của pixel):
Khi được sử dụng với văn bản mẫu từ hai phần trước, bạn sẽ cóđược văn bản đẹp hơn nhiều như trong Hình 1-12 (hãy xembk01ch01/example03.html.)
Trang 13Tìm hiểu về Back End: PHP và MySQL
Nhiều trang web đều tập trung vào giao diện người dùng Nghĩa
là, chúng không bao gồm gì ngoài văn bản được cấu trúc bằng thẻHTML và được tạo kiểu bằng thuộc tính CSS, cùng với một số tệp
bổ sung như hình ảnh và phông chữ Chắc chắn, tất cả các tệpnày đều được chuyển từ máy chủ web sang trình duyệt, nhưng đóchỉ là mức độ liên quan của backend
Những trang đơn giản này rất lý tưởng khi bạn có nội dung không
thay đổi thường xuyên Với những trang được gọi là tĩnh (static)
này, bạn nhập văn bản của mình vào, thêm một số HTML và CSS,
có thể trỏ đến một hoặc hai hình ảnh và thế là xong Các trangtĩnh rất tuyệt vời, đó là lý do tại sao tôi sẽ nói chi tiết về chúngtrong Quyển 6
Nhưng một loại trang khác có nội dung thay đổi thường xuyên.Nội dung có thể là các bài đăng được thêm một hoặc hai lần mộtngày hoặc các cập nhật về thể thao hoặc thời tiết được thêm mộthoặc hai lần một giờ Với những trang được gọi là trang động
(dynamic) này, bạn có thể có một số văn bản, HTML, CSS và các
Trang 14nội dung tĩnh khác, nhưng bạn gần như chắc chắn không muốncập nhật nội dung thay đổi bằng tay.
Thay vì thực hiện các thay đổi thủ công liên tục đối với các trangnhư vậy, bạn có thể sử dụng backend để thực hiện việc đó chobạn Bạn làm điều đó bằng cách tận dụng hai công nghệ back-endphổ biến: MySQL và PHP
Lưu trữ dữ liệu trên máy chủ: MySQL
MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ chạy trênmáy chủ Bạn sử dụng nó để lưu trữ dữ liệu bạn muốn sử dụnglàm nguồn cho một số (hoặc thậm chí là tất cả) dữ liệu bạn muốnhiển thị trên trang web của mình Bằng cách sử dụng công cụ có
tên là Ngôn ngữ truy vấn có cấu trúc (Structured Query Language
- SQL, phát âm là “ess-kew-ell” hoặc đôi khi là “sequel”), bạn có
thể chỉ định tập hợp con dữ liệu nào bạn muốn sử dụng
Truy cập dữ liệu trên máy chủ: PHP
PHP là ngôn ngữ lập trình được sử dụng trên máy chủ Đó là mộtngôn ngữ rất mạnh mẽ và đầy đủ tính năng, nhưng với mục đíchcủa cuốn sách này, bạn chủ yếu sử dụng PHP để tương tác với cơ
sở dữ liệu MySQL Bạn có thể sử dụng PHP để trích xuất từ MySQLtập hợp con dữ liệu bạn muốn hiển thị, xử lý dữ liệu đó thànhdạng mà frontend có thể đọc được, sau đó gửi dữ liệu tới trìnhduyệt
Làm thế nào để tất cả khớp với nhau: JavaScript
Vậy là bây giờ bạn có frontend bao gồm cấu trúc HTML và CSS vàbackend bao gồm dữ liệu MySQL và mã PHP Làm thế nào để hai
Trang 15thế giới dường như khác biệt này gặp nhau để tạo ra trải nghiệmtrang web đầy đủ?
Trong phép ẩn dụ trang web như cửa hàng mà tôi giới thiệu trước
đó trong chương này, tôi sử dụng hình ảnh nhân viên cửa hàngnhận đơn đặt hàng từ trình duyệt web và sau đó đi vào phía saucửa hàng để thực hiện đơn hàng đó Nhân viên bán hàng đó làmối liên kết rõ ràng giữa frontend và backend, vậy nhân viên đóđại diện cho công nghệ gì? Đó sẽ là JavaScript
JavaScript là thứ kết hợp frontend và backend để tạo ra phần lớncác trang web mà bạn thấy ngày nay JavaScript là ngôn ngữ lậptrình và là ngôn ngữ mặc định được sử dụng cho các trang web
mã hóa ngày nay Trước hết, JavaScript là ngôn ngữ phát triểnweb front-end Nghĩa là, JavaScript chạy bên trong trình duyệtweb và có quyền truy cập vào mọi thứ trên trang: văn bản, hìnhảnh, thẻ HTML, thuộc tính CSS, v.v Có quyền truy cập vào tất cảnội dung của trang có nghĩa là bạn có thể sử dụng mã để thaotác, sửa đổi và thậm chí thêm và xóa các thành phần trang web.Nhưng mặc dù JavaScript chạy trong trình duyệt, nhưng nó cũng
có khả năng tiếp cận máy chủ để truy cập backend Ví dụ: vớiJavaScript bạn có thể gửi dữ liệu đến máy chủ để lưu trữ dữ liệu
đó trong cơ sở dữ liệu MySQL Tương tự, với JavaScript bạn có thểyêu cầu dữ liệu từ máy chủ rồi sử dụng mã để hiển thị dữ liệu đótrên trang web
Cách thức hoạt động của các trang web động
Biết về HTML, CSS, PHP và tất cả những thứ còn lại là một điều,nhưng thực sự làm được điều gì đó hữu ích với những công nghệ
Trang 16này lại là một điều hoàn toàn khác Đó thực sự là mục tiêu củacuốn sách này và vì mục đích đó, cuốn sách dành nhiều chương
đề cập đến cách tạo ra những thứ tuyệt vời được gọi là trang webđộng Trang web động là trang bao gồm nội dung, thay vì đượcgắn chặt vào trang, được tạo nhanh chóng từ máy chủ web Điềunày có nghĩa là nội dung trang có thể thay đổi dựa trên yêu cầucủa người dùng, dữ liệu được thêm vào hoặc sửa đổi trên máy chủhoặc để phản hồi một số sự kiện, chẳng hạn như nhấp vào núthoặc liên kết
Bây giờ nó có thể nghe hơi giống tà thuật đối với bạn, vì vậy có lẽcần phải chi tiết hơn một chút Ví dụ: giả sử bạn muốn sử dụngmột trang web để hiển thị một số dữ liệu nằm trên máy chủ Dướiđây là cái nhìn tổng quát về các bước liên quan đến quá trình đó:
1 JavaScript xác định dữ liệu mà nó cần từ máy chủ.
JavaScript có nhiều cách khác nhau để thực hiện việc này, chẳnghạn như trích xuất thông tin từ URL, đọc mục người dùng đã chọn
từ danh sách hoặc phản hồi nhấp chuột từ người dùng
2 JavaScript gửi yêu cầu về dữ liệu đó đến máy chủ.
Trong hầu hết các trường hợp và chắc chắn là trong mọi trườnghợp bạn thấy trong cuốn sách này, JavaScript sẽ gửi yêu cầu nàybằng cách gọi một tập lệnh PHP trên máy chủ
3 Tập lệnh PHP nhận được yêu cầu và chuyển nó tới MySQL.
Tập lệnh PHP sử dụng thông tin thu được từ JavaScript để tạo lệnhSQL mà MySQL có thể hiểu được
Trang 174 MySQL sử dụng lệnh SQL để trích xuất thông tin cần thiết từ cơ sở dữ liệu và sau đó trả dữ liệu đó về tập lệnh PHP.
5 Tập lệnh PHP xử lý dữ liệu MySQL được trả về thành dạng mà JavaScript có thể sử dụng.
JavaScript không thể đọc dữ liệu MySQL thô, vì vậy một trongnhững nhiệm vụ quan trọng nhất của PHP là chuyển đổi dữ liệu đó
thành định dạng có tên là Ký hiệu đối tượng JavaScript (JavaScript Object Notation viết tắt là JSON và được phát âm giống như tên
“Jason”), mà JavaScript thân thiện với dạng này
6 PHP gửi dữ liệu JSON trở lại JavaScript.
7 JavaScript hiển thị dữ liệu trên trang web.
Một trong những điều thú vị của JavaScript là bạn có thể kiểmsoát rất tốt cách hiển thị dữ liệu cho người dùng Thông qua HTML
và CSS hiện có cũng như bằng cách thao tác các thành phần này
và các thành phần trang web khác bằng JavaScript, bạn có thểhiển thị dữ liệu của mình tốt nhất có thể
Ứng dụng web là gì?
Bạn chắc chắn có rất nhiều ứng dụng nằm trên điện thoại thôngminh của mình Nếu bạn sử dụng Windows trên PC, bạn có cácứng dụng được cài đặt sẵn như Mail và Calendar và có thể mộthoặc nhiều ứng dụng được tải xuống từ Windows Store Nếu máyMac phù hợp với phong cách của bạn hơn thì bạn có thể khá quenthuộc với các ứng dụng như Music và Message và có thể bạn đãcài đặt một số ứng dụng khác từ App Store Chúng ta đang sốngtrong một thế giới có đầy đủ các ứng dụng, trong bối cảnh điện
Trang 18thoại hoặc máy tính của bạn, là các chương trình phần mềm dànhriêng cho một chủ đề hoặc nhiệm vụ duy nhất.
Vậy ứng dụng web là gì? Nó rất giống với một ứng dụng trên thiết
bị hoặc PC Nghĩa là, đó là một trang web được xây dựng bằng cáccông nghệ web như HTML, CSS và JavaScript, có hai đặc điểmchính:
- Ứng dụng web tập trung vào một chủ đề hoặc nhiệm vụ duynhất
- Ứng dụng web cung cấp một số loại giao diện cho phép ngườidùng vận hành ứng dụng theo một hoặc nhiều cách
Tóm lại, ứng dụng web là một trang web có giao diện và hoạtđộng giống như một ứng dụng trên thiết bị hoặc máy tính (Gmail
là một ví dụ về ứng dụng web.) Điều này trái ngược với một trangweb thông thường, thường giải quyết một số chủ đề hoặc nhiệm
vụ và có giao diện mà phần lớn chỉ cho phép người dùng điềuhướng trang web
Hiểu sự khác biệt giữa mã hóa web và phát triển web
Sau tất cả các phần trình bày về HTML, CSS, MySQL và JavaScript,sau cái nhìn toàn cảnh về các trang tĩnh, trang động và ứng dụngweb, bạn có thể tự hỏi khi nào thì tôi sẽ trả lời câu hỏi cấp báchnhất: Sự khác biệt giữa mã hóa web và phát triển web là gì?
Một số người có thể sẽ trả lời câu hỏi đó bằng cách nói rằng không
có sự khác biệt thực sự nào vì mã hóa web và phát triển web làhai cách đề cập đến cùng một thứ: tạo trang web bằng các công
cụ lập trình
Trang 19Tuy nhiên tôi nghĩ có một sự khác biệt giữa viết mã web và pháttriển web:
- Mã hóa web là phần lập trình thuần túy trong quá trình tạo mộttrang web, đặc biệt là sử dụng JavaScript ở frontend và PHP chobackend
- Phát triển web là gói tạo trang web hoàn chỉnh, từ xây dựng mộttrang bằng thẻ HTML, đến định dạng trang bằng CSS, lưu trữ dữliệu trong backend bằng MySQL, đến truy cập dữ liệu đó bằngPHP, đến kết nối frontend và backend bằng cách sử dụngJavaScript
Tuy nhiên, khi nhìn vào hai thuật ngữ, cuốn sách này sẽ dạy chobạn mọi thứ bạn cần biết để trở thành một lập trình viên web vàmột nhà phát triển web
CHƯƠNG 2 THIẾT LẬP MÔI TRƯỜNG PHÁT TRIỂN WEB CỦA BẠN
Một trong những điều thực sự tuyệt vời về phát triển web là, chỉvới một vài ngoại lệ — chẳng hạn như hình ảnh, tệp phương tiện
và cơ sở dữ liệu máy chủ — tất cả những gì bạn làm việc chỉ làcác tệp văn bản cơ bản Điều này có nghĩa là bạn không cần bất
kỳ phần mềm đắt tiền nào để phát triển cho web
Nhưng điều gì sẽ xảy ra nếu bạn muốn thành thạo hơn trong lĩnhvực mã hóa web? Bạn cần nâng cao mọi thứ lên một hoặc ba mức
và thiết lập một môi trường phát triển web thích hợp trên máytính của mình Làm như vậy sẽ cung cấp cho bạn mọi thứ bạn cần
để xây dựng, thử nghiệm và tinh chỉnh các dự án phát triển webcủa mình Trong chương này, bạn sẽ bắt đầu cuộc phiêu lưu viết
Trang 20mã web của mình một cách hào hứng bằng cách khám phá cáchthiết lập môi trường phát triển web hoàn chỉnh trên PC chạyWindows hoặc Mac của bạn.
Môi trường phát triển web cục bộ là gì?
Trong giới lập trình, môi trường phát triển tích hợp (integrated development environment-IDE) là tập hợp các chương trình phần
mềm giúp viết mã dễ dàng và hiệu quả Hầu hết các môi trườngphát triển đều được điều chỉnh theo một ngôn ngữ lập trình cụ thể
và đi kèm với các công cụ để chỉnh sửa, kiểm tra và biên dịch mã(nghĩa là chuyển đổi mã sang dạng cuối cùng dưới dạng một ứngdụng)
Trong trò chơi mã hóa web, chúng ta không cần IDE, nhưng chúng
ta có một thứ tương tự được gọi là môi trường phát triển web cục
bộ, cũng là một tập hợp phần mềm Nó thường bao gồm nhữngphần sau đây:
- Một máy chủ web
- Một hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) để chạytrên máy chủ web
- Ngôn ngữ lập trình phía máy chủ
- Giao diện để điều khiển (khởi động, dừng, v.v.) máy chủ web
- Giao diện để truy cập và thao tác RDBMS
Điểm mấu chốt cần tìm hiểu ở đây là môi trường phát triển web
“cục bộ”, có nghĩa là nó được cài đặt trên PC hoặc Mac của bạn.Điều này cho phép bạn xây dựng và thử nghiệm các dự án pháttriển web ngay trên máy tính của mình Bạn không cần dịch vụlưu trữ web hoặc thậm chí là kết nối internet Mọi thứ đều chạy
Trang 21thuận tiện trên máy tính của bạn, vì vậy bạn có thể tập trung vào
mã hóa và để việc triển khai trang web cho đến khi bạn sẵn sàng
Bạn có cần một môi trường phát triển web cục bộ không?
Nếu có thể sử dụng một trình soạn thảo văn bản đơn giản để pháttriển trang web, tại sao không làm điều đó? Xét cho cùng, mọi PCWindows và Mac hiện có đều có trình soạn thảo văn bản được càiđặt sẵn và rất nhiều trình soạn thảo văn bản miễn phí của bên thứ
ba đã sẵn sàng để tải xuống, vậy tại sao phải cài đặt phần mềmcho môi trường phát triển web cục bộ?
Thật ra việc thiết lập phát triển web cục bộ là điều bắt buộc Nếutất cả những gì bạn đang làm bây giờ là bắt đầu với một vài trangweb tĩnh được xây dựng bằng HTML, CSS và JavaScript thì bạn vẫnchưa cần quyền truy cập vào backend Tương tự, nếu bạn đangxây dựng các trang web và ứng dụng web để sử dụng cho riêngmình và đã có máy chủ lưu trữ web cho phép bạn truy cập vàoMySQL và PHP, bạn chắc chắn chỉ cần sử dụng trình soạn thảovăn bản đáng tin cậy của mình
Tuy nhiên, có hai trường hợp ngoại lệ chính yêu cầu bạn phải xâydựng nội dung web của mình một cách cục bộ:
- Bạn đang xây dựng một trang web hoặc ứng dụng cho ngườikhác và bạn không có quyền truy cập vào máy chủ web của họ
- Bạn đang xây dựng một phiên bản mới của trang web hoặc ứngdụng hiện có, điều đó có nghĩa là bạn không muốn làm xáo trộn
mã sản xuất trong khi mày mò (và do đó mắc lỗi) với mã mới
Điều đó nói lên rằng, không thể phủ nhận có một điều gì đó thú vịkhi có một máy chủ web lâu đời chạy ẩn trong nền máy tính của
Trang 22bạn Vì vậy, ngay cả khi bạn không cho rằng mình sẽ cần một môitrường phát triển web toàn diện trong thời gian ngắn, hãy nghĩđến việc cài đặt môi trường đó.
Thiết lập XAMPP cho môi trường phát triển Windows
Nếu bạn đang chạy Windows, tôi thực sự khuyên dùng môi trườngphát triển web XAMPP dành cho Windows, phiên bản mới nhất yêucầu Windows Vista trở lên XAMPP dành cho Windows có rất nhiềutính năng, nhưng đối với nhu cầu của chúng tôi thì những tínhnăng sau là quan trọng nhất:
- Apache: Một máy chủ web nguồn mở chạy khoảng một nửa số
trang web trên Trái đất
- MariaDB: Cơ sở dữ liệu máy chủ nguồn mở hoàn toàn tương
Cài đặt XAMPP cho Windows
Sau khi quá trình tải xuống hoàn tất, hãy làm theo các bước sau
để cài đặt XAMPP cho Windows:
Trang 231 Mở thư mục Tải xuống rồi khởi chạy tệp cài đặt mà bạn
3 Khi XAMPP hiển thị cảnh báo về việc cài đặt khi kích hoạt UAC, hãy nhấp vào OK.
Cảnh báo có từ ngữ kỳ lạ này có nghĩa là nếu bạn cài đặt XAMPPtrong thư mục mặc định (thường là C:\Program Files), nó có thểgặp sự cố khi chạy bình thường do UAC áp đặt các hạn chế đối vớithư mục đó Bạn có thể bỏ qua điều này vì ở Bước 6, tôi sẽ hướngdẫn bạn cách cài đặt XAMPP trong một thư mục khác không gặpphải vấn đề này
4 Khi XAMPP Setup Wizard xuất hiện, hãy nhấp vào Next.
5 Trong hộp thoại Select Components, được hiển thị trong Hình 2-1, bỏ chọn hộp kiểm bên cạnh bất kỳ thành phần nào bạn không muốn cài đặt, sau đó nhấp vào Next.
Để cài đặt cơ bản, bạn chỉ cần Apache, MySQL, PHP vàphpMyAdmin Nếu PC của bạn sắp hết dung lượng ổ đĩa, hãy cânnhắc việc không cài đặt các thành phần khác Nếu bạn có nhiềudung lượng ổ đĩa, hãy tiếp tục và cài đặt mọi thứ vì sau tất cả
Trang 24những điều này, bạn có thể có cảm hứng để học Perl (là một ngônngữ lập trình phía máy chủ khác).
6 Trong hộp thoại Installation Folder, nhập vị trí bạn muốn cài đặt XAMPP, sau đó nhấp vào Next.
Đảm bảo tránh các thư mục C:\Program Files và C:\Program Files(x86), vì lý do tôi mô tả ở Bước 3 Hầu hết mọi người đều tạo thưmục xampp trong C:\ và cài đặt mọi thứ ở đó (như trong Hình 2) -2)
Trang 257 Khi Setup Wizard hỏi bạn muốn sử dụng ngôn ngữ nào, hãy chọn ngôn ngữ rồi nhấp vào Next.
Nhấn Next để bắt đầu cài đặt
8 Nếu bạn gặp hộp thoại Windows Security, hãy nhấp vào Show More Chọn hộp kiểm Private Networks và bỏ chọn hộp kiểm Public Networks, như trong Hình 2-3, sau đó bấm Allow.
Nếu bạn chọn hộp kiểm Private Networks, điều đó không có
nghĩa là mọi người trên mạng của bạn có thể truy cập máy chủweb cục bộ của bạn XAMPP dành cho Windows được cấu hình sẵn
để chỉ có thể truy cập được từ máy tính được cài đặt
Trang 269 Khi quá trình cài đặt hoàn tất, hãy bỏ chọn hộp kiểm Do You Want to Start the Control Panel Now.
Tôi sẽ nói về cách khởi động Control Panel đúng cách trong phầntiếp theo
10 Bấm vào Finish.
Chạy XAMPP cho Windows Control Panel
XAMPP Control Panel cho phép bạn khởi động, dừng và định cấuhình các ứng dụng XAMPP, đặc biệt là máy chủ web Apache và hệthống cơ sở dữ liệu MySQL Để có kết quả tốt nhất, bạn nên khởi