Cara Menggunakan PHP Sebagai Backend Menggunakan React For Frontend

pengenalan

Membangunkan apl web dinamik dan interaktif adalah penting dalam dunia pembangunan web yang dinamik dan sentiasa berubah. Kepantasan dan kepelbagaian React, kit alat JavaScript untuk mencipta antara muka pengguna, telah membawa kepada popularitinya yang hebat. Walau bagaimanapun, PHP masih merupakan pilihan yang kukuh untuk pengaturcaraan sisi pelayan. Tutorial ini akan menunjukkan kepada anda cara menggabungkan kefungsian bahagian belakang PHP dan bahagian hadapan React dengan mudah untuk menggunakan kekuatan masing-masing sepenuhnya.

Memahami Peranan Berbeza PHP dan React

Apa Itu PHP

Istilah PHP ialah akronim untuk Hypertext Preprocessor. Ia adalah bahasa skrip sebelah pelayan yang digunakan untuk pembangunan web. Ia boleh dibenamkan dengan mudah dengan fail HTML. Kod HTML juga boleh ditulis dalam fail PHP.

Kelebihan PHP

Di bawah ialah beberapa Kelebihan PHP
Kemudahan Pembelajaran dan Penggunaan:

• PHP terkenal dengan sintaksnya yang mudah, yang agak mudah untuk pemula. Kesederhanaan ini membantu pembangun baharu mula membina aplikasi web dengan cepat.

Penggunaan Luas dan Sokongan Komuniti:

• PHP mempunyai komuniti yang besar dan aktif. Ini bermakna dokumentasi yang luas, banyak tutorial, dan banyak sumber dalam talian. Sokongan komuniti juga diterjemahkan ke dalam kod pratulis yang luas, rangka kerja dan pustaka pemalam.

Keupayaan Integrasi:

• PHP disepadukan dengan lancar dengan pelbagai pangkalan data (seperti MySQL, PostgreSQL, SQLite), pelayan web (seperti Apache dan Nginx) dan perkhidmatan lain. Ini menjadikannya pilihan yang serba boleh untuk pembangunan web.

Sumber Terbuka:

• PHP adalah percuma untuk digunakan dan diedarkan. Ini mengurangkan kos pembangunan, terutamanya untuk perniagaan kecil dan pemula.

Keserasian Merentas Platform:

• PHP boleh dijalankan pada berbilang platform, termasuk Windows, Linux dan macOS. Fleksibiliti ini memastikan aplikasi PHP boleh digunakan dalam pelbagai persekitaran tanpa isu keserasian.

Kekurangan PHP

Di bawah ialah beberapa Kekurangan PHP.

1. Penamaan Fungsi Tidak Konsisten dan Susunan Parameter:

   • Salah satu kritikan biasa terhadap PHP ialah konvensyen penamaan fungsi dan susunan parameter yang tidak konsisten. Sebagai contoh, fungsi mungkin mempunyai corak penamaan yang berbeza (str_replace vs. strpos) dan perintah parameter (array_filter($array, $callback) vs. array_map($callback, $array)). Ketidakkonsistenan ini boleh menyebabkan kekeliruan dan ralat, terutamanya untuk pembangun baharu.

2. Isu Keselamatan Bersejarah:

   • PHP mempunyai sejarah kelemahan keselamatan, sebahagiannya disebabkan penggunaannya yang meluas dan sebahagiannya disebabkan oleh cara ia direka bentuk. Walaupun PHP moden telah meningkat dengan ketara dari segi ciri keselamatan, pangkalan kod warisan dan amalan buruk daripada versi terdahulu masih boleh menimbulkan risiko keselamatan.

3. Prestasi Berbanding Bahasa Lain:

   • Walaupun PHP telah membuat kemajuan besar dalam meningkatkan prestasi (terutama dengan PHP 7 dan lebih baru), ia masih boleh menjadi lebih perlahan berbanding beberapa bahasa lain seperti Node.js atau Go untuk tugasan tertentu. Ini boleh menjadi kelemahan untuk aplikasi yang memerlukan prestasi yang sangat tinggi dan kependaman rendah.

