Membuat Server Hosting Komputer Rumah Sendiri dengan Appserv

Sebelumnya saya harap anda sudah tahu apa itu server ? hosting ?, saya jelaskan sedikit. Server Hosting adalah sebuah komputer yang dijadikan sebagai tempat penyimpanan utama file-file website di internet. Sebelumnya anda mungkin sudah tahu dan sudah banyak  mengenal Webhosting Reseller yang terkenal di internet mulai dari Hostgator.com sampai iPage.com .

Nah kali ini anda dapat membuat server hosting sendiri melalui komputer rumah sendiri.
Syarat Minimum :
1. Komputer Pentium 4 (win xp)
2. Speedy Internet UNLIMITED (Rekomendasi Speedy paket Family)
3. download APPSERVER Di Sini

    




Pastikan lokasi install di C:\AppServ

1. Langkah pertama yang harus anda lakukan adalah mencari nomor IP Adress Komputer anda :
1. Buka RUN ? cmd
2. ketik IPCONFIG /ALL
3. Perhatikan dan catat pada IP Adress komputer anda dalam sebuah kertas atau apa saja.


2. Melakukan setting Modem TP LINK agar dapat diakses HTTP
1. Buka browser (firefox rekomendasi)
2. Ketik Gateway Modem Adress : http://192.168.1.1/
3. Login dengan akun dan password modem anda (jika tidak tahu silahkan tanya tukang pasang speedy anda)
4. Klik Menu Advanced Setup ? NAT
5. Jika pertama muncul PVC0 dan NAT Status : Deactive, maka ganti dengan PVC1 . Jika PVC1 juga statusnya Deactive, coba klik menu Interface Setup , pilih PVC1, pilih option Activated . Kembali ke Advanced Setup ? NAT ? PVC1
6. Klik Virtual Server
7. Setting dengan data sebagai berikut :
Rule Index : 1
Aplication : HTTP_Server
Protocol : ALL
Start Port Number : 80
End Port Number : 80
Local IP Address : (nomor IP Adress komputer yang anda catat tadi)
8. klik Save

3 . Membuat Virtual-Host di AppServ (Apache)
1. Buka folder c:\AppServ
2. Buka folder Apache
3. Buka Folder Conf
4. buka file httpd.conf dengan wordpad
5. Masukkan script dibawah ini pada bagian akhir isi file :
 # Virtual hosts
Include conf/httpd-vhosts.conf
6. Buat file httpd-vhosts.conf  disebelah file httpd.conf , dan isikan dengan script dibawah ini:
NameVirtualHost 192.168.1.3:80
<VirtualHost 192.168.1.3:80>
    ServerAdmin webmaster@softkid.servemp3.com
    DocumentRoot C:\AppServ\www\~virtual\~server\public_html
    ServerName softkid.servemp3.com
    ErrorLog logs/softkid.servemp3.com-error_log
    CustomLog logs/softkid.servemp3.com-access_log common
</VirtualHost>
Ganti teks tulisan merah diatas dengan IP Adress Komputer anda.

7. Sekarang buka folder C:\Appserv\www
8. Buat folder ~virtual, dan buka folder tersebut buat folder ~server , buka folder tersebut buat lagi folder public_html (sehingga struktur folder menjadi C:\AppServ\www\~virtual\~server\public_html )
9. Sekarang Restart Apache server (Ada pada start menu, cari folder AppServ ? Control By Service ? Apache Restart )
10. Buka Browser, coba ketikkan Alamat IP ADRESS KOMPuter anda yang anda catat tadi dan enter.
Jika hasilnya adalah seperti gambar dibawah ini , berarti anda sudah berhasil membuat komputer anda dapat diakses melalui internet

Untuk semenatara cukup sekian, tapi masih ada satu lagi yang harus anda lakukan adalah mendaftarkan nomor ip ke domain name, contoh penyedia : https://www.no-ip.com

http://mas-anca.blogspot.com/2011/03/sebelumnya-saya-harap-anda-sudah-tahu.html

