BDD di JavaScript: Bermula dengan Timun dan Gherkin

Manfaat pembangunan yang didorong oleh ujian (TDD) diketahui, yang meningkatkan kualiti produk dan kecekapan pembangunan. Setiap kali anda menulis ujian kod, anda boleh memastikan ketepatan kod dan segera mengesan kesilapan kod masa depan yang mungkin.

Pembangunan yang didorong oleh tingkah laku (BDD) melangkah lebih jauh lagi, menguji tingkah laku produk dan bukan hanya kod untuk memastikan produk itu berkelakuan sejajar dengan jangkaan. Artikel ini akan menerangkan cara menulis ujian penerimaan automatik gaya BDD menggunakan kerangka timun. Kelebihan timun ialah kes ujian boleh ditulis dalam bahasa semulajadi ringkas untuk pemahaman mudah oleh kakitangan bukan teknikal dalam projek. Selepas membaca artikel ini, anda boleh mengetahui sama ada Timun sesuai untuk pasukan anda dan mula menulis ujian penerimaan anda sendiri. Bersedia? Mari mulakan!

mata utama

BDD Berdasarkan TDD, ia diuji untuk tingkah laku produk dan bukannya kod, menjadikannya lebih mudah difahami oleh pelbagai pihak berkepentingan, termasuk kakitangan bukan teknikal.

Timun adalah rangka kerja BDD yang menggunakan Gherkin, bahasa yang mudah difahami untuk menentukan kes ujian, memastikan semua pihak berkepentingan dapat memahami dan mengambil bahagian dalam proses ujian.

• struktur sintaks Gherkin menguji ke dalam senario dan ciri -ciri, menggunakan mudah diberikan, ketika, kemudian langkah -langkah untuk menggambarkan tingkah laku tanpa menentukan pelaksanaan teknikal.
• Cucumber.js mengintegrasikan dengan projek JavaScript, menjalankan ujian yang ditentukan oleh Gherkin, dan menyokong operasi tak segerak dan alat ujian luaran melalui pelbagai plug-in dan konfigurasi.
• Tetapan Cucumber.js termasuk memasang modul melalui NPM, mengkonfigurasi ia untuk mencari fail ciri dan definisi langkah, dan secara pilihan mengintegrasikannya ke dalam skrip binaan atau pelari tugas seperti Grunt atau Gulp.
• Artikel ini menyediakan contoh ujian timun asas yang menunjukkan penubuhan senario gherkin untuk penambahan dan pendaraban, menggunakan pernyataan mudah untuk mengesahkan ketepatan operasi ini.
• Artikel ini juga menggariskan ciri -ciri canggih cucumber.js, seperti sokongan untuk ujian asynchronous, garis besar senario untuk ujian parameter, dan cangkuk untuk menetapkan prasyarat dan postkonditions untuk meningkatkan keupayaan ujian.
• Perbezaan antara BDD dan TDD

Ini terutamanya ditunjukkan dalam struktur dan kaedah penulisan ujian. Dalam TDD, ujian ditulis, dikekalkan, dan difahami oleh pemaju menulis kod. Orang lain mungkin tidak memerlukan ujian membaca sama sekali, dan itu benar -benar OK. Tetapi di BDD, ujian perlu difahami oleh lebih banyak orang daripada pemaju yang menulis fungsi. Ramai pihak berkepentingan mengambil berat tentang sama ada produk itu bertindak dengan betul, seperti kakitangan QA, penganalisis produk, kakitangan jualan, dan juga pengurusan kanan. Ini bermakna, dengan idealnya, ujian BDD perlu ditulis dengan cara yang dapat difahami oleh sesiapa sahaja yang dapat memahami produk tersebut. Perbezaannya ialah:

dan:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Kedua -dua ujian ini melakukan perkara yang sama, tetapi satu bahasa semulajadi yang boleh dibaca dan yang lain hanya difahami oleh orang yang tahu JavaScript dan Selenium. Artikel ini akan menunjukkan kepada anda bagaimana untuk melaksanakan ujian BDD dalam projek JavaScript menggunakan rangka kerja Cucumber.js, supaya produk anda dapat mendapat manfaat dari tahap ujian ini.

Apa itu Cucumber/Gherkin?

