KELAS XII NKPI B

Kelas XII NKPI B

Rabu, 13 Mei 2015

Web Programming part 9

Kali ini saya akan berbagi ilmu tentang membuat menu dropdown dengan CSS.







Pertama, buat struktur menu yang diinginkan :

<body>
    <h3>Menu Drop Down</h3>
    <nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Artikel</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
</ul>
</nav>   
</body>

Diatas adalah menu utama, dan sekarang coba membuat submenu nya misal :

<body>
    <h3>Menu Drop Down</h3>
    <nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Artikel</a>
    <ul>
        <li><a href="#">WordPress</a></li>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Tutorial Web</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
</ul>
</nav>   
</body>

Setelah membuat submenu, coba di cek di browser nanti akan terlihat biasa saja karena belum ditambahkan style pada menu tersebut.
Berikut kode CSS yang akan membuat tampilan dropdown nya terlihat menarik :

h3 { font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    color:#080;
}
body { margin-left:50px; }
nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
}
nav ul li:hover a {
color: #fff;
}

nav ul li a {
display: block; padding: 10px 20px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 20px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Dan nanti hasil nya akan seperti ini :

menu dropdown


Sekian tutorial Web Programming ini, Jika ada yang ingin ditanyakan, silahkan comment saja.
Terima kasih selamat mencoba :D

Selasa, 05 Mei 2015

Web Programming part 8 (CSS)

Gak terasa udah pertemuan ke 8 yah. Nah kali ini, saya akan share materi tentang CSS.

Pengenalan CSS
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.
Internal CSS
Internal CSS adalah kode-kode css yang dipasang langsung didalam file HTML, lebih tepatnya ditaruh di dalam tag “< head >” dan sebelum tag “< / head >”. Contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pengenalan CSS</title>

<style type="text/css">
body {background-color:#006699;
}
h1 {font-size:24px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#00CC00 }
h2 {font-size:22px;
font-family:"Times New Roman", Times, serif;
text-align:center;
color:#00CC00;}
    </style>
    </head>
<body>
<h1>FOTOCOPY DIGITAL PRINTING "BINTARA"</h1>
<h2> Dukuh Karangmalang Blok A25 Sleman <br>
Yogyakarta</h2>
<hr>
</body>
</html>

Dan hasil nya akan seperti ini :


css


Bagian yang di beri highlight merupakan contoh dari Internal CSS, Internal CSS digunakan hanya dalam kondisi tertentu saja apabila ingin merubah sebuah element yang hanya ada pada satu halaman HTML atau bisa juga dipakai untuk sebuah halaman statis(tidak berubah-ubah).

Eksternal CSS

External CSS adalah sebuah document/file yang hanya berisikan kode kode CSS, extensi file css biasanya “.css”. External CSS ini terpisah dari file HTML, untuk di butuhkan sebuah perintah untuk menghubungkan/memanggil External CSS pada file HTML. Contoh perintah :


Anda bisa lihat baris yang saya beri highlight, perintah href seperti di atas yang digunakan untuk memanggil External CSS dengan contoh saya beri nama “style.css”. External CSS merupakan cara penulisan yang lebih sering digunakan, karena dalam file ini hanya ada kode-kode css saja, untuk itu memudahkan dalam hal pengeditan.
contoh :

Ini file yang ekstensinya .html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eksternal css</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<h1> PENGENALAN CSS</h1>
    <h2> PENGERTIAN CSS</h2>
    <p> Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.<br />
<p>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).<br />  Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.<br />
<p>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.

</body>
</html>

Dan ini file yang ekstensinya .css :
@charset "utf-8";
/* CSS Document */
body {background-color:#00CC00;
}

 h1 {color:#000099;
  font-size:36px;
font-family:Arial, Helvetica, sans-serif;
text-align:center}
  h2 {color:#993333;
  font-size:29px;
  font-family:"Courier New", Courier, monospace;
  margin-left:50px}
  p { color:#333300;
  font:"Courier New", Courier, monospace;
  font-size:22px;
  margin-left:50px;}
 
Dan nanti hasil nya akan seperti ini :

css

Inline CSS

Inline CSS merupakan cara pemasangan kode CSS yang langsung ditulis pada tag HTML. Memang tidak direkomendasikan menggunakan cara ini, namun tidak bisa dipungkiri saya pun masih menggunakan cara ini apabila berada dalam sebuah kondisi yang harus merubah satu atau dua element yang hanya ada dalam satu halaman saja.

Contoh :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline css</title>

</head>

<body>
<body style="background-color:#00CCCC";>
    <h1 style="font:Arial, Helvetica, sans-serif"; align="center";>INLINE CSS</h1>
    <h2 style="font-size:24px"; align="left";>PENGERTIAN INLINE CSS</h2>
</body>
</html>

dan hasil nya akan seperti ini :

css


Itulah materi CSS yang bisa saya share dan terima kasih.
Selamat mencoba :D 

Rabu, 29 April 2015

Web Programming part 7 (HTML 5)

Oke guys....
Kali ini saya akan share materi Web Programming yaitu tentang HTML 5.

PENGENALAN HTML 5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.
HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. (sumber : Wikipedia).

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG(Web Hypertext Application Technology Working Group).
Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."

ATURAN UNTUK MEMPELAJARI HTML5

Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :

  • Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.
  • Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
  • Lebih baik penanganan kesalahan.
  • Lebih banyak penggunaakn markup untuk mengganti scripting.
  • HTML5 harus independen.
  • Proses development-nya harus terlihat untuk umum (visible).


FITUR-FITUR BARU DI HTML5

  • Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.
  • Canvas : Media corat-coret langsung tanpa flash dan applet java.
  • Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
  • Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.
  • Dukungan yang lebih baik untuk penyimpanan secara offline.


DUKUNGAN BROWSER HTML5

  • Chrome
  • Safari Apple v.4+
  • Internet Explorer 9
  • Opera
  • Maxthon
  • Firefox 4, 5, 6 dan seterusnya


DOCTYPE UNTUK HTML5

  • DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.
  • Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).
  • DTD menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.
  • Penggunaan DOCTYPE pada html5 lebih di sederhanakan.
  • Sintak penulisannya :

                <!DOCTYPE html>

ELEMEN YANG DI HAPUS PADA HTML5

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>


HTML5 SEMANTIC ELEMENTS

  • Semantic= arti/makna
  • Semantic elements = elemen dengan makna

Apa Unsur Semantic?

  • Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.
  • Contoh non-semantik elemen:

         <div> dan <span> -tidak menjelaskan tentang isinya.

  • Contoh semantik elemen:

          <form>, <table>, dan <img> -Jelas mendefinisikan isinya.

ELEMEN SEMANTIK BARU di HTML5

  • Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:

<div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.

  • HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian yang berbeda dari sebuah halaman web:


  1. <header>
  2. <nav>
  3. <section>
  4. <article>
  5. <aside>
  6. <figure>
  7. <figcaption>
  8. <time>
  9. <footer>dan masih banyak tag-tag lainnya


PENJELASAN TAG-TAG HTML5
  • <header>, digunakan untuk area header(bagian atas sebuah halaman web).
  • <article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.
  • <aside>, digunakan sebagai penambah informasi utama didalam halaman web. Biasanya berupa peringatan, catatan, dll.
  • <section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.
  • <figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode, dll.
  • <figcaption>,Mendefinisikan caption untuk elemen <figure>

Contoh :
Penggunaan <header>, <article>, <footer>


source code nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pengenalan HTML 5</title>
</head>

<body>
<header>
<h2 align="center">Tutorial HTML 5</h2>
</header>
<article>
<p>HTML5merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.<br />
    <p>Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.<br />
    <p>HTML5merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG(Web Hypertext Application Technology Working Group). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
    <p>HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."
</article>
<footer>
<p><h4 align="center">Copyright &copy; 2015 Mahfud</h4>
</footer>
</body>
</html>

Penggunaan <figure>, <figcaption>


source code nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tag Figure dan Figcaption</title>
</head>

<body>
<figure>
<img src="P_20150428_114857.jpg" height="336" width="248"  />
<figcaption><h2>Mau nonton Film</h2></figcaption>
<img src="P_20150304_083708.jpg" width="398" height="286"  />
<figcaption><h2>Belajar dulu</h2></figcaption>
</figure>
</body>
</html>

VIDEO

Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

  • Tag <video>
  • Sintaks Penulisanya :

         <video src="judulvideo.ogg" controls="controls"></video>
        atau 
         <video controls="controls"><source src="judulvideo.webm" type="video/webm"></video>

AUDIO

  • Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web.
  • Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.
  • Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang mendukung yaitu:Ogg, MP3, Wav.
  • Tag <audio>
  • Sintaks Penulisanya :<audio controls="controls"><source src="judullagu.mp3" type="audio/mp3"></audio>
Contoh :


source code nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video dan Audio</title>
</head>

<body><h3>The Scientist</h3><br />
<video controls="controls" width="450" height="260">
<source src="The Scientist.mp4" type="mp4">
</video><br /><br />
<h3>Let her go</h3><br />
<audio controls="controls" width="450" height="260">
<source src="Let her go.mp3" type="mp3">
</audio>    
</body>
</html>

INPUT FORM BARU DI HTML5

  • Macam -macam jenis input form baru di HTML5 yaitu:


  1. email
  2. url
  3. number
  4. range
  5. Date pickers (date, month, week, time,
  6. datetime, datetime-local)
  7. search
  8. color
  9. tel (tipe ini belum support jadi tidak ada perubahan)


  • Sintaks Penulisanya :<input type="jenis"/>
Contoh :


source code nya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input form HTML 5</title>
<style type="text/css">
#main {width:800px;
margin:0 auto;
}</style>
</head>

