Php

Showing posts with label Php. Show all posts

Showing posts with label Php. Show all posts

[Video] Cara Menginstall Xampp/Lampp di Ubuntu

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s1600/xampp.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s400/xampp.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Pada artikel sebelumnya saya sudah menjelaskan <a href="http://allmywebstfn.blogspot.com/2015/06/cara-menginstall-xampp-di-linux.html" target="_blank">Cara Menginstall Xampp di Linux</a>. Namun ada artikel ini saya hanya memberikan tutorial menginstall xampp/lampp di ubuntu versi videonya. Berikut ini videonya:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/JdtdnAEL1Bo/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/JdtdnAEL1Bo?feature=player_embedded" width="320"></iframe><br />
<br /></div>

[Video] Cara Menginstall Xampp/Lampp di Ubuntu

[Video] Cara Menginstall Xampp/Lampp di Ubuntu

Pada artikel sebelumnya saya sudah menjelaskan Cara Menginstall Xampp di Linux . Namun ada artikel ini saya hanya memberikan tutorial me...

Lihat Lebih lanjut »

12:00 PM

Cara Menginstall Xampp di Linux

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s1600/xampp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="351" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxXwvhQgqwik3mK0-Tbd0_8kUuFVi9UNErY6tXp8Hw42GSgPAg7cp9QHoAJJlqU5Tuumn5n5yjza0ZN3FQilaJzUHhC5rLvVNyerwbYm435vW9Q36RjTSVD3f5Iw4ihUoOu757AEotYc/s400/xampp.jpg" width="400" /></a></div>
 Pada kali ini saya akan memberikan tutorial bagaimana menginstall Xampp di Linux. Xampp merupakan webserver yang sudah terdapat PHP+Apache+Mysql dan lainnya. Sebelum melanjutkan tutorial ini sebaiknya anda mendownload terlebih dahulu file installasi xamppnya, anda dapat mendownloadnya di<a href="https://www.apachefriends.org/download.html" target="_blank">sini</a>. Pilih file sesuai dengan jenis linux anda jika tidak maka nantinya file xampp tidak dapat di jalankan.<br />
<br />
<div style="text-align: left;">
 Jika sudah didownload file xamppnya ikuti tutorial berikut ini :</div>
<ol style="text-align: left;">
<li>Pertama Buka terminal terlebih dahulu lalu masuk kedalam direktori tempat xampp di tempatkan. Saya contohkan saya meletakkan filenya di /home/reza/Unduhan untuk masuk ke dalam direktori itu tulis seperti ini<br /><br />$ cd /home/reza/Unduhan<br /><br />Sesuaikan dengan  letak direktori tempat installasi xampp anda<br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iE1e1Qnr_Vf8XOkWNp05GHS86Rfs6euIP3dAPGpoXwT_oGMMgHPgOcGi6kEcsCL8fOCY27vjNICFCOqExLGh5thOQftLKHyLh_j6Z6STFsu-wBQD2W80r8ZwVtudtpKopU_FGTpJWms/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iE1e1Qnr_Vf8XOkWNp05GHS86Rfs6euIP3dAPGpoXwT_oGMMgHPgOcGi6kEcsCL8fOCY27vjNICFCOqExLGh5thOQftLKHyLh_j6Z6STFsu-wBQD2W80r8ZwVtudtpKopU_FGTpJWms/s400/1.png" width="400" /></a></div>
</li>
<li>Jika sudah masuk kedalam folder tempat installasi xampp. Ubah permission menjadi root lalu masukkan password root anda dengan cara seperti ini<br /><br />$ sudo su<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCyXKR99HdPK152gUv8WEy_bRWk36NXeCay5kiGdSVu1wtY5bkw83J_3RiU4gO9b1zwHiMkBzwZ-AOD9l5kg-oswRas6tK0n3z-OvSJ_DJ6U-CVlhi8DBbSSzc2-Okt8wbkdJUOB5H9o/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCyXKR99HdPK152gUv8WEy_bRWk36NXeCay5kiGdSVu1wtY5bkw83J_3RiU4gO9b1zwHiMkBzwZ-AOD9l5kg-oswRas6tK0n3z-OvSJ_DJ6U-CVlhi8DBbSSzc2-Okt8wbkdJUOB5H9o/s400/2.png" width="400" /></a></div>
</li>
<li>Jika sudah mengubah permission menjadi root langkah selanjutnya yaitu mengubah permission pada xampp seperti berikut<br /><br />$ chmod +x xampp-linux-x64-5.6.8-0-installer.run<br /><br />Sesuaikan dengan nama xampp yang anda download tadi.<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5BXPYzwMCVg0lmGfap1EcX_yJkE2rcombJA9RqsHnRg8k6SK34GKo2unNFXKvXoVvVOFEJR2aVJS9RsmITAT9vg_nVUOOlKvRtLwhpRlu5nBGl1J8sWe-ah4XJ7Q0tYrdQTe1UavhH8/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU5BXPYzwMCVg0lmGfap1EcX_yJkE2rcombJA9RqsHnRg8k6SK34GKo2unNFXKvXoVvVOFEJR2aVJS9RsmITAT9vg_nVUOOlKvRtLwhpRlu5nBGl1J8sWe-ah4XJ7Q0tYrdQTe1UavhH8/s400/4.png" width="400" /></a></div>
</li>
<li>Sekarang saatnya menginstall xampp. Ketikkan di terminal seperti ini<br /><br />$ ./xampp-linux-x64-5.6.8-0-installer.run<br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ggCT0_AWAUQQTqxSFVS3p5JgNJZw6seuM6sSpqLPsnTWJWVIuND8tWU-dGtUDW7f5nPkjN5vifyH0F_m6t85Qz6SaX01HsqBVDCgl0wuh8mHbOWrJ7NXL9rajo-3d0L2aIZ88sZcMFs/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ggCT0_AWAUQQTqxSFVS3p5JgNJZw6seuM6sSpqLPsnTWJWVIuND8tWU-dGtUDW7f5nPkjN5vifyH0F_m6t85Qz6SaX01HsqBVDCgl0wuh8mHbOWrJ7NXL9rajo-3d0L2aIZ88sZcMFs/s400/5.png" width="400" /></a></div>
<br />Nantinya akan muncul GUI Installasi xampp</li>
<li>Setelah muncul GUI Xampp klik next lalu pilih sesuai dengan kebutuhan dan klik next lagi.<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi7CDvzYDE3hdE4TW9aqrgLfj6lRa_jjcZWL-dwAlZnn5vSpCsWskHJLAvKhf-fimRRfMKYpwGty8_3Jh13e7n2d12oA6O423VFKxDx8LD-w6GfyYVf4UrVQpTm7quGUa7c0pO-iKni7k/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi7CDvzYDE3hdE4TW9aqrgLfj6lRa_jjcZWL-dwAlZnn5vSpCsWskHJLAvKhf-fimRRfMKYpwGty8_3Jh13e7n2d12oA6O423VFKxDx8LD-w6GfyYVf4UrVQpTm7quGUa7c0pO-iKni7k/s400/6.png" width="400" /></a></div>
</li>
<li>Klik next hingga muncul proses installasi tunggu hingga beberapa saat hingga installasi selesai.</li>
<li>Nantinya akan muncul GUI Xampp lalu klik start pada service yang ingin dijalankan dan selamat anda sudah berhasil menginstall xampp di linux.</li>
</ol>
Semoga artikel ini bermanfaat bagi anda yang sedang menginstall xampp pada linux. Terima kasih telah berkunjung  </div>

Cara Menginstall Xampp di Linux

Cara Menginstall Xampp di Linux

Pada kali ini saya akan memberikan tutorial bagaimana menginstall Xampp di Linux. Xampp merupakan webserver yang sudah terdapat PHP+Apa...

Lihat Lebih lanjut »

2:46 PM

Desain Layout Web Dasar

<div dir="ltr" style="text-align: left;" trbidi="on">
   Pada kali ini saya akan memberikan penjelasan mengenai struktur-struktur pada desain web dasar bagian layout. Bagian ini merupakan bagian paling penting karena biasanya suatu website akan terlihat menarik jika dilihat dari layoutnya. Berikut ini penjelsannya yang saya ambil dari artikel di website <a href="http://bertzzie.com/knowledge/desain-web-dasar/Layout.html" target="_blank">bertzzie.com</a> .<br />
 
<br />
<h2 style="text-align: left;">
Layout</h2>
<div>
Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.</div>
<div>
</div>
<div>
Sebuah dokumen web seharusnya memiliki susunan layout seperti berikut.</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="332" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Header</b></div>
<div class="separator" style="clear: both;">
Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Navigation</b></div>
<div class="separator" style="clear: both;">
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Sidebar</b></div>
<div class="separator" style="clear: both;">
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Konten</b></div>
<div class="separator" style="clear: both;">
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Elemen Footer</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Sebelum membuat layout, tentunya kita terlebih dahulu harus mengetahui cara pengukuran elemen pada HTML. Karena tanpa dapat mengukur elemen dengan benar, kita tidak akan dapat membuat layout yang bagus.</div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Box Model</h3>
<div>
<div>
Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan <b>bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak</b>. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin, padding, dan border dari elemen tersebut.</div>
<div>
</div>
<div>
Semua elemen juga dapat dikategorikan ke dalam dua cara penampilan, yaitu:</div>
</div>
<div>
</div>
<div>
<ul style="text-align: left;">
<li><b>Block Level Element </b>merupakan elemen yang selalu dimulai pada baris baru, dan menambahkan baris baru pada akhir elemen. Hal ini menyebabkan elemen yang bersifat block akan selalu berada pada baris barunya sendiri ketika dituliskan. Contoh dari elemen block: p, h1, dan blockquote.</li>
<li><b>Inline Level Elements</b> merupakan elemen yang tidak membuat baris baru ketika dibuat. Elemen ini akan mengikuti alur dokumen sebagaimana mestinya, dan memiliki ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline: span, b, i.</li>
</ul>
<div>
<div>
Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.</div>
<div>
</div>
<div>
Kode di bawah memperlihatkan contoh perbedaan block level elemen dengan inline level element:</div>
</div>
</div>
<div>
</div>
<div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><h1>Elemen H1</h1>
<p>Elemen p otomatis membuka baris baru dari elemen h1, tetapi elemen
<b>bold</b> ini tidak</p></pre>
</div>
<div>
</div>
<div>
<div>
Jalankan kode di atas untuk melihat efeknya!</div>
<div>
</div>
<div>
Seperti yang telah dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak, dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border. Kode berikut menunjukkan contoh total luas sebuah elemen, lakukan simpan kode ke dalam sebuah file HTML dan jalankan untuk melihat hasilnya:</div>
</div>
<div>
</div>
<div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #boxmodel {
                background: #CDE;
                border: 25px solid #ABC;
                height: 100px;
                margin: 25px;
                padding: 25px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div>Box Model</div>
        <div id="boxmodel">
        </div>
        <div>Box Model</div>
    </body>
