Tutorial Pemrograman dan Source Code, Android, Web, Mobile: April 2013

Sabtu, 27 April 2013

Membuat Image Slider dengan Bootstrap Carousel Slider

Kita lanjutkan bagian keenam dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navbar dengan Bootstrap dan Kelima Membuat Navlist dengan Bootstrap dan Keenam Menampilkan Source Program di Halaman Web dengan Pretty Print Bootstrap.

Kali ini sangat menarik, yaitu Membuat Image Slider dengan Carousel Bootstrap. Ternyata Bootstrap juga mempunyai kemampuan untuk Menampilkan Carousel atau yang biasa disebut Image Slider. Style dari Carousel ini ada yang Tidak Full Screen dan Tidak Mentok di Atas Halaman Web atau ada yang Carousel Full Screen dan Mentok di Atas (Top) Halaman Web.

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file carousel.html berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

Baca selengkapnya »

Jumat, 26 April 2013

Algoritma Mencari Bilangan Prima dengan Visual Basic

Cukup menggelitik ketika penulis ditanyai bagaimana Algoritma Mencari Bilangan Prima di Visual Basic. Hasilnya penulis buatkan di Visual Basic .NET karena VB 6.0 sudah tidak terinstall di komputer. Tetapi coding di bawah ini bisa dipakai untuk Visual Basic 6.0 :

Buat project baru, tambahkan satu buah ListBox dan satu buah Button, pada button tambahakan kode program berikut :

Baca selengkapnya »

Kamis, 25 April 2013

Membuat Java Window Center Screen dan Maximize Form Window pada NetBeans

Sebenarnya ini masalah sepele, hanya bagaimana Menampilkan Form Window di Java agar keluar di Center Screen. Kemudian masalah kedua bagaimana agar Window bisa tampil dalam keadaan Maximize.

Ternyata solusinya simple, untuk Menampilkan Window Center Screen, pada NetBeans tambahkan kode program berikut ini di bawah initComponents(); :

