tag:blogger.com,1999:blog-4128019180924069142024-02-05T02:27:14.202-08:00web.devmehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-412801918092406914.post-61140752904888116722015-04-28T14:04:00.002-07:002015-04-28T15:26:04.195-07:00Site Performance: CDN vs Local HostingIn a few posts here, we will explore how to improve the site performance and scale.<br />
<div>
<br /></div>
<div>
To begin with one of the easiest performance boost to <b>page loads</b> is to source your standard libraries from CDN whenever possible instead of sourcing them from your server.<br />
<br />
<b>WHAT</b><br />
A CDN, <i>Content Delivery Network, </i>is a set of servers spread across the globe that host content and have an optimized algorithm to serve the content efficiently. So most of your standard libraries like jQuery should be loaded from CDN.<br />
<br />
<b>WHY</b><br />
<div>
The advantages of using CDN for your standard scripts are:</div>
<div>
<ol>
<li><b>Better Caching: </b>No matter how optimized your site is, the user will have to download the library once at least. But, if you use a popular CDN, and if your user has already visited another site that referenced the same library, the library has already been downloaded into the browser's cache. So it will not be downloaded again. This creates a cool cross-site caching effect. </li>
<li><b>Lower Load and More Parallelizing: </b>Browsers typically limit number of simultaneous connections from one server. Loading libraries from a CDN server means one less connection to your server for that library. This translated to lower loads to your server, but more importantly, it also frees up the connections that this library load would have used to loading your actual content.</li>
<li><b>Decreased Latency:</b> CDNs are typically optimized to serve content efficiently based on location. Meaning that the content will be served from the CDN server that can serve it the fastest. You will have to invest fairly well in infra to achieve that kind of optimization.</li>
</ol>
<div>
<b>WHICH</b></div>
<div>
The main CDN providers are <a href="https://cdnjs.com/">cdnjs</a> and <a href="https://developers.google.com/speed/libraries/">Google CDN</a>, along with <a href="http://www.asp.net/ajax/cdn">Microsoft for ASP</a>. Google CDN is the <a href="http://w3techs.com/technologies/comparison/cd-cdnjs,cd-googlelibraries,cd-microsoftajax">most widely deployed</a>. However, cdnjs has some libraries that Google does not provide. </div>
<div>
<br />
<b>HOW</b><br />
Using CDN is simple. Just direct your script statement to load from Google instead of loading from your server copy.</div>
</div>
<div>
<br /></div>
<pre class="javascript" name="code"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
</pre>
<br />
Notice that we use <tt>https</tt>. Many CDNS also accept just <tt>//</tt> and then translate that to <tt>http</tt> or <tt>https</tt> depending on what your site uses. However, by using <tt>https</tt>, you can ensure that no one can get in between you and Google and tamper the libraries. So even if your site is un-encrypted http, use <tt>https</tt> while loading the CDN libraries.<br />
<br />
And finally, you may yet want the browser to go to your local server copy in case your CDN is unavailable. While chances of CDNs being unavailable are low, you may hit unfortunate events like library moving behind a paywall, changing its URL location, and such. So it is prudent to have a fallback. To do that just <a href="http://programmers.stackexchange.com/questions/139372/referencing-external-javascript-vs-hosting-my-own-copy">add a check</a> to see if the library was loaded, and if not, load yours.<br />
<br />
<pre class="javascript" name="code"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script>
if (!window.jQuery)
document.write('<script src="/path/to/local/jqueryui/1.8.18/jquery-ui.min.js"><\/script>');
</script>
</pre>
</div>
<div>
<br />
Make sure you don't write <tt></script> </tt>anywhere within the <tt><script></tt> element as it will close the HTML and cause the script to fail. So notice that we escaped it using a backslash <tt><\/script> </tt>in the closing script element of the <tt>documentWrite</tt>. </div>
<br />
<br />
<br />
<div>
</div>
mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com6tag:blogger.com,1999:blog-412801918092406914.post-86924336392545489632015-03-26T23:33:00.000-07:002015-04-01T09:05:58.637-07:00Some Useful Web Development Tools<span style="font-family: inherit;">In course of working and learning, we all discover some useful tools that just make life easier. </span><span style="font-family: inherit;">But the net is a big place. And usual venues of information sharing - meeting at conferences and swapping tidbits doesn't happen all the time. So am trying to write down a list of webdev tools, and other general tools that I found useful.</span><br />
<div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">There is a lot of choice out there for most tools. So I have included the one we use, and a few others that we evaluated. To begin with,</span><br />
<span style="font-family: inherit;"><br /></span></div>
<div>
<div style="color: #222222; line-height: 22.8571434020996px;">
<span style="font-family: inherit; font-style: inherit; font-weight: 600; line-height: 1.42857142857143em;">General Resources</span></div>
<ul style="color: #222222; line-height: 22.8571434020996px;">
<li><a href="http://themeforest.net/" style="font-family: inherit; font-style: inherit; line-height: 1.42857142857143em;">ThemeForest</a><span style="font-family: inherit; font-style: inherit; line-height: 1.42857142857143em;">: HTML CSS Templates. We use Metronic. But they have many more to suit your style and needs.</span></li>
<li><a href="http://fortawesome.github.io/Font-Awesome/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Font Awesome</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Nifty icons that work just like fonts</span></li>
<li><a href="http://www.stackoverflow.com/" style="font-family: inherit; line-height: 1.42857142857143em;">StackOverflow</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Ask and answer your programming questions</span></li>
<li><a href="http://jsfiddle.net/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">JSFiddle</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Scratchpad to test drive your HTML, Javascript, CSS.</span></li>
<li><a href="https://app.asana.com/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Asana</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Work management tools. We eventually didn't use this much</span></li>
<li><a href="http://github.com/" style="font-family: inherit; line-height: 1.42857142857143em;">GitHub</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Code repositories</span></li>
<li><a href="https://bitbucket.org/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">BitBucket</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Another code repo. Take your pick.</span></li>
<li><a href="http://tinypng.com/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">TinyPNG</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Compress images</span></li>
<li><a href="https://www.ssllabs.com/ssltest/" style="color: #0079d3; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Qualy SSL Server Test</a></li>
<li><a href="https://mailtrap.io/" style="color: #0079d3; font-family: inherit; font-style: inherit; line-height: 20px; margin-left: 0px; margin-right: 0px; text-decoration: none;">Mailtrap</a><span style="font-family: inherit; font-style: inherit; line-height: 20px;">: SMTP server testing</span></li>
<li><a href="http://coffeescript.org/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">CoffeeScript</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Write pythonic javascript</span></li>
</ul>
<span style="color: #222222; font-family: inherit; font-style: inherit; font-weight: 600; line-height: 20px;">Web Frameworks</span></div>
<div>
<ul>
<li><a href="https://www.djangoproject.com/" style="color: #0079d3; font-family: inherit; line-height: 20px; margin-left: 0px; margin-right: 0px; text-decoration: none;">Django</a><span style="font-family: inherit;">: This is probably redundant here, given that we have been talking of Django all the time. Basically, Python based web framework.</span></li>
<li><a href="http://rubyonrails.org/" style="color: #0079d3; font-family: inherit; line-height: 20px; margin-left: 0px; margin-right: 0px; text-decoration: none;">Ruby on Rails</a><span style="color: #222222; font-family: inherit;"><span style="background-color: white; line-height: 20px;">, </span></span></li>
<li><a href="http://www.asp.net/" style="color: #0079d3; font-family: inherit; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;">ASP.NET</a></li>
</ul>
</div>
<div>
<span style="background-color: white; color: #222222; font-family: inherit; font-style: inherit; font-weight: 600; line-height: 1.42857142857143em;">CSS Frameworks</span><br />
<ul>
<li><a href="http://getbootstrap.com/" style="background-color: white; color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Bootstrap</a><span style="background-color: white; color: #222222; font-family: inherit; line-height: 1.42857142857143em;">: Makes building responsive frontend UI a charm. Well designed and defined css snippets for frequently used web elements.</span></li>
<li><a href="http://foundation.zurb.com/" style="background-color: white; color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Foundation</a></li>
<li><a href="https://html5boilerplate.com/" style="background-color: white; color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">HTML5 Boilerplate</a></li>
</ul>
<span style="background-color: white; color: #222222; font-family: inherit; font-style: inherit; font-weight: 600; line-height: 1.42857142857143em;">JavaScript Libraries</span></div>
<div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<ul>
<li><a href="http://jquery.com/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">jQuery</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Nifty JavaScript library that makes html document traversing, event handling and ajax simpler</span></li>
<li><a href="http://yuilibrary.com/" style="font-family: inherit; line-height: 1.42857142857143em;">YUI</a></li>
</ul>
<span style="font-family: inherit; font-style: inherit; font-weight: 600; line-height: 1.42857142857143em;">JavaScript Frameworks</span></div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<ul>
<li><a href="http://backbonejs.org/" style="font-family: inherit; line-height: 1.42857142857143em;">Backbone </a><span style="font-family: inherit; line-height: 1.42857142857143em;">with </span><a href="http://marionettejs.com/" style="font-family: inherit; line-height: 1.42857142857143em;">Marionette</a><span style="font-family: inherit; line-height: 1.42857142857143em;">: Backbone is awesome when you have a fairly interactive application. Helps you manage the client data display and event handling in a MVC fashion. Marionette is another library that makes backbone easier. </span><span style="font-family: inherit; line-height: 1.42857142857143em;">Now, just to note, there are many more JavaScript Frameworks coming along. Back when we were evaluating, it was Backbone, Angular and Ember. But by the time I publish this post, this list will probably be outdated. :-)</span></li>
<li><a href="https://angularjs.org/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">AngularJS</a></li>
<li><a href="http://emberjs.com/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Ember</a></li>
<li><a href="http://meteor.com/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;">Meteor</a></li>
<li><a href="http://nodejs.org/" style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;">NodeJS</a></li>
<li><a href="http://facebook.github.io/react/" style="line-height: 1.42857142857143em;">ReactJS</a></li>
</ul>
</div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<ul>
</ul>
</div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<span style="font-family: inherit;">
</span>
<span style="font-family: inherit; font-style: inherit; font-weight: 600; line-height: 1.42857142857143em;">Code Editors</span></div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<span style="font-family: inherit; font-style: inherit; font-weight: 600; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></span></div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<span style="font-family: inherit;">Okaym. We are a Vi shop. But for what its worth, there are these awesome </span></div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<ul>
<li><a href="https://www.jetbrains.com/pycharm/" style="line-height: 1.42857142857143em;"><span style="font-family: inherit;">PyCharm</span></a></li>
<li><a href="http://www.sublimetext.com/" style="color: #0079d3; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;"><span style="font-family: inherit;">Sublime Text</span></a></li>
<li><a href="https://atom.io/" style="color: #0079d3; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;"><span style="font-family: inherit;">Atom</span></a></li>
<li><span style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;"><a href="https://www.jetbrains.com/webstorm/" style="color: #0079d3; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;">WebStorm</a></span></li>
</ul>
</div>
<span style="color: #222222; font-family: inherit; font-style: inherit; font-weight: 600; line-height: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Module Loaders</span><br />
<span style="color: #222222; font-family: inherit; font-style: inherit; font-weight: 600; line-height: 20px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="background-color: white; font-weight: normal; line-height: 22.8571434020996px;">Won't make a recommendation here since we are not yet convinced that out choice is working for us yet :) But you have </span><a href="http://hackhat.com/p/110/module-loader-webpack-vs-requirejs-vs-browserify/" style="background-color: white; color: #0079d3; font-weight: normal; line-height: 1.42857142857143em; margin: 0px; text-decoration: none;">Module Loader Comparison + Pros / Cons</a><span style="background-color: white; font-weight: normal; line-height: 22.8571434020996px;"> to help out</span></span><br />
<div style="background-color: white; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<ul>
<li><a href="http://webpack.github.io/" style="line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;"><span style="font-family: inherit;">Webpack</span></a></li>
<li><a href="http://browserify.org/" style="color: #0079d3; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;"><span style="font-family: inherit;">Browserify</span></a></li>
<li><span style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;"><a href="http://requirejs.org/" style="color: #0079d3; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;">Require.js</a></span></li>
</ul>
</div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<span style="font-family: inherit; font-style: inherit; font-weight: 600; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Build Tools</span><br />
<ul>
<li><a href="http://gulpjs.com/" style="color: #0079d3; line-height: 1.42857142857143em; margin-left: 0px; margin-right: 0px; text-decoration: none;"><span style="font-family: inherit;">Gulp</span></a></li>
<li><span style="color: #0079d3; font-family: inherit; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;"><a href="http://gruntjs.com/" style="color: #0079d3; line-height: 1.42857142857143em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-decoration: none;">Grunt</a></span></li>
</ul>
</div>
<div style="background-color: white; color: #222222; line-height: 1.42857142857143em; margin-bottom: 0.357142857142857em; margin-top: 0.357142857142857em; padding: 0px;">
<span style="font-family: inherit;">Know of an awesome tool? Leave a comment!</span><br />
<div style="font-family: verdana, arial, helvetica, sans-serif;">
<br /></div>
</div>
</div>
mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com23tag:blogger.com,1999:blog-412801918092406914.post-41658611559876108812012-11-07T12:56:00.001-08:002015-03-16T23:05:04.231-07:00Writing Custom Template Tags in DjangoDjango templates are the <i>view</i> part of the Django MVC. So, the templates should just handle the display part and any login in templates should be kept to a minimum. However, there are times when we just have to include logic in the templates, and using template tags is the most elegant way to handle this. Creating your own custom template tags is fairly simple.<br />
<br />
One template tag needed often is to get the value from a dictionary.<br />
<br />
We like passing dictionaries to templates because dictionaries keep everything readable, especially when I have a long list of parameters to pass to the template. Django templates have no in-built mechanism to retrieve a specific key from the dictionary. So we will write our custom template tag to do that.<br />
<br />
Create a directory <span class="incode">tempatetags/</span> under your <span class="incode">apps</span> directory. In this directory create a file <b><span class="incode">custom_filters.py</span></b>.<br />
<br />
<div id="mycode">
from django import template
<br />
<br />
register = template.Library()
<br />
<br />
@register.filter('key')<br />
def key(d, key_name):<br />
try:<br />
value = d[key_name]<br />
except KeyError:<br />
# handle the error<br />
raise Http404 <br />
return value<br />
<br /></div>
<br />
Now, from views.py, we pass a dictionary to the template. Say<br />
<span class="incode">valdict = {'parent':'Mr John Doer', 'child1':'Emily Doer', 'child2':'Mark Doer'}</span><br />
<br />
To access the dictionary keys in the template we do,<br />
<br />
<b><span class="incode">template.html</span></b>.<br />
<br />
<div id="mycode">
{% load custom_filters %}
<br />
<br />
{% block main_content%}<br />
Parent: {{ valdict|key:parent }}<br />
Child1: {{ valdict|key:child1 }}<br />
Child2: {{ valdict|key:child2 }}<br />
{% endblock %}
</div>
<br />
<br />mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com0tag:blogger.com,1999:blog-412801918092406914.post-46623940472223730642012-06-07T10:35:00.002-07:002015-03-16T23:11:15.852-07:00Testing PayPal on Website<br />
PayPal provides a testing tool called <a href="https://developer.paypal.com/">PayPal Sandbox</a> to test website's PayPal's deployment. We can create pseudo buyer and seller accounts, provide the accounts with pseudo money and cards, and test the transaction and user experience. All this without putting up real money or fees. They have a <a href="https://cms.paypal.com/cms_content/en_US/files/developer/PP_Sandbox_User_Guide.pdf">User's Guide</a> here. However, the basic steps are simple:<br />
<ul>
<li>Create a Sandbox account first with some email other than the regular PayPal email. </li>
<li>Login to the account. </li>
<li>Inside this account, click on 'Create Preconfigured Account" and create a couple of buyer accounts and one seller account. Once these accounts are created, they are assigned a randomly generated email address. This is the login email address for that account.</li>
<li>Now, click on the radio button near buyer's account and then click on "Enter Sandbox Test Site" button below the form. This will direct you to login with buyer's generated email account and password. Without this step, Paypal will not recognize the buyer's sandbox account when we try to psedo-pay the seller later. </li>
<li>In the website's code where the PalPal form was created, set the business email address to the sandbox's seller account's generated email address.
<div id="mycode">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><br />
<input name="business" type="hidden" value="seller_45681279_biz@mywebsite.com" /><br />
<input name="cmd" type="hidden" ... <br />
</form type="submit" value="PayPal"></div>
</li>
<li>Once the Sandbox seller account is set as business, all the payments go to that account, and no fees are charged</li>
<li>Now, go through the buyer's transaction. When Paypal asks for login to pay, use the Sandbox buyer generated email and pwd and login to pay with the Sandbox buyer. </li>
</ul>
Thus the complete website flow can be tested. To check the emails PayPal will send to your account on completion of transaction, click on 'Test Email' link in Sandbox nav-bar.<br />
<br />
Normally Sandbox transactions do not go through IPN. However, Sandbox provides separate hooks to test this. Go to the 'Test Tools' bar in the Sandbox nav-bar. Here they have <a href="https://developer.paypal.com/cgi-bin/devscr?cmd=_ipn-link-session">IPN Simulator</a> with which the all the different configurations of IPN can be tested.mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com0tag:blogger.com,1999:blog-412801918092406914.post-45051047673142366582012-06-06T13:23:00.000-07:002015-03-16T23:10:22.384-07:00Paypal Shopping CartPayPal's documentation has really very subtle hints about what needs to be done to get Paypal working for a website, and you need to plough through a lot of links to figure out anything useful.<br />
<br />
On sign up, they take the user to a page with customizable buttons for Buy Now, Subscribe, Shopping Cart. Now, if the site has only one item to sell, it should use the <a href="https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_buynow_buttons">'Buy Now'</a>, if it is selling subscriptions, use the <a href="https://www.paypal.com/pdn-recurring">Subscription Button</a>. For a site that sells multiple items and needs a shopping cart, Paypal has tied up with some <a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=merchant/shopping_cart">Shopping Cart providers</a>.<br />
<br />
There is however an option of creating your own light weight shopping carts. Its called <a href="https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_cart_upload">Third Party Shopping Cart</a>. This is especially useful when a website is just starting out and it doesn't need the whole armada of a formal Shopping Cart, but it needs something beyond a Buy Now or Subscription Button.<br />
<br />
To create your own shopping cart, we need to have a list of items, quantities and price. Then we pass it to Paypal as follows:<br />
<br />
<div id="mycode">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <br />
<input type="hidden" name="cmd" value="_cart"><br />
<input type="hidden" name="upload" value="1"><br />
<input type="hidden" name="business" value="seller@mywebsite.com"><br />
<input type="hidden" name="item_name_1" value="Item Name 1"><br />
<input type="hidden" name="amount_1" value="1.00"><br />
<input type="hidden" name="quantity_1" value="2">
<br />
<input type="hidden" name="shipping_1" value="1.75"><br />
<input type="hidden" name="item_name_2" value="Item Name 2"><br />
<input type="hidden" name="amount_2" value="2.00"><br />
<input type="hidden" name="quantity_2" value="3"><br />
<input type="hidden" name="shipping_2" value="2.50"><br />
<input type="submit" value="PayPal"><br />
</form></div>
<br />
<br />
The suscript-ing numbers <span class="incode">item_name_1, amount_1</span> all refer to the first item on list. There are other options like <span class="incode">tax_x, handling_x, discount_amount_x, weight_x</span>. The value of x must increase by 1 for each new item in the cart.<br />
<br />
There are some options that can be applied to the entire cart like: currency can be specified with hidden <span class="incode">currency</span>, units of weight can be given as <span class="incode">weight_unit</span>, tax can be calculated for the entire cart instead of per-item by using <span class="incode">tax_cart</span>, <span class="incode">discount_amount_cart</span> to charge a single discount amount for the entire cart, <span class="incode">discount_rate_cart</span> to give a discount percentage for the entire cart.
<br />
<br />
This will display a PalPal button on the site. Clicking on that button takes the user to PayPal's site where it shows the list of all the items purchased and the total quantity, and invites the user to pay using the PayPal account or a credit card.<br />
<br />
To make Paypal really integrate with a website though, the website needs IPN or PDT. <a href="http://stackoverflow.com/questions/2836779/paypal-ipn-vs-pdt">Stackoverflow has a good discussion on which one to use</a>. We use IPN and are happy with it so far.mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com1tag:blogger.com,1999:blog-412801918092406914.post-16189781320099759892012-05-24T08:49:00.001-07:002015-03-16T23:09:20.917-07:00Adding placeholders, autofocus and other attributes to Django formsPlaceholder is a short hint (a word or short phrase) intended to aid the user with data entry in forms. With HTML5, adding placeholders to forms is as simple as including a keyword:<br />
<br />
<code>
<label>Name: <input name="name" placeholder="John Doe" type="text" /></label>
</code>
<br />
<br />
This would appear in the form as: <br />
<br />
<label>Name: <input name="name" placeholder="John Doe" type="text" /></label>
<br />
<br />
To add placeholders to Django forms, simply specify <span class="incode">placeholder</span> as an attribute to the <span class="incode">form widget</span>.<br />
<br />
<code>
name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'John Doe'})
</code>
<br />
<br />
This is actually a pretty general and useful way of passing attributes to Django forms. We can pass other attributes like <span class="incode">'autofocus':'autofocus'</span>. Autofocus is when we want the form field to be in focus automatically when the page loads.
<br />
<br />
This is for forms created in our app's own <span class="incode">forms.py</span>. If we want to pass attributes to forms created by a Django package, we have to pass those attributes at the form's <span class="incode">init.</span><br />
<br />
Say, to add attributes to a form called <span class="incode">RegistrationForm</span> from some Django package with fields <span class="incode">username</span> and <span class="incode">password</span>, first create a form in project's <span class="incode">forms.py</span> that inherits <span class="incode">RegistrationForm</span>. In the <span class="incode">__init__</span> function of the inherited form, pass all the attributes to the form widgets.
<br />
<br />
<div id="mycode">
class MyRegistrationForm(RegistrationForm):<br />
def __init__(self, *args, **kwargs): <br />
super(MyRegistrationForm, self).__init__(*args, **kwargs)<br />
self.fields['username'].widget.attrs['placeholder'] = u'Username'<br />
self.fields['password'].widget.attrs['placeholder'] = u'Password'</div>
<br />
<br />
Now while using the form, use it as<br />
<div id="mycode">
form = MyRegistrationForm()
</div>
<br />
This will display base form with the attributes passed to to it at init.mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com6tag:blogger.com,1999:blog-412801918092406914.post-22329059617831544232012-05-23T13:15:00.000-07:002015-03-16T23:15:00.124-07:00Changing Django PasswordGo to the directory where your settings.py resides:<br />
<br />
<div id="mycode">
$ python manage.py shell <br />
>>from django.contrib.auth.models import User <br />
>> users = User.objects.all() <br />
>> users <br />
(output) [<User: foo>, <User: adminlogin>, <User: bar>] <br />
>> user = User.objects.filter(name='adminlogin') <br />
>> user.set_password('newpassword')<br />
>> user.save()</div>
<br />
This can be used to do most user object management.mehttp://www.blogger.com/profile/14635862045657655283noreply@blogger.com0