Timun adalah rangka kerja ujian untuk pembangunan yang didorong oleh tingkah laku. Ia membolehkan anda menentukan ujian dalam format Gherkin dan membuat gherkins ini boleh dilaksanakan dengan mengikat mereka ke kod. Gherkin adalah bahasa khusus domain (DSL) yang digunakan untuk menulis ujian timun. Ia membolehkan penulisan skrip ujian dalam format yang boleh dibaca manusia yang kemudiannya boleh dikongsi di kalangan semua pihak berkepentingan dalam pembangunan produk. Fail Gherkin adalah fail yang mengandungi ujian yang ditulis dalam bahasa Gherkin. Fail -fail ini biasanya mempunyai sambungan fail. Kandungan fail gherkin ini biasanya dirujuk sebagai "gherkin".

gherkin

Dalam ujian yang ditakrifkan Gherkin, anda mempunyai konsep ciri dan senario. Mereka sama dengan suite ujian dan kes ujian dalam kerangka ujian lain, menyediakan cara yang jelas untuk menyusun ujian. Senario ini hanyalah ujian yang berasingan. Ia harus menguji hanya satu aspek permohonan. Ciri -ciri adalah satu set senario yang berkaitan. Oleh itu, ia akan menguji banyak aspek berkaitan permohonan. Idealnya, ciri -ciri dalam fail Gherkin akan dipetakan dengan teliti dengan ciri -ciri dalam aplikasi -oleh itu namanya. Setiap fail Gherkin mengandungi ciri, setiap ciri mengandungi satu atau lebih senario. Adegan kemudiannya terdiri daripada langkah -langkah, yang disusun dalam urutan tertentu:

diberikan - langkah -langkah ini digunakan untuk menetapkan keadaan awal sebelum ujian dilaksanakan
Bila - langkah -langkah ini adalah ujian yang sebenarnya akan dilakukan
kemudian - langkah -langkah ini digunakan untuk menegaskan hasil ujian

Sebaik -baiknya, setiap senario harus menjadi kes ujian yang berasingan, jadi bilangan ketika langkah harus disimpan sangat kecil. Langkah -langkahnya benar -benar pilihan. Sebagai contoh, jika anda tidak perlu menetapkan apa -apa, mungkin tidak ada langkah yang diberikan. Fail Gherkin direka untuk mudah dibaca dan memberi manfaat kepada sesiapa yang terlibat dalam pembangunan produk. Ini termasuk orang bukan teknikal, jadi fail gherkin harus selalu ditulis dalam bahasa perniagaan dan bukannya bahasa teknikal. Ini bermakna, sebagai contoh, anda tidak merujuk komponen UI tunggal, tetapi terangkan konsep produk yang anda ingin uji.

Contoh ujian gherkin

Berikut adalah Contoh Contoh Gherkin untuk Cucumber.js Google:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

kita dapat melihat dengan segera bahawa ujian ini memberitahu kita apa yang perlu dilakukan, bukan bagaimana untuk melakukannya. Ia ditulis dalam bahasa yang boleh difahami oleh sesiapa sahaja, dan -dengan pentingnya -kemungkinan besar akan tetap betul tidak kira bagaimana produk akhir tweak. Google boleh memutuskan untuk menukar UInya sepenuhnya, tetapi Gherkin masih tepat selagi fungsi itu bersamaan. Anda boleh membaca lebih lanjut mengenai yang diberikan apabila pada wiki timun.

cucumber.js

Selepas menulis kes ujian dalam format Gherkin, anda memerlukan cara untuk melaksanakannya. Di dunia JavaScript, terdapat modul yang dipanggil Cucumber.js yang membolehkan anda melakukan ini. Ia membolehkan anda menentukan kod JavaScript, yang Cucumber.js boleh menyambung ke pelbagai langkah yang ditakrifkan dalam fail Gherkin. Ia kemudian menjalankan ujian dengan memuatkan fail Gherkin dan melaksanakan kod JavaScript yang berkaitan dengan setiap langkah dalam urutan yang betul. Sebagai contoh, dalam contoh di atas, anda akan mempunyai langkah -langkah berikut:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Jangan terlalu risau tentang semua makna ini-ia akan dijelaskan secara terperinci kemudian. Tetapi pada dasarnya, ia mentakrifkan beberapa kaedah yang boleh digunakan oleh kerangka Cucumber.js untuk mengikat kod anda ke langkah -langkah dalam fail Gherkin.

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

