Arsip Ku

Rabu, 12 Oktober 2016

HTML & CSS - Membuat Layout Website Sederhana 2

Pada tutorial sebelumnya, saya telah berbagi artikel mengenai cara membuat layout sederhana, yang menjelaskan dasar -dasar dalam membuat layout sebuah website. Kali ini saya akan membuat layout website yang sedikit lebih sulit dari sebelumya. Pada pembuatan layout website ini menggunakan tag DIV dan CSS.Adapun tampilan website yang akan dibuat adalah sebagai berikut.

Sebelum melanjutkan untuk membuat layout website, perhatikan struktur folder yang digunakan pada gambar di bawah ini kemudian buat struktur folder yang sama di komputer yang anda gunakan.

Baca selengkapnya »

Jumat, 07 Oktober 2016

HTML & CSS - Membuat Layout Website Sederhana

Layout Website yang akan dibuat adalah merupakan tampilan website yang paling sederhana dan banyak dijumpai, seperti gambar berikut ini.

Kode : templatesederhana.html

it916@planning-ho-pc:~$ cat /var/www/html/lth5-templsederhana/templatesederhana.html

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="templatesederhana.css">
 </head>

 <body>
  <div class="wrap">
   <div class="header">
    <h1>Learning By Doing</h1>
    <p>Tutorial belajar membuat layout website sederhana</p>
   </div>

   <div class="menu">
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">HTML</a></li>
     <li><a href="#">CSS</a></li>
     <li><a href="#">PHP</a></li>
     <li><a href="#">Javascript</a></li>
    </ul>
   </div>

   <div class="badan">
    <div class="sidebar">
     Sidebar
     <ul>
      <li><a href="#">Tutorial HTML Dasar</a></li>
      <li><a href="#">Tutorial CSS Dasar</a></li>
      <li><a href="#">Tutorial PHP Dasar</a></li>
      <li><a href="#">Tutorial JQuery Dasar</a></li>
     </ul>
    </div>
    <div class="content">
     Content
    </div>
   </div>
   <div class="clear"></div>
   <div class="footer">
    Footer
   </div>
  </div>
 </body>
</html>

Kode : templatesederhana.css

it916@planning-ho-pc:~$ cat /var/www/html/lth5-templsederhana/templatesederhana.css

.wrap {
  background: blue;
  width: 900px;
  margin: 10px auto;
}

/*Bagian Header*/
.wrap .header {
  background: green;
  /*height 50px*/
  padding: 2px 10px;
}
/*Akhir Header*/

/*Bagian Menu*/
.wrap .menu {
  background: yellow;
}

.wrap .menu ul {
  padding: 0;
  margin: 0;
  background: yellow;
  overflow: hidden;
}

.wrap .menu ul li {
  float: left;
  list-style-type: none;
  padding: 10px;
}
/*Akir menu*/

.clear {
  clear: both;
}

.badan {
  height: 450px;
}

/*Bagian Sidebar*/
.wrap .badan .sidebar {
  background: orange;
  float: left;
  width: 25%;
  height: 100%;
}
/*Akhir Sidebar*/

/*Bagian Content*/
.wrap .badan .content {
  background: red;
  float: left;
  height: 100%;
  width: 75%;
}
/*Akhir Content*/

/*Bagian Footer*/
.wrap .footer {
  width: 100%;
  padding: 10px;
}
/*Akhir Footer*/

Hasil akhirnya akan seperti gambar berikut ini.

Demikian dan selamat mencoba.

Sumber : http://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/

HTML & CSS - Membuat Sudut Melengkung Dengan CSS3

Pada CSS3 kita sudah bisa membuat sudut melengkung pada sebuah element HTML, sehingga website yang kita buat pun tampilannya menjadi lebih interaktif. Untuk membuat sudut element menjadi melengkung dengan CSS3 ini, kita bisa menggunakan perintah "border-radius". Perintah "border-radius" ini merupakan perintah baru dari CSS3. Pada zaman dulu para web developer hanya menggunakan table untuk membuat tampilan website.

Langsung saja kita praktek untuk membuat sudut melengkung pada halaman website dengan CSS3. Kita akan membuat 2 file yaitu "sudut-melengkung.html" dan "sudut-melengkung.css".

Kode HTML : sudut-melengkung.html

it916@planning-ho-pc:~$ sudo pico /var/www/html/lth4-css3/sudut-melengkung.html

<!DOCTYPE html>
<html>
 <head>
  <title>Membuat sudut melengkung dengan css3 | havizul.blogspot.com</title>
  <link rel="stylesheet" type="text/css" href="sudut-melengkung.css">
 </head>

 <body>
  <h1>Membuat Sudut Melengkung Dengan CSS3 | havizul.blogspot.com</h1>
  
  <div class="ketengah">
   <div class="kotak kotak1">kotak 1</div>
   <div class="kotak kotak2">kotak 2</div>
   <div class="kotak kotak3">kotak 3</div>
   <div class="kotak kotak4">kotak 4</div>
   <div class="kotak kotak5">kotak 5</div>
   <div class="kotak kotak6">kotak 6</div>
   <div class="kotak kotak7">kotak 7</div>
   <div class="kotak kotak8">kotak 8</div>
  </div>
 </body>