</html></pre>
</div>
<div>
</div>
<div>
Hasil dari eksekusi kode diatas adalah seperti berikut :</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelExecute.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="255" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelExecute.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Bagaimana panjang dan lebar dari kotak pada kode di atas? Berikut lihat selengkapnya.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelMeasurement.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="250" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/BoxModelMeasurement.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
Seperti yang dapat dilihat pada gambar di atas, pengukuran total dari panjang elemen adalah:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
margin-right + border-right + padding-right + width + padding-left +</div>
<div class="separator" style="clear: both;">
border-left + margin-left</div>
<div class="separator" style="clear: both;">
dan tinggi total dari sebuah elemen adalah:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
margin-top + border-top + padding-top + height + padding-bottom +</div>
<div class="separator" style="clear: both;">
border-bottom + margin-bottom</div>
<div class="separator" style="clear: both;">
sehingga total dari panjang elemen tersebut yaitu 450px, dan total tinggi elemen ialah 250px.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Mari kita lihat properti-properti CSS yang mempengaruhi box model.</div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both; text-align: left;">
Properti Height dan Width</h4>
<div>
<div>
Setiap elemen yang ada dalam HTML memiliki tinggi dan lebar yang standar, yang didapatkan dengan menyesuaikan ukuran konten. Tergantung kepada tujuan pembuatan dokumen, tinggi dan lebar standar yang diberikan oleh elemen mungkin saja tidak tepat digunakan. Properti height dan weight digunakan untuk mengubah tinggi dan lebar standar ketika dibutuhkan.</div>
<div>
</div>
<div>
Berikut adalah contoh pengunaan kedua properti ini:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    height: 20px;
    width: 30px;
}</pre>
<div>
</div>
<div>
Kedua properti ini hanya dapat digunakan untuk block level element.</div>
</div>
<div>
 
<br />
<h4 style="text-align: left;">
Properti Margin dan Padding</h4>
</div>
<div>
<div>
Setiap browser memberkan jarak antar elemen secara standar, agar elemen-elemen HTML dapat ditampilkan dengan optimal. Jarak antar elemen ini berbeda-beda, tergantung kepada browser yang mengimplementasikan. Untuk mengubah jarak antar elemen, kita dapat menggunakan properti margin.</div>
<div>
</div>
<div>
Terkadang kita juga ingin memberikan jarak di dalam elemen sendiri, yaitu jarak dari konten elemen ke pembatas (border) elemen. Jarak ini dikenal dengan nama padding. Padding kerap digunakan untuk memberikan warna latar yang baik pada elemen. Berikut adalah contoh kode pengunaan margin dan padding:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    margin: 10px;
    padding: 15px;
}</pre>
</div>
<div>
</div>
<div>
<div>
Sedikit catatan tambahan, properti padding dan margin dapat juga ditulis dengan singkat. Penulisan hanya dengan satu nilai seperti pada kode di atas akan menyebabkan nilai padding dan margin diimplementasikan pada keempat sisi elemen:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    margin: 40px;
}</pre>
<div>
Mengisikan dua nilai akan mengisikan nilai padding dan margin atas dan bawah pada nilai pertama, serta kiri dan kanan pada nilai kedua, seperti berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    /*
        margin-top: 25px
        margin-bottom: 25px
        margin-left: 50px;
        margin-right: 50px;
    */
    margin: 25px 50px;
}</pre>
<div>
Dan seperti yang dapat ditebak, pengisian empat nilai akan dilakukan secara berurutan pada margin dan padding atas, kanan, bawah, dan kiri:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    /*
        margin-top: 10px
        margin-right: 20px;
        margin-bottom: 30px
        margin-left: 40px;
    */
    margin: 10px 20px 30px 40px;
}</pre>
<div>
Selain itu, kita juga dapat mengubah hanya satu bagian dari margin ataupun padding dengan menambahkan kata top, right, bottom, dan left setelah margin atau padding seperti berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">p {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px
    margin-left: 40px;
}</pre>
</div>
<h3 style="text-align: left;">
Border</h3>
<div>
<div>
Border, sebagai pemberi tanda batas elemen memisahkan margin dan padding. Terdapat tiga properti utama yang membentuk sebuah border, yaitu border-width, border-style, dan border-color.</div>
<div>
</div>
<div>
<b>border-width</b></div>
<div>
Seperti namanya, properti ini menentukan ketebalan border, yang diisikan dengan nilai pixel. Contoh kode adalah sebagai berikut:</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-width: 10px;
}</pre>
<div>
<b>border-style</b></div>
<div>
Menentukan cara penampilan dari border. Pilihan nilai yang dapat diisikan yaitu: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, dan outset. Ingin mengetahui kegunaan masing-masing nilai? Silahkan coba implementasikan elemen tersebut! Jika tidak diisikan, maka secara otomatis nilai yang dipilih ialah none, sehingga border tidak akan tampak.</div>
<div>
</div>
<div>
Contoh kode:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-style: dotted;
}</pre>
<div>
<br />
<b>border-color</b></div>
<div>
Seperti namanya, memberikan warna kepada border. Jika warna tidak diberikan, maka border akan menjadi warna hitam. </div>
<div>
</div>
<div>
Contoh kode:</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-color: red;
}</pre>
<div>
<br />
Ketiga properti di atas seringkali digunakan bersamaan, karena ketergantungan antar properti tersebut dalam membuat border yang indah. Penggabungan ketiga properti dapat ditulis dalam properti border seperti berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border: 1px solid red;
}</pre>
<div>
<br />
Dan seperti yang dapat dilihat dari kode di atas, tentunya urutan penulisannya ialah border-width border-style border-color.</div>
<div>
</div>
<div>
Meskipun seluruh elemen pada dasarnya berbentuk kotak, CSS memungkinkan kita untuk menampilkan elemen dengan sedikit variasi, yaitu memberikan sudut bulat kepada elemen.</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/RoundedCornerSample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="145" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/RoundedCornerSample.png" title="Desain Layout Web Dasar" width="320" /></a></div>
<div>
</div>
<div>
<div>
Kita dapat menggunakan properti border-radius untuk membuat efek sudut bulat, seperti pada kode di bawah:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">div {
    border-radius: 10px;
}</pre>
<div>
</div>
<div>
Selain pengisian dengan satu nilai, tentunya border-radius dapat diisikan dengan banyak nilai. Sayangnya, karena kompleksitas properti ini, maka pembahasan lebih jauh mengenai border-radius tidak akan dilakukan.</div>
</div>
<div>
</div>
<h3 style="text-align: left;">
Penyusunan Element</h3>
<div>
Pengukuran elemen dengan mengikut sertakan box model hanya merupakan sebagian pengetahuan yang diperlukan untuk membuat layout halaman yang sempurna. Pengetahuan lain yang harus dimengerti juga ialah cara menyusun elemen-elemen yang ada di dalam dokumen. Bagian ini akan membahas bagaimana menyusun elemen-elemen yang ada dalam dokumen, dengan berbagai teknik yang disediakan oleh HTML dan CSS.</div>
<div>
</div>
<h4>
Penampungan Element</h4>
<div>
<div>
Apa maksud dari “penampung” sebuah elemen? Elemen penampung ialah elemen yang memiliki banyak elemen-elemen lain di dalamnya. Misalnya, pada kode di bawah:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><p>
    Ini adalah sebuah paragraf, yang didalamnya terdapat
    elemen <b>bold</b>, <i>italic</i>, <em>emphasis</em>,
    dan <strong>strong</strong>.
</p></pre>
<div>
Pada kode di atas, elemen p merupakan penampung dari elemen b, i, em, dan strong. Bagaimana jika kita tidak ingin menggunakan p untuk menampung seluruh elemen-elemen yang ada? Untuk menampung elemen-elemen secara generik, kita dapat menggunakan elemen div. Elemen div merupakan elemen yang dirancang sebagai penampung dari elemen lainnya, sehingga elemen ini tidak memiliki makna semantik. Kita dapat menggunakan div untuk menampung berbagai elemen, tanpa batasan, misalnya:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><div class="wrapper">
    <section id="articles">
        <article>
            
        </article>
        <article>
            
        </article>
        <article>
            
        </article>
    </section>
    <aside>
        <nav>
            
        </nav>
    </aside>
