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