All posts by suhainda

Introduction to HTML5 Desktop Apps With Node-Webkit

Using Node.js, we can create web applications easily. Now, thanks to the node-webkit we can also create desktop apps with it, using a unique combination of HTML5 and Node.



The library combines WebKit engine and Node.js in a unique way. Both WebKit and Node share the same context, allowing you to write your code like it’s meant to be executed in a browser, but with the addition of all Node’s features.

The list of uses is endless. You can create business apps, text and image editors, games, presentations, admin panels, etc. Just name the desktop app that you would like to create, and I can assure you that it will be possible with node-webkit.

In this tutorial, I will show you how to get started by showing you how to create a simple text editor.


First, you have to get the library. Download the version appropriate for your operating system (the application itself will run on all of them) from github and unzip it wherever you’d like. Now, lets create a basic folder structure. We will have folders for HTML files (.html) and for JavaScript files (.js). Also, create thepackage.json file in the same directory that the nw executable is in and a node_modules folder to keep the modules we will create. Continue reading

Building a Customer Management App Using AngularJS and Laravel

When creating a single-page app we should use some kind of framework to do some of the job for us, so we can focus on the actual functionality. AngularJS fits here perfectly, because features like dynamic dependency injection and bi-directional data binding are just great. Sometimes we also require some kind of server. If you’ve chosen PHP then Laravel may be your best option, as it’s easy to work with and pretty powerful.



In this tutorial you will create a simple customer/transaction management system with the ability to add and remove both transactions and customers. This is probably not the kind of thing you make very often, but it shows how to use features of both frameworks.

Before we start you should setup a MySQL database which we will use (Laravel supports many more of them, but this is still the most popular one). You don’t need any web server since we will be using PHP’sbuilt-in one (but please keep in mind, that this solution is only for the development and should never be used in production – it lacks many features that are required for your app to work properly in public). For that, we will need at least PHP version 5.4.0.


The first thing we have to do is to install Laravel. The full process is described on Laravel’s website. After that, you should have your project directory created with all of Laravel’s files in there. Navigate to that directory in your command line and run this command there:

php artisan serve

If all goes OK, you should see that the local development server was started on locahost:8000. Open your browser and navigate there, you should see Laravel’s welcome page:


Now we can proceed to the actual application. Continue reading

New to Web Design? Start Here.


Here’s a quick breakdown of what you’ll find on this page..

Designing Your First Website

Getting to grips with designing a website is about understanding what you’re aiming to achieve and how you can solve problems through design. In the first stages of the process, it’s worth thinking about creativityand we have a whole session of tutorials to help you out with that:


Beyond creativity comes the actual designing. How does someone take ideas and communicate them in design terms? How should a web page be laid out? How does color influence a design? And how should we take our users into account?


And if you’re a developer, coming to web design from a coding background? We have a whole series of design theory articles (each one with an assignment at the end) to help you out, plus some very useful workflow tutorials:


Coding Your First Website

Planning, sketching, wireframing and mocking-up visuals are all important aspects of web design, but what about actually realising those designs for the browser? Getting a handle on web standards (HTML, CSS and JavaScript) is vital if you’re interested in the world of front end development. Let’s begin with the basics..


With a fundamental understanding of HTML and CSS you can now start to translate your static visuals into living, breathing web pages. Follow Adi Purdila as he moves from Photoshop to the code editor, building his Adaptive Blog Theme in this extended screencast series.


Tools of the Trade

Every craftsman needs good tools, and web design is no different! In actual fact, with a simple text editor and a web browser you have enough to get you started, but there are many other applications and tools to help with other tasks.


The workhorse of many a web design studio for years. Its role may be changing these days, but there’s no denying its presence in the design arena.


Human Anatomy Fundamentals: Balance and Movement

This is our last session working with the basic structure of the body before we start clothing it in flesh. We have seen how it is proportioned and how those proportions vary within limits; now we’ll see how it counters gravity with posture – and how far posture can be pushed before it falls over (or, on paper, looks out of balance).


Balance: How to Stand (and Fall)

The body’s Center of Gravity (CoG) is roughly behind the belly button. The body is supported by whatever part touches the ground: generally both feet, but it can be one foot, both feet and one hand, two hands, etc. The Center of Support (CoS) is the mid-point between those points of contact with the ground, whether it’s a single point, or they form a line, a triangle or a square.

Centres of gravity and support

The alignment of CoG and CoS determines balance, both in real life and on paper, and this operates differently depending on whether the body is still or in motion. Continue reading

Belajar pemrograman, mulai dari mana?

Mempelajari pemrograman komputer bisa dibilang susah-susah gampang, tapi jika anda perhatikan ada beberapa konsep dan istilah yang perlu anda pahami terlebih dahulu sebelum memulai belajar pemrograman komputer.

Illustrasi programming

Konsep dan istilah ini berlaku untuk seluruh Bahasa pemrograman yang akan anda pelajari, baik itu Pascal, Delphi, Visual Basic, C++ atau sebagainya. kabar baiknya, yang akan saya bagikan sekarang akan sangat membantu anda untuk mempelajari Bahasa pemrograman.


Jika anda mau jadi programmer yang handal anda harus memiliki algoritma yang baik begitu kata para programmer.
Lalu apa arti algoritma itu sendiri?
Sebagai contoh perhatikan cerita berikut. Continue reading

Kesalahan dalam mempelajari Framework

Hampir di setiap bahasa pemrograman terdapat framework yang akan memudahkan anda dalam membuat sebuah aplikasi, baik itu berupa component, plugin, Script atau library-library siap pakai lainnya. Tidak sedikit yang salah dalam mempelajari Framework ini dan semuanya akan dibahas dalam artikel singkat berikut.

