Thekaku.com

Tutorial PHP 003 – Menginstall XAMPP

Kanada Kurniawan — Fri, 29 Mar 2013 07:13:52 +0000

Ok pada bagian sebelumnya kita telah mempersiapkan atau menginstall XAMPP. Selanjutnya kita akan menjalankan program tersebut dengan cara membuka program xampp-control.exe yang terdapat pada folder XAMPP yang telah terinstall. Kemudian akan muncul tampilan seperti berikut

Jika tampilannya seperti di atas maka itu berarti XAMPP anda sudah terinstall dengan baik. Kemudian mari kita aktifkan module Apache dan Mysql nya. Caranya mudah tinggal klik tombol Start yang terletak masing masing di samping tulisan Apache dan Mysql. Setelah anda klik tunggulah proses pengaktifannya, dan selanjutnya tampilan akan berubah menjadi seperti ini :

Akan terlihat tulisan running jika module Apache dan Mysqlnya sudah berjalan. Langkah selanjutnya, bukalah blowser anda. Tulis localhost pada Address dan tekan enter. Maka akan muncul halaman seperti berikut

jika muncul halaman serti di atas maka berarti anda telah siap memulai menuliskan kode PHP anda yang pertama. Ok mari kita lanjutkan pada tutorial berikutnya.

Click on any of these buttons to help us to maintain this website. Seguir a @thekaku

Ver. 1.0

Tutorial XHTML dan CSS 004 – Paragraf dan Line Break

Kanada Kurniawan — Wed, 27 Mar 2013 07:29:07 +0000

Pada tutorial kali ini kita akan membahas tentang paragraf dan line break. Loh, bukannya membuat paragraf itu mudah banget ya? Tinggal buat teks aja? Nah itu yang akan kita bahas, tinggal membuat teks saja. Ok mari kita coba membuat sebuah baris tek seperti ini :

Simpan dan lihatlah, perubahannya pada browser anda dengan membuka file tersebut pada browser.

Loh kok ngga bisa ya? Nah itulah masalahnya. Ternyata dalam kode html, tidak ada bedanye jika kita menekan enter sebagai pemisah paragraf atau tidak. Semuanya akan dibaca oleh browser sebagai satu baris tulisan. Untuk itulah dibuat sebuah kode untuk mendefinisikan sebuah paragraf yaitu

. Cobalah untuk menggunakannya :

lalu lihatlah perubahannya pada browser :

terlihat jelas tulisan di atas terbagi menjadi dua paragraf. Ok saya rasa anda sudah memahaminya.

Selanjutnya bagaimana jika yang diinginkan hanyalah tulisan pada baris baru tanpa adanya jarak yang lebar seperti pada contoh paragraf di atas. Tentu saja itu tidak bisa dilakukan dengan menekan enter beberapa kali pada notepad++ anda. Kita telah mencoba sebelumnya bahwa enter tidak akan dibaca sebagai baris baru oleh browser. lalu bagaimanakah caranya?

Untuk melakukannya anda bisa menggunakan tag
seperti berikut :

atau bahkan bisa dibuat seperti ini :

hasilnya pada browser akan tetap sama seperti ini :

terlihat jelas bedanya dengan menggunakan br dan p bukan? Sekarang tinggal anda yang memilih ingin menggunakan yang mana. Ok cukup dulu untuk tutorial kali ini. Lain kita lanjutkan dengan bold italic dan comment.

Click on any of these buttons to help us to maintain this website. Seguir a @thekaku

Ver. 1.0

Tutorial XHTML dan CSS 003 – Body dan Headings

Kanada Kurniawan — Wed, 27 Mar 2013 06:47:27 +0000

Nah kita sampai pada tutorial ke tiga dari Series Tutorial XHTML dan CSS. Tutorial kali ini tidak akan terlalu panjang, karena hanya akan membahas dua bahasan. Pertama body dan kedua adalah heading. Seperti pada tutorial sebelumnya, kita telah memiliki sebuah file html yang berisi kode berikut :

