https://books.google.co.id/books?id=P7d4CwAAQBAJ&printsec=frontcover&hl=id#v=onepage&q&f=false
KATA PENGANTAR
Puji syukur alhamdulilah penulis panjatkan kepada alloh swt , rita nur istriku dan salha suci
anakku yang telah memberikan kesempatan dan dukungannya kepada penulis untuk menulis dan
menyusun buku ini yang bertemakan Step by Step membangun website yang mudah dan praktis,
atas kehendaknya penulis dapat menyelesaikan buku ini. Dan penulis mengucapkan terimakasih
sebanyak-banyaknya kepada penerbit Andi Publisher yang telah memeberikan kesempatan untuk
menulis di dalam buku ini.
Dalam buku karangan pertama ini menjelaskan tentang step by step membangun website dengan
mudah dan praktis dimulai dari Nol. Buku ini terinspirasi akan kesulitan yang dihadapi oleh
sebagian mahasiswa yang mengatakan bahwa membuat website itu sulit. Dalam Buku ini juga
penulis mengajarkan lebih lanjut mengenai PHP Full Text , Ajax, JQuery dan penggunaan Tool
Dreamwaver dalam pembuatan website secara mudah dan praktis, dan didalam buku ini pula
dibahas secara step by step (bertahap). Bagaimana membuat website dari awal sampai dengan
akhir.
Penulis disini menyadari bahwa dalam buku ini masih terdapat kekurangan dan jauh dari
kesempurnaan, oleh karena itu saya sebagi penulis mengharapkan kritik dan saran yang dapat
membangun, sehingga dapat menyusun dan menulis buku ini dengan baik dan sempurna. Untuk
kritik dan sarannya dapat ditujukan ke email agung.abl@bsi.ac.id, agungbaitul83@gmail.com
atau di blog penulis www.agblgoblog.blogspot.com
Pada dasarnya web merupakan suatu kumpulan hyperlink yang menuju dari alamat satu ke
alamat lainnya dengan bahasa HTML (Hypertext Markup Languange). website atau situs dapat
diartikan sebagai “kumpulan halaman-halaman yang digunakan untuk menampilkan informasi
teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik yang
bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait,
yang masing-masing dihubungkan dengan jaringan-jaringan halaman” (Hidayat, 2010).
“PHP merupakan kependekan dari kata Hypertext Preprocessor. PHP tergolong sebagai
perangkat lunak open source yang diatur dalam aturan general purpose licences (GPL)”.
(Suprianto, 2008)
Bahasa pemograman PHP sangat cocok dikembangkan dalam lingkungan web, karena PHP bisa
diletakan pada script HTML atau sebaliknya. PHP dikhususkan untuk pengembangan web
dinamis. Maksudnya, PHP mampu menghasilkan website yang secara terus-menerus hasilnya
bisa berubah-ubah sesuai dengan pola yang diberikan. PHP tergolong juga sebagai bahasa
pemrograman yang berbasis server (server side scripting).
Adobe Dreamweaver merupakan salah satu tool untuk mendesign halaman website yang
merupakan tools keluaran Adobe yang dahulunya merupakan macromedia. Versi terakhir produk
macromedia yaitu versi 8 yang dibeli oleh adobe dan Versi terakhir Dreamweaver keluaran
Adobe Systems adalah versi 12, adobe dreamweaver salah satu tools yang banayak digunakan
oleh pengembang web dikarenakan halamannya berbasis GUI (Grafical User Interface) sehingga
memudahkan pengembang untuk mengembangkan website tidak terpaku konsep textual.
1.4. PHP MyAdmin
“PHPMyAdmin merupakan aplikasi yang dapat digunakan untuk membuat database, pengguna
(user), memodifikasi tabel, maupun mengirim database secara cepat dan mudah tanpa harus
menggunakan perintah (command) SQL”. (Putri, 2012)
Pengembangan PHPMyadmin dimulai pada tahun 1998 oleh Tobias Ratschiller seorang
konsultan IT. Ratschiller mengerjakan sebuah program bernama MySQL-Webadmin dengan
bebas, yang merupakan produk dari Petrus Kuppelwieser, yang telah berhenti mengembangkan
pada saat itu Ratcshiller menulis kode baru untuk PHPMyadmin, dan ditingkatkan pada konsep
dari proyek Kuppelwieser . Ratschiller meninggalkan proyek PHPmyadmin pada tahun 2001.
Sekarang , sebuah tim dri delapan pengembang yang dipimpin oleh Olliver Muller meneruskan
pengembangan phpmyadmin di SourceForge.net.
“MySQL (My Structure Query Language) adalah salah satu Database Management System
(DBMS) dari sekian banyak DBMS seperti Oracle, MS SQL, Postagre SQL, dan lainnya”.
(Anhar, 2010)
MySQL berfungsi untuk mengolah Database menggunakan bahasa SQL. MySQL bersifat open
source sehingga bisa menggunakannya secara gratis. Pemograman PHP juga sangat mendukung
dengan database MySQL.
Template website merupakan sebuah design tampilan website yang membuat website tersebut
tampil teratur letaknya, enak dilihat untuk menunjukan website tersebut menarik atau tidak. Kita
akan mecoba membuat sebuah website dengan nama dealer xyz hal apa saja yang perlu
dipersiapkan diantaranya kita akan ambil template dahulu saya ambil dari punyanya mas Rudi
Deviantio di alamat http://www.4shared.com/zip/cw86O_rK/corporate.html untuk demonya bisa
dilihat di http://rudydevianto.com/demo/template-css-jquery/corporate/ baik sekarang kita coba
mngedit terlebih dahulu namun sebelumnya kita buat dulu sitenya tools yang saya pake yaitu
Dreamwever CS3 mari kita coba membuat site di Dreamweaver CS3
2.2. Membuat Site
Terlebih dahulu kita buat folder di server local kebetulan saya memakai XAMPP cara
penginstalannya sudah saya bahas di edisi jilid 2 kita buat folder dealer seperti contoh dibawah
ini:
3) Untuk pemilihan server yang digunakan pilih tombol Yes, I want to use server technology
Pilih pilihan PHP MySQL Tombol Next
4. Kemudian test server atau URL berjalan atau tidak dengan menekan tombol Test URL
pilih tombol Next jika successfully
7. Selamat anda telah berhasil membuat website dealer Pilih tombol Done untuk memulai
pengerjaan
Setelah kita download template corporate sekarang kita mencoba modifikasi template tersebut
sebelumnya pindahkan isi folder corporate ke folder dealer yang berada di htdocs
1). Rubahlah format index.html menjadi index.php
2). Sekarang kita coba test url di browser penulis memakai mozika firefox kemudian lakukan
modifikasi dari menu navigasi diatas
1). Kita buat website dinamis untuk menampilkan produk dan kategori kita buat dahulu database
dealer dan table category serta product silakan buka http://localhost/phpmyadmin
2). Tampilan halaman phpmyadmin pada kotak isian ciptakan database baru exp kita isikan
dealer pilih tombol Ciptakan
Gambar 3.1. Halaman PhpMyAdmin
3). Pada Kolom SQL Masukan Kode Dibawah Ini Klik Go untuk melanjutkan
3.) Pilih Select untuk mengambil databasenya Pilih OK Jika ingin selesai Pilih Test jika
ingin menguji koneksi
Gambar 3.4. Halaman Select Database
4.) Jika benar muncul folder baru Connection
5). Pilih Code maka akan tampil source otomatis seperti ini
<?php do { ?>
<li>
<img src="produk/<?php echo $row_recproduk['image'];
?>" width="452" height="361" alt="A cubcake, a cup with
brushes and a trophy with a charry on top" />
<div class="caption">
<h2><?php echo $row_recproduk['product_name']; ?></h2>
<h2>Rp. <?php echo $row_recproduk['price']; ?>,- </h2>
<br />
<?php echo $row_recproduk['deskripsi']; ?>
</div>
<div class="cl"></div>
</li>
<?php } while ($row_recproduk =
8).mysql_fetch_assoc($recproduk));
Hasil tampilan setelah kita modifikasi ?>
Gambar 4.8. Halaman Tampilan View
4.2. Membuat Halaman Menu Navigasi Produk
1). Buat List Navigasi Produk ambil dari database seperti berikut ini
while($r=mysql_fetch_array($query)){
echo"
<li>
<a href=detailproduct.php?produk=$r[id]>$r[product_name]</a>
</li>
";
}
?>
<?php do { ?>
<li>
<a title="<?php echo $row_recberita['judul_berita']; ?>"
href=" detailberita.php?berita=<?php echo
$row_recberita['id_berita']; ?>"><?php echo
$row_recberita['judul_berita']; ?></a>
</li>
<?php } while ($row_recberita =
mysql_fetch_assoc($recberita)); ?>
Gambar 4.21. Halaman Modifikasi Source Code Query Edit Detail Berita
4.7. Membuat Halaman Berita
1). Copy detailberita.php rubah menjadi berita.php
<?php do { ?>
<p align="justify">
<?php echo substr($row_recberita['deskripsi'],0,270)."....";
?><p><a title="Read More" class="read-more"
href="detailberita.php?berita=<?php echo
$row_recberita['id_berita']; ?>">Read More</a>
4.7. Membuat Halaman Pagging
<?php } while ($row_recberita =
mysql_fetch_assoc($recberita)); ?>
4.8. Membuat Halaman Pagging Berita
1). Pilih Icon Recordset Navigation Bar kemudian pilih OK
1). Buat File contact.php copylah berita.php kemudian rename menjadi contact.php
Buatlah Form terlebih dahulu
2). Buatlah Table untuk halaman Komentar dengan cara pilih Insert Table
4). Modifikasi Halaman Komentar dengan memasukan textfield dan tombol submit dan text area
Didapatkan hasil modifikasi seperti berikut ini:
6). Dan rubah pula name dari masing – masing text sesuai dengan nama tabel contact di
database dealer
8). Setelah dibuat tampilan kemudian Klik tombol SEND kemudian pilih Insert Record di tab
Data untuk menambahkan halaman pengisian terkoneksi ke database
10). Lakukan Pengetesan terlebih dahulu apakah sudah masuk kedalam database
Membuat validasi jika diisi data kosong maka user tidak bisa mengisinya saya menambahkan
kode manual captcha juga
2). Tambahkan 2 baris untuk Kode Keamanan dan Masukan Kode dengan cara pilih Table
Insert Rows sebelum tombol Send
Gambar 4.38. Halaman Insert Rows Komentar
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" .
htmlentities($_SERVER['QUERY_STRING']);
}
2). Kita akan menambahkan validasi sebelum data disubmit ke dalam database. Berikut langkah-
langkahnya. Letakkan kursor Anda di bawah kode diatas, lalu tekan Enter dua kali tambahkan
kode dibawah ini:
//validasi manual
$error = array();
$MM_flag="MM_insert";
if (isset($_POST[$MM_flag])) {
// Periksa panjang nama, nama minimal 3 karakter
$_POST['nama'] = trim($_POST['nama']);
if(empty($_POST['nama']) || strlen($_POST['nama']) < 3) {
$error['nama'] = "<span class=\"style1\">*) Nama harus diisi
minimal 3 karakter<br></span>";
}
//Periksa komentar
if(empty($_POST['komentar'])) {
$error['komentar'] = "<span class=\"style1\">*) Komentar
harus diisi<br></span>";
}
//Periksa capctha
session_start();
if($_POST['captcha'] <> $_SESSION['captcha']){
$error['captcha'] = "<span class=\"style1\">*) Kode Kosong
atau kode salah!<br></span>";
}
}
if(!$error) {
Gambar 4.41. Halaman Validasi Manual Komentar
3). Kode di atas bekerja menggunakan array yang berfungsi untuk memvalidasi input komentar
yang dimasukkan oleh pengunjung. Selanjutnya cari kode di bawah ini:
header(sprintf("Location: %s", $insertGoTo));
}
echo"<script language=\"javascript\">
alert(\"Data Berhasil Di Simpan\");
document.location=\"contact.php\";
</script>";
// Bersihkan array
$_POST = array();
}
Gambar 4.42. Halaman Edit Validasi Manual Komentar
5). Menampilkan pesan error jika terjadi error dalam proses input komentar
Cari code dan tambahakan code bawah ini:
Kita bagi 2 hak aksesnya member dan admin member hanya bisa input berita dan produk saja
sementara admin bisa akses semuanya termasuk menambahkan member
Kita modifikasi halaman index.php dengan menambahkan administrator dan logout dan beri
session apakah administrator atau member
Langkah Pengerjaan
1). Pilih Data Pilih Restrict Access To Page
1). Cek terlebih dahulu cek session dengan cara memilih icon menu Restrict Acces To Page
<!--Buat Bulan-->
<?php
echo "<select name=bln>";
$bulan=array(1=>"Jan","Feb","Mar","April","Mei","Juni","Juli","Agus","Sep","Okt
","Nov","Des",);
for($bln=1;$bln<=12; $bln++){
if(strlen($bln)==1){
echo "<option value=0$bln>$bulan[$bln]</option>";
}else{
echo "<option value=$bln>$bulan[$bln]</option>";
}
}
echo "</select>";
?>
<!--tutup Buat Bulan-->
$lokasi_file=$_FILES[image][tmp_name];
$nama_file=$_FILES[image][name];
move_uploaded_file($lokasi_file,"../berita/$nama_file");
dan rubahlah pada bagian
GetSQLValueString($_POST['image'], "text"),
Menjadi
GetSQLValueString($nama_file, "text"),
Hasil
Serta rubahlah format tanggal dengan kode di bawah ini sisipkan setelah
GetSQLValueString($date, "text"),
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
Tambahkan kode dibawah ini
//Validasi
$error = array();
$MM_flag="MM_insert";
if (isset($_POST[$MM_flag])) {
//Periksa news
if(empty($_POST['judul_berita']))
{
$error['judul_berita'] = "<span class=\"style1\">*) Judul Berita harus
diisi<br></span>";
}
$file_info = getimagesize($_FILES['image']['tmp_name']);
if(empty($file_info)) // No Image?
{
$error['$file_info']= "<span class=\"style1\">*) Upload gambar ga boleh
kosong.<br></span>";
}
if(empty($_POST['post']))
{
$error['post'] = "<span class=\"style1\">*) Posting harus diisi<br></span>";
}
$date = $_POST['thn']."-".$_POST['bln']."-".$_POST['tgl'];
if(empty($date))
{
$error['$date'] = "<span class=\"style1\">*) Tanggal harus
diisi<br></span>";
}
if(empty($_POST['deskripsi']))
{
$error['deskripsi'] = "<span class=\"style1\">*) Keterangan harus
diisi<br></span>";
}
}
if(!$error) {
//akhir modif
Rubah kode di bawah ini
$insertGoTo = "adminnews.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
$insertGoTo .= $_SERVER['QUERY_STRING'];
}
header(sprintf("Location: %s", $insertGoTo));
Menjadi
//$insertGoTo = "adminnews.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
$insertGoTo .= $_SERVER['QUERY_STRING'];
}
//header(sprintf("Location: %s", $insertGoTo));
echo"<script language=\"javascript\">
alert(\"Data Berhasil Di Simpan\");
document.location=\"adminnews.php\";
</script>";
// Lanjutan Validasi Bersihkan array
$_POST = array();
}
Cari kode ini kemudaian tambahkan diatasnya
<form action="<?php echo $editFormAction; ?>" method="post" name="form1"
id="form1" enctype="multipart/form-data">
Tambahkan kode diatas kode tersebut
<!-- Menampilkan Pesan Kesalahan -->
<?php if($error) { ?>
<h3 class="style1">Mohon Maaf ! ada kesalahan dalam proses pengisian
data:</h3>
<?php foreach($error as $peringatan) { ?>
<br/><?php echo $peringatan; ?>
<?php } ?>
</p>
<?php } ?>
<!-- Akhir Menampilkan Pesan Kesalahan -->
Hasil
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
Tambahkan script dibawah ini
Anhar. (2010). Panduan Menguasai PHP dan Mysql secara Otodidak. Jakarta: Agromedia Pustaka.
Hidayat, R. (2010). Cara Praktis Membangun Website Gratis. Jakarta: PT Elex Media Komputindo.
SURAT PENCATATAN
CIPTAAN
Dalam rangka pelindungan ciptaan di bidang ilmu pengetahuan, seni dan sastra berdasarkan Undang-Undang Nomor 28
Tahun 2014 tentang Hak Cipta, dengan ini menerangkan:
Pencipta
Nama : Agung Baitul Hikmah, Deddy Supriadi, , dkk
Alamat : Gn Peuteuy RT 005/RW 011 Kelurahan Linggajaya Kecamatan
Mangkubumi, Tasikmalaya, Jawa Barat, 46181
Kewarganegaraan : Indonesia
No Nama Alamat
1 Agung Baitul Hikmah Gn Peuteuy RT 005/RW 011 Kelurahan Linggajaya Kecamatan Mangkubumi
3 Tuti Alawiyah Kp. Kebonkalapa RT.03/ RW 01, Kel. Setianegara, Kec. Cibeureum