PEMBUATAN WEBSITE SEBAGAI MEDIA PROMOSI PADA AMIKOM GAME DEV MENGGUNAKAN FRAMEWORK BOOTSTRAP NASKAH PUBLIKASI

Transkripsi

1 PEMBUATAN WEBSITE SEBAGAI MEDIA PROMOSI PADA AMIKOM GAME DEV MENGGUNAKAN FRAMEWORK BOOTSTRAP NASKAH PUBLIKASI disusun oleh Putri Anggraini Hendraswari kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2013 i

2 ii

3 DEVELOPING WEBSITE AS PROMOTION MEDIA ON AMIKOM GAME DEV USING FRAMEWORK BOOTSTRAP PEMBUATAN WEBSITE SEBAGAI MEDIA PROMOSI PADA AMIKOM GAME DEV MENGGUNAKAN FRAMEWORK BOOTSTRAP Putri Anggraini Hendraswari Sudarmawan Jurusan Sistem Informasi STMIK AMIKOM YOGYAKARTA ABSTRACT Technological developments so increasing rapidly. One of them is the creation of the world game that never runs out their follower. In this digital era, the game is no longer available in the conventional model. Many game house and communities who participated in the game world. Game developers in Indonesia increased. So public interested to have the experience of developing game. Created an idea to set up a gaming community in Yogyakarta called Amikom Game Dev, where the majority of the founders and members are students of STMIK AMIKOM Yogyakarta. Amikom Game Dev s passion are to explore and develop the potential of young people. Developing this website using Apache, Adobe Dreamweaver CS3, MySQL, Adobe Photoshop CS3, Bootstrap and PHP as the programming language. Developing this website can be information and promotion media of Amikom Game Dev community. Many facilities in this website, such as e- learning, online support, calendar events, and etc. So, the distribution of information about Amikom Game Dev will be efficient, accurate, and can be accessed anywhere, by anyone and at any time the user wants. Keywords : Website, Amikom Game Dev, Game, Framework Bootstrap iii

4 1. Pendahuluan Teknologi Internet telah mengubah wajah komunikasi dunia yang sejak lama didominasi oleh perangkat digital non-komputer, menjadi komunikasi komputer yang global. Teknologi internet, memungkinkan kita untuk dapat berhubungan satu sama lainnya dengan perangkat komputer tanpa dibatasi lagi oleh ruang dan waktu. Keberadaan Internet saat ini memberikan keuntungan secara langsung maupun tidak langsung kepada dunia bisnis, pendidikan, komunitas dan banyak lagi dari skala kecil hingga besar. Adanya fasilitas dalam internet memungkinkan data-data untuk disimpan, diambil dan dikirimkan secara mudah ke seluruh penjuru dunia dengan berbagai cara, data dan informasi yang ada dapat dihubungkan dengan mudah dan cepat hanya dengan menggunakan hyperlinks (penghubung virtual). Website dapat dijadikan media promosi yang paling efektif, efisien dan mudah dalam penyampaian informasi dan pengelolaan informasi. Hal ini yang akan digunakan oleh komunitas Amikom Game Dev, karena website ini dapat di akses 24 jam asalkan komputer yang dipergunakan terhubung dengan jaringan internet, dan informasi yang dicari didapatkan dengan mudah tanpa harus datang langsung ke lokasi sumber informasinya. Website komunitas ini juga menjadi salah satu alat penunjang, sebagai media untuk mendapatkan informasi di dunia internet. Profil komunitas, berita tentang Amikom Game Dev maupun seputar game development, review produk Amikom Game Dev, agenda Amikom Game Dev, download materi dan semua hal mengenai Amikom Game Dev dapat diakses melalui website ini. Sebagai komunitas game development baru, Amikom Game Dev perlu melakukan promosi agar makin dikenal masyarakat luas. 2. Landasan Teori 2.1 Konsep Dasar Informasi Dalam penulisan laporan penelitian ini, penulis akan memberikan beberapa teori umum yang berkaitan dengan judul penelitian yang telah diajukan. Berikut ini pemaparan dari teori-teori tersebut : Data Sistem Informasi mempunyai keterkaitan antara data dan informasi sebagai entitas penting pembentuk sistem informasi. Data merupakan nilai, keadaan, atau sifat yang berdiri sendiri lepas dari konteks lainnya. 1 1 Al Fatta, Hanif. Analisis Perancangan Sistem Informasi:Konsep Dasar Sistem. (Yogyakarta:Andi,2007). Hal 9. 1

