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


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.


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


4/18

sesuaikan

!onfig60ma93si:e07 4 0+;"


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.


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.


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

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.


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/


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 %


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/


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


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+;"


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)


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 +)%


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)-


17/18

this#/db#/*here(0id0, id)1

this#/db#/update(this#/tabel@, data)1

return ARU>1

2


( 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


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


( 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 %

Documents

la2 sismul