4. Taip Lemah:

   • Sistem penaipan PHP yang lemah, yang membenarkan penukaran jenis tersirat, boleh membawa kepada tingkah laku yang tidak dijangka dan pepijat yang sukar dijejaki. Sebagai contoh, membandingkan rentetan dengan nombor mungkin menghasilkan hasil yang tidak dijangka ("123" == 123 adalah benar, tetapi "123" === 123 adalah palsu). Ini boleh menjadi masalah, terutamanya untuk pangkalan kod yang besar dan kompleks.

5. Terlalu Bergantung pada Kod Prosedur yang Lebih Lama:

   • Banyak aplikasi dan tutorial PHP masih menggunakan teknik pengaturcaraan prosedural yang lebih lama dan bukannya amalan pengaturcaraan moden, berorientasikan objek atau berfungsi. Ini boleh menyebabkan kod yang kurang boleh diselenggara dan sukar dibaca. Walaupun rangka kerja moden menggalakkan amalan yang lebih baik, warisan kod prosedur masih boleh menjadi isu penting.

Apa Itu React

React JS ialah perpustakaan JavaScript deklaratif, cekap dan fleksibel untuk membina antara muka pengguna. Ia 'V' dalam MVC. ReactJS ialah perpustakaan bahagian hadapan berasaskan komponen sumber terbuka, bertanggungjawab hanya untuk lapisan paparan aplikasi. Ia diselenggara oleh Facebook.

Kelebihan React Js

Di bawah ialah beberapa Kelebihan React Js.

1. Seni Bina Berasaskan Komponen:

   • React mengikuti seni bina berasaskan komponen, yang membolehkan pembangun membina komponen UI boleh guna semula. Modulariti ini membawa kepada kod yang lebih bersih, lebih boleh diselenggara dan berskala. Komponen boleh digunakan semula merentasi bahagian aplikasi yang berbeza, mengurangkan lebihan dan meningkatkan kecekapan pembangunan.

2. DOM maya untuk Peningkatan Prestasi:

   • React menggunakan DOM Maya (Model Objek Dokumen) untuk mengoptimumkan prestasi pemaparan. Apabila keadaan aplikasi berubah, React mengemas kini DOM Maya dahulu, yang kemudiannya mengemas kini DOM sebenar dengan cekap hanya jika perlu. Ini meminimumkan manipulasi langsung DOM, membawa kepada kemas kini yang lebih pantas dan cekap, terutamanya bermanfaat untuk aplikasi kompleks dengan perubahan UI yang kerap.

3. UI Pengisytiharan:

   • Pendekatan deklaratif React untuk membina UI menjadikan kod lebih mudah diramal dan lebih mudah untuk nyahpepijat. Pembangun menerangkan rupa UI sepatutnya untuk keadaan tertentu dan React menguruskan pengemaskinian UI sebenar berdasarkan perubahan keadaan. Ini memudahkan proses membangunkan antara muka pengguna interaktif dan menjadikan kod lebih mudah dibaca.

4. Ekosistem Kaya dan Sokongan Komuniti:

   • React mempunyai ekosistem yang luas dengan banyak perpustakaan, alatan dan sambungan yang meningkatkan fungsinya. Sokongan komuniti yang kukuh memastikan bahawa pembangun mempunyai akses kepada sumber yang luas, tutorial dan komponen pihak ketiga. Selain itu, sokongan Facebook dan sumbangan daripada sebilangan besar pembangun di seluruh dunia memastikan React kekal terkini dan terus bertambah baik.

5. Sokongan Teguh untuk JSX:

   • React menggunakan JSX (JavaScript XML), sambungan sintaks yang membenarkan HTML ditulis dalam JavaScript. JSX memudahkan proses mencipta komponen React dan menjadikan kod lebih mudah dibaca dengan memisahkan struktur (HTML) secara visual daripada logik (JavaScript). Penyepaduan ketat markup dengan logik ini meningkatkan kecekapan pembangunan dan mengurangkan penukaran konteks untuk pembangun.

