B-Blog

Intalling Linux, Apache, MySQL, php (LAMP)

noreply@blogger.com (Bambang S.) — Thu, 20 Oct 2011 08:32:00 +0000

Web server telah dibahas pada tulisan sebelumnya. Tapi kali ini saya mencoba untuk membahas instalasi web server di platfor yang berbeda dari sebelumnya. Instalasi kali ini akan berjalan di Ubuntu. Penasaran bagaimana caranya, yuk ikuti step-stepnya.

1. Buka terminal dan ketikkan perintah berikut:

sudo apt-get install lamp-server^

Enter setelah perintah di atas diketikkan dan akan muncul pertanyaan Do you want to continue ? ketikkan saja "y" (tanpa tanda kutip). Secara otomatis ubuntu akan mendownload paket-paket apache, mySQL, dan PHP sekaligus menginstall paket-paket tersebut. Saat instalasi akan muncul form isian untuk password "user" dari mySQL.

2. Lakukan pengetesan server apache dengan mengunjungi htttp://localhost melalui "web browser". Jika instalasi apache sukses maka akan muncul tulisan It works. Kebaca ga ??? Kalo ga kebaca silahkan ke optic shop dulu periksa mata plus beli kacamatanya.

3. Test PHP
Pengetesan PHP dapat dilakukan melalui pemanggilan fungsi phpinfo(). Fungsi ini menampilkan informasi PHP yang terinstall seperti versi dll. Buat file dengan eksetensi .php. misal coba.php. Gunakan perintah berikut untuk membuat file tersebut

sudo vim /var/www/coba.php

tekan "i" lalu ketikkan syntax berikut dalam file coba.php

<?php phpinfo(); ?>

simpan file dengan melakukan escape (tombol "Esc") lalu ketikkan perintah :wq lalu "enter", sekali lagi "enter" ya! bukan "entar", untuk menyimpan dan keluar.

Buka web browser lalu ketikkan http://localhost/coba.php . Pasti kamu dipaksa oleh si browser untuk mendownload file yang telah dibuat tadi.

Agar apache bisa menampilkan apa yang kita inginkan yaitu fungsi phpinfo(), maka ketikkan perintah berikut :

sudo /etc/init.d/apache2 restart

lalu buka kembali halaman http://localhost/coba.php melalui web browser.

4. Install phpMyadmin untuk monitor table mySQL dan aktivitas lain berkenaan dengan database. Ketikkan perintah berikut untuk melakukan instalasi phpMyadmin.

sudo apt-get install libapache2-mod-auth-mysql phpmyadmin

Saat instalasi berjalan anda diminta untuk memilih web server yang akan digunakan secara otomatis oleh phpMyadmin. Pilih apache2, gunakan "space bar" untuk memilih apache2, lalu tekan "enter".
Kemudian akan muncul lagi pilihan untuk menentukan configurasi database yaitu otomatis atau manual. Database ini akan digunakan oleh phpMyadmin, tanpa database tersebut phpMyadmin tidak bisa jalan. Just chose "yes" cause we are a newbie... he..he.. kalo udah expert ya silahkan secara manual create sendiri. Tekan "enter" untuk memilih yes.

Jendela input form akan muncul meminta anda untuk memasukkan password mySQL. Masukkan password mySQL yang tadinya anda tentukan.

5. Tes phpMyadmin.
Tes phpMyadmin yang telah diinstall dengan membuka browser lalu ketikkan alamat berikut http://localhost/phpmyadmin/ .

Installing Bluefish Web Editor

noreply@blogger.com (Bambang S.) — Fri, 14 Oct 2011 05:52:00 +0000

Bluefish sebuah aplikasi yang digunakan sebagai web editor. Bluefish merupakan aplikasi free. Mungkin sebagian orang lebih mengenal Adobe Dreamweaver sebagai editor. Namun bagi sebagian orang untuk membeli aplikasi sekelas Adobe Dreamweaver harus berpikir seribu kali. Hal ini karena harga software ini memang tidak murah. Dan bagi sebagian orang masih tetap ingin menggunakan software Dreamweaver dengan cara bajakan (pirate way). Jadi daripada menggunakan yang illegal mending install bluefish di ubuntu.

Cara mudah sekali untuk instalasi bluefish di Ubuntu. Tapi yang pastikan komputer telah terkoneksi ke internet. Karena proses instalasinya online. Ketikkan perintah berikut di terminal.

sudo apt-get install bluefish

Ketik "y" untuk melanjutkan proses instalasi. Setelah semuanya selesai program bluefish bisa digunakan melalui menu programming lalu klik bluefish.

Untuk update bluefish ke versi yang terbaru tambah repositroy berikut :

deb     http://debian.wgdd.de/ubuntu lucid    main restricted universe multiverse
deb     http://debian.wgdd.de/ubuntu maverick main restricted universe multiverse

Jalankan perintah update diterminal untuk melakukan update bluefish.

sudo apt-get update

Saat update kamu akan melihat pesan error karena cryptographic key belum terinstall di Ubuntu. Maka tambahkan key lalu install Bluefish:

sudo apt-get install wgdd-archive-keyring
sudo apt-get install bluefish

This is it a bluefish ready to ~~eat~~ use.

Menggunakan Slides Sebagai Plugin jQuery di Blogspot

noreply@blogger.com (Bambang S.) — Thu, 13 Oct 2011 07:55:00 +0000

Slides sebuah plugin yang bekerja di framework jQuery seperti yang sudah saya bahas di sini, akhirnya berhasil juga digunakan di blogger. Ternyata ada hal yang luput dari pantauan kenapa selama ini plugin tersebut tidak dapat berjalan di blogspot. Tapi puas rasanya setelah menyaksikan plugin tersebut bisa running di blogspot. Mau tau bagaimana menggunakan plugin tersebut? Yuk mari kita mulai step by step.

Semua code dan gambar yang digunakan dalam step ini merupakan code dan gambar dari slidesjs.com.

1. Panggil framework jQuery

Dimana fungsi panggil framework jQuery akan diletakkan? Nah biasanya
fungsi ini dipanggil diantara syntax <head> dan </head>. Sudah tahu
bagaimana struktur blogspot? Kalau belum maka sebenarnya struktur
blogspot itu adalah seperti ini

<html>
<header>
<title></title>

a. diantara kedua header ini lah ditempatkannya fungsi panggil framework jQuery dan juga tempat meletakkan code javascript.
b. stylesheet (css) juga diletakkan pada bagian ini.
</header>
<body>

syntax2 html dan page element dari suatu blogspot ada diantara dua syntax ini </body>

</html>