</div></pre>
<div>
Dapat dilihat bagaimana div.wrapper di atas menampung banyak elemen-elemen blok lainnya. Dengan kode HTML di atas, panjang dari elemen-elemen yang ada di dalam div.wrapper tidak akan pernah lebih panjang dibandingkan dengan div.wrapper itu sendiri. Coba jalankan kode di bawah untuk melihat bagaimana elemen-elemen yang ada di dalam div.wrapper tidak dapat melewati ukuran div.wrapper itu sendiri:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            .wrapper {
                background: red;
                color: white;
                height: 600px;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue
            sagittis dictumst in dolor scelerisque pid, sociis enim
            porttitor et, porta porttitor. Tincidunt egestas ultricies,
            scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis
            dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
            integer enim scelerisque ut amet? Nascetur nisi parturient
            lundium augue?
            </p>
            Odio sagittis cursus et ut ridiculus pulvinar habitasse,
            elementum et tristique non, nisi porttitor magna! Tristique
            adipiscing penatibus sed nunc. Non pulvinar vut porttitor!
            Odio nisi porttitor sit tincidunt dictumst, massa rhoncus.
            Sociis enim habitasse enim, nunc nascetur, ridiculus, et mus
            nascetur, augue ultricies aliquet mus a adipiscing amet?
            </p>
        </div>
            <p>
            Proin nec rhoncus, quis, elementum amet parturient augue
            sagittis dictumst in dolor scelerisque pid, sociis enim
            porttitor et, porta porttitor. Tincidunt egestas ultricies,
            scelerisque.
            </p>
            <p>
            Dis augue, in elementum lundium lectus porttitor duis turpis
            dis. Nisi vel porta turpis arcu nec diam penatibus, et sit
            integer enim scelerisque ut amet? Nascetur nisi parturient
            lundium augue?
            </p>
    </body>
</html></pre>
<div>
Ketika kode dijalankan maka hasilnya adalah sebagai berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDiv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="297" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDiv.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
Perhatikan bagaimana paragraf yang berada di luar div.wraapper dapat melewati 800px (panjang dari div.wrapper) sementara paragraf yang berada di dalam div.wrapper harus berpindah baris ketika mencapai ujung dari div.wrapper.</div>
<div>
</div>
<h4 style="text-align: left;">
Floating Element</h4>
<div>
<div>
Bagaimana dengan penyusunan elemen yang berada di dalam penampung? Salah satu cara untuk mengorganisasikan posisi elemen yang saling bersisian ialah menggunakan properti float. Properti float memungkinkan kita membuat sebuah elemen “mengapung” pada sisi kiri ataupun kanan dari penampung elemen tersebut. Untuk lebih mudahnya, mari kita lihat cara kerja dari elemen float secara langsung!</div>
<div>
</div>
<div>
Ganti kode CSS dari kode pada gambar Hasil Eksekusi Kode div.wrapper menjadi kode berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.wrapper {
    background: red;
    color: white;
    height: 600px;
    width: 800px;
}

.wrapper p {
    background: blue;
    color: white;
    float: left;
    margin: 10px;
    padding: 10px;
    width: 200px;
}</pre>
<div>
</div>
<div>
dan kemudian jalankan. Anda akan dapat melihat bagaimana paragraf-paragraf di dalam div.wrapper menjadi berukuran kecil, dan “terbang” saling bersisian, ke arah kiri. Paragraf yang paling pertama kali dituliskan akan menjadi paragraf yang paling kiri, dan seterusnya.<br />
 
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatLeft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="136" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatLeft.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">Hal lainnya yang perlu diperhatikan ialah bahwa properti float merusak alur dari halaman. Apa artinya merusak alur dari halaman? Ketika menggunakan properti ini maka elemen-elemen lain akan menjadi terpaksa mengikuti aturan kanan maupun kiri dari float. Misalnya, jika kita menambahkan sebuah h1 setelah paragraf ketiga, sehingga isi dari div.wrapper adalah sebagai berikut:

<div class="wrapper">
    <p>
    Proin nec rhoncus, quis, elementum amet parturient augue sagittis
    dictumst in dolor scelerisque pid, sociis enim porttitor et, porta
    porttitor. Tincidunt egestas ultricies, scelerisque.
    </p>
    <p>
    Dis augue, in elementum lundium lectus porttitor duis turpis dis.
    Nisi vel porta turpis arcu nec diam penatibus, et sit integer enim
    scelerisque ut amet? Nascetur nisi parturient lundium augue?
    </p>
    <p>
    Odio sagittis cursus et ut ridiculus pulvinar habitasse, elementum
    et tristique non, nisi porttitor magna! Tristique adipiscing
    penatibus sed nunc. Non pulvinar vut porttitor! Odio nisi porttitor
    sit tincidunt dictumst, massa rhoncus. Sociis enim habitasse enim,
    nunc nascetur, ridiculus, et mus nascetur, augue ultricies aliquet
    mus a adipiscing amet?
    </p>
    <h1>Ini adalah sebuah judul yang terpengaruh float.</h1>
</div>

Maka elemen h1 tersebut akan secara otomatis mengikuti alur elemen-elemen p sebelumnya, dan mulai dari akhir elemen p terakhir, seperti pada gambar berikut:</pre>
</div>
</div>
<div>
 
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatRightWithH1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="151" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivFloatRightWithH1.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">Bagaimana jika kita ingin memaksa h1 kembali ke alur halaman yang benar? Untuk menghapus segala “jejak” dari float dan mengembalikan alur halaman ke alur normal, kita dapat menggunakan properti clear. Tambahkan kode CSS berikut:

.wrapper h1 {
    clear: both;
}

maka elemen h1 akan secara otomatis membuka baris baru, sesuai dengan alur halaman yang seharusnya.</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivClear.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="152" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WrapperDivClear.png" title="Desain Layout Web Dasar" width="400" /></a></div>

<br />
<h4 style="text-align: left;">
Pembangunan Layout Web Dasar</h4>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="332" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/WebLayoutElements.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
<div>
Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada sidebar dan content, serta clear pada footer. Perlu diingat juga bahwa pada dokumen web yang sebenarnya, properti height jarang digunakan karena tinggi elemen biasanya ditentukan oleh isi dari elemen itu sendiri.</div>
<div>
</div>
<div>
Untuk membuat layout seperti pada gambar Elemen-elemen Layout pada Dokumen Web, kita dapat menggunakan kode HTML dan CSS berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>
<html>
    <head>
        <title>Layout Dasar Dokumen Web</title>
        <style type="text/css">
            body {
                width: 960px;
            }

header, nav, aside, section, footer {
                background: #14BCE6;
                border: 1px solid white;
                color: white;
                font-size: 2em;
                font-variant: small-caps;
                text-align: center;
            }
            header, nav, footer {
                width: 100%;
            }

header, footer {
                height: 100px;
            }
            nav {
                height: 50px;
            }

aside {
                float: left;
                height: 250px;
                width: 29.5%;
            }
            section#content {
                float: right;
                height: 250px;
                width: 70%;
            }

footer {
                clear: both;
            }
        </style>
    </head>
    <body>
        <header>Header</header>
        <nav>Navigation</nav>
        <aside>Sidebar</aside> <section id="content">Content</section>
        <footer>Footer</footer>
    </body>
</html></pre>
<div>
</div>
<div>
Eksekusi kode, dan kita akan dapat melihat hasil eksekusi sebagai berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/HTMLStandardLayoutDiv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="210" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/HTMLStandardLayoutDiv.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
<div>
Cara membuat teks yang ada di dalam elemen-elemen HTML berada di tengah secara vertikal akan dibiarkan untuk menjadi latihan bagi pembaca.</div>
<div>
</div>
<div>
Perhatikan juga bahwa kode yang digunakan untuk membuat tampilan di atas tidak lagi terurut sesuai dengan penulisan kode, seperti pada gambar di bawah:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/CodetoPage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="278" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/CodetoPage.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<h4 style="text-align: left;">
Clear Fix</h4>
<div>
Salah satu permasalahan utama dari pengunaan float ialah ketika kita menggunakan sebuah elemen kontainer yang hanya menampung elemen float saja. Karena sifat utama dari float yang “menerbangkan” elemen, maka kontainer menjadi dianggap tidak memiliki tinggi, dan elemen-elemen lain akan langsung berada di bawah elemen kontainer tersebut. Penjelasan mengenai bagaimana menyelesaikan masalah ini telah diberikan sebelumnya, pada bagian Floating Element, di mana kita menggunakan kode CSS berikut:</div>
<div>
</div>
<div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.wrapper h1 {
    clear: both;
}</pre>
<div>
untuk menyelesaikan masalah. Sayangnya, kode di atas tidak menyelesaikan seluruh masalah yang ada, karena jika kita tidak mengetahui dengan pasti di mana elemen selanjutnya akan diletakkan, maka kode di atas tidak akan dapat bekerja dengan baik. Metode lain untuk membersihkan float ialah dengan menggunakan teknik “clear fix”, yang kodenya dapat dilihat sebagai berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.container {
    margin: 0;
    padding: 0;
}

.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}</pre>
<div>
Pada prinsipnya, kode di atas membersihkan float dengan clear: both dan penambahan sebuah tabel “dummy” sebelum dan sesudah elemen penampung.</div>
</div>
<div>
</div>
<h3 style="text-align: left;">
Grid</h3>
<div>
<div>
Sebuah layout yang baik menyusun elemen-elemen halaman dengan rapi dan mudah diprediksi. Kemudahan prediksi penting agar pembaca / pengguna web anda tidak perlu berpikir dalam menggunakan web anda. Ingat, “Don’t Make Me Think” merupakan salah satu prinsip dasar dalam pembuatan antarmuka web dan aplikasi secara general. Salah satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan menggunakan garis pembantu penyusunan elemen, yang dikenal dengan nama “Grid” pada dunia web.</div>
<div>
</div>
<div>
Sebagai garis pembantu dalam menyusun elemen, Grid dibuat dalam berbagai bentuk dan ukuran, sesuai dengan keperluan. Penempatan elemen dilakukan di dalam sebuah Grid, ataupun di dalam beberapa Grid. Pemakaian Grid umumnya dilakukan untuk menyusun elemen secara merata. Untuk lebih mudahnya, perhatikan gambar berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/DrupalGridSample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="323" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/DrupalGridSample.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
Pada gambar Contoh Pengunaan Grid pada Drupal, kita dapat melihat bagaimana situs Drupal dibangun menggunakan 12 buah Grid, yang masing-masing elemennya disusun berdasarkan Grid tersebuut. Elemen feature Drupal, yang berada di paling atas halaman, mengambil ruang 12 Grid, sementara 3 elemen informasi mengenai drupal masing-masing mengambil 4 Grid. Penyusunan seperti ini kerap kali ditemukan dalam banyak website-website lain, dengan ukuran Grid yang berbeda-beda.</div>
<div>
</div>
<h3 style="text-align: left;">
Pembuatan Grid</h3>
<div>
<div>
Pembuatan Grid dapat dilakukan dengan mudah, dengan melakukan pembagian terhadap ukuran halaman web yang ingin dibangun dengan jumlah kolom Grid yang diinginkan, dengan memperhitungkan Box Model juga tentunya. Misalkan, jika ingin membuat halaman berukuran 960 px memiliki 12 Grid, kita dapat melakukan perhitungan berikut:</div>
<div>
</div>
<div>
lebar_grid = 960 / 12</div>
<div>
lebar_grid = 80 px</div>
<div>
dan dengan memperkirakan box model, jika ingin setiap kolom memiliki jarak 20 px kita dapat menambahkan margin ke kiri dan ke kanan pada setiap kolom, sebanyak setengah dari jarak yang diinginkan (10 px), seperti berikut:</div>
<div>
</div>
<div>
konten_grid = 80 - jarak</div>
<div>
            = 80 - 20</div>
<div>
            = 60 px</div>
<div>
Sehingga ukuran margin kiri dan kanan dari elemen adalah:</div>
<div>
</div>
<div>
margin_kiri_kanan = jarak / 2</div>
<div>
                  = 20 / 2</div>
<div>
                  = 10 px</div>
<div>
Dengan perhitungan yang telah dilakukan, maka kita dapat memperkirakan bentuk dari sebuah Grid adalah sebagai berikut:</div>
</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/SingleGridCalculation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="77" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/SingleGridCalculation.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
dan dengan mengurutkan kedua belas Grid tersebut, kita bisa mendapatkan sebuah halaman yang berukuran 960 px. Tentunya dengan prinsip yang sama kita juga dapat membuat Grid yang merupakan gabungan dari 2 Grid, 3 Grid, sampai 12 Grid!</div>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://bertzzie.com/knowledge/desain-web-dasar/_images/TheGrid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Desain Layout Web Dasar" border="0" height="202" src="http://bertzzie.com/knowledge/desain-web-dasar/_images/TheGrid.png" title="Desain Layout Web Dasar" width="400" /></a></div>
<div>
<div>
Pembuatan kode Grid menggunakan CSS sendiri sangatlah sederhana. Kita dapat memulai pembuatan kode dengan memberikan nama kelas, untuk setiap ukuran Grid. Misalnya, kita menggunakan nama kelas “coln” untuk setiap kolom Grid, dengan n adalah lebar kolom yang diinginkan. Misalnya, kolom berukuran 2 Grid akan memiliki nama kelas col2, 4 kolom memiliki nama kelas col4, dan seterusnya.</div>
<div>
</div>
<div>
Untuk mengawali, hilangkan padding, margin atas bawah, dan berikan warna serta float kepada seluruh kolom yang ada:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.col1, .col2, .col3, .col4,
.col5, .col6, .col7, .col8,
.col9, .col10, .col11, .col12 {
    background: #CCC;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 0 10px 0 10px;
    padding: 0;
    text-align: center;
}</pre>
<div>
Kemudian, kita dapat mengaplikasikan perhitungan yang telah dilakukan sebelumnya ke masing-masing ukuran kolom:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.col1 {
    width: 60px;
}

