Làm cách nào để tạo một trang web bằng HTML CSS JavaScript và PHP với mã nguồn?

Tiếng Anh

SGD

10 ngày giao hàng

2 sửa đổi

• 4 trang
• tải lên nội dung
• Thiết kế đáp ứng
• Mã nguồn

Gần đây tôi đã hoàn thành trang web đầu tiên của mình và trước đây tôi không có kiến ​​thức về phát triển web. Như trong hầu hết các công việc liên quan đến CS, internet là người bạn đồng hành thân thiết nhất của tôi. Trong kho lưu trữ này, tôi đã biên soạn một số tài nguyên hữu ích mà tôi tìm thấy trên mạng. Hãy nhớ rằng sẽ có rất nhiều 'google' để làm trên đường đi

Cụ thể hơn, kho lưu trữ này là tập hợp các tài nguyên như HTML, CSS [Bootstrap], PHP, MySQL, JavaScript. Tôi cũng sẽ cung cấp một số tài nguyên về cách xuất bản trang web bằng Amazon AWS và NameCheap

Đề cương

1. HTML
2. CSS
3. Tài liệu bổ sung
4. PHP
5. mysql
6. Máy chủ web cục bộ
7. PHP và MySQL
8. Xuất bản trực tuyến

Ghi chú

Trước khi bạn bắt đầu, hãy tự làm quen với LAMP vs MEAN stacks là gì. Bài viết này rất hữu ích và có thể là một điểm khởi đầu tốt. Trong bài viết này tôi sẽ chỉ nói về LAMP [Linux, Apache, MySQL và PHP]

HTML

HTML là một ngôn ngữ đánh dấu được sử dụng để tạo các trang web. Cá nhân tôi sử dụng W3Schools để tra cứu nhanh cú pháp hoặc như một hướng dẫn tham khảo. Hướng dẫn tại W3School có cả ví dụ và trình chỉnh sửa nơi bạn có thể dùng thử

• Tài liệu web MDN là tài liệu tham khảo HTML do Mozilla cung cấp
• Tôi có thể sử dụng __ không?
• Bạn có thể tìm thấy sổ tay toàn diện hơn về HTML và CSS tại đây. Cá nhân tôi thấy nó hơi khó sử dụng và điều hướng xung quanh
• Không giống như ngôn ngữ kịch bản, nếu bạn gặp lỗi cú pháp thì không có gì chạy, ngôn ngữ đánh dấu sẽ chạy bất kể bạn có mắc lỗi trong tài liệu của mình hay không. Có một trang web nơi bạn có thể kiểm tra tính hợp lệ của đánh dấu HTML, XHTML, v.v.
• Nếu bạn cần sử dụng một số ký tự như '&' hoặc '§', bạn sẽ cần đánh dấu chúng dựa trên giao thức nhất định. Trang Wikipedia cung cấp tài liệu tham khảo thực thể nhân vật

CSS

HTML là ngôn ngữ đánh dấu và Cascading Style Sheet là ngôn ngữ biểu định kiểu. CSS được sử dụng để trình bày HTML theo cách hấp dẫn và dễ tiếp thị hơn. Hãy xem xét nó theo cách này, nếu HTML là khung của trang web thì CSS là hình thức bên ngoài của trang web

• Thủ thuật CSS là trang web nơi bạn có thể tìm thấy sách hướng dẫn tham khảo CSS, video hướng dẫn bạn cách thực hiện một số 'thủ thuật' nhất định và thậm chí có thư viện nơi bạn có thể duyệt tìm một số ý tưởng
• MDN Web Docs của Mozilla cũng có hướng dẫn về cách sử dụng CSS

Có nhiều framework front-end khác nhau. Một số ví dụ là Dựa trên, Nền tảng, CSS thuần túy và Bootstrap

Bootstrap là gì?

Nó là một khuôn khổ front-end được sử dụng để phát triển web. Như tôi đã nói trước đây, nếu HTML là khung của trang web, thì CSS là hình thức bên ngoài và Bootstrap là một công cụ được sử dụng để làm cho hình thức bên ngoài dễ dàng hơn. Khi tôi mới bắt đầu với Bootstrap, tôi đã xem hướng dẫn trên youtube này rất hữu ích

Bootstrap

