Archive for January 2015

Home » Archive for January 2015

Membuat Site di Dreamweaver

Dalam belajar web programming, dreamweaver merupakan tools yang sangat penting terutama bagi para newbie atau pemula yang baru belajar web programming. Karena dreamweaver merupakan software yang memang dibuat untuk para web developer untuk mempermudah membangun website, baik itu web statis, dinamis bahkan web mobile. Didalam Dreamweaver sendiri terdapat banyak sekali fitur dan fungsi yang diperuntukan untuk mendukung pembuatan sebuah wbesite dan yang akan kita bahas kali ini adalah cara membuat site pada dreamweaver.

Site sendiri sangat berguna dalam pembuatan website dengan dreamweaver karena site sangat mempermudah programer untuk mengecek dan memaintenance website yang sedang dibuat. Dengan membuat site programer tidak perlu repot mencari projek yang sedang digarap karena dengan site itu sendiri dreamweaver akan memunculkan projek yang sedang digarap tersebut. Keunggulan lainnya adalah jika kita menyeting site pada web yang sedang kita buat maka file baru yang kita buat akan secara otomatis terismpan kedalam folder site kita.

Selain itu , kita juga dapat menggunakan pilihan live pada dreamweaver jika kita sudah membuat site. Fungsi live adalah kita dapat melihat tampilan web kita secara live dengan dreamweaver tanpa harus mengeceknya dengan menggunakan browser sehingga menjadi lebih efisien dan praktis.

Untuk membuat site sendiri caranya cukup mudah, pertama buka dreamweaver. Pada panel kanan paling bawah anda akan menemukan panel files yang dibawahnya terdapat file explorer. Nah disana anda akan menemukan tulisan biru berlabelkan "Manage Sites". Klik label "Manage Sites" maka akan muncul pop up form manage sites. Pilih "New Sites" kemudian muncul lagi form baru "Site Stup For Unamed Site" dan dibawahnya anda akan menemukan dua buah form isian. Seperti ditunjukan pada gambar dibawah. Pada isian Site Name atau ditunjuk panah A, kita isikan nama situs kita dan itu terserah anda akan diberi nama apa pada situs anda. Dan di sini akan saya isi dengan Projek. Sedangkan pada kolom b atau pada kolom "local site folder" kita isikan alamat folder website kita didalam htdosc, jika anda kesulitan menuliskannya anda dapat memanfaatkan tombol bergambar folder disamping isian tersebut.

Jika anda melakukan klik pada tombol tersebut maka akan muntul form explorer dan disitu anda mulai mencaari folder website anda. Jika sudah ketemu pilih tombol select dan secara otomatis kotak isian berubah menjadi alamat folder situs anda. Setelah itu pilih save dan done.

Jika folder yang ada pada panel files berwarna hijau berarti anda telah berhasil membuat site pada projek anda di dreamweaver

Selamat mencoba, karena setiap ilmu yang anda dapat tidak akan berguna jika tidak dicoba dan diterapkan.

Membuat Website Sederhana Dengan Dreamweaver - Lesson 1

Belajar Web Programming sebelumnya kita telah menyelesaikan project 1 yaitu membuat website dengan adobe potoshop dan kali ini kita akan mencoba project selaljutnya yaitu Project 2 dengan tema Membuat Website Sederhana Dengan Dreamweaver. Cara yang kita gunakan pada project kali ini sama sekali berbeda dengan project sebelumnya, dengn cara ini hampir semua proses pembuatan web akan menggunakan text editor tools dreamweaver kecuali untuk mendesain logo atau gambar kita tetap menggunakan adobe potoshop. Target akhir dari project ini adalah pembaca akan belajar sedikit tentang penggunaan PHP dalam sebuah website, selain itu disini kita akan lebih banyak bermain koding dari pada project sebelumnya. Dan pada artikel kali ini kita akan membuat kerangka websitenya terlebih dahulu dan hasilnya akan seperti gambar dibawah ini.

