Smart Note

numpang bikin catetan. kali aja ntar ane kelupaan. jd masi ada backup ingatan di blog. sekalian dishare buat belajar bareng..

1. Installasi

paket yg diinstall :
apache2 = webserver
php5 = engine php
lynx = browser CLI

2. Pengujian Web Server
klo udah diinstall, coba cek pake browser. ketik localhost. klo keluar "it works" brarti sukses install web servernya.
krn ane td udah install browser command line. jd langsung aja cek di terminal. dg perintah
ntar keluar kek gini :
dah works, web servernya.

3. Konfigurasi Website
webservernya dah jalan. skrng buat websitenya dong..
konfigurasi ada di sebuah file bernama default yg ada di /etc/apache2/sites-available/
*biasain klo ngedit konfig'an dibuat backupnya dulu. biar aman. klo error tinggal restore file originalnya.



skrng mulai edit file default td
di baris paling atas, kan ada

Edit jadi seperti ini

klo udah disave.
trus restart service webservernya.
4. Edit Website
web server udah, lokasi file2 webnya jg udah tau. sekarang mulai edit aja webnya. krn ini cm latian. jd ya edit dikit aja yak.
lokasi file2 website ada di /var/www , misal kita punya file index.html
kita edit file itu

klo udah diedit, save dah. skrng coba kita uji di browser.

5. Pengujian di Client
gimana kalo di uji di komputer laen(client) yg terhubung dg komputer kita(server). disni ane simulasiin pake virtualbox dg OS windows xp.
krn ip komputer ane td 192.168.2.125 jd skrng kita coba masukin ip server kita di browser client.
berhasil.

klo mo install joomla ato wordpress ato CMS2 laen nya. masukin file2 CMS itu ke dalem direktori /var/www
eh iya.. jangan lupa install MySQL ama phpmyadmin nya. klo pengen pake CMS, pasti butuh database kan. tutornya disini Cara Install PhpMyAdmin di Linux


oke.. sekian dulu dr ane.
ntar ane lanjutin lg tutor buat bikin DNS servernya. jd web kita bisa dipanggil dg nama domain.

Sejak pekan lalu Israel menginvasi kawasan Jalur Gaza, Palestina, yang dikuasai Hamas. Perang di dunia nyata pun berlanjut ke dunia maya. Didorong sentimen solidaritas sebagai sesama negara muslim, beberapa hacker Indonesia langsung menyerang beberapa server dan situs milik Israel.
Akibatnya, kemarin otoritas keamanan Internet Indonesia (Indonesia Security Incident Response Team on Internet Infrastructure/IDSIRTI) mengabarkan ada pemberitahuan dari otoritas Internet Israel, bahwa mereka bakal dilakukan serangan balasan terhadap DNS server Indonesia. Serangan ini rencananya menyasar domain-domain berakhiran .id.
Ketua Umum Pengelola Nama Domain Internet Indonesia (Pandi) Andy Budimansyah mengaku sudah mendengar informasi tersebut. Namun dari hasil pemeriksaan sementara, belum ada serangan dilancarkan hacker Israel ke domain Indonesia.
"Sejauh ini belum ada serangan (ke domain-domain .id), tapi kemarin memang ada notifikasi dari First Org, itu lembaga semacam IDSIRTI-nya Israel," ujarnya saat dihubungimerdeka.commelalui telepon seluler, Kamis (23/11).
Dia menyebut hacker Indonesia sudah berhenti menyerang situs-situs Israel. Meski demikian, untuk berjaga-jaga Pandi langsung berkoordinasi dengan operator DNS untuk meningkatkan pengawasan dan mengawasi bila kemungkinan buruk terjadi.
"Kita monitor karena DNS kita tersebar di seluruh Indonesia dan di luar negeri, kita koordinasi dengan DNS yang dikelola Indosat, di GPN, di Australia, kita minta mereka membantu pemantauan, jika terjadi serangan kita usahakan ditutup (DNS server itu) sementara," paparnya.
Andy menegaskan langkah hati-hati harus dipersiapkan. Walau lokasi DNS sudah tersebar, jika hacker Israel benar-benar menyerang balik akibatnya tetap merugikan. Karena DNS-lah yang menghubungkan pengguna internet dengan domain .id. Jika server ini mati, tentu situs-situs dengan nama domain khas Indonesia itu tak bisa diakses.
"Kalau server banking atau website-website yang melayani masyarakat tiba-tiba tidak bisa diakses, kan kasihan," tuturnya.
DNS Server yang mengelola domain .id tersebar di pelbagai kota dan dikelola swasta. Namun titik lokasi terbanyak berada di Jakarta. Andy berharap serangan balasan itu nantinya sama sekali tidak terjadi.