<body><div id="main">
<h2>Input Form</h2>
<form method="post" action="#">
<table width="282" border="0">
  <tr>
    <td width="122">Email :</td>
    <td width="144"><input type="email" name="email" required /></td>
  </tr>
  <tr>
    <td>URL :</td>
    <td><input type="url" name="homepage" required /></td>
  </tr>
  <tr>
    <td>Number :</td>
    <td><input type="number" name="quantity" min="1" max="5" value="1" step="3" /></td>
  </tr>
  <tr>
    <td>Range :</td>
    <td><input type="range" name="points" min="1" max="10"/></td>
  </tr>
  <tr>
    <td>Search :</td>
    <td><input type="search" name="googlesearch"/></td>
  </tr>
  <tr>
    <td>Color :</td>
    <td><input type="color" name="color"/></td>
  </tr>
  <tr>
    <td>Tel :</td>
    <td><input type="tel" name="usrtel" required /></td>
  </tr>
  <tr>
    <td>Date :</td>
    <td><input type="date" name="date"/></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><p>
      <input type="submit" value="Kirim" />
      <input type="reset" value="Batal" />
      </p>    
      </td>
  </tr>
</table></form></div>
</body>
</html>

Terima kasih...
Itulah beberapa materi yang bisa saya share. 
Semoga bermanfaat dan selamat mencoba :D