• Khung Bootstrap rất dễ sử dụng, nó được ghi lại đầy đủ và có rất nhiều tài nguyên trực tuyến có thể giúp bạn hầu hết mọi thứ
• Ngoài ra, trên trang web của họ, bạn có thể tìm thấy rất nhiều ví dụ với mã nguồn

Thanh điều hướng Có lẽ điều đầu tiên bạn muốn trên trang web của mình là thanh điều hướng. Trên trang web Bootstrap bạn có thể tìm thấy nhiều phiên bản khác nhau phù hợp với mục đích của bạn

Băng chuyền là một tính năng thú vị, dễ thực hiện trên trang nhất của bạn. Dưới đây là một số hướng dẫn hữu ích

• tăng cường

Scroll Spy cho phép cập nhật liên kết trong thanh điều hướng dựa trên vị trí của bạn

• trang web khởi động
• W3School
• Hướng dẫn chỉ ra cách tạo hiệu ứng scrollspy

Tài liệu bổ sung

Một số tài nguyên miễn phí bạn có thể sử dụng trực tuyến

1. Các biểu tượng từ W3School
2. Trong IconFinder, bạn có thể tìm thấy cả biểu tượng miễn phí và 'cao cấp'
3. Hình ảnh chất lượng cao miễn phí có thể được tìm thấy trong Bapt. Chỉ cần chắc chắn rằng bạn cung cấp tín dụng cho nhiếp ảnh gia
4. Bootstrap cũng có glyphicons mà bạn có thể sử dụng, rất dễ triển khai trên trang web của bạn. Ví dụ về cách sử dụng chúng có thể được tìm thấy trong W3Schools

PHP

• Nếu bạn muốn sử dụng cơ sở dữ liệu trong trang web của mình, bạn sẽ phải sử dụng ngôn ngữ kịch bản. Nó có thể là JavaScript [hiện rất phổ biến], PHP hoặc một số ngôn ngữ kịch bản khác mà bạn thích
• Như trong bất kỳ ngôn ngữ nào, bạn sẽ phải học cú pháp trước. Tôi thấy các hướng dẫn của W3School rất hữu ích. Nói chung, W3Schools cung cấp giải thích tốt và luôn đưa ra ví dụ
• Ghi chú. Giả sử bạn đang làm việc trên chỉ mục của mình. trang html. Nếu bạn muốn sử dụng php trong chỉ mục của mình. trang html, bạn phải đổi tên chỉ mục của mình. trang html để lập chỉ mục. php. Mã PHP sẽ không hoạt động nếu bạn giữ chỉ mục. tên html

Nếu bạn đang sử dụng PHP, khả năng trang web của bạn cần các biểu mẫu là khá cao. Thông thường mỗi trang chỉ có 1 form và 1 nút gửi

• Điều gì sẽ xảy ra nếu bạn cần nhiều hơn 1 nút gửi trong 1 biểu mẫu. Ví dụ: 1 nút gửi chịu trách nhiệm 'lưu' và nút thứ 2 chịu trách nhiệm 'xóa' trường nhập liệu. Theo dõi StackOverflow rất hữu ích để giải quyết vấn đề đã đề cập ở trên. Ngoài ra, hãy đọc chủ đề này thảo luận về vấn đề tương tự

• Nếu bạn cần có nhiều hơn 1 biểu mẫu trong một trang web thì sao? . Bạn có thể tìm thêm trong diễn đàn này

• Trong HTML và HTTP, mọi trang web được xử lý riêng. Nói cách khác, thông tin ở trang trước sẽ không liên quan đến trang tiếp theo. Tuy nhiên, nếu bạn cần chuyển biến từ trang này sang trang khác, bạn có thể sử dụng 3 phương pháp. Phiên, Cookie, Nhận/Đăng. Có thể tìm thấy nhiều hơn trong trang StackOverflow này

Thủ thuật Bạn cũng có thể tạo biểu mẫu HTML và làm cho nó ẩn trên trang web. Nhưng khi người dùng nhấn. Ví dụ, giả sử bạn có 3 trang web. Trang1, Trang2, Trang3. Và bạn cần chuyển thông tin từ Trang 1 sang Trang 3. Ngoài ra, bạn có các biểu mẫu HTML riêng biệt trên Trang 1 và Trang 2. Nói cách khác, thông tin từ Trang 1 được sử dụng trong Trang 2 và sau đó là Trang 3. Trong trường hợp này, bạn sẽ có biểu mẫu trên Trang 1 và Trang 2. Bí quyết là trong Trang 2, bạn sẽ có 'đầu vào' vô hình sẽ có các giá trị từ Trang 1. Vì vậy, khi người dùng nhấp vào nút Gửi trên Trang 2, họ sẽ chuyển thông tin từ Trang 1 và Trang 2 sang Trang 3