</html>

Kode CSS : sudut-melengkung.css

it916@planning-ho-pc:~$ sudo pico /var/www/html/lth4-css3/sudut-melengkung.css

body {
  background: #A8AAB3;
  font-family: roboto;
  text-align: center;
}

h1 {
  color: #fff;
}

.ketengah {
  margin: 10px auto;
  width: 1150px;
}

.kotak {
  background: #fcfcfc;
  padding: 20px;
  width: 200px;
  float: left;
  margin: 20px;
  height: 200px;
}

.kotak1 {
  border-radius: 10px 10px 10px 10px;
}

.kotak2 {
  border-radius: 40px 20px 60px 90px;
}

.kotak3 {
  border-radius: 2px 140px 20px 60px;
}

.kotak3 {
  border-radius: 20px 10px 80px 10px;
}

.kotak4 {
  border-radius: 0px 50px 0px 50px;
}

.kotak5 {
  border-radius: 0px 0px 0px 0px;
}

.kotak6 {
  border-radius: 100%;
}

.kotak7 {
  border-radius: 40px 10px;
}

.kotak8 {
  border-radius: 10px 10px 50% 50%;
}

Baca selengkapnya »

Selasa, 27 September 2016

Komunikasi Serial (USB Serial PL2303 + Minicom) Di Ubuntu 12.04

Jika menggunakan Sistem Operasi Windows, kita bisa melakukan komunikasi serial antara PC yang sedang kita gunakan dengan perangkat eksternal melalui port DB9 / RS232 atau melalui port USB dengan bantuan kabel USB to Serial, dengan menggunakan software yang cukup melegenda Hyperterminal maupun Putty.

Namun, jika PC yang kita gunakan menggunakan Sistem Operasi Windows, maka bagaimanakah caranya untuk melakukan komunikasi serial antara PC kita dengan perangkat eksternal ? Kita bisa menggunakan software Minicom (pengganti Hyperterminal / Putty). Masalahnya adalah bagaimana cara men-set up Minicom seperti halnya melakukan set up di Hyperterminal maupun Putty ?

Kemudian masalah yang lain muncul di kala PC yang kita gunakan tidak memiliki Port Serial (RS232/DB9) onboard, sehingga kita harus menggunakan kabel USB to Serial. Bagaimanakah cara melakukan instalasi driver kabel USB to Serial di Sistem Operasi Linux ?

Maka tutorial kali ini akan menjelaskan hal-hal tersebut diatas. Disini best practice nya adalah sebagai berikut :

PC menggunakan Sistem Operasi Ubuntu 12.04, dan tidak memiliki port RS232 sehingga harus menggunakan kabel USB to Serial
Kabel USB to Serial yang digunakan adalah Prolific PL2303
Software Serial yang digunakan adalah Minicom (Hyperterminal versi Linux)

Baca selengkapnya »

Rabu, 21 September 2016

Cara Mudah Instalasi Server Apache, MySQL & PHP Pada Linux Ubuntu 12.04

Jika di Sistem Operasi Windows, anda bisa dengan mudah untuk menginstall server MySQL, Apache, dan PHP dalam satu paket hanya dengan mendownload dan klik 2x file installer WAMP, XAMPP, atau file installer lainnya yang sejenis yang menyediakan server MySQL, Apache, dan PHP dalam satu paket. Namun, bagaimana jika kita ingin menginstal Server MySQL, Apache, dan PHP dalam satu paket installer di Sistem Operasi Linux (Ubuntu 12.04) ?.

Caranya mudah, lakukan instalasi aplikasi LAMP Server (Linux Apache MySQL PHP Server). Caranya cukup ketikkan perintah "lamp-server^" melalui terminal, kemudian konfirmasi "Yes" (Y), maka secara otomatis ketiga server MySQL, Apache, dan PHP akan terinstall di komputer Linux Ubuntu 12.04 tersebut.

