Encoding Decoding Json

untuk mendownload sourcecodenya klik disini 

Menampilkan Data Di XML Kedalam Bentuk Table

Selamat malam,

Halo jumpa lagi dengan saya,bagaimana kabarnya lama nih seminggu baru posting.tiap saya membuat postingan baru itu pasti ada tugas.hehe kalo tidak ada tugas ya tidak posting.kasian banget nih blog saya penuh dengan sarang laba-laba.

Malam ini saya akan membuat postingan tentang bagaimana menampilkan data di XML kedalam bentuk table.XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language) yang merupakan bahasa standar untuk melacak Internet.XML didesain untuk mempu menyimpan data secara ringkas dan mudah diatur. Kata kunci utama XML adalah data (jamak dari datum) yang jika diolah bisa memberikan informasi. XML menyediakan suatu cara terstandarisasi namun bisa dimodifikasi untuk menggambarkan isi dari dokumen. Dengan sendirinya , XML dapat digunakan untuk menggambarkan sembarang view database, tetapi dengan suatu cara yang standar. Membuatnya gak susah kok cuma butuh ketelitian dan fokus dalam membuat kode HTMLnya. Langsung saja buka xampp aktifkan apache'nya lalu buatlah folder penyimpanan xml dan phpnya didalam folder htdocs.

Langkah-langkah untuk membuatnya seperti ini bro :

1. Buat file XML didalam folder dokumen anda dengan extensi .xml dan sourcecodenya dibawah ini,file ini berfungsi sebagai menyimpan informasi dari judul lagu,artis,date.
   
2. Selanjutnya buatlah file Index.php dengan isi sourcecodenya dibawah ini,file ini berfungsi sebagai menampilkan data xml berupa table.
   
3. Selanjutnya jalankan file tersebut pada browser ketikkan localhost/namadirektori maka data yang ditampilkan berupa informasi lagu yang berupa table.
   
   
   

Membuatnya sangat mudah,jika terjadi error pada saat running coba cek kembali kode yang anda ketikkan.
semoga postingan saya bermanfaat bagi nusa dan bangsa,kalo bisa sih seluruh dunia.hehehe

Sumber :
http://id.wikipedia.org/wiki/XML

Membuat Rss Feed Burner Dengan Inputan User

Selamat malam,
Diposting kali ini saya akan membuat rss feed dengan inputan user, RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan (di antaranya dan kebanyakan) situs web berita dan weblog. nah disini kita akan membuat textfield jika diisi dengan sebuah link rss maka akan menampilkan sebuah informasi dari blog yang dituju.
oke langkah langkahnya seperti berikut :

1. Buat alamat rss feed dialamat google feedburner. kemudian login dengan akun gmail anda. lalu masukkan alamat feed yang anda tuju. untuk alamat default dari feeds sendiri kalau kita menggunakan blogspot yaitu http://xxxx.blogspot.com/feeds/posts/default .selanjutnya klik next
   
2. Masukan judul feed anda disini saya menggunakan judul software komputer dan isi feed addresnya untuk anda yang menggunakan blogspot hapus blogspot dan isi sesuai dengan alamat yang anda inginkan, alamat feed saya kasih nama softwaremania1,selanjutnya klik next.
   
3. jika muncul seperti dibawah ini maka proses pembuatan alamat feed anda berhasil jika anda gagal kemungkinan alamat feed anda sudah dibuat,maka anda membuat alamat feed yang lain.kemudian klik next.
   
4. Membuat alamat feed sudah berhasil jika gagal ulangi dari awal.hehehe 
   

Setelah membuat alamat feed terus mau diapain nih kayaknya gak guna,eits jangan keburu dulu masih ada lagi yang kita buat.yaitu membuat file phpnya yang dijalankan melalui tools Xampp jika belum punya silahkan download di sini. buka xampp controlnya di folder C:/xampp/xampp-control.exe dan aktifkan yang Apache saja.

Jika semua sudah selesai selanjutnya buka notepad atau notepad++ saya anjurkan anda menggunakan notepad++ karena memudahkan anda mengetik codingan htmlnya.