Tiga Gaya Menu Navigasi Bertingkat dengan Efek Smooth JQuery

Secara umum ada tiga tipe efek JQuery yang paling populer digunakan, yaitu efek Fade, Show dan Slide. Di sini Saya akan memberikan tiga buah efek dasar JQuery tersebut untuk diterapkan ke dalam sebuah menu navigasi dalam satu desain. Kamu tinggal memilih efek mana yang menurutmu paling cocok.
Agar langkahnya tidak berantakan, maka Saya balik urutannya yaitu mulai dari penempatan kerangka objek, pemodelan dan terakhir pemasangan JQuery:

Langkah Pertama: Penempatan Kerangka Objek dan Pemodelan:

Salin kode berikut ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<div class='hompimenu'>

    <ul>

        <li><a href='#'>BERANDA</a></li>

        <li><a href='#'>JURNAL</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KOMENTAR</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a>
                    <ul>
                        <li><a href='#'>Tiga Satu</a></li>
                        <li><a href='#'>Tiga Dua</a></li>
                        <li><a href='#'>Tiga Tiga</a></li>
                        <li><a href='#'>TIga Empat</a></li>
                        <li><a href='#'>Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KONTAK</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

    </ul>

</div>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »

Setelah itu salin kode CSS ini, kemudian letakkan tepat di atas kode ]]</b:skin> atau </style>:

/**
 * Copyright Juli 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 */

.hompimenu {
  font:normal 12px Cambria,"Times New Roman",Times,serif;
  line-height:normal;
  text-transform:uppercase;
  margin:5px 0px;
  padding:0px 0px;
  color:white;
  text-decoration:none;
}

.hompimenu ul {
  height:34px;
  line-height:34px;
  background-color:#333;
  margin:0px 0px 10px;
  padding:0px 0px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
}

.hompimenu li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  color:white;
  float:left;
  display:inline;
  position:relative;
}

.hompimenu li a {
  display:block;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  margin:0px 0px;
  padding:0px 15px;
  color:white;
  text-decoration:none;
  font-weight:bold;
  line-height:34px;
  text-shadow:1px 1px 2px #000;
  outline:none;
}

.hompimenu li ul {
  position:absolute;
  z-index:10;
  left:0px;
  top:100%;
  height:auto;
  margin:0px 0px;
  padding:0px 0px;
  width:170px;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}

.hompimenu li ul a {
  border-left:none;
  border-right:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
}

.hompimenu li ul li {
  float:none;
  display:block;
  width:auto;
}

.hompimenu li ul ul {
  top:0px;
  left:100%;
}

.hompimenu li a:focus {
  background-color:#666;
  border-left-color:#777;
  border-right-color:#555;
}

.hompimenu ul li a:focus {
  background-color:#666;
  border-top-color:#777;
  border-bottom-color:#555;
}

.hompimenu li a:hover,
.hompimenu ul li a:hover {color:#ccc;}

Nah, terakhir kamu hanya perlu menentukan efek seperti apa yang menurutmu paling cocok. Pilih salah satu:

Efek SlideDown & SlideUp:

Untuk membuat efek SlideDown - SlideUp, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>

Efek FadeIn & FadeOut:

Untuk membuat efek FadeIn - FadeOut, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').fadeIn(400);
    }, function() {
        $(this).children('ul').fadeOut(400);
    });
});
</script>
</script>

Efek Show & Hide:

Untuk membuat efek Show - Hide, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').show(400);
    }, function() {
        $(this).children('ul').hide(400);
    });
});
</script>
</script>

Khusus untuk kode yang Saya beri garis bawah, jika sudah ada tidak perlu ditambahkan.
Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.

CSS3 Properti Resize

   Sedikit Banyak saya ingin membahas dasar-dasar css. tag-tag dan masing-masing kegunaannya...
yap..... semoga saya punya banyak waktu untuk berbagi ilmu dengan anda he he :).
kali ini saya akan membahas properti resize dalam css. Untuk contoh lihat Potongan kode di bawah:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

