Tampilkan postingan dengan label Web Design. Tampilkan semua postingan
Tampilkan postingan dengan label Web Design. Tampilkan semua postingan

Minggu, Juni 26

15 Cara Menulis Self-documenting JavaScript

Sumur : sitepoint

Apakah menyenangkan menemukan dokumentasi diluar code dan tidak bermanfaat?

Ini adalah kesalahan yang rawan : Anda mengubah beberapa code, dan lupa untuk menghapus atau memperbarui dokumentasi. Memang dokumentasi yang buruk tidak akan merusak code, tapi bayangkan apa yang akan terjadi saat debugging. Anda membaca dokumentasi. Dokumentasi bilang A, tapi code bilang B. Bisa-bisa waktu kita terbuang hanya karena kepo kok akan hal ini, dan dalam kasus terburuk, bahkan bisa menyesatkan!

Tapi menulis code tanpa dokumentasi bukan merupakan pilihan. Dari 15 tahun pengalaman dalam dunia programing sang penulis yg saya kutip ini, ia belum pernah menemukan dokumentasi yang tidak berguna dalam sebuah code.

Namun, ada cara untuk mengurangi ketergantungan akan dokumentasi. Kita dapat menggunakan teknik coding tertentu untuk memperjelas code, gampangnya sih kita bisa menggunakan bahasa pemrogaman untuk keuntungan kita. 

Hal ini tidak hanya membantu membuat code kita lebih mudah untuk dipahami, tetapi dapat juga membantu memperbaiki desain program secara keseluruhan! 

Teknik conding jenis ini sering disebut juga dengan self documenting. Kita bisa menggunakan teknik ini dalam menulis code. Contoh yang diberikan di sini dalam JavaScript, kita dapat menerapkan sebagian besar teknik ini dalam bahasa lain juga. 

Overview of Techniques 

Beberapa programmer memasukkan dokumentasi sebagai self documenting dalam sebuah code. Pada artikel ini, kita hanya akan fokus pada code. Dokumentasi memang penting, tapi itu topik yang besar dan akan dibahas secara terpisah. 

Kita dapat membagi teknik ini dalam tiga kategori:
  • structural, di mana struktur code atau directories digunakan untuk memperjelas tujuan 
  • naming related, sejenis penamaan function atau variable  
  • syntax related, di mana kita menggunakan (atau menghindari penggunaan) fitur bahasa pemrogaman untuk memperjelas code.  
Kelihatannya bukan hal yang sulit ya. Tantangannya adalah menentukan kapan dan teknik mana yang harus digunakan. Mari kita lihat beberapa contoh praktis seperti apa penggunaanya. 

 

Structural

Pertama, mari kita lihat kategori struktural. perubahan struktural mengacu pada perubahan code untuk memperjalas kegunaannya.

Masukkan code dalam function 

Ini sama dengan "extract function" refactoring - yang berarti bahwa kita mengambil code yang ada dan memindahkannya ke function baru: kita "extract" code keluar ke fungsi yang baru. 

Sebagai contoh, bayangkan ouput dari line berikut: 
var width = (value - 0.5) * 16;
Tidak begitu jelas; memberi dokumentasi bisa sangat membantu. Atau, kita bisa membuat function dan menjadikannya sebagai dokumentasi:
var width = emToPixels(value);

function emToPixels(ems) {
    return (ems - 0.5) * 16;
}
Yang berubah adalah pemindahan perhitungan kedalam function. Nama function adalah deskripsi kegunaannya, jadi code tidak membutuhkan lagi komentar. Manfaat lainnya adalah, kita sekarang memiliki helper function yang bisa digunakan ditempat lain, jadi metode ini dapat membantu mengurangi duplikasi code.

Mengganti conditional expression dengan function

If dengan banyak operan bisa sulit untuk dipahami tanpa adanya dokumentasi. Kita bisa menggunakan metode diatas untuk memperjelasnya:
if(!el.offsetWidth || !el.offsetHeight) {
}
Apa tujuan dari kondisi di atas?
function isVisible(el) {
    return el.offsetWidth && el.offsetHeight;
}

