Asudahlah.com

Programming, tutorials, mechatronics, operating systems, and other tech stuff

Transfer file melalui jaringan di ubuntu menggunakan SSH dan File Manager

No comments
Banyak cara untuk melakukan transfer file melalui jaringan di linux ubuntu, bisa dengan samba server, http server, ftp, sftp, dan lain-lain. Salah satu diantaranya yang paling mudah dan yang akan saya bahas kali ini adalah dengan menggunakan SFTP ( SSH File Transfer Protocol ). Yaitu transfer file melalui SSH.

Syarat utama untuk SFTP ini adalah:

  1. Jaringan sudah diatur sedemikian rupa sehingga memungkinkan masing-masing komputer untuk melakukan ping.

  2. SSH server pada komputer yang akan diakses harus sudah terinstall, aktif, dan dapat diakses / login dari komputer lain. Untuk panduan instalasi SSH Server, dapat anda baca di artikel Cara Mengaktifkan dan konfigurasi SSH Server di ubuntu

  3. Aplikasi file manager seperti nautilus, nemo, thunar, dll.(dalam contoh ini saya gunakan Nautilus bawaan ubuntu) sudah terinstall di komputer client yang hendak mengakses.


Meng-koneksikan file manager ke SFTP


Langkah pertama, Buka file manager (dalam contoh ini nautilus).

Cara 1


lalu klik menu file (atau context-menu / tombol gir di pojok kanan atas untuk nautilus release terbaru). Kemudian klik menu "Connect to server... " seperti gambar berikut:

sftp0Kemudian pada dialog connect to server, masukkan alamat tujuan dengan protokol sftp. Dalam contoh gambar berikut saya menggunakan alamat 192.168.6.2 , jadi alamatnya: sftp://192.168.6.2

sftp3Kemudian klik tombol "Connect". Lalu akan muncul dialog login seperti gambar berikut, isikan username dan password ssh server komputer tujuan.
Jika setelah di klik "Connect" tidak terjadi apa-apa, kemungkinan alamat yang anda masukkan tidak dapat diakses. Pastikan bahwa alamat ip tersebut bisa di ping dan terdapat SSH server berjalan di komputer tersebut.

Apabila SSH server komputer tujuan menggunakan port tcp selain port default ssh (port 22), maka tambahkan alamat port setelah IP, dipisah titik dua (:) misalnya sftp://192.168.6.2:1234

sftp2Lalu klik tombol "Connect". Dan tunggu hingga proses login berhasil, maka nautilus akan membuka direktori home dari user yang anda gunakan untuk login.
Untuk masuk ke direktori lain semisal /, /var/www, /etc, tekan "Ctrl+L", lalu pada address location bar, hapus alamat yang mengarah ke direktori home. Contoh: sftp://192.168.6.2/home/asudahlah menjadi sftp://192.168.6.2/ atau sftp://192.168.6.2/var/www

Cara 2


Cara ini lebih simple daripada yang pertama. :D yaitu anda tinggal tekan "Ctrl+L", lalu masukkan alamat IP tujuan beserta protokolnya seperti sftp://192.168.6.2/, kemudian tekan enter. Dan akan muncul dialog login dan langkah selanjutnya bisa anda baca di Cara 1. :D That's it.

Catatan


Sama seperti FTP, cara ini menggunakan client dan server. Dimana client dapat mengakses server, tapi tidak sebaliknya. Akan tetapi, anda tetap bisa menghapus, membuat, mengirim, dan mengambil file tergantung dari hak akses user yang anda gunakan saat login.

Pada file manager, koneksi yang barusan anda buat akan dianggap sebagai sebuah direktori yang seolah-olah di mount dan biasanya ditampilkan pada sidebar.

No comments :

Post a Comment

Cara Mengaktifkan dan konfigurasi SSH Server di ubuntu

1 comment

Sekilas tentang SSH


Secure Shell (SSH) adalah sebuah protokol jaringan kriptografi untuk komunikasi data yang aman, login antarmuka baris perintah, perintah eksekusi jarak jauh, dan layanan jaringan lainnya antara dua jaringan komputer. Ini terkoneksi, melalui saluran aman atau melalui jaringan tidak aman, server dan klien menjalankan server SSH dan SSH program klien secara masing-masing. Protokol spesifikasi membedakan antara dua versi utama yang disebut sebagai SSH-1 dan SSH-2.