Untuk membuat kerangka seperti gambar di atas, caranya cukup mudah dan tidak membutuhkan waktu lama. Pertama, buat dulu sebuah project didalam folder htdocs dengan nama "project2". Jika sudah , langsung saja buka adobe dreamweaver dan disini saya menggunakan adobe dreamweaver cs6. Tunggu hingga loading pada dreamweaver benar-benar telah selesai, setelah itu agar lebih mudah kita buat dulu sebuah site baru, untuk membuat site pada dreamweaver dapat dibaca di sini.

Jika site sudah dibuat , kemudian buat sebuah file baru didalam folder project2 lalu simpan dengan nama index.html. Jika sudah dibuat, secara otomatis index.html akan terbuka dalam lembar kerja dreamweaver. Jika sudah siap , pilih design pada panel bar dreamweaver. Setelah itu, buat tabel dengan cara klik pada menu insert kemudian klik Table atau anda juga dapat melakukannya dengan cara lain yaitu klik CTRL+ALT+T secara bersamaan. Kemudian akan muncul form untuk membuat table, buat sebuah tabel dengan 4rows, 2collums, table width 100 dan gunakan percent, border tickhnes diisi dengan angka 0 . Setelah itu klik OK, maka akan muncul tabel kosong dengan 4 baris dan 2 kolom.

Blok kolom pada baris 1, 2 dan 4 (lakukan satu persatu). Blok baris pertama dahulu (kolom1+kolom2) kemudian pada panel properties pada bagian bawah kita pilih tombol "merge selected cells using spans" dan kolom 1 dan 2 pada baris pertama akan menjadi 1. Lakukan pada baris 2 dan baris 4 secara berurutan.

Setelah usai, tabel yang kita buat tadi akan membentuk pola sebuah website (lihat ganbar paling atas). Kita punya kolom header pada bagian atas tabel dan tepat dibawahnya terdapat kolom menu . Dibawah kolom menu sebelah kanan ada kolom sidebar dan kolom konten pada sisi kirinya. Lanjut ke kolom paling bawah ada kolom footer , mirip sebuah website kan! Nah tabel inilah yang nantinya akan kita kembangkan menjadi sebuah websiteyang lebih komplek. Makanya ikuti terus projeknya karena selanjutnya kita akan masuk ke leson 2 project ini yaitu membuat header , menu, sidebar, konten dan footer .

Membuat Website dengan Potoshop - Mark Up HTML Code Part 2

Artikel ini adalah lanjutan dari artikel Membuat website Dengan Potoshop dan Membuat Website dengan Potoshop - Mark Up HTML Code Part 1 , dan disini merupakan artikel tutorial penutup dari project 1 ini. Saya harap anda telah terlebih dahulu membaca dan mempraktekan isi dari artikel sebelumnya sehingga anda benar-benar menyerap ilmu dari tutorial ini. Dan yang akan kita lakukan kali ini merupakan tahap penyempurnaan dari langkah sebelumnya yang kita dapati bahwa web yang kita buat acak acakan dan sekarang kita akan coba memperbaikinya.

Pertama, yang akan kita lakukan adalah menambahkan sebuah koding style sederhana untuk mengatur web kita seperti semula atau saat tidak acak- acakan. Caranya adalah dengan membubuhkan kode di bawah ini pada file html anda , letakan diantara kode <head></head>. Anda dapat meletakannya persis dibawah <head> atau diatas </head> , terserah anda karena efeknya sama saja. Berikut kodenya:

*perhatikan baik-baik penulisannya

Setelah itu , langkah selanjutnya adalah membuat halaman-halaman lain yang ada pada menu web yang kita buat tadi seperti about, contact , gallery, blog dan home. untuk membuat halaman-halaman tersebut caranya cukup mudah , hanya bermodal copy paste saja dari file index.html . Namun sebelum melakukan copy paste , kita akan melakukan beberapa aksi berikut :

Buka index.html menggunakan dreamweaver , masuk dalam mode design. Disana kita akan melihat halaman web kita, namun ada pada dreamweaver. Disinilah kita akan beraksi.

Pertama, klik pada menu about, maka daerah sekitar about yang kita slice di potoshop akan terlihat jelas. Lalu lihat pada bagian bawah properties dreamweaver, cari tulisan link kemudian pada textbox link kita tuliskan "about.html".
Lakukan hal yang sama, kali ini klik pada menu contact , pada textboxnya kita tuliskan "contact.html"
Kita lanjutkan pada menu Gallery dengan tulisan "gallery.html" , menu Home dengan tulisan "index.html" dan menu Blog dengan tulisan "blog.html" kemudian simpan.

