Membuat drag and drop panels widget (like wordpress)

Selamat pagi, oke pagi ini ane mau share download drag and drop panels. Monggo gan,

Untuk membuatnya ada beberapa file yg di butuhkan, berikut:
jquery-1.3.2.js
jquery-ui-1.7.2.custom.min
index.html
styles.html

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag Drop Panels - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" >
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function(){
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
</script>
</head>
<body>
<h3>Drag n Drop Panels</h3>

<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum velit ultricies orci pharetra elementum. In massa mauris, varius sed tempus a, iaculis sed erat. Ut sollicitudin tellus mollis arcu laoreet semper. Suspendisse ut felis odio. Aliquam auctor, tortor sit amet suscipit elementum, nunc ante dictum lectus, ac accumsan justo nunc sed velit. Sed sollicitudin varius tortor vitae varius. Aliquam interdum, nisl consectetur laoreet commodo, metus massa sagittis nisl, non venenatis lacus mi nec tortor. Ut malesuada auctor dolor, id pulvinar est malesuada sed. Aliquam sed posuere orci.
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
Phasellus porttitor adipiscing lacus ac tempus. Vivamus gravida augue metus, eu cursus nisl. Etiam arcu eros, placerat sed rhoncus at, porta et elit. Aenean pharetra ante neque. Aenean id egestas orci. Suspendisse potenti. Nunc at magna leo, sed porta erat. Proin eget neque turpis, vel blandit massa. Donec vel tortor magna. Curabitur id nibh magna, nec hendrerit nibh.
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
Proin porttitor euismod condimentum. Integer suscipit nibh nec augue facilisis ut commodo nisi ornare. Nam sed mauris vitae justo convallis placerat. Curabitur viverra, ipsum id volutpat sollicitudin, mi nisi condimentum nulla, nec dapibus velit libero eget orci. Nam purus lectus, imperdiet pharetra pulvinar ac, sodales sit amet sem. Ut vel mollis ante. Vivamus consectetur varius risus eu hendrerit. Sed scelerisque euismod leo, quis accumsan justo venenatis eu. Ut risus lorem, aliquet id fermentum nec, auctor ut enim. Ut pretium elementum turpis vel dignissim.
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
Nullam metus magna, tristique vel ultrices a, molestie quis dolor. Curabitur porta porta ullamcorper. Duis varius velit et dui auctor pretium bibendum urna gravida. Sed euismod dui in tellus euismod euismod. Nam convallis ornare fermentum. Aliquam libero augue, ullamcorper vitae lacinia at, vestibulum et risus. Praesent accumsan ultrices purus eu consequat. Phasellus posuere lobortis malesuada. Curabitur ac orci eu dui vulputate porttitor. Sed a urna et odio vulputate euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In volutpat, tortor eu dapibus vestibulum, risus metus eleifend ipsum, quis lobortis elit dolor vel ligula. Aliquam ultrices nunc in elit bibendum pharetra. Ut non ante sagittis arcu imperdiet posuere. Duis consectetur massa sit amet enim scelerisque consequat et eget magna. Curabitur tristique molestie sem quis vulputate. Sed eleifend urna neque. Nam placerat eros non augue consequat vestibulum.
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
Nam rhoncus sodales libero, et facilisis nisi volutpat et. Nullam tellus eros, consequat eget tristique ultricies, rhoncus vitae magna. Duis nec scelerisque orci. Nullam a enim est, et eleifend nunc. Proin dui eros, vulputate eget consectetur quis, ultrices ac sem. Nulla aliquam metus eu magna placerat placerat. Suspendisse eget tellus turpis, et ultricies nisi. Etiam in diam mi, sed tincidunt eros. Phasellus convallis aliquam arcu, vitae fringilla quam pharetra sed. In at augue at nibh placerat feugiat at id elit. Curabitur sit amet quam ut turpis molestie blandit in vel nulla.
</div>
</div>
</div>

<hr style="clear:both;" />

</body>
</html>



styles.html

.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#fff;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}



Gambar collapse



Download

Read more »

Posted in: Tutorial Wordpress

Cara Pasang Plugin NIVO Slider Di Wordpress

Nivo slider adalah Jquery slide image yang di buat oleh dev7 studios suatu perusahaan web design dan web development. Nivo slider adalah Jquery slide image yang paling banyak di gunakan di dunia, mudah di gunakan dan mudah di customize. Selain itu Nivo Slider banyak mendukung CMS terkenal dunia seperti WordPress dan Drupal. Untuk tahu lebih banyak tentang Nivo Slider silahkan kunjungi websitenya di sini.



salah satu contoh slider
Buka Dashboard WordPress anda kemudian klik Plugins–>Add New untuk menambahkan Plugin WP Nivo Slider. Masukan nama Plugin wp nivo slider kemudian cari.

Akan muncul beberapa nama plugin serupa, pastikan kamu memilih WP Nivo Slider karya Rafael Cirolini




Selanjutnya klik Install untuk melakukan instalasi plugin WP Nivo Slider.


Proses instalasi plugin 
Klik activate plugin untuk mengaktifkan plugin Nivo Slider yang baru saja kita instal. Nah, sekarang plugin Nivo Slider telah aktif di wordpress anda. Langkah selanjutnya adalah membuat kategori.
Masuk ke Post > Categories > Add New Category 
tambah kategori 

Selanjutnya, buatlah postingan baru dan tambahkan gambar /add media. Upload gambar kemudian setting sebagai use as featured images seperti di bawah ini, save - close windows. Checklist kategori movie pada lakukan juga pada post lain yang anda inginkan di tampilkan dalam slider image.


Langkah selanjutnya masuk ke Settings–>WP Nivo Slider, setting WP Nivo slider seperti gambar berikut.


Nivo Slider setting 

Category –> Pilih Kategori sesuai dengan 2 post yang sudah anda buat tadi yaitu di bawah kategori slider. 
Number Of Slices –> saya membiarkan dalam posisi default yaitu 5 slices
Type of Animation –> Pilih efek animasi yang anda inginkan ada random, slide down, slice up, fold, fade dll. Dalam tutorial ini saya menggunakan efek fade.
Ukuran Gambar –> Buat ukuran gambar sesuai dengan template anda, dalam contoh ini saya membuat ukuran 400×200.

Edit file index.php dari template wordpress yang aktif, dalam contoh ini saya menggunakan template bawaan dari WordPress yaitu twentyeleven struktur direktorinya ada di wp-content–>themes–>twentyeleven–>index.php.




Kemudian tambahkan code berikut di index.php anda setelah <div id="content" role="main">:

<?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?>




Kemudian save index.php yang sudah anda edit. Nah, sekarang untuk melihat hasilnya. klik visite site. Jrengg,, ini dia nivo slider yang baru kita buat tadi. Ini menggunakan template standar "tweenty eleven"



Anda bisa edit ukuran gambar dan css sesuai yang anda inginkan agar mendapatkan tampilan yang lebih memuaskan. Silahkan explore Nivo dan WordPress

Read more »

Posted in: Tutorial Wordpress

Bagaimana Tambahkan Formulir Formidable ke Halaman Web Statis Eksternal

Anda dapat menggunakan Formidable Pro untuk menambahkan bentuk email ke website klien statis atau website yang tidak di Wordpress dan sebenarnya sangat mudah. Anda dapat menambahkan bentuk Formidable di mana saja dan dalam ukuran widget.

Sebenarnya setiap bentuk dibuat dengan Formidable Pro memiliki hubungan langsung yang dapat ditambahkan dalam setiap halaman sebagai dokumen iframe. Layout form responsif sehingga bentuk disesuaikan lebar bingkai otomatis. Dengan kata lain jika Anda ingin menambahkan bentuk lebar 200px atau 300 px lebar, itu disesuaikan dengan lebar otomatis.

• Pergi ke panel pilihan Anda Plugin
• Sekarang salin link langsung bentuk seperti yang ditunjukkan pada gambar

• Lalu pergi ke halaman statis atau halaman situs selain WordPress dan mengedit kode HTML
• Masukkan ifarme berikut untuk setiap divion di mana Anda ingin menambahkan bentuk

  <Iframe src = " 

membentuk link langsung

  "Frameborder =" 0 "scrolling =" no "style =" width: 280px; height: 535px; "> </ iframe> 

• Ganti teks warna biru dengan link bentuk langsung Anda
• Atur lebar dan tinggi yang suite kebutuhan Anda

Read more »

Posted in: Tutorial Wordpress

Manajemen Pasien Website dengan WordPress

Di sini saya memberitahu Anda bagaimana menyiapkan sistem manajemen pasien dengan WordPress atau bagaimana mengelola catatan pasien online. Jika Anda seorang dokter atau jika klien Anda adalah seorang dokter, itu adalah cara yang fantastis untuk mengelola pasien secara online yang dapat diakses di mana saja di mana saja.
Manajemen data sangat mahal dan jika Anda bertanya kepada pengembang untuk membuat website catatan pasien, mereka akan biaya lebih dari $ 1000 setidaknya. Tetapi dengan WordPress, Anda dapat menyelesaikan pekerjaan ini dalam $ 130 sampai $ 200.
Persyaratan

• WordPress (gratis)
• Formidable Pro Plugin
• Web Hosting (HostGator direkomendasikan)

Pertama membeli web hosting dan Install WordPress dengan installer script auto dalam beberapa detik.
Sekarang instal tangguh pro dan masukkan login Formidable Anda detail Pro di panel plugin (dengan lisensi $ 45 Anda akan dapat menginstal tangguh pro di website tunggal hanya jadi saya akan merekomendasikan Anda untuk membeli lisensi situs terbatas yang biaya $ 120 tapi bernilai banyak).
Ini adalah sepotong kue untuk menggunakan Formidable Pro dan Anda dapat membuat bentuk terbatas dengan itu. Tapi di sini Anda perlu membuat hanya bentuk tunggal sebagai "Formulir Rekam Pasien"
Pergi ke Forma dan menciptakan dari nama dengan "Rekaman Pasien"










Sekarang Anda dapat menambahkan kolom sebanyak sesuai dengan kebutuhan Anda, seperti;

Format Formulir Pasien Contoh Rekam

Nama-Usia-
Sex-Berat-
Tinggi-
Problem1-
Problem2-
Patologi Laporan-
X-Ray-USG-
MRI-CT Scan
Visit - [Pertama kali] [Kedua kalinya] [Ketiga waktu] + + + lebih (jika pasien datang pertama kali, Anda dapat mengedit nilai ini ketika pasien akan datang kedua kalinya dll)
Pasien signature
Ditetapkan obat-obatan [Oral] -
Ditetapkan obat-obatan [Injeksi] -

Read more »

Posted in: Tutorial Wordpress

Cara Membuat Formulir Kolom Multi WordPress

Dalam tutorial ini saya telah memberitahu bagaimana menciptakan bentuk-bentuk kolom multi WordPress bentuk terbaik pembangun Formidable Pro. Sekarang sangat mudah untuk membuat bentuk-bentuk kolom dua atau tiga menggunakan readymade kelas Formidable CSS.

• Pertama-tama membuat formulir dengan setidaknya dua bidang.
• Sekarang pilih kolom pertama untuk mengeksplorasi pilihan yang ditunjukkan pada gambar

• Di sini cari opsi "CSS kelas tata letak"

Untuk membuat tata letak dua kolom masuk kelas setelah dalam dua bidang
frm_first_half,
frm_last_half

Untuk membuat tata letak tiga kolom memasuki kelas berikut dalam tiga bidang
frm_first_third,
frm_third,
frm_last_third

Read more »

Posted in: Tutorial Wordpress

Cara Membuat Formulir Data Entry Dengan Wordpress

WordPress adalah CMS yang sangat baik, atau sistem manajemen konten. Ini pertama kali dikembangkan untuk menjadi berita dan platform komentar untuk tujuan blog. CMS telah sangat membaik sejak WordPress pertama kali tersedia. WordPress sekarang telah berkembang menjadi alat tujuan umum yang memungkinkan administrator untuk mengatur hampir semua jenis informasi, baik teks atau gambar. Sayangnya, WordPress dasar instalasi kekurangan alat yang memungkinkan untuk penciptaan bentuk entri data. Satu-satunya data yang dapat diterima dari pengguna komentar pengunjung dan tidak banyak lagi. Tentu saja, data item yang diperlukan untuk order entry memadai atau tujuan pelacakan. Untungnya, ada plugin, atau ekstensi kode, untuk WordPress yang dapat memperluas sistem dengan kemampuan penciptaan bentuk. Salah satu seperti Plugin Formidable Pro, sebuah desain alat bentuk yang sangat baik yang juga menyediakan kemampuan layar. Sekarang administrator WordPress memiliki alat yang kuat yang diperlukan untuk membuat bentuk-bentuk yang canggih entri data.

Formidable Pro menginstal di Wordpress sebagai plugin. Ia menambahkan opsi baru ke dashboard seperti penciptaan bentuk, tampilan entri data dan banyak lagi. Setelah terinstal, administrator situs dapat menggunakannya untuk menciptakan bentuk-bentuk baru segera . Untuk keperluan entri data, formulir dapat mencakup bidang yang relevan untuk tujuan tertentu. Misalnya Fox, seorang pelanggan data formulir entri mungkin memiliki kolom untuk nama, informasi alamat, email dan lainnya pribadi. Formidable Pro menyediakan alat validasi untuk bidang tersebut. Entri dapat dibatasi dengan nilai-nilai tertentu seperti "YA" atau "NO". Kolom angka dapat menegakkan aturan yang hanya membolehkan angka. Ini dapat dibatasi pada rentang tertentu seperti dari 0 sampai 100 untuk persentase. Lokasi negara dapat divalidasi menggunakan daftar nilai yang benar. Seperti data aturan adalah cara yang baik untuk memastikan entri data ke dalam bentuk kualitas. Melakukan validasi data pada kesempatan paling awal adalah praktek pemrograman yang baik. Selain validasi, Formidable Pro memungkinkan administrator situs untuk menambahkan fitur tambahan untuk form yang dibuat. Drop down daftar pilihan dapat ditambahkan. Hal ini memungkinkan pengunjung untuk memilih item yang valid, (seperti warna), dari nilai-nilai acceptible. Mendapatkan data benar sebelum disimpan adalah cara yang baik untuk mencegah masalah data masa depan.

Sementara Formidable Pro dapat dipasang di salah satu dari dua mode, gratis dan berbayar, bentuk entri data benar-benar hanya didukung dalam satu dibayar. Versi gratis ini mampu menyediakan beberapa fitur tetapi tidak memiliki sebagian besar kemampuan canggih. Versi ini dapat menerima entri data seperti nama, alamat, dll ada pilihan penyimpanan database, bagaimanapun, jadi masukan semua harus diemail ke administrator situs WordPress. Karena tidak ada penyimpanan data, tidak ada kemampuan layar baik. The Formidable bebas Pro versi tidak termasuk validasi CAPTCHA yang merupakan cara terbaik untuk menghilangkan spam dari robot.

The Formidable Pro versi berbayar adalah pembangkit tenaga listrik yang benar dalam bentuk entri data. Entri penggunaan segala bentuk akan disimpan secara otomatis dalam database. Nilai lapangan dapat diambil sebagai laporan, digunakan dalam program atau di-download sebagai spreadsheet. Setelah formulir mengumpulkan data, Formidable Pro memungkinkan proses sistem yang canggih. Misalnya, halaman konfirmasi dapat ditampilkan setelah "OK" ditekan. Alamat email yang dikumpulkan dapat ditambahkan ke daftar distribusi email. Otomatis WordPress pendaftaran pengguna dapat diaktifkan. Pilihan ini, dan beberapa lagi, mudah oleh administrator WordPress menggunakan entires dashboard Formidable Pro tersedia dengan versi berbayar.

The Formidable Pro Plugin versi berbayar daftar untuk hanya $ 47. Dibandingkan dengan biaya programmer berdedikasi, Formidable Pro adalah nilai yang besar. Plugin ini memungkinkan orang untuk membuat bentuk entri data dalam hitungan menit, tanpa pemrograman kustom. Bentuk yang sama dirancang dan dilaksanakan sebagai program kustom atau sub-rutin akan membutuhkan setidaknya satu jam dari waktu pengembangan. Tergantung pada kebutuhan seperti bentuk, waktu yang dibutuhkan bisa lebih substansial juga. Untuk mencocokkan fitur lengkap yang disediakan oleh Formidable Pro, program kustom akan perlu memiliki tabel database didefinisikan di muka. Ini akan perlu menghubungkan ke database, item retrive, menampilkan mereka dalam bentuk HTML, menerima masukan dan menyimpan nilai-nilai dikoreksi kembali ke database. Setiap langkah membutuhkan banyak waktu untuk mengimplementasikan oleh pengembang. Tambahkan ke ini waktu untuk mendaftar secara otomatis pengguna, redirect ke layar kustom dan mengembangkan menampilkan entri data dan Anda mulai melihat berapa banyak pekerjaan yang diselamatkan oleh Formidable Pro. Biaya rendah $ 47 adalah nilai yang diperoleh kembali temendous mudah hanya pada bentuk pertama dibuat di situs Wordpress.

Sementara Formidable Pro adalah alat yang mudah digunakan, ada kebutuhan bagi administrator untuk mempelajari beberapa dasar-dasar sebelum mereka benar-benar profient untuk menciptakan bentuk entri data. Untungnya, sebuah situs dukungan yang sangat baik menyediakan tutorial dan basis pengetahuan yang menyediakan semua informasi yang dibutuhkan. Selain itu, situs ini menawarkan mekanisme dukungan yang sangat baik. Desainer Alat pertanyaan memantau diterima dan mereka memberikan solusi cepat. Ada banyak informasi yang tersedia di situs dukungan dari artikel ke tutorial untuk video. Kebanyakan setiap administrator WordPress akan menemukan informasi yang mereka butuhkan dalam format yang terbaik untuk mereka. Ini adalah plus besar untuk alat entri data bentuk bangunan, salah satu yang kurang pada sebagian besar alat-alat seperti lainnya.

Versi dibayar dari Pro Formidable juga dilengkapi dengan add-ons yang meningkatkan CMS Wordpress bahkan lebih. Ini tambahan opsional dikonfigurasi dalam folder plugin yang diinginkan. Mudah untuk menggunakan ekspansi PayPal sangat berguna. Ini add-on memungkinkan formulir untuk kembali langsung ke PayPay untuk layanan pembayaran. Setelah terinstal, tersedia sebagai pilihan pada semua bentuk dikembangkan. Ia bekerja dengan baik dan bebas dengan versi Pro dibayar Formidable. Lain add-on menambahkan dukungan mailing daftar email dengan layanan MailChimp. Administrator membuat account MailChimp, dan daftar distribusi, yang dapat diaktifkan dengan bentuk data yang dikembangkan entri. Ketika orang menyerahkan alamat email mereka pada formulir entri data, mereka dapat secara otomatis ditambahkan ke milis yang sesuai. Fitur ini diaktifkan per formulir entri data sehingga administrator memiliki kontrol penuh dari daftar yang digunakan. Sebagai contoh, sebuah situs WordPress mungkin memiliki bentuk entri data yang mengumpulkan alamat orang yang tertarik dalam menawarkan ujicoba. Orang-orang ini dapat ditambahkan ke daftar "Trial Pengguna" distribusi. Orang lain mungkin ingin melihat opsi lanjutan. Orang-orang ini dapat ditambahkan ke daftar "Advanced Pengguna". Modul add-on yang mendukung interface MailChimp mudah untuk diinstal. Setelah di tempat, memungkinkan penambahan daftar email hanya dengan beberapa klik mouse. Seperti biasa, tidak ada pemrograman kustom yang terlibat ketika free add-ons yang digunakan.

Formidable Pro adalah plugin besar yang dapat meningkatkan setiap situs WordPress. Ini fitur kemampuan yang biasanya membutuhkan banyak jam upaya pengembangan oleh programmer berpengalaman. Dengan Formidable Pro, tugas sebelumnya sulit, seperti bentuk entri data kustom, dapat dikembangkan dalam beberapa menit, oleh administrator WordPress biasa, tanpa pemrograman kustom. Dengan biaya hanya $ 47, versi dibayar adalah kesepakatan, mungkin nilai terbaik yang tersedia untuk Wordpress saat ini.

Read more »

Posted in: Tutorial Wordpress

Instal manual Formidable Pro

Anda hanya harus menggunakan proses ini jika proses instalasi otomatis hanya tidak bekerja untuk Anda, atau jika Anda menginstal versi beta ... Jika Anda memiliki masalah izin dengan hosting Anda, Anda mungkin harus mengulangi proses ini setiap kali ada versi baru dari Formidable Pro.
Berikut adalah apa yang Anda lakukan:

1. Login kemudian kembali ke halaman ini.
2. Jangan download Formidable dari WordPress sama sekali. Saya menyediakan file zip Formidable yang memiliki Formidable Pro pra-instal. Pergi ke URL ini: http://formidablepro.com/manual_downloads/ , masukkan Username & Password untuk sampai ke halaman download.
3. Pilih versi terbaru dari Formidable Pro dan Download.
4. Jika Anda memiliki versi lain dari instal Formidable, menonaktifkannya dari Anda Page Plugin WordPress.
5. Entah pergi ke halaman plugin Anda dan klik "Hapus" link di sana, atau pergi ke server web Anda (melalui FTP, SSH, SFTP, dll) dan menghapus seluruh folder tangguh. Setiap bentuk disimpan dan entri tidak akan dihapus kecuali jika Anda mengklik "Uninstall" tombol pada "Formidable" -> "Pengaturan" halaman.
6. Sekarang, Anda memiliki dua pilihan. Anda dapat meng-upload melalui admin Wordpress, atau melalui FTP.
   Untuk meng-upload melalui WordPress:
   1. Pergi ke "Plugins" -> "Add New".
   2. Alih-alih mencari sebuah plugin, Anda dapat meng-upload file plugin zip Anda dengan mengklik "Upload".
   3. Klik tombol "Browse" untuk mencari file zip Formidable, dan kemudian klik "Install Now".
   Untuk meng-upload melalui FTP:
   Unzip file Formidable Anda download dari formidablepro.com dan meng-upload folder ke direktori plugin WordPress Anda.
7. Mengaktifkan Plugin Formidable dari halaman Plugins WordPress.
8. Pergi ke "Formidable" -> "Settings" dan masukkan Username & Password untuk Aktifkan Fitur Pro Anda (jika mereka tidak sudah ada)

Ingat, Anda akan harus melalui langkah-langkah setiap kali Anda memperbarui jika hosting Anda tidak memberikan hak yang cukup untuk menulis file dari website Anda.

Read more »

Posted in: Tutorial Wordpress

CMS

PENDAHULUAN

1.1  Latar Belakang
Dewasa ini perkembangan dunia yang paling cepat dirasakan adalah perkembangan teknologi informasi dan komunikasi. Sebagai salah satu bagian dari teknologi informasi itu, dikenal adanya internet, sebelum itu diperkenalkan dengan istilah Jaringan (Network). Jaringan (network) adalah kumpulan dua atau lebih komputer yang terhubung secara fisik sehingga keduanya dapat saling berkomunikasi. Jaringan dengan jaringan bersatu membentuk internetworking, lalu internetworking dan internetworking bersatu membentuk internet. Internet adalah kumpulan paling akhir dan paling besar dari jaringan di seluruh dunia.
Dunia internet tidak lepas dari teknologi Website atau lebih dikenal dengan sebutan web, web adalah salah satu fitur dari intenet disamping fitur-fitur lain seperti e-mail, remote ( SSH ), dan ftp.       CMS (Content Management Sistem) secara definisi dapat diartikan sebagai Sebuah sistem atau aplikasi software yang memberikan kemudahan-kemudahan kepada para penggunanya dalam mengelola, mengupload, mengedit konten untuk ditampilkan pada sebuah web dan mengadakan perubahan isi konten sebuah website tanpa perlu harus dibekali pengetahuan tentang hal-hal yang bersifat teknis tanpa harus memiliki pengetahuan tentang bahasa pemrograman web.
Dengan demikian, setiap orang, penulis maupun editor maupun yang baru belajar web designer/development atau orang awam sekalipun setiap saat dapat menggunakannya secara leluasa untuk membuat, menghapus atau bahkan memperbaharui isi website tanpa campur tangan langsung dari pihak webmaster.
Secara umum, arti dari content management adalah menggunakan koneksi dengan halaman web sehingga proses maintenance (pemeliharaan) dapat dilakukan lewat browser(web-base). Sulit untuk mendefinisikan CMS secara utuh karena meliputi sifat dan berbagai fungsi yang sangat beragam. Karena sistem ini saling berkaitan dengan perusahaan pembuat software, opensource atau aplikasi-aplikasi di dunia, maka sistem ini akan selalu berkembang secara berkelanjutan yang pada prinsipnya sistem ini akan selalu dikembangkan menjadi sistem yang terintegrasi dengan sistem lainnya dan akan selalu disempurnakan.
Karena CMS memisahkan antara isi dan desain, konsistensi tampilan dapat senantiasa dijaga dengan baik. Setiap bagian dari website dapat memiliki isi dan tampilan yang berbeda-beda, tanpa harus khawatir kehilangan identitas dari website secara keseluruhan. Oleh karena semua data disimpan dalam satu tempat, pemanfaatan kembali dari informasi yang ada untuk berbagai keperluan dapat dengan mudah dilakukan.
CMS juga memberikan kefleksibelen dalam mengatur alur kerja atau ‘workflow’ dan hak akses, sehingga memperbesar kesempatan berpartisipasi dari pengguna dalam pengembangan website. Hal ini akan sangat menguntungkan bila website yang dikelola memiliki kompleksitas yang tinggi dan mengalami kemajuan yang cukup pesat
Keuntungan menggunakan CMS adalah menjaga website terstruktur dengan baik dan komprehensif, mengurangi biaya pemeliharaan website tersebut, dan meningkatkan keamanan data. Pada laporan ini akan termuat tiga teori CMS beserta dengan cara instalasinya yaitu berupa cms SilverStripe, Mambo, dan e107,
1.2  Batasan Masalah
Ada beberapa masalah yang  termuat di dalam laporan ini adalah sebagai berikut:

1. Bagaimana cara instalasi silverstripe CMS pada Localhost?
2. Bagaimana cara instalasi e107 CMS pada Localhost?
3. Bagaimana cara instalasi wordpress CMS pada Localhost?

1.3  Tujuan
Adapun tujuan dalam menyusun laporan ini adalah :

1. Untuk mengetahui cara instalasi silverstripe CMS pada Localhost.
2. Untuk mengetahui cara instalasi e107 CMS pada Localhost.
3. Untuk mengetahui cara instalasi wordpress CMS pada Localhost.

BAB II

KAJIAN PUSTAKA

2.1  Pengertian CMS
CMS (Content Management System) adalah aplikasi web yang siap pakai. Ini merupakan istilah untuk pemilik website mengupdate websitenya tanpat bantuan pengembang web. Yang dilakukan pengembang web hanya installasi awal dan konfigurasi awal saja. Selanjutnya untuk pengisian artikel, gambar, dan konten-konten lainnya bisa dilakukan oleh pemilik website tanpa harus mengetahui kode-kode HTML ataupun pemrograman web seperti PHP atau ASP .NET
Content Management System (CMS) adalah software sistem manajemen konten yang diimplementasikan dalam bentuk aplikasi web, digunakan untuk membuat dan mengelola konten HTML. Aplikasi ini dipakai untuk mengelola dan mengatur material web (dokumen HTML dan gambar yang terkait) yang dinamis dalam jumlah besar. CMS memfasilitasi pembuatan dan pengaturan konten, pengeditan, dan banyak fungsi esensial dari pemeliharaan web.
a.      Fungsi CMS
Beberapa manfaat dari penggunaan CMS dapat dijabarkan sebagai berikut:
1.      Manajemen data
Ini merupakan fungsi utama dari CMS. Semua data/informasi baik yang telah ditampilkan ataupun belum dapat diorganisasi dan disimpan secara baik. Suatu waktu data/informasi tadi dapat dipergunakan kembali sesuai dengan kebutuhan. Selain itu, CMS juga mendukung berbagai macam format data, seperti XML, HMTL, PDF, dll., indexing, fungsi pencarian, dan kontrol terhadap revisi yang dilakukan terhadap data/informasi.
2.      Mengatur siklus hidup website
Banyak CMS memberikan fasilitas kepada para penggunanya untuk mengelola bagian atau isi mana saja yang akan ditampilkan, masa/waktu penampilan dan lokasi penampilan di website. Tak jarang sebelum ditampilkan, bagian atau isi yang dimaksud terlebih dahulu di-review oleh editor sehingga dijamin kevaliditasannya.
3.      Mendukung web templating dan standarisasi
Setiap halaman website yang dihasilkan berasal dari template yang telah terlebih dahulu disediakan oleh CMS. Selain dapat menjaga konsistensi dari tampilan secara keseluruhan, para penulis dan editor dapat berkonsentrasi secara penuh dalam melaksanakan tugasnya menyediakan isi website.
4.      Personalisasi website
Sekali sebuah isi ditempatkan ke dalam CMS, isi tersebut dapat ditampilkan sesuai dengan keinginan dan kebutuhan dari penggunanya. Terlebih lagi dengan kelebihan CMS yang dapat memisahkan antara desain dan isi, menyebabkan proses personalisasi dapat berjalan dengan mudah.
5.      Sindikasi
Sindikasi memberikan kemungkinan kepada sebuah website untuk membagi isinya kepada website-website yang lain. Format data yang didukung juga cukup variatif mulai dari rss, rdf, xml hingga ‘backend scripting’. Sama halnya dengan personalisasi, sindikasi juga dapat dilakukan dengan mudah karena isi dan desain telah dibuat terpisah.
6.      Akuntabilitas
Oleh karena CMS mendukung alur kerja dan hak akses yang jelas kepada para penggunanya, data/informasi yang disampaikan dapat dipertanggungjawabkan dengan baik. Setiap penulis ataupun editor memiliki tugas masing-masing dengan hak akses yang berbeda-beda pula.
b.      Kelebihan & Kekurangan CMS
Kelebihan CMS :

• Waktu pembuatan website cepat, karena tidak menulis kode dan merancang database.
• Isi website bisa diubah oleh orang yang tidak menguasai pemrograman web (HTML, PHP, CSS, JS, dll).
• Banyak CMS yang tersedia gratis dan open source.
• Banyak tersedia ekstensi (modul, template, dll) untuk penambahan fitur dengan cepat.

Kekurangan CMS :

• Bentuk dan fitur website mirip dengan website yang lain yang dibuat dengan CMS yang sama.
• Fitur dan fungsi website terbatas, tidak 100% sesuai dengan keinginan pemilik website.
• Terbatasnya editing kode HTML ataupun PHP.
• Untuk website kecil penggunaan CMS terlalu berlebihan, dan untuk website enterprise, menggunakan CMS fiturnya terlalu terbatas.

Ada beberapa CMS  berikut ini yang sangat populer yang bisa gunakan secara gratis. Tujuannya adalah untuk membuat website sesuai dengan kebutuhan. Di antaranya adalah SilverStripe, e107, dan WordPress
2.2  SilverStripe CMS

SilverStripe adalah CMS mempunyai fitur lengkap dan mampu menyediakan apa yang kita butuhkan. CMS ini dibangun memggunakan bahasa pemrograman php dan database Sapphire . SilverStripe mempunyai banyak pendukung aplikasi dan dapat membantu para pengembang untuk lebih berkarya. SilverStripe di rilis pada bulan November tahun 2006 oleh beberapa orang team yang ahli di bidang OpenSource.
SilverStripe adalah sistem manajemen konten sumber bebas dan terbuka (CMS OpenSource) untuk menciptakan dan memelihara website. Hal Ini memberikan keluaran dari panel berbasis web kotak administrasi yang memungkinkan pengguna untuk membuat modifikasi pada bagian-bagian situs web, yang mencakup situs web editor WYSIWYG. Inti dari SilverStripe CMS adalah Sapphire, Web PHP kerangka aplikasi.
SilverStripe dirilis di bawah Lisensi BSD. Sebuah demonstrasi online dari CMS tersedia sebagai video dan sebagai demo interaktif. Dokumentasi yang tersedia untuk pengguna CMS dan pengembang website.
Inti dari SilverStripe bernama Sapphire. Sapphire menyediakan pengembangan situs kerangka untuk membangun dan memperluas website didasarkan pada teknik pemrograman modern termasuk model-view controller (MVC seperti, model tersebut tidak mencakup kemampuan untuk memberitahu pandangan update ) pola dan objek-relasional mapper.
SilverStripe menghasilkan markup menggunakan bahasa template kustom berdasarkan HTML yang menawarkan penampung sederhana dan logika kondisional. SilverStripe dapat dikembangkan melalui modul, widget, tema, kustomisasi kode, dan ModelAdmin.
1. Kelebihannya :
a. Fitur yang sangat lengkap
b. Bisa melakukan apa saja sesuai keinginan kita.
c. Menggunakan Php dengan kerangka sapphire sehingga bisa disesuaikan.
d. Memiliki banyak dukungan gratis
e. Dokumentasi yang lengkap bagi para pengembang.
2.  Kekurangannya :

1. Stock templatenya belum banyak dan masih terbatas .
2. Belum bisa memberi review banyak karena masih coba.

2.1  e107 CMS

CMS e107 adalah Penerbitan Solusi Konten Lanjutan Pages Situs Web, Dokumen, Menu dan Link (Content Management System) didukung oleh PHP dan MySQL yang memberikan Anda sebuah website benar-benar dinamis dan profesional “di luar kotak”. Ini open source (gratis), mudah disesuaikan dan tidak memerlukan pengetahuan tentang bahasa pemrograman untuk menggunakannya untuk membangun sebuah situs web. Hal ini mudah digunakan untuk pemula dan belum kuat dan cukup fleksibel untuk memenuhi kebutuhan para profesional.
Dengan e107 Anda dapat membuat website bisnis dengan mudah dan cepat atau situs komunitas. Ada sistem forum yang kuat sebagai aplikasi dasar dan file-based caching dengan kinerja tinggi. CMS e107 dirilis di bawah GNU General Public License.

1. Kelebihannya :

• Tampilan yang bagus
• Installasi mudah
• Stok template banyak tapi biasa masih harus buat sendiri
• Admin panel cukup bersahabat
• Support di forumnya cukup lengkap

2.1  WordPress CMS

1. SejarahWordpress

(Matt Mullenweg, Ketua Pengembang WordPress)
Sejarah WordPress dimulai saat Matt Mullenweg yang merupakan pengguna aktif dari b2 mengetahui bahwa proses pengembangan b2 dihentikan oleh pemrogramnya (programmer) yang bernama Michel Valdrighi, Matt Mullenweg merasa sayang dan mulai melanjutkan pengembangan b2.^[6]
WordPress muncul pertama kali di tahun 2003 hasil kerja keras Matt Mullenweg dengan Mike Little.^[6] Yang membuat WordPress makin terkenal, selain karena banyaknya fitur dan tampilan yang menarik, adalah juga karena dukungan komunitas terhadap perangkat lunak sumber terbuka untuk blog. ^[6]
WordPress.com dan WordPress.org
WordPress menyediakan dua alamat yang berbeda, yaitu WordPress.com dan WordPress.org^[7].
WordPress.com merupakan situs layanan blog yang menggunakan mesin WordPress, didirikan oleh perusahaan Automattic^[5]. Dengan mendaftar pada situs WordPress.com, pengguna tidak perlu melakukan instalasi atau konfigurasi yang cukup sulit.^[5] Sayangnya, pengguna WordPress.com tidak dapat mengubah template standar yang sudah disediakan.^[8] Artinya, pengguna tidak dapat menambahkan asesori apa pun selain yang sudah disediakan.^[8] Meski demikian, fitur yang disediakan oleh WordPress.com sudah cukup bagus.^[8]
WordPress.org merupakan wilayah pengembang (developer). Di alamat ini, seseorang dapat mengunduh (download) aplikasi beserta seluruh berkas CMS WordPress. Selanjutnya, CMS ini dapat diubah ulang selama seseorang menguasai PHP, CSS dan skrip lain yang menyertainya.^[7] WordPress dengan Bahasa Indonesia ada berkat kerja para kontributor di Indonesia yang dipimpin oleh Huda Toriq, seorang Mahasiswa Kedokteran dari Universitas Diponegoro (UNDIP) Semarang.^[9]
Berikut ringkasan perbedaan dalam penggunaan WordPress.com dan WordPress.org:^[7]

• WordPress.com: untuk pengguna yang ingin membuat blog sendiri secara cepat dan punya alamat website.
• WordPress.org: untuk pengguna yang ingin memodifikasi WordPress menurut kebutuhan sendiri atau ingin membuat blog menggunakan alamat dan server sendiri.

1. Versi
Para pengembang inti WordPres saling berbagi layaknya membuat komposisi musik jazz, dan setiap rilis diberikan sebutan (nama) dalam rangka penghormatan kepada para musisi jazz tersebut dengan segala penghormatan dan pujian. Namun ada tiga rilisan sebelum versi 1.0 yang tidak mereka beri sebutan dan hanya menyertakan versinya saja.^[10] Berikut daftar versi, tanggal rilis dan nama sandi yang berasal dari nama musisi jazz: ^[10]
2. Pengertian WordPress

WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya.
WordPress adalah sebuah blog tool berdasarkan bahasa pemograman PHP dan data base Mysql dan berlisensi public (GPL),wordpress merupakan CMS(Content management system)yang bersifat gratis.         CMS disini adalah yang dimaksud disini adalah sebuah perangkat lunak yang dapat mengatur isi dari sebuah situs maupun blog.wordpress merupakan sebuah platform blog sebagai penerus dari generasi B2/Cafeblog dan masih serupa seperti CMS berbasis PHP dan Mysql lainya.
Fitur wordpress ini bersifat dinamis, hal ini disebabkan adanya perbaikan bahkan perombakan dari versi lama ke versi yang lebih baru. Namun secara umum fitur wordpress ini dapat dituliskan sebagai berikut:

• Merupakan sebuah Content Management System
• Lisensi GNU General Public License sehingga dapat didownload secara bebas (gratis)
• Support dokumentasi yang lengkap dan komunitas yang banyak
• Support dengan berbagai bahasa, bahkan untuk sekarang ini bukan hanya bahasa Indonesia yang telah disupport akan tetapi WordPress dalam bahasa sunda pun sudah tersedia.
• Fasilitas pencarian yang komprehensif.
• Administrasi dan maintenance sangat mudah
• Kemudahan posting dengan dukungan WYSIWYG (What You See Is What You Get) editor.
• Kemudahan mengimport data dari sistem blog lainnya.
• Menggunakan interface XML RPC yang memungkinkan posting dari mana saja.
• Sindikasi otomatis dengan Atom dan RSS
• Support kategori dan sub kategori yang tak terbatas.

1. Kelebihan :
2. Kekurangan :

• Adanya themes yang bisa dipilih lebih dari 100
• Dashboard yang lengkap
• Pada beberapa themes bisa mengganti header dan kode css
• Bisa menambahkan page baru
• Adanya anti spam otomatis
• Plug in sangat banyak karena bersifat open source
• CMS-nya bisa di download dan dijalankan secara offline atau dipasang di web hosting lain
• WordPress menyediakan file upload untuk dokumen dan gambar
• Mudah dalam meninggalkan komentar
• Dapat membuat sub category

• Tidak bisa digunakan untuk berbisnis
• Tidak support javascrip
• Tidak bisa mengedit themes misalnya merubah css dan HTML kecuali upgrade berbayar

BAB III

PEMBAHASAN

3.1    Cara Instalasi Silverstripe CMS Pada Localhost
SilverStripe adalah CMS mempunyai fitur lengkap dan mampu menyediakan apa yang wisnu butuhkan. CMS ini dibangun memggunakan bahasa pemrograman php dan database Sapphire . SilverStripe mempunyai banyak pendukung aplikasi dan dapat membantu para pengembang untuk lebih berkarya. SilverStripe di rilis pada bulan November tahun 2006 oleh beberapa orang team yang ahli di bidang OpenSource.
Adapun cara instalasi silverstripe cms pada localhost adalah sebagai berikut.
Langkah 1 :

Buat new folder di data C://XAMPP//htdocs dengan nama folder silverstripe, atau sesuai dengan keinginan Anda. Setelah itu, cari file SilverStripe-cms-v3.0.3 lalu klik, kemudian extract to folder yang sudah di buat sebelumnya.
Langkah ke-2 :
Buka browser (firefox/chrome) lalu ketik URL localhost/phpmyadmin tekan enter , maka muncullah gambar seperti di bawah ini. Lalu pilih bahasa sesuai yang di inginkan

Setelah itu, pilih DATABASE maka tampil gambar seperti di bawah ini. Lalu masukkan Create new Database dengan nama dbsilverstripe lalu create, sesuai petunjuk di bawah ini.

Langkah Ke-3 :
Setelah pembuatan database selesai, maka selanjutnya buka browser (Chrome/Firefox) lalu ketik http:localhost/silverstripe, sesuai nama folder yang telah dibuat di XAMPP/htdocs, maka akan muncul seperti di bawah ini

Setelah tampil layar di atas, maka selanjutnya klik SilverStripeCMS-v2.4.2. sesuai petunjuk di atas, maka tampillah gambar berikut ini.

Keterangan pengisian server untuk gambar di atas adalah: isi server = localhost,  username = root, password = dikosongkan, dan database name = dbsilverstripe
Langkah Ke-4 :
Isi email = sesuai dengan keinginan Anda misalkan ; deviyati_adm_tik@yahoo.com Password = password sesuai keinginan Anda, lalu klik Instal SilverStripe.

Langkah Ke-5 :
Setelah selesai tahap pengisian server berdasarkan petunjuk diatas, maka kita tunggu tahap proses penginstalan ini sampai selesai., ternyata hasil dari penginstalannya ialah seperti tampilan berikut ini.

Proses instal telah sukses, maka tinggal (Click Here to Delete the Instal Files) yang berwarna biru.
Langkah Ke-6 :
Setelah click here to delete the install files, maka akan muncul tampilan seperti ini.

Setelah melakukan Log In, maka muncul Silahkan Log In dengan menggunakan Email dan Password yang Anda pakai pada saat penginstalan sebelumnya.
Langkah Ke-7 :
tampilan gambar di bawah ini. Di sini muncul file Instalasi telah di hapus, kemudian klik the CMS yang berwarna biru untuk melihat website Anda.

Setelah klik the CMS, maka yg akan muncul seperti gambar di bawah ini. Tampilan berikut ini adalah tampilan administrator dari SilverStripe CMS dengan konten-konten didalamnya.

3.2   Cara Instalasi e107 CMS pada localhost
Dengan e107 Anda dapat membuat website bisnis dengan mudah dan cepat atau situs komunitas. Ada sistem forum yang kuat sebagai aplikasi dasar dan file-based caching dengan kinerja tinggi. CMS e107 dirilis di bawah GNU General Public License.
Adapun cara instalasi e107 cms pada localhost adalah sebagai berikut.
Langkah 1 :
Sebelum melakukan proses extract ,terlebih dahulu buat new folder di data C://XAMPP//htdocs dengan nama folder e107cms. Setelah itu, cari file e107_1.0.2_full lalu buka, kemudian extract to folder yang sudah di buat sebelumnya.
Langkah ke-2 :
Buka browser (mozilla atau yang lainnya) lalu ketik URL nya localhost/phpmyadmin tekan enter , maka muncullah gambar seperti di bawah ini. Lalu pilih bahasa yang di inginkan.

Setelah itu pilih DATABASE, maka tampil gambar seperti di bawah ini. Lalu masukkan Database baru dengan nama e107cms dan ciptakan, sesui petunjuk gambar di bawah ini.
Setelah pembuatan database selesai, maka selanjutnya buka browser (Mozilla/Firefox) lalu ketik http:localhost/e107cms, sesuai nama folder yang telah dibuat di XAMPP/htdocs, maka akan muncul seperti gambar di bawah ini :

Lalu klik Set Language.
Langkah ke-4 :
Setelah klik Set Language, maka tampilah gambar seperti di bawah ini.

Kemudian Anda isi kotak di atas/isi server = localhost, username = root, Password = tidak perlu diiisi, database = e107cms, Lalu klik Continue.
Langkah Ke-5 :
Setelah klik continue, maka yang akan muncul tampilan di bawah ini :

Selanjutnya klik Continue.
Langkah Ke-6:
Setelah klik continue, maka muncullah gambar seperti di bawah ini.

Di sini akan mulai proses Instalasi. Maka klik Continue Installation.
Langkah Ke-7 :
Setelah klik continue installation, maka proses penginstalan akan berlanjut, lalu akan muncul gambar seperti ini.

Kemudian keterangan pengisian di atas adalah username = deviyati, Display name = Administrator, Password = password sesuai keinginan, email = deviyati_adm_tik@yahoo.com. Lalu Klik Continue.
Langkah Ke-8 :
Setelah klik continue, maka muncul seperti ini.

Klik Continue
Langkah Ke-9 :
Setelah klik continue, maka muncul tampilan sebagai berikut :

Maka berakhirlah proses installation, dan silahkan Klik Continue.
Langkah Ke-10:
Setelah klik continue, maka tampil gambar di bawah ini.

Inilah tampilan CMS e107 dan telah berhasil diinstal pada PC/Laptop Anda. Silahkan Login untuk mengubah konten pada website Anda.
Langkah Ke-11:
Setelah berhasil diinstal CMS e107 pada PC Anda, maka selanjutnya klik login sesuai petunjuk gambar diatas, maka muncul tampilan seperti di bawah ini.

Inilan tampilan untuk Log In.
Setelah Anda melihat tampilan gambar di atas ini, maka segera Anda masukkan  username dan password yang sudah d buat pada langkah – langkah di atas. Kemudian Anda Login.

Langkah Ke-12 :
Setelah Anda mengisi UserName, dan UserPassword seperti petunjuk di atas, tampilan yang akan muncul setelah Anda mengklik Log In adalah sebagai berikut :

Setelah tampil gambar seperti di atas,  kemudian Anda ingin melihat halaman administrator. Maka Anda tinggal mengklik saja Admin berdasarkan petunjuk di atas. Lalu muncullah tampilan Welcome Administrator seperti berikut ini.

3.1    Cara Instalasi WordPress CMS pada Localhost
            WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya.
Adapun langkah penginstalannya adalah seperti berikut ini :

1. Ekstrak terlebih dahulu paket modul WordPress CMS yang telah Anda download.2.  Anda akan menemukan sebuah modul yang berada di sebuah folder yang biasanya diberi nama “wordpress-35_3″.

3. Pindahkan folder modul WordPress CMS yang bernama “wordpress-35_3″ tersebut ke dalam “C:\xampp\htdocs”. Yang paling utama diperhatikan adalah penyimpanan yang harus dilakukan di folder “htdocs”. Jika sudah memindahkan atau mengcopy paste modul WordPress CMS tersebut, pembaca boleh mengganti nama folder “wordpress-35_3“ sesuai keinginan Anda. Misalkan kita pakai ajha nama foldernya dengan “wordpress”

4. Buka browser, kemudian ketik alamat “http://localhost/phpmyadmin&#8221; pada address bar sehingga muncul halaman phpMyAdmin. Lalu pilih bahasa sesuai dengan keinginan Anda. Misalkan kita pilih “Language English”.

5. Kita akan membuat database yang akan digunakan oleh wordpress CMS yang akan kita instal. Cukup tulis nama database yang akan kita gunakan pada kotak di bawah tulisan “Create new database”. Misalkan kita beri nama “dbwordpress”. Kemudian klik tombol “Create” yang ada di sebelah kanannya.




6. Masih pada browser Anda, ketikkan juga alamat “http://localhost/wordpress&#8221; pada address bar-nya. Perhatikan bahwa alamat tersebut bergantung pada penamaan folder yang Anda berikan pada langkah 3. Karena kita memberi nama foldernya adalah “wordpress”, maka alamat URL-nya adalah “http://localhost/wordpress&#8221;. Namun, jika pembaca memberi nama lain misalnya “webku”, maka alamatnya menjadi “http://localhost/webku&#8221;. Maka muncul pada halaman index of/wordpress.

7. Setelah klik wordpress sesuai petunjuk di atas, maka muncul tampilan di bawah ini. File tersebut merupakan file yang berisi setting (konfigurasi) untuk web WordPress CMS kita. Untuk membuat file konfigurasi tersebut, klik tombol yang bertuliskan “Create a Configuration File”.

8. Selanjutnya akan muncul halaman “Setup Configuration File” seperti berikut ini. Klik tombol yang bertuliskan “Let’s Go!”.
9. Halaman yang selanjutnya muncul adalah halaman isian untuk setting konfigurasi.

• Database Name : isi dengan nama database yang kita create pada langkah 5, yaitu “dbwordpress”.
• User Name : isi dengan username yang punya akses untuk masuk ke dalam sistem phpMyAdmin pada server yang kita gunakan. Untuk localhost dengan XAMPP, biasanya username-nya adalah “root”. Password : kosongkan saja..
• Database Host : karena kita menyimpan/menghosting web kita pada localhost, maka isi dengan “localhost”.
• Table Prefix : digunakan untuk mengunikkan tabel pada database “dbwordpress”. Untuk sementara gunakan yang default, yaitu “wp_”.

Setelah itu klil tombol Submit.
10. Jika pengaturan sudah benar, maka akan muncul halaman seperti di bawah ini. Klik tombol Run the install .
11. Selanjutnya Anda akan diminta untuk mengisi informasi tentang web yang akan Anda buat dengan WordPress CMS ini.

• Blog Title : isi dengan judul web Anda yang akan terlihat pada title bar browser.
• Your E-mail : isi dengan alamat email Anda (anda boleh mengisi dengan sembarang email jika tidak mempunyai alamat email).
• Beri centang pada kotak kecil disamping tulisan “Allow my blog to appear…” jika ingin web yang akan Anda buat terlihat pada Google. Tapi jika Anda tidak ingin mencentangnya tidak apa-apa. Setelah semua dirasa benar, klik tombol Install WordPress

12. Akhirnya instalasi WordPress CMS pada localhost berhasil. Pembaca akan ditunjukkan username serta password yang akan pembaca gunakan untuk masuk ke halaman administrator pada wordpress CMS pembaca. Jangan tutup terlebih dahulu halaman tersebut. Anda harus mengingat atau jika perlu mencatat password tersebut.

13. Selanjutnya, buka tab atau wondow baru pada browser Anda. Kita akan mencoba masuk untuk pertama kali ke halaman administrator atau untuk wordpress biasanya disebut halaman “Dashboard”. Ketik alamat “http://localhost/wordpress/wp-deviyati&#8221;. Alamat tersebut merupakan alamat halaman Dashboard web WordPress CMS yang telah Anda instal tersebut. Masukkan username dan password yang sesuai yang telah ditunjukkan pada langkah 12
14. Setelah Anda masukkan UserName dan Passwordnya maka muncul halaman “Dashboard”, seperti halaman gambar di bawah ini.


Untuk melihat tampilan wordpress CMS yang telah Anda instal, silahkan ketikkan pada browser dengan alamat “http://localhost/wordpress&#8221;. Dan ini adalah keseluruhan file web wordpress CMS tersebut. Hanya dengan beberapa langkah saja, Anda sudah mendapatkan sebuah website utuh.

 

dipopilerkan oleh : Masaedi

Read more »

Posted in: Tutorial Wordpress