if(!isVisible(el)) {
}
Sekali lagi, kita pindahkan code ke dalam function dan code ini jauh lebih mudah untuk dipahami.

Mengganti expression dengan variable

Mengganti sesuatu dengan variable mirip-mirip sih seperti memindahkan code dalam bentuk function, tapi dari pada function, kita hanya menggunakan variable. 

Mari kita lihat contoh dengan if lagi:
if(!el.offsetWidth || !el.offsetHeight) {
}
Alih-alih penggunaan function, kita juga bisa menjelaskannya dengan membentuk variabel:
var isVisible = el.offsetWidth && el.offsetHeight;
if(!isVisible) {
}
Ini bisa menjadi pilihan yang lebih baik dari pada penggunaan function - ambil contoh, ketika kita ingin menjelaskan logika yang spesifik untuk algoritma tertentu yang hanya digunakan di satu tempat saja.

Penggunaan umum untuk metode ini adalah perhitungan matematika:
return a * b + (c / d);
Kita bisa memperjelasnya dengan memisahkan perhitungan:
var multiplier = a * b;
var divisor = c / d;
return multiplier + divisor; 
Bayangkan contoh di atas memiliki beberapa algoritma yang mudah dimengerti. Dalam kasus apapun, intinya kita bisa memindahkan complex expressions dalam variable yang bisa mempermudah untuk pemahaman code.

Class dan module interfaces

Interface - adalah, public methods dan properties - dari sebuah class atau module yang bisa bertindak sebagai dokumentasi atas cara penggunaannya. 

Mari kita lihat contoh:
class Box {
    setState(state) {
        this.state = state;
    }

    getState() {
        return this.state;
    }
}
Class ini bisa memiliki beberapa code lain di dalamnya. Sengaja penulis ini memberikan kita contoh sederhana, untuk menggambarkan bagaimana public interface didokumentasikan.

Dapatkah pembaca memberitahu bagaimanakah penggunaan class ini? Mungkin dengan mencobanya..., ehm tetapi itu tidak begitu jelas.

Kedua function memiliki nama yang wajar: apa yang dilakukan adalah jelas dari namanya. Namun, tidak terlalu jelas bagaimana kita harus menggunakannya. Kemungkinan besar kita perlu membaca code yang lain atau dokumentasi class untuk mengetahuinya.

Bagaimana jika kita mengubahnya menjadi seperti ini:
class Box {
    open() {
        this.state = 'open';
    }

    close() {
        this.state = 'closed';
    }

    isOpen() {
        return this.state === 'open';
    }
}
Jauh lebih mudah untuk mengetahui kegunaannya, iya kan?. Perhatikan kita hanya mengubah public interface, representasi internal masih sama dengan properti this.state.

Sekarang kita dapat mengetahui sekilas bagaimana class Box digunakan. Hal ini menunjukkan bahwa meskipun versi pertama memiliki penamaan function yang baik, paket lengkap tetap membingungkan, dan bagaimana, dengan sesuatu yang sederhana seperti ini, sesuatu bangetkan?. Yang sulit adalah kita harus memiliki pandangan yang luas. 

Code grouping

Pengelompokan bagian berbeda dari code dapat juga berperan sebagai dokumentasi.

Misalnya, kita selalu ingin mendeklarasikan variabel sedekat mungki dimana mereka segera akan digunakan, dan mencoba untuk menggunakan kelompok variabel bersama-sama.

Ini dapat digunakan untuk menunjukkan hubungan antara bagian-bagian yang berbeda dari code, sehingga siapa pun yang merubahnya dikemudian hari tidak membutuhkan waktu yang lama untuk mengetahui bagian mana saja yang perlu diubah.

Perhatikan contoh berikut:
var foo = 1;

blah()
xyz();

