Archive for 2015

Home » Archive for 2015

Indonesia Web Hosting Gratis terbaru 2015

Indonesia Web Hosting Gratis terbaru 2015. Hosting adalah sebuah kebutuhan mendasar para web developer untuk mempublish website yang mereka buat. Hosting sendiri adalah sebuah tempat untuk mengupload file web yang akan di publish. Sebenaranya kita juga daat membuat hosting sendiri, namun jika itu dilakukan memerlukan biaya yang mahal. Kita haru membeli pc khusus server yang tahan banting. Internet full speed yang stabil dan listrik yang tidak pernah mati. Apakah kita harus membeli dan menyediakan semua hal tersebut untuk mempublish sebuah web? Disinilah fungsi sebuah penyedia hosting.

Ingin membuat website gratis baca ini juga "Cara membuat website 100% Gratis"

Penyedia hosting sendiri biasanya memasang tarfi bervariasi sesuai dengan kebutuhan , dari skala anak sekolahan sampai dengan skala bisnis. Tentunya dengan segala fasilitas yang bervariasi pula, semakin mahal ya semakin baik. Namun ada juga lho situs penyedia hosting gratis di indonesia yang menawarkan fasilitas yang tidak kalah dengan penyedia hosting berbayar. Nah berikut adalah daftar Indonesia Web Hosting Gratis Terbaru 2015:

1. IDHostinger

Siapa yang belum pernah dengar IDHostinger, IDHostinger sendiri adalah situs hosting yang paling terkenal dalam memberikan layanan hosting gratis. IDHostinger memberikan fasilitas space 2GB dengan banwich sebesar 100GB yang dilengkapi dengan PHP MySQL dan Site Builder dan yang paling luar biasa adalah Tanpa Iklan atau Banner. Dan sebagai bonus tambahan, IDHostinger memberikan SUbdomain Gratis kepada para usernya.

2.Host My ID

Host My ID tidak jauh berbeda dengan IDHostinger yang memberikan fasilitas yang luar biasa untuk para usernya, Seperti Admin Cpanel, Spase 1GB , bandwich 50GB , PHP MySQL, Auto Installer Script dan SEO tools.

3. WebhostingIndonesia.net

Penyedia hosting gratis ke 3 ini memberikan tawaran yang lebih spesifik untuk layanan free hostingnya mereka memberikan 350-2000MB space dengan bandwich 5-100GB , maksiman UV sampai dengan 1000 Unik visitor per harinya namun proses limit yang diberikan kecil, namun untuk coba-coba penyedia hosting ini siap dicoba.

4. Cloudnesia.com

Cloudnesia sendiri menawarkan bandwich unlimited untuk usernya, namun hanya membatasi hanya enam bulan saja untuk layanan hosting gratisnya.

5. Dobelhost

Penyedia situs hostung kelima ini juga termasuk situs yang juga patut dicoba , Dobelhost sendiri menawarkan 500mb space, 1GB bandwich yang lebih dari cukup untuk mempublish web pertama anda.

Kelima web hosting diatas adalah salah lima dari banyaknya situs penyedia hosting gratis di indonesia dengan segala kelebihan dan kekurangan yang saya ketahui . Dan jika anda mengetahui penyedia hosting lain silahkan tulis di komen yah.

Cara Membuat Website Gratis 100%

This summary is not available. Please click here to view the post.

Cara Membuat Web Dengan Mudah, Cepat dan Gratis

Cara Membuat Web Dengan Mudah, Cepat dan Gratis. Pada era sekarang ini, perkembangan internet melaju sangat cepat. Dari mulai perkembangan perangkatnya seperti smartphone dan tablet dan juga perkembangan gaya hidup online. Kenapa saya sebut gaya hidup online ? Karena saya melihat perkembangan internet yang begitu pesatnya. Coba anda lihat, pada jaman sekarang semua serba online , dari mulai kerja online, seminar online berbelanja online dan toko-toko onlinepun semakin menjamur. Kenapa ini bisa terjadi? Hal ini terjadi karena perubahan tren dan gaya hidup masyarakat yang menginginkan hal yang lebih praktis dan mudah di sela-sela kesibukan mereka.

