Membuat website dinamis dengan PHP dan MySQL bagian 3

Setelah membaca dan mengikuti langkah demi langkah membuat website dinamis dengan PHP dan MySQL bagian 1 dan bagian 2, sekarang kita sudah punya sebuah database yang bernama db_web yang berisi 3 tabel dan field-fieldnya, yaitu tb_user, tb_berita dan tb_kategori.

Sekarang berlanjut ke tahap ke-tiga yaitu pengkodingan terhadap template yang sudah di download sebelumnya. Kali ini yang saya pake adalah MOS Admin template untuk halaman Admin, dan untuk halaman depan website.

Pada tahap ini, kita akan membahas terlebih dahulu untuk pembuatan halaman Administrator, dimana disana user diharuskan login. Di dalamnya kita bisa menambahkan, mengedit, serta menghapus data user, berita maupun kategori. Langsung saja ke langkah pertama yaitu pembuatan pengkodingan halaman login. Sebelumnya, kita input sebuah user di database, buka web browser dan ketikkan http://localhost/phpmyadmin, jangan lupa jalankan terlebih dahulu XAMPP nya. Pilih database db_web dan tabel tb_user. Klik insert, kosongkan bagian id_user (otomatis akan terisi), isi username = admin, password = admin dan nama_lengkap = Administrator (Perhatikan gambar).

Setelah tabel user terisi, selanjutnya buat folder "webku" (tanpa tanda kutip) di C:/XAMPP/htdocs, dan buat lagi folder admin didalamnya. Kemudian buat sebuah file yang bernama koneksi.php dengan aplikasi notepad++ (Klik disini apabila belum punya notepad++). File koneksi.php ini untuk mengkoneksikan web Anda dengan database MySQL. Berikut script koneksi.php.

file koneksi.php

Berikut penjelasan mengenai file koneksi.php :

file ini berfungsi untuk mengkoneksikan / menghubungkan file web Anda dengan database MySQL, $host, $username, serta $pass merupakan detail dari akun database Anda, dimana sekarang kita menggunakan phpmyadmin, secara default hostnya adalah localhost, usernamenya root dan passwordnya kosong.

variabel $koneksi menjalankan perintah mysql_connect (menghubungkan ke database) dengan host = $host, username = $username dan password = $pass. Variabel $db menjalankan perintah mysql_select_db (memilih database mana yang akan kita hubungkan), disini kita isi webku, karena database yang telah kita buat adalah database webku.

Selanjutnya,pindahkan semua file dari MOS Admin template ke folder admin yang Anda buat tadi (menyatu dengan file koneksi.php).

Buka file login.php dengan notepad++. Cari script

, tambahkan method="POST" dan action="validasi.php". Save as file tersebut menjadi login.php. Berikut tambahan scriptnya :

Ada dua method untuk form ini, yaitu method POST dan GET, bedanya untuk method get akan menampilkan semua informasi yang diinputkan oleh Anda di dalam form tersebut di address bar web browser Anda. Saya tidak akan terlalu membahas hal tersebut disini. Untuk keamanaan, gunakan method POST.

Karena actionnya menuju files validasi.php, maka kita harus membuatnya. Berikut script validasi.php

Buat file index.php

Buat file logout.php

Setelah semua file dibuat, coba Anda masuk ke web browser dan ketikkan http://localhost/webku/admin dan lihat hasilnya, web tersebut akan di redirect ke halaman login.php. Selamat mencoba :).

Download Script atau lihat Demo

Membuat website dinamis dengan PHP dan MySQL bagian 2

Oke setelah membaca Membuat website dinamis dengan PHP dan MySQL bagian 1, sekarang lanjut ke tahap kedua, yaitu mulai ke tahap persiapan koding dan database.

Yang akan dibahas di bagian kedua ini adalah persiapan database untuk website yang akan kita buat. Langkah yang pertama yaitu membuka XAMPP control panel yang telah Anda install sebelumnya. Caranya :

1. Buka drive C:/XAMPP
2. Cari XAMPP control panel
3. Double klik dan klik start untuk apache service dan mysql service.
4. Sampai muncul gambar :
   