bar(foo);
baz(1337);
quux(foo);
Sekilas bisa kita lihat berapa kali foo digunakan? Bandingkan dengan ini:
var foo = 1;
bar(foo);
quux(foo);

blah()
xyz();

baz(1337);
Dengan mengelompokkan penggunaan foo bersama-sama, kita dapat dengan mudah melihat bagian mana dari code yang berhubungan dengannya.

Use pure functions

Pure function jauh lebih mudah dimengerti daripada function yang bergantung pada state.

Apa itu pure function? Saat memanggil function dengan parameter yang sama, dan selalu menghasilkan output yang sama, kemungkinan besar bisa disebut "pure" function. Ini berarti function tidak harus memiliki efek atau bergantung pada state - seperti time, object properties, Ajax, dll.

Function ini mudah untuk dipahami, karena nilai-nilai yang memperngaruhi output dipassing secara explisit. Kita tidak perlu utak atik code sekitar untuk mencari tau asalnya bagaimana, atau apa yang mempengaruhi hasil, karena semuanya sudah jelas.

Alasan lainnya function jenis ini dibuat sebagai self-documenting code adalah kita bisa yakin akan hasil outputnya. Tidak peduli apa pun, function ini akan selalu menggembalikan output hanya berdasarkan parameter yang berikan. Hal ini juga tidak akan mempengaruhi eksternal, sehingga kita tidak perlu khawatir akan sesuatu yang tak terduga.

Contoh yang pas dalam hal ini adalah document.write(). Developer JS yang berpengalaman tahu tidak harus menggunakannya, tapi banyak pemula terjebak akan hal ini. Kadang bejalan dengan baik - dilain kesempatan tidak, dalam keadaan tertentu, dapat menghapus bersih seluruh halaman. Berbicara tentang efek samping!.

Untuk gambaran jelas tentang pure function, kunjungi link ini Functional Programming: Pure Functions.

Directory dan file structure

Ketika penamaan file atau directory, ikuti kesepakatan penamaan yang sama dengan yang digunakan dalam project, ikuti standar dari bahasa pemrogaman yang dipilih.

Misalnya, jika kita menambahkan code UI-related cari function serupa dalam proyek. Jika kode UI terkait ditempatkan di src / ui /, kita harus menambahkannya dilokasi yang sama.

Dengan demikian akan mempermudah dalam mencari code dan menunjukkan tujuannya, berdasarkan apa yang kita sudah tahu tentang potongan-potongan lain dari kode dalam proyek. Semua kode UI berada di tempat yang sama, setelah semua, seharusnya UI-related.

 

Naming

Ada sebuah kutipan populer tentang dua hal yang sulit dalam ilmu komputer:
Hanya ada dua hal yang sulit di Ilmu Komputer: Pembatalan cache dan penamaan sesuatu.
 - Phil Karlton -
Jadi mari kita lihat bagaimana menggunakan penamaan untuk membuat code self-documenting.

Rename function

Penamaan function sering tidak terlalu sulit, tetapi ada beberapa aturan sederhana yang bisa kita ikuti:
  • Hindari menggunakan kata-kata yang samar seperti "handle" atau "manage": handleLinks(), manageObjects().
  • Gunakan kata kerja aktif : cutGrass(), sendFile() - function yang aktif melakukan sesuatu.
  • Menunjukkan return value :  getMagicBullet(), readFile(). Ini bukan sesuatu yang dapat selalu kita lakukan, tapi itu membantunya jadi lebih masuk akal.
  • Bahasa dengan strong typing dapat digunakan mengetik tanda untuk membantu menunjukkan return value dengan baik 

 

Rename variable

Dengan variabel, di sini adalah dua aturan praktis yang baik:
  • Menunjukkan satuan: jika kita memiliki parameter numerik, kita dapat menyertakan satuan yang diinginkan. Misalnya, widthPx bukannya width untuk menunjukkan nilai dalam pixel bukan beberapa satuan lainnya.
  • Jangan menggunakan shortcuts: a atau b adalah nama yang tidak pantas, kecuali untuk counter dalam loop. 

 

