File Online

Menampilkan Postingan Source Code di Blogspot dan Wordpress

1. Wordpress
   Dari pihak wordpress, sangatlah mudah bagi kita untuk menempelkan suatu source code. Wordpress telah menyediakan tag khusus untuk menampilkan suatu source code Kita hanya tinggal menambah sedikit tag khusus pada "Edit HTML"-nya pada saat menulis postingan, yaitu :
   

   [source code language="java"]
    
   /*masukkan source code di sini*/
    
   [/source code]
   

   
   Mudah bukan ?? Untuk mengganti format bahasa nya, kita tinggal merubah di antara tanda kutip setelah language= dengan bahasa yang diinginkan. Bahasa yang sudah di-support oleh Wordpress adalah :
   
   • actionscript3bash
   • coldfusion
   • cpp
   • csharp
   • css
   • delphi
   • erlang
   • fsharp
   • diff
   • groovy
   • javascript
   • java
   • javafx
   • matlab (keywords only)
   • objc
   • perl
   • php
   • text
   • powershell
   • python
   • ruby
   • scala
   • sql
   • vb
   • xml
2. Blogspot
   Nah, untuk yang satu ini, ternyata dari pihak Blogspot tidak mendukung pemasangan source code pada postingan. Dimana kita tidak akan menemukan suatu tag khusus sebagai pendukung penulisan bahasa pemrograman yang baik dan benar seperti yang ada pada Wordpress (sempat saya berfikir untuk hijrah dari Blogspot ke Wordpress gara2 masalah ini). Tapi untung saja, saya menemukan cara unik yang menurut saya sangat briliant dan benar-benar akan membantu saya untuk kedepannya dalam membuat postingan yang bermutu :D (Amin, hehehe). Jurus ampuh itu adalah SyntaxHighlighter. Syntax Highlighter adalah suatu java script yang dibuat adalah Alex Gorbatchev dan berupa open source, sehingga kita dapat mendowload source code-nya dan memodifikasi sesuai keinginan kita. Oke, langsung saja kita akan memulai langkah-langkah penggunaannya :
   
   • Karena kita akan memodifikasi suatu template di Blogspot, maka alangkah baiknya kita mem-backup dulu Layout sebelumnya. Caranya, buka Dashboard-Design-Edit HTML-Download Full Template. Kemudian simpan file download di komputer.
   • Setelah itu, masih dalam Dashboard-Design-Edit HTML, tekan "Control-F" untuk mencari tag penutup </head> Kemudian copy-paste source code di bawah ini, sebelum/diatas tag tersebut :

   • Simpan perubahan template. Jika tidak ada error, maka integrasi template telah berhasil
   • Saat ingin menempelkan suatu source code, kita hanya tinggal mengedit nya di Edit HTML pada Editor, dengan menyisipkannya diantara tag berikut :
     

     /*masukkan source code di sini*/
     

   • Untuk format bahasanya, ada beberapa bahasa yang didukung SyntaxHighlighter:
     
     • C++ (cpp, c, c++)
     •  C# (c#, c-sharp, csharp)
     • CSS (css)
     • Delphi (delphi, pascal)
     • Java (java)
     • Java Script (js, jscript, javascript)
     • PHP (php)
     • Python (py, python)
     • Ruby (rb, ruby, rails, ror)
     • Sql (sql)
     • VB (vb, vb.net)
     • XML/HTML (xml, html, xhtml, xslt).

Available link for download

Membuat Website Wordpress di Freehostia dengan domain co cc

