Belajar HTML Dasar Div Dan Stylenya

Belajar HTML Dasar Div Dan Stylenya

Belajar HTML dasar Div -- Div bisa dikatakan sebagai kontainer untuk kode HTML apa saja yang ingin anda tampilkan di dalamnya. HTML Div bisa anda gunakan untuk melakukan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini benar-benar standar saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yang sangat dasar ini. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah seperti di bawah ini

<div>

ISI DARI DIV HTML TAG

</div>

Jika anda membentuknya seperti ini, maka isinya akan standar saja, ukurannya akan mengikuti isi yang ada di dalamnya. Lihat contoh yang ada di bawah ini:

ISI DARI DIV HTML TAG

Benar-benar standar saja tampilannya. Jadi ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Jadi mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

Style background

Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat mudah cukup tambahkan kode berikut ke dalam kode awal tadi. Lihat contoh berikut ini:

<div style="background: #9fc5e8">

ISI DARI DIV HTML TAG

</div>

Kode #9fc5e8 yang anda lihat di atas adalah kode warna yang saya inginkan, yaitu biru muda. Anda bisa mengganti kode #9fc5e8 dengan kode warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal dihttp://www.computerhope.com/htmcolor.htm.

Jadi setelah diberi kode warna, maka tampilannya seperti di bawah ini:

ISI DARI DIV HTML TAG

Style Font Color

Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada tulisan di dalamnya. Untuk itu anda bisa memakai perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat contoh di bawah:

<div style="background: #9fc5e8; color:#0000cc">

ISI DARI DIV HTML TAG

</div>

Kode warna #0000CC bisa anda ganti menurut kode yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada kode HTML div kita ini.

ISI DARI DIV HTML TAG

Style Padding

Mungkin anda menginginkan agar tulisan tidak terlalu menempel pada dinding kontainernya. Anda bisa menggunakan kode style padding untuk itu: Kodenya adalah padding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tadi dengan tanda titik koma (;).

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px ">

ISI DARI DIV HTML TAG

</div>

Dari pengaturan di atas anda ingin menaruh "ganjalan" setebal 10px di atas, 20px di kanan, 30px di bawah, dan 25px di kiri. Tampilannya akan berbentuk seperti ini:

ISI DARI DIV HTML TAG

Style Text Align

Mungkin sekarang anda ingin mengatur agar tulisan di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda bisa mengguakan kode text-align:value. Nilai value bisa anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi kode sebelumnya dengan tanda penutup ;

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center ">

ISI DARI DIV HTML TAG

</div>

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font Family

Kalau anda ingin mengubah bentuk font, maka kode font-family: Nama Font harus anda tambahkan ke dalam kode ini. Adapun nama font yang bisa anda gunakan hanya yang disediakan oleh blogger seperti Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Ok, ekali lagi anda harus menutup style sebelumnya dengan penutup ; sebelum menambahkan style ini.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact">

ISI DARI DIV HTML TAG

</div>

Hasilnya bisa anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Style Font Size

Kalau anda merasa perlu memperbesar hurufnya, maka tinggal tambahkan saja kode font-size: ukuran yang anda inginkan. Ukuran bisa dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat contoh di bawah.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px">

ISI DARI DIV HTML TAG

</div>

Hasilnya akan terlihat seperti di bawah ini.

ISI DARI DIV HTML TAG

Style Width

Mungkin anda tidak suka jika ukuran div ini terlalu penuh. Anda bisa mengatur ukurannya dengan menambahkan atribut width: ukuran. Satuannya bisa dalam pixel(px) ataupun persen(%). Kali ini saya akan memakai pixel saja.

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

Hasilnya seperti ini:

ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah jika anda mau memasukkan atau tidak. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya tidak akan membahas style ini di sini.

Center Div
Jika anda ingin div anda berada di tengah-tengah kolom, maka anda bisa mengapitnya dalam kode <center></center>. Seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat seperti berikut:

ISI DARI DIV HTML TAG

Style Border

Apakah anda ingin memberi garis pembatas pada kode ini? Jika ya maka anda perlu menambahkan kode border: [tebal] [gaya] [warna]. Tebal bisa anda isi dengan angka berapa saja dalam satuan px. Gaya anda bisa isi dengan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan warna bisa anda isi dengan kode warna dari situs di atas. Coba jika kita tambahkan kode seperti berikut ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6">

