Kamis, 03 Maret 2016

Web Design

Web Design

1. Pengertian Wordpress

WordPress adalah salah satu mesin blog atau salah satu alat untuk membangun sebuah blog dan 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 penerus resmi dari b2/cafelog yang dikembangkan oleh Michel Valdrighi. Nama WordPress diusulkan oleh Christine Selleck, teman ketua pengembang (developer), Matt Mullenweg.
Sejarah 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.
WordPress muncul pertama kali di tahun 2003 hasil kerja keras Matt Mullenweg dengan Mike Little. 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.
WordPress.com dan WordPress.org. WordPress menyediakan dua alamat yang berbeda, yaitu WordPress.comdan 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. Sayangnya, pengguna WordPress.com tidak dapat mengubah template standar yang sudah disediakan. Artinya, pengguna tidak dapat menambahkan asesori apa pun selain yang sudah disediakan. 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. Selanjutnya, CMS ini dapat diubah ulang selama seseorang menguasai PHP, CSS dan script lain yang menyertainya. WordPress dengan Bahasa Indonesia ada berkat kerja para kontributor di Indonesia yang dipimpin oleh Huda Toriq, seorang Mahasiswa Kedokteran dari Universitas Diponegoro (UNDIP) Semarang.
Berikut ringkasan perbedaan dalam penggunaan WordPress.com danWordPress.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 blog menggunakan alamat dan server sendiri. (membutuhkan hosting sendiri) Keunggulan dan Fitur WordPress
WordPress memiliki banyak keunggulan dan fitur , antara lain :
Gratis. Untuk mendapatkan perangkat lunak WordPress hanya perlu mengunduh dari situsnya tanpa dipungut biaya, bahkan untuk blog komersial sekalipun.
Berbasis kode sumber terbuka (open source). Pengguna dapat melihat dan memperoleh barisan kode-kode penyusun perangkat lunak WordPress tersebut secara bebas, sehingga pengguna tingkat lanjut yang memiliki kemampuan pemrograman dapat bebas melakukan modifikasi, bahkan dapat mengembangkan sendiri program WordPress tersebut lebih lanjut sesuai keinginan.
Template atau desain tampilannya mudah dimodifikasi sesuai keinginan pengguna. Sehingga apabila pengguna memiliki pengetahuan HTML yang memadai, maka pengguna tersebut dapat berkreasi membuat template sendiri. Pengguna yang tidak mengerti HTML, tentu saja masih dapat memilih ribuan template yang tersedia di internet secara bebas, yang tentu saja gratis.
Pengoperasiannya mudah.
Satu blog WordPress, dapat digunakan untuk banyak pengguna (multi user). Sehingga WordPress juga sering digunakan untuk blog komunitas. Anggota komunitas tersebut dapat berperan sebagai kontributor.
Jika pengguna sebelumnya telah mempunyai blog tidak berbayar, misalnya di alamat Blogger, LiveJournal, atau TypePad, pengguna dapat mengimpor isi blog-blog tersebut ke alamat hosting blog pribadi yang menggunakan perangkat lunak WordPress. Dengan demikian pengguna tidak perlu khawatir isi blog yang lama akan menjadi sia-sia setelah menggunakan perangkat lunak WordPress.
Selain pengguna yang banyak, banyak pula dukungan komunitas (community support) untuk WordPress.
Tersedia banyak plugin yang selalu berkembang. Plugin WordPress sendiri yaitu sebuah program tambahan yang bisa diintegrasikan dengan WordPress untuk memberikan fungsi-fungsi lain yang belum tersedia pada instalasi standar. Misalnya plugin anti-spam, plugin web counter, album foto.
Kemampuan untuk dapat memunculkan XML, XHTML, dan CSS standar.
Tersedianya struktur permalink yang memungkinkan mesin pencari mengenali struktur blog dengan baik.
Kemungkinan untuk meningkatkan performa blog dengan ekstensi.
Mampu mendukung banyak kategori untuk satu artikel. Satu artikel dalam WordPress dapat dikatogorisasikan ke dalam beberapa kategori. Dengan multikategori, pencarian dan pengaksesan informasi menjadi lebih mudah.
Fasilitas Trackback dan Pingback. Juga memiliki kemampuan untuk melakukan otomatis Ping (RPC Ping) ke berbagai search engine dan web directory, sehingga website yang dibuat dengan WordPress akan lebih cepat ter index pada search engine.
Fasilitas format teks dan gaya teks. WordPress menyediakan fitur pengelolaan teks yang cukup lengkap. Fitur – fitur format dan gaya teks pada kebanyakan perangkat lunak pengolah kata seperti cetak tebal, cetak miring, rata kanan, rata kiri, tautan tersedia di WordPress.
Halaman statis (Halaman khusus yang terpisah dari kumpulan tulisan pada blog).
Mendukung LaTeX.
Mempunyai kemampuan optimalisasi yang baik pada Mesin Pencari atau SEO (Search Engine Optimizer).
Apa saja keuntungan WordPress?
Berikut ini memang cukup banyak keuntungan sebuah mesin blog CMS, diantaranya:
  1. Gratis. Untuk mendapatkan perangkat lunak WordPress sobat hanya perlu mendownload dari situsnya tanpa dipungut biaya, bahkan untuk blog komersial sekalipun.
  2. Pengeloaan websitenya mudah diperasikan.
  3. Berbasis kode sumber terbuka (open source), yang artinya setiap user dapat melihat, memperoleh dan bahkan mengedit kode-kode penyusun WordPress sesuai keinginan seperti yang saya tadi jelaskan bahwa CMS dapat dikendalikan secara penuh seperti situs milik sendiri.
  4. Banyak yang menyediakan theme gratis selain dari situs WordPress sendiri. Kalau ada yang berbayar, sobat bisa membelinya dengan harga yang terjangkau.
  5. Template/Theme atau desain tampilan dari situs yang dibuat, mudah dimodifikasi sesuai keinginan pengguna. Sehingga pengguna tingkat lanjut dapat berkreasi membuat template sendiri. Pengguna yang tidak mengerti HTML, disediakan ribuan template yang diunduh secara bebas.
  6. WordPress juga dapat digunakan untuk blog komunitas karena dapat digunakan oleh multi user.
  7. Mendukung LaTeX.
  8. Dapat dioptimalisasi dengan baik untuk peningkatan kualitas SEO dengan mudah dengan adanya plugin-plugin gratis sebagai pendukung kebutuhan sobat.
  9. Terdapat fasilitas trackback dan pingback yang memungkinkan untuk melakukan ping otomatis ke berbagai mesin pencari dan web direktori setiap kita posting artikel baru sehingga lebih cepat terindex.
  10. Terdapat fasilitas format text dan gaya text.
  11. Terdapat halaman statis yang tetap dan halaman dinamis.
  12. Berbagai pilihan plugin yang berfungsi memaksimalkan kebutuhan situs sesuai kebutuhan. Plugin merupakan alat tambahan yang bisa diintegrasikan dengan wordpress, banyak manfaatnya seperti plugin untuk optimalkan SEO on page, plugin untuk memfilter anti spam, plugin monitor traffic website, plugin untuk kebutuhan toko online, dan masih banyak lagi.
  13. Banyak forum dan komunitas lainnya untuk berdiskusi mengenai CMS blog ini sehingga kita sebagai pemula tidak usah khawatir ketika mengalami kendala mengelola website dengan wordpress.


