Pengaturcaraan Web C++: Panduan untuk Pemula

Hai yang ingin menjadi pembangun web yang berjaya! Saya sangat gembira untuk melakukan perjalanan yang menarik ini dengan anda ke dunia Pengaturcaraan Web C++. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih daripada satu dekad, saya boleh memberikan jaminan kepada anda bahawa walaupun ini mungkin terasa menakutkan pada mulanya, dengan kesabaran danLatihan, anda akan dapat membuka aplikasi web yang dinamik dalam masa yang singkat. Jadi, mari kita melompat masuk!

C++ Web Programming

Apa itu CGI?

Sebelum kita mula untuk mengkod, mari kita fahami apa itu CGI. CGI adalah singkatan untuk Common Gateway Interface. Ia seperti seorang penterjemah antara pelayan web anda dan program yang menghasilkan kandungan dinamik. Bayangkan CGI sebagai seorang perantara yang mesra yang mengambil permintaan dari pengguna web, melepaskannya ke program C++ anda, dan kemudian menghantar hasil kembali ke penyemak penyemak pelayar pengguna.

Pelayaran Web

Untuk menghargai CGI, kita perlu untuk memahami bagaimana pelayaran web berkerja. Apabila anda menaip URL di atas penyemak penyemak pelayar anda, ini adalah apa yang terjadi:

  1. Penyemak penyemak pelayar anda menghantar permintaan kepada pelayan web.
  2. Pelayan web memproses permintaan ini.
  3. Jika ia adalah halaman statik, pelayan menghantarkannya secara langsung.
  4. Jika ia adalah kandungan dinamik, CGI akan masuk ke permainan.
  5. CGI menjalankan program yang sesuai (dalam kes kita, program C++).
  6. Program menghasilkan kandungan.
  7. CGI menghantar kandungan ini kembali kepada pelayan.
  8. Pelayan menghantar kandungan kepada penyemak penyemak pelayar anda.

Diagram Arsitektur CGI

Mari kita visualkan proses ini dengan diagram yang simple:

[Penyemak Penyemak Pelayar Pengguna] <--> [Pelayan Web] <--> [CGI] <--> [Program C++]

Diagram ini menunjukkan bagaimana program C++ anda berinteraksi dengan web melalui CGI.

Konfigurasi Pelayan Web

Sebelum kita menulis program CGI pertama kita, kita perlu untuk mengkonfigurasi pelayan web kita. Kebanyakan pelayan web seperti Apache atau Nginx memiliki modul CGI. Anda perlu untuk membolehkan mereka dan mengatur direktori untuk skrip CGI anda. Contohnya, di atas Apache, anda mungkin ingin menambahkan ini ke konfigurasi anda:

ScriptAlias /cgi-bin/ /var/www/cgi-bin/
<Directory "/var/www/cgi-bin">
AllowOverride None
Options +ExecCGI
Require all granted
</Directory>

Ini memberitahu Apache untuk treat fail di /var/www/cgi-bin/ sebagai skrip CGI.

Program CGI Pertama

Sekarang, mari kita tulis program CGI pertama kita di atas C++. Kita akan mula dengan contoh "Hello, World!" yang simple:

#include <iostream>
using namespace std;

int main() {
cout << "Content-type:text/html\r\n\r\n";
cout << "<html>\n";
cout << "<head>\n";
cout << "<title>Hello World - Program CGI Pertama</title>\n";
cout << "</head>\n";
cout << "<body>\n";
cout << "<h2>Hello World! Ini adalah program CGI pertama saya</h2>\n";
cout << "</body>\n";
cout << "</html>\n";
return 0;
}

Mari kita kongsi ini:

  1. Kita sertakan pustaka iostream untuk operasi input/output.
  2. Baris Content-type adalah penting - ia memberitahu penyemak penyemak pelayar jenis kandungan yang dijangka.
  3. Kita kemudian output kod HTML, sama seperti yang kita akan lakukan di atas fail HTML statik.
  4. Karakter \n memastikan kerentangan baris yang betul di atas output.