Tentang SSH lebih lengkap bisa anda kunjungi http://id.wikipedia.org/wiki/SSH

Instalasi SSH server di ubuntu


SSH server yang akan kita gunakan sudah ada di repository main ubuntu. Sehingga dapat langsung anda install dengan perintah

[code]sudo apt-get install openssh-server[/code]

Kecil kok, gak sampe 1 mega.

Setelah instalasi berhasil, secara otomatis server ssh sudah berjalan di komputer anda. Saat ini, seharusnya anda sudah bisa login ke komputer anda secara remote melalui jaringan dengan menggunakan alamat IP anda pada port 22 (port default ssh), kemudian login menggunakan username dan password anda.

Selanjutnya, kita perlu mengatur konfigurasi server ssh tadi agar dapat berjalan sebagaimana mestinya.:D

Konfigurasi dasar SSH server


Mengganti port SSH Server


Secara default, SSH server menggunakan port 22 untuk berkomunikasi. Tetapi, kita dapat menggantinya sesuai keinginan kita. Entah karena kepingin, atau memang port 22 akan kita gunakan untuk program lain.

Untuk mengganti konfigurasi SSH server, buka file sshd_config yang ada pada direktori /etc/ssh/sshd_config.
Catatan : nganu... pada direktori /etc/ssh/, biasanya terdapat 2 file dengan nama hampir sama, yaitu "ssh_config" dengan "sshd_config". ssh_config adalah file konfigurasi untuk ssh client. Sedangkan sshd_config adalah untuk ssh server. Jangan keliru :D

buka dengan text editor favorit anda, dan jangan lupa, setiap anda mengedit file konfigurasi di linux, gunakanlah hak akses super user. dengan perintah sudo. Agar perubahan-perubahan yang anda ketik tidak sia-sia(karena terlanjur ngetik banyak, ternyata tidak bisa disimpan, terpaksa harus copy paste, dan ini yang bikin kadang saya merasa... asudahlah... ).

misalnya, saya menggunakan text editor nano.

[code]sudo nano /etc/ssh/sshd_config[/code]

Kemudian, pada parameter keyword "Port" dibawah komentar "# What ports, IPs annd protocols we listen for" (kalo gak salah). Biasanya sih di baris-baris atas(di tempat saya gitu).

ssh1

ubah nilai default 22 ke port yang anda inginkan.
Catatan : Pastikan port yang hendak anda gunakan tidak bertabrakan dengan program lain.

Gunakan fitur Find pada text editor anda. Misalnya pada nano, saya gunakan Ctrl+w lalu saya ketik "port".

Setelah selesai, simpan lalu restart SSH server anda dengan :

[code]service ssh restart[/code]

atau

[code]/etc/init.d/ssh restart[/code]

 Mengatur Banner login SSH


Anda juga bisa menambahkan banner anda sendiri. Banner disini tentu saja dalam bentuk text. Dimana banner ini akan tampil ketika client membuka koneksi SSH sebelum login. Sekedar untuk informasi atau bisa juga untuk peringatan bagi orang-orang nyasar(baca:heker) yang entah numpang lewat atau cuma mampir.

Untuk menambahkan Banner, pada file sshd_config, tambahkan baris:

[code]Banner /etc/issue.net[/code]