Jenis CMS WordPress?
WordPress saat ini memiliki 2 (dua) alamat berbeda yaitu wordpress.com dan wordpress.org.
  1. WordPress.com merupakan situs layanan mesin blog yang menggunakan platform WordPress sobat bisa mendaftarnya dengan gratis tetapi memakai subdomain dalam alamat URL misalnya http://rezzaid.wordpress.com dibelakangnya menampilkan nama wordpress dan didepan sebelum dot (.) itu alamat yang sobat inginkan, wordpress.com didirikan oleh perusahaan Automattic dengan mendaftar pada situs WordPress.com, pengguna tidak perlu melakukan instalasi atau konfigurasi yang cukup sulit. Tetapi dalam hal itu wordpress.com ini memiliki kekurangannya yaitu pengguna WordPress.com tidak dapat mengubah template standar yang sudah disediakan. Meskipun demikian, fitur yang disediakannya sudah top deh menurut saya.
  2. WordPress.org memiliki banyak kelebihan yaitu dapat memegang kendali penuh yang artinya dapat mengubah theme, menambahkan plugin sesuai kebutuhan, komersial, maupun isinya bisa dikatakan situs milik sobat 100% disamping itu CMS ini dapat diubah ulang selama seseorang menguasai PHP, CSS dan skript lain yang menyertainya. WordPress.org ini dapat digunakan secara online maupun offline yaitu menggunakan xampp misalnya dan untuk online harus menggunakan hosting sendiri sebagai penyimpanan website kita.