Letakkan script berikut pada bagian setelah <header> atau sebelum </header>, jangan letakkan pada bagian di antara <b:skin><![CDATA[/* dan </b:template-skin> pada bagian ini merupakan stylesheet (css). Letakkan script berikut setelah </b:template-skin>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
<script src='http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js' type='text/javascript'/>    
<script src='http://blank017.googlecode.com/svn/slides.min.jquery.js' type='text/javascript'/>

Script di atas juga dapat ditempatkan pada bagian sebelum <![CDATA[/*. Silahkan pilih salah satunya.

2. Pasang plugin slides
Letakkan script berikut tepat di bawah script pemanggilan jQuery pada poin 1 (satu) di atas.

<script>
    //<![CDATA[
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'https://lh5.googleusercontent.com/-YeOA5g-jRAo/TpXNXnbBNPI/AAAAAAAAAUc/W_W_9RAwAcw/s800/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });
        //]]>
</script>

3. Tampilkan melalui blog menggunakan html
Lalu tampilkan gambar dan background dari slide tersebut. Sebagai contoh saya meletakkannya pada bagian header. Silahkan berkreasi sendiri untuk meletakkan picture slider tersebut di blog. Syntax htmlnya sebagai berikut :

<div id='container'>
<div id='example'>
<img alt='New Ribbon' height='112' id='ribbon' src='https://lh4.googleusercontent.com/-gysb1j3YaEM/TpXNYZuhzOI/AAAAAAAAAUg/as40bC0cdyo/s800/new-ribbon.png' width='112'/>
<div id='slides'>
<div class='slides_container'>
<a href='http://www.flickr.com/photos/jliba/4665625073/' target='_blank' title='145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!'><img alt='Slide 1' height='270' src='http://slidesjs.com/examples/standard/img/slide-1.jpg' width='570'/></a>
<a href='http://www.flickr.com/photos/stephangeyer/3020487807/' target='_blank' title='Taxi | Flickr - Photo Sharing!'><img alt='Slide 2' height='270' src='http://slidesjs.com/examples/standard/img/slide-2.jpg' width='570'/></a>
<a href='http://www.flickr.com/photos/childofwar/2984345060/' target='_blank' title='Happy Bokeh raining Day | Flickr - Photo Sharing!'><img alt='Slide 3' height='270' src='http://slidesjs.com/examples/standard/img/slide-3.jpg' width='570'/></a>
<a href='http://www.flickr.com/photos/b-tal/117037943/' target='_blank' title='We Eat Light | Flickr - Photo Sharing!'><img alt='Slide 4' height='270' src='http://slidesjs.com/examples/standard/img/slide-4.jpg' width='570'/></a>
<a href='http://www.flickr.com/photos/bu7amd/3447416780/' target='_blank' title='I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by. | Flickr - Photo Sharing!'><img alt='Slide 5' height='270' src='http://slidesjs.com/examples/standard/img/slide-5.jpg' width='570'/></a>
<a href='http://www.flickr.com/photos/streetpreacher/2078765853/' target='_blank' title='twelve.inch | Flickr - Photo Sharing!'><img alt='Slide 6' height='270' src='http://slidesjs.com/examples/standard/img/slide-6.jpg' width='570'/></a>
<a href='http://www.flickr.com/photos/aftab/3152515428/' target='_blank' title='Save my love for loneliness | Flickr - Photo Sharing!'><img alt='Slide 7' height='270' src='http://slidesjs.com/examples/standard/img/slide-7.jpg' width='570'/></a>                    
        
</div>
<a class='prev' href='#'><img alt='Arrow Prev' height='43' src='https://lh5.googleusercontent.com/-UajygrqjkcY/TpXNVWt2tUI/AAAAAAAAAUE/v1_B-XxFQuE/s800/arrow-prev.png' width='24'/></a>
<a class='next' href='#'><img alt='Arrow Next' height='43' src='https://lh4.googleusercontent.com/-4Ej4rej8BnI/TpXNbs8IZiI/AAAAAAAAAU0/H7iA2afJrKY/s800/arrow-next.png' width='24'/></a>
</div>
<img alt='Example Frame' height='341' id='frame' src='https://lh5.googleusercontent.com/-Em6-MSrymgc/TpXNW2us7MI/AAAAAAAAAUQ/_OrU3KJoWac/s800/example-frame.png' width='739'/>
</div>
<div id='footer'>
<p>For full instructions go to <a href='http://slidesjs.com' target='_blank'>http://slidesjs.com</a>.</p>
<p>Slider design by Orman Clark at <a href='http://www.premiumpixels.com/' target='_blank'>Premium Pixels</a>. You can donwload the source PSD at <a href='http://www.premiumpixels.com/clean-simple-image-slider-psd/' target='_blank'>Premium Pixels</a></p>
<p> 2010 <a href='http://nathansearles.com' target='_blank'>Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href='http://www.apache.org/licenses/LICENSE-2.0' target='_blank'>Apache license</a>.</p>
</div>
</div>

Syntax html tersebut diletakkan di atas syntax

</div>
<b:include name='description'/>

atau di bawah syntax

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>

4. Definisikan tampilan html dengan css untuk menentukan warna, background, posisi dll.

Nah akhirnya kita sampai pada bagian akhir. Copy lalu paste script css berikut di atas syntax ]]></b:skin>.

/*JQUERY-------------------*/
#container {
    width:580px;
    padding:10px;
    margin:0 auto;
    position:relative;
    z-index:0;
}

#example {
    width:600px;
    height:350px;
    position:relative;
}

#ribbon {
    position:absolute;
    top:-3px;
    left:-15px;
    z-index:500;
}

#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}

/*
    Slideshow
*/

#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width:570px;
    overflow:hidden;
    position:relative;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container a {
    width:570px;
    height:270px;
    display:block;
}

.slides_container a img {
    display:block;
}

/*
    Next/prev buttons
*/

#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:-39px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:585px;
}

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(https://lh4.googleusercontent.com/-_B_GNhk-i5I/TpXNYssI1kI/AAAAAAAAAUo/5pFYWub6pzE/s800/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

/*
    Footer
*/

#footer {
    text-align:center;
    width:580px;
    margin-top:9px;
    padding:4.5px 0 18px;
    border-top:1px solid #dfdfdf;
}

#footer p {
    margin:4.5px 0;
    font-size:1.0em;
}

/*
    Anchors
*/

a:link,a:visited {
    color:#599100;
    text-decoration:none;
}

a:hover,a:active {
    color:#599100;
    text-decoration:underline;

}

Silahkan berkreasi sendiri untuk mengembangkannya. Selamat mencoba

See the demo here

Slides plugin jQuery dan Otakku yang dah Panic

noreply@blogger.com (Bambang S.) — Mon, 10 Oct 2011 17:56:00 +0000

jQuery dengan slogannya writeless, do more. Tapi slogan itu menjadi write less, do nothing. Yah i write nothing because of jQuery and i do nothing with my personal blog. Awalnya ingin sekali menggunakan javascript di blog ini. Selain mempercantik juga bisa menghemat space karena adanya fasilitas slide. Browsing di google nemu plugin yang namanya slides. Slides merupakan plugin yang menggunakan jQuery. Patah semangat karena sampai detik ini tidak juga berhasil menggunakan plugin slides di Blog akhirnya jadi write less, do nothing.

jQuery merupakan widget yang dapat digunakan pada halaman web atau blog yang dipadukan dengan html. jQuery dibangun menggunakan bahasa java script. Tidak perlu lagi berulang-ulang menulis program cukup memanggil fungsi jQuery dan menggunakannya di halaman web dan melakukan lebih banyak hal cukup dengan satu fungsi tersebut. Untuk lebih jelasnya apa itu jQuery berikut saya kutip dari wikipedia :

"jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan GPL.
Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka ^[1]. Microsoft awalnya mengadopsinya dalam Visual Studio ^[2] untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka."

jQuery digunakan dengan menempatkan file jQuery tersebut dalam doc root web atau dapat juga diambil dari pihak ketiga yang kemudian dipanggil melalui syntaq html. Jika anda pernah membuka halaman kompas.com atau vivanews.com dan mungkin situs warta berita lainnya di halaman utamanya selalu ada gambar dengan caption yang berganti secara otomatis atau gambar dengan pilihan 1, 2, 3, 4, 5 dst yang jika diklik akan berubah. Nah seperti itulah salah satu penggunaan jQuery.

Ujicoba penggunaan jQuery menggunakan plugin slides di blog ini ternyata belum membuahkan hasil. But i'm not surrender yet, saya masih yakin pasti berhasil. Dan mudah-mudahan bisa berbagi step by step di blog ini jika benar-benar sudah jalan. Just wait and see, keep update.

What do you call this ?

noreply@blogger.com (Bambang S.) — Fri, 07 Oct 2011 15:47:00 +0000

Pasti pada belom pernah ngeliat benda beginian! Aku juga bingung menamai benda satu ini. Dibilang "Laptop" mana LCDnya, dibilang desktop mana CPUnya, yang penting masih bisa dipake buat kerja. Keliatan kucel banget laptop Toshiba dengan bekas-bekas tangan di sisi kanan dan kiri ampe hilang warna aslinya, yang tadinya silver jadi item dah.

Sebenarnya laptop ini masih bagus di sisi daleman. Wireless masih nyala dan manteng kalo nangkep sinya WiFi, processor masih berdetak dengan detakan 2 GHz, media penyimpanan masih bisa menampung file-file tanpa ada bad sector, Random Acces Memory a.k.a RAM masih mumpuni untuk menyimpan temporary data dan GUI yang tersimpan sementara, baterai masih rada awet. Tapi sayang LCDnya kagak bener sering flicker (kedap-kedip kaya lampu diskotik). Udah diakali dengan nyumpel double tape dan aha ternyata sukses tapi hanya untuk 2 bulanan lalu muncullah dead pixel (nah loh mampus dahhhh).

