Phản ứng bản địa với php mysql

Hôm nay chúng ta sẽ nói về Cách xây dựng đăng ký người dùng React JS với PHP và MySQL. Trước hết, tôi muốn đưa ra một ý tưởng nhỏ về React JS. React JS là thư viện JavaScript mặt trước để xây dựng giao diện người dùng. Nó được duy trì bởi Facebook và cộng đồng các nhà phát triển và công ty riêng lẻ. React có thể được sử dụng làm cơ sở trong việc phát triển các ứng dụng di động hoặc trang đơn

Nếu bạn thông thạo HTML, CSS và JavaScript thì ở đây rất hữu ích. Hãy bắt đầu từng bước dự án React JS của chúng ta

Trước hết, bạn cần Tải xuống và Cài đặt Nút. js. Sau đó, Chuyển đến vị trí bạn muốn bắt đầu dự án và mở CMD và chạy mã bên dưới để cài đặt phản ứng

npm install -g create-react-app

Sau đó chạy mã dưới đây để tạo dự án của bạn

create-react-app registration

Sau khi dự án xây dựng thành công, hãy vào trong thư mục dự án và mở dự án bằng cách sử dụng npm start

cd registrationnpm start

Sau đó, bạn có thể thấy đầu ra như bên dưới

hình 01

Bây giờ hãy mở thư mục dự án bằng trình chỉnh sửa Visual Studio Code. Sau đó, bạn có thể thấy các tệp dự án như bên dưới

hình 02

Ở đây chúng tôi chủ yếu tập trung vào Ứng dụng. js và ứng dụng. css bên trong thư mục src. Bây giờ bạn phải xóa toàn bộ mã bên trong Ứng dụng. js và ứng dụng. css. Chúng ta không cần mã đó, chúng ta phải thực hành từng bước. Sau đó nhập mã bên dưới vào Ứng dụng. js làm bài thực hành của bạn và lưu nó

import './App.css'; function App(){ return( <div> <h1>Registration Form</h1> </div> ); } export default App;

Ở đây trong dòng đầu tiên, chúng ta phải nhập Ứng dụng. tệp css cho mục đích phong cách. Vì vậy, bạn có thể tạo kiểu cho dự án của mình bằng kiến ​​thức CSS của mình. Sử dụng đoạn mã trên, bạn có thể nhận được đầu ra như bên dưới

hình 03

Tạo trang đăng ký

Trong bài viết này, chúng tôi hy vọng sẽ tạo các trang đăng nhập và đăng ký. Vì vậy, nhấp chuột phải vào thư mục src và tạo một thư mục mới có tên là “các thành phần” (như hình 04). Trong thư mục này, chúng tôi sẽ lưu trữ thành phần đăng nhập và thành phần đăng ký

hình 04

Đầu tiên, nhấp chuột phải vào thư mục “thành phần” và tạo một thư mục mới có tên “đăng ký“. Sau đó nhấp chuột phải vào thư mục “đăng ký” và tạo hai tệp có tên “đăng ký. js” và “đăng ký. css” như hình 05 và hình 06. Bây giờ cấu trúc thư mục của bạn sẽ giống như hình 06

• hình 05
• hình 06

Và ở đây tôi hy vọng sẽ sử dụng MATERIAL-UI để tạo giao diện. Material-UI là thư viện cho phép chúng tôi phát triển web nhanh hơn và dễ dàng hơn. Trước hết, chúng ta phải cài đặt thư viện Material-UI trong dự án của mình. Bạn có thể cài đặt cái này bằng cách sử dụng npm hoặc sợi như bên dưới

// with npm npm install @material-ui/core // with yarn yarn add @material-ui/core

Sau đó, chúng tôi đã sẵn sàng để sử dụng Material -UI. Vì vậy, mở đăng ký. js và nhập mã bên dưới. Nếu bạn mới hơn, đừng nghĩ rằng đây là một mã phức tạp. Ở đây chúng tôi sử dụng thẻ vật liệu. Vì vậy, chúng tôi phải nhập Thẻ, CardActions và CardContent trước khi sử dụng chúng. Và nếu chúng tôi sử dụng Nút hoặc thứ gì đó trong thư viện vật liệu, chúng tôi phải nhập những thứ đó. Bạn có thể sử dụng nhiều thành phần bên trong thư viện Vật liệu bằng cách theo dõi trang web MATERIAL-UI

import './signup.css'; import React from 'react'; import Card from '@material-ui/core/Card'; import CardActions from '@material-ui/core/CardActions'; import CardContent from '@material-ui/core/CardContent'; import Button from '@material-ui/core/Button'; import { Component } from 'react'; class Signup extends Component() { render(){ return ( <div className="card"> <Card> <CardContent> <h1>Registration Form here</h1> </CardContent> <CardActions> <Button> Button </Button> </CardActions> </Card> </div> ); } } export default Signup;