Masing masing memiliki keunggulan dan kelemahan
  1. Kelebihan wordpress.com
    • Para penggunanya dapat menggunakan aplikasi wordpress dengan gratis
    • Mudah dalam pemakaiannya, karena user tidak harus mengerti tentang database dan coding didalamnya.
    • Lebih stabil, karena ada dukungan pengembang didalamnya yang siap membantu.
  2. Kekurangan wordpress.com
    • Hanya bisa menggunakan fasilitas yang sudah disediakan.
    • Jika menggunakan fasilitas gratisnya akan menjadi subdomain dari induknya yaitu domain_anda.wordpress.com dan tidak bisa digunakan dihosting lain.
    • Kurang fleksibel, karena pengembang tidak hanya mengurusi situs atau blog anda.
  3. Kelebihan wordpress.org
    • Fleksibel karena pengguna dapat memodifikasi atau menambahkan fasilitas yang tidak disediakan. Berbagai tambahan aplikasi seperti themes, widget dan plugin tersedia banyak, baik yang berbayar ataupun yang gratis.
    • Bebas menggunakan domain dan tempat hosting dimana saja.
    • Bisa dijalankan di server lokal, sehingga pengguna bisa lebih leluasa dalam membuat sebuah situs dan setelah jadi baru dijalankan di server hosting.
  4. Kekurangan wordpress.org
    • Tidak semua pengguna bisa menggunakannya, karena dibutuhkan kemampuan dalam database dan bahasa pemrograman lainnya.
    • Walaupun gratis tapi fasilitas yang diberikan tidak digaransi, sehingga segala sesuatu yang terjadi dengan situs tersebut menjadi tanggung jawab penggunanya.
    • Tidak stabil, karena setiap update yang dilakukan oleh pengembang aplikasi wordpress terkadang tidak kompatibel atau cocok dengan modifikasi yang dilakukan oleh penggunanya.
Tips Memilih aplikasi wordpress yang anda butuhkan.
Jika anda sebagai pengguna biasa yang kurang mengerti dengan database dan bahasa pemrograman, tapi anda mempunyai keinginan untuk membuat sebuah situs atau blog, sebaiknya anda menggunakan wordpress.com. Bukan hanya karena gratis semata, tapi aplikasi anda akan lebih stabil karena ada tim pengembang yang mengurusi aplikasi yang anda gunakan. Walaupun domain yang digunakan untuk fasilitas yang gratis ini menggunakan domain tambahan .wordpress.com, tapi anda bisa mengupgradenya menjadi domain tanpa tambahan .wordpress.com dengan fasilitas berbayarnya.
Jika anda sebagai pengguna yang mengerti dengan database dan bahasa pemrograman, sebaiknya anda menggunakan aplikasi dari wordpress.org. Memang sedikit ribet karena kita harus mengurusi aplikasi itu tanpa bantuan pengembang, tapi dilain sisi kita mendapatkan keuntungan karena kita bebas memodifikasi fasilitas yang tidak disediakan oleh pengembang. Selain itu kita dapat belajar bagaimana membuat sebuah aplikasi yang handal.

Cara Membuat WordPress di WordPress.com

