Memperbarui Isi Halaman WEB

Untuk memperbarui isi halaman web ini, kita harus memiliki sebuah program web, yang biasanya kita dapatkan dari perusahaan yang meminta jasa kita untuk memperbaiki halaman webnya, atau bisa program website yang pernah kita sodorkan pada suatu perusahaan.

Dalam praktikum kali ini kita berasumsi mendapatkan sebuah halaman web dari suatu CMS (Content Managemen System) Lokomedia. Untuk filenya dapat anda dapatkan dari Bapak/Ibu Guru Anda.

Pertama Exstrak file Lokomedia.rar sehingga mendapatkan hasil sebagai berikut

File Baca Saya CMS adalah file petunjuk instalasi, di situ di bahas tata cara instalasi dari CMS Lokomedia

Folder lokomedia berisi program website yang nantinya akan kita pelajari

File dbLokomedia.sql adalah kumpulan perintah query untuk membuat table pada database yang akan kita buat nanti.

CMS Lokomedia adalah sebuah program yang di bangun berbasis php dengan database mysqluntuk itu di computer anda harus terinstal webserver apache, database mysql, dan compiler php ketiga program tersebut bias anda dapat install secara terpisah atau dapat memanfaatkan pengembang pihak ke tiga seperti xampp atau wamp.

Pada praktikum ini kita menggunakan xampp, sehingga pastikan komputer sudah terinstal dengan benar program tersebut.

Folder Lokomedia bisa anda ganti dengan nama project anda misalkan webpertama, setelah itu copykan pada xampp\htdoc yang biasanya terletak pada drive c: atau pada c:/Program Files

Klik 2 kali pada Xampp Control Panel

Bila nampak seperti gambar di atas klik start pada modules Apache dan Mysql sehingga ada text running sebelum tombol start tersebut.

Adakalanya saat anda klik 2 kali pada xampp Control Panel maka akan muncul pesan seperti berikut

Pesan Error (kesalahan) tersebut di sebabkan karena Xampp Control Panel telah terbuka. Terlihat pada taskbar pojok kanan bawah komputer anda.

Bila anda menemui hal seperti itu maka anda klik ok kemudian klik icon pada taskbar dan lakukan seperti pada langkah sebelumnya.

Klik pada admin seperti nampak pada gambar berikut

Setelah itu akan terbuka browser kesayangan anda pada browser tersebut akan muncul pilihan bahasa yang akan kita gunakan dalam penggunaan xampp

pilihlah English, karena itulah bahasa yang paling kita mengerti. Setuju …!!

Tampilan seperti pada gambar di atas hanya muncul satu kali saja, jadi bila xampp sudah pernah digunakan yang nampak seperti gambar berikut

Klik pada link yang ditunjukkan oleh tanda panah. PhpMyAdmin ini adalah interface atau software yang digunakan untuk memanipulasi database mysql ada banyak interface yang lain seperti navicat, SQLyog MySQL Visual Editor dll.

Selanjutnya kita akan gunakan phpmyadmin ini untuk membuat sebuah database misalnya dbwebpertama.

Tuliskan dbwebpertama pada kotak isian kemudian tekan tombol create

Keterangan Gambar

a. Database yang berhasil kita buatb. Perintah SQL (Standard Query Language yang digunakan untuk membuat database pada

mysql)c. Pesan bahwa database tersebut telah berhasil dibuat

Selanjutya klik import, dan cari dblokomedia.sql

Maka akan tercipta tabel-tabel yang diperlukan oleh CMS kita.

Selanjutnya buka folder xampp, apache dan buka file httpd.conf dengan menggunakan editor text misalnya notepad

