Cyber Media
Daftar Isi
REDAKSI CYBER MEDIA INTERNET CLUB
Daftar Isi : Daftar isi........................1 Salam Redaksi...............2 Topik Utama..................3 Tutorial...........................6 Pemrograman...............19 Puisi...............................21 Komik.............................22 Kesehatan....................23 Blog Walking................25 Multimedia...................27 Cyber Voice.................30
Pelindung : Dr. Bambang Suko Priyono. M.M Pembina : Eka Ardhianto, S.Kom, M.Cs Penanggung Jawab : Fitri Cahyanti Pimpinan Redaksi : Novi Fairuz Zuhria Editor : Eka Puji Lestari Layout : Ika Rinawati Redaksi : Departemen Internal Internet club
Cyber Media : Diterbitkan oleh UKM Internet Club Universitas Stikubank. Bagi perusahaan yang berminat bergabung dan berkerja sama dalam kegiatan Internet Club dapat menghubungi Redaksi. Redaksi terbuka dan menerima artikel atau naskah apapun. Naskah bisa berupa softcopy atau hardcopy dan dikirim ke alamat Redaksi : UKM Internet Club Lt.1 Universitas Stikubank atau
email : cybermedia@internetclub.or.id
1
Media Sharing Bersama
Cyber Media
Salam Redaksi
P
uji Syukur kami panjatkan kepada Tuhan Yang Maha Esa karena berkat rahmat dan hidayah-Nya kami redaksi Cyber Media dapat menerbitkan majalah edisi ini. Kami selalu berusaha untuk memberikan yang terbaik dan ide-ide yang menarik untuk disimak oleh para pembaca Cyber Media setiap bulannya. Pada edisi kali ini, Cyber Media akan mengulas mengenai suatu bahasa dalam pengaturan tata letak pada web, yaitu CSS (Cascading Style Sheet). Selain membahas CSS, pada majalah ini juga terdapat tutorial PHP, tips dan trik, info kesehatan, dan masih banyak lagi informasi yang kami harap dapat bermanfaat bagi para pembaca semua. Kami dari redaksi mohon maaf apabila ada kesalahan dalam penyampaian maupun penulisan kata. Selamat membaca dan Semangat pagi!
@CyberMediaMagz cybermediamagz cybermediamagz.blogspot.com http://issuu.com/cybermediamagz
Kritik & Saran Contact Person
Media Sharing Bersama
: cybermedia@internetclub.or.id : 08999226457 (Novi)
2
Cyber Media
Topik Utama
Apa itu CSS ? Pernahkan Anda mendengar kata CSS sebelumnya? Mungkin diantara pembaca sudah pernah mendengarnya, atau bahkan baru tahu kata CSS saat membaca majalah ini. Mari kita mencoba mengenal CSS melalui
Aturan ini dapat mengendalikan semua parameter web mulai dari ukuran gambar, warna mouse over, warna table, warna border, dan masih banyak lagi. Selain itu, CSS juga dapat menampilkan halaman yang sama dengan gaya penataan letak berbeda dan dapat diikut sertakan pada file HTML. Untuk para blogger ataupun programmer, mungkin untuk ahli dalam CSS bukanlah suatu hal yang penting karena template bisa didownload.
Sejarah CSS
Cyber Media edisi kali ini. CSS merupakan kepanjangan dari Cascading Style Sheet, yaitu suatu aturan atau bahasa untuk mengendalikan beberapa komponen di dalam web agar terstruktur dan bertanggung jawab dalam layout yang enak di mata pengunjung melalui browser internet.
3
CSS menjadi bahasa standart pembuatan dokumen web pada tanggal 17 Agustus 1996 oleh World Wide Web Consortium (W3C). Tujuannya adalah untuk mengurangi pembuatan tag-tag baru dalam pengaturan tampilan web karena CSS diletakkan secara berurutan seperti bentuk hubungan ayahanak (parent-child).
Perkembangan Dalam perkembangannya, CSS mengalami perubahan dalam beberapa versi.
Media Sharing Bersama
Cyber Media •
Topik Utama
Versi pertama (CSS1) dikembangkan dengan lebih berfokus pada pemformatan dokumen HTML.
Pada versi ini mendukung pengaturan tampilan font (style, ketebalan), elemen (warna, posisi teks, background, gambar, table), text attributes (spasi antar baris, antar kata dan antar huruf), margin, border, dan lainnya.
•
Versi kedua (CSS2) muncul pada tahun 1998 sebagai wujud dari penyempurnaan CSS1.
Media Sharing Bersama
Versi ini dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan ke printer. CSS2 mendukung pengaturan posisi konten, table layout, media printer, access download, dan lainnya.
•
Versi ketiga (CSS3)
4
Cyber Media
Topik Utama berfokus pada desain websitenya. CSS3 mendukung penampilan animasi pada halaman website (animasi warna ataupun animasi 3D), kompatibel pada smartphone, media query, multiple background, border-radius, drop-shadow, border- image, CSS Math, CSS Object Model, dan masih banyak lagi.
Kelebihan CSS Penggunaan CSS memiliki beberapa kelebihan, yaitu : 1. Halaman web Anda menjadi SEO friendly. 2. Dapat disisipkan dalam HTML. 3. Dapat digunakan dengan JavaScript. 4. Meringankan beban loading web. 5. Mudah mengganti layout web dengan hanya merubah CSSnya saja.
5
Kekurangan CSS 1. 2. 3.
Tidak didukung oleh browser lama. Kurang cepat dipahami dibandingkan dengan bahasa pemrograman lain dan memerlukan waktu lama untuk menguasai. Tata letak dapat berubah jika dilihat di berbagai browser yang berbeda.
Demikian topik utama kali ini. Semoga menjadi pengenalan singkat yang dapat membuka gerbang semangat Anda. Selamat membaca. Author : Novi Fairuz Z Email : fairuz@internetclub.or.id
Media Sharing Bersama
Cyber Media
Tutorial
Tutorial Pembuatan Website dengan CSS dan Photoshop Pengenalan dasar CSS
Dalam tutorial kali ini akan dijelaskan mengenai apa itu CSS, fungsi CSS, dan cara pembuatan CSS. Pertama yaitu “apa itu CSS?” Cascading Style Sheet merupakan script yang digunakan untuk menata Markup Language (HTML) dari website itu sendiri. Kedua yaitu “fungsi dari CSS?” CSS juga digunakan untuk mempercantik tampilan dari sebuah web sehingga rapi dan menarik designnya. Secara mudah CSS juga digambarkan sebagai baju dari seorang manusia yang berfungsi sebagai pelengkap dan juga mempercantik tubuh manusia itu sendiri (HTML). CSS dapat diterapkan dengan dua cara, yaitu: 1. Internal Script CSS dimasukkan langsung ke dalam website yaitu ke dalam HTML yang akan dibuat atau didesain. 2. External Yang dimaksud dengan external yaitu memanggil file CSS yang sudah jadi ke dalam website yang ingin diberi efek CSS. Khusus untuk external alamat file CSS harus diletakkan diantara tag <head>. Dan untuk memanggil script CSS yang sudah dibuat yaitu menggunakan name class yang sudah dibuat dengan menggunakan tag tertentu . Contoh Penulisan script Internal <div id=”nama id’><div>, <div class =”nama class”></div> Script External <link rel =”stylsheet” href=” alamat file css” type =”text/css”/>
Media Sharing Bersama
6
Tutorial
Cyber Media
Setelah pengenalan CSS di atas. Langkah pertama yang dibutuhkan untuk membuat website sesuai dengan judul mengenai â&#x20AC;&#x153;Tutorial Pembuatan Website dengan CSS dan Photoshopâ&#x20AC;? langsung saja kita mulai.
Langkah Pertama Membuat desain terlebih dahulu dengan photoshop, caranya pilih file-new kemudian setting dengan ukuran width: 720px, height: 875px, resolution 72px/inch, dan background contens: transparent.
Pilih rounded retagle tool panel yang akan terlihat seperti gambar di bawah ini:
7
Media Sharing Bersama
Cyber Media
Tutorial
Buat bidang seperti gambar di bawah ini yang akan digunakan untuk background dan jangan lupa settingannya.
Klik kanan pada layer pertama, pilih Blending Option sampai muncul kotak dialog seperti di bawah ini.
Media Sharing Bersama
8
Cyber Media
Tutorial Kemudian sesuaikan tampilan background seperti ini :
Hasilnya:
9
Media Sharing Bersama
Cyber Media
Tutorial
Langkah kedua Setelah pembutan background, dibutuhkan tombol navigasi yang digunakan untuk menghubungkan antara halaman web satu dengan yang lainnya. Langkah-langkahnya hampir sama seperti di atas, yang dilakukan pertama pilih Rectangle Tool.
Lalu buat tombol navigasi sesuai keinginan atau samakan ukuran dengan gambar di bawah ini dan jangan lupa atur radius 5px dan berilah warna sesuai keinginan.
Media Sharing Bersama
10
Tutorial
Cyber Media
Kemudian copy tombol navigasi tadi sebanyak tiga kali yaitu dengan cara “ctrl+alt+shif “ dan geser ke kanan 3 kali. Nanti akan tampak seperti gambar di bawah ini.
Kemudian isi daftar navigasi tadi dengan memilih “Horizontal Type Tool”.
Isi text pada bidang untuk daftar navigasi dengan : Home, Artikel, About, Other.
11
Media Sharing Bersama
Cyber Media
Tutorial
Langkah ketiga pembuatan logo dan juga footer. Footer itu sendiri adalah bagian bidangnya berisi informasi singkat mengenai “copy right “ mesin pencari dan mengenai informasi kecil soal blog atau website itu sendiri. Buatlah seperti tadi, pilih “Rounded Rectangle Tool” lalu buat seperti gambar di bawah ini :
Media Sharing Bersama
12
Cyber Media
Tutorial Langkah selanjutnya yaitu prose slice pilih â&#x20AC;&#x153;Slice Toolâ&#x20AC;?.
Kemudian potong gambar yang sudah kita buat menjadi 7 bagian.
Kemudian pilih file klik save for Web & Devise.
13
Media Sharing Bersama
Cyber Media
Tutorial
Setelah itu klik tombol save dan akan muncul kotak dialog seperti di bawah ini dan klik save lagi Dengan format â&#x20AC;&#x153;HTML and Imagesâ&#x20AC;?.
Dan proses ini adalah akhir dari Layout web dan akan dilanjutkan dengan proses penambahan CSS di dreamwaver. Langkah pertama buka Dreamweaver kemudian buka file index.html. yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dream weaver delete gambar slice yang keenam atau gambar dengan nama index_06.gif, yaitu gambar yang digunakan untuk isi content. Setelah didelete maka tata letak web kita nanti akan berantakan.
Media Sharing Bersama
14
Tutorial
Cyber Media
Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga Anda dapat melihat Tag-tag Mark-up HTML seperti berikut :
Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS). <html> <head> <title>index1</title> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”> <style type=”text/css”> .content { background:url(images/index1_06.gif); height:600; padding:0px 10px 20px 10px; } </style> </head> <body bgcolor=”#FFFFFF” leftmargin=”0” topmargin=”0” marginwidth=”0” marginheight=”0”>
15
Media Sharing Bersama
Cyber Media
Tutorial
<!-- Save for Web Slices (index1.psd) --> <table id=”Table_01” width=”720” height=”875” border=”0” cellpadding=”0” cellspacing=”0” align=”center”> <tr> <td colspan=”4”> <imgsrc=”images/index1_01.gif” width=”720” height=”139” alt=””></td> </tr> <tr> <td> <imgsrc=”images/index1_02.gif” width=”123” height=”53” alt=””></td> <td> <imgsrc=”images/index1_03.gif” width=”197” height=”53” alt=””></td> <td> <imgsrc=”images/index1_04.gif” width=”196” height=”53” alt=””></td> <td> <imgsrc=”images/index1_05.gif” width=”204” height=”53” alt=””></td> </tr> <tr> <td colspan=”4” class=”content”><p>&nbsp;</p> </td> </tr> <tr> <td colspan=”4”> <imgsrc=”images/index1_07.gif” width=”720” height=”83” alt=””></td> </tr> </table> <!-- End Save for Web Slices --> </body> </html>
Media Sharing Bersama
16
Tutorial
Cyber Media
Dengan demikian maka kerangka website Anda sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view â&#x20AC;&#x153;Show Design Viewâ&#x20AC;? kemudian isi bagian kolom content dengan hal-hal yang ingin Anda publikasikan pada website Anda. Setelah selesai save index. html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file artikel.html dan yang terakhir other.html. Sehingga kini Anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama). Isi kolom content pada masing-masing file yang sudah Anda buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. Penulis contoh kan di bawah merupakan isi halaman utama.
17
Media Sharing Bersama
Cyber Media
Tutorial
Langkah terakhir setelah mengisi semua file adalah menghubungkan/ melink-an file yang satu dengan yang lain. Caranya mudah saja. Klik setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dilihat pada gambar di bawah :
Pilih file yang ingin dihubungkan. Lakukan hal yang sama dan hubungkan semua file. Selesailah project website menggunakan CSS yang Anda rancang sendiri. Selamat berkreasi. Author : Ailsa Email : ailsa@internetclub.or.id
Media Sharing Bersama
18
Pemrograman PHP Lanjutan Edisi Maret
VARIABEL
Cyber Media otomatis. Anda dapat menuliskan fungsi gettype() untuk mengetahui tipe data dari nilai yang akan Anda berikan.
Pendeklarasian Tipe Data Contoh penggunaan variabel
Variabel digunakan untuk menyimpan nilai atau data, seperti <?php $a = 0.3; String atau Number. Variabel $b = -3; dapat digunakan berulang-ulang $c = “Fatih”; echo “$a adalah type data “. gettype($a).”<br />”; echo “$b adalah type data “. gettype($b).”<br />”; echo “$c adalah type data “. gettype($c).”<br />”; ?>
dan nilainya dapat berubah-ubah. Penulisan variabel dimulai dengan simbol $. Cara penulisan variabel $nama_var = nilai ;
Contoh program tipe data Dalam PHP, tipe data tidak perlu dideklarasikan terlebih dahulu oleh programmer, akan tetapi sudah ditentukan secara
19
Media Sharing Bersama
Cyber Media 1.
Tipe Data Integer
Tipe data integer adalah tipe data yang berguna untuk menyimpan bilangan bulat, bukan desimal. Sebagai contoh (1), (2), (3), (4), (5), (-1), (-2), (-3), (-4) dan lain- lain. Tipe data ini memiliki range antara -2, 147, 483, 648 sampai dengan +2, 147, 483, 648 platform 32bit. 2. Tipe Data Double / Floating Point Number Tipe data floating point numbers biasa juga disebut dengan “double”, ” float” atau “real” adalah tipe data yang berguna untuk menyimpan bilangan desimal. Sebagai contoh (0.1), (1.3), (1.7), (1.8), (9.7), (2.4) dan lain-lain.
Media Sharing Bersama
Pemrograman Contoh Penulisan tipe data float <?PHP $a = 2.9; $b = 7.4; Echo”$a+$b”; ?>
Sekian pembahasan PHP Dasar kali ini. Semoga bermanfaat dan selamat mencoba. Author : Raclien Cameliana Email : raclien@internetclub. or.id
20
Puisi JUARA sebuah kata tak bermakna tapi resapilah, niscaya kata itu kan menjadi bara yang membakarmu. ini lah kata kata TAK BERMAKNA itu... saat mentari terbangun mulailah berlari mengejar kehangatannya saat rembulan bersinar, tetaplah berlari walau matamu ingin terpejam... berpikirlah s’lalu bahwa dipeluk matamu ada cahaya yang ingin kau gapai sejak dulu.... tak perlu mendengar suara sumbang. tutup telingamu, dan lanjutkan berlari tuk menggapai cahaya dan jika kau ingin menjadi JUARA bekerjalah lebih keras dari orang lain karena JUARA itu SATU bukan DUA atau TIGA,,.
21
Cyber Media TAMAN ASMORO tetesan air langit ini menemani langkah kita menuju “TAMAN CINTA” saat langkahmu mulai berat bersandarlah sejenak dipundakku kan ku hapus peluh keringat di dahimu lalu kan ku tuntun kembali kau ke “TAMAN CINTA” aku memang tak sempurna, tapi aku sempurna bila kau di sampingku... kini kita t’lah sampai di depan pintu gerbang “TAMAN CINTA” tinggal selangkah lagi kita kan menikmati keindahan “TAMAN CINTA” tetaplah bersamaku tuk menelusuri “TAMAN CINTA” ini Author : Boy Garden Email : sutaman@internetclub. or.id
Media Sharing Bersama
Cyber Media
Media Sharing Bersama
Komik
22
Cyber Media
Kesehatan
Bahaya Begadang Bagi Kesehatan Tubuh Setiap orang pasti pernah mendengar kata â&#x20AC;&#x153;Begadangâ&#x20AC;? atau bahkan dari Anda sering melakukan hal itu. Rubrik kesehatan kali ini akan mengulas mengenai bahaya begadang. Kesehatan tidak bisa tergantikan oleh apapun. Kita harus belajar untuk menjaga kesehatan agar tetap sehat dan semangat menjalani aktifitas. Salah satu kegiatan yang dapat merusak kesehatan kita adalah begadang. Seperti apakah efek samping dari begadang? Sewaktu muda tidak akan terasa apa- apa, tetapi setelah tua, barulah akan menyesal. Maka dari itu kali ini akan berbagi hal tentang bahaya begadang. Langsung saja kita baca ulasan berikut ini. 1. Mengurangi Konsentrasi. Konsentrasi Anda akan terus menerus berkurang secara perlahan. Apakah ini masalah? Tentu saja. Dengan begitu produktivitas
23
Anda akan berkurang, padahal Anda sadar kalau Anda masih sangat muda dan masih mampu untuk bekerja keras.
2.
Mudah Terserang Penyakit.
Percayakah Anda? Tim medis di seluruh dunia sudah berani membuktikan kalau begadang bisa membunuh sel Antibodi. Dengan begitu tubuh Anda tidak akan memiliki penangkal virus. Bersamaan dengan itu, Anda akan sangat mudah terkena penyakit apapun.
Media Sharing Bersama
Cyber Media
Kesehatan
3. Cepat Tua. Anda akan terlihat lesu di segala kondisi. Akibatnya Anda jadi tidak energik lagi. Dengan begitu akan banyak orang yang menilai anda sudah tua.
begadang, biasanya tidak akan lepas dari makanan ringan. Padahal makan di malam hari atau ngemil bisa membuat Anda gemuk. Percayalah!
4. Mudah Stres. Masih berhubungan dengan nomor 3, Anda akan mudah stres. Anda akan sering merasakan beratnya beban hidup ini. Dengan banyak begadang, maka otak Anda akan sulit fresh.
Author : Maman Email : sutaman@internetclub. or.id
5. Gemuk Malam hari merupakan waktu dimana sistem pencernaan bisa mencerna â&#x20AC;&#x2DC;lebihâ&#x20AC;&#x2122; dibanding siang hari. Anda yang terbiasa
Media Sharing Bersama
24
Blog Walking
Cyber Media
Bocah Poris Blog
Blog ini berisi segala macam tutorial mengenai bahasa pemograman dan bahasan lainnya. Di blog ini juga mengulas tentang CSS dasar sampai ke tingkat advance. Ingin tahu lebih jelasnya mengenai blog ini silahkan kunjungi : www.bocahporis.blogspot.
Media blogger
Blog ini mengulas tentang SEO tetapi di samping itu juga terdapat tutorial dasar membuat tampilan sebuah website dengan menggunakan CSS. Bagi Anda yang ingin tahu lebih dalam mengenai CSS dapat mengujungi blog tersebut dengan alamat sebagai berikut : www.impoint.blogspot.com.
25
Media Sharing Bersama
Cyber Media
Blog Walking
Panduan Template Blog
Blog yang mengulas tentang cara mudah dalam membuat sebuah blog dari dasar. Mulai HTML, CSS dan variasi blog. Kunjungi saja www.panduantemplateblog.blogspot.com dan mulailah berkreasi dalam membuat blog.
Tekno Life
Blog ini banyak mengulas tentang HTML dan CSS. Dari CSS dasar sampai perkembangannya. Ingin belajar mengenai CSS kunjungi saja www.tecno-yes.blogspot.com.
Author : Arwan N Email : arwan@internetclub.or.id
Media Sharing Bersama
26
Multimedia
Indirect Lighting Semangat Pagi! Pada edisi kali ini, rubrik multimedia akan membahas mengenai Indirect Light. Langsung saja ya. Yang akan dibahas di sini adalah mengenai lighting tetapi menggunakan salah satu objek pada blender. Objek yang akan digunakan adalah objek cube yang nantinya akan kita jadikan lampu. • Oke langkah pertama, kita buka dulu blender application. Setelah dibuka, klik add pilih mesh kemudian klik cube pada menu kiri atas atau bisa juga menggunakan shorcut dengan menekan sift+A dan pilih Mesh klik cube.
Cyber Media di tengah permukaan berada di atas permukaan.
• Kemudian kita tambahkan lagi objek Plan dengan mentekan Sift+A, pilih mash klik plan.
• Besarkan objek Plan dengan menekan S (Scale) kemudian tarik keluar.
• Kubus yang tadi sudah kita add, tarik ke atas menuju sumbu Z agar kubus yang ada
27
Media Sharing Bersama
Cyber Media
Multimedia menjadi warna hitam. Caranya, klik saja terus sampai memilih warna hitam.
• Kita klik menu World pada menu di sebelah kanan.
• Selanjutnya kita centang pada Inderect Lighting.
• Pada control at horizon, kita ganti warna yang abu-abu
Media Sharing Bersama
• Kemudian lanjutkan pada sampling passes di ganti menjadi 5 sampling.
• Setelah semuanya selesai kita masuk ke materials dengan cara klik menu materials.
28
Multimedia
• Kubus yang tadi sudah kita siapkan, kita beri warna sesuai selera. Di sini penulis memberikan contoh warna merah.
Cyber Media • Oke. Coba kita lihat menggunakan view camera. Klik saja view yang ada pada menu bagian bawah. klik kamera.
• Jika posisi kamera sudah sesuai, langsung kita render saja dengan menekan tombol F12 pada keyboard.
• Pada bagian menu shading, di bawahnya ada emit. Pilih emit dan beri value 2.00, maka pada materials warnanya akan berubah menjadi terang. Semakin banyak value emit maka akan semakin terang objeknya. Lightingnya sudah jadi. Selamat mencoba dan selamat berkreasi. Author : Agung Sugondo Email : agungs@internetclub. or.id
29
Media Sharing Bersama
Cyber Media
Cyber Voice
Nama : Yoga Fakultas : Ekonomi Salam sapa : Buat anak-anak B1 jangan lupa selalu woles. Kritik saran : keamanan kampus harus ditingkatkan.
Nama : Ardi Fakultas : TI Salam sapa : Prend woles ya buat nyelesain masalahnya. Kritik saran : Info beasiswa harus lebih dipublikasikan lagi.
Nama : Ulfa Fakultas : Ekonomi Salam sapa : Buat bebebku selalu cinta sama aku ya.. Kritik saran : Perlu ada tempat yang hijau dikampus mugas...
Nama : Dyah Fakultas : Ekonomi Salam sapa : Buat anak-anak WC(Wanita Cantik) sehat selalu. Kritik saran : Kampus jangan pelit sama UKM donk.
Nama : Serli Fakultas : Ekonomi Salam sapa : Para dosen ngajarnya slow aja tho.. Kritik saran : kantin diperlebar donk, biar tambah nyaman .
Nama : Rico Fakultas : Ekonomi Salam sapa : Pokoknya seneng rewo-rewo. Kritik saran : Kampus harus menyediakan tempat parkir yang memadai.
Nama : Aska Fakulta s : TI Salam sapa : Buat para anak kendal sehat selalu. Kritik saran : Perlu perluasan basecamp UKM.
Nama : Budi Fakultas : TI Salam sapa : Cinta selalu ingat aku ya. Kritik saran : Perhatian kampus harus lebih lagi untuk UKM.
Media Sharing Bersama
30