Sabtu, 18 April 2015

Program Menghitung Bangun Datar atau Bangun Ruang

Oke guys......
Kali ini, saya akan berbagi ilmu tentang pemrograman terstruktur yaitu "Program Menghitung Bangun Datar atau Bangun Ruang" dengan menggunakan aplikasi borland c++ yang mana nanti kita tinggal menginputkan data nya dan hasilnya akan secara otomatis akan dihitung oleh program tersebut sehingga akan keluar hasilnya.

Langsung aja kita lihat program nya..........

Pertama, di Bagian ini  kita disuruh menginputkan menu pilihan yang tersedia yaitu ada 3 pilihan "Bangun Datar", "Bangun Ruang" dan "Keluar". Jika kita menginputkan menu pilihan yang tidak tersedia, maka akan tampil notifikasi "menu yang dipilih tidak tersedia" dan kita disuruh ingin menghitung lagi atau tidak ?? . Jika kita jawab "y" maka akan kembali ke menu awal lagi dan menginputkan data nya lagi. Jika kita jawab "n" maka program nya akan berhenti.  Seperti ini gambarnya :




Kedua, di bagian "Bangun Datar" apabila kita menginputkan "Bangun Datar", maka akan muncul pilihan lagi bangun datar mana yang akan dihitung yaitu hanya ada 3 pilihan bangun datar yaitu "Persegi", "Persegi Panjang" dan "Lingkaran". Jika kita memilih "Persegi", kita disuruh menginputkan data nya dan akan keluar hasil luas dan keliling persegi tersebut begitu juga dengan "Persegi Panjang" dan "Lingkaran". Jika kita menginputkan pilihan selain 3 pilihan tersebut maka akan muncul notifikasi seperti diatas. Seperti ini gambar nya:






Ketiga, di bagian "Bangun Ruang" hanya ada 4 pilihan yaitu "Kubus", "Balok", "Tabung" dan "Bola". Seperti diatas, jika kita memilih "Kubus" maka kita disuruh menginputkan data nya dan akan keluar hasil luas dan volume kubus tersebut begitu juga dengan "Balok", "Tabung" dan "Bola" juga. Tetapi jika kita menginputkan selain 4 pilihan tersebut, maka akan muncul notifikasi nya. Seperti ini gambarnya :




Dan di bagian terakhir yaitu bagian "Keluar". Jika kita memilih bagian ini maka akan muncul notifikasi "Anda yakin ingin keluar ??" dan kita disuruh menjawab "y" atau "n". Jika kita menjawab "y" maka program nya akan berhenti dan jika kita menjawab "n", maka program nya akan kembali ke menu awal lagi. Seperti ini gambar nya :


Dan di bawah ini adalah source kode yang telah saya buat. Mungkin kode nya agak sedikit panjang tapi semoga anda paham sedikit -sedikit :

#include <iostream.h>
#include <conio.h>
#include <stdio.h>
#define phi 3.14

main(){

   float r, s, p, l, t;
   char jwb;
   int menu, b_datar, b_ruang;

   ulang:
    cout<<"\n\n\n\t======|| PROGRAM MENGHITUNG BANGUN DATAR ATAU BANGUN RUANG ||======\n\n"<<endl;
   cout<<"\n\tMenu pilihan :"<<endl;
   cout<<"\n\t[1] Bangun Datar"<<endl;
   cout<<"\n\t[2] Bangun Ruang"<<endl;
   cout<<"\n\t[3] Keluar"<<endl;
   cout<<"\n\tPilih menu nomer berapa : ";cin>>menu;

   switch (menu) {

       case 1: cout<<"\n\n\tMenu Bangun Datar :"<<endl;
                cout<<"\n\t[1] Persegi "<<endl;
              cout<<"\n\t[2] Persegi Panjang"<<endl;
              cout<<"\n\t[3] Lingkaran"<<endl;
              cout<<"\n\tPilih menu nomer berapa : ";cin>>b_datar;

              switch (b_datar) {

                      case 1: cout<<"\n\n\tMasukkan sisi nya : ";cin>>s;
                            cout<<"\n\tLuas nya adalah : "<<s*s<<" cm2 "<<endl;
                          cout<<"\n\tDan keliling nya adalah : "<<4*s<<" cm "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl;}
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  case 2: cout<<"\n\n\tMasukkan panjang nya : ";cin>>p;
                            cout<<"\n\tMasukkan lebar nya : ";cin>>l;
                          cout<<"\n\tLuas nya adalah : "<<p*l<<" cm2 "<<endl;
                          cout<<"\n\tDan keliling nya adalah : "<<((2*p)+(2*l))<<" cm "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl;}
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  case 3: cout<<"\n\n\tMasukkan jari-jari nya : ";cin>>r;
                            cout<<"\n\tLuas nya adalah : "<<phi*r*r<<" cm2 "<<endl;
                          cout<<"\n\tDan keliling nya adalah : "<<2*phi*r<<" cm "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  default : cout<<"\n\n\tMaaf menu yang anda pilih tidak ada"<<endl;
                            cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; } }
      break;
      case 2: cout<<"\n\n\tMenu Bangun Ruang :"<<endl;
                cout<<"\n\t[1] Kubus"<<endl;
              cout<<"\n\t[2] Balok"<<endl;
              cout<<"\n\t[3] Tabung"<<endl;
              cout<<"\n\t[4] Bola"<<endl;
              cout<<"\n\tPilih menu nomer berapa : ";cin>>b_ruang;

              switch (b_ruang) {

                      case 1: cout<<"\n\n\tMasukkan sisi nya : ";cin>>s;
                            cout<<"\n\tLuas nya adalah : "<<6*s*s<<" cm2 "<<endl;
                          cout<<"\n\tDan volume nya adalah : "<<s*s*s<<" cm3 "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  case 2: cout<<"\n\n\tMasukkan Panjang nya : ";cin>>p;
                            cout<<"\n\tMasukkan lebar nya : ";cin>>l;
                          cout<<"\n\tMasukkan tinggi nya : ";cin>>t;
                          cout<<"\n\tLuas nya adalah : "<<((2*p*2*l)+(2*p*2*t)+(2*l*2*t))<<" cm2 "<<endl;
                          cout<<"\n\tDan volume nya adalah : "<<p*l*t<<" cm3 "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  case 3: cout<<"\n\n\tMasukkan jari-jari nya : ";cin>>r;
                            cout<<"\n\tMasukkan tinggi nya : ";cin>>t;
                          cout<<"\n\tLuas nya adalah : "<<2*phi*r*(r+t)<<" cm2 "<<endl;
                          cout<<"\n\tDan volume nya adalah : "<<phi*r*r*t<<" cm3 "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  case 4: cout<<"\n\n\tMasukkan jari-jari nya : ";cin>>r;
                            cout<<"\n\tLuas nya adalah : "<<4*phi*r*r<<" cm2 "<<endl;
                          cout<<"\n\tDan volume nya adalah : "<<4/3*phi*r*r*r<<" cm3 "<<endl;
                          cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          break;
                  default : cout<<"\n\n\tMaaf menu yang anda pilih tidak ada"<<endl;
                            cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
                          if (jwb=='y' || jwb=='Y') {
                          clrscr();
                          goto ulang; }
                          else if (jwb=='n' || jwb=='N'){
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; }
                          else {
                          cout<<"\n\n\tThank You"<<endl;
                          cout<<"\n\tTekan Enter untuk keluar"<<endl; } }
      break;
      case 3: cout<<"\n\n\tAnda yakin ingin keluar ??? : ";cin>>jwb;
                if (jwb=='n' || jwb=='N') {
              clrscr();
              goto ulang; }
              else if (jwb=='y' || jwb=='Y'){
              cout<<"\n\n\tThank You"<<endl;
              cout<<"\n\tTekan Enter untuk keluar"<<endl; }
              else {
              cout<<"\n\n\tThank You"<<endl;
              cout<<"\n\tTekan Enter untuk keluar"<<endl; }
              break;
      default : cout<<"\n\n\tMaaf menu yang anda pilih tidak ada"<<endl;
                cout<<"\n\n\tAnda ingin menghitung lagi ??? : ";cin>>jwb;
              if (jwb=='y' || jwb=='Y') {
              clrscr();
              goto ulang; }
              else if (jwb=='n' || jwb=='N'){
              cout<<"\n\n\tThank You"<<endl;
              cout<<"\n\tTekan Enter untuk keluar"<<endl; }
              else {
              cout<<"\n\n\tThank You"<<endl;
              cout<<"\n\tTekan Enter untuk keluar"<<endl; }}

      getch();
      }