kode di atas akan tampil seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Anda Sudah lihat hasilnya kan.....
Dalam sebuah website, css berperan untuk menentukan tampilan. Seperti Contoh di atas elemen <div> dengan class id kotak di atur oleh kode css div.kotak. dimana:
lebarnya/width 100px
tingginya/height 100px
memiliki garis tepi/border 1px
dengan jenis garis padat/solid
dan berwarna merah/red

Karena ukuran kotak hanya (100px X 100px) sedangkan elemen di dalamnya membutuhkan tempat yang lebih luas, maka Elemen di dalamnya di tampilkan melewati kotak 100px X 100px tadi. untuk mengatasi masalah tersebut kita tambahkan Properti overflow. jadi kodenya seperti berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Tampilannya seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Properti overflow berfungsi untuk menangani elemen yang melebihi batas yang sudah di tentukan.
adapun hidden bisa kita sebut nilai properti overflow. hidden berarti sembunyikan. Karena itulah elemen yang melebihi batas 100px X 100px di sembunyikan. namun nilai properti overflow bukan hidden saja.
Berikut nilai-nilai Properti lain berikut Fungsi masing-masing:

1. visible (terlihat) : Elemen yang melebihi garis akan di tampilkan. jadi terlihat seperti conto pertama. 
2. hidden (sembunyikan) : Elemen yang melebihi batas akan di Sembunyikan. 
3. scroll (gulir) : Elemen yang melebihi batas akan di sembunyikan namun bisa di gulir untuk melihatnya. 
4. auto (otomatis) : Elemen yang melebihi batas akan di sembunyikan dan bisa di gulir namun jika tidak melebihi batas, efek scroll secara otomatis tidak di tampilkan.

Berikut Contoh Masing-masing:
 overflow: visible;

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

overflow: hidden;

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

overflow: scroll;
Jika elemen melebihi batas

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

jika elemen tidak melebihi batas

Elemen

overflow: auto;
jika elemen melebihi batas

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

jika elemen tidak melebihi batas

Elemen

Sekarang kita lanjut ke pembahasan properti resize.properti resize memungkinkan kita untuk merubah ukuran blok yang sudah di tentukan ke ukuran yang kita suka hanya dengan mengklik tepi untuk merubah ukuran dan menggesernya menjadi ukuran yang kita suka. untuk contoh lihat kode berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: scroll;
resize: both;
}
</style>
<br />
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Akan Terlihat seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Anda bisa merubah ukuran kotak 100px X 100px di atas dengan mengklik pada pojok kanan bawah kotak, tahan dan geser. itu karena kita menggunakan properti resize. adapun both adalah nilai properti. properti resize juga memiliki beberapa nilai properti. Inilah nilai-nilai properti resize berikut fungsi masing-masing:

1. both (keduanya) : Memungkinkan anda merubah ukuran kotak secara horisontal dan vertikal. 
2. horizontal (horisontal) : Memungkinkan anda merubah ukuran kotak secara horisontal saja. 
3. vertical (vertikal) : Memungkinkan anda merubah ukuran kotak secara vertikal saja.

untuk Contoh masing-masing silahkan anda buat sendiri......
saya sudah capek mengetik hehe :)
kalau ada pertanyaan bisa anda tinggalkan komentar di bawah....
dan kalau anda ingin copas silahkan. karena saya sendiri juga suka copas artikel orang...
tapi ini murni tulisan saya.

semoga bermanfaat
Sumber :

---

DAFTAR ISI

---

Cara Partisi Hardisk :: Mempartisi Hardisk di Windows 7 Tanpa Software

Cara partisi hardisk yang benar kerap kurang diperhatikan oleh banyak pengguna komputer yang hanya menyerahkan seluruh penginstalan dan lain-lain kepada orang lain. Padahal, ada baiknya kita mengetahui bagaimana cara partisi hardisk yang benar agar dapat mempermudah pembagian data ke dalam berbagai ruang hardisk yang berbeda. Bagi pengguna Windows 7, berikut adalah cara partisi hardisk yang mudah dan tanpa menggunakan software.