5. Buka web browser lalu ketikkan http://localhost. Anda akan mendapatkan pemberitahuan bahwa Anda telah berhasil menginstall XAMPP.
   
6. Lalu klik menu phpMyAdmin pada menu tools. Dan buat sebuah database dengan nama db_web. Lalu klik create.
   

Setelah punya database, sekarang kita akan membuat tabel-tabel yang diperlukan untuk menyimpan database untuk website dinamis kita. Untuk sementara kita hanya akan membuat fitur user/login, berita, dan kategori berita terlebih dahulu. Tabel untuk fitur-fitur yang lain dapat menyusul tahap pembuatannya. Sekarang buat tabel tb_user, tb_berita, dan tb_kategori pada database db_web tadi dengan field-field untuk tb_user sebagai berikut :

1. id_user INT(3)
2. username VARCHAR(50)
3. password VARCHAR(50)
4. nama_lengkap VARCHAR(100)

Untuk tabel tb_berita :

1. id_berita INT(3)
2. judul_berita VARCHAR(50)
3. tanggal_berita DATE
4. isi_berita TEXT(500)
5. id_kategori INT(3)
6. id_user INT(3)

Untuk tabel tb_kategori :

1. id_kategori INT(3)
2. nama_kategori VARCHAR(50)
3. deskripsi VARCHAR(100)

Nah setelah mempunyai database tersebut, selanjutnya adalah pengkodingan di template web yang kita sediakan sebelumnya seperti di tutorial BAGIAN 1. Untuk langkah pengkodingan silakan menuju BAGIAN 3.

Membuat website dinamis dengan PHP dan MySQL bagian 1

PHP merupakan salah satu bahasa pemrograman web. Dengan PHP kita bisa membuat website yang dinamis. Berbeda dengan HTML yang hanya membuat website secara statis / kontennya tidak dapat diubah dengan cepat dan realtime.

Dengan menggunakan bahasa pemrograman PHP ini, kita akan belajar membuat sebuah website yang dinamis, seperti layaknya CMS Wordpress, Blogger, maupun Joomla. Selain menggunakan bahasa pemrograman PHP ini, kita akan menggunakan query-query MySQL.

Nah, udah tau kita pake bahasa PHP dan MySQL, langkah yang paling pertama dalam pembuatan website dinamis ini adalah menginstall aplikasi XAMPP terlebih dahulu sebagai web server lokal di komputer kita. Apabila anda belum punya installer XAMPP, silakan klik Download XAMPP terbaru untuk mendownloadnya secara gratis.

Setelah terinstall di komputer, selanjutnya adalah memilih template yang akan menjadi tampilan website kita, template ini banyak yang gratis di mesin pencari google, dengan mengetikkan keyword "Free CSS template" atau "Template web gratis" dan lain-lain.

Setelah punya, maka tentukan akan ada fitur apa saja yang ada di web Anda. Disini akan dibahas fitur-fitur yang standar saja, selebihnya bisa dikembangkan sendiri sesuai kebutuhan.

Website yang akan kita buat, akan mempunyai fitur Berita, dimana akan bisa input, edit, hapus berita yang akan ditampilkan dihalaman website. Oya selain butuh template untuk halaman web, kita juga butuh template untuk halaman admin, dimana disanalah kita akan bisa menambah, mengedit dan menghapus konten website.

Apabila Anda belum punya templatenya, silakan download disini secara gratis.

Oke tahap pertama ini Anda sudah punya :

1. Program XAMPP yang sudah diinstall di komputer Anda
2. Template website yang akan digunakan
3. Template Admin

Sekian dulu ya tahap pertama ini, selanjutnya bisa ke TAHAP KEDUA.

HTML

Apa itu HTML?

Menurut wikipedia :

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Nah dari sana bisa kita simpulkan bahwa HTML merupakan sebuah bahasa pemrograman untuk membuat halaman web. Akan tetapi web yang dibuat dengan menggunakan bahasa HTML masih merupakan halaman web statis, sedangkan web dinamis bisa dibuat dengan mengkolaborasikannya dengan PHP. Apa itu web statis dan web dinamis? Jawabannya bisa Anda temukan di Apa Itu Web Statis dan Dinamis? 