Mengapa menggunakan Hosting Frehostia.com ? Selain fitur yang diberikan sangat banyak, di freehostia juga memberikan layanan Gratis alias tak berbayar. ini bisa anda gunakan sebagai ajang latihan untuk membuat sebuah website yang bisa di tampilkan di Seluruh dunia alias bisa di onlinekan. Jika menggunakan Hosting Localhost kita hanya belajar tentang membuat website secara local (hanya bisa dilihat di komputer kita saja) tetapi jika menggunakan hosting luar kita bisa melihatnya dari manapun (dari warnet, kantor, caffe, dll). Untuk domain (nama panggilan website kita) akan menggunakan layanan domain gratis dengan Co.CC. jadi nanti website anda akan diberinama yang berakhiran Co.Cc. Kenapa tidak .Com, .Net, .Us, .info, .Org atau yang lainnya ? hmmm... kalo itu adalah domain yang berbayar , maksudnya anda akan di kenakan biaya setiap 1 tahun sekali. Jadi sebelum anda memiliki domain berbayar dan hosting berbayar, ngga ada salahnya anda berlatih dengan menggunakan domain dan hosting gratis. Tapi jangan salah ! walau dengan hosting dan domain Gratis anda bisa memiliki website untuk keperluan usaha anda dan bisa juga menghasilkan Uang dari Internet walau hanya dengan GRATISAN !. Trust It, It work ! :P

Oke kita lanjutkan tutorialnya... untuk awal Membuat Website Wordpress di Freehostia dengan domain co.cc adalah sebagai berikut :

Buatlah domain Co.Cc terlebih dahulu untuk nama domain anda. Jika anda belum memiliki username atau Account di Co.Cc anda bisa daftar dan mendapatkan account melalui Blog ini.

Silahkan tuliskan nama domain yang bagus dan sesuai dengan keinginan anda di form yang ada di atas. Selanjutnya ikuti langkahnya. Semisal anda akan mendaftar dengan nama www.donaalfian.co.cc dan setelah di cek ternyata ada atau avaliable maka lanjutkan proses selanjutnya.

Ada Dua Pilihan mendaftar jika anda sudah ada account di Co.cc Tinggal Login saja. tapi kalo belum lanjutkan dengan memilih menu Creat an Account Now

Selanjutnya isi data diri anda. dan lanjutkan kelangkah selanjutnya.

Ulangi password anda untuk memastikan pendaftaran di Co.Cc

Lanjutan Sign In / Login ke dalam Account Anda untuk melanjutkan pendaftaran kepemilikan nama domain di Co.Cc.

Selamat Nama domain anda telah jadi dan terdaftar di Co.Cc. dan lanjutkan dengan menSetup domain anda untuk di hubungkan dengan Hosting di Freehostia.

Pilih menu Set Up dan ikuti langkah selanjutnya.

Pilih Layanan Name Server untuk mengkoneksikan antara domain dan hosting dari Co.cc ke Freehostia.com. Isikan Name Server 1 dengan dns1.freehostia.com dan Name Server 2 dengan dns2.freehostia.com Selanjutnya pilih Button Set Up.

Selesai ! setting domain anda telah selesai dan akan dilanjutkan setting webhosting di Freehostia.

Oke untuk hosting di freehostia anda harus mendaftar dulu di sana. Langkah-langkahnya sebagai berikut :
Silahkan menuju halaman website freehostia di http://www.freehostia.com pilih Button Free Hosting Sign-Up untuk mendaftar.

Isikan data anda di Form yang telah di sediakan dengan benar. Perlu di ingat karena kita akan menggunakan CMS Wordpress maka pada pilihan Form Pre-Installed Scripts di isi dengan Wordpress. dan di Form Add a Domain Name to Hosts pilih Use my exiting domain dan isi dengan domain co.cc anda tadi. dan untuk isian yang lain silahkan isi dengan benar. Dilanjutkan dengan mengisi Verifikasi Code dan Continue.

Continue >> dan View Your Order Detail.

Selesai ! Domain dan Hosting anda telah tersetting dengan benar sekarang. Anda tinggal menunggu Penampakan website anda kurang lebih 1x24 jam atau paling lama 2x24 Jam untuk pengaktifan. Anda akan mendapatkan informasi dari Freehostia tentang Account Hosting dan Account Login ke Website Wordpress baru anda melalui email. Simpan baik baik atau jika perlu password di ganti agar anda mudah mengingatnya. dan anda bisa mulai mengisi Website anda dengan berita berita sesuai dengan keinginan anda. Jika anda memang sudah berlatih cara mengisi berita, membuat category di dalam tutorial Cara membuat Website di Localhost - Web Server Local pada saat yang lalu. anda tentu sudah tidak kesulitan. untuk memanggil Website baru anda anda tinggal menulis di browser anda " http://namawebsiteanda.co.cc ". Pada sesi selanjutnya saya akan membahas tentang Themes Wordpress, Plugins Wordpress, Setting database di Website dan Managemen file di Hosting menggunakan FireFTP (Plugin FTP di FireFox).