atau uncomment baris yang sudah ada dengan menghapus tanda pagar (#) diawal baris.

Kemudian simpan. dan sebelum di restart. Edit file /etc/issue.net dengan text editor dan sesuaikan dengan keinginian anda. Isi dari file issue.net inilah yang menjadi banner yg tampil pada saat sebelum otentikasi/login. Misalnya saya rubah seperti ini:

ssh2Simpan kemudian restart SSH server. Maka ketika hendak login ssh dalam kasus ini saya menggunakan perintah:

[code]ssh anu@localhost[/code]

keluar konfirmasi yes/no, pilih yes. Lalu akan tampil kurang lebih seperti screenshot berikut:ssh3

Sekian tutorial singkat dari asudahlah.com. semoga bermanfaat.

1 comment :

Post a Comment

Menghitung jumlah hari antara 2 tanggal di PHP

No comments
Sebuah coretan singkat tentang cara untuk menghitung jumlah hari antara 2 tanggal di PHP. Fungsi ini memang sepele, tapi tetap saya post disini karena siapa tahu ada yang membutuhkan.

Penerapannya bisa untuk menghitung tengat waktu/deadline, kadaluarsa, jangka waktu, dll.

<?php

function hitungHari($awal,$akhir){

$tglAwal = strtotime($awal);

$tglAkhir = strtotime($akhir);

$jeda = abs($tglAkhir - $tglAwal);

return floor($jeda/(60*60*24));

}

?>
untuk penggunaanya (dalam contoh ini menggunakan format penanggalan SQL):

echo hitungHari('2015-01-01','2015-12-01');

Penjelasannya


function hitungHari($awal,$akhir)

adalah deklarasi fungsi hitungHari yg menerima 2 parameter, yaitu variabel $awal dan $akhir. Dimana $awal adalah tanggal awal (dalam kasus ini menggunakan format string penanggalan SQL yaitu tahun-bulan-tanggal). Dan $akhir adalah tanggal akhir.

$tglAwal = strtotime($awal);
$tglAkhir = strtotime($akhir);

Dua baris diatas mengubah variabel $awal dan $akhir yg berisi string tanggal, kedalam bentuk time (jumlah detik sejak tahun 1 Januari 1970) yang kemudian disimpan ke variable $tglAwal dan $tglAkhir.

$jeda = abs($tglAkhir - $tglAwal);

Baris diatas adalah operasi pengurangan dari $tglAkhir dikurangi $tglAwal. Sehingga didapat hasil yaitu jarak waktu antara 2 variabel tadi dalam satuan detik. Fungsi abs() adalah untuk mendapatkan angka absolut (angka yg selalu positif) karena bisa saja hasil dari pengurangan tersebut adalah minus, jika $tglAwal lebih besar daripada $tglAkhir. Lalu kemudian disimpan kedalam variabel $jeda.

return floor($jeda/(60*60*24));
Fungsi floor() pada baris diatas adalah untuk membulatkan kebawah dari hasil perhitungan $jeda/(60*60*24). Maksud perhitungan disamping adalah membagi nilai variabel $jeda dengan (60*60*24) dimana 60 adalah jumlah detik dalam 1 menit, 60 adalah jumah menit dalam 1 jam, 24 adalah jumlah jam dalam 1 hari. Karena nilai dari $jeda adalah dalam satuan detik.

Jika anda ingin menyesuaikan fungsi tersebut untuk menghitung jumlah minggu, bulan, tahun, tinggal anda sesuaikan (60*60*24) menjadi (60*60*24*7) untuk minggu,  (60*60*24*30) untuk bulan.

Sekian tutorial PHP sederhana untuk menghitung jumlah hari antara 2 tanggal. Semoga bermanfaat.

No comments :

Post a Comment

Install dan konfigurasi compiz untuk xfce4 di ubuntu/xubuntu

No comments
XFCE4 adalah salah satu dari sekian banyak desktop environtment untuk sistem operasi linux. Keunggulan dari desktop environtment ini adalah dapat di-kustomisasi secara mudah dan cukup ringan jika dibandingkan dengan desktop envrontment lain yang terkenal seperti gnome dan kde.

Xfce sendiri memiliki window manager dan desktop compositing bawaan yaitu xfwm, dimana seringkali menyebabkan pengguna xfce cepat bosan karena fiturnya yang itu-itu saja.Alangkah baiknya jika xfwm bawaan xfce digantikan dengan compiz yang memiliki berbagai macam fitur dan kemampuan yang menarik.

compiz

Nah, pada posting kali ini saya akan membahas tentang cara instalasi dan konfigurasi compiz untuk menggantikan xfwm di xfce. Sebelum beralih ke compiz, pastikan terlebih dahulu bahwa hardware anda, terutama hardware grafis, mampu untuk menjalankan compiz. Saya rasa hardware-hardware saat ini tidak ada masalah akan hal itu.

Instalasi Compiz dan kebutuhannya


Pastikan pc anda sudah terinstall ubuntu dengan desktop environtment xfce dan dapat berjalan lacar tanpa masalah.

Langkah pertama yaitu install compiz, compiz-plugin, ccsm dan metacity:

[code]sudo apt-get install compiz compiz-plugins compizconfig-settings-manager metacity[/code]

setelah instalasi selesai, kita perlu mengaktifkan beberapa plugin compiz agar compiz dapat berjalan dengan benar. Buka ccsm (compiz config settings manager) melalui launcher atau melalui terminal dengan perintah "ccsm" sebagai user biasa(bukan root).

Klik "OK" jika muncul kotak notifikasi.

compiz2

Lalu aktifkan (tandai centang disamping) plugin-plugin berikut :

  • Composite

  • Gnome Compatibility

  • OpenGL

  • Window Decoration

  • Move Window

  • Resize Window

  • Place Windows


Silahkan anda aktifkan plugin-plugin lainnya yang anda sukai misalnya desktop cube atau animation. Tapi jangan mengaktifkan "Unity plugin".

Setelah selesai, jalankan perintah berikut untuk mencoba compiz :

[code]compiz --replace ccp[/code]

Jika tidak ada masalah atau error, maka desktop anda akan tampil sebagaimana mestinya. xfce anda berjalan menggunakan compiz, bisa anda coba enable-disable plugin lain yg ada di compiz config settings manager untuk melihat hasilnya.

Saat ini anda menggunakan compiz, akan tetapi setelah restart atau jendela terminal yg menjalankan compis di close, xfce akan kembali menggunakan xfwm. Untuk mengubahnya, buka setting manager melalui launcher, Session and Startup, pada tab "Application autostart", klik tombol "Add", lalu tambahkan perintah berikut pada kolom command :

[code]compiz --replace[/code]

Kemudian restart pc anda.

Jika suatu saat anda tidak ingin menggunakan compiz, atau ketika tiba-tiba compiz bermasalah, anda bisa kembali menggunakan xfwm dengan men-disable entry compiz yang anda buat tadi pada session and startup.

No comments :

Post a Comment

Install and configure compiz in xfce4 ubuntu/xubuntu

No comments
XFCE4 is one of the many desktop environment to linux operating system. The advantages of desktop environment this is can be customized easily and quite mild when compared with another famous environment desktops such as gnome and kde.

Xfce itself has a window manager and compositing desktop default IE xfwm, which often causes the user xfce quickly bored because the feature that it-that's it. It would be nice if the default xfce xfwm replaced by compiz that has a variety of exciting features and capabilities.



I will discuss about how to install and configuring compiz to replace xfwm in xfce. Before switching to compiz, make sure in advance that your hardware, especially graphics hardware, capable to run compiz.

Installing Compiz and its dependency


Make sure your pc already installed ubuntu with xfce desktop environment and can run smoothly without problems.

The first step that is install compiz, compiz-plugins, ccsm and metacity

[code]&lt;code class=&quot;plain plain&quot;&gt;sudo apt-get install compiz compiz-plugins compizconfig-settings-manager metacity&lt;/code&gt;[/code]

After installation is complete, we need to enable some plugin of compiz in order to be able to run correctly. Open ccsm (compiz config settings manager) through the launcher or via the terminal with the command "ccsm" as a normal user (not root).



Click "OK" If the notification box appears.

  • Then turn on (check mark beside) the following plugins:

  • Composite

  • Gnome Compatibility

  • OpenGL

  • Window Decoration

  • Move Window

  • Resize Window

  • Place Windows


Please activate the plugin-other plugins that you like for example a desktop cube or animation. But do not enable the "Unity".

Once done, run the following command to try compiz:

[code]compiz --replace ccp[/code]

 

If there is no problem or error, so your desktop will appear as expected. Xfce you walk using compiz, you can try to enable-disable other plugins imaginable on the compiz config settings manager to see the results.

Currently you are using compiz, but after a restart or a terminal window running yg compis in close, xfce will re-use the xfwm. To change it, go to the settings manager through the launcher, Session and Startup, on the tab "Application autostart", click "Add" button, and add the following commands in the command column:

[code]compiz --replace[/code]

Then restart your pc.

If at any time you do not want to use compiz or compiz suddenly troubled, you can re-use the xfwm by downloading disable compiz entry that you created earlier in the session and startup.

No comments :

Post a Comment

Ubuntu Make, mempermudah developer untuk instalasi Android studio dan Android SDK

No comments
Ubuntu Make (a.k.a Ubuntu Developer Tools Center), adalah tool command line yang dapat digunakan untuk mendownload sekaligus menginstall versi terbaru Android Studio dan Android SDK beserta seluruh dependensinya.
ubuntu-logoTool ini dibuat oleh canonical (pengembang resmi Ubuntu) dengan tujuan untuk menjadikan developer aplikasi merasa nyaman dalam pengembangan aplikasi di Ubuntu. Seperti yang ditulis oleh Didier Roche, engineer canonical di blognya "Ubuntu loves developers and we are going to showcase it by making Ubuntu the best available developer platform".

Untuk saat ini, pihak canonical masih fokus pada para developer android.

Install Android Studio melalui Ubuntu Makeandroid-studio-update


Versi ubuntu yang mendukung Ubuntu Make adalah versi 14.04(trusty) keatas. Dan khusus untuk versi 14.04, harus menambahkan PPA terlebih dahulu:

[code] $ sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
$ sudo apt-get update[/code]

PPA diatas tidak perlu anda gunakan jika anda memiliki versi ubuntu 14.10(utopic) keatas.

Lalu install ubuntu make dengan perintah :

[code] $ sudo apt-get install ubuntu-make[/code]

Setelah selesai instalasi ubuntu make, jalankan perintah berikut untuk menginstall anroid studio :

[code] $ umake android[/code]

Kemudian tentukan path instalasi dan setujui lisensi google yg tampil. Lalu ubuntu make akan mendownload dan menginstall seluruh dependency yang dibutuhkan oleh android studio.android-studio

No comments :

Post a Comment

Belajar Jquery : Fungsi fadeIn, fadeOut, fadeTo jquery untuk transisi elemen

No comments
Pada artikel kali ini kita akan membahas tentang efek fadeIn, fadeOut dan fadeTo pada jquery. Fungsi efek ini biasanya digunakan untuk transisi elemen pada web, baik muncul maupun lenyap secara berkala(memudar).

Seperti artikel tentang animate sebelumnya, kita menggunakan file contoh yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.
Bagi yang belum tahu cara dasar menggunakan jquery, monggo simak link diatas. ;)

