Webserver bring up (II): Create a demo page(html+fcgi)

Posted on Edited on In Views: Word count in article: 539 Reading time ≈ 2 mins.

In last post we have installed lighttpd and fastcgi++, it’s create a demo page to have a quick verification.

A simple html

Let’s write a simple html for demo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <link rel="icon" href="/img/favicon.ico" type="img/x-ico" />
    <title>Alex Demo page</title>
</head>

<body background="/img/back.jpg"
    style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;">
    <div align="center" style="margin-top: 25%">
        <form id="diag" action="/cpp_get.fcgi" method="get">
            <table border="0" style="background-color:dimgrey">
                <tr>
                    <td align="right" valign="middle">
                        Product Name:<input type=" text" name="product_name" /><br />
                        Product ID:<input type="text" name="product_id" /><br />
                        <input type="submit" value="提交" />
                    </td>
                </tr>
            </table>
        </form>
    </div>

</body>

</html>

This page will show a picture as page background, meanwhile a from will be created for testing GET method. The path we are using in html is relative path, i.e. if you put your pages to /var/www/pages/test.html, the absolute path of back.jpg will be /var/www/pages/img/back.jpg and the relative path will be /img/back.jpg.

Beware of access rights of those files/directories, the user and user group of lighttpd was configured in lighttpd.conf by server.username and server.groupname. Make sure lighttpd can access them.

Write a simple fgci backend

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// fcgi_get.cpp
#include <fastcgi++/request.hpp>
#include <iomanip>
#include <fstream>

class GetTest : public Fastcgipp::Request<wchar_t>
{
    bool response()
    {

        std::wofstream outPutFile("output.patch", std::ios_base::out | std::ios_base::binary);
        //! [Response definition]
        //! [HTTP header]
        out << L"Content-Type: text/html; charset=utf-8\r\n\r\n";
        //! [HTTP header]

        //! [Output]
        out << L"<!DOCTYPE html>\n"
               L"<html>"
               L"<head>"
               L"<meta charset='utf-8' />"
               L"<title>Success</title>"
               L"</head>"
               L"<body>"
               L"<p>";
        using Fastcgipp::Encoding;

        if (!environment().gets.empty())
            for (const auto &get : environment().gets)
            {
                out << L"<b>" << Encoding::HTML << get.first << Encoding::NONE
                    << L":</b> " << Encoding::HTML << get.second
                    << Encoding::NONE << L"<br />";
                outPutFile << get.first << ":" << get.second;
            }

        out << L"</p>"
               L"</body>"
               L"</html>";
        //! [Output]

        //! [Return]
        outPutFile << "FFF" << std::endl;
        outPutFile.close();
        return true;
    }
};

#include <fastcgi++/manager.hpp>
int main()
{
    Fastcgipp::Manager<GetTest> manager;
    //! [Manager]
    //! [Signals]
    manager.setupSignals();
    //! [Signals]
    //! [Listen]
    manager.listen();
    //! [Listen]
    //! [Start]
    manager.start();
    //! [Start]
    //! [Join]
    manager.join();

    return 0;
}

Use environment().gets to get all data passed by frontend through GET method.

Compile your fcgi

1
g++ fcgi_get.cpp -lfastcgipp -o cpp_get.fcgi

Then copy it to /var/www/fcgi-bin/cpp_get.fcgi. Don’t forget add rights of execution for this fcgi file.

Add your fcgi into lighttpd conf

1
2
3
4
5
6
7
8
"/cpp_get.fcgi" => (
  "cpp_get.fastcgi.handler" => (
    "socket" => "/var/run/lighttpd/lighttpd-cpp_get-" + PID + ".socket",,
    "check-local" => "disable",
    "bin-path" => "/var/www/fcgi-bin/cpp_get.fcgi",
    "max-procs" => 30,
  )
)

This configuration allows you execute your fcgi by access localhost/cpp_get.fcgi.

Apply changes

If lighttpd is already started on your device, you might need to restart lighttpd services to apply changes: 

1
service lighttpd force-reload

Verification

Open http://localhost/test.html, input something in the form then click “提交”, if everything is ok, browser will jump to http://localhost/cpp_get.fcgi and show what you have inputted. Meanwhile a file called output.patch will be generated at your page folder which contains the text you inputted as well.

Tips: If error occurred, you can find the path of error log by checking the value of server.errorlog in your lighttpd.conf.