.col2 {
    width: 140px;
}
.col3 {
    width: 220px;
}

.col4 {
    width: 300px;
}

.col5 {
    width: 380px;
}
.col6 {
    width: 460px;
}

.col7 {
    width: 540px;
}
.col8 {
    width: 620px;
}

.col9 {
    width: 700px;
}
.col10 {
    width: 780px;
}

.col11 {
    width: 860px;
}
.col12 {
    width: 940px;
}</pre>
<div>
dan kemudian, tentunya container dan clearfix untuk setiap container yang ada:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">.container {
    background: #555;
    margin: 0;
    padding: 0;
    width: 960px;
}
.container:before,
.container:after,
.row:before,
.row:after {
    content:"";
    display:table;
}
.container:after,
.row:after {
    clear:both;
}

.row {
    clear: both;
    margin: 10px 0 10px 0;
}</pre>
<div>
Untuk melihat efeknya, simpan seluruh kode CSS di atas ke dalam sebuah file bernama grid.css, dan jalankan kode HTML berikut:</div>
<div>
</div>
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE html>

<html>
    <head>
        <title>Contoh Grid pada HTML</title>
        <link rel="stylesheet" href="grid.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
                <div class="col1">1</div>
            </div>

<div class="row">
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
                <div class="col2">2</div>
            </div>
            <div class="row">
                <div class="col3">3</div>
                <div class="col3">3</div>
                <div class="col3">3</div>
                <div class="col3">3</div>
            </div>

<div class="row">
                <div class="col4">4</div>
                <div class="col4">4</div>
                <div class="col4">4</div>
            </div>
            <div class="row">
                <div class="col5">5</div>
                <div class="col5">5</div>
                <div class="col2">2</div>
            </div>

<div class="row">
                <div class="col6">6</div>
                <div class="col6">6</div>
            </div>
            <div class="row">
                <div class="col7">7</div>
                <div class="col5">5</div>
            </div>

<div class="row">
                <div class="col8">8</div>
                <div class="col4">4</div>
            </div>
            <div class="row">
                <div class="col9">9</div>
                <div class="col3">3</div>
            </div>

<div class="row">
                <div class="col10">10</div>
                <div class="col2">2</div>
            </div>
            <div class="row">
                <div class="col11">11</div>
                <div class="col1">1</div>
            </div>

<div class="row">
                <div class="col12">12</div>
            </div>
        </div>
    </body>
</html></pre>
<div>
</div>
<div>
Jalankan kode HTML di atas, untuk melihat hasil seperti pada gambar Grid, dari 1 Grid sampai gabungan 12 Grid.<br />
Konten ini bukan saya yang menulis melainkan saya mengcopy dari website <a href="http://bertzzie.com/knowledge/desain-web-dasar/Layout.html" target="_blank">bertzzie.com</a></div>
</div>
</div>

Desain Layout Web Dasar

Desain Layout Web Dasar

Pada kali ini saya akan memberikan penjelasan mengenai struktur-struktur pada desain web dasar bagian layout. Bagian ini merupakan bagia...

Lihat Lebih lanjut »

12:00 PM

Cara Membuat Random Angka dan Huruf Menggunakan PHP

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://c1.staticflickr.com/5/4027/4390818294_16a76dfff7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Random Angka dan Huruf Menggunakan PHP" border="0" height="240" src="https://c1.staticflickr.com/5/4027/4390818294_16a76dfff7.jpg" title="Cara Membuat Random Angka dan Huruf Menggunakan PHP" width="320" /></a></div>
<br />
   Kali ini saya akan memberikan tutorial bagaimana caranya membuat random angka dan huruf menggunkaan php.Random angka dan huruf sangat berguna sekali bagi kita yang sedang membuat suatu website. Biasanya random anka dan huruf ini digunakan untuk email konfirmasi, captcha dan password yang disesuaikan dengan pemilik website. Dengan seperti ini kita dapat membuat suatu password atau sebagainya yang tidak akan sama satu dengan lainnya. Dan juga dapat mempersulit orang yang tidak bertanggung jawab melakukan hal yang tidak wajar.<br />
<br />
Baiklah perhatikan script dibawah ini.<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><?php
$text = 'abcdefghijklmnopqrstuvwxyz123457890';
$panj = 50;
$txtl = strlen($text)-1;
$result = '';
for($i=1; $i<=$panj; $i++){
 $result .= $text[rand(0, $txtl)];
}
echo $result;
?>

</pre>
<br />
<b>Penjelasan :</b><br />
<br />
<ol style="text-align: left;">
<li>Pada baris ke 1 merupakan pembuka dalam php</li>
<li>Pada baris ke 2 dimana variable text diberi nilai huruf dan angka.</li>
<li>Pada baris ke 3 variable panj diberi nilai 50 yang nantinya digunakan untuk menentukan panjang string.</li>
<li>Pada baris ke 4 variable txtl diberi nilai dengan jumlah karakter pada variable text  yang dikurangi 1.</li>
<li>Pada baris ke 5 dibuat variable result yang nantinya akan menampung hasil dari random.</li>
<li>Pada baris ke 6 dilakukan for dengan melakukan perulangan pada variable panj tadi.</li>
<li>Pada baris ke 7 variable result diisi dengan array text yang di random</li>
<li>Pada baris ke 8 dilakukan penutupan pengulangan for</li>
<li>Pada baris ke 9 hasil result tadi di outputkan.</li>
<li>Pada baris ke 10 merupakan penutup dalam php.</li>
</ol>
<div style="text-align: center;">
<a href="http://rezajuliandri.ga/demo/php/random.php" target="_blank">Klik tulisan ini untuk melihat demo dari script diatas</a></div>
<div style="text-align: center;">
<br /></div>
<div>
Semoga artikel ini bermanfaat bagi anda. Jika terdapat error coba mengecek script yang anda buat.</div>
</div>

Cara Membuat Random Angka dan Huruf Menggunakan PHP

Cara Membuat Random Angka dan Huruf Menggunakan PHP

Kali ini saya akan memberikan tutorial bagaimana caranya membuat random angka dan huruf menggunkaan php.Random angka dan huruf sangat...

Lihat Lebih lanjut »

12:00 PM

Kondisi Yang Dapat Digunakan Dalam IF

<div dir="ltr" style="text-align: left;" trbidi="on">
Kondisi yang digunakan dalam pernyataan <b>IF </b>melibatkan operator pembanding atau kadang disebut operator resional. Operator resional selalu menghasilkan nilai berupa true dan false. Berikut ini table yang memperlihatkan operator pembanding.<br />
<br />
<table border="1"> <thead>
<tr>    <th>Operator</th>    <th>Keterangan</th>    <th>Contoh</th>   </tr>
</thead>  <tbody>
<tr>    <th>==</th>    <th>Operator "Sama Dengan"</th>    <th><br />
2 == 2 Benar <br />
2 == 21 Salah</th>   </tr>
<tr>    <th>!=</th>    <th>Operator "Tidak Sama Dengan"</th>    <th><br />
3 != 20 Benar<br />
3 != 3 Salah</th>   </tr>
<tr>    <th><</th>    <th>Operator "Kurang Dari"</th>    <th><br />
2 < 9 Benar <br />
3 < 2 Salah </th>   </tr>
<tr>    <th><=</th>    <th>Operator "Kurang Dari Atau Sama Dengan"</th>    <th><br />
3 <= 20 Benar <br />
5 <= 5 Benar <br />
9 <= 2 Salah</th>   </tr>
<tr>    <th>></th>    <th>Operator "Lebih Dari"</th>    <th><br />
9 > 2 Benar <br />
7 > 9 Salah</th>   </tr>
<tr>    <th>>=</th>    <th>Operator "Lebih Dari Atau Sama Dengan"</th>    <th><br />
20 >= 2 Benar <br />
20 >= 20 Benar <br />
2 >= 20 Salah</th>   </tr>
</tbody> </table>
<br />
Kondisi If juga melibatkan operator logika yang berupa &&, ||, !. . Penggunaannya seperti berikut<br />
<br />
kondisi1 && kondisi2<br />
kondisi1 || kondisi2<br />
<br />
Dengan code diatas akan menghasilkan ketetuan true dan false seperti ketentuan pada tabel berikut.<br />
<table border="1"> <thead>
<tr>    <th>A</th>    <th>B</th>    <th>A || B</th>    <th>A && B</th>   </tr>
</thead>  <tbody>
<tr>    <th>False</th>    <th>False</th>    <th>False</th>    <th>False</th>   </tr>
<tr>    <th>False</th>    <th>True</th>    <th>True</th>    <th>False</th>   </tr>
<tr>    <th>True</th>    <th>False</th>    <th>True</th>    <th>False</th>   </tr>
<tr>    <th>True</th>    <th>True</th>    <th>True</th>    <th>True</th>   </tr>
</tbody> </table>
Adapun penggunaan ! adalah seperti berikut<br />
!kondisi<br />
<br />
Hasilnya berupa : <br />
<div style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>True jika kondisi bernilai False</li>
<li>False Jika kondisi bernilai True</li>
</ul>
<div>
Mungkin sekian dari saya semoga bermanfaat bagi anda semua.</div>
</div>

Kondisi Yang Dapat Digunakan Dalam IF

Kondisi Yang Dapat Digunakan Dalam IF

Kondisi yang digunakan dalam pernyataan IF melibatkan operator pembanding atau kadang disebut operator resional. Operator resional selalu m...

Lihat Lebih lanjut »

4:47 PM