Ok, cekidot, langsung to de poin.
Fungsi efek fadeIn dan fadeOut mempunyai struktur yang sama yaitu:

[code lang="javascript"]$(elemen).fadeOut(durasi);[/code]

dimana elemen adalah elemen yang dipanggil, sedangkan durasi adalah waktu yang diperlukan bagi elemen untuk menghilang(fadeOut) atau tampil(fadeIn) dalam milidetik.

Untuk langsung mencobanya, silahkan edit file html yang tadi saya bahas. Ubah script html-nya jadi:

[code lang="javascript"]$('#kotak').fadeOut(1000);[/code]

Simpan dan refresh untuk lihat hasilnya, kalau tidak ada masalah, maka seharusnya #kotak secara bertahap memudar hingga menghilang. Sekarang coba tambahkan .fadeIn(1000) setelah fungsi fadeOut, hingga menjadi:

[code lang="javascript"]$('#kotak').fadeOut(1000).fadeIn(1000);[/code]

Dan lihat hasilnya. :)
Tidak ada masalah? kalau tidak terjadi apa-apa, cek disini solusinya. ;)

Ok, sekarang kita lanjut ke fungsi fadeTo.
Agak berbeda dari kedua fungsi sebelumnya, fungsi fadeTo mempunyai 2 properties yaitu durasi dan opacity. Sehingga bentuknya kayak gini:

[code lang="javascript"]$(elemen).fadeTo(durasi,opacity);[/code]

Contoh terapan:

[code lang="javascript"]$('#kotak').fadeTo(1000 , 0.5);[/code]

Nah, nilai dari opacity adalah antara 0 sampai 1, dimana semakin kearah 0, objek semakin menghilang, semakin kearah 1 objek semakin jelas (0=full transparan, 1=tidak transparan).

Screenshot from 2015-04-22 14:25:04

Misalnya dalam contoh diatas, opacity bernilai 0,5 yang artinya object setengah menghilang setengah nampak(transparan). Untuk lebih jelasnya, coba terapkan ke file html contoh kita tadi. ;)
Sekian artikel tentang fungsi fadeIn, fadeOut, dan fadeTo jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :) dan jangan lupa +1 ;)

P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;)

No comments :

Post a Comment

Belajar jquery : Fungsi animate jquery untuk menganimasikan elemen web

No comments
Kali ini kita akan membahas tentang fungsi animate di jquery. Fungsi ini berguna untuk membuat animasi pada elemen web.

Untuk penjelasan dasar tentang cara menggunakan jquery, bisa anda baca di artikel Tutorial dasar menggunakan jquery untuk mempercantik halamanweb

Dalam contoh ini kita menggunakan file yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.