Jika anda ingin mencoba program tersebut, copy kode tersebut dan paste kan di aplikasi borland c++ kemudian di run. Coba lihat apa yang terjadi ???...

Terima kasih itulah sedikit ilmu yang dapat saya share semoga dapat bermanfaat bagi kita semua.
Tetap semangat dan selamat mencoba :D

Selasa, 07 April 2015

Web Programming part 6 (Responsi)

Kali ini, saya akan share ilmu yang telah saya dapatkan pada pertemuan ke enam Pemrograman Web ini. Pertemuan ke enam ini adalah Responsi yaitu membuat "Form Jadwal Ujian Tengah Semester Ganjil" seperti gambar ini :






dan inilah source code yang telah saya buat :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsi ku</title>
<style type="text/css">
  #main {width:700px;
    margin:0 auto;
    }</style>
</head>

<body><div id="main">
<table width="726" border="0">
  <tr>
    <td width="716"><h2>Jadwal Ujian</h2></td>
  </tr>
  <tr>
    <td><table width="691" border="0">
      <tr>
        <td width="58">Tahun</td>
        <td width="115"><select name="tahun" id="thn">
                        <option value="">2014/2015</option></select></td>
        <td width="74">Semester</td>
        <td width="149"><select name="semester" id="smster">
                       <option value="gnj">Ganjil</option>
                       <option value="gnp">Genap</option>
                       <option value="remidi">Remidial</option>
                       <option value="remidignj">Remidial Ganjil</option>
                       <option value="remidignp">Remidial Genap</option></select></td>
        <td width="82">Jenis Ujian</td>
        <td width="79"><select name="ujian" id="uji">
                       <option value="uts">UTS</option>
                       <option value="uas">UAS</option></select></td>
        <td width="104"><input type="submit" value="Tampilkan"></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><h2>Jadwal Ujian Tengah  Semester                       Genap          Tahun Akademik 2014/2015 </h2></td>
  </tr>
  <tr>
    <td><table width="665" border="1">
      <tr>
        <td width="28" align="center" bgcolor="#66CCFF"><strong>No</strong></td>
        <td width="93" align="center" bgcolor="#66CCFF"><strong>Tanggal</strong></td>
        <td width="42" align="center" bgcolor="#66CCFF"><strong>Jam</strong></td>
        <td width="316" align="center" bgcolor="#66CCFF"><strong>Mata Kuliah</strong></td>
        <td width="96" align="center" bgcolor="#66CCFF"><strong>Ruang/Kursi</strong></td>
        <td width="50" align="center" bgcolor="#66CCFF"><strong>Hadir</strong></td>
      </tr>
      <tr>
        <td><div align="center">1</div></td>
        <td>13-04-2015</td>
        <td>10.30 </td>
        <td>PRAKTIKUM AKUNTANSI<br>
          <em>nilai dapat di ketahui minimal tgl : 23-04-2015</em></td>
        <td>05.04.04 / 30</td>
        <td><div align="center"><img src="silang.png" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">2</div></td>
        <td>14-04-2015</td>
        <td>10.30 </td>
        <td>PEMROGRAMAN TERSTRUKTUR<br>
          <em>nilai dapat di ketahui minimal tgl : 24-04-2015</em></td>
        <td>04.03.02 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">3</div></td>
        <td>15-04-2015</td>
        <td>08.30 </td>
        <td>PEMROGRAMAN WEB<br>
          <em>nilai dapat di ketahui minimal tgl : 25-04-2015</em></td>
        <td>04.03.02 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">4</div></td>
        <td>16-04-2015</td>
        <td>10.30 </td>
        <td>STATISTIK<br>
          <em>nilai dapat di ketahui minimal tgl : 26-04-2015</em></td>
        <td>04.03.02 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">5</div></td>
        <td>17-04-2015</td>
        <td>08.30 </td>
        <td>BAHASA INGGRIS II<br>
          <em>nilai dapat di ketahui minimal tgl : 27-04-2015</em></td>
        <td>04.03.02 / 29</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">6</div></td>
        <td>20-04-2015</td>
        <td>10.30 </td>
        <td>KOMUNIKASI DATA<br>
          <em>nilai dapat di ketahui minimal tgl : 30-04-2015</em></td>
        <td>05.03.07 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">7</div></td>
        <td>21-04-2015</td>
        <td>08.30 </td>
        <td>PENGELOLAAN INSTALASI KOMPUTER<br>
          <em>nilai dapat di ketahui minimal tgl : 01-05-2015</em></td>
        <td>04.03.02 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">8</div></td>
        <td>22-04-2015</td>
        <td>10.30 </td>
        <td>KECAKAPAN ANTAR PERSONAL<br>
          <em>nilai dapat di ketahui minimal tgl : 02-05-2015</em></td>
        <td>04.03.02 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
      <tr>
        <td><div align="center">9</div></td>
        <td>24-04-2015</td>
        <td>08.30 </td>
        <td>KOMPUTER GRAFIS<br>
          <em>nilai dapat di ketahui minimal tgl : 04-05-2015</em></td>
        <td>04.03.02 / 30</td>
        <td><div align="center"><img src="silang.png" alt="" width="16" height="16"></div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><p>Keterangan :</p>
      <ol>
        <li>Apabila ada mata ujian yang jadwalnya bersamaan harap menghubungi Bag. BAAK.</li>
                            <li>Mata kuliah yang tidak tercantum, tidak dilaksanakan ujian tertulis atau menyesuaikan (langsung Dosen).</li>
                            <li>Nomor tempat duduk sesuai dengan nomor urut presensi UJIAN.</li>
                            <li>Apabila ujian dalam bentuk tugas, lama waktu 45 menit.</li>
                            <li>Nilai ujian per matakuliah dapat anda ketahui minimal 10 hari setelah ujian matakuliah tersebut di laksanakan.</li>
    </ol></td>
  </tr>
  <tr>
    <td><div align="right"><strong>Yogyakarta, Apr 2015 <br>