Cara Mengetahui Kesalahan Dalam Javascript

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQcZnadDyfa611wt1p53gD1cVh26aSUg81PWD9uZ5pRsLyeR-jFaVEXv2VMAU-Gj3bkSu7AI0iil490qlRZWM0ov5d09GviB4UlNB7mdncCDniOjd5NFA4w8v1Zdv8D4m-8kpsGCKV-HM/s1600/javascript1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQcZnadDyfa611wt1p53gD1cVh26aSUg81PWD9uZ5pRsLyeR-jFaVEXv2VMAU-Gj3bkSu7AI0iil490qlRZWM0ov5d09GviB4UlNB7mdncCDniOjd5NFA4w8v1Zdv8D4m-8kpsGCKV-HM/s1600/javascript1.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
anda menuliskan kode Javascript, Anda akan sering mengalami kesalahan yang membuat hasil dari script anda tidak sempurna dan tidak seperti apa yang anda harapkan. Untuk mengetahui kesalahannya anda dapat menggunakan fasilitas yang ada di browser. Untuk contoh mengecek kesalahan dalam javascript cobalah buat code seperti dibawah ini.<br />
<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><html>
<head>
<title>Mengetes kesalan pada javascript</title>
</head>
<body>
<script type="text/javascript">
var a;
var b;
var c;
var d;
document.write(a + b + c + d + e);
</script>
</body>
</html>
</pre>
<br />
<br />
Maka jika anda test di browser akan muncul seperti gambar dibawah ini<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/7XyHKAw.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="147" src="http://i.imgur.com/7XyHKAw.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Coba perhatikan gambar diatas. Hasilnya akan kosong tidak akan muncul tulisan. Itu dikarenakan javascript yang kita tulis tadi salah. Untuk mengetahui letak kesalahannya dengan menekan <b>Ctrl + Shift + J</b> terlebih dahulu. Lalu nantinya akan seperti berikut ini </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/eTwbuXP.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="http://i.imgur.com/eTwbuXP.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ketika sudah muncul jendela Inspect Element klik bagian console seperti tulisan yang saya beri warna merah diatas. Setelah di klik nanti akan muncul error pada javascript seperti berikut ini.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/gRamL64.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="54" src="http://i.imgur.com/gRamL64.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Dari gambar diatas kesalahan yang terjadi berupa : Uncaught ReferenceError : e is not defined. Pesan ini menyatakan ada angka yang tidak diharapkan. Kesalahan dinyatakan dalam error.html:11 yang menandakan bahwa kesalahan ada pada file error.html baris ke 11. Dengan pesan kesalahan ini dapat kita jadikan pendoman untuk membetulkan lokasi yang di tunjukkan.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Setelah melihat kesalahan diatas coba anda tambahkan <b>var e;</b> tepat dibawah <b>var d</b>; . Lalu simpan dan perhatikan kembali consolenya nantinya tulisan tadi akan hilang yang menandakan tidak ada error pada code tersebut dan akan ada tulisan NaN karena kita belum menambahkan isi dari variable tersebut.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Mungkin sekian dari saya semoga artikel ini bermanfaat bagi anda. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>

Cara Mengetahui Kesalahan Dalam Javascript

Cara Mengetahui Kesalahan Dalam Javascript

anda menuliskan kode Javascript, Anda akan sering mengalami kesalahan yang membuat hasil dari script anda tidak sempurna dan tidak sep...

Lihat Lebih lanjut »

4:11 PM

Pengertian Array dalam Programming

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://ycpcs.github.io/cs201-summer2014/notes/figures/array-2d.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://ycpcs.github.io/cs201-summer2014/notes/figures/array-2d.png" width="320" /></a></div><br />
Array adalah wadah yang dapat menyimpan sejumlah nilai skalar. Setiap nilai di array diakses melalui indeks yang juga biasa disebut subskrip. Dalam hal ini, indeks berupa bilangan bulat yang dimulai dari nol.<br />
Berikut ini saya akan memberikan Contoh penggunaan array pada javascipt<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><!DOCTYPE HTML>
<html>
 <head>
  <title>Penggunaan Array Dalam Javascript<title>
 </head>
 <body>
  <script type="text/javascript">
   var hasil = new Array ( 90, 80, 20, 30, 21);
   for(var j = 0; j < hasil.length; j++){
    document.write(hasil[j] + "</br>");
   }
  </script>
 </body>
</html>
</pre><br />
Jika dalam php seperti ini<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><?php
$hasil = array( 90, 80, 20, 30, 21);
for($j = 0; $j < count($hasil); $j++){
 echo $hasil[$j]."</br>";
}
?>
</pre><br />
Perhatikan Code dibawah ini<br />
<br />
Dalam Javascript<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">for(var j = 0; j < hasil.length; j++) {
 document.write(hasil[j] + "<br>");
}
</pre><br />
Jika dalam php tadi seperti ini<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">for($j = 0; $j < count($hasil); $j++){
 echo $hasil[$j]."</br>";
}
</pre><br />
Itu digunakan untuk menampilkan elemen variabel hasil[0] hingga hasil[4]. Perlu diketahui, properti length (di javascript) dan count(di php) yang dikenakan di array hasil akan menghasilkan 5, yang menyatakan jumlah elemen dalam array hasil<br />
<br />
Dari Script diatas akan menghasilkan seperti ini<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://i.imgur.com/6gkZMYF.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/6gkZMYF.png" /></a></div><div class="separator" style="clear: both; text-align: left;">Mungkin  Sekian pembahasan kali ini semoga bermanfaat bagi anda Terima kasih sudah mengunjungi blog ini.</div><br />
<br />
</div>

Pengertian Array dalam Programming

Pengertian Array dalam Programming

Array adalah wadah yang dapat menyimpan sejumlah nilai skalar. Setiap nilai di array diakses melalui indeks yang juga biasa disebut subskri...

Lihat Lebih lanjut »

3:31 PM

Penggunan MD5, str_rot13, dan base64 Dalam PHP

<div class="separator" style="clear: both; text-align: center;">
<a href="http://upload.wikimedia.org/wikipedia/commons/c/c1/PHP_Logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155" src="http://upload.wikimedia.org/wikipedia/commons/c/c1/PHP_Logo.png" width="320" /></a></div>
   Hai semuanya sudah lama admin tidak post di blog ini. Pada kali ini saya akan memberikan tutorial bagaimana cara penggunaan MD5, str_rot13, dan base64. Sebelum ke cara penggunaannya saya akan menjelaskan apa fungsi dari ketiga tersebut. Apakah anda tahu Hacker dan Cracker? nahh agar data yang di web kita aman dari serangan hacker dan cracker yang biasanya mengincar database dalam website sehingga sang hacker dan cracker dapat masuk ke halaman admin  kita harus menenskripsi data tersebut. Biasanya data yang di enskripsi adalah seperti password, Rekening dan sebagainya. Dengan mengenskripsi maka data yang ada di website kita aman dari hacker dan cracker. Sehingga orang yang tidak bertanggung jawab itu akan sangat sulit mengetahui data rahasia kita. Ok langsung saja setelah penjelasan tersebut pastinya kalian sudah tau kan apa itu fungsnya.Baiklah langsung saja ke cara Pembuatannya.<br />
<br />
<br />
<ol>
<li>Buat sebuah file bernama enskripsi.php</li>
<li>Jalankan Webserver yang anda gunakan seperti xampp, Wamp dan sebagainya</li>
<li>Tuliskan script ini dalam file tersebut.<br />
<pre><?php
$var = "hai";
$md5 = md5($var);
$str = str_rot13($var);
$base = base64_encode($var);
echo "Tulisan Awal :" .$var."</br>MD5 : ".$md5."</br>str_rot13 : ".$str."</br>base64_encode : ".$base;
?></pre>
</li>
<li>Lalu buka pada browser nantinya akan muncul tulisan yang sudahh di enskripsi<br />
</li>
</ol>
<div>
Mungkin Sekian yang dapat saya sampaikan mohon maaf jika artikel ini sangat sedikit sekali karena keterbatasan penulis semoga dengan tulisan yang sedikit ini dapat membantu anda :)</div>

Penggunan MD5, str_rot13, dan base64 Dalam PHP

Penggunan MD5, str_rot13, dan base64 Dalam PHP

Hai semuanya sudah lama admin tidak post di blog ini. Pada kali ini saya akan memberikan tutorial bagaimana cara penggunaan MD5, str_ro...

Lihat Lebih lanjut »

12:42 AM

Cara Nembak Cewek Dengan Menggunakan C++

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://duniadelusi.com/wp-content/uploads/2014/04/Cara-Nembak-Pacar.jpg" imageanchor="1"><img border="0" height="286" rel="keyword" src="http://duniadelusi.com/wp-content/uploads/2014/04/Cara-Nembak-Pacar.jpg" title="Cara Nembak Cewek Dengan Menggunakan C++" width="400" /></a>
 <br />
 Pada kali ini saya akan memberikan tutorial <b> Cara  Nembak Cewek Dengan Menggunaan C++</b>. Mungkin sudah banyak programer yang sudah mengetahui apa itu C++. Namun pada kali ini saya tidak menggunakan C++ Sepenuhnya. Saya juga melibatkan website dan file bat.<br />
Adapun yang perlu disediakan adalah :<br />
<br />
<ol>
<li>Aplikasi IDE C++ untuk compile program C++.</li>
<li>Hosting(Bisa menggunakan IDhostinger, Nazuka.net, dsb)</li>
<li>Notepad ++</li>
<li>Bat to Exe (Bisa di download <a href="http://adf.ly/ubtjg" target="_blank">disini</a>)</li>
</ol>
<div>
Jika sudah disediakan waktunya cara pembuatannya. Ikuti Langkah-langkah berikut :</div>
<div>
<ol>
<li>Buka Notepad++ terlebih dahulu untuk menuliskan script php yang digunakan untuk pemantau kita apakah ia menjawabnya atau pun tidak.</li>
<li>Tuliskan Script Di bawah ini ke notepad dan jangan lupa di Save dengan nama index.php<br /><pre><?php
$file = "pendapat.txt";
$messages1 = '<script language="JavaScript">
var text="<b>Makasih Lu Udah Nerima Gw Apa Adanya</b>";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>';
$messages2 = '<script language="JavaScript">
var text="<b>Thank\'s udah ngasih gw kesempatan untuk ngasih aplikasi ini ke lu</b>";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>';
$selesai = '<script language="JavaScript">
var text="<b>Selesai mengembalikan file yang sudah di coba tadi</b> ";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>';
if(isset($_GET['get']))
{
 $get = $_GET['get'];
 if($get == "menulis")
 {
  $pil = $_GET['pilihan'];
  if(isset($pil))
  {
   if($pil == "ya")
   {
    $handle = fopen($file, 'w') or die('Cannot open file:  '.$my_file);
    $data = "Pilihanya Ya \n";
    fwrite($handle, $data);
    fclose($handle);
    echo $messages1;
   }
   else if($pil = "tidak")
   {
    $handle = fopen($file, 'w') or die('Cannot open file:  '.$my_file);
    $data = "Pilihannya Tidak \n";
    fwrite($handle, $data);
    fclose($handle);
    echo $messages2;
   }
   
  }
  
  else{
   echo " ";
  }
 }
 else if($get == "membaca")
 {
  $handle = fopen($file, 'r');
  $data = fread($handle,filesize($my_file));
 }
 else if($get == "ya")
 {
 $handle = fopen($file, 'w') or die('Cannot open file:  '.$my_file);
    $data = "Pilihannya Ya \n";
    fwrite($handle, $data);
    fclose($handle);
    echo $messages1;
 }
 else if($get == "tidak")
 {
 $handle = fopen($file, 'w') or die('Cannot open file:  '.$my_file);
    $data = "Pilihannya Tidak \n";
    fwrite($handle, $data);
    fclose($handle);
    echo $messages2;
 }
 else if($get == "mengembalikan")
 {
 $handle = fopen($file, 'w') or die('Cannot open file: '.$my_file);
 $data = "Menunggu jawaban ...";
 fwrite($handle, $data);
 fclose($handle);
 echo $selesai;
 }
 else
 {
  echo " ";
 }
}
else
{
echo "";
}</pre>
Lihat Bagian Tulisan Yang Ditebalkan. Tulisan tebal yang berada di dalam variable $messages1 itu untuk memunculkan tulisan pada web jika kamu di terima . Dan yang tulisan tebal terdapat di dalam variable  $messages2 digunakan untuk memunculkan tulisan jika kamu di tolak. Silahkan ubah yang sudah di tebali dengan kreasi sendiri.Dan ubah sesuai keinginan pada variable $file = "<b>pendapat.txt</b>"; dimana pendapat.txt digunakan untuk mengecek apakah dia sudah menjawabnya ataupun belum jadi jika anda ingin melihat jawabannya anda cukup membuka http://siteanda/pendapat.txt anda bisa menggantinya sesuai dengan keinginan namun yang berextensi .txt.</li>
<li>Nahh Disinilahh saatnya kita membuat aplikasi User interview yang akan kita berikan kepada gebetan :v . Ok Pertama buka dahulu Aplikasi IDE C++ anda. Jika Sudah Tuliskan Script Dibawah ini.<br /><br /><pre>#include "iostream"
#include <cstdlib>
#include "conio.h"