Dengan membuka file tersebut menggunakan browser, kita hanya akan mendapatkan halaman putih dengan title. Lalu bagaimanakah cara mengisi halaman web tersebut?

Caranya tidaklah susah. Anda hanya perlu mengisikan sembarang tulisan diantara tag body yang telah dibuat lalu save.

Dan kemudian lihatlah perubahannya dengan merefresh browser anda.

sederhana bukan? Dengan melakukan hal seperti itu, anda sudah bisa membuat banyak paragraf yang bercerita hal apapun yang anda sukai. Tapi tentu suatu cerita tidak akan lengkap tanpa adanya judul. Nah, Bagaimanakah cara membuat judul tersebut?

Membuat judul dapat dilakukan dengan menggunakan tag headings seperti berikut :

silakan buat seperti kode diatas dan lakukan tes pada browser. Terlihat bukan sebuah judul dengan ukuran yang lebih besar. Dan tidak hanya besar, judul tersebut juga ditebalkan. Ada beberapa ukuran judul yang dapat anda gunakan. Dan itu tergantung dengan nomor tag heading yang anda tuliskan. Secara umum terdapat setidaknya enam jenis ukuran huruf pada tag heading seperti berikut :

Silakan ketik kode di atas dan lihatlah pada browser, maka akan tampil seperti ini :

Nah, anda tinggal memilih jenis judul yang mana yang cocok untuk anda gunakan. Ok untuk tutorial kali saya rasa cukup, selanjutnya kita akan membahas tentang paragraf dan line break.

Click on any of these buttons to help us to maintain this website. Seguir a @thekaku

Ver. 1.0

Tutorial XHTML dan CSS 002 – Halaman Web Pertama Anda

Kanada Kurniawan — Wed, 27 Mar 2013 06:07:44 +0000

Ok sekarang kita sampai pada bagian yang ditunggu, yaitu membuat halaman web pertama anda. Setelah anda membaca tutorial sebelumnya yaitu Tutorial XHTML dan CSS 001 – Pengenalan maka saya berasumsi anda telah menginstall Notepad++ pada komputer/laptop anda. Karena pada tutorial ini kita akan menggunakannya.

Penjelasan Awal HTML

Ok sebelum memulai menuliskan kode, mari kita pahami teori dasar dari halaman web. Halaman web terdiri dari berbagai tag. Untuk menampilkan sebuah paragraf dalam halaman web anda memerlukan tag paragraf, Untuk menampilkan gambar, maka anda harus menuliskan tag gambar. Untuk menampikan link maka anda memerlukan tag link dan terus seperti itu untuk hal lain. Jadi pada dasarnya sebuah halaman web ialah kumpulan berbagai tag yang diatur sedemikian rupa sehingga memiliki tampilan yang baik dan kaya fungsi.

Tag HTML

Struktur dasar tag ialah seperti ini :

< nama tag > contoh :

lalu tag wajib untuk ditutup dengan tag penutup yang memiliki struktur dasar seperti ini :

contoh :

sederhana bukan? Saya rasa anda telah paham cara membuatnya. Sekarang silakan buka program Notepad++ anda dan ketiklah kode seperti berikut :

Pada baris pertama ialah penjelasan untuk browser (chrome, firefox, ie dll) bahwa file tersebut ialah file HTML. Saya tidak akan membahas terlalu jauh mengenai hal ini karena nanti pada tutorial yang akan datang kita akan membahas lebih detil mengenai hal ini.

Selanjutnya ialah tag yang menjelaskan awal permulaan sebuah file html. Lihatlah pada baris terakhir maka anda akan melihat tag penutup yaitu yang menerangkan pada browser bahwa baris tersebut adalah akhir dari file html tersebut.

