Hướng dẫn javascript login page without database - trang đăng nhập javascript không có cơ sở dữ liệu

Tôi đang cố gắng tạo một hệ thống đăng nhập đơn giản trên trang web của mình không yêu cầu bất kỳ quy trình đăng ký nào. Tôi sẽ đặt tên người dùng và mật khẩu cho mỗi khách hàng sử dụng.

Về cơ bản, ý tưởng là có một trang đăng nhập cho phép khách hàng truy cập và xem các tệp và thông tin (thay vì sử dụng email).

Vấn đề với mã bên dưới là 'tên người dùng' và 'mật khẩu' được mã hóa cứng, tức là dễ dàng xem với tính năng 'phần tử kiểm tra'.

Vì tôi là một người mới, tôi đã tự hỏi liệu tôi có thể tạo một hệ thống an toàn đơn giản mà không cần sử dụng cơ sở dữ liệu và PHP không.

HTML:

Client Dashboard

Javascript:

function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }

Sự khởi đầu của hành trình phát triển web (mặt trước) có thể gây khó khăn. Việc đánh dấu thực sự kỳ lạ lúc đầu. CSS đôi khi làm cho trang của bạn đẹp, những lần khác bạn không biết tại sao một thuộc tính duy nhất biến trang của bạn thành một mớ hỗn độn. Và trong trường hợp đây là lần đầu tiên bạn làm việc với ngôn ngữ lập trình, JavaScript có thể là người đáng sợ nhất trong ba.

Nhưng, khi cuối cùng bạn đã nắm được HTML, CSS và JavaScript, bạn sẽ làm gì với họ? Thực tiễn. Hãy nghĩ về một cái gì đó bạn muốn làm với kiến ​​thức mới của bạn, nó không quan trọng nếu nó có ích, thì nó không quan trọng như thế nào. Chỉ cần làm một cái gì đó giúp bạn trở nên tốt hơn tại HTML, CSS và JavaScript. Và làm ơn, đừng bao giờ quên giá trị của việc xây dựng câm sh*t :)

Hôm nay, như bạn đã tìm ra từ tiêu đề, tôi sẽ đưa bạn qua việc tạo trang đăng nhập bằng cách sử dụng HTML, CSS và JavaScript. Nhưng đừng lo lắng. Một lần nữa, như tiêu đề nói, đây là trang đăng nhập đầu tiên của bạn, có nghĩa là mã đơn giản nhất có thể và sẽ có một lời giải thích để đi kèm với từng đoạn mã.

Trước khi nhảy vào mã mặc dù, hãy để tôi cho bạn thấy những gì chúng tôi sẽ tạo ra:

Đăng nhập các trang đăng nhập đăng nhập với thông tin đăng nhập không hợp lệ

Như bạn có thể thấy, trang chứa một tiêu đề, biểu mẫu đăng nhập (cho tên người dùng và mật khẩu) và một nút đăng nhập mà các bản dữ liệu đầu vào. Lưu ý rằng tôi đã sử dụng dấu ngoặc kép xung quanh việc gửi vì không có bài nộp thực tế. Cả tên người dùng và mật khẩu đều không được gửi đến máy chủ để được xác thực. Thay vào đó, khi người dùng nhấp vào nút đăng nhập, chúng tôi xác nhận rằng tên người dùng là người dùng của người dùng và mật khẩu là trên Web_Dev, bằng cách sử dụng JavaScript. Nếu chúng khớp, thì một hộp thoại cảnh báo được hiển thị và trang được tải lại (vì mục đích đơn giản); Nếu không, chúng tôi hiển thị một thông báo lỗi.

Bây giờ, bạn đã quen thuộc hơn với kết quả cuối cùng, hãy để chuyển sang mã.

HTML

Chúng tôi sẽ bắt đầu với HTML, vì đây là người chịu trách nhiệm cho thông tin được hiển thị trong trang. Nói cách khác, trước tiên chúng ta sẽ viết và cấu trúc tất cả các thông tin có trong trang mà không phải lo lắng cho phong cách (CSS) hoặc tính tương tác (JavaScript). Phân tích tệp HTML hoàn chỉnh miễn là bạn muốn và khi bạn đã sẵn sàng chuyển sang giải thích.

Tệp HTML

Như thường lệ trong các tệp HTML, chúng tôi có hai phần: . Cái trước bao gồm MetainFormation về trang web của chúng tôi, như mã hóa ký tự được sử dụng, tiêu đề của trang (tên bạn thấy trong tab của trình duyệt của bạn) và tham chiếu đến các tệp CSS và JavaScript mà tệp HTML này sẽ sử dụng. Do lưu ý rằng có một thuộc tính defer trong thẻ

