👩‍✈️ 🕒 🌔 हम डब्ल्यूटी पर एक समाचार साइट लिख रहे हैं 😇 👉🏾 📇

शुरू करने के लिए, मैं आपको अपने बारे में थोड़ा बताऊंगा। मैं मॉस्को एविएशन इंस्टीट्यूट में "कंप्यूटर, सिस्टम, सिस्टम और नेटवर्क" में विशेषज्ञता प्राप्त 4 साल का छात्र हूं, और एक नौसिखिया सी ++ / क्यूटी प्रोग्रामर भी हूं। लंबे समय से मैं वेब विकास सीखना चाहता था, लेकिन मेरे हाथ सभी आवश्यक भाषाओं और प्रौद्योगिकियों के अध्ययन तक नहीं पहुंचे। हाल ही में, C ++ Wt लाइब्रेरी का उपयोग करके वेब एप्लिकेशन बनाने का एक लेख हैबर पर दिखाई दिया, और मैंने इस लाइब्रेरी को और करीब से जानने का निर्णय लिया।

कार्यस्थल की तैयारी

Qt क्रिएटर में Gentoo-linux के तहत लिखे गए सभी कोड। यदि आप ऐसा करने का निर्णय लेते हैं, तो सबसे पहले आपको हमारी आवश्यकताओं के लिए पर्यावरण तैयार करना होगा।
पहली बात यह है कि एक परियोजना बनाएं। मैंने Qt समर्थन के बिना "सरल C ++ प्रोजेक्ट" का उपयोग किया। यद्यपि Qt के साथ संयोजन में Wt का उपयोग किया जा सकता है, इस मामले में हमें इसकी आवश्यकता नहीं है।

मैंने MyApp प्रोजेक्ट को कॉल किया। अगला, MyApp.pro फ़ाइल खोलें और इसे थोड़ा संपादित करें। अर्थात्, मेरे मामले में, मुझे निम्नलिखित पंक्तियों को जोड़ने की आवश्यकता है:

LIBS + = -L / usr / lib -lwt -lwthttp -lwtdbo -lwtdbosqlite3 -I / usr / local / शामिल
LIBS + = -L / usr / स्थानीय / lib -lwthttp -lwt -lboost_regex -lboost_signals
LIBS + = -lboost_system -lboost_thread -lboost_filesystem -lboost_date_time -lpthread -lcrypt

हमें संसाधन फ़ोल्डर को उस स्थान से भी जोड़ना होगा जहां हम अपनी साइट लॉन्च करेंगे। उदाहरण के लिए, इस तरह:
ln -s /usr/share/Wt/resources/ ~/build-MyApp-Qt5-/

इसके लिए तैयारी पूरी मानी जा सकती है।

तो चलिए शुरू करते हैं ...

खाली आवेदन शुरू करने के लिए, यह कोड लिखना पर्याप्त होगा:

 #include <iostream> #include <Wt/WServer> #include <Wt/WApplication> using namespace Wt; WApplication *createWidget(const WEnvironment& env) { WApplication *app=new WApplication(env); //  - app->setTitle("My Site"); //   ( ,   html <title></title>) app->setTheme(new Wt::WBootstrapTheme()); //   bootstrap return app; } int main(int argc, char **argv) { Wt::WServer server(argv[0]); //  server.setServerConfiguration(argc, argv, WTHTTP_CONFIGURATION); //  server.addEntryPoint(Wt::Application,createWidget); // " " if (server.start()) { int sig = Wt::WServer::waitForShutdown(); // ,   std::cerr << "Shutting down: (signal = " << sig << ")" << std::endl; server.stop(); } }

हम कमांड के साथ पोर्ट 8080 पर लोकलहोस्ट पर यह सब चला सकते हैं:

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

स्टार्ट-अप प्रक्रिया को स्वचालित किया जा सकता है, इसके लिए स्टार्ट-अप पैरामीटर को "प्रोजेक्ट्स-> रन-> पैरामीटर" में दर्ज करना होगा।

इस प्रकार, हम एक खाली पृष्ठ के साथ एक वेब सर्वर प्राप्त करते हैं, जिस पर पहुंच प्राप्त की जा सकती है localhost:8080/

