Anda di halaman 1dari 47

Panduan Web Programing untuk Pemula

Oleh: Imam Ferianto

Panduan Web Programing untuk Pemula


oleh: Imam Ferianto

Hari Pertama: 1.Pendahuluan 2.Tugas Proyek 3.Pembuatan Bisnis Proses Sederhana 4.Desain Database Mysql Menggunakan Tools Mikroolap 5.Cara Install dan Konfigurasi xampp Hari Kedua: 6.Cara Menggunakan tools phpmyadmin 7.Desain Prototype UI dasar dan Pengenalan Koding PHP 8.Penambahan CSS Sederhana 9.Validasi Input dengan Javascript Hari Ketiga: 10.Desain Layout Menggunakan Photoshop 11.Menggabungkan Kode PHP dan Desain Photoshop 12.Cara Mengupload File dan setting pada hosting

1.Pendahuluan Web programing merupakan salah satu pemrograman yang berorientasi ganda, yaitu server programing dan client programing. Disisi client kita membangun UI dan Berbagai validasi dengan programing HTML,CSS, Javascript/VBScript, Applet Java,Active X, Maupun Animasi Multimedia Flash. Disisi server kita membangun backend yang terdiri dari scripting (ASP, .NET, PHP, JAVA, Perl, dll) serta menangani proses yang berkaitan dengan input output, misalnya database (Mysql,MSSQL,Oracle,dll), pembuatan report file (PDF,XML,XLS,DOC,dll) Pada Sesi ini kita akan belajar Instant dan cepat , mengapa instant karena untuk belajar web programming secara umum membutuhkan waktu lama, selain itu perkembangannya juga sangat pesat, bermunculan banyak sekali bahasa dan standar baru. Sesi ini akan membahas seperti pada topik bahasan diatas, serta cara membuat software berbasis web dengan mudah dan cepat, mudah disini karena sebenarnya membuat software itu banyak sintak dan bahasa yang rumit, tetapi akan kita permudah menggunakan tools tools instant yaitu: xampp (filezilla ftp server+apache webserver+mysql database+php scripting engine+perl scripting engine). Programing juga sebuah art, artinya dalam membuat program sebisa mungkin kita menyajikan layout yang sedap dipandang mata (eyecatching), serta mudah dan tidak menimbulkan kerancuan dalam memakainya untuk user yang belum pernah memakai software tersebut sekalipun. Sehingga dalam hal ini perlu ada sebuah standarisasi layout dan tampilan yang menarik, ini akan kita bahas pada sesi terahir yaitu tentang desain UI.

Berikut gambaran umum tentang bagaimana aplikasi web itu harus dibangun

Client Browser

Server Web (apache,IIS,tomcat)

HTML

PHP ASP/.Net Perl Ruby/TCL Java Coldfusion/CFM Scripting Engine 3 File I/O

Desain Grafis,CSS
Javascript,VBScript Flash/Multimedia Active X Applet

Database Server Input/Output File

External Database Server

2.Tugas Proyek Untuk lebih menguasai dan mencapai hasil yang optimal, maka kita akan membuat suatu project yang akan kita terapkan pada training sesi ini. Project yang akan kita terapkan berikut adalah proyek membuat sebuah toko penjualan online . Untuk mewujudkan project kita, pertama kali yang harus dibuat adalah memahami bisnis proses yang harus dikerjakan software. Untuk lebih mudahnya kita dapat menggunakan catatan atau diagram sederhana, Flowchart, DFD maupun UML modeling. Untuk kasus yang sederhana biasanya penjelasan proses menggunakan Flowchart lebih mudah, dan pada skala teoritis akademis biasanya cenderung menggunakan DFD dan UML. Pada proses yang komplek misalnya pada skala besar software development berorientasi object biasanya cenderung menggunakan UML, karena UML mensupport itu lebih terhadap pemodelan proses. juga pada beberapa kasus dapat degenerate menjadi kerangka sebuah struktur kode MVC (model view controller) misalnya java (menggunakan rational rose, netbean) maupun PHP5 (menggunakan netbean, enterprise architect). Dalam penyusunan Kerangka Berpikir Sebuah Bisnis Proses kita harus berpikir runut dari proses umum ke proses detail, kemudian hubungan antar proses, sebuah bisnis proses yang sederhana dapat dibuat dengan Diagram Alir (Flowchart), sedangkan pada UML biasanya diwujudkan dalam sequence yang menjelaskan urutan kejadian rinci. Sedangkan pada DFD biasanya DFD level 1.

