la2 sismul
-
Upload
cokhycoklathitam -
Category
Documents
-
view
228 -
download
0
Transcript of la2 sismul
-
8/18/2019 la2 sismul
1/18
Laporan Akhir Praktikum
Mata Praktikum : Sistem Multimedia
Kelas : 4IA17
Praktikum Ke- : 2
Tanggal : 30 maret 2016
Materi : C!" #am$ar
%PM : &24122'6
%ama : "(i )a*anti Pur(antini
Ketua Asisten : M +ak,ri
Para Asisten :
%ama Asisten :
)umla, .em$ar :
Laboratorium Teknik Informatika
Universitas Gunadarma
2016
-
8/18/2019 la2 sismul
2/18
PERTEMUAN 2 – GALLERY MULTIMEDIA
Di pertemuan kedua kita akan melakukan CRUD (Create, Read, Update, Delete) dengan
menggunakan image atau foto.
Pertama adalah kita lakukan CRUD pada halaman admin yang kemudian akan tampil
image nya pada halaman user.
Langkah pertama adalah kita harus membuat sebuah tabel untuk menyimpan image yang
nantinya akan kita simpan dan tampilkan. Maka dari itu kita membuat sebuah tabel didalam
database sismul (karena masih satu proe!t dan berlanut hingga pertemuan ") dengan nama
gambar, !aranya masih sama seperti membuat tabel#tabel sebelumnya.
$emudian isi field nya seperti berikut ini %
&etelah membuat tabel gambar, sekarang kita mulai masuk kedalam C' nya dan !oba
melakukan CRUD 'mage.
-
8/18/2019 la2 sismul
3/18
A. Tamba Gambar
Untuk menambahkan gambar pada halaman admin berarti kita harus membuat
sebuah halaman untuk menambahkan gambar. alaman untuk menambahkan gambar sudah
ada pada template yang telah disediakan, !opy file tambahgambar.php dan tinymce.php yang
ada didalam folder bahan/pertemuan2, lalu pastekan didalam ie* admin yaitu di folder
sismul/application/views/admin.
Tambahgambar.php adalah sebuah halaman untuk menambahkan gambar nantinya.
Dan tinymce.php adalah suatu plugin agar suatu teks dapat terlihat lebih bagus.
&ekarang buat + buah fun!tion seperti diba*ah ini %
untuk menampilkan halaman tambahgambar
publi! fun!tion tambahgambar()
-
this#/load#/ie*(0admintambahgambar0)1
2
untuk menginsert gambar kedalam database
publi! fun!tion insert3gambar()-
this#/load#/library(0upload0)1
nmfile 4 5file35.time()1 nama file saya beri nama langsung dan diikuti fungsi time
!onfig60upload3path07 4 0.uploadsgallery01 path folder
!onfig60allo*ed3types07 4 0gif8pg8png8peg8bmp01 type yang dapat diakses bisa anda
-
8/18/2019 la2 sismul
4/18
sesuaikan
!onfig60ma93si:e07 4 0+;"
-
8/18/2019 la2 sismul
5/18
Function tambahgambar() berfungsi untuk menampilkan halaman tambahgambar.
Function insert_gambar() berfungsi untuk menginsertkan gambar kedalam database.
Copy + fun!tion tersebut kemudian pastekan didalam !"ntr"ller #el$"me admin
( sismul/application/controllers/admin/welcome), pastekan tepat diba*ah function gambar()
seperti gambar diberikut ini %
&etelah itu buat sebuah fun!tion dengan nama insert_gambar.
-
8/18/2019 la2 sismul
6/18
fun!tion insert3gambar(data)-
this#/db#/insert(this#/tabel@, data)1
return ARU>1
2
=un!tion ini kita !opy dan pastekan didalam m"dels u%l"ads
( sismul/application/models/uploads). Dan angan lupa buat sebuah ariabel tabel@ (tabel@),
ariabel tabel@ ini berisi B gambar’. rtinya adalah tabel gambar yang ada di database sismul
kita simpan didalam tabel!, adi saat kita mau insert data kedalam tabel gambar kita tidak perlu
memanggil nama tabelnya, kita !ukup memanggil tabel! saa, karena isi dari tabel! adalah
tabel gambar. uka file m"del u%l"ads ( sismul/application/models/uploads). lalu pastekan
fun!tion diatas. Lihat gambar berikut %
&ekarang buatlah sebuah folder dengan nama u%l"ads didalam folder proe!t sismul.
-
8/18/2019 la2 sismul
7/18
Lalu didalam folder u%l"ads buat lagi sebuah folder dengan nama galler&.
=older gallery tersebut berfungsi untuk menyimpanmenampung gambar yang telah kita
insert kedalam database, dan berfungsi uga untuk menampilkan gambar nantinya, karena file
gambar yang dipanggil nanti adalah gambar yang ada didalam folder galler& ini.
&ekarang !oba insert sebuah gambar pada halaman admin (localhost/sismul) kemudian
klik login dan login sebagai admin (user " admin # password " admin) lalu !oba masuk ke tab
lihat gambar kemudian klik button tambah gambar lalu !oba insert sebuah gambar. kemudian
lihat didalam database sismul tabel gambar apakah data yang kalian insert telah masuk atau
tidak, kemudian lihat uga didalam folder sismul/uploads/gallery apakah gambar yang kalian
insert ada didalam sana. Eika tidak berhasil maka akan ditampilkan halaman form tambah gambar
dan data yang di insertkan tidak masuk kedalam database maupun folder uploads/gallery.
'. Liat Gambar
&etelah kita berhasil menginsert gambar, sekarang kita akan lihat gambar yang telah
kita insert di halaman admin pada halaman user.
Langkah pertama adalah buka dan ubah $"ntr"ller #el$"me user
(sismul/application/controllers/welcome) , ubahlah pada function gallery menadi seperti
-
8/18/2019 la2 sismul
8/18
gambar berikut ini %
Lalu angan lupa membuat sebuah (un$ti"n $"nstru$t diba#a nama $lass. Masih
di file yang sama yaitu *el!ome user ( sismul/application/controllers/welcome) kemudian
!opy dan pastekan fun!tion !onstru!t diba*ah ini %
publi! fun!tion 33!onstru!t() -
parent%%33!onstru!t()1
this#/load#/model(0uploads0)1 load model uploads yang berada di folder model
this#/load#/helper(array(0url0))1 load helper url
2
&impan seperti gambar diba*ah ini %
&ekarang buat sebuah fun!tion untuk sele!t gambar didalam m"dels u%l"ads.
fungsi untuk sele!t gambar
fun!tion getFambar() - return this#/db#/get(0gambar0)1
2
Copy fun!tion diatas kemudian pastekan didalam m"dels u%l"ads
( sismul/application/models/uploads) simpan seperti gambar berikut.
-
8/18/2019 la2 sismul
9/18
&ekarang kita akan tampilkan gambar di halaman )ie# galler& user. Copy sintaks
php diba*ah ini kemudian pastekan pada halaman )ie# galler& user
( sismul/application/views/gallery).
GHphp
forea!h (re!ord#/result3array() as list) - H/
Gdi !lass45ie* ie*#tenth5 /
Gimg style *idth45@;;I51 height45@;;I51 sr!45GHphp e!ho base3url()1H
/uploadsgalleryGHphp e!ho list60gambar071 H/5 alt455/
Gdi !lass45mask5/
GhJ/GHphp e!ho list60nama3gambar071 H/GhJ/
Gp/Deskripsi % GHphp e!ho list60deskripsi3gambar071 H/Gp/
Gdi/
Gdi/
GHphp 2 H/
-
8/18/2019 la2 sismul
10/18
Pastekan pada line *+ diantara tag di Gdi/ seperti gambar berikut ini %
&ekarang !oba buka localhost/sismul , kemudian klik tab gallery.
!. Edit Gambar
&ekarang kita akan melakukan edit data, sebelum melakukan edit data pada halaman
admin, kita perlu menampilkan dahulu data apa saa yang ingin di edit.
Langkah pertama adalah kita ubah isi dari function gambar() yang ada didalam
$"ntr"llers #el$"me admin ( sismul/application/controllers/admin/welcome) menadi seperti
gambar berikut ini %
-
8/18/2019 la2 sismul
11/18
&ekarang kita pindah ke halaman )ie#s gambar admin
( sismul/application/views/admin/gambar ), buka file gambar.php lalu sisipkan sintaks php
berikut ini %
GHphp
if(re!ord#/num3ro*s() 44 ;)-
e!ho 5G!enter/Gstrong/Aidak da Data AersediaGstrong/G!enter/51
2 else -
H/
Pastekan pada line *2 diantara tag di Gdi/ seperti gambar berikut %
Masih di file yang sama gambar.php lalu sisipkan sintaks php berikut ini %
GHphp no4@1 forea!h(re!ord#/result3array() as list)-H/
Gtr/
-
8/18/2019 la2 sismul
12/18
Gtd/GHphp e!ho no1H/Gtd/
Gtd/GHphp e!ho list60nama3gambar071H/Gtd/
Gtd/GHphp e!ho list60deskripsi3gambar071H/Gtd/
Gtd/GHphp e!ho list60gambar071H/Gtd/
Gtd/Ga href45GHphp e!ho base3url()1H/admin*el!omeeditgambarGHphp e!ho list60id071H
/5!lass45btn btn#sm btn#default5/Gspan !lass45glyphi!on glyphi!on#*ren!h5/Gspan/Ga/
Ga href45GHphp e!ho base3url()1H/admin*el!omedo3hapus3gambarGHphp e!ho list60id071H
/5 onCli!k45return !he!kMe()5 !lass45btn btn#sm btn#default5/Gspan !lass45glyphi!on
glyphi!on#trash5/Gspan/Ga/
Gtd/
GHphp noKK 1 2 2H/
Gtr/
Pastekan pada line *-2 diantara tag table Gtable/ seperti gambar berikut %
Coba sekarang buka halaman admin kemudian klik tab gambar, ika sudah benar
-
8/18/2019 la2 sismul
13/18
maka akan tampil data gambar yang ingin di edit.
&ekarang kita !oba melakukan edit gambar. Langkah pertama adalah !opy file
editgambar.php yang ada didalam folder bahan/pertemuan2, lalu pastekan didalam ie*
admin yaitu di folder sismul/application/views/admin.
editgambar.php adalah sebuah halaman untuk mengedit gambar nantinya.
&ekarang buat + buah fun!tion seperti diba*ah ini %
tampilkan halaman edit gambar
fun!tion editgambar(id) -
data60re!ord07 4 this#/uploads#/get&inglegambar(id)#/result()1
this#/load#/ie*(0admineditgambar0, data)1
2
melakukan edit gambar
publi! fun!tion update3gambar()-
this#/load#/library(0upload0)1
nmfile 4 5file35.time()1 nama file saya beri nama langsung dan diikuti fungsi time
!onfig60upload3path07 4 0.uploadsgallery01 path folder
!onfig60allo*ed3types07 4 0gif8pg8png8peg8bmp01 type yang dapat diakses bisa anda
sesuaikan
!onfig60ma93si:e07 4 0+;"
-
8/18/2019 la2 sismul
14/18
this#/upload#/initiali:e(!onfig)1
if(3='L>&60gambar0760name07)
-
if (?this#/upload#/do3upload(0gambar0))
-
redire!t(0admin*el!omegambar0)1 ika gagal maka akan ditampilkan form upload
2else-
gbr 4 this#/upload#/data()1
data 4 array(
0nama3gambar0 4/this#/input#/post(0nama3gambar0),
0deskripsi3gambar0 4/this#/input#/post(0deskripsi3gambar0),
0gambar0 4/gbr60file3name07
)1
this#/uploads#/update3gambar(data, this#/input#/post(0id0))1 akses modeluntuk menyimpan ke database
redire!t(0admin*el!omegambar0)1 ika berhasil maka akan ditampilkan ie*
gambar
2
2
data 4 array(
0nama3gambar0 4/this#/input#/post(0nama3gambar0),
0deskripsi3gambar0 4/this#/input#/post(0deskripsi3gambar0),
0gambar0 4/this#/input#/post(0gambar0)
-
8/18/2019 la2 sismul
15/18
)1
this#/uploads#/update3gambar(data, this#/input#/post(0id0))1 akses model
untuk menyimpan ke database
redire!t(0admin*el!omegambar0)1 ika berhasil maka akan ditampilkan ie*
gambar
2
Function editgamabar() berfungsi untuk menampilkan halaman editgambar. Function
update_gambar() berfungsi untuk mengupdate gambar dari database.
Copy + fun!tion tersebut kemudian pastekan didalam !"ntr"ller #el$"me admin
( sismul/application/controllers/admin/welcome), pastekan tepat diba*ah function
insert_gambar() seperti gambar diberikut ini (line +)%
-
8/18/2019 la2 sismul
16/18
&etelah itu buat + buah fun!tion dengan nama get$inglegambar dan update_gambar.
fungsi untuk sele!t satu gambar untuk di edit
fun!tion get&inglegambar(id) -
return uery 4 this#/db#/get3*here(0gambar0, array(0id0 4/ id))1
2
fungsi untuk melakukan edit data gambar
fun!tion update3gambar(data, id)-
-
8/18/2019 la2 sismul
17/18
this#/db#/*here(0id0, id)1
this#/db#/update(this#/tabel@, data)1
return ARU>1
2
=un!tion ini kita !opy dan pastekan didalam m"dels u%l"ads
( sismul/application/models/uploads).
uka file m"del u%l"ads ( sismul/application/models/uploads). lalu pastekan fun!tion
diatas tepat diba*ah function get%ambar seperti gambar berikut %
&ekarang !oba lakukan edit gambar lalu !oba lihat hasilnya di halaman user apakah
gambar yang kita edit berubah uga pada halaman user, ika berhasil gambar pasti berubah.
D. Delete Gambar
Untuk mendelete gambar !oba buka kembali !"ntr"ller #el$"me admin
( sismul/application/controllers/admin/welcome), lalu sisipkan fun!tion diba*ah ini %
melakukan hapus gambar
fun!tion do3hapus3gambar(id) -
this#/uploads#/do3hapus3gambar(id)1
-
8/18/2019 la2 sismul
18/18
2
pastekan tepat diba*ah function update_gambar(), seperti gambar berikut (line **-)%
&etelah itu buat sebuah fun!tion dengan nama do_hapus_gambar.
fungsi untuk menghapus gambar dari database
fun!tion do3hapus3gambar(id) -
this#/db#/delete(0gambar0, array(0id0 4/ id))1
redire!t(0admin*el!omegambar0)1
2
=un!tion ini kita !opy dan pastekan didalam m"dels u%l"ads
( sismul/application/models/uploads).uka file m"del u%l"ads ( sismul/application/models/uploads). lalu pastekan fun!tion
diatas tepat diba*ah function update_gambar seperti gambar berikut %