एक मेनू जोड़ें।

चलिए भरना शुरू करते हैं। सबसे पहले, हम अपनी साइट के लिए एक मेनू बनाएंगे। ऐसा करने के लिए, एक नया वर्ग बनाएं, मैंने इसे "पृष्ठ" कहा।
page.h:

 #ifndef PAGE_H #define PAGE_H #include <Wt/WContainerWidget> #include <Wt/WText> #include <Wt/WString> #include <Wt/WNavigationBar> #include <Wt/WMenu> #include <Wt/WStackedWidget> class Page : public Wt::WContainerWidget { public: Page(WContainerWidget *parent = 0); private: Wt::WStackedWidget *contentsStack; Wt::WNavigationBar *NavBar; Wt::WMenu *LeftMenu; }; #endif // PAGE_H

page.cpp:

 #include "page.h" using namespace Wt; Page::Page(WContainerWidget *parent):WContainerWidget(parent) { setStyleClass("container"); contentsStack = new Wt::WStackedWidget(); //  ""   ,     contentsStack->setStyleClass("container"); contentsStack->setPadding(48,Wt::Top); //,           "" NavBar = new WNavigationBar(this); //   NavBar->setTitle("MyApp","http://localhost:8080"); //    ,    NavBar->setResponsive(true); //       NavBar->addStyleClass("container"); // bootstrap NavBar->setPositionScheme(Wt::Fixed); //    LeftMenu=new WMenu(contentsStack,this); //  . ,    . NavBar->addMenu(LeftMenu); //     LeftMenu->addItem(WString::fromUTF8(""),new WText(WString::fromUTF8("  "))); //    "". addWidget(contentsStack); //    ,     ,    -  . }