termasuk cucumber.js dalam binaan anda

Sertakan cucumber.js dalam binaan anda, tambahkan modul timun untuk membina dan konfigurasikannya untuk dijalankan. Langkah pertama adalah seperti berikut:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Langkah kedua bergantung pada bagaimana anda melakukan binaan.

berjalan secara manual

Ia agak mudah untuk melaksanakan timun secara manual, dan lebih baik untuk memastikan anda dapat melakukannya terlebih dahulu, kerana penyelesaian berikut adalah semua cara untuk melakukan yang sama secara automatik. Selepas pemasangan, executable akan menjadi ./node_modules/.bin/cucumber.js. Apabila menjalankannya, ia perlu tahu di mana pada sistem fail anda boleh mencari semua fail yang diperlukan. Fail -fail ini termasuk fail Gherkin dan kod JavaScript yang akan dilaksanakan. Dengan konvensyen, semua fail Gherkin akan disimpan dalam direktori Ciri -ciri, dan jika anda tidak mengarahkannya untuk melaksanakan operasi lain, timun juga akan mencari kod JavaScript yang akan dilaksanakan dalam direktori yang sama. Walau bagaimanapun, adalah bijak untuk mengarahkannya untuk mencari lokasi fail -fail ini supaya anda boleh mempunyai lebih banyak kawalan ke atas proses binaan. Sebagai contoh, jika anda menyimpan semua fail Gherkin dalam direktori MyFeatures dan semua kod JavaScript dalam MySteps, anda boleh melakukan perkara berikut:

Given I have loaded Google
When I search for "cucumber.js"
Then the first result is "GitHub - cucumber/cucumber-js: Cucumber for JavaScript"

Bendera

-r adalah direktori yang mengandungi fail JavaScript yang timun akan dimuat secara automatik untuk ujian. Terdapat beberapa tanda lain yang mungkin menarik juga - hanya membaca teks bantuan untuk memahami bagaimana mereka berfungsi: $ ./node_modules/.bin/cucumber.js --help. Direktori -direktori ini mengimbas secara rekursif, jadi anda boleh bersarang fail cetek atau mendalam bergantung kepada keadaan.

skrip npm

selepas menjalankan timun secara manual, menambahkannya ke binaan sebagai skrip NPM adalah kes yang mudah. Anda hanya menambah arahan berikut (tiada laluan yang berkelayakan sepenuhnya, kerana NPM akan mengendalikannya untuk anda) ke package.json anda seperti berikut:

Given('I have loaded Google', function() {});
When('I search for {stringInDoubleQuotes}', function() {});
Then('the first result is {stringInDoubleQuotes}', function() {});

Setelah selesai, anda boleh melaksanakan:

$ npm install --save-dev cucumber

Ia akan melakukan ujian timun tepat seperti yang anda lakukan sebelum ini.

grunt

Plugin Grunt wujud untuk melakukan ujian cucumber.js. Malangnya, ia sudah ketinggalan zaman dan tidak berfungsi dengan versi cucumber.js yang lebih baru, yang bermaksud anda akan terlepas banyak penambahbaikan jika anda menggunakannya. Sebaliknya, cara saya lebih suka adalah menggunakan plugin Grunt-Shell untuk melaksanakan arahan dengan cara yang sama seperti di atas. Selepas pemasangan, konfigurasikannya hanya tambahkan konfigurasi plugin berikut ke gruntfile.js anda:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Sekarang, seperti dahulu, anda boleh melakukan ujian dengan menjalankan grunt shell:cucumber.

gulp

Gulp adalah sama seperti Grunt, kerana plugin sedia ada sudah lapuk dan akan menggunakan versi lama alat timun. Sekali lagi, di sini anda boleh menggunakan modul Gulp-Shell untuk melaksanakan perintah Cucumber.js seperti dalam senario lain. Menetapkannya adalah mudah:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Sekarang, seperti dahulu, anda boleh melakukan ujian dengan menjalankan gulp cucumber.

ujian timun pertama anda

Sila ambil perhatian bahawa semua contoh kod dalam artikel ini boleh didapati di GitHub.