Apa itu Framework?

Framework adalah sekumpulan kode program yang dibuat untuk mempercepat proses pembuatan aplikasi. Sebuah framework bisa berupa component, plugin, dan script. Jika anda tidak mengerti apa yang sedang saya bicarakan, perhatikan cerita berikut : Continue reading

Sekilas tentang Semantik dalam HTML

Semantik? apa sebenarnya arti semantik, khususnya semantik dalam HTML. Mungkin saya akan menjelaskan secara singkat apa yang dimaksud dengan semantik dalam HTML.

Sekilas tentang HTML

HTML digunakan sebagai bahasa Markup atau bisa juga kita sebut dengan Bahasa Formating dan tugas HTML memang hanya sebatas pada Formating suatu dokumen bukan menentukan bagaimana suatu dokumen tersebut ditampilkan.

Tag-tag HTML dibuat/disediakan sesuai dengan fungsi tertentu dalam formatting dokumen. Perhatikan salah satu tag HTML berikut: Continue reading

An Introduction to the getUserMedia API

In the mid-90s, chat was one of the best products available on the web. Raise your hand if you were young and thought how cool it would be to develop your own chat application. One of their best features was their ability to capture microphone audio and/or video from a webcam, and send it over the Internet. To implement these features, developers have relied on plugins like Flash and Silverlight for a long time. However, Flash and Silverlight can be a problem if you don’t have the proper permissions or you’re not tech-savvy. Today, such plugins aren’t required anymore thanks to theWebRTC project and its related APIs. This article will introduce the getUserMedia API, one of the APIs derived from the WebRTC project.

What’s the getUserMedia API

The getUserMedia API provides access to multimedia streams (video, audio, or both) from local devices. There are several use cases for this API. The first one is obviously real-time communication, but we can also employ it to record tutorials or lessons for online courses. Another interesting use case is the surveillance of your home or workplace. On its own, this API is only capable of acquiring audio and video, not sending the data or storing it in a file. To have a complete working chat, for example, we need to send data across the Internet. This can be done using the RTCPeerConnection API. To store the data we can use the MediaStreamRecorder API. Continue reading

Belajar HTML5 dan CSS3

HTML5 dan CSS3 bukanlah barang baru, sudah beberapa tahun belakangan ini kita mendengar kedua kata itu. Namun, sepertinya ditahun 2013 inilah HTML5 dan CSS3 akan semakin banyak digunakan. Itu juga karena W3C telah menyatakan bahwa fitur HTML5 sudah lengkap.

HTML5 dan CSS3

HTML5 dan CSS3

HTML5 dan CSS3 adalah Masa depan website, kedepan nya HTML5 dan CSS3 akan semakin banyak digunakan. Jadi tidak ada salahnya kita mulai mempelajarinya dari sekarang. Sudah banyak orang yang menggunakan HMTL5 tapi bukan berarti kita terlambat kalau mempelajarinya dari sekarang.

Postingan ini tidak akan menjelaskan panjang lebar, namun kami hanya ingin menghimbau teman-teman di Indonesia mulai dan jangan ragu lagi menggunakan HTML5 dan CSS3 di website yang kamu buat. Karena Browser sudah support, Resources dan Tutorial nya sangat banyak.

Untuk anda yang ingin mengetahui lebih banyak mengenai HTML5 dan CSS3, mungkin situs berikut ini bisa menambah pengetahuan anda tentang HTML5 dan CSS3. Continue reading

Dasar-dasar Algoritma Pemograman

Asal kata Algoritma berasal dari nama Abu Ja’far Mohammed Ibn Musa al-Khowarizmi, ilmuan Persia yang menulis kitab al jabr w’al-muqabala (rules of restoration and reduction) sekitar tahun 825 M.

Algoritma adalah urutan langkah logis tertentu untuk memecahkan suatu masalah. Hal ini ditekankan padaah. Hal ini ditekankan adala urutan langkah logis, yang berarti algoritma harus mengikuti suatu urutan tertentu, tidak boleh melompat-lompat.

Alur pemikiran dalam menyelesaikan suatu pekerjaan yang dituangkan secara tertulis. Hal pertama yang ditekankan adalah alur pikiran, sehingga algoritma seseorang dapat juga berbeda dari algoritma orang lain. Sedangkan penekanan kedua adalah tertulis, yang artinya dapat berupa kalimat, gambar, atau tabel tertentu.

Definisi Algoritma adalah urutan langkah-langkah logis penyelesaian masalah yang disusun secara sistematis.

Contoh; Algoritma TUKAR ISI BEJANA

Diberikan dua buah bejana A dan B, bejana A berisi larutan berwarna merah, bejana B berisi larutan berwarna biru. Pertukarkan isi kedua bejana itu sedemikian sehingga bejana A berisi larutan berwarna biru dan bejana B berisi larutan berwarna merah.


– Tuangkan larutan dari bejana A ke dalam bejana B

– Tuangkan larutan dari bejana B ke dalam bejana A.

Algoritma TUKAR ISI BEJANA di atas tidak menghasilkan pertukaran yang benar. Langkah di atas tidak logis, hasil pertukaran yang terjadi adalah percampuran kedua larutan tersebut.

Untuk mempertukarkan isi duah bejana, diperlukan sebuah bejana tambahan sebagai tempat penampungan sementara, misalnya bejana C. Maka algoritma untuk menghasilkan pertukaran yang benar adalah sebagai berikut : Continue reading