Sebagai bahasa pemrograman, HTML juga mempunyai aturan-aturan atau tag-tag tertentu, berikut tag-tag umum yang biasa digunakan di pemrograman HTML :

<html>
<head> <title>Ini Judul Web</title></head>
<body>
Disini Isi Konten website
</body>
</html>

Keterangan script diatas :

tag <html> dan </html> merupakan tag pembuka dan penutup script html, tag tersebut menandakan bahwa akan dimulai sebuah script html.

tag </head>  dan </head>  menunjukkan Informasi dari web yang dibuat.

tag <title> menunjukkan Judul dari web yang dibuat.

tag <body> dan </body> menunjukkan isi atau konten dari web yang dibuat.

Nah diantara tag <body>  dan </body> banyak sekali tag-tag yang digunakan, seperti table, a, p, h1, dan sebagainya.

Membuat Installer Program Aplikasi

Oke, selamat datang di tutorial ini.

Disini akan dibahas bagaimana cara membuat suatu installer dari program yang kita buat dengan sangat mudah yaitu menggunakan program aplikasi winrar. Nah pada kasus ini, saya sedang membuat program di localhost menggunakan XAMPP. Agar program ini tidak menyulitkan untuk dipindah ke PC atau komputer lain, maka alangkah lebih baiknya dibuatkan suatu installer, ya kaaan?? hehe

Oke dari pada banyak curhat, mending langsung aja ke tahapannya :).

1. Yang pertama, di komputer Anda harus sudah terinstall program WINRAR, Anda bisa mendownload versi trialnya disini. Atau versi full yang sudah di crack disini.
2. Setelah program winrar terinstall, kemudian buka folder yang akan dibuat installernya.
3. Sudah? Selanjutnya Pilih semua file dengan menekan ctrl+A pada keyboard Anda.
4. Klik kanan pada salah satu filenya, kemudian pilih Add to archive
5. Akan muncul kotak dialog Add to archive, kemudian pilih Archiving options dan pilih Create SFX Archive
6. Lalu klik .RAR untuk archive formatnya
7. Pilih Advance untuk mengatur lebih lanjut.
8. Klik tombol SFX Options
9. Pilihan General isi kotak Path to extract dan isikan dengan tulisan C:\Program Files\(nama foldernya).
10. Isi pilihan pilihan yang ada, seperti menambahkan icon, shortcut untuk di desktop dan lain-lain
11. Setelah dirasa selesai, klik OK dan klik OK lagi.
12. Tunggu beberapa saat sampai tercipta file installer kamu.
13. File installer kamu siap untuk digunakan.

*catatan : tutorial ini merupakan petunjuk yang simplenya saja/ sederhananya. Untuk isi lebih lanjutnya silakan isi/atur sendiri terserah masing-masing pada pilihan advance.

Merubah http://localhost dengan nama domainmu sendiri (suka-suka)

Nah setelah dipostingan sebelumnya membahas mengenai Bagaimana cara merubah / mengganti direktori localhost pada XAMPP bagi yang ingin membacanya silakan klik disini. Sekarang akan dibahas bagaimana cara merubah alamat / address localhost kamu menjadi sebuah nama domain yang lebih bagus (suka-suka).

Ini membuat dan membantu saya lebih mudah dalam pengerjaan web dan lebih terlihat profesional. Bagaimana tidak, yang awalnya kita selalu mengakses localhost dengan address http://localhost maka sekarang akan berubah menjadi http://namadomainandasukasuka.com. Berikut ulasannya :

1. Cari file HOST di root C:/windows/system32/drivers/etc
2. Lalu buka dengan editor notepad atau notepad++ (bisa didownload disini)
3. Kemudian tambahkan dibawah localhost seperti digambar dengan address 127.0.0.2 www.namadoamainandasukasuka.com.
4. Lalu Save As dan replace file yang ada

5. 

   merubah isi file hosts

   Setelah itu, buka file httpd.conf di folder C:/XAMPP/apache/conf
6. Kemudia tambahkan juga pada servername dengan www.namadomainandasukasuka.com
7. Simpan file tersebut.
8. Jalankan browser dan ketikkan www.namadomainandasukasuka.com di address bar.
9. Selamat Anda berhasil :)

