Connecting to browsers online Tutorial - Revision history

Laura at 21:09, 15 July 2013

2013-07-15T21:09:19Z

← Older revision		Revision as of 21:09, 15 July 2013
Line 115:		Line 115:
	Next: [[Using Lexi and MyEditBR Tutorial]]<br>		Next: [[Using Lexi and MyEditBR Tutorial]]<br>
	Back: [[Tutorial 2\|Table of Contents]]		Back: [[Tutorial 2\|Table of Contents]]
			</noinclude>

			<noinclude>
			[[Category:Tutorial]]
	</noinclude>		</noinclude>

Laura at 15:47, 11 July 2013

2013-07-11T15:47:54Z

← Older revision		Revision as of 15:47, 11 July 2013
Line 112:		Line 112:
	To test your results, you may want to create a short program that will print the contents of the file where these values are stored.		To test your results, you may want to create a short program that will print the contents of the file where these values are stored.

	[[Tutorial 2\|Table of Contents]]		<noinclude>
			Next: [[Using Lexi and MyEditBR Tutorial]]<br>
			Back: [[Tutorial 2\|Table of Contents]]
			</noinclude>

Laura: /* Test */

2013-07-11T15:16:08Z

Test

← Older revision		Revision as of 15:16, 11 July 2013
Line 111:		Line 111:
	===Test===		===Test===
	To test your results, you may want to create a short program that will print the contents of the file where these values are stored.		To test your results, you may want to create a short program that will print the contents of the file where these values are stored.

			[[Tutorial 2\|Table of Contents]]

Laura: /* Step 2 */

2013-07-11T15:15:46Z

Step 2

