Link Buku: 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 [email protected], [email protected] atau di blog penulis www.agblgoblog.blogspot.com

Tasikmalaya, 2 Maret 2015

Agung Baitul Hikmah, M.Kom

DAFTAR ISI

BAB 1. Memahami Website, PHP dan Dreamweaver ...... 5 1.1. Pengertian Website...... 5 1.2. Pengertian PHP (Personal Home Page) ...... 5 1.3. Pengertian Adobe Dreamweaver ...... 5 1.4. PHP MyAdmin ...... 6 1.5. Pengertian MySQl (My Structure Query Language) ...... 6 BAB 2. Merancang Website ...... 6 2.1. Merancang Tampilan / Theme Website ...... 6 2.2. Membuat Site ...... 7 2.2.1. Membuat Folder ...... 7 2.2.2. Membuat Site Baru ...... 7 2.2.3. Memodifikasi Template ...... 11 BAB 3. Membuat Database dan Koneksi Dreamweaver ...... 13 3.1. Membuat Database dan Table ...... 13 3.2. Koneksi Database dengan Dreamweaver CS3 ...... 16 BAB 4. Membuat Halaman User ...... 18 4.1. Membuat Halaman Product...... 18 4.2. Membuat Halaman Menu Navigasi Produk ...... 23 4.3. Membuat Halaman Project Slider Galeri Produk ...... 24 4.4. Membuat Halaman Event & New’s ...... 26 4.5. Membuat Halaman Detail Produk ...... 29 4.6. Membuat Halaman Detail Berita ...... 32 4.7. Membuat Halaman Berita ...... 33 4.8. Membuat Halaman Pagging Berita ...... 34 4.9. Membuat Halaman Kontak ...... 36 4.9. Membuat Halaman Validasi Kontak ...... 41 4.9.1. Validasi Kontak dengan Captcha ...... 41 4.9.2. Validasi Kontak dengan Manual ...... 43 4.10. Membuat Halaman View Kontak ...... 47 4.11. Membuat Pagging Halaman Kontak...... 50 BAB 5. Membuat Halaman Administrator ...... 51 5.1. Modifikasi Template Admin ...... 51 5.2. Membuat Halaman Login ...... 53 5.2.1. Membuat Halaman Utama Login ...... 53 5.2.1. Membuat Koneksi pada Halaman Login User ...... 55 5.2.1. Membuat Hak Akses Pada Halaman Login User ...... 56 5.3. Membuat Halaman Logout ...... 58 5.4. Menambahkan Halaman Admin New’s ...... 60 5.4.1. Menambahkan Halaman adminnews. ...... 60 5.4.2. Membuat Halaman addadminnews.php ...... 69 Bibliography ...... Error! Bookmark not defined.

BAB 1. Memahami Website, PHP dan Dreamweaver

1.1. Pengertian Website

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).

1.2. Pengertian PHP (Personal Home Page)

“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).

1.3. Pengertian Adobe Dreamweaver

Adobe Dreamweaver merupakan salah satu tool untuk mendesign halaman website yang merupakan tools keluaran Adobe yang dahulunya merupakan . 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.

1.5. Pengertian MySQl (My Structure Query Language)

“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.

BAB 2. Merancang Website

2.1. Merancang Tampilan / Theme Website

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

2.2.1. Membuat Folder

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:

Gambar 2.1 Tempat menyimpan folder 2.2.2. Membuat Site Baru

1) Buka Dreamweaver CS3 kemudian pilih Site  New Site

Gambar 2.2 Membuat Site Baru

2) Pada Kolom Editing Files edit data berikut ini a) Seperti nama site: Dealer xyz b) Url Site : http://localhost/dealer c) Kemudian Pilih tombol  Next

Gambar 2.3 Kolom Editing Files

3) Untuk pemilihan server yang digunakan pilih tombol Yes, I want to use server technology Pilih pilihan PHP MySQL  Tombol Next

Gambar 2.4 Kolom Editing Files Part 2

4) Untuk testing dimana server itu bekerja pilihlah edit and test locally (My testing server is on this computer) Isi lah dimana folder itu disimpan : contoh saya di D:\XAMPP\xampp\htdocs\dealer kemudian pilih tombol  Next

Gambar 2.5 Kolom Editing Files Part 3