Sekarang kita tahu bagaimana untuk melaksanakan timun, mari kita menulis ujian. Dalam contoh ini, kita akan melakukan sesuatu yang agak tiruan hanya untuk menunjukkan bagaimana sistem berfungsi. Malah, anda melakukan perkara yang lebih kompleks, seperti memanggil secara langsung kod yang anda sedang menguji, menjadikan panggilan API HTTP untuk menjalankan perkhidmatan, atau mengawal selenium untuk memandu pelayar web untuk menguji aplikasi anda. Contoh mudah kami akan membuktikan bahawa matematik masih sah. Kami akan mempunyai dua ciri - tambahan dan pendaraban. Pertama, mari kita tetapkannya.

Given I have loaded Google
When I search for "cucumber.js"
Then the first result is "GitHub - cucumber/cucumber-js: Cucumber for JavaScript"

Bagaimana anda melakukan ujian sepenuhnya kepada anda. Dalam contoh ini, saya akan melakukannya secara manual untuk kesederhanaan. Dalam projek sebenar, anda akan mengintegrasikannya ke dalam binaan anda menggunakan salah satu pilihan di atas.

Given('I have loaded Google', function() {});
When('I search for {stringInDoubleQuotes}', function() {});
Then('the first result is {stringInDoubleQuotes}', function() {});

Sekarang, mari tulis ciri sebenar pertama kami. Ini akan diletakkan di features/addition.feature:

$ npm install --save-dev cucumber

Sangat mudah dan sangat mudah dibaca. Ia memberitahu kita dengan tepat apa yang kita lakukan, tanpa memberitahu kita bagaimana untuk melakukannya. Mari cuba:

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

Kemudian mari tulis fail langkah pertama kami. Ini hanya akan melaksanakan langkah -langkah sebagai output timun memberitahu kami, yang tidak akan melakukan apa -apa yang berguna, tetapi akan menyelesaikan output. Ini akan diletakkan di steps/maths.js:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Hook

defineSupportCode adalah kaedah cucumber.js yang membolehkan anda menyediakan kod yang akan digunakan untuk pelbagai situasi yang berbeza. Semua ini akan dilindungi, tetapi pada dasarnya, pada bila -bila masa anda ingin menulis kod yang timun akan dipanggil secara langsung, ia perlu berada di dalam salah satu blok ini. Anda akan melihat bahawa kod sampel di sini mentakrifkan tiga langkah yang berbeza - satu untuk setiap yang diberikan, bila dan kemudian. Setiap blok memberikan rentetan (atau ungkapan biasa jika anda memerlukannya) yang sepadan dengan langkah -langkah dalam fail atribut, dan fungsi yang dilaksanakan apabila langkah itu sepadan. Pemegang letak boleh diletakkan dalam rentetan langkah (atau gunakan ekspresi menangkap sebaliknya jika anda menggunakan ungkapan biasa), dan ruang letak ini akan diekstrak dan disediakan sebagai argumen untuk fungsi anda. Melakukan ini akan memberikan output yang lebih bersih semasa masih tidak melakukan apa -apa dalam realiti:

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

mari kita semua berfungsi sekarang. Kami hanya perlu melaksanakan kod dalam definisi langkah kami. Kami juga akan melakukan penyortiran untuk membuat bacaan lebih mudah. Ini sebenarnya menghapuskan keperluan untuk parameter panggilan balik, kerana kami tidak melakukan sebarang operasi tak segerak. Selepas itu, steps/maths.js kami akan kelihatan seperti ini:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Jalankannya kelihatan seperti ini:

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

itu sahaja, kami mendapat suite ujian yang sangat mudah untuk memperluaskan bahawa matematik adalah betul. Sebagai latihan, mengapa tidak cuba untuk memperluaskannya untuk menyokong penolakan? Jika anda menghadapi masalah, anda boleh meminta bantuan dalam komen.

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim, dan beberapa bab digabungkan dan dipermudahkan)

Petua Cucumber.js Lebih Lanjutan

semuanya baik, tetapi timun boleh melakukan sesuatu yang lebih maju yang akan menjadikan kehidupan kita lebih mudah.

definisi langkah async