Penggambaran Bisnis Proses Secara Terstruktur Bisnis Proses Gambaran Sistem Proses Global Proses Detail Flowchart -System Flowchart -Conceptual Flowchart -Detail Flowchart DFD DFD Level 0 (contect) DFD Level 1 DFD level 2 UML Use Case Class Diagram Sequence Diagram Collaboration Diagram Activity Diagram

#Contoh Proses Flowchart Penjualan

Baiklah sekarang kita akan belajar membuat Bisnis Proses untuk penjualan pada toko online, dengan urutan tahap sederhana dan cepat sebagai berikut: 1. Tentukan Topik Bahasan : Bisnis Proses Toko Online 2. Tentukan Semua Hal yang terlibat: Website, Consumen, CS/pemilik , StokBarang,Bank, Expedisi 3. Tentukan Keterlibatan (hubungan antar komponen tersebut menjadi sebuah proses) dan beri penjelasan nama proses tersebut. 4. Tentukan proses awal dan proses ahir secara runut. 5. Tentukan arah proses (1 arah atau 2 arah dan respon yang diberikan untuk proses: sebuah proses biasanya memerlukan input dan memberikan aksi output/respon) 6. Tentukan constraint (aturan dan batasan khusus) hubungan antar proses. 7. Detailkan proses-proses tersebut. 8. Buat UI yang diperlukan untuk tiap proses yang memerlukan input dan code untuk memproses dan UI output yang dihasilkan dari tiap proses.

Gambaran Proses Toko Online Secara Sederhana


2.Pengecekan Pesanan

Website 1.memesan
3.pembayaran (transfer)

CS

Konsumen

Bank

4.Pengecekan Pembayaran (constraint)

5.Penyiapan barang dari gudang/order dari pabrik

7.Barang Diterima Konsumen (proses selesai)

Expedisi
6.Pengiriman Barang

Barang

#Gambaran Dalam Bentuk DFD diagram contect

#Use Case Toko Online :

#Sequence Diagram

Mendetailkan dari tiap proses (scenario system) dari proses sederhana: 1.Pemesan barang : 1a.Backend Barang yang dipesan harus terlebih dahulu display di website, maka system harus terlebih dulu menyediakan daftar barang,gambar,detail, dan harga, disini berarti harus dibuatkan (1) backend terproteksi dengan (2) login admin untuk menangani (3) penambahan item barang, (4) pengeditan harga dan detail, maupun (5) penghapusan item yang sudah tidak dijual, (6) view untuk mendisplay barang yang dijual. 1b.Customer View Disisi lain harus juga tersedia proses untuk memesan barang, artinya barang yang sudah dipilih disimpan dalam log (kerangjang) tiap-tiap konsumen. Disini system harus dapat membedakan konsumen yang satu dengan yang lain. Maka perlu dibuatkan sebuah (1) proses pendaftaran member, didalam proses pendaftaran ini harus ada pengecekan apakah sudah terdaftar atau belum, (2) proteksi dan pemisahan data customer (3) system untuk login dan menyimpan detail yang sudah login, (4) system untuk menambahkan item ke dalam keranjang yang sudah login, (5) menghapus pesanan barang yang tidak jadi, (6) melakukan cekout atau kalkulasi semua biaya pesanan+ongkos kirimnya (kita dapat asumsikan ongkos kirim menurut dareah kota tujuan dan berat total barang). Karena mekanisme pembayaran adalah transfer maka pada langkah ini harus jelas Total Keseluruhan yang harus dibayar , (7) Info Nama dan Nomor Rekening Bank tujuan, serta pesan bahwa setelah melakukan pembayaran harus login lagi ke toko online dan melakukan konfirmasi pembayaran agar segera diproses (3.1), berarti di bagian backend perlu ditambah (8) form edit info transfer, norekening, nama,bank, alamat toko, email CS, pesan setelah cekout.