tulisan yang kita tulis pada textbox link memiliki arti bahwa ketika kita klik menu-menu tersebut maka, akan langsung menuju ke halaman lain yaitu halaman dengan nama sesuai dengan yang kita tulis di textbox tersebut. Misal kita klik menu about maka kita akan diarahkan ke halaman about.html.

Untuk itu , maka kita harus membuat halaman-halaman tujuan tersebut dan caranya adalah dengan melakukan copy paste halaman index dan merename dengan nama-nama dari menu yang kita buat seperti about.html dan lain-lain. Setelah itu kita tinggal edit konten yang ada didalam masing-masing file yang kita copas tadi. Misal halaman gallery bisa kita hapus semua artikelnya dan kita ganti dengan foto atau gambar dan lakukan pengeditan pada halaman lain, sesuaikan dengan judul menunya. Dengan demikian selesai sudah Project 1 , jika ada pertanyaan silahkan tulis di kolom komentar.

Membuat Website dengan Potoshop - Mark Up HTML Code Part 1

Sebelum anda membaca artikel ini lebih baik anda membaca postingan sebelumnya yaitu Membuat website Dengan Potoshop karena artikel kali ini adalah lanjutan dari artikel sebelumnya jadi artikel ini akan lebih bermakna jika anda terlebih dahulu membaca artikel sebelumnya. Dan bagi yang sudah membaca artikel Membuat website Dengan Potoshop sekarang ini adalah tahapan dimana kita akan melakukan mark up dari desain yang telah kita buat. Dengan melakukan mark up pada kode html kita dapat membuat sebuah website yang kita buat dengan potoshop akan benar-benar menjadi sebuah website karena kita akan menambahkan fungsi link yang dapat memanggil halaman lain.

Untuk yang sudah membuat design pada tutorial sebelumnya, langsung saja akan kita mulai. Yang pertama akan kita lakukan adalah melihat hasil desain yang sudah kita slice dengan menggunakan browser, anda dapat memakai mozila ataupun google chrome. Caranya adalah dengan mengetikan "localhost/coba" kemudian tekan enter. Jika berhasil maka website yang kita buat akan muncul pada halaman browser layaknya sebuah web yang kita buka di internet.

Membuat Website dengan Potoshop - Mark Up HTML Code Part 1

Dalam tampilan sekarang ini website yang kita buat masih ada sesuatu yang kurang yaitu kontennya belum ada. Dan tugas kita sekarang adalah mengisi konten pada website buatan kita ini dan tools yang akan kita gunakan adalah dreameaver, dan dreamweaver yang saya pakai adalah Dreamweaver CS6. Tapi anda tidak harus menggunakan versi yang sama dengan yang saya pakai karena pada dasarnya semua versi itu memiliki fungsi umum yang sama yaitu untuk membangun sebuah web.

Pertama, buka folder coba yang ada di dalam htdocs, didalam folder tersebut terdapat satu buah folder "images" dan satu buah file bernama "index.html" dan hal pertama yang akan kita lakukan adalah menghapus gambar "index7.png" . Nama gambar yang saya hapus mungkin saja berbeda dengan kepunyaan anda jika desain yang anda gunakan juga berbeda, namun anda tentu dapat menemukan mana yang harus dihapus . Yap benar , bagian isi konten yang harus dihapus karena bagian ini yang nantinya akan kita isi dengan artikel.

Kedua, buka file index.html dengan menggunakan dreamweaver , caranya dengan klik kanan kemudian pilih "open with -> Adobe Dreamweaver " . Setelah dreamweaver terbuka , sekarang kita mulai melakukan pengeditan. Lihat gambar diatas, bagian bertanda kotak merah adalah bagian yang akan kita ubah. Bagian yang akan kita ganti adalah bagian dengan kode

Kita ganti dengan :

<p>Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .</p>

<p>Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .Belajar Web Programming di http://belajarwebprogramming69.blogspot.com .</p>

