树莓派WEB服务器（Boa）CGI编程入门

通过上一个课程“Boa基本设置与使用”的学习，大家在树莓派上应已经会安装、配置、运行Boa服务器，并且访问到服务器上的一个静态网页。
这不是运行Web服务器最终的目的，最终应是通过B/S（浏览器/服务器）模式实现两端的相互。

下面通过一个CGI编程实例来学习，WEB服务器的动态编程技术。“体重指数（BMI）计算器”，用户输入自己的身高与体重后点击计算，服务器就会计算出BMI数值。

课程资源（程序参考代码，图片）http://pan.baidu.com/s/1dF3WIiP

体重指数（BMI）计算器

开发设计流程

Created with Raphaël 2.1.0界面功能设计静态html文件，html程序显示界面静态cgi文件，cgi程序显示界面动态cgi文件，cgi程序处理用户数据显示调试运行

一、HTML静态显示

1 . 静态的html文件

cgi.html

<html>
<body>
<div align="center"><form action="bmi.cgi" method="GET"><table>
<tr><td rowspan="3"><img src="bmi.png" hight="60" width="120"></td>
<td align="center" colspan="3"><h2>体重指数（BMI）计算器</h2></td></tr><tr><td >身高 : <input type="text" name="cm"  size="3"> cm </td>
<td >体重 : <input type="text" name="kg"  size="3"> kg </td>
<td align="center" ><input type=submit value=" 计 算 " size="16"> </td></tr><tr><td align="center" colspan="3">BMI =
<input type="text" name="ret" value=""  size="3" readonly></tr>
</table>    </form>
</br><img src=bmi_index.png >
</div></body>
</html>

二、CGI程序输出页面

CGI基本概念

CGI：通用网关接口（Common Gateway Interface）是一个Web服务器主机提供信息服务的标准接口。通过CGI接口，Web服务器就能够获取客户端提交的信息，转交给服务器端的CGI程序进行处理，最后返回结果给客户端。

WEB服务器和CGI程序之间的通讯
服务器和CGI程序之间是通过标准输入输出来进行数据传递的，而这个过程需要环境变量的协作方可实现。

1.服务器将URL指向一个应用程序
2.服务器为应用程序执行做准备
3.应用程序执行，读取标准输入和有关环境变量
4.应用程序进行标准输出

服务器上运行的cgi 通过标准输入（环境变量）来取得客户端用户数据，通过标准输出向客户端返回数据显示。

CGI数据输出
CGI程序如何将信息处理结果返回给客户端？这实际上是CGI格式化输出。
在CGI程序中的标准输出stdout是经过重定义了的，它并没有在服务器上产生任何的输出内容，而是被重定向到客户浏览器，这与它是由C，还是Perl或Python实现无关。
所以，我们可以用打印来实现客户端新的HTML页面的生成。比如，C的printf是向该进程的标准输出发送数据，Perl和Python用print向该进程的标准输出发送数据。

课程中CGI程序使用C语言编程。
向标准输出发送网页内容时要遵守MIME格式规则：
任意输出前面必须有一个用于定义MIME类型的输出内容（Content-type）行，而且随后还必须跟一个空行。

printf( "Content-type:text/html\n\n" );

2 . cgi显示界面程序

bmi.c

#include<stdio.h>int main()
{printf( "Content-type:text/html\n\n" ); printf("<html><body><div align=\"center\">\n");printf("<form action=\"bmi.cgi\" method=\"GET\"><table>     \n");printf("<tr><td rowspan=\"3\"><img src=\"../bmi.png\" hight=\"60\" width=\"120\"></td>    \n");printf("<td align=\"center\" colspan=\"3\"><h2>体重指数（BMI）计算器</h2></td></tr>    \n");printf("<tr><td >身高 : <input type=\"text\" name=\"cm\"  size=\"3\"> cm </td>    \n");printf("<td >体重 : <input type=\"text\" name=\"kg\"  size=\"3\"> kg </td>    \n");printf("<td align=\"center\" ><input type=submit value=\" 计 算 \" size=\"16\">   </td></tr>    \n");printf("<tr><td align=\"center\" colspan=\"3\">BMI =     \n");printf("<input type=\"text\" name=\"ret\" value=\" \"  size=\"3\" readonly></tr>     \n");printf("</table></form></br><img src=\"../bmi_index.png\" >    \n");printf("</div></body>   </html>     \n");return 0;                       }