Merubah / mengganti direktori localhost pada XAMPP

Sembari ngerjain proyek, banyak banget ilmu baru yang saya dapatkan, karena proyek ini memakai bahasa pemrograman php dan mysql, serta digunakan di localhost, banyak ilmu yang menyangku hal tersebut yang sebelumnya saya gak tau, menjadi banyak tau. Insya Allah saya akan berbagi disini tentang ilmu-ilmu tersebut, tujuannya selain para pembaca jadi tahu juga, ini akan membantu saya menyimpan pengetahuan ini disini agar suatu saat bisa saya buka kembali tanpa harus mencari kemana-mana.

Langsung aja, sesuai judulnya yang ini trik bagaimana mengganti direktori localhost pada xampp yang awalnya di folder htdocs/nama_folder, ingin dirubah ke D:\webku (misalnya). Tidak ada yang tidak bisa sebelum kita berusaha hehe.. caranya :

Documentroot pada httpd.conf

1. Buka direktori C:\XAMPP\
2. Lalu buka folder apache terus buka folder conf
3. Cari file httpd.conf
4. klik kanan lalu pilih edit
5. Cari  documentroot & directory, agar lebuh mudah gunakan fasilitas find dengan cara menekan ctrl+f pada keyboard Anda.
6. Ganti C:/xampp/htdocs menjadi root yang akan menjadi folder penyimpanan Anda, yaitu D:\webku
7. Simpan hasil perubahan tersebut
8. Yap kamu telah berhasil merubah direktori localhost htdocs menjadi D:\webku

Sekian tutorial singkat ini, semoga bermanfaat :)

Merubah Nama Domain Localhost

Baru aja browsing nyari-nyari tutorial php buat tugas geladi, eh nemu tutorial ginian. Lumayan nih buat referensi, jadi aku copas aja kesini. sumbernya dari ilmuwebsite.com. Dalam tutorial ini dijelaskan bagaimana merubah domain http://localhost menjadi domain seperti halnya domain TLD yang dibeli dari penyedia layanan hosting/domain. Cara ini berlaku di windows, jadi untuk linux mungkin sedikit berbeda settingnya.

Nah, buat yang udah pernah instal XAMPP atao Apache mungkin udah gak asing lagi dengan localhost. Berikut langkah-langkah merubah domain localhost menjadi domain yang anda inginkan :

Pertama buka Windows Explorer, kemudian akses alamat ini : C:WINDOWSsystem32driversetc. Setelah dibuka maka akan menemukan beberapa file antara lain : host, lmhost, networks, protocol, dan services.

Edit file host pakai notepad++? atau file editor lain. Setelah dibuka akan muncul text default :

# Copyright (c) 1993-1999 Microsoft Corp.

# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.

#

# This file contains the mappings of IP addresses to host names. Each

# entry should be kept on an individual line. The IP address should

# be placed in the first column followed by the corresponding host name.

# The IP address and the host name should be separated by at least one

# space.

#

Membuat Email Domain Sendiri dengan Google Apps (Gmail)

Setelah postingan saya sebelumnya membahas mengenai membuat email dengan cpanel (dengan domain dan hosting sendiri) dan menggabungkannya dengan Gmail.

Membuat Email dengan domain sendiri

Menggabungkan email sendiri dengan Gmail

Ada cara yang lebih bagus lagi untuk membuat email Anda dengan domain sendiri, yaitu dengan menggunakan Google Apps untuk Gmail. Gimana caranya? Nah ikutin aja langkah-langkahnya dibawah ini, memang sih sedikit ribet dan membutuhkan waktu yang lumayan lama (verifikasi/ aktivasi sekitar 48 jam), tapi dijamin lebih Oke ;).

Langsung aja ke langkah-langkahnya, ikutin aja yaaaa :

1. Daftar di Google Apps, dapat diakses di https://www.google.com/a/cpanel/standard/new3
   
2. Masukkan alamat domain, alamat email yang diinginkan dan beberapa data lainnya yang dibutuhkan. Setelah itu klik tombol “I accept! Create my account“. Setelah itu, kita akan dihadapkan pada halaman Setup Google Apps. Kalau muncul kota dialog pilihan Express atau Custom, pilih Express aja, biar lebih cepet hehe.