Kemudian kita lihat lagi di browser dengan merefresh halaman yang tadi kita buka. Apakah tampilannya menjadi acak-acakan atau tidak teratur? Jika iya maka anda sukses mengikuti tutorial ini dan siap untuk lenjut ke tutorial selanjutnya "Membuat Website dengan Potoshop - Mark Up HTML Code Part 2"

Membuat website Dengan Potoshop

Belajar Web Programming - Membuat website dengan potoshop. Pada projek pertama ini saya akan mengambil judul Membuat website Dengan Potoshop. Seperti tertera jelas pada judul artikel kali ini, kita akan membuat sebuah website dengan menggunakan adobe potoshop. Apa bisa? Ya tentu saja bisa, untuk membuat website dengan potoshop adalah bukan hal yang tidak mungkin . Bahkan untuk sebagian besar orang cara ini bisa dibilang mudah. Karena memang proses membuatnya juga tidak terlalu sulit. Karena bagian tersulitnya adalah membuat desainnya.

Untuk melakukan projek ini tools yang akan saya gunakan adalah adobe potoshop dan dreamweaver. Namun akan lebih banya menggunakan potoshop. Mari kita mulai.

1. Buka aplikasi Adobe Potoshop

2. Buat sebuah kanvas baru berukuran 1366x800 px(File => New), dengan resolusi 72px/inch dan backgroun transparan. (Ukuran dapat anda tentukan sendiri)

3. Kemudian kita pilih shape "rounded rectangle tool" dan buat shape menutupi seluruh kanvas

4. Klik kanan pada shape dan pilih blending option kemudian klik pada gradient overlay dan pilih warna kesukaan anda. namun bagian bawah harus berwarna putih ya.

5. Buat kemudian buat shape lagi untuk membuat tampilan menu, kali ini saya akan menggunakan shape "rounded rectangle tool" dan kemudian buat desain sesuai imajinasi anda.

6. Setelah selesai membuat desain , kita potong desain kita menggunakan "slice tools", potong pada bagian logo, menu dan halaman untuk artikel.

Design Web Setelah dipotong dengan slice tools

7. Setelah selesai memotong perbagian, selanjutnya adalah menyimpan desain yang kita buat tadi. Namun yang terpenting adalah pilih Save for web & devices. Sebelum melakukan save, siapkan dulu folder untuk menyimpan design anda, Buat sebuah folder "Coba" didalam folder htdocs yang ada di XAMPP .Kemudian akan muncul pilihan jenis gambar yang akan kita simpan, pilih salah PNG. Kemudian pilih save, dan beri nama index.html . Pada Save As Type pilih HTML and Images. Terakhir pilih Save

