tag:blogger.com,1999:blog-11510132401593880232023-11-16T14:31:36.789+08:00JQuery-CoderJQuery Coder will be teaching more about the best ways of coding in JQuery.rpillerinhttp://www.blogger.com/profile/08331441229966107004noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-1151013240159388023.post-68142170217695434042010-12-17T08:18:00.001+08:002010-12-17T08:35:27.738+08:00Task for Today - December 17, 2010 @ 8:29 AMDeadline - December 18, 2010<br />
1. Check Stock Information on Web - Priority 1<br />
2. Import/Export - ByPass some information during export/import - Priority 2<br />
3. Import PO - automate the adding of new stock (transfer to vb.net) - Priority 4<br />
4. Fixing z-reading (Eliminate GC in z-read and put identification in invoice record) - Priority 3<br />
5. Credit Voucher or whatever - Priority 5<br />
<br />
Web Development<br />
1. Multi-level Networking Website - Functionalityrpillerinhttp://www.blogger.com/profile/08331441229966107004noreply@blogger.com0tag:blogger.com,1999:blog-1151013240159388023.post-10957272185818931602010-05-09T22:34:00.001+08:002010-05-23T17:28:06.709+08:00Ajax Shorthand in JQuery<div class="MsoNormal"><span style="font-family: Calibri;"><o:p> Welcome again to JQuery Coder and this time I will be teaching you how to setup <st1:place w:st="on"><st1:city w:st="on">ajax</st1:city></st1:place> in JQuery.</o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;"><iframe align="left" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?t=jquecode-20&o=1&p=8&l=bpl&asins=B002EXBER4&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="align: left; height: 245px; padding-right: 10px; padding-top: 5px; width: 131px;"></iframe>One of the most commonly used technologies nowadays is <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city>. Most of the websites around the world are using <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> as the foundation of processing information from the client to the server and back to the client. By the way, <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> stands for Asynchronous Javascript and XML. During the time JQuery is not around, we uses the javascript to create the process of <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> using HTTP Object. But, as JQuery arrive in the internet and being used by most of the programmer nowadays. <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> is now easy to implement and manipulate. Let’s take a look some example that I’m going to create in order to have <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> in our web pages.<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;">First, we need to know the basic concept of <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city>. <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> is the process of requesting information from the server and transfers it using XML but we can use also script or text for transferring information. We need also to know the basic part of the <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city>.<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><ol start="1" style="margin-top: 0in;" type="1"><li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list .5in;"><span style="font-family: Calibri;">Type – it will be the type of request that it will used during form submission (like POST or GET).<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list .5in;"><span style="font-family: Calibri;">url – it will be the url path in which where the server script reside.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list .5in;"><span style="font-family: Calibri;">data – it will be the data to be submitted in the server for request.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l1 level1 lfo1; tab-stops: list .5in;"><span style="font-family: Calibri;">dataType – This will be what type of data should be transfer once it will be requested.<o:p></o:p></span></li>
</ol><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;">The next one will be the state of the <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> and these are the common state:<o:p></o:p></span></div><ol start="1" style="margin-top: 0in;" type="1"><li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list .5in;"><span style="font-family: Calibri;">beforeSend – you can anything here while the <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> is going to send the data.<o:p></o:p></span></li>
<li class="MsoNormal" style="mso-list: l0 level1 lfo2; tab-stops: list .5in;"><span style="font-family: Calibri;">success – the <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> is already done the process and sent back the information to the client.<o:p></o:p></span></li>
</ol><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;">For our first example, we are going to use text dataType:<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;"><b>Php files – We need this server side script for the request.</b><o:p></o:p></span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: Calibri;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Calibri;">echo “Hello World!” . $_POST[‘name’];</span></div><div class="MsoNormal"><br />
<b>HTML Tags</b><br />
<br />
<form type="POST"><br />
<input id="txtName" type="text" value="" /><br />
<input id="btnSubmit" type="button" value="submit" /></form><br />
<br />
</div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: Calibri;"><b>JQuery Script</b></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;">$(document).ready(function(){<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> $(‘#btnSubmit’).live(“click”, function(){<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> $.ajax({<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> Type: “POST”,<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> url: [path of the php file],<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> data: “name=”+$(‘#txtName’).attr(“value”)+””,<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> dataType: “text”,<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> beforeSend: function(){<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;"> alert(“Loading….”);<o:p></o:p></span></div><div class="MsoNormal" style="margin-left: 1.0in; text-indent: .5in;"><span style="font-family: Calibri;">},<o:p></o:p></span></div><div class="MsoNormal" style="margin-left: 1.0in; text-indent: .5in;"><span style="font-family: Calibri;">Success: function(data){<o:p></o:p></span></div><div class="MsoNormal" style="margin-left: 1.0in; text-indent: .5in;"><span style="font-family: Calibri;"> Alert(data);<o:p></o:p></span></div><div class="MsoNormal" style="margin-left: 1.0in; text-indent: .5in;"><span style="font-family: Calibri;">}<o:p></o:p></span></div><div class="MsoNormal" style="margin-left: .5in; text-indent: .5in;"><span style="font-family: Calibri;">});<o:p></o:p></span></div><div class="MsoNormal" style="text-indent: .5in;"><span style="font-family: Calibri;">});<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Calibri;">});<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;">This is the sample code of the <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city> using JQuery and the data inside the function (which can be found in the success). Is where the information will be sent from the server-side script. In order to send you need to use echo or print to send data in the javascript using <st1:city w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:city>.<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: Calibri;">The next tutorial will be using XML as the data to be sent to the client.<o:p></o:p></span><br />
<span style="font-family: Calibri;"><iframe align="left" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?t=jquecode-20&o=1&p=8&l=bpl&asins=B002KINCSW&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="align: left; height: 245px; padding-right: 10px; padding-top: 5px; width: 131px;"></iframe></span></div>rpillerinhttp://www.blogger.com/profile/08331441229966107004noreply@blogger.com0tag:blogger.com,1999:blog-1151013240159388023.post-26447869676076199082009-12-17T09:17:00.016+08:002009-12-22T23:35:18.599+08:00Lesson 1: How JQuery Works<div align="justify"><strong><span style="font-family:verdana;"><span style="font-size:85%;">The Basics</span></span></strong></div><div align="justify"><strong><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;"></span></span></strong><span style="font-family:verdana;"><span style="font-size:85%;">Let’s get started on the basic in JQuery, but before that, we should know how to setup JQuery in our page. First, download the JQuery latest version in this website <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js">jquery1.3.2.js</a>, then save the file anywhere in your computer and name it as you like. Like for this example:</span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><img style="cursor:pointer; cursor:hand;width: 400px; height: 114px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVfx799S9-jGscNEs-zWNtWh-7MmiJRm1kHNFrX-flpljzsAdd6OfNcVzsy7FOwuNSGh4_WVILiN6lw0HDliBwQAvkwGR_z2BgAOshPlNRaCokm1y_Gn8CpJZydlEJQ3V6jGEQd8lM0w/s400/jquery-basic.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5418081150171716098" /></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;">Always remember, that we need to use the latest version of JQuery. It would be more advantageous to us if we use the latest version, considering that JQuery is not fully stable in terms of some functions that we are going to use during development. The latest version for now is jquery 1.3.2 and the version 1.4 is under development. We would expect something new will come in the version 1.4. </span></span><span style="font-family:verdana;"><span style="font-size:85%;">Now, after downloading the latest version of JQuery, the next is to attach the JQuery file in our page. Like for this example on how to attach JQuery in our page: </span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><img style="cursor:pointer; cursor:hand;width: 400px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQKDSd4nxNUtSvnXb0MbgeEt5suzRf2xtY-yGI3u2xul66Xs8umBPtS6pH2C5v6t29lxBhCigfUExT_gwU4Wh6hIUVWl0bxNO22Ii35OkklUTKHLU2b36oZ0deXhG2QSSacxzyCfGzwGM/s400/html-code.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5418079446115184626" /><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><p align="justify"><span style="font-family:verdana;"><span style="font-size:85%;">As we can see in the HTML construction, the JQuery attach next to the title tag. We put the jquery in that part because we want to follow the basic constructions in HTML Anatomy. One thing also in terms of naming the file, sometimes we are not really going to name the JQuery as jquery.js. Mostly people remain the filename as it is when they download the jquery from the site. It would also be fine, but always remember that we should also edit the src attribute according to the filename of the JQuery that we set. Also, if it happens that we put the JQuery file in an specific folder. We need to set the path of the folder where the JQuery file is placed. Like for this example of some concept of file management in our development folder:</span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></p><p align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></p><p align="justify"><img style="cursor:pointer; cursor:hand;width: 400px; height: 116px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PSlTfdAzuoiFGAVDWn9ZIkSm_uZxPESn-05xT-Vcdg5WbZQJ1PMiSuEdEJaNHYPFFOyfU0brzf2U5lxR0eT5bCydKtTuH1baFwXBpQEncoVmoKWXVs_oM3bgxQ3Oy8AjtmooB7jKEA8/s400/jquery-basic-1.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5418077729739527714" /><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></p><p align="justify"><img style="cursor:pointer; cursor:hand;width: 400px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjP6ycS_M9ELzHWJmimLzGpB7Sdb2SuXMqzSLXrmzWc0Vy5w4e9O-OqBZPAo-MLi4yNHXOsqZggRiRNHIzD26HYNf4MLWowOHWs6ghv6vrs1DDUonJzmeRJjsM5GY8BdMTBTuuf66RYIA/s400/jquery-basic-2.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5418077829534901426" /></p><p align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></p><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;">We can see how the file being arrange in our development folder. Another thing is that, we should change the src attribute value according to the path of the JQuery file. Take a look at this src construction in terms of attaching the JQuery file.</span></span><strong><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></strong></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><img style="cursor:pointer; cursor:hand;width: 400px; height: 31px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnv2fGDLlE1NbXiyaBgpGcYLvtkxe9wWgR_yL2P86pm9h-5yK3gdUXYaysHVaBChvlUrP5V4VgcaqARhr1TuEG6F2_i4I0avIHjL8FhWgxmRsG9iAsoHCLQm_GIpL-O2caJ4DK5MBkBQY/s400/script-code.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5418079931983663906" /><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><p align="justify"><strong><span style="font-family:verdana;"><span style="font-size:85%;">Conclusion</span></span></strong></p><div align="justify"><span style="font-family:verdana;"><span style="font-size:85%;">At this moment, we are able to properly attach jquery file and we considered also the filename scheme in attaching the JQuery file in our page. The last one would be the proper setting of source path of JQuery whenever we put the JQuery on a separate folder or within another sub-folder.</span></span><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;">Next Topic:</span></span><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;">- Explaining the History of JavaScript in which plays an important role in web development.</span></span><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span><span style="font-family:verdana;"><span style="font-size:85%;">- How to use JavaScript in the page that will serve as the foundation in using JQuery in our page.</span></span><span style="font-family:verdana;"><br /></span></div>rpillerinhttp://www.blogger.com/profile/08331441229966107004noreply@blogger.com0tag:blogger.com,1999:blog-1151013240159388023.post-9949854724267644562009-12-14T07:24:00.004+08:002009-12-22T23:19:12.804+08:00Welcome to JQuery-Coder.<div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;">Hello everyone!</span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;">Welcome to JQuery-Coder, this blog is going to teach you more about JQuery API and the use of those API in your website. As you can see, JQuery is one of the most widely used JavaScript Libraries in the world, because it was easy to use and implement. You can also achieve more effects and event manipulation in JQuery with less code compare to flash and other third party software that you use in your website.</span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;">Even though, this JavaScript Library is easy to used and implement. There are some aspects that will make it difficult for beginners to learn in JQuery. The proper coding structure is one of the difficulties that will be encountering especially for those beginners in JQuery.</span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;">Once we begin the tutorial you will be able to understand why it is really hard for beginners to understand the JQuery structure in coding. At the first try, you will find it simpler, but as you move forward in coding JQuery. You will be encountering some difficulties, mostly if you have lots events being used and you want to manipulate all the events as you like. This blog will be teaching how to solve those difficulties, so that you will really appreciate the JQuery and used it well in your website.</span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;"></span></span><span style="font-family:verdana;"><span style="font-size:85%;"><br /></span></span></div><div style="text-align: justify;"><span style="font-family:verdana;"><span style="font-size:85%;">Before we begin out tutorial, you need first to download the JQuery Library in this site </span></span><a href="http://jquery.com/"><span style="font-family:verdana;"><span style="font-size:85%;">jquery.com</span></span></a><span style="font-family:verdana;"><span style="font-size:85%;">.</span></span></div>rpillerinhttp://www.blogger.com/profile/08331441229966107004noreply@blogger.com0