Cari teks yang di sorot kemudian hilangkan tanda (#), simpan dan tutup

Buka folder webpertama anda pada folder xampp/htdoc cari file koneksi.php pada folder config

Cari baris dengan teks database dan rubah menjadi dbwebpertama, simpan

Buka browser dan ketikkan localhost/webpertama pada addressbar

Komponen PenilaianPencapaian Kompetensi

BelumYa

7,0-7,9 8,0-8,9 9,0-10

1. Buka file header.jpg yang terletak pada C:\xampp\htdocs\webpertama\templates\eljquery2\images menjadi bentuk yang berbeda tanpa merubah ukuran dan tombol dan isian pencarian

2. Ubahlah footer_bg1, footer_l, footer_r sesuai dengan karakter website yang ingin anda tampilkan

3. Masuklah ke halaman admin dengan mengetikkan localhost/namafolder/adminweb. Masukkan username admin password admin dan tambahkan berita baru

4. Masih pada halaman admin tambahkan file baru agar bisa di download

5. Masih pada halaman admin tambahkan foto-foto baru melalui menu galeri foto

6. Tambahkan user baru untuk mengelola halaman website anda

7. Rubah file header.jpg yang terletak pada xampp//adminweb/images/header.jpg dengan menggunakan adobe photoshop

8. Rubahlah menu di samping kiri senada dengan warna header anda, untuk merubah lihatlah pada styles.css yang terletak pada xampp/htdocs/namafolder/adminweb/styles.css. Pengaturan menu terletak pada baru ke 17 s/d 59 #menu

9. Rubahlah nama footer pada file yang sama. Pengaturan terletak pada baris 112 s/d118 #footer

10.Tambahkan Link Account Fecebook atau tweeter pada website anda

Menggabungkan Teks dalam sajian Multimedia

Peranan teks dalam sajian multimedia sangatlah penting, untuk memperjelas maksud dari sajian multimedia yang kita buat. Sebagai contoh profil perusahaan yang dibangung secara interaktif tidak akan banyak bercerita tanpa adanya teks.

Dalam praktikum ini kita akan belajar membuat profil perusahan, untuk itu anda harus menyiapkan data-data perusahaan yang telah ada. Seperti alamat, struktur organisasi, visi misi, bidang usaha , contoh-contoh produk dan sebagainya.

Pertama anda siapkan program macromedia flash 8. Pilih create new document

Berikut adalah tampilan interface dari macromedia flash 8

Untuk mempersingkat modul ini anda bisa mencari mengenai fungsi masing-masing komponen yang ada pada flash di internet atau meminta kepada bapak/ibu guru anda.

Buatlah gambar dengan rectangle tools sehingga terbentuk gambar seperti berikut

Putar menggunakan gradient transform tool (F) sehingga posisinya seperti nampak seperti gambar berikut

Untuk nomer 1 berilah warna #EFB86B dan nomer 2 berilah warna #EF942F

Tekan Klik pada objek di atas tekan Ctrl + G, lalu buatlah objek seperti ini setinggi gambar di atas

Convert menjadi symbol movie dan tambahkan propertiesnya seperti pada gambar berikut

Lengkapilah teks tersebut dengan visi-misi, contact, wilayah dan lain sebagainya sesuai dengan perusahaan yang akan anda buatkan profil perusahaanya.Klik kanan pada masing-masing teks satu persatu dan convert ke symbol pilih button

Klik dua kali pada Teks Beranda sehingga

Sebagai contoh kita akan rubah warna teks yang semula putih akan berubah warna pada saat mouse menyentuhnya, untuk melakukan itu klik kanan pada Over insert keyframe dan gantilah teks menjadi berwarna hitam.

Untuk melihat hasilnya klik Scene 1 dan tekan tombol pada keyboard Ctrl dan Enter.Lakukan langkah-langkah yang dikenakan pada teks Beranda pada teks Produk,Visi-misi, Kontak dan sebagainya yang akan digunakan sebagai button / tombol

Tambahkan layer baru dengan cara

A. Pastikan bila di klik 2 kali muncul symbol Beranda seperti nampak pada gambar A

B. UP yang akan tampil pada layar pertama kali.

C. Over yang akan tampil bila saat button di sentuh mouse

D. Down yang akan tampil pada saat button di tekan

E. Hit area yang digunakan untuk memicu event Over.sebagai catatan Hit tidak nampak .

Klik pada frame 1 kemudian tekan f9 pada keyboard sehingga muncul editor script seperti berikut

Untuk melihat hasilnya simpan pekerjaan anda. Dan Ctrl Enter sekali lagi. Saat di tekan Ctrl Enter memang tidak nampak perubahan apa-apa. Tutup hasll ekseskusi (Ctrl+Enter) dan buka melalui windows explorer di tempat anda menyimpan pekerjaan anda maka akan nampak dua buah file sebagai berikut

Klik dua kali pada flash movie(File hasil) Jika benar maka desain anda akan di perbesar sebesar layar monitor anda. Untuk menutup halaman tersebut tekan tombol esc pada keyboard dan tutup seperti biasa.

Buatlah layer baru dan ganti namanya menjadi Background, letakkan layer Background pada bagian paling bawah dari layer yang ada. Kunci layer1 dan layer2, tujuan dari penguncian ini untuk menghindarkan perubahan pada layer yang kita anggap tidak perlu ada perubahan. Penguncian ini bisa di buka saat di butuhkan dengan menekan tempat yang sama seperti yang di tunjukkan pada gambar berikut.

Setelah itu buatlah rectangle yang menutupi seluruh area stage, berilah gradasi dengan warna sebagai berikut

Buatlah rectangle untuk area penulisan

Tentu ada banyak desain yang bisa anda jadikan inspirasi untuk membuat profil perusahaan jauuh lebih cantik daripada yang kami suguhkan di sini.

Contoh desain yang lain

Tentu Masih banyak desain yang lain. Anda perlu melihat banyak desain bagus selain latihan untuk menghasilkan karya yang fantastis

Komponen PenilaianPencapaian Kompetensi

BelumYa

7,0-7,9 8,0-8,9 9,0-10

1. Tunjukkan kepada Bapak / Ibu Guru anda manakah yang di sebut dengan shape tool, dan bagaimana cara menggunakanya

2. Tunjukkan kepada Bapak /Ibu Guru anda manakah yang disebut dengan Oval tool, dan bagaimana cara menggunakannya

3. Modifikasilah Hasil dari Shape tool sehingga membentuk suatu bentuk benda yang berbeda

4. Buatlah 4 atau 5 warna sekaligus pada sebuah objek shape

5. Apakah kode untuk membuat desain anda pada software flash 8 memenuhi layar komputer anda ?

6. Bagaimanakah cara membuat objek button pada flash 8

7. Tunjukkan kepada Bapak/Ibu guru anda cara membuat layer baru

8. Tunjukkan kepada Bapak/Ibu guru anda cara menghapus merubah nama dan menghapus layer

9. Apa Short Cut untuk membuka editor script pada flash

10. Tunjukkan kepada Bapak/Ibu guru anda hasil akhir desain anda

Nach… setelah desain anda sempurna kini saatya kita memberikan teks, gambar, video yang sesuai dengan perusahaan yang kita buatkan profilnya.

Di pelajaran sebelumnya kita telah membuat tombol / button yang fungsinya untuk berpindah dari suatu tempat (frame/scene/symbol) ke tempat yang lain.

Coba anda buka desain anda dan klik dua kali pada objek button/tombol yang telah anda buat. Jika menghasilkan seperti nampak pada gambar berikut maka proses pembuatan button/tombol anda berhasil

Tanyakanlah kepada Bapak/Ibu guru anda untuk memastikan button yang anda buat benar !, Setelah benar klik scene1 sehingga muncul pada gambar yang lebih terang.

Rubahlah layer 1 dalam contoh ini , atau layer khusus untuk menempatkan objek-objek button dengan nama Button

Untuk memastikan apakah Button anda terletak pada satu layer saja anda bisa lakukan langkah berikut.

Setelah pasti dalam satu layer munculkan kembali desain button anda dengan klik tanda silang di atas sekali lagi. Klik satu kali pada button yang anda buat dan tekan F9 pada keyboard. Sehingga muncul script editor seperti berikut.

Script/kode di atas akan sering kita gunakan untuk lebih baik anda menghafal dan mengerti maksudnya. on(press) artinya ketika tombol/button anda di klik (tekan dengan mouse kiri), gotoAndStop artinya berpindahlah dan berhenti pada, (“Beranda”) adalah tujuan dari perpindahan itu.

Karena tujuannya ke beranda / halaman depan maka kita beri nama Beranda pada frame 1 layer isi yang harus anda buat di atas layer 5 (dalam contoh ini). Pada prinsipnya penempatan layer isi ini bisa di mana saja asalkan selalu terlihat atau tidak tertutupi oleh layer lain.

Untuk memberi nama klik pada frame yang akan di beri nama kemudian klik pada properties dan isikan namanya pada isi Frame.

Tuliskan misalnya seperti gambar berikut

Untuk memperoleh gambar seperti disamping klik kanan pada frame 15 insert blank keyframe, kemudian pindahkan kursor ke frame 1

Pada saat kursor berada di frame 1, desain awal kita masih nampak karena pada frame 1 terletak seluruh desain.

Pada frame 2 sampai frame 14 yang nampka adalah tulisah dari home akan tetapi desain awal sudah tidak tampak lagi. Hal itu disebabkan pada layer lainya gambar hanya pada frame 1 saja sedangkan pada frame berikutnya sudah tidak ada lagi.

Pada frame 15 sudah tidak tampak tulisan Rumah Sakit Rakyat Surabaya. Karena tulisan itu berakhir pada frame 15. Di frame 15 ini kita bias mengisikan misalnya tentang daftar dokter atau fasilitas dari rumah sakit yang kita buatkan profilnya

Desasin yang kita seharusnya selalu muncul setiap saat untuk itu kita bisa menambahkan / membuat bayanan sepanjang frame yang di perlukan. Caranya dengan klik kanan pada frame 15 pada setiap layer yang kita miliki kemudian pilih insert frame.

Mengapa harus di pilih insert frame bukan insert keyframe, frame dan keyframe memang nampak sama namun berbeda. Frame ibaratnya hanya sebuah bayangan yang akan ikut berubah jika keyframe di frame satu kita rubah sedangkan keyframe berarti obyek yang berbeda sehingga jika kita rubah pada frame 15 tidak akan berpengaruh pada keyframe pada frame 1 dan begitu juga sebaliknya.

Pada frame 15 layer isi anda bisa menuliskan misalnya tentang fasilitas rumah sakit. Setelah itu kita bisa menamai misalnya dengan fasilitas dengan menuliskanya pada properties seperti Nampak pada gambar berikut.

Pada layer isi sekarang kita memiliki dua buah frame yang bemiliki nama Beranda dan fasilitas.Di desain ada dua buah button atau tombol dengan tulisan Beranda dan Produk, nach….ini memang suatu yang tidak cocok , seharusnya Produk bertuliskan fasilitas. Dalam contoh ini abaikan saja kesalahan tersebut, karena tidak berpengaruh pada pada kode yang akan kita tuliskan, namun demikian pada tugas anda nanti harus betul-betul di perhatikan tulisan pada masing-masing tombol sehingga tidak membingungkan orang yang menggunakan profil perusahaan yang kita buat.

Sebelum mempelajari kode atau script flash coba anda execute hasil karya anda dengan menekan ctrl+Enter atau klik pada menu Control dan pilih test movie. Di situ akan nampak desain kita sesekali berubah dari frame Beranda ke Frame Fasilitas. Untuk itu harus kita hentikan perubahan itu karena perubahan / perpindahan frame hanya boleh terjadi pada saat kita menakan button/tombol Beranda dan Produk. Klik pada frame 1 layer isi dan tekan F9 sehingga muncul script editor

perlakuan di atas berarti memberikan perintah berhenti pada saat berada pada frame. Jadi stop(); adalah suatu perintah untuk menghentikan perpindahan frame.

Beri perintah stop juga pada frame 15 layer isi.

Pemberian perintah stop(); pada frame 15 layer isi bertujuan menghentikan kursor saat mencapai frame 15 , sebelum ada perintah lain. Bila tidak dihentikan maka di akan kembali pada frame 1.Selanjutnya kita akan memberikan perintah pada button beranda dan button Produk. Button Beranda untuk berpindah ke beranda dan Button Produk untuk berpindah ke fasilitas. Klik Button beranda dan tekan F9 (Jangan lupa buka kunci terlebih dahulu pada layer button).

Wach… ternyata kita telah membuatnya klo lupa ikuti penjelasan sebelumnya.

Klo sudah berarti apa yang kita lakukan ?

Ya tepat kita buat tulisan Produk menjadi Button dan berikan perintah seperti Button Beranda hanya diganti pada bagian “Beranda” menjadi “Fasilitas”.

Jika semua langkah telah anda lakukan maka Ctrl + Enter untuk execute profil perusahaan anda.Nach sekarang anda tinggal mencoba dengan klik pada button product dan Beranda.

Komponen PenilaianPencapaian Kompetensi

BelumYa

7,0-7,9 8,0-8,9 9,0-10

1. Tunjukkan kepada Bapak / Ibu Guru anda hasil pekerjaan anda

2. Lanjutkan pekerjaan anda dengan menambahkan button seperti fasilitas, visi misi dan kontak

3. Buat Frame baru pada layer isi dan beri nama sehingga button bisa berpindah ke masing-masinf frame yang telah anda beri nama

4. Carilah video tentang perusahaan anda yang nantinya akan kita gunakan pada halaman fasilitas. Dan mintalah nilai untuk tugas ini

Untuk dapat menggunakan video flash 8 membutuhkan software quicktime 6.5 atau yang lebih tinggi dari versi tersebut. Untuk itu anda harus menginstalnya terlebih dahulu.

Flash 8 support dengan format video berikut, *.avi, mpg,mov, wmf dan lain-lain tetapi tidak semua format video telah tersuport dengan baik oleh flash 8 untuk itu anda harus merubah format file tersebut dengan menggunakan converter seperti total video converter. Jika belum terinstal installah terlebih dahulu, carilah caranya di internet atau mintalah bantuan bapak/ibu guru anda jika mengalami kesulitan.

Untuk memasukkan video ke dalam flash 8 setelah sofware quicktime terinstal cukup dengan klik menu file import video

Pada gambar di atas anda bisa memilih model player yang akan digunakan pada profil perusahaan anda.

Setelah semua tahap di atas maka anda bisa memainkan video yang etlah anda import.

Komponen PenilaianPencapaian Kompetensi

BelumYa

7,0-7,9 8,0-8,9 9,0-10

1. Tunjukkan kepada Bapak / Ibu Guru anda cara install quicktime

2. Tunjukkan kepada Bapak/Ibu Guru Anda cara install Total Video Converter atau video converter lain yang anda miliki

3. Lengkapi dan sempurnakan project anda untuk mendapatkan nilai akhir dari pembuatan profil perusahaan ini

Menggabungkan Fotografi Digital dalam Sajian Multimedia

Dalam praktik pengambilan gambar sebaiknya anda pelajari terlebih dahulu tentang materi yang sama pada modul kelas xi halaman 21 di situ di jelaskan tentang teknik-teknik pengambilan gambar. Dalam praktikum kali ini kita akan membuat foto pre wedding berikut beberapa contoh foto prewedding yang bisa anda jadikan inspirasi.

Komponen PenilaianPencapaian Kompetensi

BelumYa

7,0-7,9 8,0-8,9 9,0-10

1. Setelah melihat berbagai contoh di atas, buatlah foto pre wedding dengan kelompok anda. Dalam tugas ini anda boleh menggunakan teman anda sebagai artisnya

2. Berikan efek khusus seperti blur, bingkai, kabut, percikan air dan lain pada hasil foto anda sesuai kesan yang ingin anda tampilkan

3. Susun foto pre wedding hasil karya anda dalam sebuah undangan

4. Cetak undangan anda dalam kertas foto dengan tinta berwarna

Saat ini undangan pernikahan atau wedding tidak hanya berupa kertas, atau bentuk-bentuk fisik tetapi juga ada bentuk undangan digital yang tersimpan pada keping DVD atau CD. Untuk keperluan tersebut kita bisa menganimasikan foto-foto pre wedding dengan menggunakan software pengolah video seperti adobe premiere, ulead, windows movie maker, dan …. Bisa juga anda menggunakan software gratisan (open source software) Wedding Album maker. Untuk menggunakan software ini sangatlah mudah anda tinggal tarik gambar-gambar yang akan anda gunakan ke tab Album foto seperti nampak pada gambar berikut.

Untuk menambahkan transisi antara foto satu denga foto yang lain sangatlah mudah hanya tinggal menarik transisi di antara dua foto bahkan anda juga langsung bisa menerapkan seluruh efek ke foto-foto yang sudah anda buat dengan menekan tombol All di samping kanan teks Transition.

Klik nomer 2 untuk memberikan menu, sebagaimana film-film menyertakan menu dan trailler film lihat pada gambar di bawah ini.

Anda bisa mencoba menu denga klik pada file player tersebut, selanjutnya jika pekerjaan anda telah selesai klik nomer 3 untuk membakar pekerjaan anda ke dalam keping CD atau DVD

Komponen PenilaianPencapaian Kompetensi

BelumYa

7,0-7,9 8,0-8,9 9,0-10

1. Tunjukkan cara instalasi software Wedding Album Gold pada Bapak/Ibu Guru Anda

2. Tunjukkan kepada Bapak/Ibu Guru anda cara memasukkan gambar/foto pada Software Wedding Albumg Gold

3. Tunjukkan kepada Bapak/Ibu Guru Anda cara memberikan efek dan background musik pada pekerjaan anda

4. Susun konsep untuk memberikan narasi, pada pekerjaan anda, rekam dan masukkan ke dalam pekerjaan anda

5. Bakar/Burning hasil pekerjaan anda serta berikan label yang menarik kemudian serahkan kepada Bapak/Ibu Guru anda untuk mendapatkan penilaian akhir.

Menguasai Menggambar Kunci Untuk Animasi

Film-film animasi saat terus berkembang dari yang dua dimensi ataupun yang tiga dimensi, pada modul anda telah di jelaskan tentang sejarah animasi dan berbagai hal mendasar tentang animasi dalam modul praktik ini kita akan buat sebuah film pendek