mysql

• Cài đặt MySQL trên máy Mac của bạn. Video youtube này hướng dẫn cách cài đặt MySQL và thiết lập nó trên máy Mac của bạn
  • Đảm bảo MySQL đang chạy trên máy Mac của bạn. Nói cách khác, đi tới Tùy chọn hệ thống và ở dưới cùng, bạn sẽ thấy biểu tượng MySQL. Nhấp vào nó và đảm bảo rằng nó có chữ "Đang chạy" bằng chữ màu xanh lá cây
• Bài viết này tổng hợp hầu hết các câu lệnh trong MySQL, có thể tham khảo trong trường hợp quên câu lệnh
• W3School cũng cung cấp một số hướng dẫn về cách sử dụng MySQL với PHP
• Nếu bạn chưa quen với MySQL và muốn giao diện người dùng dễ dàng, MySQL Workbench là GUI thân thiện với người dùng
• Bạn cũng có thể đăng nhập vào MySQL của mình thông qua thiết bị đầu cuối

  • Trong loại dấu nhắc đầu cuối

    mysql -u root -p
    

    Các hệ thống sẽ hỏi mật khẩu của bạn

  • Sau khi đăng nhập, bạn có thể sử dụng các lệnh được cung cấp trong bài đăng này

• Lưu ý [hầu hết các bạn có thể sẽ không cần]. Khi tôi viết trang web của mình, tôi cần sử dụng ngôn ngữ cyrillic [tôi. e. tiếng Nga] trong Cơ sở dữ liệu MySQL của tôi. Hóa ra MySQL có cấu hình UTF-8 lạ. Do đó, nếu bạn muốn sử dụng ngôn ngữ tiếng Nga trong cơ sở dữ liệu của mình, bạn sẽ cần sửa đổi một chút mã mysql của mình
  • Đây là một bài viết tốt đã giúp tôi. Ngoài ra, đừng quên khởi động lại MySQL, vì chỉ khi đó các thay đổi mới có hiệu lực

Máy chủ web cục bộ

Có rất nhiều lần thử và sai liên quan đến việc tạo một trang web. Cho dù đó là đồ họa hay back-end, bạn cần liên tục kiểm tra xem mã bạn viết có thực sự hoạt động không. Khi bạn chỉ làm việc với HTML, CSS và JavaScript, việc mở. html là đủ để xem những gì bạn dự định làm việc. Tuy nhiên, nếu bạn muốn xem mã php và mysql bạn đã viết có hoạt động chính xác hay không, chỉ cần mở. tệp html sẽ không làm gì cả. Bạn sẽ cần máy chủ web cục bộ để kiểm tra mã của mình. Có lẽ có những khung tốt hơn cho phép bạn kiểm tra mã của mình, nhưng tôi đã sử dụng trình duyệt và XAMPP làm máy trạm chính của mình

• Cài đặt XAMPP
• Trên máy Mac của bạn, hãy đặt thư mục làm việc của bạn [i. e. thư mục chứa trang web của bạn] vào thư mục XAMPP
  • Để truy cập vào thư mục XAMPP, hãy vào Applications/XAMPP/htdocs/yourFolder
• Bây giờ bạn có thể chạy mã từ trình duyệt của mình và xem mã php của bạn có đang làm những gì bạn muốn không
• Ghi chú. Bây giờ, bạn phải cập nhật mã nguồn html và php trong. /htdocs/thư mục của bạn. Bây giờ nó là thư mục làm việc của bạn

PHP và MySQL

Khi bạn đã cài đặt MySQL và PHP trên máy cục bộ của mình, bạn có thể truy cập và kết nối với cơ sở dữ liệu của mình bằng mã PHP sau

Để kiểm tra xem kết nối có thành công hay không, mã nguồn mở nằm trong thư mục XAMPP/htdocs/yourFolder. Mở mã nguồn của bạn trong trình duyệt web và quan sát xem có bất kỳ câu lệnh printf nào bắt đầu bằng "Lỗi" không