← Older revision		Revision as of 15:15, 11 July 2013
Line 15:		Line 15:
	===Step 2===		===Step 2===
	Create a simple webpage using html. This can be done in any text editor and should be saved in the www folder under the title index.html for the Webserver to access. Any pictures or css files that are used in your webpage should also be in this folder. If you are unfamiliar with the basics of HTML, tutorials are available online, for example at www.w3schools.org. For the purposes of this tutorial, you may want to just borrow from the sample available on the		Create a simple webpage using html. This can be done in any text editor and should be saved in the www folder under the title index.html for the Webserver to access. Any pictures or css files that are used in your webpage should also be in this folder. If you are unfamiliar with the basics of HTML, tutorials are available online, for example at www.w3schools.org. For the purposes of this tutorial, you may want to just borrow from the sample available on the
	[[Solutions 2#10.3 Sample webpage\|solutions]]~~solutions~~ page.		[[Solutions 2#10.3 Sample webpage\|solutions]] page.

	Basically, you will need to create a portion of the webpage with a form for input.		Basically, you will need to create a portion of the webpage with a form for input.

Laura: /* Step 2 */

2013-07-11T15:15:35Z

Step 2

← Older revision		Revision as of 15:15, 11 July 2013
Line 14:		Line 14:

	===Step 2===		===Step 2===
	Create a simple webpage using html. This can be done in any text editor and should be saved in the www folder under the title index.html for the Webserver to access. Any pictures or css files that are used in your webpage should also be in this folder. If you are unfamiliar with the basics of HTML, tutorials are available online, for example at www.w3schools.org. For the purposes of this tutorial, you may want to just borrow from the sample available on the solutions page.		Create a simple webpage using html. This can be done in any text editor and should be saved in the www folder under the title index.html for the Webserver to access. Any pictures or css files that are used in your webpage should also be in this folder. If you are unfamiliar with the basics of HTML, tutorials are available online, for example at www.w3schools.org. For the purposes of this tutorial, you may want to just borrow from the sample available on the
			[[Solutions 2#10.3 Sample webpage\|solutions]]solutions page.

	Basically, you will need to create a portion of the webpage with a form for input.		Basically, you will need to create a portion of the webpage with a form for input.

Laura: /* Step 3 */

2013-07-11T15:13:55Z

Step 3

← Older revision		Revision as of 15:13, 11 July 2013
Line 41:		Line 41:
	Lastly, this line in your index.html will reference the BR function entitled ThankYouPage, which provides them with a confirmation that their input was received:		Lastly, this line in your index.html will reference the BR function entitled ThankYouPage, which provides them with a confirmation that their input was received:

	<nowiki>		<nowiki>
	<p><a href="?BR_FUNC=fnthankyoupage"</a>Click to go to the page named ThankYouPage</p>		<p><a href="?BR_FUNC=fnthankyoupage"</a>Click to go to the page named ThankYouPage</p>
	</nowiki>		</nowiki>

	A second way to do all this is entirely from your BR program using the function fnHTML (and others) to write the html to your webpage. The final portion of our sample page demonstrates this.		A second way to do all this is entirely from your BR program using the function fnHTML (and others) to write the html to your webpage. The final portion of our sample page demonstrates this.

Laura: /* Step 2 */

2013-07-11T15:13:41Z

Step 2

← Older revision		Revision as of 15:13, 11 July 2013
Line 30:		Line 30:
	Each line of your form will require something like this line, which demonstrates how to set variables from your index to describe the data a user will enter:		Each line of your form will require something like this line, which demonstrates how to set variables from your index to describe the data a user will enter:

	<input type="text" value="name" name="namefield" cols="20"~~> <br~~>		<input type="text" value="name" name="namefield" cols="20">

	In this case it allows text input. value=”name” is the text that will be in the field waiting until the user inputs something else. name=“namefield” provides the variable name, which can be referenced in your BR program. Cols and rows can be set to determine the size of the text box.		In this case it allows text input. value=”name” is the text that will be in the field waiting until the user inputs something else. name=“namefield” provides the variable name, which can be referenced in your BR program. Cols and rows can be set to determine the size of the text box.

Laura: /* Step 2 */

2013-07-11T15:13:24Z

Step 2

← Older revision		Revision as of 15:13, 11 July 2013
Line 20:		Line 20:
	In order to receive the input from the user via a form on the webpage to your BR program, you will need a line like this to run the function:		In order to receive the input from the user via a form on the webpage to your BR program, you will need a line like this to run the function:

	<form action="?BR_FUNC=fnTravelSurvey" method="get">		<form action="?BR_FUNC=fnTravelSurvey" method="get">

	....		....

	</form>		</form>

	The question mark is required. BR_FUNC communicates with the BR server. The fnTravelSurvey is the name of the function and the method can be “get” or “post”. When input from a webform is sent, it can be done two ways: POST is more secure, and GET is the default, and is less secure because the input shows up in the address like this: %YES%. </form> must be placed at the end of your form to close it.		The question mark is required. BR_FUNC communicates with the BR server. The fnTravelSurvey is the name of the function and the method can be “get” or “post”. When input from a webform is sent, it can be done two ways: POST is more secure, and GET is the default, and is less secure because the input shows up in the address like this: %YES%. </form> must be placed at the end of your form to close it.
Line 30:		Line 30:
	Each line of your form will require something like this line, which demonstrates how to set variables from your index to describe the data a user will enter:		Each line of your form will require something like this line, which demonstrates how to set variables from your index to describe the data a user will enter:

	<input type="text" value="name" name="namefield" cols="20"> <br>		<input type="text" value="name" name="namefield" cols="20"> <br>

	In this case it allows text input. value=”name” is the text that will be in the field waiting until the user inputs something else. name=“namefield” provides the variable name, which can be referenced in your BR program. Cols and rows can be set to determine the size of the text box.		In this case it allows text input. value=”name” is the text that will be in the field waiting until the user inputs something else. name=“namefield” provides the variable name, which can be referenced in your BR program. Cols and rows can be set to determine the size of the text box.
Line 36:		Line 36:
	Your HTML must also have a submit line like this, which will provide a button called 'Click to Record' to send the information to your BR program:		Your HTML must also have a submit line like this, which will provide a button called 'Click to Record' to send the information to your BR program:

	<input type="submit" value="Click to Record">		<input type="submit" value="Click to Record">

	===Step 3===		===Step 3===

Laura: /* Step 5 */

2013-07-11T15:13:00Z

Step 5

← Older revision		Revision as of 15:13, 11 July 2013
Line 101:		Line 101:
	Edit the .ini file to resemble this, where Websample.br is the name of your program, and fnfirstpage and fntheysavedit are the functions called from your HTML text page:		Edit the .ini file to resemble this, where Websample.br is the name of your program, and fnfirstpage and fntheysavedit are the functions called from your HTML text page:

	url_base=www		url_base=www
	logfile=weblog.txt		logfile=weblog.txt
	debugfile=webdebug.txt		debugfile=webdebug.txt
	library=websample.br,functions=fnfirstpage,fntheysavedit		library=websample.br,functions=fnfirstpage,fntheysavedit

	Next, run the webserver. Open your web browser and put LOCALHOST in the address bar. Your webpage should appear and run perfectly. If errors occur, the webserver program will beep and show you the error number and line number.		Next, run the webserver. Open your web browser and put LOCALHOST in the address bar. Your webpage should appear and run perfectly. If errors occur, the webserver program will beep and show you the error number and line number.

	===Test===		===Test===
	To test your results, you may want to create a short program that will print the contents of the file where these values are stored.		To test your results, you may want to create a short program that will print the contents of the file where these values are stored.

Laura: /* Step 4 */

2013-07-11T15:12:41Z

Step 4

← Older revision		Revision as of 15:12, 11 July 2013
Line 87:		Line 87:

	<nowiki> library "webform":fnhtml,fnHeading,fnfooter,fnsend</nowiki>		<nowiki> library "webform":fnhtml,fnHeading,fnfooter,fnsend</nowiki>

	<nowiki> let fnHeading("Thank You")</nowiki>		<nowiki> let fnHeading("Thank You")</nowiki>
	<nowiki> let fnHTML("<h1>Thank You</h1>")</nowiki>		<nowiki> let fnHTML("<h1>Thank You</h1>")</nowiki>