Pengepala HTTP

Di atas contoh, anda lihat baris ini:

cout << "Content-type:text/html\r\n\r\n";

Ini adalah pengepala HTTP. Ia adalah penting untuk memberitahu penyemak penyemak pelayar bagaimana untuk interpretasi kandungan berikutnya. Ada banyak jenis pengepala, tetapi untuk masa ini, kita akan fokus pada pengepala Content-type.

Variabel Lingkungan CGI

CGI menyediakan variabel lingkungan yang memberikan anda maklumat tentang permintaan. Di sini adalah program yang menunjukkan beberapa daripadanya:

#include <iostream>
#include <cstdlib>
using namespace std;

int main() {
cout << "Content-type:text/html\r\n\r\n";
cout << "<html><body>";
cout << "SERVER_NAME: " << getenv("SERVER_NAME") << "<br>";
cout << "REQUEST_METHOD: " << getenv("REQUEST_METHOD") << "<br>";
cout << "QUERY_STRING: " << getenv("QUERY_STRING") << "<br>";
cout << "</body></html>";
return 0;
}

Program ini menggunakan getenv() untuk mendapatkan variabel lingkungan yang ditetapkan oleh pelayan web.

Pustaka CGI C++

Untuk membuat pengaturcaraan CGI lebih mudah, kita boleh menggunakan pustaka seperti cgicc. Di sini cara anda mungkin menggunakan itu:

#include <iostream>
#include <cgicc/Cgicc.h>
#include <cgicc/HTTPHTMLHeader.h>
#include <cgicc/HTMLClasses.h>

using namespace std;
using namespace cgicc;

int main() {
Cgicc cgi;
cout << HTTPHTMLHeader() << endl;
cout << HTMLDoctype(HTMLDoctype::eStrict) << endl;
cout << html() << head(title("Program CGI Pertama saya")) << endl;
cout << body() << h1("Hello, World!") << endl;
cout << body() << html();
return 0;
}

Pustaka ini menyediakan kelas yang membuatnya lebih mudah untuk menghasilkan HTML dan mengendalikan data borang.

Methode GET dan POST

Ada dua jenis utama untuk menghantar data ke pelayan web: GET dan POST.

Methode GET

Methode GET menghantar data sebagai sebahagian daripada URL. Di sini adalah contoh:

#include <iostream>
#include <cgicc/Cgicc.h>
#include <cgicc/HTTPHTMLHeader.h>
#include <cgicc/HTMLClasses.h>

using namespace std;
using namespace cgicc;

int main() {
Cgicc cgi;
cout << HTTPHTMLHeader() << endl;
cout << html() << body() << endl;

form_iterator name = cgi.getElement("name");
if(name != cgi.getElements().end()) {
cout << "Hello, " << **name << "!" << endl;
} else {
cout << "No name was submitted." << endl;
}

cout << body() << html();
return 0;
}