8. Tahap terakhir adalah mencoba pekerjaan kita dengan cara membuka web yang baru kita buat lewat browser ( lebih baik gunakan Mozila) dengan dara ketik localhost/coba ("coba" adalah nama folder tempat kita menyimpan projek kita dari potoshop tadi. Jika berhasil maka akan muncul seperti gambar dibawah ini.

Nah dengan demikian pembuatan template web telah usai dan selanjutnya kita akan memasuki tahap penyempurnaan dengan deramweaver.

Editor Gambar untuk Web Programming

Selain XAMPP dan Text editor, untuk membuat sebuah website adalah editor gambar. Editor gambar sendiri sangat penting, kenapa? Karena sebuah website akan terlihat lebih menarik jika diberi gambar dengan tema yang sesuai dengan website yang akan dibangun. Misal website yang membahas tentang fashion, akan lebih menarik dan meyakinkan jika didalamnya dibubuhi gambar-gambar pakaian. Dengan gambar atau grafik juga akan menunjukan seberapa bonafit perusahaan pemilik website tersebut. Dan untuk membuat sebuah desain gambar yang menarik tentunya dibutuhkan tools atau aplikasi yang menarik juga bukan.

Dan di sini aplikasi editor gambar yang akan kita pakai adalah Adobe Potoshop, anda tentu pernah melihat atau bahkan menggunakan aplikasi ini bukan. Adobe potoshop sendiri adalah sebuah aplikasi foto editor yang diluncurkan oleh Adobe. Jika anda belum memiliki tools ini, and dapat membelinya langsung dari situs pembuatnya yaitu adobe. Dan jika anda tidak memiliki budget untuk membelinya , saya menyarankan untuk mendowload versi gratisnya namun hanya berlaku 30 hari saja.

Untuk tools Editor gambar sendiri, saya hanya memberi referensi potoshop karena hanya ini yang saya tahu dan saya bisa. Dan jika anda punya editor gambar lain seperti corel atau yang lainnya, silahkan saja. Namun di sini saya akan lebih banyak menggunakan potoshop untuk editing gambar.

Kenapa potoshop?

Kenapa saya menggunakan potoshop? Karena potoshop memiliki beberapa keunggulan dan salah satunya adalah kita dapat langsung membuat sebuah template website dengan menggunakan aplikasi ini. Tools yang canggih bukan? Selain itu , potoshop menggunakan sistem multilayer yang memberi banyak keuntungan bagi penggunanya seperti . Gambar asli yang kita miliki tidak akan rusak karena yang kita edit adalah layer yang berbeda. Jikan kita salah edit atau kita tidak ingin menampilkan sebuah editan kita hanya perlu klik gambar mata dan layer itu tidak akan tampil. Selain itu kita juga dapat memindah posisi layer dibawah layer sebelumnya atau setelah layer sesudahnya tinggal drag and drop.

Jadi langsung saja instal potoshopnya di komputer anda dan kita akan segera memulai projek pertama kita. Dan versi potoshop yang saya gunakan adalah Adobe Potoshop CS3.

Text Editor Tools Untuk Web Programming

Selain XAMPP, untuk membuat sebuah website juga diperlukan tools-tools lainnya terutama dalam penulisan koding atau source dari sebuah web itu sendiri. Sebenarnya untuk penulisan source website tidak harus menggunakan tools khusus untuk membuat website, dengan hanya memakai notepad bawaan windows pun anda sudah bisa membuat sebuah website. Namun , untuk pemula yang baru belajar sangat dianjurkan untuk menggunakan tools lain yang diperuntukan khusus untuk membuat sebuah website. Tools tersebut memang dibuat untuk membangun sebuah website jadi sangat mempermudah penggunanya belajar web programming.

Tools yang ada sebenarnya sangat banyak dan bervariasi, namun dengan tujuan yang sama yaitu untuk membangun sebuah website. Ada tools yang sederhana yang kegunaannya hanya untuk mengedit text dan ada pula tools yang lengkap seperti Dreamweaver. Dan tools yang akan sering kita gunakan adalah Dreamweaver. Anda dapat membeli Dreamweaver di situs resminya atau anda juga dapat mencoba paket trial selama 30 hari.

Dreamweaver adalah sebuah aplikasi khusus yang dirancang untuk membangun sebuah website. Didalamnya terdapat banyak sekali fitur yang bertujuan untuk mempermudah penggunanya. Dengan dreamweaver anda dapat membuat berbagai jenis file pengusung web, seperti html, php, css,js,ajax dan masih banyak lagi. Selain itu dengan dreaweaver anda juga akan lebih mudah melakukan koneksi database, anda hanya cukup melakukan sedikit konfigurasi untuk koneksinya dan setelah jadi anda hanya perlu melakukan tarik dan tempel untuk meletakkan koding yang berhubungan dengan database.

Selain dreamweaver , aplikasi lain yang akan kita pakai adalah notepad plus plus. Sesuai dengan namanya , aplikasi inipun mirip dengan notepad. Namun bedanya ada pada tampilannya, jika anda membuka sebuah file html dengan notepad plus plus maka tulisan yang ditampilkan akan berwarna-warni jadi tampilan koding menjadi lebih menarik dan mempermudah user untuk membut dan meneliti sebuah koding didalam sebuah file.

Sebenarnya masih banyak sekali text editor tools untuk membuat web dengan berbagai macam keunggulan dan fitur. Ada yang gratis dan ada pula yang berbayar. Namun saya sendiri lebih suka menggunakan kedua tools diatas yaitu Notepad ++ dan Adobe Dreamweaver. Selain menggunakan text editor tools , untuk membuat sebuah website kita juga membutuhkan aplikasi untuk mengedit gambar untuk mempercantik web kita dan itu akan kita simak pada artikel berikut ini.

Mengenal XAMPP

Pada postingan sebelumnya kita telah belajar menginstal XAMPP, namun kita belim tahu secara gamblang tentang XAMPP itu sendiri. Dan pada artike kali ini kita akan mencoba mengenal XAMPP, Bagaimana bentuknya dan bagaimana cara memakainya. XAMPP merupakan paket aplikasi seperti kepanjangan dari namanya X Apache Mysql PHP dan PHPMyAdmin yang didalamnya terdapat beberapa fungsi yang berbeda namun saling melengkapi. Untuk memahami apa saja fungsinya, ikuti penjelasan berikut :

Apache : apache melakukan fungsi server, jadi jika dalam komputer kita berjalan servis apache ini, maka komputer kita sudah dapat kita jadikan sebagai mini server website.
MySQL : MySQL adalah database yang akan kita pergunakan
PHP : sedangkan PHP adalah bahasa pemrograman yang digunakan
PHPMySQL : adalah aplikasi yang digunakan untuk memanagemen database MYSQL

Nah, sebenarnya dengan hanya menggunakan XAMPP dan notepad kita sudah dapat membangun sebuah website. Namun untuk para pemula yang baru belajar apakah ini hal yang mudah? Tentu tidak, jadi di dalam blog ini akan kita coba banyak aplikasi untuk membangun sebuah web.

Untuk mengakses XAMPP pada komputer kita cukup mudah, anda hanya perlu membuka browser (rekomen Mozila Firefox) lalu pada pada kolom alamat ketikan "127.0.1.1" atau "localhost" kemudian enter, maka akan muncul halaman XAMPP dengan dominan warna orange. Untuk yang baru pertama kali dibuka , halaman utama yang muncul adalah pemilihan bahasa yang digunakan , pilih saja bahasa "english". Lalu setelah itu anda akan dihantarkan ke halaman utama XAMPP yang berisi banyak menu. Namun kita tidak akan membahas menu-menu di halaman itu, namun halaman ini dapat mengindikasikan bahwa penginstalan kita telah berhasil.

Folder-folder dalam XAMPP

Tadi kita sudah membahas antarmuka XAMPP di dalam browser, sekarang kita akan membahas isi dari folder-folder di dalam XAMPP. Dan saya akan mencoba membahas beberapa folder yang penting :

apache : Folder utama web server
htdocs : Folder yang berfungsi menyimpan website yang akan kita buat agar dapat diakses di browser. Disinilah kita akan meletakkan projek website kita.
manual : berisi sub folder yang terdapat manual program dan database
mysql : didalam folder ini nantinya database yang kita buat akan disimpan, didalam folder ini juga terdapat aplikasi-aplikasi seputar database MySQL
PHP : folder utama untuk PHP

Nah mungkin masih banyak sekali yang belum dibahas dalam artikel ini, jika ada yang ingin ditanya seputar XAMPP bisa comment di sini. Siapa tahu admin bisa sedikit membantu.

XAMPP

Seperti yang sudah saya katakan pada bagian Pendahuluan, ada beberapa tools yang akan kita gunakan dan salah satunya adalah XAMPP . Untuk yang belum tahu, XAMPP ini adalah tools wajib yang digunakan untuk belajar Web Programming. Walaupun ada beberapa alternatif lain selain XAMPP namun saya sendiri menyarankan XAMPP. Kenapa? karena XAMPP adalah merupakan paket program lengkap yang dibutuhkan oleh seorang Web Programmer karena didalamnya sudah terdapat PHP dan MySQL. Keunggulan lainnya adalah XAMPP ini dapat anda gunakan secara gratis dan legal, jadi anda tidak perlu takut karena tidak akan ada pihak yang menuntut anda karena menggunakan XAMPP di komputer anda. Untuk XAMPP sendiri saya rekomendasikan untuk menggunakan XAMPP 1.71 karena menurut saya lebih simple dan jarang rewel.

XAMPP Service pada Windows

Cara mendapatkan XAMPP

Untuk mendapatkan XAMPP anda harus memiliki koneksi internet di komputer anda
Buka browser komputer dan pergi ke www.apachefriends.org kemudian klik ikon xampp dan anda akan dibawa masuk ke halaman utama xampp, dan disana anda dapat langsung mengambil xampp yang anda butuhkan. Jika tidak anda bisa melalui link ini http://www.filehorse.com/download-xampp/10213/download/ dan anda akan langsung mendapatkan XAMPP 1.7.1
Jika anda berniat mengambil dari halaman utama XAMPP pastikan anda mengambil versi XAMPP for Windows jika anda menggunakan windows. Jika anda salah mengambil, maka XAMPP yang anda ambil tidak akan dapat digunakan.

Cara menginstal XAMPP

Jika anda sudah mendapatkan aplikasi XAMPP, sekarang saatnya melakukan penginstalan di komputer anda. Berikut caranya:

Langkah Ke 4 - Opsi terakhir dalam penginstalan XAMPP

Buka folder tempat donlot XAMPP tadi
Klik 2x pada XAMPP Installer kemudian mulai proses penginstalan, pilih next
Setelah itu akan muncul pilihan dan pilihan itu adalah pilihan dimana anda akan menginstal XAMPP itu sendiri. Saya sarankan anda pilih direktori D; untuk penginstalan XAMPP, kenapa? karena saat terjadi sesuatu dengan sistem windows anda misal terjadi kerusakan dan harus diinstal ulang maka projek anda masih ada didalam komputer anda.
Setelah memilih dimana anda akan menginstal XAMPP , selanjutnya akan muncul pilihan terakhir dan ini sangat penting , dan harus teliti. Dalam tahap ini pastikan pada Service Section, kolom Install Apache as Service dan Install MySQL as service harus sudah tercentang karenaitu adalah hal pentingnya dan tidak boleh terlewat. Lihat gambar diatas.
Kemudian klik tombol install dan tunggu sampai proses penginstalan selesai.
Sebelum proses penginstalan benar-benar selesai akan ada notifikasi , pilih saja yes dan proses pengistalan selesai.

Dengan begini proses penginstalan XAMPP telah Selesai.

Belajar Web Programing - Prakata

Belajar Web Programming. Selamat datang di blog kami yang sederhana ini, sebuah blog sederhana yang rencananya akan mengajak para pembacanya untuk bersama-sama belajar web programming. Blog ini akan mengajarkan bagaimana cara membuat sebuah website dari website statis maupun website dinamis. Aplikasi atau tools yang dipakai juga beragam, dari mulai notepad , dreamweaver, potoshop dan aplikasi aplikasi atau tools lain yang berhubungan dengan pembuatan website.

Selain penggunaan tools , pembaca juga akan dijarkan teknik dasar pemrograman web yang akan diajarkan secara jelas dalam blog ini. Selain dasar pemrograman , pembaca blog ini juga akan mendapatkan cara manajemen database baik secara manual ( lewat command promt) ataupun melalui PHPMyadmin.

Di sini kami mengajak pembaca belajar Web Programming dengan berbagai cara namun yang akan kami tekankan adalah dengan memberikan projek-projek ringan sehingga pembaca dapat mencoba mempraktekan proses pembuatan projek tersebut sehingga diharapkan para pembaca dapat menyerap ilmu yang didapat dari blog ini secara maksimal.

Target pembaca atau pengunjung blog ini adalah semua orang yang ingin belajar Web Programming yang ingin cepat menguasai Web Programing , terutama para mahasiswa yang sedang mengerjakan proyek tugas akhir untuk dapat menyelesaikan studynya. Source atau projek yang ada di dalam blog ini juga dapat anda kembangkan atau modifikasi untuk membuat web atau sistem yang anda kehendaki.

Dalam blog ini aplikasi atau tools yang akan sering kita pakai adalah :

OS: Windows

XAMPP

Dreamweaver

Notepad++

Adobe Potoshop

Dll

Beberapa tools diatas adalah tools gratis yang dapat anda download langsung di web resminya , namun ada juga beberapa yang berbayar seperti Dreamweaver, Potoshop dan Windows yang bisa anda beli di berbagai toko aplikasi di internet. Namun anda juga dapat memakainya secara gratis dengan cara mendownload bersi trial di website resminya, namun biasanya hanya berlaku 30hari.

Nah untuk selanjutnya tinggal baca projeknya dan praktekan secara berkali-kali agar anda dapat lebih cepat menguasai Web Programming. Selamat belajar