ISI DARI DIV HTML TAG

</div>

</center>

Maka hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Style Border Radius

Mungkin rekan blogger suka model kapsul dan tidak ingin kotaknya bersudut tajam seperti di atas. Anda bisa menambahkan kode border-radius: value, di mana nilai value ini bisa diganti angka dalam satuan pixel. Angka ini menjadi perwakilan jari-jari radius yang anda inginkan. Supaya tidak bingung lihat contoh di bawah saja.

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px">

ISI DARI DIV HTML TAG

</div>

</center>

Hasilnya akan terlihat seperti di bawah ini:

ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka kode yang perlu anda tambahkan adalah:
-moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;
Silahkan mengubah nilai kode-kode di atas sesuka anda untuk bereksperimen. Lalu masukkan ke dalam kode di atas. Hasilnya seperti contoh di bawah ini:

<center>

<div style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px; -moz-box-shadow: 0px 0px 5px 4px #6fa8dc; -webkit-box-shadow: 0px 0px 5px 4px #6fa8dc; box-shadow: 0px 0px 5px 4px #6fa8dc">

ISI DARI DIV HTML TAG

</div>
</center>

Hasilnya akan terlihat seperti berikut ini:

ISI DARI DIV HTML TAG

Ok, itu saja dulu. Silahkan berekperimen sendiri. Jika ada satu atau dua atribut di atas yang kalian hilangkan, maka efeknya juga akan hilang. Sebagai catatan ini bisa anda lakukan saat membuat artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini bisa membantu anda.

Sumber :

http://trikmudahseo.blogspot.com/2012/10/belajar-html-dasar-div-dan-stylenya.html

Anda penasaran, teknologi apa yang digunakan oleh layanan-layanan web populer di internet? Kinerja layanan mereka yang cepat, sajian informasi yang dinamis, dan tampilan yang interaktif bisa Anda contoh untuk Anda terapkan di website yang Anda kelola. Jika Anda sudah menggunakan teknologi ini, maka pada tahap awal, Anda sudah berada di jalur yang benar.

Di balik halaman-halaman website mereka yang dinamis dan interaktif, ternyata bahasa pemrograman dan pengolah database yang digunakan pada server mereka adalah sebagai berikut:

• Google: Pemrograman C, C++, Java, Python, dan PHP. Database menggunakan BigTable.
• Facebook: Pemrograman PHP, C++, Java, Python, Erlang. Database menggunakan MySQL.
• YouTube: Pemrograman C, Python, Java. Database menggunakan MySQL.
• Yahoo: Pemrograman PHP. Database menggunakan MySQL.
• Live: Pemrograman ASP.NET. Database menggunakan Microsoft SQL Server.
• MSN: Pemrograman ASP.NET. Database menggunakan Microsoft SQL Server.
• Wikipedia: Pemrograman PHP. Database menggunakan MySQL.
• Blogger: Pemrograman Python. Database menggunakan BigTable.
• Bing: Pemrograman ASP.NET. Database menggunakan Microsoft SQL Server.
• Twitter: Pemrograman C++, Java, RoR, Scala. Database tidak diketahui.
• Wordpress: Pemrograman PHP. Database menggunakan MySQL.
• Amazon: Pemrograman Java, J2EE, C++, Perl. Database tidak diketahui.
• eBay: Pemrograman Java, WebSphere, Servlets. Database menggunakan Oracle.
• Linkedin: Pemrograman Java, Scala. Database tidak diketahui.

Adapun teknologi untuk pemrograman client-side yang digunakan rata-rata adalah JavaScript dan Ajax. Adapun Flash hanya dipakai di Youtube. Kemungkinan Silverlight hanya dipakai di situs-situs Microsoft seperti Live, MSN, dan Bing.

Sumber: Wikipedia

Terminologi Drupal

Berikut ini WhiteCyber Reseach & Development akan menjabarkan Terminologi Drupal dan bagaimana cara membuat website menggunakan Drupal ini bisa dikerjakan. 

Cukup dengan satu mata maka WebSite langsung terwujud ~

Terminologi

