Pythonthusiast Redesigned: New Logo and Bootstrap UI

I never forget the enthusiasm thrilling I get, when reading "Tuntunan Praktis Pemrograman C++ by Tjendry Heriyanto" book with reading position depicted in the above image. It was the most thrilling experience I had, back in my intermediate school in 1997. Yeah, the good 'ol day


Actually, I started this week by creating an article about what makes programming in Python different through the eye of a Java programmer. But as I browse through the content of this site, I realize that this site still lack of a better way of navigating the site. It still is a LifeType blog. And the truth is, I never like the default navigation experience brought by a blog: the usual orderly post layout, category/tag list, calendar with count of published article and so on. So, I took the courage to do thing that I am most frightened of: designing a web. Yeah, I never assess myself as a great web designer. It always suck my brain out!

But thanks to Bootstrap (mostly its 12-grids system), the process is much more easier than I previously imagined. With plenty of resources there available in the internet, finally I can come up with a web design that is not as pathetic as I think I will come up with. And thought to share it, as I know designing is an entirely different beast than coding.

Let's have a look!

PS: Foreword warning, please be aware that there will be some PHP/Smarty tags scattered in this article


Flask Biography Tutorial Part XII - Implementing Profile Page using Inline Editing

Utilizing X-editable to edit biography page

Utilizing X-editable to in-place editing our biography page