Kupastikan untuk membongkar lagi nih laptop alhasil jadi kaya gambar di atas. Saat ngebongkar ternyata besi pegangan yang menjadi tumpuan layar LCD bengkok lalu patah. Coba perhatiin bener-bener, nah bakalan ketemu tuh bagian mana yang patah. Jika sudah ketemu jawabannya jangan lupa kirimkan jawaban anda dengan mengetik ans spasi "jawaban" dan kirim ke Ichisuke Fujioka dan Hisashige Tanaka as founder of toshiba. Biar dia tau ternyata hasil karyanya udah gw kulitin dan keliatan jeroannya kaya gambar di bawah. Hik...hik... sedih juga sih ga bisa mobile lagi.

What Best Screen Resolution for Designing a Web

noreply@blogger.com (Bambang S.) — Mon, 26 Sep 2011 16:16:00 +0000

Berapa ukuran resolusi layar untuk mendisain sebuah web? Perangkat personal computer memiliki ukuran layar yang berbeda-beda. Tentunya itu akan berpengaruh terhadap hasil desain web yang kita buat. Saat mendesain blog ini layar yang digunakan adalah 14" widescreen. Jika menggunakan layar lebar ternyata banyak area kosong pada sisi kiri dan kanan pada layar. Dan merasa blank screen sepertinya mubazir untuk tidak diamanfaatkan. Dengan pertimbangan seperti itu ternyata beberapa floating image dan aplikasi lain ditampilkan pada sisi kanan dan kiri. Setelah mulai melakukan posting dan melihat hasilnya semua terlihat bagus dan tertata sesuai dengan keinginan. Tapi baru disadari setelah coba-coba iseng membuka halaman blog di komputer kantor (hi..hi... manfaatin fasilitas negara buat ngecek blog.) ternyata main column tertutup oleh floating image dan banner pada sisi kanan atau kiri.

Sampai saat ini saya belum menemukan ukuran ideal sebuah situs. Tapi dari hasil browsing ternyata persentasi pengguna personal komputer pada saat ini cenderung untuk menggunakan layar lebar (widescreen). Referensi tersebut didapat dari halaman berikut :

http://www.w3schools.com/browsers/browsers_display.asp

Bagaimana dengan pengalamanmu mendesain sebuah web template?

ClipGrab, Aplikasi untuk Mendownload Video dari Online Streaming

noreply@blogger.com (Bambang S.) — Fri, 16 Sep 2011 13:24:00 +0000

Menemukan suatu video menarik di youtube tapi tidak tahu bagaimana menyimpannya dalam media penyimpanan? ClibGrab merupakan aplikasi untuk mendownload online streaming dari youtube. Tidak hanya youtube ternyata ClibGrab juga mendukung beberapa situs berikut :

YouTube
Clipfish
College Humor
Daily Motion
MyVideo
MySpass
Sevenload
Tudou
Vimeo

Untuk menginstall aplikasi ClibGrab di ubuntu cukup mudah. Add 3rd party repository ubuntu, update lalu install seperti berikut :

sudo add-apt-repository ppa:clipgrab-team/ppa
sudo apt-get update && sudo apt-get install clipgrab

How To : Membatasi Bandwidth menggunakan Squid

noreply@blogger.com (Bambang S.) — Tue, 13 Sep 2011 04:39:00 +0000

Squid menyediakan fitur untuk melakukan pembatasn bandwidth pada suatu jaringan komputer yang terhubung ke internet. Delay Pools merupakan fitur yang digunakan untuk bandwidth limitation (pembatasan bandwidth) di squid.

Berikut adalah langkah-langkah yang harus dilakukan untuk melakukan pembatasan bandwidth

Jangan batasi bandwidth untuk jaringan local. Di jaringan lokal kita biasa menggunakan file sharing maupun printer sharing. Alangkah baiknya untuk jaringan lokal tidak perlu dilakukan pembatasan bandwidth. Tambahkan rule berikt pada konfigurasi squid.com

acl magic_words1 url_regex -i 192.168

Segmen ip di atas untuk ip class c, untuk yang menggunakan ip class A (seperti 10.10) silahkan menyesuaikan.

Tentukan jenis / tipe file yang akan dibatasi bandwidthnya.

acl magic_words2 url_regex -i frp .exe .mp3. vqf .tar.gz .rpm .zip .rar .avi .mpeg .mpe .mpg .ram .rm .iso .raw .wav .mov .mkv

Pastikan rule di atas dalam satu bari (tanpa enter). Pembatasan tidak dilakukan untuk jenis atau tipe file *.html *.jpg *.jpeg dan file yang serupa karena tidak membutuhkan banyak bandwidth.

Tentukan waktu pembatasan bandwidth. Traffic yang padat biasanya terjadi pada siang hari. Maka lakukan pembatasan pada waktu-waktu yang pada.

acl day time 09:00-16.00

Kita mempunyai delay pool yang berbeda yaitu untuk jaringan lokal dan yang ke internet (magic_words1 dan magic_worlds2 yang telah didefinisikan di atas)

delay_pools 2

Delay pool pertama

delay_class 1 2
delay_paramaeters 1 -1/-1 -1/-1
delay_class 1 allow magic_words1

-1/-1 berarti tidak ada pembatasn bandwidth

Delay pool kedua
Kita akan membatasi bandwidth dari file yang didefiniskan pada magic_words2

delay_class 2 2
delay_parameters 2 100000/150000 20000/120000
delay_acces 2 allow day
delay_acces 2 deny !day
delay_acces 2 allow magic_words2

Parameter 100000/150000 merupakan nilai dari seluruh jaringan
Parameter 20000/120000 merupakan nilai untuk satu client / komputer
Jika file yang didownload telah melebihi 150000 byte maka satu komputer akan tetap melakukan proses download dengan kecepatan yang menurun menjadi 20000 byte/s = 20kB/s.

Source : www.faqs.org

How To : Installing Gnome 3 di Ubuntu 10.04 Lucid Lynx

noreply@blogger.com (Bambang S.) — Sat, 10 Sep 2011 16:06:00 +0000

Buka terminal dan jalankan perintah :

sudo apt-get install gnome-shell


export GNOME_SHELL_DISABLE_TFP=1 (Hanya untuk Intel Graphic Cards!)

gnome-shell --replace

-Untuk uninstall
sudo apt-get remove gnome-shell

Selamat mencoba

Best Regard
B. Supriadi

Belajar HTML part 2 : Mengenal Tag-tag HTML

noreply@blogger.com (Bambang S.) — Sat, 10 Sep 2011 12:28:00 +0000

Pada tutorial HTML sebelumnya sebenarnya kita sudah menggunakan beberapa dasar tag HTML di dalam dokumen dasar HTML. Ada banyak tag html untuk mendukung para designer web maupun programmer web untuk membangun sebuah situs web. Contoh tag dasar yang digunakan dalam dokumuen dasar html adalah tag <p> dan tag lainnya termasuk juga <html>. Selain tag tersebut berikut dijelaskan beberapa tag html yang dapat digunakan.