2.Pengecekan Pesanan Bila ada pemesanan barang berarti tugas CS ataupun pemilik toko harus mengecek apakah barangnya ready stok (misalkan katalog ready stok salah, tertera ready stok padahal habis), maka perlu dikonfirmasikan lagi ke pembeli bahwa barang yang dipesan habis. Tetapi mekanisme yang dilakukan pada beberapa toko online asumsinya biasanya semua barang yang tertera ready adalah harus benar ready atau bagaimanapun bila ada pesanan barang, maka barang harus tersedia, jadi yang diperlukan oleh pengelola toko adalah selalu mengecek persediaan dan mengupdate informasi barang apakah ready stok ataukah ident. Bila barang ident, maka setelah klausa pembayaran barang dipesankan atau dicarikan ke vendornya. Jadi step pengecekan barang ini bias dibypass , jadi dilakukan di sisi backend pengecekan berkala. Kita akan menganggap CS akan merespon ketika ada konfirmasi transaksi pembayaran saja.

3.Transfer pembayaran. Pembayaran pada toko online dilakukan dengan transfer, karena kita tidak bisa menghubungkan langsung system pembelian online dengan gateway informasi ATM maka diperlukan (1) system 10

konfirmasi pembayaran & pesanan barang agar segera diproses. 4.Penyiapan barang & Pengiriman barang Proses penyiapan dan pengiriman barang pada toko online biasanya dijadikan 1 proses dengan output utama adalah (1) notifikasi kepada customer bahwa barang telah dikirim dan kira-kira akan sampai pada tanggal berapa. 5.Barang Diterima konsumen Bila Barang sudah diterima konsumen maka berarti proses selesai, tetapi lain halnya bila barang belum diterima, maka berarti konsumen perlu mengkonfirmasi kepada penjual bahwa barang belum diterima, atau barang yang diterima tidak sesuai spesifikasi, ataupun customer mau memberikan testimony, berarti kita perlu membuat (1) input form untuk complain masalah (a)pengiriman dan (b)komplain barang yang diterima maupun (c) testimony.

#Resume Proses dan Form yang perlu dibuat : Dari bahasan diatas, maka dapat diketahui halaman/form inputan dan proses yang harus dibuat yaitu: No 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Kode 1a. (1) 1a. (2) 1a. (3) 1a. (4) 1a. (5) 1a. (6) 1b. (1) 1b. (2) 1b. (3) 1b. (4) 1b. (5) 1b. (6) 1b. (7) 1b. (8) 3. (1) 4. (1) 5. (1) Form/Proses Proteksi backend Login admin form backend penambahan item barang form backend pengeditan harga dan detail form backend penghapusan item yang sudah tidak dijual form backend view untuk mendisplay barang yang dijual form pendaftaran member proteksi dan pemisahan data customer system untuk login dan menyimpan detail yang sudah login system untuk menambahkan item ke dalam keranjang yang sudah login menghapus pesanan barang yang tidak jadi proses cekout dan kalkulasi semua biaya pesanan+ongkos kirimnya View Info Nama dan Nomor Rekening Bank tujuan, pesan setelah cekout form edit info transfer, norekening, nama,bank, alamat toko, email CS, pesan setelah cekout. system konfirmasi pembayaran & pesanan barang agar segera diproses. notifikasi kepada customer bahwa barang telah dikirim dan perkiraan akan sampai pada tanggal berapa. input form untuk complain masalah (a)pengiriman dan (b)komplain barang yang diterima maupun (c) testimony. Jenis Form Session cek Input/query Insert Update Delete View Insert Session cek Input/query Insert Delete Insert View Update Insert Input,Query,output email Input