Langkah-langkahnya adalah sebagai berikut:
1.                   Klik link ini >> www.WordPress.com. Setelah terbuka, nanti akan muncul form seperti gambar dibawah ini. 
cara membuat wordpress
Pilihlah nama blog Anda pada kolom tersebut, nantinya nama ini adalah alamat yang akan digunakan oleh orang lain untuk mengunjungi blog WordPress.com Anda. Jika sudah, lanjutkan dengan mengklik tombol “Buat Situs Web”.
Untuk informasi saja, nama blog ini hanya bisa digunakan oleh satu pengguna saja, sehingga jika ketika Anda sudah memasukkan nama blog tetapi WordPress menolaknya, dimungkinkan sudah ada pengguna yang menggunakan nama blog yang hendak Anda masukkan tadi. Untuk itu, cobalah nama lain dan cari yang sedikit unik, sehingga bisa diterima oleh pihak WordPress.
2.                   Setelah itu, akan muncul form seperti berikut. Isi kolom-kolom tersebut menggunakan informasi yang benar. Nantinya informasi seperti email, nama pengguna (username), dan password, akan selalu Anda gunakan ketika hendak masuk ke halaman panel kontrol blog WordPress milik Anda.
cara membuat wordpress
3.         Pada kolom Alamat Surel (Email), pastikan Anda menggunakan alamat email yang aktif, dan sering Anda buka. Karena WordPress akan mengirimkan konfirmasi pendaftaran yang dikirimkan melalui email tersebut. Jika Anda belum punya email, mohon buatlah email terlebih dahulu. Bisa di Yahoo, Google, atau yang lain.
4.         Pada kolom Nama Pengguna (Username), pilih nama pengguna yang Anda sukai. Mohon untuk diingat baik-baik, jangan sampai lupa, karena nama pengguna ini sifatnya eksklusif dan hanya bisa digunakan oleh satu pengguna saja. Jika username pilihan Anda ditolak, cari nama lain hingga diterima.
5.         Pada kolom Kata Sandi atau password, buatlah kata yang sedikit unik, yang kira-kira Anda selalu ingat, namun tidak mudah ditebak oleh orang lain.
6.         Nah, jika nama blog yang Anda masukkan tadi tersedia dan bisa diterima oleh WordPress, maka pada kolom Alamat Blog ini akan tertera nama blog pilihan Anda dengan ditandai tanda centang berwarna hijau. Namun jika nama pilihan Anda sudah dipakai oleh pengguna lain, maka akan muncul tanda centang berwarna merah.
7.         Jika pengisian informasi pada kolom-kolom di atas sudah selesai, scroll ke bawah mouse pointer Anda, sehingga di tampilan layar laptop / PC Anda terlihat tabel seperti berikut.
            cara membuat wordpress
Klik tombol “Buat Blog” yang saya tandai dengan panah merah, karena kita akan membuat versi blog WordPress yang gratisan. dan WordPress akan mengirimkan email konfirmasi berkaitan dengan akun yang baru saja Anda daftarkan.
8.         Nah, sekarang saatnya Anda melakukan penyesuaian terhadap blog yang hendak Anda pakai. Kurang lebih ada 4 langkah yang bisa Anda ikuti, silahakan klik pada gambar:
// SESUAIKAN JUDUL BLOG
cara membuat wordpress

// PILIH TEMA BLOG
cara memilih themes
// SESUAIKAN TEMA YANG SUDAH DIPILIH
cara setting themes wordpress

// HUBUNGKAN DENGAN SOCIAL MEDIA
4. Hubungkan dengan social media




TIPS:
Langkah-langkah di atas merupakan opsional / tidak wajib, sehingga Anda bisa mengaturnya kembali nanti. Klik tombol “Langkah Berikutnya” untuk mempercepat proses. Jika sudah selesai, nanti Anda akan dibawah ke halaman admin panel blog, dan pastikan Anda melihat notifikasi seperti berikut :
          cara membuat wordpress
9.        Sekarang buka email yang tadi Anda gunakan untuk registrasi di WordPress.com. Klik link aktivasi di email Anda. Jika Anda tidak menemukan email dari WordPress, coba cari di folder spam atau bulk email. Ini contoh email yang dikirimkan oleh WordPress.
          cara membuat wordpress

10.       Nah, apabila akun Anda sudah aktif, maka akan muncul pesan seperti dibawah ini.
          cara membuat wordpress

2. Pengertian Joomla


Joomla adalah Contant management system (cms) Sumber terbuka yang bebas ditulis dengan bahasa pemograman php dan data base MySQL baik untuk internet maupun intranet Joomla menyertakan banyak fitur untuk meningkatkan kinerja termasuk page caching , web indexing , RSS freed , halaman untuk dicetak , web side searchingdan dukungan Internasionalisasi.

 Nama Joomla berasal dari sebutan phonetic sebuah kata bahasa Swahili “Jomla”dengan arti kebersamaan atau kesatuan pilihan nama mencerminkan komitmen para pengembang dan komunitasnya saat membentuk Joomla ketika terjadi perpecahan dari Mambo di bulan Agustus 2005. Joomla dibangun sebagai fork dari mambo dengan rilis perdana Joomla 1.0.0 pada tanggal 16 september 2005 mengembangkan versi dari mambo. Menurut roadmap Joomla 2.0 code base akan ditulis ulang sekelompok dibangun mengadopsi GNU General Publik Licence

 Untuk membuat suatu Informasi Electronik yang mulai berkembang saat ini diperlukan suatu CMS Content Management system / server php yang digunakan untuk pembuatan/desain grafis, dan juga memiliki penulis yang kreatif untuk mengisi halaman-halaman web site dengan Mambo ataupun Joomla, tidak menjadi masalah karena seluruh tool memiliki fungsi yang sama. Meskipun program ini menggunakan bahasa php, bukan berarti harus paham seluruhnya tentang kode php. Bagi mereka tidak memahami kode HTML, Javascript, ASP, CGI, , maupun php tidak perlu takut untuk mempelajarinya karena meskipun tidak tahu tentang kode-kode tersebut, orang bisa membuat sebuah web secara cepat dengan beberapa fitur yang sangat kompleks yang dihubungkan dengan dalam suatu jaringan local atau luas (internet).

 CMS adalah software computer yang memfasilisasikan pembuatan documen atau contant secara gotong royong dan kolaboratif , CMS acap kali di artikan sebagai Aplikasi Web untuk mengelola web site dan contant web , sementara untuk mengedit dan membuat artikel disertakan software khusus client , ia juga dapat digunakan untuk menyimpan documen perusahaan terutama seperti operators manuals , tecnical manuals , sales guides dan sebagainya, solusi cms banyak tersedia dalam bentuk open source yang bebas pungli dengan teknik yang lebih luas portal system wiki system bared group ware.

 Terdapat 3 hal dasar yang harus ada untuk membangun website berbasis Joomla

 1. PHP
