belajar aplikasi multiuser
DESCRIPTION
belajar membuat sistem informasi berbasis web, dimana banyak user yang akan menggunakannya.TRANSCRIPT
1
Belajar aplikasi
jaringan multiuser
Tutorial
2015
2
Membuat Database Membuat Database dan Tabel pada PHPMyAdmin
Pada praktek kali ini, kita menggunakan aplikasi WampServer. Berikut langkah-langkah praktek :
1. Aktifkan WampServer. Klik simbol wamp pada TaskBar sebelah kanan. Lalu pilih
phpMyAdmin.
2. Maka akan terbuka halaman localhost-phpMyAdmin seperti pada gambar di bawah ini.
Selanjutnya buat database baru pada kolom localhost yang ada tulisan “Ciptakan database
baru”.
3. Masukkan nama database, misalnya dengan nama “inventory” lalu klik “Ciptakan”
4. Setelah database berhasil dibuat, selanjutnya buat tabel baru pada kolom”Ciptakan tabel
baru pada database”
3
5. Masukkan nama tabel, misalnya tabel “barang”. Lalu masukkan jumlah kolom yang
diperlukan. Misalnya : 5 field
6. Isikan nama-nama field serta tipe datanya dan ukuran. Misalnya kita isi dengan
“kodebarang(varchar50), namabarang(varchar50), satuan(varchar50, jumlah(int),
harga(double). Dan atur kodebarang sebagai “Primary key”. Setelah itu klik “simpan”.
7. Selanjutnya tampil tabel yang kita buat dalam bentuk kode dan kolom.
8. Pada menuBar, pilih “sisipkan”, maka akan muncul halaman seperti pada gambar di bawah
ini, selanjutnya isikan data sesuai dengan struktur yang telah ada.
4
9. Setelah itu, akan muncul hasil dari yang kita buat di table dalam bentuk kode-kode.
10. Untuk membackup hasil kerja berupa tabel pada database, maka klik Export, maka akan
muncul tampilan berikut ini yang berisi format yang akan didownload. Jika kita ingin
memdownload strukturnya saja maka beri ceklis pada struktur. Dan jika kita ingin
mendownload keduanya maka beri ceklis pada keduanya.
11. Klik save saat muncul kotak dialog berikut.
12. Pilih lokasi penyimpanan hasil backup file.
5
13. Buka data yang disimpan dengan menggunakan NotePad. Maka data sql tersebut akan
tampil. Itu tanda bahwa file berhasil didownload.
14. Untuk membuktikannya, coba hapus tabel yang ada pada database.
15. Setelah dihapus, untuk mengembalikan lagi (restore), klik menu import, lalu klik Browse
16. Maka akan muncul Windows Explorer yaitu tempat kita menyimpan file backup tabel
database. Lalu pilih file yang sebelumnya didownload terdiri dari Struktur dan Data.
6
17. Setelah itu klik GO
18. Maka tabel yang telah dihapus tadi akan kembali lagi beserta datanya seperti semula karena
sudah di import.
19. Jika kita ingin membuat tabel dengan cara mengetikkan kode sql, dapat dilakukan dengan
cara pilih menu SQL, lalu masukkan kode sql untuk membuat tabel pada kotak seperti yang
7
terlihat pada gambar di bawah ini. Lalu klik GO.
20. Lalu jika ingin hanya menampilkan beberapa field, misallnya hanya menapilkan namabarang
dan harga, pilih menu cari, lalu pilih field yang diinginkan pada pilihan field. Lalu klik GO.
21. Maka akan muncul isi data tabel dengan 2 field tertentu saja.
Installasi yii Langkah-langkah untuk menginstall YII
8
1. Copykan folder software YII ke data C:\wamp\www
2. Buka aplikasi NetBeans, pilih tools => potions
9
3. Pilih menu PHP, lalu klik “Activate”
4. Klik Browse
10
5. Pilih file C:\wamp\php\php5.2.5\php.exe. lalu klik open. Ini tujuannya adalah supaya
netbeansnya kenal dengan phpnya.
6. Setelah itu klik OK
11
7. Buka Command Prompt. Lalu ketik “cd c:\wamp\www\yii\framework” untuk masuk ke
direktory YII
8. Untuk mengkoneksi YII ke PHP lakukan proses berikut :
9. Buka Properties pada Computer, pilih Advanced, pilih “Environment variables.
10. Kkemudian cari PATH pada System variables, jika ketemu klik edit.
12
11. Tambahkan tanda titik koma ( ; ) pada akhir tulisan variable value lalu pastekan lokasi YII
dalam komputer. Yaitu c:\wamp\www\bin\php\php5.2.5. lalu klik OK
12. Beralih ke Command Prompt. Ketik “yiic webapp c :\wamp\www\yii”. Gunanya untuk
mengaktifkan Yii. Nanti akan muncul pertanyaan. Ketik yes untuk konfirmasi bahwa kita akan
membuat sebuah web applikasi didalamnya.
13. Berikut tanggapan komputer saat prosesnya selesai dan berhasil.
13
14. Jika sudah aktif, maka akan tampil pada localhost/yii tampilan berikut.
Aplikasi dasar yii 1. Sediakan sebuah plugins untuk YII, simpan saja di dalam folder anda.
2. Buka aplikai NetBeans, klik Tools > Plugins
14
3. Pilih tab Downloaded, dan klik “Add Plugins”
4. cari dan pilih softeware untuk plugins pada folder data anda. Klik open.
5. saat ini NetBeans mempunyai 1 plugins yang sudah diinstall, klik “Install”
6. Klik next
15
7. Beri ceklis pada kotak “I accept the terms...”. lalu klik Install
8. Klik continue
9. Jika proses installation successfully, klik finish
16
10. Tutup kotak dialog plugins dengan mengklik close
11. Pada netbeans, klik New Project, pilih kategori PHP, project PHP Application, lalu klik next
12. Pada halaman berikutnya buat nama project dengan “inventory” dan klik browse, pilih folder
inventory yang sudah dibuat sebelumnya menggunakan command prompt yang terletak di
C:\wamp\www\inventory .
17
13. Memilih folder tersebut gunanya agar pada saat membuat isi project, datanya akan
tersimpan di dalam folder inventory tersebut. Jika sudah maka klik next.
14. Klik next
18
15. Tidak perlu diberi ceklis pada kotak, lanjut saja mengklik finish.
16. Project selesai dibuat, yaitu project inventory dengan plugin php, terlihat pada gambar
17. Pada Source Files, pilih package protected, cari package conntroller, klik kanan pada package
controler. Pilih new php file
18. Buat nama file “HelloController”
19
19. Terlihat pada gambar, pada package controller terdapat file php bernama HelloController
20. Ketik kode php berikut untuk membuat tampilan text pada localhost
21. Jika selesai mengetik kode, buka browser localhost, browsing dengan mengetikkan
“localhost/inventory/index.php?r=hello” tekan enter. Maka text pada kode netbeans akan
tampil pada halaman localhost, seperti gambar di bawah ini.
20
22. Pada package protected, cari package views, klik kanan pada views, pilih new php file
23. Buat nama file “hellov” klik finish
24. Ini hasinya, pada package views terdapat file hellov
25. Coba cek di folder c:\wamp\www\inventory\protected\views buat folder Hello, lalu
masukkan file hellov kedalam folder Hello tersebut.
21
26. Sehinggan hasilnya seperti ini. File hellov terletak di dalam folder Hello.
27. Pada netBeans juga berubah, pada package views, terdapat folder Hello dan di dalamnya
terdapat file hellov
28. Ketikkan kode berikut pada file php hellov.
29. Lalu buka halaman localhost, ketikkan pada tab browsing,
“localhost/inventory/index.php?r=hello/hellov” tekan enter, maka pesan text pada kode
22
netBeans ditampilkan pada halaman localhost seperti yang terlihat pada gambaar.
30. Pada file HelloController, tambahkan kode untuk fungsi hellov2
31. Lalu pada package views\hello, buat new file php bernama hellov2
32. Pada folder hello terdapat file hellov dan hellov2
33. Ketikkan kode berikut pada file hellov2
23
34. Lalu buka halaman localhost, ketik pada tab browsing,
“localhost/inventory/index.php?r=hello/hellov2” tekan enter. Dan hasilnya akan ditampilkan
pada halaman localhost seperti yang terlihat pada gambar berikut.
35. Praktek selesai.
Aritmatika dan chtml Langkah-langkah praktek kali ini adalah
1. Sebelumnya install yii dan Plugin
2. Klik kanan pada Controller, pilih new > php file untuk membuat sebuah file baru
24
3. Isikan namanya AritmatikaController , klik finish
4. Pada folder Controllers terdapat file php yaitu AritmatikaController
5. Ketikan coding berikut pada file AritmatikaController
6. Lihat hasilnya di localhost dengan mencari alamat
“localhost/inventory/index.php?r=aritmatikaContoller”
7. Ketikkan coding untukkurang,bagi, kali dll
25
8. Run hasilnya di localhost
9. Klik kanan pada Controller, pilih new > php file
10. Beri nama LinkController
11. Hasilnya terlihat pada gambar berikut
26
12. Ketikkan coding berikut di file LinkController
13. Buat php file baru di folder view,
14. Beri nama index
15. Berikut isinya
27
16. Ketik codenya di file index
17. Buat folder baru pada folder view
18. Beri nama link
19. Hasilnya seperti berikut
28
Cut file index.php ke dalam folder link
20. Dalam folder link, buat new php file
21. Beri nama toko
22. Ketik coding berikut pada file toko.php
23. Ketikkan/rubah coding berikut pada file index.php
29
24. Run pada localhost “localhost/inventory/index.php?r=link
25. Coba klik “Toko ku” maka akan muncul halaman baru yang berisikan halaman toko seperti
gambar berikut
26. Jika kita ingin memasukkan gambar, copykan sebuah gambar ke dalam folder images yang
berada di dalam inventory “C:\www\inventory\image”
27. Berikut hasilnya
28. Tambahkan coding pada file toko.php
29. Run pada localhost, berikut hasilnya
30
30. Praktek selesai
Yii dan create
Langkah-langkah praktek kali ini adalah :
1. Langkah awal, buat sebuah database bernama “inventory” .
2. Lalu buat tabel “Barang” yang berisi “kodebarang, namabarang, satuan, jumlah dan harga”.
Sehingga hasilnya seperti gambar berikut ini :
3. Buka aplikasi NetBeans, buka project yang sebelumnya sudah pernah dibuat, yaitu project
“inventory”.
4. Buka folder protected > config > main.php
31
5. Lihat pada program baris ke 55 – 61
6. Tukar nama databasenya dengan nama database yang sudah dibuat. Yaitu “inventory”. Lalu
klik save. Hal ini bertujuan untuk mengkoneksikannya ke Database.
7. Cari folder “models”, lalu klik kanan, pilih new > php file
32
8. Beri nama file dengan “barang”. Ini sesuai dengan nama tabel pada database inventory.
9. Ketik program berikut pada file barang.php
10. Klik kanan pada folder controller, pilih new > php file
33
11. Beri nama file dengan BarangController.php
12. Ketik program berikut pada file BarangController.php
13. Klik kanan pada folder views, pilih new > folder
34
14. Beri nama folder dengan barang
15. Pada folder barang tersebut, klik kanan kemudian pilih new > php file
16. Beri nama file dengan create
17. Ketik program berikut pada file create.php
35
18. Lalu lakukan test menggunakan localhost.
19. Buka localhost, lalu ketik http://localhost/inventory/index.php?r=barang/create pada tab
address
20. Maka akan muncul halaman seperti gambar berikut ini. Yaitu halaman untuk menginputkan
data tabel barang.
21. Isikan data yang diperlukan seperti yang terlihat pada gambar di bawah ini. Lalu klik submit.
36
22. Masukkan beberapa data. Dan untuk melihat hasil dari input data, bisa dilihat pada
phpMyAdmin, yaitu database inventory.
23. Klik browse pada tabel barang. Maka akan muncul data tabel yang sudah diinputkan pada
localhost sebelumnya.
24. Simpan project NetBeans dan database.
25. Praktek selesai. Alhamdulillah.
Yii dengan read Berikut langkah-langkah praktek :
1. Buka netBeans serta aplikasi lain seperti pada praktek-praktek sebelumnya
2. Buka file BarangController.php, ketik program berikut
3. Pada folder Views > folder barang, klik kanan new > php file
37
4. Beri nama index.php
5. Berikut hasilnya
6. Ketik program berikut pada file index.php
38
7. Buka database di phpMyAdmin, klik “menganalisa struktur tabel”
8. Maka akan muncul tampilan berikut, beri nama field “id” INT. lihat terus ke tampilan kanan
39
9. Pada kolom “Ekstra” Ubah menjadi “auto_increment”. Klik Primary Key untuk
menjadikannya Primary. Auto_increment berfungsi untuk mengatur database secara
otomatis. Lalu klik simpan.
10. Maka database tersebut secara otomatis bertambah field “id” yang merupakan primary key
pada tabel barang.
11. Lihat isi tabel, id diurutkan mulai dari nomor 1.
40
12. Buka browser, “localhost/inventory/index.php?r=barang/create” . inputkan data lalu submit.
13. Search “localhost/inventory/index.php?r=barang/index” untuk melihat tampilan isi tabel
yang sudah diinputkan.
14. Praktek selesai.
Yii dengan update dan delete
Berikut langkah-langkah praktek :
1. Untuk langkah awal sama dengan langkah pada praktek sebelumnya, yaitu aktifkan YII dan
buka netbeans dan install pluginnya.
2. Buka program barang.php yang ada pada folder models.
41
3. Perbaiki program pada baris ke 3 yaitu pada $className=__CLASS__. Ketik 2x untuk tanda
( _ ). Agar program yang dijalankan bisa berhasil di localhost.
4. Lalu buka program BarangController.php. kemudian tambahkan program untuk fungsi
Update dan Delete.
42
5. Setelah itu, buka folder views pada folder barang klik new > php file.
6. Buat nama update.php
7. Sehingga di dalam folder barang terdapat file update.php
43
8. Ketik program berikut pada file update.php
9. Untuk melakukan test update dan delete, buka browser
localhost\inventory\index.php?r=barang , maka akan mucul tampilan data tabel barang yang
sudah tersimpan sebelumnya. Lalu untuk mengetest fungsi Update maka klik button/tulisan
Update.
10. Maka akan muncul seperti tampilan input data, namun sudah ada isi tabel yang akan diedit.
Lakukan perubahan data, misalnya kita ubah jumlahnya dari 2 menjadi 3. Lalu klik button
Update.
44
11. Maka ketika kita lihat tampilan tabel barang pada localhost, maka data yang sebelumnya
sudah berubah sesuai dengan apa yang diubah saat melakukan Update data.
12. Coba buka database pada phpMyAdmin, lihat pada isi tabel barang, maka data yang
sebelumnya sudah diUpdate sesuai dengan data pada tampilan localhost.
13. Praktek selesai, Alhamdulillah.
G i i
Berikut langkah-langkah praktek :
1. Aktifkan yii dan inventory
2. Buat tabel peserta
45
3. Source file > protected > config > main > Hapus baris ke 23 dan baris ke 30
4. Ganti password menjadi :”123456”
5. Hasil
6. Klik modelgenerator >kalau tidak tampil berarti databasebelum konnek > tampilan dibawah
ini yang benar karena database sudah konek
46
7. Isiskan namatabelpada komolm tablename >klik preview > klik generate
8. Klik crud >isikan nama tabel “peserta” >klik preview
9. Hasil > klik generate
47
10. Klik “try it now”
11. Klik create peserta
12. Maka akan tampil lembar kerja berikut :
13. Masukkan password dan user name
48
14. login
15. isikan datanya
16. klik create
17. Hasil
18. Klik list peserta
19. Klik manage jika ingin mengedit isi tabel
49
20. Praktek selesai.
relational
Berikut langkah-langkah praktek :
1. Aktifkan YII, lalu buka Netbeans, buka project inventory, kemudian import database ke
phpMyAdmin
2. Buat tabel baru pada database, yaitu tabel “dataabsensi”, tabel “kelas”
3. Lalu akses “localhost/inventory/index.php?r=gii/model/index”, maka akan muncul
tampilanberikut, yaitu halaman “Model Generator”
4. Masukkan nama tabel “dataabsensi”, lalu klik “Preview”
50
5. Klik generate > sukses
6. Klik CRUD Generator, masukkan nama tabel dari Model Class, lalu klik “Preview”
7. Klik “Generate”
8. Hasil dari generate sukses > klik “try it now”
9. Berikut tampilan tabel Dataabsensi, jika ingin menginputkan data, maka klik “Create
Dataabsensi”
51
10. Berikut tampilan halaman input dataabsensi, setelah diinputkan jika kita ingin menampilkan
datanya, maka klik “List Dataabsensi”
11. Jika selesai, lalu lakukan juga untuk tabel “kelas”, buka Model Generator, masukkan nama
tabel yaitu tabel “kelas”. Klik “preview”
12. Klik “ Generate”
52
13. Klik CRUD generator
14. Masukkan Model Class “Kelas” lalu klik preview
15. Klik Generate
53
16. Klik “Try it now”
17. Berikut tampilan halaman Web aplication untuk tabel “kelas” . klik Create Kelas untuk
menginputkan data tabel kelas
54
18. Lakukan seperti gambar di bawah ini
19. Berikut tampilan isi tabel kelas
20. 21. Buka netBeans, buka kelas Dataabsensi.php
55
22. Tambahkan kode berikut, sesuaikan dengan gambar di bawah
23.
24. 25. Praktek selesai.
U s e r s
Berikut langkah-langkah praktek :
1. Aktifkan YII, lalu buka Netbeans, buka project inventory, kemudian import database ke phpMyAdmin
56
2. Langkah selanjutnya adalah buka source package > views > dataabsensi > admin.php > pada baris ke 48 ketikkan coding seperti tampilan dib awahini :
3. Kemudian jalankan dataabsensi/admin pada browser > maka akan terlihat adanya combo
box pada manage dataabsensi seperti dibawah ini :
4. Langkah selanjutnya adalah, klik source package > protected >klik views >klik form.php
seperti dibawah ini :
57
5. Kemudian hapus baris ke 24 dan ketikkan coding dibawah ini :
6. Kemudian coba tes dengan membuka databsesni/create pada browser. 7. Lalu, tambahkan tabel users pada database dengan field-field dibawah ini :
8. Kemudian, klik tabel users >klik SQL >maka akan muncul lembar kerja SQL seperti dibawah
ini :
9. Setelah itu isikan coding untuk membuat users seperti dibawah ini :
58
10. Klik go untuk melakukan penyimpanan > kalau coding benar maka akan keluar tampilan dibawah ini :
11. Langkah selanjutnya adalah membuat CRUD untuk user yaitu dengan cara buka
index.php?=gii > maka akan keluar tampilan dibawah ini :
12. Lalu , klik Model Generator > maka akan keluar lembar kerja seperti dibawah ini :
59
13. Pada kolom tabel name isikan nama tabel yaitu Users seperti tampilan diatas > klik preview > maka akan muncul tanda sukses seperti tampilan dibawah ini :
14. Setelah itu , kembali ke menu awal > klik CRUD Generator > pada kolom tabel isikan nama
tabel yaitu Users seperti tampilan dibawah ini :
15. Lalu klik preview > kemudian akan muncul tampilan dibawah ini :
16. Pada kolom model class isikan nama tabel yaitu Users > klik preview maka akan muncul
tampilan dibawah ini : 17. Pada kolom model class isikan nama tabel lagi > klik generate > maka akan muncul
statement SUKSES
60
18. Untuk mengisi data pada tabel user klik try it now 19. Setelah itu, pada netbeans klik source package > klik protected > klik models > klik
users.php seperti tampilan dibawah ini :
20. Isikan coding dibawah ini :
21. Praktek selesai.
Aplikatif yii Berikut langkah-langkah praktek :
1. Aktifkan yii 2. Buka Source files > protected > Components > klik useridentity seperti tampilan dibawah ini :
61
3. Kemudian ketikkan coding dibawah ini pada baris ke 18
4. Setelah itu coba jalankan dibrowser dengan mengetikkan perintah
localhost/inventory/index.php?r=site/login maka akan keluar tampilan dibawah ini :
5. Pada tampilan diatas entrikan username dan password yang telah dibuatkan pada database
> klik login > maka akan keluar tampilan dibawah ini :
62
6. Misalkan ada field yang perlu ditambahkan pada tabel peserta yaitu field tgllahir maka tambahkan field padatabel tersebut seperti dibawah ini :
7. Setelah itu, isikan field dengan nama tgllahir seperti tampilan dibawah ini > klik simpan
8. Hasil setelah field baru ditambahkan
9. Selanjutnya pada netbeans hapus peserta yg ada pada model > hapus peserta yg ada pada
views > bual gii baru lagi dengan cara buka browser untuk gii > klik model generator > maka
63
akan muncul tampilan dibawah ini :
10. Pada kolom table name seperti tampilan diatas isikan nama tabel yang akan dibuatkan gii-
nya yaitu tabel peserta > lalu klik preview 11. Maka pembuatan model generator sukses
12. Setelah itu, klik CRUD Generator > preview
13. Klik “try it now”
64
14. Akan tampil form Create Peserta
15. Pada view > peserta > buka _form
16. Isikan coding pada baris ke 36, yaitu untuk merubah tampilan input jenis kelamin.
65
17. Jalankan form create peserta
18. Jalankan list peserta, maka tampilannya sebagai berikut
19. Praktek selesai.
Tema dan layout Berikut langkah-langkah praktek :
1. Aktifkan yii 2. Kemudian , klik source file > klik protected > klik views > klik peserta > double klik form
seperti tampilan dibawah ini :
66
3. Lalu isikan coding yang berfungsi untuk menampilkan kalender pada saat kita lakukan create peserta yaitu pada baris ke 43 seperti tampilan dibawah ini :
4. Lalu coba jalankan dengan memasukkan perintah :
localhost/inventory/index.php?r=peserta/create
5. Untuk memasukkan template pada tampilan gii kita, maka sediakan sebuah template >
copikan template ke C/wamp/www/inventory/theme seperti tampilan dibawah ini :
6. Maka kita bisa lihat di netbeans ketika kita sudah mengkopikan kedalam
c/wamp/www/inventory/theme otomatis langsung ada di netbeans kita masing-masing seperti tampilan dibawah ini :
67
7. Langkah selanjutnya adalah klik source file > klik protected > klik config > double klik main
seperti tampilan dibawah ini :
8. Kemudian ubah coding pada baris ke-10 yang berfungsi untuk menambahkan template pada
tampilan gii seperti tampilan dibawah ini :
9. Lalu coba jalankan dengan memasukkan perintah pada browser :
localhost/inventory/index.php?r=peserta 10. maka tampilan di browser akan seperti gambar di bawah ini.
11. praktek selesai.
68
R i g h t s
Berikut langkah-langkah praktek :
12. Aktifkan yii
13. Sediakan folder rights > copykan ke c:\wamp\www\inventory\protected > buat folder
didalam protected dengan nama modules seperti tampilan dibawah ini :
14. Kemudian, pastekan file tadi kedalam folder modules
15. Langkah selanjutnya adalah klik source file > klik protected > klik config > pilih dan klik main
seperti tampilan dibawah ini :
69
16. Lalu ketikkan coding dibawah ini :
70
17. Jika dihapus pada bagian gii ‘install’=>true atau bisa juga diganti true menjadi false maka
tampilannya akan seperti dibawah ini :
18. Langkah selanjutnya adalah Buat rule baru dengan cara klik tab Role >klik create new role
pada tampilan dibawah ini :
19. Maka akan muncul tampilandibawah ini dimana kita menuliskan nama role / user yang akan
dibuat misalnya kita membuat pegawai > klik save
71
20. Lalu beri assignment untuk role baru dengan cara klik pegawai >pada combo box assignment
pilih pegawai seperti tampilan dibawah ini :
21. Selain didalam rights, kita juga bisa membuat user barupa da yii dimana akan langsung
terdeteksi ke dalam rights yaitu dengan cara : buk
72
alocalhost/inventory/index.php?r=user/create maka akan muncul tampilan dibawah ini :
22. Setelah itu, pada kolom username isikan nama user misal “Buyung” > entrikan juga
passwordnya > pilih level 1 > klik create, maka akan muncul tampilan bahwa kita telah
sukses membuat sebuah user di dalam yii
23. Maka secara otomastis user yang dibuat di dalam yii tadi akan langsung muncul di dalam
rights.
24. Untuk mengizinkan user atau tabel dalam melakukan editing atau dll maka klik tab
permission > klik generate …. > seperti tampilan di bawah ini :
73
25. Pada tampilan di bawah ini kita bisa memilih tabel mana saja yang diijinkan untuk
dimodifikasi dan modifikasi apasaja yang bisa dilakukan