Mudah bukan, :D jika anda masih belum faham silahkan ajukan pertanyaan di Form Comment di bawah tutorial ini. dengan senang hati saya akan memberikan informasi seputar pertanyaan anda.Semoga bermanfaat. Amin.

Apakah Informasi ini membamtu anda ? Jika Ya, silahkan tulisakan masukan, Pertanyaan, Pendapat anda seputar Membuat Website Wordpress di Freehostia dengan domain co.cc di form yang telahkami sediakan. Terima kasih.

Available link for download

JQuery Form Validation Basics For Blogger Wordpress and All Other Website Platforms

Jquery validate plugin help us to validate user inputs on the client side using class name and attributes. We can use this plugin with Blogger, Wordpress and all other web platforms.

The Jquery validation plugin has a set of predefined rules to validate form fields. Also the plugin allows us to define our own rules to validate specific input fields. In this post I used the predefined rules available in the validate plugin which is enough for a basic contact or registration form.

Demo Online
Download Source

First check out the most using class names and attributes to validate form fields.
1. required : Makes the form field to always required.

<input type="text" id="username" class="required"/>

2. minlength : Makes the form field to require a given minimum length.

<input type="text" id="username" class="required" minlength="6"/>

3. maxlength : Makes the form field to limit a given maximum length.

<input type="text" id="username" class="required" maxlength="6"/>

4. min : Makes the form field to require a minimum value.

<input type="text" id="username" class="required" min="6"/>

5. max : Makes the form field to limit a maximum value.

<input type="text" id="username" class="required" max="10"/>

6. email : Makes the form field to require a valid email.

<input type="text" id="myemail" class="required email" />

7. digits : Makes the form field to limit integer number only.

<input type="text" id="mobile" class="required digits" />

8. equalTo : Makes the form field to limit the value as specified fields value.

<input type="password" id="pword" class="required" />

<input type="password" id="retypepword" class="required" equalTo="#pword" />

To Work this validation you have to include two js files in your webpage. Link it either by uploading to your own server or using the provided link.

1. Jquery - Download

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Jquery Validater Plugin - Download

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>

Here is an example using Jquery Validate plugin.

1. First Create a HTML form with required fields.

<form id="regform" method="get" action="">

<div class="wrap"> 
<label id="label" for="username">Username</label>
<input type="text" name="username" id="username" class="required" minlength="6"/>
</div>

<div class="wrap"> 
<label id="label" for="pass">Password</label>
<input type="password" name="pass" id="pass" class="required" minlength="6"/>
</div>

<div class="wrap"> 
<label id="label" for="rpass">Retype Password</label>
<input type="password" name="rpass" id="rpass" class="required" equalTo="#pass"/>
</div>

<div class="wrap"> 
<label id="label" for="useremail">Email</label>
<input type="text" name="useremail" id="useremail" class="required email"/>
</div>

<div class="wrap"> 
<label id="label" for="mobile">Mobile</label>
<input type="text" name="mobile" id="mobile" class="required digits" minlength="10" maxlength="10"/>
</div>

<div class="wrap"> 
<label id="label" for="mobile"> </label>
<input type="submit" value="Register"/>
</div>

</form>

2. Add Some CSS

#regform{
margin:0 auto;
width:600px;
padding:14px;
}

input{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 5px 10px 10px;
}
#label {
float: left;
width: 100px;
padding: 0 1em;
text-align: right;
}
div{
margin-bottom: .5em;
padding: 0;
display: block;
}

3. Finally Link the script and call the validate method on form id

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script>
 $(function(){
//regform is the form id
 $("#regform").validate();
 });
</script>

Available link for download