Ada beberapa terminologi spesifik yang hanya dikenal dalam Drupal. Secara substansi sangat umum tetapi penting untuk diketahui. Beberapa terminologi tersebut adalah :

1. Node, adalah satuan konten yang ada di Drupal.
2. Content, adalah materi yang ditulis/diisi pada Drupal.
3. Content Type, adalah jenis materi yang ditulis/diisi (Book, Page, Blog, Story, Forum)
4. Taxonomy, bisa berarti kategori tetapi lebih luas dan fleksibel karena Taxonomy bisa disusun sebagai daftar kategori yang berbeda untuk masing-masing jenis node/konten.
5. Term, adalah pembagian kategori di bawah Taxonomy.
6. Administer, adalah tempat pengaturan semua aktifitas Drupal
7. Block, adalah wadah konten yang bisa dipindah-pindahkan posisinya. Block bisa pula berisi kode program sehingga isinya bisa variabel yang dinamis sesuai dengan kebutuhan.
8. Region, adalah area dari tema situs untuk menempatkan blok/menu.
   
   
9. Themes, adalah tampilan atau layout perwajahan website.
10. Module, adalah pengaya tambahan pada situs agar lebih berfungsi sesuai dengan keinginan kita
11. Input Format, adalah menu untuk mengatur format dari teks html yang akan kita tampilkan pada konten/node (PHP code, Filtered HTML, Full HTML).
12. Permissions, adalah hak akses yang dimiliki user/roles untuk membatasi kewenangan aksi terhadap suatu konten, modul, tema atau fungsi situs lainnya.
13. Roles, adalah hirarki kelompok user yang mempunyai permission yang sama (admin, authenticated user, anonymous).
14. Body, isi dari konten secara full
15. Teaser, isi ringkasan dari konten, biasanya diambil sejumlah xxx karakter dari awal isi konten. Dengan xxx adalah panjang karakternya misalnya 300, 400, 900. Dan nilau defaultnya adalah 600.
16. Versi Drupal, adalah versi update dari Drupal Core (Versi Mayor, Versi Minor)

Mengenal modul

Mengenal Module

Modul atau module adalah komponen tambahan yang berguna untuk mengembangkan atau menambah fungsi-fungsi dari Drupal. Module dikenal sebagai Extension atau Plugin pada CMS lain. Secara default Drupal tidak memerlukan modul tambahan, karena Drupal sudah memiliki modul-modul standar yang baik dan cukup untuk membangun blog atau wbsite skala kecil.

Hampir sebagian besar software yang didistribusikan bebas, secara umum dipaket dalam bentuk modular sehingga pengguna bisa menggunakan perangkat lunak tersebut sesuai dengan yang dibutuhkan saja. Dengan penggunaan module yang efisien akan meningkatkan performance situs.

Tergantung dengan konsep situs yang dibangun, penggunaan modul tambahan bisa diminimalisasi sehingga situs menjadi lebih efisien, cepat dan tangguh. Modul inti Drupal pun masih bisa kita non-aktifkan untuk meringankan unjuk kerja situs. Pemahaman kegunaan modul inti dan modul tambahan/kontribusi sangat penting sehingga modul yang diaktifkan adalah benar-benar modul yang dibutuhkan.

Secara umum modul pada Drupal dibagi menjadi 2 yaitu :

1. Modul inti (Core Module)
2. Modul Tambahan (Contributed Module)

Module yang disarankan untuk diinstal :

1. Administrator Menu
2. CCK
3. CKEditor
4. IMCE
5. IMCE Crop
6. CAPTCHA
7. Google Analytics
8. Views
9. Chaos tool suite (CToolS)
10. Pathauto
11. Webform
12. Biblio
13. Facebook social plugin
14. Content Templates

Contoh : Download dan install module admin_menu