Struktur dasar fungsi animate adalah:
.animate(property css dalam kurung kurawal,durasi waktu dalam milidetik);

Misalnya:


[code lang="javascript"]$('#kotak').animate({'margin-left':'100px'},1000);[/code]


bisa juga dibaca:
elemen yang mempunyai id=kotak.
dianimasikan dari kondisi awal “margin-left:0px”, menjadi “margin-left:100px”.
dalam durasi 1 detik(1000milidetik).

Keterangan:kondisi “margin-left” awal elemen adalah 0px karena tidak diatur css-nya(default).

Sekarang kita coba:

[code lang="javascript"]$('#kotak').animate({ 'margin-left':'100px' , 'height':'300px' },500);[/code]


bisa juga kita baca:
elemen yang mempunyai id=kotak.
dianimasikan dari kondisi awal “margin-left:0px” dan “height:50px”, menjadi “margin-left:100px” dan “height:300px”.
dalam durasi setengah detik(500ms).

bingung kenapa kondisi awal “height:50px”? sudah ane bilang kan, kalau kita menggunakan contoh file yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web. :D

Kita bisa menambahkan beberapa property css sekaligus dalam satu animasi dengan dipisahkan koma.

Untuk menambahkan animasi, kita hanya perlu menambahkan fungsi animate setelahnya, dipisahkan dengan titik. Misalnya:


[code lang="javascript"]$('#kotak').animate({ 'margin-left':'100px'},1000).animate({ 'margin-top':'100px'},1000).animate({'font-size':'20px'},1000);[/code]


Simpan dan coba hasilnya. :)
Sekian artikel tentang fungsi animate jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :) dan jangan lupa +1 ;)

P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;)

No comments :

Post a Comment

Tutorial dasar menggunakan jquery untuk mempercantik halaman web

No comments
Jquery adalah library javascript yang sangat berguna di dunia web programming. Mulai dari meng-animasikan content web, hingga melakukan ajax(apa itu ajax? klik disini.), dan masih banyak fitur-fitur lainnya.Ok, langsung saja ke topik utama. Sebelum kita bisa menggunakan jquery, pertama-tama kita harus punya file javascript jquery terlebih dahulu, bisa di download disini. Kemudian taruh file tersebut di sebuah folder. Misalnya saya taruh di folder berikut:




jquery1

Kemudian buat file html(nama terserah anda)

jq3


Edit file html tersebut dengan open with pake notepad++(sangat disarankan, bisa didownload disini:download notepad++) atau editor favorit agan, ketikkan script berikut(variasi terserah agan :D)


[code lang="html"]
<title>Latihan jquery</title>
<script src="&quot;jquery-1.7.2.min.js&quot;" lang="&quot;javascript&quot;"></script>
<style>
#kotak{
font-family:arial;
font-size:14px;
width:200px;
height:50px;
background:#f00;
padding:10px;
color:#fff;
}
</style>
<script lang="&quot;javascript&quot;">
$(document).ready(function(){
//script jquery disini
});
</script>


<div id="&quot;kotak&quot;">
belajar jquery di <br>http://net-crawler.blogspot.com</div>

[/code]

Simpan, lalu buka file html tadi melalui browser(biasanya langsung double-clik).

Hasilnya kurang lebih seperti ini:

jq4
pertama-tama kita panggil file jquery menggunakan tag:

 


[code lang="html"]<script src="jquery-1.7.2.min.js" lang="javascript"></script>[/code]


 



attribut src menunjukkan letak file jquery relative terhadap file html.

Script jquery ada diantara:

$(document).ready(function(){
dan
});
Script diatas adalah constructor jquery, yg maksudnya, script yang ada didalam kurung kurawal {} dieksekusi setelah halaman(document) sudah dimuat(ready).

Sekarang coba agan tambahkan script berikut diantara kurung kurawal tadi.



[code lang="javascript"]$('#kotak').animate({'margin-left':'400px'},1000);[/code]



Simpan dan refresh browser. Apa yang terjadi?
Jika tidak ada kesalahan, seharusnya kotak tadi bergeser kekanan sepanjang 400 pixel.