4. Kemudian test server atau URL berjalan atau tidak dengan menekan tombol Test URL  pilih tombol Next jika successfully

Gambar 2.6 Kolom Testing Files

6. Pada Sharing Files Kemudian untuk editing File pilih saja pilihan No kemudian pilih tombol  Next

Gambar 2.7 Halaman Sharing Files

7. Selamat anda telah berhasil membuat website dealer Pilih tombol  Done untuk memulai pengerjaan

Gambar 2.8 Halaman Summary

2.2.3. Memodifikasi Template

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. menjadi index.php

Gambar 2.9 Halaman Rubah Folder

2). Sekarang kita coba test url di browser penulis memakai mozika firefox kemudian lakukan modifikasi dari menu navigasi diatas

Gambar 2.10 Halaman Test Url 3). Masuk ke dreamweaver pilih code kemudian kita edit selamat meodifikasi sesuai kebutuhan

Gambar 2.11 Halaman Edit Code Dreamweaver

4) Berikut hasilnya sebelum kita dinamiskan:

Gambar 2.12 Halaman Tampilan Template Delaer 5). Hasil Modifikasi sedikit dan hasilnya seperti berikut ini:

Gambar 2.13 Halaman Tampilan Modifikasi

BAB 3. Membuat Database dan Koneksi Dreamweaver

3.1. Membuat Database dan Table

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

Gambar 3.2. Halaman PhpMyAdmin Input SQL a). Source Code Tabel Product

CREATE TABLE IF NOT EXISTS `product` ( `id_product` int(11) NOT NULL AUTO_INCREMENT, `product_name` varchar(100) NOT NULL, `price` int(20) NOT NULL, `image` varchar(1000) NOT NULL, `id_category` int(11) NOT NULL, `deskripsi` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=36 ; b). Source Code Tabel Berita

CREATE TABLE IF NOT EXISTS `berita` ( `id_berita` int(11) NOT NULL AUTO_INCREMENT, `judul_berita` varchar(100) NOT NULL, `image` varchar(1000) NOT NULL, `deskripsi` text NOT NULL, PRIMARY KEY (`id_berita`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=36 ; c). Source Code Tabel Service CREATE TABLE IF NOT EXISTS `serivice` ( `id_service` int(11) NOT NULL AUTO_INCREMENT, `nama` varchar(100) NOT NULL, `telp` int(20) NOT NULL, `alamat` text NOT NULL, PRIMARY KEY (`id_service`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=36 ; d). Source Code Tabel Company CREATE TABLE IF NOT EXISTS `company` ( `id_company` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(1000) NOT NULL,

`link` varchar(200) NOT NULL,

PRIMARY KEY (`id_company`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=36 ; e). Source Code Tabel Profil

CREATE TABLE IF NOT EXISTS `profil` ( `id_profil` int(11) NOT NULL AUTO_INCREMENT, `judul_profil` varchar(100) NOT NULL, `image` varchar(1000) NOT NULL, `deskripsi` varchar(200) NOT NULL, PRIMARY KEY (`id_profil`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=36 ; f). Source Code Tabel Komentar

CREATE TABLE IF NOT EXISTS `komentar` ( `id_komentar` int( 10 ) NOT NULL AUTO_INCREMENT ,

`nama` varchar( 64 ) NOT NULL , `email` varchar( 64 ) NOT NULL , `komentar` text NOT NULL , PRIMARY KEY ( `id_komentar` ) ) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT =1; g). Source Code Tabel Level Akses CREATE TABLE IF NOT EXISTS `akses_level` ( `id_akses` int(5) unsigned NOT NULL AUTO_INCREMENT, `nama` varchar(64) NOT NULL, `username` varchar(64) NOT NULL, `password` varchar(64) NOT NULL, `level` varchar(64) NOT NULL, PRIMARY KEY (`id_akses`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

3.2. Koneksi Database dengan Dreamweaver CS3 1). Pilih Menu Application disamping kanan Pilih Databases Pilih Icon (+)  MySql Connections

Gambar 3.3. Halaman MySQL Connection 2). Isi bagian MySql Connections seperti gambar dibawah ini

Gambar 3.4. Halaman Isian MySQL Connection

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

Gambar 3.5. Halaman Koneksi

BAB 4. Membuat Halaman User 4.1. Membuat Halaman Product 1). Untuk menampilkan hasil produk kita memerlukan namanya recordset Pilih Menu Application disamping kanan Pilih Bindings Pilih Icon (+)  Recodset (Query)

Gambar 4.1. Halaman Membuat Recordset Baru 2). Akan Muncul tampilan seperti berikut ini isi data sesuai contoh biar ga bingung nantinya pilih  OK untuk melanjutkan

Gambar 4.2. Halaman Pembuatan Recordset 3. Letakan Kursor di Index.php kemudian pilih Dynamic Tabel untuk menampilkan view data berbentuk tabel

Gambar 4.3. Halaman Dynamic Tabel 4). Beri Nama Recordset dengan nama recproduk Pilih 10 Record saja yang ditampilkan tergantung selera yang ditampilkan kalau sudah klik  OK