BAAK <br>
<br>
<br>
Achmad Fauzi, SE, MM </strong></div></td>
  </tr>
</table>

</div>   
</body>
</html>


dan hasilnya akan seperti ini :






itulah sedikit ilmu yang saya share semoga dapat bermanfaat bagi siapapun terutama bagi yang membaca postingan saya ini.

Terima kasih selamat mencoba :D

APA ITU LUCID DREAM ? MIMPI YANG KITA SADARI DAN DAPAT DI KENDALIKAN DAN BAGAIMANA MELAKUKAN NYA

Pernahkah mengalami mimpi yang anda sadari ?Sebagian besar orang pada saat bermimpi tidak sadar apabila mereka sedang bermimpi .

Jika anda pernah mengalami hal tersebut berarti anda sudah pernah mengalami Lucid Dream .

Lucid Dream adalah mimpi dimana pada saat kalian bermimpi  , kalian benar benar mengalami  kesadaran penuh , kalo sebenarnya kalian sedang berada dalam dunia mimpi  dan kalian dapat mengasiktekturkan / merancang mimpi nya  sesuka kalian .

 

Bedanya dengan mimpi biasa, kalian hanya menjalani saja dan tidak sadar kalo kalian sedang anda di dunia mimpi , pada saat Lucid Dream Indera penciuman dan rangsangan kalian tidak lah mati. Lucid Dream di bawah satu tingkat ASTRAL PROJECT ( CARA KELUAR DARI TUBUH ) .

