2014-15. Membuat Website dengan Wordpress

download

of 85

  • date post

    02-Aug-2015
  • Category

    Education
  • view

    248
  • download

    1

Embed Size (px)

transcript

<p> 1. FERYSMED IBRAHIM WordPreass Daevelopment Professional 2. PENDAHULUAN Latar belakang Perkembangan teknologi informasi yang semakin canggih membuat segala sesuatunya menjadi lebih mudah disegala aspek kehidupan. Perkembangan itu salah satunya ditandai dengan keberadaanPerkembangan itu salah satunya ditandai dengan keberadaan internet yang telah merebak keseluruhan lapisan masyarakat dunia. Mulai dari penggunaan akses data, komunikasi, dan jejaring social, seperti facebook dan twitter, serta pemanfaatan diary online / blog dimana kita biasa mengekspresikan pikirankita layaknya menulis diary. Dalam dunia internet, ada beberapa website yang menyediakan sarana untuk kegiatan tersebut. Contohnya adalah wordpress yang dapat kita gunakan secara gratis untuk berbagai aktivitas dan manfaat di dunia maya. 3. TUJUAN Berbagi pengetahuan Menambah pengetahuan dan wawasan di bidang Teknologi Informasi Mengetahui dan memahami pembuatan website serta manfaatnya Mengetahui dan memahami pembuatan website serta manfaatnya 4. Pengertian WordPress WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat popular digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakandata (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya. CMS merupakan sebuah alat atau software yang dapat digunakan untuk melakukan pengolahan sebuah website dengan mudah. Mulai dari membuat, mengelolaisi, hingga mempublikasikan isi website kita tersebut. 5. Kelebih dan Kekurangan WordPress Kelebihan WordPress : Cara daftarnya mudah. Bersifat bebas (free/gratis). Dapat digunakan secara Offline(tanpa koneksi internet). Thema bisa dikelola dan dipercantik. Memudahkan membuat tulisan, pengeditan, pempublikasianpostingan blog. Komuniti WordPress Sedia Membantu. Kekurangan WordPress : Hasil edit template/theme yang tidak bisa dilihat secara pratinjau. Kurang leluasa dalam memindahkan gadget-gadget dari satu ruang ke ruang lainnya Harus membayar hosting jika ingin custom domain Jika banyak plugin yang di install menjadi lambat Tidak support dengan javascript Sudah tidak bisa memperpendek URL menggunakan adf.ly Tidak bisa edit CSS (kecuali upgrade/bayar) 6. WordPress.com dan WordPress.org WordPress.com merupakan situs layanan blog yang menggunakan mesin WordPress, didirikan oleh perusahaan Automattic. Dengan mendaftar pada situs WordPress.com, pengguna tidak perlu melakukan instalasi atau konfigurasi yang cukup sulit. Meskimelakukan instalasi atau konfigurasi yang cukup sulit. Meski demikian, fitur yang disediakan oleh WordPress.com sudah cukup bagus. WordPress.org merupakan wilayah pengembang (developer). Di alamat ini, seseorang dapat mengunduh (download) aplikasi beserta seluruh berkas CMS WordPress. 7. Perbedaan dalam penggunaan WordPress.com dan WordPress.org: 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 blogWordPress menurut kebutuhan sendiri atau ingin membuat blog menggunakan alamat dan server sendiri. 8. Hal yang dipersiapkan : 1. Web server &amp; database server (Appserv, xampp) 2. Install file compres wordpress Langkah Langkahnya adalah : Langkah langkah Menginstall WordPress dengan Mode Offline Langkah Langkahnya adalah : 1. Buka Browser dan pastikan web server telah terinstall dengan baik, di browser ketikkan localhost appserv, xampp) 2. Jika yang keluar seperti ini maka anda menggunakan XAMPP 9. Kita harus mengetahui dulu kita menggunakan web server yang mana, langkah selanjutnya Adalah kita copy paste file installer dari wordpress ke web direktori. Jika yang kita gunakan Appserv : C Appserv www Xampp : C Xampp Htdoc Dalam contoh ini kita menggunakan Xampp Jadi kita harus copy paste install dari : C XAMPP Htdoc NB : Pastikan tidak ada folder dengan nama wordpress di web direktori tersebut. 10. Lakukan extract pada file wordpress tersebut, dan ganti nama dengan nama foldernya belajarweb 11. Dan lakukan rename di folder wordpress 3.4.2 Tampilankan phpMyAdmin di Mozilla firefox seperti berikut ini, dan silahkan buat databasenya dengan nama belajarweb 12. Dan anda silahkan klik create. Sebuah database sudah terbuat dengan nama belajarweb, dan buka browser lagi dan ketikkan localhost/belajarweb 13. Untuk alamat di browser yang diketikkan sesuai dengan folder yang kita buat di web direktori tadi. Klik create a configuration file.Klik create a configuration file. klik Lets go! 14. Isikan form dibawah ini Database Name : isi dengan nama database yang sebelumnya kita buat diDatabase Name : isi dengan nama database yang sebelumnya kita buat di localhost/phpmyadmin User name : adalah user dari database defaultnya root Password saya kosongi saja. Database hostnya : karena menggunakan yang offline maka diisikan localhost Table prefix : biarkan default saja Lalu silahkan tekan Submit 15. Lalu silahkan tekan Run The Install Site tittle : isi dengan nama web kita (terserah) User name : isikan dengan user name yang digunakan untuk masuk kedalam halaman administrator Password : isikan password yang digunakan untuk masuk kedalam halaman administrator Your email : masukkan email kita Privacy : pastikan kecentang Lalu tekan Install wordpress 16. Klik Login Proses penginstalan sudah selesai silahkan lihat website anda, cara untuk mengaksesnya ketikan localhost/belajarweb 17. Melakukan Backup dan Restore pada Web WordPress mengerjakan web offline di komputer yang menggunakan deepfreeze maka kita tidak melakukan backup (sebut saja save) file web di drive C maka setelah computer kita restart maka data kita akan hilang. Jika kita dalam mengerjakan web ini dengan model berganti ganti computer Jika kita dalam mengerjakan web ini dengan model berganti ganti computer misalnya, minggu ini pakai computer sekolah, lalu karena kita baru membeli computer baru kita Menginginkan biar bisa mengerjakan di komputer rumah, cara backup dan restore ini Yang bisa kita optimalkan. agar data web yang ada di computer sekolah bisa kita ambil dan kita kerjakan di computer rumah. 18. Langkah Langkah yang harus kita lakukan adalah sebagai berikut Backup Folder Web Silahkan Copy dan paste, file yang ada di web direktori, Folder saya adalah belajarweb, yang ada di direktori, C XAMPP Htdoc Backup Database Web Backup database Eeb kita. Buka browser dan ketikkan localhost/phpmyadmin dan silahkan pilih nama database yang kita gunakan.localhost/phpmyadmin dan silahkan pilih nama database yang kita gunakan. ini database saya adalahbelajarweb Export database Setelah kita pilih untuk databasenya langkah selanjutnya adalah klik bagian menu export 19. Untuk Save as file silahkan dicentang, dan tekan GO. Jika proses export selesai akan muncul tampil seperti berikutini. 20. Lalu pindahkan file tersebut ke drive C. caranya klik kanan open containing folder Silahkan Copy paste ke drive C Berarti untuk proses Backup data web sudah selesai. 21. Pindahkan folder Web ke Web Direktori Maka silahkan copy paste folder web dalam folder belajarweb, ke C XAMPP Htdoc Restore Database Buka Browser dan silahkan buka localhost/phpmyadminBuka Browser dan silahkan buka localhost/phpmyadmin Buat database baru dengan nama yang sama dengan database sebelumnya yaitu belajarweb lalu silahkan di klik create 22. Import database Setelah database telahberhasilterbuat, silahkanklik import Klik browse dan pilih databasenya yang akan diimport Klik open 23. Klik GO Jika yang muncul seperti ini berarti untuk import database telah berhasil 24. CEK HASIL WEB Ketikkan pada browser localhost/belajarweb untuk melihat hasilnya 25. Membuat Page Pada WordPress Langkah Pertama adalah silahkan masuk kedalamdasbor administrator dari Wordpress Masuk kedalam DASBOR ADMINISTRATOR Pada browser ketikkan :localhost/belajarweb/wordpress/wp-admin 26. Silahkan masukkan user name dan password, seperti yang anda isikan di saat proses penginstallan dari wordpress dan klik login. Buat Page Baru Untuk membuat page baru silahkan masuk ke menu page Add New Contoh page yang akan kita buat nantinya adalah Home, Visi Misi, Profile. 27. Isi Page Baru Akan keluar menu seperti berikut Isikan judul pada bagian atas dan tuliskan HomeIsikan judul pada bagian atas dan tuliskan Home Lalu silahkan upload gambar dengan cara klik menu Add Media Maka akan keluar tampilan seperti berikut ini : 28. Dan klik menu select Files untuk memilih file yang akan kita upload, pilih gambar yang sudah. Lalu klik open, maka akan keluar menu seperti berikut ini. 29. Langsung saja tekan insert into post, dan hasilnya akan seperti berikut ini.dan jika selesai tekan publish. Jika berhasil maka akan tampil seperti berikut ini. Buat Halaman (Visi, Misi TKJ), dengan masuk ke menu Pages Add new 30. Visi Misi Langsung publish. Profile Buat Halaman (Profile TKJ), dengan masuk ke menu Pages Add newBuat Halaman (Profile TKJ), dengan masuk ke menu Pages Add new Langsung publish. 31. Membuat Menu Plugin GuesBook DMS Guestbook adalah plugin yang digunakan untuk membuat buku tamu (guestbook) pada halaman WordPress anda. Dengan menggunakan plugin dmsGuestBook anda bisa membuat sebuah halaman buku tamu Langkah langkahnya menginstal plugin DMSLangkah langkahnya menginstal plugin DMS pertama kita klik menu plugin di Dashboard lalu Add New Lalu klik. 32. Lalu akan muncul tampilan seperti ini. kita pilih upload lalu klik browse Setelah itu klik file dmsGuestbook , lalu klik open 33. Proses install sudah selesai, lalu klik Activate Lalu klik Install Now selesai, lalu klik Activate Plugin 34. Membuat Pages Baru yg nanti buat pages Guestbook nya sudah mebuat pages dengan nama Guestbook lalu kita klik publish 35. Setalah itu klik DMSGuestbook Setalah itu akan mencul tampilanSetalah itu akan mencul tampilan ini , kita klik Guestbook Setting untuk melakukan proses pembuatan GuestBookpembuatan GuestBookpembuatan GuestBook 36. Setelah itu akan keluar tampilan seperti ini nanti ada tulisan Basic di klik akan muncul tampilan seperti ini , lalu anda klik tulisan Language lalu di klik pilih tulisan English.txt Di klik tulisannya 37. Lalu klik tulisan Clear all terus akan muncul tampilan seperti dibawah , terus klik tulisan GuestBook Settingan sudah selesai lalu di save 38. Sudah Nampak menuSudah Nampak menu guesbook Dan ini hasilnya di sini ada : Name Email Website Dll. 39. MEMBUAT POSTINGAN BERDASARKAN KATEGORI Didalam Wordpress ini anda tidak hanya bisa membuat page saja, anda juga bisa membuat sebuah postingan, dan postingan ini bisa dipisahkan berdasarkan kategori semisalnya, anda andalah seorang administrator web untuk sekolah , dan sekolah menginginkan anda untuk menampilkan beritauntuk sekolah , dan sekolah menginginkan anda untuk menampilkan berita baru dalam web mereka, dan berita tersebut harus berkategori Contoh : berita Tentang Event TKJ Setelah itu untuk membuat postungan anda harus mengentahui apa itu kategori, yang yang bisa anda maksimalkan untuk permasalahan seperti di atas. 40. Langkah Langkahnya membuat Kategori sebagai berikut: Masuk kedalam dasbor administrator Masuk ke menu post Masuk ke menu Posts Add New 41. Isikan untuk postingan kita, dengan text yang telah saya sertakan Tambahkan Category baru Tambahkan category baru menu berada dibagian kanan, isikan beritaTambahkan category baru menu berada dibagian kanan, isikan berita baru dan klik add new category. 42. Dan pastikan untuk category Berita telah tercentang Setelah itu silahkan klik publish.publish. 43. Masukkan lagi Postingan Baru Tambahkan lagi sebuah postingan pada category berita , klik menu posts add new Tambahkan MenuTambahkan Menu Setelah itu silahkan tambahkan link baru pada menu untuk menampilkan postingan dengan category berita baru. Masuk kedalam appearance menus Pada bagian categories centang berita dan klik add to menu. 44. Maka akan langsung masuk ke bagian menu. Sudah muncul link baru berita , ketika di klik link itu maka akan tampil postingan dengan kategori berita baru 45. Dan hasilnya seprti ini 46. Membuat Menu Plugin Gallery di Wordpress Langkah Langkah membuat plugin photo gallery Masuk Kedalam DASBOR ADMINISTRATOR Lalu klik plugins Add New 47. Setalah akan muncul tampilan seprti ini. Lalu klik upload Lalu klik upload Lalu cari plugin yang saya gunakan nexgen-gallery. 48. Saya klik open Lalu saya installLalu saya install 49. Kalau berhasil akan muncul konfirmasi seperti di bawah, lalu klik Activate Plugin 50. Buat Gallery Setelah itu di bagian bawah sini ketika instalasi plugin maka muncul menu sepeti ini : Lalu silakan di klik.Lalu silakan di klik. Setelah itu klik Add Galllery 51. Setelah untuk new gallery silakan yang pertama anda tulisakan Tour bali Lalu klik Add gallery Setelah itu klik Upload a Zip-Fille, lalu klik browse 52. Setelah itu akan muncul tampilan seprti ini , pilih file Tour Bali lalu kita klik open In to a new gallery di klik lalu pilih 1- Tour, lalu start upload 53. Kita tunggu masih dalam proses Setelah sudah menggupload foto kita lalu sekarang buat album TKJ, pilih menu album di gallerypilih menu album di gallery 54. Add new album adalah nama yang nanti di buat foto kita, lalu berikan nama album ( Acara Teknik Komputer Jaringan ) lalu klik Add Akan Muncul tampilan seperti di atas dengan warna merah Album sudah dibuat 55. Setelah itu tekan tour bali terus di geser ke bawah. Select album klik ( Acara teknik Komputer jaringan ) klik update 56. Membuat album sudah selesai, kita tinggal buat pages Add New Akan muncul tampilan seperti ini klik album lalu pilih album ( Acara Teknik Komputer jaringan ) klik insert Kita tulis dengan nama photo gallery, setelah itu di pojok sebelah kanan ada menu Add NetxtGen Gallery 57. Setalah itu akan muncul Scrip Album Lalu kita publish Dan inilah hasilnya foto gallery TKJ 58. Membuat Contact Form Pada Wordpress Membuat sebuah fitur yang dinamakan Contact Us gimana fitur ini digunakan untuk mengirimkan emailnya ke admin webnya jika ada user atau penggujung anda yang ingin untuk berkomunikasi langsung dengan admin webnya mungkin untuk memasang iklan atau memasang sebuah barang anda bisa menggukan Contact Us ini.Contact Us ini. Langkah langkah Membuat Contact Us : Pilih menu plugin Add New 59. Klik upload Pilih file si-contact-form, lalu klik open 60. Lalu lalau klik Install Now Contact form sudah terinstall, Klik activate Plugin 61. Setelah itu akan muncu tampilan seprti ini, lalu kita klik activate Aksimet Setel...</p>