PHP ( Personal Homepage ) atau yang lebih dikenal dengan sebutan Hypertext Preprocessor merupakan bahasa pemrograman atau scripting yang bersifat server side. Hasil koding atau pembuatan sintaks atau program kode PHP akan dieksekusi oleh webserver dan kemudian akan dikirim dalam bentuk HTML ke browser client. Kode PHP tersebut tidak dapat dilihat oleh pengunjung, melainkan kode HTML yang merupakan hasil eksekusi kode PHP tersebut yang dapat dilihat oleh pengunjung. Untuk mengubah kode PHP tersebut menjadi kode HTML juga diperlukan sebuah aplikasi yaitu Engine PHP. Engine PHP tersebut akan digunakan bersama aplikasi webserver.

 2. DataBase
Selain menggunakan bahasa pemrograman atau scripting PHP, Joomla juga diciptakan dengan menggunakan database MySQL. Database ini akan digunakan untuk menampung data-data Joomla milik Anda, seperti user, password, dan data-data lainnya. Jika anda ingin download aplikasi MySQL, bisa anda buka http://mysql.com.

 3. Webserver
PHP dan database merupakan dua hal dasar yang harus ada dalam membangun Joomla, tetapi bagian terpenting yang harus ada dalam sebuah website adalah webserver, karena berfungsi sebagai pusat control dari pengolahan data website. Jadi input yang dilakukan oleh pemakai internet akan diolah kemudian dikembalikan lagi kepada pemakainya. Salah satu webserver yang sekarang ini banyak digunakan adalah Apache, karena telah banyak mendukung format file server tanpa perlu tambahan komponen aplikasi lagi. Terlebih lagi Joomla akan berjalan baik bila menggunakan webserver Apache. Jika Anda ingin download aplikasi webserver, bisa anda buka http://apache.org.
Bagaimana cara install Joomla.
  1. Anda install paket apache Friends yaitu XAMPP yang di dapat di click here download untuk paket windows, untuk pake Linux click here to download download
  2. Kemudian apa bila anda sudah menginstall XAMPP,anda nyalahkan semua service nya baik itu apache ftpzila,mysql .(untuk menginstall nya ikuti step-step nya)
  3. Kemudian anda download file paket Joomla nya disini download
  4. Setelah anda mendownload paket Joomla nya ada extract file paket nya tersebut ke suatu folder,cth : Joomla, kemudian folder Joomla tersebut anda copy kan (untuk windows) kec:/program files/xampp/htdocs/ Untuk Linux anda buat folder baru cth: Joomla kemudian extract pekt joomla anda di /var/www/Joomla (folder yang anda buat tadi),
     kemudian rubah file kepemilikan nya dengan cara :
  • root@linuxku:/home/aini# cd /var/www/
root@linuxku:/var/www# find /var/www/Joomla/ -type
d -exec chmod 755 {} \;
root@:/var/www# find /var/www/Joomla/ -type
f -exec chmod 644 {} \;
root@linuxku:/var/www# chown -R www-data:wwwdata
Joomla/
5. Kemudian anda buka browser anda baik itu mozilla atau IE,ketik
http://localhost:80/Joomla(sesuai folder yang anda buat tadi).Jangan lupa service apache
dan mysql nya di jalankan.
6. Maka akan tampil :

Tekan Tombol Next, maka tampil License dari Joomla:

Klik Tombol Next Lagi, maka akan tampil :

isi Hostname : localhost
isi My Sql User Name : root
password kosongkan
isi My SQL Database Name terserah anda mau buat apa, Kemudian klik tombol Next.
maka akan tampil sebagai berikut :

isikan nama situs yang ingin anda buat cth :situsku, kemudian klik tombol Next, maka akan tampil sebagai berikut :

isikan alamat email anda,dan ganti lah password nya,yang lain biarkan dalam keadaan default.
Kemudian klik tombol Next Kembali, maka akan tampil sebagai berikut :

Tanda ini berarti mengisyaratkan bahwa Joomla anda telah selesai di install,kemudian pada folder c:/program files/XAMPP/Htdocs/Joomla (folder yang anda buat) hapus, folder installation, kemudian anda buka lagi browser nya maka jalankan atau ketik http://localhost:80/Joomla, jika anda ingin meng customize situs anda maka anda tinggal pilih administrator :masukan user name :admin dan password yang telah anda isi tadi pada saat instalasi Joomla. Dan Jika anda ingin meng upload Joomla anda ke internet anda dapat menggunakan fantatisco atau ftp apa saja tergantung tempat hosting anda menyediakan nya apa. Jika anda ingin membuat situs gratis joomla anda dapat mengunjungi www.freehostia.com,
Hasil gambar untuk bootstrap logo

3. Pengertian Bootstrap


Bootstrap adalah sebuah framework CSS yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangunlayout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah..

Untuk Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Bagaimana Belajar Bootstrap untuk pemula?

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.

Persiapan:

  1. Anda Harus memiliki file distribusi Bootstrap Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap sebagaimana terlihat pada gambar diatas, langsung saja! klik tombol tersebut. Kemudian pilih lagi Download Bootstrap
    Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.
  2. Download jQuery Library Untuk Bekerja Offline Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.x kemudian, download dengan mengklik link Download the compressed, production jQuery 1.12.0
  3. Anda harus memiliki code editor. Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.
    Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++

Memulai...

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:
  1. Buat Folder Baru Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap".
  2. Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
  3. Copy file jQuery ke dalam folder js Copy dan Gabungkan file jquery-1.12.0.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
  4. Buat file html Buat file baru dengan notepadd++ kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3.3.6 Starter Template - by dul.web.id</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- AWAL CONTENT  -- hapus dari sini kebawah (sampai AKHIR CONTENT) -->
    <div class="container">
      <h1>Apa Kabar Dunia?</h1>
      <!-- Small modal -->
      <button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button>

      <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">

            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
            </div>
            <div class="modal-body">
              Hai... salam kenal dari <strong>dul</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- AKHIR CONTENT - dari sini kebawah jgn dihapus -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.12.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Saatnya untuk Uji Coba

Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox
jangan gunakan internet explorer. Jika file Bootstrap.css berhasil diload maka tombol button akan memiliki style ala bootstrap seperti ini:
Kita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten.
4. Pengertian Framework 
Framework adalah kerangka kerja. Framework juga dapat diartikan sebagai kumpulan script (terutama class dan function) yang dapat membantu developer/programmer dalam menangani berbagai masalah-masalah dalam pemrograman seperti koneksi ke database, pemanggilan variabel, file,dll sehingga developer lebih fokus dan lebih cepat membangunaplikasi.Bisa juga dikatakan Framework adalah komponen pemrorgaman yang siap re-use kapansaja, sehingga programmer tidak harus membuat skrip yang sama untuk tugas yang sama.Misalkan saat anda membuat aplikasi web berbasis ajax yang setiap kali harus melakukan XMLHttpRequest, maka Xajax telah mempurmudahnya untuk anda dengan menciptakan sebuah objek khusus yang siap digunakan untuk operasi Ajax berbasis PHP. Itu adalah salah satu contoh kecil, selebihnya Framework jauh lebih luas dari itu.
Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan fungsi (libraries),maka seorang programmer tidak perlu lagi membuat fungsi-fungsi (biasanya disebut kumpulanlibrary) dari awal, programmer tinggal memanggil kumpulan library atau fungsi yang sudah adadidalam framerwork, tentunya cara menggunakan fungsi-fungsi itu sudah ditentukan olehframework. Beberapa contoh fungsi-fungsi standar yang telah tersedia dalam suatu framework adalah fungsi paging, enkripsi, email, SEO, session, security, kalender, bahasa, manipulasigambar, grafik, tabel bergaya zebra, validasi, upload, captcha, proteksi terhadap XSS(XSSfiltering), template, kompresi, XML dan lain-lain.
Macam-macam framework
1.Framework PHP
  • CakePHP
  • Code Igniter (CI)
  • Symphony
  • Zend
  • Yii
  • Kohana