No	Tag HTML	Keterangan
1	<!-->	Untuk membuat komentar
2	<A>	Untuk membuat link (tautan)
3	<ADRESS	Menentukan informasi alamat
4	<APPLET>	Memasukkan applet
5	<AREA>	Mendefinisikan koordinat dari suatu peta
6	<B>	Menebalkan text
7	<BASE>	Untuk menentukan URL dari dokumen yang digunakan untuk menghasilkan setiap URL relatif
8	<BASEFONT>	Untuk mengubah ukuran font default di seluruh seluruh halaman
9	<BIG>	Untuk membuat teks lebih besar dari teks sekitarnya
10	<BLOCKQUOTE>	Untuk menunjukkan bahwa blok teks adalah kutipan
11	<BODY>	Untuk menyertakan bagian utama dari suatu halaman web
12	<BR>	Untuk membuat line break
13	<CAPTION>	Untuk membuat keterangan untuk tabel
14	<CENTER>	Untuk membuat ketengah gambar, teks, dan elemen lainnya
15	<CITE>	Untuk menunjukkan bahwa teks adalah kutipan singkat
16	<CODE>	Untuk menunjukkan teks adalah kode komputer
17	<DD>	Untuk menunjukkan deskripsi definisi dalam daftar definisi
18	<DFN>	Untuk menunjukkan definisi istilah ketika digunakan untuk pertama kalinya
19	<DIR>	Untuk membuat daftar direktori
20	<DIV>	Untuk membagi sebuah halaman ke bagianbagian logis
21	<DL>	Untuk membuat daftar definisi
22	<DT>	Untuk menunjukkan istilah yang akan didefinisikan dalam daftar definisi
23	<EM>	Untuk menekankan teks, biasanya dalam huruf miring
24	<FONT>	Untuk mengubah ukuran, wajah dan warna huruf individu atau katakata
25	<FORM>	Untuk membuat formulir input
26	<H1>	Untuk membuat header tingkat 1
27	<H2>	Untuk membuat header tingkat 2
28	<H3>	Untuk membuat header tingkat 3
29	<H4>	Untuk membuat header tingkat 4
30	<H5>	Untuk membuat header tingkat 5
31	<H6>	Untuk membuat header tingkat 6
32	<HEAD>	Untuk membuat bagian header dari halaman web
33	<HR>	Untuk membuat garis horizontal
34	<HTML>	Untuk menentukan dokumen sebagai dokumen HTML
35	<I>	Untuk menampilkan text dalam huruf miring
36	<IMG>	Untuk menempatkan gambar pada halaman web
37	<INPUT>	Untuk membuat elemen form seperti input field, tombol, dll
38	<ISINDEX>	Untuk membuat pencarian primitiv
39	<KBD>	Untuk menandakan text dari keyboard
40	<LI>	Untuk membuat daftar item
41	<LINK>	Untuk mendefinisikan hubungan antara dokumen dan menghubungkan ke styel sheet eksternal
42	<MAP>	Untuk membuat peta gambar sisi klien
43	<MENU>	Untuk membuat daftar item menu
44	<META>	Untuk membuat halaman otomatis melompat ditambah juga digunakan untuk informasi dokumen
45	<OL>	Untuk membuat daftar ordered
46	<OPTION>	Untuk membuat options individu dalam form menu
47	<P>	Untuk membuat paragraf baru
48	<PARAM>	Untuk mentransfer parameter ke applet
49	<PRE>	Untuk membuat text terformat
50	<SAMP>	Untuk menampilkan teks sampel yang harus digunakan secara harfiah
51	<SCRIPT>	Untuk membuat inline script
52	<SELECT>	Untuk membuat menu dalam form
53	<SMALL>	Untuk membuat text lebih kecil dari text disekitarnya
54	<STRIKE>	Untuk menampilkan text yang tercoret (sama dengna S)
55	<STRONG>	Untuk menekankan text, biasanya dalam huruf tebal
56	<STYLE>	Untuk mengatur informasi style
57	<SUB>	Untuk membuat subscript
58	<SUP>	Untuk membuat superscript
59	<TABLE>	Untuk membuat table
60	<TD>	Untuk membuat sel biasa dalam tabel
61	<TEXTAREA>	Untuk membuat area blok untuk input text dalam form
62	<TH>	Untuk membuat sel header di tabel
63	<TITLE>	Untuk membuat judul dokumen
64	<TR>	Untuk membuat baris baru dalam tabel
65	<TT>	Untuk menampilkan text dalam font monospaced teletype
66	<U>	Untuk membuat garis bawah pada text
67	<UL>	Untuk membuat list yang tidak urut
68	<VAR>	Untuk menunjukkan text adalah variable

source : htmltutorial.ca 

Install Firefox 6 di Ubuntu

noreply@blogger.com (Bambang S.) — Sat, 10 Sep 2011 07:16:00 +0000

Ubuntu lucid lynx secara default telah menyertakan browser firefox dalam paket instalasinya. Namun firefox yang disertakan dalam paketnya merupakan firefox versi 3. Lalu apakah dengan melakukan update dan upgrade di ubuntu bisa mengganti firefox v. 3 ke v. 6? Ternyata tidak, perlu tambahan software source di Ubuntu. Langkah-langkah untuk update firefox di Ubuntu sebagai berikut :
1. Remove / Uninstall firefox versi sebelumnya dengan perintah

sudo apt-get remove firefox

2. Add / Tambah 3r party repository di Ubuntu dan install firefox

sudo add-apt-repository ppa:mozillateam/firefox-stable
sudo apt-get update
sudo apt-get install firefox

Gampang bukan ??

Internet Connection

noreply@blogger.com (Bambang S.) — Fri, 09 Sep 2011 03:12:00 +0000

Rada heran sembari nge-print invoice tagihan BHP trus buka browser kok kayanya rada kencengan. Penasaran langsung buka monitoring software buat client yang akses ke jaringan internet via sqstat. Aplikasi ini dapet dari url http://samm.kiev.ua/sqstat/ bikinan om Alex Samorukov. Lumayanlah buat tools monitoring. Buka browser langsung ketik alamat ini,

http://192.168.10.1/sqstat

Nah yang online cuma itungan jari (coba plototin noh gambar di bawah)

Ehmm jumat ini topi jerami da keluar lom ya???

Best Regard
B. Supriadi

Backup Data di Blog Menggunakan Blogger Backup

noreply@blogger.com (Bambang S.) — Thu, 08 Sep 2011 13:06:00 +0000

Bisakah di Blogger a.k.a Blogspot kita melakukan backup data?? Pertanyaan itu terlintas secara tiba-tiba dibenak ini ! Weeeeee ada apa gerangan? Pertanyaan itu muncul karena timbul keinginan untuk meng-hosting webblog ini ke hosting-an yang berbayar. Weeee apa lagi itu hosting?

Hosting (menurut terjemahaan penulis sendiri) adalah tempat kita meletakkan file-file web atau blog, baik itu content (isi) maupun template dari web atau blog. Kira-kira begitulah. Nah jika kita menggunakan blogger maka semua file template dan isi tulisan (posting) kita berada di servernya blogger itu dan it's free of charge tentunya. Lalu apa keuntungan kita menghosting di tempat yang berbayar tentunya keleluasan dalam melakukan customisasi dari web atau blog. Banyak layanan yang bisa digunakan di hosting berbayar, salah satu contohnya adalah penggunaan database seperti mySQL.

Selain alasan tersebut just in case blog kita dibaned atau ditutup oleh blogger, nah secara instan kita bisa mengambil tulisan kita dan mengupload kembali ke blogger baru.

Download aplikasi / program berikut :

http://www.ziddu.com/download/16317534/BloggerBackupSetup.1.0.9.23.zip.html

Install program dan ikuti step-stepnya. Lalu jalankan program dari start menu. Tampilan jendela program akan tampak seperti gambar berikut :

Klik tanda segitiga pada bagian kanan dari tulisan "Availabe blogs". Cuma ada satu pilihan [Add/Update/Remove Blogs], pilih menu tersebut. Akan muncul jendela baru lalu isi form Blogger user ID dan blogger password. Login into blog dan klik tombol OK. Lalu pada text "Available blogs" pilih menu segitiga kembali dan blog yang akan dibackup akan muncul pada menu tersebut. Secara default file backup akan disimpan di direktori /My Documents/Blogger Backup. Hal yang menarik dari aplikasi ini
adalah comment yang ada pada setiap post juga dapat dibackup. Untuk melakukan backup comment ini centang option "Save comments?".
Selamat mencoba. Mudah-mudahan bermanfaat.

MacBuntu, Merubah Tampilan Ubuntu Seperti Macintosh

noreply@blogger.com (Bambang S.) — Thu, 08 Sep 2011 07:53:00 +0000

Macintosh memiliki tampilan GUI yang menarik. Namun dengan harga yang ditawarkannya mungkin sebagian kita akan terasa berat. Tapi untuk sekedar merasakan tampilan GUI Mac bukan merupakan hal yang mustahil.

Penasaran bagaimana caranya ???

Terimakasih atas rasa penasarannya dan atas kerja keras jemarinya yang telah menscroll hingga sejauh ini. Hi..hi..hi..
Download filenya di sini :

http://sourceforge.net/projects/macbuntu/files/macbuntu-10.04/v2.3/Macbuntu-10.04.tar.gz/download