Apa maksudnya? script tadi adalah fungsi “.animate” jquery yang berfungsi menganimasikan object/elemen yang dipanggil.

dimana:


$(elemen yang dipanggil).fungsi jquery;


Dalam contoh diatas, kita menggunakan tanda # yang diikuti tulisan “kotak”.


lambang # adalah id, jadi maksudnya adalah memanggil elemen yang mempunyai id=kotak, yaitu div yang berisi “belajar jquery bla bla bla” tadi. jika kita ingin memanggil div tersebut menggunakan class(misalnya div tadi bentuknya
) maka kita memanggilnya dengan titik “.abc”.


Setelah elemen terpanggil, kita tinggal menambahkan fungsi-fungsi jquery yang akan kita bahas secara terpisah. untuk setiap fungsi, dipisahkan dengan tanda titik. Misalnya:




[code lang="javascript"]$('#kotak').animate({'margin-left':'400px'},1000).animate({'margin-top':'200px'},1000);[/code]

coba simpan lalu refresh browser dan amati yang terjadi.
Penjelasan tentang fungsi animate, bisa agan baca disini.


Sekian adalah dasar untuk menggunakan jquery pada halaman web. Untuk penjelasan tentang fungsi-fungsi yang ada di jquery, bisa anda lihat di sub menu Jquery yang ada di menu programming.


Resource yang digunakan disini:



Selamat belajar. :) dan jangan lupa +1 ;)


No comments :

Post a Comment

Desain website, animasi, banner iklan berbasis html5 dengan Google Web Designer untuk linux dan windows

No comments
Google web designer adalah program untuk membuat website dan iklan interaktif berbasis html 5. Dimana kiita bisa membuat konten dengan drawing tools, text, 3D Object, animasi seperti flash tapi berbasis html 5 dan hasilnya berupa html, css dan javascript. Terdapat juga tools untuk transformasi 3D, timeline dan tweening untuk memudahkan dalam meng-animasi.
Jadi kita bisa membuat slide show, iklan, banner, google Ad, tanpa menggunakan flash dan hasilnya dapat langsung kita cantumkan pada web/blog.

google web designer

Aplikasi ini hadir dalam bentuk repositori, dimana dalam repositori tersebut juga memuat produk-produk google lainnya untuk linux. Untuk saat ini(saat artikel ini dibuat), Google Web Designer sudah mencapai versi release beta 1.2.1. Sudah saya coba di ubuntu 14.04 dan berhasil. Sayangnya, untuk dukungan browser masih lebih mengarah ke browser-browser berbasis webkit seperti google chrome.

Install Google web designer


Silahkan download installer langsung dari website google web designer disini.

Sesuaikan download dengan os yang anda gunakan. Kemudian, setelah selesai di download. Jalankan installer seperti menginstall aplikasi pada umumnya.

Untuk Linux


Untuk linux, menginstall google web designer secara otomatis juga menambahkan repositori untuk google. Jadi anda juga akan mendapatkan update-update terbaru dari produk google lainnya.

Anda dapat mendownload installer baik .deb maupun .rpm dari website google web designer. Atau install dengan 3 baris perintah terminal berikut :

[code lang="shell"]
wget -O google-webdesigner_i386.deb https://dl.google.com/linux/direct/google-webdesigner_current_i386.deb
sudo dpkg -i google-webdesigner_i386.deb
rm google-webdesigner_i386.deb&nbsp; [/code]

Jika anda menggunakan arsitektur linux 64bit, maka ganti "i386" dengan "amd64".

Catatan untuk pengguna linux


Terkadang google web designer bermasalah jika diinstall di sistem yang non-english. Untuk mengatasinya, hapus folder google web designer di direktori home  ~/.local/share :

[code]rm -r ~/.local/share/google-web-designer[/code]

dan jalankan google web designer dengan perintah berikut:

[code]LANGUAGE=en_US google-webdesigner[/code]

No comments :

Post a Comment

Install Sublime Text 3 di Ubuntu Menggunakan PPA