using namespace std;
int main(void)
{
 int i;
 int j;
 int k;
 j=10;
 k=20;
 for(i=1;i<=j;i++)
 {
     system("cls");

cout<<"<b>Jangan Di Close Dulu Sebelum abis</b>\n";
 }
 for(i=1;i<=j;i++)
 {
     system("cls");

cout<<"<b>Aktivin koneksi internet terlebih dahulu</b>\n";
 }
 for(i=1;i<=j;i++)
 {
     system("cls");

cout<<"<b>Sebelum lu lanjutin aplikasi ini lu jangan marah ya</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>Sebenernya</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>Gw</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>Suka</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>Sama</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>lu</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>Gw harap lu bisa nerima gw apa adanya</b>\n";
 }
 for(i=1;i<=k;i++)
 {
     system("cls");

cout<<"<b>Kalau lu gk mau nerima gw jg gpp yang penting gw udah ungkapin semuanya</b>\n";
 }
 for(i=1;i<=j;i++)
 {
     system("cls");

cout<<"<b>Ya mungkin itu aja.</b>\n";
 }
 for(i=1;i<=j;i++)
 {
     system("cls");
  cout<<"<b>Gw Cuman Bisa ngasih lu gambar ini</b>\n";
 }
 for(i=1;i<=22;i++)
 {
  for(j=1;j<=60;j++)
  {
   if(i==1)
    if(((j>=14)&&(j<=23))||((j>=39)&&(j<=48)))
     cout<<"*";
    else
     cout<<" ";
   else if(i==2)
    if(((j>=11)&&(j<=26))||((j>=36)&&(j<=51)))
     cout<<"*";
    else
     cout<<" ";
   else if(i==3)
    if(((j>=9)&&(j<=28))||((j>=34)&&(j<=53)))
     cout<<"*";
    else
     cout<<" ";
   else if(i==4)
    if(((j>=7)&&(j<=30))||((j>=32)&&(j<=55)))
     cout<<"*";
    else
     cout<<" ";
   else if((i>=5)&&(i<=8))
    if((j>=5)&&(j<=57))
     cout<<"*";
    else
     cout<<" ";
   else if(i==9)
    if((j>=7)&&(j<=55))
     cout<<"*";
    else
     cout<<" ";
   else if(i==10)
    if((j>=9)&&(j<=53))
     cout<<"*";
    else
     cout<<" ";
   else if(i==11)
    if((j>=11)&&(j<=51))
     cout<<"*";
    else
     cout<<" ";
   else if(i==12)
    if((j>=13)&&(j<=49))
     cout<<"*";
    else
     cout<<" ";
   else if(i==13)
    if((j>=15)&&(j<=47))
     cout<<"*";
    else
     cout<<" ";
   else if(i==14)
    if((j>=17)&&(j<=45))
     cout<<"*";
    else
     cout<<" ";
   else if(i==15)
    if((j>=19)&&(j<=43))
     cout<<"*";
    else
     cout<<" ";
   else if(i==16)
    if((j>=21)&&(j<=41))
     cout<<"*";
    else
     cout<<" ";
   else if(i==17)
    if((j>=23)&&(j<=39))
     cout<<"*";
    else
     cout<<" ";
   else if(i==18)
    if((j>=25)&&(j<=37))
     cout<<"*";
    else
     cout<<" ";
   else if(i==19)
    if((j>=27)&&(j<=35))
     cout<<"*";
    else
     cout<<" ";
   else if(i==20)
    if((j>=29)&&(j<=33))
     cout<<"*";
    else
     cout<<" ";
   else if(i==21)
    if((j>=30)&&(j<=32))
     cout<<"*";
    else
     cout<<" ";
   else if(i==22)
    if(j==31)
     cout<<"*";
   else
    cout<<" ";
  }
  cout<<"\n";
  }
  cout<<"\n";
  cout<<"\n               Create By <b>Nama Anda</b> For <b>Gebetan</b> \n";
  system("selanjutnya.exe");
  getch();
  }</pre>
<br /> Silahkan anda edit di bagian yang sudah di tebali sesuai kreasi anda dan juga edit di bagian Nama Anda Tulis dengan nama anda Dan Gebetan Tulis Dengan Nama Gebetan. Lalu Compile dan lakukan testing.</li>
<li>Jika sudah jalan C++ nya saatnya membuat file Selanjutnya.bat<br /><br /><pre>@echo off
set (jaw)
:start
echo Koneksi internet dinyalakan y.
echo Tekan Enter Untuk Melanjutkan
pause>nul
:pertama
cls
echo <b>Lu Mau Gk jadi Pacar Gw. Kalau Mau Tulis Huruf y kalau gk tulis huruf g</b>
set /p jaw=::
if not defined jaw goto pertama
if %jaw% == y goto ya
if %jaw% == g goto tidak
goto pertama

:ya
echo <b>Makasih Lu udah nerima gw.</b>
start http://sitemu/?get=ya
exit
:tidak
echo <b>Baiklah jika lu gk nerima gw. Makasih dahh ngasih gw kesempatan untuk ngasih aplikasi ini ke lu</b>
start http://sitemu/?get=tidak
exit</pre>
<br />Lakukan pengeditan pada text yang di tebali dan juga edit tulisan sitemu dengan domain web anda.</li>
<li>Buka Bat to exe.rar dan buka folder Windows(x bit) x adalah sesuai dengan type windows kamu. lalu buka Bat_To_Exe_Converter.exe </li>
<li>Setelah dibuka anda akan menemui aplikasi seperti ini<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUw3tvrS0X97sCkfmoCcPOOUK-cwmawI2kW8vkmhAjBLbuG2ADceAX6mAqbSeNoRkL6VSLcEJjARFNUyGqbvlNMfsxPqcOCX3grDfrsiLitzOOlfTdffqH8cLNZr4ySLxU9xpHi46APg/s1600/batexe.png" imageanchor="1"><img border="0" rel="keyword" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUw3tvrS0X97sCkfmoCcPOOUK-cwmawI2kW8vkmhAjBLbuG2ADceAX6mAqbSeNoRkL6VSLcEJjARFNUyGqbvlNMfsxPqcOCX3grDfrsiLitzOOlfTdffqH8cLNZr4ySLxU9xpHi46APg/s320/batexe.png" title="Cara Nembak Cewek Dengan Menggunakan C++" /></a><br />Klik Button pada Batch file yang bertuliskan ... lalu cari file selanjutnya.bat setelah itu klik button pada Save as dan beri nama selanjutnya.exe di 1 file dengan aplikasi C++ yang sudah di compile tadi. Dan kirimkan aplikasi C++ dan selanjutnya.exe yang sudah dibuat tadi ke gebetan anda.</li>
</ol>
<div>
Source Codenya bisa di download di <a href="http://adf.ly/ubvVO" target="_blank">Sini</a></div>
<div>
Mungkin hanya ini yang dapat saya tulis dan semoga bermanfaat bagi anda. </div>
<div>
<br /></div>
</div>
</div>

Cara Nembak Cewek Dengan Menggunakan C++

Cara Nembak Cewek Dengan Menggunakan C++

Pada kali ini saya akan memberikan tutorial Cara Nembak Cewek Dengan Menggunaan C++ . Mungkin sudah banyak programer yang sudah meng...

Lihat Lebih lanjut »

6:01 PM

Class Dalam Php

Pada kali ini saya akan menjelaskan apa itu class dalam php. Class dapat didefinisikan sebagai struktur data atau cetak biru dari suatu obyek. Lebih jelasnya adalah  sebuah  bentuk  dasar  atau  blueprint yang  mendefinisikan  variabel,  method  umum  pada semua obyek. Obyek sendiri adalah kumpulan variabeldan fungsi yang dihasilkan dari template khusus  atau  disebut  class.  Obyek  adalah  elemen  pada saat  run-time yang  akan  diciptakan, dimanipulasi, dan dibuang/di-destroyketika eksekusi. Adapun class merupakan definisi statik dari himpunan obyek yang mungkin diciptakan sebagai instantiasi dari class.<br />
<br />
<span class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
<?php<br />
/** Contoh kelas **/<br />
class Kendaraan{}<br />
/*** end of class ***/<br />
?>
</span>
<br />
Contoh diatas memperlihatkan bagaimana mendefinisikan sebuah class dan meng-create sebuah<br />
instance dari class. Pada contoh di atas kita membuat sebuah kelas bernama “Kendaraan”. Dalam<br />
pembuatan  kelas,  pertama  kita  menggunakan  kata  kunci  class  yang  diikuti  oleh  nama  kelas,<br />
kemudian  diakhiri  dengan  kurung kurawal.  Di  dalam  kurung kurawal  kita  menuliskan kode-kode<br />
(berisi property dan method) supaya kelas tersebut bekerja seperti yang diinginkan.<br />
Kode-kode  di  dalam  sebuah  kelas  terbagi  menjadi  dua kelompok,  yaitu  property dan  method.<br />
Property  adalah  suatu  wadah  penyimpanan  di  dalam  kelas  yang  bisa  menampung  informasi.<br />
Sederhananya  property  itu  bisa  disebut  sebagai  variabel  di  dalam  kelas.  Sedangkan  method<br />
<span class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"></span><br />
adalah fungsi yang ada di dalam kelas.Setiap property dan method memiliki  identifier. Identifier-lah yang mengatur bagaimana property<br />
dan method digunakan. Identifier tersebut adalah  public,  privatedan  protected. Private berarti<br />
method  atau  property  yang  ada  di  dalam  suatu  kelas  hanya  bisa  diakses  di  dalam  kelasnya.<br />
Sedangkan pada method atau property yang bersifat public berarti method atau property tersebut<br />
bisa diakses di dalam dan di luar kelas.

