Mirror/Crow
1
0
Fork 0
mirror of https://github.com/CrowCpp/Crow.git synced 2024-06-07 21:10:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

added webpage tutorial and a build command for first app tutorial

Browse Source
This commit is contained in:
The-EDev 2022-06-03 21:21:39 +03:00 committed by Farook Al-Sammarraie
parent 2788a910b9
commit d599295731
3 changed files with 133 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
docs/getting_started/a_simple_webpage.md Normal file
View File

@ -0,0 +1,125 @@
Hello World is a good start, but what if you want something a bit more fancy.. Something like an HTML document saying "Hello World". If that's what you want, follow along:
## Basic Webpage
Let's start our webpage with.. well.. a webpage. but before we create a webpage we need to place it somewhere Crow recognizes, this directory (for now) is going to be called `templates`.
Once our `templates` folder is created, we can create our HTML document inside it, let's call it `fancypage.html`.
After that we can just place something simple inside it like:
``` html title="templates/fancypage.html"
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
</body>
</html>
```
<br>
Now that we have our HTML page ready, let's take our Hello World example from earlier:
``` cpp linenums="1"
#include "crow.h"
//#include "crow_all.h"
int main()
{
crow::SimpleApp app; //define your crow application
//define your endpoint at the root directory
CROW_ROUTE(app, "/")([](){
return "Hello world";
});
//set the port, set the app to run on multiple threads, and run the app
app.port(18080).multithreaded().run();
}
```
<br>
And now let's modify it so that it returns our cool page:
``` cpp title="/main.cpp" linenums="1" hl_lines="10 11"
#include "crow.h"
//#include "crow_all.h"
int main()
{
crow::SimpleApp app;
//define your endpoint at the root directory
CROW_ROUTE(app, "/")([](){
auto page = crow::mustache::load_text("fancypage.html");
return page;
});
app.port(18080).multithreaded().run();
}
```
Your project should look something something like:
```
./
|-templates/
| |-fancypage.html
|
|-main.cpp
|-crow_all.h
```
or
```
./
|-templates/
| |-fancypage.html
|
|-crow/
| |-include/...
| |-crow.h
|-main.cpp
```
And now whenever we call `http://localhost:18080/` we get our Hello World in an HTML document rather than just plain text.
## Template Webpage with a variable
But we can make things even more exciting, we can greet a user by their name instead!!
Let's start with our webpage, and modify it with a little bit of mustache syntax:
``` html title="templates/fancypage.html" hl_lines="4"
<!DOCTYPE html>
<html>
<body>
<p>Hello {{person}}!</p> <!--(1)-->
</body>
</html>
```
1. `{{}}` in mustache define a simple variable
<br>
Now let's modify our C++ code to use the variable we just added to our webpage (or template):
``` cpp title="/main.cpp" linenums="1" hl_lines="9-12"
#include "crow.h"
//#include "crow_all.h"
int main()
{
crow::SimpleApp app;
//define your endpoint at the root directory
CROW_ROUTE(app, "/<string>")([](std::string name){ // (1)
auto page = crow::mustache::load("fancypage.html"); // (2)
crow::mustache::context ctx ({{"person", name}}); // (3)
return page.render(ctx); //(4)
});
app.port(18080).multithreaded().run();
}
```
1. We are adding a `string` variable to the URL and a counterpart (`std::string name`) to our Route, this can be anything the user wants.
2. We are using `load()` instead of `load_text()` since we have an actual variable now.
3. We are creating a new [context](../../guides/templating/#context) containing the `person` variable from our template and the `name` we got from the URL.
4. we are using `render(ctx)` to apply our context to the template.
Now calling `http://localhost:18080/Bob` should return a webpage containing "Hello Bob!". We did it!
For more details on templates and HTML pages in Crow please go [here](../../guides/templating/)

7
docs/getting_started/your_first_application.md
View File

@ -38,7 +38,7 @@ Please note that the `port()` and `multithreaded()` methods aren't needed, Thoug
Once you've followed all the steps above, your code should look similar to this Once you've followed all the steps above, your code should look similar to this
``` cpp linenums="1" ``` cpp title="main.cpp" linenums="1"
#include "crow.h" #include "crow.h"
//#include "crow_all.h" //#include "crow_all.h"
@ -55,4 +55,7 @@ int main()
app.port(18080).multithreaded().run(); app.port(18080).multithreaded().run();
} }
``` ```
After building and running your .cpp file, you should be able to access your endpoint at [http://localhost:18080](http://localhost:18080). Opening this URL in your browser will show a white screen with "Hello world" typed on it.
For the sake of simplicity, we suggest using `crow_all.h` (by placing it in the same place as your `main.cpp`) and running the command `g++ main.cpp -lpthread -O2 -o first` (use `clang` instead of `g++` if you prefer clang, or Visual Studio if you're on windows).
After building and running your `.cpp` file, you should be able to access your endpoint at [http://localhost:18080](http://localhost:18080). Opening this URL in your browser will show a white screen with "Hello world" typed on it.

4
mkdocs.yml
View File

@ -11,7 +11,8 @@ theme:
font: false font: false
language: 'en' language: 'en'
features: features:
navigation.tabs - navigation.tabs
- content.code.annotate
favicon: 'assets/favicon.svg' favicon: 'assets/favicon.svg'
logo: 'assets/favicon.svg' logo: 'assets/favicon.svg'
icon: icon:
@ -54,6 +55,7 @@ nav:
- MacOS: getting_started/setup/macos.md - MacOS: getting_started/setup/macos.md
- Windows: getting_started/setup/windows.md - Windows: getting_started/setup/windows.md
- Your First Application: getting_started/your_first_application.md - Your First Application: getting_started/your_first_application.md
- A simple Webpage: getting_started/a_simple_webpage.md
- Guides: - Guides:
- Different parts of Crow: - Different parts of Crow:
- App: guides/app.md - App: guides/app.md