Follow established naming conventions

Cobalah untuk mengikuti kesepakatan penamaan yang sama dalam code. Misalnya, jika Anda memiliki sebuah objek dari jenis tertentu, sebut saja nama yang sama:
var element = getElement();
Jangan tiba-tiba memutuskan untuk menyebutnya node:
var node = getElement();
Jika kita mengikuti kesepakatan yang sama seperti di tempat lain di codebase, siapa pun yang membaca dapat membuat asumsi aman tentang makna dari sesuatu berdasarkan apa artinya tempat lain.

 

Use meaningful errors

Undefined bukan sebuah object!

Mari coba untuk tidak mengikuti contoh JavaScript, dan mari kita pastikan kesalahan dalam code memiliki pesan yang bermakna di dalamnya.

Apa yang membuat pesan kesalahan bermakna?
  • Itu harus menjelaskan apa masalahnya 
  • Jika mungkin, harus mencakup nilai variabel atau data lain yang menyebabkan kesalahan 
  • Key point: kesalahan harus membantu kita mencari tahu apa yang salah - oleh karenanya bertindak sebagai dokumentasi tentang bagaimana function seharusnya bekerja.  

 

Syntax

Metode terkait syntax untuk code self-documenting bisa berupa sedikit bahasa yang spesifik. Misalnya, Ruby and Perl memungkinkan kita untuk melakukan segala macam trik sintaks aneh, which, in general, harus dihindari.

Mari kita lihat yang terjadi dengan JavaScript.

 

Don’t use syntax tricks

Jangan menggunakan trik aneh, ini bisa membingungkan:
imTricky && doMagic();
Setara dengan code ini, tampak jauh lebih manusiawi:
if(imTricky) {
    doMagic();
}
Selalu gunakan bentuk terahir. Trik syntax tidak akan membantu siapa pun.

 

Use named constants, avoid magic values

Jika kita memiliki value kusus dalam code - seperti angka atau string - pertimbangkan penggunaan constant. Tampak lebih jelas dari pada  sebelumnya, ketika melihat lagi coding setelah satu atau dua bulan lagi, tak akan ada yang mempertanyakan mengapa ada nomor tertentu dalam code.
const MEANING_OF_LIFE = 42;
(Jika tidak menggunakan ES6, bisa juga kita gunakan var sama saja kok.)

 

Avoid boolean flags

Boolean flag dapat membuat kode sulit dipahami. Pertimbangkan hal ini:
myThing.setData({ x: 1 }, true);
Apakah nilainya true ? Kita sama sekali tidak tau, kecuali kita masuk ke dalam setData() dan mencari tahu.

Sebaliknya, kita menambahkan function lain, atau mengubah nama function yang ada:
myThing.mergeData({ x: 1 });
Sekarang kita dapat segera tahu apa yang terjadi.

 

Use language features to your advantage

Kita bahkan dapat menggunakan beberapa fitur dari bahasa pemrogaman yang dipilih untuk mencari tahu maksud di balik beberapa kode.

Sebuah contoh yang tepat di JavaScript adalah metode iterasi array: 
var ids = [];
for(var i = 0; i < things.length; i++) {
  ids.push(things[i].id);
}
Kode di atas mengumpulkan ID ke dalam array. Namun, untuk mengetahui itu, kita perlu membaca keseluruhan dari loop. Bandingkan dengan menggunakan map():
var ids = things.map(function(thing) {
  return thing.id;
});
Dalam hal ini, kita langsung tahu bahwa ini menghasilkan array dari sesuatu, karena itulah tujuan dari map(). Ini bisa menguntungkan terutama jika kita memiliki logika perulangan yang lebih rumit. Berikut detail metod array iteration.

Contoh lain dengan JavaScript adalah key word const. 