Ở dòng thứ 10, tôi đã sử dụng className=”card”. Sử dụng className, chúng ta có thể thêm các kiểu CSS từ phần đăng ký. tập tin css như dưới đây. Vì vậy, hãy nhập mã này vào phần đăng ký của bạn. tập tin css

.card{ padding-top: 100px; display: flex; justify-content: center; flex-direction: row; }

Sau đó, bước đầu tiên của chúng tôi là ok. Bây giờ chúng ta phải thêm cái này vào Ứng dụng. js nếu không chúng tôi không thể nhìn thấy nó trong đầu ra của chúng tôi. Vì vậy, hãy mở Ứng dụng. js và thêm thành phần Đăng ký của bạn như hình 07

Sau đó làm mới trang hoặc sử dụng npm start. bạn có thể nhận được đầu ra như dưới đây

hình 07

Tạo thành phần hộp văn bản

Bây giờ, hãy tạo một thành phần mới để nhập văn bản. Vì vậy, ngay trên thư mục “src” và tạo một thư mục mới có tên là “core”. Bên trong thư mục “core” tạo một thư mục khác có tên “textField”. Có thể bạn thắc mắc tại sao tôi lại sử dụng hai thư mục. Ở đây mình sử dụng thư mục “ components” để chứa các main component như signup component. Và tôi sử dụng thư mục “core” để lưu trữ các thành phần nhỏ như thành phần trường văn bản, thành phần nút. Sau đó, bạn có thể thấy cấu trúc thư mục “src” như bên dưới

hình 08

Trong dự án này, chúng ta có thể cần hộp văn bản nhiều lần. Vì vậy, trong “React JS”, ​​thỉnh thoảng chúng ta không cần tạo hộp văn bản. Chúng tôi có thể sử dụng cùng một hộp văn bản bằng cách thay đổi các thuộc tính theo yêu cầu của chúng tôi

Bây giờ hãy mở textField. js và nhập mã bên dưới. Trong mã này, bạn có thể thấy “props” bên trong chức năng TextBox. Chúng ta có thể sử dụng các "đạo cụ" này để lấy các thuộc tính của các hộp văn bản. Trước đây chúng ta đã thảo luận, chúng ta có thể sử dụng hộp văn bản này nhiều lần. Ví dụ, trong hộp văn bản tên, chúng ta có thể chuyển nhãn cho tham số "đạo cụ" này

________số 8

Sau đó, bên trong textField. css gõ mã dưới đây

.form{ margin-top: 20px; padding-left: 20px; padding-right: 20px; }

Thêm trường văn bản vào thành phần đăng ký

When we add a text box in the signup, we can add like . Let’s see how can we add this inside another component. So open signup.js and update your code according to the below code. Here I add CSS styles using the className tag. And you can see the inline CSS style in the 20th line. So, customize your styles as you wish.

create-react-app registration0

Sau đó cập nhật đăng ký. tập tin css như dưới đây

create-react-app registration1

Sau đó, bạn có thể thấy trang đăng ký của mình như thế này

hình 09

Khi đăng ký người dùng, chúng tôi phải lấy tên người dùng, email, mật khẩu, xác nhận mật khẩu, số điện thoại. Vì vậy, hãy sử dụng các thành phần trường văn bản để đăng ký. js bằng cách thay đổi thuộc tính nhãn như trước đây chúng tôi đã thêm “Tên đầy đủ”

create-react-app registration2

Cuối cùng, Bạn có thể thấy đầu ra như hình 10

hình 10

Nhận các giá trị trong hộp văn bản bằng cách nhấp vào nút

Đầu tiên, chúng ta cần tạo một hàm tạo bên trong đăng ký. tập tin js. Và sau đó đặt trạng thái ban đầu và liên kết trạng thái này với các sự kiện bên trong hàm tạo. Sau đó mở đăng ký. js và nhập mã dưới đây. Ở đây tôi chỉ thêm mã cho một hộp văn bản, nếu không, mã có thể phức tạp đối với người mới bắt đầu. Ở đây trạng thái sử dụng để đặt giá trị ban đầu

create-react-app registration3

Sau đó, chúng ta phải tạo năm hàm để gán giá trị cho hộp văn bản của mình. Ở đây bạn có thể thấy một trong số họ. Vì vậy, hãy cố gắng tạo bốn chức năng khác. Tôi sẽ hiển thị mã đầy đủ cuối cùng. Đây  ‘e’ là đối số của trình xử lý sự kiện. Sự kiện là các đối tượng có thuộc tính nhất định. Và 'e. Mục tiêu. value' được sử dụng để xác định thuộc tính giá trị của một số phần tử DOM, trong trường hợp này, điều đó có nghĩa là văn bản được nhập vào trường văn bản đầu vào

create-react-app registration4

Sau đó, chúng ta cần thuộc tính “onChange” để gán trạng thái cho người dùng nhập vào và thuộc tính “value” dùng để hiển thị giá trị trên textbox

create-react-app registration5