Nếu kết nối thành công, bạn có thể yêu cầu truy vấn từ cơ sở dữ liệu của mình

Xuất bản trực tuyến

1. Mua tên miền

   1. 1. Có rất nhiều trang web nơi bạn có thể chọn và mua tên miền. một số trong số họ là. GoDaddy, Google Domains hoặc NameCheap. Lưu ý rằng hướng dẫn tham khảo này giả định rằng bạn sẽ mua miền từ NameCheap

2. Kết nối Miền của bạn với AWS Linux Instance của Amazon

   2. 1. Bạn có Phiên bản EC2 của Amazon không? . 2. Tuy nhiên, nếu bạn chưa thiết lập phiên bản EC2, hãy đọc tiếp

   2. 1. 1 Đầu tiên, tạo tài khoản Amazon AWS miễn phí

   2. 1. 2. Tạo máy ảo. Nói cách khác, tạo Phiên bản EC2 với các tham số bạn cần. Đây là một hướng dẫn được cung cấp bởi Amazon. Khi bạn tạo phiên bản, hệ thống sẽ cung cấp cho bạn. tập tin pem. Đó là khóa ví dụ của bạn. Hãy chắc chắn rằng bạn lưu nó ở một nơi an toàn, bởi vì hệ thống không lưu nó ở bất cứ đâu

   2. 1. 3. Nhấp vào 'Khởi chạy phiên bản' từ bảng điều khiển AWS của bạn

   2. 1. 4. Bạn có thể kết nối với phiên bản EC2 của mình từ thiết bị đầu cuối của máy cục bộ. Trong dấu nhắc lệnh gõ

   ssh -i NameOfYourKey.pem ubuntu@IPAddress
   

   Lưu ý rằng tôi thiết lập EC2 của mình không phải là Linux mà là Ubuntu. Tùy thuộc vào cách bạn thiết lập EC2, bạn sẽ có hệ điều hành khác nhau

   2. 1. 5. Khi bạn kết nối qua thiết bị đầu cuối của mình, bây giờ bạn cần cài đặt MySQL, PHP trên máy ảo của mình. Hướng dẫn này giải thích cách cài đặt LAMP trên máy ảo của bạn

   2. 1. 6. Để kiểm tra xem mọi thứ đã được cài đặt đúng chưa, hãy mở trình duyệt web của bạn và gõ

   //your_server_IP_address/info.php
   

   Trong trường hợp này, 'Địa chỉ IP máy chủ' tương ứng với 'IP công cộng IPv4' trên bảng điều khiển Phiên bản chạy AWS của bạn

   • Bảng điều khiển Phiên bản đang chạy AWS là. đăng nhập vào AWS của Amazon và chọn EC2 từ trang chính. Nhấp vào liên kết “Phiên bản đang chạy”, liên kết này sẽ ở đầu trang web. Bạn sẽ thấy danh sách tất cả các phiên bản EC2 của mình. Cuộn sang bên trái và bạn sẽ thấy IPv4 Public IP

2. 2. Hướng dẫn của Brian Carey là một tài nguyên toàn diện bao gồm các chủ đề như Route 53 và sẽ hướng dẫn bạn cách kết nối Phiên bản Linux với NameCheap. Một lần nữa, lưu ý rằng tôi đã thiết lập Ubuntu

1. Bên trong máy ảo của bạn, đặt thư mục làm việc của bạn [i. e. thư mục chứa trang web của bạn] vào /var/www/html

2. Cho nó một chút thời gian; . Khi bạn xuất bản trang web, có thể mất 24 giờ [mặc dù, thông thường, nó thay đổi từ 30 phút đến vài giờ]

Ghi chú

Kho lưu trữ này có nghĩa là một tập hợp các tài nguyên và hướng dẫn khác nhau từ trực tuyến. Tôi không sở hữu bất kỳ trang web và/hoặc hướng dẫn nào nêu trên

Làm cách nào để tạo một trang web bằng HTML CSS JavaScript và PHP?

Làm cách nào để tạo một trang web bằng HTML và CSS với mã nguồn?

Làm cách nào để tạo một trang web bằng cách sử dụng HTML CSS và JavaScript từng bước?

Chúng tôi có thể tạo một trang web hoạt động với HTML CSS và JavaScript không?