UPDATED: Previously I said that I use wsgi/static/upload to store user's uploaded avatar. Although it's working, it still imposed one important problem: the content of wsgi/static/upload itself will be removed for each subsequent git push command. We must store user's data into $OPENSHIFT_DATA_DIR/upload directory. How do we do this? Simple. First, (if it's currently existed) remove the folder wsgi/static/upload, and then create an executable binary script within the folder .openshift/action_hooks/post_deploy, with the content: ln -sf $OPENSHIFT_DATA_DIR/upload $OPENSHIFT_REPO_DIR/wsgi/staticgi/static/. Make sure to set the flag bit into executable using the command: chmod +x post_deploy (I don't think you can do this in Windows. *nix/OSX will do just fine for this).This script will be run each time we push the repository to Openshift --after the application successfully deployed, making a link to upload directory of user's uploaded avatar. This way, user's avatar will get stored in $OPENSHIFT_DATA_DIR/upload and will always available each time we push our application to Openshift.

As I start a new series on this blog about Python Cloud Computing and working my first way of making our Flask Biography Application runnable within PythonAnywhere, I realize that I haven't completed the last important thing for this application to be fully functional: editing biography for registered users. This biography application will become practically useless if users don't have the ability to edit their full name, tagline, avatar and short biography. Having said that, let's make it even better by implementing in-place editing for all those fields, where in-place editing simply means users will be able to edit those fields directly within the same page. We are going to use Vitaliy Potapov's X-editable for this purpose. It's an awesome Open Source product!


Django KFIMember Tutorial Part I - Deciding Application Scope, Production and Technology Stacks

If this is your first encounter with PTVS, I bet you haven't imagine this kind of screenshot, even in your wildest dreams.

If this is your first encounter with PTVS, I bet you haven't imagine this kind of screenshot, even in your wildest dreams... Cool

ARTICLE UPDATE : As I have unresolved problem when using Python 3.3 combined with Django 1.6 and PostgrerSQL 9.2 in Openshift, I dropped Python 3.3 requirement and rework this application using Python 2.7 instead.

Yes, I know. I haven't finished my Flask Biography Tutorial yet. But I thought I would like to start an initial post of what my next tutorial series would be like. I have several ideas actually, popping from my head of what Python topic (library or framework to be exact) I would like to explore more, which are:

  1. Django : "The Web framework for perfectionists with deadlines". I am pretty much sure, no software developers were not intrigued by that tagline! Before diving into Python, I evaluate Ruby on Rails previously. And I got the sense that Django is Python answer to RoR, which is not that untrue.
  2. Pyramid, mainly because previously I got offered for Pyramid based remote job.
  3. Isometric traffic control simulation game build using (probably) XNA + Python for scripting. Why? Because in one occasion where I explained to my 6 years old daughter of what is an Isometric image (after I saw her to be so enthusiast looking at an isometric pixel-art image), she and also her 3 years old brother seems to be interested on it.

    It's so addicted!
    It's so addicted! Try to find Batman in that beautiful pixel art image taken from nasc

  4. Twisted, to be able to develop a large scale of network event-driven application. It may be just a chat server for the aforementioned Isometric traffic control simulation game, or a more complex multiplayer server for it.

Eventually, as I also have been offered a job to develop membership website for our Koperasi Freelancer Indonesia (KFI), I thought the timing is perfect if I blog my experience in developing it as my next tutorial series in this blog. With one interesting twist of plot : we are going to add another development platform, Python Tools for Visual Studio + Windows Azure. But still not forgetting those  who use *nix. In this series, we are going to see how well Windows Azure match up with Openshift in context of deploying Python web application.

Hence, welcome to the first installment of Pythonthusiast's Django Tutorial!


Flask Biography Tutorial Part X : Building Portfolio Form Modal Dialog using Flask-WTF, Bootstrap 3, Bootbox, Bootstrap Tags Input and jQuery



I got to admit something : I really have fun writing this current article! It shows concise way for new comer in Python web development area to truly understand how to integrate Bootstrap and its extensions, jQuery and Flask to build feature that increase user experience in interacting with the application.

Previously we haven't utilize jQuery and many Bootstrap extensions there exist in the web, making our application solely depends on what Flask community gave us (which is great!). But, as we already choose to leverage Bootstrap 3 in our application, this decision bring great advantage : we can easily tap to plethora of Bootstrap extension built by community and add it in our own application to gain benefit of its functionality. Specifically we are going to maximize the use of this open source products to our application:

  1. jQuery, especially its .getJSON and .post method to allow our Portfolio form live as a modal dialog box complete with Ajax validation and Ajax form submission. I got to beg you pardon for this, for thinking in the previous post that we have to use jQuery client side validation. Turn out what I really want is an Ajax based validation technique. I will explain later what are the differences. But one important thing is, we don't have to double our validation mechanism complexity by also implementing it in client-side.
  2. Bootstrap Tags Input, making entering tags as comma separated value is a pleasant experience.
  3. Bootbox that lets our application utilize a popup confirmation dialog easily.

Ready? Let's start!


Flask Biography Tutorial Part IX : Creating Product Portofolio Page


A compact layout of our Portfolio table

Figure IX-1 Portofolio grid in Bio Page complete with action buttons


Before we going further on our journey of making a fully functional Bio Application, lets return to our early concept of this application : product portfolio show case. And guess what we missed. Correct. We missed the required application model for a product portfolio. If you rethink our application models until this state, we know we haven't add a portfolio model/table. This part of article series will guide you on how exactly it's done by adding Portfolio model using SQLAlchemy relationship field in our existing Users mode.


Flask Biography Tutorial Part VIII : Using Hash to Store Password Securely


Password stored in a plain text format... Oh Dear!
Figure VIII-1 Password stored in a plain text format... Oh Dear!


I assess myself as no security expert, but storing a plain text password in a database is surely a bad practice. If someone (probably hacker) gain access to your database, (s)he can easily read your users password. Without any hassle. In this article I will show how you can easily utilize python md5 package to convert our users password into MD5 string and making curious hacker not that easy in reading it.

NOTE : rahasia is Indonesian word for secret.


Flask Biography Tutorial Part VII : Adding Sign In Form Using Bootstrap 3 and Login Feature Using Flask-Login


Figure VII-1 Persuasive Signin Form in a Bootstrap 3 Navbar

In adding Sign In feature for our Bio Application, I have decided one important thing : the login status or form should always available and already opened in Navbar. Because Bootstrap 3 Navbar if properly setup will always available at the top of every page, this will result in a persuasive sign in form : a kind of form that engage user to directly fill its input fields and hit Submit button! Wherever (s)he is... (More)

Flask Biography Tutorial Part VI : Adding Sign Up Form using Bootstrap 3 and Flask-WTF

    Figure VI-1 A secure Sign Up form with validation and nice visual layout

Welcome to the sixth instalment of this Bio Application Development Tutorial. I constructed this tutorial, in such a way that even a newcomer in Python will be able to grasp its content and follow it easily. Thanks to Python intuitive coding environment, my job is not that hard. But it is you who really decide whether my goals are met or I still have to refine how I presented ideas, instructions and concepts.

Previously, our Bio Application having its first data access capability by using a great ORM tool, SQLAlchemy. It able to construct Users tables, populate data and query those data.  But it still lack an important feature : a visitor still unable to register him/herself into our application. In this article, we are going to show you how exactly it is done.


Flask Biography Tutorial Part IV : Application Layout and Templating Using Bootstrap 3 and Jinja 2

Saviour of the CSS Soulless creature
 Bootstrap is The Saviour for the CSS soulless coder like me.
For the sake of the Lord, quick, get it here!

If you have followed this article until this point, it means that you really curious on how you can develop a working Python web application. Previously we have understand how to create a working (but dumb) Flask application. Today we are going to start by laying out our application user interface using a very cool front-end framework : Bootstrap.


Copyright(c) 2017 -
By using this website, you signify your acceptance of Terms and Conditions and Privacy Policy
All rights reserved