Berikutnya tag head dan body yang keduanya merupakan tag standar yang menjelaskan struktur dari file html. Di dalam tag head umumnya dimasukkan informasi-informasi dasar yang tak perlu dibaca oleh pengunjung web namun diperlukan oleh web browser. Sedangkan pada tag body biasanya berisi isi/konten halaman web yang ingin disajikan kepada pengunjung.

Setelah selesai mengetik kode di atas, simpan file tersebut dengan mengklik menu file lalu save, atau langsung saja tekan ctrl+s. Maka akan tampil tampilan seperti berikut :

Isilah nama File name sesuai dengan keinginan anda, tapi pastikan Save as type nya adalah html. lalu klik save.

Kemudian carilah file yang tadi anda simpan kan klik dua kali pada file tersebut. Maka file tersebut akan terbuka dalam sebuah layar browser. Tapi belum terlihat satupun isi,karena kitamemang belum mengisi file tersebut dengan konten web apapun.

Untuk itu mari kita mencoba mengisinya dengan tag title. Tambahkanlah baris kode berikut ini, diantara tag head yang telah dibuat sebelumnya :

Sehingga secara keseluruhan kode akan tampak seperti ini :

kemudian save kembali file dengan menekan tombol ctrl+s. Lihatlah perubahan yang terjadi dengan merefresh halaman web yang telah kita buka tadi. Memang pada halaman tersebut tidak terlihat perubahan apapun, tapi coba lihat pada jendela browsernya. Anda akan melihat bahwa tulisan yang muncul ialah Ini Judulnya, sersis sama seperti yang kita buat tadi.

Menarik bukan? Perlu diketahui bahwa tag html itu tidak harus dibuat secara menurun. Ia bisa juga dibuat mendatar seperti berikut :

atau bahkan seperti ini :

Jadi penulisan tag HTML menurun seperti yang kita lakukan hanyalah untuk mempermudah kita untuk membacanya serta melakukan edit dikemudian hari. Ok saya rasa sampai disini dulu untuk tutorial ke dua ini, selanjutnya kita akan membahas seluk beluk tag body.

Click on any of these buttons to help us to maintain this website. Seguir a @thekaku

Ver. 1.0

Tutorial XHTML dan CSS 001 – Pengenalan

Kanada Kurniawan — Wed, 27 Mar 2013 04:28:44 +0000

Halo apakabar? kali ini saya akan mencoba Tutorial Series tentang XHTML dan CSS. Ok mungkin sebagian masih ada yang bingung mengenai XHTML dan CSS? Bahkan mungkin mengira dua hal ini tidak terlalu penting. Namun sebelum anda membuat kesimpulan lebih jauh, mari kita lihat pengenalan sekilas mengenai XHTML dan CSS.

XHTML adalah sebuah kombinasi dari HTML dan XML (Extensible Markup Language) & merupakan bentuk sempurna (dalam arti, lebih ketat dan bersih dibandingkan HTML). Tujuan XHTML adalah menggantikan HTML. XHTML adalah bentuk HTML yang didefinisikan sebagai aplikasi XML yang berarti XHTML berisi semua elemen dalam HTML 4.01 dikombinasikan dengan sintaks XML.
XHTML adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. XHTML merupakan versi HTML yang memenuhi persyaratan XML dan merupakan sebuah dokumen HTML, dan XHTML menjadi standar internasional dengan spesifikasi yang ditetapkan oleh W3C (World Wide Web Consortium).
Alasan Menggunakan XHTML

Beberapa alasan mengapa menggunakan XHTML :

XHTML menyempurnakan kekurangan-kekurangan pada HTML.
XHTML dapat dijalankan pada berbagai platform, sehingga memungkinkan situs kita dibuka dengan baik melalui PDA dan ponsel.

Penulisan XHTML

