EAS PWEB - Gym Journal Applikasi Tracking Workout

Nama : Kadek Fajar Pramartha Yasodana

NRP : 5025231185

Kelas : PWEB


EAS PWEB

1. Apa yang dimaksud dengan Back-End. Jelaskan ruang lingkup pekerjaan Back-End Engineer dan skill yang dibutuhkan.

  • Backend merupakan sebuah profesi dalam bidang programming yang bertugas untuk membuat alurnya logika dari applikasi atau dalam kata lainnya membuat server dari suatu applikasi mau itu web atau mobile dan lainnya. Back-End mendapatkan istilahnya dengan halnya seperti Front-End, Back-End tidak terlihat secara langsung oleh pengguna yang menggunakan applikasi karena Back-End bisa dibilang merupakan server dari applikasi, beda dengan Front-End yang terlihat secara langsung seperti interface page applikasi.
  • Ruang Lingkup Pekerjaan Back-End Engineer meliputi merancang desain arsitektur server dari applikasi, merancang API, merancang query untuk pengintegrasian applikasi dan database, dan lingkup lainnya yang berbau hal server.
  • Skill yang dibutuhkan oleh Back-End Engineer adalah skill dalam pemahaman alur kerjanya integrasi server agar bisa memberikan interface kepada pengguna, memahami alur dari API Call meliputi request dan Response dari protocol HTTP, memahami cara untuk melakukan query pada database, serta memahami cara menggunakan terminal dengan baik, mengingat Back-End banyak berurusan dengan server dan network, skill menggunakan terminal terutama linux sangatlah menguntungkan untuk melakukan otomasi, debugging, dan lainnya.

2. Buatlah Rancangan Aplikasi yang diambil dalam Final Project

Applikasi yang kami buat merupakan sebuah applikasi untuk melakukan tracking progress GYM. Berikut adalah rancangan yang telah kami buat untuk applikasi kami.

Architecture

  • Frontend :
  1. View : Vanilla HTML, Vanilla CSS, TailwindCSS
  • Backend : 
  1. Runtime : NGINX, PHP-FPM
  2. Database : PostgreSQL
  3. Architecture : MVC
  4. Deployment : Docker

Design

  • Desain UI/UX



  • Desain Database




3. Deskripsikan kegunaan dan ruang lingkup aplikasi

Applikasi yang kami buat bernama Gym Jounal. Gym Journal merupakan sebuah website untuk melakukan tracking dari progress workout kita secara efisien, Applikasi Gym Journal juga menyediakan leaderboard untuk menambahkan motivasi dari pengguna untuk melakukan hal positive agar bisa meninggikan scorenya.

Ruang Lingkup dari Applikasi Meliputi: 

  • Landing Page : Merupakan landing page yang memberikan sedikit deskripsi dan overview dari applikasi, pada page ini terdapat tombol untuk melakukan sign in
  • Auth Page : Merupakan page yang bisa user gunakan untuk melakukan Sign In, pada applikasi ini, kami menggunakan Authentikasi dari Google yaitu Google OAuth untuk memudahkan user melakukan Sign-in tanpa memerlukan pembuatan password baru.
  • Verify Page : Merupakan page yang digunakan oleh user jika user baru pertama kali sign in, Verify page berisi penginputan nama user, date of birth, dan foto profile yang nantinya akan disubmit dan dilakukan update data dari user agar data lengkap
  • Home Page : Merupakan page yang digunakan user jika telah melakukan sign in dan sudah terverifikasi. Page ini berisi sebuah greeting untuk user, list Workout Plan yang sudah dibuat oleh user dan tombol untuk membuat workout plan baru, list Workout Log yang sudah di submit oleh user, dan 2 tombol untuk melakukan export PDF, 1 untuk mengeksport seluruh workout plan, 1 untuk mengeksport seluruh workout logs beserta profile user.
  • Plan Page : Merupakan page yang digunakan oleh user untuk mengedit sebuah Workout Plan, pada page ini user bisa mengganti nama plan. menambahkan atau mengurangi exercise, menambah atau mengurangi exercise set, dan mengganti weight dan reps pada sebuah set.
  • Train Page : Merupakan page yang digunakan oleh user jika user memulai sebuah plan, user bisa melakukan checklist sets, melihat timer, dan jika semua set sudah di checklist, user bisa menyelesaikan dan submit data ke database.
  • Leaderboard Page : Merupakan page yang digunakan oleh user untuk melihat siapa saja orang yang memiliki poin tertinggi, berdasarkan log dari user itu.

