Cascading Style Sheet (CSS) atau yang bisa disingkat dengan CSS, merupakan suatu dokumen yang digunakan untuk melakuakan pengaturan halaman Web yang ditulis dengan HTML atau XHTML. Penggunaan CSS tidak memerlukan perangkat lunak tertentu karena CSS merupakan script yang telah embedded dengan HTML. CSS digunakan oleh Web Designer untuk menentukan warna, jenis, huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisah ini ditujukan agar dapat memisahkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada trukur isi.
2.4.3 PHP
PHP diciptakan oleh Rasmus Lerdorf pada tahun 1994 dan bersifat open source. Sampai bulan januari 2007, PHP sudah digunakan oleh kurang lebih 20 juta domain dan terus berkembang sampai saat ini.
PHP merupakan singkatan dari Hypertext Preprocessor, adalah sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik. Tujuan utama bahasa ini adalah untuk memungkinkan perancang web menulis halaman web dinamis dengan cepat.
PHP merupakan bahasa pemograman web yang bersifat server-side HTML=embedded scripting, di mana script-nya menyatu dengan HTML dan
berada di server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP dikenal sebgai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages) dan JSP (Java Server Pages).
Seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan yang paling utama PHP adalah pada konektivitasnya dengan sistem database di dalam web. Sistem database yang dapat didukung oleh PHP adalah :
1. Oracle 2. MySQL 3. Sybase 4. PostgreSQL
PHP dapat berjalan di berbagai sistem operasi seperti windows 98/NT, UNIX/LINUX, solaris maupun macintosh. PHP merupakan software yang open source yang dapat anda download secara gratis dari situs resminya yaitu http://www. php. net, ataupun dari situs-situs yang menyediakan software tersebut seperti di ftp://gerbang. che. itb. ac. id.
Software ini juga dapat berjalan pada web server seperti PWS (Personal Web Server), Apache, IIS, AOLServer, fhttpd, phttpd dan sebagainya. PHP juga merupakan bahasa pemograman yang dapat kita kembangkan sendiri seperti menambah fungsi-fungsi baru. Keunggulan lainnya dari PHP adalah PHP juga mendukung komunikasi dengan layanan seperti protocol IMAP, SNMP, NNTP,
POP3 bahkan HTTP. PHP dapat diinstal sebagai bagian atau modul dari apache web server atau sebagai CGI script yang mandiri.
Banyak keuntungan yang dapat diperoleh jika menggunakan PHP sebagai modul dari apache di antaranya adalah :
1. Tingkat keamanan yang cukup tinggi
2. waktu eksekusi yang lebih cepat dibandingkan dengan bahasa pemograman web lainnya yang berorientasi pada server-side scripting.
3. Akses ke sistem database yang lebih fleksibel seperti MySQL.
2.4.4 Javascript
Javascript merupakan cross-platform yang dikembangkan oleh Netscape dan pertama kali digunakan dalam browser Netscape. Javascript dibuat agar mudah diintegrasikan kedalam program dan aplikasi lain, misalnya browser. Sebagian besar browser saat ini sudah mendukung javascript. Oleh karena itu, script dari javascript biasanya dimasukkan kedalam suatu HTML dan dieksekusi di browser lain.
2.4.5 MySQL
MySQL adalah sebuah aplikasi Relational Database Management Server (RDBMS) bersifat open source yang memungkinkan data diakses dengan cepat oleh banyak pemakai secara bersamaan dan juga memungkinkan pembatasan akses pemakai berdasarkan privilege (hak akses) yang diberikan. MySQL menggunakan bahasa SQL (structured query language) yang merupakan bahasa standar pemograman database.
MySQL dipublikasikan sejak tahun 1996, akan tetapi sebenarnya sudah dikembangkan sejak tahun 1979. MySQL telah memenangkan penghargaan
Linux Journal Reader’s Choice Award selama tiga tahun. MySQL sekarang
tersedia di bawah lisensi open source, t api ada juga lisensi utuk menggunakan MySQL yang bersifat komersial.
Keunggulan dari MySQL adalah : 1. Bersifat open source.
2. Sistem software-nya tidak memberatkan kerja server atau komputer karena dapat bekerja di background.
2.4.5.1Perintah-perintah MySQL
Pada MySQL terdapat beberapa perintah. Perintah-perintah pada MySQL ini hampir sama dengan perintah-perintah pada database server lainnya. Perintah-perintah MySQL itu antara lain adalah sebagai berikut :
1. Create database, digunakan untuk membuat database pada database server. Sintaksnya adalah :
Create database database_name
Database_name adalah nama database yang akan dibuat.
2. Use database, digunakan untuk menunjuk database yang akan digunakan. Sintaksnya adalah :
Use database_name
Database_name adalah nama database yang akan digunakan.
3. Create table, digunakan untuk membuat tabel pada database yang digunakan. Sintaksnya adalah :
Create table table_name (
Column1 column_type column_attributes, Column2 column_type column_attributes, Primary_key (column_name)
);
Table_name adalah nama tabel yang akan dibuat. Column1 adalah nama kolom yang akan dibuat pada tabel. Column_type adalah tipe dari kolom tersebut , dapat berupa char, varchar, tinytext, mediumtext, longtext, enum, int, tinyint, mediumint, bigint, float, decimal, time, date, datetime, timestamp, year.
4. Insert, digunakan untuk menambahkan record pada tabel. Sintaksnya adalah :
Insert into table_name(column1, column2, . . ) values (value1, value2, . . )
Table_name adalah nama tabel yang akan ditambahkan record-nya. Column1, column2 adalah kolom yang akan ditambahkan data. Value1, value2 adalah data yang akan ditambahkan.
5. Update, digunakan untuk mengubah record yang sudah ada pada tabel. Sintaksnya adalah :
Update table_name set column1=value1, column2=value2 where column=value Table_name adalah nama tabel yang akan dirubah record-nya. Column1, column2 adalah kolom yang akan dirubah data. Value1, value2 adalah data yang akan digantikan.
Sintaksnya adalah : Drop table table_name
Table_name adalah nama tabel yang akan dihapus.
7. Show tables, digunakan untuk menampilkan tabel-tabel yang telah dibuat dalam database yang aktif.
Sintaksnya adalah : Show tables
8. Show field, digunakan untuk menampilkan seluruh field dalam suatu tabel. Sintaksnya adalah :
Show field from table_name
Table_name adalah nama tabel yang akan ditampilkan field-nya.
9. Alter table, digunakan untuk menambah, merubah, dan menghapus field dalam suatu tabel.
Sintaksnya adalah : a. Untuk menambahkan
Alter table_name add column column1 column_type column_attributes
Table_name adalah nama tabel yang akan ditambahkan field-nya. Column1 adalah nama field baru, column_type adalah tipe kolom dan column_attributes adalah atribut kolom yang akan ditambahkan.
b. Untuk mengubah
Alter table_name change column1 column2 column_type column_attributes
column1 adalah mana field yang akan dirubah, column2 adalah nama field baru, column_type adalah tipe kolom dan column_attributes adalah atribut kolom. c. Untuk menghapus
Alter table table_name drop column column1
Table_name adalah tabel yang akan dihapus field-nya. Column1 adalah nama field yang akan dihapus.
2.4.5.2Koneksi PHP dengan MySQL
Untuk menggabungkan bahasa pemograman PHP dan MySQL dibutuhkan beberapa perintah khusus, yaitu :
1. Pembuatan koneksi antara server dari MySQL dengan web server tempat menyimpan halaman web, perintahnya :
<?php
Mysql_connet(“host name”, ”username”, ”password”); ?>
2. Setelah terbentuk koneksi selanjutnya dilakukan pemilihan terhadap database yang akan digunakan, perintahnya :
<?php
Mysql_select_db(“nama database”); ?>
3. Baru kemudian dapat dilakukan perintah-perintah MySQL lainya seperti select, update, insert, dll.
2.4.6 Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 adalah sebuah editor HTML professional untuk perancangan (design), pengkodean (coding), dan pengembangan situs web,
halaman web dan aplikasi web. Bekerja pada lingkungan visual editing, Dreamweaver menyediakan suatu tool yang sangat membantu untuk pembuatan web. Fitur-fitur visual editing di dalam Dreamweaver mengijinkan pembuatan halaman web dengan cepat tanpa menulis baris kode.
Dreamweaver membantu dalam membangun aplikasi web database dinamis dengan menggunakan bahasa server seperti ASP, ASP. NET, ColdFusion Markup Language (CFML), JSP, dan PHP.
2.4.7 Apache
Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan dibanyak sistem operasi (Unix, BSD, Linux, Windows, Novotel Netware dan lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.
Apache memiliki fitur-fitur yang canggih seperti pesan kesalahan yang dapat dikonfigurasi, autentikasi berbasis basis data dan lain-lain. Apache juga didukung oleh sejumlah Antar Muka pengguna berbasis grafik (GUI) yang memungkinkan penanganan server menjadi mudah.
Apache merupakan software open source dikembangkan oleh komunitas terbuka yang terdiri dari pengembang-pengembang dibawah naungan Apache Software Foundation.
2.4.8 WordPress
WordPress adalah sebuah perangkat lunak blog yang ditulis dalam bahasa PHP dan mendukung sistem basis data MySQL. Selain sebagai blog, WordPress
juga mulai digunakan sebagai sebuah CMS (Content management Sistem) 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 dari ketua developer, Matt Mullenweg. WordPress didistribusikan dengan lisensi GNU General Public License.
2.4.8.1Fitur WordPress
1. Bisa memunculkan XML, XHTML, dan CSS standar. 2. Manajemen link yang terintegrasi.
3. Struktur permalink yang memungkinkan mesin pencari mengenali struktur blog dengan baik.
4. Kemungkinan untuk meningkatkan performa blog dengan ekstensi. 5. Bisa mendukung banyak kategori untuk satu artikel.
6. Fasilitas Trackback dan Pingback.
7. Pemformatan teks dan style teks tersebut. 8. Halaman statis.
9. Bisa digunakan untuk banyak kontributor.
2.4.8.2Keunggulan WordPress
1. Bersifat bebas ( free/gratis ) karena dilisensikan di bawah lisensi GPL (GNU Public Licence ).
2. Dapat digunakan secara offline ( tanpa koneksi internet ) menggunakan web server yang di instal secara lokal.
3. Dapat di instal pada web hosting yang mendukung penggunaa PHP dan MySQL. Versi PHP yang digunakan minimal adalah versi 4. 2 dan versi MySQL minimal adalah 3. 23. x.
4. Mudah dikustomisasi.
5. Menyediakan banyak theme dan plugin.
6. Mendukung proses pembuatan kategori dan sub kategori yang tidak terbatas. 7. Dapat melakukan sindikasi otomatis dengan bantuan RSS dan Atom.
8. Menggunakan interface XML ROC (Remote Procedure Call) untuk proses trackback dan remote posting.
9. Dapat diintegrasikan dengan posting melalui email.
10. Support terhadap plugin dan theme (pengaturan skin pada blog).
11. Mempunyai kemampuan untuk mengimpor data dari MovableType, TextPattern, grayMetter, b2evolution dan Blogger yang merupakan kelebihan utama WordPress. Pemakai WordPress juga dapat membackup semua posting untuk kepentingan keamanan dan menguploadnya kembali secara mudah. 12. Mendukung dokumen dengan berbagai jenis ekstensi dan mempunyai API
(Application Program Interface) untuk meningkatkan kemapuan WordPress. 13. Sangat mudah untuk melakukan proses administrasi dan perawatan tanpa
harus memiliki pengalaman. 14. Fasilitas searching yang nyaman. 15. Proses publish konten secara instan.
17. Mempunyai susunan panel administrasi yang terbaik dengan segudang fiturnya.
18. Link manager untuk mempermudah proses pembuatan link dengan blog atau situs lain.
2.4.8.3Cara Membuat Modul Wordpress
Dalam penulisan ini yang dimaksud modul WordPress yaitu terdiri atas plugins dan theme.
2.4.8.3.1 Cara Membuat Theme Wordpress
Wordpress Theme standar, terdiri dari tiga jenis file :
1. satu file .png yang akan menampilkan screenshot theme pada Design > Themes 2. file .css yang akan mendefinisikan desain dan memberi tampilan “kerangka”
file php tersebut
3. file .php yang menggunakan nama file tertentu yang menjadi standar file theme
wordpress yang akan menjadi “kerangka” tampilan blog, dan file
Nama file utama pada struktur theme Wordpress perlu mengikuti standar yang ada. Jadi nama file yang ada harus mengikuti aturan yang telah ditetapkan
wordpress agar dapat “terbaca” dan digunakan oleh sistem wordpress. Adapun
nama – nama file tersebut adalah ( Hanya file – file utama yang penting dan digunakan pada umumnya ) :
1. screenshot.png : File image berukuran ( umumnya ) 300 X 225 pixel. untuk menampilkan screenshot pada Dashboard Wordpress anda di Design > Themes
2. style.css : file css yang berfungsi untuk mendefinisikan tampilan “kerangka”
file php. File css ini juga bertugas menyimpan informasi mengenai theme seperti nama theme, kode versi, alamat pembuat theme, pembuat theme, deskripsi theme, dll menggunakan tag yang telah distandarkan oleh wordpress 3. index.php : file utama sebuah theme. file untuk mendefinisikan tampilan blog secara umum, yang berguna sebagai alternatif terakhir. penjelasan lengkap ada dibawah.
4. home.php : file ini mendefinisikan tampilan utama blog ( tampilan home ) 5. page.php : file ini mendefiniskan apa saja yang akan ditampilkan pada
“halaman page”. page adalah halaman statis dari blog wordpress. contoh,
pada bloggingly.com, halaman pagenya adalah About Bloggingly. ( Ditampilkan di menu diatas )
6. single.php : file ini mendefinisikan apa saja yang akan ditampilkan pada
“halaman post”. halaman post adalah halaman yang menampilkan post anda
secara full, lengkap dengan bagian commentnya. contoh halaman post adalah halaman yang tengah anda baca ini
7. comment.php : file yang mendefinisikan “kerangka” bagian komentar dan
form untuk mengirimkan komentar
8. search.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman hasil pencarian
9. archive.php : file yang mendefinisikan apa saja yang harus ditampilkan pada halaman category, tag dan archive
10. 404.php : file yang mendefinisikan apa saja yang akan ditampilkan pada halaman yang tidak eksis / error page
11. function.php : file yang digunakan untuk mendefinisikan fungsi wordpress tertentu.
12. header.php : file untuk mendefinisikan data – data pada header, lalu digunakan secara bersama oleh tiap file. gunanya? agar header tiap file dipastikan seragam.
13. footer.php : file untuk mendefinisikan nilai footer. sama seperti header. Sistem theme wordpress memiliki hirarki tertentu. misalnya, jika file page.php tidak ada pada theme, secara otomatis wordpress akan menggunakan file index.php untuk mendefinisikan tampilan halaman page.
A.Tag pembangun halaman <html> </html>
Tag yang wajib dimiliki sebuah halaman web. hanya informasi yang tersimpan diantara tag tersebut yang dibaca oleh browser.
<head> </head>
informasi & tag yang ditulis diantara tag ini tidak akan ditampilkan di halaman browser. Yang ditaruh diantara tag ini adalah deklarasi file html, tag metadata halaman web, link ke file css dan javascript, dan script2 javascript atau css yang ditulis secara internal
<body></body>
Informasi yang ditulis diantara tag ini akan ditampilkan pada browser. Tiga tag ini merupakan tiga tag dasar dari sebuah halaman web. Dengan menggunakan tiga tag dasar ini saja anda sudah bisa membuat sebuah halaman web sebenarnya.
A.Tag – tag pada bagian head <title></title>
tag title page. informasi yang ditulis diantara tag ini akan menjadi identitas halaman web, dan muncul pada top bar aplikasi browser
<link rel=”” type=”” href=””>
tag rel. untuk menghubungkan halaman web dengan file yang memberikan fungsi / definisi pada halaman tersebut
B.Tag dasar konten web
<h1> This is heading </h1> <h2> This is heading </h2> <h3> This is heading </h3>
ini disebut tag heading. fungsinya untuk mengatur besar kecil ukuran teks yang ditulis diantara tag tersebut. tag <h1> merupakan ukuran terbesar. semakin besar nomernya, semakin kecil ukurannya.
C.Tag paragraph
informasi yang di tulis diantaranya dianggap satu paragraf <p> </p>
tag break, atau fungsi enter pada editor : untuk membuat tulisan turun ke baris selanjutnya. Jika pada tag – tag lain mengal adanya starting tag dan closing tag, jadi informasi diapit diantara tag, maka tag break merupakan pengecualian. cukup letakkan tag break diantara tag paragraf, dan informasi yang ditulis setelah tag break akan turun ke baris selanjutnya.
<br /> D.Tag italic.
<i></i> E. Tag boldface
informasi yang ditulis diantara tag ini akan tampak tebal <b></b>
F. Tag untuk quotation.
membuat informasi yang ditulis diantara tag ini memiliki karakter yang berbeda dari yang ditulis diantara tag paragraf, diberi style quotation
<blockquote></blockquote> G.Tag link.
informasi yang diletakkan diantara tag ini akan menjadi link yang mengarah pada halaman web lain.
contoh :
<a href=”http://ainkdast.web.id/about/”>about ipank</a> akan tampil pada browser menjadi :
about ipank
H.Tag untuk memanggil image. <img src=” ”>
I. Tag list / daftar
list ini akan sering anda jumpai dalam sidebar dan membuat menu bar <li></li>
tag list item. untuk isi dari list yang ada, sebagai item dari tag ordered list dan unordered list. pemahaman lengkapnya ada dibawah
tag unordered list ( daftar tidak berurut ). Sederhananya : Untuk membuat daftar dengan bullet style. agak sulit dijelaskan, lihat contoh ini :
Penulisan script : <ul>
<li>list satu</li> <li>list dua</li> </ul>
pada browser akan tampak seperti ini : list satu
list dua <ol></ol>
tag ordered list ( daftar berurut ). Sederhananya L Untuk membuat daftar berurut menggunakan angka. Lihat contoh ini :
Penulisan script : <ol>
<li>list satu</li> <li>list dua</li> </ol>
pada browser akan tampak seperti ini : 1. list satu
2. list dua J. Tag Div <div></div>
tag div merupakan tag vital dalam design web menggunakan CSS. tag ini
ini nantinya akan diberikan nilai menggunakan atribut id ( untuk nilai yang hanya keluar sekali ) atau class ( untuk nilai yang keluar berkali – kali ).
contoh :
<div id=”header> Just another Weblog </div>
tag div ini memiliki atribut id dan nilai header. nilai header ini nanti akan didefinisikan pada file css, berapa lebarnya, berapa tingginya, apa warna backgroundnya, dll. Lebih dalam mengenai bagian ini akan dibahas di langkah selanjutnya
2. Aturan Penulisan Tag
Ada beberapa aturan yang harus anda pastikan agar theme anda memenuhi standar web :
1. tulis semua tag dalam huruf kecil. tulis <div> bukan <DIV>.
2. tutup tag secara tepat. Menutup tag dengan tepat : tutup terlebih dahulu tag terakhir yang terbuka. Contoh :
Tepat: <ul> <li>list one</li> </ul> Tidak Tepat : <ul> <li>list one</ul> </li>
A. Ketik / Copy Paste script ini pada notepadd ++ anda : Theme Name : Theme Latihan
Theme URL : http://www.linkurlanda.com Description : Theme untuk latihan Version : 0.1
Author : Nama Anda
Author URL: http://namabloganda.com
Tags: red, fixed width, two columns, widget ready
Theme ini di desain oleh <a href="http://namabloganda.com">Nama Anda</a>
B.Save dengan nama style.css di direktori latihantheme ( C:\xampp\wordpress\wp-content\themes\latihantheme )
4. Membuat File index.php
A.Buka file baru pada notepad ++ anda.
B.Ketik / Copy Paste script ini pada notepadd ++ anda :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> </body> </body> </html>
C.Save dengan nama index.php di direktori latihantheme ( C:\xampp\wordpress\wp-content\themes\latihantheme )
D.Sekarang masuk ke dashboard wordpress lokal anda. masuk ke bagian Design > Themes, Anda akan mendapati ada kolom baru untuk Theme Latihan : a. Data yang anda ketik setelah Theme Name : menjadi nama theme anda b. Data yang anda ketik setelah Theme URL : menjadi link nama theme anda c. Data yang anda ketik setelah Description : muncul menjadi deskripsi theme
anda
d. Data yang anda ketik setelah Tags : muncul menjadi tag untuk theme anda e. Version. Author, Autor URL dan data Theme ini di desain oleh <a
href=”http://namabloganda.com”>Nama Anda</a> tidak muncul di
dashboard admin anda, namun anda tetap harus menuliskannya, karena data ini akan berguna ketika anda mensubmit theme ke direktori theme wordpress, atau ketika desain orang ingin melihat siapa pembuat theme melalui file style.css ini.
2.4.8.3.2 Cara Membuat Plugin Wordpress
1. Buatlah file pada directory plugin, penamaan nama file bebas atau sesuai kebutuhan.
2. Selanjutnya perhatikan potongan script comment php dibawah ini : Plugin Name: Coba Plugin
Plugin URI: http://alamatwebsiteanda.com