CGI程序的编译执行

 $gcc bmi.c -o bmi.cgi           //gcc编译器编译$cp bmi.cgi /var/www/cgi-bin/   //拷贝到boa服务器设定的cgi-bin目录//在客户端浏览器输入cgi程序地址如：10.1.1.123/cgi-bin/bmi.cgi 回车后就可看到本文最开始显示的web页面。

三、CGI程序数据处理

CGI环境变量
对于CGI程序来说，它继承了系统的环境变量。CGI环境变量在CGI程序启动时初始化，在结束时销毁。
当一个CGI程序不是被HTTP服务器调用时，它的环境变量几乎是系统环境变量的复制。当这个CGI程序被HTTP服务器调用时，它的环境变量就会多了关于HTTP服务器、客户端、CGI传输过程等项目。

CGI数据传输方式
REQUEST_METHOD：它的值一般包括两种:POST和GET，但我们写CGI程序时，最后还要考虑其他的情况。
1．POST方法
如果采用POST方法，那么客户端来的用户数据将存放在CGI进程的标准输入中，同时将用户数据的长度赋予环境变量中的CONTENT_LENGTH。
2．GET方法
在该方法下，CGI程序无法直接从服务器的标准输入中获取数据，因为服务器把它从标准输入接收到得数据编码到环境变量QUERY_STRING（或PATH_INFO）。
3．POST与GET的区别
以 GET 方式接收的数据是有长度限制，而用 POST 方式接收的数据是没有长度限制的。并且，以 GET 方式发送数据，可以通过 URL 的形式来发送，但 POST方式发送的数据必须要通过 Form 才到发送。

CGI程序实现步骤
从服务器获取数据
C语言实现代码：
POST方法
length = atoi(getenv(“CONTENT_LENGTH”));
inputstring = malloc(sizeof(char)*length + 1);
fread(inputstring, sizeof(char), length, stdin);

GET方法
inputstring = getenv(“QUERY_STRING”);

CGI程序获取数据都是连续字符串要进行解析才能得到独立数据。
getvalue.h文件中给出处理函数get_value( )

3 . cgi数据动态处理程序

在上面bmi.c基础上进行修改，首先在main函数最前面加上以下代码。

int main(){char *val_cm = NULL;char *val_kg = NULL;int cm,kg,len=0;float mm,bmi=0.0;set_env(getenv("REQUEST_METHOD"),getenv("CONTENT_LENGTH"),getenv("QUERY_STRING"));    //<input type="text" name="cm"  size="3">       val_cm = get_value("cm");   //通过变量名获取身高val_kg = get_value("kg");   //通过变量名获取体重 cm = atoi(val_cm);kg = atoi(val_kg);if(cm > 0 && kg > 0){mm = cm/100.0;bmi = (kg / (mm * mm));}
...
//这里是页面显示代码
...
}

下面输出bmi数据的html代码。

printf("<input type=\"text\" name=\"ret\" value=\" \"  size=\"3\" readonly></tr>     \n");

修改成输出计算出用户数据的代码。

if(bmi == 0.0)printf("<input type=\"text\" name=\"ret\" value=\"  \"  size=\"3\" readonly></tr>     \n");
elseprintf("<input type=\"text\" name=\"ret\" value=\" %4.2f  \"  size=\"3\" readonly></tr>     \n",bmi);

编译后copy到cgi-bin目录，现在用户在浏览器就可以输入数据提交后，服务器计算结果显示。

如果浏览器出现502错误，说明 cgi程序运行有问题。可以在终端下运行调试。