public class FormMain extends javax.swing.JFrame {

/**
* Creates new form FormMain
*/
public FormMain() {
try {

initComponents();

Baca selengkapnya »

Rabu, 24 April 2013

Menampilkan Kode Program dengan PrettyPrint Bootstrap Source Code

Kita lanjutkan bagian keenam dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navbar dengan Bootstrap dan Kelima Membuat Navlist dengan Bootstrap

Ternyata Bootstrap Mempunyai Kemampuan Untuk Menampilkan Kode Program dengan Library PrettyPrint. Ini dibutuhkan jika kita ingin menampilkan contoh source code di halaman web sehingga mudah di-Copy-Paste.

Dari file Starter Template bisa dikembangkan sehingga menjadi file code.html berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

Baca selengkapnya »

Selasa, 23 April 2013

Membuat Chart di Android, Aplikasi Grafik Android Menggunakan AChartEngine

Fitur Chart atau Grafik termasuk fitur tambahan yang paling banyak digunakan di suatu Aplikasi. Begitu juga dengan di Android. Masalahnya adalah di Android tidak menyediakan Komponen Grafik (Chart) secara Default. Solusinya kita gunakan Chart Component dari luar yaitu AChartEngine. Dapat didownload di http://code.google.com/p/achartengine/.

Pertama buat project Android seperti biasa. Kemudian kita letakkan file library AChartEngine, misal yang penulis gunakan adalah achartengine-1.0.0.jar, dicopy dari Explorer, buka Eclipse, buka folder libs di project yang sedang dibuat kemudian Paste.

Setelah itu tuliskan kode program di MainActivity.java sebagai berikut :

Baca selengkapnya »

Minggu, 21 April 2013

Mendesain Navlist dengan Bootstrap, Layout Navigator List Menu

Kita lanjutkan bagian Kelima dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navigation Bar dengan Bootstrap

Kali ini coba kita pelajari Layout Navlist atau Navigation List, yaitu Desain Menu Dropdown di Samping (Sidebar) ala Bootstrap. .

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file navlist.html berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

Baca selengkapnya »

Jumat, 19 April 2013

Cara Mendownload File Project dari Docs Google Drive

Karena banyak yang agak bingun bagaimana Cara Mendownload File Project (ZIP) dari Google Drive, maka seperti inilah kira2 caranya. Klik linknya menuju File Project (ZIP) tersebut. Setelah membuka ke Docs.Google (Google Drive klik File-Download(Unduh). Seperti ini :

Baca selengkapnya »

Kamis, 18 April 2013

Mendesain Layout Navbar dengan Bootstrap Menu Navigation Bar

Kita lanjutkan bagian ketiga dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap

Kali ini coba kita pelajari Layout Navbar atau Navigation Bar, yaitu Desain Menu Dropdown ala Bootstrap. Style dari tabel ini ada yang berwarna hitam dan putih, ada yang full 100% layar dan ada yg tdk full 100%. .

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file navbartopwhite.html berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

Baca selengkapnya »

Rabu, 17 April 2013

Membuat Halaman Hapus (Delete) Data dengan CodeIgniter

Kita lanjutkan mempelajari CodeIgniter dari artikel sebelumnya Menampilkan/View Data dengan Web CodeIgniter dari MySQL dan Menambah (Add) Data dengan Web PHP CodeIgniter dan Mengedit (Update) Data dengan Web PHP CodeIgniter. Kali ini kita buat halaman Hapus(Delete) Data pada CodeIgniter secara sederhana tanpa helper form terlebih dahulu.

Pertama tambahkan pastikan kode program di bawah ini pada View webci/application/views/vsiswa.php terdapat link untuk Hapus (Delete) Data :

<a href="siswa/tambah">tambah</a>
<table>
<tr>
<td>No</td>
<td>NIS</td>
<td>Nama</td>
<td>Alamat</td>
<td>Tgl Lahir</td>
<td>Nilai</td>
<td>Aksi</td>
</tr>

Baca selengkapnya »

Selasa, 16 April 2013

Membuat Aplikasi Posting Tweet Twitter dengan Android Menggunakan Twitter4J

Sebenarnya project Android Untuk Posting Tweet di Twitter ini sudah lama penulis buat, tetapi baru sekarang kesampaian untuk posting di Blog ini. Agak panjang langkahnya :)

Pertama download dahulu library twitter4j di url berikut. Penulis memakai twitter4j-core-android-2.2.6.jar, karena pernah bermasalah dengan versi yang lebih baru. Mungkin versi yang lebih baru cocoknya dengan Platform SDK dan Eclipse yang lebih baru pula.

Setelah itu kita daftar dahulu aplikasi di twitter dengan membuka url halaman developer twitter application ini. Setelah login dengan akun Twitter Anda, klik Create A New Application, kemudian isikan Nama dan Setting dari Aplikasi Twitter Android yang akan dibuat, misalnya seperti ini :

Baca selengkapnya »

Senin, 15 April 2013

Membuat Desain Layout Table dengan Bootstrap

Kita lanjutkan bagian kedua dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap.

Kali ini coba kita pelajari Layout Table, yaitu Desain Tabel ala Bootstrap. Style dari tabel ini ada yang Borderless atau tanpa border, Memakai Border atau Bordered, dan Zebra atau Striped, berwarna selang-seling..

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file table.html berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">


<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Baca selengkapnya »

Minggu, 14 April 2013

Menampilkan Fitur Zoom, Compass dan MyLocation pada Google Map Android Versi 2

Kita teruskan belajar Android Google Map Android V2. Artikel ini lanjutan dari Artikel Membuat Aplikasi Peta dengan Google Map V2. Jika belum pernah membuat aplikasi dengan Android Google Map V2, disarankan untuk membacanya dahulu karena persiapan dan langkah-langkahnya cukup panjang, rumit dan melelahkan :).

Kali ini coba kita kembangkan Project artikel pertama tersebut dan memberi fitur My Locationm Zoom dan Compass. Fitur ini otomatis ada di Google Map Android V2 dan bisa diaktifkan atau dimatikan.

Pertama buat project Peta baru, kalau ingin cepat buka saja project dari artikel pertama sebelumnya. Kemudian pada activity_main.xml buat tampilan seperti ini :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

Baca selengkapnya »

Jumat, 12 April 2013

Membuat Halaman Edit (Update) Data dengan CodeIgniter

Kita lanjutkan mempelajari CodeIgniter dari artikel sebelumnya Menampilkan/View Data dengan Web CodeIgniter dari MySQL dan Menambah (Add) Data dengan Web PHP CodeIgniter. Kali ini kita buat halaman edit (update) data secara sederhana tanpa helper form terlebih dahulu.

Pertama tambahkan kode program di bawah ini pada Model webci/application/models/msiswa.php :

<?php
class Msiswa extends CI_Model
{
function getdata()
{
$ambil = $this->db->get('siswa');
if($ambil->num_rows() > 0)
{
foreach($ambil->result() as $baris)
{
$hasil[] = $baris;
}
return $hasil;
}
}

Baca selengkapnya »

Membuat Layout Grid dan Container dengan Bootstrap

Kita lanjutkan bagian kedua dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap.

Kali ini coba kita pelajari Grid Layout, yaitu Layout ala Bootstrap yang membagi Layar Web menjadi 12 Kolom yang bisa kita bagi-bagi sesuka kita. Kemudian Grid tersebut bisa kita letakkan di flow container yang bersifat responsif terhadap lebar layar Web Browser sehingga jika ditampilkan di layar Web Desktop, Tablet maupun Smartphone bisa menyesuaikan bentuknya.

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file grid.html berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">


<link href="assets/css/bootstrap.css" rel="stylesheet">
<style>
/*.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 40px;
line-height: 40px;*/
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Baca selengkapnya »

Rabu, 10 April 2013

Membuat Halaman Tambah (Add) Data pada Web PHP CodeIgniter

Kita lanjutkan mempelajari CodeIgniter dari artikel sebelumnya Menampilkan/View Data dengan Web CodeIgniter dari MySQL. Kali ini kita buat halaman tambah data secara sederhana tanpa helper form terlebih dahulu.

Pertama tambahkan kode program di bawah ini pada Model webci/application/models/msiswa.php :

<?php
class Msiswa extends CI_Model
{
function getdata()
{
$ambil = $this->db->get('siswa');
if($ambil->num_rows() > 0)
{
foreach($ambil->result() as $baris)
{
$hasil[] = $baris;
}
return $hasil;
}
}
function simpandata(){
$nis = $this->input->post('nis');
$nama = $this->input->post('nama');
$alamat = $this->input->post('alamat');
$tgllahir = $this->input->post('tgllahir');
$nilai = $this->input->post('nilai');
$data = array(
'nis' => $nis,
'nama' => $nama,
'alamat' => $alamat,
'tgllahir' => $tgllahir,
'nilai' => $nilai
);
$this->db->insert('siswa',$data);
}
?>

Baca selengkapnya »

Sabtu, 06 April 2013

Mendesain Layout Web Dengan Bootstrap Twitter

Sepertinya Twitter Bootstrap semakin naik daun nih. Pertama kali penulis diberitahu oleh adik. Setelah dipantau beberapa bulan eh ternyata benar, lumayan booming Desain Layout dengan Bootstrap.

Karena ikut-ikutan, coba kita pelajari beberapa cara penggunaan layout Bootstrap, tetapi karena dasarnya penulis tidak terlalu berbakat di Desain, coba kita gunakan saja beberapa fitur penting yang dirasa cukup bagus. Fitur yang penulis coba yaitu :

1. Starter Template, bagaimana menyiapkan library javascript dan CSS dari Bootstrap.
2. Grid Layout dan Container
3. Table, bagaimana memakai Table
4. Navbar, Menu Navigasi
5. Navlist, Menu Berbentuk Sidebar
6. PrettyPrint, untuk menampilkan kode program di web (misal untuk tutorial)
7. Carousel Slider

Baca selengkapnya »

Jumat, 05 April 2013

Mengcapture Halaman Web Menjadi File PDF Otomatis, Convert Web Page ke PDF Siap Download

Harus penulis akui, web ini sangat-sangat keren dan bermanfaat. Karena mampu mengcapture atau SnapShot suatu Halaman Web menjadi File PDF siap Download.

Sangat berguna jika kita ingin menyimpan suatu halaman web yang panjang, dan mungkin banyak gambarnya menjadi satu dokumen. Silakan buka saja http://www.pdfonfly.com/ :

Setelah googling dengan keyword "html to pdf" ternyata banyak juga situs lain yang menawarkan layanan serupa macam http://www.html-to-pdf.net, http://www.html-pdf-converter.com/ dan masih banyak lagi hehe :) Tapi sudahlah semoga berguna ...

Kamis, 04 April 2013

Membuat Click Google Map Android Untuk Mendapatkan Latitude Longitude, OnClick MapView Get Latitude Longitude

Wah susah juga mendapatkan judul yang tepat untuk artikel ini. Intinya, kadang penulis membuat aplikasi Android untuk mendapatkan Latitude dan Longitude dari GPS agar bisa digunakan atau disimpan pada Database. Tetapi bagaimana jika pengguna Aplikasi tidak harus berada di tempat yang ingin diketahui/dicatat Latitude Longitude nya.

Tentu saja harapannya dengan Klik atau Tap langsung di Google Map akan bisa mendapatkan Latitide dan Longitude nya. Pada Google Map Android Versi 2 Cukup Mudah, Kita Bahas Lain Kali pada Artikel yang Lain. Kali ini kita buat Aplikasi tersebut pada Google Map Android Versi 1 dahulu.

Caranya, buat aplikasi Android dengan Platform Google API seperti biasa. Buat Main Activity seperti berikut :

package com.amijaya.androidgooglemaptapgetlatlng;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;

Baca selengkapnya »

Senin, 01 April 2013

Google Memperkenalkan Google Map Treasure, Peta Harta Karun Google Diluncurkan 1 April

Ternyata Google telah menyiapkan kejutan di Hari April Mop / April Fools Day kemarin. Google meluncurkan Google Map Treasure yang dapat dilihat di http://maps.google.com/treasure. Begini tampilannya Peta Indonesia di Jaman Kolonial Belanda, saat Kerajaan-Kerajaan Nusantara Masih Berjaya :

Dan ketika Zoom Full:

Baca selengkapnya »

Langganan: Postingan (Atom)