Program ini mencari parameter "name" di atas URL (cth., http://yourserver.com/cgi-bin/program?name=John) dan menyapa pengguna.

Methode POST

Methode POST menghantar data di atas badan permintaan HTTP. Ia lebih aman dan boleh mengendalikan jumlah data yang lebih besar. Di sini adalah contoh:

#include <iostream>
#include <cgicc/Cgicc.h>
#include <cgicc/HTTPHTMLHeader.h>
#include <cgicc/HTMLClasses.h>

using namespace std;
using namespace cgicc;

int main() {
Cgicc cgi;
cout << HTTPHTMLHeader() << endl;
cout << html() << body() << endl;

form_iterator name = cgi.getElement("name");
if(name != cgi.getElements().end()) {
cout << "Hello, " << **name << "!" << endl;
} else {
cout << "No name was submitted." << endl;
}

cout << body() << html();
return 0;
}

Kod ini kelihatan serupa dengan contoh GET, tetapi ia direka untuk bekerja dengan permintaan POST.

Mengendalikan Data Borang

Sekarang, mari kita lihat bagaimana untuk mengendalikan jenis data borang yang berbeza:

Data Checkbox

form_iterator checkbox = cgi.getElement("mycheckbox");
if(checkbox != cgi.getElements().end() && checkbox->getValue() == "on") {
cout << "Checkbox adalah ditandai!" << endl;
} else {
cout << "Checkbox adalah tidak ditandai." << endl;
}

Data Butang Radio

form_iterator radio = cgi.getElement("myradio");
if(radio != cgi.getElements().end()) {
cout << "Pilihan yang dipilih: " << **radio << endl;
} else {
cout << "Tiada pilihan yang dipilih." << endl;
}

Data Text Area

form_iterator textarea = cgi.getElement("mytextarea");
if(textarea != cgi.getElements().end()) {
cout << "Kandungan text area: " << **textarea << endl;
} else {
cout << "Text area adalah kosong." << endl;
}

Data Drop Down Box

form_iterator dropdown = cgi.getElement("mydropdown");
if(dropdown != cgi.getElements().end()) {
cout << "Pilihan yang dipilih: " << **dropdown << endl;
} else {
cout << "Tiada pilihan yang dipilih." << endl;
}

Menggunakan Cookie di atas CGI

Cookie membolehkan anda untuk menyimpan rakaman kecil data di atas rakaman pengguna. Di sini cara anda untuk menetapkan dan mendapatkan cookie:

Menetapkan Cookie

#include <cgicc/HTTPCookie.h>

// ... (lain-lain penyertaan dan pengisytiharan namespace)

int main() {
Cgicc cgi;
HTTPCookie cookie("user", "John Doe");
cookie.setMaxAge(3600);  // Cookie luput dalam masa 1 jam

cout << HTTPHTMLHeader().setCookie(cookie) << endl;
// ... rakaman HTML anda yang lain
}

Mendapatkan Cookie

const CgiEnvironment& env = cgi.getEnvironment();
const vector<HTTPCookie>& cookies = env.getCookieList();

for(vector<HTTPCookie>::const_iterator i = cookies.begin(); i != cookies.end(); ++i) {
if(i->getName() == "user") {
cout << "Selamat kembali, " << i->getValue() << "!" << endl;
break;
}
}

Contoh Penaipan Fail

Akhir sekali, mari kita lihat bagaimana untuk mengendalikan penaipan fail:

#include <iostream>
#include <fstream>
#include <cgicc/Cgicc.h>
#include <cgicc/HTTPHTMLHeader.h>
#include <cgicc/HTMLClasses.h>

using namespace std;
using namespace cgicc;

int main() {
Cgicc cgi;
cout << HTTPHTMLHeader() << endl;
cout << html() << body() << endl;

const_file_iterator file = cgi.getFile("userfile");
if(file != cgi.getFiles().end()) {
ofstream out("/path/to/upload/directory/" + file->getFilename());
out << file->getData();
cout << "Fail " << file->getFilename() << " berjaya diupload." << endl;
} else {
cout << "Tiada fail yang diupload." << endl;
}

cout << body() << html();
return 0;
}

Program ini menyimpan fail yang diupload ke direktori yang ditetapkan di atas pelayan.

Dan itu adalah semua! Kita telah melカkan dasar-dasar Pengaturcaraan Web C++ menggunakan CGI. Ingat, latihan membuat perfection. Cuba contoh ini, eksperimen dengan mereka, dan tidak lama lagi anda akan dapat membuka aplikasi web yang kompleks dengan C++. Selamat pengaturcaraan!

Methode Keterangan
GET Menghantar data sebagai sebahagian daripada URL
POST Menghantar data di atas badan permintaan HTTP
getElement() Mendapatkan data borang dari permintaan GET atau POST
setCookie() Menetapkan cookie di atas rakaman pengguna
getCookieList() Mendapatkan cookie dari rakaman pengguna
getFile() Mengendalikan penaipan fail di atas CGI

Credits: Image by storyset