McDonald's Style Website Template Using C++ Crow
Overview
This tutorial will guide you through creating a McDonald's-style website template using C++ Crow. The template includes:
- Two beef burgers: Big Mac and Quarter Pounder
- A discount system (e.g., "20% OFF on Big Mac!")
- Styling similar to McDonald's branding
Installing Dependencies
Linux (Ubuntu)
First, install Crow and Boost:
sudo apt update
sudo apt install libboost-all-dev
Windows
Use vcpkg to install Boost:
vcpkg install boost
Creating a C++ Web Server with Discounts
Create a file named server.cpp and paste the following code:
#include "crow_all.h"
#include <unordered_map>
struct Burger {
std::string name;
double price;
double discount; // Discount percentage (e.g., 20% -> 0.2)
};
// Create a menu with two beef burgers and their discounts
std::unordered_map<std::string, Burger> menu = {
{"bigmac", {"Big Mac", 5.99, 0.2}}, // 20% OFF
{"quarterpounder", {"Quarter Pounder", 6.49, 0.0}} // No discount
};
// Function to generate the HTML for the menu
std::string generateMenuHtml() {
std::string html = "<!DOCTYPE html><html lang='en'><head>"
"<title>McDonald's Menu</title>"
"<style>"
"body { font-family: Arial, sans-serif; background-color: #ffcc00; text-align: center; }"
"h1 { color: #d91a1a; }"
"nav { background: #d91a1a; padding: 10px; }"
"nav a { color: white; margin: 10px; text-decoration: none; }"
".menu { margin-top: 20px; }"
".menu-item { display: inline-block; padding: 20px; background: white; margin: 10px; border-radius: 10px; }"
".discount { color: green; font-weight: bold; }"
"</style></head><body>"
"<nav><a href='/'>Home</a> | <a href='/menu'>Menu</a> | <a href='/contact'>Contact</a></nav>"
"<h1>McDonald's Menu</h1><div class='menu'>";
for (const auto& item : menu) {
const Burger& burger = item.second;
double discountedPrice = burger.price * (1 - burger.discount);
html += "<div class='menu-item'><h3>" + burger.name + "</h3><p>Price: $" +
std::to_string(burger.price) + "</p>";
if (burger.discount > 0) {
html += "<p class='discount'>Promo: " + std::to_string(static_cast<int>(burger.discount * 100)) +
"% OFF!</p>";
html += "<p><b>Now: $" + std::to_string(discountedPrice) + "</b></p>";
}
html += "</div>";
}
html += "</div></body></html>";
return html;
}
int main() {
crow::SimpleApp app;
// Homepage route
CROW_ROUTE(app, "/")([]() {
return "<!DOCTYPE html><html lang='en'>"
"<head><title>McDonald's</title>"
"<style>"
"body { font-family: Arial, sans-serif; background-color: #ffcc00; text-align: center; }"
"h1 { color: #d91a1a; }"
"nav { background: #d91a1a; padding: 10px; }"
"nav a { color: white; margin: 10px; text-decoration: none; }"
"</style></head><body>"
"<nav><a href='/'>Home</a> | <a href='/menu'>Menu</a></nav>"
"<h1>Welcome to McDonald's</h1>"
"<p>Delicious beef burgers with amazing deals!</p>"
"</body></html>";
});
// Menu route
CROW_ROUTE(app, "/menu")([]() {
return generateMenuHtml();
});
// Contact page
CROW_ROUTE(app, "/contact")([]() {
return "<!DOCTYPE html><html lang='en'>"
"<head><title>Contact McDonald's</title></head>"
"<body><h1>Contact Us</h1>"
"<p>Email: support@mcdonalds.com</p>"
"<p>Phone: +1 800-555-1234</p>"
"</body></html>";
});
app.port(8080).multithreaded().run();
}
Explanation
Menu System
- unordered_map stores the Big Mac and Quarter Pounder with their prices and discounts.
- The generateMenuHtml() function dynamically generates the HTML menu.
- The Big Mac has a 20% discount, while the Quarter Pounder has no discount.
Routing
/
→ Homepage
/menu
→ Displays the menu with discounts
/contact
→ Contact page
Styling
- McDonald's theme colors: Yellow (#ffcc00) and Red (#d91a1a)
- Discounted burgers display a green "Promo" label with the reduced price.
Compile and Run
Compilation
g++ server.cpp -o server -lboost_system -lpthread
Running the Server
./server
Open in Browser
Go to:
http://localhost:8080
Comments
Post a Comment