5 2.1.2 Pengertian Informasi Sementara informasi adalah data yang telah diolah menjadi sebuah bentuk yang berarti bagi penerimanya dan bermanfaat dalam pengambilan keputusan saat ini atau mendatang Konsep Dasar Internet Internet Internet atau internetwork adalah sekumpulan jaringan berbeda yang saling terhubung bersama sebagai salah satu kesatuan sengan menggunakan berbagai macam protokol, salah satunya adalah protokol TCP / IP (Transmission Control Protocol / Internet Protocol) World Wide Web (WWW) World Wide Web biasa disebut dengan web merupakan sebuah sistem yang interlinked (kumpulan link atau saluran yang saling terhubung), akses dokumen hypertext melalui internet HTTP HTTP (Hypertext Transfer Protocol) merupakan aturan pengiriman informasi yang berupa hypertext (teks pada komputer yang memungkinkan user saling mengirimkan informasi (request-respon). HTTP adalah protokol atau aturan standar untuk mengakses dokumen HTML. HTTP dijalankan dengan cara klien mengirimkan permintaan (request) kepada server dan server membalas permintaan klien dengan respon yang diminta oleh klien Konsep Bahasa Pemrograman yang Digunakan HTML (Hypertext Markup Language) HTML atau Hypertext Markup Language adalah suatu format data yang digunakan untuk membuat dokumen hypertext (teks pada komputer yang memungkinkan user saling mengirimkan informasi (request-respon). Dokumen HTML harus disimpan dengan ekstensi.htm atau.html. HTML memiliki tag-tag yang telah didefinisikan untuk membuat halaman web. Penulisan tag-tag HTML dapat menggunakan huruf besar ataupun kecil karena HTML tidak case sensitive. 5 2 Davis (1995) dikutip oleh Hanif Al Fatta, Analisis Perancangan Sistem Informasi:Konsep Dasar Sistem, Hal 9. 3 Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 4 4 Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 4 5 Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 19 2

6 2.3.2 CSS (Cascading Style Sheets) CSS atau Cascading Style Sheets adalah suatu fasilitas untuk mempermudah pemeliharaan sebuah halaman web, dengan menggunakan CSS sebuah halaman web dapat diubah tampilannya tanpa harus mengubah dokumen HTML-nya JavaScript JavaScript adalah bahasa pemrograman yang berbasis pada bahasa pemrograman java. JavaScript adalah mengakses halaman pada HTML dan membuat aksi jika elemen-elemen pada HTML itu mengalamai perubahan, misalnya perubahan warna pada halamaan web begitu sebuah tombol di klik. JavaScript membuat sebuah halaman web menjadi lebih dinamis. JavaScript yang digunakan pada halaman web merupakan client side scripting yang berarti web browser mengidentifikasikan dan menjalankan skrip program yang disisipkan dalam dokumen web dan mungkin memperbarui tampilan halaman di komputer pemakai tanpa mengirimkan permintaan kepada web server. JavaScript merupakan bahasa yang case sensitive dan JavaScript dapat ditulis secara inline atau satu file dengan dokumen HTML atau dapat juga ditulis pada file terpisah dengan ekstensi.js PHP (Hypertext Preprocessor) PHP adalah script yang dijalankan di server. Jadi, konsepnya berbeda dengan JavaScript yang dijalankan pada sisi klien. Keuntungan pengguna PHP yaitu kode yang menyusun program tidak perlu dibagikan ke pemakai, yang berarti bahwa kerahasiaan kode dapat dilindungi. 2.4 Perangkat Lunak yang Digunakan Framework Bootstrap Framework sendiri merupakan suatu kertas / kerangka kerja dalam aplikasi web yang di dalamnya memiliki suatu potongan potongan program yang disusun (modul), sehingga programmer tidak perlu membuat kode dari nol, karena framework telah menyediakannya. Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Platform ini awalnya dikembangkan pada ajang Hackweek, sebuah perhelatan developer yang diadakan Twitter. Standarisasi platform tersebut sudah disempurnakan sejak saat itu. Kini, disebutkan Twitter memiliki kerangka kerja yang konsisten untuk mengembangkan aplikasi. Di Bootstrap sudah tersedia CSS, HTML, JQuery Plugi,n dan memiliki fitur 12-6 Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 45 7 Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 65 3

7 cloumn grid system dimana developer tidak perlu menghitung setiap ukuran kolom. Bootstrap pertama kali dirilis pada Agustus Gambar 2.1 Struktural Bootstrap Penjelasan : 1. Yang di dalam folder css Bootstrap-responsive.css : file ini digunakan untuk mensetting layout halaman website dan keunggulannya file ini dapat menyesuaikan sendiri ukuran website pada device yang digunakan seperti desktop, I-phone, tablet,dan lainnya. Bootstrap.css : file ini digunakan untuk mensetting keseluruhan style css di dalam bootstrap tersebut. Bootstrap-responsive.min.css dan bootstrap.min.css : merupakan file hasil compress sehingga ukuran file lebih diperkecil, fungsi tetap sama dengan hasilnya. 2. Yang di dalam folder img File pertama merupakan image icon yang digunakan untuk icon icon di bootstrap File kedua sama dengan yang sebelumnya, namun background yang digunakan berwarna putih sedangkan yang sebelumya menggunakan background hitam. 3. Yang di dalam folder js Bootstrap.js : merupakan file file pengaturan javascript yang mengatur semua event di dalam bootstrap. Bootstrap.min.js : merupakan file file hasil compress dari Bootstrap.js Jquery.js : file ini digunakan untuk memberikan sumber daya script di dalam Bootstrap.js 8 diunduh pada tanggal 12 January 2013 pukul

8 3. Analisis dan Perancangan Sistem 3.1. Sejarah Singkat Berdirinya Komunitas Amikom Game Dev Komunitas Amikom Game Dev merupakan komunitas yang berkecimpung di dunia game development yang terbentuk atas gagasan sederhana dari Saudara Agoes Tri Hariyanto sebagai salah satu mantan game developer dari sebuah game house asing ternama yang membuka cabang di Yogyakarta. Berawal dari gagasan sederhana inilah, beliau mengajak beberapa orang yang notabene mantan game developer yang pada awalnya bekerja di sebuah game house ternama tersebut untuk bekerja sama membangun sebuah komunitas yang bergerak di bidang game development. Kemudian terkumpulah beberapa founder yang mempunyai tujuan yang sama yakni ingin mengembangkan potensi mahasiswa STMIK AMIKOM Yogyakarta di bidang game development dengan menjadi sebuah wadah untuk mereka yang ingin belajar, menggali, mengembangkan dan sharing tentang ilmu pengetahuan seputar dunia game development ini. Pada 20 Januari 2012 diadakannya first meet di salah satu basement kampus STMIK AMIKOM Yogyakarta dan hari itu diresmikan sebagai hari lahir komunitas tersebut meskipun jumlah anggota aktif masih terbilang sedikit dan unofficiall AGD masih di basement kampus. Kemudian, pada bulan Juni 2012 komunitas tersebut menyewa sebuah rumah bertingkat dua yang kini disebut dengan Headquarter dimana berfungsi sebagai tempat untuk meeting guna koordinasi seluruh team produksi, team penjualan maupun event rangers. 3.2 Visi Amikom Game Dev Visi dari komunitas ini adalah menjadi salah satu komunitas di STMIK AMIKOM Yogyakarta yang dapat menggali, mengembangkan dan menyalurkan potensi mahasiswa di bidang game development. 3.3 Misi Amikom Game Dev 1. Mengembangkan minat dan bakat mahasiswa STMIK AMIKOM Yogyakarta di bidang game development. 2. Menyiapkan tenaga kerja IT professional di bidang game development Analisis Kebutuhan Sistem Untuk meningkatkan kualitas informasi yang diperlukan, suatu sistem informasi yang dapat diakses kapan saja dan dimana saja selama 24 jam, maka dibutuhkan teknologi berbasis website yang digunakan sebagai media informasi bagi Amikom Game Dev untuk dapat meningkatkan promosi komunitas. Analisis kebutuhan sistem dibagi menjadi dua yaitu kebutuhan fungsiona dan kebutuhan non fungsional. 5

9 3.4.1 Analisis Kebutuhan Fungsional Untuk merubah keadaan yang diinginkan dan sesuai dengan perkembangan diwaktu yang akan datang, Amikom Game Dev memerlukan peralatan yang efektif dan efisien dalam menangani pengolahan datanya. Informasi sangatlah penting untuk kelangsungan hidup sebuah komunitas. Saat ini penggunaan teknologi komputer sebagai sarana informasi merupakan cara yang sangat efektif dalam proses penanganan data. Amikom Game Dev membutuhkan sistem baru untuk membantu mempromosikan produk produknya dan publikasi kegiatan komunitas dimana sistem pengolahan datanya sudah terkomputerisasi. Dengan ini dapat diusulkan rancangan sistem baru yang diharapkan mampu memberikan kemudahan dalam pencatatan data kegiatan serta bisa meningkatkan pelayanan dan produktifitas kerja Amikom Game Dev untuk memenuhi kebutuhan sebagai berikut : 1. Marketing komunitas Amikom Game Dev bisa melakukan pengelolaan review produk terbaru yang biasanya dilakukan setiap dua sampai tiga bulan sekali. 2. Sistem dapat memberikan gambaran umum tentang kegiatan komunitas. a. Pengunjung dapat melihat visi, misi dan struktur organisasi komunitas Amikom Game Dev b. Pengunjung dapat melihat agenda seperti penjadwalan kelas untuk training, pendaftaran siswa baru, maupun event event. 3. Pengelolaan data calon siswa baru 4. Pengelolaan data materi e - learning Kebutuhan Non Fungsional Kebutuhan ini meliputi kebutuhan-kebutuhan pendukung untuk menjalankan aplikasi tersebut, diantaranya : Kebutuhan Operasional a. Kebutuhan Perangkat Keras Adapun perangkat keras yang digunakan penulis dalam mengembangan Aplikasi adalah : 1. Processor AMD Athlon II X Memory 2GB DDR 3 3. HDD 500GB SATA 4. DVD RW SATA 5. Casing Simbadda SIM X 6

10 6. LED 16 Philips 7. Keyboard dan Mouse Logitech 8. Canon E500 (Printer dan Scanner) 9. Card Reader 10. Stabilizer Servo Matsugawa 1000 b. Kebutuhan Perangkat Lunak Perangkat lunak yang digunakan dalam mengembangan aplikasi adalah : 1. Sistem Operasi yang digunakan Windows 7 2. Adobe Dreamweaver CS 5 sebagai web editor 3. Adobe Photoshop CS 5 sebagai graphic design editor 4. Apache sebagai web server 5. phpmyadmin sebagai database editor 6. MySQL 5.0 sebagai database 7. Mozilla Firefox 16.1 sebagai web browser 3.5 Analisis Kelayakan Sistem Analisis kelayakan digunakan untuk mempertimbangkan aspek aspek yang terkait dalam pembangunan sebuah sistem, sehingga dapat ditentukan apakah sistem yang dibuat tersebut lebih baik daripada sistem yang sudah ada atau bahkan sebaliknya. Apsek aspek yang digunakan sebagai patokan uji kelayakan dalam menguji layak atau tidak suatu sistem, diantaranya adalah analisis kelayakan teknologi, analisis kelayakan operasional, dan analisis kelayakan ekonomi Analisis Kelayakan Teknologi Teknologi yang digunakan dalam penerapan website komunitas ini dapat dikatakan telah mengikuti perkembangan zaman saat ini yang serba digital. Hal ini disebabkan penggunaan teknologi berbasis web yang mudah diakses kapan saja, dimana saja, dan oleh siapa saja sehingga informasi tentang komunitas dapat lebih cepat sampai kepada user yang membutuhkan. Software yang digunakan dalam membangun dan juga digunakan untuk akses sistem baru ini jelas tersedia di pasaran dan untuk mendapatkan juga sangatlah mudah dengan harga yang yang relative terjangkau. Hardware yang digunakan sebagai penunjang sarana internet pun saat ini sangat mudah didapatkan di pasaran dengan harga yang terjangkau pula, apalagi sekarang banyak ISP (Internet Service Provider) yang menyediakan layanan jaringan internet Analisis Kelayakan Operasional 7

11 Sistem ini tidak membutuhkan operator dengan keahlian khusus untuk dapat mengoperasikannya, hanya saja agar penggunaan sistem dapat lebih optimal maka bagian yang akan menangani atau mengatur sistem (admin) akan diberikan pelatihan untuk menambah kemampuan dasar dalam mengoperasikan sistem. Sistem ini dirancang sedemikian rupa agar mudah dioperasikan oleh user (user friendly), sehingga dapat memudahkan user dalam penggunaan sistem dan mudah dalam menyerap informasi yang diberikan oleh sistem. Sistem ini dapat dikatakan layak secara operasioanl, sebab proses arus data komunitas yang dihasilkan dapat didistribusikan lebih cepat dan akurat kepada user, selain itu tampilan informasi yang dihasilkan oleh sistem juga mudah dicerna oleh user (user friendly) sehingga dapat merasa nyaman ketika menyerap semua informasi yang dihasilkan oleh sistem Analisis Kelayakan Ekonomi Kelayakan ekonomi akan menganalisis biaya yang akan dikeluarkan oleh komunitas ini yang akan datang serta manfaat yang akan didapat dari penerapan sistem baru dibanding sistem lama, sehingga tidak terjadi pemborosan sumber daya lagi. 1. Komponen Biaya (Cost) Komponen biaya dalam hal ini adalah biaya yang berhubungan dengan pengembangan sistem informasi dalam bidang keuangan dapat diklasifikasikan ke dalam 3 kategori, yakni sebagai berikut : a. Biaya Pengadaan Yaitu semua yang terjadi sehubungan dengan memperoleh perangkat keras dan perangkat lunak, yang termasuk biaya pengadaan adalah biaya pembelian perangkat keras, perangkat lunak, domain, hosting dan koneksi internet. b. Biaya Proyek Biaya proyek yaitu untuk mengembangkan sistem termasuk penerapannya. Yang termasuk biaya proyek adalah biaya sistem analisis, web designer, dan web programmer. c. Biaya Operasi dan Perawatan Biaya operasi yaitu biaya yang dikeluarkan untuk membuat sistem yang beroperasi. Biaya perawatan yaitu biaya yang dikeluarkan untuk meerawat sistem dalam masa operasi. Misalnya biaya Overhead. Biaya perawatan perangkat keras dan biaya perangkat lunak. 2. Komponen Manfaat a. Keuntungan Berwujud (Tangible Benefits) 8

12 Keuntungan yang berupa penghematan, peningkatan di dalam komunitas yang diukur dalam bentuk satuan nilai uang. b. Keuntungan Tak Berwujud (Intangible Benefits) Keuntungan yang tidak dapat diukur dalam bentuk satuan nilai. Oleh karena itu pengukurannya dilakukan dengan taksiran Perancangan Sistem Dalam penelitian ini, perancangan sistem yang digunakan adalah model pendekatan struktural dan yang dibuat adalah system flowchart, context diagram, dan data flow diagram Bagan Alir Sistem Admin Website Amikom Game Dev Flowchart sistem merupakan bagan yang menunjukkan alur kerja atau apa yang sedang dikerjakan di dalam sistem secara keseluruhan dan menjelaskan urutan dari prosedur prosedur yang ada di dalam sistem. Berikut flowchart dari sistem ini : Gambar 3.1 Bagan Alir Sistem Admin Website Amikom Game Dev 9

13 Gambar 3.2 Bagan Alir Sistem Admin Website Amikom Game Dev (lanjutan 1) 10

14 Gambar 3.3 Bagan Alir Sistem Admin Website Amikom Game Dev (lanjutan 2) 3.8. Diagram Konteks Diagram ini menggambarkan secara umum proses yang ada dalam sistem. Dari diagram konteks bisa didapatkan gambaran interaksi antar pengguna melalui aplikasi web Amikom Game Dev ini. 11

15 Gambar 3.4 Diagram Konteks 4. Implementasi dan Pembahasan 4.1. Struktur Tabel Pada website ini terdiri dari tabel users (data admin), tabel agama, tabel agenda, tabel kategori_agenda, tabel divisi, tabel fasilitas, tabel materi, tabel prestasi, tabel produk, tabel PSB, dan tabel siswa Halaman Website Website Amikom Game Dev dibuat dengan 3 halaman yakni halaman admin, halaman siswa dan halaman guest Halaman Admininstrasi Halaman ini merupakan tata kelola isi website oleh administrator website. Semua isi website dapat dikelola disini Halaman Siswa Halaman ini muncul setelah siswa melakukan login. Halaman ini merupakan dashboard siswa guna melakukan download materi training Halaman Guest / Pengunjung Halaman ini bisa diakses oleh pengunjung siapapun. Di dalam halaman ini terdapat menu divisi, prestasi, produk, agenda dan PSB. 12

16 5. Penutup 5.1 Kesimpulan Kesimpulan yang bisa diambil adalah sebagai berikut : 1. Sistem sudah bisa melakukan input, edit, tambah, hapus dan tampil untuk semua fitur seperti agenda, produk, divisi, fasilitas, materi, dan agama. 2. Sistem sudah mampu menangani pendaftaran siswa baru secara online. 3. Sistem mampu melakukan upload dan download materi. 13

17 DAFTAR PUSTAKA Al Fatta, Hanif Analisis Perancangan Sistem Informasi. Andi Offset. Yogyakarta. Jogiyanto Analisis & Desain Sistem Informasi. Andi Offset. Yogyakarta. Kadir, Abdul Mastering Ajax dan PHP. Andi Offset. Yogyakarta. Kusrini Strategi Perancangan dan Pengelolaan Basis Data. Andi Offset. Yogyakarta. Shalahuddin, M, Rossa A.S Java di Web. Informatika. Bandung