No comments
Sublime Text adalah text editor populer yang dikhususkan untuk programming dan mengedit source code. Mendukung banyak bahasa pemrograman mulai dari scripting language (PHP, Javascript, HTML, dsb) hingga programming language(C, C#, Java, VB. dsb).

sublime-text-3Awalnya, sublime text versi 3 hanya untuk user yang sudah terdaftar dengan harga lisensi $70. Tapi, sublime text 3 sekarang bisa digunakan untuk semua orang dan seperti versi pendahulunya yaitu sublime text 2, sublime text 3 dapat digunakan tanpa lisensi dengan batas waktu yang tidak ditentukan(unlimited).

Kelebihan Sublime Text dibanding text editor biasa adalah:

  • Multiple Selection
    Dapat melakukan banyak perubahan sekaligus, dengan seleksi beberapa bagian teks dan merubah secara bersamaan.

  • Command Pallete
    Dapat menyimpan beberapa perintah yang sering digunakan seperti pengurutan, merubah syntax, merubah indent, hanya dengan Ctrl+Shift+P.

  • Distraction Free Mode
    Menampilkan editor secara fullscreen sehingga dapat meningkatkan fokus pada saat koding. Tidak terganggu oleh elemen-elemen tidak penting yang tidak harus ditampilkan di layar.

  • Plugin

  • Customizable
    Dapat dikustomisasi sesuai keinginan.

  • Dan masih banyak lagi...


Agar lebih memahami kelebihan-kelebihan sublime text, silahkan menginstall dan mencobanya sendiri.

Install Sublime text 3 di ubuntu dengan PPA.


Bagi pengguna ubuntu, untuk mempermudah instalasi, kita gunakan ppa yang sudah disediakan oleh webupd8.com.
Jika sebelumnya anda sudah menginstall sublime text 2, maka akan diupgrade ke sublime text 3. Pastikan anda sedang tidak menjalankan sublime text.

Buka terminal dan jalankan perintah :

[code lang="shell"]
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installe[/code]


Untuk menginstall di selain ubuntu, silahkan download sublime text 3 disini dan menginstall secara manual.


Tips

untuk menonaktifkan notifikasi versi, tambahkan baris berikut:


[code]"update_check": false[/code]


pada User Preferences(Preferences > Settings - User)

No comments :

Post a Comment

Install Sublime Text 3 di Ubuntu using PPA

No comments
Sublime Text is a popular text editor which is devoted to programming and editing source code. It supports many programming languages ranging from scripting language (PHP, Javascript, HTML, etc) to the programming language (C, C #, Java, VB, etc.).



Initially, the sublime text version 3 only for users who are already registered with the license price of $ 70. But, sublime text 3 can now be used for all people and like its predecessor version that is sublime text 2, sublime text 3 can be used without a license with an unspecified time limit (unlimited).

The advantages of Sublime Text over any ordinary text editor are:

  • Multiple Selection

  • Can do a lot of changes all at once, with a selection of some of the text and change simultaneously.

  • Command The Pallete

  • Can save some frequently used commands such as sorting, changing the syntax, indent, change only with Ctrl + Shift + P.

  • Distraction Free Mode

  • Displays the editor in fullscreen so it can increase the focus at the time of coding. Not bothered by the elements not essential should not be shown in the display.

  • Plugin

  • Customizable

  • Can be customized as you wish.

  • And many more ...


To better understand these advantages sublime text, please install and try it yourself.

Install the Sublime text 3 on ubuntu with PPA.


For ubuntu users, to facilitate installation, we use technology that already provided by webupd8.com.
If you've installed sublime text 2, it will be upgraded to sublime text 3. Make sure you're not running the sublime text.

Open a terminal and run the command:


[code]sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installe[/code]


To install on ubuntu, the aside please download sublime text 3 here and install it manually.

Tips

to disable version notification, add the following line:


[code]"update_check": false[/code]


inUser Preferences(Preferences > Settings – User)

No comments :

Post a Comment

Install Atom text editor di ubuntu via PPA

1 comment
Atom adalah text editor yang mirip dengan sublime text, tapi bersifat open source. Tersedia untuk arsitektur 32bit dan 64bit. Dikembangkan oleh GitHub sehingga sudah terintegrasi Git(Git Integration) secara built-in. Juga terdapat fitur Node.js integration.

atom-text-editor

Atom mempunyai julukan "hackable text editor for the 21st century", karena bersifat open source dan memang sangat mudah untuk di kustomisasi. Menggunakan tampilan berbasis web, sehingga dapat dengan mudah diubah-ubah tampilannya menggunakan css, dan menambahkan fitur dengan HTML dan javascript.

1 comment :

Post a Comment