Demerits Of React Js

Di bawah ialah beberapa Kekurangan React Js.

1. Keluk Pembelajaran Curam:

   • Fleksibiliti React dan pelbagai alatan serta perpustakaan dalam ekosistemnya boleh menjadikan keluk pembelajaran curam untuk pemula. Memahami konsep seperti JSX, komponen, pengurusan negeri dan selok-belok DOM Maya boleh mencabar untuk pembangun baharu.

2. Boilerplate dan Kerumitan:

   • Menyediakan projek React selalunya melibatkan kod dan konfigurasi boilerplate yang banyak. Alat seperti Create React App memudahkan persediaan awal, tetapi apabila projek berkembang, kerumitan boleh meningkat, memerlukan konfigurasi tambahan dan pemahaman tentang alatan binaan seperti Webpack dan Babel.

3. Persekitaran yang Cepat Berubah:

   • Ekosistem React berkembang dengan cepat, dengan kemas kini yang kerap dan alatan baharu muncul secara kerap. Mengikuti amalan terbaik, kemas kini dan perpustakaan terbaharu boleh menjadi sesuatu yang menggembirakan bagi pembangun. Perubahan pantas ini juga boleh membawa kepada isu dengan dokumentasi lapuk dan keserasian antara perpustakaan dan versi yang berbeza.

4. SEO Lemah:

   • Secara lalai, React memaparkan aplikasi pada bahagian pelanggan, yang boleh membawa kepada prestasi SEO yang lemah kerana perangkak enjin carian mungkin mengalami kesukaran mengindeks kandungan dinamik. Walaupun penyelesaian seperti pemaparan sisi pelayan (SSR) dengan rangka kerja seperti Next.js wujud, melaksanakannya menambahkan kerumitan pada projek.

5. Kerumitan Pengurusan Negeri:

   • Menguruskan keadaan dalam aplikasi React yang besar boleh menjadi rumit. Walaupun pengurusan keadaan terbina dalam React berfungsi dengan baik untuk aplikasi kecil, penskalaan memerlukan penyelesaian pengurusan keadaan yang lebih canggih seperti Redux, MobX atau API Konteks. Penyelesaian ini menambah satu lagi lapisan kerumitan dan memerlukan pembelajaran dan persediaan tambahan.

Sinergi Antara PHP dan React dalam Aplikasi Web Moden

Sinergi antara PHP dan React dalam aplikasi web moden memanfaatkan kekuatan kedua-dua teknologi untuk mencipta aplikasi yang teguh, dinamik dan berskala. Berikut ialah pandangan mendalam tentang cara teknologi ini saling melengkapi dan faedah menggabungkannya:

5 Faedah menggunakan PHP dengan React

Nota: faedah lebih daripada lima tetapi berikut adalah beberapa yang disenaraikan!

1. Kepelbagaian Tindanan Penuh

Penyatuan bahagian hadapan dan belakang:

• Pengendalian Data Lancar: React menguruskan bahagian hadapan dengan berkesan, manakala PHP boleh mengendalikan logik sisi pelayan dan pertukaran data, menghasilkan persekitaran pembangunan yang koheren.

• Pembangunan Dipacu API: Dengan membekalkan data ke bahagian hadapan React melalui GraphQL atau titik akhir RESTful, PHP boleh berfungsi sebagai API bahagian belakang yang kuat, membolehkan pembahagian tanggungjawab yang jelas.

Kecekapan Pembangunan:

• Pembangunan Selari: Pasukan yang bekerja pada projek hadapan dan belakang secara serentak boleh mempercepatkan pembangunan dan menghapuskan kesesakan.

• Komponen yang digunakan semula: Pembangunan bahagian hadapan lebih modular dan boleh diurus kerana reka bentuk berasaskan komponen React, yang menjamin bahawa elemen UI digunakan semula.

2. Kebolehskalaan

Menguruskan Beban Lebih Tinggi:

• Halaman Belakang Berkesan: Rangka kerja PHP seperti Laravel direka untuk mengurus sejumlah besar data dan permintaan pengguna dengan berkesan, mengendalikan proses bahagian belakang yang rumit dan boleh skala.

• Pengoptimuman Depan: Walaupun dengan apl yang rumit dan intensif data, DOM maya React dan teknik pembezaan yang berkesan menjamin perubahan UI yang cepat dan responsif.

Seni Bina Perkhidmatan Mikro:

• Pendekatan Modular: Perkhidmatan yang berbeza boleh berskala secara bebas apabila PHP disertakan dalam seni bina perkhidmatan mikro. React memudahkan skalabiliti dengan membenarkannya menggunakan perkhidmatan ini seperti yang diperlukan.

• Pengagihan Beban: Program secara keseluruhan boleh mengurus lebih banyak trafik dengan mahir dengan membahagikan beban antara PHP, yang mengendalikan operasi bahagian pelayan dan React, yang mengendalikan interaksi pihak klien.

3. Prestasi

Masa muat cepat:

• Rendering Sisi Pelayan (SSR): HTML awal mungkin pra-diberikan oleh PHP dan dihantar kepada pelanggan, selepas itu React boleh menghidratkannya. Kaedah ini meningkatkan pengalaman pengguna dan mempercepatkan masa pemuatan awal.

• Pengambilan Data Tak Segerak: Dengan menggunakan React, data boleh diambil daripada bahagian belakang PHP secara tidak segerak, mengekalkan antara muka pengguna yang responsif dan pengendalian perubahan data yang berkesan.

Komunikasi Dipertingkat:

• Pengurusan Negeri yang Berkesan: Ciri pengurusan keadaan React, seperti konteks dan cangkuk, membolehkan pengendalian perubahan keadaan UI yang lebih baik, yang meminimumkan keperluan untuk pemaparan semula yang sia-sia.

• Caching dan Pengoptimuman: PHP boleh menggunakan teknik caching sebelah pelayan untuk mempercepatkan penyajian bahan statik dan menurunkan permintaan pangkalan data, oleh itu meningkatkan prestasi.

4. Antara Muka Pengguna Kaya

UI yang interaktif dan dinamik:

• Reka bentuk Berasaskan Komponen: Reka bentuk berasaskan komponen React membolehkan pengaturcara mencipta antara muka pengguna yang kompleks dan interaktif yang mudah dikemas kini dan dikembangkan.

• Kemas Kini Masa Nyata: React mampu mengendalikan perubahan kandungan dinamik dan kemas kini masa nyata dengan kecekapan, menjadikan pengalaman pengguna yang lancar dan menarik.

Pengalaman Pengguna yang Dipertingkat:

• Perpustakaan UI Kontemporari: React berfungsi dengan baik dengan perpustakaan dan rangka kerja UI kontemporari (seperti Bahan-UI dan Reka Bentuk Semut), membolehkan pengaturcara mereka bentuk antara muka pengguna yang estetik dan intuitif.

• Membina responsif dan antara muka pengguna (UI) yang boleh disesuaikan yang berfungsi dengan berkesan pada pelbagai peranti dan saiz skrin dipermudahkan menggunakan React.

5. Mesra SEO

Pengoptimuman Lebih Baik untuk Enjin Carian:

• Rendering Sisi Pelayan (SSR): Prapemarahan kandungan HTML menggunakan PHP sebelum memberikannya kepada pelanggan menjamin pengindeksan enjin carian dan SEO yang lebih baik.

• Meta Tag dan bahan Dinamik: Menggunakan maklumat daripada bahagian belakang PHP, React boleh mengurus dan mengemas kini tag meta, tajuk dan bahan lain yang berkaitan SEO secara dinamik.

Kebolehrangkaan yang Lebih Baik:

• Penjanaan Tapak Statik (SSG): React boleh menghasilkan halaman statik pada masa binaan, meningkatkan SEO aplikasi sambil mengekalkan PHP untuk kandungan dinamik, dengan menggunakan penyelesaian seperti Next.js, yang menyokong kedua-duanya SSR dan SSG.