root@ubuntu:/home/it# apt-get install lamp-server^
Reading package lists... Done
Building dependency tree       
Reading state information... Done
Note, selecting 'apache2-utils' for task 'lamp-server'
Note, selecting 'libwrap0' for task 'lamp-server'
Note, selecting 'libnet-daemon-perl' for task 'lamp-server'
Note, selecting 'libclass-isa-perl' for task 'lamp-server'
Note, selecting 'libaprutil1-dbd-sqlite3' for task 'lamp-server'
Note, selecting 'libswitch-perl' for task 'lamp-server'
Note, selecting 'perl' for task 'lamp-server'
Note, selecting 'libcap2' for task 'lamp-server'
Note, selecting 'libhtml-template-perl' for task 'lamp-server'
Note, selecting 'libdbi-perl' for task 'lamp-server'
Note, selecting 'apache2.2-bin' for task 'lamp-server'
Note, selecting 'mysql-client-core-5.5' for task 'lamp-server'
Note, selecting 'libdbd-mysql-perl' for task 'lamp-server'
Note, selecting 'mysql-server-5.5' for task 'lamp-server'
Note, selecting 'libapr1' for task 'lamp-server'
Note, selecting 'mysql-common' for task 'lamp-server'
Note, selecting 'mysql-client-5.5' for task 'lamp-server'
Note, selecting 'libaprutil1-ldap' for task 'lamp-server'
Note, selecting 'apache2-mpm-prefork' for task 'lamp-server'
Note, selecting 'libplrpc-perl' for task 'lamp-server'
Note, selecting 'tcpd' for task 'lamp-server'
Note, selecting 'apache2' for task 'lamp-server'
Note, selecting 'mysql-server-core-5.5' for task 'lamp-server'
Note, selecting 'apache2.2-common' for task 'lamp-server'
Note, selecting 'mysql-server' for task 'lamp-server'
Note, selecting 'ssl-cert' for task 'lamp-server'
Note, selecting 'perl-modules' for task 'lamp-server'
Note, selecting 'libmysqlclient18' for task 'lamp-server'
Note, selecting 'php5-mysql' for task 'lamp-server'
Note, selecting 'php5-cli' for task 'lamp-server'
Note, selecting 'libapache2-mod-php5' for task 'lamp-server'
Note, selecting 'libaprutil1' for task 'lamp-server'
Note, selecting 'php5-common' for task 'lamp-server'
libcap2 is already the newest version.
libclass-isa-perl is already the newest version.
libswitch-perl is already the newest version.
libwrap0 is already the newest version.
tcpd is already the newest version.
ssl-cert is already the newest version.
The following package was automatically installed and is no longer required:
  gir1.2-timezonemap-1.0
Use 'apt-get autoremove' to remove them.
The following extra packages will be installed:
  libperl5.14 libterm-readkey-perl perl-base
Suggested packages:
  apache2-doc apache2-suexec apache2-suexec-custom php-pear
  libipc-sharedcache-perl tinyca perl-doc libterm-readline-gnu-perl
  libterm-readline-perl-perl libpod-plainer-perl php5-suhosin
The following NEW packages will be installed:
  apache2 apache2-mpm-prefork apache2-utils apache2.2-bin apache2.2-common
  libapache2-mod-php5 libapr1 libaprutil1 libaprutil1-dbd-sqlite3
  libaprutil1-ldap libdbd-mysql-perl libdbi-perl libhtml-template-perl
  libnet-daemon-perl libplrpc-perl libterm-readkey-perl mysql-client-5.5
  mysql-client-core-5.5 mysql-server mysql-server-5.5 mysql-server-core-5.5
  php5-cli php5-common php5-mysql
The following packages will be upgraded:
  libmysqlclient18 libperl5.14 mysql-common perl perl-base perl-modules
6 upgraded, 24 newly installed, 0 to remove and 727 not upgraded.
Need to get 44.4 MB of archives.
After this operation, 112 MB of additional disk space will be used.
Do you want to continue [Y/n]? y

Ketika dalam proses instalasi muncul prompt tampilan yang meminta password MySQL untuk user "root", silahkan masukkan pasword yang diinginkan. Kemudian proses akan berlanjut hingga selesai.

Baca selengkapnya »

Excell Error : Tidak Bisa Menambahkan Baris Baru (New Row) Di File Excell

__________________________________

TERIMA KASIH TELAH BERKUNJUNG TEMAN !
SEBELUM MELANJUTKAN MEMBACA, TOLONG SUBSCRIBE KE CHANNEL YOUTUBE SAYA YA KAWAN.

Link Video : https://youtu.be/NV-v85lV9uA
____________________________________________________________________________________________________________________________________
________________________

Pada saat akan memasukkan sebuah baris baru ke dalam file excell, muncul pesan berikut ini :

To prevent possible loss of data, Excel cannot shift nonblank cells off of the worksheet. Select another location in which to insert new cells, or delete data from the end of your worksheet.

Seperti terlihat pada gambar berikut.

Baca selengkapnya »

Sabtu, 03 September 2016

Proxmox 3.1 - Cara Install VM Guest Windows Server 2012 R2

UNDER CONSTRUCTION

Baca selengkapnya »

Laman

Rabu, 12 Oktober 2016

Jumat, 07 Oktober 2016

Selasa, 27 September 2016

Rabu, 21 September 2016

Sabtu, 03 September 2016