2. Framework Javascript
  • JQuery
  • Mootools
3. Framework Ruby
  • Ruby on Rails (ROR)
Pengertian Code Igniter

CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat aplikasi web dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. Codeigniter adalah sebuah aplikasi open source yang bebas untuk digunakan oleh siapapun tanpa harus membayar lisensi untuk menggunakannya.
Codeigniter juga merupakan sebuah framework untuk membangun sebuah aplikasi website dinamis menggunakan PHP yang dapat digunakan dengan cepat dan mudah tanpa harus membangun apilkasi PHP dari awal.

Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang pemrograman, tanpa harus membuat fungsi atau class dari awal.
Ada beberapa alasan mengapa menggunakan Framework: 
  1. Mempercepat dan mempermudah untuk membangun sebuah website atau aplikasi web. 
  2. Proses maintenance lebih mudah karena sudah ada skema tertentu dalam sebuah framework.
  3. Secara umum framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal (misalnya validasi, pagination, multiple database, scaffolding, session, error handling, dsb).
Pengertian MVC (Model View Controller).
Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu :
  • View, merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model.
  • Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view.
  • Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.
Dengan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan kemampuan developernya, yaitu programmer yang menangani bagian model dan controller, sedangkan designer yang menangani bagian view, sehingga penggunaan arsitektur MVC dapat meningkatkan maintanability dan organisasi kode. Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan ditampilkan.

Beberapa kelebihan framework CodeIgniter dibanding dengan framework lain : 
  1. Performa sangat cepa.
  2. Konfigurasi yang sangat minim.
  3. Banyak komunitas pengguna atau forum CI.
  4. Dokumentasi yang sangat lengkap.
  5. Mudah untuk dipelajari.
  6. Menggunakan MVC (Model View Controller).

Framework YII1




Framework YII
Yii adalah sebuah source framework menggunakan bahasa pemrograman PHP yang dibuat oleh Qiang Xue tanggal 01 Januari 2008. Sebelumnya Qiang juga mengembangkan framework PRADO selama bertahun-tahun. YII secara resmi dirilis untuk maemenuhi kebutuhan para pengembang perangkat lunak berbasis web. Beberapa pengembang perangkat lunak merespon positif atas perkembangan framework PHP.
Yii merupakan framework (kerangka kerja) PHP berbasis-komponen, berkinerja tinggi untuk pengembangan aplikasi Web berskala-besar. Yii menyediakan reusability maksimum dalam pemrograman Web dan mampu meningkatkan kecepatan pengembangan secara signifikan. Nama Yii (dieja sebagai /i:/) singkatan dari “Yes It Is!“. Aplikasi yang dibangun menggunakan framework YII membutuhkan beberapa file pustaka (lib) yang disediakan dalam framework YII, dan menggunakan metode pemrgoraman berorientasi objek, atau dalam bahasa inggris disebut OOP (Object Oriented Programming) . Membangun sebuah aplikasi dengan framework YII, pengembang cukup menggunakan kelas yang tersedia di PHP sendiri. Semua yang dibangun menggunakan YII menggunakan arsitektur Model-View-Controller (MVC). Framework YII memberlakukan dan mengatur cara penyimpanan kode program yang diletakkan dalam folder model dalam folder/models/, view dalam folder/view, dan controller dalam folder/controller/. Sehingga sangat terstruktur dan efisien dalam penulisan kode program. Berikut merupakan respon yang paling tepat dan akurat untuk yang baru dengan Yii:
Apakah Yii cepat? … Apakah Yii aman? … Apakah Yii profesional? … Apakah Yii cocok untuk projek saya berikutnya? … Yes, it is!
1. Persyaratan
       Untuk menjalankan aplikasi Web berbasis Yii, Anda memerlukan server Web yang mendukung PHP 5.1.0. Bagi para pengembang yang ingin menggunakan Yii, mengerti pemrograman berorientasi-objek (OOP) akan sangat membantu, karena Yii merupakan framework OOP murni.