• Struktur URL: React boleh mengendalikan penghalaan dan navigasi, memastikan pelawat dan enjin carian dapat meneroka tapak dengan mudah, manakala PHP boleh mengurus struktur URL mesra SEO yang jelas.

Pembangun boleh membina apl dalam talian yang mantap, berskala dan dioptimumkan prestasi dengan pengalaman pengguna yang kaya dan pengoptimuman enjin carian dengan menyepadukan PHP dengan React. Oleh kerana sinergi mereka, teknologi bahagian hadapan dan bahagian belakang boleh digabungkan untuk mencipta proses pembangunan yang kukuh dan boleh disesuaikan.

---

Mewujudkan PHP dan Persekitaran Pembangunan React

Pada ketika ini, kami akan memulakan projek sebenar menggunakan React.js dan PHP sebagai bahagian hadapan.

Prasyarat

Ada perkara yang anda perlu tahu sebagai pembangun atau perkara yang anda perlu ada untuk menjadikan php berfungsi sebagai backend dengan React. Berikut ialah senarai penting!

• Mempunyai Pengetahuan Asas PHP
• Ketahui React.Js anda
• Pastikan Node.js disertakan dengan npm dipasang pada mesin anda.
• Telah dipasang PHP dalam sistem Apache atau Nginx anda

Proses Langkah Demi Langkah Mengenai Cara Menggunakan PHP Sebagai Backend Menggunakan React As Front-end

Langkah untuk menggunakan PHP sebagai backend bersama React agak mudah dan ia adalah seperti berikut.

Membina Bahagian Hadapan

Langkah 1: Buka terminal anda dan jalankan arahan berikut di bawah:

npx create-react-app my-react-app

Nota: sebelum menjalankan arahan ini, anda perlu cd ke dalam direktori di mana anda mahu folder reaksi anda berada! cara untuk cd ke direktori yang anda inginkan adalah dengan menambahkan arahan ini pada terminal anda

cd Documents

Selepas ini, anda akan menunggu apl React anda dibuat.

Langkah 2: Navigasi ke folder projek anda:
Projek yang baru anda buat perlu dilawati di terminal

cd my-react-app

Langkah 3: Mulakan pelayan pembangunan:

npm start

Membina Bahagian Belakang PHP
Sudah tiba masanya untuk membina bahagian belakang PHP sekarang kerana aplikasi React anda beroperasi:

Langkah 1: Cipta folder baharu untuk fail PHP anda dalam direktori apl React anda.
untuk mencapai ini, jalankan arahan berikut pada terminal anda

mkdir php_backend

Dengan menjalankan arahan ini, anda akan melihat folder bernama php_backend

Langkah 2: Di dalam folder php-backend, cipta fail bernama index.php.
Nota: anda bebas untuk memanggilnya apa-apa nama, dalam kes saya, saya memutuskan untuk menggunakan index.php.

Langkah 3: Dalam index.php anda boleh mula menentukan titik akhir dan logik PHP anda.
Di bawah ialah apa yang ditulis dalam php-backend/index.php saya jika anda seorang pembangun PHP, anda akan biasa dengan sintaks ini.

<?PHP 
$serverName="localhost";
$userName="root";
$password="";
$databaseName="react_php";
$conn = mysqli_connect($serverName, $userName, $password, $databaseName);

$recText = $_POST['text'];

$query = ("INSERT INTO react_php (texts) VALUES('$recText')");

if (mysqli_query($conn, $query)) {
  echo "Data has been inserted successfully";
}else {
  echo "Error";
}
?>

Sekarang perkara seterusnya yang perlu dilakukan ialah pergi ke Kod Reaksi yang anda buat sebelum ini dan buka folder dalam editor kod anda, anda akan melihat folder seperti src/App.js dan tambahkan sintaks ini di bawah.

import React, { Component } from 'react';
 // import logo from './logo.svg';
import axios from 'axios'; //Import Axios
import './App.css';