Buka terminal (kaya preman aja, mainannya di terminal) dan pindah ke direktori tempat file Macbuntu disimpan.
Cara pindah ke direktori sbb (file hasil downloadan ada di folder Downloads) :

cd Downloads/

Lalu extract file dengan perintah :

tar xzvf Macbuntu-10.04.tar.gz

Pindah ke direktori hasil ekstraksi file Macbuntu-10.04.tar.gz dengan perintah berikut :

cd Macbuntu-10.04/

Pastikan komputer sudah terkoneksi ke jaringan internet, lalu eksekusi perintah instalasi berikut :

./install.sh

Jika ingin kembali ke default GUI Ubuntu cukup uninstall program dengan perintah berikut :

$ cd ~/.macbuntu/10.04-2.3/
$ ./uninstall.sh

Selamat mencoba, silahkan comment jika ada kendala dalam instalasi.

Merekam Aktivitas Desktop di Ubuntu (Take a Screen Shoot of your Desktop)

noreply@blogger.com (Bambang S.) — Wed, 07 Sep 2011 03:07:00 +0000

Aplikasi yang dapat merekam aktivitas desktop bagi sebagian orang sangat berguna. Apalagi bagi seorang tutor terutama untuk design grafis, arsitek dll untuk membuat tutorial.

Ubuntu menyediakan aplikasi untuk mengambil atau mencapture desktop. Aplikasi tersebut bernama recordMyDesktop. Untuk menginstal aplikasi tersebut buka terminal melalui accessories lalu terminal dan ketikkan perintah berikut :

sudo apt-get install recordmydesktop gtk-recordmydesktop

Untuk menjalankan aplikasi ketikkan perintah :

recordmydesktop

Untuk aplikasi GUI-nya dengan perintah :

gtk-recordMyDesktop

atau melalui menu Sound and Video lalu klik gtk-recordMyDesktop

Instalasi Modem AHA di Ubuntu (Aha Vibe)

noreply@blogger.com (Bambang S.) — Mon, 05 Sep 2011 17:42:00 +0000

Instalasi modem AHA di Sistem Operasi Windows mungkin sesuatu yang tidak membutuhkan effort yang lebih. Tinggal colok modem lalu klik aplikasi autorun yang muncul (berupa pop up windows) lalu ikuti langkah instalasinya and then Finish. Yeahhh.. that's it so simple to do it. Dengan mudah kita bisa berselancar mengarungi dunia maya.

Nah buat pecinta Ubuntu tentu butuh energi extra untuk melakukan instalasi modem AHA. Tapi jangan putus asa sebelum mencoba, karena keputus-asaan hanya untuk orang yang berpaling dari rahmatNya. Hi..hi.. ngalor ngidul.

