Indonesia

Dasar C++

Pemrograman Berorientasi Objek C++

C++ Tingkat Lanjut

Panduan Awal C++ Web Programming

Halo para pengembang web yang aspiratif! Saya sangat senang untuk berpergian di atas perjalanan yang menarik ini bersama dengan Anda ke dunia C++ Web Programming. Sebagai seseorang yang telah mengajar ilmu komputer lebih dari satu dekade, saya bisa menjamin bahwa meskipun ini mungkin terlihat menakutkan pada awalnya, dengan kesabaran dan latihan, Anda akan membuat aplikasi web dinamis dalam waktu singkat. Jadi, mari kita melompatlah!

C++ Web Programming

Apa itu CGI?

Sebelum kita mulai mengkodekan, mari kita mengerti apa itu CGI. CGI merupakan singkatan dari Common Gateway Interface. Ini seperti sebuah penerjemah antara server web Anda dan program-program yang menghasilkan konten dinamis. Bayangkanlah CGI sebagai seorang tengan manja yang mengambil permintaan dari pengguna web, melewatkan mereka ke program C++ Anda, dan kemudian mengirimkan hasilnya kembali ke peramban pengguna.

彭روangan Web

Untuk menghargai CGI, kita perlu mengerti cara kerja彭روangan web. Ketika Anda mengetikkan URL di peramban Anda, ini yang terjadi:

  1. Peramban Anda mengirimkan permintaan ke server web.
  2. Server web memproses permintaan ini.
  3. Jika itu halaman statis, server akan mengirimkannya secara langsung.
  4. Jika itu konten dinamis, CGI akan masuk ke permainan.
  5. CGI menjalankan program yang sesuai (dalam kasus kita, program C++).
  6. Program menghasilkan konten.
  7. CGI mengirimkan konten ini kembali ke server.
  8. Server mengirimkan konten ke peramban Anda.

Diagram Arsitektur CGI

Mari kita visualisasikan proses ini dengan diagram sederhana:

[Peramban Pengguna] <--> [Server Web] <--> [CGI] <--> [Program C++]

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

Konfigurasi Server Web

Sebelum kita menulis program CGI pertama kita, kita perlu mengkonfigurasi server web kita. Kebanyakan server web seperti Apache atau Nginx memiliki modul CGI. Anda perlu mengaktifkan mereka dan mengatur direktori untuk skrip CGI Anda. Misalnya, di Apache, Anda mungkin 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 memperlakukan file di /var/www/cgi-bin/ sebagai skrip CGI.

Program CGI Pertama

Sekarang, mari kita tulis program CGI pertama kita di C++. Kita akan memulai dengan contoh "Hello, World!" sederhana:

#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 pecahkan ini:

  1. Kita menyertakan pustaka iostream untuk operasi input/output.
  2. Baris Content-type adalah penting - itu memberitahu peramban jenis konten yang diharapkan.
  3. Kita kemudian menghasilkan kode HTML, sama seperti yang kita akan lakukan di file HTML statis.
  4. Karakter \n memastikan pemisah baris yang benar di output.

HTTP Header

Di contoh sebelumnya, Anda melihat baris ini:

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

Ini adalah HTTP header. Ini penting untuk memberitahu peramban bagaimana menginterpretasikan konten berikutnya. Ada banyak jenis header, tapi untuk sekarang, kita akan fokus pada header Content-type.

Variabel Lingkungan CGI

CGI menyediakan variabel lingkungan yang memberikan Anda informasi tentang permintaan. Ini adalah program yang menampilkan beberapa diantaranya:

#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 mengambil variabel lingkungan yang ditetapkan oleh server web.

Pustaka CGI C++

Untuk membuat programming CGI lebih mudah, kita dapat menggunakan pustaka seperti cgicc. Ini cara yang mungkin Anda gunakan 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 membuat itu lebih mudah untuk menghasilkan HTML dan menangani data formulir.

Metode GET dan POST

Ada dua metode utama untuk mengirimkan data ke server web: GET dan POST.

Metode GET

Metode GET mengirimkan data sebagai bagian dari URL. Ini 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 URL (misalnya, http://yourserver.com/cgi-bin/program?name=John) dan menyapa pengguna.

Metode POST

Metode POST mengirimkan data di tubuh permintaan HTTP. Ini lebih aman dan dapat menangani jumlah data yang lebih besar. Ini 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;
}

Kode ini terlihat mirip dengan contoh GET, tetapi itu dirancang untuk bekerja dengan permintaan POST.

Penanganan Data Formulir

Sekarang mari kita lihat cara menangani jenis data formulir yang berbeda:

Data Checkbox

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

Data Tombol Radio

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

Data Area Text

form_iterator textarea = cgi.getElement("mytextarea");
if(textarea != cgi.getElements().end()) {
cout << "Konten area teks: " << **textarea << endl;
} else {
cout << "Area teks 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 << "Tidak ada pilihan yang dipilih." << endl;
}

Penggunaan Cookie di CGI

Cookie memungkinkan Anda untuk menyimpan potongan data kecil di atas mesin klien. Ini cara Anda dapat mengatur dan mengambil cookie:

Pengaturan Cookie

#include <cgicc/HTTPCookie.h>

// ... (pengaturan lain dan deklarasi namespace)

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

cout << HTTPHTMLHeader().setCookie(cookie) << endl;
// ... sisa output HTML Anda
}

Pengambilan 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 datang kembali, " << i->getValue() << "!" << endl;
break;
}
}

Contoh Unggahan File

Akhirnya, mari kita lihat cara menangani unggahan file:

#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 << "File " << file->getFilename() << " berhasil diunggah." << endl;
} else {
cout << "Tidak ada file yang diunggah." << endl;
}

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

Program ini menyimpan file yang diunggah ke direktori yang ditentukan di server.

Dan itu adalah! Kita telah mencakup dasar-dasar C++ Web Programming menggunakan CGI. Ingat, praktek membuat perfect. Cobalah contoh ini, eksperimenlah dengan mereka, dan segera Anda akan membuat aplikasi web kompleks dengan C++. Selamat coding!

Metode Deskripsi
GET Mengirimkan data sebagai bagian dari URL
POST Mengirimkan data di tubuh permintaan HTTP
getElement() Mengambil data formulir dari permintaan GET atau POST
setCookie() Menetapkan cookie di atas mesin klien
getCookieList() Mengambil cookie dari mesin klien
getFile() Menangani unggahan file di CGI

Credits: Image by storyset

Tutorial Sebelumnya:
C++ Multithreading