class App extends Component{
state = {
  text : ""
}
handleAdd = async e =>{
 await this.setState({
   text : e.target.value
 }) 
}
handleSubmit = e =>{
 e.preventDefault();
 console.log(this.state.text);
 let formData = new FormData();
 formData.append("text", this.state.text);
 const url = "http://localhost:80/react-backend/"
 axios.post(url,formData)
 .then(res=> console.log(res.data))
 .catch(err=> console.log(err))
}
render(){
  return(
    <div className="App-header">
     <input 
       onChange={this.handleAdd}
       className="form-control" 
       // value={this.state.text}
       type="text" 
       id='text' 
       placeholder='Enter Some Text!'/> 
       <br/>
       <button 
        onClick={this.handleSubmit}
        className="btn btn-success" 
        id='submit'>  Save</button>
    </div>
  );
}

}

eksport Apl lalai;

Nota: yang membenarkan PHP berfungsi ialah **Axios**. Lihat coretan kod di bawah anda akan melihat cara kami menggunakannya!

Dalam folder awam projek anda, anda akan melihat fail index.html dalam fail yang saya tambahkan cdn bootstrap sebagai rangka kerja yang saya gunakan,

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> 

Jadi, inilah sedikit penggayaan.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
   animation: App-logo-spin infinite 20s linear;
  }
}

 .App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }

 .App-link {
   color: #61dafb;
 }

 @keyframes App-logo-spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

Selepas mencuba semua ini, inilah pandangan yang akan diberikan kepada anda.

Dia ialah pangkalan data yang mengawal bahagian belakang. sebaik sahaja anda mengisi teks dan klik simpan teks akan dipaparkan dalam pangkalan data secara automatik.

selepas ini saya menulis **Freddie** dan saya mengklik Semak imbas, di penjuru kanan sebelah atas imej yang dipaparkan di bawah. Sebaik sahaja anda melihat ini, ketahui bahawa anda telah melakukan perkara yang betul.

Itulah langkah yang saya gunakan dalam React dan PHP dalam satu aplikasi.

Kesimpulan

Kesimpulannya, penyepaduan PHP sebagai bahagian belakang dengan React sebagai bahagian hadapan menawarkan penyelesaian yang teguh dan serba boleh untuk pembangunan aplikasi web moden. Seperti yang dibincangkan, gabungan ini memanfaatkan kekuatan keupayaan sisi pelayan PHP dan seni bina berasaskan komponen dinamik React untuk mencipta aplikasi berprestasi tinggi yang boleh skala. PHP mengendalikan logik sisi pelayan, interaksi pangkalan data dan penciptaan API dengan cekap, manakala React memastikan antara muka pengguna yang kaya, responsif dan pengendalian data yang lancar.

Sinergi antara PHP dan React ini bukan sahaja meningkatkan proses pembangunan tetapi juga menghasilkan aplikasi web yang interaktif, menarik dan mesra SEO. Merangkul integrasi berkuasa ini memperkasakan pembangun untuk membina aplikasi web yang komprehensif dan mengutamakan pengguna dengan mudah dan cekap.

Saya harap anda mendapati tutorial ini sangat berharga! Sehingga lain kali, selamat tinggal.

Mengenai Pengarang

Pembangun Laravel tindanan penuh Emmanuel Okolie mempunyai pengalaman 4+ tahun dalam pembangunan perisian. Dia telah membangunkan kemahiran sepenuhnya dengan menggabungkan pembangunan perisian, menulis dan mengarahkan orang lain dalam perkara yang dia lakukan.

Timbunan beliau termasuk ReactJ, Laravel, PHP, JavaScript dan bahasa serta rangka kerja lain.
Sebagai pekerja bebas, dia mencipta tapak web untuk pelanggan dan menulis panduan teknikal untuk menunjukkan kepada orang ramai cara melakukan perkara yang dia lakukan.

Jika diberi peluang, Emmanuel Okolie akan seronok bercakap dengan anda. Sila pergi ke dan ikuti dia di laman web, Facebook, Github, LinkedIn dan Twitternya.

Atas ialah kandungan terperinci Cara Menggunakan PHP Sebagai Backend Menggunakan React For Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!