Ok sebelum melanjutkan step-stepnya. Silahkan sediakan air putih segelas just in case setelah semua step-step dijalani ga bisa juga maka kamu tinggal nyiram laptopmu dengan segelas air putih tadi (but i don't really recomend it)

1. Sistem Operasi (Operating System) Ubuntu Lucid Lynx a.k.a Ubuntu 10.04 (untuk ubuntu seri lain silahkan menyesuaikan depedencies filenya)
2. Install aplikasi wvdial dengan perintah sebagai berikut :

sudo apt-get install wvdial

Aplikasi ini digunakan untuk dial secara Point-to-point Protocol ke modem yang berada di remote (operator AHA tentunya)
Kalo belum terkoneksi ke internet silahkan searching via mbah Google untuk file wvdial_1.60.1+nmu2_i386.deb . Lalu install di Ubuntu.
3. Colok modem. Modem akan dikenali sebagai perangkat optic (CD-ROM). Maka untuk menjadikannya sebagai modem lakukan klik kanan pada gambar icon aha yang berwarna hijau lalu eject. Icon seperti pada gambar berikut :

Coba cek apakah ubuntu sudah mengenali modemnya tau belum dengan perintah berikut :

ls /dev/ttyUSB*

jika berhasil akan muncul text berikut :

/dev/ttyUSB0 /dev/ttyUSB1 /dev/ttyUSB2

Atau untuk mengetahui modem sudah terdeteksi atau belum silahkan cek melalui Network Manager seperti gambar berikut :

Sebuah modem CDMA terdeteksi pada network manager

Jika modem belum terdeteksi coba eksekusi perintah berikut :

sudo modprobe usbserial vendor=0x201e product=0x2009

3. buka file wvdial.conf menggunakan editor dengan perintah berikut :

sudo gedit /etc/wvdial.conf

Copy dan paste text berikut ke dalam file wvdial.conf

[Dialer Defaults] Init = ATZ Init = ATQ0 V1 E1 S0=0 &C1 &D2 +FCLASS=0 Modem Type = USB Modem Baud = 115200 Modem = /dev/ttyUSB0 Phone = #777 Username = aha@aha.co.id Password = aha New PPPD = yes Stupid Mode = 1

4. Lakukan koneksi dengan perintah sudo wvdial . Jika berhasil maka komputer akan mendapatkan ip seperti berikut :

blank017@blank017:~$ sudo wvdial
--> WvDial: Internet dialer version 1.60
--> Cannot get information for serial port.
--> Initializing modem.
--> Sending: ATQ0 V1 E1 S0=0 &C1 &D2 +FCLASS=0
ATQ0 V1 E1 S0=0 &C1 &D2 +FCLASS=0
OK
--> Modem initialized.
--> Sending: ATDT#777
--> Waiting for carrier.
ATDT#777
CONNECT 3100000
--> Carrier detected. Starting PPP immediately.
--> Starting pppd at Mon Sep 5 23:54:37 2011
--> Pid of pppd: 4614
--> Using interface ppp0
--> local IP address 10.41.32.226
--> remote IP address 172.19.234.48
--> primary DNS address 10.8.15.15
--> secondary DNS address 10.8.17.4

5. Yatta. Finally AHA sudah bisa digunakan di Ubuntu. Jika mendapati komputermu tidak terkoneksi sama sekali silahkan dengan azimat air putih tadi untuk mandiin kompimu.

Software Retail Penjualan Pulsa

noreply@blogger.com (Bambang S.) — Wed, 03 Aug 2011 07:37:00 +0000

Udah lama ga posting di blog ini, iseng-iseng searching perangkat lunak buatan anak negeri ternyata nemu software buat pengisian pulsa melalui komputer. Sebenernya sih konvensional bermodalkan handphone sebagai tools sudah bisa untuk transaksi pengisian pulsa. Tapi menggunakan komputer tentunya lebih elegant dan pembukuan jadi lebih gampang. Karena dilengkapi feature-feature buku kas, pengecekan saldo pulsa di chip dan transaksi-transaksi lainnya.

Nah mending langsung menuju ke TKP aja deh.
Coba kunjungi situs ini http://teamhacker.4ulike.com/t185-software-retail-pulsa-counter-pulsa-gratis

But use it as your own risk karena memang hasil crackan. Kalo mau aman mending langsung kunjungi situs developernya. Software tersebut dibandrol dengan harga Rp. 1.500.000, - . Ternyata software tersebut tidak hanya untuk pengisian pulsa tapi juga untuk transaksi jual beli HP dll. Cek it dot di sini bro.

Nasehat Spiritual

noreply@blogger.com (Bambang S.) — Mon, 02 May 2011 15:57:00 +0000

Sudah beberapa puluh menit dari masuknya waktu zuhur saat itu. Aku berada di pusat perbelanjaan yang tidak biasa aku kunjungi. Perlu sedikit usaha untuk menemukan mushalla guna menunaikan kewajiban sebagai hambaNya. Aku berusaha menuju basement karena biasanya mushalla berada pada lantai itu, tapi hasilnya Nihil. Sayangnya tidak ada petugas keamanan yang bisa kutanyai, ingin bertanya kepada pengunjung tapi aku tidak yakin mereka tau. Papan penunjuk arah juga tidak terpasang di pusat perbelanjaan yang memang tidak begitu ramai. Pusat perbelanjaan ini sepertinya sudah kehilangan pengunjungnya karena bermunculannya pusat-pusat perbelanjaan lain yang mampu menarik pengunjung untuk datang. Bangunannya cukup megah tapi sudah tidak terawat dari luar saja bisa terlihat cat yang sudah mengelupas dan pudar sehingga kelihatan buram. Sembari terus mencari aku bertemu dengan petugas cleaning service. Aku menaiki escalator yang sudah tidak berfungsi, akhirnya satu demi satu anak tangga terpaksa aku naiki dan akhirnya aku menemukannya sesuai petunjuk petugas cleaning service itu.

Sungguh terasa lega jika kewajiban sudah terpenuhi. Setelah menunaikan ibadah aku bergegas keluar dan duduk di sebuah kursi sembari memasang alas kaki. Disebelahku duduk seorang Bapak-bapak yang tadi menolak untuk berjamaah karena dia seorang musyafir yang akan menunaikan shalat ashar yang dijamak ke zuhur, sementara aku baru akan menunaikan shalat zuhur.

Kami berkenalan dan berbincang-bincang tanpa beranjak dari kursi itu. Ya suasana mushalla tidak ramai hanya beberapa orang saja yang beribadah di situ, sehingga kami tidak sungkan untuk menguasai kursi itu berdua saja. Dalam perbincangan Bapak itu mengajukan pertanyaan kepadaku untuk menerka berapa usinya. Aku berusaha menjawab sesuai dengan pengamatan terhadap ciri-ciri fisik orang tersebut. Sekitar 45an ujarku. Tapi ternyata beliau adalah pensiunan pegawai di salah satu instansi pemerintah, ya baru saja pensiun sekitar 1 tahun. Tentu kamu bisa menerka berapa usianya! Lalu aku bertanya apa yang membuat Bapak tampak begitu muda? Dengan mudah beliau menjawab "shalat".

Disamping beliau rajin minum air putih setiap pagi ternyata shalat merupakan salah satu bentuk dari yoga bagi beliau. Memang aku pernah mendengar bahwa gerakan shalat merupakan gerakan relaksasi yang akan merilekskan otot-otot kita. Beliau memberi penjelasan tentang gerakan-gerakan shalat dan mempraktekkan langsung posisi yang benar dalam shalat. Salah satunya posisi kaki yang terbuka lurus selebar bahu saat berdiri dalam shalat dan juga posisi punggung yang datar yang katanya itu akan menarik otot-otot punggung yang tegang. Dan banyak lagi gerakan-gerakan yang beliau ceritakan seperti berikut :

Menguatkan otot dan persendian, sebab gerakan shalat menjadikan semua persendian dan otot manusia bergerak
Menguatkan tulang punggung, mencegah agar tidak kering dan bengkok
menguatkan kondisi sendi-sendi kaki
Gerakan sujud dalam shalat juga memiliki manfaat yang besar. Di antaranya adalah mencegah penumpukan lemak dan menguatkan urat perut dan memperbaiki kinerja pencernaan
Bacaan-bacaan dalam shalat juga berfungsi sebaga latihan pernafasan yang sangat baik bagi kesehatan
Menjadikan fisik manusia secara umum berada dalam kondisi lebih sehat dan menunda penuaan
Sujud yang dilakukan agak lama memiliki manfaat untuk menguragi tekanan darah tinggi
Akan membuat seseorang tidak rentan terserang penyakit hati, membuat peredaran darah menjadi noramal dan sehat, dan mencegah kenaikan kadar kolestrol dalam darah
Prilaku dan sikap hidup mereka yang melakukan shalat dengan benar akan sangat membantu kondisi kesiapannya dalam mengahadapi gangguan yang bersifat psikologis.

Semua itu pernah aku dengar tapi kali ini Gusti Allah mengingatkanku melalui beliau untuk menjalankan shalat dengan benar, khusuk dan secara tumakninah. Beliau juga menyampaikan bahwa hanya sedikit orang yang shalat dengan penuh penghayatan. Ya mungkin ada benarnya juga karena sebagian kita mendapatkan Islam itu sebagai Islam keturunan bukan Islam yang kita peroleh dari hasil pencarian jati diri dan usaha yang keras sehingga sebagian dari kita acuh tak acuh akan esensi dari shalat itu. Dan mungkin itu termasuk aku juga. Kadang shalat yang kita jalani adalah shalat yang hanya sekedar membayar kewajiban kita kepada sang khalik.

Shalat merupakan bentuk komunikasi tanpa batas (hijab) manusia kepada Sang Pencipta Allah SWT Tuhan semesta alam. Di dalam shalat seorang muslim dapat berkomunikasi langsung dan bermunajat, bermohon serta mengadukan segala permasalahan dan problema yang dihadapinya kepada Sang Pencipta. Saat melaksanakn shalat, seorang muslim berhadapan langsung dengan Allah SWT bersimpuh di hadapan-Nya tanpa ada satu hijab pun yang menghalangi. Dengan shalat, seorang muslim akan merasakan ketenangan dan kedamaian.

Sangat disayangkan shalat yang penuh dengan doa dan penyerahan diri sepenuhnya manusia kepada Sang Pencipta jika dilakukan dengan tergesa-gesa.

Dalam shalat kita membaca doa iftitah yang didalamnya terkandung bentuk penyerahan diri kita kepada sang Pencipta.
" Inna salaati wa nusukii wa mahyaayaa wa mamaatii lillaahi rabbil 'aalamiin."
Sesungguhnya shalatku, ibadahku, hidupku, matiku hanya semata-mata bagi Allah

Jika benar-benar dihayati maka tidak satupun kita di muka bumi yang menjalankan shalat akan diperbudak oleh jabatan, harta kekayaan wanita dan hal-hal yang bersifat keduniaan. Karena semua yang kita lakukan semata-mata hanya karena Allah SWT Tuhan Semesta Alam.

Setiap shalat kita juga membaca surat Al Fatihah, tapi sedikit sekali yang memahami makna yang terkandung dalam kalimah :
"Iyyaaka na'budu wa iyyaaka nasta'iin"
Hanya kepada-Mu kami meyembah dan hanya kepada-Mu saja kami mohon pertolongan

Merupakan bentuk penyucian dari segala perbuatan yang mensekutukan Allah. Maka sudah sepantasnyalah Allah SWT yang menjadi satu-satunya penolong dalam hidup yang merupakan pengakuan atas kekusaan dan kekuatan Allah, sekaligus bentuk kepasrahan atas segala urusan kepada-Nya. Sehingga segala daya dan upaya yang dilakukan wajib tawakal terhadapNya.

Bacaan shalat merupakan doa lalu kenapa harus tergesa-gesa dalam shalat karena ingin mengerjakan hal lain yang bersifat duniawi sementara bacaan dalam shalat adalah bacaan yang menuntun kita mendapatkan dunia sekaligus akhirat. Salah satunya saat duduk diantar dua sujud kita membaca :
Rabbighfirlii, warhamnii, wajburnii, warfa'nii, warzuqnii, wahdinii, wa'afinii, wa'fu'annii. (Wahai Tuhanku, ampunilah aku, rahmatilah aku, cukupilah aku, angkatlah derajatku, ber rizqilah aku, tunjukilah aku, sehatkanlah aku, dan maafkanlah segala kesalahanku.)

Ada delapan permintaan yang kita ajukan saat duduk diantara dua sujud :
1. Ampunilah aku;
2. Rahmatilah aku;
3. Cukupilah aku;
4. Angkatlah derajatku;
5. Beri Rizqilah aku;
6. Tunjukilah aku;
7. Sehatkanlah aku;
8. Maafkanlah aku.
Semua permintaan inilah yang selama ini kita kejar-kejar di dunia ini. Kalau memang itu yang kita inginkan lalu kenapa harus tergesa-gesa melaksanakan shalat termasuk duduk diantara dua sujud ini.

Itulah Nasehat yang disampaikan beliau. Mungkin Allah ingin mengingatkanku melalui seorang musyafir yang berjumpa di sebuah mushalla di pusat perbelanjaan itu.

Belajar HTML part 1 : Dokumen HTML Dasar

noreply@blogger.com (Bambang S.) — Sat, 26 Mar 2011 14:17:00 +0000

Yuk mari belajar HTML. World Wide Web menggunakan 3 (tiga) teknologi baru yaitu :

HTML (HyperText Markup Language) digunakan untuk menulis halaman web, atau untuk membuat suatu template web.
HTTP (HyperText Transfer Protocol) protokol yang digunakan untuk menstransmisikan halaman-halaman web. Biasanya menggunakan port 80 atau 8080.
Web Browser (ada banyak jenisnya seperti : Safari, ie, firefox. opera, sea monkey, chrome dll), merupakan program yang berada pada client atau pengguna untuk menerima data, menginterpretasikan dan menampilkan hasilnya. Nah apa yang kita lihat pada web browser itu sebenarnya adalah markup yang berantakan tapi web browser menginterpretasikannya membentuk sebuah template yang indah.

Jika kamu punya keinginan mendalami world wide web maka hal pertama yang kudu dipelajari adalah "html".
Sebuah markup sederhana dalam dokumen html disebut dengan nama "tag". Dan sebuah dokument html akan terdiri dari tag berikut :

<html>
<head>
</head>
<body>
</body>
</html>

Sebuah dokumen html selalu dibuka dengan tag <html> dan diakhiri dengan tag </html>. Diantara kedua tag tersebut terdapat dua bagian utama dari sebuah dokumen html yaitu "header" dan "body" yang masing-masing tagnya adalah <header> </header> dan </body>.
Header : merupakan salah satu dari 2 bagian utama dalam halaman html. Pada bagian ini title halaman web ditempatkan dan juga advanced command lain yang akan dijelaskan berikutnya.
Body : merupakan bagian dimana text, link, gambar dan isi web lainnya berada. Merupakan bagian yang lebih banyak ditampilkan saat diakses melalui web browser.
Sehingga sebuah dokumen html sederhana akan seperti ini :

<html>
<head>
<title>contoh dokumen html</title>
</head>
<body>
Hello World!
</body>
</html>

Copy lalu paste kode di atas ke web editor dan simpan dengan nama "helloworld.html" (tanpa tanda petik). Lalu aktifkan "xampp control panel" dan pastikan dokumen html disimpan ke direktori xampp. Baca tulisan ini jika lupa cara menyimpan dokumen html dan cara mengaktifkan xampp.

Nah tampilan dokumen html sederhana tampak seperti gambar di atas.

<p> tag.
Selanjutnya kita akan menggunakan tag <p> merupakan tag paragraf. Apa fungsinya? Daripada sibuk dengan teori mari kita coba langsung.
Copas (copy paste) kode di bawah lalu simpan dokumen html tersebut dengan nama tesparagraf.html :

<html>
<head>
<title>contoh dokumen html</title>
</head>
<body>
Hello World! Ini contoh dokumen html saya.
Saya seorang new bie.
Mohon bantuannya.
</body>
</html>

Jika dilihat menggunakan web browser maka hasilnya akan menjadi berikut :

Kalimat pertama, kedua dan ketiga menyatu menjadi satu. baris saja. Lalu coba copas kode berikut dan simpan dengan nama tesparagraf2:

<html>
<head>
<title>contoh dokumen html</title>
</head>
<body>
<p>Hello World! Ini contoh dokumen html saya.</p>
<p>Saya seorang new bie.</p>
<p>Mohon bantuannya.</p>
</body>
</html>

Hasil priview kode di atas pada web browser akan tampak beda jika dibandingkan dengan tesparagraf.html. Dengan menggunakan tag <p> maka 3 (tiga) baris kalimat tadi tidak menyatu seperti terlihat pada gambar berikut :

Untuk sementara sekian dulu nanti kita lanjutkan lagi belajarnya.

Aplikasi Web Server Gratisan untuk Kamu

noreply@blogger.com (Bambang S.) — Fri, 25 Mar 2011 01:46:00 +0000

Pernah denger kata apache? Oh bukan, bukan American atau suku asli penghuni benua Amerika. Tapi apache yang ini adalah aplikasi web server gratisan. Benda seperti apa sih apache ini? Nah apache merupakan HTTP server yang memungkinkan kamu mengakses file-file web yang tersimpan di hardisk melalui alamat domain atau ip melalui protokol web. Aplikasi ini dikembangkan oleh komunitas dengan source code yang dapat dikembangkan oleh siapapun. Tapi tidak cukup hanya apache untuk dapat membuat situs lalu mensimulasikannya secara offline di komputermu. Ada aplikasi lain yang sudah include apache di dalamnya dan aplikasi-aplikasi lain yang sangat berguna. Ingin tau lebih? just click more.

Aplikasi perangkat lunak yang sudah include apache di dalamnya dan aplikasi-aplikasi lain adalah XAMPP. Xampp versi 1.7.4 terdiri dari beberapa aplikasi berikut :

Apache 2.2.17, sebagai web servernya.
MySQL 5.5.8, merupakan database yang banyak digunakan oleh web programmer
PHP 5.3.5, salah satu bahasa pemrograman web
phpMyAdmin 3.3.9, modul untuk memanajemen database
FileZilla FTP Server 0.9.37, aplikasi untuk upload/download file web ke/dari server hosting
Tomcat 7.0.3

Download installer xampp pada saat tulisan ini saya tulis masih versi 1.7.4. Download filenya di sini . Kalau link di atas broken, kunjungi halaman utama xampp. Tersedia 3 versi yaitu untuk Windows OS, Linux, Mac OS.
Double klik file xampp-win32-1.7.4-VC6-installer.exe yang sudah didownload. Maka sebuah jendela seperti berikut akan terbuka :

Pilihan bahasa cuma ada dua English dan Dutch, but i prefer English lebih karena ga ngerti Dutch he...he...

Setelah tombol OK diklik maka muncul jendela seperti berikut :

Pilih Next untuk melanjutkan instalasi sampai anda bertemu jendela baru dengan tujuan instalasi file. Secara default file akan diinstall ke direktori "C:" tapi aku lebih memilih menggunakan direktori selain "C:" seperti direktori "D:" atau direktori lainnya. Lihat gambar di bawah untuk memilih drive atau direktori selain "C:".

Klik Ok dan selanjutnya muncul jendela berikut :

background aplication

control panel

administrative tools

recomend

service

resource

Bagaimana cara menggunakannya? Nah karena aplikasi ini tidak berjalan sebagai service, aplikasi ini harus diaktifkan melalui Xampp Control Panel. Untuk menjalankan aplikasi bisa melalui desktop dengan klik dua kali pada icon Xampp Control Panel atau melalui start menu lalu apache friends. Lihat gambar di bawah

Xampp Control Panel akan terlihat seperti gambar di bawah. Klik tombol start untuk mengaktifkan web server apache atau aplikasi lain seperti database MySQL jika memang dibutuhkan.

Lakukan running test untuk mengetahui web server yang terinstall. Untuk melakukan pengetesan buka web browser lalu ketikkan address (alamat) berikut : http://localhost . Jika tidak ada masalah pada instalasi XAMPP maka browser akan menampilkan halaman seperti ini :

Lalu dimana letak direktori webnya ? Karena saat instalasi diarahkan ke direktori "D" maka direktori web berada pada direktori tersebut tepatnya pada folder " file:///D:/xampp/htdocs/ " . Pada folder hdocs inilah file template web harus diletakkan sehingga bisa diakses melalui localhost. Contoh kamu mempunya sebuah file dengan ekstensi html dengan nama firsttest.html maka untuk mengakses file ini ketikkan http://localhost/firsttest.html jika file-file web menyatu dalam satu folder misal dengan nama earthy maka akses dengan mengetik http://localhost/earthy.
Selamat mencoba, semoga sukses. Tunggu tutorial selanjutnya tentang bahasa pemrograman html, php dan koneksinya ke database MySQL tentunya dengan menggunakan web server yang sudah terinstall.

"Tulis apa yang kamu kerjakan, Kerjakan apa yang kamu tulis" (by Mr. Alex CCAN PT. Telkom Indonesia Kandatel SUMBAR). This quote really inspired me. So keep following me dan keep supporting me by clicking the advertisement in my blog. Thank.

Customize Your Blog : Mengedit Template Blogger Anda Melalui Web Editor

noreply@blogger.com (Bambang S.) — Wed, 23 Mar 2011 13:36:00 +0000

Blogger memberi keleluasaan bagi penggunanya untuk mengotak-ngatik template-nya. And It's absolutely free. Yahh anda tidak dibebankan biaya untuk melakukan perubahan pada template, semua kode xml dan cssnya bisa diedit secara langsung ataupun kalo ingin mengunduh kode template blogger juga bisa. Ingin mengetahui lebih lanjut bagaimana mengedit kode template blogger melaui web editor ?

Kenapa harus menggunakan web editor kalau sebenarnya menggunakan form yang sudah disediakan oleh blogger kita bisa mengedit template blogger? Alasannya adalah :

kamu tidak perlu repot-repot lagi mencentang "expand widget template" untuk mencari kode dalam form ataupun ingin melakukan pengeditan;
dengan melakukan download kode template blogger dan melakukan pengeditan kode melalui web editor setidaknya kita mempunyai kode backup di komputer;
web editor membantu menemukan syntax program yang tidak kita ingat, beberapa web editor memberi hint atau petunjuk syntax-syntax pada penggunanya.

Nah langkah-langkah untuk melakukan pengeditan kode template blogger melalui program web editor adalah sebagai berikut :

Pastikan aplikasi web editor sudah terinstall di komputer atau laptop. Kalo belum mah sama juga boong he.he.. :-). Ada beberapa aplikasi web editor yang bisa digunakan antara lain adalah : bluefish, wymeditor, adobe dreamweaver, namo, first page dan masih banyak editor yang lain.
Login ke blogger.com dan pilih menu "design" lalu "edit html" dan klik link
Buka aplikasi adobe dreamweaver lalu buka file hasil downloadan melalui menu file open atau buka folder tempat menyimpan file yang sudah didownload (file ini berektensi *.xml) lalu klik kanan dan pilih Edit With Adobe Dreamweaver seperti pada gambar di bawah.