Langkah-Langkahnya dibawah ini bro :

1. Buatlah folder pada direktori xampp/htdocs/namafolder. Buat file php dengan sourcecode seperti berikut.simpan dalam folder yang anda buat tadi dan beri nama Index.php 
   
2. Lalu buat file baru lagi dengan sourcecode seperti dibawah ini,simpan dengan nama rssclass.php 
   
   
   
   
3. buka browser anda ketikkan localhost/xxxx , xxx adalah nama direktori yang anda buat tadi pada htdocs.
   

Sekian postingan saya kali ini jika kurang jelas harap dimaklumi,hehehe

maaf kalo kata-katanya agak berantakan dikarenakan saya bukan pembuat syair yang hebat. :D

semoga bermanfaat bagi yang membaca, Aminn

Sumber :
http://id.wikipedia.org/wiki/RSS

CSS (Cascading Style Sheet)

1. TUJUAN

• Memahami konsep dasar CSS dan penggunaannya pada web.
• Memahami konsep dasar Twitter Bootstrap dan penggunaannya sebagai templating pada website.
• Memahami dasar JavaScript dan penggunaannya pada web.
• Memahami dasar jQuery dan penggunaannya.

     2.  DASAR TEORI

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

    3. TUGAS

• Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)
• Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
• Isilah bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI)
• Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman

    4. PEMBAHASAN

copy sourcecode dibawah ini disimpan kedalam notepad++ dengan extensi index.php dan simpan kedalam folder C:\xampp\htdocs\hengky .

<html>
 <head>
  <style type="text/css">
   table{
    border-colapse:colapse;
    border:1px solid black;
   }
   
   #menu{
    height:40px;
    width:960px;
    background:url(bg-nav.jpg) repeat-x;
   }
   
   #menu table{
    border:none;
   }
   
   #menu a{
    color:white;
    text-decoration:none;
   }
   
   #menu a:hover{
    background-color:white;
    color:black;
   }
   
   #menu td{
    height:40px;
    text-align:center;
    vertical-align:middle;
    color:#fff;
    font: bold 14px Candara, Arial, Tahoma;
   }
   
   #isi{
    padding: 10 10 10 10;
   }
   
   #isi p{
    color:black;
    font: 11px Candara, Arial, Tahoma;
    padding-bottom:5px;
   }
   
   #isi img{
    boder: 1px solid black;
    width: 80px;
    height: 100px;
   }
   
   .table-menu{
    vertical-align: top;
    border-colapse: colapse;
    border: 1px solid black;
    background-color: #0066cc;
   }
   
   .footer{
    background-color:yellow;
   }
  </style>
 </head>
 
 <body>
  <table width="70%" align="center">
   <tr>
    <td colspan=2><img src="header.jpg"></td>
   </tr>
   <tr>
    <td colspan=2>
     <div id="menu">
      <table width="100%">
       <tr>
        <td align="center"><a href="">Depan</a></td>
        <td align="center">Profil</td>
        <td align="center">Produk</td>
        <td align="center">Kontak</td>
        <td align="center">Forum</td>
       </tr>
      </table>
     </div>
    </td>
   </tr>
   <tr>
    <td width="70%">
     <div id="isi">
      <h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>
      <img src="susu.jpg"/>
      <p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina. 
      Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
      Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
      Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
      <p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
      Dalam segelas susu terdapat antara lain:
      <ul>
       <li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
       <li>Zat besi, mempertahankan kulit tetap bersinar.</li>
       <li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
       <li>Kalsium, menguatkan tulang.</li>
       <li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
       <li>Yodium, meningkatkan kerja otak cepat.</li>
       <li>Seng, menyembuhkan luka dengan cepat.</li>
       <li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
      </ul>
      </p>
     </div>
    </td>
    <td width="30%" class="table-menu"></td>
   </tr>
   <tr>
    <td colspan=2 height=50 class="footer">
     <p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
    </td>
   </tr>
  </table>
 </body>
</html>

jalankan xampp pilih start pada bagian apache.kemudian jalankan browser dengan alamat localhost/hengky kemudian dengan otomatis muncul seperti berikut.

