WT : Web Library untuk C++

30 Jan, 2025

Jadi, saya sedang liburan semesteran kuliah dan memiliki waktu luang, serta alasan tertentu saya enggan menyentuh skripsi. Karena bosan, saya jadi ingin iseng membuat website dengan C++.

C++ sendiri bukan bahasa pemrograman yang secara khusus dirancang untuk pengembangan web, sehingga tentunya dibutuhkan framework pihak ketiga untuk melakukannya. Setelah mencari, saya menemukan framework yang cukup terdokumentasi untuk kebutuhan ini, yaitu Wt.

Wt sendiri adalah pustaka GUI berbasis web yang memungkinkan pengembang untuk dengan cepat membangun antarmuka web yang interaktif menggunakan widget, tanpa harus menulis satu baris kode JavaScript pun. kalian dapat mengunjungi website resmi dan repositori github nya

https://www.webtoolkit.eu/wt

Dalam post ini, saya mencoba menginstall serta membuat "Hello, World!" dengan Wt. Post ini bertujuan sebagai catatan pribadi saya dalam mendokumentasikan langkah-langkah instalasi Wt.

Instalasi

Untuk instalasi sendiri sudah terdokumentasikan dalam website resmi Wt.

1. Install Depedency

Untuk ngebuild Wt dari source code, minimal dibutuhkan

CMake, software untuk build C++ Code
Boost, set pustaka C++ yang digunakan oleh Wt
Clang, C++ Compiler

Ada depedency tambahan sebagai opsi yang terdapat pada dokumentasi. Saya hanya akan menambahkan mysql karena nantinya saya akan membutuhkannya.

sudo apt-get install cmake libboost-all-dev clang mysql-server

2. Clone Repository Git

Karena ukuran repo yang cukup besar, mari lakukan shallow cloning saja. Kemudian masuk ke folder Wt dan buat folder build untuk menampung Wt yang sudah dibuild

git clone --depth 1 https://github.com/emweb/wt.git

cd wt
mkdir build
cd build

3. Configurasi CMake

Dalam forlder build, mari konfigurasi CMake. karena ini hanya minimal instalasi dengan fitur mysql maka saya hanya akan menambahkan kompilasi flag ENABLE_MYSQL=ON. Jika untuk flags lainnya dapat disesuaikan dengan fitur yang di inginkan. Lihat Dokumentasi

cmake .. -DCMAKE_INSTALL_PREFIX=/usr/local \ -DENABLE_MYSQL=ON

tunggu hingga selesai

4. Build Wt

mari kita compile

make -j$(nproc)

Kemudian compile wt dengan

sudo make install

tambahkan path

echo 'export LD_LIBRARY_PATH=/usr/local/lib:$LD_LIBRARY_PATH' >> ~/.bashrc

5. Check Instalasi

untuk cek instalasi lansung atau dapat menggunakan grep

Cek include file

ls /usr/local/include/Wt/

Cek Library Files

ls /usr/local/lib | grep wt

jika keluar file-file inlcude wt yang depannya w dan library libwt bearti sudah selesai

Hello wt

Setelah wt sudah terpasang, mari kita lakukan hal yang lumrah dilakukan oleh orang-orang di dunia yaitu mencoba membuat halaman hello world.

hello.cpp

#include <Wt/WApplication.h>
#include <Wt/WText.h>
#include <Wt/WPushButton.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WCssDecorationStyle.h>

class HelloWorld : public Wt::WApplication {
public:
    HelloWorld(const Wt::WEnvironment& env) 
        : Wt::WApplication(env) {
        //header
        setTitle("Hello World");
        Wt::WApplication::instance()->useStyleSheet("hello.css");

        //body
        auto container = root()->addWidget(std::make_unique<Wt::WContainerWidget>());
        container->setStyleClass("centered-box");

        
          auto text = container->addWidget(std::make_unique<Wt::WText>("👋 Hello, Misa! Welcome to Wt!"));
          text->setStyleClass("hello-text");
        
          container->addWidget(std::make_unique<Wt::WBreak>());
        
          auto button = container->addWidget(std::make_unique<Wt::WPushButton>("Click Me!"));
          button->setStyleClass("click-button");

        
          button->clicked().connect([=]() {
              text->setText("You clicked the button! Have fun!");
              button->setText("Clicked!");
          });
    }
};


std::unique_ptr<Wt::WApplication> createApplication(const Wt::WEnvironment& env) {
    return std::make_unique<HelloWorld>(env);
}

int main(int argc, char** argv) {
    return Wt::WRun(argc, argv, createApplication);
}

kemudian tambahkan file css hello.css

body {
    background: linear-gradient(135deg, #667eea, #764ba2);
    font-family: Arial, sans-serif;
    text-align: center;
    color: white;
}

.centered-box {
    margin-top: 20vh;
    padding: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: inline-block;
    transition: transform 0.3s ease;
}

.hello-text {
    font-size: 24px;
    margin-top:20px;

}

.click-button {
    padding: 10px 20px;
    font-size: 18px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.click-button:hover {
    background: #ff4757;
}

kemudian kita compile hello.cpp

 clang++ hello.cpp -o hello -lwt -lwthttp -I/usr/local/include -L/usr/local/lib

bila tidak ada pesan error tandanya compile berhasil. Setelahnya kita run aplikasinya

./hello --docroot . --http-address 0.0.0.0 --http-port 8080

Tampilan terminal tanda aplikasi sudah berjalan

Jika tampilan terminal sudah seperti pada gambar di atas, berarti aplikasi sudah berjalan dan dapat dibuka di local host (sesuaikan port):

    http://localhost:8080/

Tampilan page hello world Misa seperti berikut:

Gambar hello world

Saat tombol ditekan:

Menarik sekali meskipun sejujurnya agak ribet karena saya berkali-kali compile hello.cpp untuk melihat tampilan halaman yang berubah. Ntahlah apa yang bisa saya lakukan pada wt ini untuk mengisi waktu luang.

#cpp #programming