1. Lucid Dream terbagi menjadi 3 .
  • Tingkat Basic
Kalian dapat terbang , menembus tembok , berjalan , berlari .
  • Tingkat Menegah   
Kalian dapat memunculkan Tokoh tokoh dalam pikiran kalian , seperti orang yang kalian suka , artis , pacar dan teman kalian .
  • Tingkat Ahli 
Kalian dapat melakukan Hubungan Seks , membunuh , dan melakukan tindakan tindakan seperti di dunia nyata .


2. EFEK NEGATIF DARI LUCID DREAM 

Efek negatif untuk fisik , menurut ahli dalam bidang ini , yang di takutkan adalah terjadi sleep apnea dimana tubuh anda berhenti bernafas dan Efek untuk bathin nya kalian jadi males berusaha di dunia nyata , karena kalian bisa mendapatkan semua nya di dunia mimpi .

3. Cara Melakukan LUCID DREAM
(NOTE : TANGGUNG JAWAB PRIBADI MASING MASING )
  • Buatlah dimana keadaan tubuh anda santai , biasakan menggunakan pakaian yang nyaman seperti piyama dan celana nya , lalu coba berbaring dan rileks .
  • Tetap lah tersadar dengan cara atur pernafasan anda walau tubuh anda semakin lemas dan akhirnya akan masuk pada tahap tindihan atau (sleep paralysed )
  • Pada Tahap Sleep Paralysed , dimana tubuh anda tidak dapat bergerak tetapi pikiran anda tetap sadar , anda tidak bisa bergerak walaupun anda mencoba untuk menggerakan tubuh anda , tetaplah tersadar dan jangan takut , dan jangan pernah melakukan sesuatu yang dapat merusak Sleep Paralysed .
  • Lalu anda akan mengalami beberapa transisi memasuki ruang hitam dan tetaplah tersadar .
