Description

Langkah Pembuatan Aplikasi

A. Backend (Flask)

• Database (Mysql)

Tabel yang digunakan untuk project kali ini adalah tabel users yang dimana nantinya beberapa kolom akan digunakan pada program backend dengan method GET, POST, dan PUT

• Backend Program (Flask)

Untuk membuat dan menjalankan program backend disini menggunakan python flask, sebelum membuat program, terlebih dahulu membuat virtual environment dengan command python3 -m venv venv. selanjutnya membuat file program dengan nama app.py adapun isi dari file tersebut dapat dilihat dibawah

dapat dilihat pada gambar, digunakan library mysql connector untuk menghubungkan antara flask dan mysql

GET:

untuk method get, disini digunakan untuk mencari user yang terdapat pada tabel users

POST:

untuk method  post digunakan untuk menambah user kedalam tabel yang telah dibuat terlebih dahulu

PUT:

method PUT disini digunakan untuk melakukan update pada user di tabel, dengan parameter id_user

 

• Uji Coba menggunakan Postman
  GET:
  
  
  POST:
  
  
  PUT:
  

B. Frontend (React)

Pada bagian frontend digunakan react sebagai framework pengembangan yang nantinya akan diintegrasikan dengan flask pada bagian backend, disini juga akan digunakan API eksternal yang dimana pada project ini digunakan API dari Linkedin untuk menampilkan pekerjaan yang di post pada platform tersebut. untuk bagian flask akan ada beberapa update pada kode

Update pada app.py:

gambar diatas menunjukkan kode untuk menambahkan url untuk API eksternal

kode diatas berisi method get untuk mencari pekerjaan sesuai parameter keyword yang dimasukkan

untuk bagian frontend dapat dilihat pada kode diatas, kode diatas berisi fungsi untuk login yang dimana akan memanfaatkan API dari database yang ada pada VM sebelumnya untuk mengambil user dari tabel user dan melakukan fungsi agar dapat login apabila memasukkan username dan password yang sesuai pada tabel users. selanjutnya yaitu fungsi untuk mencari lowongan pekerjaan dengan method get untuk menampilkan lowongan pekerjaan yang tersedia pada linkedin. untuk tampilannya diatur pada file app.css yang dapat dilihat pada gambar dibawah ini

Output Aplikasi :

Login Page:

Search Page:

Tombol View Job: