PEMBUATAN WEBSITE SEBAGAI MEDIA PROMOSI PADA AMIKOM GAME DEV MENGGUNAKAN FRAMEWORK BOOTSTRAP
NASKAH PUBLIKASI
disusun oleh
Putri Anggraini Hendraswari 09.12.4335
kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2013 i
ii
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 elearning, 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
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 :
2.1.1
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
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.
2
2.2
Konsep Dasar Internet
2.2.1
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). 2.2.2
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.3 2.2.3
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
4
respon yang diminta oleh klien. 2.3
Konsep Bahasa Pemrograman yang Digunakan
2.3.1
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
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 6
dapat diubah tampilannya tanpa harus mengubah dokumen HTML-nya. 2.3.3
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.7 2.3.4
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
2.4.1
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
cloumn grid system dimana developer tidak perlu menghitung setiap ukuran kolom. Bootstrap pertama kali dirilis pada Agustus 2012.8
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
http://www.kresnagaluh.com/2012/08/bootstrap-mendesain-web-menjadi-lebih.html diunduh pada tanggal 12 January 2013 pukul 14.06
4
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. 3.4.
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
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 3.4.2
Kebutuhan Non Fungsional Kebutuhan ini meliputi kebutuhan-kebutuhan pendukung untuk menjalankan
aplikasi tersebut, diantaranya : 3.4.2.1 Kebutuhan Operasional a. Kebutuhan Perangkat Keras Adapun perangkat keras yang digunakan penulis dalam mengembangan Aplikasi adalah : 1. Processor AMD Athlon II X2 270 2. Memory 2GB DDR 3 3. HDD 500GB SATA 4. DVD – RW SATA 5. Casing Simbadda SIM X
6
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 1.7.1 sebagai web server 5. phpMyAdmin 3.1.3.1 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. 3.5.1
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.
3.5.2
Analisis Kelayakan Operasional
7
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. 3.5.3
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
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. 3.6.
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. 3.7.
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
Gambar 3.2 Bagan Alir Sistem Admin Website Amikom Game Dev (lanjutan 1)
10
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
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. 4.2.
Halaman Website Website Amikom Game Dev dibuat dengan 3 halaman yakni halaman admin,
halaman siswa dan halaman guest. 4.2.1
Halaman Admininstrasi Halaman ini merupakan tata kelola isi website oleh administrator website. Semua
isi website dapat dikelola disini. 4.2.2
Halaman Siswa Halaman ini muncul setelah siswa melakukan login. Halaman ini merupakan
dashboard siswa guna melakukan download materi training. 4.2.3
Halaman Guest / Pengunjung Halaman ini bisa diakses oleh pengunjung siapapun. Di dalam halaman ini
terdapat menu divisi, prestasi, produk, agenda dan PSB.
12
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
DAFTAR PUSTAKA Al Fatta, Hanif. 2007. Analisis Perancangan Sistem Informasi. Andi Offset. Yogyakarta. Jogiyanto. 1990. Analisis & Desain Sistem Informasi. Andi Offset. Yogyakarta. Kadir, Abdul. 2009. Mastering Ajax dan PHP. Andi Offset. Yogyakarta. Kusrini. 2006. Strategi Perancangan dan Pengelolaan Basis Data. Andi Offset. Yogyakarta. Shalahuddin, M, Rossa A.S. 2010. Java di Web. Informatika. Bandung. http://id.wikipedia.org/wiki/SQL http://www.kresnagaluh.com/2012/08/bootstrap-mendesain-web-menjadi-lebih.html https://dosen.amikom.ac.id/index.php/materi/Sudarmawan,%20MT
14