Seiring dengan berkembangnya era online dibarengi juga dengan perkembangan cara pembuatan website sebagai penunjang tren tersebut. Dahulu membuat web itu sangat sulit , dan butuh waktu lama untuk membuat sebuah halaman website. Namun, sekarang ini membuat web seperti melakukan copy paste artikel teman . Hanya dalam waktu 5 menit website sudah jadi dan hasilnyapun sangat memuaskan. Tidak percaya! Mari kita buktikan.

Untuk Membuat Web Dengan Mudah, Cepat dan Gratis kita harus masuk ke situs http://www.123website.co.id/. Seperti moto mereka "HANYA LIMA MENIT, SITUS WEB ANDA ONLINE. 1-2-3 Buat situs Anda dalam tiga langkah mudah" .123website memberikan fasilitas pembuatan website secara mudah dan cepat dan juga fasilitas uji coba gratis. Dalam hal ini tidak diperlukan skill khusus di bidang web programming untuk membuat website di 123 website ini. Anda hanya perlu mengikuti langkah-langkah yang disediakan dan website hasil karya anda telah jadi. Untuk petunjuk lengkapnya simak panduan Membuat Web Dengan Mudah, Cepat dan Gratis dibawah ini:

Buka http://www.123website.co.id/ dan anda akan menuju home page dari situs tersebut, pada halam home page klik tombol "cobalah sekarang".Setelah itu anda akan diarahkan ke haman pilihan yang berisi tujuan anda membuat website yaitu "Website Pribadi atau blog" , "Website bisnis" dan "tujuan lain" . Saya sarankan anda memilih pilihan "Website Pribadi atau blog". Klik tombol "berikutnya".

Setelah itu, anda akan diarahkan ke halaman baru, disni anda diberi tugas untuk memilih tema warna untuk website yang akan anda buat. Setelah memilih klik "berikutnya" .

Setelah memilih warna tema, anda akan diajak untuk memilih gambar yang akan diletakkan pada halaman homepage website anda. Pilih gambar yang anda inginkan dan klik "berikutnya"

Tahap selanjutnya anda harus memilih latar belakang untuk website anda , pilihlah warna yang tidak membuat mata cepat lelah. Kemudian klik "berikutnya".

Langkah selanjutnya adalah menentukan judul tajuk atau nama dari web anda . Gunakan nama yang mudah diingat dan familiar. Klik "Simpan dan Lanjutkan". Sampai disini pembuatan web anda telah selesai.

Langkah berikutnya adalah membuat akun untuk situs 123website dengan memasukan nama, password dan email. Setelah anda selesai melakukan registrasi akun maka anda akan diarahkan langsung ke tampilan website rancangan anda tadi . Dan akan ada popup di pojok kiri bawah yang berisi ucapan selamat bahwa website anda telah siap. Dan kemudian anda akan menuju halaman notifikasi bahwa website anda telah siap, disana anda juga diberi tawaran untuk membeli domain seharga 10.000 tapi anda juga berhak menolak tawaran tersebut.

Nah dengan demikian pwmbuatan website gratis , mudah dan cepat telah sepenuhnya usai. Dan untuk anda yang ingin membuat website buatan anda sendiri anda bisa mengikuti project-project yang ada pada blog ini seperti project 1 dan project 2.

Bahasa Perograman yang Wajib Dikuasai Untuk Membuat Website

Belajar web programming kali ini akan menyimpang sedikit dari projek 2 yang sedang kita garap, bahasa pemrograman. Untuk para Web Programmer, bahasa perograman adalah sebuah menu wajib yang harus diolah menjadi sebuah script untuk menunjang web yang mereka buat. Karena unsur utama penyusun sebuah website adalah bahasa pemrograman. Dengan script-script bahasa pemrograman sebuah website dibangun, dan diberi fungsi-fungsi sehingga website tersebut dapat memberi manfaat kepada para penggunanya.