Seringkali, kita deklarasi variable yang nilainya seharusnya tidak berubah. Sebuah contoh yang sangat umum adalah ketika load modul dengan CommonJS:
var async = require('async');
Kita bisa membuat maksud tidak pernah berubah ini lebih jelas:
const async = require('async');
Sebagai manfaat tambahan, jika seseorang tidak sengaja merubahnya, kita akan mendapatkan error.

 

Anti-patterns

Dengan semua metode ini, kita bisa melakukan beberapa hal yang menakjubkan. Namun kita tetap harus waspada tentang...

 

Extracting for the sake of having short functions

Beberapa orang menyarankan menggunakan function yang kecil, ketika kita extract semua, itulah yang kita dapat. Namun, ini dapat mempengaruhi bagaimana mudahnya code untuk dipahami.

Sebagai contoh, bayangkan kita debugging beberapa code. Kita melihat dalam function a(). Kemudian, menemukan penggunaan b(), yang kemudian menggunakan c(). Dan seterusnya.

Function singkat memang bagus dan mudah dimengerti, jika kita menggunakan function itu hanya disatu tempat, pertimbangkan untuk menggunakan metode "Mengganti expression dengan variable" sebagai gantinya.

 

Don’t force things

Seperti biasa, tidak ada cara yang benar-benar mutlak untuk melakukan hal ini. Oleh karena itu, jika sepertinya tidak cocok, jangan dipaksakan.

 

Conclusion 

Membuat code kita self documenting salah satu cara untuk meningkatkan pemeliharaan code. Setiap dokumentasi adalah code tambahan yang tidak diinginkan yang harus dipelihara, sehingga meminimalkan dokumentasi adalah sasuatu yang baik.

Namun, code self documenting tidak menggantikan dokumentasi atau komentar. Misalnya, kode terbatas dalam mengekspresikan maksud, sehingga kita perlu memiliki dokumentasi yang baik juga. Dokumentasi API juga sangat penting untuk lib, seperti harus membaca code sungguh hal yang rumit kecuali lib kita sangat kecil.
 

Sabtu, Mei 28

Best .htaccess Hacks For Websites

http://www.priteshgupta.com/ : The .htaccess configuration file on your server which controls Apache Server is an important file and a very powerful tool for your website if used properly. It is generally found in root of your web server. In this article I will share how .htaccess can help improve your website’s  stability, security, functionality and usability.
Please backup your .htaccess file before doing any changes. In case anything goes unexpected just replace the .htaccess with your backup.

Search Engine Friendly 301 Redirects

If you have moved your website to another domain and want to redirect all the pages to their new location or you want to redirect a particular URL to a specific page in most Search Engine Friendly manner then you can use the below code in your .htaccess.
## .htaccess Code :: BEGIN
Redirect 301 /Old_Directory/ http://www.new-domain.com/
## .htaccess Code :: END
Note: Remember not to insert “http://www” to the “/Old_Directory/”.

Block Requests From User Agents

By adding a ban list to your .htaccess file you can block all unwanted user agents. These agents at times are harmful and can can cause load on your server.
## .htaccess Code :: BEGIN
## Block Bad Bots by user-Agent
SetEnvIfNoCase user-Agent ^FrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Java.* [NC,OR]
SetEnvIfNoCase user-Agent ^Microsoft.URL [NC,OR]
SetEnvIfNoCase user-Agent ^MSFrontPage [NC,OR]
SetEnvIfNoCase user-Agent ^Offline.Explorer [NC,OR]
SetEnvIfNoCase user-Agent ^[Ww]eb[Bb]andit [NC,OR]
SetEnvIfNoCase user-Agent ^Zeus [NC]
Order Allow,Deny
Allow from all
Deny from env=bad_bot
## .htaccess Code :: END

Remove WWW from your website’s URL

If you wish to remove the “www” from your website’s URL, like http://your-domain.com instead of http://www.your-domain.com, then you can use the below code.
## .htaccess Code :: BEGIN
RewriteEngine on
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^www\.your-domain\.com$ [NC]
RewriteRule ^(.*)$ http://your-domain.com/$1 R=301,NC]
## .htaccess Code :: END