11

Selanjutnya adalah sesi praktek langsung Silahkan mencatat , melihat dan mendengarkan dengan baik : )

12

#Setup Server Xampp extract file: software.zip dan extract file: xampp-win32-1.7.7-VC9.zip yang ada didalamnya, Cut folder xampp dan paste ke D:

13

#Jalankan Xampp-control.exe dan run (apache dan mysql)

14

#Merancang Database Toko Online Dengan Microolap Buka MikroOlap dan Klik New Diagram

Kasih Nama Database: tokoonline

Simpan diagram, beri nama: tokoonline.mdd

15

Pilih Diagram Properties, set database option table type: innodb

Set default table : innodb dan default datatype: varchar

16

-Klik Table dan Drop Ke Diagram Area

Table Drop/Klik di area

Klik Tanda Panah dan Klik Tabel 2x sampai muncul properties, dan kemudian diberi nama: barang

1.Klik tanda Panah 2.Klik 2x pada table sampai muncul properties

Name: barang, Type: InnoDB

17

Add Field dan Beri Nama Field, Sesuaikan Typenya, Seperti Contoh Dibawah Ini: #Desain Database TOko Online:

Catatan, untuk auto increment (key otomatis) Untuk Table : #detail_pesanan, idedetail = int, primary key, auto_increment #pesanan_barang, idpesanan = int, primary key, auto increment . #konsumen, kode_konsumen= int, primary key, auto increment.

18

#Buat Relasi Database menggunakan Tool reference

#arahkan relasi dari table anak ke table induk, misal dari table anak dulu (pesanan _barang) dan table induknya adalah : konsumen

19

Klik Tanda Panah lagi, dan 2x pada relasi dan beri nama relasi: pesanan_konsumen

Klik pada tab (integrity), cek pilihan update Cascade dan delete restrict

20

#Buat Reference yang lain dan semua table sampai terbentuk relasi seperti berikut:

#Selanjutnya Generate SQL, Klik Menu Database -> Generate Database

21

Simpan File ke file/folder: D:\xampp\htdocs\toko\tokoonline.sql (terlebih dulu buat folder D:\xampp\htdocs\toko ), cek create database dan drop database Kemudian Klik : Generate Script

Klik Execute SQL

22

Jika database sudah server xampp sudah running maka database akan dibuat otomatis #Buka Browser Firefox dan ketik http://localhost/phpmyadmin ,harusnya database tokoonline sudah muncul:

#Buka Browser Firefox dan ketik http://localhost/toko Harusnya muncul seperti dibawah ini, bila belum maka berarti folder d:\xampp\htdocs\toko Belum dibuat!

23

24

#Membuat Layout Menggunakan Dreamweaver 8 -Buka Dreamweaver 8: klik 2x file : mcd-portable8.exe

-Tunggu Sampai Dreamweaver 8 Selesai Di load

kemudian klik menu : Site->New Site (bila belum ada) atau manage site (bila sudah ada)

25

26

27

28

Pastikan Pengisian Nama Folder tidak salah (keliru) !

29

30

31

Next dan perhatikan info summary harus seperti ini:

Kemudian klik done

32

Pilih Dynamic page, PHP, klik create

33

Ketik: isian dengan dalaman depan toko, kemudian simpan di folder D:\xampp\htdocs\toko dengan nama :

index.php

34

Buka Firefox dan ketik alamat: http://localhost/toko , atau http://127.0.0.1/toko

Kemudian buka lagi dreamweaver dan buat Koneksi ke myql (pada application / bagian kanan )

Isikan Nama Koneksi : lokal1, server: localhost , username: root

35

Select (database), pilih tokoonline

BIla sudah klik Ok, dan OK lagi. Jika sudah terkoneksi dengan benar seharusnya muncul : Listtable disebelah kanan:

Kita tutup file: index.php dan buat File ->New ->Dynamic page->PHP (seperti diatas) untuk halaman admin. Simpan di d:\xampp\htdocs\toko\admin\index.php (buat folder admin, bila belum ada! ) Isikan teks missal: ini halaman admin, dan simpan sebagai file: index.php (pada folder admin tsb)

36

#Buka Lagi Firefox dan ketik http://localhost/toko/admin , harusnya muncul seperti berikut:

37

#Membuat Binding Recorset , Klik tab Binding dan Klik tanda +, pilih recordset query

Isikan dan Pilih Seperti dibawah ini dan tekan OK

Harus nya muncul di kanan seperti berikut:

38

Klik Record Insertion Wizaard: (Bila belum muncul record insertion wizard pada tab dropdown perlu dipilih ke application Pilih application

39

Isikan Detail Seperti dibawah ini dan klik OK

40

#hasilnya Harus seperti dibawah ini:

Properties tombol bisa diganti dengan yang user friendly missal: SIMPAN

41

#Membuat Record View (List)

Pilih Recorset: barang1 dan tekan OK

Harusnya muncul seperti berikut ini:

Kemudian Simpan: FileSave All

42

#Buka Firefox dan ketikan: http://localhost/toko/admin

#Silahkan Coba Masukkan Kode,Barang,Nama,Stok dan Harga, harusnya Hasil akan muncul dibawahnya, seperti berikut ini:

43

44

#SQL Database Toko Online: (lampiran 1) -- ============================================================================= -- Diagram Name: tokoonline -- Created on: 02/10/2012 11:06:37 -- Diagram Version: -- =============================================================================

CREATE DATABASE IF NOT EXISTS `tokoonline`; USE `tokoonline`; SET FOREIGN_KEY_CHECKS=0; CREATE TABLE `admin` ( `loginid` varchar(50) NOT NULL, `password` varchar(50), `nama_admin` varchar(50), PRIMARY KEY(`loginid`) ) ENGINE=INNODB; CREATE TABLE `konsumen` ( `kode_konsumen` int(11) NOT NULL AUTO_INCREMENT, `nama_konsumen` varchar(50), `alamat_kirim` text, `nomor_hp` varchar(50), `email` varchar(100), `password` varchar(50), PRIMARY KEY(`kode_konsumen`) ) ENGINE=INNODB; CREATE TABLE `barang` ( `kode_barang` varchar(10) NOT NULL, `nama_ barang` varchar(50), `stok` int(11), `harga` int(11), PRIMARY KEY(`kode_barang`) ) ENGINE=INNODB; CREATE TABLE `pesanan_barang` ( `idpesanan` int(11) NOT NULL AUTO_INCREMENT, `tanggal_pemesanan` datetime, `kode_konsumen` int(11) NOT NULL DEFAULT '0', PRIMARY KEY(`idpesanan`), 45

CONSTRAINT `pesanan_konsumen` FOREIGN KEY (`kode_konsumen`) REFERENCES `konsumen`(`kode_konsumen`) ON DELETE RESTRICT ON UPDATE CASCADE ) ENGINE=INNODB; CREATE TABLE `detail_pesanan` ( `iddetail` int(11) NOT NULL AUTO_INCREMENT, `idpesanan` int(11) NOT NULL DEFAULT '0', `kode_barang` varchar(10) NOT NULL, `jumlah_pesanan` int(11), PRIMARY KEY(`iddetail`), CONSTRAINT `detailpesanan` FOREIGN KEY (`idpesanan`) REFERENCES `pesanan_barang`(`idpesanan`) ON DELETE RESTRICT ON UPDATE CASCADE, CONSTRAINT `barangdipesan` FOREIGN KEY (`kode_barang`) REFERENCES `barang`(`kode_barang`) ON DELETE RESTRICT ON UPDATE CASCADE ) ENGINE=INNODB; SET FOREIGN_KEY_CHECKS=1;

46