Step2-Panduan Training Web Programer Pemula-234september2012_0

  • View
    61

  • Download
    7

Embed Size (px)

DESCRIPTION

panduan membuat website

Text of Step2-Panduan Training Web Programer Pemula-234september2012_0

  • Panduan Web Programing untuk Pemula Oleh: Imam Ferianto

  • 1

    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

  • 2

    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.

  • 3

    Berikut gambaran umum tentang bagaimana aplikasi web itu harus dibangun

    Desain Grafis,CSS

    HTML

    Client Browser

    Javascript,VBScript

    Flash/Multimedia

    Active X

    Applet

    Server Web

    (apache,IIS,tomcat)

    PHP

    ASP/.Net

    Perl

    Ruby/TCL

    Scri

    pti

    ng

    Engi

    ne

    Java

    Coldfusion/CFM

    File

    I/O

    Database Server

    Input/Output File

    External Database Server

  • 4

    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 Flowchart DFD UML

    Gambaran Sistem -System Flowchart DFD Level 0 (contect) Use Case

    Proses Global -Conceptual Flowchart DFD Level 1 Class Diagram

    Proses Detail -Detail Flowchart DFD level 2 Sequence Diagram

    Collaboration Diagram

    Activity Diagram

  • 5

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

  • 6

    Gambaran Proses Toko Online Secara Sederhana

    5.Penyiapan barang dari

    gudang/order dari pabrik

    Website

    Konsumen

    CS

    Barang Expedisi

    Bank

    1.memesan

    2.Pengecekan

    Pesanan

    4.Pengecekan

    Pembayaran

    (constraint)

    6.Pengiriman

    Barang

    7.Barang Diterima

    Konsumen

    (proses selesai)

    3.pembayaran

    (transfer)

  • 7

    #Gambaran Dalam Bentuk DFD diagram contect

  • 8

    #Use Case Toko Online :

  • 9

    #Sequence Diagram

  • 10

    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

  • 11

    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 di