Dynamic AutoIt web pages

[shanet]

AutoIt users,

Have you ever wondered how sites like Google, Facebook and Twitter work? How they can constantly change their content, while your humble HTML files dont do the same?

This is because while an HTML file is static, these companies are using a dynamic language to pre-compute their pages. There are many different languages out there, such as PHP, ASP, ColdFusion, JSP... The list goes on. And I am sure some of you want to create a simple web page without having the hassle of learning a new language. Well guess what, you can make your own dynamic web pages with AutoIt!

Do not get your hopes up - it will never be as powerful or fast as a fully blown web language such as PHP - simply because it is AutoIt. But your learning in AutoIt can be used in other langauges - such as C++! You can also create pages in C++ as long as output is pretty much the same, and no-one will know the difference, however that is a different story.

To start off, you will need a web server.

Head over to apachefriends.org and download a copy of XAMPP for windows. Install.

The great thing about XAMPP is that it is made for a development environment and requires near no configuration, trust me - that is a good thing.

Once you have installed XAMPP, use the control panel provided to start the Apache server. You are now running a web server on your computer, accessible via http://localhost/! Navigation to this page will automatically re-direct you to play with XAMPP settings. We are not covering that.

Once you have started Apache, open SCITE, or your favourite text editor - even Notepad will do.

We are going to create a simple two line program.

Observe:

ConsoleWrite("Content-type: text/plain" & @CRLF & @CRLF) ; This is a crucial element. This tells the web server what type of page we are sending. This says that the following will be in raw text.
; ==IMPORTANT POINT== The Content-type: xxx line MUST be followed by exactly two or more empty lines before output. Output continues after two lines and any lines after are output.
ConsoleWrite("Hello AutoIt world!") ; We are now outputting Hello AutoIt World!

That is it! Now we must compile it.

Compile it as a CUI (NOT GUI.EXE) program without UPX. Preferably as an x86 program however this is simply in case you wish to move it between different architectures. Feel free to compile it as x64. Lastly, it MUST be compiled as an .exe file.

Once that is done, you must rename it (yes rename, trust me) from x.exe to x.cgi (yes, simply change the .exe to .cgi it will work if you have done it correctly) and place it in the XAMPP root /cgi-bin folder. For most this should be c:\xampp\cgi-bin\

Then, access it via localhost/cgi-bin/x.cgi in your browser of choice, where x is the appropriate file name.

Congrats! You just created a 'dynamic' web page! At the moment, this is not really dynamic as the content served will always say 'Hello AutoIt world!'. You can change that...

On the line where you write 'Hello AutoIt world!' to the console, change the text to send out a random number, then compile it and upload it to the server. You should be presented with a new number each time. If you are not, and the previous script DID work, you may have a caching issue, clear your browsers cache and re-try. However I do not expect this to happen.

The reason this works is because you are using the 'ConsoleWrite' function to send the data. ConsoleWrite outputs data to the STDOUT stream, which is that required for CGI scripts to work.

Now just to show you the equivalent in C++...

#include <iostream>
using namespace std;

int main() {
cout << "Content-type: text/plain" << endl << endl;
cout << "Hello AutoIt World!";
return 0;
}

Aren't you glad you know AutoIt? (I do not expect most of you to understand it - isn't it way more complex than AutoIt?)

After a while, it will become more practical, as you require Line feeds and horizontal tabs - but that is a completely different story.

For those wishing to create full on HTML web pages, the above is not enough. The above will be sent as plain text. If you wish to create HTML pages, it must be sent as HTML text rather than plain text. How do we achieve this?

Change Content-type to text/html. Output the HTML like you would with the plain text, with ConsoleWrite.

ConsoleWrite("Content-type:text/html" & @CRLF & @CRLF)      ; Output to STDOUT - required stream to output to CGI
ConsoleWrite("<html>" & @CRLF & @TAB & "<head>" & @CRLF & @TAB & @TAB & "<title>Hello AutoIt world!</title>" & @CRLF) ; Begin HTML output
ConsoleWrite(@TAB & "</head>" & @CRLF & @TAB & "<body>" & @CRLF & @TAB & @TAB & "Hello AutoIt world!" & @CRLF & @TAB) ; Continue HTML output
ConsoleWrite("</body>" & @CRLF & "</html>")                 ; This will be the end of our page

As you can see, there is extensive use of @CRLF and @TAB, this is one of the areas in which C++ is easier. C++ would use \n and \t respectively, and it would actually be part of the text rather than having to break and concatonate. ie:

@TAB & "Hello World" & @CRLF

is the same as

"\tHello World\n";

Anyway, that wraps up the tutorial, I hope you all enjoyed it! To have a quick look at an already compiled cgi program + source code, download here: cgi_autoit.zip.

For anyone who really takes to web design, I suggest you learn a proper web language, however this will get the fundamentals going for really intensive web programming with C/C++, Python, Perl and other languages I am yet to find out about...

I hope you enjoyed the tutorial, I may do another depending on how this goes and as long as I am not told off for it!

Shane Thompson

PS:

I hope I dont get told off for this... it is AutoIt after all

A callout to Donald8282: I promised you I would do the tutorial

Edited August 19, 2011 by shanet

[shanet]

For those interested in extending this knowledge, you can use different content-types for different files. MIME-types are used to declare the kind of content. A suitable list can be found here.

Along with this UDF, you can create a Data driven website:

I can not vouche for the quality of this UDF but it looks good

Happy scripting

Edited August 19, 2011 by shanet

[kaotkbliss]

Awsome Shanet, thanks!

As you said, while it may not be as powerful as other programs, to know the option it there and be able to play around with it is really cool

[shanet]

No worries

There is another project that SmOke_N pointed me to -

However this is a very different project. The thing about this is that you dont need to use another project, you can use raw AutoIt. Furthermore, if you should choose to go on like I stated above to another language (such as Perl, Python, C++) you still output the same text, so using the features of a language you already know to get the basic concepts is a great idea, in my opinion. I plan on doing something similar to the 'Welcome to AutoIt 1-2-3' project to introduce people to this if enough people show interest

[xtehbx]

shanet, cool solution !!

But can you explain how work with POST and GET data ??

[Fire]

Awesome! Thank you shanet.

[shanet]

xtehbx: POST data is retrieved through standard input, and GET data through the environmental variable 'QUERY_STRING'. I have been working on a UDF to get this data and to assign it to variables and it is almost finished.

Fire: You are most certainly welcome

[AdmiralAlkex]

Isn't the overhead of starting/exiting processes going to be bad? AutoIt isn't fast either so it's a double whammy. An example of FastCGI would be awesomer.

[shanet]

AdmiralAlkex: The overhead is not the concern here, this was simply another example of what AutoIt can do.

[RichardL]

I really enjoyed reading this, I've only ever made one or two very simple web-pages, but I can see a few applications for this. Most of your arguments about AutoIt not being best for this refer to using @CRLF etc. It all gets much cleaner if you use StringFormat.

Richard.

[xtehbx]

xtehbx: POST data is retrieved through standard input, and GET data through the environmental variable 'QUERY_STRING'. I have been working on a UDF to get this data and to assign it to variables and it is almost finished.

Great news!! GET\POST\Coockie and we can start making CMS

[joseLB]

Hi Shanet

There is a way to do same thing using IIS instead of Apache, CGI, etc.?

The point is that I have IIS working and would love to use Au3 do some little  scripts, to get some forms contents (gets, posts, etc.)

By the way, what´s  compiltion  to CUI? What´s diference for plain .exe?

Thanks

Jose

Edited June 2, 2013 by joseLB