2. Yii Paling Cocok untuk Apa?
       Yii adalah framework pemrograman umum Web yang bisa dipakai untuk mengembangkan semua jenis aplikasi Web. Dikarenakan sangat ringan dan dilengkapi dengan mekanisme caching yang canggih, Yii sangat cocok untuk pengembangan aplikasi dengan lalu lintas-tinggi, seperti portal, forum, sistem manajemen konten (CMS), sistem e-commerce, dan lain-lain.
3. Bagaimana Yii Dibandingkan dengan Framework Lain?
       Seperti kebanyakan PHP framework, Yii adalah MVC framework. Yii melampaui framework PHP lain dalam hal efisiensi, kekayaan-fitur, dan kejelasan dokumentasi. Yii didesain dengan hati-hati dari awal agar sesuai untuk pengembangan aplikasi Web secara serius. Yii bukan berasal dari produk pada beberapa proyek maupun konglomerasi pekerjaan pihak-ketiga. Yii adalah hasil dari pengalaman kaya para pembuat pada pengembangan aplikasi Web dan investigasi framework pemrograman Web dan aplikasi yang paling populer.

 Framework Yii2
Yii adalah PHP framework berbasis component yang dirancang untuk membangun aplikasi web dengan cepat. Yii2 sendiri adalah mayor upgrade dari Yii1.1. Bagi pengguna Yii1, ada baiknya menganggap Yii2 adalah framework yang berbeda karena Yii 2 benar-benar ditulis ulang dengan memanfaatkan teknologi dan protocol terbaru saat ini. Pengguna Yii 2 harus mulai familiar dengan composer, PSR, namespace, trait dan lain-lain.

6. Perbedaan Xamp, Wamp, dan Appserv




XAMPP untuk x os, apache, mysql, php dan perl.
x - os berarti dapat digunakan untuk setiap sistem operasi. XAMPP mudah digunakan daripada wamp. Dengan cpanel sangat bagus dan baik untuk pemula dan mulai, jeda dan berhenti tombol bekerja sangatbaik dengan fungsionalitas. Anda juga dapat menambahkan layanan lainnya untuk xampp.

Singkatnya:

XAMPP lebih kuat dan sumber daya yang mengambil daripada WAMP.
WAMP menyediakan dukungan untuk PHP dan MySQL
XAMPP menyediakan dukungan untuk MYSQL, PHP dan PERL

XAMPP juga memiliki fitur SSL sedangkan WAMP tidak. Jika aplikasi Anda perlu berurusan dengan aplikasiweb asli saja, pergi untuk WAMP.
Jika Anda memerlukan fitur lanjutan sebagaimana dinyatakan di atas, pergi untuk XAMPP. Pada prioritas, Anda tidak dapat menjalankan keduanya bersama-sama dengan default instalasi XAMPPmendapat prioritas yang lebih tinggi dan tidak memakan Port. Jadi WAMP tidak dapat dijalankan secaraparalel dengan XAMPP.



WAMP untuk windows, apache, mysql, php.
Keuntungan terbaik menggunakan wamp adalah bahwa sangat mudah untuk setup konfigurasi di wamp.Tapi ketika saya mulai menggunakan wamp, beberapa kali aku menghadapi masalah saat menjalankan kodephp, mungkin itu adalah masalah pengkodean saya tapi apa lagi. Kebanyakan orang berbicara bahwawamp tidak baik untuk pemula tetapi saya mengatakan bahwa wamp sangat mudah digunakan dan lebihbaik untuk pemula dan pengguna tingkat lanjut.



Appserv merupakan aplikasi yang berfungsi untuk  installl beberapa program antara lain Apache, PHP, MySQL dalam 1 menit. dia hanya menginstal tools yang benar - benar digunakan, sehingga dalam folder direktori itu sedikit sehingga tidak memakan space terlalu banyak :) . Anda dapat membuat web server, database server dalam 1 menit beberapa pertanyaan AppServ dapat menjadi Produksi nyata Web Server atau Database Server. OS yang digunakan bisa menggunkan Os windows ataupun OS linux Tetapi Windows OS tidak cukup baik untuk beban berat pada Anda memori web atau database server. Kami sarankan Anda untuk menggunakan Linux / Unix untuk servis berat beban kerja. Karena Linux / Unix memiliki kecepatan yang lebih dan memerlukan sedikit memori dan penggunaan CPU. Jika Anda membandingkan menyerang ketika menggunakan Windows OS dan Linux / Unix anda dapat menemukan perbedaan yang sangat kecepatan. misalnya Windows dapat melayani 1000 user per detik tetapi Linux / Unix OS dapat menangani lebih dari 1000 user per detik dan makan sedikit memori dan cpu.


Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)