A. Mengubah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama) dengan cara menambahkan sintax css dibawah ini  diatas sintax </style>

#isi ul{
    color:black;
    font: 11px Candara, Arial, Tahoma;
    padding-bottom:5px;
   }

Simpan dan refresh web browser tadi. setelah selesai maka isi list akan sama dengan paragraf pertama dengan font dan size yang sama.

B. Mengubah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.dengan cara mengubah sintax html seperti berikut :

        <td align="center"><a href="">Depan</a></td>
        <td align="center"><a href="">Profil</a></td>
        <td align="center"><a href="">Produk</a></td>
        <td align="center"><a href="">Kontak</a></td>
        <td align="center"><a href="">Forum</a></td>
       </tr>

Simpan dan refresh web browser.kemudian arahkan cursor ke dalam tulisan produk, kontak, forum, profil.maka akan menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.

C. mengisi bagian sebelah kanan halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda.dengan cara mengubah sintax html berikut ini

 <td width="30%" class="table-menu"> Daftar ARTIKEL
    <div id="artikel">
    <ul>
     <li><a href="">KESEHATAN</a></li>
     <li><a href="">KECANTIKAN</a></</li>
     <li><a href="">TIPS</a></</li>
     <li><a href="">OTHER</a></</li>
    </ul>
    </td>

Kemudian tambahkan code css berikut ini

#artikel ul{
 font: bold 16px Ravie;
 }
#artikel a{
 color:red;
 text-decoration:none;
 }
   
#artikel a:hover{
 background-color:Grey;
 color:black;
 }

simpan dan refresh browser maka akan menampilkan tulisan disebelah kanan seperti berikut.

D. Menambahkan teks/ tulisan yang proporsional di bagian header halaman.dengan cara menambahkan sourcecode berikut kedalam sintax <head> </head>.

<table width="70%" align="center">
   <tr>
    <td colspan=2 style="background-color:black">
     <marquee behavior="alternate"> 
      <marquee>
       <h1>
        <p style="color:red; font:Ravie;">SELAMAT DATANG DI WEB KAMI</p>
       </h1>
      </marquee>
     </marquee>
    </td>

kemudian simpan dan refresh browser maka di header halaman akan memunculkan sebuah header dengan tulisan SELAMAT DATANG DI WEB KAMI dengan efek marquee.

5. KESIMPULAN

• Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
• CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.
• Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Form Pendaftaran Menggunakan HTML5

Sedikit saja penjelasan tentang html5, HTML5 adalah penyempurnaan dari standard yang sebelumnya pernah dikeluarkan oleh W3C. Banyak sekali tambahan dari standard sebelumnya. Diantaranya adalah adanya tambahan element seperti : Canvas, Video, Audio. Juga penambahan pada tag di web form serta misalnya section dll.  Prinsipnya lebih memudahkan untuk dibaca dan dimengerti oleh manusia. Dari sisi user, user tidak pernah tahu apakah halaman web yang sedang dia lihat itu HTML5 atau bukan, kecuali user tersebut melihat source code di dalamnya.

berikut contoh source code form pendaftaran menggunakan bahasa pemrograman web html5 (klik gambar untuk memperjelas)  :

 Untuk lebih rincinya saya akan membahas tentang sourcecode diatas.

code html standart biasanya hanya terdiri dari <html>
<head>
<title> </title>
</head>
<body>

</body>

</html>

Head merupakan kepala dari html yang didalamnya terdapat sintax <title> </title> yang artinya head memiliki sebuah title/ judul. Sedangkan body merupakan isi dari dalam html yang akan anda buat.

Didalam form pendaftaran yang saya buat terdapat :

1. Sebuah table untuk mempermudah melakukan desain web.

1. Input nama menggunakan type textfield.

1. Input alamat menggunakan type textarea.

1. Tanggal lahir menggunakan type date.

1. Nomer telephone menggunakan type text.

1. URL,ketika diklik mengarah website yang lain/hiperlink, dan inputnya menggunakan type url.

1. Email menggunakan type email.