Dalam dunia perwebsitean, bahasa perograman yang digunakan sangat bervariasi dan beragam jenisnya dan satu sama lain memiliki fungsi yang saling menunjang untuk membangun sebuah website. Tentunya dengan segala kekurangan dan kelebihannya masing-masing. Dan dalam kesempatan kali ini , saya akan membahas tentang bahasa pemrograman yang wajib anda kuasai untuk membuat sebuah web. Hal ini bukan berarti kita harus memilih mana yang bagus untuk digunakan dan mana yang tidak atau mana yang penting atau yang tidak. Artikel ini bertujuan menunjukan bahasa pemrograman dasar yang harus anda pelajari terlebih dahulu.

Bahasa Perograman yang Wajib Dikuasai Untuk Membuat Website

1. HTML

HTML adalah singkatan dari Hyper Text Markup Language. HTML merupakan bahasa utama penyusun kerangka dan grafis dari web yang anda buat .File HTML sendiri dapat dengan mudah anda buat dengan menggunakan text editor atau notepad pada windows atau simple text pada machintos atau dengan text editor lain yang mendukung . HTML merupakan bahasa perograman multyplatform yang artinya HTML dapat berjalan pada semua perangkat sistem operasi yang berbeda misal pada windows, linux, bahkan perangkat ponsel yang sudah mendukung koneksi internetpun dapat menggunakannya dan tampilannyapun sama.

2. PHP

PHP adalah bahasa pemrograman server-side yang didesai dalam pengembangan web, artinya bahasa ini berjalan di sisi server, berbeda dengan html yang berjalan di sisi client sehingga pada saat membuka sebuah halaman web kita dapat dengan mudah melihat source code HTMLnya. PHP merupakan salah satu jenis bahasa perograman yang paling banyak dipakai , selain karena fungsinya yang sangat luar biasa, PHP adalah bahasa pemrograman yang free, yang dapat dipakai oleh siapapun yang ingin menggunakannya.

3.CSS

CSS merupakan singkatan dari Cascading Style Sheet yaitu sebuah bahasa stylesheet yang biasa dipakai untuk mengatur tampilan dalam sebuah dokumen yang ditulis menggunakan bahasa markup. CSS sendiri berperan besar dalam pembuatan sebuah website karena CSS mengatur sebagian besar Desain yang digunakan dalam sebuah website. Selain itu , CSS juga sangat disukai oleh para website developer karena CSS mengurangi perulangan desain dengan pola yang sama.

Nah ketiga bahasa perograman di atas adalah Bahasa Perograman yang Wajib Dikuasai Untuk Membuat Website . Karena walaupun sekarang ini ada banyak software atau aplikasi pembuat website dengan sangat mudah , akan tetapi kita juga perlu tahu logika yang ada didalam sebuah halaman web.

Membuat Website Sederhana Dengan Dreamweaver - Lesson 2

Pada artikel Membuat Website Sederhana Dengan Dreamweaver - Lesson 1 kita telah bersama-sama membuat kerangka dasar dari website yang akan kita buat. Dan pada artikel kali ini kita membuat header, footer dan sidebar untuk website kita ini. Dan tools yang akan kita gunakan juga masih sama yaitu dreamweaver dan tentunya anda juga sudah membuat site untuk projek anda bukan. Jika semuanya sudah mari kita lanjutkan pekerjaan kita hehehe.

Untuk memulai pekerjaan kita, kali ini akan saya mulai dari design header, header sendiri terdapat pada bagian atas halaman website. Biasanya header berisi logo utama dari si website atau perusahaan yang mempunyai website tersebut. Anda bisa mendesain sendiri logo header anda dengan aplikasi pengolah gambar yang anda punya dan yang anda bisa tentunya. Buatlah gambar berukuran 900x300px untuk header anda dan desain sebagus mungkin . Simpan dengan nama "banner.png" setelah itu masukan desain header anda ke dalam folder "project2" yang ada di dalam htdocs. Namun akan lebih baik jika diletakkan didalam sebuah folder khusus gambar. Jadi buat dulu sebuah folder didalam folder "project2" dan beri nama "img".