4. Implementasikan Aplikasi yang telah didesain dengan menggunakan teknologi web tanpa framework

Applikasi kami, kami implementasi tanpa menggunakan framework seperti Laravel, kami hanya menggunakan PHP Native yang dijalankan PHP-FPM dan beberapa library lainnya untuk menunjang jalannya applikasi kami seperti Google OAuth untuk login, Tailwindcss untuk mempermudah Front End, Jest untuk testing, FPDF untuk melakukan export PDF. Kami mengimplementasikan applikasi dengan waktu kurang lebih 2 minggu, berikut adalah source code dari project kami, beberapa code yang penting, dan beberapa screenshot dari applikasi jika di deploy.

Source Code : GitHub

index.php

<?php

require_once __DIR__ . '/../vendor/autoload.php';
use Symfony\Component\Dotenv\Dotenv;
use University\GymJournal\Backend\App\Router;
use University\GymJournal\Backend\Controller\LandingController;

$dotenv = new Dotenv();
$dotenv->load(__DIR__.'/../.env');

Router::load();
Router::use(new LandingController());

Router.php

<?php
namespace University\GymJournal\Backend\App;
use University\GymJournal\Backend\App\Controller;

class Router
{
    public static array $rawUriParsed;
    public static string $rawPath;
    public static string $method;
    public static array $paths;
    public static array $queries;
    public static $body;
    public static array $headers;

    private static ?Controller $now = null;
   
    public static function load()
    {
        self::$rawUriParsed = parse_url($_SERVER['REQUEST_URI']);
        self::$rawPath = self::$rawUriParsed['path'];
        self::$method = $_SERVER['REQUEST_METHOD'];

        self::$paths = explode('/', self::$rawPath);

        Logger::Info('Incoming '.self::$method.' '.self::$rawPath);

       
        self::$queries = [];
        if(isset(self::$rawUriParsed['query']))
        {
            parse_str(self::$rawUriParsed['query'], self::$queries);
        }

        $trimed = [];
        for($i = 0; $i < count(self::$paths); $i++)
        {
            $current = trim(self::$paths[$i]);
            if($current === '')
            {
                continue;
            }

            $trimed[] = $current;
        }
        self::$paths = $trimed;
        self::$headers = getallheaders();

        self::$body = [];
        $bodyStream = file_get_contents('php://input');

        if($bodyStream)
        {
            self::$body = json_decode($bodyStream, true);
        }
    }
    public static function use(Controller $controller)
    {
        $call = '/';
        self::$now = $controller;

        $controller->load();

        for($i = 0; $i < count(self::$paths); $i++)
        {
            $currentPath = '/'.self::$paths[$i];
            $routing = self::$now->routes[self::$method];

            if(!isset($routing[$currentPath]))
            {
                HTTPUtils::send404HTML();
                return;
            }
            $item = $routing[$currentPath];

            if($item instanceof Controller)
            {
                $item->load();
                self::$now = $item;
                $call = '/';
            }
            else if($i == (count(self::$paths) - 1))
            {
                if(is_callable($item))
                {
                    $call = $currentPath;
                    break;
                }
                else
                {
                    self::$now = null;
                    break;
                }
            }
            else
            {
                self::$now = null;
                break;
            }
        }

        if(self::$now === null)
        {
            HTTPUtils::send404HTML();
            return;
        }

        if(!isset(self::$now->routes[self::$method][$call]))
        {
            HTTPUtils::send404HTML();
            return;
        }
        $function = self::$now->routes[self::$method][$call];

        if(is_callable($function))
        {
            call_user_func($function);
        }
        else
        {
            HTTPUtils::send404HTML();
        }
    }
    public static function bodyOrNull($key)
    {
        if(!isset(self::$body[$key]))
        {
            return null;
        }

        return self::$body[$key];
    }
    public static function addKeyBodyOrNull($key, array &$arr, bool &$safeCheck)
    {
        if(!isset(self::$body[$key]))
        {
            $safeCheck = false;

            return;
        }

        $arr[$key] = self::$body[$key];
    }
}
?>

