programming php

Chúng ta có thể sử dụng phản ứng với php không

Cho đến nay, chúng ta chỉ xây dựng giao diện người dùng của ứng dụng, nhưng trong bài học này, chúng ta sẽ học cách sử dụng React để tạo giao diện người dùng và xử lý dữ liệu do người dùng nhập bằng PHP. Dữ liệu sẽ được lưu vào cơ sở dữ liệu MySQL và ứng dụng sẽ hiển thị thông báo lỗi hoặc thành công phù hợp tùy thuộc vào trạng thái của dữ liệu được chèn vào cơ sở dữ liệu

trong bài viết này

Cách sử dụng PHP với React để tạo Form phản hồi
- Tạo ứng dụng phản ứng
- Tạo bảng & cơ sở dữ liệu MySQL

Cách sử dụng PHP với React để tạo Form phản hồi

Vì vậy, hãy bắt đầu từ những điều cơ bản

Tạo ứng dụng phản ứng

Nếu bạn chưa cài đặt ứng dụng tạo phản ứng trên PC, bạn nên cài đặt nó

Chuyển đến dấu nhắc lệnh của bạn và nhập các lệnh sau để truy cập thư mục www của bạn

Bây giờ, nhập

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

bài học17 là tên của thư mục dự án. Bạn có thể gọi nó là bất cứ điều gì bạn thích.
Vì chúng tôi đang sử dụng PHP ở phần phụ trợ, bạn cần tạo thư mục này, đây là thư mục www của bạn, nơi Apache có thể truy cập và xử lý mã PHP.

Sau khi cài đặt thành công ứng dụng React trong thư mục www, bạn sẽ thấy cấu trúc sau

Chuyển đến thư mục src và xóa tất cả các tệp. Chúng tôi sẽ tạo các tệp của mình từ đầu

Đây là giao diện của thư mục src

Bây giờ hãy tiếp tục và tạo chỉ mục. html, chỉ mục. js, ứng dụng. js, ứng dụng. css và API thư mục để chứa các tệp PHP

Mục lục. html


   
      First program in React

mục lục. js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

aap. js

import React, {
    Component
} from 'react'
import ReactDOM from 'react-dom'
import Style from './style.css'

class App extends Component {
    render[] {
        return [

            //jsx code for the feedback form goes here.
        ]
    }
}
export default App;

Vì chúng ta đang tạo một biểu mẫu HTML, chúng ta sẽ cần một thành phần dựa trên lớp để duy trì trạng thái

Bây giờ thêm hàm khởi tạo để khởi tạo trạng thái của thành phần bằng chuỗi rỗng

constructor[props] {
    super[props]
    this.state = {
        name: '',
        email: '',
        message: ''
    }
}

Chúng ta cần tạo một biểu mẫu để lấy dữ liệu và phản hồi của người dùng

Đây là giao diện cuối cùng của biểu mẫu phản hồi

Và đây là mã cho biểu mẫu phản hồi trong JSX


   
      EAT, DINE & 
DRINK
   
   
      SEND US YOUR FEEDBACK

Điều này sẽ đi vào bên trong phương thức return[] của thành phần Ứng dụng

CSS của biểu mẫu là

@import url['//fonts.googleapis.com/css?family=Open+Sans&display=swap'];
* {
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background-color: #D7D1DB;
}


/*sets the container & its background image*/

.container {
	width: 700px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -350px;
	margin-top: -200px;
	background-image: url["Food-bg.jpg"];
	background-position: center;
	-webkit-box-shadow: 1px 3px 14px 4px rgba[163, 160, 163, 1];
	-moz-box-shadow: 1px 3px 14px 4px rgba[163, 160, 163, 1];
	box-shadow: 1px 3px 14px 4px rgba[163, 160, 163, 1];
}

.box {
	width: 280px;
	margin: 20px;
}

.grey {
	color: #ccc;
}

.heading {
	border-left: 4px solid #c0c334;
	padding-left: 10px;
	color: #ccc;
}

.inputstyle {
	padding: 5px;
	border-bottom: 1px solid #c0c334;
	margin: 10px 0;
}

.btnstyle {
	padding: 5px;
	margin: 20px 0;
	background-color: #c0c334;
	border-radius: 5px;
	color: #1b1b1b;
}

input,
textarea {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	color: #ccc;
}

.msg {
	color: #ccc;
	font-size: 95%;
}

Bây giờ, thêm một chức năng để xử lý việc gửi biểu mẫu. Để kiểm tra mọi thứ đang hoạt động, hãy sử dụng bảng điều khiển. tạm thời đăng nhập chức năng

onSubmit[event] {
    event.preventDefault[];
    console.log[this.state];
}

Bind onSubmit[e]
function to the component.

this.onSubmit = this.onSubmit.bind[this];

Thêm xử lý sự kiện trên nút gửi

________số 8

Để đặt trạng thái của thành phần bằng với giá trị của trường đầu vào, bạn cần thực hiện một số thay đổi

 this.setState[{ name: e.target.value }]}
/>

Điều này sẽ đảm bảo rằng mọi thay đổi trong trường nhập liệu đều được quản lý ở cuối React.
Các lĩnh vực khác cũng phải xử lý tương tự.


   
      First program in React