Menggabungkan email sendiri dengan Gmail

Nah, kalo di postingan sebelumnya membahas bagaimana membuat email dengan domain sendiri, bila Anda belum membacanya saya sarankan untuk membacanya terlebih dahulu :)

Membuat email dengan domain sendiri

Bila Anda sudah membaca tutorial tersebut, agar tampilan dan akses email Anda lebih mudah dan lebih bagus, Anda bisa menggabungkan akun email dari domain Anda ke akun Gmail. Artinya Anda dapat menerima dan mengirim email dari/ untuk akun email domain Anda dengan menggunakan Gmail. Nah, dengan bantuan Gmail ini, kita akan meredirect email yang ada di email doman Anda ke akun Gmail. Langsung aja langkah-langkahnya sbb :

1. Membuat akun email di cpanel sesuai petunjuk di post sebelumnya.
2. Pilih Configure Email Client. Anda akan dibawa ke halaman baru, lihat yang paling bawah, lalu copy semua tulisan dibawah Manual Settings. Simpan di notepad karena akan digunakan nanti.
3. Lalu Setting SMTP (Pengiriman Email) di akun GMail, caranya login ke GMail anda. Masuk ke bagian Mail settings (ada di pojok kanan atas, gambar roda). Setelah masuk ke halaman baru, pilih Accounts & Import.

Membuat email dengan domain sendiri

Oke, bagi Anda yang punya hosting dan domain sendiri, Anda bisa membuat alamat email sendiri dari domain Anda, misalnya email@namadomainanda.com. Seperti email punya saya yaitu saya@ilesmana.com.

Email seperti ini membuat Anda lebih terlihat profesional. Disini saya akan sedikit membantu Anda untuk membuat email dengan domain sendiri. Udah siap? Sung aja ikutin step-stepnya.

1. Langkah pertam, Anda masuk ke webmail domain Anda, bisa dengan cara masuk ke cpanel Anda atau ke http://webmail.namadomainanda.com atau http://namadomainanda.com/webmail.
2. Selanjutnya Anda daftarkan terlebih dahulu email yang akan anda buat, misalnya info@ilesmana.com, masukan passwordnya juga.
3. Selanjutnya Anda login dengan akun email Anda tersebut beserta

Cara Mendaftarkan Website di Search Engine

Agar website anda dapat diakses dan dikunjungi oleh banyak pengguna internet, diperlukan adanya publikasi. Salah satunya yaitu dengan mendaftarkan website anda ke mesin pencari atau search engine, gimana caranya? Nah berikut ini cara mendaftarkan website ke search engine besar, seperti Google, Yahoo dan MSN :

1. Medaftarkan URL website Di Google.

• Klik www.google.com/addurl/
• Pada jendela ‘Add your URL to Google’ terdapat :

1. URL : http://qirax.wordpress.com/ (ganti URL website anda).
2. Comments : wordpress crack, info wordpress, catatan pribadi (ganti dengan hal-hal yang terkait dengan isi website anda, jika lebih dari satu pisahkan dengan tanda koma).
3. Optional : isikan kode angka/huruf seperti yang tertera dibawahnya.

• Jika Sudah terisi semuanya, klik tobol ‘Add URL’.
• Kemudian jika pendaftaran berhasil muncul jendela

Membuat tampilan lebih wah

Web design, mendengar hal ini pasti langsung terpikir mengenai photoshop, ilustrator , dreamweaver dan yang lainnya. Memang, menjadi seorang web designer pasti tahu dengan software-software tersebut, dimana seorang web designer membutuhkan aplikasi untuk editing gambar, juga mengconvertnya menjadi file HTML (website). Bagi sebagian orang web design adalah hal yang mudah. Ada beberapa hal yang perlu diperhatikan dalam mendesign sebuah website, diantaranya pemilihan posisi antara header, content, sidebar, footer, serta yang lainnya. Posisi ini menentukan untuk website apakah design yang Anda bikin, apakah hanya untuk personal atau organisasi, untuk media informasi atau ecommerce.