Screenshot









5. Buat PPT presentasi yang menunjang Demo Aplikasi

Link Google Slide : Google Slide


6. Demokan aplikasi dengan membuat video dan diupload di Youtube.

Link Profile Youtube : Youtube



Comments

Post a Comment

Popular posts from this blog

Pertemuan 13 OOP - Abstraksi & Simulasi Fox & Rabit

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PBO A Abstraksi & Simulasi Fox & Rabit 1. Tuliskan implementasi dari program kecil Abstract Class Makhluk hidup yang diwariskan kepada manusia, hewan, dan tumbuhan Source Code :  GitHub Pada soal nomor ini, kita hanya perlu membuat sebuah abstract class makhluk hidup dengan beberapa metode abstrak juga. Setelah itu kita inherit classnya menjadi beberapa subclass Manusia, Hewan, dan Tumbuhan. Terdapat beberapa class seperti MakhlukHidup.java public abstract class MakhlukHidup { protected String name ; public MakhlukHidup (String name) { this . name = name ; } public abstract void doSomething () ; public abstract void grow () ; public abstract void breathe () ; } Class ini merupakan class yang sebagai template sebuah class makhluk hidup. dengan beberapa method yang harus di override oleh subclassnya yaitu doSomething, grow, dan breathe Manusia.java public class Manusia extends M...
Read more

Pertemuan 6 KPPL - Implementasi Web ChatBot Tech Support System, Web & Prototipe & Metodologi

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelompok : 7 Nama Kelompok : - I Gusti Ngurah Arya Sudewa (5025231030) - Randi Palguna Artayasa (5025231020) - Kadek Fajar Pramartha Yasodana (5025231185) Kelas : KPPL E Mengimplementasikan Applikasi Nama Aplikasi : HelpThink Internet Chat Bot Support System Link Hosting :  Vercel Source Code :  GitHub Metode : Waterfall Setelah kita menguraikan hasil studi kasus pada Paper tugas sebelumnya, kita juga sudah menguraikan tahapan tahapan yang akan kita lakukan untuk membuat aplikasi support system berdasarkan ilmu yang telah didapatkan. Seperti tugas sebelumnya aplikasi yang kita buat bernama HelpThink . HelpThink merupakan aplikasi web chatbot technical support system, yang bisa digunakan oleh pengguna untuk bertanya mengenai permasalahannya terhadap suatu jaringan internet. Applikasi ini menggunakan metode waterfall. Selain itu tahapan-tahapan pembuatan applikasi antara lain: Requirement tahapan Requirement pada aplikasi He...
Read more

Pertemuan 11 PWEB - Membuat Website CRUD PHP MySQL

Image
Nama : Kadek Fajar Pramartha Yasodana NRP : 5025231185 Kelas : PWEB E Membuat Website CRUD Pendaftaran Siswa PHP MySQL Untuk membuat website CRUD ini saya menggunakan php, mysql, dan beberapa tools lain yang memudahkan development seperti tailwindcss dan Docker. Docker nantinya akan digunakan untuk deployment agar hasil yang didapatkan sudah pasti. Untuk runner dari php saya menggunakan nginx dan php-fpm agar lebih standard. Source Code :  GitHub Untuk folder project terdapat beberapa folder dan file folder root : Untuk menyimpan shell code dan config lainnya folder Dockerfile : Untuk menyimpan file Docker folder public : Untuk menyimpan file php yang nantinya akan dilakukan request. nginx.conf : Config dari nginx yang akan digunakan untuk menjalankan website deploy.sh : Script untuk melakukan deploy menggunakan docker. Hasil index.php form-daftar.php list-siswa.php Melakukan Input form-update.php & Melakukan Edit id:12 Jl.Mulyosari -> jl.Denpasar Melakukan Delete id:12 API ...
Read more