Class Dalam Php

Class Dalam Php

Pada kali ini saya akan menjelaskan apa itu class dalam php. Class dapat didefinisikan sebagai struktur data atau cetak biru dari suatu oby...

Lihat Lebih lanjut »

6:30 PM

Mengenal Htaccess dan Fungsinya

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="border: 0px; margin-left: 1em; margin-right: 1em; padding: 0px; vertical-align: baseline;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1JAggurEGXwA4xC71VGaYLVBFDDzz5zYHbQqzfQbDwstPnTXm4V02Ucv5VgFwyiFdL2Gxw-vcEPIwo659e_j1omJhv0yIYCpD0det_cFlVH5y0wa2syUljyhalN5qtDlqWXXQPFb4A8/s1600/htaccess.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE1JAggurEGXwA4xC71VGaYLVBFDDzz5zYHbQqzfQbDwstPnTXm4V02Ucv5VgFwyiFdL2Gxw-vcEPIwo659e_j1omJhv0yIYCpD0det_cFlVH5y0wa2syUljyhalN5qtDlqWXXQPFb4A8/s1600/htaccess.jpg" /></a></div>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span style="font-size: 13px; font-weight: normal;"><br /></span></h2>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span style="font-size: 13px; font-weight: normal;">Pada kali ini saya akan membahas fungsi fungsi htaccess dalam website. htaccess merupakan file yang mengatur file-file yang terdapat di web kita. jika tanpa adanya htaccess mungkin web kita belum tentu aman dari serangan cybercrime. dan htaccess juga dapat mengatur penulisan url pada website kita serta kita dapat memblokir IP tertentu yang menurut kita tidak diinginkan ia membuka web kita. baiklah ini beberapa fungsi htaccess yang digunakan website-website pada umumnya :  </span><br />
<br />Memblokir IP tertentu</h2>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">deny from 1.2.3.4
deny from 1.2.5.
</pre>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Memblokir_file_berakhiran_tertentu">Memblokir file berakhiran tertentu</span></h2>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
File tertentu kadang berisi informasi sensitif seperti password, dll yang perlu kita blokir dari pengunjung. Tentu saja alternatif lainnya adalah jangan menaruh file itu di bawah <a class="mw-redirect" href="http://kb.masterweb.net/beta/index.cgi/read/Docroot" style="color: #444444; font-style: italic;" title="Docroot">Docroot</a> :-)</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;"><Files *.conf>
  deny from all