Isi dari file dengan ekstensi *.xml tersebut terlihat seperti berikut :

html, xml, css

javascript

~~ntox~~

Nah sampai pada tahap ini kamu sudah bisa mengedit kode program kamu melalui text editor, dan hint atau petunjuk yang tadi sudah disampaikan di atas tampak seperti gambar berikut :

"Syntax Highlighter"

Setelah selesai melakukan edit program simpan kode program template blogger tersebut melalui menu "file" lalu "save". Upload file dengan ekstensi *.xml yang sudah diedit ke blogger. Klik tombol browse lalu pilih file *.xml dan klik tombol upload.

Sekian step by step untuk edit template blogger menggunakan editor web. Selamat mencoba

Customize Your Blog : Mengganti icon Blogger

noreply@blogger.com (Bambang S.) — Tue, 22 Mar 2011 12:49:00 +0000

Merasa jemu dengan tampilan icon Blogger yang ada di adress bar? Setiap web atau situs memiliki tampilan icon tersendiri pada bagian address bar. Blogger juga memiliki icon pada adress bar. Tapi terkadang kita ingin menampilkan sesuatu yang berbeda dari icon blogger pada umumnya. Bisakah hal itu dilakukan???

Tentu bisa. Caranya gampang sekali. Anda cukup menggunakan kode berikut :