Chúng tôi gần như đã hoàn thành phần đầu của mã

Trước khi chuyển sang back-end, chúng ta cần thêm một trạng thái nữa để giữ trạng thái của dữ liệu được gửi

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

Tạo bảng & cơ sở dữ liệu MySQL

Tạo một cơ sở dữ liệu có tên là 'reactform' và một bảng có tên là 'userFeedback' để giữ dữ liệu được nhập vào

id là khóa chính ở đây

Bây giờ hãy quay lại dự án của bạn và tạo một tệp PHP có tên feedback_ac. php. Nó sẽ chứa logic để xử lý dữ liệu và thay đổi trạng thái bên trong của thành phần bằng mã hóa JSON. FS

Để thực thi các yêu cầu API và Http cho React, trước tiên chúng ta cần cài đặt gói Axios. Axios là một ứng dụng khách HTTP dựa trên lời hứa để thực hiện các yêu cầu HTTP không đồng bộ và dễ dàng tới máy chủ

Chuyển đến thư mục ứng dụng React của bạn và chạy

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

Sau khi cài đặt Axios, chỉ cần nhập nó vào Ứng dụng. tập tin js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

Xác định biến hằng số để giữ đường dẫn tuyệt đối cho feedback_ac. biểu mẫu php trong ứng dụng. js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

Đăng ký axios với sự kiện onSubmit

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

phản hồi_ac. php

Vì ứng dụng phản ứng ở trên

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

8 và máy chủ ở trên http. // localhost, máy chủ cần cho phép các yêu cầu nguồn gốc chéo và Access-Control-Allow-Headers

Để đọc nội dung của POST, chúng ta sẽ sử dụng PHP. // đầu vào trả về dạng thô của dữ liệu POST. Bạn có thể giải mã thêm bằng phương pháp

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

9 để xử lý một mảng

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

Bây giờ hãy thay đổi mã trong Ứng dụng. js render[] để hiển thị thông báo thích hợp về trạng thái chèn dữ liệu

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render[, document.getElementById['root']];

Điều này được gọi là kết xuất có điều kiện. Khi chèn dữ liệu thành công, PHP đặt trạng thái. dataSent to 1 sử dụng mã hóa JSON

Bàn điều khiển

Cơ sở dữ liệu MySQL

Bạn có thể cảm thấy hơi choáng ngợp nhưng đây là cách mọi thứ được thực hiện trong thời phát triển web hiện đại. React cung cấp khả năng tải trang web không đồng bộ và nhanh hơn nhiều, điều này biện minh cho sự phức tạp của bài học này ở một mức độ nào đó

Một cách khác để sử dụng Axios là

import React, {
    Component
} from 'react'
import ReactDOM from 'react-dom'
import Style from './style.css'

class App extends Component {
    render[] {
        return [

            //jsx code for the feedback form goes here.
        ]
    }
}
export default App;

0 hoặc Ajax sử dụng jQuery. Cách bạn chọn phụ thuộc rất nhiều vào yêu cầu hoặc sở thích cá nhân của bạn

Tôi đã cố gắng giữ mọi thứ đơn giản và sạch sẽ. Bạn có thể thử thay đổi các trường hoặc thông báo hoặc giao diện người dùng của biểu mẫu. Bạn càng thực hành nhiều, bạn sẽ càng học được nhiều. Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi liên quan. Để lại ý kiến hoặc câu hỏi của bạn trong phần bình luận bên dưới và tôi sẽ cố gắng trả lời bạn sớm nhất

React có tốt hơn PHP không?

ReactJS so với PHP. Nhà phát triển . Ngoài ra, React dễ thiết kế hơn so với các khung công tác PHP truyền thống, điều này khiến nó trở thành lựa chọn phù hợp hơn cho các dự án lớn hơn

Tôi có thể sử dụng React cho giao diện người dùng và PHP cho phụ trợ không?

Có thể sử dụng ReactJS làm giao diện người dùng, sau đó là PHP và MySQL cho phần phụ trợ không? . js cho chương trình phụ trợ hoặc khởi động mùa xuân Java hoặc. Yes of course, you can build a backend with PHP using a framework like CodeIgniter or Laravel or vanilla PHP and build your API and serve your React App with the data, or you can use Node. js for the backend or Java spring boot or .

Tôi có thể sử dụng Laravel với React không?

Q. React và Laravel là gì? . Và nếu bạn đang tự hỏi liệu tôi có thể sử dụng React với PHP không, câu trả lời là có .

Có thể sử dụng phản ứng gốc với PHP không?

Bạn có nhiều tùy chọn để tạo API với MySQL và PHP. API này sau đó có thể được sử dụng trong ứng dụng gốc React của bạn .

Cách sử dụng PHP với React để tạo Form phản hồi

Tạo ứng dụng phản ứng

EAT, DINE & DRINK

Tạo bảng & cơ sở dữ liệu MySQL

React có tốt hơn PHP không?

Tôi có thể sử dụng React cho giao diện người dùng và PHP cho phụ trợ không?

Tôi có thể sử dụng Laravel với React không?

Có thể sử dụng phản ứng gốc với PHP không?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

EAT, DINE &
DRINK