sumber : http://www.merdeka.com/teknologi/diserang-hacker-indonesia-israel-ancam-lakukan-balasan.html

sdikit tutor cupu buat bikin banner 3d. walau hasilnya ga tridi tridi banget sih. :prustasi

step pertama, buat kanvas baru. ukuran brapa aja sesuai selera. background transparan.

trus klo udah, buat layer baru. ini opsional sih. mo dibuat apa engga. cm buat background pembantu aja. ntar dihasil akhir engga dipake.
isi warna background ini sesuai warna websitenya.
ganti nama layer dg nama "background".

step kedua, buat bentuk bannernya. bikin layer baru, trus gunain pen tool. ane bikin bentuk yg simple2 aja. kaya gini..
isi warna banner nya sesuai warna yg mnurut selera masing2.
ganti nama layernya dg nama "bentuk 1"
(nama2 layer disini seterah masing2 sih, intinya cm buat mudahin proses pembuatannya)
double klik layer "bentuk 1" , muncul layer style. klik di bagian drop shadow di layer ini. atur setting nya kek gini
selanjutnya, masi di jendela layer style. klik di bagian bevel and emboss atur setting nya kek gini
next.. klik bagian satin atur setting nya kek gini trus klik gradient overlay atur setting nya kek gini

bentuk 1 udah selesai.

step ketiga. buat layer baru, kasi nama "bentuk 2"
gunain pen tool lg, bikin bentuk kaya gini
isi warnanya dengan warna yg sekiranya pas,
kita tambahin stylenya. double klik layer "bentuk 2" , muncul layer style.
klik di bagian drop shadow di layer ini. atur setting nya kek gini
skrng klik di bagian inner glow, atur setting nya kek gini
selanjutnya, masi di jendela layer style. klik di bagian bevel and emboss atur setting nya kek gini
next.. klik bagian satin atur setting nya kek gini
trus klik gradient overlay atur setting nya kek gini

bentuk 2 udah selesai.

step ketiga. buat layer baru.
skrng buat ngasi text nya. seterah mau dikasi tulisan apa.
gunain type tool. ketik tulisan nya.
kasi sdikit style. double klik layer text nya. klik outer glow. atur settingnya kek gini.

selanjutnya kasi bbrpa text lg sesuai yg diinginkan, sama langkahnya dg step ketiga. klo ada tambahin juga logo website nya.
misal kaya gini

klo udah smua, skrng nonaktifin background yg berwarna td, (klik icon mata didepan layer) jd banner kita transparan background nya.
skrng save dah. save nya dg format .png
jd ntar biar bisa fleksibel ditempel di websitenya.

hasilnya yg td kurang lebih, kek gini


okedeh, cm segitu doang bisanya ane mah.
sekian tutor cupu dr ane.

DOWNLOAD PSD FILES

kmaren ada yg PM ane, nanya gimana buat kotak chatboxnya yang ada di http://fake.hol.es
ok deh, skrng mo ane share gimana cara buatnya, ane pake jquery buat bikin animasi kedatangan dan kepergian kotak chatboxnya.
ane comot dr sini js nya http://jqueryui.com/dialog/

pertama, masukin library jquerynya.
taro script ini diatas </head>

 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

 eh, iya.. CSS nya juga sekalian. soalnya udah disediain jg. taro script ini diatas </head>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />

 kalo yg ini script buat ngatur jenis animasi sama kecepatan animasinya.
script ini juga ditaro diatas </head>

<script>
    $.fx.speeds._default = 1000; //kecepatan animasi
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind", //jenis animasi munculnya kotak dialog
            hide: "explode" //jenis animasi hilangnya kotak dialog
        });

        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });
</script>

 jd script lengkapnya, yang ditaro diatas </head> kaya gini

 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
    $.fx.speeds._default = 1000; //kecepatan animasi
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind", //jenis animasi munculnya kotak dialog
            hide: "explode" //jenis animasi hilangnya kotak dialog
        });

        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });
</script>

 sekarang saatnya kita masukin isi dr kotak dialog nya.
taro script ini dimana aja, sesuai tempat dimana mau dimunculin tombol untuk membuka dialognya.

<div id="dialog" title="Judul">
    <p>
    <!-- konten dialog open -->
    ISI KOTAK DIALOG DISINI
    <!-- konten dialog kloset -->
    </p>