Dan anda pernah merasa di tiban roh halus ? tidak bisa menggerakan tubuh ketika tidur ? 
Baca artikelnya disini

PERJALANAN KELUAR TUBUH (ASTRAL PROJECT) CARA KELUAR DARI TUBUH KITA

Apakah kalian tahu apa itu Astral Project, Astral project adalah pengalaman spritual keluarnya roh yang ada di dalam tubuh kasar kita
.
Setelah kita keluar dari tubuh kita , biasanya kita akan melihat banyak roh halus di luar tubuh kita .

Sudah banyak sekali orang yang mampu melakukan Astral Project , selain Astral Project masih ada lagi teknik yang hampir mirip , nama nya LUCID DREAM .

Tetapi saya akan fokus membahas tentang astral Project.

  • PADA SAAT KETINDIHAN ADALAH SAAT YANG PALING TEPAT UNTUK KELUAR DARI TUBUH
Ketindihan (Sleep Paralyzed) adalah di mana tubuh kita tidak bisa bergerak saat tidur , misalkan anda sudah sadar ingin bangun , tetapi tubuh anda tidak dapat di gerakan .

Banyak orang yang mengira apabila itu adalah sejenis perbuatan Roh Halus .

Tetapi itu semua sudah dapat di jelaskan ilmiah .

Apabila anda sudah mengalami Ketindihan , yang pertama tama anda harus lakukan adalah , fokuskan pikiran dan santai .

Jangan sampai anda melakukan gerakan yang merusak Sleep Paralysed / Ketindihan . Meskipun tubuh kita lumpuh tetapi pikiran kita tidak lah lumpuh , Sugestikan pikiran anda bahwa roh anda akan keluar dari tubuh sementara anda .

Banyak cara untuk mendorong kesadaran anda keluar dengan sugestikan pikiran kesadaran anda seakan terdorong ke atas .

Dengan melakukan cara tersebut sebenarnya kesadaran anda sudah mulai keluar perlahan lahan .
Dan akhirnya roh anda keluar dari tubuh nya , biasanya anda akan melihat ada benang perak yang tersambung ke dalam tubuh anda yang terbaring .

NOTE : JIKA INI BERHASIL SEBAIKNYA ANDA JANGAN BERJALAN SAMPAI KELUAR DARI RUMAH ANDA .
Setelah anda keluar dari tubuh anda biasanya anda akan dapat melihat roh roh halus lain nya , tetapi jangan takut mereka tidak akan melukai dan menculik anda seperti dalam film INSIDIOUS.
  • CARA AGAR KETINDIHAN
Pada saat tubuh kita tertidur , pikiran kita jangan sampai hanyut . Dengan sadar atur nafas anda sembari tidur , lalu biasa nya anda akan langsung mengalami ketindihan .
Beberapa Kunci Sukses untuk melakukan Astral Project :
  1. Konsentrasi
  2. Fokus 
  3. Yakin
  4. Jangan Takut

Efek samping dari ASTRAL PROJECT.

Terlalu sering melakukan astral project , kalian akan semakin sulit kembali ke dalam tubuh kasar kalian dan kalian dapat berpotensi di kejar kejar oleh makhluk aneh , selain itu apabila sudah terlalu sering , Roh kalian dapat keluar sendiri tanpa kalian inginkan , seperti pada saat anda kelelahan , tiba tiba roh kalian keluar sendiri . Mungkin teman kalian akan mengira kalo kalian mengalami pingsan .