Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

download Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

of 90

  • date post

    14-Apr-2018
  • Category

    Documents

  • view

    212
  • download

    0

Embed Size (px)

Transcript of Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    1/90

    0

    WEBSITE TOKO ONLINE TRADINGCARDGAME.COM

    Oleh:

    ADI GUNA SODIKIN

    4311010017

    SERVER SIDE PROGRAMMING

    TEKNIK INFORMATIKA

    TEKNIK ELEKTRO

    POLITEKNIK NEGERI JAKARTA

    2013

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    2/90

    1

    Daftar Isi

    Daftar Isi ............................................................................................................. 1

    Overview System ................................................................................................ 2

    Perancangan ........................................................................................................ 3

    Tampilan User Interface ...................................................................................... 8

    Program ............................................................................................................... 13

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    3/90

    2

    Overview

    Sistem ini dimulai saat client masuk kedalam web, setelah itu user tanpa log in dapatmelihat-lihat katalog yang tersedia dan proses output ketika data katalog dimunculkan ,aplikasi web mengambil data yang berada di dalam database dan hasilnya akan di tampilkandata yang berupa gambar, harga dan keterangan barang. user memilih log in jika sudahmemiliki akun dan bisa memilih sign up jika belum menjadi anggota, jika sign up maka userharus memasukkan data yang diminta pada kolom-kolom yang disediakan. setelah itu, sistemmengolah data dan menyimpan di database dan mengirim konfirmasi ke halaman admin lalu

    jika admin telah approve, maka client dapat log in. jika log in maka data user dan paswordakan di cek melalui database, jika sama akan dapat masuk dan jika tidak sama, diminta untuk

    mengulang kembali. Setelah itu client/anggota dapat melihat-lihat katalog yang tersedia danproses output ketika data katalog dimunculkan dengan cara aplikasi web mengambil datayang berada di dalam database dan hasilnya akan di tampilkan data yang berupa gambar,harga dan keterangan barang. dan jika berminat, buyer hanya tinggal klik Add To Cart padabarang yang diinginkan untuk dimasukkan kekeranjang. Dan ketika ingin benar-benarmembeli, user dapat Klik checkout untuk melihat total yang harus dibayar ke rekening yangtelah tersedia, dan ketika sudah mengirim ke rekening tersebut, buyer dapat chat kepadaAdmin untuk konfirmasi bahwa uang telah dikirim dan admin telah menerima. Lalu ketikasudah selesai, barang yang ada di shopping cart akan hilang dan masuk kedalam historypembelian member. Dan stok pada catalog akan berkurang sesuai dengan item yang telahdibeli oleh buyer. Setelah itu barang akan dikirim oleh seller.

    Pada website ini memiliki halaman admin, dan admin diwajibkan login terlebih dahuludihalaman depan admin terdapat notifikasi member baru dan pembeli baru yang butuhkonfirmasi dalam pembayaran ataupun member yang ingin bergabung, admin juga bisamenghapus data member, admin juga bisa menggunakan fasilitas search, pada halamanadmin juga menampilkan banyak data dengan menggunakan pages number yang bergunauntuk menampilkan beberapa data saja pada satu halaman.

    Pada website ini menggunakan satu database yang memiliki lima table, pertama table

    admin yang menyimpan username, email dan password admin, kedua adalah table data yangmenyimpan data member, ketiga adalah tabel data yang menyimpan data catalog, keempatadalah tabel data yang menyimpan history dari pembelian semua member, serta tableshoutbox yang menyimpan data fitur chat dalam website halaman admin dan member yangtelah melakukan login.

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    4/90

    3

    Perancangan Sistem

    Activity Diagram Admin

    Use Case Diagram

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    5/90

    4

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    6/90

    5

    Activity Diagram Member

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    7/90

    6

    Deployment Diagram

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    8/90

    7

    Schema database Diagram

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    9/90

    8

    ScreenShot User Interface

    Catalog member

    Input Data

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    10/90

    9

    View Member

    Index Admin

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    11/90

    10

    Shopping Cart

    Catalog Member

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    12/90

    11

    Index Member

    Index Login

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    13/90

    12

    Contact Us

    How To Buy

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    14/90

    13

    Catalog Non Member

    Index Non Member

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    15/90

    14

    Script Program PHP

    Css/index.css

    body { padding :0; margin :0;

    }

    . header {

    margin :0; padding :0;

    height :55px; width :100%; background-color :#000000; position :fixed;

    z-index :104; }

    . menui li { float :left; display : block; }

    . logo { vertical-align : top; float :left;

    }

    #cari {}

    #fieldset {}

    # m { padding-left :30px;

    }

    . menui li a { text-decoration :none; display : block; text-transform : uppercase; text-shadow : 0px 0px 2px #ffffff; color : #ffffff;

    margin : 3px; padding-left :30px;

    letter-spacing : 1px; -webkit-transition : all 0.2s linear; -moz-transition : all 0.2s linear; -o-transition : all 0.2s linear; -ms-transition : all 0.2s linear; transition : all 0.2s linear; }

    . menui : hover li a { text-decoration :none; text-shadow : 0px 0px 3px #ffffff; color : transparent;

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    16/90

    15

    } . menui li a : hover {

    text-decoration :none; color :#fff; text-shadow : 0px 0px 2px #ffffff;

    }

    . login li { float :right; display : block; }

    . login li a { text-decoration :none; text-transform : uppercase; text-shadow : 0px 0px 2px #ffffff; color : #ffffff;

    padding-right : 30px; margin : 3px;

    -webkit-transition : all 0.2s linear; -moz-transition : all 0.2s linear; -o-transition : all 0.2s linear; -ms-transition : all 0.2s linear; transition : all 0.2s linear;

    }

    . login : hover li a { text-decoration :none; text-shadow : 0px 0px 3px #ffffff; color : transparent;

    } . login li a : hover {

    text-decoration :none; color :#fff; text-shadow : 0px 0px 2px #ffffff;

    }

    . footer { font-size :16px;

    padding-top :10px; position :fixed;

    left :0; bottom :0; width :100%;

    height :30px; display :block;

    background :rgba(0,0,0,0.9); color :white;

    }

    . footerRight { font-size :16px;

    padding-top :10px; position :fixed;

    left :1220px; bottom :0; width :100%;

    height :30px; display :block; color :white;

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    17/90

    16

    }

    . left { float :left; height :745px;

    padding-top :100px;

    width :25%; background-attachment : fixed; }

    . center { opacity :0.9; float :left; height :auto;

    padding-top :50px; width :50%;

    }

    . isi {

    padding :100px 60px 80px 80px; height :auto; }

    . isi1 { padding :100px 60px 80px 10px;

    height :auto; }

    . right { float :right; height :745px;

    padding-top :100px;

    width :25%; background-attachment : fixed; }

    #slides { position :absolute; width :882px;

    height :307.2px; z-index :100;

    }

    . slides_container { margin-top :10px; width :670px;

    height :307.2px; overflow :hidden;

    position :absolute; left : 100px;

    }

    . slides_container div . slide { width :670px;

    height :307.2px; padding-right :60px; padding-top :3px;

    display :block; }

  • 7/28/2019 Project UAS AdiGunaSodikin 4311010017 IT4A Server Side Programming

    18/90

    17

    /*Next/prev buttons

    */

    #slides . prev { position :absolute;

    top : 130px; left : 76px; right :90px;

    width :0px; height :47px; display :block; z-index :101;

    }

    #slides . next { position :absolute;

    top : 130px; right : 112px;

    width :0px; height :47px; display :block; z-index :101;

    } . pagination {

    margin :26px auto 0; width :100px;

    }

    . pagination li { float :left;

    margin :0 1px;

    list-style :none; }

    . pagination li a { display :block;

    width :12px; height :0;

    padding-top :12px; background-image :url(img/pagination.png); background-position :0 0;

    float :left; overflow :hidden;

    }

    . pagination li. current a { background-position :0 -12px;

    }

    # product_show