BAB III PELAKSANAAN KERJA MAGANG 3.1 Kedudukan dan Koordinasi Pada Pelaksanaan program kerja magang di tempatkan di divisi Teknik Informatika dibentuk yang terdiri dari 6 Mahasiswa magang Sistem Informasi yang dipercayakan untuk bertanggung jawab dalam Pengembangan user interface aplikasi U-Tapis berbasis web application untuk, Dalam Pelaksanaan kerja magang ini dibimbing oleh Lead Engineer Ahmad Abdullah dari PT.Tribun Digital Online dimana mahasiswa mengerjakan tugas yang telah diberikan Bersama di ruangan B 507 di Universitas Multimedia Nusantara. Pemberian tugas dan agenda kerja magang diberikan langsung oleh Bapak Rudi Sutomo. Pemberian dan pengarahan tugas dilaksanakan dengan cara briefing via online meeting yang dihadiri oleh peserta magang dan juga Bapak Rudi Sutomo sendiri. Setelah melaksanakan tugas dan agenda yang diberikan, mahasiswa melakukan pelaporan atas selesainya tugas dan agenda yang telah diberikan. Pelaporan dilaksanakan via online meeting, serta penyampaian revisi jika didapati ketidaksesuaian hasil yang diharapkan. Pertemuan tersebut biasanya disertai dengan pemberian agenda selanjutnya yang harus dilakukan. Aplikasi yang melalui proses revisi akan dilakukan uji coba oleh rekan -rekan jurnalis dan editor dari PT.Tribun Digital Online. Uji coba akan dilakukan di berbagai kota seperti Jakarta, Makassar dan Solo, dengan melakukan proses ujicoba ini aplikasi U-Tapis ini dapat dibenarkan lagi melalui feedback yang akan diberikan oleh para rekan editor dan jurnalis dari PT.Tribun Digital Online. Program kerja yang dilakukan oleh mahasiswa sangatlah berguna dan bermanfaat untuk membangun softskill dan hardskill yang nantinya akan diperlukan pada dunia kerja, dengan bimbingan dari Bapak Abdullah dan dari divisi 15 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
lain memberikan pembelajaran kepada mahasiswa untuk mahasiswa yang tentunya akan bermanfaat untuk pembangunan aplikasi web pada projek yang akan dilakukan oleh mahasiswa nantinya. Pengembangan aplikasi U-Tapis menggunakan framework Python sebagai framework back-end dan Bootstrap sebagai framework front-end. Terdapat 3 peran utama dari users di aplikasi U-Tapis yaitu: 1. Reporter Reporter memiliki peran untuk menulis berita dan mengumpulkan berita 2. Editor Editor memiliki peran untuk melakukan pemeriksaan dan mengoreksi berita yang telah ditulis dan dikumpulkan oleh reporter. 3. Admin Admin memiliki peran sebagai otoritas tertinggi di dalam aplikasi U-Tapis, dan memiliki wewenang untuk membuat akun. Mahasiswa dipercaya untuk merancang tampilan antarmuka dan juga alur aplikasi dari peran reporter dalam aplikasi web U-Tapis. 3.2 Tugas dan Uraian Kerja Magang Selama melakukan program kerja magang yang dilakukan kurang lebih selama 5 bulan atau 100 hari jam kerja, mahasiswa melakukan beberapa pekerjaan pada saat magang yang berhubungan dengan bidang Sistem Informasi terutama menyangkut pembuatan website, tabel dibawah ini adalah penjelasan pekerjaan yang dilakukan mahasiswa selama melakukan kerja magang selama 100 hari. 16 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Tabel 3 0.1Tabel Uraian Kerja Magang No. Jenis Pekerjaan Mulai Selesai Pembahasan tentang website U-Tapis dan Pembuatan dummy website U- Tapis 1.a Mempelajari tujuan pembuatan website U-Tapis 23 Agustus 2022 15 September 2022 1.b Membuat rancangan sistem aplikasi U- Tapis 19 September 2022 21 September 2022 1.c Membuat design "Dummy" website U- Tapis di figma 22 September 2022 3 Oktober 20222 Mempelajari framework yang akan digunakan untuk pembuatan website 2.a Mempelajari metode pembuatan website menggunakan Python Flask 5 Oktober 2022 11 Oktober 2022 2.b Mempelajari pembuatan website menggunakan HTML, CSS, Javascript,jQuery dan framework Bootstraps 11 Oktober 2022 21 Oktober 2022 Proses Pembuatan Website U-Tapis 3.a Membuat tampilan menggunakan framework Bootstraps 24 Oktober 2022 21 November 2022 17 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Redesign Tampilan Website U-Tapis 4.a Melakukan redesign tampilan website 22 November 2022 7 Desember 2022 Melakukan Uji Coba Aplikasi Web U-Tapis di Tribun Jakarta dan Tribun Makassar 5.a Melakukan Sosialisasi pertama di Tribun Jakarta 22- November- 2022 22 November 2022 5.b Melakukan uji coba di Tribun Jakarta 8 Desember 2022 8 Desember 2022 5.c Melakukan uji coba di Tribun Makassar dan Solo 10 Desember 2022 10 Desember 2022 Menambahkan chart pada menu dashboard 6.a Integrasi chart menggunakan Chart JS 12 Desember 2022 31 Desember 2022 3.2.1 Uraian Pelaksanaan Kerja Magang 3.2.1.1 Pembahasan tentang website U-Tapis dan Pembuatan dummy website U-Tapis 18 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada minggu pertama program kerja magang, diawali dengan mahasiswa dikenalkan secara umum serta dengan penggambaran secara keseluruhan jobdesk yang akan menjadi tanggung jawab mahasiswa selama melakukan program kerja magang. Gambar 3 1Sosialisai awal project U-Tapis Pengenalan website U-Tapis disini dimaksudkan pada tahapan ini adalah pengenalan mahasiswa mempelajari apa yang diinginkan para reporter dan editor pada projek magang U-Tapis ini, disini mahasiswa mempelajari bahwa website U- Tapis ini dimana U-Tapis adalah sebuah website untuk mengatasi permasalahan yang telah ada sebelumnya khususnya penapisan kesalahan bahasa Indonesia khusus untuk bahasa jurnalistik, Tujuan lain dari U-Tapis adalah untuk membantu para editor dan reporter dalam memahirkan Bahasa Indonesia. 19 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 2 Logo U-Tapis U-Tapis adalah aplikasi berbasis web yang berupa hasil dari kolaborasi antara Universitas Multimedia Nusantara deng PT Tribun Digital Online, pada gambar 3.2 merupakan logo dari U-Tapis itu sendiri, berikut adalah elemen simbolis dari logo U-Tapis yaitu: 1. Warna biru Warna biru melambangkan teknologi khususnya di bidang teknologi Informasi dan komunikasi. 2. Kaca Pembesar Kaca pembesar melambangkan sebuah riset atau pengamatan untuk menapis sebuah data yang baik dari yang kurang baik. 3. Kotak-kotak Kotak-kotak melambangkan kemajuan teknologi yang kental dengan perkembangan digital. 4. Serat Optik Serat optic melambangkan kecepatan dalam mentransmisi data kepada pengguna. 20 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 3 Ruangan Kerja Magang U-Tapis Pada Minggu kedua akan dimulai pelaksanaan program kerja magang, mahasiswa memulai program magang dengan membuat alur atau flowchart untuk perancangan website U-Tapis, berikut adalah flowchart dari perancangan situs web U-Tapis 21 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 4 Logo Draw.io Dalam membuat sebuah alur kerja atau flowchart mahasiswa memilih untuk membuat flowchart dengan menggunakan Draw.io, draw.io adalah sebuah situs web untuk membuat sebuah flowchart secara online, draw.io memiliki tampilan yang mudah untuk digunakan untuk membuat sebuah bagan, dimana membuat sebuah flowchart menjadi lebih mudah dikarenakan memiliki UI (User Interface) yang responsive yang menghasilkan sebuah flowchart yang rapih dan mudah untuk dimengerti. Berikut merupakan hasil dari gambara flowchart untuk menggambarkan alur kerja yang dibuat untuk perusahaan untuk mengerti bagaimana alu kerja pada website pada nantinya ketika sudah selesai, flowchart ini pada awal mengalami beberapa perubahan setelah dibahas dengan pembimbing magang mengenai alur kerja aplikasi web U-Tapis. 22 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 5 Flowchart Halaman Utama U-Tapis Gambar 3.5 merupakan gambaran flowchart untuk halaman Homepage situs web U-Tapis, flowchart diawali dengan user membuka situs web U-Tapis yang akan dikirimkan ke halaman Homepage, pada halaman Homepage ini user akan melakukan Login, pada halaman login, user akan menginput email dan password, jika email dan password sudah benar maka user akan dikirim ke halaman sesuai dengan role telah ditentukan oleh admin. Pada awal tahap perancangan aplikasi direncanakan dimana landing page pengguna harus memilih berperan sebelum masuk kedalam login page, dimana masing -masing peran memiliki login page nya masing-masing, mahasiswa mengabarkan alur dari aplikasi ini ke pembimbing lapangan Bapak Abdullah, dan ulasan dari Bapak Abdullah mengatakan bahwa untuk bagian login page lebih baik disatukan saja, dikarenakan dengan menggunakan sign in seperti ini aplikasi dapat terlihat tidak responsif. Solusi untuk halaman login in adalah menyatukan sign ini 23 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
menjadi 1 halaman sign in saja dan pengguna dapat masuk dari halaman web ke halaman masing masing berdasarkan peran yang telah ditentukan saat admin membuat akun pengguna. Gambar 3 6 Flowchart Halaman Reporter U-Tapis Setelah pengguna masuk ke dalam halaman reporter user dapat melakukan tiga hal, melihat halaman akun pribadi dimana modifikasi akun pengguna seperti mengubah email, nomor telepon dan nama, namun pengguna tidak dapat mengubah peran menjadi peran lainnya, seperti mengubah peran reporter menjadi admin, pengubahan peran ini hanya bisa dilakukan oleh admin. Pengguna bisa menulis 24 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
berita dimana pada halaman menulis berita ini akan tersedia sebuah text box yang akan berada di halaman tersebut dan melakukan input judul berita dan juga jenis berita, Ketika pengguna telah selesai menulis berita pengguna dapat menekan tombol untuk menyimpan berita yang telah dibuat, lalu user ini harus menunggu untuk editor melakukan melakukan pengecekan pada berita yang dikirim.setelah dicek oleh editor reporter dapat melihat apakah kumpulan berita yang Gambar 3 7 Logo Figma Pada tahap selanjutnya mahasiswa diminta untuk membuat rancangan sistem yang masih sederhana, dan mudah dimengerti, rancangan awal ini dibuat untuk memberikan gambaran yang sederhana dan mudah dimengerti oleh orang banyak, oleh karena itu, mahasiswa membuat tampilan yang sederhana, dan mahasiswa mengetahui bahwa machine learning yang akan dibuat akan menggunakan, untuk mencapai tujuan ini mahasiswa menggunakan website Figma yang digunakan untuk membuat design untuk gambaran awal rancangan website U-Tapis ini karena karakteristik Figma yang mudah untuk digunakan dan cepat untuk diakses. Pada Gambar 3.7 dibawah ini adalah hasil dari penggambaran rancangan awal U- Tapis menggunakan Figma 25 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara telah
Gambar 3.8 Prototype Halaman Utama Reporter U-Tapis Pada merupagambar 3.8 adalah gambaran awal dari tampilan dari Homepage dari user Reporter, dimana pada tampilan di atas digunakan untuk memasukan Judul berita, Jenis Berita dan juga Isi dari berita tersebut yang belum di edit / di benarkan. Gambar 3 9 Prototype Halaman riwayat reporter U-Tapis 26 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada tampilan 3.9 merupakan tampilan dari RIwayat yang dapat digunakan untuk melihat status berita apakah sudah disetujui atau masih dalam status menunggu dan kita juga dapat melihat judul berita, data tersebut di input oleh editor yang telah melakukan pengecekan pada artikel tersebut. Gambar 3 10 Prototype Halaman Edit Akun Reporter U-Tapis Pada tampilan 3.10 merupakan tampilan dari Informasi Pribadi yang dapat kita gunakan untuk melihat data diri kita serta kita juga dapat memperbaharui data yang dimiliki. 27 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
3.2.2 Mempelajari framework yang akan digunakan untuk pembuatan websites Gambar 3.111 Logo Python Python adalah Bahasa pemrograman yang dikembangkan oleh Guido van Rossum pada tahun 1989, python memiliki sifat Bahasa pemrograman yang general purposed, dimana python bisa digunakan dalam berbagai seperti membuat aplikasi, machine learning bahkan data analisis, python dikenal dengan bahasanya yang mudah untuk dipelajari, namun untuk bisa menjadi programmer python yang handal, haru memiliki tingkat tinggi atau dengan Bahasa inggris high-celling programming language , filosofi dibalik desain coding python yang mementingkan kemudahan untuk code dapat diuraikan dan dibaca, bahkan untuk seorang pemula dalam Bahasa python. 28 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 12 Logo Framework Python Flask Setelah mendapatkan informasi mengenai apa itu U-Tapis dan Machine Learning yang akan digunakan pada situs web U-Tapis kami diberikan informasi bahwa framework yang dapat menghubungkan HTML dengan python adalah framework bernama Flask, Flask adalah library yang disediakan oleh Python yang dirancang khusus untuk developer di berbagai industri. Dengan Flask dan bahasa Python, pengembang dapat membuat jaringan terstruktur dan mengelola aktivitas jaringan dengan lebih mudah. Setelah memahami apa itu python flask, mahasiswa mencari pembahasan mengenai framework python ini di internet, mulai dari situs streaming video seperti youtube mengenai cara menggunakan python flask Python 29 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 13 Video Tutorial Flask Gambar berikut merupakan dari video tutorial cara menggunakan framework Flask, beringat ini adalah pertama kalinya mahasiswa menggunakan flask pada python flask, video ini mengajarkan cara mengimplementasikan flask kedalam HTML dan bootstrap, menghapus dan mengedit user menggunakan flask. Flask sendiri hadir dengan beberapa fitur standar, seperti server pengembangan terintegrasi, debugging cepat, dukungan pengujian unit terintegrasi, kompatibilitas Google App Engine, pengiriman permintaan, dan dukungan cookie Mahasiswa mengalami kesulitan dalam mempelajari framework flask pada awalnya dikarenakan mahasiswa belum pernah menggunakan flask pada projek sebelumnya dan kali ini mahasiswa harus bisa mengerjakan dan mempelajari framework flask ini. Dengan ini mahasiswa harus mempelajari framework flask ini secara otodidak, setelah mempelajari lebih dalam mengenai flask mahasiswa bisa memahami dan mengimplementasikan ke dalam projek 30 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 14 Logo GItHub GitHub merupakan website layanan untuk penyimpanan data secara cloud atau awan untuk para developers untuk menyimpan, mengelola serta untuk men- deploy, GitHub juga digunakan untuk menjadi tempat mencatat Riwayat dari perubahan kode yang dilakukan oleh developers. Dengan GitHub mahasiswa dapat berbagi dan bekerjasama dengan rekan sesame projek kerja magang. Gambar 3 15 Logo Visual Studio Code 31 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada minggu keempat Mahasiswa akan melakukan tahap selanjutnya yaitu menjadikan gambaran awal yang telah dibuat sebelumnya menggunakan Figma dijadikan sebuah halaman web yang sesungguhnya. Tahap pertama yang dilakukan mahasiswa sebelum membuat halaman web ini adalah memilih text editor yang akan digunakan selama program kerja magang, dan mahasiswa memilih menggunakan Visual Studio Code, Visual Studio Code adalah Text Editor yang dibuat oleh Microsoft yang bisa digunakan dengan OS Windows, Linux dan Mac OS. Salah satu fitur dari Visual Studio Code ini adalah Debugging dan mudah dalam mengintegrasikan kode yang telah dibuat dengan GitHub. Gambar 3 16 Logo HTML Hyper Text Markup Language atau yang sering disebut dengan HTML adalah Bahasa yang sering digunakan menampilkan halaman web, dengan menggunakan HTML mahasiswa dapat mengatur tampilan dan isinya dengan rapih dan semenarik mungkin, membuat halaman form untuk membantu menangani registrasi dan transaksi di dalam sebuah web. 32 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 17 Logo CSS Cascading Style Sheet (CSS) merupakan sebuah Bahasa yang dapat membantu dalam pengaturan dan pengendalian dalam sebuah komponen yang ada dalam web untuk membantu halaman sebuah web dapat terlihat lebih rapih dan menarik, pada umum nya CSS digunakan secara bersamaan dengan HTML dalam mengatur tampilan sebuah web. Gambar 3 18 Video Tutorial HTML 33 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada gambar 3.18 adalah video tutorial yang digunakan oleh mahasiswa untuk mempelajari dasar dari HTMl, pada video ini mengajarkan bagaimana web itu bekerja, bagaimana cara membuat tabel yang akan digunakan dalam web, membuat button dan membuat forms dan input di dalam sebuah halaman. cara memasukan gambar kedalam web, video ini juga mengajarkan dasar dari CSS dan bagaimana cara menyambungkan HTML dengan CSS. Dengan menerapkan hal - hal yang dijelaskan pada video di atas mahasiswa dapat memahami bagaimana cara untuk membuat halaman untuk aplikasi U-Tapis dengan menggunakan HTML untuk membuat sebuah aplikasi web dengan baik dan efisien. Gambar 3 19 Logo Bootstrap Bootstrap merupakan sebuah framework yang digunakan untuk membangun sebuah web yang responsif, responsif yang dimaksud disini sebuah halaman yang dibuat dengan framework bootstrap dapat menyesuaikan ukuran halaman webnya maupun itu di layar komputer ataupun layar sebuah mobile device, halaman web yang dibuat dengan framework bootstrap ini dapat beradaptasi dengan layer sesuai dengan 34 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
device yang dimiliki. Dengan bootstrap developer bisa lebih fokus dengan membuat desain yang menarik dengan HTML dan CSS dan tidak perlu mengkhawatirkan responsivitas sebuah halaman web. Gambar 3 20 Video Tutorial CSS Mahasiswa mempelajari Bootstrap melalui video yang mahasiswa temui di Youtube, pada video ini mengajarkan cara menggunakan CSS, bagaimana HTML dan CSS memiliki keterkaitan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan. Pada video ini membantu mahasiswa dalam membuat halaman web yang menarik untuk aplikasi u-Tapis agar terlihat lebih profesional dan modern, pada video ini, dan juga pada video ini mahasiswa dapat mempelajari cara untuk mengintegrasi CSS dengan HTML. 35 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 21 Logo Javascript Javascript merupakan sebuah skrip pemrograman yang digunakan untuk menciptakan interaksi didalam sebuah halaman web agar lebih dinamis, JavaScript berfungsi untuk membuat elemen yang mampu meningkatkan interaksi pengunjung seperti menu drop-down, animasi, dan warna background dinamis. Javascript pada umumnya digunakan bersamaan dengan HTML dan CSS untuk membuat sebuah halaman dapat berjalan dengan lancar dan efektif Gambar 3 22 Logo Jquery 36 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Hal yang menarik dari JQuery adalah penekanan interaksi antara javascript dan HTML 3.2.3 Proses Pembuatan Website U-Tapis Gambar 3 23 Halaman Landing Page U-Tapis Pada gambar 3.23 merupakan landing page yang pertama kali dilihat Ketika membuka aplikasi U-tapis, pada halaman ini user dapat melakukan login dan penjelasan singkat mengenai U-Tapis. 37 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 24 Halaman Login U-Tapis Pada gambar 3.24 merupakan halaman login untuk user dimana user harus mengisi email dan password untuk masuk kedalam halaman sesuai dengan peran yang telah diberikan. Apabila pengguna ingin mengubah peran yang ada di aplikasi, maka pengguna tersebut harus melaporkan kepada admin untuk menggantikan peran pengguna tersebut. Gambar 3 25 Halaman Main Page U-Tapis 38 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada gambar 3.25 adalah tampilan untuk melakukan pengisian berita dan judul berita untuk reporter, reporter dapat memasukan kategori berita pada halaman ini, Ketika reporter sudah selesai dengan berita yang ditulis, reporter dapat menekan tombol kirim yang akan dikirimkan ke halaman editor. Gambar 3 26Halaman Riwayat U-Tapis Pada gambar 3.26 merupakan halaman Riwayat artikel, pada halaman ini reporter dapat melihat semua dari artikel yang ditulis, reporter dapat melihat apakah artikel sudah disetujui atau editor telah melakukan pengecekan pada artikelnya pada status setuju atau artikel masih menunggu. 39 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 27 Halaman VIew U-Tapis Pada gambar 3.27 merupakan halaman edit untuk reporter apabila artikel yang sudah dikirim masih memiliki kesalahan atau ingin mengganti judul dari artikel, editor dapat menggantinya selama belum disetujui oleh editor, apabila reporter sudah selesai dengan edit artikelnya reporter dapat menekan tombol selesai. Gambar 3 28 Halaman Edit Account U-Tapis Pada gambar 3.25 adalah halaman untuk melakukan edit pada akun dari reporter ini, reporter dapat mengubah nama lengkap, email, nomor telepon dan password, 40 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
untuk mengubah data pengguna harus mengisi keseluruhan, apabila ada dari salah satu data yang tidak lengkap maka pengguna tidak akan dapat mengubah data, salah satu kelemahan pada tampilan awal pada halaman akun ini jika pengguna telah mengubah data tidak ada konfirmasi bahwa data telah diubah, ini dapat menimbulkan kebingungan dengan pengguna yang dapat mengira bahwa data belum diubah di dalam database. 3.2.4 Redesign Tampilan Website U-Tapis Dalam pembuatan website U-Tapis mahasiswa mendapatkan arahan dari pembimbing magang dari lead data engineer PT Tribun Digital Online Bapak Abdullah Badi dalam proses pembuatan website U-Tapis, Bapak Abdullah bertemu dengan mahasiswa melalui Zoom dengan tujuan memberikan arahan untuk tampil - tampilan yang telah dibuat oleh mahasiswa, terutama dari segi responsivitas dan dapat bagaimana web bisa dapat digunakan di perangkat yang berbeda. Dengan hasil dari arahan Bapak Abdullah mahasiswa melakukan evaluasi terhadap halaman web yang telah dibuat dan melakukan perbaikan pada halaman tampilan web. Berikut adalah hasil dari revisi dan perbaikan pada tampilan dari aplikasi U- Tapis. 41 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 29 Halaman Landing Page U-Tapis (Redesign) Pada gambar 3.29 merupakan gambaran dari halaman landing page U-Tapis dimana pada halaman landing page ditambahkan dengan Universitas Multimedia dan log U-Tapis sebagai hasil dari Kerjasama Universitas Multimedia Nusantara dengan TribunNews Gambar 3 30 Halaman Tentang U-Tapis (Setelah Revisi) Pada gambar 3.27 merupakan tampilan Tentang U-Tapis, bagian ini berisi penjelasan singkat mengenai aplikasi U-Tapis yang berada pada home page 42 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 31 Halaman Login Page U-Tapis (Setelah Revisi) Pada gambar 3.31 merupakan tampilan dari login page, pada halaman login memiliki fungsi dimana pengguna untuk masuk ke website U-tapis akan bisa masuk ke dalam halaman masing-masing berdasarkan peran yang telah diberikan Gambar 3 32 Halaman Login Page U-Tapis (Setelah Revisi)2 43 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada gambar 3.32 mahasiswa menambahkan fitur tambah dimana jika pengguna menulis email dan password pada bagian login, maka akan muncul tulisan "Email atau kata sandi salah" dengan warna merah untuk menandai bahwa pengguna memasukkan email atau kata sandi yang salah. Gambar 3 33 Halaman Main Page U-Tapis (Setelah Revisi) Gambar 3.33 merupakan tampilan dashboard untuk reporter, pada tampilan dashboard ini menampilkan jumlah artikel yang input oleh reporter, artikel yang telah disetujui oleh editor dan jumlah artikel yang masih belum di proses oleh editor, pada halaman dashboard ini juga terdapat distribusi jenis berita yang telah di input oleh reporter dalam bentuk bar chart. 44 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 34 Halaman input Berita U-Tapis (Setelah Revisi) Gambar 3.34 menunjukan halaman input berita dari pengguna reporter, tampilan di atas sudah di revisi untuk lebih terlihat lebih rapih lagi, pada halaman ini text box yang digunakan dari TinyMCE, sebuah text editor gratis yang memberikan fitur seperti Alignment, Bold dan italic untuk membantu reporter dalam menulis berita, jauh lebih baik dari sebelumnya yang hanya menggunakan text box default dari HTML. 45 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 35 Halaman Riwayat U-Tapis (Setelah Revisi) Pada tampilan diatas merupakan tampilan menu Riwayat dari pengguna Reporter, pada saat Reporter mengirim berita, berita tersebut akan masuk pada bagian Menu Riwayat pada bagian Menu Riwayat, Reporter dapat melihat kembali berita yang telah dikirim dan reporter juga dapat melihat status berita apakah sudah disetujui atau masih dalam status pending dan Reporter juga dapat melihat judul berita, serta data tersebut diinput oleh siapa, dan juga tanggal unggah berita Gambar 3 36 Halaman View U-Tapis (Setelah Revisi) 46 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada tampilan diatas merupakan tampilan dari View Berita. pada menu ini Reporter dapat melihat riwayat yang telah diperbaharui oleh Editor. Apabila reporter telah selesai melihat berita yang telah reporter kirim, reporter bisa membuka halaman lainnya. Gambar 3 37 Halaman Edit Account U-Tapis (Setelah Revisi) Pada tampilan ini, reporter dapat mengubah nama lengkap, email, dan nomor telepon. Perubahan ini tak hanya dapat dilihat oleh reporter saja, tetapi juga dapat dilihat oleh Admin dari Website U-Tapis. Data yang telah diubah juga akan berubah pada database aplikasi. 47 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
3.2.5 Melakukan Uji Coba Aplikasi Web U-Tapis di Tribun Jakarta, Solo dan Tribun Makassar Pada tahap selanjutnya mahasiswa melakukan uji coba aplikasi web U-Tapis yang akan diselenggarakan di kantor tribun yang berada di 3 kota yaitu Jakarta pada tanggal 8 desember 2022 dan 10 Desember 2022 di Makassar dan Solo. Percobaan ini dilakukan oleh mahasiswa magang Universitas Multimedia Nusantara . Gambar 3 38 Demonstrasi Website U-Tapis dengan Rektor Universitas Multimedia Nusantara 48 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 39 Demonstrasi Website U-Tapis dengan Rektor Universitas Multimedia Nusantara Pada gambar 3.39 merupakan dari presentasi aplikasi U-Tapis kepada rektor Universitas Multimedia Nusantara Bapak Dr. Ninok Leksono, M.A, disini kami memberikan presentasi atas perkembangan terbaru dari aplikasi U-Tapis kepada bapak Ninok Leksono mengenai apa itu aplikasi U-Tapis dan bagaimana rencana untuk aplikasi U-Tapis ini kedepannya. Pada pertemuan ini dihadiri oleh para mahasiswa magang Universitas Multimedia Nusantara dan dibantu oleh Dosen Universitas Multimedia Nusantara untuk membantu mempresentasikan aplikasi web U-Tapis kepada Bapak Ninok Leksono. 49 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 40 Sosialisasi Website U-Tapis di Jakarta Gambar 3 41 Sosialisasi Website U-Tapis di Jakarta 50 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada gambar 3.41 merupakan hasil dari sosialisasi dengan para editor dan reporter dari PT Tribun Digital Online, disini mahasiswa memberikan demonstrasi secara singkat mengenai aplikasi yang kepada editor dan reporter, Setelah diberikan demonstrasi untuk aplikasi U-Tapis para editor dan reporter PT Tribun Digital Online memberikan pendapat mereka tentang aplikasi U-Tapis, dimana editor menyatakan bahwa aplikasi ini sangat dibutuhkan karena betapa seringnya para reporter sering sekali menulis kesalahan dalam draft awal dan dengan U-Tapis ini dapat membantu editor dan menghilangkan kesalahan penulisan ini. Pada pertemuan ini juga didampingi oleh dosen dari Universitas Multimedia Nusantara agar proses dari sosialisasi aplikasi U-Tapis yang dilakukan di PT Tribun Digital Online dapat berjalan dengan lancar, Gambar 3 42 Uji Coba Website U-Tapis di Jakarta 51 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 43 Gambar foto bersama Uji Coba U-Tapis Pada Tanggal 8 desember mengikuti kegiatan uji coba untuk website U- Tapis di PT Tribun Digital Online yang terletak di Jakarta, kegiatan dilakukan di gedung Group of regional Newspaper yang terletak di JL.Palmerah selatan No.3, Jakarta Pusat. Pada kegiatan ujicoba ini mahasiswa menjelaskan fungsi dari aplikasi web U-Tapis dan disertakan dengan penjelasan cara kerja aplikasi web U-Tapis ini. Pada pertemuan ini dihadiri oleh para mahasiswa Universitas Multimedia Nusantara dan perwakilan dari dosen dari Universitas Multimedia Nusantara yang berikut serta dalam projek aplikasi web U-Tapis. Perwakilan dari TribunNews Jakarta juga hadir dalam kegiatan uji coba aini. Balai Bahasa juga hadir dalam pertemuan dalam rangkai sosialisai UKBI(Uji Kemahiran Bahasa Indonesia) 52 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 44 Uji Coba Website U-Tapis di Makassar Gambar 3 45 Uji Coba Website U-Tapis di Makassar 53 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Gambar 3 46 Uji Coba Website U-Tapis di Solo Gambar 3 47 Uji Coba Website U-Tapis di Solo 54 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada tanggal 10 desember 2022 mahasiswa melakukan uji coba di 2 kota yang berbeda yaitu di Makassar dan Solo, rangkaian uji coba kalini untuk menguji kemampuan dari website U-Tapis, serta memperkenalkan website U-Tapis pada reporter dan editor di makassar dan solo lebih dalam lagi. Pada kegiatan uji coba ini Universitas Multimedia Nusantara mengirimkan Ruddy Kusuma Jaya dari program studi Sistem Informasi dan Cantya Kirana Dewi dari Prodi Jurnalistik dari sebagai perwakilan dari kedua prodi. Ibu Veronika Kaban sebagai dosen yang mendampingi mahasiswa dalam melakukan uji coba ini di Makassar. 3.2.6 Revisi dan merapikan websites U-Tapis Gambar 3 48 Logo Chart.Js Chart.JS merupakan salah satu plugin dari Javascript dimana salah satu fungsinya adalah untuk membuat chart dan grafik dengan mudah, ChartJS memiliki kelebihan 55 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
dalam menggunakan grafik, salah satunya adalah membuat halaman web menjadi terlihat lebih profesional, dan halaman web menjadi lebih menarik. Penulis menggunakan Chart.js karena JavaScript open source yang gratis serta mendukung 9 tipe bagan /chart yang berbeda yakni: 1. Area Chart 2. Bar Chart 3. Bubble Chart 4. Doughnut and Pie Charts 5. Line Chart 6. Mixed Chart Types 7. Polar Area Chart 8. Radar Chart 9. Scatter Chart Berikut adalah hasil dari revisi dari website U-Tapis Gambar 3 49 Hasil dari Chart.js 56 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
Pada gambar 3.49 mahasiswa melakukan revisi pada halaman landing page untuk reporter Ketika sign-in dengan menambahkan grafik bar chart, mahasiswa menambahkan bar chart untuk menggambarkan jenis artikel yang telah dikirim oleh reporter kepada editor 3.3 Kendala yang Ditemukan Selama melakukan program kerja magang selama 5 bulan atau kurang lebihnya 800 jam, terdapat beberapa kendala yang mahasiswa harus hadapi pada saat melakukan program kerja magang . A. Kesulitan melakukan komunikasi secara langsung dengan rekan kerja yang terlibat dengan project U-Tapis, ini terjadi dikarenakan peserta magang melakukan komunikasi melalui media online seperti online meeting atau obrolan online. B.Sebelum melakukan program kerja magang ini mahasiswa belum pernah memegang sebuah project menggunakan framework flask. Hal ini mempengaruhi kinerja dalam mengerjakan projek C. Tidak adanya supervisor yang bisa untuk berbicara secara langsung untuk membahas masalah selama mengerjakan projek membuat mahasiswa untuk bisa belajar dari supervisor secara langsung. D. Kurangnya atas waktu yang diberikan kepada para mahasiswa magang untuk mengerjakan projek aplikasi web U-Tapis 3.4 Solusi atas Kendala yang Ditemukan Bagian ini berisi solusi atas kendala yang ditemukan selama proses kerja magang selama 800 jam di PT Tribun Digital Online A. Mahasiswa harus bisa berani dalam mengambil inisiatif dalam menanya progress yang dilakukan oleh divisi lain dan tidak hanya berdiam saja menunggu 57 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara
mereka memberikan jawaban dan tanggapan terhadap progress pada project. memperk B. Mahasiswa harus belajar lebih mendalami mengenai framework flask dan metode di dalamnya, mahasiswa harus bisa belajar dengan cara otodidak dimana mahasiswa harus belajar secara mandiri. Solusinya adalah untuk mahasiswa dapat belajar dengan lebih fokus dan harus memperhatikan arahan pembimbing magang. C. Mahasiswa harus bisa lebih mandiri dalam bertanya dengan pembimbing magang akan arahan untuk tahap selanjutnya dalam sebuah project solusi dari kendala adalah mahasiswa harus lebih mandiri dan berani mengambil inisiatif dalam menghubung pembimbing magang perihal project U-Tapis D. Mahasiswa harus bisa meningkatkan manajemen waktu untuk menggunakan waktu lebih efisien dengan cara membuat sebuah jadwal setiap harinya untuk menentukan prioritas yang harus dikerjakan dan mencatat pencapaian yang telah dilakukan untuk project U-Tapis agar tidak melebihi batas waktu yang telah ditentukan 58 PERAN FRONT-END DEVELOPER... , Naufal Akmal Ramadhan, Universitas Multimedia Nusantara