<link href='link icon' rel='SHORTCUT ICON'/>

link icon pada kode program di atas merupakan link gambar atau icon untuk menggantikan icon standar Blogger. Pastikan icon atau gambar yang digunakan berukuran 32px x 32px. Contoh program di atas jika menggunakan link icon sesunggunhnya adalah sebagai berikut :

<link href='http://img527.imageshack.us/img527/6543/image7go9.gif' rel='SHORTCUT ICON'/>

Lalu dimana kode di atas akan ditempatkan? Copas kode di atas sebelum kode </head> . Selamat mencoba

Customize Your Blog : Menggunakan Read More pada Blog

noreply@blogger.com (Bambang S.) — Fri, 11 Mar 2011 17:30:00 +0000

Read more >> merupakan link (tautan) ke halaman posting yang lebih lengkap. Suatu tulisan dapat terdiri dari beberapa paragraf. Paragraf yang banyak dalam tulisan tentu akan memperpanjang hasil penulisan. Bayangkan jika satu halaman blog kamu ada 7 (tujuh) judul yang ditampilkan dan semuanya merupakan tulisan yang panjang, sudah barang tentu tampilan blog terlihat tidak cantik atau menarik secara estetika dan pembaca pun akan letih melakukan scroll untuk menemukan judul artikel yang lain. Nah ada cara untuk mempersingkat tulisan dan dalam tutorial ini juga diulas bagaimana cara menempatkan Read more>> ke kanan dan menambahkan gambar sebagai background dari Read more>>.
New Template Blogger (template blogger yang baru) telah menyediakan widget yang dapat langsung kamu gunakan untuk mempersingkat tampilan artikel yang panjang. Meskipun tampilan artikel singkat tapi pembaca masih tetap bisa membaca keseluruhan artikel dengan meng-klik link Read more>>. Di menu Posting, New Post terdapat beberapa icon menu yang tersedia pada bagian atas yaitu dari undo, redo, function, Bold, Italic dll. Menu Read more>> juga tersedia di situ yaitu berupa kertas yang robek pada bagian tengahnya. seperti yang terlihat pada gambar.

Icon Read more>> dilingkari dengan lingkaran merah dengan inset "Insert jump break" pada gambar di samping. Untuk menggunakan icon tersebut pastikan posisi kursor berada pada posisi antara dua paragraf. Paragraf di atas kursor merupakan batas paragraf yang akan ditampilkan sementara paragraf yang berada di bawah hingga paragraf akhir merupakan paragraf yang tidak akan ditampilkan. Paragraf yang tidak tampil tersebut akan tampil saat link Read more>> diklik.

Icon "insert jump break" saat di-klik akan menghasilkan sebuah garis pembatas antara dua paragraf dalam artikel yang kamu tulis. Contohnya adalah seperti berikut :

Pada gambar di atas garis solid dan garis putus-putus merupakan hasil dari icon "insert jump break" yang tadi di-klik. Setelah artikel di-publish (diterbitkan) maka dua garis tersebut akan berubah menjadi link dengan title Read more>>. Secara default posisi link Read more>> tersebut terletak pada bagian kiri posting. Jika ingin memindahkan posisinya pada bagian kanan maka perlu penambahan kode css pada template blog kamu.

Kode untuk menampilkan link Read more>> adalah sebagai berikut :

<b:if cond="data:post.hasJumpLink">
<div class="jump-link">
<a expr:href="data:post.url + &quot;#more&quot;" expr:title="data:post.title" href="http://www.blogger.com/post-edit.g?blogID=3407276920416895119&amp;postID=1804864959080323252"><data:post.jumptext/></a>
      </div>
</b:if>

Copy code berikut, dan paste pada bagian css template blogger. Bagian CSS pada template merupakan bagian yang berada antara <b:skin><![CDATA[/ dan ]]></b:skin>. Untuk meng-copy kode program di bawah klik dahulu "view plain", lalu copy isi kode pada jendela pop-up yang muncul.

.jump-link a {
 float:right; 
}

Save kode html template blog dan lihat hasilnya. Kamu akan mendapati bahwa link Read more>> akan berada pada sebelah kanan bawah posting artikel. Nah satu langkah untuk menggunakan Read more>> dan memindahkannya pada bagian kanan sudah dilakukan.

Lalu bagaimana cara mengganti tulisan Read more >> dengan sebuah gambar animasi yang menarik ??

Kita akan menggunakan gambar button di atas sebagai pengganti tulisan Read more>> untuk mempercantik tampilan blog. Cari kode berikut :

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

Lalu ganti kode di atas dengan kode berikut :

Earning Money from Web. My Total Earning

noreply@blogger.com (Bambang S.) — Fri, 11 Mar 2011 04:20:00 +0000

Iseng-iseng coba pasang iklan dari layanan pengiklan eh ternyata dapet juga. Tapi Total Earningnya masih dikit banget. Harus terus update content dan permak blog lebih lanjut kayanya nih. Here is my earning ...

I'm rejected by Googel AdSense ...Hik...hik..... :-(

noreply@blogger.com (Bambang S.) — Thu, 10 Mar 2011 06:55:00 +0000

Namanya juga coba-coba, disetujui syukur kalo ga ya musti giat lagi ningkatin traffic ma content blog trus pindah domain dehhhh... It's the rejection letter...