1. Kecamatan menggunakan combobox.

Berikut penjelasan tentang potongan sourcecode diatas :

maksud dari source code diatas adalah membuat table dengan ukuran border(garis)=2 , width(lebar)=450 dengan warna border hitam,
tbody style yaitu warna isi dari table dengan warna biru muda.

fungsi <tr>adalah membuat baris table

<td>adalah membuat kolom table.

<td colspan="3" bgcolor="#FF9900"><marquee>

 <p align="center">SELAMAT DATANG DIPENDAFTARAN KOMUNITAS DAIICHI</p></marquee>
membuat 3 kolom menjadi satu dengan membuat text berjalan menggunakan marquee.dengan warna background yaitu orange.

untuk sourcecode diatas untuk kolom pertama digunakan untuk menuliskan penjelasan. sedangkan kolom kedua digunakan untuk peletakan komponen.
sedangkan pada:
 <tr> <td><a href="http://hengkysusanto.blog.com">URL :</a> <td> <input type="url" name="web" />
disini dimaksudkan ketika file html ini dijalankan maka akan terdapat sebuah tampilan dmana ditampilan itu terdapat tulisan URL ketika tulisan tersebut diklik maka akan membuka situs hengkysusanto.blog.com

fungsi html ini untuk membuat menu select tentang nama kecamatan.

ini fungsinya sama dengan yang membuat tiga kolom menjadi satu tetapi perbedaan disini didalamnya terdapat tombol submit dengan nama DAFTAR.


yang terakhir simpan file tersebut dengan akhiran .html
kemudian dijalankan maka akan muncul tampilan seperti dibawah ini :

sekian posting saya kali ini jika ada kesalahan mohon dimaklumi.sekian terima kasih :D

KALKULATOR MENGGUNAKAN PHP

Sedikit mengulas tentang php yang saya dapat dari wikipedia yakni , PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML.PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS. yang jelas PHP itu bukan iklan dari kartu perdana ditelevisi (Pemberi Harapan Palsu).

oke lanjut persiapkan alat dan bahan :

1. Xampp
2. Notepad ++
3. Google Chrome

kemudian buka notepad++ kemudian ketiikkan kode sebagai berikut :






























seperti biasa dicode tersebut untuk membuat table dan didalamnya berisi input number dengan nama angka1 dan angka2.kemudian didalam kode php disitu ketika diklik button HITUNG + maka akan menjalankan proses penjumlahan dan hasil dari penjumlahan akan disimpan kedalam variable $hasil.kemudian textfield hasil akan mengambil nilai dari variable $hasil.dan jika ketika salah satu input number kosong maka proses penjumlahan tidak akan diproses.
kemudian dilanjutkan kodingnya dibawah ini.

 jika semua code sudah di ketik simpan file tersebut dengan ekstensi .php.kalau bisa lihat petunjuk gambar dibawah ini,simpan file didalam folder C://xampp/htdocs/Tugas Kalkulator

ketika sudah disimpan.dan akan menjalankan program tersebut maka diharuskan untuk mengaktifkan apache  yang berada di xampp.yaitu dengan cara klik tombol start.

ketika sudah start buka browser anda kemudian ketikkan localhost/Tugas Kalkulator PHP enter.maka akan muncul tampilan seperti diatas dan klik kalkulator.php

entah kenapa file php saya ketika dijalankan muncul Notice seperti tersebut.awalmula saya mengerjakan dilaboratorium dikampus berjalan dengan baik.dimungkinkan versi xampp saya berbeda dengan yang ada di lab kampus.saya menggunakan xampp versi 1.7.7 sedangkan dikampus menggunakan versi 1.7.1

langsung kita coba penjumlahan ketika angka 2 kosong apakah muncul pesan error dan tidak akan diproses.
isi form angka 1 dengan angka 12 atau terserah anda.kemudian form angka 2 tidak diisi. klik HITUNG + maka akan muncul pesan sebagai berikut.

sekian tutorial kali ini jika ada kesalahan mohon diperbaiki. sekian terima kasih :D

Hengky Susanto
111065 1155