उसी समय, आपको main.cpp पर एक पंक्ति जोड़ने की आवश्यकता है

 ... WApplication *createWidget(const WEnvironment& env) { WApplication *app=new WApplication(env); app->setTitle("My Site"); app->setTheme(new Wt::WBootstrapTheme()); new Page(app->root()); // ! return app; } ...

हम जाँच करते हैं:

चलिए बताते हैं। खबर कहां है?

अब हम उनके पास पहुँचे। पहले हमें यह सीखना होगा कि डेटाबेस के साथ कैसे काम किया जाए।
Wt में, डेटाबेस के साथ काम करना, जैसा कि मेरे लिए है, बल्कि अजीब तरह से लागू किया जाता है, लेकिन जब मैंने सिद्धांत का पता लगाया, तो मुझे अब कोई विशेष समस्या और कठिनाई नहीं थी।

पहली चीज जो आपको चाहिए वह है एक वर्ग के रूप में हमारे समाचार पत्र के लिए एक खाका तैयार करना।

news.h:

 #ifndef NEWS_H #define NEWS_H #include <Wt/WDateTime> #include <Wt/Dbo/Types> #include <Wt/Dbo/WtSqlTraits> class News { public: News(); std::string title; //  std::string text; //  std::string author; //  Wt::WDateTime created; //  template<class Action> //       void persist(Action& a) { Wt::Dbo::field(a, title, "title"); Wt::Dbo::field(a, text, "text"); Wt::Dbo::field(a, author, "aurhor"); Wt::Dbo::field(a, created, "created"); } }; DBO_EXTERN_TEMPLATES(News); #endif // NEWS_H

news.cpp:

 #include "news.h" #include <Wt/Dbo/Impl> DBO_INSTANTIATE_TEMPLATES(News); News::News(): created(Wt::WDateTime::currentDateTime()) //   ,  ,      . {}

"हम्म, और इसका उपयोग कैसे करें?" आप पूछते हैं। सब कुछ बहुत सरल है। मैंने किसी कारण से sqlite3 का उपयोग किया (प्रोजेक्ट के साथ पोर्टेबिलिटी और क्योंकि Wt के लिए MySQL का समर्थन मेरे लिए अज्ञात कारणों से संकलित नहीं किया गया था), लेकिन इसे किसी भी समर्थित डेटाबेस के साथ इसी तरह काम करना चाहिए।

हम पेज को फिर से लिखते हैं।

 #include "page.h" #include "news.h" #include <Wt/Dbo/backend/Sqlite3> #include <Wt/WApplication> #include <Wt/WPanel> using namespace Wt; Page::Page(WContainerWidget *parent):WContainerWidget(parent) { Wt::Dbo::backend::Sqlite3 DataBase=WApplication::instance()->appRoot() + "myapp.db"; //   Wt::Dbo::Session DBSession; //  DBSession.setConnection(DataBase); // DBSession.mapClass<News>("news"); //     news   Wt::Dbo::Transaction transaction(DBSession); //  try { DBSession.createTables(); //     ,      .     . Wt::log("info") << "Database created"; } catch (...) { Wt::log("info") << "Using existing database"; } transaction.commit();//  Wt::WTable *NewsTable=new Wt::WTable();//     NewsTable->addStyleClass("container");//    Wt::Dbo::Transaction transaction1(DBSession);//  .       ,   . Wt::Dbo::collection<Wt::Dbo::ptr<News> > a=DBSession.find<News>().orderBy("created desc");//    ,      . int j=0; for (Wt::Dbo::collection<Wt::Dbo::ptr<News> >::const_iterator i = a.begin(); i != a.end(); ++i) {//  .       ,        .   =) Wt::Dbo::ptr<News> Article = *i; Wt::WPanel *panel = new Wt::WPanel(); panel->setTitle(Article.get()->title); panel->setCentralWidget(new Wt::WText(WString::fromUTF8("<p>:")+Article.get()->author+"</p><p>"+Article.get()->text+"</p>")); NewsTable->elementAt(j,0)->addWidget(panel); j++; } transaction1.commit();// . ,    . setStyleClass("container"); contentsStack = new Wt::WStackedWidget(); contentsStack->setStyleClass("container"); contentsStack->setPadding(48,Wt::Top); NavBar = new WNavigationBar(this); NavBar->setTitle("MyApp","http://cursed.redegrade.net"); NavBar->setResponsive(true); NavBar->addStyleClass("container"); NavBar->setPositionScheme(Wt::Fixed); LeftMenu=new WMenu(contentsStack,this); NavBar->addMenu(LeftMenu); LeftMenu->addItem(WString::fromUTF8(""),NewsTable); //       . this->addWidget(contentsStack); }

खैर, समाचार आउटपुट के लिए, सब कुछ स्पष्ट है, लेकिन निर्माण के बारे में क्या?

हम्म, वास्तव में। जहां सृजन के बिना। अब उपवास करो। आपको लेख के भीतर फिर से पृष्ठ वर्ग को फिर से लिखना होगा।

page.h:

 #ifndef PAGE_H #define PAGE_H #include <Wt/WContainerWidget> #include <Wt/WText> #include <Wt/WString> #include <Wt/WNavigationBar> #include <Wt/WMenu> #include <Wt/WTable> #include <Wt/WStackedWidget> #include <Wt/Dbo/Session> class Page : public Wt::WContainerWidget { public: Page(WContainerWidget *parent = 0); private: Wt::WStackedWidget *contentsStack; Wt::WNavigationBar *NavBar; Wt::WMenu *LeftMenu; Wt::WTable *CreateArticle; Wt::WLineEdit *Title; Wt::WLineEdit *Author; Wt::WTextArea *Text; Wt::WPushButton *AddNews; Wt::Dbo::Session DBSession; void AddArticle(); }; #endif // PAGE_H

page.cpp

 #include "page.h" #include "news.h" #include <Wt/WApplication> #include <Wt/WPanel> #include <Wt/WLineEdit> #include <Wt/WTextEdit> #include <Wt/WPushButton> #include <Wt/Dbo/backend/Sqlite3> using namespace Wt; Page::Page(WContainerWidget *parent):WContainerWidget(parent) { Wt::Dbo::backend::Sqlite3 DataBase=WApplication::instance()->appRoot() + "myapp.db"; DBSession.setConnection(DataBase); DBSession.mapClass<News>("news"); Wt::Dbo::Transaction transaction(DBSession); try { DBSession.createTables(); Wt::log("info") << "Database created"; } catch (...) { Wt::log("info") << "Using existing database"; } transaction.commit(); Wt::WTable *NewsTable=new Wt::WTable(); NewsTable->addStyleClass("container"); Wt::Dbo::Transaction transaction1(DBSession); Wt::Dbo::collection<Wt::Dbo::ptr<News> > a=DBSession.find<News>().orderBy("created desc"); int j=0; for (Wt::Dbo::collection<Wt::Dbo::ptr<News> >::const_iterator i = a.begin(); i != a.end(); ++i) { Wt::Dbo::ptr<News> Article = *i; Wt::WPanel *panel = new Wt::WPanel(); panel->setTitle(WString::fromUTF8(Article.get()->title)); panel->setCentralWidget(new Wt::WText(WString::fromUTF8("<p>:")+WString::fromUTF8(Article.get()->author)+"</p><p>"+WString::fromUTF8(Article.get()->text)+"</p>"));//  .        . NewsTable->elementAt(j,0)->addWidget(panel); NewsTable->elementAt(j,0)->setLoadLaterWhenInvisible(true); j++; } transaction1.commit(); setStyleClass("container"); contentsStack = new Wt::WStackedWidget(); contentsStack->setStyleClass("container"); contentsStack->setPadding(48,Wt::Top); NavBar = new WNavigationBar(this); NavBar->setTitle("MyApp","http://localhost:8080"); NavBar->setResponsive(true); NavBar->addStyleClass("container"); NavBar->setPositionScheme(Wt::Fixed); LeftMenu=new WMenu(contentsStack,this); NavBar->addMenu(LeftMenu); LeftMenu->addItem(WString::fromUTF8(""),NewsTable); CreateArticle=new Wt::WTable(); //     Title=new Wt::WLineEdit(WString::fromUTF8(" ")); //  Author=new Wt::WLineEdit(WString::fromUTF8("")); Text=new Wt::WTextArea(WString::fromUTF8(" ")); AddNews=new Wt::WPushButton(WString::fromUTF8(" ")); CreateArticle->addStyleClass("container"); CreateArticle->elementAt(0,0)->addWidget(Title); //    CreateArticle->elementAt(1,0)->addWidget(Author); CreateArticle->elementAt(2,0)->addWidget(Text); CreateArticle->elementAt(3,0)->addWidget(AddNews); LeftMenu->addItem(WString::fromUTF8(" "),CreateArticle); //     Page::AddArticle    AddNews->clicked().connect(this,&Page::AddArticle); this->addWidget(contentsStack); } void Page::AddArticle() { Wt::Dbo::backend::Sqlite3 DataBase=WApplication::instance()->appRoot() + "myapp.db"; DBSession.setConnection(DataBase); // (   , ,     ,   ) Wt::Dbo::Transaction transaction(DBSession); //:        . News *a=new News(); //  a->title=Title->text().toUTF8(); a->author=Author->text().toUTF8(); a->text=Text->text().toUTF8(); Wt::Dbo::ptr<News> Article=DBSession.add(a); //    }

परिणाम:

PS यदि अतिरिक्त स्पष्टीकरण की आवश्यकता है, तो टिप्पणियों में लिखें, मैं और अधिक विस्तार से बताने की कोशिश करूंगा। मैंने अभी Wt सीखना शुरू किया है, इसलिए यह बहुत संभव है कि मैं कहीं गलत हूं। अगर सही होगा तो मुझे खुशी होगी।
PPS यदि आप Wt पर लेखों में रुचि रखते हैं, तो टिप्पणियों में लिखें कि आप उसके बारे में और क्या जानना चाहते हैं, और मैं इसके बारे में लिखने की कोशिश करूंगा!

हम डब्ल्यूटी पर एक समाचार साइट लिख रहे हैं

कार्यस्थल की तैयारी

तो चलिए शुरू करते हैं ...

एक मेनू जोड़ें।

चलिए बताते हैं। खबर कहां है?

खैर, समाचार आउटपुट के लिए, सब कुछ स्पष्ट है, लेकिन निर्माण के बारे में क्या?

More articles: