Tôi lưu tệp html trong xampp ở đâu?
|
Trong hướng dẫn này, chúng ta sẽ thảo luận chi tiết về cách tạo biểu mẫu phản hồi từ đầu bằng HTML, JavaScript và Bootstrap 5. Chúng tôi sử dụng HTML để cấu trúc trang web, Bootstrap để cách điệu trang web và JavaScript để làm cho biểu mẫu phản hồi nhanh. Chúng tôi sẽ sử dụng các tệp JSON bên ngoài cho dữ liệu được hiển thị trong biểu mẫu của chúng tôi. Ngoài ra, chúng tôi sẽ lưu trữ trang web cục bộ bằng phần mềm XAMPP Show
Hệ thống tệp cho biểu mẫuBước đầu tiên để tạo một trang web là tạo một thư mục để lưu trữ tất cả các tệp cần thiết cho trang web của chúng tôi. Hệ thống tệp cho biểu mẫu web của chúng tôi sẽ trông như sau  Vì vậy, trong hệ thống tệp của chúng tôi, chúng tôi có một thư mục dành cho bootstrap có tên CSS, tệp HTML, hai tệp JavaScript và hai tệp JSON. Chúng tôi cần tải xuống bootstrap 5 để thêm tệp CSS vào hệ thống tệp của chúng tôi. bạn có thể tải về bằng cách nhấn vào đây. Sau khi tải xuống, hãy giải nén thư mục đã nén và chỉ sao chép-dán thư mục CSS vào hệ thống tệp. Tiếp theo, bạn cần tải xuống tệp jquery cho trang web của chúng tôi. Bạn có thể tải về từ đây. Đối với dự án này, tôi đã sử dụng jquery-2. 1. 4 Trong các phần tiếp theo, chúng tôi sẽ nói chi tiết về các tệp còn lại Tệp HTMLCần có tệp HTML để cấu trúc trang web của chúng tôi. Nó là nền tảng của trang web của chúng tôi. Mã HTML cho dự án của chúng tôi như sau
STUDENT DETAILS FORM
Đây là mã HTML hoàn chỉnh cho dự án. Bây giờ chúng ta hãy xem chi tiết từng phần của mã Mã HTML bắt đầu bằng thẻ và kết thúc bằng thẻ. Nó có hai phần - đầu và thân. Bây giờ chúng ta hãy nhìn vào phần đầu yếu tốPhần đầu bắt đầu bằng thẻ và kết thúc bằng thẻ. Nó thường chứa siêu dữ liệu tôi. dữ liệu về tài liệu HTML chẳng hạn như tiêu đề tài liệu. Siêu dữ liệu thường không được hiển thị Chúng tôi cung cấp tiêu đề tài liệu trong thẻ tiêu đề như được hiển thị trên dòng 3 Tiếp đến là thẻ liên kết. Thẻ liên kết kết nối HTML của chúng tôi với một tệp bên ngoài, thường là tệp CSS. Vì vậy, ở đây chúng tôi đang sử dụng thẻ liên kết để kết nối với tệp bootstrap của chúng tôi. Thẻ liên kết bao gồm một thuộc tính được gọi là rel. Thuộc tính rel chỉ định mối quan hệ giữa tài liệu HTML của chúng tôi và tệp bên ngoài. Vì vậy, ở đây, chúng tôi cung cấp cho nó như là một "bản định kiểu". Tiếp theo, chúng ta sử dụng thuộc tính href để chỉ định đường dẫn của tệp CSS. Vì thư mục nằm trong hệ thống tệp của chúng tôi nên chúng tôi không cần cung cấp toàn bộ đường dẫn của nó. Chúng ta cần bootstrap. css cho dự án của chúng tôi, vì vậy chúng tôi có thể cung cấp đường dẫn dưới dạng css/bootstrap. css Bây giờ, chúng ta hãy nhìn vào phần cơ thể yếu tốPhần nội dung bắt đầu bằng thẻ và kết thúc bằng thẻ. Nó bao gồm tất cả nội dung trong trang HTML của chúng tôi. tiêu đề, đoạn văn, hình ảnh, v.v. Chúng tôi sử dụng thẻ tập lệnh để kết nối tài liệu HTML của mình với các tệp JavaScript bên ngoài. Thuộc tính type chỉ định loại tệp, ở đây là tệp JavaScript. Thuộc tính src được sử dụng để cung cấp đường dẫn cho các tệp JS của chúng tôi. Vì các tệp của chúng tôi nằm trong chính hệ thống tệp, chỉ tên của tệp cùng với. phần mở rộng js là đủ. Chúng tôi sẽ xem xét nội dung của chỉ mục của chúng tôi. js chi tiết trong phần tiếp theo Sau đó, chúng tôi bắt đầu với nội dung chính của trang web bằng cách sử dụng nhãn. Thẻ div được sử dụng để xác định một phần của trang web của chúng tôi. Vùng chứa này sẽ được sử dụng cho tiêu đề của biểu mẫu của chúng tôi. Thẻ div bao gồm một thuộc tính lớp. Chúng ta có thể sử dụng thuộc tính lớp để cách điệu nội dung trong bộ chứa div. Ở đây, chúng tôi sử dụng một lớp gọi là container-lg. Nó là một lớp được xác định trước trong bootstrap và chúng tôi sử dụng nó để đặt kích thước cho vùng chứa của chúng tôi. Sau đó, chúng ta bắt đầu một thẻ div khác với lớp text-center Lớp này thẳng hàng với tiêu đề ở giữa trang. Tiếp theo, chúng tôi thêm thẻ nhãn. HTML cung cấp cho chúng ta các kích cỡ tiêu đề khác nhau, từđến. Tiếp theo, chúng tôi sử dụng một phần tử đoạn vănđể viết một số văn bản dưới tiêu đề. Chúng tôi sử dụng lớp dẫn đầu để thêm một số điểm nhấn cho văn bản. Cuối cùng, chúng tôi đóng container bằng cách sử dụng nhãnyếu tốTiếp theo, chúng tôi bắt đầu với nội dung của biểu mẫu của chúng tôi. Chúng ta cần tạo một vùng chứa div cho biểu mẫu của mình. Chúng tôi sử dụng hàng lớp justify-content-center my-4 để căn giữa nội dung và thêm một số phần đệm vào trên cùng và dưới cùng. Sau đó, trong vùng chứa div tiếp theo, chúng tôi chỉ định lớp là col-lg-6. Nó được sử dụng để chỉ định kích thước của một cột và là viết tắt của cột lớn Sau đó, chúng tôi bắt đầu biểu mẫu của mình bằng cách sử dụng thẻ. Chúng tôi sử dụng thuộc tính onSubmit để xác định hành động được thực hiện khi gửi biểu mẫu. Vì vậy, chúng ta gọi một hàm gọi là saveFile() (sẽ được thảo luận trong phần JS). Tiếp theo, đặt tên của biểu mẫu là “webform”. Chúng tôi đã sử dụng bóng lớp mt-1 border p-5 pb-4 bg-light để thêm phần đệm và xác định ranh giới của biểu mẫu của chúng tôi Menu thả xuốngChúng tôi sẽ sử dụng các menu thả xuống trong biểu mẫu của chúng tôi. Menu thả xuống đầu tiên là để chọn tên của học sinh. Do đó, chúng tôi sử dụng phần tử nhãn để đặt nhãn cho menu thả xuống. Thuộc tính for được sử dụng để liên kết nhãn với id của menu thả xuống. Id của trình đơn thả xuống đầu tiên là mylist1. Chúng tôi sử dụng lớp nhãn biểu mẫu cho thẻ nhãn. Thẻ được sử dụng để tạo danh sách thả xuống. Chúng tôi sử dụng từ khóa bắt buộc để chỉ định rằng một tùy chọn phải được chọn trước khi gửi biểu mẫu. Chúng tôi đặt id là mylist1 và tên là STUDENT cho danh sách thả xuống. Ngoài ra, để tạo phong cách cho biểu mẫu của chúng tôi, chúng tôi sử dụng biểu mẫu chọn lớp bootstrap. Sau đó, chúng tôi sử dụng thẻ loại Gửi. Nó tạo một nút gửi để gửi tất cả dữ liệu biểu mẫu. Hành động được thực hiện được kiểm soát bởi chức năng được chỉ định trong thuộc tính onSubmit của thẻ biểu mẫu (đã thảo luận trước đó). Tương tự, chúng tôi sử dụng thẻ đầu vào loại Đặt lại để tạo nút đặt lại. Nút này đặt lại tất cả các tùy chọn đã chọn về mặc định. Để cách điệu các nút, chúng tôi sử dụng lớp btn btn-secondary Cuối cùng, ở cuối biểu mẫu, chúng tôi chỉ định bản quyền bằng cách sử dụng ký tự © theo sau là tên của tổ chức Tệp JavaScriptVì vậy, bây giờ chúng ta đã hoàn thành việc xem qua tệp HTML của mình, chúng ta hãy xem nội dung của chỉ mục. tập tin js. Mã hoàn chỉnh như sau $.getJSON('names.json', function(data) {
var select = document.getElementById("mylist1")
var select2 = document.getElementById("mylist2")
for(var i = 0; i < data['mylist1'].length; i++){
var option = document.createElement("OPTION"),
txt = document.createTextNode(data['mylist1'][i]['name']);
option.appendChild(txt);
select.insertBefore(option,select.lastChild);
var option2 = document.createElement("OPTION"),
txt2 = document.createTextNode(data['mylist1'][i]['id']);
option2.appendChild(txt2);
select2.insertBefore(option2,select2.lastChild);
}
});
$.getJSON('states.json', function(data) {
var select3 = document.getElementById("mylist3")
for(var i = 0; i < data['states'].length; i++){
var option3 = document.createElement("OPTION"),
txt3 = document.createTextNode(data['states'][i]['name']);
option3.appendChild(txt3);
select3.insertBefore(option3,select3.lastChild);
}
});
let saveFile = () => {
// Get the data from each element on the form.
const name = document.getElementById('mylist1');
const rollno = document.getElementById('mylist2');
const state = document.getElementById('mylist3');
// This variable stores all the data.
let data =
'\r NAME OF THE STUDENT: ' + name.value + ' \r\n ' +
'ROLL NUMBER: ' +rollno.value + ' \r\n ' +
'STATE/UT: ' + state.value + ' \r\n ';
// Convert the text to BLOB.
const textToBLOB = new Blob([data], { type: 'text/plain' });
const sFileName = 'formData.txt'; // The file to save the data.
let newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
Đầu tiên, chúng tôi sẽ liên kết các tệp JSON bên ngoài với tệp HTML của chúng tôi Liên kết các tệp JSONVì vậy, chúng tôi sử dụng hàm getJSON để lấy dữ liệu từ tệp JSON của mình. Chúng tôi đã đặt tên cho tên tập tin. json. Vì vậy, ở đây, chúng tôi dự định lấy tên sinh viên cũng như số thứ tự từ tệp JSON. Chúng tôi đang lấy số cuộn từ giá trị id và tên từ giá trị tên được cung cấp trong tệp JSON của chúng tôi Lưu ý rằng danh sách được đặt tên là mylist1 trong tên. tập tin json. Nội dung file JSON được đính kèm bên dưới để các bạn tham khảo Vì vậy, trước tiên, chúng tôi tạo hai biến select và select2, đồng thời gán chúng cho menu thả xuống thứ nhất và thứ hai thông qua id duy nhất của chúng. Với mục đích này, chúng tôi sử dụng tài liệu. hàm getElementById() Bây giờ, chúng tôi sẽ lặp qua nội dung của tệp JSON để thêm từng cái một vào menu thả xuống của chúng tôi. Một vòng lặp for được sử dụng cho mục đích này. Chúng tôi có thể lấy độ dài của nội dung bằng cách sử dụng data[‘mylist1’]. chiều dài. Trong vòng lặp, chúng tôi tạo phần tử tùy chọn HTML bằng cách sử dụng tài liệu. createElement(“OPTION”) và gán nó cho một tùy chọn biến Sau đó, chúng tôi tạo một nút văn bản (để văn bản được cung cấp trong thành phần tùy chọn) bằng cách sử dụng tài liệu. createTextNode() và đặt tên từ tệp JSON làm đối số của nó. Chúng tôi gán nút văn bản cho biến txt Sau khi làm như vậy, chúng ta cần nối văn bản vào các tùy chọn của mình. chúng tôi sử dụng. appendChild() để nối văn bản vào các tùy chọn của chúng tôi. Theo đó, chúng tôi sử dụng. Hàm insertB Before() để chèn nút văn bản trước nút tham chiếu Tương tự, chúng tôi cũng tạo các tùy chọn cho menu thả xuống số cuộn. Nội dung tệp JSON như sau Các tệp JSON cho Biểu mẫu{
"mylist1":[
{
"id":"1",
"name":"James"
},
{
"id":"2",
"name":"Sarah"
},
{
"id":"3",
"name":"Nitish"
},
{
"id":"4",
"name":"Sam"
},
{
"id":"5",
"name":"Shweta"
},
{
"id":"6",
"name":"Mohit"
},
{
"id":"7",
"name":"Jacob"
},
{
"id":"8",
"name":"Aarthi"
},
{
"id":"9",
"name":"Clara"
},
{
"id":"10",
"name":"Mohan"
}
]
}
Đối với menu thả xuống thứ ba (các trạng thái/UT), chúng ta cần lấy dữ liệu từ tệp JSON thứ hai có tên là các trạng thái. json Mã cho nó giống như trên, chỉ cần thay đổi tên biến và id. Nội dung của tệp JSON được đính kèm bên dưới {
"states":[
{
"id":"1",
"name":"Andaman and Nicobar Islands"
},
{
"id":"2",
"name":"Andhra Pradesh"
},
{
"id":"3",
"name":"Arunachal Pradesh"
},
{
"id":"4",
"name":"Assam"
},
{
"id":"5",
"name":"Chandigarh"
},
{
"id":"6",
"name":"Chhattisgarh"
},
{
"id":"7",
"name":"Dadra and Nagar Haveli"
},
{
"id":"8",
"name":"Daman and Diu"
},
{
"id":"9",
"name":"Delhi"
},
{
"id":"10",
"name":"Goa"
},
{
"id":"11",
"name":"Gujarat"
},
{
"id":"12",
"name":"Haryana"
},
{
"id":"13",
"name":"Himachal Pradesh"
},
{
"id":"14",
"name":"Jammu and Kashmir"
},
{
"id":"15",
"name":"Jharkhand"
},
{
"id":"16",
"name":"Kerala"
},
{
"id":"17",
"name":"Lakshadweep"
},
{
"id":"18",
"name":"Madhya Pradesh"
},
{
"id":"19",
"name":"Maharashtra"
},
{
"id":"20",
"name":"Manipur"
},
{
"id":"21",
"name":"Meghalaya"
},
{
"id":"22",
"name":"Mizoram"
},
{
"id":"23",
"name":"Nagaland"
},
{
"id":"24",
"name":"Odisha"
},
{
"id":"25",
"name":"Puducherry"
},
{
"id":"26",
"name":"Punjab"
},
{
"id":"27",
"name":"Rajasthan"
},
{
"id":"28",
"name":"Sikkim"
},
{
"id":"29",
"name":"Tamil Nadu"
},
{
"id":"30",
"name":"Telangana"
},
{
"id":"31",
"name":"Tripura"
},
{
"id":"32",
"name":"Uttar Pradesh"
},
{
"id":"33",
"name":"Uttarakhand"
},
{
"id":"34",
"name":"West Bengal"
},
{
"id":"35",
"name":"Karnataka"
},
{
"id":"36",
"name":"Bihar"
}
]
}
Tiếp theo, chúng ta sẽ xem xét các chức năng được sử dụng trong biểu mẫu của chúng tôi để gửi dữ liệu Các hàm cho dữ liệu biểu mẫuTrong phần trước, chúng ta đã thảo luận về thuộc tính onSubmit và hàm saveFile() được sử dụng cho nó. Mục tiêu của việc sử dụng chức năng này là tải xuống cục bộ dữ liệu biểu mẫu dưới dạng tệp văn bản. Bây giờ, chúng ta hãy xem nội dung của chức năng này Đầu tiên, chúng tôi lấy dữ liệu từ menu thả xuống của mình bằng cách sử dụng id của chúng làm đối số cho tài liệu. hàm getElementById(). Chúng tôi gán dữ liệu này cho ba biến – tên, danh sách và trạng thái Tiếp theo, chúng tôi lưu trữ dữ liệu biểu mẫu cần tải xuống trong một biến được gọi là dữ liệu Tiếp theo, chúng tôi chuyển đổi văn bản này thành một đốm màu bằng hàm Blob() và gán nó cho một const textToBLOB. Giá trị của một hằng số không thể thay đổi sau này. Tiếp theo, chúng ta khởi tạo một const sFileName khác là formData. txt Sau đó, chúng tôi tạo một phần tử neo bằng cách sử dụng. hàm createElement(). Chúng tôi sẽ tải xuống dữ liệu trong tệp văn bản có tên formData. txt. Phần tử neo có một thuộc tính có tên href xác định đích của liên kết. Sử dụng vòng lặp if-else, chúng tôi gán liên kết dữ liệu của chúng tôi ở định dạng blob cho thuộc tính href. Cuối cùng, khi nhấp vào tùy chọn gửi trong biểu mẫu của chúng tôi, dữ liệu biểu mẫu do người dùng nhập sẽ được tải xuống dưới dạng tệp văn bản vào hệ thống của chúng tôi Lưu trữ Biểu mẫu của chúng tôi cục bộ bằng XAMPPNhư vậy là chúng ta đã hoàn thành phần code cho mẫu web của mình. Tiếp theo, hãy để chúng tôi lưu trữ cục bộ. Chúng tôi sẽ lưu trữ nó bằng phần mềm XAMPP. Bạn có thể tải phần mềm từ đây. Sau khi tải xuống, chúng tôi cần làm theo một số bước để lưu trữ cục bộ trang web của mình. Đầu tiên, tìm một thư mục có tên htdocs trong thư mục xampp Chúng tôi cần sao chép và dán hệ thống tệp của mình vào thư mục htdocs. Tiếp theo, mở bảng điều khiển XAMPP và khởi động mô-đun Apache Tiếp theo, mở trình duyệt tốt nhất là Google Chrome. Bây giờ, chúng ta cần nhập đường dẫn của hệ thống tệp của mình. Chúng tôi làm điều đó theo cách sau ví dụ. http. // localhost/trang web/g_form. html Tên của hệ thống tệp là trang web và tên của tệp HTML là g_form. Vì vậy, chúng ta cần gõ http. // localhost/ theo sau là tên của hệ thống tệp của chúng tôi và tên của tài liệu HTML của chúng tôi. Đừng quên gõ vào. phần mở rộng html. Sản phẩm cuối cùng sẽ trông như sau Sự kết luậnChúng tôi đã tạo thành công biểu mẫu phản hồi của mình bằng HTML, JS và Bootstrap 5. Chúng tôi đã thấy cách lấy dữ liệu từ tệp JSON bên ngoài bằng cách liên kết tệp đó với HTML của chúng tôi. Ngoài ra, chúng tôi đã thấy cách lưu trữ cục bộ bằng phần mềm XAMPP Các tệp HTML XAMPP ở đâu?Thư mục htdocs của XAMPP mặc định là thư mục chung. Nếu bạn đang sử dụng Windows, hãy tìm trong C. đường dẫn \xampp\htdocs .
Làm cách nào để kết nối HTML với XAMPP?Đối với điều này, trước tiên bạn cần phải tạo một thư mục làm việc và sau đó tạo một trang web có tên “liên hệ. html” . Nếu bạn cài xampp thì thư mục làm việc của bạn nằm trong thư mục này “E. \xampp\htdocs”. Bạn có thể tạo một thư mục mới “liên hệ” trên thư mục làm việc localhost của bạn.
Chạy HTML trên máy chủ Apache như thế nào?Đặt tệp HTML của bạn vào C. Thư mục \Program Files\Apache Group\Apache2\htdocs . Giả sử bạn đặt tệp test. html ở đó. Sau đó, bạn có thể truy cập nó từ trình duyệt bằng cách gõ http. //máy chủ cục bộ. 8080/bài kiểm tra. html trong khu vực URL. |