Đối với

, được biết đến bởi ID 8 (dòng 15 của mã chính trên), chúng tôi điều chỉnh kích thước của nó và chơi xung quanh với phong cách của nó để làm cho nó nổi bật từ nền tối. Chúng tôi cũng biến
thành một lưới để tạo điều kiện cho việc định vị nội dung của nó chỉ là ba yếu tố: A
function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }
3, A
function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }
6. Do đó, theo mặc định, CSS làm cho lưới ba hàng này, một cho mỗi phần tử. Nói cách khác, hãy nghĩ về hình chữ nhật màu trắng như một lưới ba hàng.

Hàng đầu tiên của lưới, tiêu đề, vẫn như vậy. Việc sửa đổi duy nhất nó được tập trung, do hậu quả của nội dung của 8 được tập trung.

Mặt khác, hàng thứ hai nhận được một số sửa đổi (dòng 26 đến 49), vì chúng ta cần sửa đổi cả hai hàng có chứa thông báo lỗi và sau đó là thông báo lỗi. Chúng tôi sử dụng bố cục lưới một lần nữa để tập trung vào thông báo bên trong hàng thứ hai và làm cho

chiếm tất cả không gian có sẵn trong hàng của nó (hãy nhớ, theo mặc định,
có cùng kích thước với các phần tử mà nó chứa, để làm cho nó lớn hơn bạn cần chỉ định chiều cao và/hoặc chiều rộng của nó).

Đối với thông báo lỗi, chúng tôi chỉ chơi xung quanh với kích thước và kiểu dáng của nó. Do lưu ý rằng ban đầu 6 của nó được đặt thành 0, nghĩa là không hiển thị. Giá trị này sẽ được thay đổi bằng JavaScript khi người dùng nhập thông tin đăng nhập không hợp lệ.

Chúng tôi cũng thay đổi hiển thị một nửa của văn bản trong thông báo lỗi. Nếu bạn nhìn lại phần tử tin nhắn trong HTML, chúng tôi có:

Invalid username and/or password

Lưu ý rằng phần tử 7 kết thúc một nửa văn bản. 7 khá hữu ích khi bạn chỉ muốn tạo kiểu một phần của văn bản trong một phần tử. Bởi vì chúng tôi muốn thông báo lỗi được chia thành hai dòng văn bản, tên người dùng không hợp lệ, và và và/hoặc mật khẩu, chúng tôi làm cho nửa thứ hai hiển thị như một dòng văn bản mới bằng cách đặt màn hình đó của ____ 47 thành defer0 (defer1 ).

Bây giờ chúng ta chỉ cần đi qua các quy tắc ____ 16 16, hàng thứ ba của lưới

, để kết thúc CSS (dòng 71 cho đến khi kết thúc). Chúng tôi bắt đầu bằng cách sử dụng bố cục lưới lần cuối cùng để biến
function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }
6 thành lưới. Mặc dù vậy, chúng tôi cũng sử dụng một thuộc tính lưới khác trong quy tắc của nó, defer5. Vì
function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }
6 là một mục lưới của thùng chứa lưới phần tử
, chúng ta có thể cho biết mục đó phải được định vị bên trong hàng của chính nó như thế nào. Do đó, chúng tôi bảo nó được liên kết theo chiều dọc lên đỉnh hàng của nó với defer8. Không hơn không kém.

Sau đó, chúng tôi tạo kiểu cho các lĩnh vực hình thức. Vì chúng tôi muốn cả hai trường (tên người dùng và mật khẩu) trông giống nhau, chúng tôi tạo một quy tắc duy nhất chọn lớp được cung cấp cho cả hai phần tử, defer9. Thay vì chọn từng phần tử riêng lẻ bằng ID của nó chỉ để lặp lại CSS, chúng tôi viết CSS một lần trong một lớp và sau đó đưa lớp đó cho cả hai phần tử.

Đối với các sửa đổi phong cách, đó là một số thay đổi nhỏ để làm cho hai yếu tố

function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }
7 này trông tốt hơn. Để giữ kiểu văn bản giữ chỗ phù hợp với kiểu
function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }
7S, chúng tôi cũng thay đổi màu sắc của những người giữ chỗ đó với phần tử giả

Sau đó, chúng tôi tạo một trình nghe sự kiện cho nút đăng nhập, loại