Setakat ini, kami hanya menulis definisi langkah penyegerakan. Walau bagaimanapun, di dunia JavaScript, ini biasanya tidak cukup baik. Banyak perkara dalam JavaScript perlu menjadi tidak segerak, jadi kita memerlukan beberapa cara untuk mengatasinya. Syukurlah, Cucumber.js mempunyai beberapa cara terbina dalam untuk menangani perkara ini, bergantung kepada keutamaan anda. Kaedah yang dicadangkan di atas, yang merupakan kaedah JavaScript yang lebih tradisional yang mengendalikan langkah -langkah tak segerak, menggunakan fungsi panggil balik. Jika anda menyatakan bahawa definisi langkah harus mempunyai fungsi panggil balik sebagai parameter terakhirnya, langkah itu dianggap diselesaikan hanya selepas panggilan balik ini dicetuskan. Dalam kes ini, jika panggilan balik dicetuskan dengan sebarang hujah, ini dianggap sebagai kesilapan dan langkahnya akan gagal. Sekiranya ia dicetuskan tanpa sebarang parameter, langkah itu dianggap berjaya. Walau bagaimanapun, jika panggilan balik tidak dicetuskan sama sekali, rangka kerja akhirnya akan keluar dan gagal langkah. Makna cerita? Jika anda menerima parameter panggilan balik, pastikan anda memanggilnya. Sebagai contoh, definisi langkah panggilan API HTTP menggunakan panggilan balik mungkin seperti berikut. Ini ditulis menggunakan permintaan kerana ia menggunakan panggilan balik atas respons.

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

Satu lagi, dan kaedah yang lebih disukai adalah dengan kembali jenis. Jika anda mengembalikan janji dari satu langkah, langkah itu dianggap siap hanya apabila janji selesai. Jika janji ditolak, langkah itu akan gagal; jika janji itu dipenuhi, langkah itu akan berjaya. Sebagai alternatif, jika kandungan yang anda kembalikan bukanlah janji, langkah itu akan dianggap sebagai berjaya. Ini termasuk kembali undefined atau null. Ini bermakna anda boleh memilih sama ada anda perlu mengembalikan janji semasa pelaksanaan langkah dan rangka kerja akan diselaraskan seperti yang diperlukan. Sebagai contoh, definisi langkah untuk membuat panggilan API HTTP menggunakan janji mungkin seperti berikut. Ini ditulis menggunakan API Fetch kerana ia mengembalikan janji atas respons.

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim, dan beberapa bab digabungkan dan dipermudahkan)

latar belakang ciri, garis panduan adegan, jadual data, cangkuk, peristiwa dan dunia

Ciri -ciri canggih ini, seperti latar belakang ciri, garis panduan adegan, jadual data, serta fungsi cangkuk (sebelum, selepas, beforestep, afterstep, afterstep, dll.) Dan mekanisme pemprosesan peristiwa, dapat meningkatkan kecekapan ujian dan kebolehbacaan. Dengan menggunakan fungsi -fungsi ini dengan munasabah, adalah mungkin untuk menulis lebih ringkas dan lebih mudah untuk mengekalkan ujian BDD. World Objek membenarkan perkongsian data dan keadaan antara definisi langkah yang berbeza, memudahkan logik ujian.

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

Ringkasan

pembangunan yang didorong oleh tingkah laku adalah cara terbaik untuk memastikan produk mempunyai tingkah laku yang betul, dan timun, sebagai alat, adalah cara yang sangat kuat untuk mencapai ini supaya setiap pemegang kepentingan produk dapat membaca, memahami dan bahkan menulis ujian tingkah laku. Artikel ini hanya menyentuh kulit apa yang boleh dilakukan oleh timun, jadi saya menggalakkan anda untuk mencubanya sendiri untuk memahami kuasanya. Timun juga mempunyai komuniti yang sangat aktif, dan senarai mel dan saluran gitter mereka adalah cara yang baik untuk mendapatkan bantuan jika anda memerlukannya. Adakah anda sudah menggunakan timun? Adakah artikel ini mendorong anda untuk mencubanya? Sama ada cara, saya ingin mendengar anda dalam komen di bawah. Artikel ini telah dikaji semula oleh Jani Hartikainen. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

Soalan Lazim Mengenai BDD dalam JavaScript Menggunakan Timun dan Gherkin

(kandungan berikut pada dasarnya konsisten dengan teks asal, dan ia sedikit diselaraskan untuk mengekalkan kelancaran dan kebolehbacaan, dan beberapa ayat diganti sinonim)

Atas ialah kandungan terperinci BDD di JavaScript: Bermula dengan Timun dan Gherkin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!