Web Development Tutorial - Revision history

Preet: /* Hello World */

2012-11-07T20:48:05Z

‎Hello World

Preet: /* Ajax to Php Communication */

2012-11-07T20:46:21Z

‎Ajax to Php Communication

Preet at 20:44, 7 November 2012

2012-11-07T20:44:40Z

Preet: /* Debugging in Firebug */

2012-11-06T23:45:44Z

‎Debugging in Firebug

Preet: /* Resources Required */

2012-11-06T23:40:22Z

‎Resources Required

Preet at 05:25, 1 November 2012

2012-11-01T05:25:57Z

Preet: /* Interpret the Data in Javascript */

2012-11-01T05:25:29Z

‎Interpret the Data in Javascript

Preet: /* Modify Title Menu */

2012-11-01T05:19:58Z

‎Modify Title Menu

Preet at 05:16, 1 November 2012

2012-11-01T05:16:27Z

Preet at 05:12, 1 November 2012

2012-11-01T05:12:10Z

@@ Line 30: / Line 30: @@
 == Hello World ==
-The first thing you want to do is setup your LAMP or get the web server up and running.  Then, deploy the WDP package into your web server directory and make sure you get get to the website to begin with.  If you did everything correctly, you'll see the following if you browse to http://localhost :
+The first thing you want to do is setup your LAMP or get the web server up and running.  Then, deploy the WDP package into your web server directory and make sure you get to the website to begin with.  If you did everything correctly, you'll see the following if you browse to http://localhost :
 [[File:webtutorial_helloworld.png|center|frame|WDP Page]]

