M. ARIQ F. LAPORAN TA

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