A. Web Application
Dalam rekayasa perangkat lunak, suatu aplikasi web (web application
atau sering disingkat webapp) adalah suatu aplikasi yang diakses
menggunakan penjelajah web (web browser) melalui suatu jaringan
seperti Internet atau intranet.
B. Apa itu INTERNET?
Internet adalah jaringan komputer yang terhubung secara global (seluruh dunia) denganmenggunakan TCP/IP sebagai protokol pertukaran paket data.
C. Apa itu WEBSITE
Website adalah kumpulan dari halaman-halaman web, yang
terangkum dalam sebuahdomain(nama alamat situs web), yang berada di
WWW (World Wide Web) di Internet.
D. Web Statis
Web Statis adalah Halaman web statis tidak mengubah isi dan
tata letak dengan setiap permintaan kecuali seorang programmer
secara manual update halaman. Halaman HTMLsederhana adalah contoh
dari konten statis.
E. Web Dinamis
Web Dinamis adalah Halaman web dinamis beradaptasi konten atau
tampilan tergantung pada interaksi input end-user atau perubahan
dalam lingkungan komputasi pengguna, waktu, database modifikasi, dll.
F. Konten Dinamis
• Konten dinamis sering dikompilasi pada server menggunakan
bahasa script sisi server seperti Perl, PHP, ASP, JSP,
ColdFusion, dll. Kedua pendekatan biasanya digunakan dalam aplikasi
yang kompleks.Apa itu PHP?
• PHP adalah PHP Hypertext Preprocessor
• PHP adalah bahasa scripting server-side, seperti ASP
• Skrip PHP dijalankan di server
• PHP mendukung banyak database (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, dll)
• PHP merupakan perangkat lunak open source
• PHP gratis untuk didownload dan digunakan
• PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS (Conten Management System)
• File PHP dapat berisi teks, tag HTML dan skrip
• PHP file dikembalikan ke browser sebagai HTML biasa
• PHP file memiliki ekstensi file “ php”
G. Mengapa PHP?
• PHP berjalan pada platform yang berbeda (Windows, Linux, Unix, dll)• PHP kompatibel dengan hampir semua server yang digunakan hari ini (Apache, IIS, dll)
• PHP adalah GRATIS untuk men-download dari sumber resmi PHP: http://www.php.net
• PHP mudah dipelajari dan berjalan efisien pada sisi server
H. Untuk Memulai
• Instal Apache (atau IIS), menginstal PHP, dan MySQL atau
bisa juga dengan hanyamenginstall XAMPP yang didalamnya sudah
terpaket semua software tersebut• Install WordPress offline sebagai CMS (Content Management System)
I. HTML
Hypertext Markup Language merupkan
standard bahasa yang di gunakan untuk menampilkan document web,
yang bisa anda lakukan dengan HTML yaitu: Mengontrol tampilan dari web
page dan contentnya, Mempublikasikan document secara online sehingga
bisa di akses dari seluruh dunia, Membuat online form yang bisa di
gunakan untuk menangani pendaftaran, transaksi secara online,
Menambahkan object-object seperti image, audi, video dan juga
java applet dalam document HTML.
J. Browser dan Editor
BrowserBrowser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yanglainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad++.
K. TAG-TAG HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML.<begin tag> </end tag>
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
<html>
. . .
</html>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut:
<element attribute = value>
Element : nama tag
Attribute: atribut
dari tag Value : nilai dari atribut.
Contoh:
<body bgcolor=red>
body merupakan element, bgcolor(Background) merupakan atribut yang memiliki nilai red.
L. STRUKTUR HTML DOCUMENT
Document HTML bisa di bagi mejadi tiga bagian utama:
1. HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML<html></html>
tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML.
2. HEAD
Bagian header dari document HTML di apit oleh tag
<head></head> di dalam bagian ini biasanya dimuat tag
TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain
itu Bookmark juga megunakan tag TITLE untuk memberi mark
suatu web site. Browser menyimpan “ title” sebagai bookmark dan
juga untuk keperluan pencarian (searching) biasanya title di gunakan
sebagai keyword. Header juga memuat tag META yang biasanya di gunakan
untuk menentukan informasi tertentu mengenai document HTML, anda
bias menentukan author name, keywords, dan lainyan pada tag META.Contoh :
<META name=”Author” contents=”Bocah Gunung”>
Author dari document tersebut adalah “ Bocah Gunung”
Atribut http-equiv dapat di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header.
Contoh:
<META http-equiv=”Expires”content=”Wed, 7 May 2003
20:30:40 GMT”>
yang akan menciptakan HTTP header :
Expires: Wed, 7 May 2003 20:30:40 GMT
Sehingga jika documents di cached, HTTP akan megetahui kapan untuk mengapdate document tersebut pada cache.
M. BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.
N. BASIC HTML ELEMENT
1. Block Level Element Block level element yang sering di gunakan : Heading (H1 sampai H6)
2. Paragraf (P)
3. List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda tambahkan ke document HTML:
a. Unordered List (Bullet) :
Tag Attribute Value Description
<ul> type squ are Bullet Kotak
disc Bullet Titik
Cir cle Bullet Lingkaran
b. Ordered List (Numbering)
Tag Attribute Value Description <ol> start n Begin number
type I Upper Roman : i Lower Roman, A Uppercase, a Lowercase
c. Definition List
Definition List terdiri diapit oleh tag <DL> </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.
4. Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.
Tag Attribute Value Description
<hr> width 100% default
size n px Angka dalam pixel
5. Pemformatan Page
a. Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.
b. Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.
contoh :
Tag Attribute Value Description
<font>..</font> color Red,yellow dsb
(#000000-#ffffff) Warna bias menggunakan nama atau hexadecimal size 1-7 atau (n px) Ukuran font face Arial, Times News Roman Jenis Font, dibaca mulai dari yang kiri
c. Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.
#RRGGBB
Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
d. Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Value Description
- Left Rata kiri
- Right Rata kanan
- Center Rata tengah
- Justify Rata kanan kiri
Physical Formatting
Tag Description
<B> … </B> Bold text
<I> … </I> Italic text
<U> … </U> Underline Text
<BIG> … </BIG> Untuk ukuran yang lebih besar dari normal
<SMALL> … </SMALL> Untuk ukuran yang lebih kecil dari normal
<STRIKE> … </STRIKE> Untuk memberi garis di tengah text
<SUP> … </SUP> Superscript text
<SUB> … </SUB> Subscript text
<CENTER> … </CENTER> Center document
Logical Formatting
Tag Description
<EM> … </EM> Text miring / <I>
<STRONG> … </STRONG> Text tebal / <B>
<DEL> … </DEL> Mencoret text / <STRIKE>
<INS> … </INS> Underline text / <U>
Indentasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.
6. Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Contoh:
7. Grouping element
Tag DIV dan SPAN di gunakan untuk mengelompokkan elementelement HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content.
=====================================================
XAMPP Adalah paket software yang didalamnya sudah ada apache, php,Instalasi XAMPP di Windows
dan mysql. Xampp adalah salah satu perangkat lunak yang dapat menjadi
web server. Cara Install Xampp di Windows :
a) Siapkan terlebih dahulu installer XAMPP, atau bisa download di http://www.ApacheFriend.org. kemudian jalankan installer dengan klik dua kali file installer XAMPP tersebut. (Dalam tutorial ini menggunakan XAMPP versi 1.7.1)
b) Selanjutnya akan muncul jendala installasi. Klik [Next] untuk melanjutkan installasi XAMPP.
c) Berikutnya Anda akan diminta untuk memilih lokasi dimana XAMPP akan di-install. Secara default sudah terisikan c:\xampp, yaitu berada di partisi C:\ dalam direktori xampp. Jika ingin mengubah lokasinya klik [browse].
d) Setelah memilih lokasi installasi, kemudian muncul opsi installasi. Jika selesai memilih opsi yang diberikan klik [install].
- opsi pertama centang jika ingin membuat shortcut didesktop
- opsi kedua centang jika ingin membuat shortcut di start menu
- opsi ketiga centang jika ingin saat pertama kali windows menyala service Apache langsung dijalankan
- opsi keempat centang jika ingin saat pertama kali windows menyala service MySQL langsung dijalankan
- opsi kelima centang jika ingin saat pertama kali windows menyala service Filezilla langsung dijalankan
f) Jika sudah selesai klik [finish].
g) Jalankan XAMPP Control panel. Centang Svc pada bagian Apache dan MySQL kemudian klik [start]. Hasilnya dapat dilihat pada gambar berikut.
h) Untuk mengecek hasilnya buka browser Anda (Firefox, Chrome, dll) kemudian masukkan pada URL : http://localhost jika berhasil maka akan mucul tampilan seperti gambar berikut.
i) Pilih English, dan muncul halaman xampp.
=========================================================
Mengenal CMS (Content Management System)
Sistem manajemen konten (Inggris: content management System,
disingkat CMS), adalah perangkat lunak yang memungkinkan seseorang untuk
menambahkan dan/atau memanipulasi (mengubah) isi dari suatu situs Web.
Umumnya, sebuah CMS (Content Management System) terdiri dari dua elemen:- aplikasi manajemen isi (Content Management Application, [CMA])
- aplikasi pengiriman isi (content delivery application [CDA]).
Elemen CDA menggunakan dan menghimpun informasi-informasi yang s ebelumnya telah ditambah, dikurangi atau diubah oleh si empunya situs web untuk meng-update atau memperbaharui situs Web tersebut. Kemampuan atau fitur dari sebuah sistem CMS berbeda-beda, walaupun begitu, kebanyakan dari software ini memiliki fitur publikasi berbasis Web, manajemen format, kontrol revisi, pembuatan index, pencarian, dan pengarsipan.
Perangkat lunak CMS
- Drupal
- Joomla
- WordPress
- Plone
- VBulletin
- Moodle
- Cmsid
- RazorCMS
- Dan lain-lain.
- Situs web perusahaan, bis nis, organisasi atau komunitas.
- Portal
- Galeri foto
- Aplikasi E-Commerce.
- Mengelola website pribadi / blog.
- Situs web pembelajaran daring (Inggris: e-learning)
- Dan lain-lain.
WordPress adalah sebuah aplikasi sumber terbuk a (open s ource) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, k eduanya 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 dis esuaik an 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
Berikut langkah-langkah instalasi WordPress CMS pada Localhost:
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”.
3. Pindahkan folder modul WordPress CMS yang bernama “wordpress” tersebut ke dalam “C:\xampp\htdocs”. Yang paling utama diperhatikan adalah penyimpanan yang harus dilakukan di folder “htdocs”. Tidak masalah anda menginstal XAMPP pertama kali di drive D, F, atau yang lainnya, yang terpenting semua file web kita harus ditempatkan pada folder “htdocs” tersebut. Sebab ketika kita membuka URL web tersebut pada browser, sistem localserver XAMPP yang kita gunakan akan membaca folder htdocs tersebut dan akan mencari web yang dimaksud sehingga dimunculkan pada browser. Karena pada e-book panduan instalasi XAMPP yang bisa anda download dari sini dijelaskan bahwa XAMPP tersebut diinstal pada path C:\, maka kita menyimpannya di C:\xampp\htdocs. Itulah sebabnya sangat penting untuk menyamakan persepsi kita.
4. Jika sudah memindahkan atau mengcopy paste modul WordPress CMS tersebut, anda boleh mengganti nama folder “wordpress” sesuai keinginan a nda. Agar sama, kita akan mengganti dengan nama misalnya “web_praktikum”.
5. Buka browser anda, kemudian ketik alamat “http://localhost/phpmyadmin” pada address bar sehingga muncul halaman phpMyAdmin. Kita akan membuat database yang akan digunakan oleh wordpress CMS yang akan kita instal. Tenang saja, kita tidak akan berurusan dengan bahasa SQL. Cukup tulis nama database yang akan kita gunakan pada kotak di bawah tulisan “Create new database”. Misalkan kita beri nama “datawebku”. Kemudian klik tombol “Create” yang ada di sebelah kanannya.
6. Masih pada browser Anda, ketikkan juga alamat “http://localhost/ web_praktikum” pada address bar- nya. Perhatikan bahwa alamat tersebut bergantung pada penamaan folder yang Anda berikan pada langkah ke-4. Karena kita memberi nama foldernya adalah “web_praktikum”, maka alamat URL-nya adalah “http://localhost/ web_praktikum”. Namun, jika anda memberi nama lain misalnya “webnya”, maka alamatnya menjadi “http://localhost/webnya”. Artinya bahwa kita ingin yang ditampilkan pada browser adalah web yang ada di dalam folder “web_praktikum”. Sebenarnya bisa saja kita langsung menyimpan seluruh isi modul wordpress CMS tersebut kedalam folder “htdocs” tanpa harus dimasukkan kedalam folder “web_praktikum”, sehingga alamatnya akan menjadi “http://localhost/”. Biasanya hal ini dilakukan jika kita menyimpan secara online dan ingin web kita terbuka dengan alamat misalnya http://www.namadomain.com/”, bukan “http://www.namadomain.com/ web_praktikum”. Namun, agar kita mudah dalam mengatur web -web yang kita buat dengan memanfaatkan localhost, sebaiknya file-file web tersebut dimasukkan kedalam satu folder. Apalagi jika kita ingin menginstal atau membuat web lain pada localhost tersebut, tentu kita tidak ingin file web-web tersebut bercampur dan tidak beraturan. Sekalian kita belajar management files.
7. Pada browser anda akan muncul tampilan wordpress error seperti gambar di bawah ini karena belum terdapat file bernama wp-confiq.php. File tersebut merupakan file yang berisi setting (konfigurasi) untuk web WordPress CMS kita. Untuk membuat file konfigurasi tersebut, lik 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 ciptakan pada langkah 5, yaitu “datawebku”. User Name : isi dengan username yang punya akses untuk masuk ke dalam sistem phpMyAdmin pada server yang kita gunakan. Untuk localhost dengan XAMPP, biasanya usernamenya 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 “datawebku”. Untuk sementara gunakan yang default, yaitu “wp_”. Setelah itu klik 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.
- Username : Username untuk masuk ke halaman administrator nantinya
- Password(twice) : Password untuk masuk ke halaman administrator nantinya
- Your E-mail :isi dengan alamat email Anda (anda boleh mengisi dengan sembarang email jika tidak mempunyai alamat email).
Setelah semua dirasa benar, klik tombol Install WordPress.
12. Akhirnya instalasi W ordpress CMS pada localhost berhasil. Anda akan ditunjukkan username dan diminta mengingat password yang diinputkan sebelumnya yang akan anda gunakan untuk masuk ke halaman administrator pada wordpress CMS anda. Lalu silahkan Klik Tombol “Log In” untuk masuk ke halaman “Log In Administrator WordPress” anda.
13. Selanjutnya Kita akan mencoba masuk untuk pertama kali ke halaman administrator atau untuk wordpress biasanya disebut halaman “Dashboard”. Bila ingin diakses setelah ini anda dapat mengakses halaman ini dengan cara mengetik alamat “http://localhost/ web_praktikum/wp-admin”. 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 Log In anda akan masuk ke halaman Admin atau Dashboard, dari halaman ini anda dapat mengedit semua konten yang ada pada web anda.
15. Untuk melihat tampilan wordpress CMS yang telah Anda instal, silahkan ketikkan pada browser dengan alamat “http://localhost/ web_praktikum”. Dan ini adalah keseluruhan file web wordpressCMS tersebut. Anda tidak perlu lagi repot membuat halaman-halaman tersebut sampai tenggelam ditumpukan script bahasa pemrograman PHP MySQL. Hanya dengan beberapa langkah saja, Anda sudah mendapatkan sebuah website utuh.
===instalasi Selesai===
Setelah instalasi mari coba kita membuat satu postingan.
Cara Posting Artikel Di WordPress
Berikut adalah langkah-langkah untuk posting artikel di wordpress :
1. Alihkan perhatian ke sebelah kiri atas, sorot menu Posts lalu pilih Add New
2. Masukan judul artikel pada form Enter Title here
3. Setelah bebera saat, akan muncul permalink. Permalink tersebut adalah alamat yang akan tercipta setelah artikel dipublikasikan, permalink tersebut bisa anda ubah/edit sesuai dengan keinginan bila memang anda menginginkannya. Klik tombol edit, lalu masukkan alamat yang anda inginkan, cukup dengan kata kunci saja karena nanti akan otomatis di ubah. Atau bisa juga melalui widget slug yang ada di bagian bawah post editor. Namun ini sifatnya optional, bila anda tidak ingin mengubahnya maka biarkan saja apa adanya.
4. Tulis artikel yang ingin di publikasikan pada form post editing area. Silahkan edit sesuka hati anda, silahkan baca artikel tentang visual post editor bila anda belum begitu paham akan tool yang bisa di gunakan.
5. Apabila artikel tersebut mau di kelompokkan, pilih kategori yang sesuai pada widget kategori, atau anda bisa membuat kategori yang baru.
6. Bila ingin mempunyai tag, isilah tag baru atau pilih dari tag yang sudah ada, namun ini sipatnya optional atau tidak wajib (tag sama fungsinya dengan kategori).
7. Perhartikan juga widget-widget Excerp, Send Trackbacks, Custom fileds, Discussion serta Author, mungkin anda ingin mengisi atau mengubahnya.
8. Biasakan untuk melihat Preview sebelum anda benar-benar yakin untuk mempublikasikan artikel. Preview adalah tampilan artikel anda sebelum benar-benar dipublikasikan, klik saja tombol Preview untuk melakukannya. Bila anda sudah benar-benar yakin artikel tersebut ingin di publikasikan, klik tombol Publish.
Terima kasih^^
Semoga bermanfaat kawand^^
0 komentar:
Posting Komentar