Add WWW to your website’s URL

If you wish to add “www” your website URL, you can add the below code.
## .htaccess Code :: BEGIN
RewriteEngine On
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^your-domain.com [NC]
RewriteRule ^(.*)$ http://www.your-domain.com/$1 [L,R=301]
## .htaccess Code :: END

Allow only specific IP addresses and block everyone else

If you want to allow only few particular IPs and deny everyone else then you can use the below code in your .htaccess file. Replace “http://www.your-domain.com/under_construction.html” with the error page which you will like to be displayed to everyone(except the particulars IPs) or you can simply omit the line if you don’t need it.
## .htaccess Code :: BEGIN
ErrorDocument 403 http://www.your-domain.com/under_construction.html
Order deny,allow
Deny from all
Allow from 172.16.254.1
Allow from 172.16.254.9
## .htaccess Code :: END

Ban only specific IP addresses and allow everyone else

If you think there are spammers regularly flooding your website you can simply ban their IP addresses to get rid of them and allow everyone else.
## .htaccess Code :: BEGIN
allow from all
deny from 172.16.254.6
deny from 172.16.254.5
## .htaccess Code :: END

Custom Error Pages

You must have already seen many custom 404 error pages, you can use the below code for error pages for 404 errors and other errors too.
## .htaccess Code :: BEGIN
ErrorDocument 401 /error/401.html
ErrorDocument 403 /error/403.html
ErrorDocument 404 /error/404.html
ErrorDocument 500 /error/500.html
## .htaccess Code :: END

Change Index Page

The default page of a regular server is either an index.html or index.php, you can use the below code to change it.
## .htaccess Code :: BEGIN
DirectoryIndex index2.html
## .htaccess Code :: END

Remove Extensions from Files

The below code removes extension in a URL, this make it the URL more Search Engine Friendly. Example: http://www.your-domain.com/about.php will be http://www.your-domain.com/about. You can replace .php with .html or whatever you want.
## .htaccess Code :: BEGIN
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ /$1.php [L,QSA]
## .htaccess Code :: END

Disable Directory Browsing

You can block users from viewing directories without an index page using the below code.
## .htaccess Code :: BEGIN
Options All -Indexes
## .htaccess Code :: END

Disable Browser To Prompt Open/Save As Option

Usually when you try to download something you generally get asked whether to Save it or Open it. To disable this from server side, you can use the following code:
## .htaccess Code :: BEGIN
AddType application/octet-stream .mp3
AddType application/octet-stream .mpg
AddType application/octet-stream .avi
AddType application/octet-stream .mov
AddType application/octet-stream .pdf
AddType application/octet-stream .xls
AddType application/octet-stream .zip
## .htaccess Code :: END

Change Script Execution Type

If you have php within an html file, you can still execute it as php using the below code.
## .htaccess Code :: BEGIN
AddType application/x-httpd-php .html
## .htaccess Code :: END

Stop Execution of Script

If you want, you can stop scripts like php, asp, etc from executing and simply display them as plain text.
## .htaccess Code :: BEGIN
RemoveHandler cgi-script .php .asp .html
AddType text/plain .php .asp .html
## .htaccess Code :: END

Set Default Admin Email ID

Using below code you can set the default Email ID of your server.
## .htaccess Code :: BEGIN
ServerSignature EMail
SetEnv SERVER_ADMIN mail@your-site.com
## .htaccess Code :: END

Disable Hotlinking

Using this disable users from using images hosted on your server in their website, this helps in saving bandwidth. You can do this by adding the below code, replace “http://your-domain.com/copyright.jpg” with the image which you will like to be displayed instead.
## .htaccess Code :: BEGIN
Options +FollowSymlinks
#Protect against hotlinking
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www.)?your-domain.com/ [nc]
RewriteRule .*.(gif|jpg|png)$ http://your-domain.com/copyright.jpg[nc]
## .htaccess Code :: END

Enable Caching

