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!
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:
- Penyemak penyemak pelayar anda menghantar permintaan kepada pelayan web.
- Pelayan web memproses permintaan ini.
- Jika ia adalah halaman statik, pelayan menghantarkannya secara langsung.
- Jika ia adalah kandungan dinamik, CGI akan masuk ke permainan.
- CGI menjalankan program yang sesuai (dalam kes kita, program C++).
- Program menghasilkan kandungan.
- CGI menghantar kandungan ini kembali kepada pelayan.
- 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:
- Kita sertakan pustaka
iostream
untuk operasi input/output. - Baris
Content-type
adalah penting - ia memberitahu penyemak penyemak pelayar jenis kandungan yang dijangka. - Kita kemudian output kod HTML, sama seperti yang kita akan lakukan di atas fail HTML statik.
- 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