Folder "img" ini dibuat untuk menyimpan file-file berjenis gambar untuk website kita agar tatanan file di dalam web kita lebih terstruktur dan mudah untuk dimaintenance. Langkah selanjutnya adalah membuat file html baru dan beri nama "header.php". Sementara itu, pada index.html ubah namanya menjadi index.php, kenapa? karena kita akan memasukan koding php di dalam file index kita. Kembali ke header.php, buka code header.php kemudian hapus semua kode/script yang ada. Jika sudah dihapus, kembalikan ke design mode.

Lihat pada sidebar files explorer di dreamweaver, apakah sudah ada folder image yang kita buat tadi? Jika belum klik tombol refresh dan kembali lihat , disana akan muncul tambahan folder "img". Tekan tombol (+) dan muncul "banner.png". Tarik banner.png dari fils explorer ke dalam header.php dan lepaskan, maka akan muncul sebuah gambar di header.php. Simpan header.php dengan cara "CTRL+S". Dengan demikian kita telah selesai membuat header untuk web kita.

Selanjutnya kita akan membuat bagian footer, caranya hampir sama dengan membuat header. buat file baru dan save as footer.php. Buka mode Code dan hapus semua script didalamnya dan kembali ke mode design. Pada mode desain isikan dengan tulisan "Copyrght@2015.Belajar Web Programming" atau buatlah sesuai dengan keinginan anda. Setelah itu simpan file dan kemudian kita akan kembali menggarap halaman index.php.

Buka halaman index.php dan disana kita telah mempunyai tabel dengan kolom bertuliskan header, menu, footer, sidebar dan konten. Blok tulisan header yang ada pada index.php , pada bagian properties pada bagian bawah dreamweaver anda akan menemukan Horz dan Vert, pada bagian combo horz pilih center, ini membuat konten yang ada pada kolom header menjadi ditengah. Lakukan juga pada kolom menu dan footer. Sehungga kodingnya enjadi seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<tr>

<td colspan="2" align="center">Header</td>

</tr>

<tr>

</tr>

<tr>

<td width="80%">konten</td>

</tr>

<tr>

<td colspan="2" align="center">footer</td>

</tr>

</table>

</body>

</html>

Jika sudah, kita akan memasukan header.php dan footer.php ke dalam index php. Caranya :

Masuk mode design, lalu blog tulisan Header kemudian klik code mode dan akan terlihat script website kita dan secara otomatis tulisan Header yang kita blok pada design mode tadi juga akan terlihat masih diblok pada code mode.
Hapus "Header" lalu tuliskan script berikut "<?php include('header.php') ?>" , tuliskan saja yang didalam tanda petik(") dan perhatikan penulisannya. Kemudian simpan.
Lakukan hal yang sama pada "footer" hanya scriptnya sedikit berbeda "<?php include('footer.php') ?>" . Save dan selesai.

Coba perhatikan pada penulisan script header dan footer , bagian yang berbeda adalah nama dari file yang akan kita selipkan pada halaman index. Pada bagian header yang akan kita selipkan adalah header.php sehingga penulisannya <?php include('header.php') ?> dan pada bagian footer kita akan menyelipkan footer,php sehingga ditulis <?php include('footer.php') ?>. Jika sudah maka kode/scriptnya akan menjadi seperti ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" border="0">
<tr>
<td colspan="2" align="center"><?php include('header.php') ?></td>
</tr>
<tr>
<td colspan="2" align="center">Menu</td>
</tr>
<tr>
<td width="17%">Menu</td>
<td width="83%">konten</td>
</tr>
<tr>
<td colspan="2" align="center"><?php include('footer.php') ?></td>
</tr>
</table>
</body>
</html>

dan tampilan dalam browser menjadi seperti gambar dibawah ini:

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