LAPORANPRAKTEK KERJA INDUSTRIDICOMLABS USDI ITBJL.GANESHA 10
BANDUNG, JAWA BARAT
PEMBUATAN WEBSITE PORTOFOLIO DAN BURSA KERJA BIDANG DESIGN
GRAFIS MENGGUNAKAN FRAMEWORK CODE IGNITER DAN TWITTER BOOTSTRAP
Diajukan untuk memenuhi salah satu syarat kelulusan dari SMK
Negeri 1 CimahiOLEHNAMA: MUHAMMAD ARIQ FAKHRIZALNO. INDUK: 11008815
BIDANG KEAHLIAN: TEKNOLOGI INFORMASI DANKOMUNIKASIKOMPETENSI
KEAHLIAN: REKAYASA PERANGKAT LUNAK
SEKOLAH MENENGAH KEJURUAN NEGERI 1CIMAHI2014
LEMBAR PENGESAHAN DARI PIHAK INDUSTRIPEMBUATAN WEBSITE
PORTOFOLIO DAN BURSA KERJA BIDANG DESIGN GRAFIS MENGGUNAKAN
FRAMEWORK CODE IGNITER DAN TWITTER BOOTSTRAP
Karya Tulis ini telah di setujui oleh :
Pembimbing,
BUDI HARIYANTO, S.T.
Kepala Unit Sumber Daya InformasiComLabs - USDI ITB
IYAN SOFYAN, S.T., MBA
LEMBAR PENGESAHAN DARI PIHAK SEKOLAHPEMBUATAN WEBSITE PORTOFOLIO
DAN BURSA KERJA BIDANG DESIGN GRAFIS MENGGUNAKAN FRAMEWORK CODE
IGNITER DAN TWITTER BOOTSTRAP
Karya Tulis ini telah di setujui oleh :
Ketua Kompetensi Keahlian, Pembimbing,
AGUS NUGROHO, S.Pd, M.T.YULI PAMUNGKAS, S.P. NIP :
197808012008011004 NIP : 197007142008011007
MENGETAHUI :Kepala Sekolah Menengah Kejuruan Negeri 1Cimahi
Drs.H.Ermizul, M. PdNIP. 195701011982031024
1
KATA PENGANTAR
Puji syukur kehadirat Allah SWT, atas segala berkat, rahmat,
hidayah, serta inayah-Nya sehingga karya tulis ini dapat
terselesaikan. Shalawat serta salam semoga selalu tercurah kepada
nabi besar Muhammad SAW, serta kepada para keluarga, kerabat dan
pada pengikutnya hingga akhir jaman.Pada Laporan Praktek Kerja
Industri ini, penulis membawakan judul PEMBUATAN WEBSITE PORTOFOLIO
DAN BURSA KERJA BIDANG DESIGN GRAFIS MENGGUNAKAN FRAMEWORK CODE
IGNITER DAN TWITTER BOOTSTRAP Laporan Penelitian ini dimaksudkan
sebagai Tugas Akhir di Sekolah Menengah Kejuruan Negeri 1 Cimahi.
Pada kesempatan ini pula, penulis ingin menyampaikan rasa hormat
dan ucapan terima kasih yang sebesar-besarnya kepada pihak-pihak
yang selama ini telah memberikan bantuan dan dorongan kepada
penulis, baik secara langsung maupun tidak langsung, secara materil
maupun spiritual. Untuk itu penulis berterima kasih kepada yang
terhormat :1. Ibunda dan Ayahanda tercinta yang selalu mendoakan
serta memberikan perhatian dan kasih sayangnya yang tidak terhingga
bagi penulis selama penyusunan tugas akhir.2. Iyan Sofyan, S.T.,MBA
selaku Kepala ComLabs USDI ITB.3. Budi Hariyanto, S.T. selaku
pembimbing di ComLabs USDI ITB.4. Drs.H. Ermizul, M.Pd selaku
Kepala SMK Negeri 1 Cimahi.5. Agus Nugroho, S.Pd., M.T. selaku
Ketua Kompetensi Keahlian Rekayasa Perangkat Lunak.6. Yuli
Pamungkas, S.P. selaku guru yang telah memberikan bimbingan dan
saran sehingga tugas pembuatan karya tulis ini dapat
terselesaikan.7. Amiratusyadiah, S.Pd., M.T. selaku wali kelas
tingkat 4.8. Seluruh rekan-rekan Rekayasa Perangkat Lunak khususnya
angkatan 8.9. Semua pihak yang telah membantu dalam penyusunan
laporan praktek kerja industri ini yang tidak dapat disebutkan satu
persatu. Semoga orangorang yang telah membantu penulis, mendapat
balasan yang setimpal bahkan lebih banyak dan lebih baik oleh Allah
SWT. Jazakumullah khairon kasiron.Penulis menyadari bahwa dalam
penyusunan karya tulis ini masih banyak kesalahan dan kekurangan
dikarenakan keterbatasan kemampuan yang penulis miliki. Oleh karena
itu, penulis mengharapkan kritik dan saran yang bersifat membangun
sebagai bahan masukan penulis di masa yang akan datang.Akhir kata,
penulis mengucapkan terima kasih.
Cimahi, Januari 2014
Penulis
DAFTAR ISI
KATA PENGANTARiDAFTAR ISIiiiDAFTAR GAMBARviiiDAFTAR TABELx1BAB I
PENDAHULUAN11.1Latar Belakang Masalah11.2Tujuan21.3Pembatasan
Masalah21.4Sistematika Pembahasan32BAB II TINJAUAN
PERUSAHAAN/INSTANSI52.1Sejarah ITB52.2Sejarah Comlabs
USDI62.3Struktur Organisasi Perusahaan72.4Visi dan Misi
Perusahaan72.4.1Visi72.4.2Misi82.5Layanan Perusahaan82.5.1Layanan
Penyelenggaraan Training IT Reguler (CIC) &
Intensif82.5.2Layanan Akses Publik82.5.3Layanan Sarana dan
Peminjaman Ruangan92.5.4IT Helpdesk & Software
Legal92.5.5Community IT (COMIT)92.5.6FSL (Free IT Saturday
Lesson)92.5.7E-Learning102.5.8Sertifikasi CLNA102.6Disiplin
Kerja103BAB III LANDASAN TEORI113.1Interaksi Manusia dan
Komputer113.1.1Media Antarmuka Manusia dan Komputer123.1.2Tujuan
Antarmuka Manusia dan Komputer123.2Pengertian Website123.2.1Web
Statis133.2.2Web Dinamis133.3Web Server143.4Pengertian
Database143.5Pengertian Framework153.6Framework Twitter
Bootstrap163.6.1Struktur Folder Twitter Bootstrap173.6.2Contoh
Penggunaan Twitter Bootstrap183.7Framework CodeIgniter203.7.1
Kelebihan Codeigniter213.7.2 Fitur-Fitur Codeigniter213.7.3
Struktur Folder Codeigniter223.7.4 Alur Proses Aplikasi243.7.5
Pengertian Model View Controller (MVC)253.7.8 Contoh Penggunaan
CodeIgniter264BAB IV ANALISA DAN PERANCANGAN294.1 Analisa Kebutuhan
Sistem294.1.1 Analisa Sistem Portofolio294.1.2 Analisa Sistem
Lowongan Kerja294.1.3 Analisa Sistem Member304.1.4 Analisa Sistem
Perusahaan / Organisasi304.1.5 Analisa Sistem Pesan304.1.6 Analisa
Sistem Koneksi304.1.7 Analisa Sistem Surat Lamar304.1.8 Analisa
Sistem Rekomendasi314.1.9 Analisa Sistem Komentar314.1.10 Analisa
Sistem Kontak314.2Analisa Layout314.2.1 Analisa Layout Lowongan
Kerja324.2.2 Analisa Layout Portofolio334.2.3 Analisa Layout
Member334.2.4 Analisa Layout Daftar Member344.2.5 Analisa Layout
Beranda Userpanel354.2.6 Analisa Layout Informasi Lowongan Kerja
Userpanel354.2.7 Analisa Layout Informasi Portofolio
Userpanel364.2.8 Analisa Layout Informasi Member Userpanel374.2.9
Analisa Layout Perusahaan / Organisasi Userpanel374.2.10 Analisa
Layout Detail Informasi Lowongan Kerja384.2.11 Analisa Layout
Detail Informasi Portofolio394.2.12 Analisa Layout Detail Informasi
Member404.3 Perancangan Layout Beranda404.3.1 Perancangan Layout
Lowongan Kerja414.3.2 Perancangan Layout Portofolio424.3.3
Perancangan Layout Member424.3.4 Perancangan Layout Daftar434.3.5
Perancangan Layout Beranda Userpanel434.3.6 Perancangan Layout
Lowongan Kerja Userpanel444.3.7 Perancangan Layout Portofolio
Userpanel444.3.8 Perancangan Layout Member Userpanel454.3.9
Perancangan Layout Perusahaan / Organisasi Userpanel454.3.10
Perancangan Layout Detail Informasi Lowongan Kerja464.3.11
Perancangan Layout Detail Informasi Portofolio464.3.12 Perancangan
Layout Detail Informasi Member474.4 Perancangan Sistem474.4.1
Perancangan Sistem Daftar Member484.4.2 Perancangan Sistem Login
Member484.4.3 Perancangan Sistem Komentar494.4.4 Perancangan Sistem
Pencarian Lowongan Kerja494.4.5 Perancangan Sistem Upload
Portofolio504.4.6 Perancangan Sistem Pencarian dan Favorit
Perusahaan504.4.7 Perancangan Sistem Pencarian dan Follow
Member51
5BAB V IMPLEMENTASI DAN PENGUJIAN525.1 Layout525.1.1 Screenshot
Layout Beranda525.1.2 Screenshot Layout Lowongan Kerja535.1.3
Screenshot Layout Portofolio535.1.4 Screenshot Layout Member545.1.5
Screenshot Layout Daftar Member545.1.6 Screenshot Layout Beranda
Userpanel555.1.7 Screenshot Layout Informasi Lowongan Kerja555.1.8
Screenshot Layout Portofolio Userpanel565.1.9 Screenshot Layout
Member Userpanel565.1.10 Screenshot Layout Perusahaan /
Organisasi575.1.11 Screenshot Layout Detail Lowongan Kerja575.1.12
Screenshot Layout Detail Portofolio585.1.13 Screenshot Layout
Detail Informasi Member595.2Sistem595.2.1Konfigurasi
CodeIgniter595.2.2Kode Program Halaman Utama625.2.3Kode Program
Lowongan Kerja625.2.4Kode Program Upload Portofolio655.2.5Kode
Program Detail Lowongan Kerja665.2.6Kode Program Daftar
Member665.2.7Kode Program Portofolio685.2.8Kode Program
Member695.3Pengujian Sistem715.3.1Navigasi Utama715.3.2Halaman
Beranda725.3.3Halaman Lowongan Kerja725.3.4Halaman
Portofolio735.3.5Halaman Member735.3.6Halaman Daftar745.3.7Halaman
Beranda Userpanel745.3.8Halaman Lowongan Kerja
Userpanel755.3.9Halaman Portofolio Userpanel765.3.10Halaman
Perusahaan / Organisasi775.3.11Halaman Detail Member785.3.12Halaman
Detail Informasi Portofolio785.4Pengujian Data785.4.1Proses
Pengujian Pendaftaran Member795.4.2Proses Pengujian Upload
Portofolio795.4.3Proses Pengujian Komentar Portofolio805.4.4Proses
Pengujian Koneksi805.4.5Proses Pengujian Like
Portofolio805.4.6Rekab Hasil Pengujian816BAB
VI846.1Kesimpulan846.2Saran857DAFTAR PUSTAKA86
DAFTAR GAMBAR
Gambar 2.1 Logo Institut Teknologi Bandung6Gambar 2.2 Struktur
Organisasi ComLabs - USDI ITB7Gambar 3.1 Website Twitter
Bootstrap16Gambar 3.2 Folder Twitter Boostrap17Gambar 3.3 Struktur
Folder Twitter Boostrap17Gambar 3.4 Contoh Markup Twitter
Boostrap18Gambar 3.5 Grid Twitter Boostrap19Gambar 3.6 Icon Twitter
Boostrap19Gambar 3.7 Script Icon Twitter Boostrap19Gambar 3.8 Logo
CodeIgniter20Gambar 3.9 Struktur Folder CodeIgniter22Gambar 3.10
Struktur Folder Application Codeigniter23Gambar 3.11 Alur Proses
Data Pada Codeigniter24Gambar 4.1 Struktur Layout Beranda41Gambar
4.2 Struktur Layout Lowongan Kerja41Gambar 4.3 Struktur Layout
Portofolio42Gambar 4.4 Struktur Layout Member42Gambar 4.5 Struktur
Layout Detail Pelatihan43Gambar 4.6 Struktur Layout Beranda
Userpanel43Gambar 4.7 Struktur Layout Lowongan Kerja
Userpanel44Gambar 4.8 Struktur Layout Detail Portofolio
Userpanel44Gambar 4.9 Struktur Layout Member Userpanel45Gambar 4.10
Struktur Layout Perusahaan / Organisasi Userpanel45Gambar 4.11
Struktur Layout Detail Informasi Lowongan Kerja46Gambar 4.12
Struktur Layout Detail Informasi Portofolio46Gambar 4.13 Struktur
Layout Detail Informasi Member47Gambar 4.14 Flowchart Sistem Daftar
Member48Gambar 4.15 Flowchart Sistem Login Member48Gambar 4.16
Flowchart Sistem Komentar49Gambar 4.17 Flowchart Sistem Pencarian
Lowongan Kerja49Gambar 4.18 Flowchart Sistem Upload
Portofolio50Gambar 4.19 Flowchart Sistem Pencarian dan Favorit
Perusahaan50Gambar 4.20 Flowchart Sistem Pencarian dan Follow
Member51Gambar 5.1 Screenshot Layout Beranda52Gambar 5.2 Screenshot
Layout Lowongan Kerja53Gambar 5.3 Screenshot Layout
Portofolio53Gambar 5.4 Screenshot Layout Member54Gambar 5.5
Screenshot Layout Daftar Member54Gambar 5.6 Screenshot Layout
Beranda Userpanel55Gambar 5.7 Screenshot Layout Informasi Lowongan
Kerja55Gambar 5.8 Screenshot Layout Portofolio Userpanel56Gambar
5.9 Screenshot Layout Member Userpanel56Gambar 5.10 Screenshot
Layout Perusahaan / Organisasi57Gambar 5.11 Screenshot Layout
Detail Lowongan Kerja57Gambar 5.12 Screenshot Layout Detail
Portofolio58Gambar 5.13 Screenshot Layout Detail Informasi
Member59
DAFTAR TABEL
Tabel 2.1 Tabel Disiplin Kerja10Tabel 5.1 Pengujian Navigasi
Utama71Tabel 5.2 Pengujian Halaman Beranda72Tabel 5.3 Pengujian
Halaman Lowongan Kerja72Tabel 5.4 Pengujian Halaman
Portofolio73Tabel 5.5 Pengujian Halaman Pelatihan73Tabel 5.6
Pengujian Halaman Daftar74Tabel 5.7 Pengujian Halaman Beranda
Userpanel74Tabel 5.8 Pengujian Halaman Lowongan Kerja
Userpanel75Tabel 5.9 Pengujian Halaman Portofolio Userpanel76Tabel
5.10 Pengujian Halaman Perusahaan / Organisasi77Tabel 5.11
Pengujian Halaman Detail member78Tabel 5.12 Pengujian Halaman
Detail Informasi Portofolio78Tabel 5.13 Pengujian Pendaftaran
Member79Tabel 5.14 Pengujian Pendaftaran Upload Portofolio79Tabel
5.15 Pengujian Tambah Komentar Portofolio80Tabel 5.16 Pengujian
Koneksi80Tabel 5.17 Pengujian Like Portofolio80Tabel 5.18 Rekab
Hasil Pengujian81
x
BAB IPENDAHULUAN
Latar Belakang MasalahPada era sekarang ini, perkembangan
Teknologi dan Informasi yang semakin cepat dan akurat merupakan
kebutuhan yang tidak terpisahkan dalam kehidupan masyarakat,
terlebih lagi memasuki berbagai bidang kebutuhannya, mulai dari
individu, organisasi atau kelompok, maupun perusahaan. Salah satu
bentuk berkembangnya masyarakat adalah kebiasaan setiap harinya
yang selalu mengakses Internet, seiring dengan berkembangnya
pengguna Internet di dunia yang setiap harinya semakin bertambah,
banyak hal-hal yang dapat dijadikan sebagai sarana informasi.
Contohnya adalah mencari informasi lowongan kerja, portofolio serta
perusahaan atau organisasi yang bergerak dalam bidang design
grafis. WEBSITE PORTOFOLIO DAN BURSA KERJA BIDANG DESIGN GRAFIS
MENGGUNAKAN FRAMEWORK CODE IGNITER DAN TWITTER BOOTSTRAP ini dibuat
karena beberapa alasan yaitu kurang tersedianya sarana informasi
portofolio dalam bidang design grafis, kurang tersedianya sarana
dalam hal pencarian informasi lowongan kerja dalam bidang design
grafis kepada masyarakat luas, kurang tersedianya sarana dalam hal
relasi antara masyarakat yang memiliki pekerjaan bidang design
grafis, kurang tersedianya sarana yang tepat dan cepat dalam hal
melamar suatu lowongan kerja terhadap perusahaan atau organisasi
yang bergerak dalam bidang design grafis,kurang tersedianya sarana
dalam hal pencarian informasi perusahaan atau organisasi yang
bergerak dalam bidang design grafis, sulitnya melihat portofolio
pelamar dalam hal pengelolaan informasi pelamar lowongan pekerjaan,
serta kurang tersedianya sarana dalam hal pengiriman serta
pengelolaan informasi lowongan kerja bagi perusahaan atau
organisasi tertentu khususnya yang bergerak dalam bidang design
grafis.
TujuanTujuan pembahasan dari pembuatan aplikasi ini adalah : 1.
Merancang dan membuat layout dan desain antarmuka aplikasi.2.
Merancang dan membuat sistem pengelola data informasi lowongan
kerja bidang design grafis.3. Merancang dan membuat sistem
pengelola data informasi portofolio bidang design grafis.4.
Merancang dan membuat sistem pengelola data informasi member.5.
Merancang dan membuat sistem pengelola data informasi organisasi /
perusahaan yang bergerak dalam bidang design grafis.6. Merancang
dan membuat sistem front end dan userpanel agar bisa dijadikan
referensi oleh perusahaan.7. Memanfaatkan sarana Teknologi
Informasi sebagai media promosi.8. Memberikan sebuah karya yang
dijadikan acuan dalam pembuatan website selanjutnya.
Pembatasan MasalahDalam penulisan laporan praktek kerja industri
ini, penulis menyajikan judul Pada Laporan Praktek Kerja Industri
ini, penulis membawakan judul PEMBUATAN WEBSITE PORTOFOLIO DAN
BURSA KERJA BIDANG DESIGN GRAFIS MENGGUNAKAN FRAMEWORK CODE IGNITER
DAN TWITTER BOOTSTRAP. Berikut batasan-batasan masalah permasalahan
sebagai berikut :1. Membahas seputar antarmuka website mencakup
informasi organisasi atau perusahaan, informasi lowongan pekerjaan,
informasi portofolio dan informasi member yang bergerak dalam
bidang design grafis.2. Membahas seputar pencarian, pengiriman
serta pengelolaan informasi lowongan kerja dalam bidang design
grafis.3. Membahas seputar pencarian, pengiriman, apresiasi,
komentar serta pengelolaan informasi portofolio dalam bidang design
grafis.4. Membahas seputar pengiriman serta pengelolaan informasi
surat lamar lowongan pekerjaan.5. Membahas seputar pencarian serta
pengelolaan informasi rekomendasi lowongan pekerjaan.6. Membahas
seputar pencarian, pesan, koneksi serta pengelolaan informasi
member. Sistematika PembahasanDalam penyusunan laporan praktek
kerja industri ini, penulis akan dibagi menjadi beberapa bab agar
memudahkan pembahasan penelitian serta memudahkan dalam membaca dan
memahaminya. Penulis membagi menjadi 6 bab, yaitu sebagai berikut:
BAB I: PENDAHULUAN Bab ini membahas mengenai latar belakang
masalah, rumusan masalah, tujuan pembahasan, pembatasan masalah dan
sistematika pembahasan. BAB II: TINJAUAN PERUSAHAAN/INSTANSI Bab
ini berisi sejarah singkat perusahaan/instansi tempat melaksanakan
tempat prakerin.BAB III: LANDASAN TEORI Bab ini berisi tentang
teori-teori yang menjadi acuan/landasan dengan masalah yang
dibahas.BAB IV: ANALISA DAN PERANCANGAN Bab ini berisi tentang
analisa dan perancangan aplikasi yang dikerjakan ketika sedang
melaksanakan praktek kerja di perusahaan/instansi.BAB V:
IMPLEMENTASI DAN PENGUJIANBabi ini berisi tentang hasil aplikasi
yang akan diimplementasikan dengan melalui proses pengujian yang
dikerjakan ketika sedang melaksanakan praktek kerja di
perusahaan/instansi.
BAB VI: PENUTUP
10
Bab yang berisi kesimpulan dari hasil analisis/rincian pada BAB
IV dan BAB V yang dihubungkan dengan landasan teori pada BAB III,
dan saran harus bersifat membangun dan memberikan solusi dari
permasalahan.
BAB IITINJAUAN PERUSAHAAN/INSTANSI
Sejarah ITB Institut Teknologi Bandung (ITB) adalah sebuah
perguruan tinggi negeri yang berkedudukan di Kota Bandung. ITB
didirikan pada tanggal 2 Maret 1959. Sejak tahun 2012, ITB kembali
berstatus sebagai perguruan tinggi negeri, berubah dari status
sebelumnya sebagai perguruan tinggibadan hukum milik
negara(BHMN).Fakultas adalah unit pendidikan di ITB yang di
dalamnya terdapat beberapa Program Studi (dulu departemen), baik di
tingkat sarjana, magister, maupun doktor. Fakultas ITB adalah
sebagai berikut Fakultas Matematika dan Ilmu Pengetahuan Alam
(FMIPA) (Matematika, Fisika, Astronomi, Kimia), Sekolah Ilmu dan
Teknologi Hayati (SITH) - Program Sains (Biologi , Mikrobiologi),
Sekolah Ilmu dan Teknologi Hayati (SITH) - Program Rekayasa
(Rekayasa Hayati, Rekayasa Pertanian, Rekayasa Kehutanan), Sekolah
Farmasi (SF) (Sains dan Tekonologi Farmasi, Farmasi Klinik dan
Komunitas), Fakultas Ilmu dan Teknologi Kebumian (FITB) (Teknik
Geologi, Teknik Geodesi dan Geomatika, Meteorologi, Oseanografi),
Fakultas Teknik Pertambangan dan Perminyakan (FTTM) (Teknik
Pertambangan, Teknik Perminyakan, Teknik Geofisika, Teknik
Metalurgi), Fakultas Teknologi Industri (FTI) (Teknik Kimia, Teknik
Fisika, Teknik Industri, Manajemen Rekayasa Industri), Sekolah
Teknik Elektro dan Informatika (STEI) (Teknik Elektro, Teknik
Tenaga Listrik, Teknik Telekomunikasi, Sistem dan Teknologi
Informasi, Teknik Informatika), Fakultas Teknik Mesin dan
Dirgantara (FTMD) (Teknik Mesin, Teknik Aerotika dan Astronika,
Teknik Material), Fakultas Teknik Sipil dan Lingkungan (FTSL)
(Teknik Sipil, Teknik Lingkungan, Teknik Kelautan, Teknik dan
Pengelolaan Sumber Daya Air), Sekolah Arsitektur, Perencanaan, dan
Pengembangan Kebijakan (SAPPK) (Arsitektur, Perencanaan Wilayah dan
Kota), Fakultas Seni Rupa dan Desain (FSRD) (Seni Rupa, Kria,
Desain Interior, Desain Komunikasi Visual, Desain Produk) dan
Sekolah Bisnis dan Manajemen (SBM) (Manajemen,
Kewirausahaan).Selain fakultas, ITB juga memiliki sebuah galeri
seni yaitu Galeri Soemardja, fasilitas olah raga, dan sebuah Campus
Center. Di dekat kampus juga terdapat Masjid Salman untuk beribadah
dan aktivitas keagamaan umat Islam di ITB.
Gambar 2.1 Logo Institut Teknologi Bandung
Untuk mendukung pelaksanaan aktivitas akademik dan riset,
terdapat fasilitas-fasilitas pendukung akademik, dintaranya
Perpustakaan Pusat (dengan koleksi sekira 150.000 buku dan 1000
judul jurnal), Sarana Olah Raga Sasana Budaya Ganesha, Pusat
Bahasa, Pusat layanan komputer (ComLabs) dan Observatorium Bosscha
(salah satu fasilitas dari Kelompok Keahlian Astronomi FMIPA),
terletak 11 kilometer di sebelah utara Bandung. Rektor ITB saat ini
adalah Prof. Dr. Akhmaloka Dipl. Biotech untuk periode 2010-2014.
Moto dari perguruan tinggi negeri Institut Teknologi Bandung (ITB)
ini adalah In Harmonia Progressio yang artinya Kemajuan dalam
keselarasan. Sejarah Comlabs USDI ComLabs USDI adalah unit USDI ITB
yang berperan menjadi pusat layanan teknologi informasi di Institut
Teknologi Bandung. ComLabs berdiri sejak tahun sejak tahun 1999 di
bawah koordinasi Kepala Sub Direktorat TPB-ITB. Laboratorium ini
merupakan salah satu implementasi proyek DUE-LIKE TPB-ITB
(1999-2004). Sejak tahun 2005 ComLabs menjadi bagian dari Unit
Sumber Daya Informasi ITB (sebelumnya PSDI atau Pusat Sumber Daya
Informasi ITB) dan bertugas sebagai lembaga layanan dan
pengembangan Teknologi Informasi bagi civitas akademika ITB.
Sebagai pusat layanan teknologi informasi, ComLabs USDI ITB ini
memiliki beberapa situs web yang berisikan seputar kegiatan yang
telah dilakukan ataupun yang akan dilakukan dikemudian harinya di
ComLabs dan bisa diakses oleh siapapun, Berikut adalah link webnya:
1. Info Pelatihan ComLabs : http://training.comlabs.itb.ac.id2.
Info Course ComLabs : http://course.comlabs.itb.ac.id3. Info
Workshop : http://training.comlabs.itb.ac.idAdapun alamat lengkap
dari ComLabs USDI ITB yaitu beralamat di Gdg. ComLabs Lt. 1, Jl.
Ganesha No 10 Bandung 40132. Struktur Organisasi Perusahaan ComLabs
USDI-ITB memiliki struktur organisasi seperti yang tampak pada
gambar berikut.
Gambar 2.2 Struktur Organisasi ComLabs - USDI ITB
Visi dan Misi Perusahaan Visi ComLabs diakui sebagai institusi
layanan TI terbaik di level asia tenggara dalam rangka mendukung
program ITB menuju World Class UniversityMisi 1. Meningkatkan
kualitas sumber daya pengelola layanan TI yang mencakup informasi,
aplikasi, infrastruktur dan personil 2. Menyediakan layanan TI
terbaik kepada stakeholder ITB dalam mendukung pendidikan,
penelitian dan pengabdian masyarakat serta manajemen organisasi 3.
Memberikan solusi terbaik bagi pengembangan SDM profesional dan
komunitas di bidang TI pada tingkat nasional dan regional 4.
Melaksanakan program yang dapat menjamin pencapaian visi dengan
meningkatkan ketahanan dan keberlanjutan organisasi serta
kesejahteraan personil. Layanan Perusahaan Layanan Penyelenggaraan
Training IT Reguler (CIC) & Intensif Training IT merupakan
salah satu bentuk kerja sama antara ComLabs dengan Instansi lain
dalam hal pelatihan IT. Disini ComLabs membuat sebuah pelatihan
ataupun menerima permintaan untuk melatih para staff ataupun
orang-orang yang ditujuk oleh sebuah instansi. Pelatihan yang
diberikan berupa hal-hal mengenai IT yang berhubungan secara
langsung dengan bidang pekerjaan para peserta training. Misalnya
pelatihan mengenai beberapa software seperti Autocad, pelatihan IT
dasar, pelatihan IT terapan. Layanan Akses Publik Layanan akses
publik atau yang dikenal dengan divisi akses publik (DAP) merupakan
suatu layanan yang ada di ComLabs yang diperuntukan bagi seluruh
Mahasiswa ITB yang ingin mengakses Internet. Layanan ini mirip
dengan warnet, dimana mahasiswa mengakses dapat mengakses Internet
atau pun layanan lain seperti printing.
Layanan Sarana dan Peminjaman Ruangan ComLabs memiliki beberapa
ruangan yang dilengakapi dengan fasilitas komputer dan Internet
yang biasa digunakan oleh para dosen di ITB untuk memberikan materi
pada mahasiswanya.Selain itu ruangan ini pun dapat dipergunakan
untuk kegiatan workshop-workshop IT. IT Helpdesk & Software
Legal Layanan yang diberikan ComLabs dalam hal service perangkat
IT. Baik itu dalam hal perbaikan ataupun perawatan berkala.
Dilakukan oleh orang-orang yang berpengalaman dalam bidang IT
service. Layanan ini juga menerima permintaan untuk melakukan
penginstalan software-software asli semisal Windows Original.
Community IT (COMIT) Tempat berkumpulnya orang-orang yang bekerja
atau menyukai IT untuk saling bertukar informasi. ComLabs
memfasilitasi mereka untuk saling berkumpul dan melakukan workshop
IT. FSL (Free IT Saturday Lesson) Free IT Saturday Lessons adalah
program non profit yang diselenggarakan oleh ComLabs USDI-ITB untuk
mensosialisasikan perkembangan teknologi informasi kepada
masyarakat dalam rangka meningkatkan pengetahuan dan mencerdaskan
masyarakat dalam bidang teknologi informasi. Free IT Saturday
Lessons merupakan program yang terbuka untuk segenap masyarakat dan
tidak dipungut biaya. Program ini diselenggarakan di ComLabs
USDI-ITB setiap hari sabtu mulai pukul 09.00 s.d 15.00 (fleksibel).
Materi yang disampaikan meliputi paparan tentang tren, update,
perkembangan, sosialisasi, publikasi, shortcourse, workshop, mini
seminar, forum diskusi tentang ragam teknologi informasi dan
pemanfaatannya di Indonesia. Saat ini materi yang telah disampaikan
meliputi networking, security, teleconference, geographic
information system (GIS), e-learning, multimedia, digital library,
sistem operasi, school on Internet, sistem informasi ITB. Pemateri
berasal dari akademisi, profesional, dan vendor. ComLabs terbuka
untuk penawaran kerja sama penyelenggaraan Free IT Saturday Lessons
dengan segenap institusi/akademik/vendor/provider.
E-LearningE-Learning adalah sistem pembelajaran jarak jauh yang
memanfaatkan teknologi komputer, jaringan komputer atau Internet.
E-learning ini memungkinkan peserta didik untuk belajar melalui
komputer di tempat mereka masing-masing. Mereka tidak harus selalu
datang mengikuti pembelajaran di kelas. Sertifikasi CLNA
Sertifikasi ini diberikan pada mereka yang mengikuti pelatihan CLNA
secara intensif. Disiplin Kerja Adapun disiplin kerja dari
pelaksanaan PRAKERIN di ComLabs USDI-ITB dapat dilihat pada Tabel
2.1Tabel 2.1 Tabel Disiplin KerjaHari Jam Masuk Istirahat Jam
pulang
Senin 08.00 12.00-13.00 16.00
Selasa 08.00 12.00-13.00 16.00
Rabu 08.00 12.00-13.00 16.00
Kamis 08.00 12.00-13.00 16.00
Jumat 08.00 11.00-13.00 16.00
Sabtu08.00-12.00
Minggu---
BAB IIILANDASAN TEORI
1. 2. 3. 3.1 Interaksi Manusia dan KomputerIMK atau Interaksi
manusia dan komputer atau HCI (Human Computer Interaction) adalah
disiplin ilmu yang mempelajari hubungan antara manusia dan komputer
yang meliputi perancangan, evaluasi, dan implementasi antarmuka
pengguna komputer agar mudah digunakan oleh manusia. Ilmu ini
berusaha menemukan cara yang paling efisien untuk merancangpesan
elektronik. Sedangkan interaksi manusia dan komputer sendiri adalah
serangkaian proses, dialog dan kegiatan yang dilakukan oleh manusia
untuk berinteraksi dengan komputer yang keduanya saling memberikan
masukan dan umpan balik melalui sebuah antarmuka untuk memperoleh
hasil akhir yang diharapkan.Interaksi Manusia dan Komputer sendiri
memiliki 3 karakteristik, yaitu useful, usable, dan used. Memiliki
ciri yaitu produk tersebut harus berguna untuk memenuhi kebutuhan
manusia, sebagai contohnya pada masa lalu manusia mengetik atau
membuat surat hanya dengan menggunakan mesin ketik, tapi pada zaman
sekarang karena teknologi semakin maju, maka dibuatlah komputer
yang juga bisa digunakan untuk mengetik bahkan cenderung lebih
memudahkan. Hubungan antara interaksi manusia dan komputer dengan
PEMBUATAN WEBSITE PORTOFOLIO DAN BURSA KERJA BIDANG DESIGN GRAFIS
MENGGUNAKAN FRAMEWORK CODE IGNITER DAN TWITTER BOOTSTRAP ini adalah
pada bagian desain dan sistem website itu sendiri dimana jika
memahami konsep dari IMK tersebut maka desain serta sistem yang
dihasilkan akan maksimal, sebagai contoh apabila desain dan sistem
itu user friendly dan good usability, maka pengguna yang mengakses
website tersebut akan berjalan maksimal baik dalam hal desain serta
sistem website tersebut.
3.1.1 Media Antarmuka Manusia dan KomputerBeberapa contoh media
antarmuka manusia dan komputer yang bisa digunakan adalah :1. Media
Tekstual / CUI (Command User Interface)Bentuk sederhana dialog atau
komunikasi antara manusia dan komputer yang hanya berisi teks dan
kurang menarik. Salah satu contoh antarmuka manusia dan komputer
berbentuk teks yang menggunakan bahasa pemrograman PASCAL adalah
readln dan writeln. 2. Media Grafis / GUI (Graphical User
Interface)Bentuk dialog atau komunikasi antara manusia dan komputer
yang berbentuk grafis dan sangat atraktif. Contoh antarmuka manusia
dan komputer yang berbentuk grafis menggunakan pemrograman visual
seperti Adobe Dreamweaver dan Netbeans untuk pembuatan
Website.3.1.2 Tujuan Antarmuka Manusia dan KomputerTujuan utama
dari IMK atau interaksi manusia & komputer adalah menghasilkan
sistem komputer yang mampu digunakan dengan baik oleh pengguna
(good usability) melalui desain antarmuka dengan memperhatikan
beberapa hal penting seperti memahami faktor-faktor yang membuat
manusia menggunakan teknologi, mengembangkan teknik-teknik yang
memungkinkan untuk membangun sistem yang sesuai dengan tujuan serta
mancapai interaksi yang aman, efektif dan efisien. Selain desain
antarmuka, karakteristik manusia tentu saja sangan mempengaruhi
IMK. 3.2 Pengertian WebsiteWebsite atau sering disingkat dengan
istilah situs adalah sejumlah halaman web yang memiliki data
informasi yang saling terkait, terkadang disertai pula dengan
berkas-berkas gambar, video, atau jenis-jenis berkas lainnya.
Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server
web yang dapat diakses melalui jaringan seperti internet, ataupun
jaringan wilayah lokal (LAN) melalui alamat internet yang di kenali
sebagai URL. Gabungan atas semua situs yang dapat di akses public
di internet disebut pula sebagai World Wide Web (WWW).
Dalam sebuah website ini bisa memuat beberapa halaman sekaligus,
sehingga banyak digunakan untuk pusat informasi. Secara garis
besar, website bisa digolongkan menjadi 2 bagian yaitu : 3.2.1 Web
StatisWebsite Statis adalah website yang memiliki isi tindakan
dimaksudkan untuk diperbarui secara berkala sehingga pengaturan
ataupun pemutakhiran isi atas situs web tersebut dilakukan secara
manual.Website statis biasanya berupacompany profilesederhana,
brosur online, atau situs-situs yang berisi informasi sederhana
yang tidak perlu dirubah. Disana hanya ada beberapa halaman saja
dan kontennya hampir tidak pernah berubah karena konten langsung
diletakkan dalam file HTML saja.
3.2.2 Web DinamisWebsite Dinamis merupakan website yang secara
spesifik di desain agar isi yang terdapat dalam situs tersebut
dapat diperbarui secara berkala dan mudah. Situs berita adalah
salah satu contoh jenis situs yang umumnya mengimplementasikan
website dinamis. Tujuannya pun beragam, tergantung jenis websitenya
itu sendiri. Untuk toko online, sudah tentu dinamika website adalah
penambahan/pengurangan produk untuk dijual. Bagi para blogger,
sudah tentu membuat tulisan-tulisan. Oleh karena itu Website
Dinamisbiasanya memilikifront-enddanback end.Front endadalah
halaman-halaman situs yang bisa diakses pengunjung,
sedangkanback-endyang biasa disebutCMS(Content Management System)
atau biasa juga disebutAdmin Area, atau didunia blog dikenal dengan
namaDashboard, berfungsi untuk mengupdate halaman-halamanfront-end.
Jadi halamanback end hanya bisa diakses oleh pemilik atau pengelola
situs dengan usernamedanpasswordyang telah ditetapkan.Ada berbagai
macam bentuk halamanback-endyang dibuat sesuai kebutuhan.
Padaback-endatauadmin areaini kita bisa merubah isi tulisan-tulisan
pada halaman situs, menambah tulisan atau artikel baru, mengupdate
katalog produk seperti pada toko online, mengupdate portfolio,
memanage iklan yang tampil di halaman situs jika ada, mengontrol
user atau member situs dan lain-lain, berbeda dengan website
statis,pembuatan websitedinamis jauh lebih rumit dan komplikatif
tergantung fitur-fitur yang diinginkan. Hal tersebut dikarenakan
untuk membangun sebuah web dinamis tidak cukup dengan bahasa HTML
biasa tapi juga harus mengabungkan antaraWeb server (Apache, IIS,
Tomcat),bahasa pemograman/scriptyang bekerja di sisi server
tersebut(PHP, Perl, ASP dll)sertadatabase.
3.3 Web ServerWeb Server adalah sebuah aplikasi server yang
melayani permintaan HTTP atau HTTPS dari browser dan mengirimkannya
kembali dalam bentuk halaman-halaman web. Halaman-halaman web yang
dikirim oleh web server biasanya berupa file-file HTML dan CSS yang
nantinya akan di parsing atau ditata oleh browser sehingga menjadi
halaman-halaman web yang bagus dan mudah dibaca.Beberapa Web Sever
yang banyak digunakan di Internet antara lain Apache Web Server
(http://www.apache.org). Apache Web Server adalahserver webyang
dapat dijalankan di banyak sistem operasi (Unix,BSD,Linux,Microsoft
WindowsdanNovell Netwareserta platform lainnya) yang berguna untuk
melayani dan memfungsikan situs web. Protokol yang digunakan untuk
melayani fasilitas web/www ini menggunakan HTTP.Apache memiliki
fitur-fitur canggih seperti pesan kesalahan yang dapat
dikonfigurasi, autentikasi berbasisbasis datadan lain-lain. Apache
juga didukung oleh sejumlahantarmuka pengguna berbasis grafik(GUI)
yang memungkinkan penanganan server menjadi mudah, Apache
merupakanperangkat lunak sumber terbukadikembangkan oleh komunitas
terbuka yang terdiri dari pengembang-pengembang dibawah
naunganApache Software Foundation.3.4 Pengertian DatabaseDatabase
atau yang lebih dikenal dengan Basis data adalah kumpulan informasi
yang disimpan dalam komputer secara sistematik sehingga dapat
diperiksa menggunakan suatu program komputer untuk memperoleh
informasi dari Database tersebut. Perangkat lunak yang digunakan
untuk mengelola dan menganggil query Database, disebut sistem
manajemen basis data (database management system) atau yang biasa
disingkat dengan DBMS. Sistem Database dipelajari dalam ilmu
informasi.3.4.1 MySQLMySQL adalah sebuah perangkat lunak sistem
manajemen basis data SQL atau DBMS yang multithread, multi-user,
dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuar
MySQL tersedia sebagai perangkat gratis dibawah lisensi GNU General
Public License (GPL), tetapi mereka juga menjual dibawah lisensi
komersil untuk kasus-kasus dimana penggunaannya tidak cocok dengan
penggunaan GPL.MySQL adalah sebuah implementasi dari sistem
manajemen basis data relasional (RDBMS) yang didistribusikan secara
gratis dibawah lisensi GPL (Gereral Public License). Setiap
pengguna dapat secara bebas menggunakan MySQL, namun dengan batasan
perangkat lunak tersebut tidak boleh dijadikan produk turunan yang
bersifat komersial. MySQL sebenarnya merupakan turunan salah satu
konsep utama dalam basis data yang telah ada sebelumnya: SQL
(Structured Query Language). SQL adalah sebuah konsep pengoperasian
basis data, terutama untuk pemilihan atau seleksi dan pemasukan
data, yang memungkinkan pengoprasian data dikerjakan dengan mudah
secara otomatis.3.5 Pengertian FrameworkFramework adalah kerangka
kerja untuk membuat suatu aplikasi. Framework juga dapat diartikan
sebagai kumpulan kode (class dan function) yang dapat membantu
developer ataupun programmer dalam menangani berbagai
masalah-masalah dalam pemrograman sehingga developer lebih fokus
dan lebih cepat membangun aplikasi. Framework adalah komponen
pemrorgaman yang siap dipakai kapan saja, sehingga programmer tidak
harus membuat kode yang sama untuk tugas yang sama. Dibawah ini
merupakan beberapa kelebihan dari Framework, yaitu :
1. Memudahkan dalam pembuatan dan pengembangan aplikasi.Dengan
adanya framework akan lebih mempermudah memahami mekanisme kerja
dari sebuah aplikasi. Ini tentunya akan sangat membantu proses
pengembangan sistem yang dilakukan secara tim.2. Menghemat waktu
pengerjaan aplikasiDengan memakai framework, maka proses pengerjaan
aplikasi yang akan dibuat akan menjadi lebih cepat, karena dengan
framework banyak library dan module yang sudah disediakan dan siap
pakai. 3. Efisien dalam membagi tugasDengan menggunakan framework,
maka pembagian tugas didalam tim akan menjadi mudah. Karena tim
hanya perlu memahami pola kerja framework tersebut dan bisa
mengerjakan bagiannya masing-masing.3.6 Framework Twitter
BootstrapTwitter Bootstrap adalah sebuah alat bantu untuk membuat
sebah tampilan halaman website yang dapat mempercepat pekerjaan
seorang pengembang website atau pengembang desain halaman website.
Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki
tampilan yang sama / mirip dengan tampilan halaman Twitter atau
desainer juga dapat mengubah tampilan halaman website sesuai dengan
kebutuhan.
Gambar 3.1 Website Twitter BootstrapTwitter Bootstrap dibangun
dengan teknologi HTML dan CSS yang dapat membuat layout halaman
website, tabel, tombol, form, navigasi, dan komponen lainnya dalam
sebuah website hanya dengan memanggil fungsiCSS(class) dalam
berkasHTMLyang telah didefinisikan. Selain itu juga terdapat
komponen-komponen lainnya yang dibangun menggunakanJavaScript.Untuk
menggunakan Twitter Bootstrap, silakan mendownload terlebih dahulu
di websitenya : http://getbootstrap.com.
Gambar 3.2 Folder Twitter Boostrap
3.6.1 Struktur Folder Twitter BootstrapBerikut isi dari 3 folder
aset tersebut berikut penjelasannya:
Gambar 3.3 Struktur Folder Twitter Boostrap
Berikut ini adalah penjelasan dari Struktur Folder Twitter
Bootstrap:1. css/bootstrap.cssberisi style dasar (reset, layout,
typography, button) bawaan bootstrap.2.
css/bootstrap-responsive.cssberisi setting responsive desain. Kita
bisa memakainya bersama bootstrap.css untuk membuat style bootstrap
menjadi responsive.3. css/bootstrap-min.cssdan4.
css/bootstrap-responsive-min.cssversi compressed dari bootstrap.css
dan bootstrap-responsive.css5. img/glyphicons-halflings.pngdan6.
img/glyphicons-halflings-white.png, adalah icon yang digunakan pada
bootstrap dengan teknik spriting.7. js/bootstrap.jsdan8.
js/bootstrap-min.jsadalah javascript untuk mengaktifkan berbagai
fitur bawaan bootstrap.3.6.2 Contoh Penggunaan Twitter
BootstrapBerikut contoh markup beserta penjelasannya yakni seperti
gambar berikut:
Gambar 3.4 Contoh Markup Twitter BoostrapTwitter Bootstrap
menggunakan normalize.css untuk reset element HTML. normalize.css
digunakan untuk tujuan menyamakan rendering semua elemen HTML
(termasuk HTML5) di semua browser. Twitter Bootstrap juga terdiri
dari setting body type dan link.Twitter Bootstrap juga mendukung
grid system sebagaimana yang terdapat di berbagai macam CSS
Framework. Kita tahu dengan adanya grid system kita menjadi lebih
mudah dan cepat dalam mengelola layout pada posisi grid yang kita
inginkan.
Gambar 3.5 Grid Twitter BoostrapJumlah grid maksimum adalah 12,
untuk membagi grid dalama satu row, kita bisa menggunakan class
.col-md-1 hingga .col-md-12 Elemen (termasuk tag-tag HTML) dasar
yang biasanya membutuhkan styling mendetail telah diatur secara
rapi, mulai dari Heading, Body, Code & Pre, Labels &
Badges, Table, Form hingga button. Twitter Bootstrap juga
menyediakan spriting icon (menggunakan iconglyphicon) jika kita
hendak memasang ikon pada markup HTML kita dengan langkah yang
cukup mudah. Total 140 ikon hitam dan ikon berwarna putih (untuk
latar belakang gelap) dengan jumlah yang sama.Contoh ikon dan
script ditampilkan melalui gambar berikut :
Gambar 3.6 Icon Twitter Boostrap
Gambar 3.7 Script Icon Twitter BoostrapTwitter Bootstrap juga
menyediakan fasilitas lengkap yang siap pakai dan dapat
dikustomisasi meliputi dropdown, navigasi, tombol-tombol,
breadcrumb, pagination dan masih banyak lagi. Element-element
javacript yang disediakan meliputi beberapa komponen-komponen
seperti tooltips, popovers, modals, dropdowns, collapse (accordion)
dan carousel untuk slider.3.7 Framework CodeIgniterCodeIgniter
adalah aplikasi open source yang berupa framework dengan model MVC
(Model, View, Controller) untuk membangun website dinamis dengan
menggunakan PHP. CodeIgniter memudahkan developer untuk membuat
aplikasi website dengan cepat dan smudah dibandingkan dengan
membuatnya dari awal. Tujuan CodeIginiter adalah supaya pembangunan
aplikasi lebih cepat dibanding menulis source code dari awal,
karena CodeIginiter telah meyediakan banyak library untuk
proses-proses yang sering digunakan pada suatu aplikasi, dan juga
dengan kemudahan dalam menggunakan library tersebut serta
kesederhaan penggunaannya. CodeIgniter ditulis (dibuat) oleh Rick
Ellis, seorang musisi rock yang menjadi programmer. Ia membangun
perusahaan bernama Ellis Lab, yang mengembangkan beberapa produk
unggulan salah satunya CodeIgniter. CodeIgniter dirilis pertama
kali pada 28 Februari 2006. Versi stabil terakhir yaitu 2.1.4 yang
dirilis pada 8 Juli 2013.
Gambar 3.8 Logo CodeIgniterCodeigniter dapat diperoleh di
http://ellislab.com/codeigniter/download. Setelah diunduh, maka
anda akan mendapatkan file CodeIgniter_2.1.4.zip. Ekstrak terlebih
dahulu file tersebut untuk menggunakannya.
3.7.1 Kelebihan CodeigniterBeberapa kelebihan CodeIgniter (CI)
dibandingkan dengan Framework PHP lain yaitu:1. Performa sangat
cepat. Codeigniter sangat cepat bahkan mungkin bisa dibilang
Codeigniter merupakan framework yang paling cepat dibanding
framework yang lain.2. Konfigurasi yang sangat minim (nearly zero
configuration). Tentu saja untuk menyesuaikan dengan database dan
keleluasaan routing tetap diizinkan melakukan konfigurasi dengan
mengubah beberapa file konfigurasi seperti database.php atau
autoload.php, namun untuk menggunakan codeigniter dengan standard,
anda hanya perlu merubah sedikit saja file pada folder config3.
CodeIgniter memiliki banyak komunitas.Dengan banyaknya komunitas CI
ini, memudahkan kita untuk berinteraksi dengan yang lain, baik itu
bertanya atau teknologi terbaru.4. Dokumentasi yang sangat
lengkap.Setiap paket instalasi Codeigniter sudah disertai user
guide yang sangat bagus dan lengkap untuk dijadikan permulaan,
bahasanya pun mudah dipahami.5. Programmer CodeIgniter paling
banyak dicari perusahaan.Saat ini, Programmer yang menguasai
CodeIgniter dalam mebangun aplikasi website sangat di cari-cari
oleh banyak perusahaan.3.7.2 Fitur-Fitur CodeigniterCodeigniter
memiliki banyak fitur yang bisa digunakan oleh programmer untuk
memudahkan pembuatan aplikasi. Berikut fitur-fitur yang dimiliki
dan didukung oleh CodeIgniter :1. Sistem berbasis Model View
Controller2. Kompatibel dengan PHP versi 4.3. Ringan dan Cepat.4.
Terdapat dukungan untuk berbagai basis data.5. Mendukung Active
Record Database.6. Mendukung form dan validasi.7. Keamanan dan XSS
filtering.8. Tersedia pengaturan session.9. Tersedia class untuk
mengirim email.10. Tersedia class untuk manipulasi gambar
(cropping,resizing, rotate).11. Tersedia class untuk upload
file.12. Tersedia class yang mendukung transfer via FTP.13.
Mendukung lokalisasi bahasa.14. Tersedia class untuk melakukan
pagination (membuat tampilan perhalaman).15. Mendukung enkripsi
data.16. Mendukung benchmarking.17. Mendukung caching.18.
Pencatatan error yang terjadi.19. Tersedia class untuk membuat
calendar.20. Tersedia class untuk mengetahui user agent, misalnya
tipe browser dan sistem operasi yang digunakan pengunjung.21.
Tersedia class untuk pembuatan template website.22. Tersedia class
untuk membuat trackback.23. Tersedia pustaka untuk bekerja dengan
XMP-RPC.24. Menghasilkan clean URL.25. URI routing yang
fleksibel.26. Mendukung hooks, ekstensi class dan plugin.3.7.3
Struktur Folder Codeigniter Codeigniter adalah sebuah Framework PHP
yang mempunyai susunan folder yang terstruktur, untuk memudahkan
programmer dalam membuat aplikasinya. Berikut dibawah ini adalah
struktur folder dari Framework Codeigniter:
Gambar 3.9 Struktur Folder CodeIgniter
Berikut penjelasan dari struktur utama folder CodeIginiter: 1.
Application, berisi folder dan file yang terkait dengan aplikasi
yang akan dibuat. Kita akan banyak bekerja pada direktori
application ini. 2. System, berisi file-file inti framework
CodeIgniter. Kita tidak akan mengubah apapun pada direktori system
ini. 3. User_guide, berisi file-file dokumentasi CodeIgniter yang
dapat diakses melalui browser. 4. Index.php, file konfigurasi awal
CodeIgniter. Selanjutnya dibawah ini adalah struktur folder
Application yang berada di folder Codeigniter yang akan kita
gunakan untuk membuat aplikasi
Gambar 3.10 Struktur Folder Application CodeigniterBerikut
penjelasan dari struktur folder Application: 1. Config, berisi
file-file yang terkait konfigurasi dasar aplikasi.2. Controllers,
berisi file-file controller dari aplikasi yang dibangun. Simpan
seluruh file controller aplikasi pada folder ini. 3. Core, jika
ingin memperluas class-class inti CodeIgniter, maka simpan file
class yang Anda kembangkan tersebut pada direktori ini. 4. Helpers,
berisi file-file helper yang Anda buat sendiri. 5. Libraries,
berisi file-file library yang Anda buat sendiri. 6. Logs, jika
error log pada config diaktifkan maka file error log akan tersimpan
pada direktori ini. 7. Models, berisi file-file model dari aplikasi
yang dibangun. Simpan seluruh file model aplikasi pada folder ini.
8. Views, berisi file-file view dari aplikasi yang dibangun. Simpan
seluruh file view aplikasi pada folder ini. 3.7.4 Alur Proses
AplikasiGambar berikut ini akan mengilustrasikan alur proses data
pada Framework Codeigniter:
Gambar 3.11 Alur Proses Data Pada Codeigniter1. Index.php
berfungsi sebagai pengendali awal, menginisialisasi sumber daya
utama yang dibutuhkan CodeIgniter.2. Router memeriksa paket HTTP
request untuk menentukan aksi apa yang harus dilakukan oleh
sistem.3. Jika cache tersedia, maka halaman langsung dikirim ke
browser, eksekusi sistem yang normal akan dilewati.4. Security.
Sebelum Application Controller dieksekusi, paket HTTP request dan
semua data yang dikirimkan pengguna akan disaring terlebih dahulu
oleh Security Class.5. Application Controller menginisialisasi
model, library utama, helpers dan semua sumber daya yang dibutuhkan
untuk setiap request.6. Antarmuka aplikasi (view) yang sudah
disiapkan dikirimkan ke browser. Jika caching diaktifkan, maka view
akan disimpan sementara untuk request yang sama berikutnya.3.7.5
Pengertian Model View Controller (MVC)Model View Controller
merupakan suatu konsep yang cukup populer dalam pembangunan
aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC
memisahkan pengembangan aplikasi berdasarkan komponen utama yang
membangun sebuah aplikasi seperti manipulasi data, user interface,
dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen
yang membangun suatu MVC pattern dalam suatu aplikasi yaitu :1.
View :merupakan bagian yang menanganipresentation logic. Pada suatu
aplikasi web bagian ini biasanya berupa file template HTML, yang
diatur olehcontroller.Viewberfungsi untuk menerima dan
merepresentasikan data kepadauser. Bagian ini tidak memiliki akses
langsung terhadap bagian model.2. Model :biasanya berhubungan
langsung dengan database untuk memanipulasi data(insert, update,
delete, search), menangani validasi dari bagiancontroller, namun
tidak dapat berhubungan langsung dengan bagianview.3. Controller
:merupakan bagian yang mengatur hubungan antara bagian model dan
bagianview,controllerberfungsi untuk menerimarequestdan data
dariuserkemudian menentukan apa yang akan diproses oleh
aplikasi.Dengan menggunakan prinsip MVC suatu aplikasi dapat
dikembangkan sesuai dengan kemampuan developernya, yaitu programmer
yang menangani bagianmodel dancontroller, sedangkandesigneryang
menangani bagianview, sehingga penggunaan arsitektur MVC dapat
meningkatkan maintanability dan organisasi kode. Walaupun demikian
dibutuhkan komunikasi yang baik antara programmer dan designer
dalam menangani variabel-variabel yang akan ditampilkan.
3.7.8 Contoh Penggunaan CodeIgniter Penggunaan Framework
CodeIgniter terbilang mudah untuk digunaan. Berikut ini adalah
beberapa contoh penggunaan CodeIgniter:1. Menampilkan Hello World
dengan CodeIgniter : Buat sebuah controller bernama hello.php di
dalam folder controller/ lalu ketikkan kode dibawah ini
Lalu buat sebuah view bernama helloview.php di dalam folder
views lalu ketikkan kode dibawah ini
Untuk mengaksesnya, cukup akses
http://localhost/codeigniter/hello2. Membuat Form dengan
CodeIgniterForm pada CodeIgniter dapat di buat dengan menggunakan
helper atau dengan syntax HTML biasa. Buatlah sebuah controller
bernama form.php dan ketik kode berikut :
Setelah itu, buat view bernama form.php dan ketik kode berikut
:
3. Membuat CRUD ( Create, Read, Update, Delete)CRUD atau yang
bisa disebut Create, Read, Update, Delete adalah 4 fungsi utama
yang diimplementasi dan dianggap mencukupi untuk sebuah aplikasi.
Berikut ini adalah beberapa contoh penggunaan CRUD dalam
Codeigniter :i. $this->db->getFungsi ini digunakan untuk
mengambil data dari database. ii. $this->db->insertFungsi ini
digunakan untuk memasukkan data ke database.
iii. $this->db->updateFungsi ini digunakan untuk
mengupdate data ke database.
iv. $this->db->deleteFungsi ini digunakan untuk mendelete
data ke database.69
BAB IVANALISA DAN PERANCANGAN
4.1 Analisa Kebutuhan SistemUntuk mempermudah menganalisis
sebuah sistem maka akan dibagi kepada beberapa modul. Berikut ini
adalah analisa kebutuhan sistem dari Website Portofolio dan Bursa
Kerja.4.1.1 Analisa Sistem PortofolioBerikut ini adalah kebutuhan
dari Sistem Portofolio:1. Sistem dapat menampilkan daftar
portofolio dengan kategori yang telah ditentukan.2. Sistem dapat
menampilkan informasi portofolio terbaru.3. Sistem dapat menyaring
informasi portofolio berdasarkan kategori yang telah dipilih oleh
member.4. Sistem dapat menampilkan informasi portofolio, seperti
keterangan portofolio, gambar-gambar, dan pembuat portofolio.5.
Sistem dapat melakukan pembuatan portofolio dengan berbagai
kategori yang dapat dipilih oleh member.6. Sistem dapat memberikan
hasil apresiasi berupa like dan comment yang telah diberikan oleh
member.4.1.2 Analisa Sistem Lowongan KerjaBerikut ini adalah
kebutuhan dari Sistem Lowongan Kerja :1. Sistem dapat menampilkan
informasi lowongan pekerjaan terbaru, seperti deskripsi informasi
pekerjaan dan informasi perusahaan.2. Sistem dapat melakukan
penyaringan informasi lowongan pekerjaan sesuai kategori yang
dipilih serta kata kunci tertentu.3. Sistem dapat melakukan
pembuatan informasi lowongan pekerjaan yang dapat digunakan oleh
perusahaan.4. Sistem dapat melakukan penyimpanan informasi
pekerjaan yang dapat dilakukan oleh member. 5. Sistem dapat
melakukan sharing atau rekomendasi informasi lowongan pekerjaan
kepada member lain.4.1.3 Analisa Sistem MemberBerikut ini adalah
kebutuhan dari Sistem Member:1. Sistem dapat menampilkan daftar
member dengan kategori yang ditentukan.2. Sistem dapat menampilkan
informasi member.3. Sistem dapat melakukan pencarian member dengan
kata kunci dan kategori tertentu.4. Sistem dapat melakukan follow
member.4.1.4 Analisa Sistem Perusahaan / OrganisasiBerikut ini
adalah kebutuhan dari Sistem Perusahaan atau Organisasi :1. Sistem
dapat menampilkan perusahaan atau organisasi terbaru.2. Sistem
dapat menampilkan profil perusahaan atau organisasi.3. Sistem dapat
menampilkan informasi terkait lowongan pekerjaan yang di lakukan
oleh perusahaan atau organisasi.4. Sistem dapat mengolah data
informasi lowongan pekerjaan.4.1.5 Analisa Sistem Pesan Kebutuhan
dari Sistem Pesan ini adalah sistem dapat menampilkan dan mengolah
pesan yang telah di tentukan.4.1.6 Analisa Sistem KoneksiBerikut
ini adalah kebutuhan dari Sistem Koneksi :1. Sistem dapat
menampilkan informasi yang telah terjadi koneksi antar member.2.
Sistem dapat melakukan follow member sehingga terjadi koneksi.4.1.7
Analisa Sistem Surat Lamar Kebutuhan dari Sistem Surat Lamar adalah
sistem dapat mengolah surat lamar sesuai informasi lowongan
pekerjaan.
4.1.8 Analisa Sistem Rekomendasi Kebutuhan dari Sistem
Rekomendasi adalah sistem dapat mengolah serta mengirimkan
informasi lowongan pekerjaan terhadap member lain yang
terhubung.4.1.9 Analisa Sistem Komentar Kebutuhan dari Sistem
Komentar adalah sistem dapat mengirimkan komentar pada portofolio
tertentu.4.1.10 Analisa Sistem Kontak Kebutuhan dari Sistem Kontak
adalan sistem dapat melakukan input kontak yang akan disampaikan
kepada administrator.
4.2 Analisa LayoutAnalisa Layout dilakukan berdasarkan analisa
kebutuhan sistem yang telah dilakukan. Layout akan disesuaikan dan
disusun sesederhana mungkin sehingga pengguna dapat mengaksesnya
dengan mudah dan cepat. Berikut ini hasil dari analisa layout : 1.
HeaderHeader ini terletak di bagian paling atas. Di dalam header
ini terdapat logo dan navigasi atas. Tujuan dari logo adalah
sebagai identitas pengguna sedang berada di website mana, sedangkan
navigasi atas sebagai menu utama dalam web sehingga memudahkan
pengaksesan web. 2. Informasi UmumInformasi Umum ini teletak di
bagian atas setelah Header. Informasi Umum ini berguna untuk
memudahkan pengguna dalam melihat informasi serta pengakasesan
website.3. KontenKonten adalah salah satu bagian utama dari web.
Konten ini berguna memberikan informasi terbaru yang dibutuhkan
pengguna. Disini tersedia konten-konten utama website seperti
konten portofolio, konten lowongan kerja serta konten member.
4. FooterFooter ini akan berisi Copyright, yang bertujuan untuk
menjelaskankapankah website itu dibuat, dan oleh siapa website itu
dibuat.Didalam bagian informasi umum dan konten, tampilan layout
website akan berubah mengikuti bagian menu yang akan diakses
seperti Informasi Lowongan Pekerjaan, Portofolio, Member, dan yang
lainnya yang berkaitan dengan bidang design grafis.
4.2.1 Analisa Layout Lowongan KerjaBerikut ini adalah hasil
analisa Layout Lowongan Kerja Berita:1. HeaderHeader ini terletak
di bagian paling atas. Di dalam header ini terdapat logo dan
navigasi atas. Tujuan dari logo adalah sebagai identitas pengguna
sedang berada di website mana, sedangkan navigasi atas sebagai menu
utama dalam website sehingga memudahkan pengaksesan website. 2.
Informasi Halaman Lowongan KerjaInformasi Halaman ini teletak di
bagian atas setelah Header. Informasi Halaman ini berguna untuk
menegaskan pengguna dalam mengakses halaman website tersebut.3.
Navigasi Menu KategoriBagian ini diletakkan di bagian atas setelah
informasi halaman. Navigasi Menu Kategori ini berguna pada pengguna
agar bisa melihat lowongan kerja per-kategori. Navigasi Menu
Kategori ini seperti kategori, provinsi, kota, serta kata kunci.4.
KontenBagian ini diletakkan di bagian pusat. Konten ini berguna
memberikan informasi lowongan pekerjaan kepada pengguna.
4.2.2 Analisa Layout Portofolio Berikut ini adalah hasil analisa
Layout Portofolio:1. HeaderHeader ini terletak di bagian paling
atas. Di dalam header ini terdapat logo dan navigasi atas. Tujuan
dari logo adalah sebagai identitas pengguna sedang berada di
website mana, sedangkan navigasi atas sebagai menu utama dalam web
sehingga memudahkan pengaksesan web.2. Informasi Halaman
PortofolioInformasi Halaman ini teletak di bagian atas setelah
Header. Informasi Halaman ini berguna untuk menegaskan pengguna
dalam mengakses halaman website tersebut.3. Navigasi Menu
KategoriBagian ini diletakkan di bagian atas setelah informasi
halaman. Navigasi Menu Kategori ini berguna pada pengguna agar bisa
melihat portofolio per-kategori. Navigasi Menu Kategori ini seperti
kategori, klasifikasi, periode, serta kata kunci.4. KontenBagian
ini diletakkan di bagian pusat. Konten ini berguna memberikan
informasi portofolio kepada pengguna.
4.2.3 Analisa Layout MemberBerikut ini adalah hasil analisa
Layout Member:1. HeaderHeader ini terletak di bagian paling atas.
Di dalam header ini terdapat logo dan navigasi atas. Tujuan dari
logo adalah sebagai identitas pengguna sedang berada di website
mana, sedangkan navigasi atas sebagai menu utama dalam web sehingga
memudahkan pengaksesan web.2. Informasi HalamanInformasi Halaman
ini teletak di bagian atas setelah Header. Informasi Halaman ini
berguna untuk menegaskan pengguna dalam mengakses halaman
website.
3. Navigasi Menu KategoriBagian ini diletakkan di bagian atas
setelah informasi halaman. Navigasi Menu Kategori ini berguna pada
pengguna agar bisa melihat informasi member per-kategori. Navigasi
Menu Kategori ini seperti kategori, provinsi, ,kota , klasifikasi,
serta kata kunci.4. KontenBagian ini diletakkan di bagian pusat.
Konten ini berguna memberikan informasi member kepada pengguna.
4.2.4 Analisa Layout Daftar MemberBerikut ini adalah hasil
analisa Layout Daftar Member:1. HeaderHeader ini terletak di bagian
paling atas. Di dalam header ini terdapat logo dan navigasi atas.
Tujuan dari logo adalah sebagai identitas pengguna sedang berada di
website mana, sedangkan navigasi atas sebagai menu utama dalam
website sehingga memudahkan pengaksesan website.2. Sub Navigasi
AtasSub Navigasi Atas ini teletak di bagian atas setelah Header.
Sub Navigasi Atas ini berguna untuk memberikan informasi menu yang
tersedia terhadap pengguna, seperti daftar sebagai member atau
daftar sebagai organisasi.3. Form RegistrasiForm Registrasi ini
diletakkan di bagian pusat sebelah kiri. Form Registrasi ini
berguna pada pengguna agar bisa membuat akun member dengan mengisi
form yang sudah disediakan dengan benar.4. Informasi Registrasi
Informasi Registrasi ini diletakkan di bagian pusat sebelah kanan.
Informasi Registrasi ini berguna memberikan informasi kepada
pengguna apa yang akan di dapat setelah membuat akun member.
4.2.5 Analisa Layout Beranda Userpanel Berikut ini adalah hasil
analisa Layout Beranda Userpanel:1. Header Header ini terletak di
bagian paling atas. Di dalam header ini terdapat logo dan navigasi
atas. Tujuan dari logo adalah sebagai identitas pengguna sedang
berada di website mana, sedangkan navigasi atas sebagai menu utama
dalam website sehingga memudahkan pengaksesan website. Selain itu
di dalam navigasi atas userpanel terdapat menu tambahan seperti
perusahaan.2. Informasi PortofolioInformasi Portofolio ini
diletakkan di bagian atas setelah menu utama atau Header. Berguna
untuk memberikan informasi portofolio yang pernah di buat oleh
member.3. Konten Konten ini terbagi menjadi 4, yaitu konten
portofolio, konten lowongan kerja, konten perusahaan serta konten
member. Konten ini berguna untuk memberikan informasi tentang
portofolio, lowongan kerja, perusahaan atau organisasi serta member
terbaru.
4.2.6 Analisa Layout Informasi Lowongan Kerja Userpanel Berikut
ini adalah hasil analisa Layout Lowongan Kerja Userpanel: 1. Header
Header ini terletak di bagian paling atas. Di dalam header ini
terdapat logo dan navigasi atas. Tujuan dari logo adalah sebagai
identitas pengguna sedang berada di website mana, sedangkan
navigasi atas sebagai menu utama dalam web sehingga memudahkan
pengaksesan web. 2. Sub Navigasi Lowongan KerjaSub Navigasi
Lowongan Kerja ini terletak di bagian atas setelah menu utama atau
Header. Bagian ini berguna memberikan menu tambahan seputar
lowongan kerja kepada member, sehingga member lebih mudah dalam
mengakases website.
3. Informasi HalamanInformasi Halaman ini teletak di bagian atas
setelah Sub Navigasi Lowongan Pekerjaan. Bagian ini berguna untuk
menegaskan pengguna dalam mengakses halaman website.4. Navigasi
Menu KategoriBagian ini diletakkan di bagian atas setelah informasi
halaman. Navigasi Menu Kategori ini berguna pada pengguna agar bisa
melihat lowongan kerja per-kategori.5. KontenBagian ini diletakkan
di bagian pusat. Konten ini berguna memberikan informasi lowongan
pekerjaan kepada pengguna, bagian konten ini bisa berubah sesuai
menu yang terdapat dalam sub navigasi lowongan pekerjaan.
4.2.7 Analisa Layout Informasi Portofolio Userpanel Berikut ini
adalah hasil analisa Layout Informasi Portofolio Userpanel:1.
HeaderHeader ini terletak di bagian paling atas. Di dalam header
ini terdapat logo dan navigasi atas. Tujuan dari logo adalah
sebagai identitas member sedang berada di website mana, sedangkan
navigasi atas sebagai menu utama dalam web sehingga memudahkan
pengaksesan web.2. Sub Navigasi PortofolioSub Navigasi Portofolio
ini terletak di bagian atas setelah menu utama atau Header. Bagian
ini berguna memberikan menu tambahan seputar portofolio kepada
member seperti upload portofolio dan setting portofolio, sehingga
member lebih mudah dalam mengakases website.3. Informasi
HalamanInformasi Halaman ini teletak di bagian atas setelah Sub
Navigasi Portofolio. Bagian ini berguna untuk menegaskan member
dalam mengakses halaman website.4. Navigasi Menu Kategori Bagian
ini diletakkan di bagian atas setelah informasi halaman. Navigasi
Menu Kategori ini berguna pada member agar bisa melihat portofolio
per-kategori. Navigasi Menu Kategori ini seperti kategori,
klasifikasi, periode, serta kata kunci.5. KontenBagian ini
diletakkan di bagian pusat. Konten ini berguna memberikan informasi
portofolio kepada pengguna, bagian konten ini bisa berubah sesuai
menu yang terdapat dalam sub navigasi portofolio.
4.2.8 Analisa Layout Informasi Member Userpanel Berikut ini
adalah hasil analisa Layout Informasi Member Userpanel:1.
HeaderHeader ini terletak di bagian paling atas. Di dalam header
ini terdapat logo dan navigasi atas. Tujuan dari logo adalah
sebagai identitas member sedang berada di website mana, sedangkan
navigasi atas sebagai menu utama dalam web sehingga memudahkan
pengaksesan web.2. Informasi HalamanInformasi Halaman ini teletak
di bagian atas setelah Header. Bagian ini berguna untuk menegaskan
member dalam mengakses halaman website.3. Navigasi Menu Kategori
Bagian ini diletakkan di bagian atas setelah informasi halaman.
Navigasi Menu Kategori ini berguna agar member bisa melihat member
lainnya per-kategori. Navigasi Menu Kategori ini seperti kategori,
provinsi, kota klasifikasi, serta kata kunci.4. KontenBagian ini
diletakkan di bagian pusat. Konten ini berguna memberikan informasi
tentang member lainnya, seperti informasi portofolio dan
koneksi.
4.2.9 Analisa Layout Perusahaan / Organisasi Userpanel Berikut
ini adalah hasil analisa Layout Perusahaan / Organisasi
Userpanel:1. HeaderHeader ini terletak di bagian paling atas. Di
dalam header ini terdapat logo dan navigasi atas. Tujuan dari logo
adalah sebagai identitas member sedang berada di website mana,
sedangkan navigasi atas sebagai menu utama dalam web sehingga
memudahkan pengaksesan web.2. Sub Navigasi PerusahaanSub Navigasi
Perusahaan ini terletak di bagian atas setelah menu utama atau
Header. Bagian ini berguna memberikan menu tambahan seputar
perusahaan kepada member seperti favorit perusahaan, sehingga
member lebih mudah dalam mengakases halaman perusahaan.3. Informasi
HalamanInformasi Halaman ini teletak di bagian atas setelah Sub
Navigasi Perusahaan. Bagian ini berguna untuk menegaskan member
dalam mengakses halaman website.4. Navigasi Menu Kategori Bagian
ini diletakkan di bagian atas setelah informasi halaman. Navigasi
Menu Kategori ini berguna pada member agar bisa mencari serta
melihat perusahaan per-kategori, sehingga akan mendapatkan
informasi perusahaan yang maksimal. Navigasi Menu Kategori ini
seperti kategori, provinsi, kota, serta kata kunci. 5. KontenBagian
ini diletakkan di bagian pusat. Konten ini berguna memberikan
informasi perusahaan kepada member, bagian konten ini bisa berubah
sesuai menu yang terdapat dalam sub navigasi perusahaan.
4.2.10 Analisa Layout Detail Informasi Lowongan Kerja Berikut
ini adalah hasil analisa Layout Detail Lowongan Kerja:1.
HeaderHeader ini terletak di bagian paling atas. Di dalam header
ini terdapat logo dan navigasi atas. Tujuan dari logo adalah
sebagai identitas member sedang berada di website mana, sedangkan
navigasi atas sebagai menu utama dalam web sehingga memudahkan
pengaksesan web
.2. Informasi HalamanInformasi Halaman ini terletak di bagian
atas setelah menu utama atau Header. Bagian ini berguna untuk
memberikan informasi halaman yang terkait dengan lowongan kerja
tersebut.3. Informasi Lowongan Kerja Informasi Lowongan Kerja ini
terletak di bagian pusat. Bagian ini berguna untuk memberikan
informasi Judul Lowongan Kerja 4. Navigasi Lowongan KerjaBagian ini
diletakkan di bagian pusat. Navigasi Lowongan Kerja ini berguna
pada member agar bisa merekomendasikan lowongan kerja kepada member
lain, melamar lowongan pekerjaan serta menyimpan lowongan
pekerjaan. 5. KontenBagian ini diletakkan di bagian pusat. Konten
ini berguna memberikan informasi detail lowongan pekerjaan, seperti
lokasi kerja kepada member.
4.2.11 Analisa Layout Detail Informasi Portofolio Berikut ini
adalah hasil analisa Layout Detail Informasi Portofolio:1.
HeaderHeader ini terletak di bagian paling atas. Di dalam header
ini terdapat logo dan navigasi atas. Tujuan dari logo adalah
sebagai identitas member sedang berada di website mana, sedangkan
navigasi atas sebagai menu utama dalam web sehingga memudahkan
pengaksesan web.2. Sub Navigasi PortofolioSub Navigasi Portofolio
ini terletak di bagian atas setelah menu utama atau Header. Bagian
ini berguna memberikan menu tambahan seputar portofolio kepada
member seperti Search Portofolio, sehingga member lebih mudah dalam
mengakases halaman portofolio.3. Informasi HalamanInformasi Halaman
ini teletak di bagian atas setelah Sub Navigasi Portofolio. Bagian
ini berguna untuk memberikan informasi halaman yang terkait dengan
portofolio tersebut.
4. Informasi Portofolio Informasi Portofolio ini terletak di
bagian pusat. Bagian ini berguna untuk memberikan informasi detail
portofolio seperti judul, image, serta komentar. 5. Informasi
MemberInformasi Member ini terletak di bagian pusat sebelah kanan.
Bagian ini berguna untuk memberikan informasi pembuat portofolio
seperti nama, image, lokasi, keterangan gambar, statistik serta
tag. Selain itu terdapat navigasi tambahan seperti Add To
Draft.
4.2.12 Analisa Layout Detail Informasi Member Berikut ini adalah
hasil analisa Layout Detail Informasi Member:1. HeaderHeader ini
terletak di bagian paling atas. Di dalam header ini terdapat logo
dan navigasi atas. Tujuan dari logo adalah sebagai identitas member
sedang berada di website mana, sedangkan navigasi atas sebagai menu
utama dalam web sehingga memudahkan pengaksesan web.2. Informasi
Cover dan ImageDalam bagian Informasi Cover dan Image ini, member
dapat melihat cover serta foto atau image member. 3. Sub Navigasi
MemberSub Navigasi Member ini terletak setelah informasi cover dan
image. Bagian ini berguna agar member dapat melihat dan mengolah
informasi member, koneksi serta portofolio.4. Informasi
MemberInformasi Member ini terletak di bagian pusat. Bagian ini
berguna agar member bisa melihat informasi yang terkait member
secara detail. Bagian ini dapat berubah kontennya sesuai Sub
Navigasi Member yang di pilih.
4.3 Perancangan Layout BerandaDalam pembuatan Layout Website ini
dibutuhkan rancangan awal untuk mempermudah dalam proses pembuatan
aplikasi ini. Berikut ini adalah struktur layout utama halaman
website Portofolio dan Bursa Kerja yang terdiri dari Navigasi Atas,
Informasi Umum, Konten, dan Footer .
Gambar 4.1 Struktur Layout Beranda
4.3.1 Perancangan Layout Lowongan Kerja Berikut ini adalah
rancangan Layout Lowongan Kerja.
Gambar 4.2 Struktur Layout Lowongan Kerja4.3.2 Perancangan
Layout Portofolio Berikut ini adalah rancangan Layout
Portofolio
Gambar 4.3 Struktur Layout Portofolio
4.3.3 Perancangan Layout Member Berikut ini adalah rancangan
Layout Member.
Gambar 4.4 Struktur Layout Member4.3.4 Perancangan Layout
DaftarBerikut ini adalah rancangan Layout Daftar
Gambar 4.5 Struktur Layout Detail Pelatihan
4.3.5 Perancangan Layout Beranda Userpanel Berikut ini adalah
rancangan Layout Beranda Userpanel
Gambar 4.6 Struktur Layout Beranda Userpanel4.3.6 Perancangan
Layout Lowongan Kerja Userpanel Berikut ini adalah rancangan Layout
Lowongan Kerja Userpanel
Gambar 4.7 Struktur Layout Lowongan Kerja Userpanel
4.3.7 Perancangan Layout Portofolio Userpanel Berikut ini adalah
rancangan Layout Portofolio Userpanel
Gambar 4.8 Struktur Layout Detail Portofolio Userpanel
4.3.8 Perancangan Layout Member Userpanel Berikut ini adalah
rancangan Layout Member Userpanel
Gambar 4.9 Struktur Layout Member Userpanel
4.3.9 Perancangan Layout Perusahaan / Organisasi Userpanel
Berikut ini adalah rancangan Layout Perusahaan / Organisasi
Userpanel.
Gambar 4.10 Struktur Layout Perusahaan / Organisasi
Userpanel4.3.10 Perancangan Layout Detail Informasi Lowongan
KerjaBerikut ini adalah rancangan Layout Detail Informasi Lowongan
Kerja
Gambar 4.11 Struktur Layout Detail Informasi Lowongan Kerja
4.3.11 Perancangan Layout Detail Informasi PortofolioBerikut ini
adalah rancangan Layout Detail Informasi Portofolio
Gambar 4.12 Struktur Layout Detail Informasi Portofolio4.3.12
Perancangan Layout Detail Informasi Member Berikut ini adalah
rancangan Layout Detail Informasi Member
Gambar 4.13 Struktur Layout Detail Informasi Member
4.4 Perancangan SistemPerancangan sistem merupakan suatu tahapan
pengembangan perangkat lunak untuk menghasilkan sistem yang baru
atau memperbaiki sistem yang ada serta dapat meningkatkan
efektifitas kerja agar dapat memenuhi hasil yang diinginkan.
Perancangan proses yang diusulkan memuat tentang flowchart.
Flowchart adalah merupakan sebuah diagram dengan simbol-simbol
grafis yang menyatakan aliranalgoritmaatauprosesyang menampilkan
langkah-langkah yang disimbolkan dalam bentuk kotak, beserta
urutannya dengan menghubungkan masing masing langkah tersebut
menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah
demi selangkah untuk penyelesaian masalah yang ada di dalam proses
atau algoritma tersebut. Berikut ini adalah flowchart dari sistem
Front-End Serta Userpanel website portofolio dan bursa kerja.
4.4.1 Perancangan Sistem Daftar Member Berikut ini adalah
Flowchart dari Pendaftaran Member.
Gambar 4.14 Flowchart Sistem Daftar Member
4.4.2 Perancangan Sistem Login Member Berikut ini adalah
Flowchart dari Login Member
Gambar 4.15 Flowchart Sistem Login Member4.4.3 Perancangan
Sistem Komentar Berikut ini adalah Flowchart dari Sistem
Komentar
Gambar 4.16 Flowchart Sistem Komentar
4.4.4 Perancangan Sistem Pencarian Lowongan Kerja Berikut ini
adalah Flowchart dari Pencarian Lowongan Kerja
Gambar 4.17 Flowchart Sistem Pencarian Lowongan Kerja4.4.5
Perancangan Sistem Upload Portofolio Berikut ini adalah Flowchart
dari Upload Portofolio
Gambar 4.18 Flowchart Sistem Upload Portofolio
4.4.6 Perancangan Sistem Pencarian dan Favorit Perusahaan
Berikut ini adalah Flowchart dari Pencarian dan Favorit
Perusahaan
Gambar 4.19 Flowchart Sistem Pencarian dan Favorit
Perusahaan4.4.7 Perancangan Sistem Pencarian dan Follow Member
Berikut ini adalah Flowchart dari Pencarian dan Follow Member
Gambar 4.20 Flowchart Sistem Pencarian dan Follow MemberBAB
VIMPLEMENTASI DAN PENGUJIAN
5.1 LayoutSetelah melakukan perancangan untuk Layout Website,
maka Layout Website akan dibuat dengan menggunakan Twitter
Bootstrap. Berikut ini adalah hasil dari pembuatan Layout Website
yang telah dibuat5.1.1 Screenshot Layout BerandaBerikut ini adalah
Screenshot Layout Beranda
Gambar 5.1 Screenshot Layout Beranda
5.1.2 Screenshot Layout Lowongan Kerja Berikut ini adalah
Screenshot Layout Lowongan Kerja
Gambar 5.2 Screenshot Layout Lowongan Kerja
5.1.3 Screenshot Layout Portofolio Berikut ini adalah Screenshot
Layout Portofolio
Gambar 5.3 Screenshot Layout Portofolio
5.1.4 Screenshot Layout Member Berikut ini adalah Screenshot
Layout Member
Gambar 5.4 Screenshot Layout Member
5.1.5 Screenshot Layout Daftar Member Berikut ini adalah
Screenshot Layout Daftar Member
Gambar 5.5 Screenshot Layout Daftar Member5.1.6 Screenshot
Layout Beranda Userpanel Berikut ini adalah Screenshot Layout
Beranda Userpanel
Gambar 5.6 Screenshot Layout Beranda Userpanel
5.1.7 Screenshot Layout Informasi Lowongan Kerja Berikut ini
adalah Screenshot Layout Informasi Lowongan Kerja
Gambar 5.7 Screenshot Layout Informasi Lowongan Kerja5.1.8
Screenshot Layout Portofolio Userpanel Berikut ini adalah
Screenshot Layout Portofolio Userpanel
Gambar 5.8 Screenshot Layout Portofolio Userpanel
5.1.9 Screenshot Layout Member UserpanelBerikut ini adalah
Screenshot Layout Member Userpanel
Gambar 5.9 Screenshot Layout Member Userpanel5.1.10 Screenshot
Layout Perusahaan / Organisasi Berikut ini adalah Screenshot Layout
Perusahaan / Organisasi
Gambar 5.10 Screenshot Layout Perusahaan / Organisasi
5.1.11 Screenshot Layout Detail Lowongan Kerja Berikut ini
adalah Screenshot Layout Detail Lowongan Kerja
Gambar 5.11 Screenshot Layout Detail Lowongan Kerja
5.1.12 Screenshot Layout Detail Portofolio Berikut ini adalah
Screenshot Layout Detail Portofolio
Gambar 5.12 Screenshot Layout Detail Portofolio
5.1.13 Screenshot Layout Detail Informasi Member Berikut ini
adalah Screenshot Layout Detail Informasi Member
Gambar 5.13 Screenshot Layout Detail Informasi Member
5.2 Sistem Setelah melakukan perancangan untuk Sistem Website,
maka Sistem Website akan dibuat dengan menggunakan PHP dengan
menggunakan Framework Codeigniter. Berikut ini adalah beberapa
bagian kode program yang digunakan pada aplikasi ini. 5.2.1
Konfigurasi CodeIgniterBerikut ini adalah konfigurasi CodeIgniter
yang harus diatur sebelum memulai pembuatan program.
1. application/config/autoload.phpListing Program 5.1
Konfigurasi Autoload