1. Kunjungi [ http://drupal.org/project/admin_menu ]
2. Pada bagian downloads pilih recommended releases yang sesuai dengan versi Drupal yang terinstal
3. Ekstrak (unzip/unrar) file terunduh tersebut  pada lokal folder.
4. Menggunakan software ftp-client, upload folder admin_menu ke folder /sites/all/modules
5. Aktifkan module dengan mengunjungi /admin/build/modules dan centang module Admin menu

Mengenal Tema
Tema atau Themes adalah rupa tampilan dari situs Drupal yang kita buat, biasanya dikenal sebagai skin atau template. Secara default Drupal memiliki 5 buah tema yakni :

1. Garland
2. Bluemarine
3. Chameleon
4. Marvin
5. Minneli

Kelima tema ini harus ada dalam instalasi dan walaupun kita menginstall tema tambahan kita tidak boleh menghapus tema standar ini, karena tema-tema tambahan juga menggunakan fungsi fungsi dari tema standar ini.

Sumber : http://bio.unsoed.ac.id
 

Apakah Drupal itu?
Drupal adalah sebuah sistem manajemen konten (juga disebut sebagai CMS), yang berarti Drupal digunakan untuk mengelola konten di situs informasi, situs media sosial, situs anggota, intranet dan aplikasi web.

 

Untuk menjawab pertanyaan No.2 bagi Afif Widiyanto, namun ini berbasis hosting yang akan dipraktekkan di Hosrgator Hosting.

Drupal tidak CMS, ketat berbicara, tetapi platform ke berbagai modul yang dapat dipasang dan dikombinasikan untuk menyediakan CMS yang disesuaikan dengan kebutuhan Anda. Ada modul untuk berbagai tujuan, misalnya menyimpan berbagai jenis konten, mengambil konten berdasarkan kriteria, dan untuk menampilkan konten dalam cara yang berbeda dan banyak lagi.Apa yang membuat berbeda dari yang lain Drupal CMS?

EPiServer, SiteVision, Sitecore, Polopoly dan Escenic merupakan contoh dari sistem manajemen konten pertama generasi. Mereka dicirikan oleh kenyataan bahwa fungsi baru atau disesuaikan ditambahkan melalui pengembangan modul baru yang diprogram di Jawa atau NET platform.. Ini memakan waktu dan memerlukan bantuan dari spesialis. Dalam prakteknya, apa hasil ini dalam, adalah situasi monopoli seperti di mana Anda menjadi tergantung pada sejumlah penyedia layanan untuk membuat bahkan perubahan terkecil atau pengembangan.

Drupal, di sisi lain, adalah generasi kedua CMS. Ini berarti bahwa banyak fungsi baru atau disesuaikan dapat dibuat dalam antarmuka pengguna tanpa pemrograman. Melakukan hal ini tidak mengambil banyak waktu dan dapat dilakukan oleh seorang anggota staf Anda berpengalaman dalam operasi Anda. Ini mengurangi ketergantungan pada penyedia layanan menawarkan Anda kebebasan untuk membuat penyesuaian sederhana dan pengembangan diri.
Tetapi bahkan Drupal membutuhkan pemrograman pada satu titik atau lain, untuk tujuan seperti mengintegrasikan sistem lain ke dalam operasi Anda sendiri. Tapi jangan khawatir, Drupal juga perangkat lunak bebas dengan open source, seperti EPiServer, SiteVision et c. Ini berarti bahwa Drupal adalah bebas (gratis), bahwa Anda dapat menggunakan atau memodifikasi Drupal untuk keinginan hati Anda. Terserah Anda (tidak ada orang lain!) Untuk memutuskan apakah Anda ingin mendistribusikan modifikasi Anda. Satu-satunya hal Anda diharapkan untuk lakukan sebagai balasannya adalah bahwa jika Anda memilih untuk mendistribusikan kata modifikasi yang Anda buat mereka tersedia di bawah persyaratan yang sama Anda diperoleh Drupal, yang merupakan lisensi open source.Mengapa saya harus memilih Drupal?

Ada empat alasan mengapa Anda harus memilih Drupal bukan EPiServer, SiteVision, Sitecore, Polopoly, Escenic dan sistem konten manajemen generasi pertama. Menggunakan Drupal Anda dapat membuat solusi yang:

    menawarkan waktu yang lebih pendek ke pasar untuk fitur baru atau yang ditingkatkan di situs Anda.
    memberdayakan staf Anda untuk menyesuaikan dan lebih meningkatkan situs web Anda tanpa bergantung pada layanan Drupal menyediakan
    menawarkan perawatan berkelanjutan ketika perubahan kecil yang terjadi yang mempengaruhi fungsi serta desain
    menurunkan total biaya kepemilikan (TCO) sebagai hasil dari Drupal menjadi perangkat lunak bebas, yang menawarkan waktu pengembangan lebih singkat, ketergantungan kurang pada penyedia layanan dan biaya pemeliharaan yang lebih rendah.
Keuntungan yang unik Drupal adalah kemungkinan bahwa alasan utama mengapa Gartner Group jajaran cara Drupal depan EPiServer berkaitan dengan "kelengkapan visi" serta "kemampuan untuk mengeksekusi".

Drupal terbaru template yang disediakan dengan teknik baru dari instalasi data sampel. Anda dapat membuat template Anda muncul sebagai di halaman pratinjau selecing satu pilihan mesin selama instalasi Drupal. Tutorial berikut akan menunjukkan kepada Anda bagaimana menginstal Drupal menggunakan profil demo.Upload Drupal mesin

1. Pertama-tama kunjungi situs resmi Drupal dan men-download mesin Drupal CMS : http://drupal.org/





2. Upload arsip didownload ke server.







Kami akan menggunakan Filezilla klien FTP untuk upload file.

3. Login ke control panel hosting kami dan ekstrak arsip.







4. Arahkan ke domain, di mana kita ingin menginstal situs Drupal kami. Memulai proses instalasi.



5. Kembali ke Cpanel hosting Anda dan membuat nama database dan user.





6. Centang "All Privileges" dan "membuat perubahan".




7. Kembali ke proses instalasi dan menyelesaikan instalasi.




8. Setelah Drupal diinstal, kita sekarang harus menginstal tema.
CATATAN: Jika Anda ingin menginstal hanya tema (tanpa data sampel). Yang perlu Anda lakukan adalah meng-upload tema yang # # # folder ke 'sites / all / themes "folder pada server Anda.Instal Drupal Template
Dalam tutorial ini, kami akan menunjukkan cara untuk menginstal tema dengan semua data sampel nya, sehingga terlihat seperti pada Preview Page Template.

1. Upload dan mengganti folder situs ke folder root dari instalasi Drupal Anda.  http://drupal.org/

2. Upload dan mengganti folder demo_profile dari sumber \ ke profil \ folder Drupal Anda.
.

3. Upload dan mengganti file install.inc untuk mencakup folder dan file system.install untuk modul \ system \ folder.

4. Reload halaman Anda, di mana Anda telah menginstal Drupal dan mulai instalasi lagi.CATATAN: Anda mungkin perlu mengetikkan install.php / pada akhir URL situs.
Pilih profil Demonstrasi situs dan ikuti instruksi.

 

CATATAN: Jika Anda mendapatkan pesan (ditampilkan di bawah screenshot), maka Anda perlu untuk mengosongkan database untuk melanjutkan.

5. Masuk ke panel phpmyadmin Anda melalui Hosting Cpanel dan Kosong atau Drop semua tabel dari database yang digunakan untuk situs Drupal.

.


myadmin panel via Hosting Cpanel and Empty or Drop all the tables from the database used for this Drupal site.

6. Kembali ke halaman instalasi dan kembali halaman tersebut. Pilih profil Demonstrasi situs dan ikuti instruksi.










CATATAN: Jika Anda mendapatkan pesan (yang ditunjukkan pada gambar di bawah), pastikan untuk memeriksa hak akses file untuk folder / file pada server Anda.

 server.

 

CATATAN: Jika Anda mendapatkan pesan (yang ditunjukkan pada gambar di bawah), maka Anda harus meng-upload "demo" folder dari folder 'situs \ default \ swasta' folder template download ke 'situs \ default \ private' pada server Anda .

Anda dapat menggunakan program FTP, misalnya FileZilla juga.




7. Setelah folder manual "demo" meng-upload, kita harus kembali halaman tersebut.


8. Pilih file dalam kotak "SNAPSHOT" dan tekan "mengembalikan"


 

Ini mungkin memakan waktu cukup lama. Mohon bersabar ...



 

 

9. Anda sekaran g dapat login ke panel Admin Anda, menggunakan Username dan password ditentukan pada file "drupal_readme.pdf '. Biasanya, login administrator adalah admin dan password adalah admin123.

 

Sumber : http://budi-irawan93.blogspot.com/2011/12/drupal-cms.html

Berikut ini adalah jawaban kepada Afif Widiyanto no 2 kepada WhiteCyber Reseach & Development Team , Bagaimana cara saya menginstall Drupal pada Localhost atau Laptop saya ?

Teknik installasi Drupal berlaku untuk semua versi Drupal. Berikut ini untuk mempercepat materi kami tampilkan tulisan yang sudah jadi dari sumber yang baik dan terpercaya.

  Download XAMPP Terbaru, dan Download Drupal Terbaru ya !

Untuk instalasi DRUPAL V.6.19 atau diatasnya sangat mudah yang pasti anda memiliki komputer/laptop dan pastikan kalau XAMPP (Aplikasi WebServer yang berbasis Apache, PHP, dan MySQL) juga telah terinstal didalamnya. Untuk instalasi XAMPP bisa anda lihat disini

Jika anda belum memiliki software DRUPAL silahkan download DISINI.

Lakukan ekstraksi file yang sudah anda download tadi kemudian buat sebuah folder pada xampp untuk menyimpan file-file yang sudah diekstrak dengan nama www.drupal.com (ini hanya contoh...bisa dengan nama apa saja sesuai keinginan anda) sehingga menghasilkan : D:\xampp\hotdocs\www.drupal.com (Saya memakai drive D: karena saya menginstal xampp pada drive tersebut)

Copy dan paste semua file dan folder yang sudah diekstrak tadi pada folder yang anda sudah buat :


Klik folder "D:\xampp\hotdocs\www.drupal.com\sites\default\" (Tanpa tanda kutip) kemudian copy paste file default.settings.php lalu rename menjadi file settings.php sehingga tampak seperti dalam screenshot berikut :

Sampai disini kegiatan ekstraksi sudah selesai.

Selanjutnya aktifkan xampp dan pastikan layanan Apache dan MySQL dlm keadaan "running"

Langkah selanjutnya buka browser dan ketik http://localhost/phpmyadmin untuk membuat database. Disini saya menggunakan db_drupal untuk nama database. Lihat screenshot dibawah ini :


Setelah database db_drupal dibuat selanjutnya tentukan pengguna (username, password) dan hak-hak privilages dalam mengakses database tersebut seperti GRANT, OPEN, EDIT, DELETE, FILE, SELECT, INSERT, UPDATE, CREATE, ALTER, INDEX, dan DROP,.. seperti pada screenshot dibawah ini :

Setelah anda klik Go.., maka selesailah pembuatan date base untuk DRUPAL. Kemudian melangkah untuk Instalasi DRUPAL.

Tinggalkan Phpmyadmin, buka browser anda kemudian ketik
http://localhost/www.drupal.com/install.php dan proses intalasi dijalankan. Apabila instalasi anda sukses maka dibrowser anda akan tampak seperti ini :

Pada proses ini anda diminta memilih bahasa untuk DRUPAL anda, karena Bahasa Indonesia belum ada maka silahkan klik "Install Drupal in English" dan proses instalasi akan dilanjutkan.....

Pada langkah ini anda diminta untuk mengkonfigurasikan database yang telah dibuat tadi.., isilah form-form tersebut dengan nama database berikut username dan pasword untuk pengguna database tersebut (diisi sesuai yg dibuat melalui Phpmyadmin) kemudian klik save and continue, apabila konfigurasi tersebut berhasil maka selesailah sudah proses instalasi dan setup database untuk Drupal anda kemudian akan nampak pada browser anda seperti ini :

Pada tahap ini anda memasuki tahap dimana DRUPAL akan melakukan instalasi site yang anda akan buat... isilah form-form diatas dengan memasukkan nama site (Ganti tulisan localhost diatas dengan mana site yang anda inginkan misalnya My Website dll) isi email address dan pasword.. setelah itu klik save and continue maka akan tampak sseperti dibawah ini :


Karena anda hanya bekerja pada webserver lokal di computer anda maka pesan kesalahan diatas diabaikan saja.

Semua Proses instalasi disebalah kiri "tercentang" dan sudah ada pesan " Drupal Installation Complete"kemudian langsung klik "Your New Site" Maka anda siap membangun website dengan menggunakan DRUPAL...

Apabila anda mengikuti langkah-langkah tersebut diatas dengan benar maka saya yakin proses instalasi anda sukses 99%.

 

Selamat Mencoba dan Sukses buat anda yang membaca, dan Afif khususnya... !!!

Sumber :  
http://marketiva-que.blogspot.com/2010/11/cara-instalasi-drupal-pada-windows-7.html 

 

WhiteCyber  Reseach & Development Team mendapat request dari Afif Widiyanto untuk membahas Drupal secara jelas. Untuk mempersingkat jawaban-jawabannya maka kita ambilkan di wikipedia. Bila ingin bertanya lebih jauh dapat menulis message dibawah ini, insyaalloh kami jawab. Berikut pertanyaan yang dilontarkan Afif Widiyanto pada kami :

Afif Widiyanto 

1. Apa itu drupal?
2. Bagaimana installnya? Requirement?
3. Bagaimana membuat web dengan drupal?

* Berikut ini jawaban no.1 tulisan selanjutnya jawaban no.2 dan 3

Hasil Pembuatan Website menggunakan Drupal.

Drupal adalah sebuah perangkat lunak sistem manajemen konten yang bebas dan terbuka yang di distribusikan dibawah lisensi GPL, pengembangan dan perawatannya dilakukan oleh ribuan komunitas pengguna dan pengembang di seluruh dunia. Dibuat dengan bahasa pemrograman PHP, Drupal dapat dipasang pada beberapa jenis database seperti MySQL, PostgreSQL, SQLite,MariaDB dan juga MsSQL. Web server yang mendukung diantaranya Apache, Nginx, IIS yang berjalan pada sistem operasi Cross-platform seperti Microsoft Windows, Mac OS X, Linux dan FreeBSD. Drupal dapat diunduh secara bebas dan dapat digunakan secara bebas, sehingga memungkinkan setiap orang baik secara individu maupun komunitas untuk mempublikasi, mengatur, mengelola dan mengorganisir berbagai jenis dari isi/konten pada website. 

Kemampuannya tidak sekedar sebagai CMS, namun dengan modul API-nya Drupal juga dapat digunakan sebagai CMF dalam membangun aplikasi berbasis Web.

Drupal dapat digunakan untuk membangun:

• Portal Web Komunitas
• Forum Diskusi
• Website Perusahaan
• Aplikasi Internal
• Website Personal atau Blog
• Aplikasi Komersial E-commerce
• Kumpulan Sumber Informasi
• Situs Jaringan Sosial
• Jaringan intranet
• Surat Kabar (Newsletter)
• Galeri multimedia Multimedia

Fitur Unggulan

• CMS (Content Management Systems) Sistem Manajemen Konten
• CMF (Content Management Framework) Sistem Platform
• Blog Pengguna tunggal dan pengguna jamak
• Built-in Forums engine
• Multi situs hanya dengan satu instalasi
• Multi bahasa, sudah mendukung Bahasa Indonesia dan Bahasa Jawa.
• Konten Multimedia
• Mendukung banyak jenis database seperti MySQL, PostgreSQL, SQLite, MsSQL dan MariaDB
• Bisa dipasang dengan webserver Apache, Nginx, IIS dan Lighttpd
• Pengaturan hak akses pengguna tak terbatas, bukan hanya pengaturan hak akses jenis konten bahkan bisa memberikan hak akses tiap field data
• Bisa membuat jenis konten baru yang tipe datanya sesuai keinginan pengguna

Paket Distribusi Drupal

• Open Atrium, paket drupal ditujukan untuk pembuatan situs intranet
• Open Publish, paket drupal ditujukan untuk pembuatan situs berita
• Acquia Common, paket drupal ditujukan untuk pembuatan situs jaringan sosial
• UberDrupal, paket drupal ditujukan untuk pembuatan situs e-commerces
• Pressflow, paket drupal ditujukan untuk pembuatan situs yang mengutamakan kinerja yang lebih cepat
• dll

Perbandingan Fitur dengan CMS lain

Fitur	Joomla	Wordpress	Drupal
Lisensi	GPL	GPL	GPL
Versi Terakhir	1.7	3.2.1	7.9
Tahun pembuatan	2005	2003	2001
Blog	Ya	Ya	Ya
Bahasa program	PHP	PHP	PHP
Forum	Tidak (dg modul tambahan)	Tidak (dg modul tambahan)	Ya
Teks editor	TinyMice	TinyMice	TinyMice CKEditor Whizzywig
User rule	terbatas	terbatas	Tidak terbatas
Database	MySQL	MySQL	MySQL Postgre MsSQL SQLite
Multisite	Tidak	Tidak	Ya
Multilanguage	Ya (id, jv)	Ya (id, jv, su)	Ya (id, jv)
Ukuran paket (zip)	7,6MB	3MB	3MB
Ukuran file terpasang	29MB	11MB	12MB

 

Konsep

• Node. Node adalah satuan konten yang terdapat dalam Drupal. Sebuah node dapat merupakan blog, topik forum, berita, halaman statis, gambar, video, audio, maupun Flash. Kumpulan node inilah yang membentuk keseluruhan konten dalam sebuah website berbasis Drupal.
  
• Taxonomy. Node yang begitu banyak perlu dikategorikan sesuai topik masing-masing. Dalam Drupal terdapat modul Taxonomy yang digunakan untuk mengkategorisasikan konten. Nama Taxonomy diambil dari ilmu klasifikasi. Dengan demikian setiap satuan konten bisa disebutkan apakah berkategori Politik, Ekonomi, Sains, atau Agama. Cara mengklasifikasikan konten sepenuhnya diserahkan kepada pengguna yang punya hak untuk mengatur Taksonomi. Modul-modul lain juga menggunakan modul Taxonomy untuk mengklasifikasikan konten tertentu, seperti misalnya Forum dan Image Gallery.
• Comment. Comment merupakan tanggapan terhadap sebuah node yang dituliskan oleh user (Komentar).
• Menu. Sistem menu dalam drupal adalah sistem penanganan request melalui URL. Jika Clean URL tidak diaktifkan, maka setiap query string yang berbentuk ?q= akan ditangani oleh sistem menu.
• Module. Website Drupal dapat ditambah dengan modul-modul tertentu sesuai keperluan. Modul adalah satuan program yang ditulis dalam PHP yang jika diaktifkan akan menambah fungsi tertentu. Misalnya modul Organic Groups untuk memberi fungsi group/mailing list seperti layaknya Google Groups ataupun Yahoo Groups. Modul Images untuk mengijinkan user mengupload gambar sebagai node.
• Theme. Theme adalah penampakan luar dari sebuah website Drupal. Sistem theme akan mengatur bagaimana website ditampilkan, layout halaman, penempatan block, style, dan sebagainya. Theme dapat diubah-ubah dengan memilih theme yang tersedia dalam direktori /themes maupun /sites/all/themes.
• Hook. User tidak pernah menyadari keberadaan konsep ini dalam Drupal, kecuali mereka adalah developer. Hook adalah metoda yang digunakan Drupal agar setiap modul dapat menambahkan fungsi tertentu, dengan cara mengaitkan fungsi tertentu tersebut pada hook yang dimiliki sistem Drupal. Sebagai contoh, setiap modul dapat menambah menu baru dengan cara mendefinisikan fungsi modul_menu, yang akan menjamin Drupal tidak lupa memperhitungkan keberadaan menu tersebut ketika diperlukan.
• Entity. Pengguna tidak menyadari keberadaan konsep ini dalam Drupal, kecuali mereka adalah developer. konsep ini mulai muncul di Drupal 7. Entitas digunakan untuk menyimpan dan menampilkan data, yang dapat menjadi node, user, istilah, taksonomi atau pengembangan secara kustom. Entitas memiliki daftar fungsi pembantu yang dapat memudahkan pengembangan dan adalah mungkin untuk menambahkan field ke entitas melalui antar muka, seperti yang digunakan untuk membuat suatu node.

Modul inti

• Aggregator
• Blog
• Book
• Color
• Comment
• Contact
• Content
• Forum
• Locale
• Menu
• Node
• OpenID
• Path
• Poll
• Search
• System
• Taxonomy
• Tracker
• Upload
• User

Tema Standar Drupal 6

• Bluemarine
• Chamelon
• Garland
• Marvin
• Minelli
• Pushbutton

Tema Standar Drupal 7

• Bartik
• Garland
• Seven
• Stark

 Sumber : http://id.wikipedia.org/wiki/Drupal