Website Training Off On line
Thuesday, February 19, 2013 Petunjuk Install XAMPP Ada beberapa langkah dalam install XAMPP sebagai berikut : 1. Download XAMPP dialamat : http://sourceforge.net/projects/xampp/files/xampp%20windows/1.7.1/xamp p-win32-1.7.1.exe/download 2. Klik dua kali file XAMPP (Menggunakan xampp-win32-1.7.1-installer.exe, ), apabila mempunyai versi XAMPP yang lebih baru, cara instalasi kemungkinan masih sama. 3. Klik [Next] pada jendela Setup Wizard yang muncul. 4. Berikutnya diminta memilih folder tempat XAMPP dipasang. Untuk mudahnya pilih saja drive c:\, seperti default-nya dan klik [Next]. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 1
5. Pada jendela yang muncul berikutnya, tandai semua yang ada pada service section dan klik [Install]. 6. Tunggu beberapa menit sementara XAMPP di-instal. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 2
7. Klik [Finish] setelah XAMPP selesai diinstal. 8. Akan muncul pesan, apakah akan menjalankan XAMPP Control Panel sekarang atau lain kali. Klik [Yes] bila akan menjalankannya, klik [No] bila jika tidak. 9. Untuk melihat hasilnya buka web browser, ketikkan http://localhost pada jendela address, akan muncul tampilan seperti di bawah ini, Klik [English] untuk memilih bahasa Inggris. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 3
10. Setelah itu akan muncul halaman seperti dibawah ini. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 4
Thursday, February 21, 2013 Cara Install Wordpress di Localhost 1. Download Wordpress di alamat : http://wordpress.org/latest.zip 2. Extract here Wordpress yang telah di download. Akan muncul sebuah folder yang secara default diberi nama "Wordpress". Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 5
3. Pindahkan folder Wordpress CMS yang bernama "Wordpress" tersebut ke dalam "C:\xampp\htdocs". Yang paling utama diperhatikan adalah penyimpanan yang harus dilakukan di folder "htdocs". Sebab ketika membuka URL web tersebut pada browser, sistem localserver XAMPP yang digunakan akan membaca folder htdocs tersebut dan akan mencari web yang dimaksud sehingga dimunculkan pada browser. 4. Jika sudah memindahkan atau meng-copy paste folder Wordpress tersebut, folder Wordpress boleh dirubah sesuai keinginan. Untuk tutorial sekarang ini nama folder tidak perlu dirubah. 5. Buka web browser (Mozilla Firefox, Internet Explorer, Google Chrome, Opera), kemudian ketik alamat "http://localhost/phpmyadmin" pada jendela address sehingga muncul halaman phpmyadmin. kemudian buat database yang akan digunakan oleh Wordpress yang akan diinstal. Cukup tulis nama database yang akan digunakan pada kotak di bawah tulisan "Create new database". Misalkan diberi nama "belajar_wordpress". Kemudian klik tombol "Create" yang ada di sebelah kanannya. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 6
6. Masih pada web browser, ketikkan juga alamat "http://localhost/wordpress" pada address bar. Perhatikan bahwa alamat tersebut bergantung pada penamaan folder yang diberikan pada langkah 4. Akan muncul tampilan Wordpress error seperti gambar di bawah ini karena belum terdapat file bernama wp-confic.php. File tersebut merupakan file yang berisi penganturan (konfigurasi) untuk web Wordpress. Untuk membuat file konfigurasi tersebut, klik tombol yang bertuliskan "Create a Configuration File". Cara Install Wordpress di Localhost www.mhdsyarif.ph.t Page 7
7. Selanjutnya akan muncul halaman "Setup Configuration File" seperti berikut ini. Klik tombol yang bertuliskan "Let's Go!". 8. Akan muncul halaman untuk konfigurasi : Dabase Name : isi dengan nama yang telah dibuat pada langkah 5. User Name : isi dengan username yang punya akses untuk masuk ke dalam sistem phpmyadmin pada server yang digunakan. Secara default biasanya usernamenya adalah "root". Password : jika phpmyadmin mempunyai password masukkan password, untuk sementara password phpmyadmin secara default kosong. Database Host : karena kita menyimpan/menghosting web pada localhost, maka isi dengan "localhost". Table Prefix : digunakan untuk mengunikkan tabel pada database "belajar_wordpress". Untuk sementara gunakan yang default, yaitu "wp_". Seteleh itu klik tombol Submit. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 8
9. Jika pengaturan sudah benar, maka akan muncul halaman seperti di bawah ini. Klik tombol Run the install. 10. Selanjutnya akan diminta halaman untuk mengisi informasi tentang web yang akan dibuat. Ketikkan sesuai data yang diinginkan, setelah itu klik tombol Install Wordpress Cara Install Wordpress di Localhost www.mhdsyarif.ph.t Page 9
11. Setelah instalasi sukses dijalankan, silahkan klik tombol login Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 10
12. Ketikkan username dan password untuk masuk kehalaman admin. 13. Selanjutnya akan muncul tampilan seperti dibawah ini. 14. Untuk melihat hasil web yang telah dibuat ketikkan alamat : http://localhost/wordpress Cara Install Wordpress di Localhost www.mhdsyarif.ph.t Page 11
15. Instalasi Wordpress telah berhasil. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 12
Wednesday, February 27, 2013 Petunjuk Penggunaan Wordpress Mengenal bagian-bagian Wordpress Sebelum mulai mengelola Wordpress yang telah terinstall, ada baiknya mengenali terlebih dahulu bagian-bagian dari Wordpress serta istilah-istilah yang akan digunakan. Sebagai contoh disini memakai themes default dari Wordpress. Tampilan tiap themes tentu bermacam-macam, jadi untuk sementara digunakan themes default. B A C2 C1 C3 C4 D C E
Berikut keterangan dari gambar diatas : A. Header : Tempat meletakkan judul, keterangan singkat maupun gambar tentang blog. B. Menu : Menampilkan menu. C. Content : Tempat munculnya artikel-artikel blog. Pada halaman utama secara default akan muncul artikel-artikel terbaru lengkap dengan Judul artikel yang memiliki link ke artikel tersebut. C1 : Judul artikel C2 : Komentar artikel C3 : Kategori artikel C4 : Tanggal dibuat artikel D. Sidebar : Menampilkan kumpulan link, dan aneka fasilitas. Di area ini bias diletakkan informasi apa saja. Mulai form pencarian, daftar halaman statis (Pages), Arsip (Archives), Category (Kategori), Kumpulan Link (Blogroll), Meta, dan lain-lain. E. Footer : Informasi bagian kaki blog, biasanya berisi link RSS artikel dan komentar, serta informasi kecil mengenai blog. Login Admin Untuk mengelola Wordpress, maka anda harus dikenali sebagai admin oleh Wordpress. Oleh karena itu anda harus login ke Admin Panel. Ada tiga cara untuk mengakses Admin Panel : a. Melalui URL : http://domain-anda/wp-login.php b. Melalui URL : http://domain-anda/wp-admin c. Mengklik link Login yang ada di sidebar.
Berikutnya, masukkan username dan password pada form yang tersedia. Selanjutnya cukup mengklik tombol Login dan anda akan masuk ke Dashboard Admin Panel. Diatas merupakan gambar dari dashboard admin panel wordpress. Pengelolaan Tulisan (Posts) a. Membuat Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Pilih [Add New] 3. Tulis judul dari artikel Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 15
4. Tulis isi artikel pada kotak kosong di mana Anda bisa memasukkan tulisan, link, link ke gambar, dan informasi apapun yang ingin Anda tampilkan di situs Anda. Anda dapat menggunakan baik Visual atau tampilan Teks untuk menulis posting Anda. 5. Pilih Categories (Kategori berfungsi untuk mengelompokan beberapa tulisan berdasarkan isi atau tema dari tulisan. Hal ini agar pengunjung blog mudah untuk melakukan pencarian dan menemukan konten suatu tulisan pada blog). Klik [+ Add New Category], Kumudian tulis nama kategori yang akan di buat untuk tulisan anda. 6. Pilih Tags (Tag adalah semacam penggolongan tulisan. Di WordPress sendiri terdapat 2 jenis penggolongan tulisan, yaitu kategori dan tag. Penggolongan tag lebih spesifik. Contoh bila anda membuat tulisan tentang About Wordpress, maka tag yang buat adalah WordPress ). Tulis nama tag yang ingin dibuat dan klik [Add] 7. Setelah selesai, klik tombol [Publish] 1 2 Tulis Judul Artikel 3 Isi Artikel 4 7 5 6
Untuk melihat hasilnya klik [view post] b. Merubah Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Setelah tampil halaman Posts, silahkan pilih tulisan yang ingin anda lakukan pengeditan dengan cara mengklik link [Edit]. Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 17
3. Setelah muncul halaman Edit Post, lakukan pengeditan tulisan yang telah anda buat sebelumnya dan setelah selesai klik tombol [Update] c. Menghapus Tulisan 1. Klik [Post] pada sisi kiri halaman 2. Setelah tampil halaman Posts, silahkan centang tulisan yang ingin dihapus dan klik menu [Move to Trash] dan klik tombol [Apply]. 3. Tulisan akan terhapus, jika ingin mengembalikannya lagi klik [Trash]. d. Menyisipkan Gambar Di Dalam Tulisan yang telah dibuat 1. Klik [Post] pada sisi kiri halaman 2. Pilih [Add New]
3. Akan tampil halaman Add New Post 4. Pilih tombol [Add Media] 5. Pada tab Insert Media klik tombol [Select Files] untuk mengambil gambar di dalam komputer anda. 6. Setelah gambar berhasil ter-upload akan tampil menu pengaturan sebagai berikut : Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 19
7. Lakukan pengaturan jika menginginkannya atau langsung klik saja tombol [Insert Into Post] untuk menyisipkan gambar di dalam tulisan. 8. Setelah selesai, klik tombol [Save Draft] bila ingin menyimpan terlebih dahulu atau klik tombol [Publish] bila ingin menampilkannya pada halaman blog.
Pengelolaan halaman (Pages) Pembuatan halaman baru pada blog umumnya digunakan untuk manampilkan informasi-informasi singkat seperti profil penulis, about, buku tamu dan informasi lain yang ingin ditampilkan dalam waktu yang lama dan bersifat permanen. a. Membuat halaman : 1. Klik [Pages] pada sisi kiri halaman dasboard 2. Pilih [Add Pages] 3. Tulis judul dari halaman 4. Tulis isi halaman 5. Setelah selesai klik tombol [Publish] 1 2 Tulis Judul Halaman 3 5 Tulis Isi Halaman 4 Untuk melihat hasilnya klik [view page] Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 21
b. Merubah halaman 1. Klik [Pages] pada sisi kiri halaman dasboard 2. Setelah itu akan tampil halaman Pages, silahkan pilih halaman yang dirubah dengan cara mengklik link [Edit].
3. Setelah muncul halaman Edit Page lakukan perubahan terhadap halaman yang telah anda buat sebelumnya dan setelah selesai klik tombol [Update] c. Menghapus Tulisan 1. Klik [Pages] pada sisi kiri halaman dasboard 2. Setelah itu tampil halaman Pages silahkan centang halaman yang ingin dihapus dan klik menu [Move to Trash] dan klik tombol [Apply]. 3. Tulisan akan terhapus, jika ingin mengembalikannya lagi klik [Trash]. Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 23
Pengelolaan Tampilan (Appearance) Secara default saat menginstall wordpress, wordpress menggunakan themes Twenty Twelve. Wordpress memiliki banyak themes baik secara gratis maupun berbayar. Bila themes tersebut tidak sesuai dengan selera anda dan anda ingin menggantinya. Berikut cara mengganti themes : a. Mengganti tampilan blog (Themes) 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu tampil halaman Manage Themes. 3. Dalam halaman Manage Themes. Pilih themes sesuai dengan keinginan anda. Sebelum memilih themes yang akan diaktifkan sebaiknya anda pilih [Live Preview] untuk melihat hasil dari themes tersebut, setelah anda yakin klik [tombol save and activate].
4. Jika ingin menginstall themes yang sudah anda download sebelumnya, pilih tab [Install Themes], klik [Upload] [Browse] [Install Now]. 5. Tunggu sampai proses install selesai, setelah itu akan mucul halaman themes yang telah diinstall, pilih [Live Preview] jika ingin melihat hasil dari themes tersebut dan pilih [Activate] jika ingin menggunakannya atau [return to Themes page] untuk tidak menggunakannya sekarang. Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 25
b. Mengatur widgets di sidebar Sidebar adalah tempat untuk menampilkan kumpulan link, dan aneka fasilitas. Di area ini bisa diletakkan informasi apa saja, seperti form pencarian, daftar halaman statis (Pages), Arsip (Archives), Category (Kategori), Kumpulan Link (Blogroll), Meta, dan lain-lain. Beberapa widget memudahkan bagi pengunjung untuk menemukan konten yang spesifik pada situs Anda, untuk menggunakan widget sebagai berikut : 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu pilih [Widgets] 3. Dalam halaman Widgets tarik widget yang ingin diletakkan ke modul sidebar sebelah kanan.
c. Mengatur menu (Menus) Navigasi menu memungkinkan untuk merubah urutan halaman, membuat submenu dan mengatur beberapa halaman dengan membuat kategori. Berikut langkah-langkah untuk membuat menu : 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu pilih [Menus], akan muncul halaman Menus Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 27
3. Membuat menu, ketik nama yang ingin dibuat dan klik tombol [Create Menu]. 4. Menambahkan link kustom (Custon Link), ketik URL, nama label dan kemudian klik tombol [Add to Menu]. 5. Menambahkan halaman (Pages) ke menu, silahkan centang halaman yang ingin dimasukkan dan kemudian klik tombol [Add to Menu]. 6. Menambahkan ketegori (Categories) ke menu, silahkan centang kategori yang ingin dimasukkan dan kemudian klik tombol [Add to Menu].
7. Merubah urutan menu dan membuat sub-menu. Drag dan drop item keatas dan kebawah sesuai dengan urutan menu. Drag dan drop item kekiri dan kekanan untuk membuat sub-menu. Kemudian klik tombol [Save Menu]. Hasilnya sepeti berikut : d. Mengganti gambar header Header adalah komponen yang penting di dalam blog. Dengan adanya gambar header, dapat mencerminkan isi dari blog yang dibuat, serta menarik pangunjung untuk tahu lebih dalam isi dari blog kita Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 29
dengan melihat adanya gambar header tersebut. Bila ingin mengganti header default anda dengan gambar pilihan anda, berikut langkahlangkahnya : 1. Klik [Appareance] pada sisi kiri halaman dashboard 2. Setelah itu pilih [Header] 3. Akan muncul halaman Custom Header pilih tombol [Browse] untuk memilih gambar pada komputer anda, setelah itu klik [Upload]. 4. Setelah itu akan muncul halaman Crop Header Image pilih tombol [Crop and Publish]. 5. Setelah dipilih Crop and Publish klik tombol [Save Changes], untuk melihat hasilnya pilih [Visite Site] disebelah kiri atas dashboard.
Petunjuk Penggunaan Wordpress www.mhdsyarif.p.ht Page 31
Wednesday, February 27, 2013 Petunjuk Membuat Website/Blog Dengan Nama Domain Sendiri Agar blog yang kita buat bisa diakses orang banyak maka kita harus meng-upload file yang telah kita buat di server localhost ke server online. Berikut ada dua langkah yang harus dilakukan sebagai berikut : 1. Mendaftar nama domain Domain adalah nama dan alamat dari sebuah website, dalam hal ini kita mendaftar domain di http://www.dot.tk, ada beberapa langkah dalam mendaftar domain sebagai berikut : Buka alamat http://www.dot.tk, selanjutnya ketikan nama domain yang diinginkan, kita daftarkan nama domain study-worpdress, kemudian klik [GO] untuk melihat ketersediaan domain. Bila nama domain pilihan tersedia, selanjutnya akan tampil halaman seperti gambar dibawah ini.
Masukkan nama web hosting. Contoh disini kita menggunakan http://000webhost.com sebagai server web hosting. Untuk pilihan pada opsi masa berlaku domain atau registration length pilih opsi berlaku untuk 12 bulan. Petunjuk membuat Website/Blog dengan nama domain sendiri www.mhdsyarif.p.ht Page 33
Dilanjutkan dengan mengisi kode verifikasi (captcha). Klik [Sign-Up]. Setelah itu langsung di arahkan ke halaman registrasi untuk mendaftar di My Dot TK Gunakan salah satu akun yang dimiliki seperti : Google, Yahoo, Facebook, Windows Live ID, dan lain-lain. Contoh disini menggunakan akun google. Tulis email dan sandi, klik [masuk]. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 34
Kemudian akan muncul halaman yang menyatakan registrasi sukses. Selanjutnya klik [Login to My dot TK] (dibagian kanan atas layar). Pilih domain panel, klik [modify]. Setelah itu akan muncul halaman domain settings for this domain, pilih Custom DNS, kemudian masukkan hostname server pada kotak hostname dengan menulis ns01.000webhost.com dan ns02.000webhost.com ( jika menggunakan web hosting http://www.000webhost.com ), klik [Save Changes]. Petunjuk membuat Website/Blog dengan nama domain sendiri www.mhdsyarif.p.ht Page 35
Mendaftar domain telah selesai 2. Setelah mendaftar domain, langkah selanjutnya mendaftar web hosting, web hosting adalah tempat meletakkan file-file website pada server yang terhubung dengan jaringan internet, dalam hal ini kita mendaftar web hosting di http://www.000webhost.com, ada beberapa langkah dalam mendaftar web hosting sebagai berikut : Buka alamat http://www.000webhost.com, Kemudian klik tombol [Sign Up!] untuk memulainnya. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 36
Tulis nama domain yang telah dibuat sebelumya, kemudian masukkan data-data lainnya dengan lengkap dan benar. Kemudian klik [Create My Account]. Tulis domain yang telah dibuat Tulis nama Tulis email Tulis password Tulis ulang password Setelah itu muncul halaman List your domains. Petunjuk membuat Website/Blog dengan nama domain sendiri www.mhdsyarif.p.ht Page 37
Buka email untuk konfirmasi, klik informasi yang dikirim. Klik [Go to CPanel] Terdapat informasi tentang akun disebelah kanan. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 38
Setelah itu buat sebuah database MySQL dengan memilih [MySQL] Tulis database, username dan password kemudian klik [Create Database] Setelah itu muncul halaman informasi (sebaiknya simpan informasi ini untuk mengatur koneksi pada file yang akan diupload nanti). Klik [Back to Control Panel] Petunjuk membuat Website/Blog dengan nama domain sendiri www.mhdsyarif.p.ht Page 39
Sebelum database di import buka tab baru pada browser ketikkan alamat http://localhost/phpmyadmin untuk masuk kedalam database localhost. Kemudian pilih database, pilih tab Export dan centang ( ) Save as file kemudian klik tombol [Go]. Buka database yang telah didownload dengan menggunakan notepad atau sejenisnya, tekan ctrl+h pada keyboard untuk replace (merubah). Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 40
1. Ketikkan domain yang dibuat di server local 2. Ketikkan domain yang dibuat di server online 3. Setelah itu klik tombol [Replace ALL] dan simpan (ctrl+s) Setelah database pada server localhost di export langkah selanjutnya adalah memasukkan (import) database ke server hosting, Pilih phpmyadmin pada halaman control panel 000webhost.com. Kemudian klik Enter phpmyadmin Import database dengan memilih tab Import, kemudian klik [Choose File] untuk memilih database yang telah dibuat dan klik [Go] untuk melanjutkan. Petunjuk membuat Website/Blog dengan nama domain sendiri www.mhdsyarif.p.ht Page 41
Setelah database di import, langkah selanjutnya upload file web yang telah dibuat ke server hosting. Untuk upload file kita bisa menggunakan FTP Client (download dialamat : http://filezilla-project.org/download.php). Buka software Filezilla yang telah diinstall. Masukkan host, username dan password sesuai dengan account information yang telah dibuat. Klik [Quickconnect] untuk koneksi ke server. Pilih folder/file yang akan diupload ke server. Sebelum file website diupload, buka file wpconfig.php kemudian isi dengan koneksi database yang telah dibuat sebelumnya. Petunjuk Instalasi XAMPP www.mhdsyarif.p.ht Page 42
Pilih folder public_html Lokasi file pada komputer Lokasi file pada server hosting Hapus file Pilih folder/file yang ingin di upload, kemudian drag dan drop ke server hosting Tunggu proses upload sampai selesai, untuk melihat hasil blog ketikkan domain yang telah dibuat http://study-wordpress.tk, pada kotak address di web browser, akan muncul halaman seperti gambar dibawah ini. Petunjuk membuat Website/Blog dengan nama domain sendiri www.mhdsyarif.p.ht Page 43