Khi bạn đặt “giá trị” và “onChange” như đoạn mã trên, bạn phải cập nhật thành phần TextBox. Vì vậy, hãy mở “textField. js” và cập nhật TextField như bên dưới

create-react-app registration6

Bây giờ, hãy tạo một chức năng mới để gửi dữ liệu. Tại đây, 'preventDefault()' được gọi trong sự kiện khi gửi biểu mẫu để ngăn tải lại/làm mới trình duyệt. Khi chúng tôi nhấp vào nút Đăng ký, các giá trị được gán cho đối tượng 'obj'. Và 'bảng điều khiển. log(obj)‘ dùng để in ‘obj’ trong bảng điều khiển

create-react-app registration7

Sau đó, trong nút gửi, chúng ta phải gọi hàm 'onSubmit()' như bên dưới

create-react-app registration8

Sau khi bạn hoàn thành các bước trên, hãy so sánh đăng ký cập nhật của bạn. mã tệp js với đoạn mã sau

create-react-app registration9

Bây giờ, nhấp chuột phải vào trang và chọn kiểm tra (hoặc nhấp CTRL+SHIFT+I). Sau đó nhập một số dữ liệu vào biểu mẫu đăng ký và nhấp vào nút đăng ký. Bạn có thể thấy các giá trị đầu vào trong bảng điều khiển

hình 11

Cài đặt thư viện Axios

Trước hết, chúng ta phải cài đặt thư viện Axios. Nó được sử dụng để tạo yêu cầu tới API và trả về dữ liệu từ API. Vì vậy, hãy mở CMD bên trong thư mục dự án và chạy mã bên dưới

cd registration0

Sau khi cài đặt thành công thư viện Axios, hãy nhập Axios trong phần đăng ký. js như bên dưới

cd registration1

Sau đó nhập mã bên dưới vào hàm gửi trong phần đăng ký. tệp js. Và chúng ta phải tạo một thư mục có tên là “ReacProject” bên trong thư mục “htdocs” của máy chủ XAMPP

cd registration2

Sau đó, chức năng gửi sẽ giống như dưới đây. Ở đây mình dùng điều kiện if để kiểm tra mật khẩu có trùng với mật khẩu đã xác nhận không

cd registration3

Tạo cơ sở dữ liệu MySQL

Bây giờ hãy mở XAMPP và khởi động Apache và MySQL. Sau đó, bạn có thể thấy bảng điều khiển XAMPP như bên dưới

hình 12

Sau đó gõ “http. //localhost/phpmyadmin/ ” trên trình duyệt của bạn. Sau khi mở PHPMyAdmin, nhấp vào Cơ sở dữ liệu

hình 13

Bây giờ hãy tạo một cơ sở dữ liệu có tên “reactjsUsers“

hình 14

Sau đó tạo một bảng có tên là “người dùng”. Ở đây chúng tôi cần năm cột để lưu trữ id, tên, email, điện thoại và mật khẩu

hình 15

Bây giờ hãy đặt tên cột và kiểu dữ liệu như bên dưới. Ở đây chúng ta phải đặt “sid” làm Khóa chính và Tự động tăng

hình 16

Sau đó, bạn có thể xem bảng bên dưới

hình 17

Triển khai API PHP REST

Bây giờ đi đến đường dẫn “C. \xampp\htdocs” và tạo một thư mục mới có tên “Reac Project“. Sau đó, bên trong thư mục “Reac Project”, tạo một tệp có tên “connect. php”. Điều đó được sử dụng để kết nối cơ sở dữ liệu. Sau đó, mở “kết nối. php” bằng bất kỳ trình chỉnh sửa mã nào và nhập mã bên dưới. Tại đây bạn có thể thay đổi tên người dùng, mật khẩu và tên cơ sở dữ liệu theo dự án của bạn

cd registration4

Sau đó tạo một tệp PHP khác có tên là “insert. php” và nhập mã bên dưới

cd registration5

Sau đó chạy dự án, nhập dữ liệu mẫu và gửi. Bạn có thể thấy thông báo “Đã kết nối thành công” trong nhật ký giao diện điều khiển

hình 18

Bây giờ hãy mở PHPMyAdmin và xem kết quả. Bạn có thể thấy, dữ liệu được thêm vào cơ sở dữ liệu thành công

hình 19

Tôi nghĩ bây giờ bạn đã có ý tưởng rõ ràng để xây dựng Đăng ký người dùng React JS. Nếu bạn có bất kỳ vấn đề với bài học này bình luận về nó. Hẹn gặp lại trong bài học tiếp theo. Và bạn có thể làm theo Hướng dẫn thiết kế web của chúng tôi TẠI ĐÂY

Tôi có thể sử dụng PHP và MySQL trong phản ứng gốc không?

Làm cách nào để kết nối phản ứng với PHP và MySQL?

Chúng ta có thể kết nối MySQL với phản ứng gốc không?

Tôi có thể sử dụng PHP cho phụ trợ của ứng dụng gốc phản ứng không?