</Files>
</pre>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Memblokir_browser_.28user_agent.29_tertentu">Memblokir browser (user agent) tertentu</span></h2>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Kadang-kadang ada sebuah bot atau penyerang tertentu yang dapat diidentifikasi User-Agent-nya, dan dapat kita blokir. Untuk melihat User-Agent pengakses, bisa melihat dari <a href="http://kb.masterweb.net/beta/index.cgi/read/Panduan_pengguna_Spanel_1.3/Web/Log_mentah" style="color: #444444; font-style: italic;" title="Panduan pengguna Spanel 1.3/Web/Log mentah">log mentah</a>.</div>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Misalnya kita ingin memblokir crawler Google dan Yahoo! (Slurp). Di .htaccess, tambahkan:</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">SetEnvIf User-Agent "(googlebot|Slurp)" crawler
deny from env=crawler
</pre>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
'crawler' dapat diganti kata lain yang sesuai. Anda dapat menambahkan baris-baris User-Agent berikutnya, atau menambahkan kata kunci di regex User-Agent yang sama.</div>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Mengganti_default_halaman_directory">Mengganti default halaman directory</span></h2>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">DirectoryIndex awal.html index.html index.php
</pre>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Command di atas berguna untuk memberitahu pilihan nama file yang akan dipilih oleh webserver Apache jika sebuah URL diakses tanpa akhiran nama file (mis: <a class="external free" href="http://tokoku.com/" rel="nofollow" style="color: #444444; font-style: italic;">http://tokoku.com/</a> atau<a class="external free" href="http://tokoku.com/subdir/" rel="nofollow" style="color: #444444; font-style: italic;">http://tokoku.com/subdir/</a>). File yang pertama dibuka pada contoh di atas adalah awal.html, dan jika tidak ada maka akan mencari index.html, dan seterusnya.</div>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Jika semua tidak ada, barulah <a class="mw-redirect" href="http://kb.masterweb.net/beta/index.cgi/read/Autoindex_apache" style="color: #444444; font-style: italic;" title="Autoindex apache">autoindex</a> ditampilkan.</div>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Redirect_ke_URL">Redirect ke URL</span></h2>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Berguna untuk "melemparkan" pengunjung ke halaman atau website lain.</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">Redirect / <a class="external free" href="http://sitetujuan/" rel="nofollow" style="color: #444444; font-style: italic;">http://sitetujuan</a>
</pre>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Command diatas akan mengarahkan URL yang kita akses ke URL site tujuan.</div>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Redirect_ke_www">Redirect ke www</span></h2>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Berguna bila Anda ingin agar saat user mengakses domain Anda tanpa www langsung dialihkan ke www. Misal, tokoku.com maka akan dialihkan ke <b>www</b>.tokoku.com</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">RewriteEngine on 
RewriteCond %{HTTP_HOST} ^tokoku\.com$ [NC]
RewriteRule ^(.*) <a class="external free" href="http://www.tokoku.com/$1" rel="nofollow" style="color: #444444; font-style: italic;">http://www.tokoku.com/$1</a> [L,R=301]
</pre>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
<b>PERHATIAN:</b> Bila Anda sudah memiliki file .htaccess dengan konfigurasi yang lain maka Anda cukup masukkan baris ke-2 dan ke-3 di bawah bagaian <i>RewriteEngine on</i></div>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Password_folder">Password folder</span></h2>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Silahkan buat .htaccess di direktori yang ingin diprotek. Kalau ingin memprotek dari <a class="external free" href="http://sitename/" rel="nofollow" style="color: #444444; font-style: italic;">http://SITENAME/</a> (dari halaman depan), maka taruh file .htaccess di /s/SITENAME/www/. Isi file ini sbb:</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">AuthName "sembarang nama, sebagai contoh: area terlarang!"
AuthType basic
AuthUserFile /s/SITENAME/www/.htpasswd
require valid-user
</pre>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
(tentu saja SITENAME diganti dengan nama situs yang sebetulnya). Setelah itu, buatlah .htpasswd dari shell dengan perintah:</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">htpasswd -c /s/SITENAME/www/.htpasswd NAMAUSERWEB
</pre>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
di mana NAMAUSERWEB diganti yang sebenarnya, mis: snoopy. Lalu akan ditanya password. Lalu coba sekarang refresh <a class="external free" href="http://sitename/" rel="nofollow" style="color: #444444; font-style: italic;">http://SITENAME/</a> maka akan muncul kotak dialog password.</div>
<h2 style="background-color: white; font-family: Geneva, Arial; font-size: 16px; line-height: normal;">
<span class="mw-headline" id="Menyembunyikan_Isi_Direktori">Menyembunyikan Isi Direktori</span></h2>
<div style="background-color: white; color: black; font-family: Geneva, Arial; font-size: 13px; line-height: normal;">
Jika ingin isi suatu direktori tidak ingin ditampilkan tambahkan baris di .htaccess</div>
<pre style="background-color: #e1e1e1; color: #484800; font-family: 'Segoe UI', 'Open Sans', georgia, 'times new roman', serif; font-size: 13px; line-height: 1.1em; padding: 1em;">IndexIgnore *
</pre>
<div style="font-family: Geneva, Arial; font-size: 13px;">
<span style="background-color: white;">Jika ingin menyembunyikan file tertentu saja, misal header.html dan readme.html (pisahkan tiap nama file dengan spasi).</span><br />
<span style="color: #484800;"><span style="background-color: #e1e1e1; line-height: 14.300000190734863px;"><br /></span></span></div>
<pre style="background-color: #e1e1e1; color: #484800; font-size: 13px; line-height: 1.1em; padding: 1em;">IndexIgnore header.html readme.html
</pre>
<h2 style="background-color: white;">
<span style="color: black; font-family: Geneva, Arial; font-size: 13px; font-weight: normal;">Mungkin hanya sekian dari saya. kurang lebihnya mohon maaf.<br /><br />Sumber Konten ini bersal dari : </span><span style="background-color: transparent; font-weight: normal;"><span style="font-family: Geneva, Arial; font-size: x-small;"><a href="http://kb.masterweb.net/beta/index.cgi/read/Berbagai_contoh_penggunaan_htaccess" target="_blank">http://masterweb.net</a></span></span><span style="color: black; font-family: Geneva, Arial; font-size: 13px; font-weight: normal;"> </span></h2>
<pre style="font-size: 13px; padding: 1em;"></pre>
</div>

Mengenal Htaccess dan Fungsinya

Mengenal Htaccess dan Fungsinya

Pada kali ini saya akan membahas fungsi fungsi htaccess dalam website. htaccess merupakan file yang mengatur file-file yang terdapat...

Lihat Lebih lanjut »

12:04 AM

Penggunaan Switch Case Pada Php

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtHOvGdXPKsMq2WyxDNiR4FuaVd19-qbaqXgxPPSeCwz0p880ozBk-y_UbJNBHLcsFu-U5BqpxwqckRhrLX7lYMXEd5S8eO4lUl3G4aVNVW-yXMYKC_hA-FxfFgcuD1Fl5YcoT5N02ek/s1600/case.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBtHOvGdXPKsMq2WyxDNiR4FuaVd19-qbaqXgxPPSeCwz0p880ozBk-y_UbJNBHLcsFu-U5BqpxwqckRhrLX7lYMXEd5S8eO4lUl3G4aVNVW-yXMYKC_hA-FxfFgcuD1Fl5YcoT5N02ek/s1600/case.jpg" /></a></div>
<br />
mungkin kalian sudah mengetahui fungsi if,else, dan else if. pada artikel ini saya akan membahas penggunaan Switch Case pada php. penggunaan switch case hampir mirip dengan if else. namun yang membedakan adalah jika Switch Case Hanya 1 kali pemeriksaan jadi jika sudah ditemukan Case yang lainnya tidak diperiksa lagi. saya sih lebih enak menggunakan switch case dari pada if else karena switch case lebih simpel dan di load dengan cepat. berikut ini penggunaan Switch Case pada php.<br />
<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
<?php
$kucing = 3;
switch($kucing){
case 1 :  echo "Kucing ini ada 1 ";
break;
case 2 :  echo "Kucing ini ada 2";
break;
case 3 :  echo "Kucing ini ada 3";
break;
?>
</pre>
coba dijalankan di webserver pasti akan tertulis "Kucing ini ada 3". lalu apa gunanya break. break digunakan untuk memberitahukan bahwa case tersebut sudah selesai. jika tanpa menggunakan break nantinya akan muncul juga isi pada case sesudahnya.<br />
mungkin hanya sekian dari saya. krang lebihnya mohon maaf.

Penggunaan Switch Case Pada Php

Penggunaan Switch Case Pada Php

mungkin kalian sudah mengetahui fungsi if,else, dan else if. pada artikel ini saya akan membahas penggunaan Switch Case pada php. penggun...

Lihat Lebih lanjut »

6:50 PM

Mengenal If, Else, dan Else If Dalam Php

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0gpwSfywkLFrJ2ioYN24FtMkqeqVpBRuIOOxUk-lL8UJbEcqmAZ1kP7p4rT3ZFgLWPoT2NMoRK1umzsRd5FFwZ8UxNj7F5f2aGY6UDZDzM_ir8tZo8AI1Io0GCSYRFjvDbJv0NaO5pk/s1600/if.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0gpwSfywkLFrJ2ioYN24FtMkqeqVpBRuIOOxUk-lL8UJbEcqmAZ1kP7p4rT3ZFgLWPoT2NMoRK1umzsRd5FFwZ8UxNj7F5f2aGY6UDZDzM_ir8tZo8AI1Io0GCSYRFjvDbJv0NaO5pk/s1600/if.jpg" /></a></div>
<br />
Memang tidak jarang kita melihat didalam code php terdapat If, Else, dan Else If. Lalu apa gunanya itu dalam php. biasanya code tersebut digunakan untuk suatu kondisi. ok kita akan bahas satu persatu.<br />
<ol>
<li> IF<br />If biasa digunakan untuk satu kondisi saja. jika kondisi terpenuhi maka if akan dijalankan dan jika tidak terpenuhi if tidak akan jalan.</li>
<li>Else<br />else biasa digunakan jika if tidak terpenuhi maka yang akan berjalan adalah else. if jika tidak terdapat else nantinya jika tidak sesuai akan menghasilkan kosong.<br />berikut ini contoh penggunakan If, dan Else dalam bahasa pemograman php :<br /><br /><pre class="brush:css, brush:html, brush:js"><?php
$uang = 100000;
$harga = 50000;
$total = $harga - $uang ;
if($total > 70000)
{
echo "Sisa uang anda lebih dari Rp.70.000" ;
}
else
{
echo "Sisa uang anda kurang dai  Rp.70.000";
}
?></pre>
</li>
<li>Else If<br />else if digunakan jika if tidaenuhi maka else if lah yang menjalankannya namun jika else if tidak terpenuhi juga maka barulah else digunakan<br />berikut ini contoh penggunaan If, Else, Else if dalam php:<br /><br /><pre class="brush:css, brush:html, brush:js"><?php<br />$doni  = 12;<br />if ($doni == 11 )<br />{<br />echo "Umur Doni 11 Tahun";<br />}<br />else if($doni == 12 )<br />{<br />echo "Umur Doni 12 Tahun";<br />}<br />else<br />{<br />echo "umur Doni Tidak diketahui";<br />}<br />?></pre></li>
</ol>

Mengenal If, Else, dan Else If Dalam Php

Mengenal If, Else, dan Else If Dalam Php

Memang tidak jarang kita melihat didalam code php terdapat If, Else, dan Else If. Lalu apa gunanya itu dalam php. biasanya code tersebut ...

Lihat Lebih lanjut »

2:38 PM

Cara Membuat Halaman Error Sendiri

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18n5CyvaF3WsKNZI_MuAwbKI9HDyinsJXpAEr97pd-D1zE92T0aW5ry4Cjm1XfnvhNV0kAWCy9JHM1qkbtGXULuPG3o7_7piqYyGWOafDVwBccOzksCgIKbCU6iIMOP6Awm_iQ-SgWNA/s1600/error.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18n5CyvaF3WsKNZI_MuAwbKI9HDyinsJXpAEr97pd-D1zE92T0aW5ry4Cjm1XfnvhNV0kAWCy9JHM1qkbtGXULuPG3o7_7piqYyGWOafDVwBccOzksCgIKbCU6iIMOP6Awm_iQ-SgWNA/s1600/error.jpg" /></a></div>
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;"><br /></span>
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">Pada kali ini saya akan memberikan tutorial bagaimana caranya meredirect error ke file yang telah kita buat. </span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">pertama buatlah terlebih dahulu file .htaccess</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">lalu edit dengan notepad maupun notepad++</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">setelah iu masukkan code ini ke htaccess :</span><br />
<br style="background-color: white; box-sizing: border-box; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;" />
<br style="background-color: white; box-sizing: border-box; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;" />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">RewriteEngine on</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">RewriteCond %{REQUEST_URI} ^(.*)$</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">RewriteCond %{REQUEST_FILENAME} !-f</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">RewriteCond %{REQUEST_URI} !.(css|gif|ico|jpg|js|png|swf|txt)$</span><br />
<br style="background-color: white; box-sizing: border-box; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;" />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 400 /errors/400.php</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 401 /errors/401.php </span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 403 /errors/403.php </span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 404 /errors/404.php </span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 406 /errors/406.php </span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 500 /errors/500.php</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">ErrorDocument 509 /errors/509.php</span><br />
<br style="background-color: white; box-sizing: border-box; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;" />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">setelah itu buat file 400.php hingga 509.php</span><br />
<br style="background-color: white; box-sizing: border-box; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;" />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">kalau bisa kreasikan sendiri halaman error yang telah dibuat.</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">munghin hanya itu yang dapat saya sampaikan. :)</span>

Cara Membuat Halaman Error Sendiri

Cara Membuat Halaman Error Sendiri

Pada kali ini saya akan memberikan tutorial bagaimana caranya meredirect error ke file yang telah kita buat. pertama buatlah terlebih d...

Lihat Lebih lanjut »

2:58 AM

Belajar php

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLX4YMGe9ba0DVfsKSeq2uPRu3yzw-3QAJkJzeoyJ3vAxxcci7dRlJYGCTMvBFes_PxN3Cl_TyDgmjMNe0aqZZPXnO18ajUXQjuY3alUu3BBsEfIVQPHL_8qZXm3uKJUTc9Uijk_X9Xj8/s1600/belajar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLX4YMGe9ba0DVfsKSeq2uPRu3yzw-3QAJkJzeoyJ3vAxxcci7dRlJYGCTMvBFes_PxN3Cl_TyDgmjMNe0aqZZPXnO18ajUXQjuY3alUu3BBsEfIVQPHL_8qZXm3uKJUTc9Uijk_X9Xj8/s1600/belajar.jpg" /></a></div>
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;"><br /></span>
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">belajar php memang sangat menyenangkan terlebih lagi jika kita sudah menguasai semua syntax yang ada di php.</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">namun bagaimana bagi yang belum mengerti? untuk mendalami php kamu hanya perlu menggunakan logika. </span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">php menggunakan bahasa inggris sehingga kamu harus belajar bahasa inggris terlebih dahulu. jika kamu tidak mengerti bahasa inggris, kamu nantinya akan fungsi yang kamu ketik di dalam php. dan untuk mempelajari php kamu harus memiliki kemauan kuat. serta jangan mudah menyerah jika menghadapi error yang kita dapati. kita bukanna menjauh dari error tersebut melainkan kita harus mengetahui apa penyebab error tersebut sehingga menyebabkan error dari yang kecil hingga yang sangat besar.</span><br />
<span style="background-color: white; color: #565656; font-family: 'Source Sans Pro', sans-serif; font-size: 16px; line-height: 28px;">Untuk belajar php silahkan kamu download E-book belajar php di google banyak bertebaran. dan jika kamu mengalami kesulitan kamu bisa menanyakannya ke google,forum, maupun teman. mungkin hanya ini yang saya sampaikan semoga ini menjadi motivasi untuk diri anda dan diri saya sendiri.</span>

Belajar php

belajar php memang sangat menyenangkan terlebih lagi jika kita sudah menguasai semua syntax yang ada di php. namun bagaimana bagi yang...

Lihat Lebih lanjut »

2:56 AM

Cara Membuat Tulisan Hello World Pada Php

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtA0dAnPl1nLqISX0pHxByrJ0nnU0f3xnhRaOstbM1YdGKuhSo52OIujOPFUthFYFocBJ4mssDkNfCa7cETiUnH4oaIoehA_0fz8PAjXxdSql1JGPkMmhGs1hqlMiGW2F_DMymF9tbt0/s1600/tulisan.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtA0dAnPl1nLqISX0pHxByrJ0nnU0f3xnhRaOstbM1YdGKuhSo52OIujOPFUthFYFocBJ4mssDkNfCa7cETiUnH4oaIoehA_0fz8PAjXxdSql1JGPkMmhGs1hqlMiGW2F_DMymF9tbt0/s1600/tulisan.jpg" width="320" /></a></div>
Pada kali ini saya akan membahas bagaimana caranya membuat tulisan hello world pada php.<br />
mungkin yang baru mengenal php akan bingung bagaimana carnya menampilkan suatu tulisan di dalam php. jika didalam html kita menggunakan tag html,head,body seperti berikut ini:<br />
<pre class="brush:css, brush:html, brush:js"><html>

<head>

<title></title>

</head>

<body>

Hello World

</body>

</html>

</pre>
lalu bagaimana jika di php?.<br />
di bahasa pemograman php kita hanya perlu echo  untuk menampilkan tulisan di browser.<br />
ok langsung saja kita ubah code yang diatas tadi menjadi php :<br />
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"><?php

echo "<html>";

echo "<head>";

echo "<title>Belajar Php</title>";

echo "</head>";

echo "<body>";

echo "Hello World";

echo "</body>";

echo "</html>";

?>

</pre>
<br />
coba save code diatas dengan extension .php . lalu masukkan file yang telah disave tadi ke htdocs atau www web server. misalnya saya menggunakan file belajar.php<br />
maka nantinya akan keluar tulisan : "Hello World" .tanpa tanda ".<br />
lalu apa arti dari tanda ; . tanda ; berfungsi untuk memberitahu kan bahwa fungsi syntax sudah berkhir. coba saja anda hapus salah satu tanda ; pada code diatas pastinya akan muncul tulisan error.<br />
ok terima kasih telah membaca blog saya semoga bermanfaat.</div>

Cara Membuat Tulisan Hello World Pada Php

Cara Membuat Tulisan Hello World Pada Php

Pada kali ini saya akan membahas bagaimana caranya membuat tulisan hello world pada php. mungkin yang baru mengenal php akan bingung ba...

Lihat Lebih lanjut »

1:29 AM

Subscribe to: Posts (Atom)

Populars
Comments
Archive

Allmywebstfn © 2014 - . All Rights Reserved. Powered by Blogger