Cara partisi hardisk – Urutan Langkah Partisi Hardisk

Pertama-tama sebagai cara partisi hardisk di windows 7, kita perlu mengklik menu start, lalu klik tombol mouse kanan pada ”Computer”, lalu klik Manage. Selanjutnya akan keluar jendela Disk Management dimana kita bisa memilih file yang ingin kita bagi. Klik kanan pada file yang ingin kita bagi sebagai tahap selanjutnya dalam mempartisi hardisk, lalu klik Shrink Volume. Jendela selanjutnya akan mengizinkan kita untuk menentukan jumlah volume yang diinginkan pada partisi baru yang akan dibuat. Klik tombol ”Shrink”, lalu kita perlu menunggu sejenak sampai proses selesai dan partisi baru terbentuk. Arahkan mouse pada partisi baru, lalu klik kanan dan pilih ”New Simple Volume”. Selanjutnya pada cara partisi hardisk ini adalah menentukan jumlah volume driver yang kita kehendaki serta menentukan urutan drive letter (C, D,E, F). Kita bisa menyesuaikannya sesuai kehendak kita masing-masing. Proses selanjutnya dalam cara partisi hardisk adalah dengan memilih format drive dari partisi baru ini, dan tak ketinggalan juga memilih label dari drive yang ingin dibuat. Selanjutnya kita hanya perlu menglik ”Finish” untuk mulai memprosesnya.

Cara partisi hardisk – Mengapa Penting untuk Dilakukan

Cara partisi hardisk tanpa software yang telah dijelaskan secara singkat di atas sangat bermanfaat jika kita ingin membagi memori dalam komputer kita menjadi 3 atau empat bagian. Membagi hardisk menjadi berbagai partisi dengan mempartisi hardisk di atas tentu akan membuat kerja komputer menjadi lebih efisien dengan membagi tugas tiap partisi hardisk. Terlebih lagi, cara partisi hardisk di atas juga tidak sulit untuk dicontoh dan dipraktikkan langsung.

Selain informasi cara partisi hardisk tanpa software di atas, ada baiknya anda juga mengetahui bagaimana caranya merubah partisi hardisk anda yang sudah dengan baik terinstall. Hal ini penting mengingat bisa saja anda membutuhkan space lebih untuk data entertainment anda daripada data dan sebagainya. Jadi berikut ini tips yang dapat anda gunakan untuk merubah hasil partisi anda sebelumnya.

Kita anggap file yang akan kita ubah adalah drive E, maka kita bisa mulai mengikuti tahap-tahap berikut. Pertama-tama masuk ke control panel dan masuk lebih dalam ke bagian “partition” dimana semua partisi diatur. Untuk masuk ke bagian ini akan lebih mudah menggunakan fitur search pada sudut kanan atas display anda. Setelah sampai pada bagian partition anda dapat mengklik “Create and format had disk partitions”  dilanjutkan dengan “Disk management”. Selanjutnya klik kanan untuk partisi drive E dan pilih menu shrink volume. Lalu silahkan tentukan berapa space yang anda butuhkan pada tampilan window yang akan muncul.

Hampir mirip dengan cara mengubah partisi hardisk, anda juga bisa menambah partisi tertentu sebagai contoh partisi F. Untuk membuat partisi baru ini, anda dapat juga menghapus dulu partisi lain yang anda tidak butuhkan. Tetapi jangan lupa untuk mengakhiri pilihan anda dengan mengklik kanan dan pilih shrink. Sekarang, dengan cara partisi hardisk dan cara mengubah hardisk, anda tidak perlu datang ke jasa service komputer lagi. Serta anda tidak repot lagi untuk mencari-cari software partisi karena semua itu dapat dilakukan dengan tidak menggunakan software tertentu atau khusus.

Contoh Company Profile

Sumber :

---

DAFTAR ISI

---