The below code will tell the web browser to use cache instead when your website is loaded. It doesn’t directly increase the loading speed of your website, it will basically loads the cached content when the user visits your website second time. Currently the cache expiry time is set to 1 day(86400 seconds).
## .htaccess Code :: BEGIN
# BEGIN EXPIRES
ExpiresActive On
ExpiresDefault "access plus 86400 seconds"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 1 year"
# END EXPIRES
## .htaccess Code :: END

Rabu, Maret 30

Tutorial Instalasi Drupal

Langkah awal sebelum melakukan instalasi drupal 6 adalah memastikan anda sudah makan cukup, sediakan kopi dan cemilan. Hal ini sangat penting dikala menunggu proses instalasi yang cukup memakan waktu anda bisa nyemil dan ngopi dulu. OK kita ke TKP setelah menyiapkan beberapa kebutuhan diatas siapkan juga xampp-win32-1.7.3 dan drupal-6.19.tar.gz. Anda bisa dapatkan xampp di http://www.apachefriends.org/ dan drupal di http://drupal.org/
Berikut langkah-langkah dalam melakukan instalasi drupal 6.
  • Sebelum anda pasang drupal pasang dulu xampp yang sudah anda dapat. Mohon maaf sebelumnya karena proses install xampp tidak kami jelaskan disini, kalau anda tidak bisa lihat di google aja sambil nyemil, jangan biarkan apa yang anda siapkan sia-sia.
  • Extract file drupal-6.19.tar.gz pada folder xampp anda contoh C:/xampp/htdocs/ setelah selesai ubah nama folder drupal-6.19 sesuai keinginan anda.
  • Copy paste di tempat yang sama file default.settings.php, sehingga anda mempunyai file default.settings.php dan default.settings_2.php. Ubah file default.settings_2.php menjadi settings.php klo bingung cari filenya ada baiknya anda nyemil dan kopinya diminum dulu sebelum dingin, setelah itu cari filenya disini c:/xampp/htdocs/drupal-6.19/site/default
  • Membuat database drupal
    Langkah selanjutnya sebelum proses instalasi Drupal 6 adalah membuat database baru untuk menampung data hasil instalasi drupal 6. Untuk membuatnya, Anda bisa menggunakan phpmyadmin yang sudah tersedia ketika Anda membuat localhost dengan XAMPP. Buka browser Anda, lalu akses http://localhost/phpmyadmin/. Sedikit tambahan penjelasan, ada beberapa database bawaan ketika membuat localhost. Nama-nama database default bawaan dari instalasi XAMPP bisa Anda lihat disebelah kiri seperti phpmyadmin, mysql dan lain-lain.
    Untuk membuat database baru, coba lihat jendela di sebelah kanan. Di situ ada form kecil dengan tulisan diatasnya Create New Database. Silakan Anda masukkan nama database, misalnya ari_drupalku. Untuk menu dropdown disamping kanannya, biarkan tetap seperti defaultnya yaitu Collation. Lalu klik tombol Create.
  • Instalasi drupal 6 via browser
    File drupal sudah siap, database sudah siap, sekarang saatnya untuk melakukan instalasi drupal via browser. Buka browser anda lalu masukkan alamat URL http://localhost/sin_a/install.php?profile=default atau ketik aja localhost/drupal-6.19 (atau nama folder drupal yang telah anda buat), dalam kasus ini saya menggu sin_a sebagai hasil pengubahan nama dari drupal-6.19
  • Memasuki proses instalasi drupal 6 via browser, pertama kali Anda akan dihadapkan dengan tampilan pilihan bahasa, pilih saja Install Drupal in English.
  • pada bagian Database name isi dengan data base yang anda buat pada phpmyadmin, Database username isi dengan root, dan Database password kosongi saja. Semua ini jika anda tidak melakukan modifikasi pada xampp anda, atau anda bisa chek pada http://localhost/phpmyadmin/ untuk Database username dan Database password.
















  • Tunggu sebentar, proses instalasi database sedang berjalan.
  • Tampilan berikutnya adalah Configure Site
    Berikut ini penjelasan bagian per bagian :
    Secara otomatis, file settings.php akan diubah permissionnya pada saat instalasi drupal via browser, ini untuk alasan keamanan. All necessary changes to ./sites/default and ./sites/default/settings.php have been made. They have been set to read-only for security. Bagian pertama yang harus Anda isi adalah Site Information.
    • Site Name --> isikan nama situs Anda di form ini, misalnya Drupalku. Nama situs akan tampil di pojok kiri atas berdampingan dengan logo drupal.
    • Site e-mail address --> masukkan alamat email Anda di sini untuk keperluan administrasi situs.

    Bagian kedua yaitu Administrator Account
    Form-form di bagian ini bertujuan membuat account utama dan yang pertama sebagai administrator situs. Isilah dengan cukup teliti.
    • Username ? masukkan nama user name untuk Administrator, Anda bisa isi dengan Admin.
    • E-mail address ? email untuk account administrator
    • Password ? password untuk account administrator
    • Confirm password ? tulis lagi password administrator sebagai konfirmasi

    Bagian selanjutnya adalah Server Settings
    • Default time zone.
      Form ini berfungsi untuk mengatur waktu yang akan dipakai di situs. Saya anjurkan dibiarkan saja tetap default, karena ini secara otomatis sudah menyesuaikan dengan komputer Anda.
    • Clean URLs
      Bagian ini cukup penting untuk diaktifkan (Enabled). Clean URL akan membuat url situs Anda menjadi rapi dan lebih familiar bagi manusia dan mesin mencari. Default drupal ketika Clean URL disabled atau tidak aktif, URL yang akan dipakai di situs akan selalu menggunakan ?q=. Hal ini jelas menyulitkan pengunjung situs untuk mengingat alamat URL kita, hal ini pun bagi mesin pencari sesuatu yang tidak disukai. Pilih Enabled untuk bagian Clean URL ini. Informasi tambahan, dengan menggunakan XAMPP, localhost Anda mendukung penggunaan clean url ini.
    • Update notifications
      Update notifications berfungsi sebagai alat untuk mengecek serta memberi tahu jika ada perubahan/update terbaru baik itu module ataupun versi core drupal. Ini akan berfungsi ketika situs Anda nanti sudah terpasang diluar, yang secara otomatis akan mencoba menghubungi update terbaru. Oleh karena situs Anda ini masih offline, Anda bisa uncheck/hilangkan tanda centang di pilihan ini. Selesai semua, silakan klik tombol Save and continue.
    • Drupal Instalation Complete
      Di tampilan selanjutnya akan muncul pesan bahwa proses instalasi selesai dilakukan. (Drupal installation compete). Namun, ada peringatan berwarna merah, berikut cuplikannya : warning: mail() [function.mail]: Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\xampp\htdocs\drupalku\includes\mail.inc on line 193. Unable to send e-mail. Please contact the site administrator if the problem persists. Peringatan ini adalah hal wajar dikarenakan Anda menginstall drupal ke dalam localhost, localhost tidak terhubung dengan internet. Peringatan ini menjelaskan bahwa fungsi email tidak berjalan lalu mengakibatkan pengiriman email untuk account administrator gagal. Ini tidak menjadi soal, ketika situs Anda sudah online, fungsi email akan berjalan dengan baik. Anda bisa abaikan peringatan ini. Anda bisa perhatikan tulisan dibawahnya yang memberikan selamat, bahwa Drupal sudah berhasil diinstall. Silakan menuju halaman situs Anda dengan meng-klik link your new site.  
      Selamat datang di situs drupal Anda yang baru. Anda otomatis sudah login sebagai admin, sesuai dengan nama user administrator yang tadi Anda masukkan. Tutorial berikutnya akan saya jelaskan bagian-bagian dari drupal sehingga Anda lebih memahami fungsinya masing-masing. Selamat belajar drupal.
**Selamat Mencoba**