@@ Line 138: / Line 138: @@
 [[File:webtutorial_ajax_output.png|center|frame|WDP Data displayed]]
 == Ajax to Php Communication ==
 This section details the communication between Ajax to Php.  Let's start with an example that sends several variables to PHP using '''<code>sendAjaxRequest</code>'''
@@ Line 156: / Line 157: @@
 <BR/>
 Things to note :
-*  The second parameter to '''<code>sendAjaxRequest()</code>''' is to send POST variables to PHP.  This uses the syntax of "name=value" pairs separated by '&' symbol.  On the Php side, here is how you obtain these POST variables :
+*  The second parameter to '''<code>sendAjaxRequest()</code>''' is to send POST variables to PHP.  This uses the syntax of "name=value" pairs separated by '&' symbol.
 <syntaxhighlight lang="php">
 else if($javascriptReqType == "register")
@@ Line 165: / Line 169: @@
+}
 </syntaxhighlight>
 Things to note :
 *  The first variable to '''<code>sendAjaxRequest()</code>''' is stored at '''<code>$javascriptReqType</code>'''.

← Older revision		Revision as of 20:44, 7 November 2012
Line 137:		Line 137:

	[[File:webtutorial_ajax_output.png\|center\|frame\|WDP Data displayed]]		[[File:webtutorial_ajax_output.png\|center\|frame\|WDP Data displayed]]
		+
		+	== Ajax to Php Communication ==
		+	This section details the communication between Ajax to Php. Let's start with an example that sends several variables to PHP using '''<code>sendAjaxRequest</code>'''
		+	<syntaxhighlight lang="javascript">
		+	function myMenuHandler()
		+	{
		+	var param1 = "name=preet";
		+	var param2 = "email=foo@gmail.com";
		+	var phpVars = param1 + "&" + param2;
		+
		+	sendAjaxRequest("register", phpVars,
		+	function(response) {
		+
		+	}
		+	);
		+	}
		+	</syntaxhighlight>
		+	<BR/>
		+	Things to note :
		+	* The second parameter to '''<code>sendAjaxRequest()</code>''' is to send POST variables to PHP. This uses the syntax of "name=value" pairs separated by '&' symbol. On the Php side, here is how you obtain these POST variables :
		+	<syntaxhighlight lang="php">
		+	else if($javascriptReqType == "register")
		+	{
		+	$name = $_POST['name'];
		+	$email = $_POST['email'];
		+	$response = array('ok' => true, 'msg' => "OK");
		+	}
		+	</syntaxhighlight>
		+	Things to note :
		+	* The first variable to '''<code>sendAjaxRequest()</code>''' is stored at '''<code>$javascriptReqType</code>'''.
		+	* Any variables from Javascript can be read from '''<code>$_POST['<name>']</code>''' where the name is what you chose in the "name=value" pair in Javascript.
		+	* Any member of '''<code>$response</code>''' can be read by the dot operator inside the function you declared at '''<code>sendAjaxRequest()</code>'''

	== Firebug ==		== Firebug ==

@@ Line 144: / Line 144: @@
 === Debugging in Firebug ===
-You can use Firebug to debug.  Any javascript errors will be displayed in the '''console''' and you can do some PHP debugging because any PHP echo can also be seen in Firebug.  Furthermore you can also set break-points in your javascript code.  I'll let you figure out how to do this be simply playing around :)
+You can use Firebug to debug.  Any javascript errors will be displayed in the '''console''' and you can do some PHP debugging because any PHP echo can also be seen in Firebug.  Furthermore you can also set break-points in your javascript code.  I'll let you figure out how to do this by simply playing around :)
 == Bootstrap GUI ==
 Bootstrap provides a really nice GUI for webpages.  To efficiently use it, just browse around at the [http://twitter.github.com/bootstrap/components.html Bootstrap] website and look at all the possible GUI elements you can use.  Once you find something that you want to use, simply copy the HTML code on their website and put it into yours!

@@ Line 7: / Line 7: @@
 *:  LAMP stands for '''L'''inux '''A'''pache '''M'''ySQL and '''P'''HP.
 *:  These are essential ingredients of any website.
-*  HTML syntax
+*  Knowledge HTML syntax
 *:  Javascript and PHP syntax will also be useful to know
 *:  If you know C/C++, you can easily learn PHP and Javascript "on-the-fly" :)

← Older revision		Revision as of 05:25, 1 November 2012
Line 1:		Line 1:
−	~~<font color="red">This article is under construction</font><BR/>~~
−
	As more and more devices begin to be connected to the Internet, the need for a web interface surfaces. This tutorial guides you through a web-development lesson. Please be advised that I (Preet) am not a web developer by profession, so this probably shouldn't be a basis of a professional website. On the other hand, this can serve as a to-the-point lesson on how to development a website in minutes while using the latest and greatest tools such as AJAX and Jquery.		As more and more devices begin to be connected to the Internet, the need for a web interface surfaces. This tutorial guides you through a web-development lesson. Please be advised that I (Preet) am not a web developer by profession, so this probably shouldn't be a basis of a professional website. On the other hand, this can serve as a to-the-point lesson on how to development a website in minutes while using the latest and greatest tools such as AJAX and Jquery.

@@ Line 115: / Line 115: @@
      sendAjaxRequest("getIntegers", "",
                       function(response) {
                           var html = '<table class="table table-striped"></tr>';
                           for(var i=0; i<response.integers.length; i++) {
                               html += '<td>' + response.integers[i] + '</td>';
+                          }
                           html += '</tr></table>';

← Older revision		Revision as of 05:19, 1 November 2012
Line 63:		Line 63:
	* We simply use some HTML to display		* We simply use some HTML to display

		+	==== Fire it up! ====
		+	After you save '''sitelib.php''' and '''jsphp.js''', hit Ctrl+F5 to refresh the page and click on '''My Menu''' to have it display the message from within '''myMenuHandler()'''

	=== Client-Server Interaction ===		=== Client-Server Interaction ===

← Older revision		Revision as of 05:16, 1 November 2012
Line 136:		Line 136:
	[[File:webtutorial_firebug_post.png\|center\|frame\|WDP Firebug POST]]		[[File:webtutorial_firebug_post.png\|center\|frame\|WDP Firebug POST]]
	[[File:webtutorial_firebug_resp.png\|center\|frame\|WDP Firebug Response]]		[[File:webtutorial_firebug_resp.png\|center\|frame\|WDP Firebug Response]]
		+
		+	=== Debugging in Firebug ===
		+	You can use Firebug to debug. Any javascript errors will be displayed in the '''console''' and you can do some PHP debugging because any PHP echo can also be seen in Firebug. Furthermore you can also set break-points in your javascript code. I'll let you figure out how to do this be simply playing around :)
		+
		+	== Bootstrap GUI ==
		+	Bootstrap provides a really nice GUI for webpages. To efficiently use it, just browse around at the [http://twitter.github.com/bootstrap/components.html Bootstrap] website and look at all the possible GUI elements you can use. Once you find something that you want to use, simply copy the HTML code on their website and put it into yours!

@@ Line 9: / Line 9: @@
 *:  LAMP stands for '''L'''inux '''A'''pache '''M'''ySQL and '''P'''HP.
 *:  These are essential ingredients of any website.
-*  Experience with C.
+*  HTML syntax
-*:  C is all you'll need and you'll learn PHP and Javascript "on-the-fly" :)
+*:  Javascript and PHP syntax will also be useful to know
 *  Firefox
 *:  Also install "FireBug" (again, google it up!)