Gambar 4.4. Halaman Pengaturan Recordset Produk

5). Pilih Code maka akan tampil source otomatis seperti ini

Gambar 4.5. Halaman Source Code View 6). Rubahlah kode dibawah ini sesuaikan dengan keinginan mau dimana ditampilkan

Gambar 4.6. Halaman Edit Source Code View 7). Taruh kode tersebut di sini

Gambar 4.7. Halaman Edit Source Code View 8). Taruh kode dibawah ini diantara tersebut

  • " width="452" height="361" alt="A cubcake, a cup with

    brushes and a trophy with a charry on top" />

    Rp. ,-


  • 8). 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

    Gambar 4.9. Halaman Tampilan View List Navigasi Produk 2). Rubah Kode dan tambahkan kode seperti dibawah ini

    Gambar 4.10. Halaman Tampilan View List Navigasi Produk 3). Berikut Source Code

    echo"

  • $r[product_name]

  • ";

    } ?>

    4.3. Membuat Halaman Project Slider Galeri Produk 1). Membuat Halaman Project Slider Galeri produk

    Gambar 4.11. Halaman Tampilan Project Slider 2). Ubahlah dan modifikasi serta tambahkan kode berikut ini setelah tag projects-slide

    Gambar 4.12. Halaman Edit Project Slider 3). Berikut Source Code

    "; } ?>

    4.4. Membuat Halaman Event & New’s 1). Rubahlah Event & New’s dengan cara masih seperti diatas

    Gambar 4.11. Halaman Tampilan Event & New’s 2). Pilih Icon Data kemudian pih Recordset beri nama recberita

    Gambar 4.12. Halaman Record Set Event & New’s 3). Kemudian pilihlah Data kemudian klik Icon Dynamic Table

    Gambar 4.13. Halaman Dynamic Table Set Event & New’s 4). Pilih Recordset recberita kemudian isi tampilan record sebagai contoh kita tampilkan sebanyak 5 Record Pilih OK

    Gambar 4.14. Halaman Pengisian Recordset Event & New’s 5). Rubahlah source code standart menjadi seperti berikut ini

    Gambar 4.15. Halaman Edit Source Code Event & New’s

    6). Source Code Edit Event’s & New’s

  • 4.5. Membuat Halaman Detail Produk 1). Copy index.php kemudian rubahlah copy of index.php menjadi detailproduk.php

    Gambar 4.16. Halaman Copy Index

    2). Kemudian kita modifikasi menjadi seperti berikut ini

    Gambar 4.17. Halaman Edit Detail Produk

    3). Kemudian Edit dan Hapuslah source code dibawah ini:

    Gambar 4.18. Halaman Source Code Edit Detail Produk

    4). Tambahkan dan modifikasi kode berikut ini di tag content

    Gambar 4.19. HalamanModifikasi Source Code Edit Detail Produk

    5). Source Code Modifikasi Detail Produk

    ?>
    Rp.

    " alt="briefcase" width="128" height="99" />

    ?>

    4.6. Membuat Halaman Detail Berita 1). Copy Kembali detailproduct.php kemudian rename namanya menjadi detailberita.php 2). Rubahlah dan edit seperti kode dibawah ini:

    Gambar 4.20. Halaman Modifikasi Source Code Edit Detail Berita

    Gambar 4.21. Halaman Modifikasi Source Code Query Edit Detail Berita 4.7. Membuat Halaman Berita 1). Copy detailberita.php rubah menjadi berita.php

    Gambar 4.22. Halaman Edit Berita 2). Source Modifikasi Code Berita

    " alt="briefcase" width="128" height="99" />

    ?>

    Read More 4.7. Membuat Halaman Pagging 4.8. Membuat Halaman Pagging Berita 1). Pilih Icon Recordset Navigation Bar kemudian pilih  OK

    Gambar 4.23. Halaman Recodset Navigation Bar

    2). Pada pilihan Recorset pilih recberita kemudian pilih  OK

    Gambar 4.24. Halaman Pilihan Recodset Navigation Bar

    3). Halaman source code hasil pagging seperti dibawah ini:

    Gambar 4.25. Halaman Source Code Pagging Berita

    4). Hasilnya tampilan setelah ditampilkaan di browser seperti berikut ini

    Gambar 4.26. Halaman Tampilan Pagging Berita 4.9. Membuat Halaman Kontak

    1). Buat File contact.php copylah berita.php kemudian rename menjadi contact.php Buatlah Form terlebih dahulu

    Gambar 4.27. Halaman Tampilan Awal Kontak

    2). Buatlah Table untuk halaman Komentar dengan cara pilih Insert  Table

    Gambar 4.28. Halaman Membuat Table Komentar 3). Isi jumlah Rows = 4 dan jumlah Columns = 3 sedangkan Lebar Table = 100 Percent agar mengikuti halaman pilih header none kemudian pilih OK untuk melanjutkan

    Gambar 4.29. Halaman Editor Table

    4). Modifikasi Halaman Komentar dengan memasukan textfield dan tombol submit dan text area Didapatkan hasil modifikasi seperti berikut ini:

    Gambar 4.30. Halaman Komentar

    5). Sekarang kita coba koneksikan dengan database langkahnya seperti berita produk Sebelumnya beri inisial nama untuk form1 nya menjadi formcontact

    Gambar 4.31. Halaman Modifikasi Form Komentar

    6). Dan rubah pula name dari masing – masing text sesuai dengan nama tabel contact di database dealer

    Gambar 4.32. Halaman Modifikasi Name Komentar 7). Hasilnya tampilan seperti source code berikut ini:

    Gambar 4.33. Halaman Source Code Modifikasi Komentar

    8). Setelah dibuat tampilan kemudian Klik tombol SEND kemudian pilih Insert Record di tab Data untuk menambahkan halaman pengisian terkoneksi ke database

    Gambar 4.34. Halaman Pilihan Insert Data Komentar

    9). Isi dan lengkapi datanya pada after inserting, goto pilih halaman yang dituju contoh halaman contact.php yang kita tuju kemudian klik OK jika sudah yakin benar ikuti contoh saya jika tidak ingin tersesat

    Gambar 4.35. Halaman Pengisian Insert Data Komentar

    10). Lakukan Pengetesan terlebih dahulu apakah sudah masuk kedalam database

    Gambar 4.36. Halaman Pengetesan Komentar

    11). Jika data sudah masuk kita buka halaman http://phpmyadmin kemudian lihat di table komentar apakah data yang kita inputkan sudah masuk atau belum?

    Gambar 4.37. Halaman Php MyAdmin Tabel Komentar

    4.9. Membuat Halaman Validasi Kontak

    4.9.1. Validasi Kontak dengan Captcha

    Membuat validasi jika diisi data kosong maka user tidak bisa mengisinya saya menambahkan kode manual captcha juga

    Caranya sebagai berikut : 1). Tambahkan captcha.php di folder coba dan masukan gambar captcha.png dan anonymous.gdf yang telah disediakan oleh saya dalam folder komponen

    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

    3). Lakukan modifikasi Source Code seperti dibawah ini:

    Gambar 4.39. Halaman Edit Komentar dengan Captcha 4.9.2. Validasi Kontak dengan Manual

    1). Melalui Code View, cari kode di bawah ini:

    $editFormAction = $_SERVER['PHP_SELF'];

    if (isset($_SERVER['QUERY_STRING'])) { $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']); }

    Gambar 4.40. Halaman View Edit Komentar

    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'] = "*) Nama harus diisi minimal 3 karakter
    "; }

    //Periksa alamat email $checkEmail = '/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0- 9\-]+\.)+[a-z]{2,6}$/ix'; if (!preg_match($checkEmail, trim($_POST['email']))) { $error['email'] = " *) Alamat email tidak valid
    "; }

    //Periksa komentar if(empty($_POST['komentar'])) { $error['komentar'] = "*) Komentar harus diisi
    "; }

    //Periksa capctha session_start(); if($_POST['captcha'] <> $_SESSION['captcha']){ $error['captcha'] = "*) Kode Kosong atau kode salah!
    "; } } 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)); } 4). Ubah dan tambahkan source code menjadi

    echo""; // 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:

    // Tambahkan Kode berikut diatas kode diatas hasilnya menjadi berikut ini

    Mohon Maaf ! ada kesalahan dalam proses pengisian data:


    6). Hasilnya tampak seperti gambar dibawah ini ketika dijalankan di browser:

    Gambar 4.43. Halaman Hasil Validasi Manual Array Komentar 4.10. Membuat Halaman View Kontak

    Menampilkan dan memodifikasi Halaman View Komentar di bawah Form Komentar

    Gambar 4.44. Halaman Rancangan View Komentar

    1). Pilih Data Kemudian Pilih Icon Recordset atur dan pilih name = reccontact , Connection = Koneksi_dealer dan Table = komentar kemudian klik OK

    Gambar 4.45. Halaman Recordset View Kontak 2). Pilih Data kemudian klik Icon Dynamic Tabel

    Gambar 4.46. Halaman Dynamic Table View Kontak 2). Pada halaman Dynamic Table atur dan pilihlah Recordset=reccontact pada show=3 maksudnya kita hanya tampilkan 3 komentar saja.

    Gambar 4.47. Halaman Pengaturan Dynamic Table View Kontak 3). Berikut halaman hasil menambahkan List View Komentar

    Gambar 4.48. Halaman Hasil Komentar

    3). Berikut halaman hasil akhir di browser untuk halaman List View Komentar

    Gambar 4.49. Halaman Hasil Akhir View List Komentar 4.11. Membuat Pagging Halaman Kontak 1). Pilih Data kemudian pilih Icon Record Navigation Bar

    Gambar 4.50. Halaman Record Navigation Bar 2). Pada pilihan Recordset pilihlah reccontact pada display using pilihlah text

    Gambar 4.51. Halaman Pilihan Record Navigation Bar

    BAB 5. Membuat Halaman Administrator

    5.1. Modifikasi Template Admin 1). Saya ambil template untuk halaman admin di springtime bisa di download di http://www.free-css.com/assets/files/free-css-templates/download/page116/springtime.zip 2). Copykan template springtime ke halaman admin

    Gambar 5.1. Halaman Admin Spring Time 3) Membuka dan Edit Code menggunakan jendela Dreamweaver

    Gambar 5.2. Halaman Jendela Edit Dreamweaver 4). Tampilan Halaman Template Spring Time

    Gambar 5.3. Halaman Template Admin Spring Time

    5). Memodifikasi halaman Admin Index.php

    Gambar 5.4. Halaman Modifikasi Index Template Admin Spring Time 5.2. Membuat Halaman Login

    5.2.1. Membuat Halaman Utama Login

    Langkah Pengerjaannya sebagai berikut:

    1). Kita buat file baru pilih File New File

    Gambar 5.5. Membuat Halaman Login 2). Membuat Tabel dengan cara pilih menu Insert  Table atur jumlah rows = 5, column = 3 dan Table Width = 500 pixels

    Gambar 5.6. Halaman Format Tabel 3). Modifikasi atur dan rubahlah name untuk masing – masing form form

    Gambar 5.7. Halaman Source Code Form Login 4). Halaman Tampilan Form Login di browser setelah dimodifikasi

    Gambar 5.8. Halaman Modifikasi Form Login 5.2.1. Membuat Koneksi pada Halaman Login User

    Langkah Penegerajaannya sebagai berikut:

    1). Pilih Data  Klik Icon Login User

    Gambar 5.9. Halaman Login User 2). Atur isi dan pilih Login User sesuai dengan tampilan dibawah ini:

    Gambar 5.10. Halaman Pengaturan Login User 3). Lakukan test apakah berjalan apa tidak Login User 5.2.1. Membuat Hak Akses Pada Halaman Login User

    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

    Gambar 5.11. Halaman Restrict Access To Page 2). Pada halaman Restrict Access To Page pilih menu Username, password, And Access Level

    Gambar 5.12. Halaman Pengaturan Restrict Access To Page 2). Pada halaman Define Access Levels tambhakan hak akses dengan menekan tombol + , isi dengan admin dan member

    Gambar 5.13. Halaman Devine Acces Levels 2). Ketika membuka halaman Restrict Acces To Page hak akses menjadi 2 yaitu admin dan member

    Gambar 5.14. Halaman Level Akses Restrict Acces To Page 3). Kita buat Halaman selamat dating dengan menggunakan Session berdasarkan username Cari Kode tersebut kemudain tambahkan kode

    Gambar 5.15. Halaman Session User Name 5.3. Membuat Halaman Logout 1). Pilih Data  Klik Icon Logout User

    Gambar 5.16. Halaman Logout User 2). Pada halaman Log out when pilih Link Clicked dan when done, go to linkkanan ke halaman login.php kemudian klik OK untuk melanjutkan

    Gambar 5.17. Halaman Format Logout User 3). Tampilan Source Code Logout User

    Gambar 5.18. Halaman Source Code Logout User 5.4. Menambahkan Halaman Admin New’s 5.4.1. Menambahkan Halaman adminnews.php

    Gambar 5.19. Halaman Level Access 1). Membuat halaman tampil berita Pilih Data  Dynamic Table taruhlah source code tsb di

    Gambar 5.20. Halaman Dynamic Table 2). Pilih Recordset Tekan Tombol  OK

    Gambar 5.21. Halaman Create Recordset 3). Atur dan Pilih Recordset - Name = recadminnews - Connection = Koneksi_Dealer - Table = berita - Column = Pilih All Tekan Tombol  OK untuk melanjutkan

    Gambar 5.22. Halaman Pengaturan Recordset 4). Pilih Recordset Kembali Tekan Tombol  OK

    Gambar 5.23. Halaman Create Recordset 5). Pada Dynamic Table pada isian - Recordset = recadminnews - Show = 3 Records Pilih  OK untuk melanjutkan

    Gambar 5.24. Halaman Pengaturan Dynamic Table

    6). Source Code hasil tampilan adminnews.php

    Gambar 5.26. Halaman Source Code Admin News 7). Menambahkan Kolom No, Delete serta Edit

    " width="84" height="84"/>

    DeleteEdit 8). Tampilan halaman source code No Edit dan Delete

    Gambar 5.27. Halaman Tampilan Source Code Admin News 9). Kita buat halaman pagging dengan memasukan kode di

    Gambar 5.28. Halaman Recordset Navigation Status

    10). Halaman Menu Recordset Navigation Status Pilihlah recordset = recadminnews

    Gambar 5.29. Halaman Menu Recordset Navigation Status 11). Source Code Halaman Pagging Admin New’s

    Showing to of

    12).Halaman Tampilan Source Code Halaman Pagging Admin New’s

    Gambar 5.30. Halaman Source Code Menu Pagging Admin New’s 13). Untuk menampilkan icon pagging pilihlah Icon Recordr Navigation Bar

    Gambar 5.31. Halaman Menu Record Navigation Bar 14). Pilihan menu Recordset Navigiation Bar - Pilihan Recordset = recadminnews - Display using = Text

    Gambar 5.32. Halaman Pilihan Menu Record Navigation Bar 15). Tampilan Source code halaman pagging

    Gambar 5.33. Halaman Tampilan Source Code Halaman Pagging 16). Lakukan modifikasi dan hapuslah table dan tr (Baris) serta td (Kolom) nya

    Gambar 5.34. Halaman Modifikasi Source Code Halaman Pagging

    17). Source Code Halaman Pagging 0) { // Show if not first page ?> ">First

    0) { // Show if not first page ?>

    ">Previous

    ">Next

    ">Last 18). Hasilnya seperti gambar berikut ini:

    17). Hasil akhir tampilan adminnews.php

    Gambar 5.35. Halaman Hasil Akhir Tampilan adminnew’s.php 5.4.2. Membuat Halaman addadminnews.php

    1). Cek terlebih dahulu cek session dengan cara memilih icon menu Restrict Acces To Page

    Gambar 5.36. Halaman Restrict Acces To Page 2). Pada pilihan menu Restrict Acces To Page pada pilihan Restrict Based On pada option usrename, password dan access level pada Select Level (s) pilih hak akses admin dan member sedangkan pada halaman if access is denied, go to pilih halaman login.php kemudian Klik OK untuk melanjutkan

    Gambar 5.37. Halaman Hak Akses Restrict Acces To Page 3).Masukan kode pada baris

    Gambar 5.38. Halaman Awal Add Admin New’s 4). Menambahkan halaman Insert (Tambah) data dengan cara pilih icon Record Insertion From Wizard

    Gambar 5.39. Halaman Record Insertion From Wizard 5). Pada halaman Record Insertion Form pada pilihan menu - Connection Pilih = Koneksi_Dealer Table - Table = berita - After inserting, go to = adminnews.php - Pilih OK untuk melanjutkan

    Gambar 5.40. Halaman Pilihan Menu Record Insertion From Wizard 6). Halaman Tampilan Source Code hasil tampilan Insert From Wizard

    Gambar 5.41. Halaman Tampilan Source Code Insert From Record Hasil

    Kita Modifikasi dengan menghapus id berita menambahkan tombol browse di image dan date

    Judul_berita:
    Image:
    Post:
    Date:
    "; for($i=1; $i<=31; $i++){ if(strlen($i)==1){ echo ""; }else{ echo ""; } } echo ""; ?>

    ";

    $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 ""; }else{ echo ""; } } echo ""; ?>

    "; for($thn=1970; $thn<=date("Y"); $thn++){ echo ""; } echo "" ?>

    Deskripsi:
     

    Lakukan modifikasi karena gambar bukan merupaka type text Cari Kode

    Tambahkan Kemudian cari kode if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { Tambahkan di bawah kode tersebut $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 if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { $lokasi_file=$_FILES[image][tmp_name]; $nama_file=$_FILES[image][name]; move_uploaded_file($lokasi_file,"../berita/$nama_file"); menjadi if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) { $lokasi_file=$_FILES[image][tmp_name]; $nama_file=$_FILES[image][name]; move_uploaded_file($lokasi_file,"../berita/$nama_file"); $date = $_POST['thn']."-".$_POST['bln']."-".$_POST['tgl']; Dan rubahlah GetSQLValueString($_POST['date'], "text"), Menjadi

    GetSQLValueString($date, "text"),

    Untuk posting kita lakukan secara otomatis sesuai login

    //Validasi $error = array(); $MM_flag="MM_insert"; if (isset($_POST[$MM_flag])) {

    //Periksa news if(empty($_POST['judul_berita'])) { $error['judul_berita'] = "*) Judul Berita harus diisi
    "; }

    $file_info = getimagesize($_FILES['image']['tmp_name']); if(empty($file_info)) // No Image? { $error['$file_info']= "*) Upload gambar ga boleh kosong.
    "; }

    if(empty($_POST['post'])) { $error['post'] = "*) Posting harus diisi
    "; }

    $date = $_POST['thn']."-".$_POST['bln']."-".$_POST['tgl']; if(empty($date)) { $error['$date'] = "*) Tanggal harus diisi
    "; }

    if(empty($_POST['deskripsi'])) { $error['deskripsi'] = "*) Keterangan harus diisi
    "; }

    } 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""; // Lanjutan Validasi Bersihkan array $_POST = array(); } Cari kode ini kemudaian tambahkan diatasnya Tambahkan kode diatas kode tersebut

    Mohon Maaf ! ada kesalahan dalam proses pengisian data:


    Hasil

    Validasi extensi dan ukuran Cari kode if (isset($_SERVER['QUERY_STRING'])) { $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']); } Tambahkan script dibawah ini

    //Validasi Extensi Gambar $types = array('image/gif','image/png'); if (in_array($_FILES['image']['type'], $types)) { $error['$types'] = "*) Hanya bisa .jpg dan .jpeg saja
    "; }

    //Validasi Ukuran Gambar $file_size = $_FILES['image']['size']; if ($file_size>100000) { $error['$filesize'] = "*) File melebihi 100 Kb
    "; }

    Hasil

    Ukuran diatas 100 Kb hasilnya

    MEMBUAT FORM EDIT ADMIN Sama seperti diatas kita edit template Di

    kita buat wizardnya form edit

    Atur dan rubah name form1 nya menjadi formeditadminnew Penagturan sama dengan form addadminnew.php Hasil

    Kita atur di halaman admin news tpmol edit dihubungkan dengan id_berita

    Cari kode dan rubah DeleteEdit

    Rubah di kode editadminnews.php $query_receditadminnew = "SELECT * FROM berita Where id_berita='$_GET[edit]'";

    Menambah tombol OK dan Batal

    Masukan kode ini sebelum

    Edit kode menjadi DeleteEdit

    MEMBUAT HALAMAN DELETE Kita akan coba membuat halaman deleteadminnews.php

    Hasil Kode

    Tambahkan kode berikut ini agar menghapus permanen Cari Kode berikut if ((isset($_GET['id_berita'])) && ($_GET['id_berita'] != "")) { $deleteSQL = sprintf("DELETE FROM berita WHERE id_berita=%s", GetSQLValueString($_GET['id_berita'], "int")); Taruh kode berikut dibawah kode diatas // membaca nama file yang akan dihapus berdasarkan id $query = "SELECT * FROM berita WHERE id_berita='".$_GET['hapus']."'"; $hasil = mysql_query($query); $data = mysql_fetch_array($hasil); $namaFile = $data['image']; Cari Kode Berikut mysql_select_db($database_Koneksi_Dealer, $Koneksi_Dealer); $Result1 = mysql_query($deleteSQL, $Koneksi_Dealer) or die(mysql_error()); Tambahkan kode berikut dibawah kode diatas // menghapus file dalam folder sesuai namanya unlink("../berita/$namaFile");

    Selesai untuk produk admin dsb sama langkah langkahnya

    Daftar Pustaka

    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.

    Putri, W. R. (2012). Artikel Mengenai Pemograman Web. http://ilmukomputer.org/wp- content/uploads/2012/10/winda-pemograman-web. (12 Mei 2014), 18.

    Solichin, A. (2014). Achmatim.Net Tutorial Komputer dan Buku Pembelajaran Gratis http://achmatim.net/ (3 Januari 2014).

    Suprianto, D. (2008). Buku Pintar Pemograman PHP. Bandung: OASE Media.

    REPUBLIK INDONESIA KEMENTERIAN HUKUM DAN HAK ASASI MANUSIA 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:

    Nomor dan tanggal permohonan : EC00201928789, 6 Februari 2019

    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

    Pemegang Hak Cipta Nama : Agung Baitul Hikmah Alamat : Gn Peuteuy RT 005/RW 011 Kelurahan Linggajaya Kecamatan Mangkubumi, Tasikmalaya, Jawa Barat, 46181 Kewarganegaraan : Indonesia Jenis Ciptaan : Buku Judul Ciptaan : Cara Cepat Membangun Website Dari Nol Studi Kasus: Web Dealer Motor Tanggal dan tempat diumumkan untuk pertama : 2 Maret 2015, di Tasikmalaya kali di wilayah Indonesia atau di luar wilayah Indonesia Jangka waktu pelindungan : Berlaku selama hidup Pencipta dan terus berlangsung selama 70 (tujuh puluh) tahun setelah Pencipta meninggal dunia, terhitung mulai tanggal 1 Januari tahun berikutnya. Nomor pencatatan : 000134009 adalah benar berdasarkan keterangan yang diberikan oleh Pemohon. Surat Pencatatan Hak Cipta atau produk Hak terkait ini sesuai dengan Pasal 72 Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta.

    a.n. MENTERI HUKUM DAN HAK ASASI MANUSIA DIREKTUR JENDERAL KEKAYAAN INTELEKTUAL

    Dr. Freddy Harris, S.H., LL.M., ACCS. NIP. 196611181994031001 LAMPIRAN PENCIPTA

    No Nama Alamat

    1 Agung Baitul Hikmah Gn Peuteuy RT 005/RW 011 Kelurahan Linggajaya Kecamatan Mangkubumi

    Perum Mitra Batik,Jl. Batik Keris B.59 RT 01/ RW 17 Kel Kersamenak 2 Deddy Supriadi Kecamatan Kawalu

    3 Tuti Alawiyah Kp. Kebonkalapa RT.03/ RW 01, Kel. Setianegara, Kec. Cibeureum

    Powered by TCPDF (www.tcpdf.org)