XHTML tidak terlalu berbeda dengan HTML 4.01 standar. Jika sudah mempunyai kemampuan HTML 4.01 maka akan sangat membantu untuk memulai XHTML. XHTML mengharuskan penulisan tag dengan huruf kecil (lowercase) dan selalu menutup menggunakan penutup tag.

Dan sedangkan CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Dengan CSS kita dapat mengaturkan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman dengan lebih indah.

Nah, dengan fungsi dan manfaat dari XHTML dan CSS, maka layak bagi kita untuk memperlajarinya secara lebih dalam. Sebagai contoh silakan anda mengakses sebuah halaman web dengan mengklik link berikut : Kota Pontianak. Lalu klik kanan pada area kosong, jika anda menggunakan browser chrome atau firefox maka akan terlihat menu View page source. Klik menu tersebut dan anda akan melihat sejumlah kode yang terlihat sedikit rumit. Dengan mengikuti tutorial saya ini anda akan dapat memahami kode-kode rumit tersebut.

Oklah, cukup basa-basinya, ayo kita segera mulai tutorial ini. Tapi pada bagian pengenalan ini kita belum akan membahas kode, karena anda harus mempersiapkan peralatannya dulu

ya maksud saya adalah aplikasi yang digunakan dalam pembelajaran ini yaitu Notepad++. Untuk itu anda harus mendownload dan menginstallnya pada komputer/laptop anda. Silakan menuju link berikut untuk melakukan download :

http://notepad-plus-plus.org/

Carilah dan klik tombol Download, lalu pilihlah Notepad++ Installer dan klik. Tunggu hingga proses download selesai dan segera install aplikasi tersebut.

Dan sekarang anda sudah siap mulai mengikuti tutorial ini. Pada tutorial berikutnya kita akan mencoba membuat halaman web pertama anda. Ok, sampai disini dulu tutorial001 kali ini, silakan melanjutkan ke tutorial002.

Click on any of these buttons to help us to maintain this website. Seguir a @thekaku

Ver. 1.0

Bagaimana Menurunkan Berat (website) Anda 001 – Hindari Inline dan Embedded Code

Kanada Kurniawan — Mon, 25 Mar 2013 04:09:46 +0000

Terinspirasi dari tulisannya pak zeno rocha (bukan bapak bapak sih, masih 22 tahun umurnya tapi portofolio udah segunung) yang berjudul HOW TO LOSE WEIGHT in the browser, saya jadi pengen nulis artikel dengan tema yang sama. Tapi akan dibagi dalam beberapa bagian biar lebih mudah dibaca.

Ok, cukup pembukaannya. Jadi apa sih yang dimaksud nurunin “BERAT” website anda? Penting ngga sih ngebahas ini? OK untuk pertanyaan yang kedua itu, saya akan jawab dengan pertanyaan juga. Jika anda mengakses sebuah website lalu aksesnya sangat lambat, apakah itu masalah buat anda? Atau itu anda anggap hal yang menyenangkan hehe . Jika pengalaman mengakses website yang lambat itu tidak anda sukai maka artikel ini penting untuk dibahas bagi anda developer web.

Pada Artikel Series ini kita akan membahas tatacara untuk membuat website anda diakses dengan lebih cepat (ini jawaban untuk pertanyaan pertama). Tapi berbagai tips yang ada disini tidak hanya dari saya sendiri (yang masih nubi) tapi akan dicomot dari berbagai sumber seperti para panglima website ternama misalnya Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), dan Sergio Lopes (Caelum). Dengan begitu semoga saja tutorial singkat ini dapat membawa banyak manfaat buat anda.

OK selanjutnya mari langsung ke materi bahasan :

Hindari Inline dan Embedded Code

Ada tiga cara untuk menyertakan CSS atau JavaScript pada halaman website anda :

Inline : dalam prakteknya CSS akan disertakan dalam atribut style sedangkan untuk JavaScript bisa disertakan dalam atribut onclik.
Embedded : jika dengan cara ini CSS akan disertakan dalam tag