</div>
<button id="opener">buka</button> //ini tombol yg diklik buat membuka kotak dialognya. bisa juga tombolnya diganti dengan gambar.

 ok, selesai. silakan disave. dan dicoba.

DEMO | DOWNLOAD

sumber : http://jqueryui.com

klo ada yang salah mohon dikoreksi ya..

Niatnya mo ng'bantuin temen , ada yg nanya gimana cara buat bikin scrollbar di website.
jd skalian aja ane share caranya disini, kali aja ada yg belom tau.

krn ane belom bisa bikin sendiri js nya, jd ane pake js bikinan orang laen.
https://github.com/inuyaksa/jquery.nicescroll

STEP 1
masukin js nya ke web kita.
tambahin script ini diatas </head>
STEP 2
masukin script scrollbar nya.
taro diatas </head> juga.

<script>
  $(document).ready(function() {
 
    var nicesx = $("body").niceScroll({touchbehavior:true,background:"#ffffff",cursorcolor:"#FF0000",cursoropacitymax:0.6,cursorwidth:8});
   
  });
 
</script>

For Your Information :

touchbehavior:true
-- visibilitas scrollbarnya. klo "true" = brarti scrollbarnya akan muncul ketika didekati mouse. klo "false" = dlm kondisi disentuh mouse ataupun tidak disentuh. scrollbar akan tetap muncul.

background:"#ffffff"
-- warna background scrollbar

cursorcolor:"#FF0000"
-- warna kursor scrollbar

cursoropacitymax:0.6
-- ketebalan kursor scrollbar

cursorwidth:8
-- lebar kursor scrollbar

klo udah, save.
trus di tes dah.

DEMO | DOWNLOAD

sekian tutor garing dr ane.

dah lama nulis di blog
sibuk kerjaan soalnya. :v

hmmh.. kmaren iseng2 blajar bikin web portal sendiri.
hasil googling nyari2 tiap elemen2 portalnya. salah satunya yaitu menu.
kmaren ktemu ama yg namanya rolling menu effect. pake jquery.
stelah utak atik sdikit. akhirnya jadi juga.
hasilnya bisa dilihat disini http://fake.hol.es


nah, gimana cara bikinnya?
langsung aja step by stepnya yak:

STEP 1
kita ambil dulu library jquery nya, ane ngambil dari http://ajax.googleapis.com , nah biar gampang. ambil aja ini. yg udah ane save di site ane.
taro script ini diatas tag


STEP 2
klo udah, skrang kita tambahin CSS nya


di bagian ini

yang warna merah, itu link gambar icon menunya. bisa aja diganti sesuai gambar yg senada sama warna webnya.


STEP 3
sekarang kita masukin div nya. ato yang munculin nih menu.
taro script ini ditempat dimana kita mau nempatin menunya. bisa di bawah head. ato dimana aja.


<!-----------------------------MENU START-------------------------------->
     <div id='rocking-rolling'>
    <div class='item'>
    <a class='link icon_chat'></a>
    <div class='item_content'>
    <h2>REACH ME via</h2>
    <p>
    <a href='#'>Email</a>
    <a href='#'>Facebook</a>
    <a href='#'>Twitter</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_archives'></a>
    <div class='item_content'>
    <h2>ARCHIVES</h2>
    <a href='#'>Shell</a>
    <a href="#">Bot</a>
    <a href="#">Local Root</a>
    <a href="#">Tools</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_tools'></a>
    <div class='item_content'>
    <h2>TOOLS</h2>
    <p>
    <a href='#'>MD5</a>
    <a href='#'>BASE64</a>
    <a href='#'>SHA1</a>
    <a href='#'>IP</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_profil'></a>
    <div class='item_content'>
    <h2>ABOUT</h2>
    <p>
    <a href='#'>Me</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_home'></a>
    <div class='item_content'>
    <h2>HOME</h2>
    <p>
    <a href='#'>Portal</a>
    <a href='#'>Blog</a>
    <a href='#'>Forum</a>
    </p>
    </div>
    </div>

    <div style='clear:both;'></div>
    </div>

    <script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({wid​th:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(t​rue,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).​stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fade​In(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hov​er(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>
<!---------------------------MENU END------------------------------------>



    
untuk menunya silakan disesuaiin sendiri.
di bagian:

<h2>REACH ME via</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Facebook</a>
<a href='#'>Twitter</a>
</p>

yups.. selesai.
save.

coba di test.

DEMO | DOWNLOAD


klo masi bingung, silakan ditanyakan.
sekian dr ane.